/* Assessment builder and session */

.exam-builder-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
    z-index: 120;
}

.exam-builder-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.exam-builder-modal {
    width: min(980px, 100%);
    max-height: min(88vh, 920px);
    overflow: auto;
    padding: 28px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,248,252,0.94));
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 40px 90px rgba(15, 23, 42, 0.18);
    transform: translateY(22px) scale(0.98);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.exam-builder-overlay.open .exam-builder-modal {
    transform: translateY(0) scale(1);
}

.exam-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.exam-builder-head h3 {
    margin: 10px 0 0;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.exam-builder-head p {
    margin: 12px 0 0;
    max-width: 650px;
    color: var(--muted-strong);
    font-size: 15px;
    line-height: 1.55;
}

.exam-builder-mode-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.exam-builder-mode-tab {
    padding: 11px 16px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--muted-strong);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}

.exam-builder-mode-tab.active {
    background: linear-gradient(180deg, rgba(20,145,255,0.16), rgba(0,119,237,0.1));
    color: var(--accent-strong);
}

.exam-builder-panel {
    display: none;
    margin-top: 18px;
}

.exam-builder-panel.active {
    display: grid;
    gap: 18px;
}

.exam-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.exam-builder-card {
    padding: 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--shadow-md);
}

.exam-builder-card h4 {
    margin: 10px 0 8px;
    font-size: 22px;
    letter-spacing: -0.04em;
}

.exam-builder-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.exam-builder-card .field-grid + .toggle-row {
margin-top: 24px;
}

.section-list {
    display: grid;
    gap: 12px;
}

.exam-section-row {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(120px, 0.8fr) 52px;
    gap: 12px;
    align-items: center;
}

.delete-chip {
    width: 52px;
    min-width: 52px;
    border-radius: 16px;
    background: rgba(255, 69, 58, 0.08);
    color: #b14a43;
    box-shadow: none;
}

.exam-builder-warning {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 244, 214, 0.64);
    border: 1px solid rgba(255, 159, 10, 0.16);
    color: #8b5a00;
    font-size: 13px;
    line-height: 1.5;
}

.exam-balance-copy {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.exam-balance-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.exam-balance-stat {
    padding: 14px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.exam-balance-stat strong {
    display: block;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.exam-balance-stat span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.timed-estimate {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.toggle-row + .timed-estimate {
    margin-top: 24px;
}

.timed-estimate + .module-card-actions {
    margin-top: 24px;
}

.exam-builder-preview {
    display: none;
    padding: 22px;
    border-radius: 26px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--shadow-md);
}

.exam-builder-preview.show {
    display: block;
    animation: examPreviewIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.template-save-row {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.template-save-controls {
    display: none;
    grid-template-columns: minmax(220px, 320px) auto;
    gap: 10px;
    align-items: end;
}

.template-save-controls.show {
    display: grid;
}

.saved-template-card {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--shadow-md);
}

.saved-template-list {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.saved-template-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.saved-template-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.saved-template-copy strong {
    display: block;
    font-size: 15px;
    letter-spacing: -0.02em;
}

.saved-template-copy span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.saved-template-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.saved-template-load {
    box-shadow: none;
}

.preview-list,
.preview-meta {
    display: grid;
    gap: 10px;
}

.preview-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.preview-pill {
    padding: 14px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.preview-pill strong {
    display: block;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.preview-pill span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.preview-item span:last-child {
    color: var(--muted-strong);
    font-weight: 700;
}

.preview-warning {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 244, 214, 0.56);
    border: 1px solid rgba(255, 159, 10, 0.14);
    color: #8b5a00;
    font-size: 13px;
    line-height: 1.5;
}

#hoad-assessment-session .hoad-assessment-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#hoad-assessment-session .hoad-assessment-pill,
#hoad-assessment-session .hoad-assessment-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

#hoad-assessment-session .hoad-assessment-badges {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#hoad-assessment-session .hoad-assessment-question {
    margin: 18px 0 0;
    font-size: 21px;
    line-height: 1.55;
    letter-spacing: -0.02em;
    color: #111827;
    /* A handful of NBME items are laid out as a patient chart — headed sections and one
       finding per line. Honouring authored line breaks lets those render as written while
       still collapsing runs of spaces, so ordinary prose stems are unaffected. */
    white-space: pre-line;
}

#hoad-assessment-session .hoad-assessment-choices {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

#hoad-assessment-session .hoad-assessment-choice {
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,0.94);
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.07);
    padding: 16px 18px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#hoad-assessment-session .hoad-assessment-choice:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
    border-color: rgba(10, 132, 255, 0.18);
}

#hoad-assessment-session .hoad-assessment-choice.is-selected {
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.92));
    border-color: rgba(10, 132, 255, 0.24);
    color: #0f3d91;
    box-shadow: 0 12px 22px rgba(10, 132, 255, 0.08);
}

#hoad-assessment-session .hoad-assessment-choice:disabled {
    cursor: default;
    opacity: 1;
}

#hoad-assessment-session .hoad-assessment-choice.is-correct {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.92));
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
}

#hoad-assessment-session .hoad-assessment-choice.is-wrong {
    background: linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.92));
    border-color: rgba(239, 68, 68, 0.22);
    color: #991b1b;
}

#hoad-assessment-session .hoad-assessment-feedback {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

#hoad-assessment-session .hoad-assessment-feedback-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

#hoad-assessment-session .hoad-assessment-feedback-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #1f2937;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#hoad-assessment-session .hoad-assessment-feedback-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #334155;
}

#hoad-assessment-session .hoad-assessment-nav {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#hoad-assessment-session .hoad-assessment-nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#hoad-assessment-session .hoad-assessment-arrow,
#hoad-assessment-session .hoad-assessment-submit,
#hoad-assessment-session .hoad-assessment-reset,
#hoad-assessment-session .hoad-assessment-restart {
    width: auto;
    min-width: 126px;
    padding: 14px 20px;
}

#hoad-assessment-session .hoad-assessment-arrow {
    min-width: 54px;
    padding: 14px 16px;
    border-radius: 18px;
}

#hoad-assessment-session .hoad-assessment-submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#hoad-assessment-session .hoad-assessment-reset {
    background: rgba(255,255,255,0.9);
    color: #334155;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: none;
}

#hoad-assessment-session .hoad-assessment-empty {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

#hoad-assessment-session .hoad-assessment-summary {
    text-align: center;
}

#hoad-assessment-session .hoad-assessment-summary-score {
    margin: 18px 0 0;
    font-size: 42px;
    font-weight: 850;
    letter-spacing: -0.05em;
    color: #111827;
}

#assessment-session-page .hoad-assessment-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#assessment-session-page .hoad-assessment-pill,
#assessment-session-page .hoad-assessment-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

#assessment-session-page .hoad-assessment-badges {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#assessment-session-page .hoad-assessment-question {
    margin: 18px 0 0;
    font-size: 21px;
    line-height: 1.55;
    letter-spacing: -0.02em;
    color: #111827;
    white-space: pre-line;   /* see the note on the rule above */
}

#assessment-session-page .arena-question-meta {
    margin-top: 10px;
}

/* ---- Scratch work: stem highlighting + crossing out answer choices -------------------- */

/* The colour picker is absolutely positioned against this container, so it has to be the
   offset parent — otherwise the picker anchors to the page and drifts on scroll. */
#assessment-session-page #assessment-arena {
    position: relative;
}

#assessment-session-page .hoad-assessment-question {
    /* the stem is the only highlightable surface */
    cursor: text;
}

#assessment-session-page .hoad-highlight {
    background: transparent;      /* colour comes from the modifier */
    color: inherit;
    border-radius: 3px;
    padding: 1px 0;
    cursor: pointer;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

#assessment-session-page .hoad-highlight--yellow { background: #fdf0a8; }
#assessment-session-page .hoad-highlight--green  { background: #bdf0cd; }
#assessment-session-page .hoad-highlight--blue   { background: #bfe2ff; }

#assessment-session-page .hoad-highlight:hover {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25);
}

/* Floating colour picker. Positioned against the panel, which is the offset parent. */
#assessment-session-page .hoad-highlight-picker {
    position: absolute;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

/* display:flex above would otherwise beat the UA [hidden] rule and leave the picker on screen. */
#assessment-session-page .hoad-highlight-picker[hidden] {
    display: none;
}

#assessment-session-page .hoad-highlight-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease;
}

#assessment-session-page .hoad-highlight-swatch:hover {
    transform: scale(1.15);
}

#assessment-session-page .hoad-highlight-swatch--yellow { background: #fdf0a8; }
#assessment-session-page .hoad-highlight-swatch--green  { background: #bdf0cd; }
#assessment-session-page .hoad-highlight-swatch--blue   { background: #bfe2ff; }

/* A choice sits in a row with its own cross-out control, so eliminating an option never
   fires the click that selects it. */
#assessment-session-page .hoad-choice-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

