/* Charter5m Mini Test. Colours come from /assets/site.css (:root tokens, dark-only
   site). The exam screen mirrors the layout and controls of the CFA computer-based
   exam (dark bars top and bottom, question rail on the left, Section Review panel,
   Confirm Finish dialog) in Charter5m's own colours. No Prometric/CFA Institute
   artwork, icons or text are reused. Spec: Docs/minitest_plan.md. */

:root {
    /* Derived from site tokens: the exam bars sit one step darker than --bg,
       the question block one step lighter than --surface. */
    --mt-bar: #0A0E12;
    --mt-bar-text: var(--text-primary);
    --mt-stem-bg: #222A34;
    --mt-choice-border: #3A4553;
    --mt-selected-bg: var(--pill-bg);
    --mt-warn: #F5C451;
    --mt-warn-bg: rgba(245,196,81,0.14);
    --mt-radius: 10px;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mt-loading, .mt-noscript {
    padding: 64px 24px;
    text-align: center;
    color: var(--text-secondary);
}

/* ---------- Shell (hub, test page, result) ---------- */

.mt-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 20px 72px;
}

.mt-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--pill-bg);
    padding: 4px 10px;
    border-radius: 999px;
}

.mt-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mt-posted { font-size: 13px; color: var(--text-secondary); }
.mt-posted--new { color: var(--primary); font-weight: 600; }
.mt-posted--new::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 6px 1px 0;
    border-radius: 50%;
    background: var(--primary);
}

.mt-title { font-size: 34px; line-height: 1.15; margin: 14px 0 8px; }
.mt-subtitle { font-size: 17px; color: var(--text-secondary); margin: 0 0 18px; }

.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.mt-chips li {
    font-size: 13px;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
}

.mt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow);
}
.mt-card + .mt-card { margin-top: 20px; }
.mt-card h2 { font-size: 20px; margin-bottom: 12px; }

.mt-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 20px; }
.mt-fact { background: var(--bg); border: 1px solid var(--border); border-radius: var(--mt-radius); padding: 12px; text-align: center; }
.mt-fact b { display: block; font-size: 22px; color: var(--text-primary); }
.mt-fact span { font-size: 12px; color: var(--text-secondary); }

.mt-rules { margin: 0 0 20px; padding-left: 20px; }
.mt-rules li { margin-bottom: 6px; font-size: 15px; }

.mt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    font: 600 15px/1 "Inter", sans-serif;
    color: var(--primary-fg);
    background: var(--primary);
    border: 0;
    border-radius: var(--mt-radius);
    cursor: pointer;
    text-decoration: none;
}
.mt-btn:hover:not(:disabled) { background: var(--primary-hover); color: var(--primary-fg); }
.mt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mt-btn--wide { width: 100%; }
.mt-btn--ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
.mt-btn--ghost:hover:not(:disabled) { background: var(--surface); color: var(--text-primary); border-color: var(--primary); }
.mt-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mt-btn-row--end { margin-top: 28px; }
.mt-btn-row--tight { margin-top: 10px; }
.mt-btn--sm { padding: 9px 14px; font-size: 14px; }
.mt-note--flush { margin-top: 0; }
.mt-link-btn { background: none; border: 0; padding: 8px 0 0; color: var(--primary); font: 600 14px "Inter", sans-serif; cursor: pointer; }
.mt-grid-line { font-size: 18px; letter-spacing: 2px; margin-top: 6px; }
.mt-qhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.mt-qhead h2 { margin: 0; }
[data-reveal] { margin-top: 4px; }
.mt-profile { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.mt-profile summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 14px; }
.mt-profile[open] summary { margin-bottom: 12px; }

.mt-note { font-size: 13px; color: var(--text-secondary); margin-top: 12px; }
.mt-error { background: var(--error-bg); color: var(--error-fg); border-radius: var(--mt-radius); padding: 12px 14px; font-size: 14px; margin: 12px 0; }

/* Site nav + footer: shared with charter5m.com, styled in /assets/site.css. */

/* ---------- Hub ---------- */

