/* toca.io's additions on every /health/ page, loaded after css/site.css (the shared toca.health stylesheet) and
   css/io.css. The pages carry body.health, not body.io, so toca.io's layout layer stays off them, as on the law-firm
   pages (css/legal-pages.css); toca.io's strip, nav, sub-nav and footer sit in a .io wrapper (gen.py health_chrome).
   Mat, 12 Nov 2026. */

/* ── What the shared pieces (Ami, the BBS, back to top) still need from body.io ── */
body.health { --bbs-black: #0e0d0c; }

/* ── toca.health's own rules that css/site.css does not carry (from toca.health's copy, 10 Nov 2026) ── */
/* Compare page: what each option does well, beside what eTriage adds */
.cmp-glance dt a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-rule); }
.cmp-glance dt a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.duo--lists { align-items: start; margin-top: var(--space-2xl); }
.duo--lists .kicker { margin-bottom: 0; }
.duo--lists .ticks { margin-top: var(--space-md); }
.cmp-src { margin: 0; max-width: 70ch; font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 60rem) {
  .cmp-glance dt, .cmp-glance dd { grid-column: 1; }
  .cmp-glance dt { padding-bottom: var(--space-xs); }
  .cmp-glance dd { border-top: 0; padding-top: 0; }
}
/* The journey's words column can be taller than a short or narrow window; the stage grows rather than overflows,
   and short or narrow desktop windows get an even split and a tighter column. Phones keep their own layout. */
@media (min-width: 60.0625rem) {
  body.health .journey-stage { height: auto; min-height: 100svh; }
}
@media (min-width: 60.0625rem) and (max-height: 56rem), (min-width: 60.0625rem) and (max-width: 75rem) {
  body.health .journey-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: var(--space-lg); gap: var(--space-xl); }
  body.health .j-state { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-bottom: var(--space-md); }
  body.health .j-steps { gap: var(--space-sm); }
  body.health .j-steps li { grid-template-columns: 4.5rem 1fr; gap: var(--space-sm); }
  body.health .j-steps .jl b { font-size: var(--text-sm); }
  body.health .j-note { margin-top: var(--space-md); }
}

/* ── toca.health's own header (Mat, 12 Nov 2026), under toca.io's family strip ──
   site.css lays the header out as on toca.health; these are the parts it does not carry. */
body.health .wordmark img.lockup { height: 26px; width: auto; display: block; }
body.health .family + .nav { padding-top: var(--space-lg); }
/* the strip lines up with the header's logo and button, which run the full width as on toca.health, not toca.io's centred column */
body.health .family > .band-narrow { max-width: none; margin-inline: 0; }
/* the way back to toca.io: set apart by a hairline, in the strip's mono type, so it reads as somewhere else */
body.health .nav-links .nav-io { margin-left: var(--space-xs); padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .02em; }
body.health .nav--film .nav-links .nav-io { border-left-color: rgba(253,251,255,.3); }
@media (max-width: 60rem) {   /* in the phone menu it is the last row, with a rule above instead */
  body.health .nav-links .nav-io { margin-left: 0; padding-left: 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
}
@media (max-width: 40rem) { body.health .wordmark img.lockup { height: 22px; } }

/* ── The health home: the strip and header laid over the film, as on toca.health ──
   The wrapper is the absolute layer; the header keeps .nav--film for its white type but sits in the flow. */
.health-top--film { position: absolute; inset: 0 0 auto 0; z-index: var(--z-sticky); }
.health-top--film .nav--film { position: relative; inset: auto; }
.health-top--film .family { color: rgba(253,251,255,.72); border-bottom-color: rgba(253,251,255,.22); }
.health-top--film .family a:hover, .health-top--film .family a[aria-current] { color: #fdfbff; }
.health-top--film .family .nerd { color: rgba(253,251,255,.72); }
.health-top--film .family .nerd:hover { color: #fdfbff; background: rgba(13,6,24,.5); }
.health-top--film :focus-visible { outline-color: #fdfbff; }
/* the film fold reserves the strip's and the nav's height over it, plus a clear gap under them: the health hero is
   taller than the law-firm one (four-line headline, a paragraph, three links), so on a desktop window it grows up to
   the header and the kicker sat against it (Mat, 12 Nov 2026). 64px on desktop, about 24px on a phone. */
body.health .film-fold { padding-top: calc(var(--space-lg) * 2 + 3rem + 2.2rem + clamp(var(--space-lg), 5vw, var(--space-2xl)) + env(safe-area-inset-top, 0px)); }

/* ── The frame (see io.css): past 1920px the film's text and pause button and the logo strip centre with the nav ── */
body.health .film-annotation { margin-left: max(0px, calc(50% - var(--frame) / 2)); }
body.health .film-pause { right: var(--frame-pad); }
body.health .proof-bar--logos { padding-left: var(--frame-pad); padding-right: var(--frame-pad); }