/* ============================================================
   Invariance | Arc — V19 mobile layer
   Reconceives the phone experience as app-like surfaces rather
   than a shrunk desktop page: a full-screen sheet menu with
   grouped rows, a sticky horizontally scrolling section rail,
   a contextual bottom action bar, and touch ergonomics
   (44px targets, safe-area insets, momentum scrolling).
   Loads after clarity.css on every page; desktop is untouched.
   ============================================================ */

/* Chrome on Android inflates prose blocks (text autosizing) unless the standard
   property is present; the -webkit- form alone is ignored by newer Chromium, so
   body copy rendered ~1.6x larger than its declared size while fixed-size chips
   and bars stayed correct. Declared on both html and body, all three spellings. */
html, body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media (max-width: 1020px) {

  /* ---------- Header: compact, calm ---------- */
  header.site .navrow { min-height: 56px; }
  .navcta { display: none; } /* primary CTA moves to the bottom bar */
  .menu > summary {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 4px 0 10px;
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    cursor: pointer; list-style: none; user-select: none;
  }
  .menu > summary::-webkit-details-marker { display: none; }

  /* ---------- Full-screen sheet menu ---------- */
  .menu[open] > summary { position: relative; z-index: 92; }
  .menu-panel {
    position: fixed !important; inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw; max-width: none !important;
    max-height: none !important; height: 100dvh;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: var(--limestone) !important;
    box-shadow: none !important;
    z-index: 90;
    display: flex !important; flex-direction: column;
    padding: calc(60px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    animation: sheet-in 240ms var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) both;
  }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }

  /* Rows: top-level entries read as section heads, sub entries as rows */
  .menu-panel a {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 var(--page-gutter, 24px);
    font-family: var(--fs); text-decoration: none;
    border-bottom: 1px solid var(--rule-soft);
  }
  /* Top-level rows are links to their own page, but styled as section heads
     they read as labels. A trailing chevron marks them as tappable so the
     group parent can be used to skip past its children. */
  .menu-panel a:not(.sub):not(.menu-cta) {
    font-size: 16px; font-weight: 600; color: var(--ink);
    margin-top: 10px; border-top: 1px solid var(--rule);
    justify-content: space-between;
  }
  .menu-panel a:not(.sub):not(.menu-cta)::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px;
    border-right: 1.5px solid var(--ink-mute); border-top: 1.5px solid var(--ink-mute);
    transform: rotate(45deg); margin-left: 12px;
  }
  .menu-panel a:not(.sub):not(.menu-cta):first-of-type { margin-top: 0; }
  .menu-panel a.sub {
    font-size: 14.5px; font-weight: 400; color: var(--ink-soft);
    padding-left: calc(var(--page-gutter, 24px) + 16px);
  }
  .menu-panel a.sub::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--rule-strong); margin-right: 10px; }
  .menu-panel a:active { background: var(--ink-tint); }
  .menu-k {
    display: block; padding: 16px var(--page-gutter, 24px) 6px;
    font-family: var(--fs); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
  }

  /* Primary CTA closes the list rather than floating over it: the menu is
     long enough that a fixed button obscured the rows behind it. */
  .menu-panel a.menu-cta {
    margin: 22px var(--page-gutter, 24px) 0;
    justify-content: center; min-height: 50px;
    background: var(--teal); color: #fff !important; font-size: 15px; font-weight: 600;
    border: 0; border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-md);
    z-index: 91;
  }
  .menu-panel a.menu-cta:active { background: var(--teal-deep); }

  /* JS-injected close affordance */
  .m-close {
    position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 14px; z-index: 92;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    font: 400 26px/1 var(--fs); color: var(--ink);
    background: var(--panel); border: 1px solid var(--rule); border-radius: 999px;
    cursor: pointer;
  }
  .m-sheet-brand {
    position: fixed; top: calc(14px + env(safe-area-inset-top)); left: var(--page-gutter, 24px); z-index: 92;
    font-family: var(--fs); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink);
  }
  body.m-lock { overflow: hidden; }
  /* The sheet's close button is fixed at the same corner as the header's Menu
     summary, which sits in a higher stacking context, so the glyph landed on
     the word "Menu" and taps hit the summary. Hiding the summary while the
     sheet is locked open leaves one control in that corner. */
  body.m-lock details.menu > summary { visibility: hidden; }
}

