/* Lesion lab v2: an immersive full-bleed 3D lab (contract sections 4 and 5). The stage fills the
   viewport below the site header; the title, story, controls and console float on glass HUD cards
   above the stage light. The connections page's quoted-fact style (.fact, .verb, .contested,
   .lab-sources) and the bundle list (.lab-bundle, .lab-swatch, .lab-bar) carry over unchanged from
   v1, now inside the evidence drawer. Colour still carries meaning only: the three DEC families;
   everything else is monochrome ink and glass, per tokens.css's own design note. */
.lab-page{background:var(--color-paper);color:var(--color-ink)}
.lab-page [hidden]{display:none!important}
.lab-main{display:block;max-width:none;margin:0;padding:0}

/* ---- Stage: full-bleed, below the unchanged site header ------------------------------------ */
.lab-stage{position:relative;isolation:isolate;overflow:hidden;
  height:max(560px,calc(100svh - var(--studio-header-h,68px)));width:100%;
  background:var(--color-stage)}
/* hodos.css's unscoped #atlasCanvas rules (position:relative; height:auto) are id-selector
   specificity and would otherwise beat this class regardless of source order, since this page
   reuses the shared mount id; #atlasCanvas.lab-canvas matches specificity and wins on top. */
.lab-canvas,#atlasCanvas.lab-canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0;z-index:0}
.lab-canvas canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.lab-canvas[data-lesion=hover] canvas{cursor:grab}
.lab-canvas[data-lesion=drag] canvas{cursor:grabbing}

.lab-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.lab-rings polygon{fill:none;stroke:var(--color-focus);stroke-width:1.5;stroke-linejoin:round}
.lab-rings .lab-ring-margin{stroke-dasharray:6 5;opacity:.75}

/* ---- HUD title: floats on the stage light, no card (contract 4.5 copy deck) ----------------- */
.lab-hud-title{position:absolute;z-index:3;top:var(--space-xl);left:var(--page-gutter);max-width:min(46ch,44vw)}
.lab-kicker{font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-sm);text-shadow:0 1px 12px var(--color-plate)}
.lab-hud-title h1{font:var(--display-weight) var(--text-display)/var(--lh-display) var(--font-display);font-variation-settings:var(--display-wdth);margin:0 0 var(--space-md);
  letter-spacing:var(--display-tracking);text-shadow:0 2px 20px var(--color-plate)}
.lab-hud-title h1 span{display:block}
.lab-lede{font-size:var(--text-base);line-height:var(--lh-body);color:var(--color-muted);margin:0 0 var(--space-lg);
  max-width:60ch;text-shadow:0 1px 12px var(--color-plate)}
/* Two even columns: four free-wrapping tiles left "Streamlines cut" alone on a second row. */
.lab-chips{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs);margin:0;padding:0}
.lab-chips li{display:flex;flex-direction:column;gap:2px;padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius);
  background:color-mix(in srgb,var(--color-plate) 62%,transparent);border:1px solid color-mix(in srgb,var(--color-rule-2) 55%,transparent)}
.lab-chip-label{font-size:var(--text-xs);color:var(--color-muted)}
.lab-chip-value{font:var(--text-sm)/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--color-ink)}
.lab-chip-value small{color:var(--color-muted);font-size:var(--text-xs)}

/* ---- Glass HUD cards: story, controls, console (contract 4.4) ------------------------------- */
.lab-glass{background:color-mix(in srgb,var(--color-plate) 62%,transparent);
  border:1px solid color-mix(in srgb,var(--color-rule-2) 55%,transparent);border-radius:var(--radius);
  padding:var(--space-md) var(--space-lg)}
@media(min-width:901px),(min-width:701px) and (orientation:landscape){.lab-glass{backdrop-filter:blur(16px)}}

.lab-story{position:absolute;z-index:3;top:clamp(230px,34vh,320px);left:var(--page-gutter);width:min(380px,88vw)}
.lab-story p{margin:0;font-size:var(--text-sm);line-height:var(--lh-body);color:var(--color-ink)}
.lab-story-number{font-variant-numeric:tabular-nums;color:var(--color-ink);font-weight:600}
.lab-story-bundle{font-weight:500}
.lab-story-bundle[data-group=Association]{color:var(--color-dec-association)}
.lab-story-bundle[data-group=Projection]{color:var(--color-dec-projection)}
.lab-story-bundle[data-group=Commissural]{color:var(--color-dec-commissural)}
/* Chips keep the 44 px target; the negative block margin cancels it in the line box so the
   sentence keeps its line height. */
