/* Explorer: one case at a time. The character and the line they are answering lead;
   the layer bar says who may see each layer; the record follows below. */
.encounter-page { background:var(--paper); color:var(--ink); }
.encounter-page .container-fluid { width:var(--page-width); max-width:none; margin:auto; padding:0 0 var(--space-12); }
.encounter-page .layer-content { min-height:50vh; }

/* Breadcrumb: world / character / case, as plain text links. */
.encounter-page .scope-path { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); margin:var(--space-4) 0 0; padding:0; border:0; background:none; }
.encounter-page .scope-step {
  display:inline-flex; align-items:baseline; gap:var(--space-2); padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  color:var(--ink); font-size:var(--type-small); transform:none!important; transition:color var(--motion-fast) var(--ease-out);
}
.encounter-page .scope-step > span { font-size:var(--type-small); letter-spacing:0; text-transform:none; color:var(--ink-muted); }
.encounter-page .scope-step strong { font-weight:400; }
.encounter-page .scope-step:hover { background:none; color:var(--action); }
.encounter-page .scope-step.is-active { border:0; box-shadow:none; background:none; color:var(--ink-strong); }
.encounter-page .scope-step.is-active strong { font-weight:500; }
.encounter-page .scope-chevron { display:inline; align-self:baseline; color:var(--ink-faint); }

/* Identity: the character's name and what this encounter tests. */
.codex-identity { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-10); padding-block:var(--space-8) var(--space-10); }
.codex-identity h1 { margin:0; font:500 var(--type-h1)/1.04 var(--font-sans); letter-spacing:var(--track-display); color:var(--ink-strong); }
.codex-subtitle { margin:var(--space-3) 0 var(--space-5); color:var(--ink-muted); font-size:var(--type-lead); }
.codex-text-link { display:inline-flex; align-items:center; gap:var(--space-2); font:500 var(--type-body)/1.4 var(--font-sans); text-decoration:none; color:var(--ink-strong); transition:color var(--motion-fast) var(--ease-out); }
.codex-text-link > span { transition:transform var(--motion-normal) var(--ease-out); }
.codex-text-link:hover { color:var(--action); }
.codex-text-link:hover > span { transform:translateX(3px); }
.codex-portrait { flex:0 0 32%; margin:0; }
.codex-portrait img { display:block; width:100%; height:200px; object-fit:cover; object-position:62% center; border-radius:var(--radius-media); }
.codex-portrait figcaption { margin-top:var(--space-2); font-size:var(--type-caption); color:var(--ink-muted); }
/* Section labels: quiet words, never shouted. */
.codex-eyebrow { margin:0; font:500 var(--type-small)/1.5 var(--font-sans); letter-spacing:0; text-transform:none; color:var(--ink-muted); }

/* Archive browser: the filters, folded until wanted. */
.archive-browser { margin-bottom:var(--space-6); border-block:1px solid var(--line); }
.archive-browser > summary {
  display:flex; align-items:baseline; gap:var(--space-4); padding-block:var(--space-3); cursor:pointer; list-style:none; font-weight:500; color:var(--ink-strong);
}
.archive-browser > summary::-webkit-details-marker { display:none; }
.archive-browser > summary::before {
  content:''; flex:none; align-self:center; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform var(--motion-normal) var(--ease-out);
}
.archive-browser[open] > summary::before { transform:rotate(45deg); }
.archive-browser > summary > span { color:var(--ink-muted); font-size:var(--type-small); font-weight:400; }
.archive-browser > summary:hover { color:var(--action); }
.archive-browser[open] .explorer-toolbelt { animation:bank-fade-up var(--motion-slow) var(--ease-out) both; }
.archive-browser .explorer-toolbelt { margin:0; border:0; padding:var(--space-4) 0; background:transparent; }

