/* Case Conference page layer. Consumes tokens.css and the shared header/controls/footer from
 * hodos.css (studio-header N9, button/select/focus-visible, source-footer Ft4). This file holds
 * only the page-specific Workbench layout: the phase tab strip, the sticky imaging sidebar and
 * the stage body. One numbering system (the stage strip's order; the case list stays plain rows). */


*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
button,a,input,textarea,select{touch-action:manipulation}
textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* hodos.css styles .skip-link's colours; this page supplies the reveal-on-focus positioning
 * (mirrors landing.css, which this page does not load). */
.skip-link{position:absolute;left:var(--space-sm);top:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius);transform:translateY(-200%);transition:transform var(--dur-short) var(--ease-out);z-index:var(--z-modal)}
.skip-link:focus{transform:none}

/* hodos.css marks the current nav item only on <button> (the atlas workspace); this page's nav
 * is plain links, so the current-page rule is restated here for the anchor case, token-for-token. */
.studio-header nav a[aria-current=page]{color:var(--color-ink);box-shadow:inset 0 -2px 0 var(--color-accent);border-radius:0;font-weight:600}

button.primary{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.reference-links button{text-align:left;background:none}

h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.15;margin:0 0 var(--space-md)}
h1{font-size:var(--text-display);font-weight:var(--display-weight);font-variation-settings:var(--display-wdth);letter-spacing:var(--display-tracking);text-wrap:balance}
h2{font-size:var(--text-title)}
h3{font-size:var(--text-md)}
p{margin:0 0 var(--space-md)}
small,.muted{color:var(--color-muted)}
ul{padding-left:1.1em}
li{margin-bottom:var(--space-sm)}

main{max-width:1500px;margin:auto;padding:var(--space-xl) var(--page-gutter) var(--space-2xl);min-height:100vh;min-height:100dvh}
.catalog-intro{max-width:850px;margin:var(--space-xl) 0}
.catalog-intro>p{font-size:var(--text-md);max-width:65ch}
.catalog-intro>h1:focus{outline:none}
.draft-note{font-size:var(--text-sm);color:var(--color-muted);border-left:1px solid var(--color-rule-2);padding-left:var(--space-md)}

/* Case list: hairline rows, no big serif digits (one numbering system lives in the stage strip). */
.case-list{border-top:1px solid var(--color-rule)}
.case-row{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--space-lg);padding:var(--space-xl) 0;border-bottom:1px solid var(--color-rule);align-items:center}
.case-row h2{font-size:var(--text-xl);margin:var(--space-2xs) 0 var(--space-xs)}
.case-row p{margin:0;color:var(--color-muted)}
.row-actions{display:flex;flex-direction:column;gap:var(--space-xs)}
.text-button{background:transparent;border-color:transparent;color:var(--color-accent)}

.case-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-lg)}
.case-top p{margin:0;color:var(--color-muted)}

/* Stage strip: order and current stage only, labels not numerals. */
.stage-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--color-rule);margin:0 0 var(--space-xl);padding:0;list-style:none;gap:var(--space-2xs)}
.stage-nav li{margin:0}
.stage-nav button{width:100%;background:none;border:0;border-radius:0;text-align:left;padding:var(--space-sm) var(--space-xs);color:var(--color-muted)}
.stage-nav [aria-current=step]{color:var(--color-ink);box-shadow:inset 0 -2px 0 var(--color-accent)}
.stage-nav.has-decision{grid-template-columns:repeat(7,minmax(0,1fr))}

.case-workbench{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:var(--space-2xl)}
.case-aside{align-self:start;position:sticky;top:5.5rem}
.case-aside h2{font-size:var(--text-md)}
.case-aside figure{margin:0 0 var(--space-lg);background:var(--color-stage);border:1px solid var(--color-rule);padding:var(--space-md)}
.case-aside svg{display:block;width:100%;height:auto}
.case-aside figcaption{font-size:var(--text-sm);color:var(--color-muted)}
.case-aside .location{font-size:var(--text-sm);color:var(--color-accent);margin-bottom:var(--space-xs)}
.case-aside .case-name{font-size:var(--text-2xl);margin-bottom:var(--space-lg)}
.case-aside details{margin-top:var(--space-md)}
.reference-links{display:flex;flex-direction:column;gap:var(--space-xs)}

