/* Hallmark · genre: editorial · macrostructure: Index-First (home) · Workbench (lesson) · Long Document (sources)
 * theme: custom (owner palette, see tokens.css) · nav: N9 · footer: Ft4 · design-system: design.md · designed-as-app
 * This is the page layer. It consumes tokens only; the older sheets above it keep the atlas
 * mechanics (canvas, callouts, dialogs) and are re-pointed at the same tokens through the
 * legacy aliases below. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url('./vendor/fonts/inter-latin-regular.woff2?v=734f3f35529e') format('woff2')}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url('./vendor/fonts/inter-latin-medium.woff2?v=c39c6001ce90') format('woff2')}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url('./vendor/fonts/inter-latin-semibold.woff2?v=7aaf38772aab') format('woff2')}

/* ---- Legacy aliases: every var() in the older sheets now resolves to the token block. ---- */
:root{
  --bg:var(--color-paper);--panel:var(--color-paper-2);--panel-2:var(--color-paper-3);
  --ink:var(--color-ink);--muted:var(--color-muted);--faint:var(--color-faint);
  --line:var(--color-rule);--line-strong:var(--color-rule-2);
  --accent:var(--color-accent);--accent-strong:var(--color-accent-strong);--accent-ink:var(--color-accent-ink);--accent-soft:var(--color-accent-soft);
  --control:var(--color-control);--control-hover:var(--color-control-hover);--subtle:var(--color-paper-2);
  --gold:var(--color-accent);--blue:var(--color-accent);
  --stage:var(--color-stage);--stage-ink:var(--color-ink);--stage-muted:var(--color-muted);
  --stage-line:var(--color-rule-2);--stage-control:var(--color-control);
  --parcel-focus:var(--color-parcel-focus);--parcel-context:var(--color-parcel-context);
  --display:var(--font-display);--reading:var(--font-display);--mono:var(--font-outlier);
  --stage-sticky:max(300px,36dvh); /* re-stated here: the older sheet declares a plain 36dvh */
  font-family:var(--font-body);font-size:16px;line-height:var(--lh-body);background:var(--color-paper);color:var(--color-ink);
}
html,body{overflow-x:clip}
body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body)}
::selection{background:var(--color-accent-soft);color:var(--color-ink)}
a{color:var(--color-accent);text-decoration-thickness:1px;text-underline-offset:0.2em}
a:hover{color:var(--color-accent-strong)}
h1,h2,h3,h4{font-style:normal;overflow-wrap:anywhere;min-width:0}

/* ---- Controls: one height, one radius, eight states. ---- */
button,select,input[type=search],input[type=text]{
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;line-height:1.2;
  min-height:var(--control-height);padding:0 var(--space-md);border-radius:var(--radius);
  background:var(--color-control);color:var(--color-ink);border:1px solid var(--color-rule-2);
  transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);
}
button{cursor:pointer;white-space:nowrap}
@media(hover:hover){button:hover{background:var(--color-control-hover);border-color:var(--color-rule-2);transform:translateY(-1px)}}
button:active{transform:translateY(0)}
button:disabled,button[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;background:var(--color-control);color:var(--color-muted);border-color:var(--color-rule)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,#atlasCanvas canvas:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;transition:none}
select{padding-right:var(--space-xl);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-muted) 50%),linear-gradient(135deg,var(--color-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type=search]{font-weight:400;background:var(--color-paper);border-color:var(--color-rule-2);outline:2px solid transparent;outline-offset:1px}
input[type=search]::placeholder{color:var(--color-muted);opacity:1}
input[type=search]:focus-visible{outline-color:var(--color-focus)}
input[type=range]{accent-color:var(--color-accent)}
input[type=checkbox]{accent-color:var(--color-accent);width:1rem;height:1rem}
/* Primary and secondary voices (design.md § CTA voice). */
.skip-link{background:var(--color-ink);color:var(--color-paper)}
#lessonPanel .lesson-nav button:last-child,#lessonPanel .library-entry button:first-child,#lessonPanel .lesson-targets button[aria-pressed=true],#anatomyResults button[aria-pressed=true],#selectedPathways button,.bundle-chip[aria-pressed=true]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
@media(hover:hover){#lessonPanel .lesson-nav button:last-child:hover,#lessonPanel .library-entry button:first-child:hover,#lessonPanel .lesson-targets button[aria-pressed=true]:hover,#anatomyResults button[aria-pressed=true]:hover,#selectedPathways button:hover,.bundle-chip[aria-pressed=true]:hover{background:var(--color-accent-strong);border-color:var(--color-accent-strong);color:var(--color-accent-ink)}}
#lessonPanel .lesson-nav button:last-child:disabled{background:var(--color-control);border-color:var(--color-rule);color:var(--color-muted)}

/* ---- Header: N9 edge-aligned. Wordmark left, a quiet cluster right, no rule. ---- */
.studio-header{position:sticky;top:0;z-index:var(--z-sticky-nav);min-height:4.5rem;padding:var(--space-md) var(--page-gutter);gap:var(--space-lg);background:var(--color-paper);border-bottom:0;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--color-ink)}
.brand .brand-name{font:600 var(--text-lg)/1 var(--font-display);letter-spacing:0;color:var(--color-ink)}
.brand small{display:none}
.brand-mark{stroke:var(--color-accent)}
.brand-mark .f{opacity:.55}.brand-mark .n{fill:var(--color-ink)}.brand-mark .d{fill:var(--color-parcel-context)}
.studio-header nav{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm)}
.studio-header nav button,.studio-header nav a{min-height:2.5rem;padding:0 var(--space-sm);border:0;background:transparent;color:var(--color-muted);font-weight:500;text-decoration:none;border-radius:var(--radius);display:inline-flex;align-items:center;line-height:1}
@media(hover:hover){.studio-header nav button:hover,.studio-header nav a:hover{background:transparent;color:var(--color-ink);transform:none}}
.studio-header nav button[aria-current=page]{color:var(--color-ink);box-shadow:inset 0 -2px 0 var(--color-accent);border-radius:0;font-weight:600}
.studio-header nav .header-sources{color:var(--color-muted);margin-left:var(--space-xs)}
.studio-header nav .header-sources:hover{color:var(--color-ink)}
.studio-header #lessonProfile{min-height:2.5rem;font-size:var(--text-sm);max-width:none;width:auto;margin:0 0 0 var(--space-xs);padding:0 var(--space-xl) 0 var(--space-sm);background-color:transparent;border:1px solid var(--color-rule);color:var(--color-muted)}
.studio-header nav .header-tools{display:none}