.lab-story-chip{display:inline-flex;align-items:center;min-height:var(--control-height);min-width:var(--control-height);margin-block:calc((var(--text-sm) * var(--lh-body) - var(--control-height)) / 2);line-height:inherit;vertical-align:middle;font:inherit;font-weight:600;color:var(--color-ink);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lab-story-chip:hover{text-decoration-thickness:2px}
.lab-story-chip:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.lab-story-links{margin:var(--space-md) 0 0;display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:baseline;
  font-size:var(--text-xs);color:var(--color-muted)}
.lab-story-links button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.lab-story-links a{color:inherit}
.lab-story-links span[aria-hidden]{display:none}
.lab-story-links button,.lab-story-links a{display:inline-flex;align-items:center;min-height:var(--control-height);min-width:var(--control-height)}
/* More content below: a hard accent rule at the bottom edge instead of a fade that cut a line in half. */
.lab-story[data-more=true],.lab-controls[data-more=true]{box-shadow:inset 0 calc(-1 * var(--space-2xs)) 0 var(--color-accent)}

.lab-controls{position:absolute;z-index:3;top:var(--space-xl);right:var(--page-gutter);width:min(440px,90vw);
  border:0;display:flex;flex-direction:column;gap:var(--space-sm)}
.lab-controls legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lab-control-row{display:flex;gap:var(--space-md);flex-wrap:wrap}
.lab-control{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--space-2xs)}
.lab-control>label{display:flex;justify-content:space-between;align-items:baseline}
.lab-control>label,.lab-control-label,.lab-check label{font-size:var(--text-sm)}
.lab-control output{font:var(--text-xs)/1 var(--font-outlier);color:var(--color-muted);margin-left:var(--space-xs)}
.lab-control input[type=range]{width:100%;min-height:var(--control-height);margin:0}
.lab-control select{width:100%;height:var(--control-height);font:inherit;background:var(--color-control);color:var(--color-ink);
  border:1px solid var(--color-rule);border-radius:var(--radius);font-size:var(--text-sm);padding:var(--space-xs);padding-right:var(--space-xl)}
/* Hemisphere and Cortex are single-select groups, joined into one segmented strip (instrument
   density, fix B10); Cut only/Turntable/Help stay independent toggles, not joined, since more than
   one can be pressed at once. */
.lab-options{display:flex;gap:0}
.lab-options button{flex:1;min-height:var(--control-height);padding:var(--space-xs) var(--space-sm);
  border-radius:0;margin-left:-1px;position:relative}
.lab-options button:first-child{margin-left:0;border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}
.lab-options button:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.lab-options button:focus-visible{z-index:1}
.lab-toggle{min-height:var(--control-height);padding:var(--space-xs) var(--space-sm);flex:1}
.lab-options [aria-pressed=true],.lab-toggle[aria-pressed=true]{border-color:var(--color-accent);color:var(--color-ink);
  background:var(--color-accent-soft)}
.lab-check{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--control-height)}
.lab-check input{margin:0;flex:none;appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:var(--control-height);height:var(--control-height);cursor:pointer;background:none;border:0}
.lab-check input::before{content:"";width:var(--space-lg);height:var(--space-lg);border:2px solid var(--color-rule-2);border-radius:var(--radius);background:var(--color-control)}
.lab-check input:checked::before{background:var(--color-accent);border-color:var(--color-accent)}
.lab-check label{display:flex;align-items:center;min-height:var(--control-height);cursor:pointer}
.lab-check output{margin-left:auto}
.lab-controls button:disabled{opacity:.4;cursor:not-allowed}
.lab-help{font-size:var(--text-xs);line-height:var(--lh-body);color:var(--color-muted);margin:0}
.lab-precise{border-top:1px solid var(--color-rule);padding-top:var(--space-xs)}
.lab-precise summary{display:flex;align-items:center;min-height:var(--control-height);font-size:var(--text-sm);cursor:pointer;padding:var(--space-2xs) 0;list-style:none}
.lab-precise input[type=range]{width:100%;min-height:var(--control-height);margin:0}
.lab-precise summary::-webkit-details-marker{display:none}
.lab-precise summary::before{content:"+";color:var(--color-muted);margin-inline-end:var(--space-2xs)}
.lab-precise[open] summary::before{content:"\2212"}
.lab-precise[open] summary{margin-bottom:var(--space-xs)}
.lab-position{display:grid;grid-template-columns:auto 1fr;gap:0 var(--space-md);align-items:center;margin-top:var(--space-xs)}
.lab-position .lab-control-label{grid-column:1/-1;margin-bottom:var(--space-2xs)}
.lab-position select{grid-column:1/-1;margin-bottom:var(--space-xs)}
.lab-position label{font-size:var(--text-xs);color:var(--color-muted)}
.lab-coords{grid-column:1/-1;margin:var(--space-xs) 0 0;font:var(--text-xs)/var(--lh-body) var(--font-outlier);color:var(--color-ink)}