.mt-archive { list-style: none; margin: 0; padding: 0; }
.mt-archive li + li { border-top: 1px solid var(--border); }
.mt-archive a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px; color: var(--text-primary); }
.mt-archive a:hover { color: var(--primary); }
.mt-archive small { color: var(--text-secondary); white-space: nowrap; }

/* ---------- Leaderboard ---------- */

/* Fixed layout: with auto layout a long nickname (white-space: nowrap) set the Name
   column's minimum width and pushed Time past the card edge on a 375px phone. The header
   cells set the widths; Name takes the rest and ellipsizes. */
.mt-board { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; }
.mt-board th:nth-child(1) { width: 44px; }
.mt-board th:nth-child(3) { width: 64px; }
.mt-board th:nth-child(4) { width: 60px; }
.mt-board th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 8px 8px; }
.mt-board td { padding: 10px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.mt-board td.num, .mt-board th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mt-board .rank { width: 44px; font-weight: 700; color: var(--text-secondary); }
.mt-board tr.top .rank { color: var(--primary); }
.mt-board tr.you td { background: var(--pill-bg); }
.mt-board .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mt-board .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
    .mt-board th, .mt-board td { padding-left: 5px; padding-right: 5px; }
    .mt-board th:nth-child(1) { width: 32px; }
    .mt-board th:nth-child(3) { width: 58px; }
    .mt-board th:nth-child(4) { width: 52px; }
    .mt-board .who { gap: 8px; }
    /* "Anonymous Octopus" ellipsized to "Anonymou…" loses the only part that tells two
       entries apart, so on a phone the name wraps to a second line instead. */
    .mt-board .who-name {
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
.mt-board .you-tag { font-size: 11px; font-weight: 700; color: var(--primary); margin-left: 6px; }
.mt-empty { color: var(--text-secondary); font-size: 15px; margin: 0; }

.mt-avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--pill-bg);
}
.mt-avatar--lg { width: 56px; height: 56px; font-size: 30px; }

/* ---------- Result ---------- */

.mt-score { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.mt-score-big { font-size: 56px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.mt-score-big small { font-size: 24px; color: var(--text-secondary); font-weight: 600; }
.mt-score-meta { font-size: 15px; color: var(--text-secondary); }
.mt-score-meta b { color: var(--text-primary); }

.mt-topics { list-style: none; padding: 0; margin: 18px 0 0; }
.mt-topics li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-bottom: 12px; font-size: 14px; color: var(--text-primary); }
.mt-bar-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.mt-bar-fill { height: 100%; background: var(--primary); }

.mt-avatars { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 10px; margin: 8px 0 14px; }
.mt-avatars button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--bg);
    font-size: 22px;
    cursor: pointer;
}
.mt-avatars button[aria-pressed="true"] { border-color: var(--primary); background: var(--pill-bg); }
.mt-field { margin-bottom: 12px; }
.mt-field input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    font: 16px "Inter", sans-serif;
    border: 1px solid var(--border);
    border-radius: var(--mt-radius);
    background: var(--surface-input);
    color: var(--text-primary);
}
.mt-field input[type="text"]:focus { outline: none; border-color: var(--primary); }
.mt-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); font-weight: 400; margin: 0 0 14px; }


.mt-cta { border-color: var(--primary); }

/* ---------- Question content (exam, review, archive) ---------- */

.mt-rich p { margin: 0 0 10px; color: var(--text-primary); }
.mt-rich p:last-child { margin-bottom: 0; }
.mt-rich ul { margin: 0 0 10px; padding-left: 22px; color: var(--text-primary); }
.mt-rich li { margin-bottom: 4px; }
.mt-rich table { border-collapse: collapse; margin: 6px 0 12px; font-size: 14px; display: block; overflow-x: auto; max-width: 100%; }
.mt-rich th, .mt-rich td { border: 1px solid var(--mt-choice-border); padding: 6px 10px; text-align: left; white-space: nowrap; }
.mt-rich th { background: var(--bg); }
/* Fenced blocks: ```keystrokes (BA II Plus key sequences) in calculator explanations.
   Monospace on a subdued panel, as the app's LaTeXView. Unlike the app, lines do not
   wrap: one keystroke step per line, and a wrapped step leaves "→" at the end of one
   line with its result on the next, which reads as a separate step. A long line
   scrolls sideways instead, like the tables above. */
