/* ═══════════════════════════════════════════════════════════════════════════
   IQ Test — Test screen
   The rule: nothing on screen but the question. Clock, progress and navigation
   collapse into one thin bar; nothing blinks, nothing competes for attention.
   ═══════════════════════════════════════════════════════════════════════════ */

body.testing { background: var(--paper); }

/* ── Tool bar ──────────────────────────────────────────────────────────── */
.tk-bar {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.tk-bar__inner {
    max-width: var(--wrap); margin-inline: auto;
    padding: var(--s3) var(--gutter);
    display: flex; align-items: center; gap: var(--s5);
}
.tk-bar__id { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.tk-bar__count {
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tk-bar__count .num:first-of-type { color: var(--ink); }

.tk-rail {
    flex: 1; height: 4px; min-width: 60px;
    background: var(--paper-2); border-radius: var(--r-pill); overflow: hidden;
}
.tk-rail__fill {
    height: 100%; width: 0%;
    background: var(--brand); border-radius: inherit;
    transition: width var(--dur-med) var(--ease);
}

.tk-bar__tools { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }

/* The clock changes color only — no growing, no blinking. The pulse of the
   person taking the test is fast enough already. */
.tk-timer {
    display: inline-flex; align-items: center;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--ink-2);
    transition: color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.tk-timer__val {
    font-family: var(--font-mono); font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.tk-timer.is-warn   { color: var(--signal); border-color: var(--signal); }
.tk-timer.is-danger { color: var(--danger); border-color: var(--danger); background: var(--danger-wash); }

.tk-navtoggle { position: relative; }
.tk-navtoggle__badge {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--s1);
    background: var(--signal); color: var(--surface);
    border-radius: var(--r-pill); font-size: .68rem; font-weight: 700;
}

/* ── Question navigator ────────────────────────────────────────────────── */
.tk-navigator { border-top: 1px solid var(--line); background: var(--surface-2); }
.tk-navigator__inner {
    max-width: var(--wrap); margin-inline: auto;
    padding: var(--s5) var(--gutter);
    display: flex; flex-direction: column; gap: var(--s4);
}
.tk-navigator__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: var(--s2);
}
.tk-navigator__grid--review { max-width: 460px; margin-top: var(--s5); }

.tk-cell {
    position: relative;
    min-height: 38px; padding: 0;
    display: grid; place-items: center;
    background: var(--surface); color: var(--ink-3);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tk-cell:hover { border-color: var(--line-strong); color: var(--ink); }
.tk-cell.is-done {
    background: var(--brand-wash); border-color: var(--brand-line); color: var(--brand-ink);
}
/* Flagged is a folded corner, not color alone — WCAG 1.4.1 */
.tk-cell.is-flagged::after {
    content: ""; position: absolute; top: 0; right: 0;
    border-width: 0 9px 9px 0; border-style: solid;
    border-color: transparent var(--signal) transparent transparent;
    border-top-right-radius: var(--r-sm);
}
.tk-cell.is-current {
    border-color: var(--ink); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.tk-navigator__legend {
    display: flex; flex-wrap: wrap; gap: var(--s5);
    font-size: var(--fs-xs); color: var(--ink-3);
}
.tk-navigator__legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.tk-dot { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line); display: block; }
.tk-dot--done { background: var(--brand-wash); border-color: var(--brand-line); }
.tk-dot--flag { background: var(--signal); border-color: var(--signal); }
.tk-dot--todo { background: var(--surface); }

/* ── Stage ─────────────────────────────────────────────────────────────── */
.tk-stage {
    max-width: 900px; margin-inline: auto;
    padding: var(--s7) var(--gutter) var(--s9);
}
.tk-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s7) var(--s6);
    box-shadow: var(--shadow-1);
}

.tk-kind {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--track-caps);
    color: var(--ink-3);
}
.tk-kind::before {
    content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--d1);
}
.tk-kind[data-kind="spatial"]::before   { background: var(--d1); }
.tk-kind[data-kind="numerical"]::before { background: var(--d2); }
.tk-kind[data-kind="logical"]::before   { background: var(--d3); }
.tk-kind[data-kind="verbal"]::before    { background: var(--d4); }

.tk-q {
    font-family: var(--font-display);
    font-size: var(--fs-lg); font-weight: 400; line-height: var(--lh-snug);
    color: var(--ink); margin: var(--s4) 0 0;
    max-width: 54ch;
}

.tk-fig {
    margin: var(--s6) 0 0;
    display: flex; justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s5);
}
.tk-fig svg, .tk-fig img { width: auto; max-width: 100%; height: auto; max-height: 320px; }
@media (max-height: 700px) { .tk-fig svg, .tk-fig img { max-height: 40vh; } }

