/* Teaching plates. Typography and colours follow the reader's chosen theme. */
.visual-plate{margin:3rem 0 3.5rem;padding:1.6rem 0 1.3rem;border-top:3px solid var(--accent);border-bottom:1px solid var(--muted);font-family:var(--sans);font-size:16px;line-height:1.6;scroll-margin-top:22px;color:var(--ink);clear:both}
.prose .visual-plate h3{font:500 clamp(27px,3vw,35px)/1.15 var(--serif);margin:.55rem 0 .7rem;letter-spacing:-.025em;color:var(--ink)}
.visual-plate .viz-eyebrow{font:600 11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.prose .visual-plate p{font-family:var(--sans);font-size:15px;line-height:1.6;margin:.6rem 0 1rem}
.prose .visual-plate .viz-lead{font-size:17px;line-height:1.6;color:var(--muted);max-width:62ch;margin:0 0 1.7rem}
.prose .visual-plate h4{font:600 17px/1.4 var(--sans);letter-spacing:0;margin:0 0 .35rem;color:var(--ink)}
.prose .visual-plate .viz-subtitle{font-size:14px;color:var(--muted);margin:.3rem 0 1.2rem}
.viz-index{font:400 22px/1 var(--serif);color:var(--accent);display:inline-block;margin-right:.45rem}
.prose .visual-plate .viz-aside{font-size:14px;color:var(--muted);line-height:1.6}
.visual-plate figcaption{font:400 14px/1.6 var(--sans);margin:1.4rem 0 .7rem;color:var(--ink)}
.prose .visual-plate .viz-source{font:400 12px/1.6 var(--sans);color:var(--muted);margin:.7rem 0 0}
.visual-plate a{color:var(--accent);text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px}
.visual-plate .ipa{font-family:Charis,Georgia,serif}
.prose .visual-plate .viz-sentence{font:500 clamp(25px,3vw,32px)/1.35 var(--serif);margin:1.25rem 0 2rem;letter-spacing:-.01em}
.visual-jump{font:400 13px/1.7 var(--sans);margin:1.2rem 0!important;padding-left:1rem;border-left:3px solid var(--accent)}
.visual-jump span{display:block;color:var(--muted)}
.visual-jump a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.viz-svg{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.viz-svg text{fill:currentColor;font:400 16px var(--sans)}
.viz-svg .edge{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round}
.viz-svg .guide{stroke-dasharray:3 5;stroke-width:1;opacity:.65}
.viz-svg .focus-edge{stroke:var(--accent);stroke-width:3.5}
.viz-svg .focus-text{fill:var(--accent);font-weight:650}
.viz-svg .svg-label{font-size:12px;font-weight:600;letter-spacing:.07em}
.viz-svg .svg-example{font:500 23px var(--serif)}
.viz-svg .svg-small{font-size:14px}
.viz-svg .axis-note{font-size:11px}
.viz-svg .point{fill:var(--accent)}
.viz-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1rem 0;padding:.2rem 0}
.viz-details summary{font:500 14px/1.6 var(--sans);padding:.7rem 0;cursor:pointer;color:var(--accent)}
.viz-details[open] summary{margin-bottom:.5rem}
.prose .visual-plate .viz-bracket{font:400 13px/1.8 var(--code);overflow-wrap:anywhere}
.visual-plate table{width:100%;table-layout:auto;font:400 13px/1.55 var(--sans);border-collapse:collapse;margin:1rem 0}
.visual-plate th,.visual-plate td{padding:.6rem .45rem;min-width:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:normal}
.visual-plate th{font-weight:550;color:var(--ink)}
.visual-plate caption{text-align:left;color:var(--muted);font-size:13px;margin-bottom:.5rem}
.visual-plate .viz-controls{display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0 1.5rem}
.visual-plate .viz-controls[hidden],[data-enhance][hidden],.qud-stage[hidden]{display:none!important}
.visual-plate button{font:500 13px/1.4 var(--sans);min-height:44px;padding:9px 14px;border:1px solid var(--muted);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;transition:background .12s,color .12s}
.visual-plate button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.visual-plate button:hover{box-shadow:inset 0 -3px 0 var(--warm)}
.visual-plate :focus-visible{outline:3px solid var(--warm);outline-offset:4px}
.visual-plate .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.prose .visual-plate .viz-key{font-size:12px;line-height:1.8;color:var(--muted)}
.prose .visual-plate .viz-download{font-size:13px}
/* Each model has its own grammar: a dyadic enclosure and a filled triad. */
.sign-comparison{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sign-comparison>section+section{border-left:1px solid var(--line);padding-left:28px}
.sign-dyad{border:1.5px solid var(--accent);border-radius:50%;width:100%;max-width:310px;min-height:282px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:24px 18px;box-sizing:border-box}
.sign-dyad span{display:block;font:600 11px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.sign-dyad strong{display:block;font:500 24px/1.4 var(--serif);margin-top:4px}
.sign-dyad small{font-size:13px;color:var(--muted)}
.sign-dyad .sign-bond{font:400 30px/1.3 var(--sans);color:var(--accent)}
.triad-field{fill:var(--wash);stroke:var(--accent);stroke-width:1.5}
.sign-comparison .viz-svg{min-height:282px}
/* Trees retain 14px+ labels on a phone by changing orientation. */
.viz-tree-pair>section+section{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.viz-tree-pair .node{font-size:17px;font-weight:500}
.viz-tree-pair .leaf{font:500 20px var(--serif)}
.tree-compact{display:none}
/* Two distinct vowel maps: a qualitative articulatory scheme and measured Hz. */
.viz-vowel-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:28px}
.viz-side-notes{border-left:1px solid var(--line);padding-left:24px}
.viz-svg .vowel-marker{fill:var(--paper);stroke:var(--accent);stroke-width:2}
.viz-svg .vowel-outer{fill:none;stroke:var(--accent);stroke-width:1.5}
.viz-svg .vowel-glyph{font:500 27px Charis,Georgia,serif}
.viz-acoustic>.viz-svg{max-width:510px;margin:0 auto}
.formant-mark{fill:var(--accent);color:var(--accent)}
.formant-square{fill:var(--warm);color:var(--warm)}
.formant-triangle{fill:var(--ink);color:var(--ink)}
.viz-svg .formant-glyph{font:400 19px Charis,Georgia,serif}
.formant-mark.is-muted{opacity:.16}
.viz-acoustic .viz-key{text-align:center;font-size:13px!important}
.prose .visual-plate .viz-axis-guide{text-align:center;font-size:13px;color:var(--muted)}
/* Sourced anatomy is kept on white, including in dark mode. */
.anatomy-overview{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:start}
.anatomy-drawing{background:#fff;border:1px solid var(--line);overflow:hidden}
.anatomy-drawing text{fill:white;font:500 7.5px var(--sans)}
.anatomy-key{counter-reset:regions;list-style:none!important;margin:0!important;padding:0!important}
.anatomy-key li{position:relative;padding:0 0 .7rem 31px;counter-increment:regions;font-size:13px;line-height:1.5;margin:0!important}
.anatomy-key li::before{content:counter(regions);position:absolute;left:0;top:0;background:var(--accent);color:var(--on-accent);font-size:11px;width:22px;height:22px;text-align:center;line-height:22px;border-radius:50%}
.anatomy-key b,.anatomy-key span{display:block}
.anatomy-key span{color:var(--muted)}
.anatomy-comparison{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:2.4rem}
.anatomy-comparison h4{margin-bottom:1rem!important}
.anatomy-crop{background:white;border:1px solid var(--line);height:auto;aspect-ratio:1/1;overflow:hidden;position:relative}
.anatomy-crop img{display:block;width:100%;height:auto;margin-top:-37%;max-width:none}
.anatomy-comparison p{font-size:14px!important}
.prose .visual-plate .anatomy-callout{font:600 12px/1.5 var(--sans)!important;color:var(--accent);border-left:3px solid var(--accent);padding-left:9px;margin:.8rem 0}
.lab-visual{max-width:730px;margin:auto}
.lab-visual .visual-plate{border-top:0;margin-top:0}
.visual-directory{margin:2rem 0 3rem;padding:1rem 0 2rem;border-bottom:1px solid var(--line)}
.visual-directory h2{font:500 28px/1.2 var(--serif);margin:0 0 1.3rem}
.visual-directory>div{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.visual-directory a{padding:1rem 0;border-top:1px solid var(--line);text-decoration:none;display:block}
.visual-directory a:hover strong{text-decoration:underline;text-underline-offset:4px}
.visual-directory span{font:500 11px/1.6 var(--sans);color:var(--accent);letter-spacing:.05em}
.visual-directory strong{display:block;font:500 21px/1.3 var(--serif);margin:.4rem 0}
.visual-directory small{display:block;font:400 13px/1.6 var(--sans);color:var(--muted)}
/* Finite model: solid connections correspond one-to-one with matrix values. */
.viz-scope>.viz-svg{max-width:430px;margin:1rem auto 1.5rem}
.scope-link{fill:none;stroke:var(--accent);stroke-width:2;visibility:hidden}
.scope-link.is-active{visibility:visible}
.person-dot{fill:var(--accent)}
.viz-svg .person-label{fill:var(--on-accent);font-size:13px}
.book-mark{fill:var(--paper);stroke:var(--warm);stroke-width:1.8}
.scope-results{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:1.3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scope-symbol{font:400 25px/1.5 Charis,Georgia,serif;color:var(--accent)}
.scope-results h4{font-size:15px!important}
.scope-results p{font-size:14px!important;margin:.5rem 0 0!important}
.scope-matrix th:not(:first-child),.scope-matrix td{text-align:center}
.visual-plate .scope-matrix{table-layout:fixed}
.scope-matrix th:first-child{width:32%}
.scope-matrix td{padding:0;vertical-align:middle}
.scope-matrix label{display:flex;align-items:center;justify-content:center;min-height:48px;cursor:pointer}
.scope-matrix input{appearance:auto!important;width:21px;height:21px;accent-color:var(--accent);margin:0;cursor:pointer}
/* A dialogue ledger, not chat bubbles: utterance, agenda and shared content. */
.qud-stage{padding:1.3rem 0;border-top:1px solid var(--line)}
.qud-stage+.qud-stage{margin-top:1.3rem}
.qud-turn{display:flex;gap:12px;align-items:baseline}
.qud-turn>.viz-index{font-size:38px;min-width:25px}
.prose .visual-plate .qud-turn p{font:500 27px/1.35 var(--serif);margin:1rem 0 1.5rem}
.qud-speaker{font:600 12px var(--sans);border:1px solid var(--muted);padding:4px 7px;vertical-align:middle;margin-right:7px}
.qud-state{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.qud-state>div{padding:0 0 .6rem}
.qud-state .qud-question{border:1.5px solid var(--accent);padding:14px;margin-top:12px;background:var(--paper);position:relative;z-index:1}
.qud-state .qud-question p{margin:.6rem 0 1rem}
.qud-id{font:600 12px var(--sans);color:var(--accent);letter-spacing:.05em}
.qud-empty{border:1.5px dashed var(--muted);text-align:center;padding:22px 12px;color:var(--muted);margin-top:12px!important}
.qud-closed{font-size:12px!important;color:var(--muted)}
.qud-ledger{display:flex;gap:12px;align-items:baseline;margin-top:12px;border-top:2px solid var(--muted);border-bottom:1px solid var(--line);padding:10px 0}
.qud-ledger-mark{font:400 30px/1 var(--serif);color:var(--muted)}
.qud-ledger p{margin:0!important}
.qud-accepted{border-top-color:var(--warm)}
.qud-accepted .qud-ledger-mark{color:var(--warm)}
.qud-state p{font-size:15px!important}
.qud-status{font:500 12px var(--sans);background:var(--wash);color:var(--accent);padding:5px 8px;display:inline-block}
.qud-parent{font-size:13px!important;color:var(--muted);border:1px dashed var(--muted);border-top:0;padding:12px;margin-left:14px;background:var(--wash)}
.qud-parent .qud-id{display:block;margin-bottom:6px}
.qud-parent small{font-size:11px}
@media(max-width:600px){
 .reader-bottom .related-grid{grid-template-columns:minmax(0,1fr)}
 .viz-svg .svg-small{font-size:15.5px}
 .visual-directory>div{grid-template-columns:1fr}
 .visual-plate{margin:2.5rem 0;padding-top:1.2rem}
 .sign-comparison,.viz-vowel-layout,.anatomy-overview{grid-template-columns:1fr;gap:24px}
 .sign-comparison>section+section{padding:1.5rem 0 0;border-left:0;border-top:1px solid var(--line)}
 .sign-comparison .viz-svg{max-width:340px;margin:0 auto}
 .sign-dyad{max-width:280px;min-height:260px}
 .viz-vowel-layout>.viz-svg{max-width:390px;margin:auto}
 .viz-side-notes{border-left:0;border-top:1px solid var(--line);padding:12px 0 0}
 .viz-side-notes p{font-size:14px!important}
 .anatomy-drawing{max-width:360px;margin:auto}
 .anatomy-key{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
 .anatomy-comparison{gap:18px}
 .anatomy-comparison p{font-size:13px!important}
 .anatomy-comparison h4{font-size:15px!important}
 .tree-wide{display:none}.tree-compact{display:block;max-width:390px;margin:0 auto}
 .tree-compact .leaf{font-size:18px}.tree-compact .node{font-size:15px}
 .scope-results,.qud-state{grid-template-columns:1fr;gap:20px}
 .scope-results>div+div{padding-top:15px;border-top:1px solid var(--line)}
 .visual-plate .viz-controls{gap:7px}
 .visual-plate button{font-size:12px;padding:9px 11px}
 .qud-turn>.viz-index{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.visual-plate button{transition:none}}
@media print{
 .visual-plate{--paper:white;--ink:#33252f;--muted:#6f5d68;--accent:#883f67;--warm:#a74232;--wash:#f4e7ee;--line:#d9ced4;--on-accent:white;border-color:#883f67;page-break-inside:auto;color:#33252f;margin:1.5rem 0}
 .visual-plate .viz-controls,.visual-jump{display:none!important}
 .visual-plate div[data-enhance]:not(.viz-controls){display:block!important}
 .qud-stage[hidden]{display:block!important}
 .qud-stage,.viz-tree-pair>section,.anatomy-overview,.anatomy-comparison,.viz-vowel-layout{break-inside:avoid}
 .tree-wide{display:block!important}.tree-compact{display:none!important}
 .visual-plate svg{max-height:360px;width:100%;object-fit:contain}
 .visual-plate details> :not(summary){display:block!important}
 .visual-plate details::details-content{content-visibility:visible!important;height:auto!important}
 .visual-plate details summary{list-style:none;color:#33252f}
 .formant-mark.is-muted{opacity:1}
}