.mt-rich pre.mt-code {
    margin: 4px 0 12px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
}
.mt-rich pre.mt-code code { font: inherit; background: none; padding: 0; }
.mt-rich pre.mt-code-keystrokes { border-left: 3px solid var(--mt-choice-border); }
.mt-rich .katex { font-size: 1.05em; }
.mt-rich .katex-display { margin: 8px 0; overflow-x: auto; overflow-y: hidden; }

.mt-review-item { border-top: 1px solid var(--border); padding: 18px 0; }
.mt-review-item:first-child { border-top: 0; padding-top: 0; }
/* Archive list: each question is wrapped with its own "Show answer" button. The divider
   and the padding move to that wrapper, so the button sits inside the block it belongs
   to. Before this the button had 18px of the question's padding above it and nothing at
   all below, which read as a header for the NEXT question. The :first-child reset above
   also matched every item here, since each one is the first child of its own wrapper,
   so the archive had no dividers between questions either. */
.mt-q-block { border-top: 1px solid var(--border); padding: 18px 0 30px; }
.mt-q-block:first-child { border-top: 0; padding-top: 0; }
.mt-q-block > .mt-review-item { border-top: 0; padding: 0; }
/* No margin of its own: the choice list's 12px bottom margin collapses out of the
   padding-less item and is already the gap. Adding to it was what left the button
   stranded midway between two questions. 12px up to its own question, 30px plus the
   divider down to the next one. */
.mt-q-block > [data-reveal] { margin-top: 0; }
.mt-review-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
/* Tick or cross plus the word. The glyph sits in a tinted pill so it survives a quick
   scroll down ten questions, which is how this list actually gets read. */
.mt-mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.mt-mark b { display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; font-size: 13px; line-height: 1; }
.mt-mark--ok { color: var(--success-fg); }
.mt-mark--ok b { background: rgba(45,212,168,0.18); }
.mt-mark--bad { color: var(--error-fg); }
.mt-mark--bad b { background: rgba(228,99,90,0.18); }
.mt-choice-list { list-style: none; padding: 0; margin: 12px 0; }
.mt-choice-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--mt-choice-border);
    border-radius: 8px;
    color: var(--text-primary);
}
.mt-choice-list li.correct { border-color: var(--primary); background: var(--pill-bg); }
.mt-choice-list li.wrong { border-color: var(--error-fg); background: var(--error-bg); }
.mt-choice-list .letter { font-weight: 700; color: var(--text-secondary); }
.mt-explain { background: var(--bg); border-radius: 8px; padding: 12px 14px; font-size: 15px; }
.mt-explain[hidden] { display: none; }

/* ---------- Translation (the app's Bilingual Assist, answer review only) ----------
   Same shape as the app's TranslationBlockView: a tinted block with a teal edge,
   right under the English it translates. */
.mt-tr {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--mt-stem-bg);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-primary);
}
.mt-tr[dir="rtl"] { border-left: 0; border-right: 3px solid var(--primary); }
/* Math stays left-to-right inside Arabic text, or the bidi algorithm moves a leading
   minus sign to the end of "-0.80 x 0.0010". */