.lab-console{position:absolute;z-index:3;left:var(--page-gutter);right:var(--page-gutter);bottom:var(--space-xl);
  display:flex;align-items:center;min-height:64px}
.lab-console .lab-views{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.lab-console .lab-control-label{margin-right:var(--space-2xs)}
.lab-views button{min-height:var(--control-height);padding:var(--space-xs) var(--space-sm)}
.lab-views [aria-pressed=true]{border-color:var(--color-accent);color:var(--color-ink);background:var(--color-accent-soft)}
#viewStatus{font-size:var(--text-xs);color:var(--color-muted);margin-left:var(--space-xs)}

/* ---- Stage captions and status, on the glass/stage light directly --------------------------- */
.lab-stage-label{position:absolute;z-index:3;bottom:var(--space-xl);left:var(--page-gutter);font-size:var(--text-xs);
  color:var(--color-muted);margin:0;pointer-events:none}
.lab-scope{position:absolute;z-index:3;bottom:calc(var(--space-xl) + 176px);right:var(--page-gutter);margin:0;
  font-size:13px;color:var(--color-muted)}
/* updateInsets() publishes the free frame as --lab-frame-*; the note sits centred at its top edge,
   clear of the controls rail (desktop) and the title block (phone), which it used to cover. */
.lab-stage-note{position:absolute;z-index:4;top:calc(var(--lab-frame-top,var(--space-md)) + var(--space-2xs));
  left:var(--lab-frame-left,var(--space-md));right:var(--lab-frame-right,var(--space-md));width:fit-content;max-width:22rem;margin:0 auto;
  font-size:var(--text-xs);line-height:var(--lh-body);color:var(--color-ink);background:var(--color-stage);
  border-left:2px solid var(--color-rule-2);padding:var(--space-2xs) var(--space-xs);pointer-events:none}
.lab-status{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;
  font-size:var(--text-sm);background:var(--color-stage);padding:var(--space-xs);pointer-events:none;max-width:80vw;text-align:center}
#retryScene{position:absolute;top:calc(50% + 2.5rem);left:50%;transform:translateX(-50%);z-index:4}

/* ---- Evidence drawer: v1's panel, restyled for glass (contract 8) --------------------------- */
.lab-drawer{position:fixed;z-index:var(--z-modal);top:0;right:0;bottom:0;width:440px;max-width:100vw;
  overflow-y:auto;transform:translateX(100%);transition:transform var(--dur-long) var(--ease-out);
  background:color-mix(in srgb,var(--color-plate) 92%,transparent);border-left:1px solid var(--color-rule-2);
  padding:var(--space-lg)}
@media(min-width:701px){.lab-drawer{backdrop-filter:blur(16px)}}
.lab-drawer:not([inert]){transform:translateX(0)}
.lab-drawer-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}
.lab-drawer-head h2{font:500 var(--text-title)/var(--lh-title) var(--font-display);margin:0}
#closeEvidence{background:none;border:0;color:var(--color-muted);font-size:var(--text-lg);line-height:1;cursor:pointer;padding:var(--space-2xs);min-width:var(--control-height);min-height:var(--control-height)}
#closeEvidence:hover{color:var(--color-ink)}
.lab-summary{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--color-ink);margin:0 0 var(--space-lg)}
.lab-summary[data-empty=true]{color:var(--color-muted);border-left:2px solid var(--color-rule-2);padding-left:var(--space-md)}
.lab-named-block{margin:0 0 var(--space-lg)}
.lab-named-block h3{font:500 var(--text-base)/var(--lh-title) var(--font-display);margin:0 0 var(--space-sm)}
.lab-named{list-style:none;margin:0 0 var(--space-sm);padding:0;display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.lab-named li{font-size:var(--text-sm);line-height:1.3;border:1px solid var(--color-rule-2);border-radius:var(--radius);
  padding:var(--space-2xs) var(--space-xs);background:var(--color-paper-2)}
.lab-named small{display:block;font-size:var(--text-xs);color:var(--color-muted)}
.lab-aside{font-size:var(--text-xs);line-height:var(--lh-body);color:var(--color-muted);border-left:2px solid var(--color-rule-2);
  padding-left:var(--space-md);margin:0}
.lab-bundles{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-rule)}
.lab-bundles>li{border-bottom:1px solid var(--color-rule)}
.lab-bundle>summary{list-style:none;cursor:pointer;padding:var(--space-sm) 0 var(--space-sm) 0;display:grid;
  grid-template-columns:.75rem 1fr;column-gap:var(--space-sm);row-gap:var(--space-3xs);align-items:start;position:relative}
