/* ============================================================================
   ig-mobile.css — the v3 pages on a phone, treated as a product surface rather
   than a narrow desktop.
   ----------------------------------------------------------------------------
   The artboard is drawn at desktop width and its layout is genuinely fluid, so
   nothing here re-does the design: every value below is one of the page's own
   tokens (--bg, --ink, --border, --gold-ink, --surface ...). This layer fixes
   what fluid width alone cannot, measured on the live page at 375x812:

     - The nav's six section links wrapped onto two rows at 17px tall. Six 17px
       targets is not a menu, it is a hazard: WCAG 2.5.5 and the iOS HIG both
       want 44px. They move into a real disclosure sheet (see ig-nav.js).
     - 27 interactive elements were under 44x44, including the theme toggle.
     - The investment slider rendered 4px tall -- the page's one real control,
       effectively untappable.
     - The 3D ribbon occupied 421px of an 812px viewport and spent 670KB of
       WebGL drawing something illegible at 342px wide. It is suppressed here
       and its payload is no longer fetched at all (see ig-ribbon.js).
     - 87 text nodes sat under 14px.

   Everything is scoped to a max-width query except the accessibility and
   input-hygiene rules, which are correct at every size.
   THE HEADER AND ITS SHEET ARE NOT HERE ANY MORE: since 2026-09-17 the header
   is shared by every page, so its rules live in ig-nav.css, loaded by the nav
   partial. This file stays home-only.
   ========================================================================== */

/* ---------------------------------------------------------- every viewport -- */

/* iOS inflates font-size in landscape unless this is set; the page then
   disagrees with its own clamp() scale. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* A visible focus ring is not optional, and the artboard ships none. Keyed to
   :focus-visible so it appears for keyboard and assistive tech without putting
   a ring on every mouse click. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-ink, #f2b95a);
  outline-offset: 3px;
  border-radius: 6px;
}

/* The tap flash fires on any tap, including a scroll that starts on a link. */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* The ledger and any other wide block scroll inside themselves. Momentum plus
   a contained bounce stops a horizontal flick from rubber-banding the page. */
[style*="overflow-x:auto"], [style*="overflow-x: auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* THE PAGE'S ONE REAL CONTROL. A range input with no author styling collapses
   to its 4px track on mobile Safari and Chrome: the thumb is the only target
   and it is far under 44px. This gives it a 44px hit area while keeping the
   visible track slim, which is what the design draws. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 44px;                 /* the TARGET, not the track */
  cursor: pointer;
  touch-action: pan-y;          /* vertical scroll still works from the slider */
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-ink, #f2b95a), rgba(255,255,255,.14));
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-ink, #f2b95a), rgba(255,255,255,.14));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  margin-top: -10px;            /* centre the thumb on a 6px track */
  border-radius: 50%;
  background: var(--gold-hi, #ffd58a);
  border: 2px solid var(--bg, #070b14);
  box-shadow: 0 2px 10px rgba(232,161,60,.5);
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold-hi, #ffd58a);
  border: 2px solid var(--bg, #070b14);
  box-shadow: 0 2px 10px rgba(232,161,60,.5);
}

/* WCAG 2.2 AA (2.5.8 Target Size Minimum) asks for 24x24 CSS px. The artboard's
   desktop nav and footer links render ~17px tall, which fails it even with a
   mouse. Padding the line box costs nothing visually -- the text does not move,
   the target grows around it. The 44px phone floor is handled separately. */
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
/* The FAQ toggles are 814px wide and 20px tall -- wide enough to hit by
   accident, short enough to miss on purpose. `display` is left alone here
   because <summary> needs its list-item box to keep the disclosure marker. */
summary { min-height: 24px; padding-block: 2px; }


/* ------------------------------------------------------------ phone + small -- */
@media (max-width: 860px) {

  /* THE 3D RIBBON IS A DESKTOP FLOURISH. At 342px wide it reads as noise, and
     it was spending 670KB and a WebGL context to do it. Hidden here, and
     ig-ribbon.js does not even fetch three.module.js at this width. The panel
     keeps its figures -- those are the point -- at a height that suits a phone. */
  ig-ribbon { display: none !important; }
  div:has(> ig-ribbon) {
    height: auto !important;
    min-height: 168px;
    padding: 18px 16px;
    display: flex; flex-direction: column; justify-content: flex-end;
  }

  /* A readable floor. The artboard's 11.5-12.5px meta text is fine on a 27"
     display and squinting on a phone. */
  body { font-size: 16px; }
  [style*="font-size:12.5px"], [style*="font-size: 12.5px"],
  [style*="font-size:12px"],   [style*="font-size: 12px"],
  [style*="font-size:11.5px"], [style*="font-size: 11.5px"] { font-size: 13.5px !important; }
  [style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 14px !important; }

  /* Anything that is a link or a button gets a real target. Applied to the
     footer, where the artboard's inline styles are smallest. (The header's
     own 44px rule is in ig-nav.css.) */
  footer a, summary {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  footer a { padding: 2px 0; }

  /* Type: keep the display face from touching the right edge on a 320px phone. */
  h1 { font-size: clamp(32px, 8.5vw, 46px) !important; letter-spacing: -.02em; }
  h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
  p { text-wrap: pretty; }
}

/* ---------------------------------------------------------- reduced motion -- */
/* The sheet still needs to appear; it just appears without travel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}