/* Approved line-art components and measured opaque diagram labels. */
:root{--diagram-ink:#19334f;--diagram-accent:#245eea;--diagram-paper:#fff;--diagram-muted:#74849a;--icon-ink:var(--diagram-ink);--icon-accent:var(--diagram-accent);--icon-paper:var(--diagram-paper);--icon-wash:#edf3ff;--icon-muted:var(--diagram-muted)}
:root[data-theme="dark"]{--diagram-ink:#dce7f7;--diagram-accent:#8daeff;--diagram-paper:#101c2c;--diagram-muted:#a0b2cb;--icon-wash:#21395d}
#drawing,.drawing-viewport{background:var(--diagram-paper)}
.vrfc-icon path,.vrfc-icon rect,.vrfc-icon circle{vector-effect:non-scaling-stroke}
.vrfc-icon .paper{fill:var(--icon-paper)}.vrfc-icon .wash{fill:var(--icon-wash);stroke:none}.vrfc-icon .accent{stroke:var(--icon-accent)}.vrfc-icon .muted{stroke:var(--icon-muted)}.vrfc-icon .dot{fill:var(--icon-accent);stroke:none}.vrfc-icon .ink-dot{fill:var(--icon-ink);stroke:none}
.ink-scene path{stroke-linecap:round;stroke-linejoin:round}
.ink-scene text{paint-order:stroke fill;stroke:var(--diagram-paper);stroke-width:7px;stroke-linejoin:round}
.diagram-label-plate{fill:var(--diagram-paper);stroke:none}
.diagram-label-layer{pointer-events:none}.diagram-label-layer text{paint-order:normal}
@media(prefers-reduced-motion:reduce){.diagram-flow{display:none}}
@media(min-width:761px){.reader-stage{min-height:0}.reader-stage .step-caption{max-height:104px;min-height:0;overflow:auto}.reader-stage .drawing-viewport{overflow:hidden}.reader-stage #drawing{max-height:100%}}
@media(max-width:760px){.drawing-viewport{overflow:hidden}#drawing{width:100%;height:min(440px,55svh);min-height:220px;max-height:55svh}.step-caption{min-height:0}}
/* A compact phone reader keeps navigation, introduction, and the complete player together. */
@media(max-width:760px){
 .topbar{height:54px;min-height:54px;padding:7px 16px;gap:10px;flex-wrap:nowrap}.topbar .brand{font-size:19px}.topbar .brand svg{width:23px;height:26px}.topbar #coverage{margin-left:auto;padding:8px 0;white-space:nowrap}.topbar .theme-toggle{width:36px;min-width:36px;height:36px;min-height:36px;margin-left:0;padding:8px;justify-content:center}.topbar .theme-toggle span{display:none}
 .shell>aside{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 16px;min-width:0}.document-select-label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.shell>aside .document-select{width:100%;min-width:0;height:44px;min-height:44px;margin:0;padding:7px;font-size:10px}.chapter-toggle{min-width:0;width:100%;height:44px;min-height:44px;margin:0;padding:6px 8px!important;gap:6px}.chapter-toggle>span{min-width:0}.chapter-toggle small{display:none}.chapter-toggle strong{font-size:11px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.chapter-toggle svg{width:16px;min-width:16px}.chapter-panel{grid-column:1/-1}
 .shell>main{padding:10px 16px 20px}.reader-stage{height:calc(100svh - 126px);min-height:0;display:flex;flex-direction:column}.reader-stage>.intro-meta,.reader-stage>.title-row,.reader-stage>.description,.reader-stage>.scene-top{flex-shrink:0}.intro-meta{font-size:8px}.title-row{margin-top:4px}.title-row h1{font-size:22px;line-height:1.17;letter-spacing:-.5px;margin:4px 0}.chapter-number{display:none}.description{font-size:11px;line-height:1.45;min-height:0;margin:5px 0 8px}.scene-label{display:none}.scene-top{margin-bottom:4px}.scene-top:has(.mode[hidden]){display:none}.mode button{padding:5px 9px;font-size:10px}
 .reader-stage>.paper{display:flex;flex-direction:column;flex:1;min-height:0}.reader-stage .paper-header,.reader-stage .transport,.reader-stage .step-caption{flex-shrink:0}.paper-header{min-height:33px;padding:4px 9px;font-size:7px;align-items:center}.paper-header #enlargeDrawing{font-size:10px;padding:4px 6px;min-height:24px}.transport{padding:4px 9px;gap:6px}.transport .play{min-width:34px;min-height:34px;width:34px;height:34px}.transport .icon-button{min-width:28px}.step-track{margin:0}.step-caption{margin:7px 10px 9px;padding-top:5px;min-height:0;max-height:105px;overflow:auto;gap:8px}.step-caption>span{font-size:10px;min-width:27px;padding:6px}.step-caption strong{font-size:12px;line-height:1.3}.step-caption p{font-size:11px;line-height:1.4;margin-top:3px}.reader-stage .drawing-viewport{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}.reader-stage #drawing,.reader-stage #drawing[data-diagram$="-delegated-permission"]{height:100%;width:100%;min-height:0;max-height:100%;margin:0}
}

@media(max-width:760px){.reader-stage>.paper{flex:0 1 auto}.reader-stage .drawing-viewport{flex:1 1 auto}.reader-stage #drawing,.reader-stage #drawing[data-diagram$="-delegated-permission"]{height:auto;max-height:100%}}
/* Active labels use the catalog accent with equal contrast in light and dark previews. */
.ink-scene text[style*="fill:#347b59"],.ink-scene text[style*="fill:#357b61"]{fill:var(--diagram-accent)!important}
.ink-scene [stroke="#347b59"],.ink-scene [stroke="#357b61"]{stroke:var(--diagram-accent)}
.diagram-label-layer text[style*="fill:#347b59"],.diagram-label-layer text[style*="fill:#357b61"]{fill:var(--diagram-accent)!important}
.diagram-label-layer text[style*="fill:#788575"]{fill:var(--diagram-muted)!important}

:root{--diagram-danger:#c2412f}:root[data-theme="dark"]{--diagram-danger:#ff9684}

/* Keep chapter navigation beside the player, within its viewport budget. */
.reader-stage>.chapter-footer{flex:0 0 auto;overflow:visible;gap:12px;margin:8px 0 0;padding:0;border-top:0;min-height:40px}
.reader-stage>.chapter-footer button{min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--ink);background:var(--paper,#fff)}
.reader-stage>.chapter-footer button:not(:disabled):hover{background:var(--wash,#eff6ff);border-color:var(--muted)}
.reader-stage>.chapter-footer #next:not(:disabled){color:var(--blue,#174be8);font-weight:600}
@media(max-width:760px){.reader-stage>.chapter-footer{gap:6px;margin-top:7px}.reader-stage>.chapter-footer button{min-height:44px;padding:7px 8px;font-size:11px}.reader-stage>.chapter-footer #chapterProgress{font-size:8px;white-space:nowrap}}

/* Reading has no clock: only the ink travels; geometry and captions stay still. */
.transport [hidden]{display:none!important}.transport #play{order:1}.transport #exploreSteps{order:3;border:1px solid var(--line);border-radius:6px;background:var(--diagram-paper);padding:7px 10px;font-size:11px;white-space:nowrap}.transport #stepTrack{order:4}.transport #time{order:5}.transport #nextStep{order:6}.transport[data-exploring="true"]{flex-wrap:wrap}.transport[data-exploring="true"] #stepTrack{flex-basis:65%}
@keyframes steady-flow{to{stroke-dashoffset:-36}}
#drawing[data-playing="true"] .draft-connector[data-active="true"] .draft-trace{stroke-dasharray:3 15;stroke-width:2;opacity:.7;animation:steady-flow 2.4s linear infinite}
#drawing[data-playing="false"] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#drawing *{animation:none!important}}
@media(max-width:760px){.transport #exploreSteps{font-size:10px;padding:7px}.transport{flex-wrap:nowrap}.transport[data-exploring="true"]{flex-wrap:wrap}}
.reader-stage .transport,#focusScene .transport{display:flex}

.transport[hidden]{display:none!important}.transport #exploreSteps{margin-left:auto}