.mt-tr .katex, .mt-tr-choice .katex { direction: ltr; unicode-bidi: isolate; }
.mt-tr p { margin: 0 0 8px; }
.mt-tr p:last-child { margin-bottom: 0; }
.mt-explain .mt-tr { background: var(--surface); }
.mt-tr-choice { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.mt-qhead { flex-wrap: wrap; }
.mt-qhead-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mt-tr-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.mt-tr-pick select {
    font: inherit;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
}
.mt-tr-status { margin: 0 0 12px; font-size: 13px; color: var(--error-fg); }
.mt-tr-status[hidden] { display: none; }

.mt-globe {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 40;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}
.mt-globe svg { width: 22px; height: 22px; }
.mt-globe.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.mt-globe.busy { opacity: 0.6; }
.mt-globe:active { transform: scale(0.92); }
/* Language list that opens from the globe when no language is known yet. */
.mt-globe-menu {
    position: fixed;
    right: 20px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 41;
    min-width: 168px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.mt-globe-menu[hidden] { display: none; }
.mt-globe-menu button {
    font: inherit;
    font-size: 15px;
    text-align: start;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
}
.mt-globe-menu button:hover, .mt-globe-menu button:focus-visible { background: var(--bg); outline: none; }
/* Globe clearance (app rule): nothing tappable may end up under the button. */
body.mt-has-fab .site-foot { padding-bottom: 88px; }

/* ---------- Exam screen ---------- */

body.mt-exam-mode { overflow: hidden; }

.ex {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    background: var(--bg);
    color: var(--text-primary);
}

.ex-top {
    background: var(--mt-bar);
    color: var(--mt-bar-text);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    font-size: 13px;
}
.ex-where b { font-weight: 600; }
.ex-clock { display: flex; align-items: center; gap: 8px; justify-self: center; text-align: left; line-height: 1.25; }
.ex-clock svg { width: 22px; height: 22px; flex: none; }
.ex-clock .t { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-clock.warn .t { color: var(--mt-warn); }
.ex-right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.ex-progress { width: 120px; text-align: center; font-size: 11px; color: var(--text-secondary); }
.ex-progress .track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
.ex-progress .fill { height: 100%; background: var(--primary); transition: width 0.2s; }
.ex-finish {
    font: 600 14px "Inter", sans-serif;
    padding: 9px 18px;
    border-radius: 6px;
    border: 0;
    background: var(--text-primary);
    color: var(--bg);
    cursor: pointer;
}
.ex-finish:hover { background: var(--primary); }

.ex-sub {
    background: var(--primary);
    color: var(--primary-fg);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px;
    font-size: 13px;
}
.ex-sub b { font-weight: 700; }
.ex-save { font-size: 12px; font-weight: 600; opacity: 0.85; }
.ex-save.saving { opacity: 0.7; }
.ex-save.offline { background: var(--mt-bar); color: var(--mt-warn); padding: 0 8px; border-radius: 4px; opacity: 1; }

.ex-body { display: grid; grid-template-columns: 112px 1fr; min-height: 0; }

.ex-rail { overflow-y: auto; padding: 8px 10px; border-right: 1px solid var(--border); }
.ex-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 72px;
    height: 24px;
    margin: 0 0 6px;
    border: 0;
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-primary);
    font: 600 12px "Inter", sans-serif;
    cursor: pointer;
}
.ex-pill:hover { background: var(--mt-stem-bg); }
.ex-pill.current { background: var(--primary); color: var(--primary-fg); }
/* Square right corners on the current pill, so the arrow joins it flush instead of
   leaving a notch where the rounded corner meets the triangle. */
.ex-rail .ex-pill.current { border-radius: 4px 0 0 4px; }
.ex-rail .ex-pill.current::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 0;
    border-style: solid;
    border-width: 12px 0 12px 10px;
    border-color: transparent transparent transparent var(--primary);
}
.ex-pill svg { width: 11px; height: 11px; }

.ex-main { overflow-y: auto; padding: 16px 24px 32px; }
.ex-card { max-width: 860px; }
.ex-stem { background: var(--mt-stem-bg); border-radius: 6px; padding: 16px 18px; font-size: 16px; line-height: 1.6; margin-bottom: 16px; }
.ex-topic { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; }

.ex-choice { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 6px; margin-bottom: 12px; }
.ex-choice .letter { padding-top: 12px; font-size: 14px; color: var(--text-secondary); }
.ex-choice button {
    text-align: left;
    width: 100%;
    padding: 12px 14px;
    font: 15px/1.5 "Inter", sans-serif;
    color: var(--text-primary);
    background: transparent;
    border: 2px solid var(--mt-choice-border);
    border-radius: 4px;
    cursor: pointer;
}
@media (hover: hover) {
    .ex-choice button:hover { border-color: var(--text-secondary); }
}
.ex-choice button[aria-checked="true"] { background: var(--mt-selected-bg); border-color: var(--primary); }
.ex-choice button.struck { color: var(--text-secondary); text-decoration: line-through; }
.ex-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