#assessment-session-page .hoad-choice-row .hoad-assessment-choice {
    flex: 1 1 auto;
    min-width: 0;
}

#assessment-session-page .hoad-choice-strike {
    flex: 0 0 auto;
    width: 38px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#assessment-session-page .hoad-choice-strike:hover {
    color: #0f172a;
    border-color: rgba(10, 132, 255, 0.28);
    background: #ffffff;
}

#assessment-session-page .hoad-assessment-choice.is-struck {
    opacity: 0.45;
}

#assessment-session-page .hoad-assessment-choice.is-struck .hoad-choice-body {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* Multi-panel stems sit side by side rather than stacked — stacking wasted a screen of
   vertical space on items that show two halves of the same specimen. */
#assessment-session-page .hoad-question-figures {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

#assessment-session-page .hoad-question-figures .hoad-question-figure {
    flex: 0 1 auto;
    margin: 12px 0 0;
    max-width: min(100%, 420px);
}

#assessment-session-page .hoad-question-extra-images {
    display: contents;
}

/* While a figure downloads, hold its space and shimmer so the reader knows a picture is coming
   instead of staring at a gap. Cached images settle before this ever paints. */
#assessment-session-page .hoad-question-figure.is-figure-loading .hoad-question-figure-btn {
    display: block;
    min-width: 260px;
    min-height: 200px;
    border-radius: 14px;
    background-color: rgba(226, 232, 240, 0.7);
    background-image: linear-gradient(100deg,
        rgba(226, 232, 240, 0) 30%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(226, 232, 240, 0) 70%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: hoadFigureShimmer 1.3s ease-in-out infinite;
}

#assessment-session-page .hoad-question-figure.is-figure-loading img,
#assessment-session-page .hoad-question-figure.is-figure-loading .hoad-question-figure-hint {
    opacity: 0;
}

@keyframes hoadFigureShimmer {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

/* A figure that never arrives should say so rather than leave the reader waiting forever. */
#assessment-session-page .hoad-question-figure.has-figure-error .hoad-question-figure-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    min-height: 120px;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.9);
}

#assessment-session-page .hoad-question-figure.has-figure-error .hoad-question-figure-btn::after {
    content: "Image did not load — tap to retry";
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

#assessment-session-page .hoad-question-figure.has-figure-error img,
#assessment-session-page .hoad-question-figure.has-figure-error .hoad-question-figure-hint {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #assessment-session-page .hoad-question-figure.is-figure-loading .hoad-question-figure-btn {
        animation: none;
    }
}

/* Extra panels reuse .hoad-question-figure, so they need no styling of their own. */

/* Laboratory panels as real markup rather than a screenshot: highlightable, searchable, and
   able to reflow on a phone. Deliberately narrow — a lab panel that stretches the full column
   reads as a spreadsheet rather than as part of the vignette. */
#assessment-session-page .hoad-lab-table-slot[hidden] { display: none; }

#assessment-session-page .hoad-lab-table {
    margin: 14px 0 0;
    /* Wide enough that a long line ("leukocyte esterase positive, nitrites positive") has room to
       wrap instead of overflowing the box and being clipped, still narrow enough to read as part
       of the vignette rather than as a spreadsheet.
       NOTE: do not put `width: max-content` here. The grid inside is `width: 100%`, and a
       percentage width inside a max-content parent is circular — it collapses the panel to a few
       pixels and hides the whole table behind `overflow: hidden`. */
    max-width: min(100%, 560px);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.75);
    /* auto, not hidden: both clip to the rounded corners, but auto lets a table that is still too
       wide for a phone (three columns, an unbreakable "Undetectable") scroll inside the panel
       instead of silently losing its last column. */
    overflow: auto;
}

#assessment-session-page .hoad-lab-table .hoad-lab-table-title {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #475569;
    background: rgba(15, 23, 42, 0.04);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#assessment-session-page .hoad-lab-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
}

#assessment-session-page .hoad-lab-grid.is-wide { font-size: 13px; }

#assessment-session-page .hoad-lab-grid th,
#assessment-session-page .hoad-lab-grid td {
    padding: 7px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

#assessment-session-page .hoad-lab-grid tbody tr:last-child th,
#assessment-session-page .hoad-lab-grid tbody tr:last-child td {
    border-bottom: 0;
}

#assessment-session-page .hoad-lab-grid thead th {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    background: rgba(15, 23, 42, 0.03);
}

/* The test name is the label; the value is the thing being read, so the value carries the
   weight and sits in a tabular figure so decimal points line up down the column. */
#assessment-session-page .hoad-lab-grid tbody th[scope="row"] {
    font-weight: 500;
    color: #334155;
    /* Enough width that a three-word test name cannot be stacked one word per line, but not so
       much that a long label pushes the panel past the question column. */
    min-width: 12ch;
}

#assessment-session-page .hoad-lab-grid tbody td {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    /* Wrap rather than overflow. The panel clips its overflow to keep the rounded corners, so a
       long value set to `nowrap` silently loses its tail — which is how "nitrites positive"
       became "nitrit". A number and its unit are held together by the nbsp in the data. */
    white-space: normal;
    overflow-wrap: break-word;
}

#assessment-session-page .hoad-lab-grid tbody th[scope="row"],
#assessment-session-page .hoad-lab-grid tbody td { hyphens: none; }

#assessment-session-page .hoad-lab-table .hoad-lab-table-footnote {
    padding: 8px 14px;
    font-size: 12px;
    color: #64748b;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

#assessment-session-page .hoad-lab-grid .hoad-lab-section {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #64748b;
    background: rgba(15, 23, 42, 0.03);
}

/* Answer choices that are the rows of a grid. These stay ordinary choice buttons — selection,
   cross-out, and rationale behaviour are untouched — and only their contents are laid out in
   columns. The header and every row share one grid template so the columns line up. */
#assessment-session-page .hoad-assessment-choices.has-option-table .hoad-option-table-head,
#assessment-session-page .hoad-assessment-choice.has-choice-cells .hoad-choice-body {
    display: grid;
    grid-template-columns: 2.1rem repeat(var(--hoad-option-cols, 2), minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

#assessment-session-page .hoad-assessment-choices.has-option-table .hoad-option-table-head {
    /* Line the header up with the row text: the choice button's own padding plus the width of
       the cross-out control and its gap, so the columns cannot drift apart. */
    padding: 0 calc(38px + 8px + 18px) 10px 18px;
    /* The column title has to read as a heading over the rows, not as a caption under the stem,
       so it sits at body size in near-black rather than as small grey label text. */
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    text-align: left;
}

#assessment-session-page .hoad-assessment-choice.has-choice-cells .hoad-choice-cell {
    text-align: left;
    line-height: 1.4;
}

/* Once graded, the row body sits inside the explanation toggle (a flex row). Without a width
   the grid collapses to its content and the columns bunch up against the letter. */
#assessment-session-page .hoad-assessment-choice.has-choice-cells .choice-explanation-toggle {
    position: relative;
    display: block;
    width: 100%;
}
#assessment-session-page .hoad-assessment-choice.has-choice-cells .choice-explanation-toggle .hoad-choice-body {
    width: 100%;
    min-width: 0;
}
/* The ▾ glyph floats at the row's right edge instead of taking a slice of the grid, so a graded
   table row keeps exactly the same column positions as an ungraded one. */
#assessment-session-page .hoad-assessment-choice.has-choice-cells .choice-explanation-toggle .choice-explanation-glyph {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
#assessment-session-page .hoad-assessment-choice.has-choice-cells .choice-explanation-toggle .hoad-choice-pct {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
}

#assessment-session-page .hoad-assessment-choice.has-choice-cells .hoad-choice-cell.is-full-row {
    grid-column: 2 / -1;
}

/* Stacked layout: one labelled line per value. The label carries the weight so the eye lands on
   what is being measured, and the value stays regular so the three lines read as data, not shouting. */
#assessment-session-page .hoad-assessment-choices.is-stacked-table .hoad-assessment-choice.has-choice-cells .hoad-choice-body {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 3px 12px;
}

#assessment-session-page .hoad-assessment-choices.is-stacked-table .hoad-choice-cell {
    grid-column: 2;
    font-weight: 500;
}

#assessment-session-page .hoad-assessment-choices.is-stacked-table .hoad-choice-cell[data-column]:not([data-column=""])::before {
    content: attr(data-column) ": ";
    font-weight: 800;
    color: #0f172a;
}

/* The letter should sit on the first line of the stack rather than centre itself against it. */
#assessment-session-page .hoad-assessment-choices.is-stacked-table .hoad-choice-letter {
    align-self: start;
}