.lab-bundle>summary::-webkit-details-marker{display:none}
.lab-bundle>summary::after{content:"+";position:absolute;top:var(--space-sm);right:0;font:var(--text-sm)/1 var(--font-outlier);color:var(--color-muted)}
.lab-bundle[open]>summary::after{content:"−"}
.lab-swatch{grid-column:1;grid-row:1;width:.75rem;height:.75rem;margin-top:.2em;border-radius:50%;background:var(--color-muted)}
.lab-swatch[data-group=Association]{background:var(--color-dec-association)}
.lab-swatch[data-group=Projection]{background:var(--color-dec-projection)}
.lab-swatch[data-group=Commissural]{background:var(--color-dec-commissural)}
.lab-bundle-name{grid-column:2;grid-row:1;font-size:var(--text-sm);font-weight:500;color:var(--color-ink);min-width:0;padding-right:var(--space-md)}
.lab-bundle-count{grid-column:2;grid-row:2;font-size:var(--text-xs);color:var(--color-muted)}
.lab-bundle-evidence{grid-column:2;grid-row:4;font-size:var(--text-xs);color:var(--color-muted)}
.lab-bundle-evidence[data-none=true]{color:var(--color-faint)}
.lab-bar{grid-column:2;grid-row:3;height:4px;background:var(--color-paper-3);position:relative;overflow:hidden;margin:var(--space-3xs) 0}
.lab-bar>span{position:absolute;inset:0 auto 0 0;width:var(--share,0%);background:var(--color-muted)}
.lab-bar>span+span{left:var(--share,0%);width:var(--margin-share,0%);opacity:.4}
.lab-bundle[data-group=Association] .lab-bar>span{background:var(--color-dec-association)}
.lab-bundle[data-group=Projection] .lab-bar>span{background:var(--color-dec-projection)}
.lab-bundle[data-group=Commissural] .lab-bar>span{background:var(--color-dec-commissural)}
.lab-bundle-body{padding:0 0 var(--space-md) calc(.75rem + var(--space-sm))}
.lab-bundle-body>p{font-size:var(--text-xs);line-height:var(--lh-body);color:var(--color-muted);margin:0 0 var(--space-sm)}
.lab-other{margin-top:var(--space-sm);opacity:.8}
.lab-other>p{font-size:var(--text-xs);color:var(--color-muted);margin:var(--space-sm) 0 0}
.fact{border-top:1px solid var(--color-rule);padding:var(--space-md) 0}
.fact-rel{margin:0 0 var(--space-sm);font-size:var(--text-sm)}
.verb{color:var(--color-accent)}
.contested{font-size:var(--text-xs);color:var(--color-ink);font-weight:600;margin:0 0 var(--space-sm)}
.lab-tag{font-size:var(--text-xs);color:var(--color-muted);margin:0 0 var(--space-sm)}
.fact blockquote{margin:0 0 var(--space-sm);padding-left:var(--space-md);border-left:2px solid var(--color-accent)}
.fact blockquote p{margin:0;color:var(--color-ink);font-size:var(--text-sm);line-height:var(--lh-body)}
.fact cite{display:block;font-style:normal;font-size:var(--text-xs);color:var(--color-faint);margin-top:var(--space-2xs)}
.lab-sources{font-size:var(--text-xs);line-height:var(--lh-body);color:var(--color-muted);margin:0}
.lab-sources a{font-family:var(--font-outlier)}
.lab-sources span{display:block}

