@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Onest:wght@400..900&display=swap');

/* Design tokens live in css/tokens.css, which loads first. */

/* ─── Reset ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--canvas);
    color: var(--ink);
    font-family: var(--font-text);
    overflow-x: hidden;
    min-height: 100vh;
}

/* ─── Background Mesh & Particles Canvas ─── */
.bg-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#particles-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ─── Keyframe Animations ─── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* There were two bare `header` rules here, from a site header that no longer
   exists. The app has exactly two <header> elements — .quiz-hud and
   .mobile-shell-bar — and both style themselves, so all these rules did was
   leak position, width and a box-shadow into the quiz bar. The shadow the quiz
   bar wants is now declared on .quiz-hud, where it can be read.
   .logo went with them: it appears in no markup. */


/* ─── Main Container ─── */
/* There were four bare `main` rules across this file, from a single-column
   layout that no longer exists. The app has two <main> elements: #app-root,
   which resets all of this with in platform-shell.css, and
   .quiz-stage, which declares its own width, margin and padding. Nothing here
   reached either of them. */

/* Fresh views start hidden+nudged and animate in on the next frame.
   Painting happens immediately; only the fade-in is deferred, so there
   is no blocking delay before content appears. */
.view-enter {
    opacity: 0;
    transform: translateY(6px);
}


@media (prefers-reduced-motion: reduce) {
    .view-enter {
        opacity: 1;
        transform: none;
    }
}

/* ─── Glass Container (shared) ─── */

.text-accent {
    color: var(--accent);
}


/* ─── Accent Colors for Exam Cards ─── */
.accent-cyan {
    border-color: var(--line);
}


.accent-gold {
    border-color: var(--line);
}


.accent-emerald {
    border-color: var(--line);
}


/* ═══════════════════════════════════════════
   HOME VIEW — Footer
   ═══════════════════════════════════════════ */

footer {
    padding: var(--space-8) 0 var(--space-6);
    border-top: 1px solid var(--line);
    margin-top: var(--space-7);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.footer-links {
    display: flex;
    gap: var(--space-6);
    font-size: var(--fs-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--text-muted);
}

.footer-link {
    cursor: pointer;
    transition: var(--transition);
}

.footer-link:hover {
    color: var(--text-primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

/* ═══════════════════════════════════════════
   TEST LIST VIEW
   ═══════════════════════════════════════════ */

.section-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-6);
    padding-top: 5rem;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.section-heading h2 {
    font-size: var(--fs-display);
    font-family: var(--font-heading);
    font-weight: 800;
}

.section-heading p {
    max-width: 48ch;
    color: var(--text-secondary);
}

.section-heading-tight {
    margin-bottom: 0;
}


.test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* ── Test Cards (inner list) ── */
/* Surface, hover, focus ring and the accent rule come from
   .card .card--action .card--rule. */
.test-card {
    position: relative;
    overflow: hidden;
    color: inherit;
    font: inherit;
}

/* Shape, size and tone come from .chip in css/primitives.css. */
.test-badge {
    align-self: flex-start;
}

.test-card h3 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--fs-lg);
    font-family: var(--font-heading);
    font-weight: 800;
}

.test-card p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    min-height: 1.5em;
}

.exam-cta {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--cyan);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: var(--transition);
}

.test-card:hover .exam-cta {
    color: var(--warning);
}

/* ═══════════════════════════════════════════
   QUIZ VIEW
   ═══════════════════════════════════════════ */

.quiz-layout {
    display: grid;
    gap: var(--space-4);
    padding-top: 5rem;
}


.quiz-map {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: center;
}

/* The question map, the option buttons and the option markers each had three
   definitions — two here and one in platform-shell.css, which scopes them under
   .quiz-stage / .quiz-hud-map and therefore won every property it named. What
   survived from here was only what the winner did not restate: a translucent
   hover fill on the dots, and a translateY lift plus a 22px drop shadow on the
   options. Both were invisible to the diff, because hover is not captured.
   All three surfaces now live once, in platform-shell.css. */

/* The shell is sized by .quiz-stage .question-image-shell; only the image
   itself is described here. */
.question-image {
    display: block;
    width: 100%;
    max-height: 285px;
    object-fit: contain;
    border-radius: var(--radius);
}

/* ── Options ── */
.options-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.opt-val {
    flex: 1 1 auto;
    line-height: 1.45;
}

.quiz-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* ═══════════════════════════════════════════
   BUTTONS (Unified — NO Duplicates)
   ═══════════════════════════════════════════ */

/* .btn-primary and .btn-secondary are the .btn primitive; see
   css/primitives.css. Three definitions used to describe them — this one, a
   second one further down this file with four declarations, and a
   third in platform-shell.css that won. Between them they held a 14px radius,
   a 48px height, a translateY lift and two translucent fills, none of which
   rendered.
   `.danger` was the worst of it: `color: var(--surface)` over a 4%-white fill,
   i.e. white text on near-white. It is .btn--danger now. */

/* ═══════════════════════════════════════════
   RESULTS VIEW
   ═══════════════════════════════════════════ */

/* Padding and margin come from the .results-panel rule in platform-shell.css,
   which is the one that renders; the 5rem margin and 48px/32px padding here
   never applied. */
.results-panel {
    text-align: center;
    animation: fadeInUp 0.6s ease both;
}

.hero-eyebrow {
    margin-bottom: var(--space-3);
}

.result-title {
    margin-top: var(--space-2);
    font-size: var(--fs-display);
    font-family: var(--font-heading);
    font-weight: 800;
}

