/* ==========================================================================
   The Color of Time — phone adaptation (loaded by every page)
   --------------------------------------------------------------------------
   The QR code in the printed handbook lands visitors here on their phones,
   so small portrait viewports are a first-class citizen. The page bodies
   already adapt through clamp() and flex-wrap; the one desktop-only piece
   is the sticky header, which stacks into three tall rows on a phone and
   eats half the screen.

   The headers are duplicated per page with inline styles and no classes,
   so this sheet adapts them structurally: element selectors + !important.
   Header layout on phones becomes two compact rows:
     row 1  wordmark ......... language pill · live meter
     row 2  nav as one swipeable line (all six links, no wrapping)
   Everything here is scoped to small viewports; desktop is untouched.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

/* Anchor jumps always land below the sticky header. */
html { scroll-padding-top: 120px; }

@media (max-width: 640px) {
  html { scroll-padding-top: 104px; }

  /* ---- compact header ---- */
  header > div {
    padding: 8px 14px 0 !important;
    gap: 4px 8px !important;
  }
  /* wordmark */
  header > div > a:first-child {
    font-size: 17.5px !important;
  }
  /* language pill sits right, next to the meter */
  header > div > div:first-of-type {
    margin-left: auto;
  }
  /* live meter: drop the small-caps label, keep the reading */
  header > div > div:last-child {
    padding-left: 10px !important;
    gap: 7px !important;
  }
  header > div > div:last-child > :first-child { display: none !important; }
  header > div > div:last-child > div:last-child { width: 42px !important; }

  /* nav becomes the second row: one swipeable line, thumb-sized targets */
  header nav {
    order: 10;
    flex: 0 0 100%;
    margin-left: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 3px 2px 9px;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a {
    flex: 0 0 auto;
    padding: 7px 12px !important;
    font-size: 14px;
  }
  /* Overflow affordance (2026-07-10 review: the swipeable row gave no hint, so the last
     link just looked chopped off). A right-edge fade says "there is more"; the extra
     trailing padding lets the final link scroll fully PAST the fade zone, so nothing
     readable ever sits under it. Mask-less browsers simply show the old hard edge. */
  header nav {
    padding-right: 36px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }

  /* ---- long formulas scroll instead of clipping (Method appendix) ---- */
  mjx-container[display="true"] {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 2px 0 4px;
  }

  /* ---- the TOUR chip vs the Lab rail (2026-07-10 review: the chip slightly
     covers the rail's last card on phones). The chip shrinks, and the rail gets
     enough tail padding that its last row can always scroll clear of the chip. ---- */
  .tcot-tour-chip { padding: 7px 10px; right: 12px; }
  .lab-rail { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* Very narrow phones: tighten the first header row a little more,
   and let the meter travel as just its number so the row never wraps. */
@media (max-width: 360px) {
  header > div > a:first-child { font-size: 16px !important; }
  header > div > div:last-child { padding-left: 7px !important; gap: 5px !important; }
  header > div > div:last-child > div:last-child { display: none !important; }
}

/* Fold-phone cover screens (about 280px wide): even the compact first row
   wraps. The meter is decoration; the wordmark and language pill are not. */
@media (max-width: 320px) {
  header > div > div:last-child { display: none !important; }
}

/* Tablets and landscape phones (641-1023px): the desktop header wraps into
   a cramped 2-3 row stack here (up to 127px at 641px). Keep the desktop
   look but give the nav its own tidy centered row, which also serves
   landscape phones that fall in this width band. */
@media (min-width: 641px) and (max-width: 1023px) {
  header > div {
    padding-top: 9px !important;
    padding-bottom: 4px !important;
    row-gap: 2px !important;
  }
  header > div > div:first-of-type { margin-left: auto; }
  header nav {
    order: 10;
    flex: 0 0 100%;
    margin-left: 0 !important;
    justify-content: center;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 7px;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { flex: 0 0 auto; }
}