/* Layer bar: three audiences, one rule. Gilt marks the open layer. */
.encounter-page .case-layer-bar { gap:var(--space-4); margin:0 0 var(--space-8); border-bottom:1px solid var(--line-strong); background:transparent; }
.encounter-page .layer-group { border-left-color:var(--line); }
.encounter-page .layer-group-label { margin-bottom:var(--space-1); font-size:var(--type-caption); font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-muted); }
.encounter-page .layer-group.is-active .layer-group-label { color:var(--gilt-800); }
.encounter-page .layer-tab {
  position:relative; padding:var(--space-2) var(--space-3) var(--space-3); border-bottom:0; color:var(--ink-muted); font-size:var(--type-body);
  transition:color var(--motion-fast) var(--ease-out);
}
.encounter-page .layer-tab::after { content:''; position:absolute; left:var(--space-3); right:var(--space-3); bottom:-1px; height:2px; background:var(--gilt-600); transform:scaleX(0); transition:transform var(--motion-normal) var(--ease-out); }
.encounter-page .layer-tab:hover { background:none; color:var(--ink-strong); }
.encounter-page .layer-tab.is-active { color:var(--ink-strong); font-weight:500; }
.encounter-page .layer-tab.is-active::after { transform:scaleX(1); }
.encounter-page .field-view-toggle { margin-bottom:var(--space-2); border-color:var(--line-strong); border-radius:var(--radius-control); }
.encounter-page .field-view-toggle a { padding:var(--space-1) var(--space-3); background:var(--paper-raised); border-left-color:var(--line-strong); transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out); }
.encounter-page .field-view-toggle a.is-active { background:var(--ink-strong); color:var(--paper); }
.encounter-page .layer-content { padding-top:0; }
.encounter-page .layer-content > * { animation:bank-fade-up var(--motion-slow) var(--ease-out) both; }

/* The encounter: the line spoken to the character, and the state it is spoken in. */
.encounter-opening { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(14rem,1fr); gap:clamp(2rem,5vw,4rem); padding-block:var(--space-2) var(--space-12); }
.encounter-dialogue { min-width:0; }
.encounter-turn { margin-top:var(--space-6); }
.encounter-speaker { margin:0 0 var(--space-2); font-size:var(--type-body); color:var(--ink-muted); }
.encounter-turn blockquote { margin:0; padding:0; border:0; font:400 clamp(1.75rem,1.3rem + 1.4vw,2.375rem)/1.3 var(--font-serif); letter-spacing:-.01em; color:var(--ink-strong); white-space:pre-wrap; overflow-wrap:anywhere; }
.encounter-response-note { margin:var(--space-6) 0 0; font-size:var(--type-small); color:var(--ink-muted); }
.encounter-conditions { padding-left:var(--space-8); border-left:1px solid var(--line); }
.encounter-conditions dl { margin:var(--space-3) 0 var(--space-5); }
.encounter-conditions dl > div { display:flex; justify-content:space-between; gap:var(--space-5); padding-block:var(--space-2); border-bottom:1px solid var(--line); }
.encounter-conditions dt { color:var(--ink-muted); }
.encounter-conditions dd { margin:0; text-align:right; color:var(--ink-strong); }
.encounter-knowledge { display:grid; grid-template-columns:minmax(14rem,1fr) minmax(0,1.75fr); gap:clamp(2rem,5vw,4rem); padding-block:var(--space-10); border-top:1px solid var(--line); }
.encounter-knowledge h2,.character-voice h2 { margin:0 0 var(--space-2); font:500 var(--type-h2)/1.15 var(--font-sans); letter-spacing:var(--track-heading); color:var(--ink-strong); }
.encounter-knowledge header > p:last-child { color:var(--ink-muted); }
.encounter-knowledge p { max-width:44rem; }
.encounter-knowledge h3 { margin:var(--space-6) 0 var(--space-2); font:500 var(--type-body)/1.4 var(--font-sans); color:var(--ink-strong); }
.encounter-facts { margin:0; padding-left:var(--space-5); font-size:var(--type-body); line-height:1.55; }
.encounter-facts li { padding-left:var(--space-2); margin-bottom:var(--space-3); }
.encounter-facts li::marker { color:var(--ink-faint); }
.encounter-more { margin-top:var(--space-4); }
.encounter-more summary,.encounter-raw summary,.voice-excerpts summary { cursor:pointer; font-weight:500; color:var(--ink-strong); transition:color var(--motion-fast) var(--ease-out); }
.encounter-more summary:hover,.encounter-raw summary:hover,.voice-excerpts summary:hover { color:var(--action); }
.encounter-more[open] summary { margin-bottom:var(--space-4); }
.encounter-no-facts { color:var(--ink-muted); }
/* What the judge sees lives behind its own tab; this is the doorway. */
.encounter-inspect { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4) var(--space-6); padding:var(--space-6) var(--space-8); border-radius:var(--radius-media); background:var(--paper-sunk); }
.encounter-inspect p:not(.codex-eyebrow) { margin:var(--space-1) 0; font:500 var(--type-h3)/1.25 var(--font-sans); color:var(--ink-strong); letter-spacing:-.01em; }
.encounter-inspect small { color:var(--ink-muted); font-size:var(--type-small); }
.codex-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:44px; padding:0 var(--space-5);
  border:1px solid var(--ink-strong); border-radius:var(--radius-control); background:transparent; color:var(--ink-strong); text-decoration:none; font-weight:500; white-space:nowrap;
  transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);
}
.codex-primary > span { transition:transform var(--motion-normal) var(--ease-out); }
.codex-primary:hover { background:var(--ink-strong); color:var(--paper); }
.codex-primary:hover > span { transform:translateX(3px); }
.encounter-raw { margin-top:var(--space-6); color:var(--ink-muted); }
.encounter-raw pre { max-height:500px; overflow:auto; }

