/* ═══ Listening tests — shared stylesheet (used by every listening-test-*.html) ═══ */
/* ── CORE VARIABLES (IELTS Real-Exam skin) ── */
:root{
--sans:Arial,sans-serif;
--mono:Arial,Helvetica,sans-serif;
--serif:Arial,Helvetica,sans-serif;
--bg:#f2f2f2; --paper:#ffffff; --bg-elev:#f7f7f7; --panel:#ebebeb; --panel2:#e4e4e4;
--ink:#0d0d0d; --ink-soft:#1f1f1f; --ink-mute:#666666;
--line:#d0d0d0; --line-2:#cccccc; --line-3:#bbbbbb; --line-4:#aaaaaa;
--primary:#c41230; --primary-2:#a50f28; --crimson:#c41230;
--emerald:#2e7d32; --amber:#e65100; --gold:#e65100; --gold-soft:#ffe066;
--hl-y:#FFE066; --tg:#229ed9;
--radius:3px; --radius-lg:5px;
--shadow-sm:none; --shadow-md:0 4px 16px rgba(0,0,0,.12); --shadow-lg:0 6px 36px rgba(0,0,0,.30);
--ease:ease; --text-zoom:0px;
}
body.dark-mode{
--bg:#1c1c1c;--paper:#1f1f1f;--bg-elev:#262626;--panel:#262626;--panel2:#2e2e2e;
--ink:#eaeaea;--ink-soft:#cfcfcf;--ink-mute:#9a9a9a;
--line:#3a3a3a;--line-2:#4a4a4a;--line-3:#555;--line-4:#666;
--primary:#ff5a72;--primary-2:#ff8094;--crimson:#ff5a72;--emerald:#5fd17a;--amber:#ffae5c;
--gold-soft:rgba(255,224,102,.18);
}
body.theme-sepia{
--bg:#f5f0e8;--paper:#faf6ef;--bg-elev:#f1e9da;--panel:#efe7d8;--panel2:#e8ddc8;
--ink:#3a2c1a;--ink-soft:#5a4632;--ink-mute:#9a8670;
--line:#dccaa9;--line-2:#cbb691;--line-3:#cbb691;--line-4:#bba585;
--primary:#b03521;--primary-2:#8f2a19;--crimson:#b03521;
}
/* ══════════════════════════════════════════════════════════════════════
ENTRY SCREEN (candidate name → audio preload → test)
══════════════════════════════════════════════════════════════════════ */
#entry-overlay{
position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
padding:24px;background:var(--bg);overflow-y:auto;
}
body.entry-done #entry-overlay{display:none}
body.pre-entry #stage-listening{visibility:hidden}
.entry-card{
width:100%;max-width:520px;background:var(--paper);border:1px solid var(--line-2);
border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:0;overflow:hidden;
}
.entry-card::before{content:"";display:block;height:3px;background:var(--primary)}
.entry-inner{padding:30px 34px 34px}
.entry-brand{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.entry-brand .ielts-wordmark{width:96px;flex:0 0 auto}
.entry-brand .ielts-wordmark svg{width:100%;height:auto;display:block}
.entry-brand-txt{line-height:1.35}
.entry-brand-txt b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.entry-brand-txt span{display:block;font-size:11.5px;color:var(--ink-mute);letter-spacing:.04em}
.entry-title{font-size:21px;font-weight:700;color:var(--ink);margin:20px 0 5px;letter-spacing:-.01em}
.entry-sub{font-size:13.5px;color:var(--ink-mute);margin-bottom:22px}
.entry-field label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-mute);margin-bottom:7px}
.entry-field input{
width:100%;padding:11px 13px;font-family:var(--sans);font-size:15.5px;color:var(--ink);
background:var(--paper);border:1px solid var(--line-3);border-radius:var(--radius);outline:none;
}
.entry-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(196,18,48,.12)}
.entry-field.is-invalid input{border-color:var(--primary);background:rgba(196,18,48,.04)}
.entry-hint{min-height:17px;font-size:12.5px;color:var(--ink-mute);margin-top:6px}
.entry-field.is-invalid .entry-hint{color:var(--primary);font-weight:600}
.entry-banner{
margin:18px 0 22px;padding:13px 15px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);
background:var(--bg-elev);border:1px solid var(--line);border-left:3px solid var(--primary);
border-radius:0 var(--radius) var(--radius) 0;
}
.entry-banner b{color:var(--ink)}
.entry-rules{margin:0 0 22px;padding:0;list-style:none;font-size:13.5px;line-height:1.9;color:var(--ink-soft)}
.entry-rules li{padding-left:20px;position:relative}
.entry-rules li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;
border-radius:50%;background:var(--primary)}
.entry-btn{
width:100%;padding:13px 20px;font-family:var(--sans);font-size:15.5px;font-weight:700;
color:#fff;background:var(--primary);border:1px solid var(--primary);border-radius:var(--radius);
cursor:pointer;transition:background .15s var(--ease);
}
.entry-btn:hover{background:var(--primary-2);border-color:var(--primary-2)}
.entry-meta{display:flex;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;margin-bottom:22px}
.entry-meta>div{flex:1;padding:11px 8px;text-align:center;border-left:1px solid var(--line)}
.entry-meta>div:first-child{border-left:none}
.entry-meta .n{font-size:19px;font-weight:700;color:var(--ink);line-height:1}
.entry-meta .l{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink-mute);margin-top:5px}
.entry-progress-track{height:6px;background:var(--panel);border-radius:99px;overflow:hidden;margin:22px 0 10px}
.entry-progress-fill{height:100%;width:0;background:var(--primary);border-radius:99px;
transition:width .22s linear}
.entry-progress-label{font-size:12.5px;font-weight:700;color:var(--ink-mute);text-align:right;
font-variant-numeric:tabular-nums}
.entry-tg{display:flex;align-items:center;gap:11px;padding:13px 34px;background:var(--bg-elev);
border-top:1px solid var(--line);text-decoration:none}
.entry-tg .tgn{font-size:13px;font-weight:700;color:var(--ink)}
.entry-tg .tgd{font-size:11.5px;color:var(--ink-mute)}
.entry-tg .tgj{margin-left:auto;font-size:12px;font-weight:700;color:var(--tg)}
/* ══════════════════════════════════════════════════════════════════════
RESULTS PAGE (score · band · answer key)
══════════════════════════════════════════════════════════════════════ */
#stage-results .rs-top{
height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
gap:14px;padding:0 18px;background:var(--paper);border-bottom:1px solid var(--line-2);
}
#stage-results .rs-top-l{display:flex;align-items:center;gap:14px;min-width:0}
#stage-results .rs-top-l .ielts-wordmark{width:74px;flex:0 0 auto}
#stage-results .rs-top-l .ielts-wordmark svg{width:100%;height:auto;display:block}
#stage-results .rs-top-l .t{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
#stage-results .rs-top-r{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.rs-btn{padding:8px 15px;font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer;
border-radius:var(--radius);border:1px solid var(--line-3);background:var(--paper);color:var(--ink-soft)}
.rs-btn:hover{border-color:var(--line-4);color:var(--ink)}
.rs-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.rs-btn.primary:hover{background:var(--primary-2);border-color:var(--primary-2)}
#stage-results .results-content{padding:30px 22px 70px}
.rs-sheet{max-width:900px;margin:0 auto}
.rs-card{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-lg);
overflow:hidden;margin-bottom:22px}
.rs-card-h{padding:11px 20px;background:var(--bg-elev);border-bottom:1px solid var(--line);
font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-mute)}
.rs-head{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:26px 24px}
.rs-score{flex:0 0 auto;text-align:center;padding-right:24px;border-right:1px solid var(--line)}
.rs-score .n{font-size:46px;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
.rs-score .n small{font-size:20px;font-weight:600;color:var(--ink-mute)}
.rs-score .l{margin-top:7px;font-size:10.5px;font-weight:800;letter-spacing:.15em;
text-transform:uppercase;color:var(--ink-mute)}
.rs-band{flex:0 0 auto;text-align:center;padding-right:24px;border-right:1px solid var(--line)}
.rs-band .n{font-size:46px;font-weight:800;line-height:1;color:var(--primary);letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
.rs-band .l{margin-top:7px;font-size:10.5px;font-weight:800;letter-spacing:.15em;
text-transform:uppercase;color:var(--ink-mute)}
.rs-who{flex:1 1 200px;min-width:180px;font-size:13.5px;line-height:1.75;color:var(--ink-soft)}
.rs-who b{color:var(--ink)}
.rs-pills{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 22px}
.rs-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
font-size:12.5px;font-weight:700;border:1px solid var(--line-2);background:var(--bg-elev);color:var(--ink-soft)}
.rs-pill i{width:8px;height:8px;border-radius:50%;display:inline-block}
.rs-pill i.ok{background:var(--emerald)}
.rs-pill i.no{background:var(--primary)}
.rs-pill i.sk{background:var(--line-4)}
.rs-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
border-top:1px solid var(--line)}
.rs-part{padding:15px 20px;border-left:1px solid var(--line)}
.rs-part:first-child{border-left:none}
.rs-part .pl{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
.rs-part .pv{font-size:22px;font-weight:800;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.rs-part .pv small{font-size:13px;font-weight:600;color:var(--ink-mute)}
.rs-part .pbar{height:5px;margin-top:9px;border-radius:99px;background:var(--panel);display:flex;overflow:hidden}
.rs-part .pbar i{display:block;height:100%}
.rs-part .pbar i.ok{background:var(--emerald)}
.rs-part .pbar i.no{background:var(--primary)}
.rs-part .pbar i.sk{background:var(--line-3)}
.rs-table{width:100%;border-collapse:collapse;font-size:14px}
.rs-table th{padding:10px 16px;text-align:left;background:var(--bg-elev);border-bottom:1px solid var(--line-2);
font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.rs-table td{padding:9px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.rs-table tr:last-child td{border-bottom:none}
.rs-table tr.part-sep td{background:var(--bg-elev);font-size:10.5px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-mute);padding:7px 16px}
.rs-table td.q{width:52px;font-weight:700;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.rs-table td.ua{width:30%;font-weight:600;color:var(--ink)}
.rs-table td.ua.bad{color:var(--primary)}
.rs-table td.ua.skip{color:var(--ink-mute);font-style:italic;font-weight:500}
.rs-table td.ca{color:var(--emerald);font-weight:600}
.rs-table td.mk{width:46px;text-align:center;font-size:16px;font-weight:800}
.rs-table td.mk.ok{color:var(--emerald)}
.rs-table td.mk.no{color:var(--primary)}
.rs-table td.mk.sk{color:var(--line-4)}
.rs-table tr.row-no td{background:rgba(196,18,48,.035)}
.rs-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:22px 24px;
background:var(--bg-elev);border-top:1px solid var(--line)}
.rs-cta-txt{flex:1 1 240px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.rs-cta-txt b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.rs-cta .rs-btn{padding:12px 20px;font-size:14.5px}
@media (max-width:720px){
.rs-head{gap:16px}
.rs-score,.rs-band{border-right:none;padding-right:0}
#stage-results .rs-top-l .t{display:none}
}
/* The retired cosmic shell still paints a starfield behind every stage and a
parchment wash over the score sheet. Both went with the screens they were
drawn for; what is left is the plain exam surface. */
#cdi-stars-host,#cdi-webgl{display:none !important}
#stage-results{background:var(--bg) !important;font-family:var(--sans) !important;color:var(--ink) !important}
#stage-results::before,#stage-results::after{display:none !important;content:none !important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);font-size:16px;background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased;}
body.no-select{user-select:auto;-webkit-user-select:auto}
body.no-select input,body.no-select textarea{user-select:text;-webkit-user-select:text}
::selection{background:var(--hl-y);color:#111}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:#b8b8b8;border-radius:0}
body.dark-mode ::-webkit-scrollbar-thumb{background:#555}
.hidden{display:none !important}
/* ── TEXT ZOOM ── */
.q-text,.gap-input,.option,.subhead,.section-head h2,.section-head .instruction,
.note-flow,.gap-line,.drag-chip,.drag-item-label,.drag-col-hdr,.drag-num-hint,.q-pill{
font-size:calc(var(--base-size,16px) + var(--text-zoom)) !important;
transition:none;
}
.section-head h2{--base-size:17.6px}
.section-head .instruction{--base-size:16px}
.q-text{--base-size:16px}
.gap-input{--base-size:16px}
.note-flow{--base-size:16px}
.gap-line{--base-size:16px}
.option{--base-size:16px}
.subhead{--base-size:17.6px}
.q-pill{--base-size:16px}
.drag-item-label{--base-size:16px}
.drag-col-hdr{--base-size:16px}
.drag-num-hint{--base-size:16px}
.drag-chip{--base-size:14px}
/* ── STAGES ── */
.stage{position:fixed;inset:0;display:none;flex-direction:column}
.stage.active{display:flex;z-index:25}
/* ── HEADER ── */
#hdr{height:56px;flex:0 0 auto;display:flex;align-items:stretch;justify-content:space-between;padding:0;background:var(--paper);border-bottom:0;position:relative;z-index:500;}
/* the official header has NO box-shadow and NO border-bottom: it is header::after,
a 1px #C1C1C1 hairline sitting on the 55px row. */
#hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#C1C1C1;pointer-events:none}
#hdr-left{display:flex;align-items:stretch;gap:0}
#hdr-right{display:flex;align-items:center;justify-content:flex-end;gap:0}
#hdr-right > *:last-child{margin-right:16px}
.hdr-icon{display:block;height:24.5px;margin:0 16px;flex:0 0 auto}
/* the official header renders the wifi GLYPH only; "Connected" is screen-reader text */
.hdr-conn-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ielts-wordmark{box-sizing:content-box;width:92.5px;height:27.1953px;padding:14.4px 16px;margin:0;border:0;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;user-select:none;flex:0 0 auto}
.ielts-wordmark svg{display:block;width:92.5px;height:27.1953px}
.ielts-letters{display:inline-block;transform:scaleX(.731);transform-origin:left center;white-space:nowrap}
.ielts-tm{font-size:7px;font-family:Arial,sans-serif;font-weight:400;vertical-align:super;margin-top:-8px;margin-left:-31.7px}
.test-taker-block{display:block;box-sizing:content-box;padding:8px 32px 8px 16px;height:40px;font-size:16px;line-height:normal;flex:0 0 auto}
.ttid-label{font-size:16px;font-weight:600;color:#000;line-height:normal}
body.dark-mode .ttid-label,body.theme-sepia .ttid-label{color:var(--ink)}
.fa-glyph{display:block;flex:0 0 auto}
.ttid-sub{font-size:16px;line-height:normal}
.ttid-sub-inline{display:inline-block;font-size:13.3333px;font-weight:400;color:#000;white-space:nowrap;line-height:normal}
.ttid-sub-inline .fa-glyph{display:inline-block;color:#333;vertical-align:-2.34px}
.ttid-sub-title{margin-left:6.66667px}
/* PRACTICE-PRODUCT ADDITION — the official Listening player has no clock at all.
Presented in the header in the candidate block's own type, never as an alarm. */
#hdr-clock{padding-left:0}
#hdr-clock .ttid-sub-title{font-variant-numeric:tabular-nums}
#hdr-clock.warn .ttid-sub-title{color:#8a5000}
#hdr-clock.crit .ttid-sub-title{color:#c41230;font-weight:700}
#hdr-clock.warn .fa-glyph,#hdr-clock.crit .fa-glyph{color:#8a5000}
#hdr-clock.crit .fa-glyph{color:#c41230}
.hdr-icon-btn{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:56px;color:#333;opacity:1;flex-shrink:0}
.hdr-icon-btn:hover{opacity:.75}
body.dark-mode .hdr-icon-btn{color:#ddd}
#menu-wrap{display:contents}
#menu-btn{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:56px;color:#333;flex-shrink:0}
#menu-btn:hover{background:var(--panel2)}
body.dark-mode #menu-btn span{background:#ddd}
#menu-dropdown{position:fixed;top:56px;right:72px;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-md);padding:14px 16px;min-width:210px;z-index:9999;display:none;}
#menu-dropdown.open{display:block}
.md-title{font-size:11px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.6px;margin:0 0 8px}
.md-title:not(:first-child){margin-top:14px}
.md-row{display:flex;align-items:center;gap:8px}
.md-lbl{font-size:13px;color:var(--ink-soft);min-width:64px}
.fsz-btn{width:30px;height:30px;border:1px solid var(--line-2);background:var(--panel);border-radius:4px;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}
.fsz-btn:hover{background:var(--panel2);border-color:#999}
.md-dots{display:flex;gap:8px;align-items:center}
.theme-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.theme-dot:hover{transform:scale(1.12)}
.theme-dot.active{border-color:var(--primary)}
.md-fs{margin-top:10px;width:100%;border:1px solid var(--line-2);background:var(--panel);border-radius:4px;padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:center}
.md-fs:hover{background:var(--panel2)}
.notif-popup{position:fixed;top:56px;right:125px;background:var(--paper);border:1px solid var(--line);border-radius:3px;box-shadow:0 4px 18px rgba(0,0,0,.14);width:210px;z-index:2000;display:none}
.notif-popup.open{display:block}
.notif-popup-hdr{font-size:12px;font-weight:700;color:var(--ink);padding:8px 13px;border-bottom:1px solid var(--line);background:var(--panel)}
.notif-popup-body{font-size:13px;color:var(--ink-mute);padding:16px 13px;text-align:center}
/* ── TIMER ── */
.timer{font-family:var(--mono);font-weight:700;font-size:16px;padding:5px 11px;border-radius:3px;background:var(--panel);color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);}
.timer::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--emerald);animation:timerLive 2.4s ease infinite}
@keyframes timerLive{0%,100%{opacity:1}50%{opacity:.35}}
.timer.warn{background:#fff4e5;color:var(--amber);border-color:#f3c898}
.timer.warn::before{background:var(--amber)}
.timer.crit{background:#fdecef;color:var(--crimson);border-color:#f0b6c0}
.timer.crit::before{background:var(--crimson)}
body.dark-mode .timer.warn{background:rgba(230,81,0,.18)}
body.dark-mode .timer.crit{background:rgba(196,18,48,.22)}
.timer-text{min-width:50px;text-align:center;display:inline-block}
.timer-text.hidden{visibility:hidden}
.timer .btn-icon{background:transparent;border:none;color:var(--ink-mute);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:.8;transition:opacity .2s;outline:none}
.timer .btn-icon:hover{color:var(--ink);opacity:1}
/* ── PBAR (section info + audio player) ── */
/* measured: section#sectionRubric 16, 88, 1407 x 72 ; margin 16px ; padding 12px 16px
1px #D5D5D5 / #F1F2EC / radius 4px ; display BLOCK (no flex row, no transport strip) */
#pbar{background:transparent;padding:0;margin:16px 1px 16px 0}
#pbar-inner{background:rgb(241,242,236);border:1px solid rgb(213,213,213);border-radius:4px;padding:12px 16px;display:block}
#pbar-info{display:block}
#pbar-title{display:block;font-weight:700;font-size:16px;line-height:normal;color:#000;margin:0 0 4px}
#pbar-desc{display:block;font-size:16px;font-weight:400;line-height:24px;color:#000;margin:0}
/* the transport strip is review-mode furniture only; it is not inside #pbar-inner any
more, so it cannot influence the rubric block's geometry even if it were shown. */
#pbar-audio{display:none;align-items:center;gap:7px;min-width:0;overflow:hidden}
/* in review: audio moves into header */
body.review-mode #pbar-audio{display:flex;flex:1;min-width:0}
body.review-mode #hdr-right{flex:1;gap:8px}
body.review-mode #hdr{gap:0}
#audio-hdr-badge{display:inline-block}
body.review-mode #audio-hdr-badge{display:none !important}
#audio-state-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--emerald);flex-shrink:0;white-space:nowrap}
#audio-progress-track{flex:1;position:relative;height:4px;background:var(--line-3);border-radius:99px;cursor:pointer;min-width:40px}
#audio-click-overlay{position:absolute;inset:-8px;z-index:10;cursor:pointer}
#audio-progress-fill{height:100%;background:var(--primary);width:0%;border-radius:99px;transition:width .1s linear;pointer-events:none}
#audio-time-display{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink-mute);min-width:78px;text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums}
#vol-slider{width:36px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;outline:none;flex-shrink:0}
#vol-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:var(--line-3);border-radius:99px}
#vol-slider::-webkit-slider-thumb{-webkit-appearance:none;height:12px;width:12px;border-radius:50%;background:var(--primary);cursor:pointer;margin-top:-4.5px}
.speed-select{-webkit-appearance:none;appearance:none;background:var(--panel2);border:1px solid var(--line-2);border-radius:3px;padding:2px 6px;font-family:var(--sans);font-size:10px;font-weight:700;color:var(--primary);cursor:pointer;outline:none;transition:border-color .12s;flex-shrink:0}
.speed-select:hover{border-color:var(--primary)}
.seek-btn{display:none;align-items:center;justify-content:center;gap:4px;height:22px;padding:0 7px;border-radius:3px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-mute);font-size:10px;font-weight:700;cursor:pointer;transition:all .12s;flex-shrink:0;white-space:nowrap}
.seek-btn:hover{border-color:var(--primary);color:var(--primary)}
.pp-btn{display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:none;background:var(--ink);color:var(--paper);font-size:11px;cursor:pointer;transition:all .12s;flex-shrink:0}
.pp-btn:hover{background:var(--primary)}
body.review-mode .seek-btn{display:inline-flex}
/* Full screen is a REVIEW affordance only. The real player has no such button,
so it must never appear while the exam is running — the review header is
already ours (the transport moves into it), and this sits beside the wifi
glyph where the eye is already going. */
#fs-btn{display:none}
body.review-mode #fs-btn{display:inline-flex}
body.review-mode.is-fullscreen #fs-btn .fs-in{display:none}
body.review-mode.is-fullscreen #fs-btn .fs-out{display:inline !important}
body.review-mode .pp-btn{display:inline-flex}
/* -- AUDIO GATE (pre-play overlay, real-exam parity) -- */
#audio-gate{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);opacity:1}
#audio-gate.show{display:flex}
#audio-gate-inner{display:block;text-align:center;color:#fff;font:400 16px Arial,sans-serif;max-width:none}
#audio-gate .ag-hp{display:inline-block;width:104px;height:112px;color:#fff;vertical-align:top}
#audio-gate p{margin:16px 0;font:400 16px/24px Arial,sans-serif;color:#fff;text-align:center}
#ag-play-btn{display:inline-block;box-sizing:border-box;margin:0 0 0 2px;padding:10px 20px;border:0;border-radius:3px;background:#000;color:#fff;font:400 13.3333px/normal Arial,sans-serif;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none;line-height:0}
/* the official gate shows no focus ring on the one control it has */
#ag-play-btn:focus,#ag-play-btn:focus-visible{outline:none}
#ag-play-btn .ag-pi{display:inline-block;vertical-align:top;width:22.8594px;height:26.6667px;color:#fff}
/* vertical-align:super is what lifts "Play" against the 26.67px glyph */
#ag-play-btn .caption{display:inline-block;margin:0 0 0 10px;vertical-align:top;font:400 13.3333px/15.3333px Arial,sans-serif;color:#fff;white-space:nowrap;transform:translateY(4.56px)}
/* ── LISTENING EXAM AREA ── */
#stage-listening{flex-direction:column;background:#fff}
/* measured: #sectionContent 0,56,1440x791 ; padding 16px 0 48px ; overflow-y ALWAYS scroll */
#listening-area{flex:1;overflow-y:scroll;overflow-x:auto;background:var(--paper);min-height:0;padding:16px 0 48px;position:relative}
.listening-content{max-width:none;margin:0;padding:0 16px}
/* 1408 - 254 = 1154 : the measured content column width, at x = 16.
With the Notes sidebar docked the exam is 1140 wide and the measured column is
1012 — only the 96px flag gutter survives, so the 158px question margin goes. */
#listening-render{margin-right:254px}
body.notes-open #listening-render{margin-right:96px}
/* ── SECTION BLOCKS ── */
.section-block{margin-bottom:80px}
.section-head{margin-bottom:0;padding-bottom:0;border-bottom:none;position:relative;display:flex;flex-direction:column}
.section-head::after{display:none}
.section-head .num{font-size:16px;font-weight:700;line-height:normal;color:#000;letter-spacing:0;margin-bottom:8px;text-transform:none;order:1}
.section-head h2{font-size:17.6px;font-weight:700;line-height:21.12px;margin:0 0 14.608px;color:#000;order:3}
.section-head .instruction{font-size:16px;color:#000;line-height:24px;font-weight:400;margin:0 0 16px;order:2}
.section-head .instruction em{font-style:normal;background:transparent;padding:0;color:#000;font-weight:700}
/* ── QUESTION CARDS ── */
.q-card{background:var(--paper);border:none;border-radius:0;padding:0;margin-bottom:29.4px}
body.dark-mode .q-card{border-color:#333}
/* MCQ prompt row: measured .choiceInteraction__promptAndButtonRow 16, y, 1154 x 31 */
.q-row{display:flex;align-items:flex-start;gap:0;margin-bottom:0;padding-bottom:4.22px}
.q-text{flex:1;font-size:16px;line-height:24px;font-weight:400;color:#000;padding-top:2.4px}
/* the question number is drawn exactly like the footer sub-question box:
2.4px 4px padding, 2px transparent border, blue border + white ground when active */
.q-pill{display:inline-block;box-sizing:border-box;background:transparent;color:#000;font-family:Arial,sans-serif;font-weight:700;font-size:16px;line-height:normal;border:2px solid transparent;border-radius:3px;padding:2.4px 4px;margin:0 4.2px 0 0;flex:0 0 auto;cursor:default;user-select:none;text-align:center;white-space:pre}
.q-pill.current{border-color:rgb(65,143,198);background:#fff}
.q-pill.flagged{color:var(--primary)}
/* note-block heading: measured h2 700 17.6px/21.12px, margin 0 0 14.608px, #000 */
.subhead{display:block;font-size:17.6px;font-weight:700;line-height:21.12px;letter-spacing:0;text-transform:none;color:#000;margin:0 0 14.608px;padding-bottom:0;border-bottom:none}
/* ── GAP INPUT (exact reading test style) ── */
/* the whole note block is ONE inline flow: text nodes,
and runs of
at line-height 24px. It is not a table, a grid, or a stack of rows. */
.note-flow{display:block;font-size:16px;line-height:24px;font-weight:400;color:#000}
.gap-field{display:inline;vertical-align:baseline;margin:0;position:relative}
/* measured: 104 x 22.3906 (1.4em), padding 0 .5em 0, margin .05em .25em -.1em,
1px #535353, radius 3px, text-align START, font 16px Arial */
.gap-input{display:inline-block;box-sizing:border-box;width:104px;min-width:104px;max-width:100%;height:1.4em;padding:0 8px;margin:0.05em 0.25em -0.1em;font-family:Arial,sans-serif;font-size:16px;font-weight:400;line-height:normal;
color:#000;background:#fff;border:1px solid rgb(83,83,83);border-radius:3px;outline:none;text-align:start;
vertical-align:baseline;box-shadow:none;transition:none;overflow:clip}
/* the question number IS the placeholder: #000, 700, centred, opacity 1 — and it
vanishes the instant anything is typed. */
.gap-input::placeholder{color:#000;font-weight:700;opacity:1;text-align:center}
.gap-input::-webkit-input-placeholder{color:#000;font-weight:700;opacity:1;text-align:center}
/* active OR filled: 1px #418EC8 + a 1px ring of the same blue. The ring PERSISTS
after blur once the box has a value — that is the "answered" affordance. */
.gap-input:focus,
.gap-input.active,
.gap-input:not(:placeholder-shown){border-color:rgb(65,142,200);box-shadow:rgb(65,142,200) 0 0 0 1px}
.gap-input.correct{color:var(--emerald);border-color:var(--emerald)}
.gap-input.incorrect{color:var(--crimson);border-color:var(--crimson)}
/* the hidden mirror that drives the auto-grow (span.textEntry__shadowElement) */
.gap-mirror{position:absolute;top:0;left:0;height:0;overflow:hidden;visibility:hidden;white-space:pre;font:400 16px/24px Arial,sans-serif}
.gap-line{display:inline;padding:0;font-size:16px;line-height:24px;color:#000;font-weight:400}
.gap-line .q-pill{margin:0 6px 0 0}
/* ── MCQ OPTIONS ── */
/* measured: each option row is 1154 wide, 43.2 tall, background #fff, no border,
no radius, padding 9.6px 8px 9.6px 32px, font 16px/24px Arial. The radio sits
inside the 32px left pad; the official rows carry no A/B/C letter. */
.options{display:block;padding-left:0;margin-top:0}
.option{display:block;position:relative;padding:9.6px 8px 9.6px 32px;border-radius:0;background:#fff;border:none;cursor:pointer;transition:none;font-size:16px;font-weight:400;color:#000;line-height:24px}
.option:hover{background:#e8e8e8}
.option input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.option:focus-within{outline:2px solid rgb(65,142,200);outline-offset:-2px}
.option .opt-letter{position:absolute;left:14px;top:50%;margin-top:-6.5px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;background:#fff;border:1px solid rgb(83,83,83);display:block;font-size:0;line-height:0;color:transparent;overflow:hidden;transition:none}
.option.selected{background:#f1f1f1}
.option.selected .opt-letter{border-color:#000;box-shadow:inset 0 0 0 2.5px #fff,inset 0 0 0 12px #000}
.option.correct{background:#f1fff4}
.option.correct .opt-letter{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.option.wrong{background:#fff5f5}
.option.wrong .opt-letter{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.option.disabled{pointer-events:none}
body.dark-mode .option.selected{background:#1d3a63}
body.dark-mode .option.correct{background:rgba(46,125,50,.18)}
body.dark-mode .option.wrong{background:rgba(196,18,48,.18)}
/* ── DROPDOWN ── */
.dropdown{-webkit-appearance:none;appearance:none;background:var(--paper) url("data:image/svg+xml;utf8,") no-repeat right 8px center;border:1px solid var(--line-4);border-radius:2px;padding:4px 26px 4px 8px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--primary);cursor:pointer;outline:none;min-width:58px;transition:border-color .15s}
.dropdown:focus{border-color:#444}
.dropdown.correct{border-color:var(--emerald);color:var(--emerald)}
.dropdown.incorrect{border-color:var(--crimson);color:var(--crimson)}
/* ── OPTION LIST BOX ── */
.option-list-box{background:var(--panel);border:1px solid var(--line-3);border-left:3px solid var(--primary);border-radius:0 3px 3px 0;padding:12px 16px;margin:10px 0}
.option-list-box ul{list-style:none;columns:2;gap:14px}
.option-list-box li{font-size:13px;padding:3px 0;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:8px;break-inside:avoid}
.option-list-box li .pl-letter{font-weight:700;color:var(--primary);width:18px}
/* ── DRAG MATCH ── */
.drag-match-layout{display:grid;grid-template-columns:auto auto;justify-content:start;gap:16px;margin:4px 0 16px}
.drag-col-hdr{font-size:16px;font-weight:700;line-height:19.2px;color:#000;margin:0 0 8px;padding-bottom:0;border-bottom:none}
.drag-right .drag-col-hdr{margin-left:32px}
.drag-items{display:flex;flex-direction:column;gap:14px}
.drag-item-row{display:flex;align-items:center;gap:12px}
.drag-item-label{font-size:16px;font-weight:400;line-height:24px;color:#000;min-width:90px}
/* measured drop zone: 124 x 27, 1px dashed #333, radius 5px, #fff, margin 1px;
active = 2px dashed #418EC8 in the same box */
.drag-drop{min-width:124px;min-height:27px;height:27px;padding:0 4px;margin:1px;background:#fff;border:1px dashed #333;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;text-align:center;position:relative;transition:none;cursor:default;box-sizing:border-box}
.drag-drop .drag-num-hint{font-size:16px;font-weight:700;line-height:normal;color:#000;pointer-events:none;user-select:none}
.drag-drop-sm{min-width:56px}
.drag-drop.dm-filled{padding:0}
.drag-drop.dm-filled .drag-num-hint{display:none}
.drag-drop.dm-over,.drag-drop.dm-active-q{border:2px dashed rgb(65,142,200);background:#fff}
/* placed chip fills the dashed box seamlessly (no double border) */
.drag-drop .drag-chip{width:100%;height:100%;min-height:25px;border:none;background:transparent;box-shadow:none;border-radius:4px;padding:0 7px;justify-content:center;cursor:move;margin:0}
.drag-drop .drag-chip:hover{box-shadow:none}
/* highlight all open boxes while dragging */
body.dm-active .drag-drop:not(.dm-filled){border-color:rgb(65,142,200);border-style:dashed;background:#fff}
/* measured token column: flex column, align-items flex-start, margin 0 0 16px 32px */
.drag-pool{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0 0 16px 32px;border-radius:5px;min-height:37px}
/* measured token: 27 tall, 1px #919191, radius 4px, #fff, margin 3px, 14px/24px, padding 0 7px */
.drag-chip{height:27px;padding:0 7px;margin:3px;border:1px solid #919191;border-radius:4px;font-size:14px;line-height:24px;font-weight:400;color:#000;cursor:move;background:#fff;user-select:none;-webkit-user-select:none;touch-action:none;display:inline-flex;align-items:center;justify-content:flex-start;white-space:nowrap;transition:none;box-sizing:border-box}
.drag-chip:hover{border-color:#919191}
.drag-chip.dm-dragging{opacity:.3}
.drag-chip.dm-ghost{position:fixed;z-index:9999;margin:0;padding:0 7px;border:1px solid rgb(65,142,200);box-sizing:border-box;pointer-events:none;cursor:grabbing;opacity:.95;background:#fff}
[data-map-img] img{width:100% !important;max-width:720px !important;height:auto !important;display:block}
body.review-mode .drag-drop{pointer-events:none}
body.review-mode .drag-chip{pointer-events:none;cursor:default}
.drag-drop.dm-correct{border-color:var(--emerald) !important;background:rgba(46,125,50,.06)}
.drag-drop.dm-correct .drag-chip{color:var(--emerald)}
.drag-drop.dm-wrong{border-color:var(--crimson) !important;background:rgba(196,18,48,.06)}
.drag-drop.dm-wrong .drag-chip{color:var(--crimson)}
/* ── FEEDBACK PILL ── */
.feedback-pill{display:none;margin-left:10px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:10px;align-items:center;gap:4px}
.feedback-pill.show{display:inline-flex}
.feedback-pill.correct{background:#e7f5e9;color:var(--emerald)}
.feedback-pill.wrong{background:linear-gradient(90deg,rgba(253,236,239,.7),rgba(231,245,233,.7));border:1px solid rgba(46,125,50,.2)}
.hl{border-radius:1px}
/* ── BOTTOM NAV ── */
/* measured: .App__footerWrapper 0, 847, 1440 x 53 */
#bnav{background:#fff;border-top:none;flex:0 0 auto;height:53px;min-height:53px;display:flex;align-items:stretch}
#listening-nav{display:flex;align-items:stretch;width:100%;min-height:0;height:100%;overflow:visible}
/* THE GROWTH RULE: flex:1 1 0% with min-width:auto. Four single-digit cells land on
an exact quarter (338.8); a two-digit run pushes its own cell to ~406 and the other
three shrink to ~316. Same CSS, both behaviours. The 3px top strip is the rail. */
.bnav-section{flex:1 1 0%;display:flex;align-items:stretch;min-width:auto;overflow:visible;margin:0 1px;padding-top:3px;background:#fff;justify-content:center}
.bnav-section.sel{justify-content:flex-start}
.bnav-part{display:flex;flex-direction:row;align-items:stretch;gap:0;padding:0;flex-shrink:0;border-radius:0;align-self:stretch}
.bnav-part.other{cursor:pointer}
.bnav-part.other:hover{background:#dcdcdc}
body.dark-mode .bnav-part.other:hover{background:#333}
.bnav-row{display:flex;align-items:stretch;gap:0}
/* measured selected label button: 1, 850, 100.484 x 50 ; padding 16px 20px ; 600 16px
"Part" and the number are two spans, the number carrying margin-right:16px */
.bnav-plabel{font-size:16px;font-weight:600;color:rgb(51,51,51);white-space:nowrap;cursor:pointer;display:inline-flex;align-items:flex-start;justify-content:flex-start;gap:0;padding:16px 20px;line-height:normal;box-sizing:border-box;position:relative;background:transparent;border:0;font-family:Arial,sans-serif}
.bnav-plabel .sectionNr,.bnav-plabel2 .sectionNr{margin-right:16px}
.bnav-plabel2{font-size:16px;font-weight:400;color:rgb(51,51,51);white-space:nowrap;display:inline-flex;align-items:center;gap:0;padding:16px 20px;line-height:normal;box-sizing:border-box;font-family:Arial,sans-serif}
.bnav-plabel2.done{color:rgb(51,51,51)}
.bnav-pscore{font-size:16px;color:rgb(117,117,117);white-space:nowrap;margin:0;display:inline-flex;align-items:center;font-family:Arial,sans-serif}
.bnav-check{display:none}
/* THE RAIL. 3px tall, #D7D7D7, sitting on the cell's own top edge, one segment per
label and per number box, 1.5px inset each side. An ATTEMPTED question turns its
own segment #358E14 — the number box itself never changes colour. */
.bnav-part.cur .bnav-plabel::before{content:"";position:absolute;top:-3px;left:1.5px;right:1.5px;height:3px;background:#D7D7D7}
.bnav-pills{display:flex;align-items:stretch;gap:0}
.qpill-wrap{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch}
.qpill-wrap::before{content:"";position:absolute;top:-3px;left:1.5px;right:1.5px;height:3px;background:#D7D7D7}
.qpill-wrap.answered::before{background:#358E14}
.qpill-seg{display:none}
body.dark-mode .qpill-seg{display:none}
/* measured box: 20.906 x 26.781 (one digit) / 29.797 x 26.781 (two), padding 2.4px 4px,
margin 11.6094px 0, radius 3px, 2px transparent border */
.qpill{min-width:auto;padding:2.4px 4px;margin:11.6094px 0;display:block;text-align:center;line-height:normal;font-size:16px;font-weight:400;color:rgb(51,51,51);border-radius:3px;border:2px solid transparent;box-sizing:border-box;cursor:pointer;user-select:none;background:transparent;white-space:pre;font-family:Arial,sans-serif}
/* the run ends with an 8px gap before the next cell; the margin sits OUTSIDE the
wrapper so the rail segment stops at the box, as it does in crop-off-footer.png */
.qpill-wrap:last-child{margin-right:8px}
.qpill:hover{background:#e6e6e6}
body.dark-mode .qpill:hover{background:#333}
.qpill.current{border-color:rgb(65,143,198);background:#fff;font-weight:700;color:rgb(51,51,51)}
.qpill.flagged{color:var(--primary)}
.bnav-prog{height:3px;border-radius:2px;display:flex;gap:4px;width:100%;min-width:60px}
.bnav-prog .seg{flex:1;height:3px;border-radius:2px;background:#cfcfcf;transition:background .25s ease}
.bnav-prog .seg.on{background:#5a9e2f}
.bnav-prog.done{background:#5a9e2f}
.bnav-prog.idle{background:#dadada}
body.dark-mode .bnav-prog .seg{background:#4a4a4a}
.bnav-gap{flex:1 1 auto;min-width:16px}
#sub-btn{width:76.8px;max-width:76.8px;background:rgb(239,239,239);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:19.2px;color:rgb(83,83,83);padding:16px}
#sub-btn:hover{background:#262626;color:#fff}
#sub-btn.active{background:#333;color:#fff}
body.dark-mode #sub-btn{color:#ccc}
/* ── PREV/NEXT SECTION ARROWS ── */
/* measured: #footer-nav-wrapper is position:ABSOLUTE, right 32, bottom 144, z 100 */
#qnav-arrows{position:absolute;right:32px;bottom:144px;display:flex;gap:2.4px;z-index:100}
.qnav-btn{width:55.88px;height:55.2px;border:none;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none}
.qnav-btn svg{width:22px;height:26px;fill:#fff;stroke:none}
.qnav-btn.prev{background:rgb(76,76,76)}
.qnav-btn.prev:hover{background:#494949}
.qnav-btn.next{background:rgb(0,0,0)}
.qnav-btn.next:hover{background:#262626}
/* the official does not fade a disabled arrow: it swaps the ground to #dddddd and
keeps the glyph solid white */
.qnav-btn:disabled{background:#dddddd;cursor:default}
.qnav-btn:disabled:hover{background:#dddddd}
/* ── TRANSCRIPT PANEL ── */
#transcript-panel{position:fixed;right:0;top:56px;width:416px;height:calc(100vh - 56px - 46px);background:var(--paper);border-left:1px solid var(--line);box-shadow:-12px 0 48px rgba(0,0,0,.08);display:none;flex-direction:column;z-index:26;overflow:hidden}
body.review-mode.tp-active #transcript-panel{display:flex}
body.review-mode.tp-active #listening-area{padding-right:420px}
.tp-hdr{flex-shrink:0;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#0b1120 0%,#1a2332 100%)}
body.dark-mode .tp-hdr{background:linear-gradient(135deg,#060a14 0%,#0f1a26 100%)}
.tp-hdr-lbl{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#e2e8f0;flex:1}
.tp-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:livePulse 1.5s ease infinite;flex-shrink:0}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.tp-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.tp-fade-top{position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,var(--paper) 20%,transparent);z-index:3;pointer-events:none}
.tp-fade-bot{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,var(--paper) 20%,transparent);z-index:3;pointer-events:none}
.tp-body{flex:1;min-height:0;overflow-y:scroll}
.tp-body::-webkit-scrollbar{display:none}
.tp-item{padding:12px 20px;border-left:3px solid transparent;transition:all .45s cubic-bezier(.4,0,.2,1)}
.tp-item.tp-past{opacity:.35;transform:scale(.99)}
.tp-item.tp-cur{opacity:1;transform:scale(1);border-left-color:#3b82f6;background:rgba(59,130,246,.03)}
.tp-item.tp-break{padding:8px 20px;display:flex;align-items:center;gap:8px;border-left:none}
.tp-sp{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.tp-tx{font-size:13px;line-height:1.75;color:var(--ink-mute);font-weight:500}
.tp-w{transition:color .15s ease,font-weight .15s ease,opacity .15s ease}
.tp-cur .tp-w{color:var(--ink-mute);opacity:.45}
.tp-cur .tp-w.tp-w-lit{color:var(--ink);font-weight:600;opacity:1}
.tp-cur .tp-w.tp-ans-w.tp-w-lit{color:var(--gold);font-weight:700;opacity:1}
.tp-br-line{flex:1;height:1px;background:var(--line)}
.tp-br-lbl{font-size:9.5px;font-weight:700;color:var(--ink-mute);white-space:nowrap;padding:0 8px;letter-spacing:.05em}
mark.tp-ans-mark{background:#FFE066;color:#7a4f00;font-weight:800;border-radius:3px;padding:1px 6px;box-shadow:0 0 0 1px rgba(180,130,0,.3)}
.tp-apill-i{display:inline-block;font-size:9px;font-weight:800;padding:1px 6px;border-radius:999px;background:rgba(196,18,48,.1);color:#7a0e1c;border:1px solid rgba(196,18,48,.25);letter-spacing:.06em;vertical-align:middle;margin-left:3px;line-height:1.4}
.q-jump-btn{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 12px;border-radius:999px;border:1.5px solid rgba(196,18,48,.25);color:var(--primary);background:transparent;font-size:11px;font-weight:700;font-family:var(--sans);cursor:pointer;transition:all .12s;letter-spacing:.02em}
.q-jump-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.q-jump-btn-inline{margin:0;padding:3px 10px;font-size:10px}
/* ── WARNING OVERLAY + TOAST ── */
.warning-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.warning-overlay.show{display:flex}
.warning-card{background:var(--paper);border-radius:5px;padding:36px 40px;max-width:520px;text-align:center;box-shadow:var(--shadow-lg);border-top:5px solid var(--crimson)}
.warning-card .ic{font-size:48px;margin-bottom:10px}
.warning-card h2{font-size:24px;font-weight:800;margin-bottom:10px;line-height:1.15;color:var(--ink)}
.warning-card p{color:var(--ink-soft);font-size:14px;line-height:1.6;margin-bottom:16px}
.warning-card .strike-counter{display:inline-flex;gap:6px;margin:6px 0 16px}
.warning-card .strike-counter .strike{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);transition:.3s}
.warning-card .strike-counter .strike.on{background:var(--crimson);border-color:var(--crimson)}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:110;padding:10px 20px;background:#111;color:#fff;border-radius:4px;font-size:13px;font-weight:600;box-shadow:var(--shadow-md);opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(8px)}
/* severity lives in the icon and the edge — see the COSMIC SHELL block below */
/* ── REVIEW MODE ── */
body.review-mode .gap-input{pointer-events:none}
body.review-mode .dropdown{pointer-events:none}
body.review-mode .option{pointer-events:none}
body.review-mode .q-pill{cursor:default;opacity:.8}
body.review-mode .timer{display:none}
/* ── GENERIC BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;border-radius:2px;font-family:var(--sans);font-size:12.5px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.12s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-2)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:#999;color:var(--ink)}
.btn-gold{background:var(--amber);color:#fff}
.btn-gold:hover{background:#cf4900}
.btn-sm{padding:7px 14px;font-size:12px}
.btn-lg{width:100%;padding:13px 24px;font-size:14px}
/* ── PREMIUM WRAPPER (registration/intro/completion/results) ── */
:root{
--pw-display:'Bricolage Grotesque',system-ui,'Segoe UI',sans-serif;
--pw-ui:'Be Vietnam Pro',system-ui,-apple-system,Arial,sans-serif;
--pw-ivory:#f7f1e9; --pw-ivory-2:#efe6d8; --pw-paper:#fffdfb;
--pw-ink:#22190f; --pw-ink-2:#5c5044; --pw-ink-3:#8a7d6d;
--pw-line:rgba(34,25,15,.10); --pw-line-2:rgba(34,25,15,.16);
--pw-red:#244b8e; --pw-red-2:#1a3a72; --pw-burgundy:#13315f;
--pw-status-red:#c41230; --pw-gold:#c19a4b; --pw-emerald:#1f7a43;
--pw-shadow:0 1px 2px rgba(34,25,15,.04),0 8px 24px -8px rgba(34,25,15,.14),0 28px 60px -20px rgba(20,48,95,.18);
}
:is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results){
font-family:var(--pw-ui);color:var(--pw-ink);
background:radial-gradient(1100px 560px at 50% -12%,rgba(36,75,142,.13),transparent 60%),radial-gradient(820px 520px at 108% 116%,rgba(19,49,95,.10),transparent 55%),radial-gradient(700px 460px at -10% 100%,rgba(193,154,75,.12),transparent 55%),linear-gradient(180deg,var(--pw-ivory),var(--pw-ivory-2));
}
:is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results)::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,");}
:is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results)>*{position:relative;z-index:1}
:is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-title,.trans-title,.complete-title){font-family:var(--pw-display);font-weight:600;letter-spacing:-.015em;color:var(--pw-ink);}
:is(#stage-listening-intro,#stage-completion) .trans-eyebrow{font-family:var(--pw-ui);font-weight:800;font-size:11px;letter-spacing:.28em;color:var(--pw-red);}
/* Registration */
#stage-registration{background:var(--bg);align-items:center;justify-content:center;padding:32px 24px;overflow-y:auto}
.start-card{width:100%;max-width:540px;background:var(--pw-paper);border:1px solid var(--pw-line);border-radius:18px;padding:0;overflow:hidden;box-shadow:var(--pw-shadow);animation:pwRise .65s cubic-bezier(.2,.75,.2,1) both;}
.start-card::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy) 55%,var(--pw-gold));}
.brand-block{margin:0;padding:24px 38px 20px;border-bottom:1px solid var(--pw-line);background:linear-gradient(180deg,rgba(36,75,142,.05),transparent);}
.brand-logo{width:54px;height:54px;border-radius:14px;display:block;flex-shrink:0;box-shadow:0 7px 18px -6px rgba(20,48,95,.5);}
.brand-text .brand-eyebrow{font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--pw-ink)}
.brand-text .brand-tagline{font-weight:500;font-size:12px;color:var(--pw-ink-3);margin-top:2px}
.start-title{font-size:28px;line-height:1.08;padding:0 38px;margin:22px 0 0 !important}
.start-meta{margin:20px 38px 4px;padding:18px 14px;border:1px solid var(--pw-line);border-radius:14px;background:linear-gradient(180deg,#fffdfb,#fbf6ee);box-shadow:inset 0 1px 0 #fff;display:flex;align-items:center;justify-content:space-evenly;}
.start-meta-item{text-align:center;flex:1}
.start-meta-item .n{font-family:var(--pw-display);font-weight:700;font-size:32px;color:var(--pw-red)}
.start-meta-item .l{font-size:10px;font-weight:700;color:var(--pw-ink-3);letter-spacing:.14em;margin-top:7px;text-transform:uppercase}
.start-meta-divider{width:1px;height:38px;background:var(--pw-line-2)}
.start-rules{margin:20px 0 4px;padding:0 38px;list-style:none;}
.start-rules li{font-size:13.5px;color:var(--pw-ink-2);line-height:1.55;padding:6px 0 6px 26px;position:relative}
.start-rules li::before{content:"";left:2px;top:11px;width:14px;height:14px;border-radius:50%;background:transparent;position:absolute;border:1.5px solid var(--pw-red);box-shadow:inset 0 0 0 3px rgba(36,75,142,.14)}
.input-label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pw-ink-3);margin-bottom:8px}
.input-field{width:100%;padding:12px 15px;font-family:var(--pw-ui);font-size:15px;font-weight:600;color:var(--pw-ink);background:#fffdfb;border:1.5px solid var(--pw-line-2);border-radius:11px;outline:none;transition:.18s}
.input-field:focus{border-color:var(--pw-red);box-shadow:0 0 0 4px rgba(36,75,142,.16)}
.input-field::placeholder{color:var(--pw-ink-3);font-weight:500}
#stage-registration .start-card > div[style*="margin-bottom:18px"]{padding:6px 38px 0}
#stage-registration #start-btn{margin:14px 38px 30px;width:calc(100% - 76px)}
/* Transition/Intro */
.transition-stage{background:var(--bg);align-items:center;justify-content:center;padding:34px}
.trans-card{width:100%;max-width:680px;background:var(--pw-paper);border:1px solid var(--pw-line);border-radius:20px;padding:48px 52px 42px;box-shadow:var(--pw-shadow);position:relative;overflow:hidden;animation:pwRise .65s cubic-bezier(.2,.75,.2,1) both;}
.trans-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy) 55%,var(--pw-gold))}
.trans-icon{font-size:0;margin:0 auto 14px;width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,rgba(36,75,142,.14),rgba(19,49,95,.07));border:1px solid var(--pw-line)}
#stage-listening-intro .trans-icon::after{content:"🎧";font-size:30px}
.trans-eyebrow{font-family:var(--pw-ui);font-weight:800;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--pw-red);margin-bottom:12px}
.trans-title{font-size:40px;margin:6px 0 12px}
.trans-sub{color:var(--pw-ink-2);font-size:15px;max-width:520px;line-height:1.6;margin:0 auto 28px}
.trans-rules{background:linear-gradient(180deg,#fffdfb,#fbf6ee);border:1px solid var(--pw-line);border-radius:14px;padding:22px 26px;text-align:left;margin-bottom:24px}
.trans-rules h4{font-family:var(--pw-ui);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pw-red);margin-bottom:14px}
.trans-rules ul{list-style:none}
.trans-rules li{color:var(--pw-ink-2);font-size:14px;margin:9px 0;padding-left:28px;position:relative;line-height:1.5}
.trans-rules li::before{content:"✓";color:var(--pw-emerald);font-weight:800;font-size:13px;top:1px;position:absolute;left:0}
/* Completion */
#stage-completion{padding:34px;align-items:center;justify-content:center;overflow-y:auto}
.complete-card{width:100%;max-width:620px;background:var(--pw-paper);border:1px solid var(--pw-line);border-radius:20px;padding:50px 48px 42px;box-shadow:var(--pw-shadow);position:relative;overflow:hidden;animation:pwRise .65s cubic-bezier(.2,.75,.2,1) both;text-align:center;}
.complete-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pw-red),var(--pw-burgundy) 55%,var(--pw-gold))}
.complete-icon{font-size:0;margin:0 auto 16px;width:66px;height:66px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,rgba(193,154,75,.20),rgba(36,75,142,.10));border:1px solid var(--pw-line)}
.complete-icon::after{content:"🎓";font-size:34px}
.complete-title{font-size:38px;margin-bottom:12px}
.complete-sub{color:var(--pw-ink-2);font-size:15px}
/* ============================================================
RESULTS — certificate (owner: L3)
------------------------------------------------------------
Ported wholesale from the Writing V3 Test Report Form so that
the two documents come off the same press: the same paper and
ink, the same dark score panel, the same 0–9 ruler, the same
band-tier chrome, the same reveal.
The one honest change is the table in the middle. Writing
prints four examiner criteria; Listening has no examiner, so
it prints the four parts of the recording instead — the only
breakdown an objective 40-mark paper actually has.
Everything is scoped to #stage-results (or to #print-report,
built by buildPrintReport()) so nothing can reach the exam
screen, which stays a pixel clone of the Inspera player.
============================================================ */
#stage-results{flex-direction:column}
.results-content{margin:0 auto;padding:30px 24px 60px;overflow-y:auto;flex:1;width:100%}
#stage-results .results-content{margin:0;padding:44px 24px 80px;overflow-y:auto;overscroll-behavior:contain;flex:1;width:100%;max-width:none}
#stage-results .topbar{height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(255,253,251,.85);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--pw-line)}
#stage-results .topbar>div>span{font-family:var(--pw-display);font-weight:600}
#stage-results .topbar .btn-ghost{border-radius:10px;border-color:var(--pw-line-2);color:var(--pw-ink-2);font-family:var(--pw-ui);font-weight:600}
#stage-results .topbar .btn-ghost:hover{border-color:var(--pw-red);color:var(--pw-red)}
#stage-results .topbar .btn-gold{border-radius:10px;background:linear-gradient(165deg,#caa052,#a87e2f);border:none;font-family:var(--pw-ui)}
/* ── Document tokens + band-tier chrome ───────────────────────
data-tier is set from the band in renderResults(). Only the
chrome (rule, glow, accent metal) changes; the paper, the ink
and the layout stay constant, so a 4.0 and a 9.0 are
recognisably the same document — just lit differently. */
#stage-results .cert,#print-report{
--c-paper:#fffdfa;--c-paper-2:#f9f4ea;--c-ink:#1b1610;--c-ink-2:#5a5045;--c-ink-3:#8d8173;
--c-line:rgba(27,22,16,.10);--c-line-2:rgba(27,22,16,.17);
--cv-strong:#1f7a43;--cv-mid:#a97f34;--cv-low:#78818f;--cv-none:#b3ada4;
--st-ok:#1f7a43;--st-no:#ad3a2c;--st-skip:#93887a;
}
#stage-results .cert{
--acc:#7fb0e8;--acc-2:#d3e6fb;--acc-ink:#2c5fa8;
--hero-a:#0d2044;--hero-b:#1b3a6d;--hero-c:#27507f;
--glow:rgba(122,172,232,.30);
--rule:linear-gradient(90deg,#17356a,#2c5fa8 58%,#7fb0e8);
}
#stage-results .cert[data-tier="high"]{
--acc:#dcbe7c;--acc-2:#f8ecc9;--acc-ink:#9c7526;
--hero-a:#0b1c39;--hero-b:#1d3a68;--hero-c:#33578a;
--glow:rgba(224,192,120,.30);
--glow-pos:22% 34%;
--rule:linear-gradient(90deg,#17356a,#3767ad 34%,#c9a24f 74%,#f2dfae);
}
#stage-results .cert[data-tier="mid"]{
--acc:#d8b479;--acc-2:#f3e3c3;--acc-ink:#8f6f2c;
--hero-a:#132a4e;--hero-b:#20406e;--hero-c:#2d5382;
--glow:rgba(199,163,98,.24);
--rule:linear-gradient(90deg,#1c3f77,#3a5f92 46%,#b58c45)}
#stage-results .cert[data-tier="low"]{
--acc:#a9bcd2;--acc-2:#dae4ef;--acc-ink:#4c5f78;
--hero-a:#141c29;--hero-b:#242f42;--hero-c:#33415a;
--glow:rgba(150,175,205,.17);
--rule:linear-gradient(90deg,#2a3648,#47566d 58%,#8095ad)}
/* ── The document ── */
#stage-results .cert{
max-width:948px;margin:0 auto;background:var(--c-paper);color:var(--c-ink);font-family:var(--pw-ui);
border:1px solid var(--c-line);border-top:none;border-radius:16px;overflow:hidden;
box-shadow:0 1px 2px rgba(27,22,16,.05),0 14px 34px -14px rgba(27,22,16,.20),0 44px 90px -40px rgba(13,32,68,.30);
animation:certRise .72s cubic-bezier(.16,.86,.24,1) both}
#stage-results .cert::before{content:"";display:block;height:5px;background:var(--rule)}
/* header */
#stage-results .cert-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 38px 18px;animation:certPart .5s .10s both}
#stage-results .cert-logo{display:flex;align-items:center;gap:13px}
#stage-results .cert-logo .logo-mark{width:46px;height:46px;border-radius:13px;flex:0 0 auto;box-shadow:0 6px 16px -7px rgba(13,32,68,.6)}
#stage-results .cert-logo-name{font-family:var(--pw-display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--c-ink)}
#stage-results .cert-logo-sub{font-weight:700;font-size:9.5px;color:var(--c-ink-3);letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
#stage-results .cert-title-block{text-align:right}
#stage-results .cert-type-tag{font-size:9.5px;font-weight:800;color:var(--acc-ink);letter-spacing:.2em;text-transform:uppercase;margin-bottom:5px}
#stage-results .cert-title-main{font-family:var(--pw-display);font-size:27px;font-weight:700;color:var(--c-ink);letter-spacing:-.028em;line-height:1.05}
#stage-results .cert-date-val{font-size:11px;color:var(--c-ink-3);margin-top:5px;letter-spacing:.01em}
#stage-results .divider{height:1px;background:var(--c-line)}
/* candidate strip */
#stage-results .student-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);background:linear-gradient(180deg,#fffdfa,#fbf7ef);animation:certPart .5s .16s both}
#stage-results .student-row > div{padding:13px 22px;border-left:1px solid var(--c-line)}
#stage-results .student-row > div:first-child{border-left:none;padding-left:38px}
#stage-results .student-row > div:last-child{padding-right:38px}
#stage-results .field-label{font-size:9px;font-weight:800;color:var(--c-ink-3);letter-spacing:.17em;text-transform:uppercase;margin-bottom:5px}
#stage-results .field-value{font-size:14.5px;font-weight:700;color:var(--c-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── The score panel: the one thing they screenshot ── */
#stage-results .score-section{position:relative;display:grid;grid-template-columns:266px 1fr;gap:0;padding:0;border:none;
background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 52%,var(--hero-c));color:#fff;isolation:isolate;
animation:certPart .55s .22s both}
#stage-results .score-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(560px 360px at var(--glow-pos,18% 2%),var(--glow),transparent 68%),
radial-gradient(420px 260px at 104% 118%,rgba(255,255,255,.09),transparent 62%),
repeating-linear-gradient(114deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10px)}
#stage-results .score-section > *{position:relative;z-index:1}
#stage-results .band-card{padding:30px 26px 30px 38px;border:none;border-right:1px solid rgba(255,255,255,.15);text-align:left;
display:flex;flex-direction:column;justify-content:center;background:none;border-radius:0;box-shadow:none;overflow:visible}
#stage-results .band-card::after{content:none}
#stage-results .band-lbl{font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:2px}
#stage-results .band-fig{display:flex;align-items:baseline;gap:9px}
#stage-results .band-num{font-family:var(--pw-display);font-weight:700;font-size:94px;line-height:.92;letter-spacing:-.048em;
font-variant-numeric:tabular-nums;background:linear-gradient(172deg,#fff 4%,var(--acc-2) 34%,var(--acc) 88%);
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 6px 18px rgba(0,0,0,.28));animation:none;margin:0}
#stage-results .band-of{font-size:16px;font-weight:600;color:rgba(255,255,255,.36);letter-spacing:-.01em}
#stage-results .band-level{font-family:var(--pw-display);font-size:17px;font-weight:600;color:#fff;margin-top:8px;letter-spacing:-.012em}
#stage-results .band-formula{font-size:10.5px;color:rgba(255,255,255,.52);margin-top:7px;line-height:1.5;letter-spacing:.005em}
#stage-results .band-formula b{color:rgba(255,255,255,.78);font-weight:700}
#stage-results .band-side{padding:26px 38px 28px 30px;display:flex;flex-direction:column;gap:15px;min-width:0}
/* 0–9 ruler */
#stage-results .band-scale{position:relative}
#stage-results .band-scale-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
#stage-results .band-scale-cap{font-size:9px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.5)}
#stage-results .band-scale-note{font-size:11px;color:rgba(255,255,255,.62)}
#stage-results .band-scale-note b{color:#fff;font-weight:700}
#stage-results .band-scale-track{position:relative;height:9px;border-radius:99px;background:rgba(255,255,255,.11);box-shadow:inset 0 1px 2px rgba(0,0,0,.24)}
#stage-results .band-scale-track::after{content:"";position:absolute;inset:0;border-radius:99px;pointer-events:none;
background:repeating-linear-gradient(90deg,transparent 0 calc(11.111% - 1px),rgba(255,255,255,.20) calc(11.111% - 1px) 11.111%)}
#stage-results .band-scale-fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:99px;
background:linear-gradient(90deg,rgba(255,255,255,.30),var(--acc));box-shadow:0 0 18px -2px var(--glow);
transition:width 1.05s .35s cubic-bezier(.16,.86,.24,1)}
#stage-results .band-scale-dot{position:absolute;top:50%;left:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.20),0 3px 10px rgba(0,0,0,.35);opacity:0;
transition:left 1.05s .35s cubic-bezier(.16,.86,.24,1),opacity .3s .9s}
#stage-results .band-scale.on .band-scale-dot{opacity:1}
#stage-results .band-scale-ticks{display:flex;justify-content:space-between;margin-top:7px}
#stage-results .band-scale-ticks span{font-size:9px;font-weight:600;color:rgba(255,255,255,.34);font-variant-numeric:tabular-nums}
#stage-results .band-scale-ticks span.hit{color:#fff;font-weight:800}
/* the one honest sentence about what this band is worth */
#stage-results .band-verdict{font-size:12px;line-height:1.5;color:rgba(255,255,255,.66);letter-spacing:.005em;
padding:10px 14px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11)}
#stage-results .band-verdict b{color:#fff;font-weight:700}
/* the three tallies — the old "Score Breakdown" strip, re-cut as
cards so it carries the same weight as Writing's two task cards */
#stage-results .tally-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#stage-results .tally{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:13px;
padding:12px 15px 13px;transition:background .18s ease,border-color .18s ease;min-width:0}
#stage-results .tally:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
#stage-results .tally-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
#stage-results .tally-title{font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
#stage-results .tally-n{font-family:var(--pw-display);font-size:30px;font-weight:700;line-height:1;color:#fff;
letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-left:auto}
#stage-results .tally-track{height:5px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
#stage-results .tally-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.34),var(--acc));
transition:width .95s .5s cubic-bezier(.16,.86,.24,1)}
#stage-results .tally-note{font-size:10.5px;color:rgba(255,255,255,.52);margin-top:9px;letter-spacing:.005em}
#stage-results .tally-note b{color:rgba(255,255,255,.8);font-weight:700}
/* ── Section breakdown (Writing's criteria table, re-cut) ── */
#stage-results .section-heading{display:flex;align-items:center;gap:12px;margin:26px 38px 15px;animation:certPart .5s .3s both}
#stage-results .section-heading::before,#stage-results .section-heading::after{content:'';flex:1;height:1px;background:var(--c-line)}
#stage-results .section-heading span{font-size:9.5px;font-weight:800;color:var(--acc-ink);letter-spacing:.2em;text-transform:uppercase}
#stage-results .cc-grid{display:block;padding:0 38px;animation:certPart .5s .34s both}
#stage-results .cc-table{border:1px solid var(--c-line);border-radius:14px;overflow:hidden;background:var(--c-paper)}
#stage-results .cc-head,#stage-results .cc-row{display:grid;grid-template-columns:minmax(190px,1fr) minmax(190px,.95fr) minmax(150px,.8fr);align-items:center}
#stage-results .cc-row.cc-total{background:var(--c-paper-2)}
#stage-results .cc-row.cc-total .cc-name{font-weight:800}
#stage-results .cc-head{background:linear-gradient(180deg,#fbf7ef,#f6f0e4);border-bottom:1px solid var(--c-line)}
#stage-results .cc-head > div{padding:11px 18px}
#stage-results .cc-head-name{font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--c-ink-3)}
#stage-results .cc-head-task{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-left:1px solid var(--c-line)}
#stage-results .cc-head-task span{font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--c-ink-2)}
#stage-results .cc-col-band{font-family:var(--pw-display);font-size:21px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#stage-results .cc-row{border-top:1px solid var(--c-line)}
#stage-results .cc-row:first-child{border-top:none}
#stage-results .cc-name{padding:13px 18px;font-size:12.5px;font-weight:600;color:var(--c-ink);line-height:1.35;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#stage-results .cc-name em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--c-ink-3);letter-spacing:.01em}
#stage-results .cc-tag{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:5px;white-space:nowrap}
#stage-results .cc-tag.best{color:#1f7a43;background:rgba(31,122,67,.10)}
#stage-results .cc-tag.focus{color:#8f6f2c;background:rgba(169,127,52,.13)}
#stage-results .cc-cell{padding:13px 18px;border-left:1px solid var(--c-line);display:flex;align-items:center;gap:14px}
#stage-results .cc-track{flex:1;height:8px;border-radius:99px;background:rgba(27,22,16,.07);position:relative;overflow:hidden;min-width:60px;display:flex}
#stage-results .cc-track::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(27,22,16,.13) calc(10% - 1px) 10%)}
#stage-results .cc-seg{height:100%;width:0;transition:width .8s cubic-bezier(.16,.86,.24,1)}
#stage-results .cc-seg.ok{background:var(--cv-strong)}
#stage-results .cc-seg.no{background:var(--st-no)}
#stage-results .cc-seg.sk{background:rgba(27,22,16,.17)}
#stage-results .cc-val{font-family:var(--pw-display);font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:52px;text-align:right;white-space:nowrap}
#stage-results .cc-val small{font-size:11px;font-weight:600;color:var(--c-ink-3);letter-spacing:0}
#stage-results .cc-legend{margin:13px 38px 0;padding:0;background:none;border-radius:0;font-size:11px;color:var(--c-ink-3);line-height:1.6;
display:flex;gap:10px 22px;flex-wrap:wrap;align-items:baseline;justify-content:space-between;animation:certPart .5s .4s both}
#stage-results .cc-legend .keys{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;flex:0 0 auto}
#stage-results .cc-legend .note{flex:1 1 320px;min-width:280px;max-width:620px}
#stage-results .cc-legend b{color:var(--c-ink-2);font-weight:700}
#stage-results .cc-legend .key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#stage-results .cc-legend .key i{width:9px;height:9px;border-radius:3px;display:inline-block}
/* what the band officially means — public descriptor, changes with the score */
#stage-results .band-desc{margin:18px 38px 0;padding:2px 0 2px 16px;border-left:3px solid var(--acc-ink);
background:none;border-radius:0;animation:certPart .5s .43s both}
#stage-results .band-desc-h{font-family:var(--pw-display);font-size:14px;font-weight:600;letter-spacing:-.012em;color:var(--c-ink)}
/* ── Where the marks went ──────────────────────────────────────
The same diagnosis the Reading report makes, and for the same reason: a
mark lost to a plural or a spelling is an evening's work, a mark lost to
comprehension is months of it, and a blank is neither. Reading also prints
a pace block here; Listening does not, because the recording sets the pace
for everyone and a chart of it would report a choice nobody made. */
#stage-results .ins-grid{padding:0 38px;margin-top:18px}
#stage-results .ins-lead{font-family:var(--pw-display);font-size:16px;font-weight:600;letter-spacing:-.015em;
color:var(--c-ink);line-height:1.45;margin:0 0 14px;max-width:74ch}
#stage-results .cause-grid{display:flex;flex-wrap:wrap;gap:10px}
#stage-results .cause-card{flex:1 1 132px;max-width:196px;min-width:132px;
border:1px solid var(--c-line);border-radius:12px;padding:12px 14px 13px;background:var(--c-paper)}
#stage-results .cause-card b{display:block;font-family:var(--pw-display);font-size:26px;font-weight:700;line-height:1;
letter-spacing:-.035em;font-variant-numeric:tabular-nums}
#stage-results .cause-card span{display:block;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--c-ink-3);line-height:1.35}
#stage-results .cause-card.fixable b{color:var(--cv-strong)}
#stage-results .cause-card.real b{color:var(--acc-ink)}
#stage-results .cause-card.blank b{color:var(--cv-mid)}
#stage-results .ins-note{margin-top:13px;padding-top:12px;border-top:1px solid var(--c-line);
font-size:12.5px;line-height:1.6;color:var(--c-ink-2);max-width:82ch}
#stage-results .ins-note + .ins-note{margin-top:8px;padding-top:8px;border-top:none}
#stage-results .band-desc p{margin:5px 0 0;font-size:12.5px;line-height:1.6;color:var(--c-ink-2);max-width:78ch}
/* ── The answer record ──
Every mark the grader produced, printed. The bubble grid is the
map; the two tables are the record. "Heard at" is the second in
the recording where the answer was spoken — the one thing a
Listening report can give that a Writing report cannot. */
#stage-results .answer-section{padding:0 38px;animation:certPart .5s .5s both}
#stage-results .q-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:15px}
#stage-results .q-bubble{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid transparent;transition:transform .12s}
#stage-results .q-bubble:hover{transform:translateY(-2px)}
#stage-results .q-bubble.correct{background:rgba(31,122,67,.10);color:var(--st-ok);border-color:rgba(31,122,67,.22)}
#stage-results .q-bubble.wrong{background:rgba(173,58,44,.10);color:var(--st-no);border-color:rgba(173,58,44,.22)}
#stage-results .q-bubble.skipped{background:rgba(27,22,16,.045);color:var(--c-ink-3);border-color:var(--c-line)}
#stage-results .answer-cols{border:1px solid var(--c-line);border-radius:14px;overflow:hidden;background:var(--c-paper)}
#stage-results .answer-table{width:100%;border-collapse:collapse;font-size:12px}
#stage-results .answer-table th{padding:10px 16px;text-align:left;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
color:var(--c-ink-3);background:linear-gradient(180deg,#fbf7ef,#f6f0e4);border-bottom:1px solid var(--c-line);white-space:nowrap}
#stage-results .answer-table td{padding:6.5px 16px;border-top:1px solid var(--c-line);vertical-align:baseline;line-height:1.4}
#stage-results .answer-table tbody tr:first-child td{border-top:none}
#stage-results .answer-table tr.alt td{background:rgba(27,22,16,.022)}
#stage-results .answer-table tr.pbreak td{border-top:1px solid var(--c-line-2)}
#stage-results .td-num{width:34px;font-size:10.5px;font-weight:700;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
#stage-results .td-user{width:34%;color:var(--c-ink);font-weight:600;overflow-wrap:break-word}
#stage-results .td-user.wrong{color:var(--st-no);font-weight:700}
#stage-results .td-user .empty{color:var(--c-ink-3);font-style:italic;font-weight:500}
#stage-results .td-correct{color:var(--st-ok);font-weight:600;overflow-wrap:break-word}
#stage-results .td-correct .alt{color:var(--c-ink-3);font-weight:500}
#stage-results .td-correct .dash{color:var(--c-line-2)}
#stage-results .td-at{width:64px;text-align:right;font-size:10.5px;color:var(--c-ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
#stage-results .td-status{width:30px;text-align:center;font-size:12px;font-weight:800}
#stage-results .td-status.correct{color:var(--st-ok)}
#stage-results .td-status.wrong{color:var(--st-no)}
#stage-results .td-status.skipped{color:var(--c-line-2)}
#stage-results .answer-note{margin:12px 0 0;font-size:11px;color:var(--c-ink-3);line-height:1.6}
#stage-results .answer-note b{color:var(--c-ink-2);font-weight:700}
/* ── Closing CTA + footer ── */
#stage-results .review-cta{margin:26px 38px 0;padding:18px 22px;border:1px solid rgba(44,95,168,.16);border-radius:14px;text-align:left;
background:linear-gradient(180deg,rgba(44,95,168,.055),rgba(44,95,168,.09));display:flex;align-items:center;justify-content:space-between;
gap:20px;flex-wrap:wrap;animation:certPart .5s .54s both}
#stage-results .review-cta-title{font-family:var(--pw-display);font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--c-ink)}
#stage-results .review-cta-sub{font-size:12px;color:var(--c-ink-3);margin-top:4px;line-height:1.5}
#stage-results .review-cta .btn-primary{background:linear-gradient(165deg,#2c5fa8,#1a3a72);border:none;border-radius:11px;
font-family:var(--pw-ui);font-weight:700;color:#fff;padding:11px 20px;height:auto;font-size:13px}
#stage-results .review-cta .btn-primary:hover{filter:brightness(1.06)}
#stage-results .cert-footer{margin-top:24px;padding:13px 38px;border-top:1px solid var(--c-line);background:linear-gradient(180deg,#fbf7ef,#f5efe3);
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#stage-results .cert-footer span{font-size:10px;color:var(--c-ink-3);font-weight:600;letter-spacing:.05em}
#stage-results .cert-footer span:first-child{font-family:var(--pw-display);font-weight:600;letter-spacing:.02em;color:var(--c-ink-2);font-size:11px}
#stage-results .cert-footer .cert-id{font-variant-numeric:tabular-nums;letter-spacing:.09em}
/* ── Motion ── */
@keyframes certRise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes certPart{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
#stage-results .band-scale-fill,#stage-results .band-scale-dot,#stage-results .tally-fill,#stage-results .cc-seg{transition:none!important}
#stage-results .band-scale-dot{opacity:1}
}
/* ── Responsive ── */
@media (max-width:1000px){
#stage-results .results-content{padding:28px 16px 60px}
#stage-results .cert-header,#stage-results .band-side{padding-left:26px;padding-right:26px}
#stage-results .band-card{padding-left:26px}
#stage-results .student-row > div:first-child{padding-left:26px}
#stage-results .student-row > div:last-child{padding-right:26px}
#stage-results .section-heading,#stage-results .cc-legend,#stage-results .review-cta,#stage-results .band-desc{margin-left:26px;margin-right:26px}
#stage-results .ins-grid{padding-left:26px;padding-right:26px}
#stage-results .cc-grid,#stage-results .answer-section{padding-left:26px;padding-right:26px}
#stage-results .cert-footer{padding-left:26px;padding-right:26px}
}
@media (max-width:820px){
#stage-results .score-section{grid-template-columns:1fr}
#stage-results .band-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding:24px 26px 20px}
#stage-results .band-side{padding:22px 26px}
#stage-results .cert-title-main{font-size:22px}
#stage-results .band-num{font-size:66px}
#stage-results .student-row{grid-template-columns:1fr 1fr}
#stage-results .student-row > div{border-left:none;border-top:1px solid var(--c-line);padding:11px 26px!important}
#stage-results .student-row > div:nth-child(-n+2){border-top:none}
#stage-results .student-row > div:nth-child(2n){border-left:1px solid var(--c-line)}
#stage-results .field-value{white-space:normal;overflow-wrap:anywhere}
#stage-results .answer-table th,#stage-results .answer-table td{padding-left:12px;padding-right:12px}
}
@media (max-width:640px){
#stage-results .cert-header{flex-direction:column;gap:14px}
#stage-results .cert-title-block{text-align:left}
#stage-results .student-row > div{padding:11px 20px!important}
#stage-results .tally-grid{grid-template-columns:1fr}
#stage-results .cc-head,#stage-results .cc-row{grid-template-columns:1fr}
#stage-results .cc-cell,#stage-results .cc-head-task{border-left:none;border-top:1px solid var(--c-line)}
#stage-results .review-cta{margin-left:16px;margin-right:16px;padding:16px 18px}
#stage-results .section-heading,#stage-results .cc-legend,#stage-results .band-desc{margin-left:16px;margin-right:16px}
#stage-results .ins-grid{padding-left:16px;padding-right:16px}
#stage-results .cc-grid,#stage-results .answer-section{padding-left:16px;padding-right:16px}
#stage-results .cert-header,#stage-results .band-side,#stage-results .cert-footer{padding-left:20px;padding-right:20px}
#stage-results .band-card{padding-left:20px;padding-right:20px}
#stage-results .student-row > div:first-child{padding-left:20px!important}
#stage-results .band-num{font-size:58px}
#stage-results .cert-title-main{font-size:20px}
#stage-results .field-value{font-size:13.5px}
#stage-results .topbar{height:auto;min-height:56px;flex-wrap:wrap;gap:10px;padding:10px 16px}
#stage-results .cc-legend{gap:8px 14px}
}
/* ── The printable report ──
Hidden on screen; typeset for A4 in ink by buildPrintReport().
Its @media print rules ship inside the block itself (see
printStylesheet()) so that the sheet never inherits the dark
score panel, the chamber ground or any theme the candidate
happened to leave switched on. */
#print-report{display:none}
/* Channel promo */
.channel-promo{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(135deg,#229ED9,#1E88C7);border-radius:14px;margin-top:18px;text-decoration:none;color:#fff;transition:.15s;cursor:pointer}
.channel-promo:hover{filter:brightness(1.05)}
.channel-promo .tg-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.channel-promo .channel-text{flex:1}
.channel-promo .channel-name{font-weight:800;font-size:14px}
.channel-promo .channel-desc{font-size:11.5px;opacity:.9;font-weight:500;margin-top:1px}
.channel-promo .channel-cta{font-size:12px;font-weight:800;padding:6px 12px;background:rgba(255,255,255,.18);border-radius:999px;flex-shrink:0}
@keyframes pwRise{from{opacity:0;transform:translateY(16px) scale(.992)}to{opacity:1;transform:none}}
/* ── DARK MODE PREMIUM WRAPPER ── */
body.dark-mode :is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results){
background:radial-gradient(1100px 560px at 50% -12%,rgba(90,140,210,.14),transparent 60%),radial-gradient(820px 520px at 108% 116%,rgba(19,49,95,.30),transparent 55%),linear-gradient(180deg,#15171c,#101218);color:#ece6df
}
body.dark-mode .start-card,body.dark-mode .trans-card,body.dark-mode .complete-card,body.dark-mode #stage-results .cert{background:#201b17;border-color:rgba(255,255,255,.08)}
/* ── PRINT ───────────────────────────────────────────────────────────────
ONE @page rule for the whole document. There used to be two — `10mm` all
round, left over from the old "print the on-screen certificate" path, and
`14mm 15mm 12mm` from the typeset report that replaced it — and which one
won depended on whether #print-report had been built into the DOM yet, so
the sheet changed size between one print and the next. The report is
typeset to a 180mm column inside 15mm side margins, so that is the rule
that survives; the other is gone, and printStylesheet() no longer sets one.
The app itself never prints. #print-report carries the sheet, and it is
rebuilt on `beforeprint`, so this is correct however the print is started. */
/* 14mm of page margin plus 1mm of padding inside .print-page = the 15mm side
margin the report is designed to, with 1mm of slack that absorbs the
sub-pixel rounding of an mm-based column (180mm = 680.31 CSS px, which
Chrome laid out as 681 and then clipped at the trim). Nothing sits on the
trim edge any more. */
@page{size:A4 portrait;margin:14mm 14mm 12mm}
@media print{
html,body{background:#fff !important;height:auto !important;overflow:visible !important}
*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
.stage,.warning-overlay,.toast,#audio-gate,#hl-popup,#cdi-webgl,
#notes-panel,#menu-dropdown,#notif-popup,#transcript-panel,#ch-resume{display:none !important}
#print-report{display:block !important;background:#fff !important}
}
/* ── RESPONSIVE ── */
@media(max-width:880px){
#pbar-tabs{display:none}
.listening-content{padding:0 16px 80px}
#listening-render{margin-right:0}
/* .tp-active is on the rule that reserves the gutter, so it has to be on the
rule that gives it back — otherwise the panel hides and leaves 420px of
dead space behind it. */
body.review-mode.tp-active #listening-area{padding-right:0}
#transcript-panel{display:none !important}
}
/* ── ADDED: tables, multi-select, legend ── */
.legend-box{border:1px solid var(--line-2);background:var(--bg-elev);border-radius:var(--radius);padding:12px 14px;margin:6px 0 16px;max-width:680px}
.legend-row{display:flex;gap:10px;padding:3px 0;font-size:14px}
.legend-key{font-weight:800;color:var(--primary);min-width:18px}
.ms-hint{font-size:12px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.5px;margin:2px 0 8px}
.ms-options .option{cursor:pointer}
.ms-box{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
/* a 'choose TWO' row is the measured .option row with a square marker — the flex/padding
override that used to live here put the marker on top of the text */
.ms-option .opt-letter{border-radius:2px}
/* ── CATALOGUE WIDGETS · measured on the official demo player (demo-ielts.inspera.com) 2026-09-02 ──
Table: 1px #000 grid, cells 4.8px 8px, 16px/24px. Flow-chart: Cambridge ships it as a picture
(boxes 1px #000, 13.6px/19px text, solid black arrows); this is that picture in CSS. Drop
zones: 124×27 in a matching row, 104×27 inside a flow box, 98×27 on a plan. Chips: 27px,
1px #919191, 14px text — already the engine's .drag-chip. "⌨ Help": 27px, rgb(27,77,107). */
.ielts-table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px;margin:16px 0;border:1px solid #000;color:#000}
.ielts-table th,.ielts-table td{border:1px solid #000;padding:4.8px 8px;text-align:left;vertical-align:top;background:#fff;color:#000}
.ielts-table th{font-weight:700}
.ielts-table .tbl-title{text-align:center;padding:12px 8px}
.ielts-table .gap-field .gap-input{vertical-align:middle}
.kb-help{display:flex;flex-direction:column;align-items:flex-end;margin:0 0 3px}
.kb-help summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:27px;padding:3px 12px;box-sizing:border-box;border-radius:2px;font-size:16px;line-height:21px;color:rgb(27,77,107);cursor:default;user-select:none}
.kb-help summary::-webkit-details-marker{display:none}
.kb-help summary svg{width:20px;height:14px;display:block}
.kb-help[open] summary{background:#eef3f7}
.kb-help .kb-help-text{font-size:14px;line-height:20px;color:#000;padding:6px 12px;max-width:520px}
.gm-layout{display:flex;align-items:flex-start;margin:0 0 16px}
.gm-layout>.drag-pool{margin:0 0 16px 32px;flex:0 0 auto}
.gm-prose{max-width:600px}
.note-flow .drag-drop,.gap-line .drag-drop,.ielts-table .drag-drop,.flow-box .drag-drop{vertical-align:middle;margin:1px 4px}
.drag-drop-inline{min-width:124px}
.flow-title{font-size:17.6px;line-height:21.12px;font-weight:700;color:#000;margin:0 0 12px}
.flow-chart{display:flex;flex-direction:column;align-items:stretch;width:432px;max-width:100%}
.flow-box{border:1px solid #000;background:#fff;color:#000;font-size:13.6px;line-height:19.04px;padding:6px 4px 8px;box-sizing:border-box}
.flow-box .drag-drop{min-width:104px;width:104px}
.flow-box .gap-field .gap-input{vertical-align:middle}
.flow-arrow{height:30px;display:flex;align-items:center;justify-content:center}
.flow-arrow svg{width:22px;height:28px;display:block}
.map-stage{position:relative;display:block;width:640px;max-width:100%;flex:0 0 auto}
.map-stage>svg,.map-stage>img{display:block;width:100%;height:auto}
.map-zone{position:absolute;display:flex;align-items:center;gap:6px;padding:1px;white-space:nowrap;line-height:24px}
.map-zone .drag-drop{min-width:98px;width:98px}
body.dark-mode .flow-box,body.dark-mode .ielts-table th,body.dark-mode .ielts-table td{background:transparent;color:var(--ex-ink-2);border-color:var(--ex-ink-2)}
body.dark-mode .ielts-table,body.dark-mode .flow-title{border-color:var(--ex-ink-2);color:var(--ex-ink-2)}
body.dark-mode .flow-arrow svg path{fill:var(--ex-ink-2)}
body.dark-mode .kb-help summary{color:#8fc1e8}
body.dark-mode .kb-help[open] summary{background:var(--ex-panel-2)}
body.dark-mode .kb-help .kb-help-text{color:var(--ex-ink-2)}
body.dark-mode .map-stage svg{color:var(--ex-ink-2)}
body.dark-mode .map-stage svg text{fill:var(--ex-ink-2)}
body.dark-mode .map-stage svg [stroke="#000"]{stroke:var(--ex-ink-2)}
body.dark-mode .map-stage svg [fill="#000"]:not(text){fill:var(--ex-ink-2)}
body.theme-sepia .flow-box,body.theme-sepia .ielts-table th,body.theme-sepia .ielts-table td{background:transparent;color:var(--sp-ink-2);border-color:var(--sp-ink-2)}
body.theme-sepia .ielts-table,body.theme-sepia .flow-title{border-color:var(--sp-ink-2);color:var(--sp-ink-2)}
body.theme-sepia .kb-help .kb-help-text{color:var(--sp-ink-2)}
/* matching rows and column headers were hard black in every theme (seen once the catalogue put a
matching block in Part 4): the label, the column header and the legend now follow the theme ink */
body.dark-mode .drag-item-label,body.dark-mode .drag-col-hdr,body.dark-mode .legend-row,body.dark-mode .flow-box .gap-field{color:var(--ex-ink-2)}
body.theme-sepia .drag-item-label,body.theme-sepia .drag-col-hdr,body.theme-sepia .legend-row{color:var(--sp-ink-2)}
/* ============================================================================
CDI V3 COSMIC SHELL — the CDI-branded wrapper that surrounds the live exam.
Owns #stage-registration, #stage-listening-intro, #stage-completion, the
integrity overlay, the toast and the resume sheet. Nothing in here may leak
into #stage-listening or #audio-gate: those stay pixel-identical to the real
Inspera player. #stage-results is excluded too — the certificate is a
document and is meant to read as paper.
========================================================================== */
:root{
--ch-ink:#f4f7ff;--ch-ink-2:#b0bdd4;--ch-ink-3:#7e8da3;--ch-ink-4:#5f6c82;
--ch-line:rgba(152,184,236,.13);--ch-line-2:rgba(152,184,236,.24);--ch-line-3:rgba(152,184,236,.34);
--ch-red:#e11d3c;--ch-red-2:#ff4a66;--ch-blue:#8fb8ff;--ch-blue-2:#5b8de0;--ch-gold:#e0bb72;
--ch-emerald:#63c8a0;
--ch-display:'Bricolage Grotesque',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
--ch-ui:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--ch-e:cubic-bezier(.16,.84,.24,1);
--ch-glass:linear-gradient(168deg,rgba(27,41,70,.70),rgba(11,18,33,.85) 58%,rgba(7,12,22,.90));
--ch-shadow:0 2px 8px rgba(0,0,0,.42),0 30px 70px -22px rgba(0,0,0,.72),0 90px 160px -60px rgba(18,48,108,.85);
}
/* ── stage shell ─────────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-listening-intro,#stage-completion){
font-family:var(--ch-ui);color:var(--ch-ink-2);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
background:
transparent;
--sans:var(--ch-ui);
--ink:var(--ch-ink);--ink-soft:var(--ch-ink-2);--ink-mute:var(--ch-ink-3);
--line:var(--ch-line);--line-2:var(--ch-line-2);--line-3:var(--ch-line-2);--paper:transparent;
--pw-ink:var(--ch-ink);--pw-ink-2:var(--ch-ink-2);--pw-ink-3:var(--ch-ink-3);
--pw-line:var(--ch-line);--pw-line-2:var(--ch-line-2);
--pw-red:var(--ch-blue);--pw-red-2:var(--ch-blue);--pw-emerald:var(--ch-emerald);
--primary:var(--ch-red);--primary-2:var(--ch-red-2);
--pw-shadow:var(--ch-shadow);
}
/* the paper-grain multiply overlay is wrong on a dark ground */
:is(#stage-registration,#stage-listening-intro,#stage-completion)::before{display:none}
/* vignette — replaces the old decorative ring */
:is(#stage-registration,#stage-listening-intro,#stage-completion)::after{
content:"";position:absolute;left:0;top:0;width:auto;height:auto;inset:0;z-index:0;pointer-events:none;
border:0;border-radius:0;transform:none;box-shadow:none;
background:radial-gradient(76% 60% at 50% 44%,transparent 38%,rgba(2,4,10,.30) 74%,rgba(1,2,6,.72) 100%)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) > *{position:relative;z-index:2}
/* ── the glass card ──────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card){
position:relative;z-index:2;overflow:hidden;
background:var(--ch-glass);
border:1px solid var(--ch-line-2);
border-radius:clamp(16px,1.6vw,24px);
box-shadow:var(--ch-shadow);
-webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
animation:none}
/* edge light along the top of the glass */
:is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card)::before{
content:"";display:block;position:absolute;left:0;right:0;top:0;height:1px;opacity:1;z-index:3;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 12%,rgba(255,255,255,.55) 34%,rgba(255,122,146,.75) 52%,rgba(224,187,114,.5) 70%,rgba(255,255,255,.12) 90%,transparent)}
/* soft interior bloom, top-left */
:is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card)::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(120% 76% at 8% -6%,rgba(143,184,255,.10),transparent 58%),
radial-gradient(90% 60% at 104% 108%,rgba(225,29,60,.07),transparent 62%)}
/* ── shared type ─────────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-title,.trans-title,.complete-title){
font-family:var(--ch-display);font-weight:600;letter-spacing:-.024em;color:var(--ch-ink);
font-optical-sizing:auto;text-wrap:balance}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-kicker{
display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--ch-ink-3)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-dot{
width:5px;height:5px;border-radius:50%;background:var(--ch-red-2);flex:0 0 auto;
box-shadow:0 0 0 3px rgba(225,29,60,.18),0 0 12px rgba(255,74,102,.7)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-label{
font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ch-ink-3)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-fineprint{
font-size:11.5px;color:var(--ch-ink-4);text-align:center;margin-top:17px;letter-spacing:.01em}
:is(#stage-registration,#stage-listening-intro,#stage-completion) kbd{
font-family:var(--ch-ui);font-size:10.5px;font-weight:700;color:var(--ch-ink-3);
border:1px solid var(--ch-line-2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin:0 1px}
/* ── buttons ─────────────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn{
font-family:var(--ch-ui);position:relative;overflow:hidden;isolation:isolate}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary{
background:linear-gradient(180deg,#e02744,#b3122a);border:none;border-radius:13px;
color:#fff;font-weight:700;letter-spacing:.006em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
0 1px 2px rgba(0,0,0,.4),0 14px 30px -20px rgba(225,29,60,.85);
transition:transform .18s var(--ch-e),box-shadow .22s var(--ch-e),filter .18s,background .22s}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary::after{
content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;
background:linear-gradient(180deg,rgba(255,255,255,.20),transparent 62%)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:hover{
transform:translateY(-2px);filter:none;background:linear-gradient(180deg,#f03150,#c4152f);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.24),
0 2px 4px rgba(0,0,0,.38),0 20px 38px -20px rgba(225,29,60,.95)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:hover::after{opacity:1}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:active{
transform:translateY(0) scale(.994);filter:brightness(.93);
box-shadow:inset 0 2px 5px rgba(0,0,0,.34),0 1px 2px rgba(0,0,0,.3)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:focus-visible{
outline:2px solid rgba(180,208,255,.9);outline-offset:3px}
/* Dormant = "not yet", never "danger". Neutral glass that ignites into the
full red the instant the name is valid — the button itself is the reward. */
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:disabled,
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-dormant{
background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
color:var(--ch-ink-3);
box-shadow:inset 0 0 0 1px rgba(152,184,236,.20),inset 0 1px 0 rgba(255,255,255,.09);
transform:none}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-dormant:hover{
color:var(--ch-ink-2);background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.045));
box-shadow:inset 0 0 0 1px rgba(152,184,236,.32),inset 0 1px 0 rgba(255,255,255,.12);transform:none}
/* the ignition itself */
@keyframes chIgnite{
0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
0 1px 2px rgba(0,0,0,.4),0 0 0 0 rgba(255,74,102,.55),0 14px 30px -20px rgba(225,29,60,.85)}
100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
0 1px 2px rgba(0,0,0,.4),0 0 0 12px rgba(255,74,102,0),0 14px 30px -20px rgba(225,29,60,.85)}}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-live{
animation:chIgnite .72s var(--ch-e) 1}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:disabled{cursor:not-allowed}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-lg{
width:100%;padding:15px 26px;font-size:14.5px;gap:10px}
.ch-arrow{width:15px;height:15px;flex:0 0 auto;transition:transform .24s var(--ch-e)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn:hover .ch-arrow{transform:translateX(4px)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn.is-dormant .ch-arrow{opacity:.55}
/* ── telegram strip ──────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-completion) .channel-promo{
display:flex;align-items:center;gap:14px;margin:0;border-radius:0;
padding:14px clamp(20px,3.2vw,38px);
background:linear-gradient(90deg,rgba(34,158,217,.16),rgba(34,158,217,.07) 55%,rgba(34,158,217,.13));
border:0;border-top:1px solid var(--ch-line);box-shadow:none;color:var(--ch-ink);
transition:background .25s var(--ch-e)}
:is(#stage-registration,#stage-completion) .channel-promo:hover{
filter:none;background:linear-gradient(90deg,rgba(34,158,217,.28),rgba(34,158,217,.13) 55%,rgba(34,158,217,.22))}
:is(#stage-registration,#stage-completion) .channel-promo .tg-icon{
width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#39b3e8,#1d80c2);
color:#fff;font-size:14px;box-shadow:0 4px 12px -4px rgba(34,158,217,.9)}
:is(#stage-registration,#stage-completion) .channel-promo .channel-name{
font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--ch-ink)}
:is(#stage-registration,#stage-completion) .channel-promo .channel-desc{
font-size:11.5px;font-weight:400;color:var(--ch-ink-3);margin-top:1px}
:is(#stage-registration,#stage-completion) .channel-promo .channel-cta{
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);
border:1px solid var(--ch-line-2);color:var(--ch-ink-2);transition:.2s}
:is(#stage-registration,#stage-completion) .channel-promo:hover .channel-cta{
background:rgba(255,255,255,.13);color:var(--ch-ink);border-color:var(--ch-line-3)}
/* ══════════════════ REGISTRATION ══════════════════ */
#stage-registration{padding:clamp(14px,3.4vh,36px) clamp(12px,3.2vw,40px);align-items:center;justify-content:center;overflow-y:auto}
#stage-registration .start-card{width:100%;max-width:940px;padding:0;margin:auto}
.ch-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);position:relative;z-index:1}
.ch-ident{padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,32px) clamp(24px,2.6vw,32px) clamp(22px,3.2vw,38px);
border-right:1px solid var(--ch-line);display:flex;flex-direction:column;
background:linear-gradient(180deg,rgba(143,184,255,.045),rgba(143,184,255,0) 55%)}
.ch-action{padding:clamp(24px,2.6vw,34px) clamp(22px,3.2vw,38px) clamp(24px,2.6vw,32px) clamp(20px,2.4vw,32px);
display:flex;flex-direction:column}
#stage-registration .brand-block{display:flex;align-items:center;gap:12px;margin:0 0 clamp(20px,2.6vw,30px);
padding:0;border:0;background:none}
#stage-registration .brand-logo{width:44px;height:44px;border-radius:12px;
box-shadow:0 6px 18px -6px rgba(9,38,92,.9),0 0 0 1px rgba(255,255,255,.09)}
#stage-registration .brand-eyebrow{font-family:var(--ch-ui);font-weight:700;font-size:13.5px;letter-spacing:-.005em;color:var(--ch-ink)}
#stage-registration .brand-tagline{font-size:11px;font-weight:400;color:var(--ch-ink-3);margin-top:2px;letter-spacing:.005em}
#stage-registration .start-title{font-size:clamp(27px,2.5vw,34px);line-height:1.06;padding:0;
margin:10px 0 0!important;max-width:12ch}
#stage-registration .ch-lede{font-size:13px;line-height:1.62;color:var(--ch-ink-3);margin:12px 0 0;max-width:32ch}
#stage-registration .start-meta{display:flex;align-items:stretch;justify-content:space-between;
margin:clamp(18px,2.4vw,28px) 0 0;padding:18px 0 0;border:0;border-top:1px solid var(--ch-line);border-radius:0;
background:none;box-shadow:none;gap:8px}
.ch-credit{margin:auto 0 0;padding-top:22px;font-size:11px;line-height:1.5;color:var(--ch-ink-4);letter-spacing:.01em}
.ch-credit strong{color:var(--ch-ink-2);font-weight:600}
.ch-credit span{display:block;margin-top:3px}
/* THE OPENING STRIKE.
The first beat of the boot cannot depend on WebGL: the particle field needs a
context, a compile and a first frame, and on a cold or software GPU that can
be most of the prelude. So beat one is plain CSS: a hairline of light struck
across the centre of the screen at ~80ms, every time. When the particle field
arrives it takes over the identical shape in the identical place and this
cross-fades out under it; when it never arrives, this *is* the prelude and
the card simply rises through it. */
#ch-strike{position:absolute;left:0;right:0;top:50%;height:0;z-index:1;pointer-events:none;
display:flex;align-items:center;justify-content:center;opacity:0}
/* Width is derived, not guessed. The WebGL filament is 12.7 world units long,
seen by a 50° camera at z=19.5 — which works out to exactly 0.699 × the
viewport HEIGHT on screen, at any aspect ratio. Matching that here means the
CSS stroke and the particle stroke are the same object, and the hand-off
between them is invisible on a phone as well as on a 5K display. */
#ch-strike i{display:block;width:min(69.9vh,96vw);height:3px;border-radius:3px;
transform:scaleX(0);transform-origin:50% 50%;
background:linear-gradient(90deg,transparent,rgba(143,184,255,.10) 6%,rgba(186,214,255,.72) 26%,
rgba(255,255,255,1) 50%,rgba(186,214,255,.72) 74%,rgba(143,184,255,.10) 94%,transparent);
box-shadow:0 0 10px rgba(214,232,255,.85),0 0 34px rgba(140,182,255,.6),0 0 90px rgba(80,124,220,.42)}
body.cdi-booting #ch-strike{animation:chStrikeIn .30s .06s cubic-bezier(.14,.86,.28,1) both}
body.cdi-booting #ch-strike i{animation:chStrikeDraw .34s .06s cubic-bezier(.10,.90,.22,1) both}
body.cdi-atmo #ch-strike,body.cdi-reveal #ch-strike{animation:none;opacity:0;transition:opacity .26s ease}
@keyframes chStrikeIn{from{opacity:0}30%{opacity:1}to{opacity:1}}
@keyframes chStrikeDraw{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
/* The boot's climax: the imploding core detonates and the light washes ACROSS
the card that is materialising out of it — screen-blended, above everything,
inert to the pointer. This is the single frame the whole prelude aims at. */
#ch-bloom{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6;
mix-blend-mode:screen;will-change:opacity,transform;
background:
radial-gradient(20% 17% at 50% 50%,rgba(255,255,255,.92),rgba(214,232,255,.55) 42%,transparent 72%),
radial-gradient(46% 40% at 50% 50%,rgba(150,190,255,.34),rgba(90,130,225,.10) 46%,transparent 74%),
radial-gradient(78% 5% at 50% 50%,rgba(198,222,255,.42),transparent 76%)}
#ch-bloom.on{animation:chBloom 1.15s cubic-bezier(.08,.75,.25,1) both}
@keyframes chBloom{
0%{opacity:0;transform:scale(.42)}
9%{opacity:1;transform:scale(.92)}
26%{opacity:.62;transform:scale(1.28)}
100%{opacity:0;transform:scale(2.4)}}
#stage-registration .start-meta-item{flex:1;text-align:left}
#stage-registration .start-meta-item .n{font-family:var(--ch-display);font-weight:600;font-size:clamp(21px,1.9vw,25px);
line-height:1;letter-spacing:-.03em;color:var(--ch-ink);white-space:nowrap}
#stage-registration .start-meta-item .n span{color:var(--ch-ink-4);font-weight:400;margin:0 1px}
#stage-registration .start-meta-item .l{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ch-ink-4);margin-top:7px}
#stage-registration .start-meta-divider{width:1px;height:auto;align-self:stretch;background:var(--ch-line);flex:0 0 1px}
#stage-registration .start-rules{list-style:none;margin:14px 0 0;padding:0}
#stage-registration .start-rules li{position:relative;font-size:12.5px;line-height:1.5;color:var(--ch-ink-2);
padding:0 0 0 24px;margin:0 0 11px}
#stage-registration .start-rules li:last-child{margin-bottom:0}
#stage-registration .start-rules li strong{color:var(--ch-ink);font-weight:700}
#stage-registration .start-rules li::before{content:"";position:absolute;left:2px;top:6px;width:6px;height:6px;
border:0;border-radius:50%;background:rgba(143,184,255,.55);
box-shadow:0 0 0 3px rgba(143,184,255,.10),0 0 10px rgba(143,184,255,.45)}
#stage-registration .start-rules li.is-strict::before{background:rgba(255,74,102,.8);
box-shadow:0 0 0 3px rgba(225,29,60,.13),0 0 10px rgba(255,74,102,.55)}
.ch-field{margin:auto 0 0;padding-top:20px}
#stage-registration .input-label{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;
text-transform:uppercase;color:var(--ch-ink-3);margin:0 0 9px;transition:color .2s}
.ch-field:focus-within .input-label{color:var(--ch-blue)}
.ch-input-wrap{position:relative;border-radius:13px}
.ch-input-wrap::after{content:"";position:absolute;inset:-1px;border-radius:14px;pointer-events:none;
padding:1px;opacity:0;transition:opacity .28s var(--ch-e);
background:linear-gradient(115deg,rgba(160,196,255,1),rgba(128,160,230,.42) 52%,rgba(255,110,140,.42));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.ch-input-wrap:focus-within::after{opacity:1}
#stage-registration .input-field{width:100%;padding:14px 16px;border-radius:13px;
font-family:var(--ch-ui);font-size:14.5px;font-weight:500;letter-spacing:.005em;color:var(--ch-ink);
background:rgba(255,255,255,.045);border:1px solid var(--ch-line-2);outline:none;
transition:background .22s var(--ch-e),border-color .22s var(--ch-e),box-shadow .28s var(--ch-e)}
#stage-registration .input-field::placeholder{color:var(--ch-ink-4);font-weight:400}
#stage-registration .input-field:hover{background:rgba(255,255,255,.065);border-color:var(--ch-line-3)}
#stage-registration .input-field:focus{background:rgba(143,184,255,.075);border-color:transparent;
box-shadow:0 0 0 5px rgba(143,184,255,.10),0 10px 30px -16px rgba(143,184,255,.7)}
.ch-hint{font-size:11.5px;line-height:1.45;color:var(--ch-ink-4);margin:9px 2px 0;
display:flex;align-items:flex-start;gap:6px;min-height:17px;transition:color .2s}
.ch-hint svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px;opacity:0;transition:opacity .2s}
/* ID-scoped and stated twice on purpose: validateStart re-focuses the field,
and the :focus rule above is ID-weighted, so a plain class selector here
would lose and the error would render as a normal focused field. */
#stage-registration .ch-field.is-invalid .input-field,
#stage-registration .ch-field.is-invalid .input-field:focus,
#stage-registration .ch-field.is-invalid .input-field:hover{
background:rgba(255,74,102,.09);border-color:rgba(255,90,116,.75);
box-shadow:0 0 0 4px rgba(225,29,60,.13),0 10px 26px -18px rgba(255,74,102,.9)}
.ch-field.is-invalid .ch-input-wrap::after{opacity:0}
.ch-field.is-invalid .ch-hint{color:var(--ch-red-2)}
.ch-field.is-invalid .ch-hint svg{opacity:1}
.ch-field.is-invalid .ch-input-wrap{animation:chShake .44s cubic-bezier(.36,.07,.19,.97)}
@keyframes chShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}
30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}100%{transform:none}}
#stage-registration #start-btn{margin:18px 0 0;width:100%}
/* ══════════════════ INSTRUCTIONS ══════════════════ */
#stage-listening-intro{padding:clamp(14px,3.4vh,36px) clamp(12px,3.2vw,40px);align-items:center;justify-content:center;overflow-y:auto}
#stage-listening-intro .trans-card{width:100%;max-width:880px;margin:auto;text-align:left;
padding:clamp(24px,2.8vw,34px) clamp(22px,3.4vw,44px) clamp(20px,2.4vw,28px)}
#stage-listening-intro .trans-icon{display:none}
#stage-listening-intro .ch-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(15px,2vw,20px)}
.ch-mark{width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
background:linear-gradient(158deg,rgba(143,184,255,.20),rgba(143,184,255,.04));
border:1px solid var(--ch-line-2);color:var(--ch-blue);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -12px rgba(91,141,224,.8)}
.ch-mark svg{width:22px;height:22px}
#stage-listening-intro .trans-eyebrow{font-family:var(--ch-ui);font-weight:700;font-size:10.5px;
letter-spacing:.22em;text-transform:uppercase;color:var(--ch-ink-3);margin:0}
#stage-listening-intro .trans-title{font-size:clamp(28px,3.4vw,40px);line-height:1.04;margin:4px 0 0}
#stage-listening-intro .trans-sub{font-size:14.5px;line-height:1.62;color:var(--ch-ink-2);
margin:0 0 clamp(14px,1.8vw,18px);max-width:64ch;text-align:left}
#stage-listening-intro .ch-greet{color:var(--ch-ink);font-weight:600;letter-spacing:-.002em}
/* THE ONE RULE THAT IS NOT LIKE THE OTHERS.
In Reading and Writing every rule is a rule of conduct. Here one of them is a
property of the medium: the tape runs once and does not come back. A student
who learns that from a bullet learns it too late, so it is given the weight of
a warning — the same red-edged plate the integrity overlay uses — and it sits
above the parts, before anything else can be read. */
.ch-once{display:flex;gap:13px;align-items:flex-start;padding:12px 15px;border-radius:14px;
background:linear-gradient(180deg,rgba(225,29,60,.09),rgba(225,29,60,.045));
border:1px solid rgba(225,29,60,.22);border-left:3px solid var(--ch-red);
margin:0 0 clamp(13px,1.7vw,16px)}
.ch-once .ch-once-ic{width:26px;height:26px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
background:rgba(225,29,60,.16);border:1px solid rgba(225,29,60,.30);color:#ff8095}
.ch-once .ch-once-ic svg{width:14px;height:14px}
.ch-once b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#ffd0d8;margin-bottom:3px}
.ch-once p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ch-ink-2)}
.ch-tasks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}
.ch-task{position:relative;padding:13px 15px 11px;border-radius:14px;border:1px solid var(--ch-line);
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.ch-task-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.ch-task-n{font-family:var(--ch-display);font-weight:600;font-size:16px;letter-spacing:-.02em;color:var(--ch-ink)}
.ch-task-t{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ch-blue);
padding:3px 8px;border-radius:999px;background:rgba(143,184,255,.10);border:1px solid rgba(143,184,255,.20)}
.ch-task p{font-size:12.5px;line-height:1.5;color:var(--ch-ink-2);margin:0 0 9px}
.ch-task-f{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ch-ink-4);
padding-top:8px;border-top:1px dashed var(--ch-line-2)}
.trans-notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--ch-line);padding-top:13px}
.trans-notes li{position:relative;font-size:12.5px;line-height:1.55;color:var(--ch-ink-2);
padding-left:22px;margin-bottom:7px}
.trans-notes li:last-child{margin-bottom:0}
.trans-notes li::before{content:"";position:absolute;left:3px;top:7px;width:5px;height:5px;border-radius:50%;
background:rgba(143,184,255,.5);box-shadow:0 0 8px rgba(143,184,255,.5)}
#stage-listening-intro .btn-lg{margin-top:clamp(15px,2vw,20px)}
/* ══════════════════ COMPLETION ══════════════════ */
#stage-completion{padding:clamp(14px,3.4vh,36px) clamp(12px,3.2vw,40px);align-items:center;justify-content:center;overflow-y:auto}
#stage-completion .complete-card{width:100%;max-width:680px;margin:auto;padding:0;text-align:left}
.ch-comp-body{padding:clamp(26px,3.4vw,42px) clamp(22px,3.4vw,44px) clamp(22px,2.8vw,32px);position:relative;z-index:1}
#stage-completion .complete-icon{display:none}
.ch-comp-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(20px,2.6vw,28px)}
.ch-seal{position:relative;width:64px;height:64px;flex:0 0 auto}
.ch-seal svg{width:64px;height:64px;transform:rotate(-90deg)}
.ch-seal .ch-seal-track{fill:none;stroke:rgba(152,184,236,.16);stroke-width:3}
.ch-seal .ch-seal-arc{fill:none;stroke:url(#chSealGrad);stroke-width:3;stroke-linecap:round;
stroke-dasharray:176;stroke-dashoffset:176;filter:drop-shadow(0 0 6px rgba(143,184,255,.6));transition:stroke .5s var(--ch-e)}
#stage-completion.is-sealed .ch-seal-arc{stroke:url(#chSealDone);filter:drop-shadow(0 0 7px rgba(99,200,160,.6))}
.ch-seal-core{position:absolute;inset:9px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(158deg,rgba(143,184,255,.18),rgba(143,184,255,.03));
border:1px solid var(--ch-line);color:var(--ch-blue);transition:all .5s var(--ch-e)}
.ch-seal-core svg{width:20px;height:20px;opacity:0;transform:scale(.5);
transition:opacity .45s var(--ch-e),transform .55s cubic-bezier(.2,1.5,.4,1)}
.ch-seal-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--ch-display);font-size:14px;font-weight:600;color:var(--ch-ink-2);letter-spacing:-.02em;
transition:opacity .3s}
#stage-completion.is-sealed .ch-seal-core{background:linear-gradient(158deg,rgba(79,211,152,.24),rgba(79,211,152,.06));
border-color:rgba(79,211,152,.4);color:var(--ch-emerald);
box-shadow:0 0 0 1px rgba(79,211,152,.18),0 0 28px -6px rgba(79,211,152,.6)}
#stage-completion.is-sealed .ch-seal-core svg{opacity:1;transform:scale(1)}
#stage-completion.is-sealed .ch-seal-pct{opacity:0}
#stage-completion .trans-eyebrow{font-family:var(--ch-ui);font-weight:700;font-size:10.5px;
letter-spacing:.22em;text-transform:uppercase;color:var(--ch-ink-3);margin:0}
#stage-completion .complete-title{font-size:clamp(27px,3.2vw,36px);line-height:1.05;margin:5px 0 0}
#stage-completion .complete-sub{font-size:13.5px;line-height:1.5;color:var(--ch-ink-3);margin:8px 0 0;
transition:color .3s}
#stage-completion.is-sealed .complete-sub{color:#8ed3b3}
.ch-steps{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--ch-line)}
.ch-steps li{display:flex;align-items:center;gap:11px;font-size:12.5px;line-height:1.5;
color:var(--ch-ink-4);margin-bottom:11px;transition:color .5s var(--ch-e)}
.ch-steps li:last-child{margin-bottom:0}
.ch-steps li.on{color:var(--ch-ink-2)}
.ch-step-dot{width:16px;height:16px;border-radius:50%;flex:0 0 auto;position:relative;
border:1px solid var(--ch-line-2);transition:all .5s var(--ch-e)}
.ch-step-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ch-blue);
opacity:0;transform:scale(.3);transition:opacity .4s var(--ch-e),transform .5s cubic-bezier(.2,1.5,.4,1)}
.ch-step-dot::before{content:"";position:absolute;left:5px;top:2.8px;width:3.6px;height:7px;
border:solid var(--ch-emerald);border-width:0 1.7px 1.7px 0;border-radius:.5px;
opacity:0;transform:rotate(42deg) scale(.4);transform-origin:50% 50%;
transition:opacity .3s var(--ch-e),transform .45s cubic-bezier(.2,1.6,.4,1)}
#stage-completion.is-sealed .ch-steps li{color:var(--ch-ink-2)}
#stage-completion.is-sealed .ch-step-dot{border-color:rgba(99,200,160,.5);
box-shadow:0 0 13px -3px rgba(99,200,160,.85)}
#stage-completion.is-sealed .ch-step-dot::after{opacity:0;transform:scale(.3)}
#stage-completion.is-sealed .ch-step-dot::before{opacity:1;transform:rotate(42deg) scale(1)}
#stage-completion.is-sealed .ch-steps li:nth-child(1) .ch-step-dot::before{transition-delay:.04s}
#stage-completion.is-sealed .ch-steps li:nth-child(2) .ch-step-dot::before{transition-delay:.13s}
#stage-completion.is-sealed .ch-steps li:nth-child(3) .ch-step-dot::before{transition-delay:.22s}
.ch-steps li.on .ch-step-dot{border-color:rgba(143,184,255,.55);box-shadow:0 0 12px -2px rgba(143,184,255,.7)}
.ch-steps li.on .ch-step-dot::after{opacity:1;transform:scale(1)}
.ch-note{margin-top:20px;padding:18px 20px;border-radius:14px;border:1px solid var(--ch-line);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016))}
#stage-completion .ch-note p{font-size:13px;line-height:1.68;color:var(--ch-ink-2);margin:0}
#stage-completion .ch-sign{margin-top:13px!important;padding-top:12px;border-top:1px solid var(--ch-line);
font-size:11.5px;color:var(--ch-ink-4);letter-spacing:.01em}
#stage-completion .ch-sign strong{color:var(--ch-ink-2);font-weight:700}
/* The button's slot is reserved from the first frame — the card must not jump
when the seal finishes — and the space is *used* while it waits, rather than
sitting there as a hole under the copy. */
.ch-cta-slot{position:relative;margin-top:20px;min-height:50px;display:flex;align-items:center}
.ch-wait{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
text-align:center;font-size:12.5px;line-height:1.5;color:var(--ch-ink-4);letter-spacing:.005em;
transition:opacity .35s var(--ch-e)}
#stage-completion.is-sealed .ch-wait{opacity:0;pointer-events:none}
.ch-cta{width:100%;opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .6s .12s var(--ch-e),transform .7s .12s var(--ch-e)}
#stage-completion.is-sealed .ch-cta{opacity:1;transform:none;pointer-events:auto}
/* the step currently being worked breathes */
@keyframes chPulse{0%,100%{box-shadow:0 0 0 0 rgba(143,184,255,.30)}
60%{box-shadow:0 0 0 5px rgba(143,184,255,0)}}
.ch-steps li.now{color:var(--ch-ink-3)}
.ch-steps li.now .ch-step-dot{border-color:rgba(143,184,255,.38);animation:chPulse 1.5s ease-out infinite}
#stage-completion.is-sealed .ch-steps li.now .ch-step-dot{animation:none}
/* ============================================================
WARNING OVERLAY (anti-cheat) + TOAST + RESUME SHEET
All three are CDI chrome, not exam chrome. Selectors are
id-scoped so nothing in the exam sheet can flip them back to a
half-styled state.
============================================================ */
.warning-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.warning-overlay.show{display:flex}
#warning-overlay{--crimson:#ff5e78;background:radial-gradient(900px 600px at 50% 36%,rgba(24,8,14,.72),rgba(4,6,12,.90));
-webkit-backdrop-filter:blur(9px) saturate(.85);backdrop-filter:blur(9px) saturate(.85);
animation:wFade .18s ease both;overflow-y:auto;font-family:var(--ch-ui)}
@keyframes wFade{from{opacity:0}to{opacity:1}}
#warning-overlay .warning-card{width:100%;max-width:540px;margin:auto;padding:0;overflow:hidden;text-align:left;border-radius:20px;
background:linear-gradient(180deg,rgba(30,22,28,.97),rgba(12,10,16,.98));
border:1px solid rgba(255,255,255,.11);border-top:1px solid rgba(255,255,255,.11);
box-shadow:0 2px 6px rgba(0,0,0,.45),0 30px 70px -20px rgba(0,0,0,.8),0 80px 140px -60px rgba(160,20,40,.55);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
animation:wIn .4s cubic-bezier(.2,.75,.2,1) both}
@keyframes wIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
#warning-overlay .warning-card::before{content:"";display:block;height:3px;
background:linear-gradient(90deg,#8f1023,#e11d3c 45%,#ff6b7f)}
#warning-overlay .wc-body{padding:28px 32px 24px}
#warning-overlay .wc-top{display:flex;align-items:flex-start;gap:15px;margin-bottom:18px}
#warning-overlay .warning-card .ic{width:48px;height:48px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;
font-size:0;margin:0;background:linear-gradient(160deg,rgba(225,29,60,.24),rgba(225,29,60,.06));
border:1px solid rgba(225,29,60,.36);color:#ff8095;box-shadow:0 8px 20px -10px rgba(225,29,60,.85)}
#warning-overlay .warning-card .ic svg{width:23px;height:23px}
#warning-overlay .wc-heads{min-width:0;padding-top:1px}
#warning-overlay .wc-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#ff8095}
#warning-overlay .warning-card h2{font-family:var(--ch-display);font-size:23px;font-weight:700;letter-spacing:-.02em;
line-height:1.14;color:#fff;margin:6px 0 0}
#warning-overlay .warning-card p{margin:0;color:#c3cad8;font-size:13.5px;line-height:1.62}
#warning-overlay .wc-reason{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:13px;
background:rgba(225,29,60,.07);border:1px solid rgba(225,29,60,.20);border-left:3px solid #e11d3c;margin-bottom:20px}
#warning-overlay .wc-reason svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:#ff8095}
#warning-overlay .wc-reason p{color:#e4e9f2;font-size:13.5px}
#warning-overlay .wc-meter{margin-bottom:18px}
#warning-overlay .wc-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
#warning-overlay .wc-meter-head span{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8f9bb0}
#warning-overlay .warning-card .strike-counter{display:flex;gap:7px;margin:0}
#warning-overlay .warning-card .strike-counter .strike{flex:1;height:7px;width:auto;border-radius:99px;
background:rgba(255,255,255,.09);border:none;transition:background .35s,box-shadow .35s}
#warning-overlay .warning-card .strike-counter .strike.on{background:linear-gradient(90deg,#e11d3c,#ff5e78);
border:none;box-shadow:0 0 14px rgba(225,29,60,.7)}
#warning-overlay #warning-strikes-text{font-size:12px;line-height:1.55;color:#8f9bb0!important;margin-top:10px}
#warning-overlay #warning-strikes-text strong{color:#e4e9f2;font-weight:700}
#warning-overlay .wc-foot{display:flex;align-items:center;gap:14px;padding:15px 32px;
background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.08)}
#warning-overlay .wc-note{font-size:11.5px;color:#7c889c;line-height:1.5;min-width:0}
#warning-overlay .wc-btn{margin-left:auto;flex:0 0 auto;padding:12px 20px;border:none;border-radius:11px;cursor:pointer;
font-family:var(--ch-ui);font-size:13px;font-weight:700;color:#fff;
background:linear-gradient(180deg,#f4425f,#d4102f);box-shadow:0 10px 24px -12px rgba(225,29,60,.9),inset 0 1px 0 rgba(255,255,255,.22);
transition:.16s}
#warning-overlay .wc-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
#warning-overlay .wc-btn:active{transform:translateY(0)}
@media (max-width:560px){
#warning-overlay .wc-body{padding:24px 20px 20px}
#warning-overlay .wc-foot{flex-direction:column;align-items:stretch;gap:11px;padding:14px 20px}
#warning-overlay .wc-btn{margin-left:0;width:100%}
#warning-overlay .warning-card h2{font-size:20px}
}
/* ── toast ──────────────────────────────────────────────────── */
.toast{position:fixed;top:80px;left:50%;z-index:110;display:flex;align-items:center;gap:10px;
padding:11px 17px 11px 12px;max-width:min(520px,calc(100vw - 32px));
background:linear-gradient(180deg,rgba(30,38,56,.97),rgba(12,17,29,.98));
border:1px solid rgba(255,255,255,.12);border-radius:13px;
color:#eef3fb;font-family:var(--ch-ui);font-size:13px;font-weight:600;line-height:1.4;
box-shadow:0 2px 6px rgba(0,0,0,.32),0 18px 40px -16px rgba(0,0,0,.7);
-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
opacity:0;transform:translateX(-50%) translateY(-14px) scale(.97);pointer-events:none;
transition:opacity .26s cubic-bezier(.2,.8,.2,1),transform .34s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast .t-ic{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
background:rgba(255,255,255,.10);color:#cdd8ea}
.toast .t-ic svg{width:12px;height:12px}
.toast.error{border-color:rgba(225,29,60,.42);box-shadow:0 2px 6px rgba(0,0,0,.32),0 18px 40px -16px rgba(0,0,0,.7),0 0 0 1px rgba(225,29,60,.14)}
.toast.error .t-ic{background:rgba(225,29,60,.20);color:#ff8095}
.toast.success .t-ic{background:rgba(31,122,67,.26);color:#6fd898}
.toast.success{border-color:rgba(31,122,67,.40)}
.toast.warn .t-ic{background:rgba(193,154,75,.24);color:#e8c88b}
.toast.warn{border-color:rgba(193,154,75,.42)}
/* ── resume sheet ────────────────────────────────────────────
A native confirm() is the one piece of chrome the candidate cannot be
protected from, and it arrives before the shell has drawn a single frame.
This replaces it with the same glass the rest of the entrance is made of —
and, unlike the confirm(), it states plainly what "start fresh" destroys. */
#ch-resume{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;
background:radial-gradient(900px 600px at 50% 36%,rgba(10,18,34,.72),rgba(3,5,11,.92));
-webkit-backdrop-filter:blur(9px) saturate(.9);backdrop-filter:blur(9px) saturate(.9);
animation:wFade .18s ease both;font-family:var(--ch-ui)}
#ch-resume.show{display:flex}
#ch-resume .ch-sheet{width:100%;max-width:480px;margin:auto;overflow:hidden;border-radius:20px;
background:var(--ch-glass);border:1px solid var(--ch-line-2);box-shadow:var(--ch-shadow);
-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
animation:wIn .4s cubic-bezier(.2,.75,.2,1) both}
#ch-resume .ch-sheet::before{content:"";display:block;height:3px;
background:linear-gradient(90deg,transparent,rgba(143,184,255,.75) 40%,rgba(224,187,114,.6) 78%,transparent)}
#ch-resume .ch-sheet-body{padding:28px 30px 22px}
#ch-resume .ch-sheet-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ch-ink-3)}
#ch-resume h2{font-family:var(--ch-display);font-size:23px;font-weight:600;letter-spacing:-.02em;
line-height:1.14;color:var(--ch-ink);margin:7px 0 0}
#ch-resume p{margin:10px 0 0;color:var(--ch-ink-2);font-size:13.5px;line-height:1.62}
#ch-resume .ch-sheet-foot{display:flex;align-items:center;gap:10px;padding:15px 30px;
background:rgba(255,255,255,.035);border-top:1px solid var(--ch-line)}
#ch-resume .ch-sheet-foot .btn{flex:1;padding:12px 18px;font-size:13px;border-radius:11px;font-family:var(--ch-ui);font-weight:700}
#ch-resume .ch-ghost{background:rgba(255,255,255,.05);color:var(--ch-ink-2);border:1px solid var(--ch-line-2);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;transition:.16s}
#ch-resume .ch-ghost:hover{background:rgba(255,255,255,.09);color:var(--ch-ink);border-color:var(--ch-line-3)}
#ch-resume .ch-go{border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:linear-gradient(180deg,#e02744,#b3122a);
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 28px -18px rgba(225,29,60,.9);transition:.16s}
#ch-resume .ch-go:hover{filter:brightness(1.07);transform:translateY(-1px)}
#ch-resume .btn:focus-visible{outline:2px solid rgba(180,208,255,.9);outline-offset:3px}
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
.ch-grid{grid-template-columns:1fr}
#stage-registration .start-card{max-width:540px}
.ch-ident{border-right:0;border-bottom:1px solid var(--ch-line);padding-bottom:24px}
#stage-registration .start-title{max-width:none}
#stage-registration .ch-lede{max-width:none}
.ch-field{margin-top:20px}
.ch-tasks{grid-template-columns:1fr}
}
/* Phones. The single thing that matters here is that the *action* — the name
field and the button, or Start listening — is not pushed below the fold by
the editorial half of the card. Everything above it gets compressed hard. */
@media (max-width:600px){
#stage-registration{padding:10px}
#stage-registration .start-meta{flex-wrap:nowrap;gap:6px;margin-top:16px;padding-top:14px}
#stage-registration .start-meta-item .n{font-size:20px}
#stage-registration .start-meta-item .l{font-size:8.5px;letter-spacing:.1em;margin-top:5px}
#stage-registration .start-title{font-size:clamp(21px,6.6vw,26px);margin-top:8px!important}
#stage-registration .ch-lede{font-size:12.5px;margin-top:9px}
#stage-registration .brand-block{margin-bottom:16px}
#stage-registration .brand-logo{width:38px;height:38px;border-radius:10px}
.ch-ident,.ch-action{padding:18px 18px}
.ch-ident{padding-bottom:18px}
.ch-credit{padding-top:14px;font-size:10.5px}
#stage-registration .start-rules li{font-size:12px;margin-bottom:8px;padding-left:21px}
.ch-field{padding-top:16px}
#stage-registration .input-field{padding:12px 14px;font-size:16px} /* 16px = no iOS zoom */
#stage-registration #start-btn{margin-top:14px}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-lg{padding:13px 22px}
#stage-listening-intro{padding:10px}
#stage-listening-intro .trans-card{padding:20px 18px 20px}
#stage-listening-intro .ch-head{gap:11px;margin-bottom:14px}
.ch-mark{width:38px;height:38px;border-radius:11px}
.ch-mark svg{width:19px;height:19px}
#stage-listening-intro .trans-title{font-size:clamp(23px,7vw,28px)}
#stage-listening-intro .trans-sub{font-size:13px;margin-bottom:14px}
.ch-once{padding:12px 13px;gap:10px;margin-bottom:14px}
.ch-once p,.ch-once b{font-size:12px}
.ch-tasks{gap:9px;margin-bottom:14px}
.ch-task{padding:12px 13px 11px;border-radius:12px}
.ch-task p{font-size:12px;margin-bottom:8px}
.ch-task-f{padding-top:8px;font-size:10.5px}
.trans-notes{padding-top:13px}
.trans-notes li{font-size:12px;margin-bottom:8px}
#stage-completion{padding:10px}
.ch-comp-body{padding:20px 18px 18px}
.ch-comp-head{gap:14px;margin-bottom:16px}
.ch-seal,.ch-seal svg{width:52px;height:52px}
.ch-seal-core{inset:7px}
#stage-completion .complete-title{font-size:clamp(23px,7vw,28px)}
.ch-note{margin-top:16px;padding:14px 15px}
#stage-completion .ch-note p{font-size:12.5px}
:is(#stage-registration,#stage-completion) .channel-promo{padding:11px 16px}
:is(#stage-registration,#stage-completion) .channel-promo .channel-desc{display:none}
.ch-fineprint{margin-top:12px;font-size:11px}
}
@media (max-width:430px){
#stage-registration .ch-lede{display:none} /* the rules say it better */
#stage-registration .start-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#stage-registration .start-meta-divider{display:none}
.ch-credit{display:none}
.ch-comp-head{flex-direction:column;align-items:flex-start;gap:12px}
}
/* Short laptops — 1280×720 and the like. */
@media (max-height:640px) and (min-width:601px){
#stage-registration .ch-lede{display:none}
#stage-listening-intro .trans-card{padding-top:24px;padding-bottom:22px}
.ch-task{padding:13px 14px 12px}
}
@media (min-width:1700px){
#stage-registration .start-card{max-width:1020px}
#stage-listening-intro .trans-card{max-width:820px}
#stage-completion .complete-card{max-width:740px}
}
/* Ultra-wide / 5K. Almost every size in this shell is authored in px so it
holds its proportions against the exam's fixed Arial metrics — which means
nothing grows on a 3440px display unless it is told to. Rather than let the
card sit marooned in the middle of the screen, the whole scale steps up one
notch. Widths still stop well short of the viewport: this is a dialogue,
not a page. */
@media (min-width:2000px){
#stage-registration .start-card{max-width:1240px}
#stage-listening-intro .trans-card{max-width:960px}
#stage-completion .complete-card{max-width:860px}
.ch-ident,.ch-action{padding:40px 38px}
#stage-registration .brand-logo{width:54px;height:54px;border-radius:15px}
#stage-registration .brand-eyebrow{font-size:16px}
#stage-registration .brand-tagline{font-size:12.5px}
#stage-registration .start-title{font-size:41px}
#stage-registration .ch-lede{font-size:15.5px;max-width:34ch}
#stage-registration .start-meta-item .n{font-size:31px}
#stage-registration .start-meta-item .l{font-size:10.5px;letter-spacing:.18em}
#stage-registration .start-rules li{font-size:14.5px;margin-bottom:14px;padding-left:28px}
#stage-registration .start-rules li::before{width:7px;height:7px;top:7px}
.ch-credit{font-size:12.5px}
#stage-registration .input-field{font-size:16.5px;padding:17px 19px;border-radius:15px}
.ch-input-wrap,.ch-input-wrap::after{border-radius:15px}
.ch-hint{font-size:13px}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-label,
:is(#stage-registration,#stage-listening-intro,#stage-completion) .input-label{font-size:11.5px}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-lg{padding:18px 28px;font-size:16.5px;border-radius:15px}
.ch-fineprint{font-size:13px}
:is(#stage-registration,#stage-completion) .channel-promo{padding:18px 38px}
:is(#stage-registration,#stage-completion) .channel-promo .tg-icon{width:36px;height:36px;font-size:17px}
:is(#stage-registration,#stage-completion) .channel-promo .channel-name{font-size:14.5px}
:is(#stage-registration,#stage-completion) .channel-promo .channel-desc{font-size:13px}
#stage-listening-intro .trans-card{padding:48px 46px 42px}
.ch-mark{width:56px;height:56px;border-radius:17px}
.ch-mark svg{width:27px;height:27px}
#stage-listening-intro .trans-title{font-size:46px}
#stage-listening-intro .trans-sub{font-size:17px;max-width:60ch}
.ch-once b,.ch-once p{font-size:14.5px}
.ch-task{padding:20px 20px 18px;border-radius:16px}
.ch-task-n{font-size:19px}
.ch-task p{font-size:14.5px}
.ch-task-f{font-size:12.5px}
.trans-notes li{font-size:14.5px;margin-bottom:12px;padding-left:26px}
.ch-comp-body{padding:46px 46px 38px}
.ch-seal,.ch-seal svg{width:76px;height:76px}
.ch-seal-core{inset:11px}
.ch-seal-pct{font-size:16px}
#stage-completion .complete-title{font-size:42px}
#stage-completion .complete-sub{font-size:15.5px}
.ch-steps li{font-size:14.5px;margin-bottom:14px;gap:13px}
.ch-step-dot{width:19px;height:19px}
.ch-step-dot::before{left:6px;top:3.4px;width:4.4px;height:8.4px}
#stage-completion .ch-note p{font-size:15px}
#stage-completion .ch-sign{font-size:13px}
.ch-wait{font-size:14px}
.ch-cta-slot{min-height:58px}
}
@media (max-height:720px){
#stage-registration .start-title{font-size:clamp(23px,2vw,27px)}
.ch-ident,.ch-action{padding-top:22px;padding-bottom:22px}
#stage-registration .start-rules li{margin-bottom:8px}
}
/* ============================================================================
DARK MODE — the exam screen
----------------------------------------------------------------------------
The Inspera-fidelity work hard-codes literal colours (#fff, #000,
rgb(241,242,236) ...) which a variable flip cannot reach. This is the
matching dark layer for those literals. Light mode is untouched: every rule
below is scoped under body.dark-mode.
========================================================================== */
body.dark-mode{
--ex-ground:#121417;
--ex-panel:#1c1f24;
--ex-panel-2:#23272d;
--ex-line:#3a4048;
--ex-line-2:#4a525c;
--ex-ink:#e8ecf1;
--ex-ink-2:#c3cad3;
--ex-ink-3:#95a0ac;
--ex-focus:#5a9de0;
}
/* --- ground + rubric card ------------------------------------------------ */
body.dark-mode #stage-listening{background:var(--ex-ground)}
body.dark-mode #listening-area{background:var(--ex-ground)}
body.dark-mode #pbar-inner{
background:var(--ex-panel);
border:1px solid var(--ex-line);
}
body.dark-mode #pbar-title{color:var(--ex-ink)}
body.dark-mode #pbar-desc{color:var(--ex-ink-2)}
/* --- question body ------------------------------------------------------- */
body.dark-mode .section-head .num{color:var(--ex-ink)}
body.dark-mode .section-head .instruction{color:var(--ex-ink-2)}
body.dark-mode .section-head .instruction em{color:var(--ex-ink)}
body.dark-mode .gap-line,body.dark-mode .note-flow{color:var(--ex-ink-2)}
body.dark-mode .subhead,body.dark-mode .section-head h2{color:var(--ex-ink)}
body.dark-mode .q-text{color:var(--ex-ink-2)}
body.dark-mode .q-pill{color:var(--ex-ink)}
body.dark-mode .q-pill.current{border-color:var(--ex-focus);background:var(--ex-panel-2)}
body.dark-mode .option{background:transparent;color:var(--ex-ink-2)}
body.dark-mode .option:hover,body.dark-mode .option.selected{background:var(--ex-panel-2)}
body.dark-mode .option.selected .opt-letter{border-color:var(--ex-ink);box-shadow:inset 0 0 0 2.5px var(--ex-panel-2),inset 0 0 0 12px var(--ex-ink)}
body.dark-mode #hdr::after{background:var(--ex-line)}
/* --- gap inputs ---------------------------------------------------------- */
body.dark-mode .gap-input{
background:var(--ex-panel-2);
border:1px solid var(--ex-line-2);
color:var(--ex-ink);
}
body.dark-mode .gap-input::placeholder{color:var(--ex-ink);opacity:1}
body.dark-mode .gap-input:focus,
body.dark-mode .gap-input.active,
body.dark-mode .gap-input:not(:placeholder-shown){
border-color:var(--ex-focus);
box-shadow:var(--ex-focus) 0 0 0 1px;
}
/* --- multiple choice ----------------------------------------------------- */
body.dark-mode .option{color:var(--ex-ink-2)}
body.dark-mode .option .opt-letter{
background:var(--ex-panel-2);
border:1px solid var(--ex-line-2);
color:var(--ex-ink);
}
body.dark-mode .ms-option{color:var(--ex-ink-2)}
body.dark-mode .ms-option.selected{background:#1d3a63}
/* --- drag & drop --------------------------------------------------------- */
body.dark-mode .drag-chip{
background:var(--ex-panel-2);
border:1px solid var(--ex-line-2);
color:var(--ex-ink);
}
body.dark-mode .drag-chip:hover{border-color:var(--ex-line-2)}
body.dark-mode .drag-drop{border:1px dashed var(--ex-line-2)}
body.dark-mode .drag-drop .drag-num-hint{color:var(--ex-ink-3)}
/* --- footer -------------------------------------------------------------- */
body.dark-mode #bnav{background:var(--ex-panel)}
body.dark-mode .bnav-section{background:var(--ex-panel)}
body.dark-mode .bnav-plabel,
body.dark-mode .bnav-plabel2{color:var(--ex-ink)}
body.dark-mode .bnav-pscore{color:var(--ex-ink-3)}
body.dark-mode .qpill{color:var(--ex-ink-2)}
body.dark-mode .qpill.current{background:var(--ex-panel-2);border-color:var(--ex-focus)}
body.dark-mode .qpill-wrap::before,
body.dark-mode .bnav-part.cur .bnav-plabel::before{background:var(--ex-line)}
body.dark-mode .qpill-wrap.answered::before{background:#3f9e21}
body.dark-mode #sub-btn{background:var(--ex-panel-2);color:var(--ex-ink-2)}
/* --- audio gate ---------------------------------------------------------- */
body.dark-mode #ag-play-btn{background:var(--ex-panel-2)}
/* the question body is flat in the real exam — no panel edge */
body.dark-mode .q-card{background:transparent;border-color:var(--ex-line)}
body.dark-mode .listening-content{background:transparent}
/* ============================================================================
SEPIA — same root cause as dark mode.
It is one click away in the same Options menu, so it needs the same layer for
the hard-coded Inspera literals, in a warm palette.
========================================================================== */
body.theme-sepia{
--sp-ground:#f5f0e8; --sp-panel:#ece3d3; --sp-panel-2:#fffdf8;
--sp-line:#d9cbb0; --sp-line-2:#b9a685;
--sp-ink:#3a2c1a; --sp-ink-2:#5a4632; --sp-ink-3:#8d7a5f;
}
body.theme-sepia #stage-listening,
body.theme-sepia #listening-area{background:var(--sp-ground)}
body.theme-sepia .q-card,
body.theme-sepia .listening-content{background:transparent}
body.theme-sepia #pbar-inner{background:var(--sp-panel);border:1px solid var(--sp-line)}
body.theme-sepia #pbar-title{color:var(--sp-ink)}
body.theme-sepia #pbar-desc{color:var(--sp-ink-2)}
body.theme-sepia .section-head .num,
body.theme-sepia .subhead,
body.theme-sepia .section-head .instruction em{color:var(--sp-ink)}
body.theme-sepia .section-head .instruction,
body.theme-sepia .note-flow,
body.theme-sepia .q-text,
body.theme-sepia .gap-line{color:var(--sp-ink-2)}
body.theme-sepia .section-head h2,
body.theme-sepia .q-pill{color:var(--sp-ink)}
body.theme-sepia .q-pill.current{background:var(--sp-panel-2)}
body.theme-sepia .option{background:transparent}
body.theme-sepia .option:hover,body.theme-sepia .option.selected{background:var(--sp-panel)}
body.theme-sepia .option.selected .opt-letter{border-color:var(--sp-ink);box-shadow:inset 0 0 0 2.5px var(--sp-panel-2),inset 0 0 0 12px var(--sp-ink)}
body.theme-sepia #hdr::after{background:var(--sp-line)}
body.theme-sepia .gap-input{background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .gap-input::placeholder{color:var(--sp-ink);opacity:1}
body.theme-sepia .option{color:var(--sp-ink-2)}
body.theme-sepia .option .opt-letter{background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .drag-chip{background:var(--sp-panel-2);border:1px solid var(--sp-line-2);color:var(--sp-ink)}
body.theme-sepia .drag-drop{border:1px dashed var(--sp-line-2)}
body.theme-sepia #bnav,
body.theme-sepia .bnav-section{background:var(--sp-panel-2)}
body.theme-sepia .bnav-plabel,
body.theme-sepia .bnav-plabel2,
body.theme-sepia .qpill{color:var(--sp-ink)}
body.theme-sepia .bnav-pscore{color:var(--sp-ink-3)}
body.theme-sepia .qpill.current{background:var(--sp-panel-2)}
body.theme-sepia .qpill-wrap::before,
body.theme-sepia .bnav-part.cur .bnav-plabel::before{background:var(--sp-line)}
body.theme-sepia .qpill-wrap.answered::before{background:#358E14}
body.theme-sepia #sub-btn{background:var(--sp-panel);color:var(--sp-ink-2)}
/* --- the brown card override predates the chamber skin ------------------- */
body.dark-mode .start-card,
body.dark-mode .trans-card,
body.dark-mode .complete-card{background:var(--ch-glass)}
/* ============================================================================
MAP + MATCHING LAYOUT
The map was 720px with its answer column on flex:1, which stranded the
options far to the right with a dead gap. Smaller map, column sits next to it.
========================================================================== */
[data-map-img]{width:520px !important}
[data-map-img] img{width:100% !important;max-width:520px !important}
/* the answer column follows the map directly; it must not stretch */
[data-map-img]+div{flex:0 0 auto !important;min-width:0}
.drag-match-layout{gap:12px}
.drag-item-label{min-width:72px}
.drag-items{gap:10px}
@media (max-width:1100px){
[data-map-img]{width:100% !important}
[data-map-img] img{max-width:100% !important}
}
/* ============================================================================
OPTIONS — the official full-screen replacement page, not a dropdown.
Measured: div.options__candidateOptions 0,0,1440x900; the header and footer are
removed from the layout; topbar 0,0,1440x80; h1 673.13,21,93.75x32 at 27.2px/400;
#exitOptionsMenuButton 1360.02,0,66.66x66.66; content column 700px wide at x=370.
========================================================================== */
#opt-page,#msg-page{position:absolute;inset:0;z-index:700;background:#fff;display:none;flex-direction:column;overflow:auto}
#opt-page.open,#msg-page.open{display:flex}
/* the 239x244 dropdown, the volume row, the theme dots, the full-screen toggle and
the 210px Messages popup are all replaced by the two pages above */
#menu-dropdown,#menu-dropdown.open{display:none !important}
.notif-popup,.notif-popup.open{display:none !important}
.opt-topbar{position:relative;flex:0 0 auto;height:80px;padding:16px 0;box-sizing:border-box}
.opt-topbar h1{width:-webkit-fit-content;width:fit-content;margin:5px auto 18.224px;font:400 27.2px/32px Arial,sans-serif;color:#000;text-align:center}
.opt-back,.opt-close{position:absolute;top:0;border:0;background:transparent;cursor:pointer;
font:400 13.3333px/1 Arial,sans-serif;color:#000;display:flex;align-items:center;justify-content:center}
.opt-close{right:13.32px;width:66.66px;height:66.66px;padding-bottom:3.33px;font-size:26px}
.opt-back{left:13.32px;height:66.66px;padding:0 16px;font-size:16px}
.opt-back:hover,.opt-close:hover{background:#efefef}
.opt-main{flex:0 0 auto;width:732px;max-width:100%;margin:0 auto;padding:0 16px;box-sizing:border-box}
.opt-group{border:1px solid #C1C1C1;border-radius:5px;margin-bottom:16px;overflow:hidden;background:#fff}
.opt-main > div > .opt-group:last-child{margin-bottom:0}
.opt-item{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;
height:75.78px;padding:26.4px 44px 26.4px 35.2px;border:0;border-radius:0;background:#fff;color:#000;
font:400 17.6px/24px Arial,sans-serif;text-align:left;cursor:pointer}
.opt-item + .opt-item{border-top:1px solid #C1C1C1}
.opt-item .opt-ic{flex:0 0 auto;width:24px;margin-right:24px;color:#9a9a9a;display:flex;align-items:center}
.opt-item .opt-lbl{flex:1}
.opt-item .opt-chev{flex:0 0 auto;font:700 20px/1 Arial,sans-serif}
.opt-item.main{background:#e31837;color:#fff}
.opt-item.main .opt-ic{color:#fff}
.opt-item:not(.main):hover{background:#f4f4f4}
.opt-item.main:hover{background:#c9142f}
.opt-item.sel .opt-chev::after{content:"\2713"}
#opt-page .opt-sub{display:none}
#opt-page[data-view="contrast"] .opt-root,#opt-page[data-view="zoom"] .opt-root{display:none}
#opt-page[data-view="contrast"] .opt-sub-contrast,#opt-page[data-view="zoom"] .opt-sub-zoom{display:block}
#opt-page[data-view="root"] .opt-back{display:none}
/* ============================================================================
SUBMISSION PAGE — reached from the deliver tick. Measured: the header grows to
208 with an 88px TOC bar, the content area empties, the four-part footer stays,
the deliver button turns #333/white, previous is enabled and next disabled.
========================================================================== */
#hdr-toc{display:none;flex:0 0 auto;height:152px;box-sizing:border-box;background:#fff;
border-bottom:1px solid #C1C1C1;position:relative;z-index:400}
#stage-listening.submitting #hdr-toc{display:block}
#stage-listening.submitting #notes-btn{display:none}
#stage-listening.submitting #listening-area > .listening-content{visibility:hidden}
#stage-listening.submitting #listening-area{overflow:hidden}
.toc-row{display:flex;align-items:center;justify-content:space-between;height:88px;
width:810px;max-width:calc(100% - 32px);margin:0 auto;padding:0}
.toc-msg{font:400 16px/24px Arial,sans-serif;color:#000}
#toc-next{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 22px;border:0;border-radius:0;
background:#000;color:#fff;font:400 16px/24px Arial,sans-serif;cursor:pointer}
#toc-next:hover{background:#262626}
/* ============================================================================
TIME-UP NOTICE — the practice product's own. The official Listening player has
no timer, and the file used to auto-submit silently at 40:00; it now warns.
========================================================================== */
#time-up{position:absolute;inset:0;z-index:800;background:rgba(0,0,0,.7);display:none;
align-items:center;justify-content:center}
#time-up.open{display:flex}
.tu-card{background:#fff;border-radius:3px;padding:32px 40px;max-width:520px;text-align:center}
.tu-card h2{font:700 17.6px/21.12px Arial,sans-serif;color:#000;margin:0 0 14.608px}
.tu-card p{font:400 16px/24px Arial,sans-serif;color:#000;margin:0 0 24px}
.tu-card button{border:0;border-radius:3px;background:#000;color:#fff;padding:10px 20px;
font:400 13.3333px/normal Arial,sans-serif;cursor:pointer}
/* ============================================================================
CONTRAST: "Yellow on black". Scoped to the exam screen so it never leaks into
the wrapper stages, which have their own skin.
========================================================================== */
#stage-listening.yob{background:#000}
#stage-listening.yob #hdr,#stage-listening.yob #listening-area,#stage-listening.yob #bnav,
#stage-listening.yob .bnav-section,#stage-listening.yob #hdr-toc,#stage-listening.yob #opt-page{background:#000}
#stage-listening.yob #hdr::after{background:#666}
#stage-listening.yob .ttid-label,#stage-listening.yob .ttid-sub-inline,
#stage-listening.yob .hdr-icon-btn,#stage-listening.yob #menu-btn,
#stage-listening.yob .ttid-sub-inline .fa-glyph{color:#ffff00}
#stage-listening.yob #pbar-inner{background:#000;border-color:#ffff00}
#stage-listening.yob #pbar-title,#stage-listening.yob #pbar-desc,
#stage-listening.yob .section-head .num,#stage-listening.yob .section-head .instruction,
#stage-listening.yob .section-head .instruction em,#stage-listening.yob .section-head h2,
#stage-listening.yob .subhead,#stage-listening.yob .note-flow,#stage-listening.yob .gap-line,
#stage-listening.yob .q-text,#stage-listening.yob .q-pill,#stage-listening.yob .option,
#stage-listening.yob .drag-item-label,#stage-listening.yob .drag-col-hdr,
#stage-listening.yob .bnav-plabel,#stage-listening.yob .bnav-plabel2,
#stage-listening.yob .bnav-pscore,#stage-listening.yob .qpill,
#stage-listening.yob .opt-item,#stage-listening.yob .opt-topbar h1,
#stage-listening.yob .toc-msg{color:#ffff00}
#stage-listening.yob .gap-input,#stage-listening.yob .drag-chip,
#stage-listening.yob .drag-drop{background:#000;color:#ffff00;border-color:#ffff00}
#stage-listening.yob .gap-input::placeholder{color:#ffff00}
#stage-listening.yob .drag-num-hint{color:#ffff00}
#stage-listening.yob .option{background:transparent}
#stage-listening.yob .option:hover,#stage-listening.yob .option.selected{background:#333}
#stage-listening.yob .option .opt-letter{background:#000;border-color:#ffff00}
#stage-listening.yob .option.selected .opt-letter{box-shadow:inset 0 0 0 2.5px #000,inset 0 0 0 12px #ffff00}
#stage-listening.yob .qpill-wrap::before,
#stage-listening.yob .bnav-part.cur .bnav-plabel::before{background:#666}
#stage-listening.yob .qpill-wrap.answered::before{background:#7bd94a}
#stage-listening.yob .qpill.current{background:#000;border-color:#ffff00;color:#ffff00}
#stage-listening.yob #sub-btn{background:#333;color:#ffff00}
#stage-listening.yob .opt-group{background:#000;border-color:#ffff00}
#stage-listening.yob .opt-item{background:#000}
#stage-listening.yob .opt-item.main{background:#ffff00;color:#000}
#stage-listening.yob .opt-close,#stage-listening.yob .opt-back{color:#ffff00}
body.review-mode .q-jump-btn{
border:1px solid rgba(65,142,200,.35);
color:#1c5c96;
border-radius:999px;
font-weight:700;
}
body.review-mode .q-jump-btn:hover{background:#1c5c96;border-color:#1c5c96;color:#fff}
body.dark-mode.review-mode .q-jump-btn{color:#84b4ff;border-color:rgba(132,180,255,.35)}
/* ── ANSWER FEEDBACK CHIP ──────────────────────────────────────────────────
The badge states the verdict; the field beside it is green because it holds
the CORRECT answer. Previously a loose glyph plus green text, which never
said whether the green word was the learner's or the right one. */
.feedback-pill{
padding:2px;
gap:0;
border-radius:999px;
border:1px solid transparent;
background:transparent;
line-height:1;
vertical-align:middle;
}
.feedback-pill.show{display:inline-flex;align-items:center}
.feedback-pill .fb-badge{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;
font-size:11px;font-weight:900;line-height:1;color:#fff;flex:0 0 auto;
}
.feedback-pill .fb-ok{background:var(--emerald)}
.feedback-pill .fb-no{background:var(--crimson)}
.feedback-pill .fb-ans{
padding:0 10px 0 7px;
font-size:13px;font-weight:700;letter-spacing:0;
color:var(--emerald);white-space:nowrap;
}
.feedback-pill.correct{background:rgba(46,125,50,.10);border-color:rgba(46,125,50,.28)}
/* the chip on a wrong answer still SHOWS the correct answer, so the field is
green; only the badge is crimson */
.feedback-pill.wrong{background:rgba(46,125,50,.08);border-color:rgba(46,125,50,.26)}
body.dark-mode .feedback-pill.correct,
body.dark-mode .feedback-pill.wrong{background:rgba(95,209,122,.12);border-color:rgba(95,209,122,.28)}
body.dark-mode .feedback-pill .fb-ans{color:#6fd992}
body.dark-mode .feedback-pill .fb-ok{background:#3fa85f}
body.dark-mode .feedback-pill .fb-no{background:#e1344f}
body.theme-sepia .feedback-pill .fb-ans{color:#1f7a43}
/* ── NOTES SIDEBAR ───────────────────────────────────────────────────────── */
/* measured: #annotations-sidebar 1140, 0, 300 x 900, background #E8E8E8. It DOCKS
and squeezes the exam to 1140px — it does not float. */
#notes-panel{
position:fixed;right:0;top:0;width:300px;height:100%;
display:none;flex-direction:column;z-index:55;
background:#E8E8E8;border:0;border-radius:0;box-shadow:none;overflow:hidden;
}
body.notes-open #notes-panel{display:flex}
body.notes-open #stage-listening{right:300px}
#notes-panel .np-hdr{
flex:0 0 auto;display:flex;align-items:center;gap:0;height:56px;
padding:0 0 0 16px;border-bottom:0;background:#fff;
}
#notes-panel .np-title{
flex:1;font:400 16px/56px Arial,sans-serif;letter-spacing:0;text-transform:none;color:#000;
}
#notes-panel .np-close{
border:none;background:#efefef;cursor:pointer;color:#000;
font:700 26px/1 Arial,sans-serif;padding:0;width:56px;height:56px;
display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
#notes-panel .np-close:hover{background:#262626;color:#fff}
#notes-panel .np-body{position:relative;flex:1;min-height:0;display:flex}
#notes-panel .np-empty{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;padding:0 24px;pointer-events:none;color:#000;
}
#notes-panel .np-empty b{font:400 19.2px/25px Arial,sans-serif;display:block}
#notes-panel .np-empty i{font:400 16px/24px Arial,sans-serif;font-style:normal;display:block;margin-top:24px}
body.notes-typed #notes-panel .np-empty{display:none}
#notes-area{
flex:1;min-height:0;resize:none;border:none;outline:none;
padding:16px;background:transparent;color:#000;
font:400 16px/24px Arial,sans-serif;position:relative;z-index:1;
}
#notes-area::placeholder{color:transparent}
body.dark-mode #notes-panel{background:var(--ex-panel);border-color:var(--ex-line)}
body.dark-mode #notes-panel .np-hdr{background:var(--ex-panel-2);border-color:var(--ex-line)}
body.dark-mode #notes-panel .np-title,
body.dark-mode #notes-panel .np-empty,
body.dark-mode #notes-area{color:var(--ex-ink)}
body.dark-mode #notes-panel .np-close{background:var(--ex-panel-2);color:var(--ex-ink-2)}
body.theme-sepia #notes-panel{background:var(--sp-panel);border-color:var(--sp-line)}
body.theme-sepia #notes-panel .np-hdr{background:var(--sp-panel-2)}
body.theme-sepia #notes-panel .np-title,
body.theme-sepia #notes-panel .np-empty,
body.theme-sepia #notes-area{color:var(--sp-ink)}
body.theme-sepia #notes-panel .np-close{background:var(--sp-panel);color:var(--sp-ink-2)}
/* ── MAP LETTER POOL: one vertical column ────────────────────────────────── */
.drag-pool-letters{
display:flex !important;
flex-direction:column;
align-items:flex-start;
gap:6px;
}
/* ── RESULTS TOPBAR — chamber glass ──────────────────────────────────────
The certificate below stays paper on purpose; only the bar is re-skinned. */
#stage-results .topbar{
/* the brand span pins `color:var(--ink)` INLINE, which beats any rule here —
so re-point the token instead of trying to out-specify the attribute */
--ink:var(--ch-ink);
background:linear-gradient(180deg,rgba(20,32,56,.88),rgba(11,19,36,.92));
-webkit-backdrop-filter:saturate(1.2) blur(18px);
backdrop-filter:saturate(1.2) blur(18px);
border-bottom:1px solid rgba(255,255,255,.10);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px -12px rgba(0,0,0,.6);
}
#stage-results .topbar>div>span{color:var(--ch-ink)}
#stage-results .topbar .logo-mark{
box-shadow:0 6px 16px -6px rgba(0,0,0,.7);
}
#stage-results .topbar .btn{
height:34px;
padding:0 16px;
border-radius:999px;
font-size:12.5px;
font-weight:700;
letter-spacing:.01em;
transition:background .14s,border-color .14s,color .14s;
}
/* primary action */
#stage-results .topbar .btn-primary{
background:linear-gradient(180deg,var(--ch-red-2),var(--ch-red));
border:1px solid rgba(255,255,255,.14);
color:#fff;
box-shadow:0 8px 22px -10px rgba(225,29,60,.75),inset 0 1px 0 rgba(255,255,255,.20);
}
#stage-results .topbar .btn-primary:hover{background:linear-gradient(180deg,#ff5570,var(--ch-red-2))}
/* secondary: glass outline */
#stage-results .topbar .btn-ghost{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.18);
color:var(--ch-ink-2);
border-radius:999px;
font-weight:600;
}
#stage-results .topbar .btn-ghost:hover{
background:rgba(255,255,255,.11);
border-color:rgba(255,255,255,.30);
color:var(--ch-ink);
}
/* tertiary: gold hairline, no gradient slab */
#stage-results .topbar .btn-gold{
background:transparent;
border:1px solid rgba(217,176,99,.55);
color:var(--ch-gold);
border-radius:999px;
}
#stage-results .topbar .btn-gold:hover{
background:rgba(217,176,99,.14);
border-color:var(--ch-gold);
color:#f0d49a;
}
/* ── RESULTS CERTIFICATE — DARK / SEPIA ─────────────────────────────────
The certificate is a document, and a document is paper. REFERENCE_SPEC
§9 is explicit: these CDI screens read as paper, with the dark chamber
behind them. The Writing Test Report Form never re-skins itself either,
so the two reports stay the same object under every theme — which also
keeps the dark score panel reading against real paper instead of
fighting a second dark surface.
What the themes change is the ground and the topbar, and both are dark
already. All the certificate owes them is a heavier shadow so the sheet
still lifts off the chamber, and a warmer stock in sepia. */
body.dark-mode #stage-results .cert{
/* the wrapper-theme rule further up paints every card #201b17; the
certificate opts out of it — it is paper in every theme */
background:var(--c-paper);border-color:var(--c-line);
box-shadow:0 2px 6px rgba(0,0,0,.34),0 22px 52px -20px rgba(0,0,0,.62),0 62px 120px -50px rgba(0,0,0,.85);
}
body.dark-mode #stage-results .cert-logo .logo-mark,
body.dark-mode #stage-results .topbar .logo-mark{box-shadow:0 6px 16px -6px rgba(0,0,0,.85)}
/* sepia keeps the paper certificate — only the stock shifts warm */
body.theme-sepia #stage-results .cert,body.theme-sepia #print-report{
--c-paper:#fffbef;--c-paper-2:#f5ecd6;
--c-ink:#241c10;--c-ink-2:#5b4f3c;--c-ink-3:#8d8069;
--c-line:rgba(58,44,26,.14);--c-line-2:rgba(58,44,26,.22);
}
body.theme-sepia #stage-results .cert{border-color:var(--c-line)}
body.theme-sepia #stage-results .student-row{background:linear-gradient(180deg,#fffbef,#f7efdc)}
body.theme-sepia #stage-results .cc-head{background:linear-gradient(180deg,#f7efdc,#f0e6ce)}
body.theme-sepia #stage-results .answer-table th{background:linear-gradient(180deg,#f7efdc,#f0e6ce)}
body.theme-sepia #stage-results .cert-footer{background:linear-gradient(180deg,#f7efdc,#efe4c9)}
body.theme-sepia #stage-results .answer-table tr.alt td{background:rgba(58,44,26,.028)}
/* ============================================================================
CDI Materials — wrapper-stage visual layer (CSS)
The canvas host, the boot hold-back and the stage-entrance choreography.
Everything that depends on WebGL is scoped to `body.cdi-3d-on`, which the
atmosphere module only adds after a context is successfully created; without
it the wrapper screens still render, still animate, and simply sit on their
CSS ground instead of on the particle field.
NOTHING here targets #stage-listening or #audio-gate. Do not add anything
that does: the exam screen owns its own frame budget, because the audio must
never compete with the test for frames.
========================================================================== */
/* ---- the canvas host: full viewport, behind every card, inert ----------- */
#cdi-webgl{
position:fixed;
inset:0;
z-index:2; /* .stage.active is z-index:25 and transparent */
pointer-events:none; /* never steals clicks or focus from form fields */
user-select:none;
overflow:hidden;
contain:strict;
opacity:0;
transition:opacity .45s ease;
}
#cdi-webgl canvas{display:block;width:100%;height:100%;pointer-events:none}
/* ---- the ground the particles are lit against --------------------------
The stage is a stacking context here (`.stage.active{z-index:25}`), so an
opaque stage background would bury the canvas at z-index 2. The stages go
transparent and the identical gradient moves to the body, one layer below
the canvas — the exam screen is opaque and never sees it. */
body.cdi-3d-on{
background:
transparent;
}
body.cdi-3d-on :is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results){
background:transparent;
}
/* the shader supplies its own grain — drop the paper-noise multiply overlay */
body.cdi-3d-on :is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results)::before{
display:none !important;
}
/* The vignette belongs UNDER the particle field. `.stage.active` is a stacking
context in this file (z-index:25), so a ::after on the stage would paint over
the canvas and grey the whole field down — it moves to the body, one layer
below the canvas, exactly where the Writing shell has it. */
body.cdi-3d-on :is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results)::after{display:none}
body.cdi-3d-on::after{
content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(76% 60% at 50% 44%,transparent 38%,rgba(2,4,10,.30) 74%,rgba(1,2,6,.72) 100%)}
/* ---- boot: hold the card back until the field has formed ---------------- */
body.cdi-booting{overflow:hidden} /* no scrollbar flash while it plays */
body.cdi-booting #stage-registration .start-card{
opacity:0;transform:translate3d(0,30px,0) scale(.962);filter:blur(16px);pointer-events:none}
body.cdi-booting #cdi-webgl{opacity:1}
/* ---- the entrance ------------------------------------------------------- */
@keyframes chRise{
from{opacity:0;transform:translate3d(0,30px,0) scale(.962);filter:blur(16px)}
55%{filter:blur(0)}
to{opacity:1;transform:none;filter:blur(0)}}
@keyframes chFadeUp{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes chWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
body.cdi-reveal #stage-registration .start-card{
animation:chRise 1.05s var(--ch-e) both;will-change:transform,opacity,filter}
body.cdi-reveal #stage-registration .start-card::before{animation:chWipe .9s .35s var(--ch-e) both}
body.cdi-reveal #stage-registration :is(.brand-block,.ch-kicker,.start-title,.ch-lede,.start-meta,.ch-credit,
.ch-label,.start-rules li,.ch-field,#start-btn,.ch-fineprint){
animation:chFadeUp .62s var(--ch-e) both}
body.cdi-reveal #stage-registration .brand-block{animation-delay:.16s}
body.cdi-reveal #stage-registration .ch-kicker{animation-delay:.22s}
body.cdi-reveal #stage-registration .start-title{animation-delay:.26s}
body.cdi-reveal #stage-registration .ch-lede{animation-delay:.31s}
body.cdi-reveal #stage-registration .start-meta{animation-delay:.37s}
body.cdi-reveal #stage-registration .ch-credit{animation-delay:.43s}
body.cdi-reveal #stage-registration .ch-label{animation-delay:.24s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(1){animation-delay:.29s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(2){animation-delay:.33s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(3){animation-delay:.37s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(4){animation-delay:.41s}
body.cdi-reveal #stage-registration .start-rules li:nth-child(5){animation-delay:.45s}
body.cdi-reveal #stage-registration .ch-field{animation-delay:.5s}
body.cdi-reveal #stage-registration #start-btn{animation-delay:.56s}
body.cdi-reveal #stage-registration .ch-fineprint{animation-delay:.62s}
body.cdi-reveal #stage-registration .channel-promo{animation:chFadeUp .62s .66s var(--ch-e) both}
/* the briefing card leaves before the exam paints, never with it */
body.cdi-exit #stage-listening-intro .trans-card{
opacity:0;transform:translate3d(0,-8px,0) scale(.992);filter:blur(5px);
transition:opacity .34s ease,transform .38s var(--ch-e),filter .34s ease}
/* stage-to-stage entrances (intro / completion) */
body.cdi-3d-on .stage.cdi-enter :is(.trans-card,.complete-card){
animation:chRise .85s var(--ch-e) both;will-change:transform,opacity,filter}
body.cdi-3d-on .stage.cdi-enter > *{animation:none}
body.cdi-3d-on #stage-listening-intro.cdi-enter :is(.ch-head,.trans-sub,.ch-once,.ch-task,.trans-notes,.btn-lg,.ch-fineprint),
body.cdi-3d-on #stage-completion.cdi-enter :is(.ch-comp-head,.ch-steps,.ch-note,.channel-promo){
animation:chFadeUp .6s var(--ch-e) both}
body.cdi-3d-on #stage-listening-intro.cdi-enter .ch-head{animation-delay:.18s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .trans-sub{animation-delay:.24s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .ch-once{animation-delay:.28s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .ch-task:nth-child(1){animation-delay:.33s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .ch-task:nth-child(2){animation-delay:.38s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .ch-task:nth-child(3){animation-delay:.43s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .ch-task:nth-child(4){animation-delay:.48s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .trans-notes{animation-delay:.53s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .btn-lg{animation-delay:.58s}
body.cdi-3d-on #stage-listening-intro.cdi-enter .ch-fineprint{animation-delay:.64s}
body.cdi-3d-on #stage-completion.cdi-enter .ch-comp-head{animation-delay:.18s}
body.cdi-3d-on #stage-completion.cdi-enter .ch-steps{animation-delay:.26s}
body.cdi-3d-on #stage-completion.cdi-enter .ch-note{animation-delay:.34s}
body.cdi-3d-on #stage-completion.cdi-enter .channel-promo{animation-delay:.42s}
body.cdi-3d-on :is(.start-card,.trans-card,.complete-card){box-shadow:var(--ch-shadow)}
/* ---- accessibility / opt-outs ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
body.cdi-booting #stage-registration .start-card{opacity:1;transform:none;filter:none;pointer-events:auto}
#cdi-webgl,#ch-strike,#ch-bloom{display:none !important}
#stage-registration *,#stage-listening-intro *,#stage-completion *{animation:none !important}
.ch-cta{opacity:1;transform:none;pointer-events:auto}
}
body.cdi-reduced #stage-registration *,
body.cdi-reduced #stage-listening-intro *,
body.cdi-reduced #stage-completion *{animation:none !important}
body.cdi-reduced .ch-cta{opacity:1;transform:none;pointer-events:auto}
/* ---- print: the report must print as flat paper ------------------------ */
@media print{
#cdi-webgl,#ch-strike,#ch-bloom,#ch-resume{display:none !important}
body.cdi-3d-on{background:#fff !important}
body.cdi-3d-on :is(#stage-registration,#stage-listening-intro,#stage-completion,#stage-results){background:#fff !important}
:is(.start-card,.trans-card,.complete-card){
box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;animation:none !important}
#stage-registration *,#stage-listening-intro *,#stage-completion *{animation:none !important}
}
/* ============================================================================
REVIEW MODE
---------------------------------------------------------------------------
The ORIGINAL review architecture, kept exactly: the exam sheet stays where
it is with its answers revealed, a transcript panel is docked to the right,
and the transport that the exam withholds appears in the header. Clicking a
timecode — the "▶ m:ss" beside a question, or the figure in the transcript
gutter — seeks the recording and pulls the transcript to that moment.
Nothing here moves; only the dressing changed, from the old blue-grey
chamber to the warm paper, navy and gold the certificate is printed in.
Everything is scoped to body.review-mode, which never applies during the
exam, so #stage-listening and #audio-gate are untouched.
========================================================================== */
body.review-mode{
/* one palette, three themes; the panel and the transport both read from it */
--rv-ink:#1e1a14; --rv-ink-2:#544b41; --rv-ink-3:#8b8074; --rv-ink-4:#a89c8d;
--rv-paper:#fffdfa; --rv-paper-2:#f8f3ec; --rv-paper-3:#fbf6ee;
--rv-line:rgba(34,25,15,.11); --rv-line-2:rgba(34,25,15,.19);
--rv-navy:#2a4d8f; --rv-navy-ink:#fff; --rv-gold:#b8873a; --rv-gold-ink:#7a5410;
--rv-green:#1f7a43; --rv-rose:#ad3a2c;
--rv-mark:rgba(184,135,58,.20); --rv-mark-edge:rgba(184,135,58,.42);
--rv-cur:rgba(42,77,143,.055);
--rv-track:#e6ddcd; --rv-buffer:#d3c7b1;
--rv-panel-shadow:-18px 0 54px -26px rgba(34,25,15,.42);
}
body.dark-mode.review-mode{
--rv-ink:#f1f5fb; --rv-ink-2:#c3cad3; --rv-ink-3:#95a0ac; --rv-ink-4:#7d8894;
--rv-paper:#171b21; --rv-paper-2:#12151a; --rv-paper-3:#1c1f24;
--rv-line:rgba(255,255,255,.10); --rv-line-2:rgba(255,255,255,.18);
--rv-navy:#84b4ff; --rv-navy-ink:#0b1220; --rv-gold:#e0b775; --rv-gold-ink:#ffd79a;
--rv-green:#5fd48c; --rv-rose:#f4657c;
--rv-mark:rgba(224,183,117,.15); --rv-mark-edge:rgba(224,183,117,.34);
--rv-cur:rgba(132,180,255,.08);
--rv-track:#3a4048; --rv-buffer:#4a525c;
--rv-panel-shadow:-20px 0 64px -22px rgba(0,0,0,.62);
}
body.theme-sepia.review-mode{
--rv-ink:#2f2416; --rv-ink-2:#5a4632; --rv-ink-3:#8d7a5f; --rv-ink-4:#a3906f;
--rv-paper:#fffdf8; --rv-paper-2:#f5efe4; --rv-paper-3:#f7f1e6;
--rv-line:#e2d5bc; --rv-line-2:#cdbb99;
--rv-navy:#7a5a24; --rv-navy-ink:#fffdf8; --rv-gold:#a9822f; --rv-gold-ink:#6d4a0c;
--rv-green:#3f6b33; --rv-rose:#9c3122;
--rv-mark:rgba(169,130,47,.20); --rv-mark-edge:rgba(169,130,47,.44);
--rv-cur:rgba(122,90,36,.07);
--rv-track:#e0d3b8; --rv-buffer:#cbb994;
--rv-panel-shadow:-18px 0 52px -26px rgba(80,60,30,.35);
}
/* ── the docked transcript panel ─────────────────────────────────────────
Same place, same width, same fixed dock as the original; new stock. */
body.review-mode #transcript-panel{
top:56px;
height:calc(100vh - 56px - 53px);
background:linear-gradient(180deg,var(--rv-paper),var(--rv-paper-2));
border-left:1px solid var(--rv-line);
box-shadow:var(--rv-panel-shadow);
font-family:var(--pw-ui);
}
/* The scratch-notes rail docks by shifting #stage-listening 300px left, but the
panel is a body child pinned to the viewport, so it has to follow by hand —
otherwise the notes cover 300px of transcript. */
body.review-mode.notes-open #transcript-panel{right:300px}
body.review-mode .tp-hdr{
padding:0 18px;
height:46px;
gap:9px;
background:var(--rv-paper-3);
border-bottom:1px solid var(--rv-line);
position:relative;
}
/* the same navy→gold hairline that heads the certificate */
body.review-mode .tp-hdr::after{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--rv-navy),var(--rv-gold));
opacity:.85;
}
body.review-mode .tp-hdr-lbl{
font-family:var(--pw-ui);font-size:9.5px;font-weight:800;letter-spacing:.19em;
text-transform:uppercase;color:var(--rv-ink-3);flex:1;
}
body.review-mode .tp-hdr-count{
font-family:var(--pw-display);font-size:11px;font-weight:700;color:var(--rv-ink-3);
font-variant-numeric:tabular-nums;flex:0 0 auto;
}
body.review-mode .tp-live-dot{
width:7px;height:7px;background:var(--rv-green);
box-shadow:0 0 0 0 color-mix(in srgb,var(--rv-green) 45%,transparent);
}
/* audio down: the dot must not keep claiming the recording is live */
body.review-mode.audio-down .tp-live-dot{background:var(--rv-ink-4);animation:none;box-shadow:none}
/* the honest notice, shown only when the stream never arrives */
body.review-mode .tp-offline{
display:none;gap:8px;align-items:flex-start;
padding:10px 18px;font-size:11.5px;line-height:1.5;
color:var(--rv-rose);border-bottom:1px solid var(--rv-line);
background:color-mix(in srgb,var(--rv-rose) 7%,transparent);
}
body.review-mode.audio-down .tp-offline{display:flex}
body.review-mode .tp-offline svg{width:13px;height:13px;flex:0 0 auto;margin-top:2px}
body.review-mode .tp-offline b{font-weight:700}
body.review-mode .tp-offline span{color:var(--rv-ink-2)}
body.review-mode.audio-down #pbar-audio{opacity:.5;filter:saturate(.2)}
body.review-mode.audio-down .q-jump-btn{opacity:.5}
body.review-mode .tp-fade-top{background:linear-gradient(to bottom,var(--rv-paper) 16%,transparent);height:56px}
body.review-mode .tp-fade-bot{background:linear-gradient(to top,var(--rv-paper-2) 16%,transparent);height:64px}
/* ── one transcript line ─────────────────────────────────────────────── */
body.review-mode .tp-item{
padding:9px 18px 9px 15px;
border-left:3px solid transparent;
transition:background .18s ease,opacity .35s ease,border-color .18s ease;
}
body.review-mode .tp-item.tp-past{opacity:.44;transform:none}
body.review-mode .tp-item.tp-cur{
opacity:1;transform:none;
border-left-color:var(--rv-navy);
background:var(--rv-cur);
}
body.review-mode .tp-item:not(.tp-break){cursor:pointer}
body.review-mode .tp-item:not(.tp-break):hover{background:color-mix(in srgb,var(--rv-navy) 7%,transparent)}
body.review-mode .tp-item:not(.tp-break):focus-visible{outline:2px solid var(--rv-navy);outline-offset:-2px}
/* the speaker rule: SPEAKER on the left, its timecode on the right.
The timecode is the click target the panel advertises. */
body.review-mode .tp-sp{
display:flex;align-items:center;gap:8px;
font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--rv-navy);margin-bottom:4px;
}
body.review-mode .tp-sp::after{content:"";flex:1;height:1px;background:var(--rv-line)}
body.review-mode .tp-t{
flex:0 0 auto;order:3;
display:inline-flex;align-items:center;gap:3px;
font-family:var(--pw-display);font-size:10px;font-weight:700;letter-spacing:0;
text-transform:none;font-variant-numeric:tabular-nums;
color:var(--rv-ink-3);
padding:1px 6px;border-radius:999px;border:1px solid transparent;
transition:color .14s,border-color .14s,background .14s;
}
body.review-mode .tp-t::before{content:"▶";font-size:6.5px;line-height:1;opacity:.7}
body.review-mode .tp-item:hover .tp-t,
body.review-mode .tp-item.tp-cur .tp-t{
color:var(--rv-navy);border-color:color-mix(in srgb,var(--rv-navy) 34%,transparent);
background:color-mix(in srgb,var(--rv-navy) 8%,transparent);
}
body.review-mode .tp-tx{
font-family:var(--pw-ui);font-size:13px;line-height:1.72;font-weight:400;
color:var(--rv-ink-2);
}
body.review-mode .tp-cur .tp-tx{color:var(--rv-ink-2)}
body.review-mode .tp-cur .tp-w{color:var(--rv-ink-3);opacity:.42}
body.review-mode .tp-cur .tp-w.tp-w-lit{color:var(--rv-ink);font-weight:500;opacity:1}
body.review-mode .tp-cur .tp-w.tp-ans-w.tp-w-lit{color:var(--rv-gold-ink);font-weight:700;opacity:1}
/* the answer, marked in the line it is spoken in */
body.review-mode mark.tp-ans-mark{
background:var(--rv-mark);
box-shadow:inset 0 -2px 0 var(--rv-mark-edge);
color:inherit;font-weight:600;border-radius:3px;padding:1px 3px;
}
body.review-mode .tp-apill-i{
font-family:var(--pw-display);font-size:9px;font-weight:700;
padding:1px 6px;margin-left:4px;border-radius:999px;vertical-align:1px;
background:color-mix(in srgb,var(--rv-navy) 12%,transparent);
color:var(--rv-navy);border:1px solid color-mix(in srgb,var(--rv-navy) 30%,transparent);
}
/* the pill carries the verdict, so the mark reads at a glance */
body.review-mode .tp-apill-i.is-correct{background:color-mix(in srgb,var(--rv-green) 13%,transparent);color:var(--rv-green);border-color:color-mix(in srgb,var(--rv-green) 34%,transparent)}
body.review-mode .tp-apill-i.is-wrong{background:color-mix(in srgb,var(--rv-rose) 12%,transparent);color:var(--rv-rose);border-color:color-mix(in srgb,var(--rv-rose) 32%,transparent)}
body.review-mode .tp-apill-i.is-skipped{background:color-mix(in srgb,var(--rv-ink-3) 14%,transparent);color:var(--rv-ink-3);border-color:var(--rv-line-2)}
/* the part breaks */
body.review-mode .tp-item.tp-break{padding:16px 18px 14px;cursor:default;gap:9px}
body.review-mode .tp-item.tp-break:hover{background:none}
body.review-mode .tp-br-line{background:var(--rv-line)}
body.review-mode .tp-br-lbl{
font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--rv-ink-3);
}
/* ── the review transport, in the header ──────────────────────────────────
One control group, exactly where the original put it. Never shown in the
exam: #pbar-audio is display:none unless body.review-mode is set. */
body.review-mode #pbar-audio{
background:var(--rv-paper);
border:1px solid var(--rv-line-2);
border-radius:999px;
padding:5px 8px 5px 14px;
gap:10px;
max-width:760px;
margin:0 auto;
box-shadow:0 1px 2px rgba(34,25,15,.05),0 6px 18px -14px rgba(34,25,15,.5);
font-family:var(--pw-ui);
}
body.review-mode #audio-state-badge{
font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--rv-ink-3);
min-width:56px;text-align:center;
}
body.review-mode #audio-state-badge.is-ready{color:var(--rv-green)}
body.review-mode #audio-state-badge.is-error{color:var(--rv-rose)}
body.review-mode .seek-btn{
height:24px;padding:0 9px;border-radius:999px;
border:1px solid var(--rv-line-2);background:var(--rv-paper-3);color:var(--rv-ink-2);
font-size:10px;font-weight:700;
}
body.review-mode .seek-btn:hover{border-color:var(--rv-navy);color:var(--rv-navy);background:var(--rv-paper)}
body.review-mode .pp-btn{
width:29px;height:29px;font-size:12px;
background:var(--rv-navy);color:var(--rv-navy-ink);
box-shadow:0 2px 8px -3px color-mix(in srgb,var(--rv-navy) 70%,transparent);
}
body.review-mode .pp-btn:hover{background:var(--rv-navy);filter:brightness(1.1)}
/* scrub track: 5px visual, 16px hit area, thumb on hover */
body.review-mode #audio-progress-track{height:5px;background:var(--rv-track);border-radius:99px;overflow:visible}
body.review-mode #audio-buffered{
position:absolute;left:0;top:0;height:100%;width:0%;
background:var(--rv-buffer);border-radius:99px;pointer-events:none;
}
body.review-mode #audio-progress-fill{position:absolute;left:0;top:0;background:var(--rv-navy);box-shadow:none}
body.review-mode #audio-progress-track::after{
content:"";position:absolute;top:50%;left:var(--pp,0%);
width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
background:var(--rv-navy);box-shadow:0 1px 4px rgba(20,15,8,.35);
opacity:0;transition:opacity .12s;pointer-events:none;
}
body.review-mode #audio-progress-track:hover::after{opacity:1}
body.review-mode #audio-click-overlay{inset:-7px}
body.review-mode #audio-time-display{
font-family:var(--pw-display);font-size:11px;font-weight:700;
color:var(--rv-ink-2);min-width:92px;
}
body.review-mode .speed-select{
background:var(--rv-paper-3);border:1px solid var(--rv-line-2);color:var(--rv-ink-2);
border-radius:999px;padding:3px 8px;font-weight:700;
}
body.review-mode .speed-select:hover{border-color:var(--rv-navy)}
body.review-mode #vol-slider::-webkit-slider-runnable-track{background:var(--rv-track)}
body.review-mode #vol-slider::-webkit-slider-thumb{background:var(--rv-navy)}
/* ── the timecode beside each question — the jump ────────────────────────
The single most valuable control on the screen, so it is a real button:
a play glyph, the minute and second, and the verdict in its colour. */
body.review-mode .q-jump-btn{
display:inline-flex;align-items:center;gap:5px;
height:22px;padding:0 10px;margin-left:8px;
border-radius:999px;
border:1px solid color-mix(in srgb,var(--rv-navy) 34%,transparent);
background:color-mix(in srgb,var(--rv-navy) 7%,transparent);
color:var(--rv-navy);
font-family:var(--pw-display);font-size:11px;font-weight:700;line-height:1;
font-variant-numeric:tabular-nums;letter-spacing:0;
cursor:pointer;vertical-align:middle;white-space:nowrap;
transition:background .14s,border-color .14s,color .14s,box-shadow .14s;
}
body.review-mode .q-jump-btn::before{content:"▶";font-size:7.5px;line-height:1;opacity:.8}
body.review-mode .q-jump-btn:hover{
background:var(--rv-navy);border-color:var(--rv-navy);color:var(--rv-navy-ink);
box-shadow:0 3px 10px -5px color-mix(in srgb,var(--rv-navy) 80%,transparent);
}
body.review-mode .q-jump-btn:hover::before{opacity:1}
body.review-mode .q-jump-btn:focus-visible{outline:2px solid var(--rv-navy);outline-offset:2px}
body.review-mode .q-jump-btn.is-correct{border-color:color-mix(in srgb,var(--rv-green) 40%,transparent);background:color-mix(in srgb,var(--rv-green) 9%,transparent);color:var(--rv-green)}
body.review-mode .q-jump-btn.is-correct:hover{background:var(--rv-green);border-color:var(--rv-green);color:#fff}
body.review-mode .q-jump-btn.is-wrong{border-color:color-mix(in srgb,var(--rv-rose) 38%,transparent);background:color-mix(in srgb,var(--rv-rose) 8%,transparent);color:var(--rv-rose)}
body.review-mode .q-jump-btn.is-wrong:hover{background:var(--rv-rose);border-color:var(--rv-rose);color:#fff}
body.review-mode .q-jump-btn.is-skipped{border-color:var(--rv-line-2);background:transparent;color:var(--rv-ink-3)}
body.review-mode .q-jump-btn.is-skipped:hover{background:var(--rv-ink-3);border-color:var(--rv-ink-3);color:var(--rv-paper)}
/* the moment the jump lands on, so the click is visibly answered */
body.review-mode .q-jump-btn.is-jumping{box-shadow:0 0 0 3px color-mix(in srgb,var(--rv-navy) 22%,transparent)}
/* Review borrows the exam sheet exactly as the exam leaves it — the text
column keeps its measured right margin, so nothing on it moves.
The "← Results" button the footer swaps in for Submit: */
body.review-mode #sub-btn{
font-family:var(--pw-ui);font-weight:700;letter-spacing:-.005em;
}
/* ── ported annotation UI ── */
.note-modal{
position:absolute;z-index:10000;width:290px;background:var(--paper);
border:1px solid var(--line-2);border-radius:10px;
box-shadow:0 12px 34px rgba(0,0,0,.20),0 2px 6px rgba(0,0,0,.08);
padding:0;opacity:0;transform:translateY(6px) scale(.97);pointer-events:none;
transition:opacity .18s cubic-bezier(.2,.75,.2,1),transform .18s cubic-bezier(.2,.75,.2,1)}
.note-modal.show{opacity:1;transform:none;pointer-events:auto}
.note-modal .nm-head{
display:flex;align-items:center;justify-content:space-between;
padding:9px 12px 7px;border-bottom:1px solid var(--line)}
.note-modal .nm-title{
font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.note-modal .nm-x{
border:none;background:transparent;font-size:17px;line-height:1;color:var(--ink-mute);
cursor:pointer;padding:0 2px;transition:color .12s}
.note-modal .nm-x:hover{color:var(--ink)}
.note-modal .nm-text{
width:100%;border:none;outline:none;resize:vertical;padding:11px 12px;
font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink);
background:transparent;min-height:74px}
.note-modal .nm-foot{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:8px 10px 9px;border-top:1px solid var(--line);background:var(--bg-elev);
border-radius:0 0 10px 10px}
.note-modal .nm-hint{font-size:10px;color:var(--ink-mute)}
.note-modal .nm-actions{display:flex;gap:6px}
.note-modal .nm-btn{
border-radius:5px;padding:5px 11px;font-family:var(--sans);font-size:11.5px;font-weight:700;
cursor:pointer;transition:transform .12s cubic-bezier(.2,.7,.2,1),background .12s,border-color .12s}
.note-modal .nm-btn:active{transform:scale(.96)}
.note-modal .nm-btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-mute)}
.note-modal .nm-btn.ghost:hover{border-color:var(--primary);color:var(--primary)}
.note-modal .nm-btn.solid{background:var(--primary);border:1px solid var(--primary);color:#fff}
.note-modal .nm-btn.solid:hover{background:var(--primary-2)}
/* ── pacing marker ── */
.pace-note{
position:fixed;right:18px;bottom:78px;z-index:9998;display:flex;align-items:stretch;gap:0;
max-width:330px;background:var(--paper);border:1px solid var(--line-2);border-radius:9px;
box-shadow:0 10px 30px rgba(0,0,0,.16);overflow:hidden;
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .3s cubic-bezier(.2,.75,.2,1),transform .3s cubic-bezier(.2,.75,.2,1)}
.pace-note.show{opacity:1;transform:none;pointer-events:auto}
.pace-note .pn-bar{width:4px;background:linear-gradient(180deg,var(--primary),#e0724a);flex-shrink:0}
.pace-note .pn-body{padding:10px 6px 11px 12px;display:flex;flex-direction:column;gap:2px}
.pace-note .pn-body strong{font-size:12.5px;font-weight:800;color:var(--ink)}
.pace-note .pn-body span{font-size:11.5px;line-height:1.45;color:var(--ink-mute)}
.pace-note .pn-x{
border:none;background:transparent;font-size:16px;color:var(--ink-mute);cursor:pointer;
padding:0 10px 0 6px;transition:color .12s}
.pace-note .pn-x:hover{color:var(--ink)}
/* ── results: mark-loss analysis + attempt history ── */
#stage-results .v3-insight{
border:1px solid var(--pw-line);border-radius:12px;padding:15px 17px 16px;margin:0 0 18px;
background:linear-gradient(180deg,rgba(36,75,142,.035),transparent)}
#stage-results .v3-insight h5{
margin:0 0 3px;font-family:var(--pw-ui);font-size:10.5px;font-weight:800;
letter-spacing:.17em;text-transform:uppercase;color:var(--pw-red)}
#stage-results .v3-insight .v3-lead{
font-family:var(--pw-display);font-size:15.5px;font-weight:600;color:var(--pw-ink);
letter-spacing:-.01em;margin-bottom:9px;line-height:1.4}
#stage-results .v3-causes{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
#stage-results .v3-cause{
display:flex;align-items:baseline;gap:6px;border:1px solid var(--pw-line);
border-radius:7px;padding:6px 11px;background:var(--pw-paper);
animation:pwFade .45s both}
#stage-results .v3-cause b{font-size:15px;font-weight:800;font-family:var(--pw-ui)}
#stage-results .v3-cause span{font-size:11px;color:var(--ink-mute);font-weight:600}
#stage-results .v3-cause.fixable b{color:var(--pw-emerald)}
#stage-results .v3-cause.real b{color:var(--pw-status-red)}
#stage-results .v3-cause.blank b{color:var(--pw-amber)}
#stage-results .v3-note{
margin-top:10px;font-size:12px;line-height:1.5;color:var(--ink-soft);
padding-top:9px;border-top:1px dashed var(--pw-line)}
#stage-results .v3-hist{display:flex;align-items:flex-end;gap:9px;margin-top:9px;min-height:56px}
#stage-results .v3-hbar{
flex:0 0 34px;display:flex;flex-direction:column;align-items:center;gap:4px;
animation:pwRise .5s both}
#stage-results .v3-hbar i{
display:block;width:100%;border-radius:4px 4px 2px 2px;
background:linear-gradient(180deg,#7f9fd0,var(--pw-red));font-style:normal;
transition:height .5s cubic-bezier(.2,.75,.2,1)}
#stage-results .v3-hbar.now i{background:linear-gradient(180deg,var(--pw-red),var(--pw-burgundy))}
#stage-results .v3-hbar em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--ink-soft);font-family:var(--pw-ui)}
#stage-results .v3-hbar small{font-size:9px;color:var(--ink-mute)}
/* cause tag inside the answer table */
#stage-results .cause-tag{
display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
#stage-results .cause-tag.plural{background:#fff3d6;color:#8a5a1e}
#stage-results .cause-tag.spelling{background:#e0f0fb;color:#1c5e8a}
#stage-results .cause-tag.limit{background:#fde8d6;color:#8a4a1e}
/* ── stage transitions ── */
@keyframes pwStageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pwStageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
@keyframes pwSoftIn{from{opacity:0}to{opacity:1}}
#stage-registration.active,#stage-reading-intro.active,
#stage-completion.active,#stage-results.active{
animation:pwStageIn .44s cubic-bezier(.2,.75,.2,1) both}
/* the exam screen fades only — no movement, nothing to distract */
#stage-reading.active{animation:pwSoftIn .22s ease both}
.stage.stage-leaving{
display:flex!important;animation:pwStageOut .24s cubic-bezier(.4,0,1,1) both;pointer-events:none}
/* band count-up sits on its own layer so the digits don't reflow the card */
@media (prefers-reduced-motion:reduce){
.note-modal,.pace-note{transition:none!important}
#stage-registration.active,#stage-reading-intro.active,#stage-completion.active,
#stage-results.active,#stage-reading.active,.stage.stage-leaving,
#stage-results .v3-cause,#stage-results .v3-hbar{animation:none!important}
#stage-results .v3-hbar i{transition:none!important}
}
/* ── V3 pass 2: filters, timing, trap notes ── */
#stage-results .v3-filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
#stage-results .v3-fchip{
border:1px solid var(--pw-line);background:var(--pw-paper);border-radius:8px;
padding:6px 12px;font-family:var(--pw-ui);font-size:11.5px;font-weight:700;color:var(--ink-soft);
cursor:pointer;display:flex;align-items:center;gap:6px;
transition:transform .13s cubic-bezier(.2,.7,.2,1),border-color .13s,background .13s,color .13s}
#stage-results .v3-fchip:hover{transform:translateY(-1px);border-color:var(--pw-red)}
#stage-results .v3-fchip b{font-size:12px;color:var(--pw-red)}
#stage-results .v3-fchip.on{background:var(--pw-red);border-color:var(--pw-red);color:#fff}
#stage-results .v3-fchip.on b{color:#fff}
#stage-results .v3-fchip.slip{border-color:#bfe0cb}
#stage-results .v3-fchip.slip b{color:var(--pw-emerald)}
#stage-results .v3-fchip.slow{border-color:#f0d9bf}
#stage-results .td-secs{
display:block;font-size:9px;font-weight:700;color:var(--ink-mute);
font-family:var(--pw-ui);letter-spacing:.02em;margin-top:1px}
#stage-results .td-secs.slow{color:#b06a1e}
#stage-results .q-bubble{transition:transform .12s,opacity .2s}
/* ═══════════════════════════════════════════════════════════════════
V3 — POLISH ON THE REPLICA
Everything here is additive: motion, focus and feedback. No colour,
size, position or wording that a student meets on exam day changes.
The rule for anything in this block: if it would make someone
surprised on the day, it does not belong here.
═══════════════════════════════════════════════════════════════════ */
/* Options gain a hover and a press, which the real player lacks and which
nobody could be surprised by — it only ever confirms where the cursor is. */
.option{transition:background .13s ease, box-shadow .13s ease}
.option:hover{background:rgba(65,142,200,.07)}
.option:active{background:rgba(65,142,200,.13)}
/* Keyboard focus. Invisible to mouse users, essential for everyone else —
the real player's focus states are close to unusable. */
.option:focus-within{box-shadow:inset 0 0 0 2px rgba(65,142,200,.55);border-radius:3px}
.gap-input:focus-visible,.dropdown:focus-visible,.q-pill:focus-visible,
.heading-tile:focus-visible,.word-tile:focus-visible,.qnav-btn:focus-visible{
outline:2px solid #418EC8;outline-offset:2px}
/* A single quiet pulse when an answer lands, so a student on a slow phone
knows the tap registered without having to look at the navigation bar. */
@keyframes answerLanded{
0%{box-shadow:0 0 0 0 rgba(65,142,200,.34)}
100%{box-shadow:0 0 0 7px rgba(65,142,200,0)}}
.q-pill.just-answered{animation:answerLanded .5s ease-out}
/* Passage scrolling gets a hair of smoothing; jump-to-question no longer
teleports. Same destination, less disorientation. */
#passage-pane,#questions-pane{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
.option,.q-pill{transition:none!important}
.q-pill.just-answered{animation:none!important}
#passage-pane,#questions-pane{scroll-behavior:auto}
}
/* ── notes drawer (mirrors the real player's Notes panel) ── */.anno-drawer{
position:fixed;top:0;right:0;bottom:0;width:300px;max-width:86vw;z-index:9997;
background:var(--panel);border-left:1px solid var(--line-2);
display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.75,.2,1);
box-shadow:-8px 0 28px rgba(0,0,0,.10)}
.anno-drawer.open{transform:none}
/* Opening the sidebar RE-LAYS OUT the exam, it does not overlay it: measured
at 1140px of content with the 300px panel beside it, the divider moving to
x=570 and the nav arrows to right:332px. */
body.anno-open #stage-listening{padding-right:300px;transition:padding-right .28s cubic-bezier(.2,.75,.2,1)}
@media (max-width:900px){ body.anno-open #stage-listening{padding-right:0} }
.anno-drawer .nd-head{
display:flex;align-items:center;justify-content:space-between;
padding:0 14px;height:56px;flex:0 0 auto;
background:var(--paper);border-bottom:1px solid var(--line-2)}
.anno-drawer .nd-title{font-family:var(--sans);font-size:16px;font-weight:400;color:var(--ink)}
.anno-drawer .nd-x{
border:none;background:transparent;font-size:22px;line-height:1;color:var(--ink);
cursor:pointer;padding:0 4px;transition:opacity .12s}
.anno-drawer .nd-x:hover{opacity:.6}
.anno-drawer .nd-body{flex:1;overflow-y:auto;padding:14px}
.anno-drawer .nd-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
height:100%;text-align:center;padding:0 26px;gap:12px}
.anno-drawer .nd-empty b{font-family:var(--sans);font-size:19px;font-weight:400;color:var(--ink);line-height:1.35}
.anno-drawer .nd-empty span{font-family:var(--sans);font-size:13px;color:var(--ink-mute);line-height:1.5}
.anno-drawer .nd-group{
font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-mute);margin:10px 2px 7px}
.anno-drawer .nd-item{
background:var(--paper);border:1px solid var(--line-2);border-radius:5px;
padding:10px 11px;margin-bottom:9px;cursor:pointer;
transition:border-color .14s,transform .12s cubic-bezier(.2,.7,.2,1)}
.anno-drawer .nd-item:hover{border-color:#418EC8;transform:translateY(-1px)}
.anno-drawer .nd-quote{
font-family:var(--sans);font-size:11.5px;color:var(--ink-mute);line-height:1.45;
padding-left:8px;border-left:3px solid var(--hl-y);margin-bottom:6px}
.anno-drawer .nd-text{font-family:var(--sans);font-size:13.5px;color:var(--ink);line-height:1.5;white-space:pre-wrap}
.anno-drawer .nd-del{
float:right;border:none;background:transparent;color:var(--ink-mute);cursor:pointer;
font-size:13px;padding:0 0 0 8px}
.anno-drawer .nd-del:hover{color:var(--crimson)}
.hl.note-flash{animation:noteFlash 1.1s ease-out}
@keyframes noteFlash{0%,100%{box-shadow:0 0 0 0 rgba(65,142,200,0)}25%{box-shadow:0 0 0 6px rgba(65,142,200,.32)}}
@media (prefers-reduced-motion:reduce){.anno-drawer{transition:none!important}.hl.note-flash{animation:none!important}}
/* ── selection toolbar, identical to Reading's ── */
/* ============================================================
HIGHLIGHTER + DICTIONARY POPUPS
============================================================ */
/* Real player's adder: white card, 1px #737373, 4px radius, icon-above-label
buttons with 12px #737373 labels, and a small arrow pointing at the text. */
.hl-popup{position:absolute;z-index:9999;background:#fff;padding:0;border:1px solid #737373;border-radius:4px;
display:flex;gap:0;align-items:stretch;transform:translateX(-50%);
transition:opacity .15s ease,transform .15s ease;opacity:0;pointer-events:none;
box-shadow:0 2px 10px rgba(0,0,0,.25)}
.hl-popup.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(8px)}
/* the pointer sits on the TOP edge, facing the selection above it */
.hl-popup::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
border:6px solid transparent;border-bottom-color:#fff;margin-bottom:-1px}
.hl-popup::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
border:7px solid transparent;border-bottom-color:#737373}
/* Measured: the adder is 114.1 x 55 with just two buttons — Note 45.4 x 53 and
Highlight 66.7 x 53. Clear is ours, and it only appears when the selection
already sits on a highlight, so the resting toolbar matches the official one. */
.hl-popup .tool-btn{min-width:45.4px;height:53px;border:none;background:transparent;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:6px 7px;color:#737373;transition:background .12s}
.hl-popup .tool-btn.erase{display:none;border-left:1px solid #e0e0e0}
.hl-popup.has-hl .tool-btn.erase{display:flex}
.hl-popup .tool-btn:hover{background:#f0f0f0}
/* The official adder's glyphs are Hypothesis's quote bubble (Note) and a
downward highlighter marker (Highlight). The toolbar markup is shared, so the
shapes are swapped in with a mask rather than by editing the SVG. */
.hl-popup .tool-btn>svg{display:none}
.hl-popup .tool-btn::before{content:'';display:block;width:17px;height:17px;flex-shrink:0;
background:currentColor;-webkit-mask:center/contain no-repeat var(--tb-ic);mask:center/contain no-repeat var(--tb-ic)}
.hl-popup .tool-btn.note{--tb-ic:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201664%201792%22%3E%3Cpath%20d%3D%22M832%20960v-64q0-106-75-181t-181-75h-64q-14%200-23%209t-9%2023v128q0%2014%209%2023t23%209h64q26%200%2045%2019t19%2045v32q0%2026-19%2045t-45%2019H384q-26%200-45-19t-19-45V576q0-106%2075-181t181-75h384q14%200%2023-9t9-23V160q0-14-9-23t-23-9H576q-93%200-178%2036t-146%2098-98%20146-36%20178v576q0%2093%2036%20178t98%20146%20146%2098%20178%2036h192q40%200%2068-28t28-68zm768%200v-64q0-106-75-181t-181-75h-64q-14%200-23%209t-9%2023v128q0%2014%209%2023t23%209h64q26%200%2045%2019t19%2045v32q0%2026-19%2045t-45%2019h-192q-26%200-45-19t-19-45V576q0-106%2075-181t181-75h384q14%200%2023-9t9-23V160q0-14-9-23t-23-9h-384q-93%200-178%2036t-146%2098-98%20146-36%20178v576q0%2093%2036%20178t98%20146%20146%2098%20178%2036h192q40%200%2068-28t28-68z%22%2F%3E%3C%2Fsvg%3E")}
.hl-popup .tool-btn.hilite{--tb-ic:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M7%201h6v9l-3%204-3-4V1zM4%2016h12v2H4v-2z%22%2F%3E%3C%2Fsvg%3E")}
.hl-popup .tool-btn.erase>svg{display:block;width:17px;height:17px;flex-shrink:0}
.hl-popup .tool-btn.erase::before{display:none}
.hl-popup .tool-btn span{font-family:var(--sans);font-size:12px;line-height:1;color:#737373;white-space:nowrap}
/* Wrapper stages sit above the page canvas (same as Reading). Reading's .stage.active has no z-index, so the
canvas painted OVER the registration card.
This is deliberately scoped to the four WRAPPER stages: giving #stage-reading
a z-index would turn it into a stacking context and trap the exam's own
position:fixed popups (#hl-popup, #menu-dropdown, #notif-popup) inside it.
The exam stage keeps z-index:auto and its existing stacking behaviour. */
:is(#stage-registration,#stage-reading-intro,#stage-completion,#stage-results).stage.active{
z-index:25;
}
/* ── highlight + note colour, matched to Reading ── */
.hl-y,.hl-g,.hl-p{background:#7D4A5A;color:#fff}
body.dark-mode .hl-y,body.dark-mode .hl-g,body.dark-mode .hl-p{background:#8f5a6a;color:#fff}
.hl-note{background:#7D4A5A;color:#fff;border-bottom:2px dashed #d4a017;cursor:pointer}
.hl.hl-note{position:relative}
.hl.hl-note::after{
content:"";position:absolute;top:-3px;right:-3px;width:6px;height:6px;
border-radius:50%;background:#d4a017;box-shadow:0 0 0 1.5px var(--paper)}
/* ── COSMIC DUST → DEEP FIELD ─────────────────────────────────────────────
The sky's own host, first child of body, under every wrapper stage. Shown
only while a wrapper stage is .active — the exam never carries it. The
CSS ground here is painted before the WebGL canvas fades up (and is the
whole sky if WebGL is missing), so there is never a black frame. Colours
are literal: html2canvas cannot read color-mix(). */
#cdi-stars-host{position:fixed;inset:0;z-index:0;display:none;pointer-events:none;
overflow:hidden;contain:strict;
background:
radial-gradient(60% 48% at 62% 40%,rgba(22,54,72,.34),transparent 70%),
radial-gradient(48% 40% at 84% 78%,rgba(78,46,30,.22),transparent 66%),
linear-gradient(180deg,#0a0c16 0%,#05060e 55%,#02020a 100%)}
#cdi-stars-host #cdi-stars{position:absolute;left:0;top:0;display:block}
/* CSS-only sky (no WebGL): the baked star layer sits under a soft vignette */
#cdi-stars-host.cdi-css-sky::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(76% 62% at 50% 47%,transparent 34%,rgba(1,2,6,.34) 72%,rgba(0,0,3,.76) 100%)}
@media print{#cdi-stars-host{display:none!important}}
/* The particle prelude is retired: the field is the atmosphere now. */
#ch-strike,#ch-bloom{display:none!important}
/* ── COSMOS · the compact registration console ──────────────────────────────
DEEP FIELD · the cards. Four glass panels floating over a photographic sky.
Nothing here touches the DOM: every id, class, label and handler on the
registration, briefing and completion stages is untouched; this sheet only
restyles and re-spaces them. Deleting this block restores the wide chamber
card exactly.
Rules of this sheet
· literal rgba()/hex only — color-mix() breaks html2canvas 1.4.1 (the PDF)
· every selector is scoped to a wrapper stage id; .btn/.btn-primary are
shared with the exam and must never be restyled bare
· the glass recipe, the type scale and the button family are defined ONCE
as custom properties on the three stages and read everywhere below, so
the three cards cannot drift apart
The glass: a warm-dark tint (blue-black, never grey), an 18px blur that
lets the star field bleed through, a 1px "starlight" border, a warm hairline
of light along the top edge, a faint nebula colour bleed (rust top-left,
oxygen-teal bottom-right) and a long, soft shadow that reads as a panel
floating in a vacuum. Corner radius 20px. */
:is(#stage-registration,#stage-listening-intro,#stage-completion){
/* glass */
--cx-glass:linear-gradient(180deg,rgba(14,18,30,.50),rgba(5,8,16,.68));
--cx-edge:rgba(255,240,220,.22);
--cx-edge-2:rgba(255,240,220,.22);
--cx-radius:20px;
--cx-shadow:0 0 0 1px rgba(0,0,0,.26) inset,
0 1px 0 rgba(255,240,220,.28) inset,
0 1px 2px rgba(0,0,0,.5),
0 12px 28px -12px rgba(0,0,0,.7),
0 40px 90px -24px rgba(0,0,0,.85),
0 110px 200px -60px rgba(0,0,0,.75);
/* ink — warm-neutral, tuned for ≥ 7:1 on the glass */
--cx-ink:#f6f4ef;
--cx-ink-2:#c6ccd8;
--cx-ink-3:#aab4c4;
--cx-ink-4:#7c889b;
/* the sun — the one accent every hover borrows */
--cx-sun:#ffcf8a;
--cx-sun-glow:0 0 0 1px rgba(255,200,120,.25),0 8px 30px rgba(255,170,80,.25);
/* the one primary family: the blue the registration card already used */
--cx-btn:linear-gradient(180deg,#2c82d4,#14538f);
--cx-btn-hover:linear-gradient(180deg,#3a93e4,#17609f);
--cx-btn-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.26),
0 1px 2px rgba(0,0,0,.4),0 14px 30px -20px rgba(80,160,240,.9);
--cx-t:150ms ease;
/* re-point the chamber tokens the base rules read */
--ch-ink:var(--cx-ink);--ch-ink-2:var(--cx-ink-2);--ch-ink-3:var(--cx-ink-3);--ch-ink-4:var(--cx-ink-4);
--ch-line:rgba(255,240,220,.10);--ch-line-2:rgba(255,240,220,.16);--ch-line-3:rgba(255,240,220,.26);
--ink:var(--cx-ink);--ink-soft:var(--cx-ink-2);--ink-mute:var(--cx-ink-3);
--line:rgba(255,240,220,.10);--line-2:rgba(255,240,220,.16);--line-3:rgba(255,240,220,.16);
--pw-ink:var(--cx-ink);--pw-ink-2:var(--cx-ink-2);--pw-ink-3:var(--cx-ink-3);
--pw-line:rgba(255,240,220,.10);--pw-line-2:rgba(255,240,220,.16);
color:var(--cx-ink-2)}
/* the stage vignette: lighter than the chamber's, so the sky stays a photograph
and the card does the darkening, not the corners */
:is(#stage-registration,#stage-listening-intro,#stage-completion)::after{
background:radial-gradient(80% 64% at 50% 42%,transparent 44%,rgba(2,3,8,.22) 78%,rgba(1,2,6,.58) 100%)}
/* ── the glass, once ─────────────────────────────────────────────────────── */
#stage-registration .start-card,
#stage-listening-intro .trans-card,
#stage-completion .complete-card{
background:var(--cx-glass);
border:1px solid var(--cx-edge);
border-radius:var(--cx-radius);
box-shadow:var(--cx-shadow);
-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
/* the hairline of starlight along the top edge — warm, brightest just left of
centre, the way a panel catches a light source sitting upper-left */
#stage-registration .start-card::before,
#stage-listening-intro .trans-card::before,
#stage-completion .complete-card::before{
background:linear-gradient(90deg,transparent,rgba(255,244,228,.10) 8%,rgba(255,236,208,.48) 30%,
rgba(255,250,240,.86) 44%,rgba(255,236,208,.44) 62%,rgba(255,244,228,.10) 90%,transparent)}
/* the nebula bleeding through: rust from the top-left (where the sun sits),
oxygen-teal from the lower right. Painted UNDER the content — the base rule
put it at z-index:0, which in the card's own stacking context is above the
in-flow text. -1 paints it between the card background and the copy. */
#stage-registration .start-card::after,
#stage-listening-intro .trans-card::after,
#stage-completion .complete-card::after{
z-index:-1;
background:radial-gradient(150% 120% at 4% -10%,rgba(255,176,110,.14),rgba(255,176,110,.045) 50%,transparent 84%),
radial-gradient(130% 110% at 106% 112%,rgba(72,158,166,.13),rgba(72,158,166,.04) 50%,transparent 82%),
linear-gradient(0deg,rgba(255,244,228,.06),transparent 1px),
linear-gradient(115deg,rgba(255,255,255,.04),transparent 38%),
linear-gradient(180deg,rgba(255,255,255,.025),transparent 26%)}
/* ── shared type ─────────────────────────────────────────────────────────── */
:is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-title,.trans-title,.complete-title){
font-family:var(--ch-display);font-weight:600;letter-spacing:-.026em;color:var(--cx-ink);line-height:1.06}
:is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.ch-kicker,.trans-eyebrow){
font-family:var(--ch-ui);font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
color:var(--cx-ink-3)}
/* the kicker's dot was the chamber's red; here it is the sun */
:is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-dot{
background:var(--cx-sun);
box-shadow:0 0 0 3px rgba(255,200,120,.16),0 0 12px rgba(255,190,110,.65)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-fineprint{
color:var(--cx-ink-3);letter-spacing:.005em}
:is(#stage-registration,#stage-listening-intro,#stage-completion) kbd{
color:var(--cx-ink-2);border-color:rgba(255,240,220,.20);background:rgba(255,255,255,.04)}
/* ── the one button family ───────────────────────────────────────────────── */
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary{
background:var(--cx-btn);
border-radius:12px;
box-shadow:var(--cx-btn-shadow);
transition:transform var(--cx-t),box-shadow var(--cx-t),background var(--cx-t),filter var(--cx-t)}
/* hover: the sun's light on the glass, not a brighter blue */
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:hover{
transform:translateY(-1px);
background:var(--cx-btn-hover);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.24),
0 1px 2px rgba(0,0,0,.38),var(--cx-sun-glow)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:active{
transform:translateY(0) scale(.994);
box-shadow:inset 0 2px 5px rgba(0,0,0,.34),0 1px 2px rgba(0,0,0,.3),0 0 0 1px rgba(255,200,120,.18)}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:focus-visible{
outline:2px solid rgba(255,214,160,.9);outline-offset:3px}
/* dormant (name not yet valid): the SAME blue, at 55% and desaturated — clearly
not yet live, still unmistakably the primary action. No glow, no lift. */
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:disabled,
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-dormant{
background:var(--cx-btn);
color:#fff;
opacity:.55;filter:saturate(.6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.35);
transform:none}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-dormant:hover{
background:var(--cx-btn);color:#fff;
opacity:.68;filter:saturate(.75);
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.35);
transform:none}
/* the moment the name is valid: full opacity, full colour, then the ignition ring */
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-live{opacity:1;filter:none}
/* the ignition ring, re-coloured from the chamber red to the sun */
@keyframes cxIgnite{
0%{box-shadow:var(--cx-btn-shadow),0 0 0 0 rgba(255,200,120,.55)}
100%{box-shadow:var(--cx-btn-shadow),0 0 0 14px rgba(255,200,120,0)}}
:is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-live{
animation:cxIgnite .72s var(--ch-e) 1}
/* all three primaries share one height, one radius, one weight */
#stage-registration #start-btn,
#stage-listening-intro .btn-lg,
#stage-completion .btn-lg{
height:48px;padding:0 22px;font-size:13.5px;font-weight:700;letter-spacing:.01em;
border-radius:12px;margin-top:0}
/* ── the card's entrance (briefing / completion) ─────────────────────────────
goToStage re-adds .cdi-enter on every visit. The chamber's entrance only ran
under body.cdi-3d-on, which no longer exists, so the cards simply popped. */
@keyframes cxCardIn{from{opacity:0;transform:translate3d(0,16px,0) scale(.985)}to{opacity:1;transform:none}}
#stage-listening-intro.cdi-enter .trans-card,
#stage-completion.cdi-enter .complete-card{animation:cxCardIn .7s var(--ch-e) both}
/* ── REGISTRATION · the console ──────────────────────────────────────────────
Two columns of copy became one small console, low on the frame, carrying
only what a candidate needs in the ten seconds before they type their name.
`margin:auto auto `: the stage centres the card with auto margins, so
leaving the top auto and pinning the bottom drops it without touching the
stage's own flex layout — and keeps it clear of the solar system, which the
sky places upper-left. */
#stage-registration .start-card{
max-width:600px;
margin:auto auto clamp(14px,4vh,56px)}
#stage-registration .ch-grid{display:block}
#stage-registration .ch-ident{
border-right:0;border-bottom:0;background:none;display:block;
padding:clamp(18px,2vw,22px) clamp(20px,2.4vw,28px) 0}
#stage-registration .ch-action{
padding:clamp(12px,1.4vw,14px) clamp(20px,2.4vw,28px) clamp(16px,1.8vw,20px);
display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start}
/* the words the sky, the briefing screen or the field itself says better */
#stage-registration :is(.brand-tagline,.ch-lede,.start-rules,.ch-label,.input-label,
.ch-credit,.channel-promo .channel-desc,.channel-promo .channel-cta){display:none}
/* the hint is the field's error channel — hidden until it has something to say */
#stage-registration .ch-hint{display:none;margin:8px 2px 0}
#stage-registration .ch-field.is-invalid .ch-hint{display:flex}
/* identity, at a fraction of the weight */
#stage-registration .brand-block{gap:10px;margin:0 0 14px}
#stage-registration .brand-logo{width:30px;height:30px;border-radius:9px;
box-shadow:0 4px 12px -5px rgba(9,38,92,.9),0 0 0 1px rgba(255,255,255,.10)}
#stage-registration .brand-eyebrow{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--cx-ink)}
#stage-registration .ch-kicker{gap:8px}
#stage-registration .start-title{font-size:clamp(22px,2vw,28px);margin:7px 0 0!important;max-width:none}
/* 40 · 40 · 4 as one line of reading, not a scoreboard */
#stage-registration .start-meta{
display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:5px 16px;
margin:10px 0 0;padding:0;border:0;background:none;box-shadow:none}
#stage-registration .start-meta-item{display:flex;align-items:baseline;gap:6px;flex:0 0 auto;text-align:left}
#stage-registration .start-meta-item .n{font-size:15px;letter-spacing:-.01em;color:var(--cx-ink)}
#stage-registration .start-meta-item .l{font-size:9.5px;letter-spacing:.14em;margin:0;color:var(--cx-ink-3)}
#stage-registration .start-meta-divider{align-self:center;height:10px;background:rgba(255,240,220,.16)}
/* name and Begin on one row, matched heights so the pair reads as one control */
#stage-registration .ch-field{grid-column:1;grid-row:1;margin:0;padding:0}
#stage-registration .input-field{
height:48px;padding:0 15px;font-size:14px;border-radius:12px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,240,220,.16);color:var(--cx-ink)}
#stage-registration .input-field::placeholder{color:var(--cx-ink-4)}
#stage-registration .input-field:hover{background:rgba(255,255,255,.07);border-color:rgba(255,240,220,.26)}
#stage-registration .ch-input-wrap,
#stage-registration .ch-input-wrap::after{border-radius:12px}
#stage-registration .ch-input-wrap::after{inset:-1px;border-radius:13px;
background:linear-gradient(115deg,rgba(176,212,255,1),rgba(128,168,235,.45) 52%,rgba(255,206,150,.55))}
#stage-registration .input-field:focus{
background:rgba(130,180,240,.075);border-color:transparent;
box-shadow:0 0 0 5px rgba(130,180,240,.10),0 10px 30px -16px rgba(150,195,245,.7)}
#stage-registration #start-btn{grid-column:2;grid-row:1;width:auto;white-space:nowrap;margin:0;
transition:transform var(--cx-t),box-shadow var(--cx-t),background var(--cx-t),filter var(--cx-t),opacity var(--cx-t)}
#stage-registration #start-btn.is-dormant .ch-arrow{opacity:.9}
#stage-registration .ch-fineprint{grid-column:1/-1;grid-row:2;text-align:left;
margin:12px 2px 0;font-size:11px;line-height:1.5}
/* ── the Telegram strip: the same glass, a darker foot ───────────────────────
A hairline above, a slightly deeper tint below it, the brand blue kept only
on the icon. Registration and completion share it. */
:is(#stage-registration,#stage-completion) .channel-promo{
padding:10px clamp(20px,2.4vw,28px);gap:10px;
background:linear-gradient(180deg,rgba(3,5,11,.16),rgba(2,4,9,.34));
border-top:1px solid rgba(255,240,220,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
transition:background var(--cx-t)}
:is(#stage-registration,#stage-completion) .channel-promo:hover{
background:linear-gradient(180deg,rgba(34,158,217,.10),rgba(2,4,9,.34))}
:is(#stage-registration,#stage-completion) .channel-promo .tg-icon{
width:22px;height:22px;border-radius:7px;font-size:11px;
box-shadow:0 4px 12px -4px rgba(34,158,217,.9),0 0 0 1px rgba(255,255,255,.08)}
:is(#stage-registration,#stage-completion) .channel-promo .channel-name{
font-size:11.5px;font-weight:600;color:var(--cx-ink-2)}
:is(#stage-registration,#stage-completion) .channel-promo:hover .channel-name{color:var(--cx-ink)}
#stage-completion :is(.channel-promo .channel-desc,.channel-promo .channel-cta){display:none}
@media (max-width:560px){
#stage-registration .ch-action{grid-template-columns:1fr}
#stage-registration #start-btn{grid-column:1;grid-row:2;width:100%;margin-top:9px}
#stage-registration .ch-fineprint{grid-row:3}
#stage-registration .start-card{margin-bottom:16px}
}
/* ── the briefing's vignette must still leave with it ─────────────────────── */
#stage-listening-intro::after{transition:opacity .24s ease}
body.cdi-exit #stage-listening-intro::after{opacity:0}
/* ── BRIEFING ────────────────────────────────────────────────────────────────
Same width, same place on the frame as the registration console, so moving
between the two screens the card stays put and only its contents change. */
#stage-listening-intro .trans-card{
max-width:600px;margin:auto auto clamp(14px,4vh,56px);
padding:clamp(18px,2vw,22px) clamp(20px,2.4vw,28px) clamp(16px,1.8vw,20px)}
#stage-listening-intro .ch-head{gap:12px;margin-bottom:12px}
#stage-listening-intro .ch-mark{width:32px;height:32px;border-radius:10px;
background:linear-gradient(158deg,rgba(255,220,170,.16),rgba(255,220,170,.03));
border:1px solid rgba(255,240,220,.18);color:#ffd9a6;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -12px rgba(255,190,110,.55)}
#stage-listening-intro .ch-mark svg{width:16px;height:16px}
#stage-listening-intro .trans-title{font-size:clamp(22px,2vw,28px);margin:4px 0 0}
#stage-listening-intro .trans-sub{font-size:12.5px;line-height:1.55;margin:0 0 12px;max-width:none;color:var(--cx-ink-2)}
#stage-listening-intro .ch-greet{color:var(--cx-ink)}
/* the one rule that is a property of the medium: a red-edged inset, not a
pink slab. The red stays because there it is the message. */
#stage-listening-intro .ch-once{
padding:11px 14px 11px 13px;border-radius:12px;gap:12px;margin:0 0 14px;
background:linear-gradient(90deg,rgba(225,29,60,.07),rgba(225,29,60,.015) 62%,rgba(255,255,255,.015));
border:1px solid rgba(255,240,220,.09);border-left:2px solid rgba(255,90,116,.78);
box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 0 0 1px rgba(0,0,0,.18)}
#stage-listening-intro .ch-once .ch-once-ic{
width:24px;height:24px;border-radius:8px;
background:rgba(225,29,60,.12);border:1px solid rgba(255,90,116,.26);color:#ff8f9f}
#stage-listening-intro .ch-once .ch-once-ic svg{width:13px;height:13px}
#stage-listening-intro .ch-once b{font-size:12.5px;color:#ffd6dc;margin-bottom:2px}
#stage-listening-intro .ch-once p{font-size:12.5px;line-height:1.5;color:var(--cx-ink-2)}
/* the part chips and the pacing prose: said already, one line up */
#stage-listening-intro .ch-tasks{display:none}
#stage-listening-intro .trans-notes{display:none}
#stage-listening-intro .ch-fineprint{margin-top:10px;font-size:11px;line-height:1.5}
@media (max-width:560px){
#stage-listening-intro .trans-card{margin-bottom:16px}
}
/* ── COMPLETION ──────────────────────────────────────────────────────────────
The third screen in the same frame. The three marking steps stay: they tick
as the paper is marked. The pep talk and the credit go. */
#stage-completion .complete-card{
max-width:600px;margin:auto auto clamp(14px,4vh,56px)}
#stage-completion .ch-comp-body{
padding:clamp(18px,2vw,22px) clamp(20px,2.4vw,28px) clamp(16px,1.8vw,20px)}
#stage-completion .ch-comp-head{gap:14px;margin-bottom:0}
#stage-completion .ch-seal,#stage-completion .ch-seal svg{width:44px;height:44px}
#stage-completion .ch-seal-core{inset:6px}
#stage-completion .ch-seal-core svg{width:15px;height:15px}
#stage-completion .ch-seal-pct{font-size:10.5px}
/* the ring ran blue → blue → chamber red; the last stop goes to starlight */
#stage-completion #chSealGrad stop:last-child{stop-color:#cfe6ff}
/* the moment: when the seal closes, a soft emerald ring blooms once around it
and settles to a faint halo. Pure CSS on a pseudo-element — the seal's own
JS (arc offset, percentage, .is-sealed) is untouched. */
#stage-completion .ch-seal::after{
content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
opacity:0;transform:scale(.8);
box-shadow:0 0 0 1px rgba(99,200,160,.20),0 0 22px 1px rgba(99,200,160,.22),inset 0 0 16px rgba(99,200,160,.10);
transition:opacity .6s var(--ch-e),transform .7s var(--ch-e)}
@keyframes cxSealBloom{
0%{opacity:0;transform:scale(.8)}
35%{opacity:1;transform:scale(1.08)}
100%{opacity:.75;transform:scale(1)}}
#stage-completion.is-sealed .ch-seal::after{
opacity:.75;transform:scale(1);animation:cxSealBloom 1.1s var(--ch-e) 1}
#stage-completion.is-sealed .ch-seal-core{
box-shadow:0 0 0 1px rgba(99,200,160,.22),0 0 22px -4px rgba(99,200,160,.65)}
#stage-completion .complete-title{font-size:clamp(22px,2vw,28px);margin:4px 0 0}
#stage-completion .complete-sub{font-size:12.5px;margin:5px 0 0;color:var(--cx-ink-3)}
#stage-completion.is-sealed .complete-sub{color:#8ed3b3}
#stage-completion .ch-steps{padding-top:13px;margin-top:14px;border-top:1px solid rgba(255,240,220,.10)}
#stage-completion .ch-steps li{font-size:12px;gap:10px;margin-bottom:7px}
#stage-completion .ch-step-dot{width:14px;height:14px}
#stage-completion .ch-step-dot::before{left:4.4px;top:2.4px;width:3.2px;height:6.2px}
/* the pep talk goes, and the credit with it (said twice already) */
#stage-completion .ch-note{display:none}
#stage-completion .ch-cta-slot{margin-top:14px;min-height:48px}
#stage-completion .ch-wait{font-size:11.5px;color:var(--cx-ink-3)}
/* ── wide frames: the console steps up one notch, never towards the hero ──── */
@media (min-width:1700px){
#stage-registration .start-card,
#stage-listening-intro .trans-card,
#stage-completion .complete-card{max-width:640px}
#stage-registration .start-title,
#stage-listening-intro .trans-title,
#stage-completion .complete-title{font-size:29px}
#stage-listening-intro .trans-sub,
#stage-listening-intro .ch-once p,
#stage-completion .ch-steps li{font-size:13px}
}
/* ── short viewports (1280×640 and the like) ─────────────────────────────── */
@media (max-height:700px){
#stage-registration .start-card,
#stage-listening-intro .trans-card,
#stage-completion .complete-card{margin-bottom:18px}
}
@media (max-height:620px){
#stage-registration .ch-ident{padding-top:14px}
#stage-registration .brand-block{margin-bottom:10px}
#stage-listening-intro .trans-card{padding-top:14px;padding-bottom:14px}
#stage-listening-intro .ch-head{margin-bottom:8px}
#stage-listening-intro .trans-sub{margin-bottom:10px}
#stage-completion .ch-comp-body{padding-top:14px;padding-bottom:14px}
#stage-completion .ch-steps{padding-top:10px;margin-top:10px}
#stage-completion .ch-steps li{margin-bottom:5px}
}
/* ── reduced motion: nothing on the cards moves ────────────────────────────── */
body.cdi-reduced :is(#stage-registration,#stage-listening-intro,#stage-completion) *,
body.cdi-reduced :is(#stage-registration,#stage-listening-intro,#stage-completion) *::before,
body.cdi-reduced :is(#stage-registration,#stage-listening-intro,#stage-completion) *::after,
body.cdi-reduced :is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card)::before,
body.cdi-reduced :is(#stage-registration,#stage-listening-intro,#stage-completion) :is(.start-card,.trans-card,.complete-card)::after{
animation:none!important;transition:none!important}
body.cdi-reduced #stage-completion .ch-seal::after{opacity:0}
body.cdi-reduced #stage-completion.is-sealed .ch-seal::after{opacity:.75;transform:scale(1)}
/* ── the revealed answer wraps (review mode) ────────────────────────────────
.fb-ans inherits white-space:nowrap from the exam pill, and Listening never
overrode it for review the way Reading does — so a long accepted answer was
pinned to one line and ran past the pill instead of breaking. */
body.review-mode .feedback-pill .fb-ans{
font-family:inherit;
white-space:normal;
overflow-wrap:anywhere;
max-width:30ch;
text-align:left;
padding:1px 12px 2px 8px;
line-height:1.35;
}
body.review-mode .feedback-pill{align-items:center}
/* ── the timecode, in Cosmos ────────────────────────────────────────────────
The jump button keeps its shape, its play glyph and its tabular figures —
only the colour changes to the azure the rest of the Cosmos chrome uses.
Plain values, never color-mix(): html2canvas cannot parse color(srgb …). */
body.review-mode .q-jump-btn{
border:1px solid #c9d6ea;
background:#fff;
color:#2c5fa8;
}
body.review-mode .q-jump-btn:hover{
background:#2c5fa8;border-color:#2c5fa8;color:#fff;
box-shadow:0 3px 10px -5px rgba(44,95,168,.8);
}
body.review-mode .q-jump-btn.is-correct{
border-color:rgba(31,122,67,.42);background:rgba(31,122,67,.08);color:#1f7a43}
body.review-mode .q-jump-btn.is-correct:hover{
background:#1f7a43;border-color:#1f7a43;color:#fff}
body.review-mode .q-jump-btn.is-wrong{
border-color:rgba(173,58,44,.42);background:rgba(173,58,44,.08);color:#ad3a2c}
body.review-mode .q-jump-btn.is-wrong:hover{
background:#ad3a2c;border-color:#ad3a2c;color:#fff}
/* the third verdict: a question left blank */
body.review-mode .q-jump-btn.is-skipped{
border-color:rgba(16,24,40,.16);background:rgba(16,24,40,.03);color:#7c88a0}
body.review-mode .q-jump-btn.is-skipped:hover{
background:#44506a;border-color:#44506a;color:#fff}
/* ── the transcript panel, in Cosmos ────────────────────────────────────────
Built on --rv-* tokens, so re-pointing them inside its own scope re-skins
the whole thing without touching one tp-* rule. Scoped to #transcript-panel
on purpose: --rv-navy is also read by controls outside the panel. */
body.review-mode #transcript-panel{
--rv-paper:#fbfcff; --rv-paper-2:#f5f8fd; --rv-paper-3:#eef3fb;
--rv-ink:#101828; --rv-ink-2:#44506a; --rv-ink-3:#7c88a0; --rv-ink-4:#98a3b8;
--rv-line:rgba(16,24,40,.10); --rv-line-2:rgba(16,24,40,.17);
--rv-navy:#2c5fa8; --rv-navy-ink:#ffffff;
--rv-green:#1f7a43; --rv-rose:#ad3a2c;
--rv-cur:rgba(44,95,168,.07);
--rv-mark:rgba(232,213,183,.22); --rv-mark-edge:rgba(232,213,183,.48);
--rv-track:#dbe3ef; --rv-buffer:#c3d0e4;
--rv-panel-shadow:-20px 0 64px -22px rgba(2,6,20,.30);
background:#fbfcff;
border-left:1px solid rgba(16,24,40,.10);
}
/* Wrapper background only: the IELTS screen remains byte-for-byte unchanged. */
#cdi-stars-host {background:#02050d;isolation:isolate;}
#cdi-stars-host #astra-live-canvas {position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;}
#cdi-stars-host::after {content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent 40%,rgba(0,2,8,.06) 64%,rgba(0,2,8,.06));}
@media print {#cdi-stars-host{display:none!important}}
/* ASTRA · coordinated wrapper palette. Never selects #stage-listening. */
body :is(#stage-registration,#stage-listening-intro,#stage-completion){
--cx-glass:linear-gradient(145deg,rgba(12,25,45,.86),rgba(4,10,23,.92));
--cx-edge:rgba(166,207,241,.30);--cx-edge-2:rgba(166,207,241,.23);
--cx-ink:#edf5ff;--cx-ink-2:#c0d0e2;--cx-ink-3:#96aec8;--cx-ink-4:#738ba5;
--cx-sun:#a3deff;--cx-sun-glow:0 0 0 1px rgba(152,216,255,.3),0 8px 28px rgba(77,148,225,.2);
--cx-btn:linear-gradient(135deg,#d5efff,#96c9f2);
--cx-btn-hover:linear-gradient(135deg,#eaf7ff,#afdfff);
--cx-btn-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 26px rgba(54,112,182,.22);
--cx-shadow:inset 0 1px 0 rgba(204,229,255,.16),0 0 0 1px rgba(0,0,0,.3),0 30px 100px -30px rgba(0,0,0,.9);
--ch-line:rgba(164,201,240,.12);--ch-line-2:rgba(164,201,240,.20);--ch-line-3:rgba(164,201,240,.30);
}
body #stage-registration .start-card::before,
body #stage-listening-intro .trans-card::before,
body #stage-completion .complete-card::before{
background:linear-gradient(90deg,transparent,rgba(166,216,255,.24) 15%,rgba(222,241,255,.88) 47%,rgba(144,169,244,.32) 78%,transparent);
}
body #stage-registration .start-card::after,
body #stage-listening-intro .trans-card::after,
body #stage-completion .complete-card::after{
background:radial-gradient(ellipse at 0 0,rgba(73,139,213,.14),transparent 63%),radial-gradient(ellipse at 100% 100%,rgba(113,96,184,.07),transparent 65%);
}
body :is(#stage-registration,#stage-listening-intro,#stage-completion) .ch-dot{
background:#b4e3ff;box-shadow:0 0 0 3px rgba(147,201,255,.1),0 0 12px rgba(144,207,255,.4);
}
body :is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary{
color:#10263f;border:1px solid rgba(216,239,255,.38);
}
body :is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:is(:disabled,.is-dormant){color:#10263f;opacity:.65;filter:saturate(.7)}
body :is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary.is-dormant:hover{color:#10263f}
body :is(#stage-registration,#stage-listening-intro,#stage-completion) .btn-primary:focus-visible{outline-color:#b4e3ff}
body #stage-registration #start-name{background:rgba(2,9,21,.72);border-color:rgba(163,195,227,.25);color:#edf5ff;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
body #stage-registration #start-name:focus{border-color:#a4d3fa;box-shadow:0 0 0 3px rgba(124,189,245,.10)}
body #stage-registration #start-name::placeholder{color:#849bb6}
body :is(#stage-registration,#stage-listening-intro,#stage-completion) .channel-promo{background:rgba(2,8,19,.28);border-color:rgba(151,190,230,.13)}
body #stage-listening-intro .ch-mark{background:rgba(117,187,242,.09);border-color:rgba(150,205,247,.23);color:#b3dfff;box-shadow:inset 0 1px 0 rgba(225,241,255,.12)}
body #stage-results .topbar{--ink:#edf5ff;background:linear-gradient(150deg,rgba(10,23,44,.93),rgba(4,10,23,.95));border-color:rgba(166,207,241,.24);box-shadow:0 1px 0 rgba(199,226,255,.1),0 20px 50px rgba(0,0,0,.3)}
body #stage-results .topbar>div>span{color:#edf5ff}
body #stage-results .topbar .btn-primary{background:linear-gradient(135deg,#d5efff,#96c9f2);color:#10263f;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 18px rgba(54,112,182,.18)}
body #stage-results .topbar .btn-primary:hover{background:linear-gradient(135deg,#eaf7ff,#afdfff);box-shadow:0 5px 22px rgba(120,190,245,.22)}
body #stage-results .topbar :is(.btn-ghost,.btn-gold){color:#bdd9f2;border-color:rgba(166,207,241,.28);background:rgba(98,151,211,.055)}
body #stage-results .topbar :is(.btn-ghost,.btn-gold):hover{color:#eff8ff;background:rgba(123,186,244,.12);border-color:rgba(183,223,255,.5);box-shadow:0 5px 24px rgba(77,148,225,.14)}
body #stage-results .topbar .btn:focus-visible{outline-color:#b4e3ff}
/* Screen report uses the new midnight palette; PDF staging retains its paper styles. */
@media screen{
body #stage-results .results-content:not(.pdfx-stage) .cert{
--c-paper:#0c192c;--c-paper-2:#122339;--c-paper-3:#102034;--c-paper-4:#162c45;
--c-ink:#e8f2ff;--c-ink-2:#b9cde2;--c-ink-3:#91aac5;
--c-line:rgba(162,198,235,.13);--c-line-2:rgba(162,198,235,.23);--c-track:rgba(154,204,245,.10);
--pw-paper:#0c192c;--pw-ink:#e8f2ff;--pw-ink-2:#b9cde2;--pw-ink-3:#91aac5;
background:#0c192c;border-color:rgba(166,207,241,.28);color:#e8f2ff;
}
}
@media screen{
body #stage-results .results-content:not(.pdfx-stage) .cert{
--acc-ink:#a8d3f5!important;--cv-strong:#93d9c7!important;--cv-mid:#b9cfe6!important;
--st-ok:#9cdec9!important;--st-no:#eea1af!important;
}
body #stage-results .results-content:not(.pdfx-stage) :is(.student-row,.cc-head,.answer-table th){background:#13243a}
body #stage-results .results-content:not(.pdfx-stage) .answer-table tr.alt td{background:rgba(153,197,242,.025)}
body #stage-results .results-content:not(.pdfx-stage) .review-cta{background:#142740;border-color:rgba(165,204,240,.2)}
}
@media screen{
body #stage-results .results-content:not(.pdfx-stage) .cert-footer{background:#101f33}
body #stage-results .results-content:not(.pdfx-stage) .review-cta .btn-primary{background:linear-gradient(135deg,#d5efff,#96c9f2);color:#10263f;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
}
/* The sky now owns its darkness; avoid dimming its blue dust and stars twice. */
body :is(#stage-registration,#stage-listening-intro,#stage-completion)::after{background:none;}
/* ── the hand-off into the exam ──────────────────────────────────────────────
beginTest() already raises a curtain — body.cdi-exit, held before the stage
swap — but it was written for the three.js layer this build retires, so
CDIAtmosphere.dim() fades nothing and the field stayed lit until the frame
the exam replaced it. These hang the curtain on the field instead. */
#cdi-stars-host{transition:opacity .24s ease}
body.cdi-exit #cdi-stars-host{opacity:0}
/* the ground it uncovers travels to the exam's own white, so the last thing
the dissolve reveals is already the colour the test arrives on */
body{transition:background-color .24s ease}
body.cdi-exit{background:#fff}
/* the briefing stage's vignette is painted over the field, not by it, so on
its own it survived the dissolve and left the reveal with grey corners */
[id$="-intro"]::after{transition:opacity .24s ease}
body.cdi-exit [id$="-intro"]::after{opacity:0}
/* the exam then fades up over that ground rather than appearing between two
frames. Opacity only — nothing that moves type a candidate is about to
read — and it ends at 1, so the exam looks exactly as it always did. */
@keyframes cdiExamIn{from{opacity:0}to{opacity:1}}
#stage-listening.active{animation:cdiExamIn .2s ease both}
@media (prefers-reduced-motion:reduce){
#cdi-stars-host,body,[id$="-intro"]::after{transition:none}
#stage-listening.active{animation:none}
}
/* Print goes; Download writes the same sheet in one click, and the print
handler stays bound so Cmd/Ctrl+P still works. */
#stage-results .topbar #results-print-btn,
#results-print-btn{display:none!important}
/* Writing carries a second one with no id — "Print them instead", in the
grading-error fallback beside "Download my answers as PDF". Matching on the
handler rather than an id catches that one and any future sibling. */
#stage-results button[onclick*="printReport"]{display:none!important}
/* The results floor. This file only makes it transparent under body.cdi-3d-on,
a class the three.js layer sets — and this build retires that layer, so the
floor stayed opaque and the certificate sat on a grey slab instead of on the
star field the way Reading's does. */
#stage-results{background:transparent}
/* ── the certificate, in Cosmos ──────────────────────────────────────────────
Paper, not a black rectangle. What ties it to the field is temperature and
light: the cream goes cool, the brown ink goes navy, and the sheet carries a
deep wide shadow so it reads as lit paper held in front of the stars.
Appended last, so it wins on source order at equal specificity. */
#stage-results .cert{
--c-paper:#fbfcff; --c-paper-2:#eef3fb; --c-paper-3:#f5f8fd; --c-paper-4:#e9f0fa;
--c-ink:#101828; --c-ink-2:#44506a; --c-ink-3:#7c88a0;
--c-line:rgba(16,24,40,.10); --c-line-2:rgba(16,24,40,.17);
--c-track:rgba(16,24,40,.08);
--pw-paper:#fbfcff; --pw-ink:#101828; --pw-ink-2:#44506a; --pw-ink-3:#7c88a0;
--pw-line:rgba(16,24,40,.10); --pw-line-2:rgba(16,24,40,.17);
background:#fbfcff;
border:1px solid rgba(255,255,255,.16);
/* lit paper floating over the sky: a tight contact shadow, then a long,
wide, very soft one — the same family of shadow the glass cards carry */
box-shadow:0 1px 3px rgba(2,6,20,.55),
0 14px 30px -14px rgba(2,6,20,.7),
0 0 90px -6px rgba(0,0,0,.55),
0 50px 110px -30px rgba(0,0,0,.9),
0 140px 240px -70px rgba(0,0,0,.8);
}
/* ── the certificate, staged for export ─────────────────────────────────────
PDFX moves #results-content off-screen at the printed column width and reads
computed styles off it. Two things must be true at that moment.
1 · Nothing may still be animating. The sheet arrives in parts on a certPart
keyframe with `both` fill, so a section caught before its delay elapses
is read at opacity 0 and exports blank.
2 · The answer summary must keep its two columns. 180mm is narrow enough to
trip the stacked rule, which doubles the sheet's height and forces the
fit-to-page backstop to shrink the whole certificate. */
#results-content.pdfx-stage *,
#results-content.pdfx-stage *::before,
#results-content.pdfx-stage *::after{
animation:none!important;transition:none!important}
#results-content.pdfx-stage .answer-cols{grid-template-columns:1fr 1fr!important}
/* and the review call-to-action does not survive the trip to paper: it is a
button, and nobody can press it there */
#results-content.pdfx-stage .review-cta{display:none!important}
/* ── the answer record, two columns ─────────────────────────────────────────
The card stays one card; the two tables sit inside it side by side. Twenty
rows a column instead of forty in a line, which is most of what stops the
certificate needing to be shrunk to fit a page. */
#stage-results .answer-cols{
display:grid;gap:0 18px;align-items:start;
/* minmax(0,1fr), not 1fr: a grid track's min-width is auto, so the tables
were sizing to their widest cell and running out past the card, which
clips them. Letting the tracks shrink is what makes two columns fit. */
grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#stage-results .answer-cols .answer-table{table-layout:fixed;width:100%}
/* With table-layout:fixed and no widths declared, the five columns split the
track evenly — so "Accepted", which carries every permitted variant and is
the only long text here, got the same room as "#". These proportions give it
the space instead, which is what actually shortens the sheet: the wrapping
was costing more height than the extra rows ever did. */
#stage-results .answer-cols .answer-table :is(th,td):nth-child(1){width:8%}
#stage-results .answer-cols .answer-table :is(th,td):nth-child(2){width:30%}
#stage-results .answer-cols .answer-table :is(th,td):nth-child(3){width:42%}
#stage-results .answer-cols .answer-table :is(th,td):nth-child(4){width:15%}
#stage-results .answer-cols .answer-table :is(th,td):nth-child(5){width:5%}
/* the timecode column earns its place on screen, where the figure is a link to
the moment. On paper it is a number nobody can press, and it is the width
that forces every accepted answer to wrap. */
#results-content.pdfx-stage .answer-table th:nth-child(4),
#results-content.pdfx-stage .answer-table td:nth-child(4),
#results-content.pdfx-stage .answer-table th:nth-child(5),
#results-content.pdfx-stage .answer-table td:nth-child(5){display:none}
/* the second column opens on question 21, which the generator marks as a part
break — a rule across the top of a column is just a stray line */
#stage-results .answer-cols .answer-table tbody tr:first-child.pbreak{
border-top:0;box-shadow:none}
@media (max-width:820px){
#stage-results .answer-cols{grid-template-columns:1fr}
}
/* ── the results topbar: glass over the field ───────────────────────────────
56px, the same recipe as the three cards — an 18px blur that lets the star
field bleed through, a starlight hairline underneath, a warm highlight along
the top edge. The brand span pins `color:var(--ink)` inline, so the token is
re-pointed rather than out-specified. */
#stage-results .topbar{
--ink:#f6f4ef;
height:56px;
background:linear-gradient(180deg,rgba(14,18,30,.58),rgba(5,8,16,.76));
-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
border-bottom:1px solid rgba(255,240,220,.16);
box-shadow:inset 0 1px 0 rgba(255,244,228,.10),0 12px 30px -14px rgba(0,0,0,.7),0 30px 60px -30px rgba(0,0,0,.6);
}
#stage-results .topbar>div>span{color:#f6f4ef}
#stage-results .topbar .logo-mark{box-shadow:0 6px 16px -6px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
/* pills, in the wrapper family: 34px tall, one transition, the sun on hover */
#stage-results .topbar .btn{
height:34px;padding:0 16px;border-radius:999px;
font-size:12.5px;font-weight:700;letter-spacing:.01em;
transition:background 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
#stage-results .topbar .btn:focus-visible{outline:2px solid rgba(255,214,160,.9);outline-offset:3px}
/* primary: the same blue the cards' Begin / Start / See-my-band-score use */
#stage-results .topbar .btn-primary{
background:linear-gradient(180deg,#2c82d4,#14538f);
border:1px solid rgba(255,255,255,.14);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.4),0 10px 24px -14px rgba(80,160,240,.9)}
#stage-results .topbar .btn-primary:hover{
background:linear-gradient(180deg,#3a93e4,#17609f);
transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.38),
0 0 0 1px rgba(255,200,120,.25),0 8px 30px rgba(255,170,80,.25)}
/* secondary: glass outline */
#stage-results .topbar .btn-ghost{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,240,220,.16);
color:#c6ccd8;font-weight:600}
#stage-results .topbar .btn-ghost:hover{
background:rgba(255,255,255,.09);
border-color:rgba(255,240,220,.30);
color:#f6f4ef;
box-shadow:0 0 0 1px rgba(255,200,120,.12),0 8px 24px -10px rgba(255,170,80,.25)}
/* tertiary: a sun-gold hairline, no slab */
#stage-results .topbar .btn-gold{
background:transparent;
border:1px solid rgba(255,207,138,.48);
color:#f0d49a}
#stage-results .topbar .btn-gold:hover{
background:rgba(255,200,120,.12);
border-color:rgba(255,207,138,.85);
color:#ffe2b4;
box-shadow:0 0 0 1px rgba(255,200,120,.18),0 8px 26px -10px rgba(255,170,80,.35)}
/* the certificate is the subject: give it a touch more air under the bar */
#stage-results .results-content{padding-top:48px}
/* reduced motion: the pills do not move */
body.cdi-reduced #stage-results .topbar .btn{transition:none!important;transform:none!important}
/* ── per-test rules: Volume 10 Test 4 (scoped by ) ── */
/* ══════════════════════════════════════════════════════════════════════
REVIEW MODE, RE-SKINNED — READING_CDI
The transcript panel and the transport strip were drawn in the retired
certificate palette: cream paper, navy and gold, a display serif. They now
read from the same skin as the exam itself — white paper, grey rules, Arial,
and IELTS red as the single accent. Nothing structural changes; every rule
below only re-points a token the original review CSS already uses, so the
layout, the sync and the timecodes are untouched.
══════════════════════════════════════════════════════════════════════ */
:where(html[data-test="4"]) body.review-mode{
--pw-ui:var(--sans); --pw-display:var(--sans);
--rv-ink:#0d0d0d; --rv-ink-2:#1f1f1f; --rv-ink-3:#666666; --rv-ink-4:#999999;
--rv-paper:#ffffff; --rv-paper-2:#fafafa; --rv-paper-3:#f2f2f2;
--rv-line:#d8d8d8; --rv-line-2:#c2c2c2;
--rv-navy:#c41230; --rv-navy-ink:#ffffff; --rv-gold:#c41230; --rv-gold-ink:#8a0c22;
--rv-green:#2e7d32; --rv-rose:#c41230;
--rv-mark:rgba(196,18,48,.13); --rv-mark-edge:rgba(196,18,48,.40);
--rv-cur:rgba(196,18,48,.05);
--rv-track:#d0d0d0; --rv-buffer:#bcbcbc;
--rv-panel-shadow:-8px 0 22px -14px rgba(0,0,0,.30);
}
:where(html[data-test="4"]) body.dark-mode.review-mode{
--rv-ink:#eaeaea; --rv-ink-2:#cfcfcf; --rv-ink-3:#9a9a9a; --rv-ink-4:#7e7e7e;
--rv-paper:#1f1f1f; --rv-paper-2:#1a1a1a; --rv-paper-3:#262626;
--rv-line:#3a3a3a; --rv-line-2:#4a4a4a;
--rv-navy:#ff5a72; --rv-navy-ink:#1a0a0e; --rv-gold:#ff5a72; --rv-gold-ink:#ff8094;
--rv-green:#5fd17a; --rv-rose:#ff5a72;
--rv-mark:rgba(255,90,114,.16); --rv-mark-edge:rgba(255,90,114,.38);
--rv-cur:rgba(255,90,114,.08);
--rv-track:#3a3a3a; --rv-buffer:#4a4a4a;
--rv-panel-shadow:-10px 0 26px -14px rgba(0,0,0,.65);
}
:where(html[data-test="4"]) body.theme-sepia.review-mode{
--rv-ink:#3a2c1a; --rv-ink-2:#5a4632; --rv-ink-3:#9a8670; --rv-ink-4:#bba585;
--rv-paper:#faf6ef; --rv-paper-2:#f5f0e8; --rv-paper-3:#efe7d8;
--rv-line:#dccaa9; --rv-line-2:#cbb691;
--rv-navy:#b03521; --rv-navy-ink:#fffdf8; --rv-gold:#b03521; --rv-gold-ink:#8f2a19;
--rv-green:#3f6b33; --rv-rose:#b03521;
--rv-mark:rgba(176,53,33,.14); --rv-mark-edge:rgba(176,53,33,.40);
--rv-cur:rgba(176,53,33,.06);
--rv-track:#dccaa9; --rv-buffer:#cbb691;
}
/* The panel is exam furniture: square corners, a hard rule, Arial throughout. */
:where(html[data-test="4"]) body.review-mode #transcript-panel{font-family:var(--sans)}
:where(html[data-test="4"]) body.review-mode #transcript-panel *{font-family:var(--sans)}
:where(html[data-test="4"]) body.review-mode .tp-hdr{background:var(--rv-paper-3);border-bottom:1px solid var(--rv-line-2)}
/* one flat red rule instead of the old navy-to-gold gradient */
:where(html[data-test="4"]) body.review-mode .tp-hdr::after{background:var(--rv-navy);opacity:1;height:3px}
:where(html[data-test="4"]) body.review-mode .tp-hdr-lbl{color:var(--rv-ink-2);font-weight:800;letter-spacing:.14em}
:where(html[data-test="4"]) body.review-mode .tp-live-dot{background:var(--rv-navy);
box-shadow:0 0 0 0 color-mix(in srgb,var(--rv-navy) 45%,transparent)}
:where(html[data-test="4"]) body.review-mode .tp-hdr-count{color:var(--rv-ink-3);font-weight:700}
:where(html[data-test="4"]) body.review-mode .tp-item.tp-cur{border-left-color:var(--rv-navy)}
:where(html[data-test="4"]) body.review-mode .tp-item:not(.tp-break):hover{background:color-mix(in srgb,var(--rv-navy) 6%,transparent)}
:where(html[data-test="4"]) body.review-mode .tp-item:not(.tp-break):focus-visible{outline-color:var(--rv-navy)}
/* ── the transport strip ─────────────────────────────────────────────── */
:where(html[data-test="4"]) body.review-mode .seek-btn{
border-radius:var(--radius);border:1px solid var(--rv-line-2);
background:var(--rv-paper);color:var(--rv-ink-2);font-weight:700}
:where(html[data-test="4"]) body.review-mode .seek-btn:hover{border-color:var(--rv-navy);color:var(--rv-navy);background:var(--rv-paper)}
:where(html[data-test="4"]) body.review-mode .pp-btn{background:var(--rv-navy);color:var(--rv-navy-ink);border:none}
:where(html[data-test="4"]) body.review-mode .pp-btn:hover{background:#a50f28;filter:none}
:where(html[data-test="4"]) body.review-mode #audio-progress-track{background:var(--rv-track);border-radius:99px}
:where(html[data-test="4"]) body.review-mode #audio-progress-fill{background:var(--rv-navy)}
:where(html[data-test="4"]) body.review-mode #audio-buffered{background:var(--rv-buffer)}
:where(html[data-test="4"]) body.review-mode #audio-time-display{color:var(--rv-ink-3);font-weight:700}
:where(html[data-test="4"]) body.review-mode #audio-state-badge{color:var(--rv-ink-3)}
:where(html[data-test="4"]) body.review-mode #audio-state-badge.is-ready{color:var(--emerald)}
:where(html[data-test="4"]) body.review-mode #audio-state-badge.is-error{color:var(--rv-navy)}
:where(html[data-test="4"]) body.review-mode #vol-slider::-webkit-slider-thumb{background:var(--rv-navy)}
:where(html[data-test="4"]) body.review-mode #vol-slider::-moz-range-thumb{background:var(--rv-navy)}
/* The panel re-points the same tokens inside its own scope (so that the
transport outside it could stay a different colour). Both scopes now carry
the exam skin, otherwise the speaker rules and timecodes stay azure. */
:where(html[data-test="4"]) body.review-mode #transcript-panel{
--rv-paper:#ffffff; --rv-paper-2:#fafafa; --rv-paper-3:#f2f2f2;
--rv-ink:#0d0d0d; --rv-ink-2:#1f1f1f; --rv-ink-3:#666666; --rv-ink-4:#999999;
--rv-line:#e0e0e0; --rv-line-2:#c8c8c8;
--rv-navy:#c41230; --rv-navy-ink:#ffffff;
--rv-gold:#c41230; --rv-gold-ink:#8a0c22;
--rv-green:#2e7d32; --rv-rose:#c41230;
--rv-cur:rgba(196,18,48,.05);
--rv-mark:rgba(196,18,48,.13); --rv-mark-edge:rgba(196,18,48,.40);
--rv-track:#d0d0d0; --rv-buffer:#bcbcbc;
--rv-panel-shadow:-8px 0 22px -14px rgba(0,0,0,.30);
background:#ffffff;
border-left:1px solid var(--line-2);
}
:where(html[data-test="4"]) body.dark-mode.review-mode #transcript-panel{
--rv-paper:#1f1f1f; --rv-paper-2:#1a1a1a; --rv-paper-3:#262626;
--rv-ink:#eaeaea; --rv-ink-2:#cfcfcf; --rv-ink-3:#9a9a9a; --rv-ink-4:#7e7e7e;
--rv-line:#3a3a3a; --rv-line-2:#4a4a4a;
--rv-navy:#ff5a72; --rv-navy-ink:#1a0a0e;
--rv-gold:#ff5a72; --rv-gold-ink:#ff8094;
--rv-cur:rgba(255,90,114,.08);
--rv-mark:rgba(255,90,114,.16); --rv-mark-edge:rgba(255,90,114,.38);
background:#1f1f1f;
}
:where(html[data-test="4"]) body.theme-sepia.review-mode #transcript-panel{
--rv-paper:#faf6ef; --rv-paper-2:#f5f0e8; --rv-paper-3:#efe7d8;
--rv-ink:#3a2c1a; --rv-ink-2:#5a4632; --rv-ink-3:#9a8670; --rv-ink-4:#bba585;
--rv-line:#e2d5bc; --rv-line-2:#cbb691;
--rv-navy:#b03521; --rv-gold:#b03521; --rv-gold-ink:#8f2a19;
--rv-cur:rgba(176,53,33,.06);
background:#faf6ef;
}
/* the timecode beside each question, in the exam's red */
:where(html[data-test="4"]) body.review-mode .q-jump-btn{border:1px solid #d8c2c7;background:#fff;color:#c41230}
:where(html[data-test="4"]) body.review-mode .q-jump-btn:hover{background:#c41230;border-color:#c41230;color:#fff;
box-shadow:0 2px 8px -5px rgba(196,18,48,.8)}
:where(html[data-test="4"]) body.review-mode .q-jump-btn.is-correct{
border-color:rgba(46,125,50,.42);background:rgba(46,125,50,.07);color:#2e7d32}
:where(html[data-test="4"]) body.review-mode .q-jump-btn.is-correct:hover{background:#2e7d32;border-color:#2e7d32;color:#fff}
:where(html[data-test="4"]) body.review-mode .q-jump-btn.is-wrong{
border-color:rgba(196,18,48,.42);background:rgba(196,18,48,.07);color:#c41230}
:where(html[data-test="4"]) body.review-mode .q-jump-btn.is-wrong:hover{background:#c41230;border-color:#c41230;color:#fff}
:where(html[data-test="4"]) body.review-mode .q-jump-btn.is-skipped{
border-color:var(--line-2);background:var(--bg-elev);color:var(--ink-mute)}
:where(html[data-test="4"]) body.review-mode .q-jump-btn.is-skipped:hover{background:#666;border-color:#666;color:#fff}
:where(html[data-test="4"]) body.review-mode #rate-select,
:where(html[data-test="4"]) body.review-mode .rate-select{
border-radius:var(--radius);border:1px solid var(--rv-line-2);
background:var(--rv-paper);color:var(--rv-ink-2);font-family:var(--sans)}
/* ── MAP, FLOW-CHART AND OPTION BOX ─────────────────────────────────────── */
:where(html[data-test="4"]) .opt-box{border:1px solid var(--line,#c8ccd4);background:#fafbfc;border-radius:4px;
padding:11px 14px;margin:6px 0 14px;max-width:420px}
:where(html[data-test="4"]) .opt-box.drag-pool{display:block;min-height:0}
:where(html[data-test="4"]) .eh-opt{display:flex;gap:12px;align-items:baseline;width:100%;height:auto;min-height:30px;margin:0;
padding:3px 7px;border:1px solid transparent;border-radius:5px;background:transparent;
font-size:16px;line-height:1.5;cursor:grab}
:where(html[data-test="4"]) .eh-opt:hover{border-color:#b9c0cb;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
:where(html[data-test="4"]) .eh-opt-l{flex:0 0 18px;font-weight:700}
:where(html[data-test="4"]) .eh-opt-t{flex:1 1 auto}
:where(html[data-test="4"]) .eh-opt.dm-ghost{background:#fff;border-color:rgb(65,142,200);box-shadow:0 6px 18px rgba(0,0,0,.18);
width:auto!important;height:auto!important;padding:3px 9px}
:where(html[data-test="4"]) .fc-row{display:flex;align-items:flex-start;gap:34px;flex-wrap:wrap;margin:14px 0 18px}
:where(html[data-test="4"]) .fc-left{flex:0 1 420px;min-width:320px}
:where(html[data-test="4"]) .fc-right{flex:0 1 420px;min-width:300px;padding-top:4px}
:where(html[data-test="4"]) .flow-box .drag-drop{min-width:210px;justify-content:flex-start;padding:0 6px;text-align:left}
:where(html[data-test="4"]) .flow-box .drag-drop .drag-chip{justify-content:flex-start;padding:0 2px;font-size:14px;
line-height:1.25;min-height:23px;height:auto;gap:8px}
:where(html[data-test="4"]) .flow-box .drag-drop .eh-opt-l{flex:0 0 14px}
:where(html[data-test="4"]) .flow-box .drag-drop .eh-opt-t{flex:0 1 auto}
:where(html[data-test="4"]) .eh-row{display:flex;align-items:flex-start;gap:28px;margin:16px 0 20px;flex-wrap:wrap}
:where(html[data-test="4"]) .eh-diagram{flex:1 1 500px;min-width:380px;margin:0;padding:4px 0}
:where(html[data-test="4"]) .eh-diagram svg{max-width:100%;max-height:440px}
:where(html[data-test="4"]) .eh-diagram img{width:100%;max-width:640px;height:auto;display:block}
:where(html[data-test="4"]) .eh-side{flex:0 1 330px;min-width:290px;padding-top:6px}
:where(html[data-test="4"]) .eh-side .kb-help{margin:0 0 10px}
:where(html[data-test="4"]) .eh-side .drag-match-layout{margin:0}
:where(html[data-test="4"]) .eh-side .drag-col-hdr{white-space:nowrap}
:where(html[data-test="4"]) .eh-side .drag-right .drag-col-hdr{margin-left:18px}
:where(html[data-test="4"]) .eh-side .drag-pool{margin:0 0 0 18px;flex-direction:row;flex-wrap:wrap;max-width:120px}
:where(html[data-test="4"]) .eh-side .drag-item-label{min-width:150px}
@media (max-width:1100px){:where(html[data-test="4"]) .eh-diagram{flex:1 1 100%}:where(html[data-test="4"]) .eh-side{flex:1 1 100%}}
/* ── TRANSCRIPT TABS ────────────────────────────────────────────────────── */
:where(html[data-test="4"]) .tp-tabs{display:flex;gap:6px;padding:9px 14px 10px;border-bottom:1px solid var(--rv-line,#e3e6eb);flex:0 0 auto}
:where(html[data-test="4"]) .tp-tab{flex:1 1 0;min-width:0;padding:6px 4px;border-radius:7px;border:1px solid var(--rv-line-2,#dfe3e9);
background:#fff;color:var(--rv-ink-3,#5b6472);font:600 12px/1.2 var(--sans,Arial,sans-serif);
cursor:pointer;white-space:nowrap;text-align:center}
:where(html[data-test="4"]) .tp-tab.is-on{background:var(--rv-navy,#c41230);border-color:var(--rv-navy,#c41230);color:#fff}
:where(html[data-test="4"]) body.dark-mode .opt-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18)}
/* ── per-test rules: Volume 10 Test 3 (scoped by ) ── */
/* ══════════════════════════════════════════════════════════════════════
REVIEW MODE, RE-SKINNED — READING_CDI
The transcript panel and the transport strip were drawn in the retired
certificate palette: cream paper, navy and gold, a display serif. They now
read from the same skin as the exam itself — white paper, grey rules, Arial,
and IELTS red as the single accent. Nothing structural changes; every rule
below only re-points a token the original review CSS already uses, so the
layout, the sync and the timecodes are untouched.
══════════════════════════════════════════════════════════════════════ */
:where(html[data-test="3"]) body.review-mode{
--pw-ui:var(--sans); --pw-display:var(--sans);
--rv-ink:#0d0d0d; --rv-ink-2:#1f1f1f; --rv-ink-3:#666666; --rv-ink-4:#999999;
--rv-paper:#ffffff; --rv-paper-2:#fafafa; --rv-paper-3:#f2f2f2;
--rv-line:#d8d8d8; --rv-line-2:#c2c2c2;
--rv-navy:#c41230; --rv-navy-ink:#ffffff; --rv-gold:#c41230; --rv-gold-ink:#8a0c22;
--rv-green:#2e7d32; --rv-rose:#c41230;
--rv-mark:rgba(196,18,48,.13); --rv-mark-edge:rgba(196,18,48,.40);
--rv-cur:rgba(196,18,48,.05);
--rv-track:#d0d0d0; --rv-buffer:#bcbcbc;
--rv-panel-shadow:-8px 0 22px -14px rgba(0,0,0,.30);
}
:where(html[data-test="3"]) body.dark-mode.review-mode{
--rv-ink:#eaeaea; --rv-ink-2:#cfcfcf; --rv-ink-3:#9a9a9a; --rv-ink-4:#7e7e7e;
--rv-paper:#1f1f1f; --rv-paper-2:#1a1a1a; --rv-paper-3:#262626;
--rv-line:#3a3a3a; --rv-line-2:#4a4a4a;
--rv-navy:#ff5a72; --rv-navy-ink:#1a0a0e; --rv-gold:#ff5a72; --rv-gold-ink:#ff8094;
--rv-green:#5fd17a; --rv-rose:#ff5a72;
--rv-mark:rgba(255,90,114,.16); --rv-mark-edge:rgba(255,90,114,.38);
--rv-cur:rgba(255,90,114,.08);
--rv-track:#3a3a3a; --rv-buffer:#4a4a4a;
--rv-panel-shadow:-10px 0 26px -14px rgba(0,0,0,.65);
}
:where(html[data-test="3"]) body.theme-sepia.review-mode{
--rv-ink:#3a2c1a; --rv-ink-2:#5a4632; --rv-ink-3:#9a8670; --rv-ink-4:#bba585;
--rv-paper:#faf6ef; --rv-paper-2:#f5f0e8; --rv-paper-3:#efe7d8;
--rv-line:#dccaa9; --rv-line-2:#cbb691;
--rv-navy:#b03521; --rv-navy-ink:#fffdf8; --rv-gold:#b03521; --rv-gold-ink:#8f2a19;
--rv-green:#3f6b33; --rv-rose:#b03521;
--rv-mark:rgba(176,53,33,.14); --rv-mark-edge:rgba(176,53,33,.40);
--rv-cur:rgba(176,53,33,.06);
--rv-track:#dccaa9; --rv-buffer:#cbb691;
}
/* The panel is exam furniture: square corners, a hard rule, Arial throughout. */
:where(html[data-test="3"]) body.review-mode #transcript-panel{font-family:var(--sans)}
:where(html[data-test="3"]) body.review-mode #transcript-panel *{font-family:var(--sans)}
:where(html[data-test="3"]) body.review-mode .tp-hdr{background:var(--rv-paper-3);border-bottom:1px solid var(--rv-line-2)}
/* one flat red rule instead of the old navy-to-gold gradient */
:where(html[data-test="3"]) body.review-mode .tp-hdr::after{background:var(--rv-navy);opacity:1;height:3px}
:where(html[data-test="3"]) body.review-mode .tp-hdr-lbl{color:var(--rv-ink-2);font-weight:800;letter-spacing:.14em}
:where(html[data-test="3"]) body.review-mode .tp-live-dot{background:var(--rv-navy);
box-shadow:0 0 0 0 color-mix(in srgb,var(--rv-navy) 45%,transparent)}
:where(html[data-test="3"]) body.review-mode .tp-hdr-count{color:var(--rv-ink-3);font-weight:700}
:where(html[data-test="3"]) body.review-mode .tp-item.tp-cur{border-left-color:var(--rv-navy)}
:where(html[data-test="3"]) body.review-mode .tp-item:not(.tp-break):hover{background:color-mix(in srgb,var(--rv-navy) 6%,transparent)}
:where(html[data-test="3"]) body.review-mode .tp-item:not(.tp-break):focus-visible{outline-color:var(--rv-navy)}
/* ── the transport strip ─────────────────────────────────────────────── */
:where(html[data-test="3"]) body.review-mode .seek-btn{
border-radius:var(--radius);border:1px solid var(--rv-line-2);
background:var(--rv-paper);color:var(--rv-ink-2);font-weight:700}
:where(html[data-test="3"]) body.review-mode .seek-btn:hover{border-color:var(--rv-navy);color:var(--rv-navy);background:var(--rv-paper)}
:where(html[data-test="3"]) body.review-mode .pp-btn{background:var(--rv-navy);color:var(--rv-navy-ink);border:none}
:where(html[data-test="3"]) body.review-mode .pp-btn:hover{background:#a50f28;filter:none}
:where(html[data-test="3"]) body.review-mode #audio-progress-track{background:var(--rv-track);border-radius:99px}
:where(html[data-test="3"]) body.review-mode #audio-progress-fill{background:var(--rv-navy)}
:where(html[data-test="3"]) body.review-mode #audio-buffered{background:var(--rv-buffer)}
:where(html[data-test="3"]) body.review-mode #audio-time-display{color:var(--rv-ink-3);font-weight:700}
:where(html[data-test="3"]) body.review-mode #audio-state-badge{color:var(--rv-ink-3)}
:where(html[data-test="3"]) body.review-mode #audio-state-badge.is-ready{color:var(--emerald)}
:where(html[data-test="3"]) body.review-mode #audio-state-badge.is-error{color:var(--rv-navy)}
:where(html[data-test="3"]) body.review-mode #vol-slider::-webkit-slider-thumb{background:var(--rv-navy)}
:where(html[data-test="3"]) body.review-mode #vol-slider::-moz-range-thumb{background:var(--rv-navy)}
/* The panel re-points the same tokens inside its own scope (so that the
transport outside it could stay a different colour). Both scopes now carry
the exam skin, otherwise the speaker rules and timecodes stay azure. */
:where(html[data-test="3"]) body.review-mode #transcript-panel{
--rv-paper:#ffffff; --rv-paper-2:#fafafa; --rv-paper-3:#f2f2f2;
--rv-ink:#0d0d0d; --rv-ink-2:#1f1f1f; --rv-ink-3:#666666; --rv-ink-4:#999999;
--rv-line:#e0e0e0; --rv-line-2:#c8c8c8;
--rv-navy:#c41230; --rv-navy-ink:#ffffff;
--rv-gold:#c41230; --rv-gold-ink:#8a0c22;
--rv-green:#2e7d32; --rv-rose:#c41230;
--rv-cur:rgba(196,18,48,.05);
--rv-mark:rgba(196,18,48,.13); --rv-mark-edge:rgba(196,18,48,.40);
--rv-track:#d0d0d0; --rv-buffer:#bcbcbc;
--rv-panel-shadow:-8px 0 22px -14px rgba(0,0,0,.30);
background:#ffffff;
border-left:1px solid var(--line-2);
}
:where(html[data-test="3"]) body.dark-mode.review-mode #transcript-panel{
--rv-paper:#1f1f1f; --rv-paper-2:#1a1a1a; --rv-paper-3:#262626;
--rv-ink:#eaeaea; --rv-ink-2:#cfcfcf; --rv-ink-3:#9a9a9a; --rv-ink-4:#7e7e7e;
--rv-line:#3a3a3a; --rv-line-2:#4a4a4a;
--rv-navy:#ff5a72; --rv-navy-ink:#1a0a0e;
--rv-gold:#ff5a72; --rv-gold-ink:#ff8094;
--rv-cur:rgba(255,90,114,.08);
--rv-mark:rgba(255,90,114,.16); --rv-mark-edge:rgba(255,90,114,.38);
background:#1f1f1f;
}
:where(html[data-test="3"]) body.theme-sepia.review-mode #transcript-panel{
--rv-paper:#faf6ef; --rv-paper-2:#f5f0e8; --rv-paper-3:#efe7d8;
--rv-ink:#3a2c1a; --rv-ink-2:#5a4632; --rv-ink-3:#9a8670; --rv-ink-4:#bba585;
--rv-line:#e2d5bc; --rv-line-2:#cbb691;
--rv-navy:#b03521; --rv-gold:#b03521; --rv-gold-ink:#8f2a19;
--rv-cur:rgba(176,53,33,.06);
background:#faf6ef;
}
/* the timecode beside each question, in the exam's red */
:where(html[data-test="3"]) body.review-mode .q-jump-btn{border:1px solid #d8c2c7;background:#fff;color:#c41230}
:where(html[data-test="3"]) body.review-mode .q-jump-btn:hover{background:#c41230;border-color:#c41230;color:#fff;
box-shadow:0 2px 8px -5px rgba(196,18,48,.8)}
:where(html[data-test="3"]) body.review-mode .q-jump-btn.is-correct{
border-color:rgba(46,125,50,.42);background:rgba(46,125,50,.07);color:#2e7d32}
:where(html[data-test="3"]) body.review-mode .q-jump-btn.is-correct:hover{background:#2e7d32;border-color:#2e7d32;color:#fff}
:where(html[data-test="3"]) body.review-mode .q-jump-btn.is-wrong{
border-color:rgba(196,18,48,.42);background:rgba(196,18,48,.07);color:#c41230}
:where(html[data-test="3"]) body.review-mode .q-jump-btn.is-wrong:hover{background:#c41230;border-color:#c41230;color:#fff}
:where(html[data-test="3"]) body.review-mode .q-jump-btn.is-skipped{
border-color:var(--line-2);background:var(--bg-elev);color:var(--ink-mute)}
:where(html[data-test="3"]) body.review-mode .q-jump-btn.is-skipped:hover{background:#666;border-color:#666;color:#fff}
:where(html[data-test="3"]) body.review-mode #rate-select,
:where(html[data-test="3"]) body.review-mode .rate-select{
border-radius:var(--radius);border:1px solid var(--rv-line-2);
background:var(--rv-paper);color:var(--rv-ink-2);font-family:var(--sans)}
/* ── MAP / OPTION BOX / WIDE DROPS ──────────────────────────────────────── */
:where(html[data-test="3"]) .opt-box{border:1px solid var(--line,#c8ccd4);background:#fafbfc;border-radius:4px;
padding:11px 14px;margin:14px 0 18px;max-width:820px}
:where(html[data-test="3"]) .opt-box.drag-pool{display:block;min-height:0;columns:2;column-gap:34px}
:where(html[data-test="3"]) .eh-opt{break-inside:avoid;display:flex;gap:12px;align-items:baseline;width:100%;
height:auto;min-height:30px;margin:0;padding:3px 7px;border:1px solid transparent;
border-radius:5px;background:transparent;font-size:16px;line-height:1.5;cursor:grab}
:where(html[data-test="3"]) .eh-opt:hover{border-color:#b9c0cb;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
:where(html[data-test="3"]) .eh-opt-l{flex:0 0 18px;font-weight:700}
:where(html[data-test="3"]) .eh-opt-t{flex:1 1 auto}
:where(html[data-test="3"]) .eh-opt.dm-ghost{background:#fff;border-color:rgb(65,142,200);box-shadow:0 6px 18px rgba(0,0,0,.18);
width:auto!important;height:auto!important;padding:3px 9px}
:where(html[data-test="3"]) .wide-drops .drag-drop{min-width:260px;justify-content:flex-start;padding:0 6px;text-align:left}
:where(html[data-test="3"]) .wide-drops .drag-drop .drag-chip{justify-content:flex-start;padding:0 2px;font-size:14px;
line-height:1.25;min-height:23px;height:auto;gap:8px}
:where(html[data-test="3"]) .wide-drops .drag-drop .eh-opt-l{flex:0 0 14px}
:where(html[data-test="3"]) .wide-drops .drag-drop .eh-opt-t{flex:0 1 auto}
:where(html[data-test="3"]) .wide-drops .drag-item-label{min-width:120px}
:where(html[data-test="3"]) .eh-row{display:flex;align-items:flex-start;gap:28px;margin:16px 0 20px;flex-wrap:wrap}
:where(html[data-test="3"]) .eh-diagram{flex:1 1 480px;min-width:360px;margin:0;padding:4px 0}
:where(html[data-test="3"]) .eh-diagram svg{max-width:100%;max-height:430px}
:where(html[data-test="3"]) .eh-side{flex:0 1 330px;min-width:290px;padding-top:6px}
:where(html[data-test="3"]) .eh-side .kb-help{margin:0 0 10px}
:where(html[data-test="3"]) .eh-side .drag-match-layout{margin:0}
:where(html[data-test="3"]) .eh-side .drag-col-hdr{white-space:nowrap}
:where(html[data-test="3"]) .eh-side .drag-right .drag-col-hdr{margin-left:18px}
:where(html[data-test="3"]) .eh-side .drag-pool{margin:0 0 0 18px}
:where(html[data-test="3"]) .eh-side .drag-item-label{min-width:118px}
@media (max-width:1100px){:where(html[data-test="3"]) .eh-diagram{flex:1 1 100%}:where(html[data-test="3"]) .eh-side{flex:1 1 100%}}
/* ── TRANSCRIPT TABS ────────────────────────────────────────────────────── */
:where(html[data-test="3"]) .tp-tabs{display:flex;gap:6px;padding:9px 14px 10px;border-bottom:1px solid var(--rv-line,#e3e6eb);flex:0 0 auto}
:where(html[data-test="3"]) .tp-tab{flex:1 1 0;min-width:0;padding:6px 4px;border-radius:7px;border:1px solid var(--rv-line-2,#dfe3e9);
background:#fff;color:var(--rv-ink-3,#5b6472);font:600 12px/1.2 var(--sans,Arial,sans-serif);
cursor:pointer;white-space:nowrap;text-align:center}
:where(html[data-test="3"]) .tp-tab.is-on{background:var(--rv-navy,#c41230);border-color:var(--rv-navy,#c41230);color:#fff}
:where(html[data-test="3"]) body.dark-mode .opt-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18)}
/* ══════════════════════════════════════════════════════════════════════════
SKIN — "[Pack]" exam interface + start page (loaded last, overrides above)
══════════════════════════════════════════════════════════════════════════ */
/* ---- header -------------------------------------------------------------- */
#hdr{height:51px}
#hdr::after{background:#d5d5d7}
#hdr-left{align-items:center;gap:0;padding-left:13px;min-width:0}
.hdr-logo{width:33px;height:33px;flex:0 0 auto;display:block}
.hdr-titleblock{margin-left:15px;display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.25}
.hdr-title{font-size:15px;font-weight:700;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.hdr-subline{display:flex;align-items:center;font-size:13px;color:#000;margin-top:2px;white-space:nowrap}
#hdr-clock{display:inline-block;padding:0;margin:0;height:auto;font-size:13px;line-height:1.25}
#hdr-clock #timer-listening{margin:0;font-size:13px;font-weight:400}
.hdr-subline .ttid-sub-inline{display:inline-flex;align-items:center;font-size:13px;margin-left:14px;color:#000}
.hdr-subline .ttid-sub-inline .fa-glyph{width:13px;height:13px;vertical-align:0;color:#000;margin-right:6px}
.hdr-subline .ttid-sub-inline .ttid-sub-title{margin-left:0}
.hdr-icon{margin:0 14px;height:24px}
.hdr-icon-btn{height:51px;color:#000}
#hdr-right > *:last-child{margin-right:8px}
#fs-btn{display:inline-flex}
#fs-btn .fs-out{display:none}
body.is-fullscreen #fs-btn .fs-in{display:none}
body.is-fullscreen #fs-btn .fs-out{display:inline}
#fs-btn svg{width:24px;height:24px;display:block}
#vol-btn svg{width:26px;height:24px;display:block}
#vol-pop{display:none;position:absolute;top:47px;right:76px;z-index:650;background:#fff;border:1px solid #d5d5d7;
border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:12px 16px}
#vol-pop.open{display:block}
#vol-pop input[type=range]{width:140px;display:block;accent-color:#000}
#hdr-clock.warn #timer-listening{color:#8a5000}
#hdr-clock.crit #timer-listening{color:#c41230;font-weight:700}
/* ---- part banner + content rhythm ------------------------------------------ */
#listening-area{padding:0 0 48px;--base-size:17px}
.listening-content{padding:0 14px 80px}
#pbar{margin:12.5px 0 17px}
#pbar-inner{padding:12px 12px;border-radius:4px;border-color:#ecede8}
#pbar-title{font-size:15px;margin:0 0 4px}
#pbar-desc{font-size:15px;line-height:22px}
#listening-render{padding-left:3px}
.section-head .num{font-size:17px;margin-bottom:11px}
.section-head .instruction{font-size:17px;--base-size:17px;line-height:25px;margin:0 0 18px}
.section-head h2{font-size:18.7px;--base-size:18.7px;line-height:22px;margin:0 0 16px}
.subhead,.flow-title{font-size:18.7px}
.q-text,.option,.ielts-table,.note-flow,.gap-line,.drag-col-hdr,.drag-item-label,.eh-opt{font-size:17px}
.gap-input{--base-size:17px;width:192px;min-width:192px;height:22px;font-size:17px;border:1px solid #707176;border-radius:4px;color:#000}
.gap-input::placeholder{color:#000}
.gap-input::-webkit-input-placeholder{color:#000}
/* ---- scrollbar ------------------------------------------------------------ */
#listening-area::-webkit-scrollbar{width:15px;height:15px}
#listening-area::-webkit-scrollbar-track{background:transparent}
#listening-area::-webkit-scrollbar-thumb{background:#a0a0a0;border-radius:0}
/* ---- question arrows ---------------------------------------------------------- */
#qnav-arrows{right:37px;bottom:80px;gap:6px}
.qnav-btn{width:52px;height:52px;border-radius:5px}
.qnav-btn.prev:disabled,.qnav-btn.prev:disabled:hover{background:rgb(76,76,76);cursor:default}
/* ---- bottom navigation ------------------------------------------------------------ */
#bnav{height:50px;min-height:50px}
.bnav-plabel{font-size:15px;font-weight:700;padding:14px 21px 14px 14px;color:#000}
.bnav-plabel .sectionNr,.bnav-plabel2 .sectionNr{margin-right:0}
.bnav-plabel2{font-size:15px;padding:14px 20px;color:#000}
.bnav-pscore{font-size:13px;color:#757575;margin-left:8px}
.qpill{font-size:15px;min-width:26px;padding:2.4px 0;margin:10px 0;color:#000}
.qpill.current{border-color:transparent;background:transparent;font-weight:700}
#sub-btn{width:73px;max-width:73px;background:#efefed;color:#555}
/* ---- start page ------------------------------------------------------------------------------ */
#entry-overlay{display:block;padding:0;background:#f5f5f5 radial-gradient(circle,#d9d9db 1px,transparent 1.4px) 0 0/22px 22px;
font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#0f172a}
body.entry-done #entry-overlay{display:none}
.entry-top{height:46px;display:flex;align-items:center;gap:15px;padding:0 17px;background:#f5f5f5;border-bottom:1px solid #eaeaec;position:sticky;top:0;z-index:2}
.entry-top .hdr-logo{width:34px;height:34px}
.entry-top-title{font-size:14.5px;font-weight:500;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry-card{max-width:790px;margin:16px auto 0;border:1px solid #eef1f6;border-radius:18px;background:#fff;
box-shadow:0 2px 10px rgba(15,23,42,.06);overflow:hidden;padding:0}
.entry-card::before{display:none}
.entry-inner{padding:18px 20px 22px}
.st-label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b7280;margin:0 0 7px}
.st-list{margin:0 0 20px;padding-left:19px;font-size:13.5px;line-height:1.5;color:#1f2937}
.st-list li{margin:0 0 2px;padding-left:2px}
.st-hr{border:0;border-top:1px solid #eceff3;margin:18px -20px}
#entry-overlay .entry-field{margin:0 0 4px}
#entry-overlay .entry-field label{font-size:12px;font-weight:600;letter-spacing:.04em;color:#6b7280;margin-bottom:7px}
#entry-overlay .entry-field input{height:40px;padding:0 13px;font-family:inherit;font-size:14px;color:#0f172a;border:1px solid #d9dde4;border-radius:8px;background:#fff}
#entry-overlay .entry-field input:focus{border-color:#f36e73;box-shadow:0 0 0 3px rgba(243,110,115,.15)}
#entry-overlay .entry-field.is-invalid input{border-color:#da363d;background:#fff6f6}
#entry-overlay .entry-hint{font-size:12px;color:#6b7280;min-height:16px;margin-top:5px}
#entry-overlay .entry-field.is-invalid .entry-hint{color:#da363d}
.st-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-mode{position:relative;display:block;text-align:left;font:inherit;color:inherit;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:2px 2px 0;cursor:pointer;overflow:hidden}
.st-mode:hover{border-color:#cfd3da}
.st-mode.sel{border-color:#f36e73;background:#fff5f5;box-shadow:0 0 0 1px #f36e73 inset}
.st-thumb{position:relative;border-radius:8px;overflow:hidden;background:#fafafa;aspect-ratio:337/190}
.st-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.st-badge{position:absolute;left:50%;top:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
background:#da363d;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.01em;padding:7px 12px;border-radius:7px;box-shadow:0 2px 8px rgba(218,54,61,.35)}
.st-badge svg{width:15px;height:15px;flex:0 0 auto}
.st-unlock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;
background:#de3031;color:#fff;font:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;padding:7px 15px;cursor:pointer;box-shadow:0 2px 8px rgba(222,48,49,.4)}
.st-unlock svg{width:14px;height:14px}
.st-mode.unlocked .st-unlock{display:none}
.st-mode-row{display:flex;align-items:center;gap:9px;padding:11px 12px 13px;font-size:14px;font-weight:700;color:#0f172a}
.st-mode-row svg{width:20px;height:20px;flex:0 0 auto}
.st-mode .ic-lock{color:#6b7280}
.st-mode .ic-check{display:none;color:#da363d}
.st-mode.sel .ic-lock{display:none}
.st-mode.sel .ic-check{display:block}
#entry-overlay .entry-btn{display:block;width:200px;margin:0 auto;padding:0;height:38px;font-family:inherit;font-size:14px;font-weight:700;
color:#fff;background:#0f172a;border:0;border-radius:5px;letter-spacing:.01em}
#entry-overlay .entry-btn:hover{background:#1e293b}
#entry-overlay .entry-title{font-size:18px;font-weight:700;color:#0f172a;margin:2px 0 4px}
#entry-overlay .entry-sub{font-size:13.5px;color:#6b7280;margin-bottom:6px}
#entry-overlay .entry-progress-track{background:#eceff3;height:6px;margin:20px 0 9px}
#entry-overlay .entry-progress-fill{background:#0f172a}
#entry-overlay .entry-progress-label{color:#6b7280}
.entry-tg{display:flex;align-items:center;justify-content:center;gap:8px;max-width:790px;margin:12px auto 24px;padding:0 4px;
background:transparent;border:0;text-decoration:none;font-size:12px;color:#6b7280}
.entry-tg .tgn{font-size:12px;font-weight:600;color:#6b7280;display:inline}
.entry-tg .tgd{font-size:12px;color:#9aa1ad;display:inline}
.entry-tg .tgd::before{content:"· "}
.entry-tg .tgj{margin-left:6px;font-size:12px;font-weight:700;color:#229ed9}
@media (max-width:640px){.st-modes{grid-template-columns:1fr}.entry-card{margin:10px 10px 0}}
/* ════════════════════════════════════════════════════════════════════════════
PART 2 · MAP LABELLING — official grid layout (Volume 10 Test 4, Q15–20)
Bold heading + map on the left; on the right a boxed grid of places x letters
with one radio per cell. Scoped to the .mx-* classes, so no other question
type is touched. The map image itself is unchanged.
════════════════════════════════════════════════════════════════════════════ */
.eh-row.mx-row-wrap{display:flex;align-items:flex-start;gap:32px;flex-wrap:wrap;margin:16px 0 20px}
.mx-map{flex:0 1 430px;min-width:300px;margin:0;padding:0}
.mx-map img{display:block;width:100%;max-width:520px;height:auto}
.mx-title{font-size:17px;font-weight:700;line-height:24px;color:#000;margin:0 0 14px}
.mx-side{flex:0 0 auto;min-width:0;max-width:100%;padding-top:0}
.mx-box{box-sizing:border-box;border:1px solid #c6c6c6;background:#fff;padding:18px 14px 16px;max-width:100%;overflow-x:auto}
.mx-table{border-collapse:collapse;table-layout:fixed;color:#000}
.mx-table .mx-corner{width:200px;height:40px;padding:0;border:0;border-bottom:2px solid #000}
.mx-table thead th{width:30px;height:40px;padding:0;font-size:17px;font-weight:700;line-height:24px;text-align:center;vertical-align:middle;color:#000;background:transparent;border:0;border-bottom:2px solid #000;border-left:1px solid #000}
.mx-table thead th:nth-child(2){border-left:2px solid #000}
.mx-table tbody th,.mx-table tbody td{height:40px;padding:0;background:transparent;border:0;border-top:1px solid #000}
.mx-table tbody tr:first-child th,.mx-table tbody tr:first-child td{border-top:0}
.mx-table tbody td{text-align:center;vertical-align:middle;border-left:1px solid #000}
.mx-table tbody td:nth-child(2){border-left:2px solid #000}
.mx-lbl{text-align:left;font-weight:400;font-size:17px;line-height:24px;color:#000;white-space:nowrap}
.mx-lbl .mx-n{display:inline-block;min-width:26px;margin:0 12px 0 4px;font-weight:700}
.mx-lbl .mx-t{font-weight:400}
.mx-lbl .feedback-pill{margin-left:8px}
/* thin grey ring; a solid dark dot when chosen */
.mx-table input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-block;vertical-align:middle;box-sizing:border-box;width:20px;height:20px;margin:0;border:1px solid #767676;border-radius:50%;background:#fff;cursor:pointer}
.mx-table input[type=radio]:hover{border-color:#000}
.mx-table input[type=radio]:checked{border:6px solid #000;background:#fff}
.mx-table input[type=radio]:focus-visible{outline:2px solid rgb(65,142,200);outline-offset:2px}
.mx-row.mx-active th.mx-lbl,.mx-row.mx-active td{background:rgba(65,142,200,.08)}
/* review: the paper is frozen, the verdict reads on the row */
body.review-mode .mx-table input[type=radio]{pointer-events:none;cursor:default}
body.review-mode .mx-row.mx-correct .mx-lbl{color:var(--emerald)}
body.review-mode .mx-row.mx-wrong .mx-lbl{color:var(--crimson)}
body.review-mode .mx-row.mx-wrong input[type=radio]:checked{border-color:var(--crimson)}
body.review-mode .mx-row.mx-correct input[type=radio]:checked{border-color:var(--emerald)}
body.review-mode .mx-c.mx-ca input[type=radio]{box-shadow:0 0 0 3px rgba(46,125,50,.45);border-color:var(--emerald)}
@media (max-width:1100px){.mx-map,.mx-side{flex:1 1 100%}.mx-map img{max-width:560px}}
@media (max-width:640px){.mx-box{padding:12px 6px}.mx-table .mx-corner{width:140px}.mx-table thead th{width:28px}.mx-lbl{font-size:15px}.mx-lbl .mx-n{margin-right:6px}}
/* themes */
body.dark-mode .mx-title,body.dark-mode .mx-table,body.dark-mode .mx-lbl,body.dark-mode .mx-table thead th{color:var(--ex-ink-2)}
body.dark-mode .mx-box{background:transparent;border-color:var(--ex-line-2)}
body.dark-mode .mx-table .mx-corner,body.dark-mode .mx-table thead th,body.dark-mode .mx-table tbody th,body.dark-mode .mx-table tbody td{border-color:var(--ex-ink-2)}
body.dark-mode .mx-table input[type=radio]{background:transparent;border-color:var(--ex-ink-3)}
body.dark-mode .mx-table input[type=radio]:checked{background:transparent;border-color:var(--ex-ink)}
body.theme-sepia .mx-title,body.theme-sepia .mx-table,body.theme-sepia .mx-lbl,body.theme-sepia .mx-table thead th{color:var(--sp-ink)}
body.theme-sepia .mx-box{background:transparent;border-color:var(--sp-line-2)}
body.theme-sepia .mx-table input[type=radio]{background:var(--sp-panel-2)}
#stage-listening.yob .mx-title,#stage-listening.yob .mx-table,#stage-listening.yob .mx-lbl,#stage-listening.yob .mx-table thead th{color:#ffff00}
#stage-listening.yob .mx-box{border-color:#ffff00}
#stage-listening.yob .mx-table .mx-corner,#stage-listening.yob .mx-table thead th,#stage-listening.yob .mx-table tbody th,#stage-listening.yob .mx-table tbody td{border-color:#ffff00}
#stage-listening.yob .mx-table input[type=radio]{border-color:#ffff00}
/* ════════════════════════════════════════════════════════════════════════════
SELECTION POPUP — Note | Highlight on plain text, Remove | Add Note on an
existing highlight. Icon over a bold label, white card with a pointer.
════════════════════════════════════════════════════════════════════════════ */
.hl-popup .tool-btn{min-width:62px;height:56px;gap:5px;padding:7px 10px;color:#111}
.hl-popup .tool-btn::before{display:none !important}
.hl-popup .tool-btn>svg{display:block !important;width:20px;height:20px;flex-shrink:0}
.hl-popup .tool-btn span{font-size:13px;font-weight:700;line-height:1;color:#111}
.hl-popup .tool-btn.remove,.hl-popup .tool-btn.addnote{display:none}
.hl-popup.has-hl .tool-btn.note,.hl-popup.has-hl .tool-btn.hilite{display:none}
.hl-popup.has-hl .tool-btn.remove,.hl-popup.has-hl .tool-btn.addnote{display:flex}
.hl-popup .tool-btn.remove{color:#e5383b}
.hl-popup .tool-btn.remove span{color:#111}
.hl-popup .tool-btn.addnote{border-left:0}
/* ════════════════════════════════════════════════════════════════════════════
EXAM RESULTS PAGE
════════════════════════════════════════════════════════════════════════════ */
#stage-results{background:#fff !important;font-family:Arial,Helvetica,sans-serif !important;color:#0f172a !important}
.xr-hdr{position:relative;flex:0 0 auto;height:42px;display:flex;align-items:center;gap:20px;padding:0 15px;background:#fff;border-bottom:1px solid #d9d9d9}
.xr-logo{width:34px;height:34px;flex:0 0 auto;display:block}
.xr-title{font-size:13px;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.xr-rem{position:absolute;left:45%;top:50%;transform:translateY(-50%);font-size:13px;color:#ef4444;white-space:nowrap}
.xr-bar{flex:0 0 auto;margin:14px 15px 0;padding:14px 12px;font-size:16px;font-weight:700;color:#111;background:#f1f2ec;border:1px solid #dcdcd6;border-radius:3px}
#stage-results .results-content{margin:0;padding:34px 54px 60px;overflow-y:auto;flex:1;width:100%;box-sizing:border-box}
.xr-wrap{max-width:1160px;margin:0 auto}
.xr-h1{margin:0;text-align:center;font-size:30px;font-weight:700;line-height:1.2;color:#0f172a}
.xr-sec{text-align:center;margin:12px 0 28px}
.xr-sec span{display:inline-block;padding:8px 12px;border-radius:999px;background:#eef2fb;color:#2f5be0;font-size:13px;font-weight:600}
.xr-card{background:#fff;border:1px solid #e5e8ee;border-radius:10px;padding:22px 22px 24px;margin:0 0 22px}
.xr-band{background:#f1f4f9;text-align:center;padding:30px 22px 26px}
.xr-band-t{font-size:17px;font-weight:600;color:#111}
.xr-band-n{margin:12px 0 4px;font-size:34px;font-weight:700;line-height:1.1;color:#2b59e6}
.xr-band-o{font-size:13px;color:#111}
.xr-band-p{margin-top:12px;font-size:13px;color:#6b7280}
.xr-h2{margin:0 0 16px;font-size:17px;font-weight:600;color:#111}
.xr-pills{display:flex;flex-wrap:wrap;gap:10px}
.xr-pill{padding:6px 11px 7px;border-radius:999px;background:#fde4e4;color:#c4262e;font-size:13.5px;font-weight:500}
.xr-none{font-size:14px;color:#2e7d32}
.xr-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 10px;padding:13px 12px;background:#eff3f8;border-radius:6px;font-size:14px;color:#111}
.xr-row:last-child{margin-bottom:0}
.xr-row-l{font-weight:600}
.xr-row-r b{color:#e5383b;font-weight:600}
.xr-actions{display:flex;justify-content:center;gap:14px;margin:34px 0 0;padding-top:24px;border-top:1px solid #e5e8ee}
.xr-btn{padding:10px 22px 11px;border:1px solid #dcdfe4;border-radius:4px;background:#fff;color:#111;font:600 13px Arial,Helvetica,sans-serif;cursor:pointer}
.xr-btn:hover{background:#f6f7f9}
.xr-btn.dark{background:#0f172a;border-color:#0f172a;color:#fff}
.xr-btn.dark:hover{background:#1e293b}
@media (max-width:700px){#stage-results .results-content{padding:24px 16px 40px}.xr-rem{position:static;transform:none;margin-left:auto}}
/* ── highlight colour: #820240 everywhere a highlight or note is painted ── */
.hl-y,.hl-g,.hl-p,.hl-note,
body.dark-mode .hl-y,body.dark-mode .hl-g,body.dark-mode .hl-p,body.dark-mode .hl-note{background:#820240;color:#fff}
/* ── dark mode fixes ────────────────────────────────────────────────────── */
/* the menu glyph is an SVG inside ; the old "three bars"
rule painted that span solid, so the hamburger turned into a block */
body.dark-mode #menu-btn span,body.dark-mode #menu-btn .hdr-icon{background:transparent !important}
/* the map is black line art on white: invert it so it sits on the dark paper */
body.dark-mode .mx-map img{filter:invert(1) hue-rotate(180deg)}
/* results page */
body.dark-mode #stage-results{background:var(--ex-ground) !important;color:var(--ex-ink) !important}
body.dark-mode .xr-hdr{background:var(--ex-panel);border-bottom-color:var(--ex-line)}
body.dark-mode .xr-title{color:var(--ex-ink)}
body.dark-mode .xr-rem{color:#f87171}
body.dark-mode .xr-bar{background:var(--ex-panel-2);border-color:var(--ex-line);color:var(--ex-ink)}
body.dark-mode .xr-h1,body.dark-mode .xr-h2,body.dark-mode .xr-band-t,body.dark-mode .xr-band-o,body.dark-mode .xr-row,body.dark-mode .xr-row-l{color:var(--ex-ink)}
body.dark-mode .xr-sec span{background:rgba(90,157,224,.16);color:#8fb4ff}
body.dark-mode .xr-card{background:var(--ex-panel);border-color:var(--ex-line)}
body.dark-mode .xr-band{background:var(--ex-panel-2)}
body.dark-mode .xr-band-n{color:#7da2ff}
body.dark-mode .xr-band-p{color:var(--ex-ink-3)}
body.dark-mode .xr-pill{background:rgba(248,113,113,.16);color:#fca5a5}
body.dark-mode .xr-row{background:var(--ex-panel-2)}
body.dark-mode .xr-row-r b{color:#f87171}
body.dark-mode .xr-actions{border-top-color:var(--ex-line)}
body.dark-mode .xr-btn{background:var(--ex-panel-2);border-color:var(--ex-line-2);color:var(--ex-ink)}
body.dark-mode .xr-btn:hover{background:var(--ex-line)}
body.dark-mode .xr-btn.dark{background:#e8ecf1;border-color:#e8ecf1;color:#0f172a}
/* ── dark mode: header menu glyph + the full-screen Options / Messages / time-up pages ── */
body.dark-mode #menu-btn,body.dark-mode #menu-btn .hdr-icon{color:#ddd}
body.dark-mode #opt-page,body.dark-mode #msg-page{background:var(--ex-ground);color:var(--ex-ink)}
body.dark-mode #opt-page .opt-topbar h1,body.dark-mode #msg-page .opt-topbar h1,body.dark-mode .opt-close,body.dark-mode .opt-back{color:var(--ex-ink)}
body.dark-mode .opt-group{background:var(--ex-panel);border-color:var(--ex-line-2)}
body.dark-mode .opt-item{background:var(--ex-panel);color:var(--ex-ink)}
body.dark-mode .opt-item + .opt-item{border-top-color:var(--ex-line-2)}
body.dark-mode .opt-item:hover{background:var(--ex-panel-2)}
body.dark-mode .opt-item.main{background:#e31837;color:#fff}
body.dark-mode .tu-card{background:var(--ex-panel);color:var(--ex-ink)}
body.dark-mode .tu-card h2,body.dark-mode .tu-card p{color:var(--ex-ink)}
/* ════════════════════════════════════════════════════════════════════════════
TEXT SIZE — scale the whole paper (see LSN.setTextSize)
════════════════════════════════════════════════════════════════════════════ */
:root{--text-scale:1}
#listening-render{zoom:var(--text-scale,1)}
/* ════════════════════════════════════════════════════════════════════════════
EXAM SETTINGS dialog
════════════════════════════════════════════════════════════════════════════ */
#set-overlay{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.45);font-family:Arial,Helvetica,sans-serif}
#set-overlay.open{display:flex}
#set-modal{position:relative;box-sizing:border-box;width:min(485px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:24px 26px 26px;background:#fff;color:#0f172a;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 20px 50px rgba(15,23,42,.28)}
.set-x{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}
.set-x:hover{background:#f1f5f9;color:#0f172a}
.set-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:20px;font-weight:700;line-height:1.2;color:#0f172a}
.set-sec{margin:0 0 22px}
.set-lbl{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;font-weight:700;color:#0f172a}
.set-stack{display:flex;flex-direction:column;gap:9px}
.set-row{display:flex;gap:8px}
.set-opt{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#64748b;font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.set-opt:hover{background:#f8fafc;color:#0f172a}
.set-opt.sel{background:#eff3f9;border-color:#eff3f9;color:#0f172a}
.set-opt:focus-visible,.set-card:focus-visible,.set-x:focus-visible{outline:2px solid #2b59e6;outline-offset:2px}
.set-row .set-opt{justify-content:center;padding:11px 4px}
.set-opt.size-regular span{font-size:14px}
.set-opt.size-large{padding-top:10px;padding-bottom:10px}
.set-opt.size-large span{font-size:17px}
.set-opt.size-xlarge{padding-top:11px;padding-bottom:11px}
.set-opt.size-xlarge span{font-size:19.5px}
.set-note{margin:10px 0 0;font-size:12px;color:#64748b}
.set-card{display:block;width:100%;box-sizing:border-box;margin:0 0 12px;padding:14px 16px;border-radius:8px;text-align:left;font:inherit;cursor:pointer}
.set-card-t{display:flex;align-items:center;gap:9px;font-size:14px;color:#0f172a}
.set-card-t b{font-weight:700}
.set-card-s{display:block;margin-top:5px;font-size:12.5px}
.set-report{background:#fffbea;border:1px solid #fcd96b}
.set-report .set-card-t svg{color:#d97706}
.set-report .set-card-s{color:#6b7280}
.set-report:hover{background:#fff7d1}
.set-leave{margin-bottom:0;background:#fff;border:1px solid #e2e8f0}
.set-leave .set-card-s{color:#64748b;padding-left:25px}
.set-leave:hover{background:#f8fafc}
@media (max-width:480px){#set-modal{padding:20px 16px 20px}.set-row{flex-wrap:wrap}.set-row .set-opt{flex:1 1 30%}}
body.dark-mode #set-overlay{background:rgba(0,0,0,.6)}
body.dark-mode #set-modal{background:var(--ex-panel);color:var(--ex-ink);border-color:var(--ex-line-2)}
body.dark-mode .set-h,body.dark-mode .set-lbl,body.dark-mode .set-card-t{color:var(--ex-ink)}
body.dark-mode .set-x{color:var(--ex-ink-3)}
body.dark-mode .set-x:hover{background:var(--ex-panel-2);color:var(--ex-ink)}
body.dark-mode .set-opt{background:transparent;border-color:var(--ex-line-2);color:var(--ex-ink-3)}
body.dark-mode .set-opt:hover{background:var(--ex-panel-2);color:var(--ex-ink)}
body.dark-mode .set-opt.sel{background:var(--ex-panel-2);border-color:var(--ex-focus);color:var(--ex-ink)}
body.dark-mode .set-note,body.dark-mode .set-leave .set-card-s,body.dark-mode .set-report .set-card-s{color:var(--ex-ink-3)}
body.dark-mode .set-report{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.45)}
body.dark-mode .set-report:hover{background:rgba(245,158,11,.2)}
body.dark-mode .set-leave{background:transparent;border-color:var(--ex-line-2)}
body.dark-mode .set-leave:hover{background:var(--ex-panel-2)}
/* ============================================================
FULL MOCK · embedded mode (listening-.html?embed=1)
The mock shell already did the login, so the name card is hidden and
only the "Preparing your test" progress is shown while the recording loads.
============================================================ */
html.mock-embed #entry-form,html.mock-embed .entry-tg{display:none!important}
#mock-exit{position:fixed;right:16px;bottom:16px;z-index:99999;background:#111;color:#fff;border:0;border-radius:4px;
padding:11px 18px;font:14px Arial,sans-serif;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
#mock-exit:hover{background:#000}
/* ═══ Part practice · map labelling (Part 2) ═══
The map is drawn the way the official player draws it: black line-work on white,
bold sans-serif letters, a title above the plan. The answer grid beside it is
the .mx-* table defined above. */
.mx-map{flex:0 1 480px}
.mx-map svg{display:block;width:100%;max-width:480px;height:auto}
/* the official grid: 245px label column, 40px letter columns, small thin-ringed radios */
@media (min-width:641px){
.mx-table .mx-corner{width:245px}
.mx-table thead th{width:40px}
.mx-table input[type=radio]{width:13px;height:13px}
.mx-table input[type=radio]:checked{border-width:4px}
}
/* #listening-render keeps a 254px right gutter; the map row uses most of it so plan and grid sit side by side */
@media (min-width:1250px){.eh-row.mx-row-wrap{margin-right:-150px}}
.mx-map .mp-box{fill:#fff;stroke:#000;stroke-width:2.5}
.mx-map .mp-lt{font:700 21px Arial,Helvetica,sans-serif;fill:#000;text-anchor:middle}
.mx-map .mp-nm{font:700 17px Arial,Helvetica,sans-serif;fill:#000;text-anchor:middle}
.mx-map .mp-sm{font:700 16px Arial,Helvetica,sans-serif;fill:#000;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.mx-map .mp-ttl{font:700 22px Arial,Helvetica,sans-serif;fill:#000;text-anchor:middle}
body.dark-mode .mx-map svg{filter:invert(1) hue-rotate(180deg)}
/* ── Selecting text: only the question paper ──
The header, the part bar, the footer and the buttons cannot be selected, so neither the
browser's selection nor the Highlight / Note popup appears there. */
#stage-listening{-webkit-user-select:none;user-select:none}
#stage-listening #listening-render{-webkit-user-select:text;user-select:text}
#stage-listening #listening-render button,#stage-listening .q-pill,#stage-listening .drag-chip{-webkit-user-select:none;user-select:none}
#stage-listening input,#stage-listening textarea{-webkit-user-select:text;user-select:text}
/* ── Table completion (tests made in the admin panel): a real table, a typed gap in its cells ── */
.ix-ltable-wrap{overflow-x:auto;margin:6px 0 14px}
.ix-ltable{border-collapse:collapse;min-width:60%;max-width:100%;font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:var(--ink)}
.ix-ltable th,.ix-ltable td{border:1px solid var(--line-4);padding:8px 12px;text-align:left;vertical-align:top}
.ix-ltable th{font-weight:700;background:var(--bg-elev)}
.ix-ltable td{background:var(--paper)}
.ix-ltable .gap-field{white-space:nowrap}
.ix-ltable .gap-input{width:110px;min-width:80px}
/* ── Notes / sentences / summaries typed as text (tests made in the admin panel): every line of the paper is shown ── */
.ix-notes .ix-line,.ix-notes .ix-li{margin:0 0 10px}
.ix-notes .ix-li{position:relative;padding-left:18px}
.ix-notes .ix-li::before{content:"\2022";position:absolute;left:3px;top:0}
.ix-notes .subhead{font-weight:700;margin:16px 0 8px}
.ix-notes .subhead:first-child{margin-top:0}
.ix-summary p{margin:0 0 12px;line-height:2.1}
.ix-pool-below{margin-top:18px}
/* ── Tables of tests made in the admin panel, as in the computer test: the title in the first row, the headings and
the first column in bold, white cells with dark rules, bullets and several gaps in a cell ── */
.ix-ltable{width:100%;max-width:980px;table-layout:auto;border:1px solid #333}
.ix-ltable th,.ix-ltable td{border:1px solid #333;padding:10px 14px;background:var(--paper);line-height:1.9}
.ix-ltable th{font-weight:700;text-align:left}
.ix-ltable .ix-ttitle{padding:14px}
.ix-ltable .ix-tul{margin:0;padding:0 0 0 24px}
.ix-ltable .ix-tul li{margin:2px 0}
.ix-ltable .ix-tline+.ix-tline,.ix-ltable .ix-tline+.ix-tul,.ix-ltable .ix-tul+.ix-tline{margin-top:4px}
body.dark-mode .ix-ltable,body.dark-mode .ix-ltable th,body.dark-mode .ix-ltable td{border-color:var(--line-4);background:var(--paper)}
/* notes and summaries: the title centred over the block */
.ix-textblock .section-head h2{text-align:center;margin-top:6px}
.ix-notes .subhead{font-size:16px}
/* dark mode: the header's title, sub-line and clock (they were black on the dark bar) */
body.dark-mode .hdr-title,body.dark-mode .hdr-subline,body.dark-mode #hdr-clock,body.dark-mode #hdr-clock .ttid-sub-title{color:var(--ex-ink)}
body.dark-mode #hdr-clock.warn .ttid-sub-title{color:#f0b35a}
body.dark-mode #hdr-clock.crit .ttid-sub-title{color:#ff7d90}
body.dark-mode .ix-notes .ix-li::before{color:var(--ex-ink-2)}
/* ── Dark mode: a black page and no grey patches behind the questions ── */
body.dark-mode{--ex-ground:#000;--ex-panel:#121417;--ex-panel-2:#1b1e23;--ex-line:#30353c;--ex-line-2:#454b54}
body.dark-mode,body.dark-mode #stage-listening,body.dark-mode #listening-area{background:#000}
body.dark-mode .option{background:transparent}
body.dark-mode .option:hover{background:#15181c}
body.dark-mode .option.selected{background:#132741}