/* ============================================================ STUDENT EXAM — Orient-style light theme + layout Forces a clean white background, Inter/Poppins-leaning type, teal primary, and the same passage|questions split that the reference uses. ============================================================ */ body.exam-mode{ background:#ffffff !important; color:#15202B !important; font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Native Emoji', sans-serif; overflow:hidden; /* No bg/color transition on the exam surface itself — when an iframe is mid-load the browser throttles paint and the body's transition got "stuck" at its old value (e.g. dark navy in light mode). Snap the theme switch instead. Inner UI elements may still transition their own colors on hover etc. */ } [data-theme="dark"] body.exam-mode{ background:#0d1620 !important; color:#e6eef5 !important; } /* Inner elements transition hover/focus colors but NOT background — same throttling issue otherwise produces stuck dark panels. */ body.exam-mode #reading-exam *{ transition:color .2s ease, border-color .2s ease; } /* Hide every public surface (homepage hero, header, footer, FAB, other takeover sections, decorative aurora) so the exam takes over the whole viewport. Mirrors the body.writing-mode rule above. */ body.exam-mode > .aurora, body.exam-mode > header, body.exam-mode > footer, body.exam-mode > .wrap, body.exam-mode > .admin-fab, body.exam-mode > .overlay, body.exam-mode > section:not(#reading-exam):not(#listening-exam){ display:none !important; } body.exam-mode::after, body.exam-mode::before{ display:none !important; } /* ============================================================ Generic utility — must hide ANY element that flips this class. Without this rule, every overlay (.exit-overlay, .modal-overlay, .context-menu, .highlight-toolbar) leaks its raw content into the page as inline text on first render. ============================================================ */ .hidden{ display:none !important; } /* Exit-confirmation modal */ body.exam-mode #reading-exam .exit-overlay{ position:fixed; inset:0; background:rgba(20,30,40,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; } body.exam-mode #reading-exam .exit-box{ width:100%; max-width:420px; background:#ffffff; border-radius:18px; padding:28px 28px 22px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); text-align:center; } body.exam-mode #reading-exam .exit-box h3{ margin:0 0 10px; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:22px; color:#15202B; } body.exam-mode #reading-exam .exit-box p{ margin:0 0 22px; color:#5b6b78; font-size:14.5px; line-height:1.55; } body.exam-mode #reading-exam .exit-box-btns{ display:flex; gap:10px; justify-content:center; } body.exam-mode #reading-exam .exit-cancel, body.exam-mode #reading-exam .exit-confirm{ flex:1; padding:11px 18px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; border:1px solid #E4E8EC; transition:background .15s, border-color .15s, color .15s; } body.exam-mode #reading-exam .exit-cancel{ background:#ffffff; color:#15202B; } body.exam-mode #reading-exam .exit-cancel:hover{ background:#F1F8F6; border-color:#11A37F; color:#11A37F; } body.exam-mode #reading-exam .exit-confirm{ background:#E0533D; color:#ffffff; border-color:#E0533D; } body.exam-mode #reading-exam .exit-confirm:hover{ background:#c9442e; border-color:#c9442e; } /* Right-click context menu on the passage */ body.exam-mode #reading-exam .context-menu{ position:fixed; min-width:160px; background:#ffffff; border:1px solid #E4E8EC; border-radius:10px; box-shadow:0 12px 28px -10px rgba(0,0,0,.25); padding:6px; z-index:8500; display:none; } body.exam-mode #reading-exam .context-menu.open{ display:block; } body.exam-mode #reading-exam .context-menu-item{ padding:8px 12px; border-radius:6px; font-size:14px; cursor:pointer; color:#15202B; } body.exam-mode #reading-exam .context-menu-item:hover{ background:#F1F8F6; color:#11A37F; } /* Results modal (filled on Submit) */ body.exam-mode #reading-exam .modal-overlay{ position:fixed; inset:0; background:rgba(20,30,40,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:9100; display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; } body.exam-mode #reading-exam .modal-content{ width:100%; max-width:760px; background:#ffffff; border-radius:18px; padding:26px 28px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); position:relative; max-height:calc(100vh - 60px); overflow-y:auto; } body.exam-mode #reading-exam .modal-content h2{ margin:0 0 14px; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:24px; color:#15202B; } body.exam-mode #reading-exam .modal-close-btn{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:#F1F4F7; color:#5b6b78; font-size:22px; line-height:1; cursor:pointer; border:none; } body.exam-mode #reading-exam .modal-close-btn:hover{ background:#E4E8EC; color:#15202B; } body.exam-mode #reading-exam .results-summary{ padding:14px 16px; background:#F1F8F6; border:1px solid #B7E3D4; border-radius:12px; margin-bottom:18px; color:#0c7a5e; font-weight:700; } body.exam-mode #reading-exam .results-header, body.exam-mode #reading-exam .results-row{ display:grid; grid-template-columns:60px 110px 1fr 1fr; gap:10px; padding:10px 14px; border-bottom:1px solid #E4E8EC; font-size:13.5px; } body.exam-mode #reading-exam .results-header{ font-weight:700; color:#5b6b78; background:#F8FAFB; border-radius:10px 10px 0 0; } body.exam-mode #reading-exam .results-details-container{ border:1px solid #E4E8EC; border-radius:12px; overflow:hidden; } body.exam-mode #reading-exam .results-row.is-right{ color:#0c7a5e; } body.exam-mode #reading-exam .results-row.is-right > div:nth-child(2){ color:#0c7a5e; font-weight:800; } body.exam-mode #reading-exam .results-row.is-wrong > div:nth-child(2){ color:#E0533D; font-weight:800; } /* Action row under the results table — "Review answers" (ghost) + "Solve again" (emerald primary, ↻ sweeps a full turn on hover). */ body.exam-mode #reading-exam .results-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; } body.exam-mode #reading-exam .results-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:12px; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .2s ease, color .2s ease; } body.exam-mode #reading-exam .results-btn:active{ transform:translateY(1px); } body.exam-mode #reading-exam .results-btn--ghost{ background:#F1F4F7; color:#5b6b78; border-color:#E4E8EC; } body.exam-mode #reading-exam .results-btn--ghost:hover{ background:#E7ECF1; color:#15202B; } body.exam-mode #reading-exam .results-btn--primary{ color:#fff; background:linear-gradient(135deg, #22c55e, #11A37F); box-shadow:0 8px 20px -8px rgba(17,163,127,.7); } body.exam-mode #reading-exam .results-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(17,163,127,.85); } body.exam-mode #reading-exam .results-btn-ico{ display:inline-block; font-size:16px; line-height:1; transition:transform .6s cubic-bezier(.2,.8,.2,1); } body.exam-mode #reading-exam .results-btn--primary:hover .results-btn-ico{ transform:rotate(360deg); } /* Top-of-popup "Show explanations" — full width, directly under the score, so it's seen immediately without scrolling past the answer table. */ body.exam-mode #reading-exam .results-btn--explain{ display:flex; width:100%; justify-content:center; margin:0 0 18px; } /* Results summary — three big stat cells (Correct / Band / Scaled) */ body.exam-mode #reading-exam .ex-res-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:14px; } body.exam-mode #reading-exam .ex-res-cell{ padding:14px 16px; background:#F1F8F6; border:1px solid #B7E3D4; border-radius:12px; text-align:center; } body.exam-mode #reading-exam .ex-res-cell-l{ font-size:11.5px; font-weight:700; color:#5b6b78; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; } body.exam-mode #reading-exam .ex-res-cell-v{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:24px; color:#15202B; font-variant-numeric:tabular-nums; } body.exam-mode #reading-exam .ex-res-band{ color:#0c7a5e; font-size:32px; } body.exam-mode #reading-exam .ex-res-note{ color:#5b6b78; font-size:12.5px; line-height:1.5; padding:8px 12px; margin-bottom:12px; background:#F8FAFB; border-radius:8px; } [data-theme="dark"] body.exam-mode #reading-exam .ex-res-cell{ background:rgba(17,163,127,.14); border-color:rgba(17,163,127,.32); } [data-theme="dark"] body.exam-mode #reading-exam .ex-res-cell-l{ color:#94a3b0; } [data-theme="dark"] body.exam-mode #reading-exam .ex-res-cell-v{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .ex-res-band{ color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .ex-res-note{ background:#141a21; color:#94a3b0; } /* "Completed in M:SS" — time-taken chip on the results screen */ body.exam-mode #reading-exam .ex-res-time, #listening-exam .ex-res-time{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#0c7a5e; padding:7px 14px; margin-bottom:12px; border-radius:999px; background:linear-gradient(135deg, rgba(17,163,127,.12), rgba(17,163,127,.05)); border:1px solid rgba(17,163,127,.28); } body.exam-mode #reading-exam .ex-res-time-ic, #listening-exam .ex-res-time-ic{ font-size:15px; } [data-theme="dark"] body.exam-mode #reading-exam .ex-res-time, [data-theme="dark"] #listening-exam .ex-res-time{ color:#69e6bb; background:rgba(17,163,127,.14); border-color:rgba(17,163,127,.34); } /* Floating selection-highlighter toolbar. The JS toggles the `hidden` attribute (not a class), so we let that handle visibility. When shown it's an inline-flex pill anchored near the text selection. */ body.exam-mode #reading-exam .highlight-toolbar{ position:fixed; display:inline-flex; align-items:center; gap:6px; padding:7px 9px; background:rgba(18,26,36,.92); border:1px solid rgba(255,255,255,.12); border-radius:999px; box-shadow:0 12px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); z-index:8600; transform:translate(-50%, calc(-100% - 12px)); pointer-events:auto; } body.exam-mode #reading-exam .highlight-toolbar[hidden]{ display:none !important; } body.exam-mode #reading-exam .highlight-color{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.22); cursor:pointer; padding:0; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } body.exam-mode #reading-exam .highlight-color:hover{ transform:scale(1.14); border-color:#ffffff; } body.exam-mode #reading-exam .highlight-color.yellow{ background:#ffd60a; box-shadow:0 0 9px 0 rgba(255,210,0,.65); } body.exam-mode #reading-exam .highlight-color.green{ background:#34d27e; box-shadow:0 0 9px 0 rgba(48,200,120,.65); } body.exam-mode #reading-exam .highlight-color.pink{ background:#ff5a96; box-shadow:0 0 9px 0 rgba(255,80,150,.65); } body.exam-mode #reading-exam .highlight-color.blue{ background:#4aa3ff; box-shadow:0 0 9px 0 rgba(60,150,255,.65); } body.exam-mode #reading-exam .highlight-toolbar .remove{ width:26px; height:22px; background:transparent; color:#ffffff; font-size:14px; line-height:1; cursor:pointer; border:none; border-left:1px solid rgba(255,255,255,.18); padding:0 0 0 6px; margin-left:2px; } body.exam-mode #reading-exam .highlight-toolbar .remove:hover{ color:#FBE26B; } /* Glowy highlight marks — semi-transparent fill + a 1px coloured ring + a soft outer glow in the same hue, so highlights read like a luminous highlighter pen in both themes. box-decoration-break gives wrapped lines their own rounded, glowing pill. */ body.exam-mode #reading-exam .reading-passage mark{ background:transparent; padding:0 1px; } body.exam-mode #reading-exam .reading-passage mark.ex-hl{ border-radius:5px; padding:.04em .2em; background-color:var(--bandly-hl-fill,rgba(255,224,77,.34)); box-shadow:0 0 0 1px var(--bandly-hl-edge,rgba(255,210,0,.5)), 0 0 11px 0 var(--bandly-hl-glow,rgba(255,205,0,.6)); transition:box-shadow .18s ease, background-color .18s ease; -webkit-box-decoration-break:clone; box-decoration-break:clone; } body.exam-mode #reading-exam .reading-passage mark.ex-hl.yellow{ --bandly-hl-fill:rgba(255,224,77,.34); --bandly-hl-edge:rgba(255,210,0,.55); --bandly-hl-glow:rgba(255,205,0,.6); } body.exam-mode #reading-exam .reading-passage mark.ex-hl.green{ --bandly-hl-fill:rgba(72,210,140,.3); --bandly-hl-edge:rgba(56,200,128,.5); --bandly-hl-glow:rgba(48,200,120,.55); } body.exam-mode #reading-exam .reading-passage mark.ex-hl.pink{ --bandly-hl-fill:rgba(255,108,158,.3); --bandly-hl-edge:rgba(255,90,150,.5); --bandly-hl-glow:rgba(255,80,150,.55); } body.exam-mode #reading-exam .reading-passage mark.ex-hl.blue{ --bandly-hl-fill:rgba(80,170,255,.3); --bandly-hl-edge:rgba(70,150,255,.5); --bandly-hl-glow:rgba(60,150,255,.55); } /* Dark-mode parity for overlays */ [data-theme="dark"] body.exam-mode #reading-exam .exit-box, [data-theme="dark"] body.exam-mode #reading-exam .modal-content, [data-theme="dark"] body.exam-mode #reading-exam .context-menu{ background:#1a2129; color:#e6eef5; border-color:#29333e; } [data-theme="dark"] body.exam-mode #reading-exam .exit-box h3, [data-theme="dark"] body.exam-mode #reading-exam .modal-content h2{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .exit-box p, [data-theme="dark"] body.exam-mode #reading-exam .context-menu-item{ color:#94a3b0; } [data-theme="dark"] body.exam-mode #reading-exam .context-menu-item{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .results-summary{ background:rgba(17,163,127,.18); border-color:rgba(17,163,127,.36); color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .results-header, [data-theme="dark"] body.exam-mode #reading-exam .results-row{ border-color:#29333e; color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .results-header{ background:#141a21; color:#94a3b0; } [data-theme="dark"] body.exam-mode #reading-exam .results-details-container{ border-color:#29333e; } [data-theme="dark"] body.exam-mode #reading-exam .results-btn--ghost{ background:#222b35; color:#94a3b0; border-color:#29333e; } [data-theme="dark"] body.exam-mode #reading-exam .results-btn--ghost:hover{ background:#2a343f; color:#e6eef5; } body.exam-mode #reading-exam, body.exam-mode #reading-exam button, body.exam-mode #reading-exam input, body.exam-mode #reading-exam select, body.exam-mode #reading-exam textarea{ font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Native Emoji', sans-serif; } body.exam-mode #reading-exam{ background:#ffffff; color:#15202B; /* Use exact viewport height so the panels stay inside and scroll internally. `min-height` would let the layout grow with content (which is what made the question panel 2909 px tall, with no visible scrollbar). */ height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; } /* Header */ body.exam-mode #reading-exam .header{ display:flex; align-items:center; justify-content:space-between; /* Reserve the right-most ~100px for the floating Exit button so the Fullscreen + theme-toggle controls don't collide with it. */ padding:12px 110px 12px 22px; background:#ffffff; border-bottom:1px solid #E4E8EC; position:sticky; top:0; z-index:10; } body.exam-mode #reading-exam .header-left, body.exam-mode #reading-exam .header-right{ display:flex; align-items:center; gap:14px; } /* Bandly brand mark in the exam header (replaces any external branding). */ body.exam-mode #reading-exam .ex-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; padding:4px 10px 4px 4px; border-radius:10px; transition:background .15s ease; } body.exam-mode #reading-exam .ex-brand:hover{ background:#F1F8F6; } body.exam-mode #reading-exam .ex-brand-mark{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:#11A37F; color:#ffffff; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:14px; letter-spacing:.5px; } body.exam-mode #reading-exam .ex-brand-name{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:15px; color:#15202B; letter-spacing:.2px; } body.exam-mode #reading-exam .ex-brand-name em{ font-style:normal; color:#11A37F; } /* Dark-mode parity */ [data-theme="dark"] body.exam-mode #reading-exam .ex-brand-name{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .ex-brand:hover{ background:#1a2129; } /* ============================================================ Dark-mode polish for the whole exam surface — every panel, border, input, palette button, footer, and submit button. Without these the exam in dark mode shows white panels on a dark body, which is what made the screenshot look broken. ============================================================ */ [data-theme="dark"] body.exam-mode{ background:#0d1620 !important; color:#e6eef5 !important; } [data-theme="dark"] body.exam-mode #reading-exam{ background:#0d1620; color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .header{ background:#141e2a; border-bottom-color:#1f2c39; } [data-theme="dark"] body.exam-mode #reading-exam .part-header{ background:#141e2a; border-bottom-color:#1f2c39; } /* Main-container's light-mode bg is #ffffff, which would flash white in the area below a SHORT panel in dark mode (we use align-items:flex-start on .panels-container so a short Part doesn't get stretched up to match the passage). Override to the panel colour so the area below the short panel reads as a continuation of it, not a jarring white strip. */ [data-theme="dark"] body.exam-mode #reading-exam .main-container{ background:#0d1620; } [data-theme="dark"] body.exam-mode #reading-exam .part-header p{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .part-header p:first-child{ color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .passage-panel, [data-theme="dark"] body.exam-mode #reading-exam .questions-panel{ background:#0d1620; color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .reading-passage{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .reading-passage > h2:first-child{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .reading-passage h1, [data-theme="dark"] body.exam-mode #reading-exam .reading-passage h2, [data-theme="dark"] body.exam-mode #reading-exam .reading-passage h3{ color:#e6eef5; } /* Question cards in dark */ [data-theme="dark"] body.exam-mode #reading-exam .ex-q-card{ background:#141e2a; border-color:#1f2c39; color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .ex-q-num, [data-theme="dark"] body.exam-mode #reading-exam .ex-q-prompt{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .ex-q-instr{ color:#94a3b0; } [data-theme="dark"] body.exam-mode #reading-exam .ex-q-type{ background:rgba(63,207,159,.14); color:#3fcf9f; border-color:rgba(63,207,159,.32); } /* Inputs (gap fields, MC labels) in dark */ [data-theme="dark"] body.exam-mode #reading-exam .ex-gap-input{ background:#0d1620; color:#e6eef5; border:1px solid #2a3b4d; } [data-theme="dark"] body.exam-mode #reading-exam .ex-gap-input:focus{ border-color:#11A37F; outline:none; } [data-theme="dark"] body.exam-mode #reading-exam .ex-mc-option, [data-theme="dark"] body.exam-mode #reading-exam .ex-3way-opt{ background:#141e2a; border-color:#1f2c39; color:#e6eef5; } /* Hover in dark mode — the light-mode rule sets bg #F1F8F6 which makes text disappear on dark backgrounds. Override with a translucent green so the option stays readable while showing it's hover-active. */ [data-theme="dark"] body.exam-mode #reading-exam .ex-mc-option:hover, [data-theme="dark"] body.exam-mode #reading-exam .ex-3way-opt:hover{ background:rgba(63,207,159,.12); border-color:#3fcf9f; color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .ex-mc-option.is-checked, [data-theme="dark"] body.exam-mode #reading-exam .ex-3way-opt.is-checked{ background:rgba(17,163,127,.22); border-color:#3fcf9f; color:#a8efd0; /* bright mint so the selected label pops */ } /* The MC letter / box and sub-statement number need explicit dark colours too — they're set to dark teal in light mode and invisible otherwise. */ [data-theme="dark"] body.exam-mode #reading-exam .ex-mc-box, [data-theme="dark"] body.exam-mode #reading-exam .ex-mc-letter{ color:#5fdfb0; } [data-theme="dark"] body.exam-mode #reading-exam .ex-mc-subnum{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .ex-mc-text, [data-theme="dark"] body.exam-mode #reading-exam .ex-3way-text{ color:inherit; } /* Resizer in dark */ [data-theme="dark"] body.exam-mode #reading-exam .resizer::before{ background:#1f2c39; } [data-theme="dark"] body.exam-mode #reading-exam .resizer::after{ background:#141e2a; border-color:#3fcf9f; color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .resizer:hover::after{ background:#1a2735; border-color:#3fcf9f; color:#5fdfb0; } /* Timer in dark */ /* Dark-theme surface for the depleting-ring timer capsule. The accent (--tc) is set by the state classes in the base block below; here we only swap the glassy surface + digit colour so it reads on the dark exam chrome. */ [data-theme="dark"] body.exam-mode #reading-exam .timer-container{ background: radial-gradient(130% 170% at 0% 50%, var(--tc-soft), transparent 62%), linear-gradient(180deg, rgba(22,32,30,.88), rgba(12,20,18,.92)); border-color:color-mix(in srgb, var(--tc) 42%, transparent); box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 10px 26px -14px color-mix(in srgb, var(--tc) 75%, transparent); } [data-theme="dark"] body.exam-mode #reading-exam .timer-container .timer-display{ color:#69e6bb; } [data-theme="dark"] body.exam-mode #reading-exam .timer-container.is-warn .timer-display{ color:#fcd34d; } [data-theme="dark"] body.exam-mode #reading-exam .timer-container.is-final .timer-display{ color:#fda4a4; } [data-theme="dark"] body.exam-mode #reading-exam .timer-container button{ color:var(--tc2); } [data-theme="dark"] body.exam-mode #reading-exam .timer-container button:hover{ background:color-mix(in srgb, var(--tc) 22%, transparent); color:#ffffff; } /* Footer / palette / submit in dark */ [data-theme="dark"] body.exam-mode #reading-exam .nav-row{ background:#141e2a; border-top-color:#1f2c39; } [data-theme="dark"] body.exam-mode #reading-exam .footer-parts, [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button{ color:#e6eef5; border-color:#1f2c39; background:#0d1620; } [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button:hover{ border-color:#11A37F; color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button.answered{ background:rgba(17,163,127,.20); border-color:#11A37F; color:#a8efd0; } [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button.current{ background:#11A37F; color:#ffffff; border-color:#11A37F; } /* Exit button + admin pill in dark */ [data-theme="dark"] body.exam-mode #reading-exam .exit-btn{ background:#1a2735; color:#e6eef5; border:1px solid #2a3b4d; } [data-theme="dark"] body.exam-mode #reading-exam .exit-btn:hover{ background:#243446; color:#ff9080; border-color:#ff9080; } [data-theme="dark"] body.exam-mode #reading-exam .ex-admin-pill{ background:rgba(245,181,74,.16); color:#f3c266; border-color:rgba(245,181,74,.32); } /* Theme toggle visibility (sun/moon already in CSS but ensure colour) */ [data-theme="dark"] body.exam-mode #reading-exam .theme-toggle{ color:#e6eef5; } /* ===== EXAM TIMER — "depleting ring" capsule (unique to Reading) ===== A glassy capsule with a circular progress ring that drains as the clock counts down, mono digits with an accent glow, and colour states that shift emerald → amber → red. JS sets --frac (seconds left / total) + the state classes. Distinct from the listening chrome. */ body.exam-mode #reading-exam .timer-container{ --tc:#11A37F; --tc2:#3fcf9f; --tc-soft:rgba(17,163,127,.16); position:relative; display:inline-flex; align-items:center; gap:9px; padding:5px 8px 5px 6px; border-radius:999px; background: radial-gradient(130% 170% at 0% 50%, var(--tc-soft), transparent 62%), linear-gradient(180deg, #ffffff, #f1f8f5); border:1px solid color-mix(in srgb, var(--tc) 30%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px -10px color-mix(in srgb, var(--tc) 60%, transparent); font-family:'JetBrains Mono', 'SF Mono', 'Menlo', 'Native Emoji', monospace; transition:border-color .45s ease, box-shadow .45s ease, background .45s ease; } /* the depleting circular ring */ body.exam-mode #reading-exam .ex-timer-ring{ position:relative; width:30px; height:30px; flex-shrink:0; } body.exam-mode #reading-exam .ex-timer-ring svg{ width:30px; height:30px; display:block; transform:rotate(-90deg); } body.exam-mode #reading-exam .ex-tr-bg{ fill:none; stroke:color-mix(in srgb, var(--tc) 18%, transparent); stroke-width:3; } body.exam-mode #reading-exam .ex-tr-fg{ fill:none; stroke:var(--tc); stroke-width:3; stroke-linecap:round; stroke-dasharray:97.39; stroke-dashoffset:calc(97.39px * (1 - var(--frac, 1))); transition:stroke-dashoffset .95s linear, stroke .45s ease; filter:drop-shadow(0 0 3px color-mix(in srgb, var(--tc) 60%, transparent)); } /* a live "tick" dot pulsing in the ring centre */ body.exam-mode #reading-exam .ex-timer-ring::after{ content:''; position:absolute; inset:0; margin:auto; width:4px; height:4px; border-radius:50%; background:var(--tc); box-shadow:0 0 6px var(--tc); animation:exTick 1s steps(1) infinite; } @keyframes exTick{ 50%{ opacity:.2; } } body.exam-mode #reading-exam .timer-container .timer-display{ font-weight:800; font-size:17px; letter-spacing:1px; font-variant-numeric:tabular-nums; color:#0c7a5e; min-width:64px; text-align:center; white-space:nowrap; flex-shrink:0; /* keep "MM : SS" on one line */ text-shadow:0 0 12px color-mix(in srgb, var(--tc) 30%, transparent); } body.exam-mode #reading-exam .timer-container{ flex-wrap:nowrap; } body.exam-mode #reading-exam .timer-controls{ display:inline-flex; align-items:center; gap:2px; padding-left:5px; border-left:1px solid color-mix(in srgb, var(--tc) 22%, transparent); } body.exam-mode #reading-exam .timer-container button{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--tc); padding:0; border-radius:50%; transition:background .15s, color .15s, transform .12s; } body.exam-mode #reading-exam .timer-container button:hover{ background:color-mix(in srgb, var(--tc) 16%, transparent); transform:scale(1.1); } body.exam-mode #reading-exam .timer-container button:active{ transform:scale(.9); } body.exam-mode #reading-exam .timer-container button svg{ width:14px; height:14px; fill:currentColor; } /* warn (last 5 min) → amber */ body.exam-mode #reading-exam .timer-container.is-warn{ --tc:#e08a00; --tc2:#fbbf24; --tc-soft:rgba(245,158,11,.18); } body.exam-mode #reading-exam .timer-container.is-warn .timer-display{ color:#b4730a; } /* final (last minute) → red + breathing pulse */ body.exam-mode #reading-exam .timer-container.is-final{ --tc:#ef4444; --tc2:#f87171; --tc-soft:rgba(239,68,68,.20); animation:exTimerPulse 1s ease-in-out infinite; } body.exam-mode #reading-exam .timer-container.is-final .timer-display{ color:#dc2626; } @keyframes exTimerPulse{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 7px rgba(239,68,68,0); } } /* paused → desaturate + freeze the tick, blink the digits */ body.exam-mode #reading-exam .timer-container.is-paused{ filter:grayscale(.4) opacity(.72); } body.exam-mode #reading-exam .timer-container.is-paused .ex-timer-ring::after{ animation:none; opacity:.4; } /* Casual stopwatch → calm indigo, counts UP, never warns. The ring fills as time passes rather than depleting (same offset math, inverse read). */ body.exam-mode #reading-exam .timer-container.is-stopwatch{ --tc:#6366f1; --tc2:#818cf8; --tc-soft:rgba(99,102,241,.16); animation:none; } body.exam-mode #reading-exam .timer-container.is-stopwatch .timer-display{ color:#4f46e5; } [data-theme="dark"] body.exam-mode #reading-exam .timer-container.is-stopwatch .timer-display{ color:#a5b4fc; } body.exam-mode #reading-exam .timer-container.is-paused .timer-display{ animation:exPausedBlink 1.1s ease-in-out infinite; } @keyframes exPausedBlink{ 50%{ opacity:.4; } } @media (prefers-reduced-motion: reduce){ body.exam-mode #reading-exam .ex-timer-ring::after, body.exam-mode #reading-exam .timer-container.is-final, body.exam-mode #reading-exam .timer-container.is-paused .timer-display{ animation:none; } } body.exam-mode #reading-exam .ex-admin-pill{ padding:5px 10px; background:#FFEED9; color:#7A4500; border:1px solid #F4C685; border-radius:999px; font-size:12.5px; font-weight:700; } /* ============================================================ Day/Night toggle in the exam header. Reuses the sun/moon cross-fade pattern from the global header. Both icons stack in the same cell — opacity + rotation swap them when the `data-theme` attribute on flips. ============================================================ */ body.exam-mode #reading-exam .ex-theme-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; background:#ffffff; color:#15202B; border:1px solid #E4E8EC; border-radius:10px; cursor:pointer; padding:0; transition:border-color .15s, background .15s, color .15s; } body.exam-mode #reading-exam .ex-theme-toggle:hover{ border-color:#11A37F; color:#11A37F; background:#F1F8F6; } body.exam-mode #reading-exam .ex-theme-toggle svg{ position:absolute; inset:0; margin:auto; width:18px; height:18px; transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1); } /* Default (no data-theme = treated as light): sun visible. */ body.exam-mode #reading-exam .ex-theme-toggle .ico-sun { opacity:1; transform:rotate(0) scale(1); color:#f59e0b; } body.exam-mode #reading-exam .ex-theme-toggle .ico-moon{ opacity:0; transform:rotate(-90deg) scale(.4); } /* Dark theme: moon visible, sun hidden. */ [data-theme="dark"] body.exam-mode #reading-exam .ex-theme-toggle .ico-sun { opacity:0; transform:rotate(90deg) scale(.4); } [data-theme="dark"] body.exam-mode #reading-exam .ex-theme-toggle .ico-moon{ opacity:1; transform:rotate(0) scale(1); color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .ex-theme-toggle{ background:#1a2735; color:#e6eef5; border-color:#2a3b4d; } [data-theme="dark"] body.exam-mode #reading-exam .ex-theme-toggle:hover{ background:#243446; border-color:#3fcf9f; color:#3fcf9f; } /* ============================================================ Reading text-size control in the exam header. Three icon-only buttons (decrease / reset / increase) styled as a single segmented pill. Adjusts --reading-font-size on the passage (14–24px). Only the passage scales — chrome stays fixed. ============================================================ */ body.exam-mode #reading-exam .ex-rsize-ctrl{ display:inline-flex; align-items:stretch; gap:0; background:#ffffff; border:1px solid #E4E8EC; border-radius:10px; overflow:hidden; height:38px; /* match adjacent Fullscreen + theme toggle */ } body.exam-mode #reading-exam .ex-rsize-btn{ width:36px; padding:0; background:transparent; color:#15202B; border:none; border-right:1px solid #E4E8EC; cursor:pointer; transition:background .12s, color .12s, transform .08s; display:inline-flex; align-items:center; justify-content:center; } body.exam-mode #reading-exam .ex-rsize-btn:last-child{ border-right:none; } /* Subtle size hint on the icons — decrease icon a touch smaller, increase a touch larger, so the function reads at a glance. */ body.exam-mode #reading-exam .ex-rsize-btn[data-rsize="dec"] svg{ width:14px; height:14px; } body.exam-mode #reading-exam .ex-rsize-btn[data-rsize="reset"] svg{ width:14px; height:14px; opacity:.78; } body.exam-mode #reading-exam .ex-rsize-btn[data-rsize="inc"] svg{ width:18px; height:18px; } body.exam-mode #reading-exam .ex-rsize-btn:hover{ background:#F1F8F6; color:#11A37F; } body.exam-mode #reading-exam .ex-rsize-btn:active{ transform:scale(.94); } body.exam-mode #reading-exam .ex-rsize-btn:disabled{ opacity:.32; cursor:not-allowed; background:transparent; color:#15202B; } [data-theme="dark"] body.exam-mode #reading-exam .ex-rsize-ctrl{ background:#1a2735; border-color:#2a3b4d; } [data-theme="dark"] body.exam-mode #reading-exam .ex-rsize-btn{ color:#e6eef5; border-right-color:#2a3b4d; } [data-theme="dark"] body.exam-mode #reading-exam .ex-rsize-btn:hover{ background:#243446; color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .ex-rsize-btn:disabled{ color:#e6eef5; } /* Exit button — anchored to the top-right corner of the viewport so it stays clickable even when the results modal (z-index 9100) is open. Otherwise it disappears behind the overlay and the user has no way to leave the exam without dismissing the modal first. */ body.exam-mode #reading-exam .exit-btn{ position:fixed; top:11px; right:18px; z-index:9300; /* above .modal-overlay (9100) + .exit-overlay (9000) */ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#ffffff; color:#15202B; border:1px solid #E4E8EC; border-radius:10px; cursor:pointer; font-weight:600; font-size:14px; box-shadow:0 2px 8px -2px rgba(15,22,32,.12); transition:border-color .15s, background .15s, box-shadow .15s; } body.exam-mode #reading-exam .exit-btn:hover{ border-color:#11A37F; color:#11A37F; box-shadow:0 4px 14px -4px rgba(17,163,127,.35); } body.exam-mode #reading-exam .exit-btn svg{ width:14px; height:14px; fill:currentColor; } [data-theme="dark"] body.exam-mode #reading-exam .exit-btn{ box-shadow:0 2px 10px -2px rgba(0,0,0,.5); } /* Main split. `flex:1 1 auto` so main-container always fills the space between the header and the nav-row. The panels-container inside is `flex:0 1 auto` (default) so it shrinks to its content height, and the resulting empty area below the panels (still INSIDE main-container) is just continuous main-container background — same colour as the panels in both light and dark mode, so no gap is ever visible above the nav-row, no matter how short the content gets (e.g. after A− shrinks the passage). The nav-row keeps `position:sticky; bottom:0` so it pins to the viewport bottom on both long content AND short content. */ body.exam-mode #reading-exam .main-container{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#ffffff; overflow:hidden; } body.exam-mode #reading-exam .part-header{ padding:10px 26px; background:#F8FAFB; border-bottom:1px solid #E4E8EC; } body.exam-mode #reading-exam .part-header p{ margin:0; color:#15202B; font-size:13.5px; line-height:1.45; } body.exam-mode #reading-exam .part-header p:first-child{ font-weight:800; font-size:14.5px; margin-bottom:2px; color:#0c7a5e; text-transform:uppercase; letter-spacing:.5px; } /* Passage title — keep it readable but not enormous */ body.exam-mode #reading-exam .reading-passage > h2:first-child{ font-size:22px; font-weight:800; margin:0 0 14px 0; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; color:#15202B; } body.exam-mode #reading-exam .panels-container{ /* Fill main-container so the resizer line + panel borders run all the way down to the nav-row — otherwise (panels-container shrunk to content) the right border on .passage-panel stops mid-page on short Parts and reads as a visible discontinuity. Panels themselves still sit at their CONTENT height via `align-items: flex-start` below, so a short TRUE/FALSE block doesn't get stretched to match a tall passage. */ flex:1 1 auto; display:flex; min-height:0; align-items:flex-start; } /* The resizer needs to span the FULL height of the panels-container so the divider line never stops short. */ body.exam-mode #reading-exam .resizer{ align-self:stretch; } body.exam-mode #reading-exam .passage-panel, body.exam-mode #reading-exam .questions-panel{ flex:1 1 0; min-width:0; min-height:0; overflow-y:auto; /* Cap each panel at the available vertical space (viewport minus the header, part-header, nav-row, and a small buffer). On short Parts the panel sits at its content height (nav-row floats up); on long Parts the panel hits the cap and scrolls internally (nav-row stays at the viewport bottom). */ max-height:calc(100dvh - 200px); padding:24px 28px 14px 28px !important; scroll-padding-bottom:14px; background:#ffffff; color:#15202B; line-height:1.7; scrollbar-width:thin; scrollbar-color:rgba(17,163,127,.35) transparent; scrollbar-gutter:stable; overscroll-behavior:contain; } /* Sentinel removed — was adding 24px of empty space below the last card, which compounded the perceived gap above the nav-row. */ body.exam-mode #reading-exam #exQuestions::after, body.exam-mode #reading-exam #exPassage::after{ content:none; } body.exam-mode #reading-exam .passage-panel::-webkit-scrollbar, body.exam-mode #reading-exam .questions-panel::-webkit-scrollbar{ width:10px; } body.exam-mode #reading-exam .passage-panel::-webkit-scrollbar-track, body.exam-mode #reading-exam .questions-panel::-webkit-scrollbar-track{ background:transparent; } body.exam-mode #reading-exam .passage-panel::-webkit-scrollbar-thumb, body.exam-mode #reading-exam .questions-panel::-webkit-scrollbar-thumb{ background:rgba(17,163,127,.30); border-radius:6px; border:2px solid transparent; background-clip:padding-box; } body.exam-mode #reading-exam .passage-panel::-webkit-scrollbar-thumb:hover, body.exam-mode #reading-exam .questions-panel::-webkit-scrollbar-thumb:hover{ background:rgba(17,163,127,.55); background-clip:padding-box; } [data-theme="dark"] body.exam-mode #reading-exam .passage-panel::-webkit-scrollbar-thumb, [data-theme="dark"] body.exam-mode #reading-exam .questions-panel::-webkit-scrollbar-thumb{ background:rgba(63,207,159,.35); background-clip:padding-box; } /* No right border here — the resizer's `::before` line provides the full-height divider between the panels. Drawing it on the panel too would show as a SECOND short line stopping at the panel's content height when content is short. */ /* Visible draggable splitter between passage and questions */ body.exam-mode #reading-exam .resizer{ position:relative; width:14px; flex:0 0 14px; cursor:col-resize; background:transparent; display:flex; align-items:center; justify-content:center; transition:background .15s; } body.exam-mode #reading-exam .resizer::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); background:#E4E8EC; transition:background .15s; } body.exam-mode #reading-exam .resizer::after{ content:'\2194'; /* ↔ horizontal arrow */ position:relative; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; background:#ffffff; border:1.5px solid #15202B; border-radius:8px; font-size:15px; font-weight:800; color:#15202B; box-shadow:0 2px 6px -2px rgba(0,0,0,.18); transition:transform .15s, border-color .15s, background .15s; } body.exam-mode #reading-exam .resizer:hover::after{ transform:scale(1.08); border-color:#11A37F; color:#11A37F; background:#F1F8F6; } body.exam-mode #reading-exam .resizer:active::after, body.exam-mode #reading-exam .resizer.is-dragging::after{ transform:scale(1.12); border-color:#11A37F; background:#11A37F; color:#ffffff; } body.exam-mode #reading-exam .resizer:hover::before, body.exam-mode #reading-exam .resizer.is-dragging::before{ background:#11A37F; } /* ------------------------------------------------------------ Reading passage — universal font family + user-adjustable size. --reading-font-family : single system stack (matches engnovate.com), standardised across every reading on the site so all passages look identical. --reading-font-size : runtime-tunable via the A−/A/A+ buttons in the header (14–24px). Default 16px. Only the passage scales — the chrome (header, nav, layout) does not. The passage HTML often arrives with inline styles pasted from Word (color:#000, font-family:Verdana, font-size:11pt). Those would override the theme colour and break both the universal font and the A−/A+ scale, so we override them with !important on the passage container AND its descendants. ------------------------------------------------------------ */ body.exam-mode #reading-exam .reading-passage{ color:#15202B; font-family: var(--reading-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important; font-size: var(--reading-font-size, 15px) !important; line-height:1.7; } /* Force every descendant to share the passage font + scale, even if the pasted HTML hard-codes its own values inline. */ body.exam-mode #reading-exam .reading-passage *{ font-family:inherit !important; font-size:inherit !important; line-height:inherit !important; } /* Headings inside the passage stay bold but pick up the same family. */ body.exam-mode #reading-exam .reading-passage h1, body.exam-mode #reading-exam .reading-passage h2, body.exam-mode #reading-exam .reading-passage h3{ font-weight:800; margin:18px 0 10px 0; } body.exam-mode #reading-exam .reading-passage p{ margin:0 0 12px 0; } /* Strip inline colours from Word paste so theme colours win. */ body.exam-mode #reading-exam .reading-passage, body.exam-mode #reading-exam .reading-passage p, body.exam-mode #reading-exam .reading-passage span, body.exam-mode #reading-exam .reading-passage li, body.exam-mode #reading-exam .reading-passage div{ color:#15202B; } [data-theme="dark"] body.exam-mode #reading-exam .reading-passage{ color:#e6eef5 !important; } /* Word/Office paste smuggles inline color into , , , etc. Only `color:inherit !important` on every descendant beats those. */ [data-theme="dark"] body.exam-mode #reading-exam .reading-passage *{ color:inherit !important; } /* Highlight marks now use a semi-transparent fill, so their text follows the passage colour (light in dark mode, dark in light mode) and stays legible without forcing a dark colour. */ /* Light mode: pasted inline color may be very pale on white — clamp it. (Note: the prior `body:not([data-theme])` selector was a no-op typo — data-theme lives on , never body, so it matched in both themes and forced light text into dark mode too. data-theme is always set at init, so we only need the explicit light selector.) */ [data-theme="light"] body.exam-mode #reading-exam .reading-passage *{ color:#15202B !important; } /* Question cards inside the right panel */ body.exam-mode #reading-exam .ex-q-card{ background:#ffffff; color:#15202B; border:1px solid #E4E8EC; border-radius:12px; padding:18px 20px; margin-bottom:14px; } /* Stacked head — matches engnovate's hierarchy: big section heading ("Questions 1–7") sits on its own line, instructions below in smaller italic. Keeps the range from wrapping mid-label in narrow panes. */ body.exam-mode #reading-exam .ex-q-head{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:10px; } body.exam-mode #reading-exam .ex-q-num{ display:block; font-weight:800; font-size:18px; color:#15202B; line-height:1.25; white-space:nowrap; /* don't break "Questions 1–7" across lines */ } body.exam-mode #reading-exam .ex-q-instr{ display:block; color:#5B6B78; font-size:13.5px; font-style:italic; line-height:1.4; } body.exam-mode #reading-exam .ex-q-type{ display:inline-block; padding:3px 9px; border-radius:999px; background:#F1F8F6; color:#0D8A6C; border:1px solid #D6ECE4; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; } /* After Submit — visually de-emphasise answer controls so it's obvious the test is locked. Pointer-events:none is set inline by exLockAnswers on labels; this just tones down the colours. */ body.exam-mode #reading-exam .ex-locked input:disabled, body.exam-mode #reading-exam .ex-locked select:disabled, body.exam-mode #reading-exam .ex-locked textarea:disabled{ opacity:.85; cursor:not-allowed; } body.exam-mode #reading-exam .ex-locked .ex-3way-opt, body.exam-mode #reading-exam .ex-locked .ex-mc-option, body.exam-mode #reading-exam .ex-locked .ex-grid-cell{ cursor:not-allowed; } /* Section-level lock — applied to #reading-exam after Submit and survives re-renders (a part switch wipes the inputs' `disabled` attribute but not the class on the root, so the CSS still bites). Blocks every answer control inside the questions pane, plus inline gap inputs that the passage renderer drops INTO the passage. */ body.exam-mode #reading-exam.ex-locked-mode #exQuestions input, body.exam-mode #reading-exam.ex-locked-mode #exQuestions select, body.exam-mode #reading-exam.ex-locked-mode #exQuestions textarea, body.exam-mode #reading-exam.ex-locked-mode #exQuestions button, body.exam-mode #reading-exam.ex-locked-mode #exQuestions label, body.exam-mode #reading-exam.ex-locked-mode #exQuestions .ex-3way-opt, body.exam-mode #reading-exam.ex-locked-mode #exQuestions .ex-mc-option, body.exam-mode #reading-exam.ex-locked-mode #exQuestions .ex-grid-cell, body.exam-mode #reading-exam.ex-locked-mode #exQuestions .ex-bank-chip, body.exam-mode #reading-exam.ex-locked-mode #exQuestions .ex-drop-zone, body.exam-mode #reading-exam.ex-locked-mode #exQuestions .ex-drop-chip, body.exam-mode #reading-exam.ex-locked-mode #exQuestions .ex-drag-chip, body.exam-mode #reading-exam.ex-locked-mode #exPassage .ex-gap-input, body.exam-mode #reading-exam.ex-locked-mode #exPassage input, body.exam-mode #reading-exam.ex-locked-mode #exPassage select{ pointer-events:none !important; cursor:not-allowed !important; } body.exam-mode #reading-exam .ex-q-prompt{ color:#15202B; margin:6px 0; line-height:1.6; /* Same universal stack as the reading passage so admin-pasted Word HTML doesn't drag in Verdana / Calibri / etc. */ font-family: var(--reading-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important; /* Scale with A−/A+ alongside the reading passage. The CSS variable is set on #exQuestions by exReadingFontSizeApply, so it cascades into every question prompt without breaking the surrounding chrome. */ font-size: var(--reading-font-size, 15px) !important; } /* Universal font-family for the entire questions pane so every readable element (note rows, TFNG statements, grid cells, bank chips, etc.) renders in the same family as the reading passage. Without this, content outside .ex-q-prompt would inherit Poppins from and look noticeably bigger than the passage at the same px size due to font-metric differences. */ body.exam-mode #reading-exam #exQuestions, body.exam-mode #reading-exam #exQuestions *{ font-family: var(--reading-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif) !important; } /* A−/A+ must scale EVERY readable element in the question pane — not just .ex-q-prompt. Without these the TFNG labels, MC option text, statement numbers, gap inputs, grid cells, and bank chips stay locked at their designer-set size while the prompt above grows, which looks broken. */ body.exam-mode #reading-exam #exQuestions .ex-3way-opt, body.exam-mode #reading-exam #exQuestions .ex-3way-text, body.exam-mode #reading-exam #exQuestions .ex-mc-option, body.exam-mode #reading-exam #exQuestions .ex-mc-text, body.exam-mode #reading-exam #exQuestions .ex-mc-letter, body.exam-mode #reading-exam #exQuestions .ex-mc-subnum, body.exam-mode #reading-exam #exQuestions .ex-mc-count, body.exam-mode #reading-exam #exQuestions .ex-note-row, body.exam-mode #reading-exam #exQuestions .ex-note-title, body.exam-mode #reading-exam #exQuestions .ex-tfng-num, body.exam-mode #reading-exam #exQuestions .ex-tfng-text, body.exam-mode #reading-exam #exQuestions .ex-grid th, body.exam-mode #reading-exam #exQuestions .ex-grid td, body.exam-mode #reading-exam #exQuestions .ex-grid-rtext, body.exam-mode #reading-exam #exQuestions .ex-grid-legend-list li, body.exam-mode #reading-exam #exQuestions .ex-bank-chip, body.exam-mode #reading-exam #exQuestions .ex-bank-empty, body.exam-mode #reading-exam #exQuestions .ex-drop-empty, body.exam-mode #reading-exam #exQuestions .ex-drop-chip, body.exam-mode #reading-exam #exQuestions .ex-tbl-cell, body.exam-mode #reading-exam #exQuestions .ex-gap-input, body.exam-mode #reading-exam #exQuestions .ex-gap-select, body.exam-mode #reading-exam #exQuestions .ex-select{ font-size: var(--reading-font-size, 15px) !important; } /* Override inline font-family + size from Word-pasted question HTML so the question text follows the chosen font AND the A−/A+ scale. Without the font-size:inherit override, every from a Word paste locks the text at 12pt regardless of --reading-font-size. */ body.exam-mode #reading-exam .ex-q-prompt *{ font-family:inherit !important; font-size:inherit !important; line-height:inherit !important; } body.exam-mode #reading-exam .ex-q-prompt, body.exam-mode #reading-exam .ex-q-prompt p, body.exam-mode #reading-exam .ex-q-prompt span, body.exam-mode #reading-exam .ex-q-prompt li, body.exam-mode #reading-exam .ex-q-prompt div, body.exam-mode #reading-exam .ex-q-prompt b, body.exam-mode #reading-exam .ex-q-prompt strong, body.exam-mode #reading-exam .ex-q-prompt i, body.exam-mode #reading-exam .ex-q-prompt em{ color:#15202B; } /* Universal — catches every Word-paste tag (font, u, ul, ol, etc.), not just the handful we enumerated. Inline `color:rgb(0,0,0)` on any descendant was leaving the question header invisible in dark mode. */ [data-theme="dark"] body.exam-mode #reading-exam .ex-q-prompt, [data-theme="dark"] body.exam-mode #reading-exam .ex-q-prompt *, [data-theme="dark"] body.exam-mode #reading-exam .ex-note-title, [data-theme="dark"] body.exam-mode #reading-exam .ex-note-title *{ color:#e6eef5 !important; } /* Inline formatting from the admin RTE — bold / italic / paragraph breaks */ body.exam-mode #reading-exam .ex-q-prompt p{ margin:0 0 8px 0; } body.exam-mode #reading-exam .ex-q-prompt p:last-child{ margin-bottom:0; } body.exam-mode #reading-exam .ex-q-prompt b, body.exam-mode #reading-exam .ex-q-prompt strong{ font-weight:700; } body.exam-mode #reading-exam .ex-q-prompt i, body.exam-mode #reading-exam .ex-q-prompt em{ font-style:italic; } body.exam-mode #reading-exam .ex-q-prompt u{ text-decoration:underline; } body.exam-mode #reading-exam .ex-q-prompt h1, body.exam-mode #reading-exam .ex-q-prompt h2, body.exam-mode #reading-exam .ex-q-prompt h3{ font-family:'Bricolage Grotesque', 'Poppins', 'Native Emoji', sans-serif; font-weight:800; margin:10px 0 6px 0; line-height:1.3; } body.exam-mode #reading-exam .ex-q-prompt h1{ font-size:18px; } body.exam-mode #reading-exam .ex-q-prompt h2{ font-size:16px; } body.exam-mode #reading-exam .ex-q-prompt h3{ font-size:15px; } body.exam-mode #reading-exam .ex-q-prompt ul, body.exam-mode #reading-exam .ex-q-prompt ol{ padding-left:22px; margin:6px 0; } /* Note completion — structured bullet list with section headings */ body.exam-mode #reading-exam .ex-note-list{ list-style:none; margin:2px 0 10px 0; padding:0; display:flex; flex-direction:column; gap:6px; } body.exam-mode #reading-exam .ex-note-row{ display:flex; align-items:baseline; gap:0; flex-wrap:wrap; padding:5px 0 5px 22px; position:relative; line-height:1.65; } body.exam-mode #reading-exam .ex-note-row::before{ content:"•"; position:absolute; left:6px; top:5px; color:var(--rd-primary, #11A37F); font-weight:700; font-size:16px; } body.exam-mode #reading-exam .ex-note-section-head{ font-weight:700; font-size:var(--reading-font-size, 15px); color:#15202B; margin:10px 0 4px 0; padding-bottom:2px; border-bottom:1px solid #e4e8ec; } [data-theme="dark"] body.exam-mode #reading-exam .ex-note-section-head{ color:#e6eef5; border-bottom-color:#29333e; } body.exam-mode #reading-exam #exQuestions .ex-note-section-head{ font-size:var(--reading-font-size, 15px) !important; } /* Gap inputs (text + select) — fully theme-aware per spec. Transparent bg so the input inherits the pane background in any theme. Border + text use semantic tokens so the input stays readable in light AND dark mode. Typed text shows in brand colour so it stands out against the passage text. */ body.exam-mode #reading-exam .ex-gap-input{ display:inline-block; min-width:90px; max-width:200px; padding:4px 10px; margin:0 4px; background:transparent; border:1px solid var(--rd-line-hi, #C9D2DA); border-radius:4px; color:var(--rd-primary, #11A37F); font:inherit; font-size:14.5px; font-weight:600; vertical-align:middle; } body.exam-mode #reading-exam .ex-gap-input::placeholder{ color:var(--rd-muted, #94A3B0); font-weight:400; } body.exam-mode #reading-exam .ex-gap-input:focus{ outline:none; border-color:var(--rd-primary, #11A37F); box-shadow:0 0 0 3px var(--rd-focus-ring, rgba(17,163,127,.18)); } body.exam-mode #reading-exam .ex-gap-input.ex-gap-wide{ max-width:100%; width:100%; display:block; margin:6px 0; } body.exam-mode #reading-exam .ex-gap-select, body.exam-mode #reading-exam .ex-select{ display:inline-block; min-width:140px; padding:4px 28px 4px 10px; background:var(--rd-card, #ffffff); border:1px solid var(--rd-line-hi, #C9D2DA); border-radius:4px; color:var(--rd-text, #15202B); font:inherit; font-size:14.5px; cursor:pointer; margin:0 4px; vertical-align:middle; appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #5B6B78 50%), linear-gradient(135deg, #5B6B78 50%, transparent 50%); background-position:calc(100% - 14px) 13px, calc(100% - 9px) 13px; background-size:5px 5px; background-repeat:no-repeat; } /* TFNG / YNNG item — Cambridge style: bordered number chip beside the statement, then the radio options indented below. Matches the look of the source reading HTML's .ync-qrow / .ync-num / .ync-qtext. */ body.exam-mode #reading-exam .ex-tfng-item{ margin-bottom:18px; } body.exam-mode #reading-exam .ex-tfng-row{ display:flex; align-items:flex-start; gap:11px; margin-bottom:8px; } body.exam-mode #reading-exam .ex-tfng-num{ flex-shrink:0; min-width:36px; padding:2px 9px; border:2px solid #C9D2DA; border-radius:3px; text-align:center; font-weight:700; color:#15202B; background:#ffffff; } body.exam-mode #reading-exam .ex-tfng-text{ flex:1; padding-top:3px; line-height:1.55; color:#15202B; } [data-theme="dark"] body.exam-mode #reading-exam .ex-tfng-num{ border-color:#2a3340; color:#e6eef5; background:#0d1620; } [data-theme="dark"] body.exam-mode #reading-exam .ex-tfng-text{ color:#e6eef5; } body.exam-mode #reading-exam .ex-tfng-item .ex-3way-list{ padding-left:47px; /* indent options to align under the statement */ } /* TFNG / YNNG radios — vertical, clean */ body.exam-mode #reading-exam .ex-3way-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; } body.exam-mode #reading-exam .ex-3way-opt{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:#ffffff; border:1px solid #E4E8EC; border-radius:8px; cursor:pointer; transition:border-color .12s, background .12s, color .12s; color:#15202B; font-size:14px; } body.exam-mode #reading-exam .ex-3way-opt:hover{ border-color:#11A37F; background:#F1F8F6; } body.exam-mode #reading-exam .ex-3way-opt.is-checked{ border-color:#11A37F; background:#F1F8F6; color:#0D8A6C; font-weight:700; } body.exam-mode #reading-exam .ex-3way-opt input{ accent-color:#11A37F; } /* MC options */ body.exam-mode #reading-exam .ex-mc-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; } body.exam-mode #reading-exam .ex-mc-option{ display:flex; align-items:center; gap:10px; padding:8px 12px; background:#ffffff; border:1px solid #E4E8EC; border-radius:8px; cursor:pointer; transition:border-color .12s, background .12s; color:#15202B; font-size:14px; } body.exam-mode #reading-exam .ex-mc-option:hover{ border-color:#11A37F; background:#F1F8F6; } body.exam-mode #reading-exam .ex-mc-option.is-checked{ border-color:#11A37F; background:#F1F8F6; } body.exam-mode #reading-exam .ex-mc-box{ display:flex; align-items:center; gap:6px; font-weight:700; color:#0D8A6C; } body.exam-mode #reading-exam .ex-mc-box input{ accent-color:#11A37F; } body.exam-mode #reading-exam .ex-mc-letter{ font-weight:700; } body.exam-mode #reading-exam .ex-mc-text{ flex:1; } body.exam-mode #reading-exam .ex-mc-count{ margin-top:6px; color:#5B6B78; font-size:13px; } body.exam-mode #reading-exam .ex-mc-subq{ margin-bottom:14px; } body.exam-mode #reading-exam .ex-mc-subnum{ margin-bottom:6px; color:#15202B; } /* Word bank chips */ body.exam-mode #reading-exam .ex-bank{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; margin-bottom:10px; background:#F8FAFB; border:1px solid #E4E8EC; border-radius:10px; } body.exam-mode #reading-exam .ex-bank-chip{ padding:4px 12px; background:#ffffff; color:#0D8A6C; border:1px solid #D6ECE4; border-radius:6px; font-size:13.5px; font-weight:600; } body.exam-mode #reading-exam .ex-bank-title{ width:100%; color:#5B6B78; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; } /* Matching grids */ body.exam-mode #reading-exam .ex-grid-card{ background:#ffffff; border:1px solid #E4E8EC; border-radius:12px; padding:18px 20px; margin-bottom:14px; } body.exam-mode #reading-exam .ex-grid{ width:100%; border-collapse:collapse; } body.exam-mode #reading-exam .ex-grid th, body.exam-mode #reading-exam .ex-grid td{ border:1px solid #E4E8EC; padding:8px 10px; text-align:center; font-size:14px; color:#15202B; } body.exam-mode #reading-exam .ex-grid thead th{ background:#F8FAFB; font-weight:800; } body.exam-mode #reading-exam .ex-grid-row{ background:#F8FAFB; text-align:left !important; } body.exam-mode #reading-exam .ex-grid-rn{ display:inline-block; min-width:24px; font-weight:800; color:#15202B; margin-right:6px; } body.exam-mode #reading-exam .ex-grid-cell{ cursor:pointer; transition:background .12s; } body.exam-mode #reading-exam .ex-grid-cell:hover{ background:#F1F8F6; } body.exam-mode #reading-exam .ex-grid-cell.is-checked{ background:#11A37F; color:#ffffff; } body.exam-mode #reading-exam .ex-grid-cell.is-checked .ex-grid-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#ffffff; } body.exam-mode #reading-exam .ex-grid-legend{ background:#F8FAFB; border:1px solid #E4E8EC; border-radius:10px; padding:14px 16px; margin-bottom:12px; } body.exam-mode #reading-exam .ex-grid-legend-title{ font-weight:800; margin-bottom:6px; color:#15202B; font-size:14px; } body.exam-mode #reading-exam .ex-grid-legend-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; } body.exam-mode #reading-exam .ex-grid-legend-list li{ display:flex; align-items:flex-start; gap:8px; color:#15202B; font-size:14px; } body.exam-mode #reading-exam .ex-grid-legend-key{ min-width:28px; font-weight:800; color:#0D8A6C; } /* Tables inside completion questions */ body.exam-mode #reading-exam .ex-tbl{ width:100%; border-collapse:collapse; margin:8px 0; } body.exam-mode #reading-exam .ex-tbl-cell{ border:1px solid #C9D2DA; padding:8px 12px; color:#15202B; } body.exam-mode #reading-exam .ex-tbl-cell:first-child{ font-weight:700; } body.exam-mode #reading-exam .ex-tbl-scroll table{ width:100%; border-collapse:collapse; } body.exam-mode #reading-exam .ex-tbl-scroll table td, body.exam-mode #reading-exam .ex-tbl-scroll table th{ border:1px solid #C9D2DA; padding:8px 12px; color:#15202B; vertical-align:middle; } body.exam-mode #reading-exam .ex-tbl-scroll table th{ background:#F8FAFB; font-weight:800; } [data-theme="dark"] body.exam-mode #reading-exam .ex-tbl-cell, [data-theme="dark"] body.exam-mode #reading-exam .ex-tbl-scroll table td, [data-theme="dark"] body.exam-mode #reading-exam .ex-tbl-scroll table th{ color:#e6eef5; border-color:#2a3340; } [data-theme="dark"] body.exam-mode #reading-exam .ex-tbl-scroll table th{ background:#162028; } /* Hide the exam-level Exit button while the results modal is open so students don't accidentally exit before reviewing their answers. */ body.exam-mode:has(#results-modal:not(.hidden)) .exit-btn, body.exam-mode:has(#results-modal:not(.hidden)) #exit-btn{ display:none !important; } /* ---- Raw HTML broadcast mode ---- In raw mode, the file plays inside a sandboxed iframe that fills the full content area between the platform's header and footer. The resizer / questions pane are hidden; the file owns its layout. */ body.exam-mode #reading-exam .ex-raw-mode .resizer, body.exam-mode #reading-exam .ex-raw-mode .ex-resizer, body.exam-mode #reading-exam .ex-raw-mode #questions-panel, body.exam-mode #reading-exam .ex-raw-mode .questions-panel{ display:none !important; } /* Raw-mode hosts a position:absolute iframe inside .passage-panel. Force the fill-the-viewport sizing (with !important so any inline width/flex tweaks the resizer left behind in parsed mode don't leak through) and hide the questions-panel + resizer above. */ body.exam-mode #reading-exam:has(.ex-raw-mode) .main-container, body.exam-mode #reading-exam .main-container:has(.ex-raw-mode){ flex:1 1 auto !important; } body.exam-mode #reading-exam .panels-container.ex-raw-mode{ flex:1 1 auto !important; align-items:stretch !important; } body.exam-mode #reading-exam .ex-raw-mode #passage-panel, body.exam-mode #reading-exam .ex-raw-mode .passage-panel{ flex:1 1 100% !important; max-width:100% !important; width:100% !important; max-height:none !important; height:auto !important; padding:0 !important; overflow:hidden !important; /* relative + absolute on the iframe is the most reliable way to make an iframe fill its container — flex-grow on iframes is ignored by several browsers (the iframe sticks to its 150px intrinsic height), and `height:100%` only works when the parent has an explicit `height` that the browser will inherit through. Absolute positioning sidesteps both problems. */ position:relative !important; } body.exam-mode #reading-exam .ex-raw-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#ffffff; } [data-theme="dark"] body.exam-mode #reading-exam .ex-raw-iframe{ background:#0d1117; } /* Loading veil — covers the passage/broadcast panel while the raw_html file is being fetched + parsed, so the gap between iframe-create and srcdoc-paint never shows as a blank dark box (a slow link / cold cache made it very visible). Shared by BOTH exams (reading passage panel + listening broadcast host) — scoped to body.exam-mode since .ex-raw-veil only ever lives inside an exam section. It matches the iframe background so it reads as the content loading in, and JS fades it out (adds .is-hidden) the moment the active frame paints. The fade-IN is delayed ~120ms so an instant warm-cache load never flashes a spinner. */ body.exam-mode #reading-exam .passage-panel, body.exam-mode #listening-exam .lx-raw-host{ position:relative; } body.exam-mode .ex-raw-veil{ /* position/inset are !important because reading's .reading-passage runs a blanket `*:not(iframe):not(.ex-raw-veil){position:static !important}` reset (11-admin-reading.css) — the :not() there excludes us, and this is the belt-and-suspenders so the veil always fills its panel. */ position:absolute !important; inset:0 !important; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#ffffff; opacity:0; animation:exRawVeilIn .25s ease .12s forwards; } [data-theme="dark"] body.exam-mode .ex-raw-veil{ background:#0d1117; } body.exam-mode .ex-raw-veil.is-hidden{ animation:none; opacity:0; pointer-events:none; transition:opacity .3s ease; } @keyframes exRawVeilIn{ from{ opacity:0; } to{ opacity:1; } } body.exam-mode .ex-raw-veil-spinner{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(17,163,127,.18); border-top-color:#11A37F; animation:exRawVeilSpin .8s linear infinite; } [data-theme="dark"] body.exam-mode .ex-raw-veil-spinner{ border-color:rgba(63,207,159,.2); border-top-color:#3fcf9f; } @keyframes exRawVeilSpin{ to{ transform:rotate(360deg); } } body.exam-mode .ex-raw-veil-text{ margin:0; font-family:'Hanken Grotesk','Native Emoji',sans-serif; font-weight:600; font-size:14px; letter-spacing:.01em; color:#5c6b7a; } [data-theme="dark"] body.exam-mode .ex-raw-veil-text{ color:#8b98a5; } @media (prefers-reduced-motion:reduce){ body.exam-mode .ex-raw-veil{ animation:none; opacity:1; } body.exam-mode .ex-raw-veil.is-hidden{ opacity:0; } body.exam-mode .ex-raw-veil-spinner{ animation:none; } } /* Tighter sizing for gap inputs INSIDE a table cell. The default min/max (90–200px) is fine in prose but causes wrapping inconsistency in narrow table cells — some inputs stay inline, others bump to a new line depending on the trailing text length. A compact, fixed-ish width keeps every cell visually uniform. */ body.exam-mode #reading-exam .ex-tbl-scroll .ex-gap-input{ min-width:100px; max-width:140px; width:120px; margin:0 2px; } /* Numeric chip preserved from the source reading HTML's N. Bordered square that sits just before the gap input so the student knows which question number each blank corresponds to. */ body.exam-mode #reading-exam .ex-tbl-scroll .ex-tbl-qtag{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border:2px solid #C9D2DA; border-radius:3px; font-weight:700; font-size:12px; color:#15202B; background:#ffffff; vertical-align:middle; margin-right:4px; flex-shrink:0; } [data-theme="dark"] body.exam-mode #reading-exam .ex-tbl-scroll .ex-tbl-qtag{ border-color:#2a3340; color:#e6eef5; background:#0d1620; } /* Footer (label + palette on the LEFT, submit pinned RIGHT). Matches the reference: "Questions 1 2 3 4 … N ──── Check Answers". Pinned to the viewport bottom — main-container above is `flex:1 1 auto` so it always fills the space between header and nav-row, absorbing any content-shrink (e.g. A−) as invisible same-colour padding BELOW the panels-container rather than as a visible gap above the row. */ body.exam-mode #reading-exam .nav-row{ display:flex; align-items:center; gap:12px; padding:10px 20px; background:#ffffff; border-top:1px solid #E4E8EC; flex:0 0 auto; z-index:10; } /* Submit gets margin-left:auto so it floats to the far right while the label + palette flow naturally from the left. */ body.exam-mode #reading-exam .footer__deliverButton{ margin-left:auto; padding:8px 18px; font-size:14px; } body.exam-mode #reading-exam .footer-parts{ display:flex; align-items:center; gap:10px; flex:0 0 auto; } body.exam-mode #reading-exam .footer-part-name{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:15px; color:#15202B; letter-spacing:.2px; } body.exam-mode #reading-exam .footer-part-pill{ padding:5px 12px; background:#ffffff; border:1px solid #E4E8EC; border-radius:999px; color:#5b6b78; cursor:pointer; font-weight:700; font-size:12.5px; transition:border-color .12s, background .12s, color .12s; } body.exam-mode #reading-exam .footer-part-pill:hover{ border-color:#11A37F; color:#11A37F; } body.exam-mode #reading-exam .footer-part-pill.active{ background:#11A37F; color:#ffffff; border-color:#11A37F; } /* Fullscreen button in the exam header */ body.exam-mode #reading-exam .ex-fs-btn{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; background:#ffffff; color:#15202B; border:1px solid #E4E8EC; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer; transition:border-color .15s, color .15s, background .15s; } body.exam-mode #reading-exam .ex-fs-btn:hover{ border-color:#11A37F; color:#11A37F; background:#F1F8F6; } body.exam-mode #reading-exam .ex-fs-btn svg{ width:16px; height:16px; } [data-theme="dark"] body.exam-mode #reading-exam .ex-fs-btn{ background:#1a2735; color:#e6eef5; border-color:#2a3b4d; } [data-theme="dark"] body.exam-mode #reading-exam .ex-fs-btn:hover{ background:#243446; border-color:#3fcf9f; color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .footer-part-name{ color:#e6eef5; } [data-theme="dark"] body.exam-mode #reading-exam .footer-part-pill{ background:#0d1620; color:#94a3b0; border-color:#1f2c39; } [data-theme="dark"] body.exam-mode #reading-exam .footer-part-pill:hover{ border-color:#3fcf9f; color:#3fcf9f; } [data-theme="dark"] body.exam-mode #reading-exam .footer-part-pill.active{ background:#11A37F; color:#ffffff; border-color:#11A37F; } body.exam-mode #reading-exam .subq-wrapper{ display:flex; flex-wrap:wrap; gap:0; } body.exam-mode #reading-exam .subq-wrapper button{ /* 36×36 chips — a comfortable hit-target that reads cleanly across the 13/14-chip row. Chips share borders (negative-margin -1px) so the row reads as one segmented control. */ width:36px; height:36px; margin-left:-1px; background:#ffffff; border:1px solid #E4E8EC; border-radius:0; color:#15202B; cursor:pointer; font-weight:700; font-size:14px; transition:border-color .12s, background .12s, color .12s, transform .15s ease, box-shadow .2s ease; } /* Single-passage tests get slightly larger chips since there's no Part 1/2/3 switcher competing for footer space. */ body.exam-mode #reading-exam .subq-wrapper--solo button{ width:40px; height:40px; font-size:15px; } body.exam-mode #reading-exam .subq-wrapper--solo button:first-child{ border-top-left-radius:8px; border-bottom-left-radius:8px; } body.exam-mode #reading-exam .subq-wrapper--solo button:last-child{ border-top-right-radius:8px; border-bottom-right-radius:8px; } body.exam-mode #reading-exam .subq-wrapper button:first-child{ margin-left:0; border-top-left-radius:6px; border-bottom-left-radius:6px; } body.exam-mode #reading-exam .subq-wrapper button:last-child{ border-top-right-radius:6px; border-bottom-right-radius:6px; } body.exam-mode #reading-exam .subq-wrapper button:hover, body.exam-mode #reading-exam .subq-wrapper button.current, body.exam-mode #reading-exam .subq-wrapper button.answered{ /* Bring active/hover chip above its neighbours so its full border draws. */ position:relative; z-index:1; } body.exam-mode #reading-exam .subq-wrapper button:hover{ border-color:#11A37F; color:#11A37F; } body.exam-mode #reading-exam .subq-wrapper button.answered{ background:#F1F8F6; color:#0D8A6C; border-color:#11A37F; box-shadow:0 0 0 0 rgba(17,163,127,.35); animation:exPaletteGlow .55s ease-out; } body.exam-mode #reading-exam .subq-wrapper button.current{ background:#11A37F; color:#ffffff; border-color:#11A37F; transform:scale(1.06); box-shadow:0 4px 12px -2px rgba(17,163,127,.55); } /* ========================================================================= Post-submit palette styling — Cambridge-style result review. Three states: • .correct → emerald with a vivid neon glow ring (celebration) • .incorrect → ruby with a hot glow ring (clear "wrong") • .unanswered → neutral slate, NO glow (recedes from attention) Unanswered chips are intentionally quiet — the student should focus on what they got right vs. wrong, not on a coloured wall of "you skipped this." Correct/incorrect get the heaviest visual treatment via a continuous soft pulse so they read as the active "review" state. ========================================================================= */ body.exam-mode #reading-exam .subq-wrapper button.correct, body.exam-mode #reading-exam .subq-wrapper button.incorrect{ z-index:1; position:relative; color:#ffffff; font-weight:800; transform:scale(1.08); animation:exPaletteResult .5s cubic-bezier(.2,.8,.2,1) both; } /* CORRECT — emerald with a soft neon halo + a faint ::after glow that breathes. The breathing isn't a sweep across the chip, just an outer shadow size pulse, so it feels alive but not distracting during review. */ body.exam-mode #reading-exam .subq-wrapper button.correct{ background:#10b981; border-color:#059669; box-shadow: 0 0 0 2px rgba(16,185,129,.18), 0 0 18px -2px rgba(16,185,129,.65), inset 0 1px 0 rgba(255,255,255,.28); } body.exam-mode #reading-exam .subq-wrapper button.correct::after{ content:''; position:absolute; inset:-4px; border-radius:inherit; pointer-events:none; opacity:.6; animation:exChipBreathOk 2.4s ease-in-out infinite; } body.exam-mode #reading-exam .subq-wrapper button.correct:hover{ background:#059669; border-color:#047857; color:#ffffff; transform:scale(1.14); box-shadow: 0 0 0 3px rgba(16,185,129,.3), 0 0 26px 0 rgba(16,185,129,.8), inset 0 1px 0 rgba(255,255,255,.35); } /* INCORRECT — same recipe, ruby/rose */ body.exam-mode #reading-exam .subq-wrapper button.incorrect{ background:#ef4444; border-color:#dc2626; box-shadow: 0 0 0 2px rgba(239,68,68,.18), 0 0 18px -2px rgba(239,68,68,.65), inset 0 1px 0 rgba(255,255,255,.25); } body.exam-mode #reading-exam .subq-wrapper button.incorrect::after{ content:''; position:absolute; inset:-4px; border-radius:inherit; pointer-events:none; opacity:.6; animation:exChipBreathBad 2.4s ease-in-out infinite; } body.exam-mode #reading-exam .subq-wrapper button.incorrect:hover{ background:#dc2626; border-color:#b91c1c; color:#ffffff; transform:scale(1.14); box-shadow: 0 0 0 3px rgba(239,68,68,.3), 0 0 26px 0 rgba(239,68,68,.8), inset 0 1px 0 rgba(255,255,255,.35); } /* UNANSWERED — flat slate, no glow, no scale. Reads as "this was skipped" without competing visually with the actual results. */ body.exam-mode #reading-exam .subq-wrapper button.unanswered{ background:#d4d8de; border-color:#b8bfc8; color:#5b6b78; font-weight:700; } body.exam-mode #reading-exam .subq-wrapper button.unanswered:hover{ background:#b8bfc8; border-color:#9aa3ad; color:#15202B; } /* Dark-mode parity */ [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button.correct{ background:#10b981; border-color:#059669; color:#02261b; } [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button.incorrect{ background:#ef4444; border-color:#dc2626; color:#2a0707; } [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button.unanswered{ background:#3a4754; border-color:#2a3340; color:#94a3b0; } [data-theme="dark"] body.exam-mode #reading-exam .subq-wrapper button.unanswered:hover{ background:#475569; border-color:#475569; color:#e6eef5; } /* Entry pop — runs once per chip when results land */ @keyframes exPaletteResult{ 0% { transform:scale(.7); opacity:0; } 55% { transform:scale(1.22); opacity:1; } 100% { transform:scale(1.08); } } /* Outer-halo breathing — slow + subtle so the eye reads "alive" without being interrupted during answer review. Separate keyframes per state so the box-shadow colour matches the chip (currentColor would resolve to the white text color, not the green/red glow we want). */ @keyframes exChipBreathOk{ 0%,100%{ opacity:.4; box-shadow:0 0 8px 1px rgba(16,185,129,.55); } 50% { opacity:.8; box-shadow:0 0 18px 4px rgba(16,185,129,.8); } } @keyframes exChipBreathBad{ 0%,100%{ opacity:.4; box-shadow:0 0 8px 1px rgba(239,68,68,.55); } 50% { opacity:.8; box-shadow:0 0 18px 4px rgba(239,68,68,.8); } } /* Soft "answer registered" pulse — runs once per state change, not a constant animation, so it's subtle and not distracting. */ @keyframes exPaletteGlow{ 0% { box-shadow:0 0 0 0 rgba(17,163,127,.55); transform:scale(1); } 40% { box-shadow:0 0 0 6px rgba(17,163,127,0); transform:scale(1.08); } 100% { box-shadow:0 0 0 0 rgba(17,163,127,0); transform:scale(1); } } /* Smooth focus ring on gap inputs so they feel responsive when typing. */ body.exam-mode #reading-exam .ex-gap-input{ transition:border-color .18s ease, box-shadow .18s ease, color .18s ease; } body.exam-mode #reading-exam .footer__deliverButton{ padding:10px 22px; background:#11A37F; color:#ffffff; border:none; border-radius:10px; font-weight:700; font-size:14.5px; cursor:pointer; transition:background .15s, box-shadow .15s; } body.exam-mode #reading-exam .footer__deliverButton:hover{ background:#0E8A6C; box-shadow:0 6px 18px -6px #11A37F; } /* Hide the global home page when in exam mode */ body.exam-mode > section:not(#reading-exam):not(#listening-exam), body.exam-mode > header, body.exam-mode > footer, body.exam-mode .navbar, body.exam-mode .topbar{ display:none !important; } /* ===== Drag-and-drop (summary_completion_drag) ===== */ body.exam-mode #reading-exam .ex-bank-drag{ min-height:46px; transition:background .12s, border-color .12s; } body.exam-mode #reading-exam .ex-bank-drag.ex-drop-over{ background:#F1F8F6; border-color:#11A37F; } body.exam-mode #reading-exam .ex-drag-chip{ cursor:grab; user-select:none; transition:transform .1s, box-shadow .12s, background .12s; } body.exam-mode #reading-exam .ex-drag-chip:hover{ background:#F1F8F6; transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(17,163,127,.4); } body.exam-mode #reading-exam .ex-drag-chip:active{ cursor:grabbing; } body.exam-mode #reading-exam .ex-dragging{ opacity:.5; } body.exam-mode #reading-exam .ex-bank-empty{ color:#5B6B78; font-size:13px; font-style:italic; padding:6px; } body.exam-mode #reading-exam .ex-drop-zone{ display:inline-flex; align-items:center; justify-content:center; min-width:90px; min-height:32px; padding:2px 10px; margin:0 4px; border:2px dashed #C9D2DA; border-radius:4px; background:#F8FAFB; vertical-align:middle; transition:background .12s, border-color .12s; } body.exam-mode #reading-exam .ex-drop-zone.ex-drop-over{ background:#E8F5F0; border-color:#11A37F; border-style:solid; } body.exam-mode #reading-exam .ex-drop-empty{ color:#9AA5B1; font-weight:600; opacity:.7; } body.exam-mode #reading-exam .ex-drop-chip{ display:inline-block; padding:2px 10px; background:#11A37F; color:#ffffff; border-radius:4px; font-weight:600; cursor:grab; transition:background .12s, transform .1s; } body.exam-mode #reading-exam .ex-drop-chip:hover{ background:#0E8A6C; transform:translateY(-1px); } /* Filled zone — solid border so it visually contrasts with empty zones */ body.exam-mode #reading-exam .ex-drop-zone:has(.ex-drop-chip){ border-style:solid; border-color:#11A37F; background:#ffffff; } /* Compact MSE renderer */ body.exam-mode #reading-exam .ex-mse-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } body.exam-mode #reading-exam .ex-mse-begin{ flex:1; } body.exam-mode #reading-exam .ex-mse-legend{ margin-top:12px; padding:14px 16px; background:#F8FAFB; border:1px solid #E4E8EC; border-radius:10px; } /* =========================================================== Premium-locked screen — shown inside the reading/listening exam takeover when a non-entitled user deep-links a premium test. =========================================================== */ .ex-premium-locked{ max-width:520px; margin:8vh auto 0; padding:40px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; } .ex-premium-locked-ico{ font-size:54px; line-height:1; filter:drop-shadow(0 8px 22px rgba(245,158,11,.38)); } .ex-premium-locked-title{ margin:0; font-size:26px; font-weight:800; color:var(--text, #0f172a); } .ex-premium-locked-text{ margin:0; font-size:15px; line-height:1.6; color:var(--text3, #64748b); max-width:44ch; } .ex-premium-locked-cta{ margin-top:6px; padding:12px 30px; font-size:15px; font-weight:700; } .ex-premium-locked-sub{ font-size:12.5px; color:var(--text3, #94a3b8); margin-top:2px; } /* ============================ RESPONSIVE — READING EXAM (phones + portrait tablets) ============================ The exam is a desktop split-view (passage | resizer | questions) inside a fixed 100dvh app shell, plus a bottom nav-row whose question palette is a horizontal segmented control. On narrow screens the split can't work and the nav-row's three children (parts + palette + submit) fight over one row — collapsing the palette into a tall vertical column. We stack the two panels, scroll them together, hide the drag divider, and give the palette its own horizontally-scrolling row. Raw-mode (single full-screen iframe) tests are excluded from the panel rules — their iframe already fills the screen; they only benefit from the nav-row reflow. */ @media (max-width:820px){ /* --- stacked passage + questions (parsed two-pane tests only) --- */ body.exam-mode #reading-exam .panels-container:not(.ex-raw-mode){ flex-direction:column; align-items:stretch; overflow-y:auto; /* the stacked pair scrolls here … */ -webkit-overflow-scrolling:touch; min-height:0; } body.exam-mode #reading-exam .panels-container:not(.ex-raw-mode) .resizer{ display:none; } body.exam-mode #reading-exam .panels-container:not(.ex-raw-mode) .passage-panel, body.exam-mode #reading-exam .panels-container:not(.ex-raw-mode) .questions-panel{ width:100% !important; /* beat inline width left by a prior desktop drag */ flex:none !important; /* beat inline flex:none / flex:1 */ max-height:none; /* … so panels don't ALSO scroll internally */ overflow:visible; padding:18px 16px 16px !important; } body.exam-mode #reading-exam .panels-container:not(.ex-raw-mode) .passage-panel{ border-right:none; border-bottom:1px solid #E4E8EC; /* divider becomes a horizontal rule */ } [data-theme="dark"] body.exam-mode #reading-exam .panels-container:not(.ex-raw-mode) .passage-panel{ border-bottom-color:#233240; } body.exam-mode #reading-exam .reading-passage > h2:first-child{ font-size:19px; } body.exam-mode #reading-exam .part-header{ padding:8px 16px; } /* --- wide question tables get their own scroller --- The renderers wrap every table_completion / matching grid in a `.ex-tbl-scroll` / `.ex-grid-scroll` div for exactly this purpose, but neither class had a single CSS rule anywhere. A table-completion row holding two gap inputs needs ~290px of unbreakable width (each input is width:120px + cell padding), so in the ~358px-wide stacked pane the table spilled out of the card and dragged the whole panels-container sideways. Give each table its own horizontal scroller instead. */ body.exam-mode #reading-exam .ex-tbl-scroll, body.exam-mode #reading-exam .ex-grid-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } /* --- bottom nav-row reflow: parts + submit share row 1, palette scrolls on row 2 --- */ body.exam-mode #reading-exam .nav-row{ flex-wrap:wrap; gap:8px; row-gap:8px; padding:8px 12px; } body.exam-mode #reading-exam .footer-parts{ order:1; flex:1 1 auto; min-width:0; } body.exam-mode #reading-exam .footer__deliverButton{ order:2; margin-left:auto; } body.exam-mode #reading-exam .subq-wrapper{ order:3; flex-basis:100%; flex-wrap:nowrap; /* one row … */ overflow-x:auto; /* … that scrolls horizontally */ overflow-y:hidden; padding-bottom:3px; scrollbar-width:thin; justify-content:flex-start; } body.exam-mode #reading-exam .subq-wrapper button{ flex:0 0 auto; } } /* Phones: declutter the exam header. Pinch-zoom replaces the A± font controls and mobile browsers own true fullscreen, so those two controls come off. */ @media (max-width:560px){ body.exam-mode #reading-exam .header{ padding:10px 88px 10px 14px; } body.exam-mode #reading-exam .header-left, body.exam-mode #reading-exam .header-right{ gap:8px; } body.exam-mode #reading-exam .ex-rsize-ctrl, body.exam-mode #reading-exam .ex-fs-btn{ display:none; } body.exam-mode #reading-exam .exit-btn{ top:10px; right:12px; padding:7px 12px; font-size:13px; } /* Question palette + part pills are the two controls a test-taker taps constantly under time pressure, and at 36px / ~28px tall they are under the ~40px a fingertip needs. The palette row already scrolls horizontally at this width, so growing the chips costs no layout. */ body.exam-mode #reading-exam .subq-wrapper button{ width:40px; height:40px; } body.exam-mode #reading-exam .footer-part-pill{ padding:9px 14px; } /* ---- results modal ---- Nested padding (overlay 20 + content 28 + summary 16) ate 128px of a 375px screen, leaving the content 245px. Claw most of it back. */ body.exam-mode #reading-exam .modal-overlay{ padding:10px; } body.exam-mode #reading-exam .modal-content{ padding:20px 14px; } body.exam-mode #reading-exam .results-summary{ padding:12px; } /* Three fixed stat columns squeezed "Estimated band" onto 2 lines and "28 / 40" onto 2 lines, and still overflowed the modal. Two up top with the third spanning underneath reads as deliberate, not as a gap. */ body.exam-mode #reading-exam .ex-res-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } body.exam-mode #reading-exam .ex-res-cell{ padding:12px 10px; } body.exam-mode #reading-exam .ex-res-cell:nth-child(3){ grid-column:1 / -1; } body.exam-mode #reading-exam .ex-res-cell-v{ font-size:22px; } body.exam-mode #reading-exam .ex-res-band{ font-size:28px; } /* The answer-review rows gave each answer ~78px, shredding real answers ("the National Gallery") into 3-line fragments. Keep the number + tick on the left and stack the two answers in one full-width column. */ body.exam-mode #reading-exam .results-header, body.exam-mode #reading-exam .results-row{ grid-template-columns:26px 20px minmax(0, 1fr); gap:2px 8px; padding:10px 12px; } body.exam-mode #reading-exam .results-row > :nth-child(3), body.exam-mode #reading-exam .results-row > :nth-child(4){ grid-column:3; overflow-wrap:anywhere; } /* Column headings can't survive 26px/20px columns ("Status" clipped into "Your Answer"). Drop them and label the stacked line in the row itself so every row still says which answer is which. */ body.exam-mode #reading-exam .results-header{ display:none; } body.exam-mode #reading-exam .results-row > :nth-child(4){ opacity:.75; font-size:12.5px; } body.exam-mode #reading-exam .results-row > :nth-child(4)::before{ content:'Correct: '; font-weight:700; } } /* Very narrow: keep the brand MARK but drop its wordmark, timer play/pause, and the "Reading" palette label so the timer + parts never collide with the Exit button. */ @media (max-width:440px){ body.exam-mode #reading-exam .ex-brand-name{ display:none; } body.exam-mode #reading-exam .timer-controls{ display:none; } body.exam-mode #reading-exam .footer-part-name{ display:none; } }