/* ---- Page frame ---- */
main{max-width:1680px;margin:0 auto;padding:var(--space-md) var(--page-gutter) var(--space-md)}
main{padding-top:var(--space-md)}

/* ---- Home intro: one stacked column, measure held. Index-First heading paragraph. ---- */
.intro{display:block;margin:var(--space-lg) 0 var(--space-xl);max-width:var(--measure)}
.intro .lesson-kicker{display:none}
.intro h1,body[data-profile=presenter] .intro h1{font:500 var(--text-display)/var(--lh-display) var(--font-display);letter-spacing:-0.01em;margin:0 0 var(--space-md);color:var(--color-ink)}
.intro>p{font-size:var(--text-md);line-height:1.5;color:var(--color-muted);margin:0;max-width:44ch}
.intro>p br{display:none}

/* ---- Workspace: the stage is the only bordered container. ---- */
#atlasWorkspace,body[data-profile=presenter] #atlasWorkspace{border:0;border-radius:0;background:transparent;overflow:visible;gap:0;grid-template-columns:minmax(0,1fr) clamp(380px,32vw,500px);height:calc(100dvh - 7rem);min-height:480px}
#atlasWorkspace .atlas-stage{border:1px solid var(--color-rule);border-radius:var(--radius);background:var(--color-stage);grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);min-width:0}
.stage-head,.scene-readout,#atlasCanvas{min-width:0}
.stage-head{padding:var(--space-sm) var(--space-md);align-items:center;flex-wrap:nowrap;gap:var(--space-md);z-index:var(--z-raised)}
.stage-head>div:first-child{min-width:0;flex:1}
.stage-head .eyebrow{display:none}
.stage-head p,#sceneOrientation{font:400 var(--text-sm)/1.3 var(--font-body);color:var(--color-muted);margin:0;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-network{font:400 var(--text-xs)/1.3 var(--font-body);color:var(--color-muted);margin:var(--space-2xs) 0 0!important}
.stage-tools{gap:var(--space-2xs);flex:none;margin-left:auto}
.stage-tools>button,.atlas-view-menu>summary{min-height:2.25rem;padding:0 var(--space-sm);font-size:var(--text-xs);font-weight:500;border:1px solid transparent;background:transparent;color:var(--color-muted);border-radius:var(--radius);line-height:1;display:inline-flex;align-items:center}
@media(hover:hover){.stage-tools>button:hover,.atlas-view-menu>summary:hover{background:var(--color-control);border-color:var(--color-rule);color:var(--color-ink);transform:none}}
.stage-tools>button[aria-expanded=true],.stage-tools>button[aria-pressed=true]{color:var(--color-ink);border-color:var(--color-rule-2)}
#atlasFit{border-color:transparent;color:var(--color-muted);font-weight:500}
.atlas-view-menu>summary{cursor:pointer;list-style:none}
.atlas-view-menu>summary::-webkit-details-marker{display:none}
.atlas-view-menu[open]>summary{color:var(--color-ink);border-color:var(--color-rule-2)}
.atlas-view-menu .views{width:11rem;padding:var(--space-2xs);gap:0;grid-template-columns:1fr;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius);box-shadow:0 8px 24px oklch(10% 0.01 248 / .5);z-index:var(--z-dropdown);top:calc(100% + var(--space-2xs))}
.views button{min-height:2.25rem;padding:0 var(--space-sm);border:0;background:transparent;color:var(--color-ink);font-size:var(--text-sm);font-weight:400;text-align:left;border-radius:var(--radius)}
@media(hover:hover){.views button:hover{background:var(--color-control);transform:none}}
#atlasCanvas{min-height:0;height:auto;overflow:hidden}
#atlasHover{font:400 var(--text-sm)/1.3 var(--font-body);background:var(--color-paper-2);color:var(--color-ink);border:1px solid var(--color-rule-2);border-radius:var(--radius)}
#atlasLoading{font-size:var(--text-sm);color:var(--color-muted)}
#atlasLoading .loading-bar{background:var(--color-rule)}
#atlasLoading .loading-bar::after{background:var(--color-accent)}
.atlas-parcel-label{font:600 var(--text-xs)/1.3 var(--font-outlier);background:var(--color-paper-2);border-radius:var(--radius)}
.atlas-parcel-label small{font:400 var(--text-xs)/1.3 var(--font-body);color:var(--color-muted)}
.atlas-orientation text{font:11px var(--font-outlier)}

