/* ═══════════════════════════════════════════════════════════════════════
   SurveyEngine — Application Stylesheet
   Ported from prototype.html design system. Depends on tokens.css.
═══════════════════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.5;
}

a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

button, input, select, textarea {
    font-family: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* ─── Shared Layout ──────────────────────────────────────────────────── */
.page-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ─── App Header (Student) ──────────────────────────────────────────── */
.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
    display: flex;
    align-items: center;
    height: 60px;
    gap: 16px;
}

    .app-header .logo-mark {
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* ─── Brand logo image (replaces old inline SVG mark) ───────────────── */
.brand-logo-img {
    display: block;
    /* FIX (client request 2026-07): logo was reading too small in the topbar/sidebar —
       bumped up from 34px on both desktop and mobile (there was no separate mobile
       override shrinking it further, so this one change covers both). */
    height: 46px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.login-app-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    padding: 6px;
}

.logo-arc-svg {
    width: 32px;
    height: 24px;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.app-header .spacer {
    flex: 1;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-muted);
}

    .header-user strong {
        color: var(--ink);
    }

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
}

    .btn-link:hover {
        text-decoration: underline;
    }

/* ─── Admin Layout ──────────────────────────────────────────────────── */
.admin-layout {
    display: flex;
    flex: 1;
    min-height: 100vh;
}

/* Light sidebar */
.admin-sidebar {
    width: 228px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.sidebar-logo {
    padding: 20px 18px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

    .sidebar-logo .logo-text {
        color: var(--ink);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

.sidebar-nav {
    flex: 1;
    padding: 4px 10px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    color: var(--ink-muted);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    margin-bottom: 2px;
    text-decoration: none;
}

    .sidebar-link:hover {
        color: var(--ink);
        background: var(--bg);
        text-decoration: none;
    }

    .sidebar-link.active {
        color: var(--accent);
        background: var(--accent-soft);
        font-weight: 600;
    }

    .sidebar-link .nav-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.6;
        transition: var(--transition);
    }

    .sidebar-link:hover .nav-icon {
        opacity: 0.85;
    }

    .sidebar-link.active .nav-icon {
        opacity: 1;
        color: var(--accent);
    }

/* Sidebar section label */
.sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 12px 12px 6px;
    opacity: 0.6;
}

/* Sidebar footer — user identity */
.sidebar-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.sidebar-user-role {
    font-size: 11.5px;
    color: var(--ink-muted);
}

/* Main content area */
.admin-main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

/* Page header — replaces slim topbar */
.admin-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 32px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}

    .admin-topbar h1 {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.02em;
    }

/* Page intro block — sits inside admin-content at top */
.page-intro {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-intro-text h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}

.page-intro-text p {
    font-size: 13.5px;
    color: var(--ink-muted);
    line-height: 1.5;
}

.page-intro-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}

.admin-content {
    padding: 28px 32px;
    flex: 1;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

    .btn:hover {
        text-decoration: none;
    }

/* Primary — full terracotta fill, commands attention.
   FIX (Phase 3 CSS/a11y review 2026-07): this comment used to say "full indigo fill" — a
   leftover from an earlier component-library pass that was never updated when the brand
   palette (tokens.css) was introduced. The rgba(79,70,229,...) shadow values below were the
   same leftover (Tailwind/shadcn indigo-600) and didn't match --accent at all. Background/
   border/shadow now use --accent-btn (a darkened terracotta tuned to clear WCAG AA's 4.5:1
   text-contrast minimum against the white label — plain --accent only measures 2.95:1). */
.btn-primary {
    background: var(--accent-btn);
    border-color: var(--accent-btn);
    color: #fff;
    box-shadow: 0 1px 2px rgba(200,73,39,0.20), 0 0 0 0 rgba(200,73,39,0);
}

    .btn-primary:hover {
        background: var(--accent-btn-hover);
        border-color: var(--accent-btn-hover);
        box-shadow: 0 2px 8px rgba(200,73,39,0.28);
        transform: translateY(-1px);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

/* Secondary — quiet outline, recedes behind primary */
.btn-secondary {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    font-weight: 500;
}

    .btn-secondary:hover {
        border-color: var(--accent-mid);
        background: var(--accent-soft);
        color: var(--accent);
    }

/* Danger */
.btn-danger {
    background: transparent;
    border-color: var(--warn-mid);
    color: var(--warn);
    font-weight: 500;
}

    .btn-danger:hover {
        background: var(--warn-soft);
        border-color: var(--warn);
    }

/* Ghost — text-only, no border */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--accent);
    font-weight: 500;
    padding-left: 8px;
    padding-right: 8px;
}

    .btn-ghost:hover {
        background: var(--accent-soft);
    }

.btn-sm {
    padding: 5px 12px;
    font-size: 13px;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
}

.btn:disabled, .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ─── Form controls ─────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    transition: var(--transition);
    outline: none;
}

    .form-input:hover:not(:focus) {
        border-color: var(--accent-mid);
    }

    .form-input:focus {
        border-color: var(--accent);
        /* FIX (Phase 3 CSS/a11y review 2026-07): leftover indigo (79,70,229) glow, didn't
           match --accent at all. This is a decorative focus ring (not text), so it just
           needs the correct brand hue — rgb(224,122,95) is --accent itself. */
        box-shadow: 0 0 0 3px rgba(224,122,95,0.12);
    }

.form-hint {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 5px;
    line-height: 1.5;
}

.form-error {
    font-size: 12px;
    color: var(--warn);
    margin-top: 5px;
    font-weight: 500;
}

/* ─── Cards ─────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    /* border-only: no shadow double-stack */
}

.card-header {
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .card-header h2 {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.01em;
    }

.card-body {
    padding: 24px;
}

/* ─── Badges / Pills ─────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 100px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-green {
    background: var(--success-soft);
    color: var(--success);
}

.badge-accent {
    background: var(--accent-soft);
    color: var(--accent);
}

.badge-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.badge-muted {
    background: #EFEAE2;
    color: var(--ink-muted);
}

.badge-draft {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Solid (not soft) warn variant — for the most severe status only, e.g.
   "High Risk Area" / "High Risk Deployment Profile" on the Pre-Result page,
   so it reads distinctly more urgent than the soft .badge-warn. */
.badge-danger {
    background: var(--warn);
    color: #FFF;
}

/* ─── Stat strips ────────────────────────────────────────────────────── */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    /* border-only, no double shadow */
}

.stat-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 10px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-card.warn .stat-value {
    color: var(--warn);
}

.stat-card.green .stat-value {
    color: var(--success);
}

.stat-card.accent .stat-value {
    color: var(--accent);
}

.stat-sub {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 6px;
}

/* ─── Two-column card grid (Dashboard / Board Report / Export) ────────
   FIX (layout audit, phase 1): this class was used in Dashboard.cshtml,
   BoardReport.cshtml, and Export.cshtml but had no rule at all, so the two
   cards just stacked as flush, gapless full-width blocks. An old rule further
   down still targeted a leftover inline-style selector from before this class
   existed — updated alongside this to match. */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* ─── Tables ─────────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

thead tr {
    background: #F4EFE5;
    border-bottom: 1.5px solid var(--line);
}

th {
    text-align: left;
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: #F4EFE5;
}

.mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
}

/* Checkbox column */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ─── Alert / Notice ─────────────────────────────────────────────────── */
.alert {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid;
}

.alert-info {
    background: var(--accent-soft);
    border-color: var(--accent-mid);
    color: var(--accent);
}

.alert-warn {
    background: var(--warn-soft);
    border-color: var(--warn-mid);
    color: var(--warn);
}

.alert-success {
    background: var(--success-soft);
    border-color: var(--success-mid);
    color: var(--success);
}

/* ─── Divider ────────────────────────────────────────────────────────── */
.divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 24px 0;
}

/* ─── Pagination / Toolbar ───────────────────────────────────────────── */
.table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-input {
    padding: 8px 12px;
    font-size: 13px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    outline: none;
    transition: var(--transition);
    width: 220px;
}

    .search-input:focus {
        border-color: var(--accent);
    }