@media (max-width: 640px) {
    /* Three-column lab panels (test, result, reference range) need the width back from the cell
       padding to fit a phone without scrolling. */
    #assessment-session-page .hoad-lab-grid th,
    #assessment-session-page .hoad-lab-grid td { padding: 7px 9px; }
    #assessment-session-page .hoad-lab-grid tbody th[scope="row"] { min-width: 9ch; }

    /* Columns collapse to stacked cells rather than shrinking into unreadable slivers. */
    #assessment-session-page .hoad-assessment-choices.has-option-table .hoad-option-table-head {
        display: none;
    }

    /* …except over a strip of figures. A text cell can carry its column name inline once the
       header goes, but an unlabelled curve cannot, so the header stays and just gets smaller. */
    #assessment-session-page .hoad-assessment-choices.is-image-table .hoad-option-table-head {
        display: grid;
        font-size: 13px;
        padding-bottom: 6px;
    }

    #assessment-session-page .hoad-assessment-choice.has-choice-cells .hoad-choice-body {
        grid-template-columns: 2.1rem minmax(0, 1fr);
        gap: 4px 12px;
    }

    #assessment-session-page .hoad-assessment-choice.has-choice-cells .hoad-choice-cell {
        grid-column: 2;
    }

    /* Without the header row a stacked "Negative / higher / lower" says nothing about which
       column each value belongs to, so every cell names its own column. */
    #assessment-session-page .hoad-assessment-choice.has-choice-cells .hoad-choice-cell[data-column]:not([data-column=""])::before {
        content: attr(data-column) ": ";
        font-weight: 700;
        color: #334155;
    }
}

/* Answer choices that ARE a figure. The picture is the choice, so only a letter labels it —
   repeating a written description beside the image just adds noise. */
#assessment-session-page .hoad-choice-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
}

#assessment-session-page .hoad-choice-letter {
    flex: 0 0 auto;
    font-weight: 800;
    line-height: 1.4;
    min-width: 1.25em;
}

#assessment-session-page .hoad-choice-image {
    max-width: min(100%, 420px);
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

#assessment-session-page .hoad-assessment-choice.has-choice-image {
    align-items: flex-start;
}

/* Image table: each choice is one strip of figures under a shared header row. The strip takes
   the header's grid — the letter, then the data columns — and spans every data column, so the
   first figure in the strip sits under the first heading and so on. The 420px cap that suits a
   lone figure would leave the strip narrower than its own column headings. */
#assessment-session-page .hoad-assessment-choices.is-image-table .hoad-assessment-choice.has-choice-image .hoad-choice-body {
    display: grid;
    grid-template-columns: 2.1rem repeat(var(--hoad-option-cols, 2), minmax(0, 1fr));
    gap: 12px;
    align-items: center;
    width: 100%;
}

#assessment-session-page .hoad-assessment-choices.is-image-table .hoad-choice-image {
    grid-column: 2 / -1;
    width: 100%;
    max-width: none;
}

#assessment-session-page .hoad-assessment-choices.is-image-table .hoad-option-table-head {
    align-items: end;
}

/* Reference figure shown with the correct answer's teaching explanation. */
#assessment-session-page .hoad-explanation-figure {
    margin: 12px 0 0;
}

/* A pair of teaching figures is read by comparing them, so they sit side by side rather than
 * stacked — auto-fit keeps them on one row while each still has room, and drops to one column
 * on a phone instead of squeezing both into unreadable slivers. */
#assessment-session-page .hoad-explanation-figures.is-multi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}

#assessment-session-page .hoad-explanation-figures.is-multi .hoad-explanation-figure {
    margin: 12px 0 0;
    min-width: 0;   /* a grid item defaults to min-content, which would let a wide figure overflow */
}

#assessment-session-page .hoad-explanation-figure img {
    max-width: 100%;
    /* The 1px border sits outside a content-box width, so max-width:100% rendered the image
     * 2px wider than its column and clipped the border's right edge. */
    box-sizing: border-box;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    cursor: zoom-in;
}

/* Flags a question that only makes sense read with its neighbours. */
/* display:inline-flex below would otherwise beat the UA's [hidden] rule and leave an empty pill. */
#assessment-session-page .arena-question-set[hidden] {
    display: none;
}

#assessment-session-page .arena-question-set {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.94));
    border: 1px solid rgba(10, 132, 255, 0.22);
    color: #0f3d91;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#assessment-session-page .hoad-assessment-question strong {
    font-weight: 800;
    color: #0f172a;
}

#assessment-session-page .arena-difficulty-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Shown only before you answer, and only when a PREVIOUS block already graded this question.
   Amber rather than red — it is a heads-up, not a verdict on the attempt you are about to make. */
#assessment-session-page .arena-seen-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(236, 253, 245, 0.95);
    border: 1px solid rgba(16, 185, 129, 0.24);
    color: #047857;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#assessment-session-page .arena-seen-pill.is-missed {
    background: rgba(255, 251, 235, 0.95);
    border-color: rgba(217, 119, 6, 0.28);
    color: #b45309;
}

#assessment-session-page .arena-question-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* The `display` rules above carry ID-level specificity, which outranks the browser's built-in
   `[hidden] { display: none }`. Without these, setting `.hidden = true` in JS changes the
   attribute but leaves the element on screen — the seen-before pill stayed visible on every
   later question and kept the label from whichever question last had a record. Any new rule
   that gives one of these a `display` MUST keep a matching [hidden] rule beside it. */
#assessment-session-page .arena-question-meta[hidden],
#assessment-session-page .arena-seen-pill[hidden],
#assessment-session-page .arena-difficulty-chip[hidden] {
    display: none;
}

/* Same trap, found by probing every element the engine hides from JS. Both of these are set
   `.hidden = true` on each render; without this the feedback panel could keep showing the
   previous question's rationale, and the extra-image row could keep its old panels. */
#assessment-session-page .arena-feedback[hidden],
#assessment-session-page .hoad-question-extra-images[hidden] {
    display: none;
}

#assessment-session-page .hoad-assessment-choices {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

#assessment-session-page .hoad-assessment-choice {
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,0.94);
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.07);
    padding: 16px 18px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#assessment-session-page .hoad-assessment-choice:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
    border-color: rgba(10, 132, 255, 0.18);
}

#assessment-session-page .hoad-assessment-choice.is-selected {
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.92));
    border-color: rgba(10, 132, 255, 0.24);
    color: #0f3d91;
    box-shadow: 0 12px 22px rgba(10, 132, 255, 0.08);
}

#assessment-session-page .hoad-assessment-choice:disabled {
    cursor: default;
    opacity: 1;
}

#assessment-session-page .hoad-assessment-choice.is-correct {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.92));
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
}

#assessment-session-page .hoad-assessment-choice.is-wrong {
    background: linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.92));
    border-color: rgba(239, 68, 68, 0.22);
    color: #991b1b;
}

#assessment-session-page .hoad-assessment-feedback {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

#assessment-session-page .hoad-assessment-feedback-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

#assessment-session-page .hoad-assessment-feedback-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #1f2937;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#assessment-session-page .hoad-assessment-feedback-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #334155;
}

#assessment-session-page .hoad-assessment-nav {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#assessment-session-page .hoad-assessment-nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#assessment-session-page .hoad-assessment-arrow,
#assessment-session-page .hoad-assessment-submit,
#assessment-session-page .hoad-assessment-reset,
#assessment-session-page .hoad-assessment-restart {
    width: auto;
    min-width: 126px;
    padding: 14px 20px;
}

#assessment-session-page .hoad-assessment-arrow {
    min-width: 54px;
    padding: 14px 16px;
    border-radius: 18px;
}

#assessment-session-page .hoad-assessment-submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#assessment-session-page .hoad-assessment-reset {
    background: rgba(255,255,255,0.9);
    color: #334155;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    box-shadow: none;
}

#assessment-session-page .hoad-assessment-empty {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

#assessment-session-page .hoad-assessment-summary {
    text-align: center;
}

#assessment-session-page .hoad-assessment-summary-score {
    margin: 18px 0 0;
    font-size: 42px;
    font-weight: 850;
    letter-spacing: -0.05em;
    color: #111827;
}

/* ---- Study backgrounds ---------------------------------------------------------------
   Two independent axes so a dozen themes and four effects cover a lot of ground without a
   combinatorial mess: the THEME sets a wash plus two accent colours, and the EFFECT layer
   reuses those accents. Only the background ever changes — cards, text and the right/wrong
   colours stay fixed, so no combination can make a question harder to read.
   Attributes are set on <html> by shared/study-theme.js before first paint. */
:root,
[data-study-theme="arcanium"] {
    --study-wash: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    --study-a: 10, 132, 255;
    --study-b: 52, 199, 89;
}