.result-subtitle {
    max-width: 55ch;
    margin: var(--space-3) auto 0;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.6;
}

.stats-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* Surface from .card .card--tight. A read-only stat has no hover state. */

.stat-box .val {
    display: block;
    font-size: var(--fs-xl);
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--ink);
}

.stat-box .label {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.result-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.payment-hint {
    max-width: 58ch;
    margin: var(--space-4) auto 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.payment-status {
    min-height: 1.3rem;
    margin-top: var(--space-3);
    color: var(--rose);
    font-size: var(--fs-sm);
    font-weight: 700;
}


.subscribe-payment-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: var(--space-4) 0 var(--space-6);
}

/* Padding from .card--roomy in the markup. */
.subscribe-payment-hero {
    margin-bottom: var(--space-4);
}

.subscribe-payment-hero h1 {
    margin: var(--space-1) 0 var(--space-2);
    font-size: var(--fs-display);
}

.subscribe-payment-hero p {
    max-width: 72ch;
    color: var(--text-secondary);
    line-height: 1.6;
}

.subscribe-payment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.manual-payment-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-4);
    align-items: start;
}

/* Both are .card at its default padding, and the transfer card is .card--sunken;
   nothing here was doing anything the primitive does not. */

.manual-transfer-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 900;
    box-shadow: 0 18px 30px color-mix(in srgb, var(--ink) 12%, transparent);
}

.manual-transfer-kicker {
    display: block;
    text-align: center;
    color: var(--primary);
    font-size: var(--fs-caption);
    font-weight: 900;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

/* Surface, border and radius come from .card .card--action in the markup —
   it is a button you press to copy the number, so it is an interactive card.
   The 28px drop shadow it used to carry was the largest in the app and marked
   nothing: the number sits inside a panel, it is not floating above one. */
.manual-card-number {
    width: 100%;
    margin: var(--space-4) 0;
    padding: var(--space-4);
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-weight: 900;
    letter-spacing: 0.28em;
}

.manual-transfer-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.manual-transfer-details span {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 800;
}

.manual-transfer-details strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-primary);
}

.manual-copy-btn {
    width: 100%;
    justify-content: center;
}

.manual-steps {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--accent-hover) 12%, transparent);
}

.manual-steps strong {
    display: block;
    margin-bottom: var(--space-2);
}

.manual-steps ol {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--text-secondary);
    line-height: 1.55;
}

.manual-request-card h2 {
    margin: 0 0 var(--space-4);
}

.manual-payment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.manual-payment-form .full {
    grid-column: 1 / -1;
}

.manual-payment-form textarea {
    min-height: 118px;
    resize: vertical;
}

.manual-payment-form p {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    line-height: 1.45;
}

.payment-status.success {
    color: var(--success);
}

.manual-payment-requests {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
}

.manual-request-history {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--accent-hover) 12%, transparent);
}

.manual-request-history h3 {
    margin: 0;
    font-size: var(--fs-base);
}

.manual-request-history-list {
    display: grid;
    gap: var(--space-2);
}

/* A row in a list of rows: .card .card--row in the markup. It was the last
   translucent surface in the application — a 72% white that let the canvas
   through, so the pair could not be contrast-checked as a fixed value. */
.manual-request-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.manual-request-row strong,
.manual-request-row span {
    display: block;
}

.manual-request-row span {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 700;
}

.manual-request-row p {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.manual-request-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.admin-payment-panel {
    display: grid;
    gap: var(--space-4);
}

.admin-payment-list {
    display: grid;
    gap: var(--space-3);
}

.admin-payment-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
}