/* ─── Admin: bulk actions / import / filters / pagination ────────────── */
/* Bespoke admin-only UI (no prototype screen equivalent) — built from the
   same tokens/patterns as the rest of the design system. */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.import-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.import-result {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.action-cell {
    text-align: right;
    white-space: nowrap;
}

    .action-cell form {
        display: inline-block;
    }

        .action-cell form + form {
            margin-left: var(--space-2);
        }

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.inline-field {
    margin-bottom: 0;
    min-width: 160px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* ─── Section titles ─────────────────────────────────────────────────── */
.section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCREEN 1 — LOGIN  (mobile-app splash)
═══════════════════════════════════════════════════════════════════════ */
.screen-login,
.screen-forgot {
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #FBEAE4 0%, #F9F6F0 50%, #EDF1EC 100%);
    justify-content: flex-end;
    align-items: stretch;
    /* FIX (mobile bottom gap): 100vh alone is measured against a viewport height that can
       disagree with the browser chrome actually on screen (address bar shown/hidden),
       leaving blank gradient space below the sheet on some phones. 100dvh tracks the real,
       current visible viewport and removes that gap on browsers that support it. The
       --app-vh custom property (set by viewport-height.js) is a further fallback for
       embedded browsers/WebViews that don't yet support dvh — on everything else the dvh
       line above already wins and this line is redundant but harmless. */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--app-vh, 1vh) * 100);
    padding: 0;
    position: relative;
    overflow: hidden;
}

    /* FIX (client request 2026-07): decorative background blobs removed from the mobile
       sign-in/forgot-password splash — client flagged the circular tint behind the logo as
       unwanted. (Desktop already hid these via the >=640px override below; removing them
       here as well means there's no viewport where they still show.) */
    .screen-login::before,
    .screen-forgot::before,
    .screen-login::after,
    .screen-forgot::after {
        display: none;
    }

/* FIX (submit button unreachable on Forgot Password): .screen-forgot's form has more fields
   (email + security code + new password w/ hint + confirm password) than .screen-login's, so
   its rendered content is taller than 100vh on most phones. The shared rule above sets
   overflow:hidden, which clips anything below the viewport with no way to scroll to it —
   in practice, the "Set new password" submit button. Login stays exactly as before (its two
   fields always fit); only the taller Forgot Password screen is allowed to grow and scroll. */
.screen-forgot {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Top splash area — logo + wordmark centred on the gradient */
.login-splash {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 32px;
    position: relative;
    z-index: 1;
}

.login-app-icon {
    /* FIX (client request 2026-07): logo details (crest artwork + wordmark) were still
       illegible at 108px, so doubled again here (mobile-first base) and in the ≥640px
       desktop override below. Border-radius scaled up to match so the squircle
       proportions still look right at the larger size. */
    width: 216px;
    height: 216px;
    background: var(--accent-soft);
    border: 1.5px solid var(--logo-outline-gold);
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.login-app-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.22;
    margin-bottom: 6px;
    max-width: 300px;
    /* FIX (mobile centering): .login-splash centers this block as a whole via
       align-items:center, but text inside a block-level element still defaults to
       left-aligned — so on 2-line names like "Secure Associate / Access Portal" the second
       (shorter) line reads as flush-left instead of centered under the first. */
    text-align: center;
    text-wrap: balance;
}

.login-app-tagline {
    font-size: 13px;
    color: var(--ink-muted);
    letter-spacing: 0.01em;
    text-align: center;
}

/* Bottom sheet — white panel that slides up from bottom */
.login-sheet {
    background: var(--surface);
    border-radius: 28px 28px 0 0;
    /* FIX (mobile bottom gap): add the device's safe-area inset (home-indicator area on
       notched phones) to the sheet's own bottom padding, instead of leaving that space as
       an unstyled gap between the sheet's content and the edge of the screen. */
    padding: 32px 28px calc(36px + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 1;
    box-shadow: 0 -4px 40px rgba(45,62,53,0.14);
}

.login-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    margin: 0 auto 24px;
}

.login-sheet-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.login-sheet-sub {
    font-size: 13.5px;
    color: var(--ink-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.login-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
}

    .login-footer a {
        color: var(--accent);
        font-weight: 500;
    }

/* Make inputs feel more native-app on mobile */
.login-sheet .form-input {
    padding: 13px 16px;
    font-size: 16px; /* prevent iOS zoom */
    border-radius: 12px;
}

.login-sheet .btn-primary {
    border-radius: 14px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Security code — shown once at activation/rotation, and typed in on Forgot Password */
.security-code-box {
    background: var(--accent-soft, #FBEAE4);
    border: 1.5px dashed var(--accent-mid, #E07A5F);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 4px 0 20px;
    text-align: center;
}

.security-code-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.security-code-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    word-break: break-all;
    margin-bottom: 10px;
}

.security-code-hint {
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
}

.security-code-input {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Forgot password sheet variant */
.forgot-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
}

.forgot-step-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: var(--ink-muted);
}

.forgot-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    /* FIX (Phase 3 CSS/a11y review 2026-07, follow-up sweep): white 12px/700 numeral on plain
       --accent measured 2.95:1 — well under WCAG AA's 4.5:1 for text this small (12px bold
       doesn't qualify for the 3:1 large-text exemption, which needs 14pt/18.66px bold minimum).
       --accent-btn is the same terracotta hue darkened to clear 4.5:1 (see tokens.css). */
    background: var(--accent-btn);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Desktop fallback — keep the old card feel on wide screens */
@media (min-width: 640px) {
    .screen-login,
    .screen-forgot {
        justify-content: center;
        align-items: center;
        padding: 40px 16px;
    }

        .screen-login .page-wrap,
        .screen-forgot .page-wrap {
            flex: none;
            width: 100%;
            max-width: 420px;
        }

    .login-splash {
        flex: none;
        padding: 40px 24px 24px;
    }

    .login-sheet {
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 420px;
        box-shadow: var(--shadow-lg);
        padding: 36px 40px 36px;
    }

    .login-sheet-handle {
        display: none;
    }

    .screen-login::before,
    .screen-login::after,
    .screen-forgot::before,
    .screen-forgot::after {
        display: none;
    }

    .screen-login,
    .screen-forgot {
        background: linear-gradient(145deg, #FBEAE4 0%, #F9F6F0 50%, #EDF1EC 100%);
    }

    .login-app-name {
        color: var(--ink);
        font-size: 18px;
        letter-spacing: -0.01em;
        white-space: nowrap;
        max-width: none;
    }

    .login-app-tagline {
        color: var(--ink-muted);
    }

    .login-app-icon {
        background: var(--accent-soft);
        border-color: var(--logo-outline-gold);
        /* FIX (client request 2026-07): a bit larger again on desktop, where there's more
           room around the card, on top of the doubled 216px mobile-first base above. */
        width: 240px;
        height: 240px;
        border-radius: 52px;
    }

    .login-sheet {
        margin: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   STUDENT APP HEADER — replaces old .app-header for student screens
═══════════════════════════════════════════════════════════════════════ */
.student-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 20px;
    display: flex;
    align-items: center;
    /* FIX (client request 2026-07): raised alongside .brand-logo-img's larger size (34px
       -> 46px) so the bigger logo still has breathing room instead of nearly touching the
       top/bottom edges of the bar. */
    height: 68px;
    gap: 12px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Desktop: keep the bar full-bleed but align its contents with the
   640px content column below it, instead of stretching edge-to-edge. */
@media (min-width: 769px) {
    .student-topbar {
        padding-left: max(20px, calc((100% - 640px) / 2));
        padding-right: max(20px, calc((100% - 640px) / 2));
    }
}

.student-topbar .logo-mark {
    display: flex;
    align-items: center;
    gap: 9px;
}

.student-topbar .logo-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.student-topbar .spacer {
    flex: 1;
}

/* Avatar chip — name initial in a circle + name */
.student-avatar-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 5px 12px 5px 5px;
    cursor: pointer;
    transition: var(--transition);
}

    .student-avatar-chip:hover {
        border-color: var(--accent-mid);
        background: var(--accent-soft);
    }

.student-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* FIX (Phase 3 CSS/a11y review 2026-07, follow-up sweep): white 12px/700 initials on plain
       --accent measured 2.95:1, under WCAG AA's 4.5:1 minimum for text this small. */
    background: var(--accent-btn);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
}

.student-avatar-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

/* FIX (mobile safety): the topbar now carries one more element (the Download PDF icon
   button) on the Pre/Post Result pages than it does elsewhere. Truncating a long name with
   an ellipsis on narrow phones keeps the row from wrapping or overflowing horizontally,
   instead of only fixing it for the exact names used in testing. */
@media (max-width: 480px) {
    .student-avatar-name {
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Sign-out tiny button inside avatar area — hidden on mobile, replaced by menu */
.student-signout {
    background: none;
    border: none;
    color: var(--ink-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: var(--transition);
}

    .student-signout:hover {
        color: var(--warn);
        background: var(--warn-soft);
    }

/* Student bottom nav — mirrors admin mobile nav pattern */
.student-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: stretch;
    height: 60px;
    padding: 0 8px;
    /* safe area for notched phones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 0 var(--line), 0 -4px 16px rgba(45,62,53,0.06);
}

/* Desktop: collapse the full-bleed mobile tab bar into a centered
   floating dock that lines up with the 640px content column. */
@media (min-width: 769px) {
    .student-bottom-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 460px;
        bottom: 16px;
        border: 1px solid var(--line);
        border-radius: 100px;
        box-shadow: var(--shadow-lg);
        padding: 0 8px;
    }
}

.student-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 8px 0 4px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    position: relative;
}

    .student-nav-btn svg {
        width: 22px;
        height: 22px;
    }

    .student-nav-btn.active {
        color: var(--accent);
    }
        /* Active pill indicator behind icon */
        .student-nav-btn.active::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 28px;
            background: var(--accent-soft);
            border-radius: 8px;
            z-index: -1;
        }

    .student-nav-btn:hover {
        color: var(--accent);
    }

/* Body padding for student screens that have bottom nav */
.has-student-nav {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════
   SCREEN 2 — STUDENT LANDING
═══════════════════════════════════════════════════════════════════════ */
.screen-student-home .page-wrap,
.screen-survey .page-wrap,
.screen-result .page-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--app-vh, 1vh) * 100);
}

.screen-student-home .page-wrap {
    background: var(--bg);
}

/* Greeting banner — replaces the old .student-hero */
.student-greeting {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 24px 20px 20px;
}

@media (min-width: 769px) {
    .student-greeting {
        padding-left: max(20px, calc((100% - 640px) / 2));
        padding-right: max(20px, calc((100% - 640px) / 2));
    }
}

.student-greeting-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.student-greeting h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.student-greeting p {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
}

/* Course badge inside greeting */
.student-course-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-mid);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
}