.ex-bottom {
    background: var(--mt-bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    border-top: 3px solid var(--primary);
}
.ex-tools, .ex-nav { display: flex; align-items: center; gap: 8px; }
.ex-icon {
    width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}
.ex-icon:hover { background: var(--surface); }
.ex-icon svg { width: 22px; height: 22px; }
.ex-navbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
    font: 600 14px "Inter", sans-serif;
    cursor: pointer;
}
.ex-navbtn:hover:not(:disabled) { background: var(--mt-stem-bg); }
.ex-navbtn:disabled { opacity: 0.4; cursor: default; }
.ex-navbtn.primary { background: var(--primary); color: var(--primary-fg); }
.ex-navbtn.primary:hover:not(:disabled) { background: var(--primary-hover); }
.ex-navbtn svg { width: 14px; height: 14px; }
.ex-flag[aria-pressed="true"] { background: var(--mt-warn-bg); color: var(--mt-warn); }

/* Section Review panel */
.ex-review {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(360px, 92vw);
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform 0.2s ease;
    z-index: 20;
}
.ex-review.open { transform: none; }
.ex-review header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--mt-bar); font-weight: 600; padding-top: max(14px, env(safe-area-inset-top)); }
.ex-review .filters { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.ex-review .filters label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text-primary); margin: 6px 0; }
.ex-review .filters .row { display: flex; justify-content: space-between; align-items: flex-end; }
.ex-review .grid { padding: 12px 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; }
.ex-review .grid .ex-pill { width: 100%; height: 30px; margin: 0; }
.ex-review .grid .ex-pill.attempted { box-shadow: inset 0 -3px 0 var(--primary); }
.ex-review .legend { padding: 0 16px 16px; font-size: 12px; color: var(--text-secondary); }
.ex-review .filters-title { margin-bottom: 4px; color: var(--text-secondary); }
.ex-review-empty { grid-column: 1 / -1; color: var(--text-secondary); font-size: 14px; }
.ex-review-finish { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); }
.ex-review-finish .ex-navbtn { width: 100%; justify-content: center; height: 44px; }
.ex-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 15; }