.admin-payment-title,
.admin-payment-meta,
.admin-payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.admin-payment-meta {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

.admin-payment-main p {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.admin-payment-status.approved {
    border-color: var(--success);
    color: var(--success);
}

.admin-payment-status.rejected,
.admin-payment-status.canceled {
    border-color: var(--danger);
    color: var(--danger);
}

.admin-payment-note {
    color: var(--danger);
}

/* ═══════════════════════════════════════════
   HISTORY VIEW
   ═══════════════════════════════════════════ */

.history-panel {
    padding: var(--space-6);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.history-table th {
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.history-table tbody tr {
    transition: var(--transition);
}

.history-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.success {
    color: var(--success);
    font-weight: 800;
}

.warning {
    color: var(--warning);
    font-weight: 800;
}

/* ═══════════════════════════════════════════
   ADMIN VIEW
   ═══════════════════════════════════════════ */

.small-auth {
    max-width: 440px;
    margin: 6rem auto 0;
    animation: fadeInUp 0.6s ease both;
}

.auth-form {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.auth-form label {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Padding from .card--tight. styles.css loads after primitives.css, so leaving a
   padding here would quietly beat the variant. */
.admin-panel-ui {
    animation: fadeInUp 0.5s ease both;
}

.admin-grid-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

/* .input-shell and its label are .field in css/primitives.css. */
.input-shell.full {
    grid-column: span 2;
}

.admin-grid-form .btn-primary.full {
    grid-column: span 2;
    margin-top: var(--space-4);
}

.admin-log {
    grid-column: span 2;
    min-height: 3em;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
}

.admin-log .success { color: var(--success); }
.admin-log .error { color: var(--danger); }
.admin-log .info { color: var(--accent); }


.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

/* ─── Test Management ─── */
.admin-test-manager {
    display: grid;
    gap: var(--space-3);
    text-align: left;
}

.admin-manage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
}

.admin-manage-row span {
    font-size: var(--fs-base);
    font-weight: 500;
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Glass Input ─── */
/* .glass-input is .field-control; see css/primitives.css. Only the select's
   own chevron is particular to it.
   The arrow colour is spelled out because a data: URI cannot read a custom
   property — it is --line-control (#7b8a9a), the same value as the border it
   sits inside, and it must be changed with it. */
select.glass-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 9L1 4h10L6 9z' fill='%237b8a9a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    padding-right: var(--space-6);
}

/* ─── Answer Feedback ─── */
/* Tone in the border and the marker, on the plain surface — the rule .chip
   follows. The tinted fills these had were color-mix against transparent, so
   the pair could not be contrast-checked as a fixed value. */
.correct-answer {
    border-color: var(--success);
}

.wrong-answer {
    border-color: var(--danger);
}

.option-btn.correct-answer .opt-idx {
    background: var(--success);
    color: var(--surface);
}

.option-btn.wrong-answer .opt-idx {
    background: var(--danger);
    color: var(--surface);
}

.answer-feedback {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    padding: var(--space-2) 0;
}

.answer-feedback strong {
    color: var(--emerald);
}

/* ─── Open Answer ─── */
.open-answer-container {
    width: 100%;
    display: grid;
    gap: var(--space-4);
}

.open-answer-input {
    width: 100%;
    font-size: var(--fs-md);
    padding: var(--space-4);
    text-align: center;
    border-radius: var(--radius);
}

/* ─── KaTeX Overrides ─── */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
}

/* ═══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════ */


@media (max-width: 768px) {


    .section-top {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: var(--space-3);
        padding-top: var(--space-8);
    }

    .quiz-layout {
        padding-top: var(--space-8);
    }


    .stats-summary {
        grid-template-columns: 1fr;
    }

    .history-panel {
        padding: var(--space-4);
        overflow-x: auto;
    }

    .question-image {
        max-height: 280px;
    }

    .option-btn,
    .option-btn.compact,
    .option-btn.regular,
    .option-btn.wide {
        flex: 1 1 100%;
    }


    .footer-top {
        flex-direction: column;
        gap: var(--space-5);
    }

    .footer-links {
        gap: var(--space-5);
        font-size: var(--fs-caption);
    }
}

@media (max-width: 640px) {
    .admin-grid-form {
        grid-template-columns: 1fr;
    }

    .input-shell,
    .input-shell.full,
    .admin-grid-form .btn-primary.full,
    .admin-log {
        grid-column: span 1;
    }

}

@media (max-width: 768px) {

    .footer-top { flex-direction: column; gap: var(--space-6); text-align: center; }
}

/* ─── Auth Section ─── */
.auth-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.auth-container {
    width: 100%;
    max-width: 400px;
}

.auth-title {
    margin: 0;
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: 700;
}

.auth-footer {
}

.test-card:focus-visible,
.auth-footer:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

/* !important 1–4 of 14. A reduced-motion request is not a preference a
   component may override, so this has to beat every animation and transition
   in the application, whatever their specificity. This is the one place where
   !important is the correct tool rather than a symptom. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Profile Section ─── */
.profile-section {
    max-width: 800px;
    margin: var(--space-6) auto;
}


.user-avatar {
    width: 64px;
    height: 64px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: white;
}


.stat-card {
    padding: var(--space-6);
    text-align: center;
}

.stat-value {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}

.history-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-meta {
    display: flex;
    flex-direction: column;
}

.history-exam {
    font-weight: 600;
    color: var(--text-primary);
}

.history-date {
    font-size: var(--fs-caption);
    color: var(--text-secondary);
}

.history-score {
    font-weight: 700;
}

.score-high { color: var(--success); }
.score-low { color: var(--danger); }

.profile-section.profile-dashboard {
    max-width: 1120px;
    margin: 5.2rem auto 0;
    padding: 0 var(--space-4) var(--space-6);
}

.profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.profile-identity h1 {
    margin: var(--space-1) 0 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    line-height: 1;
    font-weight: 700;
}

.profile-identity p {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}


.profile-dashboard .user-avatar {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--surface);
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 800;
}


.profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

.profile-actions .btn-primary,
.profile-actions .btn-secondary,
.btn-primary.compact,
.btn-secondary.compact {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border-radius: 8px;
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.profile-stat-card {
    position: relative;
    padding: var(--space-4);
    min-height: 136px;
    overflow: hidden;
}

/* A decorative disc in the corner of each stat card. Kept, but on a fixed token
   rather than an 8% mix against transparent: the mix let the canvas through, so
   the disc was a slightly different colour on every surface it appeared on, and
   being a pseudo-element it never reached the audit to say so. */
.profile-stat-card::after {
    content: '';
    position: absolute;
    inset: auto -20px -42px auto;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--surface-sunken);
    pointer-events: none;
}

.stat-dot {
    display: inline-flex;
    width: 10px;
    height: 10px;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: var(--primary);
}

.stat-dot.accent { background: var(--accent); }
.stat-dot.gold { background: var(--gold); }
.stat-dot.rose { background: var(--rose); }

.profile-stat-card .stat-value {
    margin: 0;
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    line-height: 1;
    font-weight: 800;
}

.profile-stat-card .stat-label {
    margin-top: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    text-transform: uppercase;
}

.profile-insight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.85fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.profile-panel,
.profile-history-panel {
    padding: var(--space-4);
}

.profile-panel-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-4);
}

.profile-panel-head span {
    display: block;
    color: var(--accent);
    font-size: var(--fs-caption);
    font-weight: 800;
    text-transform: uppercase;
}

.profile-panel-head strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    line-height: 1;
}

