/* The SSC exam simulator. Layers on page.css and landing.css and uses only
   their tokens, so it follows the reader's theme like every other page.

   The console imitates the exam screen's arrangement (passage above, box
   below, clock in the corner) without imitating its looks: the point is the
   procedure, not a copy of somebody else's software. */

.exam-wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }

.exam { margin: 0 0 3rem; }

/* ── Setup row ─────────────────────────────────────────────────────────── */

.exam-setup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: end;
  margin-bottom: 0.9rem;
  transition: opacity 0.2s;
}
.exam-setup.locked { opacity: 0.55; }
.exam-setup label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
}
.exam-setup select,
.exam-setup input[type='number'] {
  font: 500 0.88rem/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  min-height: 2.4rem;
  max-width: 100%;
}
.exam-setup input[type='number'] { width: 5.5rem; }
.exam-setup .ex-check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  font-size: 0.7rem;
}
.exam-setup .ex-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--main); }
.ex-limit-wrap { display: flex; align-items: center; gap: 0.35rem; }
.ex-limit-wrap span { font: 500 0.88rem 'Inter', sans-serif; color: var(--text); text-transform: none; }

/* ── Console ───────────────────────────────────────────────────────────── */

.exam-console {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.exam-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.exam-title { flex: 1; min-width: 0; }
.exam-name { display: block; font-weight: 650; font-size: 0.95rem; letter-spacing: -0.01em; }
.exam-rule {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--sub);
  margin-top: 0.15rem;
}
.exam-clock {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--main);
  min-width: 4.2ch;
  text-align: right;
}
.exam-clock.low { color: var(--warn); }

.ex-btn {
  font: 600 0.85rem 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.55rem 1rem;
  min-height: 2.4rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ex-btn:hover:not(:disabled) { border-color: var(--main); color: var(--main); }
.ex-btn:disabled { opacity: 0.45; cursor: default; }
.ex-btn.primary { background: var(--main); border-color: var(--main); color: var(--bg); }
.ex-btn.primary:hover { color: var(--bg); filter: brightness(1.08); }
.ex-btn[data-armed='1'] { border-color: var(--warn); color: var(--warn); }
.ex-btn:focus-visible,
.exam-setup select:focus-visible,
.exam-setup input:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

/* The passage reads like print: proportional face, generous leading, and it
   scrolls on its own so the box below never moves while you type. Not
   selectable, because the exam passage is not something you can copy. */
.exam-passage {
  font: 400 1.02rem/1.85 'Inter', system-ui, sans-serif;
  padding: 1rem 1.15rem;
  max-height: 15.5rem;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
  border-bottom: 1px solid var(--line);
  overscroll-behavior: contain;
}

.exam-input {
  display: block;
  width: 100%;
  min-height: 14rem;
  resize: vertical;
  font: 400 1.02rem/1.75 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  border: 0;
  padding: 1rem 1.15rem;
  tab-size: 4;
}
.exam-input:focus { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--main) 55%, transparent); }
.exam-input[readonly] { opacity: 0.75; }

.exam-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--sub);
  border-top: 1px solid var(--line);
}
.exam-foot #ex-kd { font-variant-numeric: tabular-nums; white-space: nowrap; }

.exam-touch-note { display: none; }
@media (hover: none) and (pointer: coarse) {
  .exam-touch-note {
    display: block;
    font-size: 0.85rem;
    color: var(--sub);
    margin: 0 0 0.8rem;
  }
}

/* ── Result ────────────────────────────────────────────────────────────── */

.exam-result { margin-top: 1.6rem; outline: none; }
.exam-result[hidden] { display: none; }

.er-verdict {
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 0.9rem;
}
.er-verdict.pass { border-color: color-mix(in srgb, var(--main) 55%, transparent); }
.er-verdict.fail { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.er-v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.er-verdict.pass .er-v { color: var(--main); }
.er-verdict.fail .er-v { color: var(--warn); }
.er-why { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--sub); margin-top: 0.25rem; }

.er-grid { margin-bottom: 1.2rem; }
.fact-s { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; color: var(--sub); margin-top: 0.2rem; }

.er-h { color: var(--text); font-size: 1rem; margin: 1.6rem 0 0.6rem; }
.er-kinds { margin-bottom: 0.5rem; }
.er-kinds li { padding-left: 0; display: flex; gap: 0.6rem; align-items: baseline; }
.er-kinds li::before { display: none; }
.er-k-n { font-family: 'JetBrains Mono', monospace; font-weight: 600; min-width: 2ch; text-align: right; color: var(--main); }
.er-k-c { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--sub); }
.er-clean { color: var(--main); font-weight: 600; }
.er-note { font-size: 0.84rem; color: var(--sub); opacity: 1; }

.er-legend { font-size: 0.8rem; color: var(--sub); line-height: 2; }
.er-script {
  font: 400 1rem/2 'Inter', system-ui, sans-serif;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  max-height: 26rem;
  overflow-y: auto;
}
.er-empty { color: var(--sub); }

/* Marks never rely on colour alone: a full mistake is struck through with the
   passage word beside it, a missing word is dotted, a half mistake is
   underlined. */
.w { position: relative; border-radius: 4px; }
.w.ok { opacity: 0.78; }
.w.half {
  text-decoration: underline wavy color-mix(in srgb, var(--main) 80%, transparent);
  text-underline-offset: 4px;
  cursor: help;
}
.w.full { cursor: help; }
.w.full s { color: var(--warn); text-decoration-thickness: 2px; }
.w ins {
  text-decoration: none;
  font-size: 0.82em;
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--main) 16%, transparent);
  color: var(--text);
}
.w.miss { cursor: help; }
.w.miss ins { background: transparent; border: 1px dashed var(--warn); color: var(--sub); }
.gap { color: var(--warn); font-weight: 700; padding: 0 0.1em; cursor: help; }
.w.open::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 2;
  width: max-content;
  max-width: min(18rem, 80vw);
  font: 400 0.75rem/1.4 'Inter', sans-serif;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  white-space: normal;
}

.er-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0.4rem; }

.exam-result .scroll-x table { min-width: 34rem; }
.exam-result td.yes { color: var(--main); font-weight: 600; }

@media (max-width: 40rem) {
  .exam-wrap { padding: 0 1rem; }
  .exam-head { flex-wrap: wrap; gap: 0.5rem 0.8rem; }
  .exam-title { flex-basis: 100%; }
  .exam-clock { margin-right: auto; text-align: left; }
  .exam-passage { max-height: 11rem; font-size: 0.98rem; }
  .exam-input { min-height: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  .exam-setup, .ex-btn { transition: none; }
}

/* ── Page furniture ────────────────────────────────────────────────────── */

.exam-intro { padding-bottom: 1.25rem; }
.exam-intro .tagline { margin-bottom: 0.5rem; }
.note-line { font-size: 0.84rem; color: var(--sub); opacity: 1; }