/* brain-page.css: the brain page family's own rules (Phase 1, Oct 6 2026; pages_brain.py links it
   with asset_css after style.css, where the prototype's inline style blocks sat). Two blocks, each
   copied word for word from the locked prototype:
     1. design/final/brain.html, its inline style: the credits block, the explorer's label sizes
        and the lab's edge (/brain).
     2. design/final/credits.html, its inline style: the full model credits page (/brain/credits).
   Everything about the brain itself is the engine's brain.css; the header, footer, drawers and
   dialog are style.css (the design system's site.css). Blocks 3 and 4 are the port's own: the first
   screen's layout shift (the fix round, Oct 7 2026); focus rings, the explorer's stage while its
   sheet rises and the stills' edges (the last fix round, Oct 7 2026). */

/* 1. /brain (design/final/brain.html) */
  /* The credits block only: the header, footer, drawers and dialog are the site's (assets/site.css). Everything about the brain is in brain.css.
     Source: brain_hero/brain.html. The credits are three plain sentences (round 2); the full attribution is ANATOMY-ATTRIBUTION.md. */
  .credits { padding: 64px 0 96px; }
  .credits h2 { margin: 0 0 24px; font: 400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing: -.01em; }
  .credits-text { max-width: 660px; color: var(--ink-70); }
  .credits-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 24px; }
  /* the homepage's type rules on this page too (stage 5): no uppercase or tracking, and small labels on spruce
     in paper at 78 percent (the sage measures 3.2:1 there at this size) */
  .brain-parts h2, .brain-pick span { font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(238, 242, 235, .78); }
  .brain-hint, .brain-lab .brain-stage > .brain-hint { font-size: 14px; letter-spacing: 0; text-transform: none; }
  .credits .wrap { max-width: var(--container); }
  /* round 1: the site's fixed header sits over the page, the lab starts under it and keeps the site's edge (L) */
  /* round 4 (pilot note 63): the tour is the page's first screen, under the site's clear header; the explorer follows it */
  .brain-lab { --brain-edge: var(--L); --brain-lab-h: clamp(520px, calc(100svh - var(--header)), 980px); }
  .brain-lab .brain-head h2 { margin: 0; color: #FCFBF7; font: 400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing: -.01em; }
  .brain-parts button, .brain-toggle button { min-height: 44px; }

/* 2. /brain/credits (design/final/credits.html; there the class sits on main, here on the div main holds) */
  .credits-page{ background:var(--paper); padding:calc(var(--header) + 64px) 0 64px; }
  .credits-page .wrap > *{ max-width:720px; }
  .credits-page h1{ font:400 var(--fs-h2)/var(--lh-h2) var(--serif); letter-spacing:-.01em; margin:0 0 32px; }
  .credits-page h2{ font:400 var(--fs-row)/var(--lh-row) var(--serif); margin:48px 0 16px; }
  .credits-page p, .credits-page li{ color:var(--ink-70); }
  .credits-page p + p, .credits-page p + ul, .credits-page ul + p{ margin-top:16px; }
  .credits-page ul{ padding-left:20px; }
  .credits-page li + li{ margin-top:8px; }
  .credits-page code{ font-size:.92em; background:var(--mist); padding:0 4px; border-radius:4px; }
  .credits-page .back{ display:flex; width:max-content; margin-top:48px; }
  @media (max-width:560px){ .credits-page{ padding:calc(var(--header) + 32px) 0 48px; } }

/* 3. the port's additions (the fix round, Oct 7 2026): the first screen holds still (CLS was 0.07 at 1440 and 0.04 to
   0.08 on phones, the budget 0.01)
   - pages_brain.py sets .is-touring before the first paint (TOUR_FIRST_PAINT), so the tour's first stop, the page's h1,
     shows from that paint; brain.js then writes every stop's opacity and visibility inline, which outranks this */
  .brain-tour.is-touring .brain-stop--first { opacity: 1; visibility: visible; }
/* - brain.css sets its type in "Source Sans 3" and "Source Serif 4" with no metric-matched fallback, so the first caption
     re-wrapped and moved when the web fonts arrived; the same faces with site.css's size-adjusted fallbacks hold the
     lines (the web fonts, once loaded, draw exactly as before) */
  .brain-stage, .brain-explore, .brain-pause, .brain-tour, .brain-tour-eyebrow, .brain-stop h3::before, .brain-rail button,
  .brain-lab, .brain-parts h2, .brain-parts button, .brain-tip, .brain-controls button, .brain-pick span,
  .brain-pick select { font-family: var(--sans); }
  .brain-tour-title, .brain-stop h3, .brain-head h1, .brain-entry h2 { font-family: var(--serif); }

/* 4. the last fix round (Oct 7 2026; the pilot's ruling 79), page CSS over the frozen engine (brain.css and brain.js
   ship as the prototype built them)
   - focus rings on the dark bands: site.css draws the spruce ring for paper, and brain.css gives the paper ring to the
     tour's skip links, rail, pause and credit and to the lab, but not to the standing note's Credits link, which phones
     show in place of the credit line: spruce on the band's dark green measured 1.5:1 (3:1 is the floor). Every control
     on the tour band and in the explorer draws the paper ring (12:1) */
  .tour-band :focus-visible, .explore-root :focus-visible { outline-color: var(--paper); }
/* - the explorer while its sheet rises over the held tour brain: brain.css hides the explorer's whole stage until the
     sheet is up (".is-rising .brain-stage > ... { opacity: 0 !important }"), so a reader who stopped there, or a keyboard
     user who focused the stage, saw an empty box under the hint chip. The poster (the pose the live canvas starts from)
     shows instead; at the unpin the class goes and brain.css's own rules fade the poster as the canvas comes in */
  .explore-root.is-rising .brain-lab .brain-stage:not(.has-still) > .brain-poster { opacity: 1 !important; }
/* - the tour's stills (shown to reduced-motion readers, before the model is live and while motion is paused): five are
     framed so close that the brain runs off the image (brainstem, cerebellum, occipital, parietal, temporal) with a baked
     feather of about 4 percent, which reads as a cut edge (PILOT-NOTES 54: never cropped flat). They get the same kind of
     soft edge the canvas has, 10 percent on each side; a still whose brain sits inside its frame is unchanged, and the
     two dive stills keep brain.css's round feather */
  .brain-tour.is-touring .brain-tour-stills > img:not([data-stop="thalamus"]):not([data-stop="hippocampus"]) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect;
  }