.profile-bars {
    display: flex;
    align-items: end;
    gap: var(--space-3);
    height: 224px;
}

.profile-bar-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    min-width: 30px;
}

.profile-bar-item span {
    width: 100%;
    max-width: 54px;
    min-height: 12px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--accent);
}

.profile-bar-item small {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 800;
}

.profile-distribution {
    display: grid;
    gap: var(--space-4);
}

.distribution-row {
    display: grid;
    gap: var(--space-2);
}

.distribution-row > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--text-primary);
    font-size: var(--fs-base);
}

.distribution-row span {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 700;
    white-space: nowrap;
}

/* The track is a UI surface, not a diagram fill: --surface-sunken, so the pair
   with the accent bar on top of it is a fixed value that can be checked. */
.distribution-meter {
    height: 9px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
}

.distribution-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.profile-history-panel .history-items {
    margin-top: 0;
}

.profile-history-panel .history-item {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(100px, auto) minmax(92px, auto);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
}

.profile-history-panel .history-test {
    color: var(--text-secondary);
    font-weight: 800;
}

.profile-history-panel .history-score {
    display: grid;
    justify-items: end;
    gap: var(--space-1);
}

.profile-history-panel .history-score strong {
    font-size: var(--fs-base);
}

.profile-history-panel .history-score span {
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

/* Typography, centring and padding come from .state in primitives.css. The
   dashed border went with them: an empty state sits inside a card, so a second
   border around it was noise. */
.profile-empty-state {
    min-height: 224px;
}

.profile-empty-state.slim {
    min-height: 150px;
}

@media (max-width: 920px) {
    .profile-hero,
    .profile-insight-grid,
    .profile-stat-grid {
        grid-template-columns: 1fr;
    }

    .profile-actions {
        justify-content: flex-start;
    }

    .profile-history-panel .history-item {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .profile-history-panel .history-score {
        justify-items: start;
    }
}

/* ─── Break Section ─── */
.break-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.break-card {
    max-width: 500px;
    text-align: center;
    padding: var(--space-6);
}

.break-icon {
    font-size: var(--fs-display-sm);
    margin-bottom: var(--space-5);
}

.w-100 { width: 100%; }


/* --- Footer Refinement --- */
.footer-contact-info h4 {
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-link-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: var(--transition);
}

.footer-link-item:hover {
    color: var(--accent);
}

.contact-icon {
    font-size: var(--fs-base);
    filter: grayscale(1) brightness(1.5);
    transition: var(--transition);
}

.footer-link-item:hover .contact-icon {
    filter: grayscale(0) brightness(1);
}

@media (max-width: 768px) {
    .footer-contact-info {
        text-align: center;
        margin: var(--space-6) 0;
    }
    .footer-contact-links {
        align-items: center;
    }
}


/* --- Footer Layout Overrides --- */
.footer-top {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: var(--space-7);
    align-items: start;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-tagline {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.footer-links {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-end;
}


@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
    .footer-links {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-6);
    }
    .footer-col {
        align-items: center;
    }
    .footer-links {
        align-items: center;
    }
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-5);
        text-align: center;
    }
}

/* --- Admin Category Selection --- */
.admin-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* Surface, hover and selected state come from .card .card--tight .card--action.
   The old rule declared border twice and lifted on hover. */
.admin-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font: inherit;
    text-align: center;
}

.admin-category-item .cat-icon {
    font-size: var(--fs-lg);
}

.admin-category-item span {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-secondary);
}

.admin-category-item.active span {
    color: var(--text-primary);
}

/* --- Admin Test Manager --- */
.admin-manage-section {
    margin-bottom: var(--space-6);
}

.admin-manage-exam-title {
    color: var(--accent);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
}

.admin-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.admin-manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-manage-item .item-info {
    display: flex;
    flex-direction: column;
}

.admin-manage-item .item-name {
    font-weight: 700;
    font-size: var(--fs-sm);
}

.admin-manage-item .item-count {
    font-size: var(--fs-caption);
    color: var(--text-secondary);
}

.btn-icon-delete {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-delete:hover {
    background: var(--danger);
    color: white;
}

.btn-icon-delete:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.btn-icon-delete:disabled:hover {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}


/* A universal "letter-spacing: 0 !important" on * used to sit here. Because
 beats any non-important declaration whatever the file order, it
   flattened every tracking value in the application — 31 distinct declarations,
   including --ls-label on .chip and every eyebrow. Only the handful that were
   themselves survived, which is why the app looked as if it had a
   tracking system when it had a reset. Removed; the two tokens apply now. */

body {
    background-color: var(--bg-deep);
    background-image: none;
    color: var(--text-primary);
}

.bg-mesh {
    background: none;
    opacity: 0;
}

#particles-canvas {
    display: none;
}

/* .lang-switcher and .lang-btn: the switcher only ever appears in the sidebar,
   as `class="lang-switcher sidebar-lang-switcher"`, and every value here was
   already restated there. */



.text-accent {
    color: var(--rose);
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
}


.section-heading h2 {
    color: var(--text-primary);
    font-size: var(--fs-2xl);
    line-height: 1;
    font-weight: 700;
}

.section-heading p,
.test-card p,
.answer-feedback,
.footer-bottom {
    color: var(--text-secondary);
}


.test-card {
    min-height: 265px;
}