.student-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 16px 16px;
    width: 100%;
}

/* Onboarding brief — collapsible welcome card on the student home page */
.firm-brief {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}

.firm-brief-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

    .firm-brief-summary::-webkit-details-marker {
        display: none;
    }

.firm-brief-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 3px;
}

.firm-brief-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.firm-brief-chevron {
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: transform var(--transition);
}

.firm-brief[open] .firm-brief-chevron {
    transform: rotate(180deg);
}

.firm-brief-body {
    padding: 4px 18px 20px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

    .firm-brief-body p {
        font-size: 13.5px;
        line-height: 1.65;
        color: var(--ink);
        margin-bottom: 12px;
    }

        .firm-brief-body p.firm-brief-lead {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .firm-brief-body p.firm-brief-closing {
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 0;
        }

.firm-brief-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .firm-brief-list li {
        font-size: 13.5px;
        line-height: 1.5;
        color: var(--ink);
        padding-left: 18px;
        position: relative;
    }

        .firm-brief-list li::before {
            content: '';
            position: absolute;
            left: 4px;
            top: 8px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent);
        }

/* Section label above cards */
.student-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
    padding: 0 2px;
}

/* Phase cards — redesigned for touch */
.phase-card {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 0;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    min-height: 80px; /* proper touch target */
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .phase-card.available {
        border-color: var(--accent);
        /* FIX (Phase 3 CSS/a11y review 2026-07): leftover indigo glow, corrected to --accent's
           own rgb(224,122,95) — decorative ring around a bordered card, not text. */
        box-shadow: 0 0 0 3px rgba(224,122,95,0.08), var(--shadow-sm);
    }

    .phase-card:active {
        background: var(--bg);
    }

    .phase-card.locked {
        opacity: 0.55;
        cursor: default;
    }

        .phase-card.locked:active {
            background: var(--surface);
        }

    .phase-card.completed {
        border-color: var(--accent-mid);
    }

    /* Left colour stripe on available card */
    .phase-card.available .phase-stripe {
        width: 4px;
        align-self: stretch;
        background: var(--accent);
        flex-shrink: 0;
        border-radius: 2px 0 0 2px;
    }

.phase-stripe {
    width: 4px;
    align-self: stretch;
    flex-shrink: 0;
    border-radius: 2px 0 0 2px;
}

.phase-card.completed .phase-stripe {
    background: var(--success);
}

.phase-card.locked .phase-stripe {
    background: var(--line);
}

.phase-card-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    padding: 18px 18px 18px 16px;
}

.phase-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .phase-icon.green {
        background: var(--accent-soft);
    }

    .phase-icon.gray {
        background: #EFEAE2;
    }

    /* FIX (Phase 3 CSS/a11y review 2026-07, follow-up sweep): both of these carry a white
       stroke SVG icon (checkmark / document icon, stroke-width 1.8–2.5) directly on top of the
       background — a graphical UI component, so WCAG 1.4.11's 3:1 non-text-contrast minimum
       applies. Plain --accent measured 2.95:1, just under that bar. */
    .phase-icon.done {
        background: var(--accent-btn);
    }

    .phase-icon.available-icon {
        background: var(--accent-btn);
    }

.phase-info {
    flex: 1;
    min-width: 0;
}

    .phase-info h3 {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 3px;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .phase-info p {
        font-size: 12.5px;
        color: var(--ink-muted);
        line-height: 1.5;
    }

.phase-deadline {
    font-size: 11.5px;
    font-family: var(--font-mono);
    color: var(--ink-muted);
    margin-top: 4px;
}

    .phase-deadline.overdue {
        color: var(--warn);
    }

/* Chevron affordance */
.phase-chevron {
    width: 20px;
    height: 20px;
    color: var(--ink-muted);
    flex-shrink: 0;
    opacity: 0.5;
}

.phase-card.available .phase-chevron {
    color: var(--accent);
    opacity: 0.8;
}

/* Progress stepper — redesigned to be more compact and native */
.status-track {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 20px;
    position: relative;
    padding: 16px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

    .status-step::before {
        content: '';
        position: absolute;
        top: 14px;
        left: 50%;
        right: -50%;
        height: 2px;
        background: var(--line);
        z-index: 0;
    }

    .status-step:last-child::before {
        display: none;
    }

    .status-step.done::before {
        background: var(--accent);
    }

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-bottom: 6px;
    flex-shrink: 0;
    transition: var(--transition);
}

.status-step.done .step-dot {
    /* FIX (Phase 3 CSS/a11y review 2026-07, follow-up sweep): carries a white stroke checkmark
       SVG on top — non-text UI component, WCAG 1.4.11's 3:1 minimum applies. Plain --accent
       measured 2.95:1, just under that bar. */
    background: var(--accent-btn);
    border-color: var(--accent-btn);
}

.status-step.current .step-dot {
    background: var(--accent-soft);
    border-color: var(--accent);
    /* FIX (Phase 3 CSS/a11y review 2026-07): leftover indigo glow, corrected to --accent's own
       rgb(224,122,95) — decorative ring around a step-dot, not text. */
    box-shadow: 0 0 0 3px rgba(224,122,95,0.12);
}

.step-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-muted);
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.status-step.done .step-label,
.status-step.current .step-label {
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   SCREEN 3 — SURVEY TAKING (FOCUS MODE)
═══════════════════════════════════════════════════════════════════════ */
.screen-survey {
    background: var(--bg);
}

/* Collapsing sticky progress header — one tight row + a full-bleed
   progress strip glued to its bottom edge. Works the same way at any
   viewport width; the mobile media query below just tightens spacing
   and trims labels as the row runs out of room. */
.survey-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 20px 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.survey-topbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
}

/* Icon-only exit affordance — replaces the old text "Exit" button */
.survey-exit-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--ink-muted);
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

    .survey-exit-btn svg {
        width: 16px;
        height: 16px;
    }

    .survey-exit-btn:hover {
        background: var(--warn-soft);
        color: var(--warn);
    }

    .survey-exit-btn:active {
        transform: scale(0.92);
    }