/* ---------- Section rail (on-page nav) ---------- */
@media (max-width: 780px) {
  .pagenav { position: sticky; top: 0; z-index: 40; backdrop-filter: var(--blur-bar, blur(6px)); background: color-mix(in srgb, var(--limestone) 88%, transparent); }
  .pagenav .wrap {
    flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-top: 9px; padding-bottom: 9px;
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .pagenav .wrap::-webkit-scrollbar { display: none; }
  .pagenav a {
    scroll-snap-align: start; flex: 0 0 auto;
    font-size: 12.5px; min-height: 34px; display: inline-flex; align-items: center;
    padding: 0 13px; border: 1px solid var(--rule); border-radius: 999px;
    background: var(--panel); white-space: nowrap;
  }
  .pagenav a.is-active { border-color: var(--teal); color: var(--teal-deep); background: var(--teal-tint); }
  section[id] { scroll-margin-top: 64px; }
}

/* ---------- Bottom action bar ---------- */
.m-bar { display: none; } /* desktop: bar off */
@media (max-width: 780px) {
  .m-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px var(--page-gutter, 24px) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--limestone) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule);
    transform: translateY(110%); transition: transform 260ms var(--ease-standard, ease);
  }
  .m-bar.is-on { transform: none; }
  .m-bar__k { font-family: var(--fs); font-size: 12px; line-height: 1.35; color: var(--ink-soft); min-width: 0; }
  .m-bar__k b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .m-bar__cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px;
    font-family: var(--fs); font-size: 13.5px; font-weight: 600; color: #fff;
    background: var(--teal); border-radius: 999px; text-decoration: none; white-space: nowrap;
  }
  .m-bar__cta:active { background: var(--teal-deep); }
  body.has-mbar main { padding-bottom: 10px; }
  @media (prefers-reduced-motion: reduce) { .m-bar { transition: none; } }
}

/* ---------- Touch ergonomics and readability ---------- */
@media (max-width: 780px) {
  .btn, .fa-seg button, .fa-viewseg button, .indwf__seg, .arcpair a { min-height: 44px; display: inline-flex; align-items: center; }
  .textlink, .sb-link { padding-top: 6px; padding-bottom: 6px; }
  /* Propagation: ~20 pages set their own card and figure titles straight off
     the type tokens (--size-h3, --size-h4) and their prose off --leading-relaxed,
     so they held desktop values on a phone. Stepping the tokens down here
     reaches every page and every page-scoped class at once, instead of naming
     thirty selectors. mobile.css is the last linked sheet, so this wins over
     tokens.css without !important. */
  :root {
    --size-h1: 32px;
    --size-h2: 26px;
    --size-h3: 20px;
    --size-h4: 18px;
    --leading-relaxed: 1.6;
  }

  /* The few page-scoped titles that hard-code a size rather than using a token. */
  .lane h3, .rung .rq, .dimres, .phase-strip b, .pm-consequence b,
  .lens .lt, .mode .mh, .seqitem .sv, .diverge .d1, .structure .st { font-size: 18px; }
  .quant-val { font-size: 26px; }

  .lede, .seclede { font-size: 16px; line-height: 1.6; }

  /* The homepage runs its own .v21-* vocabulary, which never got a mobile
     step-down: headlines held a flat 30px and prose held its desktop clamp
     floor at relaxed leading, so the homepage read a full notch larger than
     every sub-page on the same phone. Same roles, phone scale.

     Specificity note: the homepage's base .v21-* rules live in an inline
     <style> in the BODY, which is the last stylesheet in the document, so it
     outranks this file at equal specificity. Every selector here is therefore
     qualified with `body` (or written in its full descendant form) to win. */
  body .v21-h2 { font-size: clamp(24px, 6.6vw, 28px); line-height: 1.18; }
  body .v21-lede, body .v21-drift, body .v21-note,
  .v21-tailored .tl__lede, .hw-model__lede, .hw-model__close {
    font-size: 16px; line-height: 1.6;
  }
  body .v21-close, .v21-shift .sh__stmt,
  .v21-verdictline .vl__a, .v21-verdictline .vl__b,
  body .v21-artifacts li {
    font-size: clamp(19px, 5.2vw, 22px); line-height: 1.3;
  }
  /* The prose variant of the closing device carries three sentences, not one,
     so it takes prose leading rather than the display leading above. Must sit
     after that rule: same specificity, so source order decides. */
  .v21-verdictline--prose .vl__a, .v21-verdictline--prose .vl__b {
    font-size: clamp(18px, 4.6vw, 20px); line-height: 1.56;
  }
  .v21-bins .bi b, .v21-pairs .who, .v21-model .mdl b,
  .v21-tailored .tl__close { font-size: 18px; }
  .v21-bins .bi span, .v21-pairs .may, .v21-pairs .req, .v21-model .mdl p,
  .v21-shift .sh__note { font-size: 14.5px; line-height: 1.5; }
  body .bridge-line, #the-pattern .bridge-q { font-size: clamp(19px, 5.2vw, 22px); line-height: 1.3; }
  /* Cormorant runs a small x-height and Libre Franklin a large one, so an 18px
     sans support paragraph optically matched the 36px serif headline on a phone.
     Same faces, smaller support: the headline leads again. */
  .home-hero .home-hero-copy .support, .page-hero .support { font-size: 16px; line-height: 1.6; }
  .wrap { --page-gutter: 22px; }
  footer.site { padding-bottom: 84px; } /* keep footer clear of the bar */

  /* wide tables become swipe surfaces (wrapper injected by mobile.js) */
  .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--page-gutter, 22px) * -1); padding: 0 var(--page-gutter, 22px); }
  .tscroll > table { min-width: 560px; }
}
@media (max-width: 560px) {
  .band { padding-top: 46px; padding-bottom: 46px; }
  .page-hero h1 { font-size: clamp(30px, 8.4vw, 36px); }
  .home-hero .home-hero-copy .support, .page-hero .support { font-size: 15.5px; }
  body .v21-lede, body .v21-drift, .v21-tailored .tl__lede,
  .hw-model__lede, .hw-model__close { font-size: 15.5px; }
}