.test-card h3,
.auth-title {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 700;
}

.test-card h3 {
    font-size: var(--fs-xl);
}


.footer-links {
    color: var(--text-secondary);
}

.exam-cta {
    color: var(--accent);
}

.exam-cta {
    border-top-color: var(--line);
}


footer {
    border-top: 1px solid var(--line);
}

.footer-link:hover {
    color: var(--primary);
}

.section-top,
.quiz-layout {
    padding-top: 5.4rem;
}

.test-grid {
    gap: var(--space-4);
}

.test-card {
    min-height: 185px;
}


.auth-section,
.profile-section,
.break-section {
    color: var(--text-primary);
}

.admin-category-item {
    color: var(--ink);
}

/* The loading placeholder is .state .state--loading; a dashed box around it
   was the pattern decision 16 retired, and its 56%-white fill was translucent. */
.quiz-loading {
    width: 100%;
    min-height: 74px;
}

#nav-login {
    min-width: 86px;
    text-align: center;
}


.test-card.is-locked {
    opacity: 0.78;
}

.test-card.is-locked .exam-cta {
    color: var(--rose);
}

.admin-auth-copy {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
    font-weight: 700;
}

/* A checkbox and its label, so 1.4.11 applies to the edge: --line-control.
   The fill was a 72% white that let the canvas through — the last translucent
   control surface. 44px so the whole row is a target, not just the box. */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-control);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.checkbox-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.admin-access-shell p {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-caption);
    line-height: 1.45;
}

.admin-access-badge {
    margin-left: var(--space-2);
}

.admin-role-panel {
    display: grid;
    gap: var(--space-4);
}

.admin-role-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: end;
}

.admin-role-hint {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.admin-user-list {
    display: grid;
    gap: var(--space-3);
}

.admin-user-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-3);
}

.admin-user-row .item-info {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.admin-user-row .item-name,
.admin-user-row .item-count {
    overflow-wrap: anywhere;
}

.admin-user-row .item-count {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.admin-role-action {
    min-width: 132px;
}

.admin-role-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


@media (max-width: 768px) {
    #nav-admin-link {
        margin-right: 0;
    }



    .section-heading h2 {
        font-size: var(--fs-2xl);
    }

    .footer-top {
        align-items: flex-start;
        text-align: left;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}


/* --- LambdaPi refinements: admin, profile, quiz --- */
main:has(.quiz-layout) {
    max-width: min(100%, 1480px);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}


.profile-edit-card {
    padding: var(--space-4);
}

.profile-edit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
}

.profile-edit-form .btn-primary {
    align-self: end;
    min-width: 160px;
}

.profile-form-hint {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--fs-caption);
    line-height: 1.4;
}

.profile-save-status {
    min-height: 1.2rem;
    margin-top: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.profile-save-status.success {
    color: var(--emerald);
}

.profile-save-status.error {
    color: var(--rose);
}

.admin-shell {
    display: grid;
    gap: var(--space-4);
    padding-top: 5.4rem;
}



.admin-upload-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    gap: var(--space-4);
}


.admin-format-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.admin-format-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.admin-format-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

/* A radio in card form, so 1.4.11 applies to its edge. */
.admin-format-option > span {
    display: grid;
    gap: var(--space-1);
    min-height: 92px;
    padding: var(--space-3);
    border: 1px solid var(--line-control);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color 180ms ease, background 180ms ease;
}

.admin-format-option strong {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1.25;
}

.admin-format-option small {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    line-height: 1.4;
}

.admin-format-option:hover > span {
    border-color: var(--line-strong);
    background: var(--surface-sunken);
}

.admin-format-option input:checked + span {
    border-color: var(--accent);
    border-left-width: var(--rule);
    background: var(--accent-wash);
}

.admin-format-option input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 2px;
}

.admin-format-file-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-caption);
    line-height: 1.45;
}

.admin-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: 0;
}

.admin-category-item {
    min-height: 86px;
    justify-content: center;
    padding: var(--space-4);
}

.admin-category-item .cat-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--primary);
    background: color-mix(in srgb, var(--accent-hover) 10%, transparent);
    font-size: var(--fs-caption);
    font-weight: 900;
}

.admin-category-item.active .cat-icon {
    color: var(--surface);
    background: var(--primary);
}

.admin-manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}

.admin-manage-item {
    min-height: 78px;
    background: var(--surface);
    border-color: var(--line);
}

.quiz-layout {
    gap: var(--space-3);
    padding-top: 4.7rem;
}



.options-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}


/* A pull-quote: the shared condition several questions refer back to. Surface
   and border come from .card .card--wash; the leading rule is the callout form
   from --rule, replacing a 4px ::before bar. */
.nc-shared-context {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border-left: var(--rule) solid var(--accent);
}

.nc-shared-context-label {
    margin-bottom: var(--space-3);
    color: var(--primary);
    font-size: var(--fs-eyebrow);
    font-weight: 850;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.nc-shared-context-text {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1.62;
}

.nc-multipart-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
}

/* Surface, border and radius come from .card in the markup. */
.nc-part-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
}

.nc-part-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.nc-part-badge {
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--surface);
    font-size: var(--fs-caption);
    font-weight: 850;
    text-transform: lowercase;
}