/* Phase label + question counter share one flexible row */
.survey-topbar-meta {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.survey-phase-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 4px 10px;
    background: var(--accent-soft);
    border-radius: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.survey-q-counter {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

    .survey-q-counter .of {
        color: var(--ink-muted);
        font-weight: 400;
    }

.survey-save-indicator {
    font-size: 12px;
    color: var(--success);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

    .survey-save-indicator svg {
        flex-shrink: 0;
    }

/* Segmented progress bar — full-bleed, sits flush with the header's
   bottom border like a thin native progress strip */
.progress-segments {
    display: flex;
    gap: 2px;
    height: 4px;
    margin: 10px -20px 0;
}

.progress-seg {
    flex: 1;
    border-radius: 1px;
    background: var(--line);
    transition: background 0.3s ease;
}

    .progress-seg.done {
        background: var(--accent);
    }

    .progress-seg.current {
        background: var(--accent-mid);
    }

/* Content area now flexes to fill the column so the sticky nav
   footer (below) naturally pins to the bottom of the viewport */
.survey-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 20px 40px;
    width: 100%;
    flex: 1;
}

.q-section-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1.5px solid var(--accent-mid);
}

.q-section-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.005em;
}

.q-section-points {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-muted);
}

@keyframes shake {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-4px);
    }

    40%, 60% {
        transform: translateX(4px);
    }
}

.question-block.shake {
    animation: shake 0.4s cubic-bezier(0.36,0.07,0.19,0.97);
}

.q-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
}

.q-text {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.38;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

.option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform 0.1s ease;
    font-size: 15px;
    color: var(--ink);
    user-select: none;
    position: relative;
    overflow: hidden;
    min-height: 60px; /* proper touch target */
    -webkit-tap-highlight-color: transparent;
}

    .option-row:hover {
        border-color: var(--accent-mid);
        background: #F4EFE5;
    }

    .option-row:active {
        transform: scale(0.99);
        background: var(--bg);
    }

    /* Selected state */
    .option-row.selected {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 600;
    }

/* Letter/check indicator */
.option-letter {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: var(--transition);
    background: var(--bg);
}

.option-row:hover .option-letter {
    border-color: var(--accent-mid);
    color: var(--accent);
}

.option-row.selected .option-letter {
    /* FIX (Phase 3 CSS/a11y review 2026-07, follow-up sweep): the letter text itself is
       hidden (font-size: 0) and replaced by the white checkmark border-shape in ::after below —
       a non-text UI component, WCAG 1.4.11's 3:1 minimum applies. Plain --accent measured
       2.95:1, just under that bar. */
    background: var(--accent-btn);
    border-color: var(--accent-btn);
    color: white;
    font-size: 0;
}

    .option-row.selected .option-letter::after {
        content: '';
        display: block;
        width: 10px;
        height: 6px;
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(-45deg) translateY(-2px);
    }

/* Ripple on select */
@keyframes ripple-out {
    from {
        transform: scale(0);
        opacity: 0.15;
    }

    to {
        transform: scale(4);
        opacity: 0;
    }
}

.option-row.selected::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: var(--accent);
    animation: ripple-out 0.4s ease-out forwards;
    pointer-events: none;
}

/* Spring "pop" on the row + a quick swap flourish on the letter circle —
   triggered briefly via JS (.pop) at the moment of selection, separate
   from the persistent .selected state so it never replays on re-render */
@keyframes option-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes letter-swap {
    0% {
        transform: scale(0.55) rotate(-12deg);
    }

    55% {
        transform: scale(1.18) rotate(4deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.option-row.pop {
    animation: option-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .option-row.pop .option-letter {
        animation: letter-swap 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

/* Survey Prev/Next — pinned to the bottom of the viewport so you never
   have to scroll down to navigate, on mobile or desktop */
.survey-nav-footer {
    position: sticky;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 14px 20px;
    padding-bottom: 14px;
    flex-shrink: 0;
    z-index: 200;
}

.survey-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
}

/* Subtle bottom-sheet confirmation that replaces the old "just advance
   quietly" auto-advance — floats above the pinned nav footer */
.survey-confirm-sheet {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(156px + env(safe-area-inset-bottom, 0px));
    z-index: 600;
    max-width: 420px;
    margin: 0 auto;
    background: var(--ink);
    color: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 16px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

    .survey-confirm-sheet.show {
        transform: translateY(0);
        opacity: 1;
    }

    .survey-confirm-sheet svg {
        flex-shrink: 0;
    }


/* ═══════════════════════════════════════════════════════════════════════
   SCREEN 4 — RESULT PAGE
═══════════════════════════════════════════════════════════════════════ */
.screen-result {
    background: var(--bg);
}

.result-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 24px 80px;
    text-align: center;
}

.result-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--success);
    background: var(--success-soft);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.result-headline {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.04em;
    margin-bottom: 8px;
    line-height: 1.1;
}

.result-sub {
    font-size: 15px;
    color: var(--ink-muted);
    margin-bottom: 52px;
}

/* Score cards row — cleaner than overlay on SVG */
.result-scores-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 auto 12px;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.result-score-block {
    flex: 1;
    padding: 24px 20px;
    text-align: center;
}

    .result-score-block + .result-score-block {
        border-left: 1px solid var(--line);
    }

    .result-score-block.post {
        background: var(--accent-soft);
    }

.result-score-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.result-score-block.post .result-score-label {
    color: var(--accent);
}

.result-score-num {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.04em;
}

.result-score-block.post .result-score-num {
    color: var(--accent);
}

.result-score-denom {
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* Delta badge */
.result-delta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--success-soft);
    border: 1px solid var(--success-mid);
    border-radius: var(--radius-lg);
    padding: 12px 24px;
    margin-bottom: 40px;
}

.result-delta-pts {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--success);
    letter-spacing: -0.03em;
}

.result-delta-pct {
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
    opacity: 0.8;
}

/* Animated arc SVG */
.arc-score-wrap {
    position: relative;
    margin: 0 auto 32px;
    max-width: 480px;
}

.arc-score-svg-wrap {
    width: 100%;
    padding-bottom: 52%;
    position: relative;
}

.arc-score-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Arc path animation */
@keyframes arc-draw {
    from {
        stroke-dashoffset: 420;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dot-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.arc-path-animated {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: arc-draw 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

.arc-end-dot {
    opacity: 0;
    transform-origin: 420px 55px;
    animation: dot-pop 0.4s ease-out 1s forwards;
}

.arc-delta-label {
    opacity: 0;
    animation: fade-up 0.4s ease-out 1.1s forwards;
}

.result-scores-row {
    opacity: 0;
    animation: fade-up 0.5s ease-out 0.1s forwards;
}

.result-delta-badge {
    opacity: 0;
    animation: fade-up 0.5s ease-out 1.2s forwards;
}

.result-next-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.result-next-info-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-next-info-text {
    flex: 1;
}

.result-next-info strong {
    color: var(--ink);
}
/* Dismiss only exists for the floating mobile card — hidden on desktop
   where the panel is just a normal static info box */
.result-next-dismiss {
    display: none;
}

/* ── Confetti burst — CSS-only, plays once on load above the score
   reveal, re-triggered each time the result screen is shown again ── */
.confetti-burst {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 50;
}

.confetti-piece {
    position: absolute;
    top: -12px;
    left: var(--l, 50%);
    width: 8px;
    height: 14px;
    opacity: 0;
    background: var(--c, var(--accent));
    border-radius: 1.5px;
    animation: confetti-fall var(--dur, 2.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--del, 0s) forwards;
}

    .confetti-piece:nth-child(3n) {
        border-radius: 50%;
    }

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateY(108vh) rotate(var(--rot, 480deg));
        opacity: 0;
    }
}

/* ── Mobile ring gauge — replaces the wide arc SVG on small screens,
   fixed square aspect so it can never cause horizontal overflow ── */
.ring-gauge-wrap {
    display: none;
    position: relative;
    width: 168px;
    height: 168px;
    /* FIX (2026-07-07): was 0 auto 28px — the ring sat right against the bottom border of the
       Associate Name/Student ID row above it with no breathing room, reading as visual
       overlap/crowding in client screenshots even once the fill itself rendered correctly. */
    margin: 20px auto 28px;
}

/* FIX (2026-07-07, "ring shows no fill" — real root cause found): the conic-gradient version
   above set its fill percentage via an inline style="--pct: ..." attribute. This site's CSP
   (style-src has no 'unsafe-inline') blocks ALL inline style attributes outright, so --pct
   never actually got set on the page — the ring always rendered at 0% fill no matter the real
   score. The conic-gradient technique itself was never the problem; inline style was.
   Replaced with an <svg> ring whose fill is driven by stroke-dasharray/stroke-dashoffset —
   ordinary SVG presentation attributes (set directly in Result.cshtml, not via "style"), which
   CSP's style-src does not restrict at all. The rotate below is a static rule (same for every
   instance, no per-request value), so it lives safely in this external stylesheet and is
   unaffected by CSP either way. */
.ring-gauge-svg {
    position: absolute;
    inset: 0;
    /* stroke-dashoffset measures from 3 o'clock by default; rotate the whole ring -90deg so
       the fill starts at 12 o'clock, matching the old design. */
    transform: rotate(-90deg);
}

.ring-gauge-track {
    fill: none;
    stroke: var(--line);
    stroke-width: 10;
}

.ring-gauge-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 10;
    stroke-linecap: round;
    /* stroke-dasharray/stroke-dashoffset are rendered server-side as plain numeric attributes
       (see Result.cshtml) — never touched via inline style or JS .style writes, so there is
       nothing here for CSP to block. */
    transition: stroke-dashoffset 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}

.ring-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ring-gauge-pct {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}

    .ring-gauge-pct span {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink-muted);
    }