[data-study-theme="mint"] {
    --study-wash: linear-gradient(180deg, #f7fdfa 0%, #e6f4ee 100%);
    --study-a: 16, 185, 129;
    --study-b: 10, 132, 255;
}

[data-study-theme="ocean"] {
    --study-wash: linear-gradient(180deg, #f5fcfd 0%, #dfeff5 100%);
    --study-a: 6, 148, 162;
    --study-b: 10, 132, 255;
}

[data-study-theme="sky"] {
    --study-wash: linear-gradient(180deg, #f7fbff 0%, #e3f0fd 100%);
    --study-a: 56, 160, 255;
    --study-b: 125, 211, 252;
}

[data-study-theme="forest"] {
    --study-wash: linear-gradient(180deg, #f8fbf8 0%, #e6f0e8 100%);
    --study-a: 34, 139, 94;
    --study-b: 132, 190, 120;
}

[data-study-theme="sunrise"] {
    --study-wash: linear-gradient(180deg, #fffaf6 0%, #fdeae0 100%);
    --study-a: 251, 146, 60;
    --study-b: 244, 114, 182;
}

[data-study-theme="rose"] {
    --study-wash: linear-gradient(180deg, #fffafb 0%, #fce8ee 100%);
    --study-a: 244, 114, 182;
    --study-b: 168, 132, 255;
}

[data-study-theme="amber"] {
    --study-wash: linear-gradient(180deg, #fffdf5 0%, #fdf1d9 100%);
    --study-a: 245, 178, 41;
    --study-b: 251, 146, 60;
}

[data-study-theme="lilac"] {
    --study-wash: linear-gradient(180deg, #fbfaff 0%, #eee9fb 100%);
    --study-a: 139, 92, 246;
    --study-b: 96, 165, 250;
}

[data-study-theme="sand"] {
    --study-wash: linear-gradient(180deg, #fefcf8 0%, #f2ebdf 100%);
    --study-a: 191, 158, 106;
    --study-b: 214, 190, 150;
}

[data-study-theme="graphite"] {
    --study-wash: linear-gradient(180deg, #fafbfc 0%, #e8ebf0 100%);
    --study-a: 71, 85, 105;
    --study-b: 148, 163, 184;
}

[data-study-theme="midnight"] {
    --study-wash: linear-gradient(180deg, #f4f6fb 0%, #dde3ef 100%);
    --study-a: 51, 65, 110;
    --study-b: 99, 128, 190;
}

.assessment-session-page {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    background: var(--study-wash);
    overflow: auto;
    isolation: isolate;
}

/* Effect layers are FIXED, not absolute: this page scrolls, and an absolute layer would stretch
   to the full scroll height and drag its blurs down the page. Both are inert to pointers and sit
   under the shell, which is lifted to z-index 1 below. */
.assessment-session-page::before,
.assessment-session-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.assessment-session-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 28px;
}

/* --- none ------------------------------------------------------------------------------- */
[data-study-effect="none"] .assessment-session-page::before,
[data-study-effect="none"] .assessment-session-page::after {
    display: none;
}

/* --- orbs: a few big soft circles drifting slowly ---------------------------------------- */
[data-study-effect="orbs"] .assessment-session-page::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--study-a), 0.22), transparent 22%),
        radial-gradient(circle at 84% 12%, rgba(var(--study-b), 0.20), transparent 20%),
        radial-gradient(circle at 72% 76%, rgba(var(--study-a), 0.16), transparent 24%),
        radial-gradient(circle at 22% 86%, rgba(var(--study-b), 0.14), transparent 20%);
    filter: blur(6px);
    animation: studyOrbDrift 26s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes studyOrbDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-2.5%, 2%, 0) scale(1.08); }
}

/* --- mesh: larger, static blooms that bleed into each other ------------------------------ */
[data-study-effect="mesh"] .assessment-session-page::before {
    background:
        radial-gradient(ellipse 62% 48% at 8% 6%, rgba(var(--study-a), 0.30), transparent 62%),
        radial-gradient(ellipse 54% 44% at 96% 14%, rgba(var(--study-b), 0.28), transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 104%, rgba(var(--study-a), 0.22), transparent 64%);
    filter: blur(14px);
}

/* --- grain: fine fractal noise over the wash --------------------------------------------- */
[data-study-effect="grain"] .assessment-session-page::before {
    background:
        radial-gradient(circle at 14% 12%, rgba(var(--study-a), 0.16), transparent 26%),
        radial-gradient(circle at 88% 84%, rgba(var(--study-b), 0.14), transparent 26%);
}

[data-study-effect="grain"] .assessment-session-page::after {
    /* Inline SVG turbulence — no image request, and it tiles seamlessly at any viewport size. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
    opacity: 0.5;
    mix-blend-mode: multiply;
}

/* --- waves: soft diagonal bands rolling very slowly across the wash ---------------------- */
[data-study-effect="waves"] .assessment-session-page::before {
    background:
        repeating-linear-gradient(112deg,
            rgba(var(--study-a), 0.10) 0px,
            transparent 90px,
            rgba(var(--study-b), 0.08) 180px,
            transparent 270px,
            rgba(var(--study-a), 0.09) 360px);
    background-size: 200% 200%;
    filter: blur(18px);
    animation: studyWaveRoll 40s linear infinite alternate;
    will-change: background-position;
}

@keyframes studyWaveRoll {
    from { background-position: 0% 0%; }
    to { background-position: 60% 40%; }
}

/* --- bokeh: a field of out-of-focus glints floating upward ------------------------------- */
[data-study-effect="bokeh"] .assessment-session-page::before {
    background:
        radial-gradient(circle at 8% 22%, rgba(var(--study-a), 0.28), transparent 5%),
        radial-gradient(circle at 26% 68%, rgba(var(--study-b), 0.22), transparent 4%),
        radial-gradient(circle at 42% 34%, rgba(var(--study-a), 0.18), transparent 6%),
        radial-gradient(circle at 58% 80%, rgba(var(--study-b), 0.24), transparent 4%),
        radial-gradient(circle at 72% 18%, rgba(var(--study-a), 0.22), transparent 5%),
        radial-gradient(circle at 88% 56%, rgba(var(--study-b), 0.20), transparent 6%),
        radial-gradient(circle at 16% 88%, rgba(var(--study-a), 0.16), transparent 4%),
        radial-gradient(circle at 92% 90%, rgba(var(--study-a), 0.18), transparent 5%);
    filter: blur(10px);
    animation: studyBokehFloat 34s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes studyBokehFloat {
    from { transform: translate3d(0, 1.5%, 0) scale(1); }
    to { transform: translate3d(-1.5%, -2%, 0) scale(1.06); }
}

/* --- rays: tall light shafts leaning through the page ------------------------------------ */
[data-study-effect="rays"] .assessment-session-page::before {
    background:
        linear-gradient(104deg,
            transparent 12%,
            rgba(var(--study-a), 0.14) 18%, transparent 26%,
            transparent 38%,
            rgba(var(--study-b), 0.12) 46%, transparent 55%,
            transparent 68%,
            rgba(var(--study-a), 0.10) 76%, transparent 86%);
    filter: blur(16px);
    animation: studyRayShimmer 30s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes studyRayShimmer {
    from { transform: translate3d(-1.5%, 0, 0); opacity: 0.75; }
    to { transform: translate3d(1.5%, 0, 0); opacity: 1; }
}

/* --- linen: fine woven texture, like paper stock ----------------------------------------- */
[data-study-effect="linen"] .assessment-session-page::before {
    background:
        repeating-linear-gradient(0deg, rgba(var(--study-a), 0.05) 0px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(var(--study-b), 0.05) 0px, transparent 1px, transparent 3px),
        radial-gradient(circle at 18% 12%, rgba(var(--study-a), 0.10), transparent 34%),
        radial-gradient(circle at 84% 82%, rgba(var(--study-b), 0.10), transparent 34%);
}

[data-study-effect="linen"] .assessment-session-page::after {
    /* Same inline turbulence as grain, kept faint so it reads as paper tooth. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
    opacity: 0.28;
    mix-blend-mode: multiply;
}

/* Drifting decoration goes still — not missing — for anyone who asked the OS for calm. */
@media (prefers-reduced-motion: reduce) {
    [data-study-effect="orbs"] .assessment-session-page::before,
    [data-study-effect="waves"] .assessment-session-page::before,
    [data-study-effect="bokeh"] .assessment-session-page::before,
    [data-study-effect="rays"] .assessment-session-page::before {
        animation: none;
    }
}

.assessment-session-page.show {
    display: block;
    animation: fadeIn 0.24s ease;
}

.assessment-session-topbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 28px;
    /* Tinted rather than flat white so the header reads as a branded band instead of blank
       chrome, with the same blue/green pair the wordmark uses. */
    background:
        radial-gradient(circle at 6% 0%, rgba(16, 185, 129, 0.13), transparent 34%),
        radial-gradient(circle at 34% 4%, rgba(10, 132, 255, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 248, 255, 0.95));
    border: 1px solid rgba(10, 132, 255, 0.12);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.1);
    /* NOT overflow:hidden — the background picker drops out of this bar and was being clipped.
       The accent rule below rounds its own top corners instead of relying on the clip. */
}

/* Accent rule along the top edge — the one piece of pure decoration, and the thing that makes
   the band read as deliberate branding rather than an untouched panel. */
.assessment-session-topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(90deg, #10b981, #0a84ff 45%, #67c1ff);
}

.arena-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

/* The nav's dot animates on entry; here it just sits and pulses, because the topbar mounts
   every time a block opens and a fresh fly-in each time would be noise. */
.assessment-session-topbar .brand-pulse-dot {
    animation: brandPulse 1.8s ease-in-out infinite;
}

.arena-topbar-brand .brand-wordmark-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.arena-topbar-brand .brand-wordmark-auc,
.arena-topbar-brand .brand-wordmark-companion {
    font-size: 34px;
}

/* Scaled up with the wordmark; the nav's 8px dot looks like a speck next to 34px type. */
.assessment-session-topbar .brand-pulse-dot {
    width: 14px;
    height: 14px;
}

/* Centred against the title rather than sitting on its baseline — next to 46px type a
   baseline-aligned pill reads as if it has slipped down the line. */
.arena-topbar-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.arena-topbar-title-row h3 {
    margin: 0;
}

/* Reads as a URL rather than a label — lowercase, tracked out, with a small globe. That is what
   makes a passer-by register it as somewhere they can actually go, instead of a section title. */
.arena-topbar-domain {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 13px;
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.09);
    border: 1px solid rgba(10, 132, 255, 0.2);
    color: #0f3d91;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.arena-topbar-domain::before {
    content: "🌐";
    font-size: 14px;
    line-height: 1;
}

.arena-topbar-copy h3 {
    margin: 0;
    font-size: clamp(34px, 5vw, 46px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.assessment-session-topbar p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.arena-topbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.arena-topbar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.assessment-session-close {
    flex: 0 0 auto;
    width: auto;
}

#assessment-arena {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
}

.arena-sidebar,
.arena-question-panel,
.arena-summary-card {
    border-radius: 28px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.arena-sidebar {
    padding: 22px 18px;
    align-self: start;
    position: sticky;
    top: 24px;
}

.arena-sidebar h4 {
    margin: 8px 0 0;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.arena-sidebar-copy {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.arena-sidebar-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.arena-nav-button {
    width: 100%;
    min-width: 0;
    padding: 12px 0;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 14px;
    font-weight: 800;
    box-shadow: none;
}

.arena-nav-button.is-current {
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.92));
    border-color: rgba(10, 132, 255, 0.22);
    color: #0f3d91;
    box-shadow: 0 12px 24px rgba(10, 132, 255, 0.1);
}

.arena-nav-button.is-submitted {
    border-color: rgba(148, 163, 184, 0.28);
}

.arena-nav-button.is-correct {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.92));
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
}

.arena-nav-button.is-wrong {
    background: linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.92));
    border-color: rgba(239, 68, 68, 0.22);
    color: #991b1b;
}

.arena-sidebar-stats {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.arena-sidebar-stat {
    padding: 14px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.arena-sidebar-stat strong {
    display: block;
    font-size: 22px;
    letter-spacing: -0.04em;
}

.arena-sidebar-stat span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.arena-main {
    min-width: 0;
}

.arena-question-panel {
    padding: 26px;
}

.arena-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.arena-panel-head h4 {
    margin: 8px 0 0;
    font-size: 30px;
    letter-spacing: -0.05em;
}

.arena-panel-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Clears this one question back to untouched — for handing the screen to someone else mid-block.
   Kept quiet so it is never mistaken for a navigation control. */
.hoad-question-reset {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(248, 250, 252, 0.9);
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hoad-question-reset:hover:not(:disabled) {
    color: #0f172a;
    border-color: rgba(10, 132, 255, 0.32);
    background: #ffffff;
}

.hoad-question-reset:disabled {
    opacity: 0.35;
    cursor: default;
}

.arena-feedback-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.arena-feedback-status.is-correct {
    background: rgba(236, 253, 245, 0.98);
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
}

.arena-feedback-status.is-wrong {
    background: rgba(255, 241, 242, 0.98);
    border-color: rgba(239, 68, 68, 0.22);
    color: #991b1b;
}

.arena-feedback {
    margin-top: 20px;
    display: grid;
    gap: 14px;
}

.arena-feedback-card {
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.arena-feedback-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1f2937;
}

.arena-feedback-card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: #334155;
}

.arena-summary-card {
    padding: 30px;
}

.arena-summary-card [hidden] {
    display: none !important;
}

/* Tier accent: one variable set per result band, consumed by the ring, the
   percent, and the verdict so the whole screen agrees on the judgement. */
.arena-summary-card,
.arena-summary-card[data-tier="mid"] {
    --summary-accent: #0a84ff;
    --summary-accent-deep: #0f3d91;
    --summary-accent-soft: rgba(10, 132, 255, 0.12);
}

.arena-summary-card[data-tier="high"] {
    --summary-accent: #16a34a;
    --summary-accent-deep: #14532d;
    --summary-accent-soft: rgba(34, 197, 94, 0.14);
}

.arena-summary-card[data-tier="low"] {
    --summary-accent: #d97706;
    --summary-accent-deep: #92400e;
    --summary-accent-soft: rgba(217, 119, 6, 0.13);
}

.arena-summary-card[data-tier="floor"] {
    --summary-accent: #dc2626;
    --summary-accent-deep: #991b1b;
    --summary-accent-soft: rgba(239, 68, 68, 0.12);
}

.arena-summary-hero {
    display: flex;
    align-items: center;
    gap: 30px;
}

.arena-summary-ring {
    position: relative;
    flex: 0 0 auto;
    width: 168px;
    height: 168px;
}

.arena-summary-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.arena-summary-ring-track,
.arena-summary-ring-fill {
    fill: none;
    stroke-width: 10;
}

.arena-summary-ring-track {
    stroke: rgba(15, 23, 42, 0.07);
}

.arena-summary-ring-fill {
    stroke: var(--summary-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.arena-summary-ring-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    text-align: center;
}

.arena-summary-percent {
    font-size: 40px;
    font-weight: 850;
    letter-spacing: -0.05em;
    color: var(--summary-accent-deep);
    line-height: 1;
}

.arena-summary-score {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.arena-summary-headline {
    min-width: 0;
}

.arena-summary-card h4 {
    margin: 8px 0 0;
    font-size: clamp(26px, 4vw, 34px);
    letter-spacing: -0.05em;
    color: #111827;
}

.arena-summary-explainer {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--muted-strong);
    font-size: 14px;
    line-height: 1.55;
}

.arena-summary-stats {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.arena-summary-stat {
    min-width: 104px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.arena-summary-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.04em;
    color: #111827;
}

.arena-summary-stat[data-tone="good"] strong { color: #166534; }
.arena-summary-stat[data-tone="bad"] strong { color: #991b1b; }

.arena-summary-stat[data-tone="good"] {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(240, 253, 244, 0.9));
    border-color: rgba(34, 197, 94, 0.18);
}

.arena-summary-stat[data-tone="bad"] {
    background: linear-gradient(180deg, rgba(255, 241, 242, 0.96), rgba(254, 242, 242, 0.9));
    border-color: rgba(239, 68, 68, 0.16);
}

.arena-summary-stat span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.arena-summary-breakdown {
    margin-top: 24px;
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.7), rgba(248, 250, 252, 0.85));
    border: 1px solid rgba(10, 132, 255, 0.1);
    display: grid;
    gap: 13px;
}

.arena-summary-breakdown-head {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.arena-summary-breakdown-row {
    display: grid;
    gap: 6px;
}

.arena-summary-breakdown-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.arena-summary-breakdown-label {
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    min-width: 0;
}

.arena-summary-breakdown-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.arena-summary-breakdown-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.arena-summary-breakdown-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #0a84ff;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.arena-summary-breakdown-bar span[data-tone="good"] { background: #22c55e; }
.arena-summary-breakdown-bar span[data-tone="ok"] { background: #0a84ff; }
.arena-summary-breakdown-bar span[data-tone="warn"] { background: #f59e0b; }
.arena-summary-breakdown-bar span[data-tone="bad"] { background: #ef4444; }

.arena-summary-breakdown-more {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.arena-summary-missed {
    margin-top: 22px;
    display: grid;
    gap: 10px;
}

.arena-summary-clean {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(240, 253, 244, 0.9));
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.arena-summary-clean-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    color: #166534;
    font-size: 18px;
    font-weight: 900;
}

.arena-summary-clean strong {
    display: block;
    color: #14532d;
    font-size: 15px;
}

.arena-summary-clean span:not(.arena-summary-clean-mark) {
    display: block;
    margin-top: 2px;
    color: #166534;
    font-size: 13px;
}

.arena-summary-review-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.arena-summary-review-heading span {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.arena-summary-missed-list {
    display: grid;
    gap: 8px;
}

.arena-summary-missed-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.arena-summary-missed-item:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(10, 132, 255, 0.24);
    transform: translateY(-1px);
}

.arena-summary-missed-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(255, 228, 230, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.18);
    color: #991b1b;
    font-size: 13px;
    font-weight: 800;
}

.arena-summary-missed-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.arena-summary-missed-copy strong {
    display: block;
    font-size: 14px;
    color: #111827;
}

.arena-summary-missed-copy span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.arena-summary-missed-go {
    flex: 0 0 auto;
    color: #0f3d91;
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.arena-summary-missed-item:hover .arena-summary-missed-go {
    opacity: 1;
}

.arena-summary-actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.arena-summary-actions .button {
    width: auto;
}

/* One clear primary per screen: the exit button steps back to a quiet outline so
   "Review Assessment" is the only loud call to action. */
#assessment-session-page .arena-summary-actions [data-hoad-close-summary] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #334155;
    box-shadow: none;
}

#assessment-session-page .arena-summary-actions [data-hoad-close-summary]:hover {
    background: rgba(248, 250, 252, 1);
    border-color: rgba(15, 23, 42, 0.2);
}

.quiz-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(244, 247, 251, 0.58);
    backdrop-filter: blur(18px);
}

.quiz-save-overlay.show {
    display: flex;
    animation: fadeIn 0.22s ease;
}

.quiz-save-modal {
    width: min(460px, 100%);
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 28px 72px rgba(15, 23, 42, 0.16);
}

.quiz-save-modal h3 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.04em;
}

.quiz-save-modal p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.quiz-save-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.quiz-save-actions .button {
    width: auto;
}

.quiz-save-controls {
    display: none;
    margin-top: 18px;
    gap: 12px;
}

.quiz-save-controls.show {
    display: grid;
}

.quiz-save-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
}

@keyframes examPreviewIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@media (max-width: 720px) {
    .assessment-session-page {
        overflow: auto;
    }

    .assessment-session-shell {
        padding: 18px 14px 28px;
    }

    .assessment-session-topbar {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    /* The topbar clips its overflow, so the wordmark is trimmed rather than cut off, and the
       title row wraps the domain onto its own line when it will not fit beside the heading. */
    .arena-topbar-brand .brand-wordmark-auc,
    .arena-topbar-brand .brand-wordmark-companion {
        font-size: 26px;
    }

    .arena-topbar-title-row {
        gap: 9px;
    }

    .arena-topbar-meta {
        justify-content: flex-start;
    }

    #assessment-arena {
        grid-template-columns: 1fr;
    }

    .arena-sidebar {
        position: static;
        overflow: hidden;
    }

    .arena-sidebar-grid {
        grid-template-columns: repeat(10, minmax(64px, 64px));
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .arena-question-panel {
        padding: 22px;
    }

    #assessment-session-page .hoad-assessment-nav {
        flex-direction: column;
        align-items: stretch;
    }

    #assessment-session-page .hoad-assessment-nav-group {
        justify-content: space-between;
    }

    .arena-summary-actions .button {
        width: 100%;
    }

    .arena-summary-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .arena-summary-ring {
        width: 148px;
        height: 148px;
    }

    .arena-summary-percent {
        font-size: 34px;
    }

    .arena-summary-missed-go {
        display: none;
    }

    .quiz-save-modal {
        padding: 22px;
        border-radius: 24px;
    }

    .quiz-save-actions {
        flex-direction: column;
    }

    .quiz-save-actions .button {
        width: 100%;
    }
}

.exam-builder-modal .icon-button,
.exam-builder-modal .exam-builder-mode-tab,
.exam-builder-modal .delete-chip {
    box-shadow: none;
}

.exam-builder-modal .icon-button {
    padding: 0;
    background: rgba(255,255,255,0.78);
    color: var(--muted-strong);
}

.exam-builder-modal .exam-builder-mode-tab {
    background: transparent;
    color: var(--muted-strong);
}

.exam-builder-modal .exam-builder-mode-tab.active {
    background: linear-gradient(180deg, rgba(20,145,255,0.16), rgba(0,119,237,0.1));
    color: var(--accent-strong);
}

.exam-builder-modal .delete-chip {
    padding: 0;
    background: rgba(255, 69, 58, 0.08);
    color: #b14a43;
}

@media (max-width: 820px) {
    .exam-builder-grid,
    .preview-meta,
    .exam-balance-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .exam-builder-modal {
        padding: 22px;
    }

    .exam-builder-head {
        flex-direction: column;
    }

    .exam-section-row {
        grid-template-columns: 1fr;
    }
}

/* Question image — click-to-expand thumbnail + lightbox */
.hoad-question-figure {
    margin: 16px 0 0;
    padding: 0;
}

.hoad-question-figure-btn {
    position: relative;
    display: inline-block;
    max-width: min(420px, 100%);
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #fff;
    cursor: zoom-in;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hoad-question-figure-btn:hover,
.hoad-question-figure-btn:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent, #0ea5a4);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    outline: none;
}

.hoad-question-figure-btn img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.hoad-question-figure-hint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    pointer-events: none;
}

.hoad-image-lightbox[hidden] {
    display: none;
}

/* An open lightbox must beat EVERY floating chrome (toolkit, pops, badges live on <body>
   above the page's own stacking context, so no z-index *inside* the page can ever win).
   The page itself outranks them while a lightbox is open — the systemic fix. */
.assessment-session-page:has(.hoad-image-lightbox:not([hidden])) {
    z-index: 3600 !important;
}

/* ...and the shell (z-index 1, which traps the lightbox's own z) outranks the page's other
   direct children (exit button, bottom bar) for the same duration. */
.assessment-session-shell:has(.hoad-image-lightbox:not([hidden])) {
    z-index: 4000 !important;
}

.hoad-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 32px;
}

.hoad-image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.hoad-image-lightbox-inner {
    position: relative;
    max-width: min(1100px, 96vw);
    max-height: 92vh;
}

.hoad-image-lightbox-inner img {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    background: #fff;
}

.hoad-image-lightbox-x {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: #fff;
    color: #111827;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.hoad-image-lightbox-x:hover,
.hoad-image-lightbox-x:focus-visible {
    background: var(--accent, #0ea5a4);
    color: #fff;
    outline: none;
}

@media (max-width: 720px) {
    .hoad-image-lightbox-x {
        top: 8px;
        right: 8px;
    }
}

/* ---- Background picker ---------------------------------------------------------------- */
.arena-theme-picker {
    position: relative;
}

.arena-theme-toggle {
    gap: 7px;
    cursor: pointer;
}

.arena-theme-toggle-dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    /* Shows the active theme, so the control previews what it controls. */
    background: var(--study-bg-swatch, linear-gradient(135deg, #eaf3ff, #cfe4ff));
    border: 1px solid rgba(15, 23, 42, 0.14);
}

.arena-theme-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 20;
    width: max-content;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
}

.arena-theme-menu[hidden] {
    display: none;
}

.arena-theme-heading {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.arena-theme-heading + * {
    margin-top: 9px;
}

.arena-theme-grid {
    display: grid;
    /* Fixed tracks, not 1fr: the menu is absolutely positioned so it has no width to divide
       and fractional columns collapse to a fraction of the intended size. */
    grid-template-columns: repeat(4, 74px);
    gap: 6px;
    margin-bottom: 14px;
}

.arena-theme-swatch {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: none;
    color: #475569;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.arena-theme-swatch:hover {
    background: rgba(10, 132, 255, 0.06);
}

.arena-theme-swatch.is-active {
    border-color: rgba(10, 132, 255, 0.34);
    background: rgba(10, 132, 255, 0.09);
    color: #0f3d91;
}

.arena-theme-swatch-chip {
    width: 44px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.arena-theme-swatch.is-active .arena-theme-swatch-chip {
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
}

.arena-theme-effects {
    display: flex;
    gap: 6px;
}

.arena-theme-effect {
    flex: 1 1 0;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(248, 250, 252, 0.9);
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.arena-theme-effect:hover {
    background: rgba(10, 132, 255, 0.07);
}

.arena-theme-effect.is-active {
    border-color: rgba(10, 132, 255, 0.34);
    background: rgba(10, 132, 255, 0.11);
    color: #0f3d91;
}

/* ---- Floating brand badge -------------------------------------------------------------
   The topbar carries the branding, but it scrolls away on a long question. This badge takes
   over once the header leaves the viewport, so anyone glancing at a projected screen still
   sees whose product it is. Purely decorative — aria-hidden, and it repeats the header. */
.arena-brand-float {
    /* left/top are set from JS to track the navigator card; the fallback keeps it sane if that
       measurement has not run yet. */
    position: fixed;
    left: 22px;
    top: 60%;
    z-index: 1320;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px 12px 15px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 12% 10%, rgba(16, 185, 129, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(243, 248, 255, 0.97));
    border: 1px solid rgba(10, 132, 255, 0.22);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 0 0 6px rgba(10, 132, 255, 0.05);
    pointer-events: none;
    animation: brandFloatIn 0.42s cubic-bezier(0.22, 1.4, 0.42, 1) both,
               brandFloatBob 4.2s ease-in-out 0.5s infinite;
}

.arena-brand-float[hidden] {
    display: none;
}

/* Pops up from below with a slight overshoot, then settles into a gentle hover. */
@keyframes brandFloatIn {
    from { opacity: 0; transform: translateY(26px) scale(0.82); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes brandFloatBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.arena-brand-float.is-leaving {
    animation: brandFloatOut 0.24s ease both;
}

@keyframes brandFloatOut {
    to { opacity: 0; transform: translateY(16px) scale(0.9); }
}

.arena-brand-float .brand-pulse-dot {
    width: 12px;
    height: 12px;
    animation: brandPulse 1.8s ease-in-out infinite;
}

.arena-brand-float-text {
    display: grid;
    gap: 1px;
}

.arena-brand-float-name .brand-wordmark-auc,
.arena-brand-float-name .brand-wordmark-companion {
    font-size: 19px;
}

.arena-brand-float-name .brand-wordmark-companion {
    margin-left: 5px;
}

.arena-brand-float-domain {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f3d91;
}

@media (prefers-reduced-motion: reduce) {
    .arena-brand-float {
        animation: none;
    }
}

@media (max-width: 720px) {
    .arena-brand-float {
        padding: 9px 14px 9px 12px;
    }
    .arena-brand-float-name .brand-wordmark-auc,
    .arena-brand-float-name .brand-wordmark-companion {
        font-size: 16px;
    }
}

/* ---- Transient question text size -----------------------------------------------------
   For projecting to a room. Scales the question's own text only — the header, navigator and
   brand stay put, so nothing is lost the way it is with browser zoom. Resets on the next
   question, because it is a per-question aid rather than a setting. */
/* A small A beside a large A — the conventional "text size" mark, and unlike a plus sign it
   says what it changes without a label. The glyph pair is baseline-aligned to each other while
   the pair as a whole is centred in the button; mixing those two on one element is what left
   the old A+ sitting high. */
.hoad-text-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(248, 250, 252, 0.96);
    color: #475569;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.hoad-text-size-glyph {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.hoad-text-size-glyph span:first-child {
    font-size: 11px;
}

.hoad-text-size-glyph span:last-child {
    font-size: 18px;
}

.hoad-text-size:hover {
    background: rgba(10, 132, 255, 0.09);
    border-color: rgba(10, 132, 255, 0.28);
    color: #0a84ff;
}

.hoad-text-size.is-active {
    background: rgba(10, 132, 255, 0.13);
    border-color: rgba(10, 132, 255, 0.4);
    color: #0f3d91;
}

/* One multiplier drives every size below, so adding a step means editing one line. */
#assessment-session-page .arena-question-panel { --q-scale: 1; }
#assessment-session-page .arena-question-panel[data-q-scale="2"] { --q-scale: 1.18; }
#assessment-session-page .arena-question-panel[data-q-scale="3"] { --q-scale: 1.38; }
#assessment-session-page .arena-question-panel[data-q-scale="4"] { --q-scale: 1.62; }

#assessment-session-page .arena-question-panel .hoad-assessment-question {
    font-size: calc(21px * var(--q-scale));
}

#assessment-session-page .arena-question-panel .hoad-assessment-choice {
    font-size: calc(16px * var(--q-scale));
}

#assessment-session-page .arena-question-panel .hoad-lab-grid {
    font-size: calc(14px * var(--q-scale));
}

#assessment-session-page .arena-question-panel .hoad-lab-grid.is-wide {
    font-size: calc(13px * var(--q-scale));
}

#assessment-session-page .arena-question-panel .arena-feedback-card p,
#assessment-session-page .arena-question-panel .choice-explanation {
    font-size: calc(15px * var(--q-scale));
}

/* The figure grows with the text — on a projector the histology is usually the hard part. */
#assessment-session-page .arena-question-panel[data-q-scale="2"] .hoad-question-figure img { max-height: 560px; }
#assessment-session-page .arena-question-panel[data-q-scale="3"] .hoad-question-figure img { max-height: 680px; }
#assessment-session-page .arena-question-panel[data-q-scale="4"] .hoad-question-figure img { max-height: 820px; }

/* ---- Matching items -------------------------------------------------------------------
   One question, many rows. Built from the same palette as the choice buttons — green for a
   banked row, red for one still wrong — so the grid reads as part of the same question rather
   than a bolted-on widget.

   Every rule below carries a matching [hidden] partner where one is needed: ID-specificity
   display rules on this page outrank the browser's built-in [hidden] { display: none }. */
#assessment-session-page .hoad-assessment-choices.is-matching {
    gap: 10px;
}

#assessment-session-page .hoad-match {
    display: grid;
    gap: 10px;
}

#assessment-session-page .hoad-match-hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}

#assessment-session-page .hoad-match-legend {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.07);
}