.nc-part-prompt {
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.nc-part-input {
    width: 100%;
    min-height: 46px;
    font-variant-numeric: tabular-nums;
}

.nc-part-card.is-correct {
    border-color: var(--success);
}

.nc-part-card.is-wrong {
    border-color: var(--danger);
}

.nc-part-feedback {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: 1.45;
}

.nc-part-feedback span {
    color: var(--text-primary);
    font-weight: 750;
}


.admin-part-editor {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.admin-part-editor label {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.admin-part-editor label > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--accent);
    font-weight: 800;
}

.admin-correct-parts > label:not(:first-child) {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
}

.admin-correct-parts > label:not(:first-child) > span {
    color: var(--accent);
    font-weight: 850;
    text-align: center;
}

.open-answer-container,
.quiz-loading {
    grid-column: 1 / -1;
}

.quiz-actions {
    margin-top: var(--space-4);
}

@media (max-width: 980px) {


    .admin-upload-layout,
    .profile-edit-form {
        grid-template-columns: 1fr;
    }


    .manual-payment-layout,
    .manual-request-row,
    .admin-payment-item {
        grid-template-columns: 1fr;
    }

    .manual-request-row-actions,
    .admin-payment-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    main:has(.quiz-layout) {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }


    .admin-category-grid,
    .admin-grid-form {
        grid-template-columns: 1fr;
    }

    .admin-grid-form .full,
    .admin-grid-form .btn-primary.full,
    .admin-log {
        grid-column: span 1;
    }


    .options-list {
        grid-template-columns: 1fr;
    }

    .manual-payment-form,
    .manual-transfer-details {
        grid-template-columns: 1fr;
    }

    .manual-card-number {
        letter-spacing: 0.16em;
    }

    .profile-edit-form .btn-primary {
        width: 100%;
    }
}

.admin-category-item small {
    color: var(--rose);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    text-transform: uppercase;
}


.profile-topbar {
    margin-bottom: var(--space-4);
}

.auth-back-btn {
    justify-self: start;
}

.test-card h3,
.map-dot,
.pdf-q-num,
.stat-value,
.stat-box .val,
#quiz-count,
#timer-val,
#pdf-timer {
    font-family: 'Onest', Arial, sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
}

.test-card h3 {
    font-size: var(--fs-xl);
    line-height: 1.15;
    font-weight: 700;
}


.option-btn .katex {
    font-size: 1em;
}

.manual-payment-form .btn-secondary.full {
    grid-column: span 2;
}

@media (max-width: 720px) {
    .admin-format-picker {
        grid-template-columns: 1fr;
    }

    .admin-format-option > span {
        min-height: auto;
    }

    .nc-multipart-grid {
        grid-template-columns: 1fr;
    }



    #nav-login {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-caption);
        min-width: 0;
    }

    .manual-payment-form .btn-secondary.full {
        grid-column: span 1;
    }
}

/* Admin content operations: scoped access, visibility, sections, and question editing. */
.admin-manage-heading,
.admin-users-heading,
.admin-users-subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.admin-manage-item {
    gap: var(--space-2);
}

.admin-visibility-badge {
    width: max-content;
}

.admin-access-grant-card {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.admin-access-grant-card h3,
.admin-users-heading h2,
.admin-test-editor-card h2 {
    color: var(--text-primary);
    font-family: var(--font-heading);
}

/* Split out of the group above: a subsection heading inside an admin panel is
   not a page title. Its sibling .admin-access-grant-card h3 already said so —
   the two disagreed, and an #app-root h3 rule was hiding the disagreement. */
.admin-grant-list-shell h3 {
    color: var(--text-primary);
    font-family: var(--font-body);
}

.admin-access-grant-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: var(--space-3);
    align-items: end;
}

.admin-user-search-shell {
    position: relative;
}

.admin-user-suggestions {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    display: grid;
    gap: var(--space-1);
    max-height: 220px;
    overflow-y: auto;
    padding: var(--space-1);
}

.admin-user-suggestions[hidden] {
    display: none;
}

.admin-user-suggestion {
    display: grid;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.admin-user-suggestion:hover,
.admin-user-suggestion:focus-visible {
    background: var(--accent-wash);
}

.admin-user-suggestion:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: -3px;
}

.admin-user-suggestion span,
.admin-user-suggestion-empty {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.admin-user-suggestion-empty {
    padding: var(--space-2) var(--space-3);
}

.admin-grant-list-shell {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

#admin-grant-list {
    display: grid;
    gap: var(--space-2);
    max-height: min(420px, 56vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--space-1);
    scrollbar-gutter: stable;
}

.admin-grant-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) auto minmax(140px, 0.7fr) auto;
    gap: var(--space-3);
}

.admin-grant-row > div {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.admin-grant-row strong,
.admin-grant-row span {
    overflow-wrap: anywhere;
}

.admin-grant-row span {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.admin-section-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.admin-section-form,
#admin-section-list {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.admin-section-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto auto;
    gap: var(--space-3);
}

.admin-section-row > div {
    display: grid;
}

.admin-section-row span {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.admin-users-heading {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}

.admin-all-users-panel {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.admin-all-users-panel[hidden] {
    display: none;
}

.admin-users-subtitle {
    margin-bottom: var(--space-3);
}

.admin-all-users-panel .admin-user-list {
    max-height: min(380px, 52vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--space-1);
    scrollbar-gutter: stable;
}

.admin-user-row.has-delete {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.admin-test-editor-card {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    scroll-margin-top: 88px;
}

#admin-test-editor {
    scroll-margin-top: 88px;
}

.admin-editor-settings {
    display: grid;
    grid-template-columns: minmax(180px, 0.45fr) repeat(2, minmax(180px, 0.35fr));
    gap: var(--space-3);
    align-items: end;
}

.admin-question-editor-list {
    display: grid;
    gap: var(--space-3);
    max-height: 68vh;
    overflow: auto;
    padding-right: var(--space-1);
}

/* .card in the markup. */

.admin-question-editor summary {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}

.admin-question-editor summary span {
    color: var(--primary);
    font-weight: 900;
}

.admin-question-editor-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
}

.admin-language-editor {
    display: grid;
    gap: var(--space-2);
}

.admin-language-editor textarea {
    min-height: 116px;
    resize: vertical;
}

.admin-option-editor {
    display: grid;
    gap: var(--space-2);
}

.admin-option-editor label {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
}

.admin-option-editor label span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--surface);
    background: var(--primary);
    font-size: var(--fs-caption);
    font-weight: 900;
}