/* ---------- IA v2 surfaces: phone proportions ----------------------------
   Framed panels sit inside .wrap, which already carries a 22px gutter. Left
   as authored they read as a box inside a box. On the phone the frame keeps
   its rule and drops its own inset so text holds one margin, matching the
   rhythm of the rest of the page. */
@media (max-width: 780px) {
  .conditions {
    margin: 0 calc(var(--page-gutter, 22px) * -1);
    padding: 26px var(--page-gutter, 22px) 24px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .conditions .featcap { margin-top: 22px; gap: 14px; }
  .conditions .fcp { padding-left: 0; padding-right: 0; border-left: 0; border-right: 0; border-radius: 0; background: transparent; }
  .conditions__note { margin-top: 22px; font-size: 13px; }
  .conditions__head .sec { font-size: clamp(24px, 6.6vw, 30px); }

  .facase { margin-top: 22px; gap: 0; }
  .facase .fc {
    margin: 0 calc(var(--page-gutter, 22px) * -1);
    padding: 24px var(--page-gutter, 22px) 22px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .facase .fc + .fc { border-top-width: 1.6px; }
  .facase .fc h3 { font-size: 21px; }
  .facase .fc__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facase .fc__figs > div { padding: 12px 12px 14px 0; }
  .facase .fc__figs > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule); }
  .facase .fc__figs b { font-size: 22px; }
  .facase .fc__figs span { font-size: 11.5px; }
  .facase .fc__q { font-size: 17.5px; }
  .fc__note { font-size: 12.5px; }

  .fa-viewseg { margin-top: 18px; gap: 6px; }
  .fa-viewseg button { padding: 0 15px; font-size: 12.5px; }

  .functions { margin-top: 22px; }
  .functions .fn h3 { font-size: 11.5px; }

  .surfaces--lead { margin-top: 22px; }
  .cvcond { margin-top: 28px; font-size: 20px; }
}
@media (max-width: 380px) {
  .facase .fc__figs { grid-template-columns: 1fr; }
  .facase .fc__figs > div,
  .facase .fc__figs > div:nth-child(even) { padding: 11px 0 12px; border-left: 0; }
}


/* ---------- Sheet menu: name the group parent as its own page ----------
   In the sheet, a group parent is a bold link followed by .sub children, so it
   reads as a heading and never gets tapped. The desktop dropdown already
   solves this with an "Overview" tag on .navsub__self; this gives the sheet
   the same affordance without touching markup on 38 pages. */
@media (max-width: 1020px) {
  .menu-panel a:not(.sub):not(.menu-cta):has(+ a.sub) {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
  }
  /* ::before, not ::after - ::after already draws the chevron on these rows.
     Mirrors the desktop dropdown, which also tags on ::before with order:2. */
  .menu-panel a:not(.sub):not(.menu-cta):has(+ a.sub)::before {
    content: "Overview";
    font-family: var(--fs); font-size: 10px; font-weight: var(--weight-semibold);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
    flex: 0 0 auto; order: 2; margin-left: auto;
  }
  .menu-panel a:not(.sub):not(.menu-cta):has(+ a.sub)::after { order: 3; }
  .menu-panel a:not(.sub):not(.menu-cta):has(+ a.sub):active::before { color: var(--teal); }
}