/* ---- Below the stage: unchanged method/sources and footer (contract: text stays verbatim) --- */
.lab-limits{max-width:1560px;margin:var(--space-2xl) auto 0;padding:0 var(--page-gutter) var(--space-2xl);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);border-top:1px solid var(--color-rule);padding-top:var(--space-xl)}
.lab-limits p{font-size:var(--text-sm);line-height:var(--lh-body);max-width:var(--measure)}
.lab-limits .lab-aside{margin:var(--space-md) 0}
.lab-eyebrow{font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-sm)}
.lab-limits h2{font:500 var(--text-title)/var(--lh-title) var(--font-display);margin:0 0 var(--space-md)}
.lab-provenance{font:var(--text-xs)/var(--lh-body) var(--font-outlier);color:var(--color-faint)}
.lab-foot-scope{color:var(--color-ink)}
.lab-noscript{margin:var(--space-xl)}

/* ---- Desktop: a CSS grid frames the brain (contract 4.3, reviewer correction 2026-09-27). The
   dock's children become the grid's own items via display:contents, so none of them changes DOM
   parent: column 1 is the title and story, column 3 is the controls rail, the label row and
   console span the full width on the last two rows, and the untouched middle column is the free
   frame updateInsets() measures around and hands to setFrameInsets. Portrait tablets (701-900 px)
   take the phone sheet instead: two fixed rails left them a brain frame under 200 px wide. ------- */
@media(min-width:901px),(min-width:701px) and (orientation:landscape){
  .lab-dock{display:contents}
  .lab-sheet-handle{display:none}

  .lab-stage{--lab-col1:300px;--lab-col3:280px;
    display:grid;grid-template-columns:var(--lab-col1) minmax(0,1fr) var(--lab-col3);
    grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:var(--space-lg);row-gap:var(--space-sm)}
  .lab-hud-title{position:static;max-width:none;grid-column:1;grid-row:1;align-self:start;
    margin:var(--space-xl) 0 0 var(--page-gutter)}
  .lab-hud-title h1{font-size:var(--text-title);line-height:var(--lh-title)}
  /* The composed narrative is unbounded prose (lesion_story.js chains up to ~7 sentences), so the
     card is capped to its share of the free row and scrolls internally: without min-height:auto's
     content-based floor removed (overflow != visible is what removes it), this row's fr track would
     inflate to the story's full content height and push the label row and console off the stage
     (the P1b regression the reviewer's checkFrame catch caught). */
  .lab-story{position:static;width:auto;grid-column:1;grid-row:2;align-self:start;
    max-height:100%;overflow-y:auto;overscroll-behavior:contain;
    padding-block:calc(var(--text-sm) * var(--lh-body));
    margin:0 0 0 var(--page-gutter)}
  /* Capped to its rows and scrolling, like the story card: an opened Precise position used to run
     past the rail, over the scope caption and under the console. */
  .lab-controls{position:static;width:auto;grid-column:3;grid-row:1/3;align-self:start;
    max-height:calc(100% - var(--space-xl));overflow-y:auto;overscroll-behavior:contain;
    margin:var(--space-xl) var(--page-gutter) 0 0}
  /* hodos.css's 36-44 px button floor turned the story's link line into a tall gap. */
  #stageLabel{position:static;grid-column:1;grid-row:3;align-self:end;justify-self:start;
    margin:0 0 0 var(--page-gutter)}
  .lab-scope{position:static;grid-column:3;grid-row:3;align-self:end;justify-self:end;
    margin:0 var(--page-gutter) 0 0}
  .lab-console{position:static;left:auto;right:auto;bottom:auto;grid-column:1/-1;grid-row:4;
    margin:0 var(--page-gutter) var(--space-xl)}

  /* Bottom-left inside the brain frame, clear of the title column (contract 4's orientation triad;
     hodos.css centres it bottom-middle by default, which this page overrides, never hodos.css itself). */
  .lab-canvas .atlas-orientation{left:calc(var(--lab-col1) + var(--page-gutter) + var(--space-lg));
    right:auto;transform:none;bottom:calc(var(--space-xl) + 7rem)}
}
@media(min-width:1200px){
  .lab-stage{--lab-col1:360px;--lab-col3:320px}
}

/* Short windows (up to 820 px tall; the stage floors at 560 px): the full title block left the story
   card only its own padding, which then sat on the label row. Drop the lede, as the phone does, and
   step the title and top margins down so the story keeps a few readable lines. */