.admin-correct-answer {
    grid-column: 1 / -1;
    max-width: 220px;
}


@media (max-width: 980px) {
    .admin-access-grant-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-section-layout,
    .admin-grant-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-access-grant-form,
    .admin-role-form,
    .admin-editor-settings,
    .admin-question-editor-body,
    .admin-section-row,
    .admin-user-row,
    .admin-user-row.has-delete {
        grid-template-columns: 1fr;
    }

    .admin-role-form .btn-primary {
        width: 100%;
    }

    .admin-user-row .admin-access-badge {
        justify-self: start;
        margin-left: 0;
    }

    .admin-user-row .admin-role-action {
        width: 100%;
    }

    .admin-user-row .admin-user-delete {
        justify-self: end;
    }

    .admin-correct-answer {
        grid-column: auto;
    }

    .admin-manage-heading,
    .admin-users-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Grouped participant results and admin leaderboards. */
.results-by-section {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.results-section-heading,
.results-section-card-head,
.admin-results-heading,
.admin-results-subhead,
.admin-results-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.results-section-heading {
    padding: var(--space-1) var(--space-3);
}

.results-section-heading span,
.admin-results-subhead > div > span {
    display: block;
    color: var(--accent);
    font-size: var(--fs-eyebrow);
    font-weight: 850;
    text-transform: uppercase;
}

.results-section-heading h2,
.admin-results-heading h2,
.admin-results-subhead h3,
.admin-results-detail-head h2 {
    margin: var(--space-1) 0 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.results-section-heading h2 {
    font-size: var(--fs-lg);
}

/* A section number, so the same rule as .chip: one fixed fill, the tone in the
   label and the border. The green tint and the blue numeral inside it also
   disagreed about what colour this marker was. */
.results-section-heading > strong {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    background: var(--accent-wash);
}

.results-section-list {
    display: grid;
    gap: var(--space-4);
}

/* A card, not a lifted panel: the 14px/34px shadow and the 82%-opaque
   background both go, and the leading rule joins the one weight. */
.results-section-card {
    overflow: hidden;
    border-left-width: var(--rule);
    border-left-color: var(--accent);
}

.results-section-card-head {
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunken);
}

.results-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.results-section-code,
.admin-results-section-code {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 8px;
    color: var(--surface);
    background: var(--primary);
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    font-weight: 850;
}

/* A section subtitle inside a card, not a page title: the display serif is
   for h1 and h2. It rendered in the text face anyway, because an #app-root h3
   rule was silently correcting it from a higher specificity. */
.results-section-title h3 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-md);
}

.results-section-title p {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.results-section-percent,
.admin-participant-percent {
    min-width: 66px;
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    text-align: right;
}

.results-section-percent.is-high,
.admin-participant-percent.is-high {
    color: var(--emerald);
}

.results-section-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
}

.results-section-metrics > span {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 750;
    text-transform: uppercase;
}

.results-section-metrics > span + span {
    border-left: 1px solid var(--line);
}

.results-section-metrics strong {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--fs-md);
}

.results-test-list {
    display: grid;
}

.results-test-entry + .results-test-entry {
    border-top: 1px solid var(--line);
}

.results-test-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(130px, auto);
    gap: var(--space-4);
    align-items: center;
    min-height: 72px;
    padding: var(--space-3) 0 0;
}

.results-test-name,
.results-test-score {
    display: grid;
    gap: var(--space-1);
}

.results-test-name strong,
.results-test-score strong {
    color: var(--text-primary);
}

