/* Speaking practice workspace. Every rule is scoped to body[data-mock-section="speaking"], so the homepage, sidebar, listening, reading and writing keep their own styles. Colours come from the shared light/dark tokens in mock-exam.css. */ /* Tokens ---------------------------------------------------------------- */ body[data-mock-section="speaking"] { --sp-pad-x: 28px; --sp-gap: 18px; --sp-radius: 22px; --sp-accent: var(--button); --sp-accent-soft: rgba(255, 241, 232, 0.96); --sp-accent-line: rgba(227, 160, 124, 0.75); --sp-ok: #2d8a52; --sp-ok-soft: rgba(45, 138, 82, 0.1); --sp-ok-line: rgba(45, 138, 82, 0.38); --sp-bad: #b0423f; --sp-bad-soft: rgba(176, 66, 63, 0.09); --sp-bad-line: rgba(176, 66, 63, 0.38); --sp-inset: rgba(246, 241, 234, 0.7); --sp-track: rgba(223, 209, 194, 0.9); } html[data-theme="dark"] body[data-mock-section="speaking"] { --sp-accent-soft: rgba(208, 122, 77, 0.16); --sp-accent-line: rgba(227, 153, 110, 0.55); --sp-ok: #7ed7a4; --sp-ok-soft: rgba(126, 215, 164, 0.12); --sp-ok-line: rgba(126, 215, 164, 0.4); --sp-bad: #ff9f97; --sp-bad-soft: rgba(255, 159, 151, 0.1); --sp-bad-line: rgba(255, 159, 151, 0.4); --sp-inset: rgba(20, 24, 35, 0.55); --sp-track: rgba(84, 93, 111, 0.8); } /* Shared building blocks ------------------------------------------------- */ body[data-mock-section="speaking"] .sp-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); box-shadow: var(--shadow-card); overflow: hidden; } body[data-mock-section="speaking"] .sp-card-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-card-head h2 { margin: 0; color: var(--ink-strong); font-size: 20px; font-weight: 750; letter-spacing: -.02em; line-height: 1.3; } body[data-mock-section="speaking"] .sp-card-meta { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; } body[data-mock-section="speaking"] .sp-badge-no { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-eyebrow { display: block; margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } body[data-mock-section="speaking"] .sp-lead { padding: 4px 2px 0; } body[data-mock-section="speaking"] .sp-lead h2 { margin: 0; color: var(--ink-strong); font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; } body[data-mock-section="speaking"] .sp-lead p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; } body[data-mock-section="speaking"] .sp-note { margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sp-inset); color: var(--muted); font-size: 13px; line-height: 1.55; } body[data-mock-section="speaking"] .sp-hint { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; } body[data-mock-section="speaking"] .sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body[data-mock-section="speaking"] .sp-actions .control-button { width: auto; } /* Intro / start / microphone check pages: shell stays the standard single column. */ body[data-mock-section="speaking"][data-mock-view="intro"] .page-header:empty, body[data-mock-section="speaking"][data-mock-view="speaking-check"] .page-header:empty { display: none; } body[data-mock-section="speaking"][data-mock-view="intro"] .page-header, body[data-mock-section="speaking"][data-mock-view="speaking-check"] .page-header { display: none; } body[data-mock-section="speaking"][data-mock-view="intro"] .page-body, body[data-mock-section="speaking"][data-mock-view="speaking-check"] .page-body { min-height: 0; } body[data-mock-section="speaking"][data-mock-view="intro"] .page-footer:empty { display: none; } /* Start page -------------------------------------------------------------- */ body[data-mock-section="speaking"] .sp-start, body[data-mock-section="speaking"] .sp-check { display: grid; gap: var(--sp-gap); max-width: 1240px; margin: 0 auto; padding-top: 8px; } body[data-mock-section="speaking"] .sp-start-grid, body[data-mock-section="speaking"] .sp-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-gap); align-items: stretch; } body[data-mock-section="speaking"] .sp-start-tasks, body[data-mock-section="speaking"] .sp-start-before { height: 100%; } body[data-mock-section="speaking"] .sp-task-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow: auto; } body[data-mock-section="speaking"] .sp-task-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 24px; border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-task-row:last-child { border-bottom: 0; } body[data-mock-section="speaking"] .sp-task-no { color: var(--button-dark); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-task-name strong { color: var(--ink-strong); font-size: 16px; font-weight: 650; } body[data-mock-section="speaking"] .sp-task-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } body[data-mock-section="speaking"] .sp-start-body { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; padding: 20px 24px 22px; overflow: auto; } body[data-mock-section="speaking"] .sp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } body[data-mock-section="speaking"] .sp-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; } body[data-mock-section="speaking"] .sp-steps strong { display: block; color: var(--ink-strong); font-size: 15px; line-height: 1.35; } body[data-mock-section="speaking"] .sp-steps p { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } body[data-mock-section="speaking"] .sp-step-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font-size: 12px; font-weight: 700; } body[data-mock-section="speaking"] .sp-skip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; } body[data-mock-section="speaking"] .sp-skip-mic { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-strong); font-size: 14px; font-weight: 600; cursor: pointer; } body[data-mock-section="speaking"] .sp-skip-mic input { width: 20px; height: 20px; margin: 0; accent-color: var(--button); flex-shrink: 0; } body[data-mock-section="speaking"] .sp-skip-mic.is-disabled { color: var(--muted); cursor: default; } body[data-mock-section="speaking"] .sp-skip-hint { color: var(--muted); font-size: 12.5px; } body[data-mock-section="speaking"] .sp-start-before .sp-actions { margin-top: auto; padding-top: 2px; } body[data-mock-section="speaking"] .sp-intro-more { border-top: 1px solid var(--line); padding-top: 12px; } body[data-mock-section="speaking"] .sp-intro-more > summary { cursor: pointer; min-height: 36px; color: var(--ink-strong); font-size: 14px; font-weight: 650; display: flex; align-items: center; } body[data-mock-section="speaking"] .sp-intro-more > summary:focus-visible { outline: 2px solid var(--button); outline-offset: 3px; border-radius: 6px; } body[data-mock-section="speaking"] .sp-intro-body { display: grid; gap: 14px; padding-top: 10px; } body[data-mock-section="speaking"] .sp-intro-screen h3 { margin: 0 0 8px; color: var(--ink-strong); font-size: 15px; } body[data-mock-section="speaking"] .sp-intro-screen p { margin: 0 0 8px; color: var(--ink); font-size: 13.5px; line-height: 1.6; } body[data-mock-section="speaking"] .sp-intro-screen .instruction-card { padding: 0; border: 0; background: transparent; box-shadow: none; } body[data-mock-section="speaking"] .sp-intro-screen video { width: 100%; max-height: 300px; border-radius: 14px; background: #000; } /* Microphone check ------------------------------------------------------- */ body[data-mock-section="speaking"] .sp-check-card { height: 100%; } body[data-mock-section="speaking"] .sp-check-card > :not(.sp-card-head) { margin-inline: 24px; } body[data-mock-section="speaking"] .sp-check-card > .sp-card-head + * { margin-top: 20px; } body[data-mock-section="speaking"] .sp-check-card > :last-child { margin-bottom: 24px; } body[data-mock-section="speaking"] .sp-check-card { gap: 18px; } body[data-mock-section="speaking"] .sp-check-card > .sp-actions { margin-top: auto; } body[data-mock-section="speaking"] .sp-check-card[data-sp-check-card="trial"] > .sp-note { margin-top: auto; } body[data-mock-section="speaking"] .sp-status { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sp-inset); } body[data-mock-section="speaking"] .sp-status strong { color: var(--ink-strong); font-size: 15px; } body[data-mock-section="speaking"] .sp-status span { color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-status--ok { border-color: var(--sp-ok-line); background: var(--sp-ok-soft); } body[data-mock-section="speaking"] .sp-status--ok strong { color: var(--sp-ok); } body[data-mock-section="speaking"] .sp-status--bad { border-color: var(--sp-bad-line); background: var(--sp-bad-soft); } body[data-mock-section="speaking"] .sp-status--bad strong { color: var(--sp-bad); } body[data-mock-section="speaking"] .sp-field { display: grid; gap: 8px; } body[data-mock-section="speaking"] .sp-field .field-label { margin: 0; } body[data-mock-section="speaking"] .sp-field-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } body[data-mock-section="speaking"] .sp-check .speaking-device-meter { height: 12px; } body[data-mock-section="speaking"] .sp-trial { display: grid; gap: 14px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--sp-inset); } body[data-mock-section="speaking"] .sp-trial .speaking-playback { margin-top: 0; } body[data-mock-section="speaking"] .sp-trial .speaking-audio-player { background: var(--card-surface); } body[data-mock-section="speaking"][data-mock-view="speaking-check"] .page-footer { margin-top: var(--sp-gap); max-width: 1240px; width: 100%; margin-inline: auto; } body[data-mock-section="speaking"][data-mock-view="speaking-check"] .page-footer .footer-note { color: var(--muted); font-size: 13px; } @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-start-grid, body[data-mock-section="speaking"] .sp-check-grid { grid-template-columns: minmax(0, 1fr); } body[data-mock-section="speaking"] .sp-start-tasks, body[data-mock-section="speaking"] .sp-start-before, body[data-mock-section="speaking"] .sp-check-card { height: auto; } body[data-mock-section="speaking"] .sp-task-row { padding-inline: 18px; } body[data-mock-section="speaking"] .sp-card-head { padding-inline: 18px; } body[data-mock-section="speaking"] .sp-start-body { padding-inline: 18px; } body[data-mock-section="speaking"] .sp-check-card > :not(.sp-card-head) { margin-inline: 18px; } } /* Exam shell: the working area takes the viewport height; panels scroll internally ------------------- */ body[data-mock-section="speaking"][data-mock-view="exam"] .shell-main { display: flex; flex-direction: column; height: 100dvh; min-height: 0; min-width: 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .topbar { flex: 0 0 auto; padding: 14px var(--sp-pad-x) 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px var(--sp-pad-x) 16px; overflow-x: hidden; overflow-y: auto; } body[data-mock-section="speaking"][data-mock-view="exam"] .workspace-card { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-header { display: block; flex: 0 0 auto; width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-body { flex: 1 1 0; display: flex; flex-direction: column; min-height: 520px; padding: 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .official-site-footer { display: none; } body[data-mock-section="speaking"][data-mock-view="exam"] .toast-stack { left: calc(var(--sidebar-collapsed-width) + 20px); right: auto; max-width: 460px; } /* Session bar */ body[data-mock-section="speaking"] .sp-session { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 12px 22px; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); box-shadow: var(--shadow-card); } body[data-mock-section="speaking"] .sp-session-id { min-width: 0; } body[data-mock-section="speaking"] .sp-session-id .sp-eyebrow { margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-mock-section="speaking"] .sp-session-title { margin: 0; color: var(--ink-strong); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } body[data-mock-section="speaking"] .sp-session-nav { min-width: 0; display: flex; justify-content: center; } body[data-mock-section="speaking"] .sp-session-nav .header-part-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; width: auto; } body[data-mock-section="speaking"] .sp-session-nav .part-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 70px; padding: 7px 14px; border-radius: 14px; border: 1px solid var(--pill-border); background: var(--card-surface-soft); color: var(--ink); font-size: 14px; line-height: 1.25; box-shadow: none; cursor: pointer; } body[data-mock-section="speaking"] .sp-session-nav .part-chip:hover { background: var(--sidebar-button-hover-bg); border-color: var(--sp-accent-line); } body[data-mock-section="speaking"] .sp-session-nav .part-chip.is-active { background: var(--sp-accent-soft); border-color: var(--sp-accent); color: var(--sidebar-button-active-text); font-weight: 650; } body[data-mock-section="speaking"] .sp-session-nav .part-chip.is-complete:not(.is-active) { border-color: var(--sp-ok-line); } body[data-mock-section="speaking"] .sp-session-nav .part-chip__meta { font-size: 11px; color: var(--sp-ok); } body[data-mock-section="speaking"] .sp-session-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } body[data-mock-section="speaking"] .sp-session-tools:empty { display: none; } /* Workspace: material + recording rail ----------------------------------------------------------- */ body[data-mock-section="speaking"] .sp-workspace { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--sp-gap); min-height: 0; align-items: stretch; } body[data-mock-section="speaking"] .sp-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); box-shadow: var(--shadow-card); overflow: hidden; } body[data-mock-section="speaking"] .sp-material-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 24px 14px; border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-material-head .sp-eyebrow { margin-bottom: 3px; } body[data-mock-section="speaking"] .sp-material-title { margin: 0; color: var(--ink-strong); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } body[data-mock-section="speaking"] .sp-material-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; } body[data-mock-section="speaking"] .sp-material-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 18px 24px 22px; overflow: auto; overscroll-behavior: contain; } body[data-mock-section="speaking"] .sp-source { margin: 0; padding: 0; } body[data-mock-section="speaking"] .sp-source .speaking-prompt-paragraph { margin: 0 0 .75em; font-size: clamp(18px, 1.45vw, 22px); font-weight: 500; line-height: 1.65; color: var(--ink-strong); overflow-wrap: anywhere; } body[data-mock-section="speaking"] .sp-source .source-paragraph--translation { color: var(--muted); font-weight: 400; font-size: .86em; } body[data-mock-section="speaking"] .sp-banner { margin: 0; flex: 0 0 auto; } body[data-mock-section="speaking"] .speaking-reconstruction-notice { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sp-inset); color: var(--muted); font-size: 12.5px; } body[data-mock-section="speaking"] .sp-material-scroll > .speaking-visual { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--sp-inset); box-shadow: none; display: grid; place-items: center; padding: 10px; } body[data-mock-section="speaking"] .sp-material-scroll > .speaking-visual .speaking-visual-image { width: auto; max-width: 100%; height: auto; max-height: min(62vh, 520px); object-fit: contain; border-radius: 8px; } body[data-mock-section="speaking"] .sp-notes { flex: 0 0 auto; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-notes > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; } body[data-mock-section="speaking"] .sp-notes ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; } /* Task 5: equal option cards; the image slot absorbs the available height and never crops or distorts. */ body[data-mock-section="speaking"] .sp-compare { container-type: inline-size; flex: 1 1 auto; min-height: 340px; max-height: 780px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(110px, 1fr) auto; column-gap: 16px; row-gap: 0; } body[data-mock-section="speaking"] .sp-option { position: relative; min-width: 0; min-height: 0; margin: 0; display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-surface); box-shadow: none; overflow: hidden; } body[data-mock-section="speaking"] .sp-option.is-selected, body[data-mock-section="speaking"] .sp-option--chosen { border-color: var(--sp-accent); box-shadow: 0 0 0 1px var(--sp-accent); } body[data-mock-section="speaking"] .sp-option:has(.sp-option-pick input:focus-visible) { outline: 2px solid var(--button); outline-offset: 2px; } body[data-mock-section="speaking"] .sp-option-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 8px 14px; border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-option-label { display: inline-flex; align-items: center; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--sp-inset); color: var(--muted); font-size: 12px; font-weight: 600; } body[data-mock-section="speaking"] .sp-option.is-selected .sp-option-label, body[data-mock-section="speaking"] .sp-option--chosen .sp-option-label { border-color: var(--sp-accent-line); background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); } body[data-mock-section="speaking"] .sp-option-pick { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--ink-strong); font-size: 13.5px; font-weight: 650; cursor: pointer; } body[data-mock-section="speaking"] .sp-option-pick::after { content: ""; position: absolute; inset: 0; z-index: 1; } body[data-mock-section="speaking"] .sp-option-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--button); } body[data-mock-section="speaking"] .sp-option-top { grid-row: 1; } body[data-mock-section="speaking"] .sp-option-media { grid-row: 2; position: relative; min-height: 110px; background: var(--sp-inset); } body[data-mock-section="speaking"] .sp-option-facts { grid-row: 3; } body[data-mock-section="speaking"] .sp-option-media[hidden] { display: none; } body[data-mock-section="speaking"] .sp-option-media img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); max-width: none; object-fit: contain; border-radius: 6px; } body[data-mock-section="speaking"] .sp-option-facts { flex: 0 0 auto; padding: 12px 16px 16px; border-top: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-option-media[hidden] + .sp-option-facts, body[data-mock-section="speaking"] .sp-option-top + .sp-option-facts { border-top: 0; } body[data-mock-section="speaking"] .sp-option-facts h3 { margin: 0 0 6px; color: var(--ink-strong); font-size: 17px; font-weight: 750; line-height: 1.3; } body[data-mock-section="speaking"] .sp-option-facts ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 14px; line-height: 1.55; } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="4-3"] { grid-template-rows: auto auto auto; } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="1-1"] { grid-template-rows: auto auto auto; } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="4-3"] .sp-option-media { height: min(380px, calc((100cqi - 16px) * .375)); } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="1-1"] .sp-option-media { height: min(380px, calc((100cqi - 16px) / 2)); } body[data-mock-section="speaking"] .sp-segment { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--pill-border); border-radius: 999px; overflow: hidden; } body[data-mock-section="speaking"] .sp-seg { appearance: none; min-height: 32px; padding: 4px 13px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; } body[data-mock-section="speaking"] .sp-seg + .sp-seg { border-left: 1px solid var(--pill-border); } body[data-mock-section="speaking"] .sp-seg[aria-pressed="true"] { background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font-weight: 650; } body[data-mock-section="speaking"] .sp-seg:focus-visible { outline: 2px solid var(--button); outline-offset: -2px; } /* Recording rail --------------------------------------------------------------------------------- */ body[data-mock-section="speaking"] .sp-rail { padding: 0; } body[data-mock-section="speaking"] .sp-rail > * { flex: 0 0 auto; } body[data-mock-section="speaking"] .sp-rail-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px 10px; } body[data-mock-section="speaking"] .sp-rail-head h2 { margin: 0; color: var(--ink-strong); font-size: 17px; font-weight: 750; } body[data-mock-section="speaking"] .sp-rail-head span { color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-phases { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0 20px 14px; } body[data-mock-section="speaking"] .sp-phases li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-phases li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--pill-border); border-radius: 999px; font-size: 11px; font-weight: 700; } body[data-mock-section="speaking"] .sp-phases li.is-active { color: var(--sidebar-button-active-text); font-weight: 650; } body[data-mock-section="speaking"] .sp-phases li.is-active span { border-color: var(--sp-accent); background: var(--sp-accent-soft); } body[data-mock-section="speaking"] .sp-phases li.is-done span { border-color: var(--sp-ok-line); color: var(--sp-ok); background: var(--sp-ok-soft); } body[data-mock-section="speaking"] .sp-clock { margin: 0 20px; padding: 14px 18px 16px; display: grid; justify-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 18px; background: var(--sp-inset); text-align: center; } body[data-mock-section="speaking"] .sp-clock-state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; } body[data-mock-section="speaking"] .sp-rec-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--sp-track); } body[data-mock-section="speaking"] [data-sp-tone="rec"] .sp-rec-dot { background: var(--sp-bad); box-shadow: 0 0 0 0 var(--sp-bad-line); animation: sp-rec 1.4s ease-out infinite; } body[data-mock-section="speaking"] [data-sp-tone="rec"] .sp-clock-state { color: var(--sp-bad); } body[data-mock-section="speaking"] [data-sp-tone="wait"] .sp-rec-dot { background: var(--sp-accent); } body[data-mock-section="speaking"] [data-sp-tone="bad"] .sp-rec-dot { background: var(--sp-bad); } body[data-mock-section="speaking"] [data-sp-tone="bad"] .sp-clock-state { color: var(--sp-bad); } @keyframes sp-rec { 0% { box-shadow: 0 0 0 0 var(--sp-bad-line); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } } @media (prefers-reduced-motion: reduce) { body[data-mock-section="speaking"] [data-sp-tone="rec"] .sp-rec-dot { animation: none; } } body[data-mock-section="speaking"] .sp-clock-time { color: var(--ink-strong); font-size: clamp(44px, 4.4vw, 58px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-clock-sub { color: var(--muted); font-size: 12.5px; } body[data-mock-section="speaking"] .sp-clock-bar { width: 100%; height: 5px; margin-top: 6px; border-radius: 999px; background: var(--sp-track); overflow: hidden; } body[data-mock-section="speaking"] .sp-clock-bar span { display: block; height: 100%; border-radius: inherit; background: var(--sp-accent); transition: width 900ms linear; } body[data-mock-section="speaking"] [data-sp-tone="rec"] .sp-clock-bar span { background: var(--sp-bad); } body[data-mock-section="speaking"] .sp-selected { margin: 12px 20px 0; display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-selected strong { color: var(--ink-strong); font-size: 15px; } body[data-mock-section="speaking"] .sp-rail .speaking-playback { margin: 12px 20px 0; } body[data-mock-section="speaking"] .sp-choose-list { margin: 12px 20px 0; } /* Quick transcript: the largest remaining area of the rail */ body[data-mock-section="speaking"] .sp-rail > .sp-transcript { flex: 1 1 auto; min-height: 200px; margin: 14px 20px 0; } body[data-mock-section="speaking"] .sp-transcript { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 0; } body[data-mock-section="speaking"] .sp-transcript-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; } body[data-mock-section="speaking"] .sp-transcript-head h3 { margin: 0; color: var(--ink-strong); font-size: 14px; font-weight: 700; } body[data-mock-section="speaking"] .sp-pill { max-width: 55%; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--sp-inset); color: var(--muted); font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-mock-section="speaking"] .sp-transcript-body { flex: 1 1 0; min-height: 140px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-strong); font-size: 15.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; overscroll-behavior: contain; } body[data-mock-section="speaking"] .sp-transcript-body.is-empty { color: var(--muted); font-size: 14px; } body[data-mock-section="speaking"] .sp-transcript-body:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; } body[data-mock-section="speaking"] .sp-latest { position: absolute; right: 12px; bottom: 12px; padding: 4px 12px; border: 1px solid var(--sp-accent-line); border-radius: 999px; background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; } body[data-mock-section="speaking"] .sp-latest[hidden] { display: none; } body[data-mock-section="speaking"] .sp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body[data-mock-section="speaking"] .sp-rail-actions { margin-top: auto; display: grid; gap: 8px; padding: 14px 20px 18px; } body[data-mock-section="speaking"] .sp-rail > .sp-rail-actions { border-top: 0; } body[data-mock-section="speaking"] .sp-rail-actions .control-button { width: 100%; min-height: 48px; } body[data-mock-section="speaking"] .sp-rail-caption { margin: 0; text-align: center; color: var(--muted); font-size: 12px; } /* Narrow windows: stacked; clock stays at the top and actions at the bottom while the page scrolls. */ @media (max-width: 1100px) { body[data-mock-section="speaking"] .sp-session { grid-template-columns: minmax(0, 1fr) auto; } body[data-mock-section="speaking"] .sp-session-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } } @media (max-width: 900px) { body[data-mock-section="speaking"][data-mock-view="exam"] .shell-main { height: auto; min-height: 100dvh; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-frame { overflow: visible; padding: 8px 12px 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .topbar { padding: 10px 12px 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-body { min-height: 0; flex: 0 0 auto; } body[data-mock-section="speaking"] .sp-session { padding: 10px 14px; gap: 8px 12px; border-radius: 18px; } body[data-mock-section="speaking"] .sp-session-title { font-size: 20px; } body[data-mock-section="speaking"] .sp-session-nav .header-part-nav { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; width: 100%; scrollbar-width: none; } body[data-mock-section="speaking"] .sp-session-nav .header-part-nav::-webkit-scrollbar { display: none; } body[data-mock-section="speaking"] .sp-session-nav .part-chip { flex: 0 0 auto; width: auto; min-width: 60px; padding: 6px 12px; font-size: 13px; } body[data-mock-section="speaking"] .sp-workspace { display: flex; flex-direction: column; gap: 12px; } body[data-mock-section="speaking"] .sp-rail { display: contents; } body[data-mock-section="speaking"] .sp-material { order: 2; overflow: visible; } body[data-mock-section="speaking"] .sp-material-scroll { overflow: visible; padding: 14px 16px 18px; } body[data-mock-section="speaking"] .sp-material-head { padding: 12px 16px; flex-wrap: wrap; } body[data-mock-section="speaking"] .sp-material-title { font-size: 22px; } body[data-mock-section="speaking"] .sp-rail-head { order: 0; display: none; } body[data-mock-section="speaking"] .sp-phases { order: 0; padding: 0 2px; } body[data-mock-section="speaking"] .sp-clock { order: 1; position: sticky; top: 0; z-index: 6; margin: 0; grid-template-columns: auto 1fr; grid-template-areas: "time state" "time sub" "bar bar"; justify-items: start; align-items: center; column-gap: 16px; padding: 8px 16px 10px; background: var(--surface-soft-strong); box-shadow: var(--shadow-card); backdrop-filter: blur(14px); } body[data-mock-section="speaking"] .sp-clock-time { grid-area: time; font-size: 38px; } body[data-mock-section="speaking"] .sp-clock-state { grid-area: state; } body[data-mock-section="speaking"] .sp-clock-sub { grid-area: sub; } body[data-mock-section="speaking"] .sp-clock-bar { grid-area: bar; margin-top: 4px; } body[data-mock-section="speaking"] .sp-selected, body[data-mock-section="speaking"] .sp-choose-list, body[data-mock-section="speaking"] .sp-rail .speaking-playback { order: 1; margin: 0; } body[data-mock-section="speaking"] .sp-rail > .sp-transcript { order: 3; flex: 0 0 auto; min-height: 0; margin: 0; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); box-shadow: var(--shadow-card); } body[data-mock-section="speaking"] .sp-transcript-body { flex: 0 0 auto; height: clamp(150px, 26dvh, 260px); min-height: 0; } body[data-mock-section="speaking"] .sp-rail-actions { order: 4; position: sticky; bottom: 0; z-index: 6; margin: 0 -12px; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); background: var(--surface-soft-strong); border-top: 1px solid var(--card-border); grid-template-columns: 1fr auto; align-items: center; backdrop-filter: blur(16px); } body[data-mock-section="speaking"] .sp-rail-caption { display: none; } body[data-mock-section="speaking"] .sp-rail-actions .control-button { min-height: 46px; padding-inline: 14px; } body[data-mock-section="speaking"] .sp-compare { min-height: 0; max-height: none; grid-template-rows: auto auto auto; } body[data-mock-section="speaking"] .sp-option-media { height: clamp(120px, 26vw, 220px); } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="4-3"] .sp-option-media { height: min(260px, calc((100cqi - 16px) * .375)); } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="1-1"] .sp-option-media { height: min(260px, calc((100cqi - 16px) / 2)); } } @media (max-width: 520px) { body[data-mock-section="speaking"] .sp-option-top { padding: 6px 10px; min-height: 40px; } body[data-mock-section="speaking"] .sp-option-facts { padding: 10px 12px 12px; } body[data-mock-section="speaking"] .sp-option-facts h3 { font-size: 15px; } body[data-mock-section="speaking"] .sp-option-facts ul { font-size: 13px; padding-left: 16px; } body[data-mock-section="speaking"] .sp-option-media { height: clamp(110px, 38vw, 170px); } body[data-mock-section="speaking"] .sp-compare { column-gap: 10px; } body[data-mock-section="speaking"] .sp-seg { padding-inline: 10px; } } @media (max-width: 359px) { body[data-mock-section="speaking"] .sp-compare { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; } body[data-mock-section="speaking"] .sp-option { grid-row: auto; grid-template-rows: auto auto auto; } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="4-3"] .sp-option-media { height: min(260px, 75cqi); } body[data-mock-section="speaking"] .sp-compare[data-sp-ratio="1-1"] .sp-option-media { height: min(260px, 100cqi); } } body[data-mock-section="speaking"] .sp-option-facts ul { list-style: disc; } body[data-mock-section="speaking"] .sp-banner { padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.5; } body[data-mock-section="speaking"] .sp-banner::before, body[data-mock-section="speaking"] .sp-banner::after { display: none; content: none; } body[data-mock-section="speaking"] .sp-transcript[data-empty="true"] .sp-pill { display: none; } /* Results shell: status strip, then task navigation and detail panel at the same height ------------------ */ body[data-mock-section="speaking"][data-mock-view="results"] .screen.sp-results { display: grid; gap: var(--sp-gap); max-width: 1440px; margin: 0 auto; } body[data-mock-section="speaking"] .sp-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 22px; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); box-shadow: var(--shadow-card); } body[data-mock-section="speaking"] .sp-stats { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; } body[data-mock-section="speaking"] .sp-stats > div { display: flex; align-items: baseline; gap: 10px; } body[data-mock-section="speaking"] .sp-stats dt { order: 2; color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-stats dd { order: 1; margin: 0; color: var(--ink-strong); font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-stats dd span { color: var(--muted); font-size: 17px; font-weight: 600; } body[data-mock-section="speaking"] .sp-results-actions { display: flex; align-items: center; gap: 10px; } body[data-mock-section="speaking"] .sp-results-actions .control-button { width: auto; min-width: 0; padding: 8px 18px; } body[data-mock-section="speaking"] .sp-results-grid { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: var(--sp-gap); align-items: stretch; } body[data-mock-section="speaking"] .sp-result-nav, body[data-mock-section="speaking"] .sp-result-detail { height: 100%; min-height: 0; } body[data-mock-section="speaking"] .sp-result-nav .sp-card-head { padding: 14px 20px; } body[data-mock-section="speaking"] .sp-result-nav .sp-card-head h2 { font-size: 16px; } body[data-mock-section="speaking"] .sp-nav-list { position: sticky; top: 8px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } body[data-mock-section="speaking"] .sp-nav-item { appearance: none; width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } body[data-mock-section="speaking"] .sp-nav-list li:last-child .sp-nav-item { border-bottom: 0; } body[data-mock-section="speaking"] .sp-nav-item:hover { background: var(--sidebar-button-hover-bg); } body[data-mock-section="speaking"] .sp-nav-item.is-active { border-left-color: var(--sp-accent); background: var(--sp-accent-soft); } body[data-mock-section="speaking"] .sp-nav-item:focus-visible { outline: 2px solid var(--button); outline-offset: -2px; } body[data-mock-section="speaking"] .sp-nav-item.is-empty .sp-nav-name strong { color: var(--muted); font-weight: 500; } body[data-mock-section="speaking"] .sp-nav-no { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-nav-name { min-width: 0; display: grid; gap: 1px; } body[data-mock-section="speaking"] .sp-nav-name strong { color: var(--ink-strong); font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-mock-section="speaking"] .sp-nav-name small { color: var(--muted); font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-mock-section="speaking"] .sp-nav-state { font-size: 12px; font-weight: 650; white-space: nowrap; color: var(--muted); } body[data-mock-section="speaking"] .sp-nav-state--ok { color: var(--sp-ok); } body[data-mock-section="speaking"] .sp-nav-state--bad { color: var(--sp-bad); } body[data-mock-section="speaking"] .sp-nav-state--wait { color: var(--sidebar-button-active-text); } body[data-mock-section="speaking"] .sp-result-detail { padding: 0; } body[data-mock-section="speaking"] .sp-result-body { display: block; padding: 22px 28px 28px; min-width: 0; } body[data-mock-section="speaking"] .sp-result-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: grid; gap: 14px; } body[data-mock-section="speaking"] .sp-result-card > .score-line { align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-result-title strong { display: block; color: var(--ink-strong); font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; } body[data-mock-section="speaking"] .sp-result-title .sp-eyebrow { margin-bottom: 2px; } body[data-mock-section="speaking"] .sp-result-card .control-button { width: auto; justify-self: start; } body[data-mock-section="speaking"] .sp-result-card .speaking-playback { margin-top: 0; } body[data-mock-section="speaking"] .sp-result-card .sp-transcript-body { min-height: 120px; max-height: 340px; flex: 0 1 auto; } body[data-mock-section="speaking"] .sp-result-card .sp-transcript { gap: 8px; } /* Compact score strip: four dimensions on one row, small padding */ body[data-mock-section="speaking"] .speaking-report-summary { grid-template-columns: auto minmax(0, 1fr); gap: 8px 28px; align-items: start; } body[data-mock-section="speaking"] .speaking-report-level { font-size: 2rem; line-height: 1.1; } body[data-mock-section="speaking"] .speaking-report-bands { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } body[data-mock-section="speaking"] .speaking-report-band { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 14px; border-radius: 14px; } body[data-mock-section="speaking"] .speaking-report-band span { font-size: .78rem; line-height: 1.3; } body[data-mock-section="speaking"] .speaking-report-band strong { font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-result-body .speaking-report { margin-block: 0; } @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-results-grid { grid-template-columns: minmax(0, 1fr); } body[data-mock-section="speaking"] .sp-result-nav, body[data-mock-section="speaking"] .sp-result-detail { height: auto; } body[data-mock-section="speaking"] .sp-nav-list { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; } body[data-mock-section="speaking"] .sp-nav-list li { flex: 0 0 auto; } body[data-mock-section="speaking"] .sp-nav-item { width: 188px; border-bottom: 0; border-left: 0; border-bottom: 3px solid transparent; } body[data-mock-section="speaking"] .sp-nav-item.is-active { border-bottom-color: var(--sp-accent); } body[data-mock-section="speaking"] .sp-result-body { padding: 16px 16px 22px; } body[data-mock-section="speaking"] .sp-results-bar { padding: 10px 16px; } body[data-mock-section="speaking"] .speaking-report-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body[data-mock-section="speaking"] .sp-result-card > .score-line { display: flex; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } body[data-mock-section="speaking"] .speaking-ai-panel .answer-label { margin-right: 8px; } /* Very short windows (landscape phones): keep the sticky clock and action bar compact so the material stays usable. */ @media (max-width: 900px) and (max-height: 520px) { body[data-mock-section="speaking"] .sp-clock { padding: 4px 14px 6px; column-gap: 12px; } body[data-mock-section="speaking"] .sp-clock-time { font-size: 28px; } body[data-mock-section="speaking"] .sp-clock-sub { display: none; } body[data-mock-section="speaking"] .sp-clock-bar { margin-top: 2px; } body[data-mock-section="speaking"] .sp-rail-actions { padding-block: 6px max(6px, env(safe-area-inset-bottom)); } body[data-mock-section="speaking"] .sp-rail-actions .control-button { min-height: 38px; padding-block: 6px; } body[data-mock-section="speaking"] .sp-option-media { height: clamp(100px, 34vh, 160px); } } /* ===== Fix round 1 · results density: one bar, bounded two-column area, one scroll region (the detail) ===== */ body[data-mock-section="speaking"][data-mock-view="results"] .page-header { padding: 10px 20px; border-radius: 18px; } body[data-mock-section="speaking"][data-mock-view="results"] .page-header .page-title { font-size: 22px; line-height: 1.25; } body[data-mock-section="speaking"][data-mock-view="results"] .page-header .page-subtitle { display: none; } body[data-mock-section="speaking"][data-mock-view="results"] .page-frame { padding-top: 10px; } body[data-mock-section="speaking"][data-mock-view="results"] .workspace-card { gap: 10px; } body[data-mock-section="speaking"][data-mock-view="results"] .page-body { min-height: 0; } body[data-mock-section="speaking"][data-mock-view="results"] .screen.sp-results { gap: 10px; } body[data-mock-section="speaking"] .sp-results-bar { gap: 6px 22px; padding: 8px 18px; } body[data-mock-section="speaking"] .sp-stats dd { font-size: 22px; } body[data-mock-section="speaking"] .sp-stats { gap: 4px 28px; } body[data-mock-section="speaking"] .sp-results-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } body[data-mock-section="speaking"] .sp-attempt-review { display: contents; } body[data-mock-section="speaking"] .sp-attempt-review:empty { display: none; } body[data-mock-section="speaking"] .sp-attempt-review .result-guest-actions { display: contents; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } body[data-mock-section="speaking"] .sp-attempt-review .results-actions { display: contents; } body[data-mock-section="speaking"] .sp-results-bar .control-button { min-height: 36px; padding: 6px 16px; font-size: 13.5px; } body[data-mock-section="speaking"] .sp-results-bar .result-save-status { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 4px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 12.5px; } body[data-mock-section="speaking"] .sp-results-bar .result-save-status p { margin: 0; } body[data-mock-section="speaking"] .sp-results-bar .result-save-status .control-button { margin: 0; min-height: 30px; padding: 3px 14px; } body[data-mock-section="speaking"] .sp-results-bar .result-save-status.is-error { color: var(--sp-bad); border-top-color: var(--sp-bad-line); } body[data-mock-section="speaking"] .sp-results-grid { height: clamp(520px, calc(100dvh - 300px), 720px); align-items: stretch; min-height: 0; } body[data-mock-section="speaking"] .sp-result-nav, body[data-mock-section="speaking"] .sp-result-detail { height: 100%; min-height: 0; overflow: hidden; } body[data-mock-section="speaking"] .sp-nav-list { position: static; flex: 1 1 auto; min-height: 0; overflow-y: auto; } body[data-mock-section="speaking"] .sp-nav-list li { flex: 1 1 0; min-height: 54px; display: flex; } body[data-mock-section="speaking"] .sp-nav-item { height: 100%; } body[data-mock-section="speaking"] .sp-result-detail { display: flex; flex-direction: column; } body[data-mock-section="speaking"] .sp-result-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 22px; } body[data-mock-section="speaking"] .sp-result-card > .score-line { padding-bottom: 10px; } body[data-mock-section="speaking"] .sp-result-title strong { font-size: 22px; } /* Report sections become tabs: one section at a time, so the detail stays short */ body[data-mock-section="speaking"] .speaking-report { gap: 10px; } body[data-mock-section="speaking"] .speaking-report-summary { gap: 4px 24px; align-items: center; } body[data-mock-section="speaking"] .speaking-report-level { font-size: 1.8rem; } body[data-mock-section="speaking"] .sp-report-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } body[data-mock-section="speaking"] .sp-report-tab { appearance: none; min-height: 34px; padding: 5px 14px; border: 1px solid var(--pill-border); border-radius: 999px; background: var(--card-surface-soft); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; } body[data-mock-section="speaking"] .sp-report-tab:hover { border-color: var(--sp-accent-line); background: var(--sidebar-button-hover-bg); } body[data-mock-section="speaking"] .sp-report-tab[aria-selected="true"] { border-color: var(--sp-accent); background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font-weight: 650; } body[data-mock-section="speaking"] .sp-report-tab:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-section { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-section > summary { display: none; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-section > .speaking-report-body { padding: 0; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-section { display: none; } body[data-mock-section="speaking"] .speaking-report[data-sp-tab="transcript"] > [data-report-section="transcript"], body[data-mock-section="speaking"] .speaking-report[data-sp-tab="criteria"] > [data-report-section="criteria"], body[data-mock-section="speaking"] .speaking-report[data-sp-tab="advice"] > [data-report-section="advice"], body[data-mock-section="speaking"] .speaking-report[data-sp-tab="sample"] > [data-report-section="sample"] { display: block; } @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-results-grid { height: auto; } body[data-mock-section="speaking"] .sp-result-nav, body[data-mock-section="speaking"] .sp-result-detail { height: auto; overflow: visible; } body[data-mock-section="speaking"] .sp-result-body { overflow: visible; padding: 14px 16px 20px; } body[data-mock-section="speaking"] .sp-nav-list { overflow-y: visible; overflow-x: auto; } body[data-mock-section="speaking"] .sp-nav-list li { flex: 0 0 auto; min-height: 0; display: block; } body[data-mock-section="speaking"] .sp-results-actions { justify-content: flex-start; margin-left: 0; } } /* ===== Fix round 1 · Task 5 fitted image slots (height derived in JS from the space actually left) ===== */ body[data-mock-section="speaking"][data-mock-view="exam"] .shell-main { height: calc(100dvh - var(--sp-banner-h, 0px)); } body[data-mock-section="speaking"] .sp-compare[data-sp-fit] { flex: 0 0 auto; min-height: 0; max-height: none; grid-template-rows: auto var(--sp-media-h) auto; } body[data-mock-section="speaking"] .sp-compare[data-sp-fit] .sp-option-media { min-height: 0; max-height: none; } body[data-mock-section="speaking"] .sp-compare[data-sp-fit][data-sp-ratio="4-3"] .sp-option-media, body[data-mock-section="speaking"] .sp-compare[data-sp-fit][data-sp-ratio="1-1"] .sp-option-media { height: calc(var(--sp-media-h) - 12px); align-self: center; justify-self: center; border: 1px solid var(--line); border-radius: 12px; } body[data-mock-section="speaking"] .sp-compare[data-sp-fit][data-sp-ratio="4-3"] .sp-option-media { width: min(calc(100% - 20px), calc((var(--sp-media-h) - 12px) * 1.3333)); } body[data-mock-section="speaking"] .sp-compare[data-sp-fit][data-sp-ratio="1-1"] .sp-option-media { width: min(calc(100% - 20px), calc(var(--sp-media-h) - 12px)); } body[data-mock-section="speaking"] .sp-option-pick, body[data-mock-section="speaking"] .sp-option-label { flex-shrink: 0; } /* ===== Fix round 1 · narrow windows: viewport-bound workspace with a prompt / live-transcript switch ===== */ body[data-mock-section="speaking"] .sp-pane-tabs { display: none; } @media (max-width: 900px) { body[data-mock-section="speaking"][data-mock-view="exam"] .shell-main { height: calc(100dvh - var(--sp-banner-h, 0px)); min-height: 0; overflow: hidden; } body[data-mock-section="speaking"][data-mock-view="exam"] .topbar { padding: 6px 10px 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .topbar-meta { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; } body[data-mock-section="speaking"][data-mock-view="exam"] .topbar-meta > * { flex: 0 0 auto; min-height: 32px; padding: 3px 11px; font-size: 12px; white-space: nowrap; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-frame { overflow: hidden; padding: 6px 10px 8px; } body[data-mock-section="speaking"][data-mock-view="exam"] .workspace-card { flex: 1 1 auto; min-height: 0; gap: 6px; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; } body[data-mock-section="speaking"] .sp-session { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 12px; gap: 2px 8px; border-radius: 16px; } body[data-mock-section="speaking"] .sp-session-id .sp-eyebrow { display: none; } body[data-mock-section="speaking"] .sp-session-title { font-size: 17px; } body[data-mock-section="speaking"] .sp-session-nav .part-chip { min-height: 0; padding: 3px 10px; font-size: 12px; flex-direction: row; gap: 5px; } body[data-mock-section="speaking"] .sp-session-nav .part-chip__meta { font-size: 10.5px; } body[data-mock-section="speaking"] .sp-workspace { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; } body[data-mock-section="speaking"] .sp-rail { display: contents; } body[data-mock-section="speaking"] .sp-phases { order: 0; padding: 0 2px; gap: 4px 12px; font-size: 12px; } body[data-mock-section="speaking"] .sp-clock { order: 1; position: static; box-shadow: none; backdrop-filter: none; padding: 6px 14px 8px; } body[data-mock-section="speaking"] .sp-selected, body[data-mock-section="speaking"] .sp-choose-list, body[data-mock-section="speaking"] .sp-rail .speaking-playback { order: 1; margin: 0; } body[data-mock-section="speaking"] .sp-pane-tabs { order: 2; display: flex; gap: 4px; padding: 3px; border: 1px solid var(--pill-border); border-radius: 999px; background: var(--card-surface-soft); } body[data-mock-section="speaking"] .sp-pane-tab { flex: 1 1 0; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; } body[data-mock-section="speaking"] .sp-pane-tab[aria-selected="true"] { background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font-weight: 650; box-shadow: inset 0 0 0 1px var(--sp-accent-line); } body[data-mock-section="speaking"] .sp-pane-tab:focus-visible { outline: 2px solid var(--button); outline-offset: 1px; } body[data-mock-section="speaking"] .sp-material { order: 3; flex: 1 1 0; min-height: 0; overflow: hidden; } body[data-mock-section="speaking"] .sp-material-head { padding: 8px 14px; flex-wrap: nowrap; } body[data-mock-section="speaking"] .sp-material-head .sp-eyebrow { display: none; } body[data-mock-section="speaking"] .sp-material-title { font-size: 19px; } body[data-mock-section="speaking"] .sp-material-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px 16px; } body[data-mock-section="speaking"] .sp-rail > .sp-transcript { order: 3; flex: 1 1 0; min-height: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); box-shadow: var(--shadow-card); } body[data-mock-section="speaking"] .sp-transcript-body { flex: 1 1 0; height: auto; min-height: 0; } body[data-mock-section="speaking"] .sp-workspace[data-sp-pane="transcript"] .sp-material { display: none; } body[data-mock-section="speaking"] .sp-workspace[data-sp-pane="material"] .sp-transcript { display: none; } body[data-mock-section="speaking"] .sp-rail-actions { order: 5; position: static; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; backdrop-filter: none; grid-template-columns: 1fr auto; } body[data-mock-section="speaking"] .sp-rail-actions .control-button { min-height: 44px; } body[data-mock-section="speaking"] .sp-compare { min-height: 0; max-height: none; } } /* Landscape phones: prompt / transcript take the left; clock, switch and actions stack in a narrow right column. */ @media (max-width: 900px) and (max-height: 520px) { body[data-mock-section="speaking"][data-mock-view="exam"] .topbar { display: none; } body[data-mock-section="speaking"][data-mock-view="exam"] .page-frame { padding: 4px 8px 6px; } body[data-mock-section="speaking"] .sp-session { grid-template-columns: auto minmax(0, 1fr) auto; padding: 4px 10px; } body[data-mock-section="speaking"] .sp-session-nav { grid-column: auto; grid-row: auto; justify-content: flex-start; min-width: 0; } body[data-mock-section="speaking"] .sp-session-nav .header-part-nav { flex-wrap: nowrap; overflow-x: auto; } body[data-mock-section="speaking"] .sp-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; } body[data-mock-section="speaking"] .sp-phases { display: none; } body[data-mock-section="speaking"] .sp-clock { grid-column: 2; grid-row: 1; grid-template-columns: auto; grid-template-areas: "time" "state" "bar"; justify-items: center; padding: 6px 10px 8px; } body[data-mock-section="speaking"] .sp-clock-time { font-size: 32px; } body[data-mock-section="speaking"] .sp-clock-sub { display: none; } body[data-mock-section="speaking"] .sp-selected { display: none; } body[data-mock-section="speaking"] .sp-pane-tabs { grid-column: 2; grid-row: 2; flex-direction: column; border-radius: 16px; } body[data-mock-section="speaking"] .sp-pane-tab { min-height: 32px; font-size: 12.5px; } body[data-mock-section="speaking"] .sp-material, body[data-mock-section="speaking"] .sp-rail > .sp-transcript { grid-column: 1; grid-row: 1 / span 4; } body[data-mock-section="speaking"] .sp-workspace:not(:has(.sp-pane-tabs)) .sp-material { grid-column: 1; } body[data-mock-section="speaking"] .sp-rail-actions { grid-column: 2; grid-row: 4; grid-template-columns: 1fr; } body[data-mock-section="speaking"] .sp-rail-actions .control-button { min-height: 38px; padding-inline: 10px; font-size: 13px; } body[data-mock-section="speaking"] .sp-option-media { height: auto; } } body[data-mock-section="speaking"][data-mock-view="results"] .screen.sp-results { padding: 0; margin-top: 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .topbar-actions > * { min-height: 32px; } body[data-mock-section="speaking"] .sp-compare[data-sp-fit][data-sp-ratio="fit"] .sp-option-media { height: auto; } /* Prompt text scales with the window so Task 5 cards keep room on shorter desktop heights */ body[data-mock-section="speaking"] .sp-source .speaking-prompt-paragraph { font-size: clamp(16px, calc(0.9vw + 0.55vh), 22px); line-height: 1.55; margin-bottom: .55em; } body[data-mock-section="speaking"] .sp-material-scroll { gap: 12px; padding-top: 14px; } @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-source .speaking-prompt-paragraph { font-size: 17px; } } body[data-mock-section="speaking"][data-mock-view="exam"] .mock-shell { min-height: calc(100dvh - var(--sp-banner-h, 0px)); } /* ===== Complete pages · material tools, image stage, Task 6 options, viewer, task picker ===== */ body[data-mock-section="speaking"] .sp-workspace { --sp-font-scale: 1; } body[data-mock-section="speaking"] .sp-source .speaking-prompt-paragraph { font-size: calc(clamp(16px, calc(0.9vw + 0.55vh), 22px) * var(--sp-font-scale, 1)); } @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-source .speaking-prompt-paragraph { font-size: calc(17px * var(--sp-font-scale, 1)); } } body[data-mock-section="speaking"] .sp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } body[data-mock-section="speaking"] .sp-font { display: inline-flex; align-items: center; border: 1px solid var(--pill-border); border-radius: 999px; overflow: hidden; } body[data-mock-section="speaking"] .sp-font .sp-seg { min-width: 40px; } body[data-mock-section="speaking"] .sp-font .sp-seg:disabled { opacity: .4; cursor: default; } body[data-mock-section="speaking"] .sp-font-value { min-width: 44px; text-align: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-zoom-open { appearance: none; min-height: 34px; padding: 4px 14px; border: 1px solid var(--pill-border); border-radius: 999px; background: var(--card-surface-soft); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; } body[data-mock-section="speaking"] .sp-zoom-open:hover { border-color: var(--sp-accent-line); background: var(--sidebar-button-hover-bg); } body[data-mock-section="speaking"] .sp-zoom-open:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; } /* Single-image tasks (3 / 4 / 8): the image stage takes the remaining height, never cropped or distorted */ body[data-mock-section="speaking"] .sp-material-scroll > .sp-stage { flex: 1 1 0; min-height: 240px; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--sp-inset); box-shadow: none; } body[data-mock-section="speaking"] .sp-stage-frame { flex: 1 1 0; min-height: 0; display: grid; place-items: center; } body[data-mock-section="speaking"] .sp-stage-box { position: relative; width: 100%; height: 100%; } body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="4-3"] .sp-stage-box { aspect-ratio: 4 / 3; width: auto; max-width: 100%; } body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="1-1"] .sp-stage-box { aspect-ratio: 1 / 1; width: auto; max-width: 100%; } body[data-mock-section="speaking"] .sp-zoom-hit { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; } body[data-mock-section="speaking"] .sp-zoom-hit:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; } body[data-mock-section="speaking"] .sp-stage .speaking-visual-image { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 6px; } body[data-mock-section="speaking"] .sp-stage figcaption { flex: 0 0 auto; text-align: center; color: var(--muted); font-size: 12px; } body[data-mock-section="speaking"] .sp-material-scroll > .speaking-visual.sp-stage .speaking-visual-image { max-height: none; } /* Task 6: EITHER / OR */ body[data-mock-section="speaking"] .sp-choose-one { display: grid; gap: 8px; margin: 6px 0 .8em; } body[data-mock-section="speaking"] .sp-choose-one-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } body[data-mock-section="speaking"] .sp-choose-one-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; } body[data-mock-section="speaking"] .sp-choice-card { padding: 12px 16px 6px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--card-surface); } body[data-mock-section="speaking"] .sp-choice-card .speaking-prompt-paragraph { margin: 4px 0 8px; } body[data-mock-section="speaking"] .sp-choice-tag { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font-size: 11px; font-weight: 700; letter-spacing: .08em; } body[data-mock-section="speaking"] .sp-choice-or { align-self: center; color: var(--muted); font-size: 12px; font-weight: 700; } @media (max-width: 700px) { body[data-mock-section="speaking"] .sp-choose-one-grid { grid-template-columns: minmax(0, 1fr); } body[data-mock-section="speaking"] .sp-choice-or { justify-self: center; } } /* Full-image viewer */ body[data-mock-section="speaking"] .sp-viewer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 10px; padding: 14px 20px; background: var(--bg); } body[data-mock-section="speaking"] .sp-viewer-head { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } body[data-mock-section="speaking"] .sp-viewer-head h2 { margin: 0; color: var(--ink-strong); font-size: 24px; font-weight: 800; letter-spacing: -.03em; } body[data-mock-section="speaking"] .sp-viewer-tools { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--pill-border); border-radius: 999px; overflow: hidden; background: var(--card-surface-soft); } body[data-mock-section="speaking"] .sp-viewer-zoom-value { min-width: 56px; text-align: center; color: var(--ink); font-size: 12.5px; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-viewer-stage { flex: 1 1 0; min-height: 0; display: flex; gap: 14px; padding: 12px; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); overflow: auto; } body[data-mock-section="speaking"] .sp-viewer-item { flex: 1 1 0; min-width: 0; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } body[data-mock-section="speaking"] .sp-viewer-frame { flex: 1 1 0; min-height: 0; display: grid; place-items: center; overflow: auto; } body[data-mock-section="speaking"] .sp-viewer-item img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; } body[data-mock-section="speaking"] .sp-viewer-item figcaption { flex: 0 0 auto; text-align: center; color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-viewer-stage[data-sp-zoom]:not([data-sp-zoom="fit"]) .sp-viewer-frame { place-items: start center; } body[data-mock-section="speaking"] .sp-viewer-stage[data-sp-zoom]:not([data-sp-zoom="fit"]) .sp-viewer-item { flex: 0 0 auto; min-width: min-content; } body[data-mock-section="speaking"] .sp-viewer-stage[data-sp-zoom]:not([data-sp-zoom="fit"]) img { max-width: none; max-height: none; zoom: var(--sp-zoom, 1); } body[data-mock-section="speaking"] .sp-viewer-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 18px; border: 1px solid var(--card-border); border-radius: var(--sp-radius); background: var(--card-surface); box-shadow: var(--shadow-card); } body[data-mock-section="speaking"] .sp-viewer-time { color: var(--ink-strong); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-viewer-note { flex: 1 1 auto; color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-viewer-bar .control-button { width: auto; min-height: 40px; margin-left: auto; } @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-viewer { padding: 8px 10px; gap: 6px; } body[data-mock-section="speaking"] .sp-viewer-head h2 { font-size: 18px; } body[data-mock-section="speaking"] .sp-viewer-stage { flex-direction: column; padding: 8px; } body[data-mock-section="speaking"] .sp-viewer-note { display: none; } body[data-mock-section="speaking"] .sp-viewer-time { font-size: 22px; } } @media (max-width: 900px) and (max-height: 520px) { body[data-mock-section="speaking"] .sp-viewer-stage { flex-direction: row; } body[data-mock-section="speaking"] .sp-viewer-head .sp-eyebrow { display: none; } } /* Task picker: a button + bottom sheet on narrow windows, chips on desktop */ body[data-mock-section="speaking"] .sp-picker-open { display: none; } @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-session-nav { display: none; } body[data-mock-section="speaking"] .sp-picker-open { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 14px; border: 1px solid var(--pill-border); border-radius: 999px; background: var(--card-surface-soft); color: var(--ink-strong); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; } body[data-mock-section="speaking"] .sp-session { grid-template-columns: minmax(0, 1fr) auto auto; } } body[data-mock-section="speaking"] .sp-sheet-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; padding: 12px; background: rgba(20, 24, 35, .46); backdrop-filter: blur(3px); } body[data-mock-section="speaking"] .sp-sheet { width: min(480px, 100%); max-height: calc(100dvh - 24px); overflow: auto; padding: 18px 20px 16px; border: 1px solid var(--card-border); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-panel); display: grid; gap: 10px; } body[data-mock-section="speaking"] .sp-sheet h2 { margin: 0; color: var(--ink-strong); font-size: 24px; font-weight: 800; } body[data-mock-section="speaking"] .sp-sheet-list { list-style: none; margin: 0; padding: 0; } body[data-mock-section="speaking"] .sp-sheet-item { appearance: none; width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } body[data-mock-section="speaking"] .sp-sheet-item:focus-visible { outline: 2px solid var(--button); outline-offset: -2px; } body[data-mock-section="speaking"] .sp-sheet-no { color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-sheet-name { color: var(--ink-strong); font-size: 15px; font-weight: 600; } body[data-mock-section="speaking"] .sp-sheet-state { padding: 2px 10px; border: 1px solid var(--pill-border); border-radius: 999px; font-size: 11.5px; color: var(--muted); white-space: nowrap; } body[data-mock-section="speaking"] .sp-sheet-item.is-current .sp-sheet-state { border-color: var(--sp-accent); color: var(--sidebar-button-active-text); background: var(--sp-accent-soft); } body[data-mock-section="speaking"] .sp-sheet-item.is-done .sp-sheet-state { border-color: var(--sp-ok-line); color: var(--sp-ok); } body[data-mock-section="speaking"] .sp-sheet .sp-actions { justify-content: flex-end; } body[data-mock-section="speaking"] .sp-stage-frame { position: relative; display: block; } body[data-mock-section="speaking"] .sp-stage-box { position: absolute; inset: 0; width: auto; height: auto; } body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="4-3"] .sp-stage-box, body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="1-1"] .sp-stage-box { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; max-width: 100%; } body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="4-3"] .sp-stage-box { aspect-ratio: 4 / 3; } body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="1-1"] .sp-stage-box { aspect-ratio: 1 / 1; } body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="4-3"] .sp-stage-box, body[data-mock-section="speaking"] .sp-stage[data-sp-ratio="1-1"] .sp-stage-box { border: 1px solid var(--line); border-radius: 12px; } body[data-mock-section="speaking"] .sp-viewer-stage[data-sp-zoom="fit"] .sp-viewer-frame { position: relative; display: block; overflow: hidden; } body[data-mock-section="speaking"] .sp-viewer-stage[data-sp-zoom="fit"] .sp-viewer-item img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; } body[data-mock-section="speaking"] .sp-material-scroll > .sp-stage { place-items: stretch; align-items: stretch; } body[data-mock-section="speaking"] .sp-material-scroll > .speaking-visual.sp-stage .speaking-visual-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; } /* ===== Complete pages · dialogs, error guidance, save warnings ===== */ body[data-mock-section="speaking"] [hidden] { display: none !important; } .sp-modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(20, 24, 35, .5); backdrop-filter: blur(4px); } .sp-modal { width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 14px; padding: 26px 30px 24px; border: 1px solid var(--card-border); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-panel); color: var(--ink); } .sp-modal .sp-eyebrow { display: block; margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .sp-modal h2 { margin: 0; color: var(--ink-strong); font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; } .sp-modal-lead { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; } .sp-modal .sp-note { margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sp-inset, rgba(246,241,234,.7)); color: var(--muted); font-size: 13px; line-height: 1.55; } .sp-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .sp-modal-actions .control-button { width: auto; } .sp-modal .sp-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sp-modal .sp-status { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; } .sp-modal .sp-status strong { color: var(--ink-strong); font-size: 15px; } .sp-modal .sp-status span { color: var(--muted); font-size: 13px; } .sp-modal .sp-status--bad { border-color: var(--sp-bad-line, rgba(176,66,63,.38)); background: var(--sp-bad-soft, rgba(176,66,63,.09)); } .sp-modal .sp-status--bad strong { color: var(--sp-bad, #b0423f); } .sp-task-status { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sp-task-status li { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; } .sp-task-status li span { color: var(--muted); font-size: 12px; } .sp-task-status li strong { font-size: 13px; color: var(--ink-strong); } .sp-task-status li.is-ok strong { color: var(--sp-ok, #2d8a52); } .sp-task-status li.is-bad { border-color: var(--sp-bad-line, rgba(176,66,63,.38)); } .sp-task-status li.is-bad strong { color: var(--sp-bad, #b0423f); } .sp-task-status li.is-warn strong, .sp-task-status li.is-wait strong { color: var(--sidebar-button-active-text); } .sp-task-status li.is-idle strong { color: var(--muted); font-weight: 500; } .sp-resume-list { list-style: none; margin: 0; padding: 0; } .sp-resume-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); } .sp-resume-list li:last-child { border-bottom: 0; } .sp-pill { padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--sp-inset, rgba(246,241,234,.7)); color: var(--muted); font-size: 12.5px; white-space: nowrap; } .sp-pill.is-ok { border-color: var(--sp-ok-line, rgba(45,138,82,.38)); color: var(--sp-ok, #2d8a52); } .sp-save-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .sp-save-row { display: grid; gap: 8px; } .sp-save-audio { width: 100%; height: 40px; } @media (max-width: 560px) { .sp-modal { padding: 20px 18px 18px; border-radius: 22px; } .sp-modal h2 { font-size: 23px; } .sp-task-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body[data-mock-section="speaking"] .sp-help-steps { margin: 8px 0 0; padding-left: 20px; color: var(--ink); font-size: 13px; line-height: 1.6; } body[data-mock-section="speaking"] .sp-help-steps li { margin: 2px 0; } body[data-mock-section="speaking"] .sp-hint.is-warn { color: var(--sp-bad); } body[data-mock-section="speaking"] .sp-check-card .sp-trial .sp-status { margin-top: 4px; } /* Results: persistent save reminder */ body[data-mock-section="speaking"] .sp-save-warning { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 12px; border: 1px solid var(--sp-bad-line); border-radius: 12px; background: var(--sp-bad-soft); color: var(--sp-bad); font-size: 13px; } body[data-mock-section="speaking"] .sp-save-warning strong { font-weight: 650; } body[data-mock-section="speaking"] .sp-save-warning .control-button { min-height: 30px; padding: 3px 14px; font-size: 12.5px; width: auto; } /* ===== Complete pages · review: transcript tab columns, versions, AI pending / error, target sample ===== */ body[data-mock-section="speaking"] .sp-tr-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); gap: 20px; align-items: start; } body[data-mock-section="speaking"] .sp-tr-main { display: grid; gap: 10px; min-width: 0; } body[data-mock-section="speaking"] .sp-tr-side { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--sp-inset); align-content: start; } body[data-mock-section="speaking"] .sp-tr-side:empty { display: none; } body[data-mock-section="speaking"] .sp-tr-side .speaking-report-section { border: 1px solid var(--line); border-radius: 12px; background: var(--card-surface); } body[data-mock-section="speaking"] .sp-tr-side .speaking-report-section > summary { padding: 10px 14px; min-height: 40px; font-size: 14px; } body[data-mock-section="speaking"] .sp-tr-side .speaking-report-body { padding: 0 14px 12px; } body[data-mock-section="speaking"] .sp-versions h4 { margin: 0 0 6px; color: var(--ink-strong); font-size: 14px; font-weight: 700; } body[data-mock-section="speaking"] .sp-versions ul { list-style: none; margin: 0 0 6px; padding: 0; } body[data-mock-section="speaking"] .sp-versions li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; } body[data-mock-section="speaking"] .sp-versions li + li { margin-top: 3px; } body[data-mock-section="speaking"] .sp-versions li.is-current { border-color: var(--sp-accent-line); background: var(--sp-accent-soft); font-weight: 650; } body[data-mock-section="speaking"] .sp-versions li strong { color: var(--ink-strong); } body[data-mock-section="speaking"] .sp-tr-main .speaking-report-transcript { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); line-height: 1.7; } body[data-mock-section="speaking"] .sp-tr-main textarea { min-height: 170px; } @media (max-width: 1100px) { body[data-mock-section="speaking"] .sp-tr-grid { grid-template-columns: minmax(0, 1fr); } } body[data-mock-section="speaking"] .speaking-ai-panel.is-loading, body[data-mock-section="speaking"] .speaking-ai-panel.is-error { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border-radius: 16px; } body[data-mock-section="speaking"] .speaking-ai-panel.is-error { grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--sp-bad-line); background: var(--sp-bad-soft); } body[data-mock-section="speaking"] .speaking-ai-panel.is-loading { border: 1px solid var(--sp-accent-line); background: var(--sp-accent-soft); } body[data-mock-section="speaking"] .sp-ai-copy strong { display: block; color: var(--ink-strong); font-size: 16px; } body[data-mock-section="speaking"] .speaking-ai-panel.is-error .sp-ai-copy strong { color: var(--sp-bad); } body[data-mock-section="speaking"] .sp-ai-copy p { margin: 3px 0 0; color: var(--ink); font-size: 14px; line-height: 1.55; } body[data-mock-section="speaking"] .sp-ai-copy .small-note { color: var(--muted); font-size: 12.5px; } body[data-mock-section="speaking"] .sp-pulse { width: 14px; height: 14px; margin-top: 4px; border-radius: 999px; background: var(--sp-accent); animation: sp-pulse 1.4s ease-in-out infinite; } @keyframes sp-pulse { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } } @media (prefers-reduced-motion: reduce) { body[data-mock-section="speaking"] .sp-pulse { animation: none; } } body[data-mock-section="speaking"] .speaking-ai-panel.is-error .results-actions { margin: 0; } body[data-mock-section="speaking"] .speaking-report[data-sp-tab="sample"] .speaking-report-target { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--sp-inset); } body[data-mock-section="speaking"] .speaking-report[data-sp-tab="sample"] [data-report-section="sample"] .speaking-report-body > p, body[data-mock-section="speaking"] .speaking-report[data-sp-tab="sample"] [data-report-section="sample"] .speaking-report-body > div { line-height: 1.75; } .sp-modal :focus-visible, .sp-sheet :focus-visible { outline: 2px solid var(--button); outline-offset: 2px; } body[data-mock-section="speaking"] .sp-help-steps { list-style: decimal; } /* Global notices never cover the recording controls on narrow windows */ @media (max-width: 900px) { body[data-mock-section="speaking"][data-mock-view="exam"] .toast-stack { top: 8px; bottom: auto; left: 8px; right: 8px; max-width: none; z-index: 70; } body[data-mock-section="speaking"][data-mock-view="exam"] .celpip-analytics-settings { display: none; } } @media (max-width: 900px) and (max-height: 520px) { body[data-mock-section="speaking"] .sp-tools .sp-font, body[data-mock-section="speaking"] .sp-tools .sp-segment { display: none; } body[data-mock-section="speaking"] .sp-material-head { padding: 6px 12px; } body[data-mock-section="speaking"] .sp-material-title { font-size: 17px; } } /* ===== V2 · workspace: 3-column layout at ≥2200 px, player overflow fix, workspace max-width cap ===== */ /* Cap the workspace so 5120-wide desktops don't stretch content to illegible line widths. */ body[data-mock-section="speaking"][data-mock-view="exam"] .page-frame { max-width: 3400px; margin-inline: auto; width: 100%; } /* Player track must shrink inside narrow rails — override mock-exam.css grid columns. */ body[data-mock-section="speaking"] .speaking-audio-controls { min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; } body[data-mock-section="speaking"] .speaking-audio-player { min-width: 0; } /* Compact horizontal clock row at medium-wide sizes (1100–2199 px): frees more height for the transcript. */ @media (min-width: 1101px) and (max-width: 2199px) { /* Fix 2-col proportion: ~40% material / ~60% rail instead of the base 1fr+400px (≈70/30). */ body[data-mock-section="speaking"] .sp-workspace { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr); } body[data-mock-section="speaking"] .sp-clock { display: flex; align-items: center; gap: 14px; justify-content: flex-start; text-align: left; padding: 10px 18px 11px; min-width: 0; overflow: hidden; } /* Allow clock-time to shrink so the clock row fits its container at 1440. */ body[data-mock-section="speaking"] .sp-clock-time { font-size: clamp(28px, 3vw, 44px); flex-shrink: 1; min-width: 0; } body[data-mock-section="speaking"] .sp-clock-state { order: -1; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body[data-mock-section="speaking"] .sp-clock-sub { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-mock-section="speaking"] .sp-clock-bar { flex: 0 0 48px; height: 5px; margin-top: 0; } } /* 3-column workspace at ≥2200 px: material | transcript+controls (sp-rail spans cols 2–3, internally split). */ @media (min-width: 2200px) { /* 3 workspace columns; sp-rail spans cols 2+3 so no column is ever empty. */ body[data-mock-section="speaking"] .sp-workspace { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.2fr) minmax(360px, 420px); } /* sp-rail spans across the transcript zone (col 2) and the controls zone (col 3). */ body[data-mock-section="speaking"] .sp-panel.sp-rail { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); column-gap: var(--sp-gap); overflow: hidden; padding: 0; } /* Transcript: left sub-column (transcript zone), spans all auto rows so right-column items don't push it down. */ body[data-mock-section="speaking"] .sp-rail > .sp-transcript { grid-column: 1; grid-row: 1 / span 20; /* span across all auto-created rows in the right column */ align-self: stretch; overflow-y: auto; min-height: 200px; margin: 14px 0 14px 20px; } /* Task 5 choose-list also occupies the left sub-column. */ body[data-mock-section="speaking"] .sp-rail > .sp-choose-list { grid-column: 1; grid-row: 1 / span 20; align-self: stretch; } /* All other rail children go to the right sub-column (controls zone). */ body[data-mock-section="speaking"] .sp-rail > :not(.sp-transcript):not(.sp-choose-list) { grid-column: 2; } body[data-mock-section="speaking"] .sp-clock { display: block; padding: 12px 20px 14px; } body[data-mock-section="speaking"] .sp-clock-time { font-size: clamp(36px, 2.8vw, 50px); } body[data-mock-section="speaking"] .sp-transcript-body { font-size: 16.5px; line-height: 1.7; } } /* ===== V2 · results: solo (1 submitted task), compact switcher, 3/2/1-col report ===== */ /* All report sections are always visible — no mutual-exclusion tab hiding. */ body[data-mock-section="speaking"] .speaking-report > .speaking-report-section { display: block; } /* Tab bar becomes a jump-to nav; the selected tab is still highlighted for orientation. */ body[data-mock-section="speaking"] .sp-report-tabs { gap: 6px 8px; } /* Solo result: the detail card fills the full width, no left nav column. */ body[data-mock-section="speaking"] .sp-results--solo .sp-results-grid { display: none; } body[data-mock-section="speaking"] .sp-result-detail--solo { display: flex; flex-direction: column; } body[data-mock-section="speaking"] .sp-solo-head { border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-result-detail--solo .sp-result-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 28px 28px; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-results--solo { display: flex; flex-direction: column; gap: var(--sp-gap); } /* Compact top switcher for 2+ submitted tasks. */ body[data-mock-section="speaking"] .sp-switcher { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; } body[data-mock-section="speaking"] .sp-sw-item { appearance: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px; padding: 8px 14px; border: 1px solid var(--pill-border); border-radius: 14px; background: var(--card-surface-soft); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; } body[data-mock-section="speaking"] .sp-sw-item:hover { border-color: var(--sp-accent-line); background: var(--sidebar-button-hover-bg); } body[data-mock-section="speaking"] .sp-sw-item.is-active { border-color: var(--sp-accent); background: var(--sp-accent-soft); color: var(--sidebar-button-active-text); font-weight: 650; } body[data-mock-section="speaking"] .sp-sw-item:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; } body[data-mock-section="speaking"] .sp-sw-no { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } body[data-mock-section="speaking"] .sp-sw-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } body[data-mock-section="speaking"] .sp-sw-state { font-size: 11px; } body[data-mock-section="speaking"] .sp-sw-item--ok .sp-sw-state { color: var(--sp-ok); } body[data-mock-section="speaking"] .sp-sw-item--bad .sp-sw-state { color: var(--sp-bad); } body[data-mock-section="speaking"] .sp-sw-item--wait .sp-sw-state { color: var(--sidebar-button-active-text); } /* When switcher is present (not solo), full-width single detail area replaces the grid. */ body[data-mock-section="speaking"] .sp-switcher ~ .sp-result-detail { width: 100%; } body[data-mock-section="speaking"] .sp-switcher ~ .sp-result-detail .sp-result-body { max-width: none; overflow-y: auto; overscroll-behavior: contain; padding: 20px 28px 28px; } body[data-mock-section="speaking"][data-mock-view="results"] .screen.sp-results:not(.sp-results--solo) .sp-results-grid { display: none; } /* Report content: summary/bands/tabs always at the top (rows 1-3), then optional state notices (rows 4-6), then the three content cards on the same row (row 7), criteria below (row 8), and feedback controls last (row 9). Every direct child needs an explicit grid-row — without it, CSS auto-placement puts summary/bands/tabs in the first free full-width row (after the pinned section rows). */ @media (min-width: 1300px) { body[data-mock-section="speaking"] .speaking-report { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; align-items: start; } /* Default: span full width */ body[data-mock-section="speaking"] .speaking-report > * { grid-column: 1 / -1; } /* Rows 1–3: score header (always present) */ body[data-mock-section="speaking"] .speaking-report > .speaking-report-summary { grid-column: 1 / -1; grid-row: 1; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-bands { grid-column: 1 / -1; grid-row: 2; } body[data-mock-section="speaking"] .speaking-report > .sp-report-tabs { grid-column: 1 / -1; grid-row: 3; } /* Rows 4–6: optional state notices — separate rows so they never overlap */ body[data-mock-section="speaking"] .speaking-report > .speaking-report-error { grid-column: 1 / -1; grid-row: 4; } body[data-mock-section="speaking"] .speaking-report > [role="status"] { grid-column: 1 / -1; grid-row: 5; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-notice { grid-column: 1 / -1; grid-row: 6; } /* Row 7: transcript + advice + sample on the same row */ body[data-mock-section="speaking"] .speaking-report > [data-report-section="transcript"] { grid-column: 1; grid-row: 7; } body[data-mock-section="speaking"] .speaking-report > [data-report-section="advice"] { grid-column: 2; grid-row: 7; align-self: start; } body[data-mock-section="speaking"] .speaking-report > [data-report-section="sample"] { grid-column: 3; grid-row: 7; align-self: start; } /* Row 8: score evidence detail */ body[data-mock-section="speaking"] .speaking-report > [data-report-section="criteria"] { grid-column: 1; grid-row: 8; } /* Row 9: rating feedback controls */ body[data-mock-section="speaking"] .speaking-report > .ai-feedback-controls { grid-column: 1 / -1; grid-row: 9; } /* sp-tr-grid is too narrow at 1300–2100px for 2 sub-columns */ body[data-mock-section="speaking"] [data-report-section="transcript"] .sp-tr-grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 700px) and (max-width: 1299px) { body[data-mock-section="speaking"] .speaking-report { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; } body[data-mock-section="speaking"] .speaking-report > * { grid-column: 1 / -1; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-summary { grid-column: 1 / -1; grid-row: 1; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-bands { grid-column: 1 / -1; grid-row: 2; } body[data-mock-section="speaking"] .speaking-report > .sp-report-tabs { grid-column: 1 / -1; grid-row: 3; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-error { grid-column: 1 / -1; grid-row: 4; } body[data-mock-section="speaking"] .speaking-report > [role="status"] { grid-column: 1 / -1; grid-row: 5; } body[data-mock-section="speaking"] .speaking-report > .speaking-report-notice { grid-column: 1 / -1; grid-row: 6; } body[data-mock-section="speaking"] .speaking-report > [data-report-section="transcript"] { grid-column: 1; grid-row: 7; } body[data-mock-section="speaking"] .speaking-report > [data-report-section="advice"] { grid-column: 2; grid-row: 7; align-self: start; } body[data-mock-section="speaking"] .speaking-report > [data-report-section="criteria"] { grid-column: 1; grid-row: 8; } body[data-mock-section="speaking"] .speaking-report > [data-report-section="sample"] { grid-column: 1 / -1; grid-row: 9; } body[data-mock-section="speaking"] .speaking-report > .ai-feedback-controls { grid-column: 1 / -1; grid-row: 10; } } /* At ≥2100px the transcript column is wide enough (~700px+) for sp-tr-grid 2-col sub-layout. */ @media (min-width: 2100px) { body[data-mock-section="speaking"] [data-report-section="transcript"] .sp-tr-grid { grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); } } /* Results page: remove the old fixed-height grid and use a single scrollable detail card. */ body[data-mock-section="speaking"] .sp-results-grid { height: auto; } body[data-mock-section="speaking"][data-mock-view="results"] .screen.sp-results { max-width: 3400px; margin-inline: auto; } /* Results detail scrolls the whole page on narrow windows. */ @media (max-width: 900px) { body[data-mock-section="speaking"] .sp-switcher { gap: 6px; } body[data-mock-section="speaking"] .sp-sw-item { min-width: 68px; padding: 6px 10px; font-size: 12px; } body[data-mock-section="speaking"] .sp-sw-name { max-width: 90px; } body[data-mock-section="speaking"] .sp-result-detail--solo .sp-result-body, body[data-mock-section="speaking"] .sp-switcher ~ .sp-result-detail .sp-result-body { padding: 14px 16px 20px; overflow-y: visible; } } /* User-adjustable exam panels; result-page styles are intentionally untouched. */ body[data-mock-section="speaking"] .sp-divider { display: none; } @media (min-width: 1101px) { body[data-mock-section="speaking"][data-mock-view="exam"] .sp-workspace { grid-template-columns: minmax(300px, min(calc((100% - 18px) * var(--sp-split, .394)), calc(100% - 398px))) 18px minmax(380px, 1fr); column-gap: 0; } body[data-mock-section="speaking"][data-mock-view="exam"] .sp-workspace > .sp-material { grid-column: 1; } body[data-mock-section="speaking"][data-mock-view="exam"] .sp-workspace > .sp-panel.sp-rail { grid-column: 3; } body[data-mock-section="speaking"] .sp-divider { display: grid; place-items: center; grid-column: 2; min-width: 0; touch-action: none; cursor: col-resize; color: var(--muted); border-radius: 8px; outline-offset: -2px; } body[data-mock-section="speaking"] .sp-divider span { display: grid; place-items: center; height: 64px; width: 8px; border-radius: 8px; background: var(--line); font-size: 18px; } body[data-mock-section="speaking"] .sp-divider:hover span, body[data-mock-section="speaking"] .sp-divider:focus-visible span, body[data-mock-section="speaking"] .sp-is-resizing .sp-divider span { background: var(--button); color: var(--surface); } body[data-mock-section="speaking"] .sp-divider:focus-visible { outline: 2px solid var(--button); } body[data-mock-section="speaking"] .sp-is-resizing { user-select: none; cursor: col-resize; } } @media (min-width: 2200px) { body[data-mock-section="speaking"][data-mock-view="exam"] .sp-workspace { --sp-default-split: .32; grid-template-columns: minmax(300px, min(calc((100% - 18px) * var(--sp-split, .32)), calc(100% - 398px))) 18px minmax(380px, 1fr); } body[data-mock-section="speaking"][data-mock-view="exam"] .sp-workspace > .sp-panel.sp-rail { grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); } } body[data-mock-section="speaking"][data-mock-view="exam"] .sp-option-facts h3 { font-size: calc(16px * var(--sp-font-scale, 1)); } body[data-mock-section="speaking"][data-mock-view="exam"] .sp-option-facts li { font-size: calc(14px * var(--sp-font-scale, 1)); } /* V3 report: a single document scroll, with independent content cards. */ body[data-mock-section="speaking"][data-mock-view="results"] { overflow-y: auto; } body[data-mock-section="speaking"][data-mock-view="results"] .shell-main, body[data-mock-section="speaking"][data-mock-view="results"] .page-frame, body[data-mock-section="speaking"][data-mock-view="results"] .workspace-card, body[data-mock-section="speaking"][data-mock-view="results"] .page-body, body[data-mock-section="speaking"][data-mock-view="results"] .sp-results, body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-detail, body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-body { height: auto; max-height: none; min-height: 0; overflow: visible; overscroll-behavior: auto; } body[data-mock-section="speaking"][data-mock-view="results"] .page-frame { max-width: 2800px; width: 100%; margin-inline: auto; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-detail { background: transparent; border: 0; border-radius: 0; box-shadow: none; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-detail .sp-result-body { padding: 0; display: block; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-card { gap: 14px; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-card > .score-line { padding: 6px 0 0; border: 0; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-title strong { font-size: 23px; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-results { container-type: inline-size; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-switcher { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-sw-item { min-width: 0; padding: 8px 12px; align-items: start; font-size: 12px; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-sw-name { max-width: 100%; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="2"] .sp-switcher, body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="3"] .sp-switcher { display: flex; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="2"] .sp-sw-item, body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="3"] .sp-sw-item { min-width: 130px; } /* V6 approved report: row-major cards and a compact, persistent action bar. */ body[data-mock-section="speaking"][data-mock-view="results"] .page-frame { max-width: 2400px; } body[data-mock-section="speaking"][data-mock-view="results"] #pageHeader:empty, body[data-mock-section="speaking"][data-mock-view="results"] #pageFooter:empty { display: none; } body[data-mock-section="speaking"][data-mock-view="results"] #pageHeader { padding: 0; border: 0; background: transparent; box-shadow: none; } body[data-mock-section="speaking"][data-mock-view="results"] .screen.sp-results { display: grid; gap: 14px; max-width: none; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-result-card { background: transparent; border: 0; padding: 0; box-shadow: none; min-width: 0; display: block; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-results .sp-result-detail .sp-result-body { overflow: visible !important; overscroll-behavior: auto !important; height: auto !important; max-height: none !important; } body[data-mock-section="speaking"] .speaking-report.sp-review-v6 { display: block; margin: 0; padding: 0; border: 0; background: transparent; } body[data-mock-section="speaking"] .sp-results-command { position: sticky; top: 0; z-index: 15; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; background: var(--card-surface); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--shadow-card); } body[data-mock-section="speaking"] .sp-command-identity { min-width: 0; } body[data-mock-section="speaking"] .sp-command-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } body[data-mock-section="speaking"] .sp-command-title h1 { margin: 0; font-size: 25px; line-height: 1.3; color: var(--ink-strong); font-weight: 800; letter-spacing: -.025em; } body[data-mock-section="speaking"] .sp-command-title > .status-badge { font-size: 11px; min-height: 24px; padding: 3px 8px; color: var(--sp-ok); background: var(--sp-ok-soft); } body[data-mock-section="speaking"] .sp-command-identity .sp-stats { gap: 16px; margin: 7px 0 0; } body[data-mock-section="speaking"] .sp-command-identity .sp-stats > div { gap: 5px; padding: 0; border: 0; } body[data-mock-section="speaking"] .sp-command-identity .sp-stats dt { font-size: 11px; } body[data-mock-section="speaking"] .sp-command-identity .sp-stats dd { font-size: 15px; } body[data-mock-section="speaking"] .sp-command-identity .sp-stats dd span { font-size: 12px; } body[data-mock-section="speaking"] .sp-command-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; } body[data-mock-section="speaking"] .sp-command-actions > .control-button { min-width: 0; min-height: 38px; font-size: 12px; padding: 8px 14px; } body[data-mock-section="speaking"] .sp-report-menu { position: relative; } body[data-mock-section="speaking"] .sp-report-menu > summary { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; list-style: none; border: 1px solid var(--pill-border); border-radius: 50%; font-size: 20px; } body[data-mock-section="speaking"] .sp-report-menu > summary::-webkit-details-marker { display: none; } body[data-mock-section="speaking"] .sp-report-menu nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 220px; padding: 6px; background: var(--card-surface); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow-card); display: grid; } body[data-mock-section="speaking"] .sp-report-menu button { border: 0; background: transparent; color: var(--ink); border-radius: 9px; padding: 11px 12px; text-align: left; font: inherit; font-size: 13px; cursor: pointer; } body[data-mock-section="speaking"] .sp-report-menu button:hover { color: var(--button-dark); background: var(--sp-accent-soft); } body[data-mock-section="speaking"] .sp-results-notices { display: contents; } body[data-mock-section="speaking"] .sp-results-notices .sp-attempt-review:empty { display: none; } body[data-mock-section="speaking"] .sp-results-notices > :not(:empty) { min-width: 0; } body[data-mock-section="speaking"][data-mock-view="results"] .sp-switcher { grid-template-columns: repeat(8, minmax(0, 1fr)); } body[data-mock-section="speaking"][data-mock-view="results"] .sp-sw-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 10px 11px; } body[data-mock-section="speaking"] .sp-sw-state { font-size: 11px; white-space: nowrap; } body[data-mock-section="speaking"] .sp-report-overview { padding: 18px 22px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-surface); box-shadow: var(--shadow-card); margin-bottom: 16px; } body[data-mock-section="speaking"] .sp-overview-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; } body[data-mock-section="speaking"] .sp-overview-heading { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } body[data-mock-section="speaking"] .sp-overview-heading .sp-eyebrow { margin-bottom: 4px; } body[data-mock-section="speaking"] .sp-overview-heading h2 { margin: 0; color: var(--ink-strong); font-size: 25px; font-weight: 800; line-height: 1.3; } body[data-mock-section="speaking"] .sp-overview-heading .speaking-report-level { font-size: 31px; white-space: nowrap; line-height: 1.2; color: var(--button-dark); border-left: 1px solid var(--line); padding-left: 18px; } body[data-mock-section="speaking"] .sp-overview-heading .result-chip-row .timing-pill { font-size: 11px; } body[data-mock-section="speaking"] .sp-feedback-compact { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0; margin: 0; border: 0; background: transparent; } body[data-mock-section="speaking"] .sp-feedback-compact > .small-note { white-space: nowrap; margin: 0; font-size: 12px; } body[data-mock-section="speaking"] .sp-feedback-compact .results-actions { margin: 0; gap: 5px; } body[data-mock-section="speaking"] .sp-feedback-compact .control-button { font-size: 11px; min-height: 32px; padding: 6px 11px; } body[data-mock-section="speaking"] .sp-overview-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; border-top: 1px solid var(--line); margin-top: 15px; padding-top: 14px; } body[data-mock-section="speaking"] .sp-overview-summary { margin: 0; line-height: 1.75; font-size: 14px; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-bands { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; gap: 8px; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-band { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--sp-inset); min-width: 0; gap: 8px; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-band span { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-band strong { font-size: 23px; color: var(--ink-strong); } body[data-mock-section="speaking"] .sp-review-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; } body[data-mock-section="speaking"] .sp-report-card { min-width: 0; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-surface); box-shadow: var(--shadow-card); scroll-margin-top: 125px; overflow: clip; } body[data-mock-section="speaking"] .sp-report-card:focus { outline: none; } body[data-mock-section="speaking"] .sp-report-card:focus-visible { outline: 2px solid var(--button); outline-offset: 3px; } body[data-mock-section="speaking"] .sp-report-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-report-card-head > div { display: flex; align-items: center; gap: 10px; min-width: 0; } body[data-mock-section="speaking"] .sp-report-card-head h3 { margin: 0; color: var(--ink-strong); font-size: 17px; line-height: 1.4; } body[data-mock-section="speaking"] .sp-report-number { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--sp-accent-soft); color: var(--button-dark); font-weight: 750; font-size: 11px; } body[data-mock-section="speaking"] .sp-report-card-body { padding: 20px; min-width: 0; overflow-wrap: anywhere; } body[data-mock-section="speaking"] .sp-report-card-body > :first-child { margin-top: 0; } body[data-mock-section="speaking"] .sp-report-card .speaking-report-transcript { padding: 14px 16px; line-height: 1.85; font-size: 14px; background: var(--sp-inset); border: 1px solid var(--line); border-radius: 12px; max-height: none; overflow: visible; white-space: pre-wrap; } body[data-mock-section="speaking"] .sp-report-card .speaking-audio-player { padding: 0; background: transparent; border: 0; box-shadow: none; } body[data-mock-section="speaking"] .sp-report-card .speaking-audio-controls { gap: 8px; } body[data-mock-section="speaking"] .sp-report-card .speaking-audio-controls .control-button { font-size: 12px; padding: 8px 12px; min-height: 38px; } body[data-mock-section="speaking"] .sp-report-card .speaking-audio-time { font-size: 11px; } body[data-mock-section="speaking"] .sp-report-card .results-actions .control-button { font-size: 12px; min-width: 0; min-height: 36px; padding: 7px 12px; } body[data-mock-section="speaking"] .sp-report-card .ai-criteria-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; } body[data-mock-section="speaking"] .sp-report-card .ai-criterion { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--sp-inset); } body[data-mock-section="speaking"] .sp-report-card .ai-criterion .score-line { flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 9px; } body[data-mock-section="speaking"] .sp-report-card .ai-criterion .coverage-badge { font-size: 12px; white-space: nowrap; } body[data-mock-section="speaking"] .sp-report-card .ai-criterion .small-note { font-size: 13px; line-height: 1.8; } body[data-mock-section="speaking"] .sp-report-card .result-helper-translation { font-size: 13px; line-height: 1.85; margin-top: 9px; } body[data-mock-section="speaking"] .sp-hide-helper .result-helper-translation { display: none; } body[data-mock-section="speaking"] .sp-report-translation { font-size: 11px; min-height: 30px; padding: 5px 9px; flex-shrink: 0; } body[data-mock-section="speaking"] .sp-practice-focus { padding: 15px 16px; border: 1px solid var(--sp-accent-line); border-radius: 12px; background: var(--sp-accent-soft); margin-bottom: 14px; } body[data-mock-section="speaking"] .sp-practice-focus p { margin: 0; font-size: 14px; line-height: 1.8; } body[data-mock-section="speaking"] .sp-correction-label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-correction { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; margin: 0; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-correction p { margin: 6px 0 0; line-height: 1.75; } body[data-mock-section="speaking"] .sp-original-phrase { color: var(--muted); font-size: 13px; } body[data-mock-section="speaking"] .sp-replacement-phrase { color: var(--sp-ok); font-size: 15px; font-weight: 650; } body[data-mock-section="speaking"] .sp-report-seek { border: 0; padding: 5px 0; color: var(--button-dark); cursor: pointer; background: transparent; font: inherit; font-size: 12px; } body[data-mock-section="speaking"] .sp-report-retry { margin: 0; text-align: right; font-size: 12px; } body[data-mock-section="speaking"] .sp-report-retry a { font-size: 12px; white-space: nowrap; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-section { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: clip; background: var(--sp-inset); margin-top: 12px; padding: 0; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-section > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 13px 16px; list-style: none; cursor: pointer; color: var(--ink-strong); font-size: 13px; font-weight: 650; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-section > summary::-webkit-details-marker { display: none; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-section > summary::after { content: '+'; font-size: 19px; color: var(--muted); font-weight: 400; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-section[open] > summary { border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-section[open] > summary::after { content: '−'; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-section .speaking-report-body { padding: 18px; } body[data-mock-section="speaking"] .sp-version-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } body[data-mock-section="speaking"] .sp-version-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; background: var(--card-surface); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; } body[data-mock-section="speaking"] .sp-version-list li.is-current { border-color: var(--sp-accent-line); } body[data-mock-section="speaking"] .sp-feedback-language { display: flex; justify-content: flex-end; } body[data-mock-section="speaking"] .sp-feedback-group .result-answer { padding: 0; margin-top: 10px; } body[data-mock-section="speaking"] .sp-feedback-group + .sp-feedback-group { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 6px; } body[data-mock-section="speaking"] .sp-feedback-strengths .answer-label { color: var(--sp-ok); } body[data-mock-section="speaking"] .sp-feedback-improvements .answer-label { color: var(--button-dark); } body[data-mock-section="speaking"] .sp-feedback-group .ai-feedback-list { padding-left: 20px; margin: 10px 0 0; } body[data-mock-section="speaking"] .sp-feedback-group .ai-feedback-list li { padding-left: 3px; margin-bottom: 12px; font-size: 13px; line-height: 1.85; } body[data-mock-section="speaking"] .sp-feedback-group .ai-feedback-list li:last-child { margin-bottom: 0; } body[data-mock-section="speaking"] .sp-sample-card > summary { list-style: none; cursor: pointer; } body[data-mock-section="speaking"] .sp-sample-card > summary::-webkit-details-marker { display: none; } body[data-mock-section="speaking"] .sp-sample-card:not([open]) > summary { border-bottom: 0; } body[data-mock-section="speaking"] .sp-sample-meta { margin-left: auto; font-size: 11px; color: var(--muted); } body[data-mock-section="speaking"] .sp-disclosure-mark::after { content: '+'; font-size: 20px; color: var(--button-dark); } body[data-mock-section="speaking"] .sp-sample-card[open] .sp-disclosure-mark::after { content: '−'; } body[data-mock-section="speaking"] .sp-report-card .speaking-report-target { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; background: transparent; } body[data-mock-section="speaking"] .sp-report-card .speaking-report-target label { font-size: 12px; min-width: 90px; } body[data-mock-section="speaking"] .sp-report-card .speaking-report-target select { margin-top: 5px; max-width: 150px; } body[data-mock-section="speaking"] .sp-report-card .speaking-report-target .control-button { padding: 8px 12px; font-size: 12px; min-height: 38px; } body[data-mock-section="speaking"] .sp-sample-text { font-size: 15px; line-height: 1.85; } body[data-mock-section="speaking"] .sp-sample-text p { break-inside: avoid; margin-top: 0; margin-bottom: 14px; } body[data-mock-section="speaking"] .sp-sample-structure { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.85; } body[data-mock-section="speaking"] .sp-sample-structure h4 { color: var(--ink-strong); margin: 0 0 12px; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-error, body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-notice, body[data-mock-section="speaking"] .sp-review-v6 .sp-report-generating { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--sp-inset); margin-bottom: 14px; } body[data-mock-section="speaking"] .sp-report-card textarea { width: 100%; min-height: 200px; resize: vertical; } body[data-mock-section="speaking"] .sp-review-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 4px 0 14px; font-size: 12px; color: var(--muted); } body[data-mock-section="speaking"] .sp-review-footer > div:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } body[data-mock-section="speaking"] .sp-review-footer .link-button { font-size: 12px; } body[data-mock-section="speaking"] .sp-report-privacy > details { margin: 0; background: transparent; border: 0; max-width: 720px; } body[data-mock-section="speaking"] .sp-report-privacy summary { cursor: pointer; list-style: none; color: var(--muted); } body[data-mock-section="speaking"] .sp-report-privacy .speaking-report-body { display: flex; align-items: flex-start; flex-direction: column; gap: 14px; padding-top: 16px; } body[data-mock-section="speaking"] .sp-result-prompt { width: min(900px,calc(100vw - 32px)); max-height: 85dvh; padding: 0; border: 1px solid var(--card-border); border-radius: 20px; background: var(--card-surface); color: var(--ink); box-shadow: var(--shadow-soft); } body[data-mock-section="speaking"] .sp-result-prompt::backdrop { background: #141b2d66; backdrop-filter: blur(3px); } body[data-mock-section="speaking"] .sp-result-prompt > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--line); } body[data-mock-section="speaking"] .sp-result-prompt h2 { margin: 0; color: var(--ink-strong); font-size: 21px; } body[data-mock-section="speaking"] .sp-result-prompt [data-sp-prompt-close] { min-width: 38px; min-height: 38px; padding: 4px; font-size: 22px; } body[data-mock-section="speaking"] .sp-prompt-body { padding: 22px 24px; } body[data-mock-section="speaking"] .sp-prompt-body > p { font-size: 16px; line-height: 1.8; margin: 0 0 12px; } body[data-mock-section="speaking"] .sp-prompt-timing { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; } body[data-mock-section="speaking"] .sp-prompt-image { display: block; max-width: 100%; height: auto; margin: 18px auto 0; } body[data-mock-section="speaking"] .sp-prompt-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } body[data-mock-section="speaking"] .sp-prompt-options .sp-option-media { height: auto; aspect-ratio: 4/3; padding: 8px; } body[data-mock-section="speaking"] .sp-prompt-options .sp-option-media img { position: static; width: 100%; height: 100%; object-fit: contain; } @container (min-width: 1500px) { body[data-mock-section="speaking"] .sp-review-columns { grid-template-columns: repeat(3,minmax(0,1fr)); } body[data-mock-section="speaking"] .sp-sample-card { grid-column: 1 / -1; } body[data-mock-section="speaking"] .sp-sample-card[open] > .sp-report-card-body { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); gap: 28px; } body[data-mock-section="speaking"] .sp-sample-main:only-child { grid-column: 1 / -1; } body[data-mock-section="speaking"] .sp-sample-text { columns: 2; column-gap: 28px; } body[data-mock-section="speaking"] .sp-sample-structure { border: 0; border-left: 1px solid var(--line); padding: 0 0 0 26px; margin: 0; } } @container (max-width: 1039px) { body[data-mock-section="speaking"] .sp-review-columns { grid-template-columns: minmax(0,1fr); } body[data-mock-section="speaking"] .sp-overview-top { flex-wrap: wrap; } body[data-mock-section="speaking"] .sp-overview-bottom { grid-template-columns: minmax(0,1fr); gap: 15px; } body[data-mock-section="speaking"] .sp-feedback-compact { justify-content: flex-start; } body[data-mock-section="speaking"] .sp-results-command { flex-wrap: wrap; padding: 14px 16px; gap: 13px; } body[data-mock-section="speaking"] .sp-command-actions { justify-content: flex-start; } } @media (max-width: 1550px) { body[data-mock-section="speaking"] .sp-sw-item { grid-template-columns: auto minmax(0,1fr); } body[data-mock-section="speaking"] .sp-sw-state { grid-column: 2; } body[data-mock-section="speaking"] .sp-command-title h1 { font-size: 22px; } body[data-mock-section="speaking"] .sp-overview-bottom { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } @media (max-width: 900px) { body[data-mock-section="speaking"][data-mock-view="results"] .sp-switcher { grid-template-columns: repeat(4,minmax(0,1fr)); } body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="2"] .sp-switcher, body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="3"] .sp-switcher { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); } body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="2"] .sp-sw-item, body[data-mock-section="speaking"][data-mock-view="results"] .sp-results[data-sp-submitted="3"] .sp-sw-item { min-width: 0; } body[data-mock-section="speaking"] .sp-overview-bottom { grid-template-columns: minmax(0,1fr); } } @media (max-width: 600px) { body[data-mock-section="speaking"] .sp-results-command { position: relative; top: auto; } body[data-mock-section="speaking"] .sp-command-title h1 { font-size: 20px; } body[data-mock-section="speaking"] .sp-command-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 7px; } body[data-mock-section="speaking"] .sp-command-actions > .control-button { font-size: 11px; padding: 8px 10px; } body[data-mock-section="speaking"] .sp-report-menu { justify-self: end; grid-column: 2; } body[data-mock-section="speaking"] .sp-overview-heading { gap: 10px; } body[data-mock-section="speaking"] .sp-overview-heading h2 { font-size: 21px; } body[data-mock-section="speaking"] .sp-overview-heading .speaking-report-level { font-size: 25px; padding-left: 12px; } body[data-mock-section="speaking"] .sp-overview-heading .result-chip-row { gap: 5px; } body[data-mock-section="speaking"] .sp-review-v6 .speaking-report-bands { grid-template-columns: repeat(2,minmax(0,1fr)); } body[data-mock-section="speaking"] .sp-report-overview { padding: 16px; } body[data-mock-section="speaking"] .sp-report-card-head,body[data-mock-section="speaking"] .sp-report-card-body { padding: 15px 16px; } body[data-mock-section="speaking"] .sp-sample-meta { display: none; } body[data-mock-section="speaking"] .sp-report-card .speaking-audio-controls { grid-template-columns: auto minmax(0,1fr); } body[data-mock-section="speaking"] .sp-report-card .speaking-audio-time { grid-column: 1 / -1; justify-self: end; } body[data-mock-section="speaking"] .sp-feedback-compact { flex-wrap: wrap; } body[data-mock-section="speaking"] .sp-report-retry a { font-size: 11px; white-space: normal; } body[data-mock-section="speaking"] .sp-prompt-options { grid-template-columns: minmax(0,1fr); } body[data-mock-section="speaking"] .sp-result-prompt > header,body[data-mock-section="speaking"] .sp-prompt-body { padding: 18px; } } /* Guests retain sign-in actions without three full-width rows. */ body[data-mock-section="speaking"] .sp-results-notices .result-guest-actions { padding: 12px 16px; margin: 0; } body[data-mock-section="speaking"] .sp-results-notices .result-guest-actions .results-actions { display: flex; flex-wrap: wrap; gap: 8px; } body[data-mock-section="speaking"] .sp-results-notices .result-guest-actions .control-button { width: auto; min-width: 0; font-size: 12px; padding: 8px 14px; min-height: 36px; } body[data-mock-section="speaking"] .sp-results-command { background: var(--surface); } body[data-mock-section="speaking"] .sp-report-overview,body[data-mock-section="speaking"] .sp-report-card { color: var(--ink); } body[data-mock-section="speaking"] .sp-report-card-head h3,body[data-mock-section="speaking"] .sp-report-card .ai-criterion strong { color: var(--ink-strong); } body[data-mock-section="speaking"] .sp-result-prompt header { position: sticky; top: 0; z-index: 1; background: var(--surface); } body[data-mock-section="speaking"] .sp-sample-card summary:focus-visible,body[data-mock-section="speaking"] .sp-report-menu summary:focus-visible { outline: 2px solid var(--button); outline-offset: -3px; }