/* Exam and review share a task stage; every layout state is defined once. */
#exam-app { min-width:0; }
/* Keep the footer below the first viewport while the lobby data is loading. */
body[data-page="exam"] .layout { min-height:calc(100vh - var(--header-height,64px)); min-height:calc(100svh - var(--header-height,64px)); }
.visually-hidden,.exam-question legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.exam-lobby-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 12px; }
.exam-lobby-heading h1 { margin:0; font-size:30px; line-height:1.4; }
.exam-rules-line { margin:0 0 24px; color:var(--muted); font-size:16px; }
.exam-forms { display:grid; grid-auto-rows:1fr; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.exam-forms .exam-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; width:100%; min-width:0; max-width:none; min-height:96px; padding:20px; text-align:left; border-color:var(--line); background:var(--surface); }
.exam-form>span:first-child { color:var(--ink); font-size:18px; font-weight:650; }
.exam-form small { grid-column:1; color:var(--muted); font-size:14px; font-weight:400; }
.exam-form>span:last-child { grid-column:2; grid-row:1/3; color:var(--accent-strong); font-size:14px; white-space:nowrap; }
.exam-start-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:332px; gap:12px; margin-top:16px; }
.exam-start-actions>* { width:100%; min-width:0; min-height:var(--control-height); padding:10px 16px; }
.exam-allocation { margin:24px 0; padding:8px 0; border-block:1px solid var(--line); }
.exam-allocation summary,.exam-history summary { min-height:44px; padding-block:10px; cursor:pointer; }
.exam-allocation p { max-width:var(--measure); margin:12px 0; font-size:16px; }
.exam-history h2 { margin:20px 0 8px; font-size:20px; }
.exam-history ol { list-style:none; padding:0; margin:0; }
.exam-history li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.exam-history li div { display:grid; gap:4px; }
.exam-history li span { color:var(--muted); font-size:14px; }
.exam-history li a { display:inline-flex; align-items:center; min-height:44px; }
.exam-resume { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding:16px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.exam-resume h2 { margin:0; font-size:18px; }
.exam-resume p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.exam-resume .button { flex-shrink:0; }
.exam-toolbar { position:sticky; top:var(--header-height); z-index:20; display:flex; align-items:center; gap:12px; min-height:60px; padding-block:8px; border-bottom:1px solid var(--line); background:var(--bg); }
.exam-toolbar h1 { flex:1; min-width:0; margin:0; font-size:16px; line-height:1.5; font-weight:650; }
.exam-toolbar button,.exam-toolbar .button { width:auto; min-width:var(--control-compact); min-height:var(--control-compact); padding:8px 12px; font-size:14px; line-height:1.4; white-space:nowrap; }
#exam-clock { min-width:52px; font-size:18px; font-weight:650; font-variant-numeric:tabular-nums; text-align:center; }
#exam-more { border-color:transparent; background:transparent; }
#exam-overview { display:inline-flex; align-items:center; gap:6px; border-color:var(--line); background:var(--surface); }
#exam-overview .ui-icon,#exam-review-overview .ui-icon { width:16px; height:16px; }
#exam-overview:hover,#exam-more:hover { background:var(--soft); }
#exam-exit { flex-shrink:0; }
.exam-desktop-position { display:none; margin-left:12px; color:var(--muted); font-size:14px; font-weight:400; }
.exam-workspace { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:24px; margin-top:24px; }
.exam-main { min-width:0; container:exam-main / inline-size; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.exam-answer-card { display:none; }
.exam-main .exam-question { min-width:0; margin:0; padding:24px; border:0; box-shadow:none; background:transparent; }
.exam-question h2 { max-width:38em; margin:0 0 24px; color:var(--ink); font-size:23px; line-height:1.55; font-weight:650; overflow-wrap:anywhere; }
.exam-question>.question-help { margin:-8px 0 8px; }
.exam-question .question-meta { margin:0 0 8px; font-size:13px; }
.exam-question .editorial-note { margin:0 0 20px; padding:12px 16px; font-size:14px; }
.exam-content,.exam-answers { min-width:0; }
.exam-content:not(.has-media) { max-width:760px; }
.exam-question .options { gap:12px; }
.exam-question .option { min-height:56px; padding:14px 16px; gap:12px; border-radius:var(--radius-control); font-size:17px; line-height:1.65; }
.exam-question .option input { margin-top:4px; flex-shrink:0; }
.exam-question .image-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.exam-question .image-option .option { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; }
.exam-question .image-option .option input { align-self:flex-start; }
.exam-question .image-option .option>span { width:100%; }
.exam-question .image-option .option img { width:100%; height:140px; max-width:100%; max-height:140px; margin:4px auto; object-fit:contain; }
.exam-question .image-option>button { width:100%; min-height:44px; padding:8px 4px; font-size:13px; }
.exam-media { min-width:0; margin:0 0 24px; }
.exam-media .official-film { margin:0; max-width:none; border-radius:var(--radius-control); }
.exam-media .film-heading,.exam-media .film-credit,.exam-media .film-help { display:none; }
.exam-media .official-film[data-film-state="error"] .film-help { display:block; }
.exam-media .film-stage { min-height:0; max-height:min(50dvh,360px); aspect-ratio:16/9; }
.exam-media .film-error { padding:12px 16px; }
.exam-media .question-pictures { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0; }
.exam-media .question-pictures figure { min-width:0; margin:0; }
.exam-media .question-pictures img { max-width:100%; width:auto; max-height:320px; object-fit:contain; }
.exam-media .question-pictures figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.exam-nav { position:sticky; z-index:25; bottom:0; margin:0; padding:16px 24px max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); background:var(--surface); }
.exam-nav-inner { display:flex; align-items:stretch; justify-content:flex-end; gap:12px; }
.exam-nav-inner>* { display:inline-flex; align-items:center; justify-content:center; width:var(--button-width); min-width:0; min-height:var(--control-height); padding:10px 12px; line-height:1.4; }
.exam-nav-inner>:first-child { margin-right:auto; }
#exam-flag[aria-pressed="true"] { color:var(--accent-strong); border-color:var(--accent); background:var(--soft); }
.exam-dialog { width:min(640px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0 24px 20px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); overflow:auto; overscroll-behavior:contain; scroll-padding-top:calc(var(--drawer-header-height,0px) + 16px); scroll-padding-bottom:calc(var(--attempt-navigation-height,0px) + 16px); }
.exam-dialog::backdrop { background:#14203566; }
.exam-dialog-heading { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); background:var(--surface); }
.exam-dialog-heading h2 { margin:0; font-size:20px; line-height:1.4; }
.exam-dialog-heading button { width:auto; min-width:var(--control-compact); min-height:var(--control-compact); padding:8px 12px; }
.exam-dialog p { margin:16px 0; }
.exam-dialog textarea { display:block; width:100%; min-height:150px; margin-top:8px; }
.exam-dialog>label { display:block; margin-top:16px; }
.exam-dialog-actions { position:sticky; bottom:-20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch; gap:12px; padding:16px 0 4px; background:var(--surface); }
.exam-dialog-actions button { width:100%; min-width:0; min-height:var(--control-height); }
.exam-tool-list { display:grid; grid-auto-rows:1fr; gap:8px; padding-top:16px; }
.exam-tool-list>* { width:100%; min-width:0; max-width:none; display:flex; align-items:center; justify-content:center; min-height:48px; }
.exam-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:8px; margin:16px 0; }
.exam-grid button { display:inline-flex; align-items:center; justify-content:center; gap:2px; width:100%; min-width:44px; max-width:none; min-height:44px; padding:6px 2px; border-color:var(--line); border-radius:6px; color:var(--muted); font-size:14px; font-weight:500; }
.exam-grid button small { font-size:11px; line-height:1; }
.exam-grid [aria-current="step"] { outline:2px solid var(--accent); outline-offset:-2px; color:var(--accent-strong); font-weight:750; }
.exam-grid :is(.is-answered,[data-status="answered"]) { color:var(--accent-strong); background:var(--soft); }
.exam-grid [data-status="correct"] { color:var(--correct-ink); border-color:#A6CBB7; background:var(--green-soft); }
.exam-grid [data-status="wrong"] { color:var(--wrong-ink); border-color:#E0B7B2; background:#FFF1EF; }
.exam-grid [data-status="missing"] { color:var(--muted); background:var(--surface-subtle); }
.exam-palette-legend { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.65; }
#exam-review-overview { margin-left:0; }
.exam-report-toolbar .exam-score-entry { display:inline-flex; align-items:center; gap:8px; color:var(--accent-strong); border-color:var(--line); background:var(--surface); }
.exam-score-entry strong { font-size:24px; font-variant-numeric:tabular-nums; line-height:1; }
.exam-score-entry small { margin-left:3px; font-size:13px; }
.exam-score-entry>span { font-size:13px; }
.exam-short-label { display:none; }
.exam-verdict { margin:0 0 16px; font-size:16px; font-weight:650; }
.exam-verdict.correct { color:var(--correct-ink); }
.exam-verdict.wrong { color:var(--wrong-ink); }
.exam-question .option[data-verdict="correct"] { border-color:var(--correct-ink); background:var(--green-soft); box-shadow:none; }
.exam-question .option[data-verdict="wrong"] { border-color:var(--wrong-ink); box-shadow:none; }
.exam-option-tag { align-self:center; flex-shrink:0; color:var(--correct-ink); font-size:13px; }
.exam-explanation { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.exam-explanation .teaching-feedback { margin:0; padding:0; border:0; }
.exam-explanation p,.exam-explanation ul { max-width:var(--measure); margin-block:8px; }
.exam-explanation li { margin:8px 0; }
.exam-explanation a { display:inline-flex; align-items:center; min-height:44px; }
.exam-sources summary,.exam-saved-note summary { min-height:44px; padding:10px 0; color:var(--muted); font-size:14px; cursor:pointer; }
.exam-result-screen { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:center; gap:32px; max-width:1000px; margin:32px auto; padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.exam-result-grade { padding:32px 20px; border-radius:var(--radius-control); color:var(--accent-strong); background:var(--soft); text-align:center; }
.exam-result-grade>p { margin:0 0 16px; font-size:16px; font-weight:600; }
.exam-result-grade>div { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:8px; }
.exam-score-value { font-size:80px; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.exam-result-grade span { font-size:15px; white-space:nowrap; }
.exam-result-next .eyebrow { margin:0 0 8px; }
.exam-result-next h2 { margin:0 0 16px; font-size:26px; line-height:1.4; }
.exam-result-counts { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 16px; font-size:16px; }
.exam-result-guidance { max-width:var(--measure); color:var(--muted); font-size:16px; }
.exam-result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:332px; align-items:stretch; gap:12px; margin-top:24px; }
.exam-result-actions>* { width:100%; min-width:0; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 20px; }
@container exam-main (min-width:760px) {
  .exam-content.has-media { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:24px; }
  .exam-media { margin-bottom:0; }
}
@media(min-width:1180px) and (min-height:720px) {
  .exam-workspace { grid-template-columns:244px minmax(0,1fr); }
  .exam-answer-card { display:block; position:sticky; top:calc(var(--header-height) + var(--exam-toolbar-height,0px) + 24px); max-height:calc(100dvh - var(--header-height) - var(--exam-toolbar-height,0px) - 48px); padding:8px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); scroll-padding-top:calc(var(--drawer-header-height,0px) + 8px); }
  .exam-card-heading { position:sticky; top:-8px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; padding:4px; background:var(--surface); }
  .exam-card-heading h2 { margin:0; font-size:16px; }
  .exam-card-heading button { width:auto; min-width:44px; min-height:44px; padding:8px 12px; font-size:14px; }
  .exam-card-heading>span { color:var(--muted); font-size:13px; }
  .exam-answer-card [data-card-count],.exam-answer-card [data-round-count] { margin:0 4px 8px; color:var(--muted); font-size:13px; }
  .exam-answer-card .exam-grid { grid-template-columns:repeat(5,minmax(44px,1fr)); gap:1px; margin:0; }
  .exam-answer-card .exam-grid button { padding:4px 0; font-size:13px; }
  .exam-answer-card .exam-palette-legend { margin:8px 4px 4px; }
  .exam-toolbar #exam-overview,#exam-review-overview { display:none; }
  .exam-desktop-position { display:inline; }
}
@media(max-width:700px) {
  .exam-lobby-heading { align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .exam-lobby-heading h1 { font-size:26px; }
  .exam-lobby-heading .vehicle-switch { width:100%; }
  .exam-rules-line { margin-bottom:20px; font-size:15px; }
  .exam-forms { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exam-forms .exam-form { min-height:88px; padding:16px 12px; gap:4px 8px; }
  .exam-form>span:first-child { font-size:17px; }
  .exam-form small { font-size:13px; }
  .exam-toolbar { gap:6px; min-height:56px; padding-block:6px; }
  .exam-toolbar h1 { font-size:14px; }
  .exam-toolbar button,.exam-toolbar .button { padding-inline:8px; font-size:13px; }
  #exam-clock { min-width:44px; font-size:16px; }
  .exam-workspace { margin-top:16px; }
  .exam-main .exam-question { padding:16px; }
  .exam-question h2 { margin-bottom:20px; font-size:20px; }
  .exam-question .option { min-height:52px; padding:12px; gap:10px; font-size:16px; }
  .exam-question .options { gap:10px; }
  .exam-question .image-options { grid-template-columns:minmax(0,1fr); gap:16px; }
  .exam-question .image-option .option { padding:8px; }
  .exam-question .image-option .option img { height:180px; max-height:180px; max-width:280px; }
  .exam-media { margin-bottom:20px; }
  .exam-media .film-stage { max-height:min(40dvh,320px); }
  .exam-nav { padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  .exam-nav-inner { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .exam-nav-inner>* { width:100%; min-height:var(--control-height); padding:10px 6px; font-size:15px; }
  .exam-nav-inner>:first-child,.exam-nav-inner>:last-child { min-width:0; margin:0; }
  .exam-dialog { padding:0 16px 16px; }
  .exam-dialog-heading { padding-block:12px; }
  .exam-dialog-heading h2 { font-size:18px; }
  .exam-dialog-actions { bottom:-16px; padding-top:12px; }
  .exam-dialog .exam-grid { grid-template-columns:repeat(5,minmax(44px,1fr)); gap:6px; }
  .exam-resume { align-items:flex-start; flex-direction:column; padding:16px; }
  .exam-result-screen { grid-template-columns:1fr; gap:24px; margin:24px auto; padding:24px; }
  .exam-result-grade { padding:20px; }
  .exam-score-value { font-size:64px; }
  .exam-result-next h2 { font-size:24px; }
  .exam-score-entry>span,.exam-long-label { display:none; }
  .exam-short-label { display:inline; }
  .exam-report-toolbar .exam-score-entry { gap:0; padding-inline:8px; }
}
@media(max-width:420px) {
  .exam-report-toolbar .exam-vehicle-name { display:none; }
  .exam-toolbar { gap:4px; }
  .exam-toolbar button,.exam-toolbar .button { padding-inline:6px; }
}
@media(max-width:360px) {
  .exam-toolbar h1 { font-size:13px; }
  .exam-forms .exam-form { padding:12px; }
  .exam-form>span:last-child { font-size:12px; }
  .exam-dialog .exam-grid { gap:4px; }
}
@media(max-height:500px) {
  .exam-result-screen { gap:24px; margin-block:16px; padding:24px; }
  .exam-score-value { font-size:56px; }
  .exam-result-grade { padding:20px; }
  .exam-result-next h2 { font-size:22px; }
}