.ring-gauge-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
    text-align: center;
}

/* ── Floating "What's next" action card (mobile only) ────────────────
   Pinned above the student bottom-nav safe area. Hidden on desktop
   via the media query above; the normal .result-next-info panel
   shows instead. ───────────────────────────────────────────────── */
.result-action-card {
    display: none; /* JS/media-query shows on mobile */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    padding: 12px 16px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.07);
    animation: slide-up-card 0.4s cubic-bezier(0.34, 1.28, 0.64, 1) 0.6s both;
}

@keyframes slide-up-card {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.result-action-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}

.result-action-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-action-text {
    flex: 1;
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
}

    .result-action-text strong {
        color: var(--ink);
        font-size: 13.5px;
        display: block;
        margin-bottom: 1px;
    }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN SCREENS — common sub-panel
═══════════════════════════════════════════════════════════════════════ */
.admin-section {
    margin-bottom: 32px;
}

.admin-section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Reminder sent stamp */
.sent-stamp {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--ink-muted);
    padding: 4px 10px;
    background: #EFEAE2;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(45,62,53,0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

    .modal-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    padding: 32px;
    transform: translateY(8px);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}

.modal-overlay.open .modal {
    transform: translateY(0);
}

.modal-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.modal-body {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.65;
    margin-bottom: 24px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════
   PASSWORD RESET
═══════════════════════════════════════════════════════════════════════ */
.reset-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

    .reset-step .step-n {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent);
        font-weight: 700;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

/* ─── Misc helpers ───────────────────────────────────────────────────── */
/* Was referenced by Result.cshtml but never defined — cards sitting inside
   text-align:center wraps (.result-content, .pre-result-content) need this
   to keep their own body copy/table text left-aligned. */
.text-align-left {
    text-align: left;
}

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-4 {
    margin-top: 16px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-6 {
    margin-bottom: 24px;
}

.text-sm {
    font-size: 13px;
}

.text-xs {
    font-size: 11.5px;
}

/* FIX (UI-1, codebase review 2026-07): extracted from the one inline style="font-size:12px;"
   found repo-wide (Pages/Account/ForgotPassword.cshtml) so every other page stays free of
   inline styles too. 12px sits between the existing .text-sm (13px) and .text-xs (11.5px)
   utilities, so it's kept as its own small class rather than silently changing the rendered
   size by reusing one of those. */
.text-hint {
    font-size: 12px;
}

.text-muted {
    color: var(--ink-muted);
}

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

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

.font-mono {
    font-family: var(--font-mono);
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.w-full {
    width: 100%;
}

/* ─── Survey question editor ─────────────────────────────────────────── */
.question-section-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 4px 8px;
    margin-top: 4px;
}

    .question-section-header:first-child {
        padding-top: 4px;
    }

.question-section-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.005em;
}

.question-section-points {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-muted);
}

.question-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
}

.question-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
}

.q-order-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.question-item-header h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    flex: 1;
}

.expand-icon {
    width: 20px;
    height: 20px;
    color: var(--ink-muted);
}

.question-options {
    padding: 0 20px 16px 60px;
}

.option-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12.5px;
    border: 1px solid var(--line);
    border-radius: 100px;
    margin: 3px;
    background: var(--bg);
    color: var(--ink);
}

    .option-pill .score {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--accent);
        font-weight: 600;
    }

/* ─── Import report ──────────────────────────────────────────────────── */
.import-report {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.import-report-header {
    padding: 14px 20px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--accent-mid);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
}

.import-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.import-metric {
    padding: 18px 20px;
    border-right: 1px solid var(--line);
}

    .import-metric:last-child {
        border-right: none;
    }

    .import-metric .im-value {
        font-family: var(--font-display);
        font-size: 26px;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 4px;
        letter-spacing: -0.02em;
    }

        .import-metric .im-value.warn {
            color: var(--warn);
        }

        .import-metric .im-value.green {
            color: var(--success);
        }

    .import-metric .im-label {
        font-size: 12px;
        color: var(--ink-muted);
        font-weight: 500;
    }

/* ─── Score distribution ─────────────────────────────────────────────── */
.dist-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

.dist-bar-label {
    width: 80px;
    text-align: right;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.dist-bar-track {
    flex: 1;
    height: 20px;
    background: var(--accent-soft);
    border-radius: 4px;
    overflow: hidden;
}

.dist-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.dist-bar-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
    min-width: 24px;
}

/* ─── Settings page ──────────────────────────────────────────────────── */
.settings-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 24px;
}

.settings-section-head {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    background: #F4EFE5;
}

    .settings-section-head h3 {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
    }

    .settings-section-head p {
        font-size: 12.5px;
        color: var(--ink-muted);
        margin-top: 2px;
    }

.settings-section-body {
    padding: 24px;
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ─── Audit log ──────────────────────────────────────────────────────── */
.audit-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

    .audit-row:last-child {
        border-bottom: none;
    }

.audit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 5px;
    flex-shrink: 0;
}

.audit-action {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.audit-detail {
    font-size: 12.5px;
    color: var(--ink-muted);
}

.audit-meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* ─── Toast ──────────────────────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--ink);
    color: white;
    font-size: 13.5px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9998;
    transform: translateY(80px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;
    pointer-events: none;
    max-width: 320px;
}

    #toast.show {
        transform: translateY(0);
        opacity: 1;
    }

    #toast.green {
        background: var(--success);
    }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   Breakpoints:  ≤480px (phone), ≤768px (tablet/small)
═══════════════════════════════════════════════════════════════════════ */

/* ── Status tracker — shrink on very small screens ───────────────── */
@media (max-width: 400px) {
    .status-track {
        padding: 12px 10px;
    }

    .step-dot {
        width: 24px;
        height: 24px;
    }

    .step-label {
        font-size: 9px;
    }

    .status-step::before {
        top: 12px;
    }
}