#assessment-session-page .hoad-match-legend-title {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

#assessment-session-page .hoad-match-legend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px 16px;
}

#assessment-session-page .hoad-match-legend-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: calc(14px * var(--q-scale, 1));
    line-height: 1.45;
    color: #1f2937;
}

#assessment-session-page .hoad-match-legend-item b {
    flex: 0 0 auto;
    min-width: 20px;
    font-size: 13px;
    font-weight: 800;
    color: #0a84ff;
}

#assessment-session-page .hoad-match-row {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.07);
    transition: border-color 0.18s ease, background 0.18s ease;
}

#assessment-session-page .hoad-match-row.is-correct {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(220, 252, 231, 0.92));
    border-color: rgba(34, 197, 94, 0.24);
}

#assessment-session-page .hoad-match-row.is-wrong {
    background: linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 228, 230, 0.92));
    border-color: rgba(239, 68, 68, 0.22);
}

#assessment-session-page .hoad-match-prompt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

#assessment-session-page .hoad-match-prompt-text {
    font-size: calc(15px * var(--q-scale, 1));
    font-weight: 700;
    line-height: 1.4;
    color: #111827;
}

/* How many letters the row wants. Without it the reader cannot tell a one-answer row from a
   two-answer row until they get it wrong. */
#assessment-session-page .hoad-match-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