.results-test-name span,
.results-test-score span,
.results-test-attempt-count {
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

.results-test-score {
    justify-items: end;
}

.results-test-score strong {
    font-family: var(--font-heading);
    font-size: var(--fs-base);
}

.results-test-attempt-count {
    font-weight: 800;
}

.results-attempt-details {
    padding: 0 0 var(--space-3);
}

.results-attempt-details summary {
    width: max-content;
    color: var(--primary);
    font-size: var(--fs-caption);
    font-weight: 800;
    cursor: pointer;
}

.results-attempt-details > div {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-left: var(--space-3);
    border-left: var(--rule) solid var(--accent);
}

.results-attempt-details span {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto 52px;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.results-attempt-details b {
    color: var(--accent);
    text-align: right;
}

.profile-edit-card {
    margin-top: var(--space-4);
}

.admin-results-page {
    display: grid;
    gap: var(--space-4);
}

.admin-results-heading {
    align-items: end;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}

.admin-results-heading h2,
.admin-results-detail-head h2 {
    font-size: var(--fs-xl);
}

.admin-results-heading p,
.admin-results-detail-head p {
    max-width: 68ch;
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.admin-results-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-results-stats > div {
    display: grid;
    gap: var(--space-1);
    min-height: 96px;
    padding: var(--space-4);
}

.admin-results-stats > div + div {
    border-left: 1px solid var(--line);
}

.admin-results-stats strong {
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
}

.admin-results-stats span {
    color: var(--text-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    text-transform: uppercase;
}

.admin-results-sections,
.admin-participants-panel {
    display: grid;
    gap: var(--space-3);
}

.admin-results-subhead h3 {
    font-size: var(--fs-lg);
}

.admin-results-section-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.admin-results-section-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 18px;
    gap: var(--space-3);
    align-items: center;
    min-height: 78px;
    color: var(--ink);
}

.admin-results-section-card > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.admin-results-section-card strong,
.admin-results-section-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-results-section-card small {
    color: var(--text-muted);
}

.admin-results-section-card svg,
.admin-participant-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.admin-participant-tools {
    align-items: end;
}

.admin-participant-search {
    width: min(400px, 100%);
}

.admin-participant-list,
.admin-leaderboard-list {
    display: grid;
}

.admin-participant-row,
.admin-leaderboard-row {
    display: grid;
    grid-template-columns: 38px minmax(180px, 1.4fr) minmax(100px, 0.65fr) minmax(130px, 0.75fr) 66px 18px;
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    min-height: 76px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.admin-participant-row:last-of-type,
.admin-leaderboard-row:last-of-type {
    border-bottom: 0;
}

.admin-participant-row:hover,
.admin-participant-row:focus-visible,
.admin-leaderboard-row:hover,
.admin-leaderboard-row:focus-visible {
    background: var(--surface-sunken);
}

.admin-participant-row:focus-visible,
.admin-leaderboard-row:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: -3px;
}

.admin-participant-rank,
.admin-leaderboard-rank,
.admin-winner-place {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--primary);
    background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
    font-family: var(--font-heading);
    font-weight: 850;
}

.admin-participant-person,
.admin-participant-metric {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.admin-participant-person strong,
.admin-participant-person small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-participant-person small,
.admin-participant-metric small {
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

.admin-participant-metric strong {
    font-family: var(--font-heading);
}

.admin-results-detail-head {
    justify-content: flex-start;
    align-items: start;
}

.admin-results-detail-head > div {
    min-width: 0;
}

.admin-section-winner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
    color: var(--ink);
    border-color: var(--warning);
    border-left-width: var(--rule);
}

.admin-section-winner:hover,
.admin-section-winner:focus-visible {
    border-color: var(--warning);
    background: var(--surface-sunken);
}

.admin-section-winner > span:nth-child(2),
.admin-winner-score {
    display: grid;
    gap: var(--space-1);
}

.admin-section-winner small,
.admin-section-winner em {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-style: normal;
}

.admin-section-winner > span:nth-child(2) > small {
    color: var(--gold);
    font-weight: 850;
    text-transform: uppercase;
}

.admin-section-winner > span:nth-child(2) > strong {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
}

.admin-winner-score {
    justify-items: end;
}

.admin-winner-score strong {
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: var(--fs-md);
}

.admin-leaderboard-row {
    grid-template-columns: 38px minmax(180px, 1.25fr) repeat(3, minmax(90px, 0.55fr)) 66px;
}

.admin-section-results-link {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--text-primary);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.admin-section-results-link:hover strong,
.admin-section-results-link:focus-visible strong {
    color: var(--accent);
}

.admin-section-results-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--success) 35%, transparent);
    outline-offset: 4px;
}

@media (max-width: 980px) {
    .admin-results-section-grid,
    .admin-results-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-results-stats > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .admin-results-stats > div:nth-child(4) {
        border-top: 1px solid var(--line);
    }

    .admin-participant-row {
        grid-template-columns: 38px minmax(0, 1fr) 90px 66px 18px;
    }

    .admin-participant-row .admin-participant-metric:nth-of-type(3),
    .admin-leaderboard-row .admin-participant-metric:nth-of-type(4) {
        display: none;
    }

    .admin-leaderboard-row {
        grid-template-columns: 38px minmax(0, 1fr) 90px 100px 66px;
    }
}

@media (max-width: 680px) {
    .results-section-heading,
    .results-section-card-head,
    .admin-results-heading,
    .admin-results-subhead,
    .admin-participant-tools,
    .admin-results-detail-head {
        align-items: stretch;
        flex-direction: column;
    }

    .results-section-metrics {
        grid-template-columns: 1fr;
    }

    .results-section-metrics > span + span {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .results-test-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-2);
    }

    .results-test-attempt-count {
        justify-self: end;
    }

    .results-test-score {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .admin-results-section-grid,
    .admin-results-stats {
        grid-template-columns: 1fr;
    }

    .admin-results-stats > div + div,
    .admin-results-stats > div:nth-child(3) {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .admin-participant-search {
        width: 100%;
    }

    .admin-participant-row,
    .admin-leaderboard-row {
        grid-template-columns: 34px minmax(0, 1fr) 56px;
        gap: var(--space-2);
    }

    .admin-participant-row .admin-participant-metric,
    .admin-participant-chevron,
    .admin-leaderboard-row .admin-participant-metric {
        display: none;
    }

    .admin-section-winner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-winner-score {
        grid-column: 1 / -1;
        justify-items: start;
        padding-left: var(--space-7);
    }

    .results-attempt-details span {
        grid-template-columns: 1fr auto;
    }

    .results-attempt-details b {
        grid-column: 2;
    }
}