/* ── Login / forgot — mobile sheet tweaks ────────────────────────── */
@media (max-width: 480px) {
    .login-splash {
        padding: 36px 24px 24px;
    }

    .login-app-name {
        font-size: 20px;
        max-width: 280px;
    }

    .login-sheet {
        padding: 28px 20px calc(32px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Student greeting ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .student-greeting {
        padding: 20px 16px 16px;
    }

        .student-greeting h1 {
            font-size: 20px;
        }

    .student-content {
        padding: 16px 16px 12px;
    }
}

/* ── Phase cards ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .phase-card-inner {
        padding: 16px 14px 16px 12px;
        gap: 12px;
    }

    .phase-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .phase-info h3 {
        font-size: 14px;
    }

    .phase-info p {
        font-size: 12px;
    }
}

/* ── Survey topbar — trims labels as it runs out of room ──────────── */
@media (max-width: 640px) {
    .survey-topbar {
        padding: 8px 16px 0;
    }

    .survey-topbar-row {
        height: 34px;
        gap: 8px;
    }

    .progress-segments {
        margin: 8px -16px 0;
    }

    .survey-save-indicator .save-text {
        display: none;
    }
    /* icon only on mobile */
}

@media (max-width: 380px) {
    .survey-phase-tag {
        display: none;
    }
    /* counter + bar carry the info */
}

/* ── Survey content ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .survey-content {
        padding: 24px 16px 32px;
    }

    .q-text {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 20px;
        line-height: 1.38;
        letter-spacing: -0.01em;
    }

    .option-row {
        padding: 14px 16px;
        font-size: 14.5px;
        gap: 14px;
        min-height: 64px;
        border-radius: 16px;
    }

    .option-letter {
        width: 40px;
        height: 40px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .option-row.selected .option-letter::after {
        width: 12px;
        height: 7px;
    }

    .survey-nav-footer {
        padding: 12px 16px;
        padding-bottom: 12px;
    }

    .survey-confirm-sheet {
        bottom: calc(144px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
    }
}

@media (max-width: 400px) {
    .survey-nav {
        flex-direction: column-reverse;
        gap: 10px;
    }

        .survey-nav .btn {
            width: 100%;
            justify-content: center;
            min-height: 48px;
        }
}

/* ── Result screen ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* more breathing room above the floating action card */
    .result-content {
        padding: 32px 16px 160px;
    }

    .result-headline {
        font-size: 26px;
        margin-bottom: 6px;
    }

    .result-sub {
        font-size: 13px;
        margin-bottom: 28px;
    }

    /* Desktop wide-arc SVG → hide; ring gauge appears instead */
    .arc-score-wrap {
        display: none;
    }

    .ring-gauge-wrap {
        display: block;
    }

    /* Score cards: stack vertically Pre → Post → Delta, full width */
    .result-scores-row {
        flex-direction: column;
        max-width: 100%;
        border-radius: var(--radius-md);
    }

    .result-score-block + .result-score-block {
        border-left: none;
        border-top: 1px solid var(--line);
    }

    .result-score-block {
        padding: 18px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .result-score-label {
        margin-bottom: 0;
    }

    .result-score-num {
        font-size: 40px;
    }

    .result-score-denom {
        font-size: 12px;
    }

    /* Delta badge → full-width row */
    .result-delta-badge {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 18px;
        gap: 8px;
        margin-bottom: 28px;
        justify-content: flex-start;
    }

    .result-delta-pts {
        font-size: 22px;
    }

    /* "What's next" panel → hidden in-flow; shows as floating card instead */
    .result-next-info {
        display: none;
    }

    /* Floating bottom action card — pinned above safe area */
    .result-action-card {
        display: flex;
    }
}

@media (min-width: 641px) {
    /* Desktop — floating card never shown, normal panel used */
    .result-action-card {
        display: none !important;
    }
}

/* ── iOS zoom prevention ──────────────────────────────────────────
   Safari auto-zooms the whole page when a focused input/select has
   font-size below 16px. The login screen already accounted for this;
   this extends the same fix to every other text input and select
   across the admin and student screens. ──────────────────────────── */
@media (max-width: 768px) {
    .form-input,
    .search-input,
    select {
        font-size: 16px !important;
    }
}

/* ── Admin: mobile topbar replaces sidebar ───────────────────────── */
@media (max-width: 768px) {
    .admin-sidebar {
        display: none;
    }

    .admin-layout {
        flex-direction: column;
    }

    .admin-main {
        width: 100%;
    }

    /* Sticky topbar: hamburger | title | action */
    .admin-topbar {
        padding: 0 14px;
        height: 54px;
        position: sticky;
        top: 0;
        z-index: 100;
        gap: 10px;
    }

    .admin-topbar-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .admin-topbar-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--ink);
        white-space: nowrap;
    }

    /* Mobile bottom nav for admin — shown via media query */
    .admin-mobile-nav {
        display: flex;
    }

    /* Non-essential topbar middle controls (HKT clock badge, version
     select, Preview button) get crowded out on a 375px screen — hide
     them here and rely on the page title for context. Functional
     controls that would otherwise be lost (like the Questions version
     picker) get relocated into the page-intro row instead, see
     .mobile-version-picker below. */
    .admin-topbar-extra {
        display: none;
    }
}

@media (min-width: 769px) {
    /* Picker only exists for mobile; desktop keeps the topbar version select */
    .mobile-version-picker {
        display: none;
    }
}

@media (min-width: 769px) {
    .admin-mobile-nav {
        display: none;
    }
    /* Desktop: hide the mobile title element inside topbar */
    .admin-topbar-left {
        display: none;
    }
}

/* ── Admin mobile bottom nav — visual upgrade ────────────────────
   Matches the student nav pattern: 60px bar, 22px icons, safe-area
   padding, and a pill indicator that slides under the active icon ── */
.admin-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: none; /* shown via media query above */
    align-items: stretch;
    height: 60px;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 0 var(--line), 0 -4px 16px rgba(45,62,53,0.06);
}

.admin-mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 8px 0 4px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

    .admin-mobile-nav-btn svg {
        width: 22px;
        height: 22px;
    }

    .admin-mobile-nav-btn.active {
        color: var(--accent);
    }
        /* Pill indicator — same as student nav, appears behind the icon */
        .admin-mobile-nav-btn.active::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 42px;
            height: 28px;
            background: var(--accent-soft);
            border-radius: 8px;
            z-index: -1;
        }

    .admin-mobile-nav-btn:hover {
        color: var(--accent);
    }

/* Hamburger / back button that sits in the topbar-left slot */
.admin-menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    text-decoration: none;
}

    .admin-menu-btn[aria-disabled="true"] {
        cursor: default;
        pointer-events: none;
    }

/* Mobile nav drawer — slides in from the left, triggered by .admin-menu-btn */
.admin-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(45, 62, 53, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 590;
}

    .admin-drawer-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

.admin-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    background: var(--surface);
    display: none;
    flex-direction: column;
    padding: 0;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 600;
    box-shadow: 4px 0 24px rgba(45, 62, 53, 0.12);
}

    .admin-mobile-drawer .sidebar-logo {
        position: relative;
        padding-right: 48px;
    }

    .admin-mobile-drawer .sidebar-nav {
        flex: 1;
        padding: 4px 10px;
        overflow-y: auto;
    }

    .admin-mobile-drawer.open {
        transform: translateX(0);
    }

.admin-drawer-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

    .admin-drawer-close:hover {
        background: var(--bg);
        color: var(--ink);
    }

    .admin-drawer-close svg {
        width: 16px;
        height: 16px;
    }

@media (max-width: 768px) {
    .admin-mobile-drawer {
        display: flex;
    }
}

/* Locks background scroll while the mobile drawer is open (toggled by admin-layout.js) */
body.admin-drawer-locked {
    overflow: hidden;
}

.admin-menu-btn:hover {
    background: var(--line);
    color: var(--ink);
}

.admin-menu-btn svg {
    width: 18px;
    height: 18px;
}

/* Body padding for admin with mobile nav */
@media (max-width: 768px) {
    .admin-content {
        padding: 20px 16px calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
    }

    .page-intro {
        flex-direction: column;
        gap: 12px;
        padding-bottom: 20px;
    }

    .page-intro-text h1 {
        font-size: 18px;
    }

    .page-intro-actions {
        flex-wrap: wrap;
    }
}

