/* ── Tests ─────────────────────────────────────────────────────
   A sitting at the same desk. The question paper is the one cinnabar
   card; the blue field carries nothing but chrome. Every limit is
   stated before the first question, never sprung, and the clock can be
   doubled or switched off on the way in (WCAG 2.2.1). */

.test-main{width:100%;max-width:720px;margin:0 auto;padding:0 24px 72px;}
.test-head{padding:24px 0 0;}
.test-head h1{
  margin:0 0 12px;font-size:clamp(30px,6vw,44px);line-height:1.06;
  letter-spacing:-.02em;font-weight:650;
}
.test-head .lede{margin:0 auto;}
.test-practice{
  display:inline-block;margin-top:10px;font-size:15px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;
}
.test-practice:hover{color:var(--ink);}

/* ── What the sitting contains ─────────────────────────────── */
.brief{list-style:none;margin:28px 0 0;padding:0;text-align:left;border-top:1px solid var(--rule);}
.brief li{
  display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.brief .n{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;}
.brief .t{font-size:16px;line-height:1.45;}
.brief .t b{font-weight:600;}
.brief .t span{display:block;font-size:14px;line-height:1.45;margin-top:2px;}

/* ── Timing choice ─────────────────────────────────────────── */
.timing{border:0;margin:28px 0 0;padding:0;}
.timing legend{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  padding:0;margin:0 0 10px;
}
.timing-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.choice{position:relative;display:inline-flex;cursor:pointer;}
.choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.choice-face{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 16px;border-radius:10px;border:1px solid var(--rule-strong);
  font-size:15px;font-weight:500;line-height:1;
}
.choice input:checked + .choice-face{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
.choice input:focus-visible + .choice-face{outline:2px solid var(--ink);outline-offset:3px;}

.test-note{margin:20px auto 0;max-width:48ch;font-size:14px;line-height:1.55;}
.start-row{margin:28px 0 0;}
.start-row .btn{min-width:220px;}

/* ── The paper ─────────────────────────────────────────────── */
.playbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:20px 0 12px;min-height:36px;
}
.play-pos,.play-part{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;}
.play-part{text-align:right;}
.timer{
  display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 10px;
  border-radius:8px;background:rgba(0,18,54,.34);
}
.timer[hidden]{display:none!important;}
.timer-num{
  font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;
  min-width:2.6em;text-align:right;
}
.timer-bar{
  display:block;width:56px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.32);overflow:hidden;
}
.timer-fill{display:block;height:100%;width:100%;background:var(--ink);}

.paper{
  margin:0;padding:32px 28px;border-radius:var(--r-lg);
  background:var(--surface);color:var(--seal-ink);
  box-shadow:var(--shadow);text-align:center;
}
.prompt{display:flex;flex-direction:column;align-items:center;gap:10px;}
.prompt-hanzi{
  margin:0;font-family:var(--han);font-weight:600;
  font-size:clamp(56px,15vw,92px);line-height:1.08;
}
.prompt-en{
  margin:0;font-size:clamp(19px,4vw,24px);line-height:1.35;font-weight:500;max-width:32ch;
}
.prompt-pos{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  color:var(--seal-quiet);
}
.prompt-note{
  margin:4px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  color:var(--seal-quiet);max-width:40ch;
}
.cloze-line{
  margin:0;font-family:var(--han);
  font-size:clamp(20px,4.6vw,27px);line-height:1.75;
}
.blank{
  display:inline-block;min-width:3.2em;border-bottom:2px solid var(--seal-ink);
  vertical-align:baseline;
}