/* ── Options ───────────────────────────────────────────────────────────── */
.tk-opts { display: grid; gap: var(--s3); margin-top: var(--s6); }
.tk-opts--fig { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.tk-opt {
    display: flex; align-items: center; gap: var(--s4);
    width: 100%; min-height: 52px; padding: var(--s3) var(--s4);
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    text-align: left; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tk-opt:hover { border-color: var(--brand-line); background: var(--surface-2); }
.tk-opt.is-selected {
    border-color: var(--brand); background: var(--brand-wash);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.tk-opt.is-selected .tk-opt__key { background: var(--brand); color: var(--ink-invert); border-color: var(--brand); }

.tk-opt__key {
    flex-shrink: 0;
    width: 28px; height: 28px; display: grid; place-items: center;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface);
    font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--ink-2);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tk-opt__text { font-size: var(--fs-md); }
.tk-opt__fig  { flex: 1; display: flex; justify-content: center; align-items: center; min-width: 0; }
.tk-opt__fig svg, .tk-opt__fig img { max-height: 96px; width: auto; max-width: 100%; }

.tk-opts--fig .tk-opt { flex-direction: column; align-items: stretch; gap: var(--s2); padding: var(--s3); }
.tk-opts--fig .tk-opt__key { width: 24px; height: 24px; font-size: .72rem; }

/* ── Controls ──────────────────────────────────────────────────────────── */
.tk-controls {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    margin-top: var(--s6);
}
.tk-controls__mid {
    display: flex; flex-direction: column; align-items: center; gap: var(--s1);
    min-width: 0; flex: 1;
}

.tk-flag {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 36px; padding: var(--s2) var(--s4);
    background: transparent; border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm); color: var(--ink-3);
    font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tk-flag:hover { color: var(--ink-2); border-color: var(--ink-3); }
.tk-flag[aria-pressed="true"] {
    color: var(--signal); border-color: var(--signal); border-style: solid;
    background: var(--signal-wash);
}

.tk-save { font-size: var(--fs-xs); color: transparent; min-height: 1.2em; margin: 0; }
.tk-save::before { margin-right: var(--s1); }
.tk-save.is-saving { color: var(--ink-3); }
.tk-save.is-saving::before { content: "\00B7\00B7\00B7"; }
.tk-save.is-saved  { color: var(--good); }
.tk-save.is-saved::before  { content: "\2713"; }
.tk-save.is-error  { color: var(--danger); }
.tk-save.is-error::before  { content: "\26A0"; }

.tk-hint {
    margin: var(--s6) 0 0; text-align: center;
    font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-snug);
}
.tk-hint kbd {
    display: inline-block; padding: 1px 5px; margin: 0 1px;
    background: var(--surface); border: 1px solid var(--line);
    border-bottom-width: 2px; border-radius: 4px;
    font-family: var(--font-mono); font-size: .72rem; color: var(--ink-2);
}
@media (hover: none) { .tk-hint kbd { display: none; }
    .tk-hint { font-size: 0; }
    .tk-hint::after {
        content: "Unanswered questions count the same as wrong ones, so answer even when unsure.";
        font-size: var(--fs-xs);
    }
}

/* ── Review and expiry ─────────────────────────────────────────────────── */
.tk-review__title { font-size: var(--fs-xl); margin: var(--s3) 0 var(--s3); }
.tk-review__sub   { color: var(--ink-2); max-width: 52ch; }
/* A submit that did not go through. Stated on the review screen the reader
   came from, so the attempt is visibly still there to retry. */
.tk-review__sub--error { color: var(--danger); font-weight: 600; }
.tk-review__actions {
    display: flex; flex-wrap: wrap; gap: var(--s3);
    margin-top: var(--s7);
}
.tk-review__note { margin-top: var(--s4); }

/* ── Loading skeleton ──────────────────────────────────────────────────── */
.tk-skeleton { display: grid; gap: var(--s4); }
.tk-skeleton span {
    display: block; height: 14px; border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--paper-2), var(--surface-2), var(--paper-2));
    background-size: 200% 100%;
    animation: tk-shimmer 1.4s linear infinite;
}
.tk-skeleton span:nth-child(1) { width: 30%; }
.tk-skeleton span:nth-child(2) { width: 80%; height: 26px; }
.tk-skeleton span:nth-child(3) { width: 100%; height: 180px; }
@keyframes tk-shimmer { to { background-position: -200% 0; } }

/* ── Scoring ───────────────────────────────────────────────────────────── */
.tk-scoring {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: var(--paper);
    display: grid; place-items: center; gap: var(--s4);
    align-content: center;
    text-align: center; padding: var(--gutter);
}
.tk-scoring__spin {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--brand);
    animation: tk-spin .8s linear infinite;
}
@keyframes tk-spin { to { transform: rotate(360deg); } }
.tk-scoring__text { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); }

@media (max-width: 640px) {
    .tk-bar__inner { flex-wrap: wrap; gap: var(--s3); }
    .tk-rail { order: 3; flex-basis: 100%; }
    .tk-bar__tools { margin-left: auto; }
    .tk-controls { flex-wrap: wrap; }
    .tk-controls__mid { order: 3; flex-basis: 100%; }
    .tk-controls .btn { flex: 1; }
}