/* ── Admin stat strip — horizontal scroll chips at ≤480px ─────── */
@media (max-width: 768px) {
    .stat-strip {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .stat-value {
        font-size: 26px;
    }

    .stat-card {
        padding: 16px 18px;
    }
}

@media (max-width: 480px) {
    /* Flip to a single scrollable row of compact chips */
    .stat-strip {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 10px;
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 16px 4px;
        margin-bottom: 20px;
    }

        .stat-strip::-webkit-scrollbar {
            display: none;
        }

    .stat-card {
        flex-shrink: 0;
        min-width: 136px;
        padding: 14px 16px;
    }

    .stat-value {
        font-size: 28px;
    }

    .stat-label {
        font-size: 10.5px;
    }

    .stat-sub {
        font-size: 11px;
    }
}

/* ── Admin dashboard 2-col grid → single column ─────────────────── */
@media (max-width: 768px) {
    .grid-2col {
        display: block;
        margin-bottom: 16px;
    }

        .grid-2col > * {
            margin-bottom: 16px;
        }

            .grid-2col > *:last-child {
                margin-bottom: 0;
            }
}

/* ── Tables — card-list fallback at ≤480px ────────────────────────
   Each <tr> becomes a bordered card; <td> rows show label + value.
   The <thead> is visually hidden but accessible. ─────────────────── */
@media (max-width: 768px) {
    .table-wrap {
        border-radius: var(--radius-sm);
    }

    table {
        font-size: 12.5px;
        min-width: 520px;
    }

    th, td {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    /* Unwrap the horizontal-scroll constraint */
    .table-wrap {
        overflow-x: visible;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }
        /* Screen-reader-accessible: collapse but don't remove the header */
        thead tr {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            border: none;
        }
        /* Each row → a card */
        tbody tr {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            margin-bottom: 10px;
            padding: 4px 0;
            min-width: 0;
        }

            tbody tr:hover {
                background: var(--surface);
            }
        /* Each cell → label : value row */
        tbody td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 9px 16px;
            border-bottom: 1px solid var(--line);
            font-size: 13px;
            min-width: 0;
        }

            tbody td:last-child {
                border-bottom: none;
            }
            /* Pill label from data-label attr */
            tbody td[data-label]::before {
                content: attr(data-label);
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                color: var(--ink-muted);
                white-space: nowrap;
                flex-shrink: 0;
            }
            /* Checkbox + actions cols: full-width centred */
            tbody td[data-label=""] {
                justify-content: flex-end;
            }

            tbody td[data-label="Actions"] {
                justify-content: flex-end;
            }
    /* Reset min-width so the table can collapse */
    table {
        min-width: 0 !important;
    }
}

/* ── Table toolbar stacks on mobile ─────────────────────────────── */
@media (max-width: 640px) {
    .table-toolbar {
        gap: 8px;
    }

    .search-input {
        width: 100%;
    }

    .table-toolbar .spacer {
        display: none;
    }
}

/* ── Import metrics ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .import-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .import-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .import-metric {
        padding: 14px 12px;
    }
}

/* ── Settings — single column with visible label stacking ────────── */
@media (max-width: 768px) {
    .settings-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .settings-section-body {
        padding: 16px;
    }
        /* Ensure label always sits above input, never beside it */
        .settings-section-body .form-group {
            margin-bottom: 14px;
        }

        .settings-section-body .form-label {
            display: block;
            margin-bottom: 5px;
            font-size: 12.5px;
        }

        .settings-section-body .form-input {
            width: 100%;
            box-sizing: border-box;
        }
}

/* ── Modal → bottom sheet on mobile ──────────────────────────────
   Centre-pops on desktop (unchanged). On ≤520px: anchors to the
   bottom edge, full-width, rounded only at the top.  ────────────── */
@media (max-width: 520px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        border-radius: 20px 20px 0 0;
        max-width: 100%;
        width: 100%;
        padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.34, 1.1, 0.64, 1);
    }

    .modal-overlay.open .modal {
        transform: translateY(0);
    }

    .modal-title {
        font-size: 17px;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }

        .modal-footer .btn {
            width: 100%;
            justify-content: center;
            min-height: 48px;
        }
    /* Drag handle visual hint */
    .modal::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--line);
        border-radius: 2px;
        margin: -8px auto 20px;
    }
}

/* ── Toast ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #toast {
        left: 16px;
        right: 16px;
        bottom: 76px;
        max-width: none;
    }
}

/* ── Card body padding ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .card-body {
        padding: 16px;
    }

    .card-header {
        padding: 14px 16px 12px;
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ─── Focus visible ──────────────────────────────────────────────────── */
:focus-visible {
    outline: 2.5px solid var(--accent);
    outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY SCREENS — Access Denied, Error
   (not present in prototype; built to match the existing token system)
═══════════════════════════════════════════════════════════════════════ */
.utility-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--app-vh, 1vh) * 100);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}

.utility-card {
    width: 100%;
    max-width: 400px;
    padding: 36px 32px;
    text-align: center;
}

.utility-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .utility-icon.warn {
        background: var(--warn-soft);
        color: var(--warn);
    }

    .utility-icon.success {
        background: var(--success-soft);
        color: var(--success);
    }

.utility-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.utility-sub {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.5;
    margin-bottom: 24px;
}

.utility-meta {
    font-size: 12px;
    color: var(--ink-muted);
    margin-bottom: 20px;
}

    .utility-meta .mono {
        font-family: var(--font-mono);
    }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN: STUDENTS PAGE — CSV dropzone, overdue row highlight
═══════════════════════════════════════════════════════════════════════ */
.csv-dropzone {
    display: block;
    border: 2px dashed var(--line);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    background: var(--bg);
    cursor: pointer;
    transition: var(--transition);
}

    .csv-dropzone:hover {
        border-color: var(--accent-mid);
        background: var(--accent-soft);
    }

    .csv-dropzone.dragover {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

.csv-dropzone-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
}

.csv-dropzone-hint {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 4px;
}

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

tbody tr.row-overdue {
    background: #FBEFEA;
}

    tbody tr.row-overdue:hover {
        background: #F7E4DC;
    }