/* ── Answers on the paper ──────────────────────────────────── */
.options{display:grid;gap:10px;margin-top:24px;text-align:left;}
.option{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
  padding:10px 16px;border-radius:10px;border:1px solid var(--seal-line);
  background:transparent;color:var(--seal-ink);
  font-family:var(--font);font-size:16.5px;line-height:1.35;
  text-align:left;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.option:hover{background:rgba(255,255,255,.10);}
.option:active{transform:scale(.995);}
.option .key{
  font-family:var(--mono);font-size:12px;color:var(--seal-quiet);
  flex:none;width:1.2em;
}
.option.is-chosen{background:var(--seal-ink);color:var(--on-accent);border-color:var(--seal-ink);}
.option.is-chosen .key{color:var(--on-accent);}
.options-zh .option-text{font-family:var(--han);font-size:21px;}
/* Part D offers whole sentences, so the option gives up size before it gives
   up the line. */
.options-sent .option-text{font-size:19px;line-height:1.55;}
.options-sent .option{align-items:flex-start;padding:12px 16px;}
.options-sent .option .key{padding-top:4px;}

/* The one control in Part D, so it carries the weight a play button should. */
.listen-play{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 26px;border-radius:999px;
  border:1px solid var(--seal-line);background:rgba(255,255,255,.12);
  color:var(--seal-ink);font-family:var(--font);font-size:16.5px;font-weight:600;
  cursor:pointer;transition:background .12s ease;
}
.listen-play:hover{background:rgba(255,255,255,.20);}
.listen-play:focus-visible{outline:2px solid var(--seal-ink);outline-offset:3px;}
/* A quiet ripple while the voice is speaking, so the question reads as audio
   even with the sound off. */
.listen-play::before{
  content:"";width:10px;height:10px;border-radius:999px;
  background:currentColor;opacity:.9;
}

.answer{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px;}
.answer input{
  width:100%;max-width:340px;min-height:52px;padding:0 16px;
  border-radius:10px;border:1px solid var(--seal-line);
  background:rgba(0,0,0,.14);color:var(--seal-ink);
  font-family:var(--mono);font-size:20px;text-align:center;letter-spacing:.04em;
  -webkit-appearance:none;appearance:none;
}
.answer input::placeholder{color:var(--seal-quiet);opacity:1;}
.answer input:focus{outline:2px solid var(--seal-ink);outline-offset:2px;}
.answer .btn{min-width:150px;}

.order{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.tray{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  width:100%;min-height:60px;padding:10px;border-radius:12px;
  border:1px dashed var(--seal-line);
}
.tray-empty{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  color:var(--seal-quiet);
}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.tile{
  min-height:44px;padding:6px 14px;border-radius:8px;
  border:1px solid var(--seal-line);background:transparent;color:var(--seal-ink);
  font-family:var(--han);font-size:20px;line-height:1.2;cursor:pointer;
}
.tile:hover{background:rgba(255,255,255,.10);}
.tray .tile{background:var(--seal-ink);color:var(--on-accent);border-color:var(--seal-ink);}

.play-actions{margin-top:16px;display:flex;justify-content:center;}

/* ── Result ────────────────────────────────────────────────── */
.result-card{
  margin:20px 0 0;padding:32px 28px;border-radius:var(--r-lg);
  background:var(--surface);color:var(--seal-ink);
  box-shadow:var(--shadow);text-align:center;
}
.verdict{margin:0;font-size:clamp(24px,5vw,32px);line-height:1.15;font-weight:650;letter-spacing:-.01em;}
.score-line{
  margin:8px 0 0;font-family:var(--mono);font-size:16px;
  font-variant-numeric:tabular-nums;
}
.mark-table{width:100%;border-collapse:collapse;margin-top:24px;text-align:left;}
.mark-table th{
  font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.02em;
  text-align:left;padding:0 0 8px;border-bottom:1px solid var(--seal-line);
}
.mark-table th.num,.mark-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
.mark-table td{
  padding:10px 0;border-bottom:1px solid var(--seal-line);
  font-size:15px;line-height:1.4;
}
.mark-table td.num{font-family:var(--mono);font-size:13.5px;}
.mark-note{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--seal-quiet);}

.result-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;}
.result-actions .btn{min-width:170px;}
.result-card .btn-primary{background:var(--seal-ink);color:var(--on-accent);}
.result-card .btn-primary:hover{background:var(--seal-quiet);}
.result-card .btn-ghost{border-color:var(--seal-line);color:var(--seal-ink);}
.result-card .btn-ghost:hover{background:rgba(255,255,255,.10);}

/* ── Review ────────────────────────────────────────────────── */
.review{margin-top:24px;text-align:left;}
.review summary{
  cursor:pointer;min-height:44px;display:flex;align-items:center;
  font-size:16px;font-weight:500;border-top:1px solid var(--seal-line);
  padding-top:4px;
}
.review-item{padding:16px 0;border-bottom:1px solid var(--seal-line);}
.review-q{
  margin:0 0 8px;font-family:var(--han);font-size:18px;line-height:1.5;
}
.review-q.en{font-family:var(--font);font-size:16px;}
.review-sub{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--seal-quiet);}
.review-row{
  display:grid;grid-template-columns:104px 1fr;gap:12px;
  font-size:15px;line-height:1.45;margin-top:4px;
}
.review-row .led{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--seal-quiet);padding-top:2px;
}
.review-row .val{word-break:break-word;}
.review-row .val.zh{font-family:var(--han);font-size:19px;}
.review-flag{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--seal-quiet);
}
.review-flag .i{width:14px;height:14px;}
.say{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:8px;
  padding:0 12px;border-radius:8px;border:1px solid var(--seal-line);
  background:transparent;color:var(--seal-ink);
  font-family:var(--font);font-size:13.5px;cursor:pointer;
}
.say:hover{background:rgba(255,255,255,.10);}
.say[hidden]{display:none!important;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Small screens ─────────────────────────────────────────── */
@media (max-width:420px){
  .test-main{padding:0 16px 56px;}
  .paper,.result-card{padding:24px 16px;border-radius:16px;}
  .brief li{grid-template-columns:44px 1fr;gap:12px;}
  .playbar{flex-wrap:wrap;gap:8px;justify-content:center;}
  .play-part{display:none;}
  .option{font-size:15.5px;padding:10px 12px;}
  .review-row{grid-template-columns:88px 1fr;gap:8px;}
  .result-actions .btn{min-width:0;flex:1 1 140px;}
}