@media(min-width:901px) and (max-height:820px),(min-width:701px) and (orientation:landscape) and (max-height:820px){
  .lab-lede{display:none}
  .lab-hud-title{margin-top:var(--space-lg)}
  .lab-hud-title h1{font-size:var(--text-lg);margin-bottom:var(--space-sm)}
  .lab-controls{margin-top:var(--space-lg);max-height:calc(100% - var(--space-lg))}
}

/* ---- Phone (up to 700px) and portrait tablet (up to 900px): the dock becomes a bottom sheet
   (contract 4.2). lesion_lab.js's SHEET_LAYOUT query must match this one. ---------------------- */
@media(max-width:700px),(max-width:900px) and (orientation:portrait){
  .lab-stage{height:calc(100svh - var(--studio-header-h,64px))}
  .lab-hud-title{left:var(--page-gutter);right:var(--page-gutter);max-width:none;top:var(--space-md)}
  /* Title, chips and the stacked captions sit tight so the brain frame keeps its height (the lab
     gate's fill floor at 390 px). */
  .lab-hud-title h1{font-size:var(--text-title);margin-bottom:var(--space-xs)}
  .lab-lede{display:none}
  .lab-chips{gap:var(--space-2xs);grid-template-columns:repeat(4,minmax(0,1fr))}
  .lab-chips li{flex:1 1 22%}
  /* Stacked on the left with the triad on the right: side by side, the two captions touched each
     other and the centred triad at 390-430 px. */
  .lab-stage-label,.lab-scope{line-height:1.2}
  .lab-stage-label{bottom:calc(150px + var(--space-xs))}
  .lab-scope{left:var(--page-gutter);right:auto;bottom:calc(150px + var(--space-xs) + 1rem)}
  /* Above the sheet's permanent 150px peek, never behind it (contract 4's orientation triad). */
  .lab-canvas .atlas-orientation{left:auto;right:var(--page-gutter);transform:none;bottom:calc(150px + var(--space-xs))}
  #viewStatus{display:none}

  /* Opaque: at 94% the title and stat tiles showed through the expanded sheet behind its text. */
  .lab-dock{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;
    max-width:40rem;margin-inline:auto;max-height:78svh;overflow-y:auto;background:var(--color-plate);
    border-top:1px solid var(--color-rule-2);border-radius:var(--radius) var(--radius) 0 0;
    padding:var(--space-sm) var(--page-gutter) var(--space-lg);
    transform:translateY(calc(100% - 150px));transition:transform var(--dur-long) var(--ease-out)}
  .lab-dock[data-sheet=expanded]{transform:translateY(0)}
  /* The sheet scrolls; its sections keep their height. Shrunk to fit, the console's two rows of view
     buttons spilled out of it over Precise position and took its taps. */
  .lab-dock>*{flex-shrink:0}
  /* A transparent 44px hit target (fix B12): the visible bar stays a slim decorative 36x4 sliver,
     centred inside a much larger tap area, with the mobile tap-highlight flash suppressed so only
     the sitewide :focus-visible ring (hodos.css) ever outlines it. */
  .lab-sheet-handle{order:1;display:block;align-self:center;width:100%;max-width:10rem;min-height:var(--control-height);
    margin:0 0 var(--space-2xs);background:none;border:0;position:relative;-webkit-tap-highlight-color:transparent}
  .lab-sheet-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:2.25rem;height:4px;border-radius:2px;background:var(--color-rule-2)}
  .lab-story{order:2;position:static;width:auto;background:none;border:0;padding:0 0 var(--space-sm)}
  .lab-story p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lab-dock[data-sheet=expanded] #storyText{display:block;-webkit-line-clamp:unset;overflow:visible}
  /* The console's own links column is P2/P3 (contract 4.1); until it exists, the story card is
     the one reachable place for them on phone too, so the drawer stays reachable without a mouse. */
  .lab-story-links{margin-top:var(--space-xs)}
  .lab-controls{order:4;position:static;width:auto;right:auto;top:auto;background:none;border:0;
    padding:var(--space-sm) 0 0;border-top:1px solid var(--color-rule)}
  .lab-console{order:6;position:static;left:auto;right:auto;bottom:auto;padding-top:var(--space-sm);border-top:1px solid var(--color-rule)}
  .lab-console .lab-views{overflow-x:auto}
  /* The bottom captions sit just above the peeking sheet (contract 4.2); once the sheet expands
     past that fixed spot they would float over its own content, so they step aside instead. So does
     the midline note, which stacks above the sheet (z-index 4) near the frame's top edge. */
  .lab-dock[data-sheet=expanded] ~ .lab-stage-label,.lab-dock[data-sheet=expanded] ~ .lab-scope,
  .lab-dock[data-sheet=expanded] ~ .lab-stage-note{opacity:0;pointer-events:none}
  /* The triad sits in the canvas, before the dock; on a portrait tablet the 40rem sheet cut it in half. */
  .lab-stage:has(.lab-dock[data-sheet=expanded]) .atlas-orientation{opacity:0}
  /* One column: two squeezed the headings until "geometric" broke mid-word. */
  .lab-limits{grid-template-columns:1fr}
}
@media(forced-colors:active){.lab-swatch,.lab-bar>span{forced-color-adjust:none}}
.lab-hud-title h1,.lab-hud-title h1 span{text-wrap:balance}