/* Readout band: one line for the name, one for its role, the key inline below. */
.scene-readout{padding:var(--space-sm) var(--space-md);padding-right:var(--space-md);border-top:1px solid var(--color-rule);min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"class key" "name key" "status key" "details details";align-items:center;column-gap:var(--space-md)}
.scene-readout .eyebrow,#pickedClass{grid-area:class;font:500 var(--text-xs)/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-muted);margin:0}
.scene-readout h2,body[data-profile=presenter] .scene-readout h2{grid-area:name;font:500 var(--text-md)/1.2 var(--font-display);letter-spacing:0;margin:var(--space-3xs) 0 0;color:var(--color-ink)}
.scene-readout #lessonSceneStatus,.scene-readout #explorationStatus{grid-area:status;font:400 var(--text-xs)/1.4 var(--font-body);color:var(--color-muted);margin:var(--space-3xs) 0 0;padding:0;border:0}
.scene-readout #explorationStatus{color:var(--color-accent-strong)}
.scene-details{grid-area:key;position:static;margin:0;max-width:none;font-size:var(--text-xs);justify-self:end;align-self:center}
.scene-details>summary{font:500 var(--text-xs)/1 var(--font-body);color:var(--color-muted);min-height:2.25rem;padding:0 var(--space-sm);border:1px solid transparent;border-radius:var(--radius);display:inline-flex;align-items:center;cursor:pointer;list-style:none;white-space:nowrap}
.scene-details>summary::-webkit-details-marker{display:none}
@media(hover:hover){.scene-details>summary:hover{color:var(--color-ink);border-color:var(--color-rule)}}
.scene-details[open]>summary{color:var(--color-ink);border-color:var(--color-rule-2)}
.scene-details-body{position:absolute;right:var(--space-md);bottom:calc(100% + var(--space-xs));left:auto;width:min(28rem,calc(100% - 2 * var(--space-md)));max-height:min(24rem,55dvh);overflow:auto;padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius);box-shadow:0 8px 24px oklch(10% 0.01 248 / .5);z-index:var(--z-dropdown)}
.scene-details-body p,.scene-details-body .scene-footer{font:400 var(--text-sm)/1.5 var(--font-body);color:var(--color-muted);margin:var(--space-xs) 0}
.scene-details-body .parcel-legend{color:var(--color-muted)}
.focus-key{color:var(--color-parcel-focus);font-weight:600}.context-key{color:var(--color-parcel-context);font-weight:600}
.scene-details-body .scene-footer{border-top:1px solid var(--color-rule);padding-top:var(--space-sm);display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);align-items:center;justify-content:space-between;font-family:var(--font-body);letter-spacing:0;color:var(--color-ink)}
.scene-footer button{min-height:2.25rem;font-size:var(--text-xs)}
.trace-note,.canvas-help{font:400 var(--text-xs)/1.5 var(--font-body);color:var(--color-muted);letter-spacing:0}