/* Dialogs */
.ex-dialog-wrap { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 30; }
.ex-dialog { width: min(440px, 100%); background: var(--surface); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.ex-dialog header { background: var(--mt-bar); padding: 12px 16px; font-weight: 600; font-size: 15px; }
.ex-dialog .content { padding: 24px 22px; text-align: center; }
.ex-dialog .content svg { width: 44px; height: 44px; color: var(--mt-warn); margin-bottom: 10px; }
.ex-spinner { width: 36px; height: 36px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: ex-spin 0.8s linear infinite; }
@keyframes ex-spin { to { transform: rotate(360deg); } }
.ex-dialog .content p { color: var(--text-primary); font-weight: 600; margin: 0 0 10px; }
.ex-dialog .actions { display: flex; justify-content: center; gap: 10px; padding: 0 22px 22px; }
.ex-dialog .actions .ex-navbtn:not(.primary) { border: 1px solid var(--border); background: var(--bg); }

/* Celebration: shown once, right after submit, to ask for a name while the score is
   still on screen. Reuses .ex-dialog-wrap / .ex-dialog so it is the same object as the
   Confirm Finish dialog, with a result-coloured head and a scrollable body: on a short
   phone the 16-avatar grid plus the keyboard would otherwise push the buttons off. */
body.mt-modal-open { overflow: hidden; }
/* Above the site header (50) and the translation FAB (41). The exam dialogs can stay at
   30 because the exam screen has no site chrome; the result screen does. */
.mt-celebrate { align-items: flex-start; padding: 16px; overflow-y: auto; z-index: 60; }
.mt-celebrate-box { width: min(420px, 100%); margin: auto; }
.mt-celebrate-top { padding: 22px 20px 18px; text-align: center; background: var(--mt-bar); border-bottom: 1px solid var(--border); }
.mt-celebrate-top--high { background: linear-gradient(160deg, rgba(45,212,168,0.22), rgba(45,212,168,0.06)); }
.mt-celebrate-top--mid { background: linear-gradient(160deg, rgba(138,180,255,0.18), rgba(138,180,255,0.05)); }
.mt-celebrate-top--low { background: linear-gradient(160deg, rgba(240,180,41,0.16), rgba(240,180,41,0.05)); }
.mt-celebrate-score { font-size: 54px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.mt-celebrate-score small { font-size: 22px; color: var(--text-secondary); font-weight: 600; }
.mt-celebrate-line { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.mt-celebrate-body { padding: 18px 20px 20px; }
.mt-celebrate-avatars { grid-template-columns: repeat(auto-fill, 44px); gap: 8px; margin: 0 0 16px; }
.mt-celebrate-body .mt-btn { width: 100%; }
/* A way out, not a second choice: secondary text, no fill, no underline, so Next stays
   the only thing that looks like a button. The padding is the tap target, not looks. */
.mt-celebrate-skip { display: block; margin: 6px auto 0; padding: 10px 16px; color: var(--text-secondary); font-weight: 500; }
.mt-celebrate-skip:hover:not(:disabled) { color: var(--text-primary); }
.mt-celebrate-skip:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 420px) {
    .mt-celebrate-score { font-size: 46px; }
    .mt-celebrate-avatars { grid-template-columns: repeat(auto-fill, 40px); }
    .mt-celebrate-avatars button { width: 40px; height: 40px; font-size: 20px; }
}

/* Tabs on the two result pages. The bar bleeds to the card edges with negative margins
   so the underline reads as a real tab strip rather than a pair of buttons floating
   inside the padding. 44px tall: thumb target on a phone, which is nearly all of this
   traffic. */
.mt-tabs {
    display: flex; gap: 0;
    margin: -24px -24px 18px; padding: 0 8px;
    border-bottom: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    background: var(--bg);
}
.mt-tab {
    flex: 1 1 0; min-width: 0;
    height: 48px; padding: 0 10px;
    background: none; border: 0; border-bottom: 2px solid transparent;
    color: var(--text-secondary); font: 600 15px "Inter", sans-serif;
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-tab b { font-variant-numeric: tabular-nums; }
.mt-tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--primary); }
.mt-tab[aria-selected="true"] b { color: var(--primary); }
.mt-tabpanel[hidden] { display: none; }

/* The band line, repeated from the modal so it can be re-read on the page itself. */
.mt-band-line { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.45; }

/* A CTA closing a panel is already inside the tab card, so it drops the outer card look
   and just separates itself with a rule. */
.mt-tabpanel > .mt-cta { margin: 22px -24px -24px; border-radius: 0 0 14px 14px; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }

/* The viewer's own row, pinned to the top of the board while they scroll it. The site
   nav is itself sticky at top:0 and 81px tall, so sticking at 0 would park this row
   underneath it. --mt-nav-h is set from the real nav height at render time, because a
   hard-coded offset breaks the day the nav changes. */
.mt-youbar {
    position: sticky; top: calc(var(--mt-nav-h, 81px) + 8px); z-index: 2;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px; padding: 10px 12px;
    background: var(--pill-bg); border: 1px solid var(--primary); border-radius: 10px;
    font-size: 15px;
}
.mt-youbar-rank { font-weight: 700; color: var(--primary); white-space: nowrap; }
.mt-youbar .who { flex: 1 1 auto; min-width: 0; }
.mt-youbar .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-secondary); }

@media (max-width: 760px) {
    .mt-tab { font-size: 14px; padding: 0 6px; }
    .mt-title { font-size: 28px; }
    .mt-facts { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ex-body { grid-template-columns: 1fr; }
    .ex-rail { display: none; }
    .ex-top { grid-template-columns: auto 1fr auto; padding-left: 12px; padding-right: 12px; }
    .ex-clock .label { display: none; }
    .ex-progress { display: none; }
    .ex-sub .cand { display: none; }
    .ex-main { padding: 12px 14px 24px; }
    .ex-stem { font-size: 15px; padding: 14px; }
    .ex-navbtn { height: 44px; padding: 0 14px; }
    .ex-icon { width: 44px; height: 44px; }
    .ex-flag .lbl { display: none; }
    .ex-review .grid .ex-pill { height: 44px; font-size: 14px; }
    .ex-sub { font-size: 12px; }
    .ex-hint { display: none; }
}