/* Corridors: entry placement in the rail, the A/B comparison in the drawer. Colours repeat
   lesion_lab.js CORRIDOR_COLOR
   (tokens.css --color-corridor-a/-b). */
.lab-canvas[data-lesion=place] canvas{cursor:crosshair}
.lab-corridors{display:grid;gap:var(--space-xs)}
.lab-corridors label{font-size:var(--text-sm);color:var(--color-ink)}
.lab-corridor-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)}
.lab-corridor-list li{display:grid;grid-template-columns:auto 1fr auto;column-gap:var(--space-sm);align-items:baseline;font-size:var(--text-xs);line-height:var(--lh-body)}
.lab-corridor-swatch{width:.75rem;height:.75rem;border-radius:50%;align-self:center}
.lab-corridor-swatch[data-corridor=A]{background:var(--color-corridor-a)}
.lab-corridor-swatch[data-corridor=B]{background:var(--color-corridor-b)}
.lab-corridor-name{font-weight:600;color:var(--color-ink)}
.lab-corridor-text{grid-column:2;color:var(--color-muted)}
.lab-corridor-clear{grid-column:3;grid-row:1;font:inherit;font-size:var(--text-xs);background:none;border:1px solid var(--color-rule-2);border-radius:var(--radius);color:var(--color-ink);padding:2px var(--space-sm);cursor:pointer}
.lab-compare-open{justify-self:start;font:inherit;font-size:var(--text-sm);background:none;border:1px solid var(--color-accent);border-radius:var(--radius);color:var(--color-ink);padding:var(--space-xs) var(--space-sm);cursor:pointer}
.lab-compare{scroll-margin-top:var(--space-lg);margin:0 0 var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-rule-2)}
.lab-compare h3{font:500 var(--text-base)/var(--lh-title) var(--font-display);margin:0 0 var(--space-xs)}
.lab-compare h4{font-size:var(--text-sm);margin:var(--space-md) 0 var(--space-xs)}
.lab-compare-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums;margin-top:var(--space-sm)}
.lab-compare-table th,.lab-compare-table td{padding:4px var(--space-xs);border-top:1px solid var(--color-rule-2);text-align:right;vertical-align:baseline}
.lab-compare-table th[scope=row],.lab-compare-table thead th:first-child{text-align:left;font-weight:400}
.lab-compare-table td{white-space:nowrap}
.lab-compare-table thead th{font-weight:600;border-top:0}
.lab-compare-table thead th[data-corridor=A]{color:var(--color-corridor-a)}
.lab-compare-table thead th[data-corridor=B]{color:var(--color-corridor-b)}
.lab-compare-total th,.lab-compare-total td{color:var(--color-muted)}
.lab-compare-table .lab-swatch{display:inline-block;margin:0 .4em 0 0;vertical-align:baseline}
.lab-compare-named{margin:0;padding-left:1.1em;font-size:var(--text-sm);line-height:var(--lh-body)}
.lab-compare-named li[data-corridor=A]::marker{color:var(--color-corridor-a)}
.lab-compare-named li[data-corridor=B]::marker{color:var(--color-corridor-b)}
.corridor-labels{position:absolute;inset:0;pointer-events:none}
.corridor-label{position:absolute;transform:translate(-50%,-150%);display:grid;place-items:center;min-width:24px;height:24px;background:var(--color-stage);border:1px solid currentColor;border-radius:50%;font:600 var(--text-xs)/1 var(--font-body)}
.corridor-label[data-corridor=A]{color:var(--color-corridor-a)}.corridor-label[data-corridor=B]{color:var(--color-corridor-b)}