/* ---- Lesson panel: caption column of the workbench. ---- */
#atlasWorkspace #lessonPanel,#atlasWorkspace #lessonPanel[data-active-lesson=true]{border:0;padding:0 0 0 var(--space-xl);background:transparent;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--lh-body);color:var(--color-ink)}
#lessonPanel .lesson-top{gap:var(--space-xs);margin:0 0 var(--space-xs)}
#lessonPanel #lessonLibrary{font-size:var(--text-sm);color:var(--color-muted);padding:0;min-height:2.5rem;background:transparent;border:0}
#lessonPanel #lessonLibrary:hover{color:var(--color-ink);transform:none;background:transparent}
#lessonPanel #lessonSelect{min-height:2.5rem;font-size:var(--text-sm);color:var(--color-muted);background-color:transparent;border:0;padding:0 var(--space-xl) 0 var(--space-xs)}
#lessonPanel .lesson-outline{border-bottom:1px solid var(--color-rule)}
#lessonPanel .lesson-outline>summary{font:400 var(--text-sm)/1.3 var(--font-body);color:var(--color-muted);min-height:2.5rem;padding:var(--space-xs) 0;display:flex;align-items:center;gap:var(--space-xs);list-style:none;letter-spacing:0}
#lessonPanel .lesson-outline>summary::-webkit-details-marker{display:none}
#lessonPanel .lesson-outline>summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left:6px solid var(--color-muted);transition:transform var(--dur-micro) var(--ease-out)}
#lessonPanel .lesson-outline[open]>summary::before{transform:rotate(90deg)}
#lessonPanel .lesson-outline button{font-size:var(--text-sm);font-weight:400;min-height:2.25rem;padding:var(--space-2xs) var(--space-xs);color:var(--color-muted);white-space:normal;text-align:left}
#lessonPanel .lesson-outline [aria-current=step]{color:var(--color-ink);font-weight:500;background:var(--color-paper-2);box-shadow:inset 2px 0 0 var(--color-accent)}
.learning-phases{margin:var(--space-xs) 0 var(--space-md);border-bottom:1px solid var(--color-rule)}
#lessonPanel .learning-phases button{min-height:2.75rem;font-size:var(--text-sm);font-weight:500;color:var(--color-muted);border:0;border-radius:0;background:transparent;padding:0;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
#lessonPanel .learning-phases button:hover{transform:none;color:var(--color-ink);background:transparent}
#lessonPanel .learning-phases button[aria-pressed=true]{color:var(--color-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--color-accent)}
#lessonPanel .lesson-scroll{padding:var(--space-xs) var(--space-xs) var(--space-lg) 0}
#lessonPanel .lesson-kicker{font:400 var(--text-sm)/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--color-muted);margin:0 0 var(--space-xs)}
#lessonPanel #lessonCurrentTitle{font:500 var(--text-title)/var(--lh-title) var(--font-display);letter-spacing:-0.01em;margin:0 0 var(--space-md);color:var(--color-ink)}
body[data-mode=library] #lessonPanel #lessonCurrentTitle{font-size:var(--text-xl);max-width:22ch;margin-bottom:var(--space-md)}
#lessonPanel h3,#lessonPanel #lessonCurrent h3,body[data-profile=presenter] #lessonPanel #lessonCurrent h3{font:600 var(--text-sm)/1.4 var(--font-body);letter-spacing:0;color:var(--color-ink);margin:var(--space-lg) 0 var(--space-xs)}
#lessonPanel h4{font:600 var(--text-sm)/1.4 var(--font-body);color:var(--color-ink)}
#lessonPanel p{margin:var(--space-xs) 0 var(--space-md)}
#lessonPanel .lesson-lead,#lessonPanel .lesson-observe p,#lessonPanel .lesson-surgical p,#lessonPanel .lesson-check p,#lessonPanel li,#lessonPanel .lesson-anatomy li{font-size:var(--text-base);line-height:var(--lh-body);color:var(--color-ink);font-weight:400}
#lessonPanel .lesson-lead{color:var(--color-ink)}
#lessonPanel ul,#lessonPanel .lesson-anatomy ul{padding-left:1.1em;margin:var(--space-xs) 0 var(--space-md)}
#lessonPanel li{margin:var(--space-xs) 0}
#lessonPanel .lesson-observe{border-left:1px solid var(--color-rule-2);padding:0 0 0 var(--space-md);margin:var(--space-lg) 0;background:transparent}
#lessonPanel .lesson-observe h3{margin-top:0}
#lessonPanel .lesson-targets{gap:var(--space-xs);margin:var(--space-sm) 0 0}
#lessonPanel .lesson-targets button{min-height:2.5rem;font-size:var(--text-sm);font-weight:500;padding:0 var(--space-sm);border:1px solid var(--color-rule-2);background:transparent;color:var(--color-ink);text-align:left;white-space:normal;line-height:1.25}
@media(hover:hover){#lessonPanel .lesson-targets button:hover{background:var(--color-control);border-color:var(--color-rule-2);color:var(--color-ink)}}
#lessonPanel .lesson-case,#lessonPanel .lesson-check{background:transparent;border:0;border-top:1px solid var(--color-rule);padding:var(--space-md) 0 0;margin:var(--space-lg) 0}
#lessonPanel .lesson-case h3,#lessonPanel .lesson-check h3{margin:0 0 var(--space-xs)}
#lessonPanel .lesson-case p{font:500 var(--text-md)/1.4 var(--font-display);color:var(--color-ink);margin:var(--space-xs) 0 0}
#lessonPanel .lesson-surgical{border-top:1px solid var(--color-rule);padding:var(--space-md) 0 0;margin:var(--space-lg) 0}
#lessonPanel #lessonAnswer summary,#lessonPanel .lesson-answer summary{color:var(--color-accent);font-weight:500;font-size:var(--text-sm)}
#lessonPanel summary{font-size:var(--text-sm);font-weight:500;color:var(--color-muted);min-height:2.5rem;padding:var(--space-xs) 0;cursor:pointer}
#lessonPanel summary:hover{color:var(--color-ink)}
#lessonPanel details p,#lessonPanel .lesson-sources a{font-size:var(--text-sm);line-height:1.55}
#lessonPanel details small,#lessonPanel .lesson-sources .evidence-type{font:400 var(--text-xs)/1.5 var(--font-body);color:var(--color-muted);letter-spacing:0}
#lessonPanel .lesson-reference-drawer,#lessonPanel .lesson-case-reminder,#lessonPanel .network-comparison{border-top:1px solid var(--color-rule);margin:var(--space-md) 0 0;padding:var(--space-2xs) 0 0}
#lessonPanel .lesson-side-note,#lessonPanel .learning-save-note,#lessonPanel .lesson-version{font:400 var(--text-xs)/1.5 var(--font-body);color:var(--color-muted);margin:var(--space-md) 0}
#lessonPanel .lesson-notice{border-left:1px solid var(--color-accent);padding:var(--space-xs) var(--space-sm);margin:0 0 var(--space-md);background:transparent;font-size:var(--text-sm);color:var(--color-ink)}
#lessonPanel .lesson-error{border-left:1px solid var(--color-accent);padding:var(--space-xs) var(--space-sm);background:transparent}
#lessonPanel .lesson-controls{border-top:1px solid var(--color-rule);padding:var(--space-sm) 0 0;background:var(--color-paper)}
#lessonPanel .lesson-nav{gap:var(--space-xs)}
#lessonPanel .lesson-nav button{min-height:var(--control-height);font-size:var(--text-sm);padding:0 var(--space-md);white-space:nowrap}
#lessonPanel .lesson-nav button:first-child{background:transparent;border-color:var(--color-rule-2);color:var(--color-ink)}
#lessonPanel .lesson-nav button:first-child:hover{background:var(--color-control)}
.lesson-tools{gap:var(--space-md);margin-top:var(--space-2xs)}
#lessonPanel .lesson-tools #lessonRestore,#lessonPanel .lesson-tools #lessonExplore{font-size:var(--text-xs);font-weight:500;color:var(--color-muted);min-height:2.25rem;padding:0;background:transparent;border:0}
#lessonPanel .lesson-tools #lessonRestore:hover,#lessonPanel .lesson-tools #lessonExplore:hover{color:var(--color-ink);transform:none}
@media(min-width:1101px){#lessonPanel .lesson-controls::before{background:linear-gradient(to bottom,transparent,var(--color-paper))}}
/* Recap */
.recap-takeaways{padding-left:1.2em}
#lessonPanel .recap-takeaways li{padding:var(--space-xs) 0 var(--space-sm);border-bottom:1px solid var(--color-rule)}
#lessonPanel .recap-takeaways button{font-size:var(--text-sm);font-weight:500;color:var(--color-accent);border:0;border-radius:0;padding:0;min-height:2.25rem;background:transparent;text-decoration:underline;text-underline-offset:0.2em;text-decoration-thickness:1px}
#lessonPanel .recap-takeaways button:hover{color:var(--color-accent-strong);transform:none}
#lessonPanel #lessonReview,#lessonPanel #lessonNextTopic{text-align:left;font-size:var(--text-sm);margin:var(--space-xs) 0}

/* ---- Home library: Index-First list beside the atlas. ---- */
body[data-mode=library] #atlasWorkspace{height:auto;min-height:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-2xl)}
body[data-mode=library] #atlasWorkspace .atlas-stage{position:sticky;top:5.5rem;height:calc(100dvh - 7rem);min-height:440px;max-height:820px}
body[data-mode=library] #atlasWorkspace #lessonPanel{padding:0;overflow:visible;height:auto}
#lessonPanel .lesson-scroll>.lesson-kicker:first-child,body[data-mode=library] #lessonPanel>.lesson-kicker{display:none}
.library-entry{gap:var(--space-xs);margin:var(--space-lg) 0 var(--space-xl)}
#lessonPanel .library-entry button{min-height:var(--control-height);padding:0 var(--space-md);font-size:var(--text-sm);flex:none;text-align:center}
#lessonPanel .library-entry button:first-child{flex:none}
#lessonPanel .library-entry button:last-child,#lessonPanel .library-entry #lessonExplore{background:transparent;border-color:var(--color-rule-2);color:var(--color-ink);display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0}
.library-entry small{display:inline;margin:0 0 0 var(--space-xs);font-size:var(--text-xs);color:inherit;opacity:.75}
.curriculum-heading{display:block;border-bottom:1px solid var(--color-rule-2);padding:0 0 var(--space-xs)}
#lessonPanel .curriculum-heading h3{font:600 var(--text-sm)/1.4 var(--font-body);margin:0;color:var(--color-ink)}
#lessonPanel .curriculum-heading p{font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-3xs) 0 0!important}
#lessonPanel .lesson-catalog .curriculum-row{grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-md);padding:var(--space-md) 0;min-height:0;border-bottom:1px solid var(--color-rule);border-radius:0;background:transparent;align-items:baseline;text-align:left;white-space:normal}
#lessonPanel .lesson-catalog .curriculum-row:hover{background:transparent;transform:none}
#lessonPanel .lesson-catalog .curriculum-row:hover .curriculum-name{color:var(--color-accent-strong)}
#lessonPanel .lesson-catalog .curriculum-number{font:400 var(--text-sm)/1.4 var(--font-body);font-variant-numeric:tabular-nums;color:var(--color-muted)}
#lessonPanel .lesson-catalog .curriculum-name{font:500 var(--text-md)/1.3 var(--font-display);color:var(--color-ink);letter-spacing:0;display:block;transition:color var(--dur-micro) var(--ease-out)}
#lessonPanel .lesson-catalog small,.lesson-catalog span,.lesson-catalog small{font:400 var(--text-sm)/1.5 var(--font-body);color:var(--color-muted);letter-spacing:0;margin-top:var(--space-3xs);display:block}
.lesson-catalog section+section{margin-top:var(--space-xl)}

/* ---- Layers: overlay while teaching, docked column while exploring. ---- */
.anatomy-drawer{border:1px solid var(--color-rule);border-radius:var(--radius);background:var(--color-paper-2);margin:0}
.anatomy-drawer>summary{font:600 var(--text-sm)/1.3 var(--font-body);color:var(--color-ink);padding:var(--space-sm) var(--space-md);min-height:var(--control-height);display:flex;align-items:baseline;gap:var(--space-sm);list-style:none;cursor:pointer}
.anatomy-drawer>summary::-webkit-details-marker{display:none}
.anatomy-drawer>summary span{font:400 var(--text-xs)/1.4 var(--font-body);color:var(--color-muted);margin:0;display:inline}
.anatomy-drawer[open]{top:5.5rem;right:var(--page-gutter);bottom:var(--space-lg);width:min(30rem,calc(100vw - 2 * var(--page-gutter)));box-shadow:0 12px 32px oklch(10% 0.01 248 / .55);z-index:var(--z-dropdown)}
.anatomy-drawer .atlas-controls{padding:var(--space-md);gap:var(--space-md);border:0;align-items:end}
.atlas-controls>div{min-width:0}
.atlas-controls label .picker-count{display:block;margin:0;font-size:var(--text-xs)}
.atlas-controls label,.picker-group h3,.picker-group>span,.range-caption,.picker-count,#pathwayStatus,.picker-help{font:400 var(--text-sm)/1.5 var(--font-body);color:var(--color-muted);letter-spacing:0;text-transform:none;margin:0 0 var(--space-2xs)}
.atlas-controls label{display:block;min-height:0}
.atlas-controls select{width:100%;min-height:var(--control-height);font-size:var(--text-sm);background-color:var(--color-control)}
.range-caption{display:flex;justify-content:space-between;font-size:var(--text-xs)}
.deep-control>label{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--control-height);color:var(--color-ink);margin:0 0 var(--space-xs)}
.network-legend,.picked-network{font:400 var(--text-xs)/1.5 var(--font-body);color:var(--color-muted);letter-spacing:0}
.pathway-picker{border-top:1px solid var(--color-rule);padding-top:var(--space-md)}
.picker-head{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:nowrap;margin-bottom:var(--space-xs)}
.picker-head h2{font:600 var(--text-sm)/1.4 var(--font-body);margin:0;color:var(--color-ink);flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-xs);min-width:0}
.picker-head .picker-count{margin:0;font-size:var(--text-xs);white-space:nowrap;font-weight:400}
.picker-head button{flex:none;min-height:2.25rem;font-size:var(--text-xs);margin:0;padding:0 var(--space-xs);background:transparent;border:0;color:var(--color-muted);text-decoration:underline;text-underline-offset:0.2em;text-decoration-thickness:1px}
.picker-head button:hover{color:var(--color-ink);transform:none;background:transparent}
.picker-head button:disabled{text-decoration:none}
#pathwayStatus{margin:0 0 var(--space-xs);font-size:var(--text-xs)}
#pathwayStatus .filter-chip{min-height:1.75rem;border-radius:var(--radius);border-color:var(--color-rule-2);background:transparent;color:var(--color-ink);font-size:var(--text-xs)}
.picker-help{font-size:var(--text-xs);margin:0 0 var(--space-md)}
#selectedPathways{gap:var(--space-xs);margin-bottom:var(--space-xs)}
#selectedPathways button{min-height:2rem;font-size:var(--text-xs);padding:0 var(--space-xs)}
.anatomy-drawer .picker-group{margin-top:var(--space-lg)}
.picker-group h3{font-weight:600;color:var(--color-ink);margin-bottom:var(--space-2xs)}
.pathway-row{grid-template-columns:minmax(0,1fr) 2.5rem 2.5rem;gap:var(--space-xs);padding:var(--space-xs) 0;border-bottom:1px solid var(--color-rule)}
.pathway-row>span{font-size:var(--text-sm);line-height:1.35;color:var(--color-ink)}
.bundle-chip{min-height:2.25rem;padding:0;font-size:var(--text-xs);font-weight:600;border:1px solid var(--color-rule-2);background:transparent;color:var(--color-muted);border-radius:var(--radius);justify-content:center;gap:0}
.bundle-chip i{display:none}
.bundle-chip[aria-pressed=true] i::after{content:none}
@media(hover:hover){.bundle-chip:hover{background:var(--color-control);color:var(--color-ink)}}
.bundle-chip:disabled{opacity:.45}
/* Docked in Explore: the right column is the panel, no overlay. */
body[data-mode=explore] #atlasWorkspace,body[data-mode=explore][data-profile=presenter] #atlasWorkspace{grid-template-columns:minmax(0,1fr) clamp(380px,32vw,500px)}
body[data-mode=explore] #atlasWorkspace #lessonPanel{display:none}
body[data-mode=explore] .anatomy-drawer,body[data-mode=explore] .anatomy-drawer[open]{position:static;display:block;width:auto;grid-column:2;grid-row:1;margin:0 0 0 var(--space-xl);height:100%;min-height:0;overflow:auto;box-shadow:none;border:0;background:transparent;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--color-rule-2) transparent}
body[data-mode=explore] .anatomy-drawer:not([open]){display:block}
body[data-mode=explore] .anatomy-drawer>summary{padding:0 0 var(--space-xs);border-bottom:1px solid var(--color-rule);min-height:2.5rem;cursor:default}
body[data-mode=explore] .anatomy-drawer .atlas-controls{padding:var(--space-md) 0}
body[data-mode=explore] .studio-header nav button#openAtlasTools{display:none}
body[data-expanded=true] .anatomy-drawer{display:none}

