/* school-refinement.css */
/* Five readable chapters share one freely scrollable story. */
#school-story{height:360svh}
#school-stage{height:100svh;min-height:0;--school-control-height:120px}
#school-stage .story-copy,#school-stage[data-phase=reality] .hero-copy{top:max(110px,15svh)!important;left:var(--pad)!important;right:auto!important;width:36%!important;max-width:620px!important}
#school-stage .story-copy h2{font:450 clamp(34px,4.1vw,68px)/1.02 var(--sans);letter-spacing:-.05em}
#school-stage .story-copy p,#school-stage[data-phase=reality] .hero-copy p{font:400 clamp(16px,1.3vw,21px)/1.45 var(--sans)!important;max-width:440px!important;margin-top:22px;letter-spacing:0}
#school-stage .story-copy button{margin-top:20px}
#school-stage[data-scene=school] .story-shade{background:linear-gradient(90deg,#071018f5 0%,#071018d9 25%,#07101866 43%,transparent 65%),linear-gradient(0deg,#071018 0%,transparent 26%)!important}
#school-stage .school-plate{mask-image:none;-webkit-mask-image:none}
#school-stage .story-copy,#school-stage[data-phase=reality] .hero-copy{color:#edf5f6}
#school-stage .story-footer,#school-stage[data-phase=reality] .story-footer,#school-stage[data-phase=response].is-visible .story-footer{display:grid;grid-template-columns:1fr;gap:12px;position:absolute;top:auto;left:var(--pad);right:var(--pad);bottom:max(16px,env(safe-area-inset-bottom));padding:0;background:none;z-index:12;color:#edf5f6}
/* The chapter rail is a sequence, with one illuminated position in the story. */
#school-stage .school-chapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2.3vw,36px)}
#school-stage .school-chapters button{position:relative;display:flex;align-items:baseline;gap:12px;text-align:start;min-height:54px;padding:14px 0 8px;border:0;border-radius:0;background:none;color:#b4c6cf;font:450 clamp(14px,1.45vw,21px)/1.25 var(--sans);letter-spacing:-.025em;cursor:pointer;box-shadow:none;transition:color .2s ease}
#school-stage .school-chapters button::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:#64818d80}
#school-stage .school-chapters button::after{content:'';position:absolute;inset:0 0 auto;height:2px;background:#4fd6e8;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
#school-stage .school-chapters b{font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:0;color:#98adb7}
#school-stage .school-chapters button[aria-current=step]{color:#f1fbfc}
#school-stage .school-chapters button[aria-current=step]::after{transform:scaleX(1)}
#school-stage .school-chapters button[aria-current=step] b{color:#4fd6e8}
#school-stage .school-chapters button:hover{color:#fff}
#school-stage .experience-controls{border-radius:0;display:flex;align-items:center;gap:10px;min-width:0;max-width:none;width:100%;padding:0;background:none;border:0;box-shadow:none;font:450 14px var(--sans)}
#school-stage .experience-controls button{display:grid;place-items:center;min-height:44px;min-width:44px;border-radius:50%;border:1px solid transparent;background:none;color:#c7d9e0;cursor:pointer;transition:color .2s ease,border-color .2s ease}
#school-stage .experience-controls button:hover{color:#fff;border-color:#64818d}
#school-stage .experience-controls .play-control{width:auto;flex:none;display:flex;gap:13px;padding:0 12px 0 0;background:none;color:#f1fbfc;border:0;border-radius:0;font:500 15px var(--sans);letter-spacing:-.015em}
#school-stage .play-control>span[aria-hidden]{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid #4fd6e8;border-radius:50%;color:#4fd6e8;font-size:13px;background:#071018;box-shadow:0 0 0 4px #4fd6e808;transition:background .2s ease,color .2s ease}
#school-stage .play-control:hover>span[aria-hidden]{background:#4fd6e8;color:#071018}
#school-stage .experience-controls .replay-control{font-size:24px}
#school-stage .experience-controls button:disabled{opacity:.3;cursor:default;border-color:transparent}
#school-stage .school-timeline{flex:1;display:flex;align-items:center;padding:0 16px;min-width:0}
#school-stage .school-timeline input{width:100%;min-width:0;accent-color:#4fd6e8;cursor:pointer}
#school-stage .school-continue{white-space:nowrap;padding:14px 0 14px 14px;margin-inline-start:auto;color:#bdebf1;font:450 14px var(--sans);text-underline-offset:5px}
html[dir=rtl] #school-stage .school-chapters button::after{transform-origin:right}
#school-stage .school-evidence-preview{position:absolute;left:var(--pad);bottom:calc(var(--school-control-height) + 30px);width:150px;margin:0;background:#0b1922;border:1px solid #50616b;border-radius:6px;overflow:hidden;z-index:3;pointer-events:none}
#school-stage .school-evidence-preview svg{display:block;width:100%;height:150px}
#school-stage .school-evidence-preview path{fill:#4fd6e81c;stroke:#4fd6e8;stroke-width:1.5;vector-effect:non-scaling-stroke}
#school-stage .school-evidence-preview [data-school-object]{fill:#f2645740;stroke:#ff8276;stroke-width:2}
#school-stage .school-evidence-preview figcaption{display:flex;justify-content:space-between;gap:8px;padding:8px;font:400 12px/1.4 var(--sans);color:#c5d6dd}
#school-stage[data-phase=response] .story-copy{width:38%!important;top:max(110px,14svh)!important}
#school-stage[data-phase=response] .story-copy h2{font:500 clamp(34px,3.5vw,58px)/1.06 var(--sans)}
#school-stage #school-architecture{inset:0;width:100%;filter:none}
#school-stage .response-panel{top:110px;bottom:calc(var(--school-control-height) + 25px);right:var(--pad);left:auto;width:min(440px,41vw);max-height:none;overflow:auto;overscroll-behavior:auto;border-radius:14px;padding:0 22px 18px;border:1px solid #455e6b;background:#0e1c26f7;color:#edf5f6;box-shadow:0 22px 65px #0008;scrollbar-width:thin;scrollbar-color:#41616f #0e1c26;animation:none}
#school-stage .response-appbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;margin:0 -22px 20px;padding:15px 20px;background:#10232e;border-bottom:1px solid #35515e;font:500 12px var(--sans)}
#school-stage .response-appbar>span:first-child{letter-spacing:.14em;font-size:12px}
#school-stage .response-appbar strong{font-weight:500;border-inline-start:1px solid #49616d;padding-inline-start:14px;color:#4fd6e8}
#school-stage .response-case-class{margin-inline-start:auto;font-size:12px;letter-spacing:.08em;color:#b2c7d1}
#school-stage .response-location{display:flex;justify-content:space-between;gap:16px;color:#adc1ca;font:400 12px/1.4 var(--sans);margin-bottom:10px}
#school-stage .response-heading h3{font:500 24px/1.15 var(--sans);letter-spacing:-.02em}
#school-stage .response-heading .icon-button{border:1px solid #415d6b;border-radius:6px;color:#4fd6e8;min-width:40px;min-height:40px}
#school-stage .case-variant{border-radius:7px;padding:3px;border:1px solid #324e5c;margin:18px 0;background:#081720}
#school-stage .case-variant button{border-radius:4px;min-height:40px;padding:8px;font:500 12px/1.2 var(--sans)}
#school-stage .case-variant button[aria-pressed=true]{color:#eaffff;background:#184654}
#school-stage .case-scores{gap:12px;margin:14px 0}
#school-stage .case-scores>div{padding:12px;border-radius:7px;background:#132833;border:1px solid #2b4856}
#school-stage .case-scores strong{font:500 15px/1.3 var(--sans);color:#edf5f6}
#school-stage .case-scores>div>span{font-size:12px;color:#acc0ca}
#school-stage .response-route{border-color:#35505e;padding:14px 0 10px}
#school-stage .response-route h4{font:500 15px/1.3 var(--sans)}
#school-stage .response-route p{color:#aabfc9;font:400 12px/1.45 var(--sans)}
#school-stage .route-symbol{color:#4fd6e8}
#school-stage .response-routes{gap:7px;margin:10px 0 16px}
#school-stage .response-recipient{border:1px solid #324d5b;border-radius:7px;padding:12px;background:#132632;min-height:58px;text-align:start}
#school-stage .recipient-copy strong{font:500 14px/1.25 var(--sans)}
#school-stage .recipient-copy>span{font-size:12px;opacity:1;color:#a5bdc8}
#school-stage .recipient-pulse{background:#e7b469;box-shadow:0 0 0 4px #e7b46918}
#school-stage .response-recipient[data-status=acknowledged]{border-color:#3d736c;background:#132e30}
#school-stage .response-recipient[data-status=acknowledged] .recipient-pulse{background:#65d6bb}
#school-stage .optional-decision{border-color:#486071;font-size:12px;padding-top:14px}
#school-stage .optional-decision summary{font:500 13px/1.4 var(--sans)}
#school-stage .response-outcome{color:#b8cdd7;margin-top:12px}
#school-stage .school-receipt{max-height:calc(100% - 310px);overflow:auto;bottom:calc(var(--school-control-height) + 30px);background:#0e1c26f2;color:#edf5f6;border:1px solid #416170;border-radius:12px;padding:20px}
#school-stage .school-receipt h3{font:500 24px/1.2 var(--sans)}
#school-stage .concept-disclosure{bottom:calc(var(--school-control-height) + 9px)}
#school-stage .opening-classification{bottom:calc(var(--school-control-height) + 12px)!important}
#school-stage :is(button,a,input):focus-visible{outline:2px solid #76e6f5;outline-offset:3px}
@media(max-width:760px){
 #school-story{height:390svh}
 #school-stage{--school-control-height:119px}
 #school-stage .story-copy,#school-stage[data-phase=reality] .hero-copy,#school-stage[data-phase=response] .story-copy,#school-stage[data-phase=followup] .story-copy{top:90px!important;left:20px!important;right:20px!important;width:auto!important;max-width:none!important}
 #school-stage .story-copy h2,#school-stage[data-phase=response] .story-copy h2,#school-stage[data-phase=followup] .story-copy h2{font:500 clamp(26px,7.2vw,38px)/1.06 var(--sans);letter-spacing:-.03em;max-width:600px!important}
 #school-stage .story-copy p,#school-stage[data-phase=reality] .hero-copy p,#school-stage[data-phase=response] .story-copy p,#school-stage[data-phase=followup] .story-copy p{font:400 14px/1.4 var(--sans)!important;margin-top:12px;max-width:none!important}
 #school-stage[data-scene=school] .story-shade{background:linear-gradient(#071018f5 0%,#071018da 19%,#07101845 40%,transparent 52%),linear-gradient(0deg,#071018 0%,transparent 26%)!important}
 #school-stage .story-footer,#school-stage[data-phase=response].is-visible .story-footer{left:12px;right:12px;gap:8px;bottom:max(10px,env(safe-area-inset-bottom))}
 #school-stage .school-chapters{gap:10px}
 #school-stage .school-chapters button{flex-direction:column;justify-content:center;gap:5px;min-height:54px;padding:9px 0 4px;font-size:12px;text-align:start;letter-spacing:-.015em}
 #school-stage .school-chapters b{font-size:12px}
 #school-stage .experience-controls{gap:3px;padding:0}
 #school-stage .experience-controls .play-control{font-size:12px;padding:0 5px 0 0;gap:9px}
 #school-stage .play-control>span[aria-hidden]{width:44px;height:44px;flex-basis:44px}
 #school-stage .experience-controls button{min-width:44px}
 #school-stage .school-timeline{display:none}
 #school-stage .school-continue{font-size:12px;padding:14px 4px}
 #school-stage .school-evidence-preview{display:none}
 #school-stage[data-phase=response] .response-panel{position:absolute;top:clamp(260px,32svh,295px);left:16px;right:16px;bottom:calc(var(--school-control-height) + 8px);width:auto;max-height:none;padding:0 16px 16px;border-radius:12px;overscroll-behavior:auto;background:#0e1c26f5}
 #school-stage .response-appbar{margin:0 -16px 14px;padding:12px 16px}
 #school-stage .response-heading h3{font-size:22px}
 #school-stage .school-receipt{left:16px;right:16px;width:auto;top:270px;bottom:calc(var(--school-control-height) + 8px);max-height:none;padding:16px}
 #school-stage .school-receipt>div>p{display:block;font-size:13px}
 #school-stage .school-receipt .response-routes{margin-top:12px}
 #school-stage .school-receipt .response-recipient{padding:10px}
}
@media(max-height:650px) and (min-width:761px){
 #school-stage .story-copy,#school-stage[data-phase=reality] .hero-copy,#school-stage[data-phase=response] .story-copy{top:90px!important}
 #school-stage .story-copy h2,#school-stage[data-phase=response] .story-copy h2{font-size:32px}
 #school-stage .story-copy p,#school-stage[data-phase=reality] .hero-copy p{font-size:14px!important;margin-top:12px}
 #school-stage .response-panel{top:85px}
 #school-stage .school-evidence-preview{display:none}
}
@media(max-width:760px) and (max-height:650px){
 #school-stage .story-copy,#school-stage[data-phase=reality] .hero-copy,#school-stage[data-phase=response] .story-copy,#school-stage[data-phase=followup] .story-copy{top:80px!important}
 #school-stage .story-copy h2,#school-stage[data-phase=response] .story-copy h2,#school-stage[data-phase=followup] .story-copy h2{font-size:24px}
 #school-stage .story-copy p,#school-stage[data-phase=reality] .hero-copy p,#school-stage[data-phase=response] .story-copy p{font-size:12px!important;margin-top:8px}
 #school-stage[data-phase=response] .response-panel{top:235px}
 #school-stage .school-receipt{top:235px}
}
@media(prefers-reduced-motion:reduce){#school-story,body.reduced-motion #school-story{height:100svh}#school-stage *{animation:none!important;transition:none!important}}
@media(max-width:480px){#school-stage .experience-controls #school-previous{display:none}#school-stage .experience-controls{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px auto;gap:3px}#school-stage .experience-controls .play-control{min-width:0;text-align:start}#school-stage .play-control>span:not([aria-hidden]){min-width:0;line-height:1.2;white-space:normal}#school-stage .school-continue{padding-inline:4px}}
html[dir=rtl] #school-stage .response-heading,html[dir=rtl] #school-stage .response-location{text-align:right}
html[dir=rtl] #school-stage .school-evidence-preview figcaption{direction:rtl}

body.reduced-motion #school-stage .story-footer,body.reduced-motion #school-stage[data-phase=reality] .story-footer{display:grid}

/* Spatial direction stays physical; text navigation follows the reading direction. */
html[dir=rtl] #school-stage :is(#school-previous,#school-next){transform:scaleX(-1)}

/* Desktop is an evidence stage beside an editorial column. Mobile retains its
   accepted full-stage source/model composition and measured reading area. */
#school-stage .school-source-window{position:absolute;inset:0;z-index:1;pointer-events:none}
#school-stage .school-desktop-copy,#school-stage .school-shot-heading{display:none}
#school-stage .school-timeline .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:761px){
 #school-stage{--school-control-height:70px;--school-source-background:#071018}
 #school-stage .school-source-window{clip-path:inset(var(--school-window-top,0px) var(--school-window-right,0px) var(--school-window-bottom,0px) var(--school-window-left,0px))}
 #school-stage .school-mobile-copy{display:none}
 #school-stage .school-desktop-copy{display:block}
 #school-stage .story-copy,#school-stage[data-phase=reality] .hero-copy,#school-stage[data-phase=response] .story-copy{top:clamp(150px,24svh,280px)!important;left:var(--pad)!important;width:29%!important;max-width:430px!important}
 #school-stage .story-copy h2,#school-stage[data-phase=response] .story-copy h2{font:500 clamp(30px,3.55vw,60px)/1.03 var(--sans);letter-spacing:-.045em;text-wrap:balance;text-shadow:none}
 #school-stage .story-copy p,#school-stage[data-phase=reality] .hero-copy p{font:400 clamp(14px,1.15vw,19px)/1.55 var(--sans)!important;margin-top:26px;max-width:360px!important;color:#b5c9d2;text-wrap:pretty}
 #school-stage[data-scene=school] .story-shade{background:linear-gradient(90deg,#071018 0%,#071018 34%,transparent 40%)!important;pointer-events:none}
 #school-stage #school-film,#school-stage .school-plate img{filter:none}
 #school-stage .school-shot-heading{display:flex;align-items:center;gap:14px;position:absolute;top:calc(var(--school-window-top,112px) + 15px);left:calc(var(--school-window-left,40%) + 18px);right:calc(var(--school-window-right,3.5%) + 18px);z-index:5;pointer-events:none;opacity:var(--school-window-settle,0);font:450 12px/1.3 var(--sans);letter-spacing:.035em;color:#fff;text-shadow:0 1px 5px #000}
 #school-stage .school-shot-heading>span:first-child{display:flex;gap:9px;align-items:center}
 #school-stage .school-shot-heading>span:first-child::before{content:'';width:5px;height:5px;background:#4fd6e8}
 #school-stage .school-shot-heading b{margin-inline-start:auto;font-size:12px;font-weight:450;letter-spacing:.09em}
 #school-stage .school-shot-context{display:none}
 #school-stage[data-phase=agents][data-model-ready=true] .school-shot-camera{display:none}
 #school-stage[data-phase=agents][data-model-ready=true] .school-shot-context{display:block}
 #school-stage:is([data-phase=response],[data-phase=followup]) .school-shot-heading{display:none}
 #school-stage .detection-readout{display:block;min-height:0;padding:16px 18px;border:0;border-inline-start:2px solid #f4b478;border-radius:0;background:#091722ec;box-shadow:0 12px 30px #0003}
 #school-stage .detection-detail{display:none}
 #school-stage .detection-label{font:500 18px/1.18 var(--sans);color:#f8eee5}
 #school-stage .detection-score{font:450 12px/1.4 var(--sans);margin:3px 0;color:#f4b478}
 #school-stage .detection-basis{font:400 12px/1.4 var(--sans);color:#bacbd1}
 #school-stage .detection-body{stroke:#e8e9dc;opacity:.8;stroke-width:1.2}
 #school-stage .story-footer,#school-stage[data-phase=reality] .story-footer,#school-stage[data-phase=response].is-visible .story-footer{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;bottom:18px}
 #school-stage .school-chapters{grid-column:2;grid-row:1;gap:22px}
 #school-stage .school-chapters button{font-size:clamp(12px,1vw,16px);gap:8px;min-height:50px;padding:12px 0 5px}
 #school-stage .school-chapters b{font-size:12px}
 #school-stage .experience-controls{display:contents}
 #school-stage .experience-controls .play-control{grid-column:1;grid-row:1;padding:0;gap:10px;font-size:13px}
 #school-stage .school-continue{grid-column:3;grid-row:1;padding:14px 0;font-size:12px}
 #school-stage :is(#school-previous,#school-next,#school-replay,.school-timeline){display:none}
 #school-stage .school-evidence-preview{left:var(--pad);bottom:110px;width:112px;border-radius:0;border-color:#36515e}
 #school-stage .school-evidence-preview svg{height:112px}
 #school-stage .school-evidence-preview figcaption{font-size:12px;gap:4px}
 #school-stage .response-panel{top:max(112px,16svh);bottom:92px;width:min(440px,43vw);border-radius:8px}
 #school-stage[data-phase=response] .story-copy{top:140px!important;width:35%!important}
 #school-stage[data-phase=response] .story-copy h2{font-size:clamp(28px,2.7vw,44px)}
 #school-stage[data-phase=response] .story-copy p{font-size:14px!important;line-height:1.45!important;margin-top:16px}
 #school-stage .school-receipt{left:auto;right:var(--pad);top:max(130px,22svh);bottom:100px;width:min(490px,48vw);max-height:none;border-radius:8px}
 #school-stage .chapter-progress{display:none}
}
@media(min-width:761px) and (max-width:1100px){
 #school-stage .story-footer{gap:18px}
 #school-stage .school-chapters{gap:12px}
 #school-stage .school-chapters button{flex-direction:column;gap:4px}
 #school-stage .experience-controls .play-control>span:not([aria-hidden]){display:none}
}
@media(min-width:761px) and (max-height:650px){
 #school-stage .story-copy,#school-stage[data-phase=reality] .hero-copy,#school-stage[data-phase=response] .story-copy{top:124px!important}
 #school-stage .story-copy h2,#school-stage[data-phase=response] .story-copy h2{font-size:30px}
 #school-stage .story-copy p,#school-stage[data-phase=reality] .hero-copy p{font-size:13px!important;margin-top:18px}
}

@media(max-width:380px){#school-stage .school-chapters{gap:7px}#school-stage .experience-controls .play-control{font-size:12px;gap:7px}#school-stage .school-continue{font-size:12px}#school-stage .experience-controls{gap:0}}
/* The chapter and evidence labels wrap at the type floor, including Arabic. */
#school-stage .school-chapters button{min-width:0;overflow-wrap:anywhere}#school-stage .school-chapters b{flex-shrink:0}#school-stage .school-evidence-preview figcaption{flex-wrap:wrap;line-height:1.5}#school-stage .school-evidence-preview figcaption>span{min-width:0;overflow-wrap:anywhere}#school-stage .school-shot-heading,#school-stage .response-appbar{flex-wrap:wrap}#school-stage .response-case-class{line-height:1.4}

/* A 13-inch laptop (Yusuf, 6 Oct: Chrome on a MacBook Air shows about 1470x725): the Respond panel held 661 px of content
   in 517 px, so its last line, the staff lead's separate decision, the chapter's point that people hold the authority, sat
   below the fold inside the panel's own scroll. On a short desktop screen the panel starts higher and its rows tighten until
   everything shows. The phone layout is the one Yusuf approved on 30 Sep and is left as it is. */
@media (min-width:761px) and (max-height:900px){
 #school-stage .response-panel{top:88px;padding-bottom:12px}
 #school-stage .response-appbar{margin-bottom:12px;padding:11px 20px}
 #school-stage .response-location{margin-bottom:6px}
 #school-stage .response-heading h3{font-size:21px}
 #school-stage .response-heading .icon-button{min-width:36px;min-height:36px}
 #school-stage .case-variant{margin:10px 0}
 #school-stage .case-variant button{min-height:34px;padding:6px 8px}
 #school-stage .case-scores{margin:8px 0;gap:8px}
 #school-stage .case-scores>div{padding:8px 10px}
 #school-stage .case-scores>div>span{margin-bottom:2px}
 #school-stage .response-route{padding:8px 0 6px}
 #school-stage .response-routes{gap:5px;margin:6px 0 10px}
 #school-stage .response-recipient{min-height:0;padding:8px 12px}
 #school-stage .optional-decision{padding-top:8px}
}
/* At 13-inch heights (Yusuf's Chrome shows about 1470x725) the block above still left French 30-35 px short and Spanish
   11-16 px short on 7 Oct: "Variante claire scénarisée" and the third route's name wrap to two lines, and the hidden
   remainder was again the staff lead's separate decision. A tighter rhythm here returns 36 px in every language; measured
   with the five locales at 1470x725, 1280x720 and 1440x760, French keeps 4-9 px to spare and the others 23-63 px. */
@media (min-width:761px) and (max-height:760px){
 #school-stage .response-appbar{margin-bottom:8px}
 #school-stage .response-heading .icon-button{min-width:32px;min-height:32px}
 #school-stage .case-variant{margin:8px 0}
 #school-stage .case-scores{margin:6px 0}
 #school-stage .case-scores>div{padding:6px 10px}
 #school-stage .response-route{padding:6px 0 4px}
 #school-stage .response-routes{gap:4px;margin:4px 0 6px}
 #school-stage .response-recipient{padding:6px 12px}
}

/* One evidence frame through all five chapters (8 October). The camera's room right of the copy holds it for Observe and
   Review; when the site and then the response take the stage it steps into the copy's column (desktop) or the strip
   under the copy (phone) and stays there, captioned and stamped. Film, still and outlines share its transform
   (school-motion.js); nothing is drawn over the person. The panel and the receipt used to stand over the footage, and on
   a phone the readout covered the person it described. */
#school-stage .school-source-window{clip-path:inset(var(--school-window-top,0px) var(--school-window-right,0px) var(--school-window-bottom,0px) var(--school-window-left,0px))}
#school-stage .school-evidence-preview,#school-stage .source-reference#school-source-reference{display:block;position:absolute;z-index:5;inset:auto;left:var(--school-room-left);top:calc(var(--school-room-top) + var(--school-room-height) + 7px);width:var(--school-room-width);margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#school-stage .school-evidence-preview svg{display:none}
#school-stage .school-evidence-preview figcaption,#school-stage #school-source-reference{display:flex;justify-content:flex-start;gap:12px;padding:0;font:400 12px/1.4 var(--sans);color:#c5d6dd}
#school-stage #school-source-reference .camera-icon{display:none}
#school-stage .source-reference#school-source-reference{display:flex;gap:10px}
/* The receipt is as tall as what it says, and carries the case's class as the panel did. */
#school-stage .school-receipt-class{position:absolute;top:14px;inset-inline-end:18px;font:500 12px/1 var(--sans);letter-spacing:.08em;color:#b2c7d1}
/* The class stands on its own line above the title: beside it, a long title ran under it (right to left, 8 October). */
#school-stage .school-receipt:has(.school-receipt-class){padding-top:38px}
#school-stage .school-room-stamp{display:none;position:absolute;z-index:5;left:calc(var(--school-room-left) + var(--school-room-width) - 8px);top:calc(var(--school-room-top) + var(--school-room-height) - 8px);transform:translate(-100%,-100%);padding:3px 6px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#c9cdd0;border:1px solid currentColor;background:#071018b3;pointer-events:none;opacity:var(--school-window-settle,0)}
html[dir=rtl] #school-stage .school-room-stamp{left:calc(var(--school-room-left) + 8px);transform:translate(0,-100%)}
#school-stage[data-evidence=docked] .school-room-stamp{display:block}
@media(min-width:761px){
 /* The heading names whatever holds the stage's main area, the camera and then the site, so it stays in the camera's
    room when the frame leaves it. */
 #school-stage .school-shot-heading{top:calc(var(--school-camera-top,144px) + 15px);left:calc(var(--school-camera-left,40%) + 18px);right:auto;width:calc(var(--school-camera-width,50%) - 36px)}
 /* Over the site it reads at the room's foot: at its head it ran into the first agent's name. */
 #school-stage[data-phase=agents][data-model-ready=true] .school-shot-heading{top:calc(var(--school-camera-top,144px) + var(--school-camera-height,480px) - 32px)}
 /* Respond and Follow-up share the column's width and type, so the frame under them keeps one place through both. Keyed
    by the chapter rather than the stage's phase, so the copy measures the same when the page measures it ahead. */
 #school-stage .story-copy:is([data-stage="3"],[data-stage="4"]){top:140px!important;width:29%!important;max-width:430px!important}
 #school-stage .story-copy:is([data-stage="3"],[data-stage="4"]) h2{font:500 clamp(28px,2.7vw,44px)/1.06 var(--sans);letter-spacing:-.04em}
 #school-stage .story-copy:is([data-stage="3"],[data-stage="4"]) p{font-size:14px!important;line-height:1.45!important;margin-top:16px}
 #school-stage .story-copy:is([data-stage="3"],[data-stage="4"]) button{margin-top:12px}
 /* The receipt takes the panel's place, beside the frame. */
 #school-stage .school-receipt{left:auto;right:var(--pad);top:max(112px,16svh);bottom:auto;width:min(440px,43vw);max-height:calc(100% - max(112px,16svh) - 92px);overflow:auto;border-radius:8px}
}
@media(min-width:761px) and (max-height:900px){#school-stage .school-receipt{top:88px;max-height:calc(100% - 180px)}}
@media(min-width:761px) and (max-height:650px){
 #school-stage .story-copy:is([data-stage="3"],[data-stage="4"]){top:110px!important}
 #school-stage .story-copy:is([data-stage="3"],[data-stage="4"]) h2{font-size:24px}
 #school-stage .story-copy:is([data-stage="3"],[data-stage="4"]) p{font-size:13px!important;margin-top:10px}
}
@media(max-width:760px){
 /* Copy, frame, work, controls, top to bottom. The Review copy rose under the header (55 px against a 76 px header). */
 #school-stage.story-stage:is([data-phase],:not([data-phase])) .story-copy{top:90px!important}
 /* Respond shows its heading alone on a phone (style.css hides the paragraph by phase); keyed by chapter here as well,
    so the copy measured ahead is the copy shown and the strip sits right under it. */
 #school-stage .story-copy[data-stage="3"] p{display:none}
 #school-stage .school-room-stamp{display:block}
 /* On a strip the caption sits on the picture, so the panel can start right under it. */
 #school-stage .school-evidence-preview,#school-stage .source-reference#school-source-reference{top:calc(var(--school-room-top) + 6px);left:calc(var(--school-room-left) + 6px);width:auto;max-width:calc(var(--school-room-width) - 12px);padding:3px 7px;background:#071018d1}
 #school-stage[data-phase=response] .response-panel{top:var(--school-panel-top,270px)!important}
 #school-stage .school-receipt{top:var(--school-receipt-top,270px)!important}
}