/* Pretty layout for crione-inv-t / instruction tables on /store/ pages.
   Column 1 (instruction), 2 (crione-eq formula), 3 (crione-who origin).
   Fixed-percentage widths so the ORIGIN column stops being squished into
   one-word-per-line towers; word-break stays natural. */
.crione-invwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.crione-inv-t { table-layout: fixed; width: 100%; border-collapse: collapse; }
.crione-inv-t th,
.crione-inv-t td {
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,.08);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.5;
}
/* Column widths — instruction 18%, formula 46%, origin 36% */
.crione-inv-t th:nth-child(1),
.crione-inv-t td:nth-child(1) { width: 18%; }
.crione-inv-t th:nth-child(2),
.crione-inv-t td:nth-child(2),
.crione-inv-t td.crione-eq       { width: 46%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: .92em;
  overflow-wrap: anywhere;  /* long equations may need to break mid-token */
}
.crione-inv-t th:nth-child(3),
.crione-inv-t td:nth-child(3),
.crione-inv-t td.crione-who      { width: 36%; }

/* Mobile: give the ORIGIN column a bit more room by trimming instruction */
@media (max-width: 700px) {
  .crione-inv-t { font-size: .93em; }
  .crione-inv-t th:nth-child(1),
  .crione-inv-t td:nth-child(1) { width: 22%; }
  .crione-inv-t th:nth-child(2),
  .crione-inv-t td:nth-child(2),
  .crione-inv-t td.crione-eq    { width: 40%; }
  .crione-inv-t th:nth-child(3),
  .crione-inv-t td:nth-child(3),
  .crione-inv-t td.crione-who   { width: 38%; }
}

/* Very narrow (<=420px): collapse to two-line stacked cells for readability */
@media (max-width: 420px) {
  .crione-inv-t, .crione-inv-t thead, .crione-inv-t tbody,
  .crione-inv-t tr, .crione-inv-t th, .crione-inv-t td { display: block; width: 100% !important; }
  .crione-inv-t thead { display: none; }
  .crione-inv-t tr { border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: 6px 8px; margin: 8px 0; }
  .crione-inv-t td { border: 0; padding: 4px 0; }
  .crione-inv-t td.crione-eq  { font-size: .95em; }
  .crione-inv-t td.crione-eq::before { content: "Formula: "; font-weight: 600; }
  .crione-inv-t td.crione-who::before { content: "Origin: "; font-weight: 600; }
}


/* Beat the product-description inline rule that has
   `.crione-pd table.crione-inv-t td.crione-eq { white-space: nowrap }`.
   Long equations must wrap or they overflow into the ORIGIN column. */
.crione-pd table.crione-inv-t td.crione-eq,
.crione-inv-t td.crione-eq {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word;
}