/* ---- Find anatomy popover ---- */
.anatomy-search{top:var(--space-xs);left:var(--page-gutter);width:min(44rem,calc(100% - 2 * var(--page-gutter)));padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius);box-shadow:0 12px 32px oklch(10% 0.01 248 / .55);z-index:var(--z-dropdown)}
.anatomy-search>label{font:600 var(--text-sm)/1.4 var(--font-body);color:var(--color-ink);margin-bottom:var(--space-xs)}
.search-field{gap:var(--space-xs)}
#pathwayFilter{margin:0;font-size:var(--text-base);padding:0 var(--space-sm);min-height:var(--control-height);border-radius:var(--radius)}
.search-field button{background:transparent;border-color:var(--color-rule-2)}
#anatomySearchStatus{font-size:var(--text-sm);color:var(--color-muted);margin:var(--space-xs) 0 0}
#anatomyResults{max-height:20rem;border:0;border-top:1px solid var(--color-rule);background:transparent;padding:var(--space-sm) 0 0;margin-top:var(--space-sm)}
#anatomyResults>div{gap:var(--space-xs);margin-bottom:var(--space-sm)}
#anatomyResults h3{font:600 var(--text-xs)/1.4 var(--font-body);color:var(--color-muted);margin:0 0 var(--space-2xs)}
#anatomyResults button{min-height:2.25rem;font-size:var(--text-sm);font-weight:400;padding:0 var(--space-sm);background:transparent;border-color:var(--color-rule)}