#assessment-session-page .hoad-match-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#assessment-session-page .hoad-match-chip {
    min-width: 34px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.12);
    font-size: 13px;
    font-weight: 800;
    color: #475569;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

#assessment-session-page .hoad-match-chip:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(10, 132, 255, 0.32);
    color: #0f3d91;
}

#assessment-session-page .hoad-match-chip.is-picked {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.94));
    border-color: rgba(10, 132, 255, 0.4);
    color: #0f3d91;
}

/* After grading, the key is marked on every row whether or not it was picked, and a pick that
   is not in the key is called out — the two together say what was missed and what was extra. */
#assessment-session-page .hoad-match-chip.is-answer {
    background: linear-gradient(180deg, rgba(220, 252, 231, 0.98), rgba(187, 247, 208, 0.94));
    border-color: rgba(34, 197, 94, 0.5);
    color: #166534;
}

#assessment-session-page .hoad-match-chip.is-extra {
    background: linear-gradient(180deg, rgba(255, 228, 230, 0.98), rgba(254, 205, 211, 0.94));
    border-color: rgba(239, 68, 68, 0.45);
    color: #991b1b;
    text-decoration: line-through;
}

#assessment-session-page .hoad-match-chip:disabled {
    cursor: default;
}

#assessment-session-page .hoad-match-note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: calc(14px * var(--q-scale, 1));
    line-height: 1.55;
    color: #334155;
}