@media (max-width: 480px) {
    tbody tr.row-overdue {
        border-color: var(--warn-mid);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN: SURVEYS PAGE — action button grouping, archived row dimming
═══════════════════════════════════════════════════════════════════════ */
.action-btn-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* Inline "set deadline" form in the Deadline column — see Surveys.cshtml.cs
   OnPostSetDeadlineAsync. Keeps the datetime-local input a sane width instead of the
   .form-input default of 100%, which inside a table cell would otherwise stretch edge to edge. */
.deadline-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .deadline-form .form-input {
        width: auto;
        min-width: 180px;
        padding: 6px 10px;
        font-size: 13px;
    }

tbody tr.row-archived {
    opacity: 0.55;
}

@media (max-width: 480px) {
    tbody td[data-label="Actions"] .action-btn-group {
        justify-content: flex-end;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   QUESTIONS PAGE — editable state additions (version switcher, add/remove)
═══════════════════════════════════════════════════════════════════════ */
.admin-topbar-extra {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.option-pill-remove-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.option-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

    .option-pill-remove:hover {
        background: var(--warn-soft);
        color: var(--warn);
    }

.option-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

    .option-add-row .form-input {
        width: auto;
        padding: 6px 10px;
        font-size: 12.5px;
    }

    .option-add-row .option-label-input {
        flex: 1;
        min-width: 140px;
    }

    .option-add-row .option-score-input {
        width: 70px;
    }

@media (max-width: 480px) {
    .option-add-row .option-label-input {
        min-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ASSOCIATE INFORMATION — post-diagnostic profile capture (Pre survey only)
═══════════════════════════════════════════════════════════════════════ */
.screen-associate-info .page-wrap {
    /* FIX (responsive centering): the base .page-wrap rule sets flex-direction:column,
       which this rule never overrode — so justify-content/align-items were centering on
       the wrong axes (card pinned to the left instead of the middle of the screen).
       flex-direction:row here restores justify-content=horizontal, align-items=vertical. */
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 60px;
    background: var(--bg);
}

.associate-info-wrap {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px 32px 40px;
    box-shadow: var(--shadow-lg);
}

.associate-info-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.associate-info-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.associate-info-sub {
    font-size: 13.5px;
    color: var(--ink-muted);
    line-height: 1.55;
    margin-bottom: 28px;
}

.associate-info-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
}

.choice-pills {
    display: flex;
    gap: 10px;
}

.choice-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    transition: var(--transition);
    background: var(--surface);
}

    .choice-pill input {
        accent-color: var(--accent);
        margin: 0;
    }

    .choice-pill:hover {
        border-color: var(--accent-mid);
    }

    .choice-pill:has(input:checked) {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--ink);
    }

@media (max-width: 480px) {
    .associate-info-wrap {
        padding: 28px 20px 32px;
        border-radius: var(--radius-md);
    }

    .associate-info-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRE-RESULT PAGE — Professional Readiness Audit, Pre-Onboarding Summary
   Shown once, right after Associate Information (Pre survey flow only).
═══════════════════════════════════════════════════════════════════════ */
.screen-pre-result {
    background: var(--bg);
}

.pre-result-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pre-result-hero {
    text-align: center;
    margin-bottom: 4px;
}

.pre-result-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.pre-result-sub {
    font-size: 15px;
    color: var(--ink-muted);
    margin-top: 4px;
    margin-bottom: 24px;
}

.pre-result-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    /* FIX (mobile spacing/redesign): this row used to butt up against the Download PDF
       button directly below it (button supplied its own margin-top for the gap). Now that
       the button has moved to the topbar, the meta row needs its own bottom margin so it
       doesn't sit flush against whatever comes next (ring gauge / score cards / stat strip). */
    margin-bottom: 28px;
}

/* Used on Result.cshtml (Associate Name/Student ID) and BoardReport.cshtml (Prepared
   by/Programme Duration/etc) — a slightly smaller gap than the default above, since both of
   those sit directly above dense score/stat content rather than the more spacious
   PreResult.cshtml hero. */
.pre-result-meta-tight {
    margin-bottom: 20px;
}

/* Board Report header — same meta-row component as the student result pages, but
   left-aligned to match the admin report layout instead of the centred student hero. */
.board-report-header .pre-result-meta {
    justify-content: flex-start;
}

.board-report-header .pre-result-meta-item {
    align-items: flex-start;
}

.board-report-cohort-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-muted);
}

.pre-result-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.pre-result-meta-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.pre-result-meta-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.pre-result-score-strip {
    margin-bottom: 0;
}

.pre-result-score-denom {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-muted);
    margin-left: 4px;
}

.pre-result-classification-badge {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

    .pre-result-classification-badge.tier-ready {
        color: var(--success);
    }

    .pre-result-classification-badge.tier-developing {
        color: var(--accent);
    }

    .pre-result-classification-badge.tier-limited,
    .pre-result-classification-badge.tier-high-risk {
        color: var(--warn);
    }

.pre-result-card {
    overflow: hidden;
}

/* FIX (spacing pass): the result/pre-result screens stack several .card
   blocks directly inside .result-content / .pre-result-content with no
   gap of their own — give every card after the first one some breathing
   room instead of butting straight up against the one before it. */
.result-content .card + .card,
.pre-result-content .card + .card {
    margin-top: 20px;
}

.pre-result-band-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.pre-result-band-row {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

    .pre-result-band-row.achieved {
        background: var(--accent-soft);
        border-color: var(--accent-mid);
    }

.pre-result-band-range {
    flex: 0 0 88px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-muted);
    padding-top: 1px;
}

.pre-result-band-row.achieved .pre-result-band-range {
    color: var(--accent);
}

.pre-result-band-text {
    flex: 1;
    min-width: 0;
}

.pre-result-band-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.pre-result-band-summary {
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.5;
}

.pre-result-md-note .card-body p {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.65;
    margin-bottom: 12px;
}

    .pre-result-md-note .card-body p:last-of-type {
        margin-bottom: 0;
    }

.pre-result-signature {
    margin-top: 18px;
    font-family: 'Plus Jakarta Sans', var(--font-display);
    font-style: italic;
    font-size: 17px;
    font-weight: 600;
    color: var(--accent);
}

@media (max-width: 640px) {
    .pre-result-content {
        padding: 28px 16px 100px;
    }

    .pre-result-title {
        font-size: 24px;
    }

    .pre-result-meta {
        gap: 8px 20px;
    }

    .pre-result-band-row {
        flex-direction: column;
        gap: 4px;
    }

    .pre-result-band-range {
        flex: none;
    }
}

/* FIX (collapsible sections): the Growth Index, Readiness Classification,
   Section-by-Section, Status Interpretation and MD Review cards on the
   result page are now native <details>/<summary> elements so a student can
   collapse the ones they've already read. No JS is required for the
   toggle itself — result-pdf.js only force-opens them for printing. */
.collapsible-card > summary.card-header {
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

    .collapsible-card > summary.card-header::-webkit-details-marker {
        display: none;
    }

    .collapsible-card > summary.card-header::marker {
        content: "";
    }

    .collapsible-card > summary.card-header:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.card-header-title-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.card-chevron {
    flex-shrink: 0;
    color: var(--ink-muted);
    transition: transform 0.2s ease;
}

.collapsible-card[open] > summary.card-header .card-chevron {
    transform: rotate(180deg);
}

/* Collapsed state: drop the divider line under the header since there's no
   body left to divide it from. */
.collapsible-card:not([open]) > summary.card-header {
    border-bottom-color: transparent;
}

/* FIX (content audit, phase 1): "Download PDF" button — Pre-Result and Post-Result pages.
   Sits under the associate/student meta row, above the score cards. */
.result-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    width: auto;
}

    .result-download-btn svg {
        flex-shrink: 0;
    }

/* FIX (mobile spacing/redesign): the Download PDF button used to live inline in the hero,
   directly under the Associate Name/Student ID row — on narrow phones the two sat close
   enough to read as crowded/overlapping. It's now a persistent icon button in the sticky
   topbar instead (next to the avatar chip), which both frees up the hero for its own
   breathing room and keeps "download my report" reachable from anywhere on the page instead
   of only after scrolling past the header. Circular icon-only button, sized to match the
   existing sign-out affordance in the avatar chip. */
.topbar-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1.5px solid var(--accent-mid);
    color: var(--accent);
    cursor: pointer;
    transition: var(--transition);
}

    .topbar-download-btn svg {
        flex-shrink: 0;
    }

    .topbar-download-btn:hover {
        background: var(--accent-btn);
        border-color: var(--accent-btn);
        color: #fff;
    }

    .topbar-download-btn:active {
        transform: scale(0.96);
    }

/* FIX (content audit, phase 1): print stylesheet backing the "Download PDF" button (see
   wwwroot/js/result-pdf.js). Uses the browser's native print-to-PDF pipeline instead of a
   third-party JS library, so the strict script-src 'self' CSP from the security audit doesn't
   need to change. Hides navigation/chrome and prints only the results content, one clean
   document with no forced page breaks mid-card. */
@media print {
    @page {
        size: A4;
        margin: 16mm 14mm;
    }

    /* Chrome/keep backgrounds & badge colours instead of printing everything
       as flat black-on-white — this is what makes the exported PDF still
       read as "the report" rather than a text dump. */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .student-topbar,
    .student-bottom-nav,
    .result-download-btn,
    .topbar-download-btn,
    .result-action-card,
    .confetti-burst,
    .admin-sidebar,
    .admin-topbar {
        display: none !important;
    }

    body, .page-wrap, .pre-result-content, .result-content {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .result-content, .pre-result-content {
        max-width: 100% !important;
    }

    /* The mobile ring gauge and desktop arc chart are alternate views of the
       same number — only show one on the printed page, whichever the
       browser's print layout would otherwise pick for the wider "page" width. */
    .card, .pre-result-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .result-content .card + .card,
    .pre-result-content .card + .card {
        margin-top: 14px;
    }

    /* Collapsed sections must still appear in full in the exported PDF —
       result-pdf.js force-opens every .collapsible-card before printing,
       this just makes sure the chevron/toggle affordance itself is hidden
       since it serves no purpose on paper. */
    .collapsible-card > summary.card-header {
        cursor: default;
    }

    .card-chevron {
        display: none !important;
    }

    h1, h2, h3 {
        break-after: avoid;
    }

    table {
        break-inside: avoid;
    }

    a[href]:after {
        content: "";
    }
}

/* FIX (content audit, phase 2): Admin → Students → "View" — student detail page showing
   Associate Information plus every submitted Pre/Post answer next to the selected option and
   its score, grouped by section. */
.back-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    margin-bottom: 8px;
}

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

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.detail-score-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
    gap: 16px;
}

.detail-answers-header {
    border-top: 1px solid var(--line);
}

.detail-section-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 22px 0 10px;
}

    .detail-section-heading:first-child {
        margin-top: 0;
    }

.detail-answer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

    .detail-answer-row:last-child {
        border-bottom: none;
    }

.detail-answer-text {
    font-size: 13.5px;
    color: var(--ink);
    flex: 1;
}

.detail-answer-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.detail-answer-score {
    font-size: 12px;
}

@media (max-width: 640px) {
    .detail-answer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .detail-answer-selected {
        white-space: normal;
    }
}