/* Nova Peptid — the mobile fixes, from what a real Chrome at 360px actually reported.
 *
 * Every rule here exists because tools/mobile-audit.mjs measured a defect, not because a checklist
 * said so. The four findings, in the order they mattered:
 *
 *   1. EVERY PAGE SCROLLED 58px SIDEWAYS. Three causes, all of them mine.
 *   2. The skip link sat at inset-inline-start:-9999px, which is 9,999px of page to the left. The
 *      old trick for hiding a skip link, and it creates exactly the horizontal overflow it is
 *      invisible enough for nobody to notice on a desktop.
 *   3. The header's cart button overflowed by 43px at 360px: logo plus nav plus button do not fit.
 *   4. Data tables kept their intrinsic width. The row-to-block rule at 620px restyled the cells but
 *      the <tr> still measured as a table row, so a five column price table forced the page 159px
 *      wide. A table has to actually stop being a table, not just look like it is not one.
 *
 * Then the readability findings: 39 pieces of text under 12px on the home page alone, and 24 tap
 * targets under 24px. Both are things a phone punishes and a desktop never shows you.
 *
 * House rule: no em dashes.
 */

/* ---------------------------------------------------------------- the skip link */
/* Off-screen without being off-canvas: clipped to nothing, still focusable, still read by a screen
   reader, and occupying no width. inset-inline-start:-9999px did all of that except the last one. */
.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  inset-inline-start: auto;
  top: auto;
}
.skip:focus {
  position: fixed;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip-path: none;
  inset-inline-start: 8px;
  top: 8px;
  z-index: 100;
  background: var(--signal);
  color: #fff;
}

/* ---------------------------------------------------------------- tables */
/* Below the breakpoint a data table becomes a stack of blocks. The table, the row and the cells all
   have to change display, or the row keeps its table-row measurement and pushes the page out. */
@media (max-width: 620px) {
  .tw { overflow-x: visible; }
  table.data,
  table.data tbody,
  table.data caption { display: block; width: 100%; max-width: 100%; }
  table.data tbody tr { display: block; width: 100%; box-sizing: border-box; }
  table.data tbody th,
  table.data tbody td { display: block; width: 100%; box-sizing: border-box; }
  /* the spec table on a product page is two columns and reads fine as two columns, but it must not
     let a long value push the page out */
  table.spec-table { display: block; width: 100%; }
  table.spec-table tbody, table.spec-table tr { display: block; width: 100%; }
  table.spec-table th, table.spec-table td { display: block; width: 100%; padding-block: 4px; }
  table.spec-table th { padding-top: 12px; }
}
/* Anything still too wide scrolls inside its own box rather than taking the page with it. */
.tw { max-width: 100%; }
@media (min-width: 621px) {
  .tw { overflow-x: auto; }
}

/* ---------------------------------------------------------------- the header */
@media (max-width: 860px) {
  /* the nav is already hidden here; the cart must be allowed to shrink and the logo to give way */
  .site-head__row { gap: 12px; min-height: 60px; }
  .site-head__acts { flex: none; margin-inline-start: auto; }
  .site-head__acts .btn { padding: 10px 16px; font-size: 14px; }
  .mark__word { font-size: 17px; }
  .mark__lock { height: 28px; }
  .mark__np { width: 38px; }
  .mark__np span { font-size: 16px; }
  .mark { gap: 9px; }
}
@media (max-width: 400px) {
  /* at the narrowest widths the wordmark goes and the mark alone carries the brand */
  .mark__word { display: none; }
}

/* ---------------------------------------------------------------- readable type */
/* Nothing under 12px on a phone. The mono labels, eyebrows, table headings and captions were
   between 10.5 and 11.5, which is legible on a 27 inch screen and not on a phone held at arm's
   length. The monospace figures matter most: they are the prices and the sizes. */