#assessment-session-page .hoad-match-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(8px);
}

#assessment-session-page .hoad-match-score {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

#assessment-session-page .hoad-match-score.is-complete {
    color: #166534;
}

#assessment-session-page .hoad-match-actions .button {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    #assessment-session-page .hoad-match-legend-list {
        grid-template-columns: 1fr;
    }

    #assessment-session-page .hoad-match-prompt {
        flex-direction: column;
        gap: 4px;
    }
}

/* A footnote under the correct answer saying how this item differs from the exam it came from —
   a key we corrected, a duplicated choice we replaced. Small, italic and yellow so it reads as an
   aside rather than as part of the reasoning, and so a reader scanning the rationale can skip it. */
#assessment-session-page .choice-source-note {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(217, 119, 6, 0.28);
    border-left-width: 3px;
    background: rgba(254, 249, 231, 0.92);
    color: #854d0e;
    font-size: calc(12.5px * var(--q-scale, 1));
    font-style: italic;
    line-height: 1.5;
}

/* ---- Tutor-mode celebration layer ----
   One-shot feedback on the pick that was just graded. The engine re-renders the whole
   question after every attempt, so each of these classes is freshly applied to a brand-new
   node and never needs cleanup. Everything here is decoration: it must never move layout,
   only transform/box-shadow, and it all switches off under prefers-reduced-motion. */