/* ---- Footer: Ft4 colophon in three short columns. ---- */
.source-footer{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg) var(--space-xl);align-items:start;margin:var(--space-2xl) 0 var(--space-lg);max-width:none;font:400 var(--text-sm)/1.55 var(--font-body);color:var(--color-muted);border-top:1px solid var(--color-rule);padding-top:var(--space-lg)}
.source-footer p{margin:0 0 var(--space-2xs);display:block}
.source-footer p+p{display:block}
.source-footer p:nth-child(2){display:block}
.source-footer p::after{content:none}
.source-footer .foot-name{font:500 var(--text-md)/1.2 var(--font-display);color:var(--color-ink);margin-bottom:var(--space-xs)}
.source-footer .foot-brand>p:nth-child(2){max-width:34ch}
.source-footer .foot-label{font-weight:600;color:var(--color-ink);margin-bottom:var(--space-xs)}
.source-footer .creator-credit{margin-top:var(--space-sm)}
.source-footer .creator-credit strong{font-weight:500;color:var(--color-ink)}
.source-footer .creator-credit a{white-space:nowrap}
.source-footer .foot-role{color:var(--color-muted);margin-top:var(--space-2xs)}
.source-footer .foot-role span{white-space:nowrap}
/* Author block on the sources page: a quiet two-column record, no cards. */
.author-block{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);margin:0 0 var(--space-xl);padding:var(--space-lg) 0 0;border-top:1px solid var(--color-rule)}
.author-block p{margin:0 0 var(--space-xs)}
.author-block .author-name{font:500 var(--text-md)/1.3 var(--font-display);color:var(--color-ink);margin-bottom:var(--space-2xs)}
.author-block .author-registry{color:var(--color-muted);font-size:var(--text-sm)}
.author-block dl{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:var(--space-xs) var(--space-md);margin:var(--space-md) 0 0;font-size:var(--text-sm);line-height:1.5}
.author-block dt{color:var(--color-muted);font-weight:500}
.author-block dd{margin:0;color:var(--color-ink)}
.author-block dd span{display:block}
.author-block dd span+span{margin-top:var(--space-3xs)}
.author-block dd .when{color:var(--color-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media screen and (max-width:600px){.author-block dl{grid-template-columns:minmax(0,1fr)}.author-block dt{margin-top:var(--space-xs)}}
.source-footer a{font-size:inherit;color:var(--color-accent)}
.source-footer .foot-terms p:last-child{margin-top:var(--space-xs)}
.source-footer>div+div{margin:0}
@media screen and (max-width:760px){.source-footer{grid-template-columns:minmax(0,1fr);gap:var(--space-md);margin-top:var(--space-xl)}}
@media screen and (min-width:761px) and (max-width:1100px){.source-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.source-footer .foot-brand{grid-column:1/-1}}

/* ---- Sources page: Long Document. ---- */
body.sources main,.sources-page main{max-width:none}
.prose{box-sizing:content-box;max-width:var(--measure);margin:var(--space-xl) auto var(--space-2xl);padding:0 var(--page-gutter)}
.prose .eyebrow{display:none}
.prose h1{font:500 var(--text-display)/var(--lh-display) var(--font-display);letter-spacing:-0.01em;margin:0 0 var(--space-lg);color:var(--color-ink)}
.prose h2{font:500 var(--text-lg)/1.25 var(--font-display);letter-spacing:0;margin:var(--space-xl) 0 var(--space-sm);color:var(--color-ink)}
.prose p,.prose li{font-size:var(--text-base);line-height:var(--lh-body);color:var(--color-ink);margin:0 0 var(--space-md)}
.prose p.sources{font-size:var(--text-sm);color:var(--color-muted)}
.prose code{font:400 var(--text-xs)/1.4 var(--font-outlier);color:var(--color-muted);overflow-wrap:anywhere}
.prose a{color:var(--color-accent)}

/* ---- Tablet-width stack (761–1100 px) ---- */
@media screen and (max-width:1100px){
  .studio-header{padding:var(--space-sm) var(--page-gutter)}
  #atlasWorkspace,body[data-profile=presenter] #atlasWorkspace,body[data-mode=explore] #atlasWorkspace{display:flex;flex-direction:column;height:auto;min-height:0;gap:var(--space-lg)}
  /* Tablet stack: a fixed viewer, then a panel that still fits the viewport with its own scroll. */
  #atlasWorkspace .atlas-stage{height:clamp(300px,40dvh,480px);flex:none;grid-template-rows:auto minmax(0,1fr) auto}
  #atlasWorkspace #lessonPanel,#atlasWorkspace #lessonPanel[data-active-lesson=true]{padding:0;border:0;flex:none;height:calc(100dvh - 7rem - clamp(300px,40dvh,480px) - var(--space-lg));min-height:360px;max-height:none;overflow:hidden;display:flex;flex-direction:column}
  #lessonPanel .lesson-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--color-rule-2) transparent}
  #lessonPanel .lesson-controls{position:relative}
  #lessonPanel .lesson-controls::before{content:"";position:absolute;left:0;right:8px;bottom:100%;height:36px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--color-paper))}
  body[data-mode=library] #atlasWorkspace{gap:var(--space-xl)}
  body[data-mode=library] #atlasWorkspace .atlas-stage{position:relative;top:auto;height:clamp(360px,52dvh,560px);max-height:none}
  body[data-mode=explore] .anatomy-drawer,body[data-mode=explore] .anatomy-drawer[open]{margin:0;height:auto;overflow:visible}
  .scene-details{position:static}
}
/* Phone keeps the page scroll (rules below re-open the panel). */
@media screen and (max-width:760px){
  #atlasWorkspace #lessonPanel,#atlasWorkspace #lessonPanel[data-active-lesson=true]{height:auto;min-height:0;overflow:visible;display:block}
  #lessonPanel .lesson-scroll{overflow:visible}
  #lessonPanel .lesson-controls::before{display:none}
}
/* ---- Phone (≤ 760 px): short sticky viewer, page scroll, sticky action bar. ---- */
@media screen and (max-width:760px){
  .studio-header{position:static;min-height:0;padding:var(--space-sm) var(--page-gutter);gap:var(--space-sm);flex-wrap:wrap}
  .brand .brand-name{font-size:var(--text-md)}
  .studio-header nav{width:100%;justify-content:space-between;gap:0}
  .studio-header nav button,.studio-header nav a{padding:0 var(--space-xs);font-size:var(--text-sm)}
  .studio-header #lessonProfile{margin:0;padding:0 var(--space-lg) 0 var(--space-xs);font-size:var(--text-xs)}
  main{padding:var(--space-sm) var(--page-gutter)}
  .intro{margin:var(--space-md) 0 var(--space-lg)}
  .intro>p{font-size:var(--text-base)}
  #atlasWorkspace .atlas-stage{height:var(--stage-sticky);min-height:300px;max-height:420px;position:sticky;top:0;z-index:var(--z-sticky);margin:0}
  .stage-head{padding:var(--space-xs) var(--space-md);min-height:2.75rem}
  .stage-head{gap:var(--space-xs)}
  .stage-head>div:first-child{flex:1 1 0%;min-width:0;max-width:none}
  .stage-tools{flex:none}
  #atlasWorkspace .atlas-stage{grid-template-rows:auto minmax(0,1fr) auto}
  .stage-head p,#sceneOrientation{font-size:var(--text-xs);max-width:none}
  .stage-tools{gap:0}
  .stage-tools>button,.atlas-view-menu>summary{min-height:2rem;padding:0 var(--space-xs);font-size:var(--text-xs)}
  #expandAnatomy{display:none}
  .scene-readout{padding:var(--space-xs) var(--space-md);grid-template-areas:"class key" "name key" "status status" "details details"}
  .scene-readout h2,body[data-profile=presenter] .scene-readout h2{font-size:var(--text-base)}
  .scene-readout #lessonSceneStatus,.scene-readout #explorationStatus{display:none}
  .scene-details>summary{min-height:2rem}
  .scene-details-body{right:var(--space-xs);bottom:calc(100% + var(--space-2xs));width:min(22rem,calc(100vw - 2 * var(--space-xs)));max-height:60dvh}
  .atlas-view-menu .views{width:14rem;grid-template-columns:1fr 1fr;gap:var(--space-2xs)}
  #atlasWorkspace #lessonPanel,#atlasWorkspace #lessonPanel[data-active-lesson=true]{padding:var(--space-sm) 0 0}
  #lessonPanel .lesson-controls{position:sticky;bottom:0;z-index:var(--z-sticky);padding:var(--space-xs) 0 max(var(--space-xs),env(safe-area-inset-bottom));background:var(--color-paper)}
  #lessonPanel .lesson-nav button{padding:0 var(--space-sm)}
  .dissection-open,.dissection-reference{scroll-margin-top:calc(var(--stage-sticky) + var(--space-sm))}
  body[data-mode=library] #atlasWorkspace .atlas-stage{position:relative;height:clamp(300px,44dvh,420px);margin:0}
  body[data-mode=explore] #atlasWorkspace .atlas-stage,body[data-expanded=true] #atlasWorkspace .atlas-stage{height:calc(100dvh - 9rem);max-height:none;min-height:360px;position:relative;margin:0}
  .library-entry{flex-wrap:wrap}
  #lessonPanel .library-entry button{flex:1 1 auto}
  .anatomy-drawer[open]{top:var(--space-xs);right:var(--space-xs);left:var(--space-xs);bottom:var(--space-xs);width:auto}
  .anatomy-search{top:var(--space-xs);left:var(--space-xs);width:calc(100% - 2 * var(--space-xs));padding:var(--space-md)}
  .source-footer{margin-top:var(--space-lg)}
}
@media screen and (max-width:760px) and (max-height:520px){
  #atlasWorkspace .atlas-stage{position:relative;height:260px;min-height:0}
  .dissection-open,.dissection-reference{scroll-margin-top:var(--space-sm)}
}
@media(pointer:coarse){button,select,.stage-tools>button,.atlas-view-menu>summary,.views button,#lessonPanel button,.scene-details>summary,.studio-header nav button,.studio-header nav a{min-height:2.75rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:150ms!important;animation-duration:150ms!important;animation-iteration-count:1!important}button:hover{transform:none}}
@media(prefers-contrast:more){:root{--color-muted:oklch(88% 0.008 248);--color-rule:oklch(60% 0.015 248);--color-rule-2:oklch(78% 0.015 248)}}
@media print{.studio-header{position:static}.studio-header nav,.stage-tools,.lesson-controls{display:none!important}:root{--color-paper:white;--color-paper-2:white;--color-ink:black;--color-muted:#333;--color-rule:#999;--color-accent:black}}