.stage-body{min-width:0;max-width:760px}
.stage-body>p{max-width:65ch}
.stage-body .lead{font-size:var(--text-md)}
.stage-index{color:var(--color-accent);font-size:var(--text-sm);margin-bottom:var(--space-sm)}
.fact-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin:var(--space-lg) 0}
.fact-columns h3{font-family:var(--font-body);font-size:var(--text-base)}
.finding{background:var(--color-paper-2);border-left:3px solid var(--color-accent);padding:var(--space-lg);margin:var(--space-lg) 0}
.prompt{font-size:var(--text-md);line-height:1.6}
label.field-label{display:block;margin:var(--space-lg) 0 var(--space-xs);font-weight:600}
textarea{width:100%;min-height:180px;resize:vertical;background:var(--color-stage);color:var(--color-ink);font:inherit;padding:var(--space-md);border:1px solid var(--color-rule-2);border-radius:var(--radius)}
.save-label{display:flex;gap:var(--space-sm);align-items:center;min-height:var(--control-height);margin-top:var(--space-md)}
.save-status{font-size:var(--text-sm);color:var(--color-muted)}
.stage-actions{display:flex;justify-content:space-between;gap:var(--space-md);border-top:1px solid var(--color-rule);padding-top:var(--space-lg);margin-top:var(--space-xl)}
.response-choice{display:flex;gap:var(--space-xs);margin:var(--space-md) 0}
.response-choice [aria-pressed=true]{border:2px solid var(--color-accent)}
.audio-controls{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin:var(--space-md) 0}
audio{width:100%;margin:var(--space-md) 0}
.status{min-height:1.5em;color:var(--color-accent)}
.debrief-block{padding:var(--space-lg) 0;border-bottom:1px solid var(--color-rule)}
.debrief-block h3{font-family:var(--font-body);font-size:var(--text-md)}
.source-link{font-size:var(--text-sm);display:block;margin-top:var(--space-xs)}
.response-copy{white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--space-md);background:var(--color-stage);border:1px solid var(--color-rule)}
.rubric-row{display:grid;grid-template-columns:1fr 155px;gap:var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid var(--color-rule)}
.rubric-row label{font-weight:600}
.rubric-row p{font-size:var(--text-sm);margin:var(--space-xs) 0 0;color:var(--color-muted)}
.rubric-row select{width:100%;align-self:start}
.sources{margin-top:var(--space-xl)}
.sources li{font-size:var(--text-sm)}
.sources p{color:var(--color-muted)}
/* Decide stage (only for cases with a decision): radio options, then every option's rationale. */
.decision-options{border:0;padding:0;margin:var(--space-md) 0}
.decision-option{display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-sm) 0;border-bottom:1px solid var(--color-rule)}
.decision-option input{margin-top:.3em;flex:none}
.decision-option input:disabled+label{color:var(--color-muted)}
.decision-option input:checked+label{color:var(--color-ink);font-weight:600}
.decision-rationale.chosen{border-left:3px solid var(--color-accent);padding-left:var(--space-md)}
.option-sources{margin:0}
.session-tools{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-lg)}

/* Reference-atlas dialog. No token exists for a modal scrim; --cc-scrim is this page's own
 * derived value (near-black, ~0.73 alpha) rather than an inline hex literal. */

dialog{width:min(1500px,96vw);max-width:none;height:92dvh;max-height:94dvh;background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule-2);padding:var(--space-md)}
dialog::backdrop{background:var(--color-scrim)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.dialog-head h2{font-size:var(--text-md);margin:0}
.reference-note{font-size:var(--text-sm);margin:var(--space-sm) 0}
#referenceFrame{height:calc(100% - 110px)}
iframe{border:1px solid var(--color-rule);width:100%;height:100%;background:var(--color-stage)}

@media(max-width:850px){
  .case-workbench{grid-template-columns:1fr;gap:var(--space-xl)}
  .case-aside{position:static}
  .case-aside figure{max-width:480px}
  .case-aside .case-name{font-size:var(--text-xl)}
  .stage-nav,.stage-nav.has-decision{grid-template-columns:repeat(3,1fr)}
  .case-row{grid-template-columns:1fr}
  .case-row h2{font-size:var(--text-lg)}
  .catalog-intro{margin-top:var(--space-md)}
  .case-workbench:has(.stage-body) .case-aside figure{display:none}
  .case-aside details{margin:0}
  .case-aside .draft-note{display:none}
  .case-aside .reference-links{display:none}
  .case-aside .case-name{margin-bottom:var(--space-xs)}
}
@media(max-width:480px){
  .fact-columns{grid-template-columns:1fr;gap:0}
  .rubric-row{grid-template-columns:1fr}
  .case-row{gap:var(--space-sm)}
  .stage-nav button{font-size:var(--text-sm)}
  .stage-actions button{padding:0 var(--space-sm)}
  .case-aside .case-name{font-size:var(--text-lg)}
  main{padding-top:var(--space-lg)}
  .case-top{gap:var(--space-xs)}
  .dialog-head h2{font-size:var(--text-base)}
  .dialog-head button{font-size:var(--text-xs)}
  .reference-note{font-size:var(--text-xs)}
}

.schematic>summary{cursor:pointer;min-height:var(--control-height);padding:var(--space-xs) 0}
.case-workbench:has(.stage-body) .case-aside .schematic[open] figure{display:block}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.case-imaging>summary{cursor:pointer;min-height:var(--control-height);padding:var(--space-xs) 0}
.case-mri img{display:block;width:100%;height:auto;background:var(--color-stage);margin-bottom:var(--space-md)}
.case-mri a{display:inline-flex;align-items:center;min-height:var(--control-height);font-size:var(--text-sm)}
.case-mri-panel{margin-bottom:var(--space-md)}
.case-mri-label{margin:0 0 var(--space-2xs);font-size:var(--text-sm);color:var(--color-accent)}
.case-workbench:has(.stage-body) .case-aside .case-imaging[open] figure{display:block}
/* Paired with .case-aside's top:5.5rem: matches hodos.css's own sticky-under-header convention
 * (#atlasWorkspace uses the same top:5.5rem / height:calc(100dvh - 7rem) pair), so the sticky
 * box's top offset plus its own max-height never exceeds the viewport. */
@media(min-width:851px){.case-aside{max-height:calc(100dvh - 7rem);overflow-y:auto;overscroll-behavior:contain}}

@media(forced-colors:active){button,textarea,select,figure{border:1px solid CanvasText!important}.stage-nav [aria-current=step]{border-bottom:3px solid Highlight}.response-choice [aria-pressed=true]{border:3px solid Highlight}svg{forced-color-adjust:none}}
@media print{.stage-nav,.stage-actions,.audio-controls,.session-tools,.reference-links{display:none}.case-workbench{display:block}.case-aside{position:static}.case-aside figure{max-width:300px}}

.case-row>a{display:inline-flex;align-items:center;min-height:var(--control-height)}