@keyframes hoadChoiceCorrectPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.02); }
    65% { transform: scale(0.995); }
    100% { transform: scale(1); }
}

@keyframes hoadChoiceGlow {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    100% { box-shadow: 0 0 0 16px rgba(34, 197, 94, 0); }
}

@keyframes hoadChoiceShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

@keyframes hoadWrongFlash {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
    100% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

.hoad-assessment-choice.is-just-correct {
    animation: hoadChoiceCorrectPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               hoadChoiceGlow 0.7s ease-out;
}

.hoad-assessment-choice.is-just-wrong {
    animation: hoadChoiceShake 0.4s ease-in-out,
               hoadWrongFlash 0.55s ease-out;
}

/* Confetti burst for a first-try correct. The row anchors it; bits fly on CSS custom
   props set inline by the engine, then the whole thing removes itself. */
.hoad-choice-row {
    position: relative;
}

.hoad-confetti {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 6;
}

.hoad-confetti span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: hoadConfettiFly 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hoadConfettiFly {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4); }
}

@keyframes hoadPillPop {
    0% { transform: scale(0.85); }
    55% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.arena-feedback-status.is-pill-pop {
    animation: hoadPillPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hoadNavPop {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.arena-nav-button.is-just-graded {
    animation: hoadNavPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Streak tile: amber while warm (2+), ember red once blazing (5+). */
.arena-streak-stat {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(180deg, #fffbeb, #fff7ed);
}

/* The stat tile's generic `span` rule turns every nested span into a block,
   which threw the flame onto its own line. Keep it beside the label. */
.arena-streak-stat span span {
    display: inline;
    margin-top: 0;
}

.arena-streak-stat strong {
    color: #b45309;
}

.arena-streak-stat[data-heat="blaze"] {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(180deg, #fff7ed, #ffedd5);
}

.arena-streak-stat[data-heat="blaze"] strong {
    color: #c2410c;
}

@keyframes hoadStreakBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.07); }
    100% { transform: scale(1); }
}

.arena-streak-stat.is-bumped {
    animation: hoadStreakBump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .hoad-assessment-choice.is-just-correct,
    .hoad-assessment-choice.is-just-wrong,
    .hoad-confetti span,
    .arena-feedback-status.is-pill-pop,
    .arena-nav-button.is-just-graded,
    .arena-streak-stat.is-bumped {
        animation: none;
    }
}

/* ---- Question flagging ----
   NBME-style mark. The head button toggles it; the navigator square grows an amber
   corner so flagged questions are findable at a glance — including during an exam
   block, where it works alongside the neutral "answered" tint below. */

.hoad-question-flag {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(248, 250, 252, 0.9);
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hoad-question-flag:hover {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.45);
    background: #fffbeb;
}

.hoad-question-flag.is-flagged {
    background: linear-gradient(180deg, #fffbeb, #fef3c7);
    border-color: rgba(245, 158, 11, 0.55);
    color: #b45309;
}

.arena-nav-button {
    position: relative;
    overflow: hidden;
}

.arena-nav-button.is-flagged::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 14px 14px 0;
    border-color: transparent #f59e0b transparent transparent;
}

/* Exam mode only: an answer is down, but no verdict is implied — neutral blue. */
.arena-nav-button.is-answered:not(.is-current) {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(224, 238, 254, 0.92));
    border-color: rgba(10, 132, 255, 0.25);
    color: #0f3d91;
}

/* Summary: flagged questions as jump chips, above the review list. */
.arena-summary-flagged {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffbeb, #fef3c7);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.arena-summary-flagged-label {
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.arena-summary-flag-chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #92400e;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.arena-summary-flag-chip:hover {
    background: #fff;
    border-color: #d97706;
}

/* ---- Community answer statistics (remote mode) --------------------------------
   Percent pills appear on each choice only AFTER the question is answered, and only
   once at least 5 students have a first attempt recorded. The community line sits
   at the bottom of the winning rationale; young questions show the seedling note. */
.hoad-assessment-choice .hoad-choice-pct {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
    min-width: 44px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(51, 65, 92, 0.08);
    color: #33415c;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.hoad-assessment-choice.is-correct .hoad-choice-pct {
    background: rgba(22, 128, 90, 0.14);
    color: #14684a;
}

.hoad-assessment-choice.is-wrong .hoad-choice-pct {
    background: rgba(190, 42, 42, 0.10);
    color: #a02c2c;
}

.choice-community-line {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(51, 65, 92, 0.18);
    color: #4a5872;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---- Save-on-exit dialog -------------------------------------------------------
   Replaces the old window.confirm. Same visual family as the loading overlay:
   blurred backdrop, wordmark, one card. */
.assess-save-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(30, 41, 59, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 160ms ease;
}

.assess-save-modal.is-open { opacity: 1; }

.assess-save-modal__card {
    width: min(430px, 92vw);
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(15, 30, 60, 0.28);
    padding: 30px 28px 22px;
    text-align: center;
    transform: translateY(8px);
    transition: transform 180ms ease;
}

.assess-save-modal.is-open .assess-save-modal__card { transform: translateY(0); }

.assess-save-modal__logo {
    width: 150px;
    height: auto;
    margin-bottom: 14px;
}

.assess-save-modal__card h3 {
    margin: 0 0 6px;
    font-size: 1.3rem;
    color: #16233c;
}

.assess-save-modal__meta {
    margin: 0 0 18px;
    color: #4a5872;
    font-size: 0.92rem;
}

.assess-save-modal__name {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid rgba(51, 65, 92, 0.22);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #16233c;
    margin-bottom: 16px;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.assess-save-modal__name:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.assess-save-modal__actions {
    display: flex;
    gap: 10px;
}

.assess-save-modal__actions button {
    flex: 1;
    padding: 12px 10px;
    border-radius: 12px;
    border: none;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 100ms ease, box-shadow 120ms ease, background 120ms ease;
}

.assess-save-modal__grade {
    background: #10b981;
    color: #fff;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.30);
}

.assess-save-modal__grade:hover { background: #0ca678; transform: translateY(-1px); }

.assess-save-modal__save {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.30);
}

.assess-save-modal__save:hover { background: #1d4fd7; transform: translateY(-1px); }

.assess-save-modal__discard {
    background: rgba(51, 65, 92, 0.08);
    color: #33415c;
}

.assess-save-modal__discard:hover { background: rgba(51, 65, 92, 0.14); }

.assess-save-modal__back {
    margin-top: 14px;
    background: none;
    border: none;
    color: #4a5872;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Per-choice answer matrices ---------------------------------------------------------
   For items whose answer choices are each their own small table — the four 2x2 boxes of an
   epidemiology question, for instance. Distinct from .has-option-table, which lays every choice
   against ONE shared header row; here each choice keeps its own headers and its own borders,
   because the box IS the answer. */
#assessment-session-page .hoad-assessment-choices.has-option-matrix .hoad-assessment-choice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

#assessment-session-page .hoad-choice-matrix {
    border-collapse: collapse;
    font-size: calc(13px * var(--q-scale, 1));
    font-variant-numeric: tabular-nums;
    background: #fff;
}

#assessment-session-page .hoad-choice-matrix th,
#assessment-session-page .hoad-choice-matrix td {
    padding: 5px 14px;
    text-align: center;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

/* Only the data cells are boxed — the headers sit outside the grid, as they do in print. */
#assessment-session-page .hoad-choice-matrix td {
    border: 1px solid rgba(15, 23, 42, 0.55);
}

#assessment-session-page .hoad-choice-matrix thead th {
    font-size: calc(11.5px * var(--q-scale, 1));
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #475569;
    border: 0;
}

#assessment-session-page .hoad-choice-matrix tbody th[scope="row"] {
    text-align: right;
    font-size: calc(11.5px * var(--q-scale, 1));
    font-weight: 700;
    color: #475569;
    border: 0;
    padding-right: 10px;
}

#assessment-session-page .hoad-choice-matrix .hoad-matrix-corner {
    text-align: right;
    font-weight: 800;
    color: #64748b;
}

#assessment-session-page .hoad-choice-matrix .hoad-matrix-group {
    border-bottom: 0;
}

#assessment-session-page .hoad-choice-matrix-text {
    font-size: calc(15px * var(--q-scale, 1));
    font-weight: 600;
    line-height: 1.45;
}

/* Correct / wrong marking recolours the button; the grid keeps its own borders so the numbers
   stay readable against the tinted background. */
#assessment-session-page .has-option-matrix .hoad-assessment-choice.is-correct .hoad-choice-matrix,
#assessment-session-page .has-option-matrix .hoad-assessment-choice.is-wrong .hoad-choice-matrix {
    background: rgba(255, 255, 255, 0.75);
}

@media (max-width: 720px) {
    #assessment-session-page .hoad-choice-matrix th,
    #assessment-session-page .hoad-choice-matrix td { padding: 4px 8px; }
}