@media (max-width: 900px) {
  .eyebrow, .jump__t, table.data caption, table.data thead th,
  .note__title, .site-foot h4, table.spec-table th, .spec-table th, .obits, .otot span,
  .refs__m, .refs__l, .tnote, .card__meta, .ccard__s, .ccard__p span,
  .facts__i span, .rel__i span, .picker em, .mono, .tag, .chip,
  .crumbs, .site-foot h4, .site-foot__legal { font-size: 12.5px; }
  .ccard__c, .fbt__t span { font-size: 13.5px; }
  .tag { padding: 5px 11px; }
  table.data tbody th, table.data tbody td { font-size: 15px; }
  table.data tbody td::before { font-size: 11.5px; }   /* the column label, deliberately small */
}

/* ---------------------------------------------------------------- tap targets */
/* 24px is the floor. Breadcrumbs, pills and the small links in a card were between 16 and 21px
   tall, which is a thumb-width miss away from the wrong link. */
@media (max-width: 900px) {
  .crumbs { gap: 6px 10px; }
  .crumbs a { padding-block: 5px; display: inline-block; min-height: 24px; }
  .jump { gap: 4px 14px; }
  .jump a { padding-block: 7px; display: inline-block; min-height: 26px; }
  .pill, .pills a { min-height: 34px; display: inline-flex; align-items: center; }
  .az__g a { padding-block: 6px; min-height: 28px; }
  .refs__l { display: inline-block; padding-block: 5px; min-height: 24px; }
  .site-foot li { margin-bottom: 2px; }
  .site-foot li a { display: inline-block; padding-block: 6px; min-height: 28px; }
  .ck-rm { padding-block: 6px; min-height: 26px; }
  /* a card is one big tap target, so its inner text does not need to be one as well */
}

/* ---------------------------------------------------------------- grids at phone width */
@media (max-width: 560px) {
  /* two product cards side by side at 360px leaves each about 150px, which is a thumbnail and a
     truncated name. One column, full size. */
  .grid, .grid--wide { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .rel { grid-template-columns: 1fr; }
  .az { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- the last resort */
/* If anything still overflows, it scrolls inside itself rather than taking the page sideways. This
   is a guard, not a fix: the audit still reports the element so it can be dealt with properly. */
html, body { max-width: 100%; overflow-x: clip; }

/* The citation meta and the PMID link sat on one line and overlapped at phone width. */
@media (max-width: 900px) {
  ol.refs li { padding-left: 34px; }
  .refs__m { display: block; }
  .refs__l { margin-inline-start: 0; margin-top: 4px; }
  /* the calculator is two columns from 821px up; below that it is one and must not be squeezed */
  .calc { grid-template-columns: 1fr; }
  .calc__in, .calc__out { min-width: 0; max-width: 100%; }
  .calc__r { flex-wrap: wrap; }
  .calc__in select { width: 100%; flex: 1 1 auto; }
}

/* A table that is not inside .tw still must not take the page sideways. */
table.data, table.spec-table { max-width: 100%; }
@media (max-width: 900px) {
  table.data, table.data tbody, table.data caption { display: block; width: 100%; max-width: 100%; }
  table.data tbody tr { display: block; width: 100%; box-sizing: border-box; }
  table.data tbody th, table.data tbody td { display: block; width: 100%; box-sizing: border-box; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.data tbody td::before { content: attr(data-l); font-family: var(--mono); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); display: block; }
  table.spec-table, table.spec-table tbody, table.spec-table tr { display: block; width: 100%; }
  table.spec-table th, table.spec-table td { display: block; width: 100%; padding-block: 4px; }
  table.spec-table th { padding-top: 12px; }
}

/* The last few the audit found: a form label at 11.5px, the per-mg figure on a card, and the
   cross-sell rows whose link was 18px tall. */
@media (max-width: 900px) {
  .calc__f label, .ck-f > span, .fbt__a .mono { font-size: 12.5px; }
  .fbt__t a { display: inline-block; padding-block: 5px; min-height: 26px; }
  .fbt__i { grid-template-columns: 52px 1fr; row-gap: 8px; }
  .fbt__a { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; gap: 12px; align-items: center; }
}

/* the calculator result label, the last one under 12px */
@media (max-width: 900px) { .calc__big span { font-size: 12.5px; } }