/* Character record. */
.character-reading { padding-block:var(--space-2); }
.character-summary { max-width:44rem; margin:0 0 var(--space-10); font:400 var(--type-h3)/1.45 var(--font-serif); color:var(--ink-strong); }
.character-reading-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(14rem,1fr); gap:clamp(2rem,5vw,4rem); }
.voice-anchors { display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; padding:0; margin-block:var(--space-5); }
.voice-anchors li { padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill,999px); background:var(--paper-sunk); font-size:var(--type-body); color:var(--ink-strong); }
.character-voice .profile-field,.character-in-world .profile-field { margin-top:var(--space-5); }
.voice-excerpts { margin-top:var(--space-6); }
.voice-excerpts > p { font-size:var(--type-small); color:var(--ink-muted); }
.character-in-world { padding-left:var(--space-8); border-left:1px solid var(--line); }
.character-in-world > .codex-eyebrow { margin-bottom:var(--space-4); }
.character-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); margin-top:var(--space-12); }
.character-chapters a {
  display:grid; gap:var(--space-2); padding:var(--space-5) var(--space-5) var(--space-6); border-radius:var(--radius-media); background:var(--paper-sunk); color:var(--ink); text-decoration:none;
  transition:background-color var(--motion-normal) var(--ease-out);
}
.character-chapters strong { display:inline-flex; align-items:center; gap:var(--space-2); font:500 var(--type-lead)/1.3 var(--font-sans); color:var(--ink-strong); }
.character-chapters strong > span { transition:transform var(--motion-normal) var(--ease-out); }
.character-chapters a > span:last-child { color:var(--ink-muted); font-size:var(--type-small); }
.character-chapters a:hover { background:var(--action-soft); }
.character-chapters a:hover strong > span { transform:translateX(3px); }

.character-reading .data-chip { border:0; border-radius:0; padding:0; background:transparent; }
.character-reading .chip-list { gap:var(--space-2) var(--space-3); }
.character-in-world .data-chip { display:block; width:100%; border-bottom:1px solid var(--line); padding-bottom:var(--space-2); }

@media(max-width:1000px) {
  .encounter-conditions,.character-in-world { padding-left:var(--space-5); }
  .encounter-inspect { padding:var(--space-6); }
}
/* Narrow screens: each audience gets its own row, so every layer stays visible. */
@media(max-width:900px) {
  .encounter-page .case-layer-bar { flex-direction:column; align-items:stretch; gap:0; }
  .encounter-page .layer-groups { flex-direction:column; align-items:stretch; }
  .encounter-page .layer-group { display:flex; align-items:baseline; gap:var(--space-3); padding:0; border-left:0; border-top:1px solid var(--line); }
  .encounter-page .layer-group:first-child { border-top:0; }
  .encounter-page .layer-group-label { flex:0 0 5.5rem; margin:0; }
  .encounter-page .layer-tab-list { flex-wrap:wrap; }
  .encounter-page .layer-tab { padding-inline:var(--space-2); font-size:var(--type-small); }
  .encounter-page .layer-tab::after { left:var(--space-2); right:var(--space-2); }
  .encounter-page .field-view-toggle { align-self:flex-start; margin:var(--space-3) 0; }
}
@media(max-width:700px) {
  .codex-identity { flex-wrap:wrap; gap:var(--space-5); padding-block:var(--space-6); }
  .codex-identity > div { width:100%; }
  .codex-portrait { flex-basis:100%; }
  .codex-portrait img { height:180px; object-position:center 48%; }
  .archive-browser > summary > span { display:none; }
  .encounter-opening,.encounter-knowledge,.character-reading-grid { grid-template-columns:1fr; gap:var(--space-6); padding-block:var(--space-2) var(--space-8); }
  .encounter-conditions,.character-in-world { padding:var(--space-5) 0 0; border-left:0; border-top:1px solid var(--line); }
  .encounter-turn { margin-top:var(--space-4); }
  .encounter-knowledge { padding-top:var(--space-8); }
  .encounter-inspect { padding:var(--space-5); }
  .codex-primary { white-space:normal; text-align:center; }
  .character-chapters { grid-template-columns:1fr; gap:var(--space-3); margin-top:var(--space-8); }
}