* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

/*
 * Small layout utilities. These replace previously-inline style="" attributes
 * for static spacing/display so the strict CSP style-src (no 'unsafe-inline')
 * holds. Dynamic, runtime-valued styling uses a nonce'd <style> via
 * cspStyleRule() instead — never an inline attribute.
 */
.u-mt-0 { margin-top: 0; }
.u-mt-sm { margin-top: var(--space-3); }
.u-mt-md { margin-top: var(--space-4); }
.u-mt-lg { margin-top: var(--space-5); }
.u-display-contents { display: contents; }

/* A scrollable, monospaced log/output block (e.g. seeded-data output on the
 * update-scripts page). */
.u-log-output {
    max-height: 320px;
    overflow: auto;
    padding: var(--space-2);
    background: var(--bg-panel-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    white-space: pre-wrap;
    font-size: var(--font-size-sm);
}

html {
    color-scheme: var(--page-color-scheme, light);
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-size-adjust: var(--font-size-adjust, none);
    background: var(
        --page-background,
        linear-gradient(180deg, var(--bg-page) 0%, color-mix(in srgb, var(--bg-page) 78%, var(--bg-panel) 22%) 100%)
    );
}

a {
    /* WCAG 1.4.3: link text uses the AA-compliant --accent-text
       variant, falling back to --accent for any theme that has not defined it.
       --accent itself fails 4.5:1 as text on several themes but is fine for the
       non-text uses (borders/fills/backgrounds) it keeps elsewhere. */
    color: var(--accent-text, var(--accent));
}

.page-main {
    width: min(1080px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 0 3rem;
    min-width: 0;
}

.page-main.page-main--wide {
    width: min(1320px, calc(100% - 2rem));
}

.page-main.app-shell {
    width: min(1320px, calc(100% - 1.5rem));
    padding-top: var(--space-4);
}

.page-main.app-shell--dashboard {
    width: min(1600px, calc(100% - 1.5rem));
}

.page-masthead {
    margin-bottom: var(--space-5);
    padding: 0.95rem 1.15rem 1.15rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
    box-shadow: var(--elevation-3);
}

.page-masthead--compact {
    padding-bottom: 0.95rem;
}

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

.site-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    min-width: 0;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.site-brand-panel {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    max-width: 100%;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--brand-surface, var(--bg-panel));
    box-shadow: var(--elevation-2);
}

.site-brand-mark-wrap {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 4.2rem;
    aspect-ratio: 1;
}

.site-brand-mark {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.site-brand-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.site-brand-name {
    color: var(--text-primary);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.site-brand-tagline {
    color: var(--accent-text, var(--accent));
    font-size: var(--font-size-sm);
    font-weight: 650;
    line-height: 1.2;
}

.site-brand-logo--light {
    display: var(--site-brand-logo-light-display, block);
}

.site-brand-logo--amber {
    display: var(--site-brand-logo-amber-display, none);
}

.site-brand-logo--dark {
    display: var(--site-brand-logo-dark-display, none);
}

.theme-switcher {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.theme-btn {
    padding: 0.45rem 0.8rem;
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: var(--btn-secondary-border);
    min-height: 2rem;
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
}

.theme-btn:hover {
    background: var(--accent-hover);
    color: var(--btn-primary-text);
    border-color: var(--accent-hover);
}

.theme-btn.is-active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: var(--btn-primary-border, none);
}

h1,
h2,
h3 {
    margin: 0 0 0.75rem;
    line-height: 1.1;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

h1 {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    letter-spacing: -0.04em;
    font-weight: 700;
}

h2 {
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 600;
}

p {
    margin: 0;
    line-height: 1.6;
}

p + p {
    margin-top: var(--space-3);
}

.privacy-notice {
    display: grid;
    gap: var(--space-5);
}

.privacy-notice > .panel {
    display: grid;
    gap: var(--space-3);
    padding: clamp(1rem, 3vw, 1.5rem);
}

.privacy-notice > .panel > h2 {
    margin: 0;
}

small {
    color: var(--text-muted);
    /* The browser default (~0.833em) rendered secondary lines below the
       typography floor in table cells and cards. 0.9em stays relative to the
       parent (so it can never outgrow it) while keeping fine print readable. */
    font-size: 0.9em;
}

code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--text-primary);
}

ul {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-secondary);
}

hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 1.25rem 0;
}

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

label,
.label-wrap {
    display: grid;
    gap: var(--space-1);
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

/* Checkbox label styles for admin forms */
label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}
label.checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
}

/* Radio label styles for admin forms: the global label rule is a
   stacked grid, which floats a wrapped radio above its text. This sibling of
   label.checkbox keeps the control inline with its own label text; block-level
   flex so each option in a radio group occupies its own row. */
label.radio-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

label.radio-option input[type="radio"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--accent);
}

/* Client results workbook "Score cells" choice (cohort report Export panel and
   the session analytics Client workbook card). The group is bounded so it
   reads as belonging to the workbook download beside it rather than to the
   neighbouring exports, and each option carries its own explanation line. */
.client-workbook-export {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.client-workbook-score-mode {
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    padding: 0.85rem;
    display: grid;
    gap: var(--space-2);
    max-width: 44rem;
}

.client-workbook-score-mode legend {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0 0.25rem;
}

.client-workbook-score-mode label.radio-option {
    align-items: flex-start;
    line-height: 1.35;
}

.client-workbook-score-mode label.radio-option input[type="radio"] {
    margin-top: 0.2rem;
}

.client-workbook-score-mode-option {
    display: grid;
    gap: 0.1rem;
}

.client-workbook-score-mode-option small {
    color: var(--text-secondary);
}

/* The confidence policy is a settings action, not a compact filter strip.
   Give each choice a comfortable click target and keep the save action
   visually separate from the radio group. */
.confidence-policy-form {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: flex-end;
}

.confidence-policy-form fieldset {
    display: grid;
    gap: var(--space-1);
}

.confidence-policy-form label.radio-option {
    min-height: 2.5rem;
    padding-inline: var(--space-1);
}

/* Organisation detail confidence controls are a full-width settings panel.
   Keep the two groups distinct and give every radio a comfortable target. */
.organisation-confidence-form {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-3);
}

.organisation-confidence-form fieldset {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
}

.organisation-confidence-form label.radio-option {
    min-height: 2.75rem;
    padding: var(--space-1) var(--space-2);
}

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

textarea {
    resize: vertical;
    min-height: 7rem;
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    text-decoration: none;
}

.hero {
    position: relative;
    overflow: hidden;
    margin-top: var(--space-4);
    padding: clamp(1.5rem, 3vw, 2.6rem);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
    box-shadow: var(--hero-box-shadow, 0 18px 40px color-mix(in srgb, var(--shadow-color) 18%, transparent));
}

.hero::after {
    content: none;
}

.page-title-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-primary);
}

.page-title-header h1 {
    margin: 0;
}

.page-title-header-icon {
    color: var(--text-secondary);
}

.lead {
    max-width: 52rem;
    color: var(--text-secondary);
    font-size: 1.02rem;
    margin-top: var(--space-3);
}

.app-shell--error {
    min-height: 100vh;
}

.error-page {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 1.75rem);
    margin: clamp(2rem, 8vh, 5rem) auto 0;
    max-width: 820px;
}

.error-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

.error-page-copy h1 {
    margin-bottom: var(--space-2);
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.error-page-copy .lead {
    margin-top: 0;
}

.error-page-path {
    display: inline-flex;
    max-width: 100%;
    margin-top: var(--space-4);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

.error-page-path code {
    overflow-wrap: anywhere;
}

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

.card {
    padding: 1.35rem;
    box-shadow: var(--elevation-2);
}

.launcher-grid {
    align-items: stretch;
}

.launcher-grid > * {
    min-width: 0;
}

.launcher-grid > .card,
.launcher-grid > .card + .card {
    margin-top: 0;
}

.launcher-grid-label {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
}

.launcher-grid-label:first-child {
    margin-top: 0;
}

.launcher-grid + .content-hub-section-label {
    margin-top: var(--space-6);
}

.launcher-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.card-header h2,
.card-header h3,
.card-header h4 {
    margin: 0;
}

.card-header-icon {
    color: var(--text-secondary);
}

.launcher-card > .card-header {
    margin-bottom: 0;
}

.launcher-form {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.launcher-form .actions {
    margin-top: 0;
}

.launcher-form-note {
    min-height: 3.2rem;
    margin: 0;
}

.card + .card,
.hero + .card,
.hero + .grid,
.card + .grid,
.grid + .card {
    margin-top: var(--space-5);
}

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

.actions,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

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

.notice {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-notice);
}

/* Tighten the gap between consecutively stacked inline notices so a run of them
   reads as one group, while keeping clear separation from the content that
   follows. Excludes the fixed toast notices, which are spaced by region gap. */
.notice + .notice:not(.app-notice) {
    margin-top: calc(var(--space-4) * -1 + var(--space-2));
}

.app-notice {
    margin: 0;
}

.app-notice + .app-notice {
    margin-top: 0;
}

.notice.success {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.notice.error {
    background: var(--bg-error);
    border-color: var(--border-error);
    color: var(--text-error);
}

.notice.warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

/* Shared governed status-notice region (window.showNotice) — replaces native
   alert(). Fixed, stacked, screen-reader-announced status notices that reuse the
   .notice tones for theming. */
.app-notice-region {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.app-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    box-shadow: var(--elevation-2);
    pointer-events: auto;
}

.app-notice-message {
    flex: 1 1 auto;
    min-width: 0;
}

.app-notice-dismiss {
    flex: 0 0 auto;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0 0.25rem;
    line-height: 1;
    font-size: 1.1rem;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
    .app-notice {
        animation: app-notice-in 0.18s ease-out;
    }
}

/*
 * Global reduced-motion guard. Individual components already opt out of their
 * own transitions/animations, but this catches everything else (including the
 * shared motion tokens in themes.css) so a user who asks the OS for reduced
 * motion gets it app-wide. Near-instant rather than 0s so state changes are not
 * jarringly abrupt; scroll-behaviour is reset for in-page anchor jumps.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes app-notice-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.operational-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: 1rem 1.25rem;
}

.operational-warning .app-icon {
    flex-shrink: 0;
    margin-top: var(--space-1);
}

.meta {
    display: grid;
    gap: var(--space-3);
}

.meta p {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

.meta p:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.meta p + p {
    margin-top: 0;
}

.inline-code-list li {
    margin-bottom: var(--space-1);
}

.instance-group {
    padding: 0.9rem 1rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.instance-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.instance-group-heading {
    margin-bottom: var(--space-3);
}

.instance-group-heading h3 {
    margin: 0;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
}

/* Controlled tags: the read-only chip summary and the grouped assignment
   fieldsets shared by the assessment, session, and question-bank tag panels. */
.tag-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
}

.tag-assignment-group {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.tag-assignment-group > legend {
    font-weight: 700;
    padding: 0 0.4rem;
}

.status-draft {
    background: var(--bg-badge-draft);
    border-color: var(--border-color);
}

.status-ready {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.status-open {
    background: var(--bg-status-open);
    border-color: var(--border-status-open);
    color: var(--text-status-open);
}

.status-closed {
    background: var(--bg-status-closed);
    border-color: var(--border-status-closed);
    color: var(--text-status-closed);
}

.status-archived {
    background: var(--bg-status-archived);
    border-color: var(--border-status-archived);
    color: var(--text-status-archived);
}

.status-test {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.session-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
    letter-spacing: 0.02em;
}

.session-type-summative {
    background: var(--bg-status-closed);
    border-color: var(--border-status-closed);
    color: var(--text-status-closed);
}

.session-type-formative {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.session-type-diagnostic {
    background: var(--bg-status-info);
    border-color: var(--border-status-info);
    color: var(--text-status-info);
}

.session-type-familiarisation {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.candidate-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
    letter-spacing: 0.02em;
    margin-right: 0.4rem;
}

.candidate-state-prospective {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.candidate-state-active_learner {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.candidate-state-certification_candidate {
    background: var(--bg-status-closed);
    border-color: var(--border-status-closed);
    color: var(--text-status-closed);
}

.consent-scope-badge,
.consent-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
    letter-spacing: 0.02em;
}

.consent-scope-outcomes_only {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.consent-scope-diagnostic_data {
    background: var(--bg-status-info);
    border-color: var(--border-status-info);
    color: var(--text-status-info);
}

.consent-scope-confidence_data {
    background: var(--bg-status-pink);
    border-color: var(--border-status-pink);
    color: var(--text-status-pink);
}

.consent-status-granted {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.consent-status-withdrawn {
    background: var(--bg-status-closed);
    border-color: var(--border-status-closed);
    color: var(--text-status-closed);
}

.manage-consent-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1rem 0;
}

.manage-consent-table th,
.manage-consent-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.manage-consent-grant-form {
    display: grid;
    gap: var(--space-2);
}

.manage-consent-grant-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.manage-consent-grant-form input[type="text"],
.manage-consent-grant-form select,
.manage-consent-grant-form textarea {
    font-weight: 400;
}

/* Sponsor governance */

.sponsor-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.sponsor-status-active {
    background-color: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.sponsor-status-inactive {
    background-color: var(--bg-status-archived);
    border-color: var(--border-status-archived);
    color: var(--text-status-archived);
}

.sponsor-access-table,
.sponsor-results-table,
.sponsor-aggregate-table,
.sponsor-list-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1rem 0;
}

.sponsor-access-table th,
.sponsor-access-table td,
.sponsor-results-table th,
.sponsor-results-table td,
.sponsor-aggregate-table th,
.sponsor-aggregate-table td,
.sponsor-list-table th,
.sponsor-list-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.sponsor-grant-form {
    display: grid;
    gap: var(--space-2);
}

.sponsor-grant-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.sponsor-grant-form input[type="text"],
.sponsor-grant-form select {
    font-weight: 400;
}

.sponsor-data-scope {
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    padding: 0.85rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.sponsor-data-scope legend {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0 0.25rem;
}

.sponsor-grant-form .sponsor-data-scope label,
.sponsor-data-scope > label {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
    font-weight: 400;
    line-height: 1.35;
    grid-template-columns: none;
}

.sponsor-data-scope > label > input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

.sponsor-data-scope .checkbox-label {
    min-height: 2.35rem;
    padding: 0.45rem 0.55rem;
    border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
    background: color-mix(in srgb, var(--bg-panel-secondary) 82%, transparent);
}

.sponsor-data-scope .checkbox-label span {
    flex: 1 1 auto;
    min-width: 0;
}

/* Session create / edit "Sponsors" enablement fieldset. Borderless, single
   column, matching the surrounding form-control rhythm rather than the browser
   default fieldset chrome. */
.sponsor-enablement-fieldset {
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sponsor-enablement-fieldset legend {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0 0.25rem;
}

.sponsor-enablement-fieldset .checkbox-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    font-weight: 400;
    line-height: 1.35;
}

.sponsor-enablement-fieldset .checkbox-label input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

/* The accordion supplies the section boundary, so its nested fieldset keeps
   only the semantic grouping needed by assistive technology. */
.session-sponsors-accordion .sponsor-enablement-fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.modal-dialog--sponsor-access {
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.modal-dialog--sponsor-access .modal-dialog-inner {
    box-sizing: border-box;
    max-height: calc(100vh - 2rem);
}

.modal-dialog--sponsor-access .modal-dialog-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.2rem;
}

.modal-dialog--sponsor-access .modal-dialog-body > section,
.modal-dialog--sponsor-access .sponsor-grant-form,
.modal-dialog--sponsor-access .sponsor-grant-form > label {
    min-width: 0;
    max-width: 100%;
}

.modal-dialog--sponsor-access .sponsor-access-table {
    table-layout: fixed;
}

.modal-dialog--sponsor-access .sponsor-access-table th,
.modal-dialog--sponsor-access .sponsor-access-table td {
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .sponsor-data-scope {
        grid-template-columns: 1fr;
    }
}

.cohort-suppressed {
    display: inline-block;
    background-color: var(--bg-panel-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    padding: 0.25rem 0.5rem;
    font-style: italic;
    color: var(--text-muted);
}

.audit-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.user-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.role-overflow-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: transparent;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.role-overflow-toggle:hover {
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
}

.app-shell .theme-switcher {
    margin-top: var(--space-1);
}

.workspace-frame {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--bg-panel);
    box-shadow: var(--elevation-3);
    min-height: calc(100vh - 7rem);
}

.workspace-frame--compact {
    min-height: 0;
}

.workspace-frame--candidate.candidate-sidebar-collapsed {
    grid-template-columns: 4.75rem minmax(0, 1fr);
}

.workspace-frame--candidate > .workspace-sidebar {
    position: relative;
}

.candidate-sidebar-toggle-slot {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
    z-index: 1;
}

/* The assessment title lives in the collapsible sidebar content, so
   collapsing would otherwise remove it entirely. Surface a copy in the
   collapsed toggle bar on small screens, where the bar is a full-width
   row with room for text. Desktop's collapsed state is a narrow column
   with no room, so the title stays hidden there. */
.candidate-sidebar-collapsed-title {
    display: none;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    color: var(--sidebar-text, var(--text-primary));
}

.candidate-sidebar-content {
    display: grid;
    align-content: start;
    gap: var(--space-4);
}

.workspace-frame--candidate.candidate-sidebar-toggle-available:not(.candidate-sidebar-collapsed) .candidate-sidebar-card-header {
    min-height: 2.75rem;
    padding-left: 3.75rem;
}

.workspace-frame--candidate.candidate-sidebar-collapsed > .workspace-sidebar {
    justify-items: center;
    padding: var(--space-4);
}

.workspace-frame--candidate.candidate-sidebar-collapsed .candidate-sidebar-toggle-slot {
    position: static;
    flex-direction: column;
}

.candidate-sidebar-toggle.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--space-2);
    border-color: color-mix(in srgb, var(--sidebar-text, var(--text-primary)) 58%, transparent);
    background: transparent;
    color: var(--sidebar-text, var(--text-primary));
}

.candidate-sidebar-toggle.secondary:hover {
    background: color-mix(in srgb, var(--sidebar-text, var(--text-primary)) 12%, transparent);
    color: var(--sidebar-text, var(--text-primary));
}

.candidate-collapsed-course-documents {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--space-2);
    border: var(--border-width) solid color-mix(in srgb, var(--sidebar-text, var(--text-primary)) 58%, transparent);
    border-radius: var(--border-radius-md);
    color: var(--sidebar-text, var(--text-primary));
}

.candidate-collapsed-course-documents:hover {
    background: color-mix(in srgb, var(--sidebar-text, var(--text-primary)) 12%, transparent);
    color: var(--sidebar-text, var(--text-primary));
}

.workspace-frame--candidate.candidate-sidebar-collapsed .candidate-collapsed-course-documents:not([hidden]) {
    display: inline-flex;
}

@media (max-width: 760px) {
    /* On small screens the collapsed candidate sidebar must not remain a
       narrow column beside the assessment. Keep its toggle in a compact row
       above the content so questions have the full viewport width. */
    .workspace-frame--candidate.candidate-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .workspace-frame--candidate.candidate-sidebar-collapsed > .workspace-sidebar {
        min-height: 0;
        justify-items: start;
        padding: var(--space-3);
    }

    .workspace-frame--candidate.candidate-sidebar-collapsed .candidate-sidebar-toggle-slot {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
    }

    .workspace-frame--candidate.candidate-sidebar-collapsed .candidate-sidebar-collapsed-title {
        display: block;
    }
}

.workspace-sidebar {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: 1rem;
    background: var(--sidebar-bg, color-mix(in srgb, var(--bg-panel) 80%, var(--accent-subtle) 20%));
    color: var(--sidebar-text, var(--text-primary));
}

.workspace-sidebar h2,
.workspace-sidebar p,
.workspace-sidebar strong,
.workspace-sidebar label {
    color: inherit;
}

.workspace-sidebar .card-header h2,
.workspace-sidebar .card-header h3,
.workspace-sidebar .card-header h4 {
    color: var(--sidebar-text, var(--text-primary));
}

.workspace-sidebar .card-header-icon {
    color: var(--sidebar-muted, var(--text-secondary));
}

.workspace-sidebar small,
.workspace-sidebar-copy {
    color: var(--sidebar-muted, var(--text-secondary));
}

.workspace-sidebar-card {
    display: grid;
    gap: var(--space-2);
    padding: 1rem;
    border: var(--border-width) solid var(--sidebar-card-border, var(--border-color));
    border-radius: var(--border-radius-md);
    background: var(--sidebar-card-bg, var(--bg-panel-secondary));
    color: var(--sidebar-card-text, var(--text-primary));
}

.workspace-sidebar-card .label,
.workspace-sidebar-card .workspace-section-label {
    color: var(--sidebar-card-label, var(--text-secondary));
}

.workspace-sidebar-card small {
    color: var(--sidebar-card-text, var(--text-primary));
    line-height: 1.5;
}

/*
    Course-documents manager (assessment editor and session page). Each row
    pairs the editable document name with its Remove control; the name takes the
    free space so long titles stay readable.
*/
.course-documents-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.course-documents-list li {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.course-documents-list li input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

/*
    The upload control is a styled <label> wrapping a visually hidden file
    input, so it reads as a button while keeping the input keyboard-reachable
    and screen-reader-labelled.
*/
.course-documents-upload-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/*
    Course-document links in the candidate sidebar. The card itself is a
    .workspace-sidebar-card, so only the list needs rules: strip the default
    list affordances and let long document names wrap rather than overflow the
    narrow sidebar column.
*/
.candidate-course-documents-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.candidate-course-documents-list a {
    overflow-wrap: anywhere;
}

/*
    Help-status card in the candidate sidebar. The card itself is a
    .workspace-sidebar-card, so only the two message lines need rules. The
    acknowledgement time is secondary to the message it qualifies, so it takes
    the smaller step and the muted sidebar label colour; the message itself
    stays at body size because it is the part that must be readable at a glance
    across a room. No colour-only signalling — the wording carries the state.
*/
.candidate-help-status-message {
    margin: 0;
    overflow-wrap: anywhere;
}

.candidate-help-status-time {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--sidebar-card-label, var(--text-secondary));
}

.workspace-sidebar-header {
    display: grid;
    gap: var(--space-2);
}

.workspace-main {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: 1rem;
    background: var(--bg-panel);
}

/* Preview-session banner. Sticks to the top of the delivery view so a
   reviewer always sees that this is a non-recorded test-drive, even after
   scrolling through a long paper. Uses the shared .notice.warning palette. */
.preview-session-banner {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0;
    font-weight: 600;
}

.workspace-section-label {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-secondary);
}

.workspace-summary {
    display: grid;
    gap: var(--space-3);
}

.workspace-summary-card {
    display: grid;
    gap: var(--space-1);
    padding: 0.85rem 1rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.workspace-sidebar .workspace-summary-card {
    border-color: var(--sidebar-card-border, var(--border-color));
    background: var(--sidebar-card-bg, var(--bg-panel-secondary));
    color: var(--sidebar-card-text, var(--text-primary));
}

.workspace-sidebar .workspace-summary-card .workspace-section-label,
.workspace-sidebar .workspace-summary-card small {
    color: var(--sidebar-card-label, var(--text-secondary));
}

.workspace-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--text-secondary);
}

.candidate-shell-card {
    padding: 1rem;
    min-width: 0;
}

.candidate-sponsor-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
}

.candidate-sponsor-card > h3 {
    grid-column: 1 / -1;
    margin: 0;
}

.candidate-sponsor-scope {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--space-3);
    min-height: 18rem;
    padding: clamp(1rem, 3vw, 1.25rem);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.candidate-sponsor-scope-summary {
    display: grid;
    gap: var(--space-2);
}

.candidate-sponsor-scope-summary > p {
    margin: 0;
}

.candidate-sponsor-scope-title {
    font-size: 1.05rem;
    line-height: 1.3;
}

.candidate-sponsor-scope-explanation {
    color: var(--text-secondary);
}

.candidate-sponsor-scope-action button {
    max-width: 100%;
}

.candidate-status-card {
    display: grid;
    gap: var(--space-3);
    background: color-mix(in srgb, var(--bg-panel-secondary) 78%, var(--accent-subtle) 22%);
}

.candidate-status-overview,
.candidate-progress-copy,
.dashboard-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
}

.candidate-status-overview span,
.candidate-progress-copy span {
    color: var(--text-primary);
}

.candidate-progress-block {
    display: grid;
    gap: var(--space-2);
}

.candidate-progress-copy {
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

/* F3 (WCAG 2.2.1): time-remaining display for timed assessments.
   Hidden via the [hidden] attribute for untimed attempts; the value is
   text (not colour-only) so it remains perceivable without colour. */
.candidate-time-remaining {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.candidate-time-remaining-label {
    color: var(--text-secondary);
}

.candidate-time-remaining-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* "5 minutes added" beside the countdown when an invigilator has
   extended the sitting. Secondary tone: informative, not a warning. */
.candidate-time-remaining-note {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.question-stage {
    display: grid;
    align-content: start;
    gap: var(--space-5);
    min-height: 420px;
}

.question-stage-header {
    display: grid;
    gap: var(--space-3);
}

.question-stage-title {
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    margin: 0;
}

.question-stage-body {
    font-size: var(--font-size-base);
}

.question-stage-body h1,
.question-stage-body h2 {
    font-size: 1.25rem;
}

.question-stage-body h3,
.question-stage-body h4 {
    font-size: 1.05rem;
}

.question-stage-body > *:first-child { margin-top: 0; }
.question-stage-body > *:last-child { margin-bottom: 0; }

.question-stage-body img {
    max-width: 100%;
    height: auto;
}

.question-stage-body table {
    border-collapse: collapse;
    width: 100%;
}

.question-stage-body td,
.question-stage-body th {
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.65rem;
}

/* Optional governed rich content rendered alongside the question prompt.
   Candidate instructions present task guidance after the prompt, inside a
   governed collapsible accordion (.question-supporting) that defaults open
   (required guidance). The optional hint (.question-hint) is rendered after the
   instructions but stays hidden behind a "Show hint" button until the candidate
   reveals it; the revealed hint reuses the muted source-material box chrome the
   old stimulus field had. All content classes keep the prompt body's image /
   table sizing so embedded media stays constrained. */
.question-hint-body,
.question-instructions {
    font-size: var(--font-size-base);
}

.question-hint--revealed {
    margin-top: var(--space-2);
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-panel-secondary);
}

.question-hint--revealed .workspace-section-label {
    margin-top: 0;
}

.question-hint--available {
    margin-top: var(--space-2);
}

/* "Hint used" badge on the marker script view (uses the shared .badge--warning
   chrome; this only adds spacing around it). */
.marker-hint-used {
    margin: 0 0 0.6rem;
}

.question-instructions {
    color: var(--text-secondary);
}

/* Supporting-content accordion on the candidate question stage. Stacked
   supporting accordions get a little breathing room. */
.question-supporting + .question-supporting {
    margin-top: var(--space-2);
}

/* Keep section-level guidance visually separate from the question it frames. */
.question-supporting--section,
.question-supporting--section > .accordion-section-body {
    background-color: color-mix(in srgb, var(--bg-panel) 86%, var(--accent) 14%);
}

.question-supporting--section > .accordion-section-summary,
.question-section-heading {
    background-color: color-mix(in srgb, var(--bg-panel) 76%, var(--accent) 24%);
}

.question-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 0.75rem;
    padding: 0.45rem 0.7rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
}

/* The current question's category (topic) names, shown beside the section
   header on the candidate question stage (and inside the section-instructions
   accordion summary when that replaces the plain header). */
.question-category-label {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

/* In a section accordion the category is a trailing summary item, matching
   its right-aligned position in the equivalent plain section heading. */
.question-supporting--section > .accordion-section-summary > .question-category-label {
    margin-left: auto;
    text-align: right;
}

/* When there is no visible section header (single default section), the
   category keeps the header slot but in a quieter bar. */
.question-section-heading--category-only {
    background-color: color-mix(in srgb, var(--bg-panel) 92%, var(--accent) 8%);
    font-weight: 400;
}

.question-hint-body > *:first-child,
.question-instructions > *:first-child { margin-top: 0; }
.question-hint-body > *:last-child,
.question-instructions > *:last-child { margin-bottom: 0; }

.question-hint-body img,
.question-instructions img {
    max-width: 100%;
    height: auto;
}

.question-hint-body table,
.question-instructions table {
    border-collapse: collapse;
    width: 100%;
}

.question-hint-body td,
.question-hint-body th,
.question-instructions td,
.question-instructions th {
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.65rem;
}

.candidate-choice-list {
    gap: var(--space-3);
}

.candidate-text-answer {
    display: grid;
    gap: var(--space-2);
}

.candidate-text-answer textarea {
    width: 100%;
    resize: vertical;
}

.candidate-answer-word-count {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: right;
}

/* Optional candidate-facing confidence selector. Quiet visual
   treatment so the selector reads as secondary to the answer per the
   roadmap's "must not dominate the interface" rule. */
.candidate-confidence-fieldset {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 1rem 0 0 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-panel-secondary);
}

.candidate-confidence-legend {
    padding: 0 0.4rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

.candidate-confidence-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
}

.candidate-confidence-option {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    color: var(--text-secondary);
    white-space: nowrap;
}

.candidate-confidence-option input[type="radio"] {
    /* The generic `input` rule in components.css sets width: 100% and
       padding; iOS Safari honours that on native radios, detaching the
       glyph from its label. Pin the intrinsic size explicitly, matching
       label.radio-option. */
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

/* Candidate ordering widget — a numbered list of items, each with
   keyboard-operable Move up / Move down buttons. Items share the choice-item
   card treatment so the answer area reads consistently across types. */
.ordering-helper {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.ordering-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: 1.6rem;
}

.ordering-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: 0.75rem 1.05rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
    color: var(--text-primary);
}

.ordering-item[draggable="true"] {
    cursor: grab;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.ordering-item[draggable="true"]:active {
    cursor: grabbing;
}

.ordering-item.is-dragging {
    opacity: 0.42;
    border-color: var(--link-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--link-color) 22%, transparent);
}

.ordering-drag-handle {
    width: 0.75rem;
    height: 1.25rem;
    flex: 0 0 auto;
    background-image: radial-gradient(circle, currentColor 1.25px, transparent 1.5px);
    background-position: 0 0;
    background-size: 0.35rem 0.35rem;
    color: var(--text-secondary);
}

.ordering-item-text {
    flex: 1 1 12rem;
    min-width: 0;
}

.ordering-item-controls {
    display: inline-flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.ordering-move {
    display: inline-grid;
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem;
    place-items: center;
    font-size: 1.15rem;
    line-height: 1;
}

/* Candidate matching widget — reusable answer bank and prompt targets. */
.matching-helper {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
}

.matching-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(12rem, 0.8fr);
    gap: var(--space-4);
    align-items: start;
}

.matching-column-title {
    margin: 0 0 0.55rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.matching-column-panel {
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: color-mix(in srgb, var(--bg-panel) 82%, var(--accent-subtle) 18%);
}

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

.matching-row {
    display: grid;
    gap: var(--space-2);
    padding: 0.85rem;
    border: 1px dashed var(--border-color-emphasis);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.matching-row.is-matched {
    border-style: solid;
    border-color: var(--success-border);
    background: color-mix(in srgb, var(--success-bg) 45%, var(--bg-panel));
}

.matching-row.is-drag-over {
    border-color: var(--link-color);
    background: color-mix(in srgb, var(--link-color) 8%, var(--bg-panel));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--link-color) 18%, transparent);
}

.matching-prompt {
    font-weight: 600;
}

.matching-answer-bank {
    align-self: start;
}

.matching-answer-list {
    display: grid;
    gap: var(--space-2);
}

.matching-answer-chip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.7rem 0.8rem;
    cursor: grab;
    border: 1px solid var(--border-color-emphasis);
    border-radius: 0.35rem;
    background: var(--bg-panel);
    color: var(--text-primary);
    box-shadow: var(--elevation-1);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.matching-drag-handle {
    width: 0.8rem;
    height: 1.2rem;
    flex: 0 0 auto;
    background-image: radial-gradient(circle, currentColor 1.25px, transparent 1.5px);
    background-position: 0 0;
    background-size: 0.35rem 0.35rem;
    color: var(--text-secondary);
}

.matching-answer-chip:hover {
    border-color: var(--link-color);
    box-shadow: var(--elevation-1);
}

.matching-answer-chip:active {
    cursor: grabbing;
}

.matching-answer-chip.is-dragging {
    opacity: 0.45;
}

@media (max-width: 760px) {
    .matching-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .matching-answer-bank {
        grid-row: 1;
    }

    .matching-answer-list {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }
}

.choice-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 1rem 1.05rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
    color: var(--text-primary);
    transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}

.choice-item input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice-item .radio-dot {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: var(--space-1);
    border: 2px solid var(--border-color-emphasis);
    border-radius: 50%;
    background: var(--bg-panel);
}

.choice-item .choice-copy {
    color: var(--text-primary);
}

.choice-item:hover {
    border-color: var(--question-accent-border);
    background: var(--question-accent-bg);
}

.choice-item:has(input:focus-visible) {
    border-color: var(--question-accent-border);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.choice-item:has(input:checked) {
    border-color: var(--question-accent-border);
    background: var(--question-accent-bg);
}

.choice-item:has(input:checked) .radio-dot {
    border-color: var(--accent);
}

.choice-item:has(input:checked) .radio-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: block;
}

.choice-item--multi .radio-dot {
    border-radius: 3px;
}

.choice-item--multi:has(input:checked) .radio-dot {
    background: var(--accent);
    border-color: var(--accent);
}

.choice-item--multi:has(input:checked) .radio-dot::after {
    width: 8px;
    height: 5px;
    border-radius: 0;
    background: transparent;
    border-left: 2px solid var(--text-on-accent);
    border-bottom: 2px solid var(--text-on-accent);
    transform: rotate(-45deg);
    margin-top: -2px;
}

.candidate-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.candidate-actions-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.candidate-nav-buttons {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.candidate-question-jump {
    width: 6.5rem;
    min-width: 0;
}

.template-rule--preview-error {
    border-color: var(--border-error);
    outline: var(--border-width-emphasis) solid var(--border-error);
    outline-offset: var(--space-1);
}

.fixed-question-item--preview-error {
    border-color: var(--border-error);
    background: var(--bg-error);
}

.fixed-question-warning-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    padding: var(--space-1) var(--space-2);
    border: var(--border-width) solid color-mix(in srgb, var(--warning-text) 42%, transparent);
    border-radius: var(--border-radius-pill);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

.fixed-question-editor-link {
    flex-shrink: 0;
    min-height: 0;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.template-rule-preview-error {
    margin: var(--space-3) 0;
}

.candidate-save-state {
    color: var(--text-muted);
    font-size: var(--font-size-md);
    line-height: 1.3;
    margin-left: 0.25rem;
    white-space: nowrap;
}

.candidate-help-form {
    display: grid;
    gap: var(--space-3);
}

.candidate-help-form label {
    font-weight: 700;
}

.candidate-help-form select,
.candidate-help-form textarea {
    width: 100%;
}

.candidate-help-form textarea {
    resize: vertical;
}

.candidate-result-card {
    display: grid;
    gap: var(--space-5);
}

.candidate-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.candidate-result-header h2 {
    margin: 0.15rem 0 0.4rem;
    font-size: 1.7rem;
}

.candidate-result-outcome {
    display: grid;
    gap: var(--space-1);
    padding: 1rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.candidate-result-outcome strong {
    font-size: 2.1rem;
    line-height: 1.1;
}

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

.candidate-result-grid div {
    display: grid;
    gap: var(--space-1);
    padding: 0.85rem 1rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.candidate-result-grid dt {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.candidate-result-grid dd {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

@media (max-width: 860px) {
    .candidate-result-header {
        align-items: stretch;
        flex-direction: column;
    }

    .candidate-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .candidate-result-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .page-masthead,
    .site-footer,
    .workspace-sidebar,
    .candidate-result-print-button {
        display: none !important;
    }

    .page-main,
    .workspace-frame,
    .workspace-main,
    .candidate-result-card {
        display: block;
        margin: 0;
        padding: 0;
        background: #ffffff;
        color: #111111;
    }

    .candidate-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-summary-card,
.dashboard-table-card {
    display: grid;
    gap: var(--space-4);
}

.dashboard-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.dashboard-summary-stats {
    align-items: flex-start;
}

.dashboard-summary-stat-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.dashboard-summary-stat-group .workspace-summary-card {
    flex: 0 0 auto;
}

.dashboard-table thead th,
.dashboard-table tbody td {
    font-size: var(--font-size-base);
}

.dashboard-table td strong,
.dashboard-table td small {
    display: block;
}

.dashboard-table td small {
    margin-top: var(--space-1);
}

.presence-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.26rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.presence-chip.is-neutral {
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

.presence-chip.is-live {
    background: var(--bg-status-live);
    color: var(--text-status-live);
}

.presence-chip.is-stale {
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

.presence-chip.is-completed {
    background: var(--success-bg);
    color: var(--presence-completed-text, var(--text-primary));
}

.compact-form {
    margin-top: 0;
}

@media (max-width: 640px) {
    .instance-group-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-chip {
        min-width: 0;
    }
}

.table-wrap {
    overflow-x: auto;
    margin-top: var(--space-4);
}

.admin-table-wrap,
.audit-table-wrap,
.content-table-wrap,
.dash-table-wrap,
.inventory-table-wrap,
.marker-table-wrap,
.question-table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

table {
    background: var(--bg-panel-secondary);
    font-size: var(--font-size-base);
}

th,
td {
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

thead th a {
    color: inherit;
    text-decoration: none;
}

thead th a:hover,
thead th a:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.status-line {
    min-height: 1.6rem;
    /* WCAG 1.4.3: bold status text uses the AA-compliant accent-text
       variant rather than --accent, which fails 4.5:1 on several themes. */
    color: var(--accent-text, var(--accent));
    font-weight: 700;
}

/* Do not reserve a status row between candidate cards until there is a
   message to show. The live region becomes visible again as soon as its
   text content is populated. */
.status-line:empty {
    display: none;
}

/* Assertive status region (F7): connection-loss / submission errors.
   Visually distinguished from the polite save-status line above it. */
.status-line--alert {
    color: var(--text-error);
}

.choice-list {
    display: grid;
    gap: var(--space-2);
}

.choice-item {
    align-items: flex-start;
}

.choice-item input {
    width: auto;
    margin-top: var(--space-1);
}

.page-nav {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    gap: var(--space-3);
    margin: 0;
    justify-content: flex-end;
    align-items: center;
    padding: 0.4rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    box-shadow: var(--elevation-2);
}

.page-nav form {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 0;
}

.page-nav-user {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--border-radius-sm);
    background: var(--accent-subtle);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.page-nav button.secondary {
    min-height: 2.5rem;
    padding-inline: 1rem;
    box-shadow: var(--elevation-1);
}

.page-context-nav {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 1rem;
    padding: 0.4rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    box-shadow: var(--elevation-2);
}

.page-context-nav .button.secondary {
    min-height: 2.5rem;
    padding-inline: 1rem;
    box-shadow: var(--elevation-1);
}

.page-help-button,
.page-guides-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.page-help-button-icon,
.page-guides-link-icon {
    flex: 0 0 auto;
}

.page-help-dialog .modal-dialog-body {
    display: grid;
    gap: var(--space-4);
    max-height: min(72vh, 52rem);
    overflow-y: auto;
    padding-right: 0.2rem;
}

.page-help-dialog .modal-dialog-actions {
    justify-content: space-between;
    flex-wrap: wrap;
}

.back-link {
    display: inline-flex;
    margin-bottom: 0;
}

.site-footer {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-color-emphasis);
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--bg-panel-secondary) 78%, var(--accent-subtle) 22%);
    box-shadow: var(--elevation-1);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: flex-end;
    font-size: var(--font-size-sm);
}

.site-footer p {
    margin: 0;
}

.site-footer p + p {
    margin-top: 0;
}

.site-footer-group {
    display: grid;
    gap: var(--space-1);
    margin-right: auto;
}

.site-footer-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── In-app help ─────────────────────────────────────────────────────────── */

.help-doc-panel {
    padding: clamp(1rem, 2vw, 1.5rem);
}

.help-doc-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-5);
}

.help-doc-print-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.help-doc-print-action-icon {
    flex: 0 0 auto;
    margin-inline-end: var(--space-2);
}

.help-doc-meta {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: 0.85rem 1rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.debug-panel {
    border-left: max(0.3rem, calc(var(--border-width) * 3)) solid color-mix(in srgb, var(--warning-text) 72%, var(--accent) 28%);
    background: color-mix(in srgb, var(--bg-panel-secondary) 82%, var(--accent-subtle) 18%);
}

.debug-panel-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.debug-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--border-radius-pill, 999px);
    background: color-mix(in srgb, var(--warning-text) 18%, var(--bg-panel) 82%);
    border: var(--border-width) solid color-mix(in srgb, var(--warning-text) 50%, var(--border-color) 50%);
    color: color-mix(in srgb, var(--warning-text) 82%, var(--text-primary) 18%);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.debug-panel-banner p {
    margin: 0;
    color: var(--text-muted);
}

.help-doc-meta p,
.help-doc-empty p {
    margin: 0;
}

.help-doc {
    display: grid;
    gap: var(--space-4);
}

.help-doc > :first-child {
    margin-top: 0;
}

.help-doc > :last-child {
    margin-bottom: 0;
}

.help-doc h1,
.help-doc h2,
.help-doc h3,
.help-doc h4,
.help-doc h5,
.help-doc h6 {
    margin: 1.2rem 0 0.4rem;
    line-height: 1.2;
}

.help-doc p,
.help-doc ul,
.help-doc ol,
.help-doc blockquote,
.help-doc pre,
.help-doc table {
    margin: 0;
}

.help-doc ul,
.help-doc ol {
    padding-left: 1.35rem;
}

.help-doc li + li {
    margin-top: var(--space-1);
}

.help-doc code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--accent-subtle) 55%, var(--bg-panel) 45%);
    font-family: var(--font-mono);
    font-size: 0.92em;
}

.help-doc pre {
    overflow-x: auto;
    padding: 0.9rem 1rem;
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--bg-panel-secondary) 82%, var(--bg-panel) 18%);
    border: var(--border-width) solid var(--border-color);
}

.help-doc pre code {
    padding: 0;
    background: transparent;
}

.help-doc blockquote {
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    background: color-mix(in srgb, var(--accent-subtle) 35%, var(--bg-panel) 65%);
    color: var(--text-secondary);
}

.help-doc-table-wrap {
    overflow-x: auto;
}

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

.help-doc th,
.help-doc td {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.help-doc th {
    background: color-mix(in srgb, var(--bg-panel-secondary) 85%, var(--bg-panel) 15%);
}

.help-doc-empty {
    display: grid;
    gap: var(--space-2);
    padding: 1rem;
    border: var(--border-width) dashed var(--border-color);
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--bg-panel-secondary) 80%, var(--bg-panel) 20%);
}

.help-guides-group-heading {
    margin: var(--space-4) 0 var(--space-2);
}

.help-guides-group-heading:first-child {
    margin-top: 0;
}

.help-guides-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-guides-item a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    text-decoration: none;
}

.help-guides-item a:hover,
.help-guides-item a:focus-visible {
    background: color-mix(in srgb, var(--bg-panel-secondary) 70%, var(--bg-panel) 30%);
}

.theme-switcher--footer {
    opacity: 0.88;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.stack-actions {
    display: grid;
    gap: var(--space-2);
}

.panel-link-row {
    margin-top: var(--space-3);
}

.content-meta {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.content-meta > .status-chip,
.admin-meta > .status-chip,
.inventory-state > .status-chip,
.reference-term-summary > .status-chip {
    justify-self: start;
    min-width: 0;
    padding: 0.16rem 0.55rem;
    border-radius: var(--border-radius-pill, 999px);
    font-size: var(--font-size-xs);
    line-height: 1.1;
}

.template-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.template-status-chips .status-chip {
    min-width: 0;
    padding: 0.16rem 0.55rem;
    border-radius: var(--border-radius-pill, 999px);
    font-size: var(--font-size-xs);
    line-height: 1.1;
}

.session-type-status-stack {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

/* ── Assessment page Sessions panel ─────────────────────────────────────────
   Read-only info cards for the sessions delivered from an assessment. Cards
   reuse the secondary-panel surface (.stat-card family) and the shared
   status-chip / session-type-badge components; the grid stacks to one column
   on narrow viewports via auto-fill. */

.session-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.session-card {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-4);
    background: var(--bg-panel-secondary);
    border-radius: 0.5rem;
    box-shadow: var(--elevation-1);
}

.session-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.session-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.session-card-facts {
    display: grid;
    gap: var(--space-1);
}

/* Domains list: the References cell stacks its reference /
   assessment / open-session count lines. */
.domain-usage-cell small {
    display: block;
}

.health-status-value {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.health-status-timestamp {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

.stat-note {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .page-main {
        width: min(100% - 1rem, 1080px);
        padding-top: 0.75rem;
    }

    .launcher-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-header {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-masthead {
        padding: 0.85rem 0.9rem 1rem;
    }

    .page-masthead-top {
        flex-direction: column;
        align-items: stretch;
    }

    .theme-switcher {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .page-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .page-nav > *,
    .page-nav form,
    .page-nav-user,
    .page-nav-org,
    .page-nav-org-switcher {
        min-width: 0;
        max-width: 100%;
    }

    .page-nav-user,
    .page-nav-org {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-nav-org-switcher select {
        min-width: 0;
        max-width: 100%;
    }

    .page-context-nav {
        justify-content: flex-start;
    }

    .site-brand-panel {
        padding: 0.7rem 0.8rem;
    }

    .site-brand-mark-wrap {
        width: 3.25rem;
    }

    .site-brand-name {
        font-size: 1.45rem;
    }

    .hero,
    .card {
        padding: 1rem;
    }

    .error-page {
        grid-template-columns: 1fr;
    }

    .error-page-icon {
        width: 3.75rem;
        height: 3.75rem;
    }

    .workspace-frame {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .candidate-actions,
    .dashboard-summary-header,
    .dashboard-summary-stats,
    .dashboard-summary-stat-group,
    .candidate-progress-copy {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Login ──────────────────────────────────────────────────────────────── */

.login-card {
    max-width: 28rem;
    margin: 0 auto;
}

.login-form {
    display: grid;
    gap: var(--space-4);
}

.login-form input {
    width: 100%;
}

/* Separates the password form from the "Sign in with Google" alternative. */
.login-divider {
    margin: 1rem 0 0;
    text-align: left;
    color: var(--text-secondary);
}

/* The Google "G" brand mark inside the sign-in button. A third-party brand
   asset (assets/img/google-g.svg), not a registry icon: Google's branding
   rules forbid recolouring it, so it bypasses render_app_icon() — see the
   iconography standards' brand-mark exception. */
.google-signin-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.google-signin-mark {
    width: 18px;
    height: 18px;
}

/* ── Two-step verification (TOTP) enrolment + recovery codes ─────────────── */

.totp-setup-card {
    max-width: 32rem;
}

.totp-setup-steps {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-2);
    color: var(--text-secondary);
}

/* The self-built QR SVG is sized intrinsically; centre it and cap its width. */
.totp-qr {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-4);
}

.totp-qr svg {
    width: 220px;
    height: auto;
    max-width: 100%;
}

.totp-setup-key {
    margin: 0 0 var(--space-4);
    word-break: break-word;
}

.totp-setup-key code {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

/* Recovery codes shown once at enrolment / regeneration. Monospace, easy to
   transcribe, laid out in two columns where space allows. */
.totp-recovery-codes {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-2);
    background: var(--bg-panel-secondary);
    border-radius: var(--border-radius-md);
}

.totp-recovery-codes code {
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}

/* ── Shared admin ───────────────────────────────────────────────────────── */

[hidden] {
    display: none;
}

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

.admin-toolbar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.admin-toolbar p {
    margin: 0;
}

.admin-table-wrap {
    overflow: auto;
}

.admin-feedback {
    min-height: 1.5rem;
    white-space: pre-wrap;
    margin-top: var(--space-5);
}

.create-form-actions-checkbox {
    margin-left: auto;
    align-self: center;
}

.admin-feedback-inline {
    min-height: 0;
    margin-top: var(--space-3);
}

.admin-feedback-inline:empty {
    display: none;
}

.preview-result {
    white-space: normal;
    display: grid;
    gap: var(--space-4);
}

.preview-summary-title {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-base);
}

.preview-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-5);
    margin: 0;
    font-size: var(--font-size-sm);
}

.preview-dl dt {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    padding-top: 0.15rem;
}

.preview-dl dd {
    margin: 0;
}

.preview-sig code {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    word-break: break-all;
}

.preview-notice {
    margin: 0;
}

.preview-section-instructions {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.preview-question-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.preview-question-item {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: 0 0.5rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border-color);
}

.preview-question-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.preview-question-num {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-align: right;
    padding-top: 0.15rem;
}

.preview-question-body {
    display: grid;
    gap: var(--space-1);
}

.preview-question-prompt {
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.preview-question-meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.preview-question-id {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.preview-q-type {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.preview-question-marks {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.admin-note {
    margin: 0;
}

.admin-meta {
    display: grid;
    gap: var(--space-1);
}

.admin-meta-title-link {
    color: var(--text-primary);
    text-decoration: none;
}

.admin-meta-title-link:hover,
.admin-meta-title-link:focus-visible {
    text-decoration: underline;
}

.admin-meta small {
    display: block;
}

.admin-links {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.session-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.session-tool-link {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.session-tool-link:hover,
.session-tool-link:focus-visible {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.session-tool-link small {
    color: var(--text-secondary);
    line-height: 1.4;
}

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

.admin-form-row {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.admin-role-checkbox-grid {
    display: grid;
    gap: var(--space-2) var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: var(--space-3);
}

.admin-role-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.checkbox-label {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--bg-panel-secondary) 74%, transparent);
    line-height: 1.25;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

/*
 * Assessment client availability is a compact settings form. Reset the
 * browser fieldset chrome and arrange each choice as a normal card-sized
 * target; otherwise the generic full-width input rule stretches its radios
 * away from their labels.
 */
[data-assessment-client-availability-form] {
    gap: var(--space-3);
    margin-top: var(--space-3);
}

[data-assessment-client-availability-form] > .admin-feedback:empty {
    display: none;
}

[data-assessment-client-availability-form] > fieldset {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

[data-assessment-client-availability-form] > fieldset[data-client-availability-clients] {
    padding: var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

[data-assessment-client-availability-form] > fieldset[data-client-availability-clients] > .admin-helper {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .admin-links {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Admin dashboard ────────────────────────────────────────────────────── */

.dash-layout {
    display: grid;
    gap: var(--space-4);
}

.dash-summary {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.dash-stat {
    display: grid;
    gap: var(--space-1);
    padding: 1rem 1.25rem;
}

.dash-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.dash-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted, var(--text-primary));
}

.dash-toolbar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-3);
}

.dash-toolbar p {
    margin: 0;
}

.dash-links {
    display: grid;
    align-items: start;
    gap: var(--space-4) var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    width: 100%;
}

.dash-link-group {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.dash-link-group > span {
    color: var(--text-muted, var(--text-primary));
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
}

.dash-links .button,
.dash-links button {
    justify-self: start;
    min-height: 3.25rem;
    min-width: 10rem;
    width: 100%;
    max-width: 15rem;
}

.dash-admin-tools-accordion {
    margin-bottom: 0;
}

.dash-admin-tools-accordion .accordion-section-summary {
    align-items: flex-start;
}

.dash-admin-tools-accordion .accordion-section-title-group {
    flex-wrap: wrap;
    row-gap: var(--space-1);
}

.dash-admin-tools-accordion .accordion-section-title {
    overflow: visible;
    text-overflow: clip;
}

.dash-admin-tools-accordion .accordion-section-meta {
    line-height: 1.35;
}

.dash-admin-tools-accordion .accordion-section-body {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-4);
}

.dash-admin-block {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    max-width: 76rem;
}

.dash-admin-block .admin-helper {
    max-width: 68rem;
}

.dash-admin-block .inline-actions {
    gap: var(--space-3);
}

.dash-admin-block .button {
    min-height: 2.9rem;
    padding-inline: 1.15rem;
}

.dash-table td,
.dash-table th {
    vertical-align: top;
}

.audit-event-type {
    font-family: var(--font-mono);
    white-space: nowrap;
}

.dash-empty {
    color: var(--text-muted, inherit);
    font-style: italic;
}

/* ── Section drawer (collapsible cross-nav) ────────────────────────────── */

.section-drawer {
    display: inline-flex;
    align-items: center;
}

.section-drawer-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.section-drawer-trigger-icon {
    flex: 0 0 auto;
}

.section-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--shadow-color) 36%, transparent);
    opacity: 0;
    transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 90;
    will-change: opacity;
}

.section-drawer.is-open .section-drawer-backdrop {
    opacity: 1;
    animation: section-drawer-backdrop-in 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

.section-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    background: linear-gradient(
        180deg,
        var(--bg-panel) 0%,
        color-mix(in srgb, var(--bg-panel) 84%, var(--bg-panel-secondary) 16%) 100%
    );
    color: var(--text-primary, inherit);
    border-left: var(--border-width, 1px) solid var(--border-color);
    box-shadow: -16px 0 40px color-mix(in srgb, var(--shadow-color) 22%, transparent);
    transform: translateX(100%);
    transition: transform 0.52s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 91;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
}

.section-drawer.is-open .section-drawer-panel {
    transform: translateX(0);
    animation: section-drawer-panel-in 0.52s cubic-bezier(0.32, 0.72, 0, 1);
}

.section-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--bg-panel-secondary) 72%, var(--bg-panel) 28%);
    border-bottom: var(--border-width, 1px) solid var(--border-color);
}

.section-drawer-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.section-drawer-header h2 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary, inherit);
}

.section-drawer-subtitle {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary, var(--text-muted, inherit));
}

.section-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
}

.section-drawer-body {
    padding: 1rem 1.25rem 1.5rem;
    background: transparent;
    overflow-y: auto;
}

/* ── Drawer navigation registry ────────────────────────────────────────── */

.section-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.section-drawer-nav-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.section-drawer-nav-group-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding-bottom: 0.4rem;
    border-bottom: var(--border-width, 1px) solid var(--border-color);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary, inherit);
}

.section-drawer-nav-group-icon {
    flex: 0 0 auto;
    color: var(--text-secondary, var(--text-muted, inherit));
}

.section-drawer-nav-subgroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.section-drawer-nav-subgroup + .section-drawer-nav-subgroup {
    margin-top: var(--space-1);
}

.section-drawer-nav-subgroup-heading {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-muted, var(--text-secondary, inherit));
}

.section-drawer-nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.section-drawer-nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-sm, 0.5rem);
    background: var(--bg-panel);
    color: var(--text-primary, inherit);
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background var(--duration-base) ease, border-color var(--duration-base) ease;
}

.section-drawer-nav-link:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel) 92%);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--border-color) 64%);
}

.section-drawer-nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .section-drawer-nav-link {
        transition: none;
    }
}

@keyframes section-drawer-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes section-drawer-panel-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-drawer-backdrop,
    .section-drawer-panel {
        transition: none;
        animation: none;
    }
}

/* ── Admin instances list ───────────────────────────────────────────────── */

.admin-table-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.admin-toolbar .admin-table-actions {
    width: 100%;
}

.admin-toolbar .admin-table-actions > * {
    flex: 1 1 12rem;
}

.admin-toolbar .admin-table-actions form {
    display: flex;
    gap: 0;
    margin: 0;
}

.admin-toolbar .admin-table-actions .button,
.admin-toolbar .admin-table-actions button {
    width: 100%;
}

.admin-table td,
.admin-table th {
    vertical-align: top;
}

.admin-table td small {
    display: block;
}

.create-form {
    display: grid;
    gap: var(--space-3);
    max-width: 40rem;
}

/* The session-creation card uses the wide admin canvas. Keep its controls at a
   comfortable reading width, but centre them instead of leaving a large empty
   column on the right of the card. */
.create-session-form {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}

/* Creation feedback is populated after an interaction. Do not reserve a blank
   feedback row between the panel heading and the untouched form. */
#create-feedback:empty {
    display: none;
}

#edit-feedback:empty {
    display: none;
}

.create-form-row {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
}

/* WCAG 1.4.10 Reflow (R5-a): the two 1fr tracks have an implicit
   min-width:auto = child min-content, so a <select>/<input> can force the row
   past a 320 CSS-px viewport. Allow the tracks to shrink below content. */
.create-form-row > * {
    min-width: 0;
}

/* ── Admin instance detail ──────────────────────────────────────────────── */

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

.admin-detail-grid dl {
    margin: 0;
}

.admin-detail-grid dt {
    font-weight: 700;
}

.admin-detail-grid dd {
    margin: 0.25rem 0 0;
}

.cohort-link-controls {
    margin-top: var(--space-4);
}

.cohort-link-row {
    display: grid;
    align-items: end;
    gap: var(--space-3);
    grid-template-columns: minmax(18rem, 40rem) max-content;
}

.cohort-link-row label {
    min-width: 0;
}

.cohort-link-row select {
    width: 100%;
}

.cohort-link-row button {
    min-height: 2.65rem;
}

.edit-form {
    display: grid;
    gap: var(--space-3);
    max-width: 40rem;
}

.edit-form-row {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
}

/* ── Admin candidates ───────────────────────────────────────────────────── */

.import-context-panel,
.import-panel {
    padding: 1.1rem;
}

.import-context-panel {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bg-panel) 88%, var(--accent-subtle) 12%), var(--bg-panel));
}

.import-context-grid,
.import-meta-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: var(--space-4);
}

.import-form {
    gap: var(--space-3);
}

.import-form textarea {
    min-height: 9rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
    line-height: 1.45;
}

.import-form input[type="file"] {
    min-height: 3rem;
    padding: 0.6rem;
    background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-panel-secondary) 18%);
}

.import-document-source {
    display: grid;
    gap: var(--space-1);
}

.import-file-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.import-file-row input[type="file"] {
    flex: 1 1 24rem;
}

.import-file-row button {
    flex: 0 0 auto;
}

.import-alternative {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.import-alternative::before,
.import-alternative::after {
    content: '';
    height: 1px;
    flex: 1 1 auto;
    background: var(--border);
}

/* The formatting-examples disclosure is a governed renderAccordionSection();
   only the sample <pre> blocks need local styling. */
.import-format-example pre {
    overflow-x: auto;
    white-space: pre;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
}

.import-form .actions {
    margin-top: var(--space-1);
}

.import-checkbox-label {
    width: 100%;
    justify-content: flex-start;
}

.import-checkbox-label span {
    flex: 1 1 auto;
    min-width: 0;
}

.import-result-shell {
    display: grid;
    gap: var(--space-2);
}

.import-result-toolbar {
    display: flex;
    justify-content: flex-end;
}

.import-copy-button {
    min-height: 2.2rem;
    padding: 0.45rem 0.75rem;
    font-size: var(--font-size-md);
}

.import-result {
    min-height: 0;
    max-height: 20rem;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-input);
}

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

.admin-row-actions form {
    display: inline-flex;
    margin-top: 0;
}

.admin-row-actions button {
    margin: 0;
}

/* Shared layout helpers for the edition-administration surfaces. */
.admin-inline-form {
    margin-top: var(--space-4);
}

.admin-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0.75rem 0;
}

.admin-checkbox-row input {
    margin-top: var(--space-1);
}

/* The feature-locked panel shown where an organisation's edition does not
   include a governed feature. Uses the shared panel chrome; no bespoke styling. */
.feature-locked-panel {
    margin-top: var(--space-4);
}

/* The org-facing read-only "features included" list. A simple ticked
   list of friendly feature display names; reuses the existing colour tokens. */
.feature-inclusion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-1);
}

.feature-inclusion-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.feature-inclusion-tick {
    color: var(--success);
    font-weight: 700;
}

/* The one-time API-key secret reveal. The panel is highlighted so the
   operator notices it is shown only once; the secret field is monospace and
   full-width so the whole value can be selected and copied. */
.api-key-reveal {
    border: 1px solid var(--accent);
}

.api-key-secret {
    font-family: var(--font-mono);
    width: 100%;
}

.admin-user-actions {
    align-items: center;
}

.admin-user-actions > * {
    flex: 1 1 10rem;
}

.admin-user-actions-form {
    display: inline-flex;
    margin: 0;
}

.admin-user-actions .button,
.admin-user-actions button {
    min-height: 2.35rem;
    padding: 0.5rem 0.95rem;
    white-space: nowrap;
    width: 100%;
}

.admin-helper {
    margin: 0;
    line-height: 1.5;
    font-size: var(--font-size-base);
}

/* Vertical rhythm for the label → helper → control stack inside admin panels
   (panels space children by margin, and both elements default to margin:0).
   Scoped to the adjacency so standalone uses of either element are unaffected. */
.workspace-section-label + .admin-helper {
    margin-top: var(--space-2);
}

.admin-helper + .admin-helper {
    margin-top: var(--space-2);
}

p + .admin-helper {
    margin-top: var(--space-3);
}

.confidence-reference {
    max-width: 72rem;
    padding: var(--space-3);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.confidence-reference .reference-label {
    font-weight: 700;
}

.admin-code {
    white-space: pre-wrap;
    overflow: auto;
}

.candidate-cell {
    vertical-align: top;
}

.candidate-identity {
    display: grid;
    gap: var(--space-1);
}

.candidate-identity strong {
    font-size: 1.02rem;
    line-height: 1.3;
}

.candidate-meta {
    display: grid;
    gap: var(--space-1);
    color: var(--text-secondary);
}

.candidate-access {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.candidate-access-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: stretch;
}

.candidate-access-input {
    min-width: min(100%, 18rem);
    flex: 1 1 18rem;
}

.candidate-access-meta {
    display: grid;
    gap: var(--space-1);
    color: var(--text-secondary);
}

.candidate-status-stack,
.candidate-script-status,
.candidate-registration-status,
.candidate-script-score {
    display: grid;
    gap: var(--space-2);
}

/* Secondary lines folded into the merged Status and Script columns: a small
   label above the value, separated from the cell's primary content above. */
.candidate-registration-status,
.candidate-script-score {
    margin-top: var(--space-3);
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-color);
}

.candidate-registration-status .workspace-section-label,
.candidate-script-score .workspace-section-label {
    margin-bottom: var(--space-1);
}

.candidate-inline-actions {
    margin-top: var(--space-1);
}

/* Merged lifecycle column: Started / Submitted / Finalised stacked as
   label + relative-time pairs. */
.candidate-lifecycle {
    margin: 0;
    display: grid;
    gap: var(--space-2);
}

.candidate-lifecycle-item dt {
    margin: 0 0 0.1rem;
}

.candidate-lifecycle-item dd {
    margin: 0;
}

.candidate-actions-grid {
    display: grid;
    gap: var(--space-2);
}

.candidate-actions-grid > * {
    width: 100%;
}

@media (max-width: 1100px) {
    .candidate-table {
        min-width: 980px;
    }
}

/* ── Admin audit events ─────────────────────────────────────────────────── */

.audit-layout {
    display: grid;
    gap: var(--space-4);
}

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

.audit-filters label {
    display: grid;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
}

.audit-filters select,
.audit-filters input {
    min-width: 160px;
}

.audit-table-wrap {
    overflow: auto;
}

.audit-pagination {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Admin health checks ────────────────────────────────────────────────── */

.health-layout {
    display: grid;
    gap: var(--space-4);
}

.health-group {
    display: grid;
    gap: var(--space-2);
}

.health-group details > summary {
    cursor: pointer;
    font-weight: 600;
}

.health-group details > ul {
    margin-top: var(--space-2);
}

.health-row {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.health-label {
    flex: 1;
}

.health-badge {
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}

.badge-pass {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-fail {
    background: var(--bg-error);
    color: var(--text-error);
}

.overall-pass {
    color: var(--success);
}

.overall-warning {
    color: var(--warning-text);
}

.overall-fail {
    color: var(--text-error);
}

/* ── Admin reports ──────────────────────────────────────────────────────── */

.report-layout {
    display: grid;
    gap: var(--space-4);
}

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

.stat-card {
    display: grid;
    gap: var(--space-1);
    padding: 1rem;
    background: var(--bg-panel-secondary);
    border-radius: 0.5rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.stat-card .stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

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

.status-fail {
    color: var(--text-error);
}

/* ── Admin questions list ───────────────────────────────────────────────── */

.inventory-layout {
    display: grid;
    gap: var(--space-4);
}

.inventory-toolbar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.inventory-toolbar p {
    margin: 0;
}

.inventory-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

.inventory-actions form {
    margin: 0;
}

.inventory-bulk-form {
    display: inline-flex;
}

.inventory-filters {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: end;
    margin: 0 0 0.9rem;
}

.question-picker-results,
.question-picker-results .content-table-wrap {
    width: 100%;
}

.question-selection-table {
    table-layout: fixed;
}

.question-selection-table__action {
    width: 9%;
}

.question-selection-table__question {
    width: 40%;
}

.question-selection-table__type {
    width: 14%;
}

.question-selection-table__status {
    width: 10%;
}

.question-selection-table__marks {
    width: 9%;
}

.question-selection-table__banks {
    width: 18%;
}

.question-selection-table--membership .question-selection-table__action {
    width: 9%;
}

.question-selection-table--membership .question-selection-table__question {
    width: 29%;
}

.question-selection-table--membership .question-selection-table__type {
    width: 13%;
}

.question-selection-table--membership .question-selection-table__status {
    width: 10%;
}

.question-selection-table--membership .question-selection-table__marks {
    width: 8%;
}

.question-selection-table--membership .question-selection-table__banks {
    width: 15%;
}

.question-selection-table__categories {
    width: 16%;
}

.question-selection-table__action-cell {
    text-align: center;
}

.question-selection-table__action-cell .content-actions {
    justify-content: center;
}

.filter-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    justify-self: start;
}

.inventory-table td,
.inventory-table th {
    vertical-align: top;
    white-space: nowrap;
}

.inventory-table td:nth-child(2),
.inventory-table td:nth-child(6) {
    white-space: normal;
}

.inventory-meta {
    display: grid;
    gap: var(--space-1);
}

.inventory-id-heading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.inventory-reference-cell {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.inventory-id-heading input,
.inventory-reference-cell input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.inventory-reference-stack {
    display: grid;
    gap: var(--space-1);
    min-width: 7.5rem;
}

.inventory-reference-stack small {
    color: var(--text-muted);
    line-height: 1.25;
}

/* Reference codes are user-entered (or legacy auto-generated) and can be
   long unbroken tokens; wrap them rather than widening the column. */
.inventory-reference-stack code {
    overflow-wrap: anywhere;
}

.inventory-state {
    display: grid;
    gap: var(--space-1);
    min-width: 10rem;
}

.inventory-state small {
    color: var(--text-muted);
    line-height: 1.35;
    white-space: normal;
}

.inventory-pager {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.85rem;
}

/* ── Admin question banks ───────────────────────────────────────────────── */

.content-layout {
    display: grid;
    gap: var(--space-4);
}

.content-toolbar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.content-toolbar p {
    margin: 0;
}

.content-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: flex-end;
}

.content-actions form {
    margin: 0;
}

.question-bank-results {
    display: grid;
    gap: var(--space-4);
}

.list-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.list-view-switch {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.list-view-switch[hidden] {
    display: none;
}

.list-view-switch__button {
    min-height: 2.3rem;
    padding: 0.4rem 0.75rem;
    border-color: transparent;
    box-shadow: none;
}

.list-view-switch__button[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
}

.question-bank-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
    gap: var(--space-4);
}

.question-bank-panel-grid[hidden],
.question-bank-panel[hidden] {
    display: none;
}

.question-bank-panel {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel-secondary);
    box-shadow: var(--panel-boundary-shadow);
    transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) ease;
}

.question-bank-panel:hover {
    border-color: var(--accent);
    box-shadow: var(--panel-boundary-shadow-hover);
    transform: translateY(-2px);
}

.question-bank-panel__media {
    position: relative;
    min-height: 10rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent-subtle) 62%, var(--bg-panel-secondary) 38%);
}

.question-bank-panel__media-link {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 10rem;
    aspect-ratio: 16 / 7;
}

.question-bank-panel__media-link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.question-bank-panel__media-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) ease;
}

.question-bank-panel:hover .question-bank-panel__media img {
    transform: scale(1.025);
}

.question-bank-panel__placeholder {
    display: grid;
    place-items: center;
    min-height: 100%;
    color: var(--accent-text, var(--accent));
    background:
        radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--accent) 18%, transparent) 0 12%, transparent 13%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent-subtle) 78%, var(--bg-panel) 22%), var(--bg-panel-secondary));
}

.question-bank-panel__placeholder .app-icon {
    width: 3rem;
    height: 3rem;
}

.question-bank-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.question-bank-panel__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Display size above the body scale (the token scale stops at --font-size-base);
   --font-size-lg does not exist, so a var() here silently fell back to inherit. */
.question-bank-panel__heading h2 {
    display: -webkit-box;
    margin: 0.15rem 0 0.25rem;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.question-bank-panel__context {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0;
}

.question-bank-panel__domain {
    color: var(--text-secondary);
}

.question-bank-panel__chips {
    position: absolute;
    z-index: 1;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

.question-bank-panel__chips .status-chip {
    min-width: 0;
    padding: 0.2rem 0.55rem;
    font-size: var(--font-size-xs);
}

.question-bank-panel__description {
    display: -webkit-box;
    height: 2.9em;
    min-height: 2.9em;
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary);
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.question-bank-panel__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin: auto 0 0;
    padding-top: var(--space-3);
}

.question-bank-panel__stats div {
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--border-radius-md);
    background: var(--bg-panel);
}

.question-bank-panel__stats dt {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-overflow: ellipsis;
}

.question-bank-panel__stats dd {
    margin: var(--space-1) 0 0;
    /* Display size above the body scale; --font-size-lg does not exist. */
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.question-bank-panel__owner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.question-bank-panel__owner strong {
    display: inline-flex;
    align-items: center;
    color: var(--text-primary);
    text-align: right;
}

.question-bank-panel__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--border-radius-md);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: var(--font-size-sm);
}

.question-bank-panel__warning .app-icon {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.question-bank-panel__actions {
    padding: 0 var(--space-4) var(--space-4);
}

.question-bank-panel__actions .content-actions {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

/* Action controls use an interactive tinted surface and a contact shadow so
   they cannot be mistaken for the quiet, borderless information tiles above. */
.question-bank-panel__actions .button.secondary,
.question-bank-panel__actions button.secondary,
.first-class-panel__actions .button.secondary,
.first-class-panel__actions button.secondary {
    background: var(--panel-action-secondary-bg);
    border-color: var(--panel-action-secondary-border);
    box-shadow: var(--elevation-1);
}

.question-bank-panel__actions .button.secondary:hover,
.question-bank-panel__actions button.secondary:hover,
.first-class-panel__actions .button.secondary:hover,
.first-class-panel__actions button.secondary:hover {
    background: var(--panel-action-secondary-bg-hover);
    border-color: var(--accent);
}

/* Reusable table/panel view for durable, first-class entities. Pages opt in
   on their semantic table; JavaScript derives the card summary from the
   existing headers and cells so actions, permissions, and terminology stay
   identical in both views. */
.first-class-list-toolbar {
    margin-bottom: var(--space-4);
}

.first-class-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-4);
    min-width: 0;
}

.first-class-panel-grid[hidden],
.first-class-panel[hidden],
table[data-first-class-table][hidden],
.table-scroll[hidden],
[data-first-class-table-region][hidden] {
    display: none;
}

.first-class-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel-secondary);
    box-shadow: var(--panel-boundary-shadow);
    transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) ease;
}

.first-class-panel:hover {
    border-color: var(--accent);
    box-shadow: var(--panel-boundary-shadow-hover);
    transform: translateY(-2px);
}

.first-class-panel__selection {
    position: absolute;
    z-index: 1;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel);
}

.first-class-panel__media {
    width: 100%;
    aspect-ratio: 16 / 6;
    overflow: hidden;
    background: var(--accent-subtle);
}

.first-class-panel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) ease;
}

.first-class-panel:hover .first-class-panel__image {
    transform: scale(1.025);
}

.first-class-panel__primary {
    min-height: 5.35rem;
    padding: var(--space-4);
}

.first-class-panel:has(.first-class-panel__selection) .first-class-panel__primary {
    padding-right: 4.5rem;
}

.first-class-panel__primary .content-meta,
.first-class-panel__primary .admin-meta {
    margin-top: 0;
}

/* Display size above the body scale (the token scale stops at --font-size-base);
   --font-size-lg does not exist, so a var() here silently fell back to inherit. */
.first-class-panel__primary strong,
.first-class-panel__primary > a,
.first-class-panel__primary > span:first-child {
    display: block;
    font-size: 1.2rem;
    line-height: 1.25;
}

.first-class-panel__primary--plain {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.first-class-panel__primary small {
    color: var(--text-secondary);
}

.first-class-panel__context {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.first-class-panel__context .inventory-reference-cell {
    display: block;
}

.first-class-panel__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-content: start;
    margin: 0;
    padding: 0 var(--space-4) var(--space-4);
}

.first-class-panel__detail {
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border-radius: var(--border-radius-md);
    background: var(--bg-panel);
}

.first-class-panel__detail dt {
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.first-class-panel__detail dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

[data-first-class-panel="assessments"] .first-class-panel__detail--clients,
[data-first-class-panel="assessments"] .first-class-panel__detail--configuration {
    grid-column: 1 / -1;
}

.assessment-configuration {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

.assessment-configuration > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.assessment-configuration dt {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.assessment-configuration dd {
    color: var(--text-primary);
}

.first-class-panel__detail dd > small,
.first-class-panel__detail dd > strong {
    display: block;
}

.first-class-panel__detail .content-meta,
.first-class-panel__detail .admin-meta {
    margin-top: 0;
}

.first-class-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-color);
}

.first-class-panel__actions > div,
.first-class-panel__actions .content-actions,
.first-class-panel__actions .template-actions,
.first-class-panel__actions .admin-table-actions,
.first-class-panel__actions .admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.first-class-panel__actions form {
    margin: 0;
}

.first-class-panel-grid__empty {
    grid-column: 1 / -1;
}

@media (max-width: 520px) {
    .first-class-panel__details {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .first-class-panel,
    .first-class-panel__image {
        transition: none;
    }

    .first-class-panel:hover,
    .first-class-panel:hover .first-class-panel__image {
        transform: none;
    }
}

@media print {
    .first-class-list-toolbar,
    .first-class-panel-grid {
        display: none !important;
    }

    table[data-first-class-table] {
        display: table !important;
    }

    .table-scroll:has(table[data-first-class-table]) {
        display: block !important;
    }

    .question-bank-panel,
    .first-class-panel {
        box-shadow: none;
    }
}

.content-table td,
.content-table th {
    vertical-align: top;
}

.question-bank-description {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.45;
}

.question-bank-image {
    display: block;
    width: auto;
    max-width: min(100%, 28rem);
    max-height: 16rem;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-panel-secondary);
}

.question-bank-thumb {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    object-fit: cover;
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    background: var(--bg-panel-secondary);
}

@media (max-width: 520px) {
    .list-view-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .list-view-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .question-bank-panel__heading {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .question-bank-panel,
    .question-bank-panel__media img {
        transition: none;
    }

    .question-bank-panel:hover {
        transform: none;
    }

    .question-bank-panel:hover .question-bank-panel__media img {
        transform: none;
    }
}

.bank-image-field,
.bank-image-current {
    display: grid;
    gap: var(--space-2);
}

.bank-image-current {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.bank-details-accordion summary {
    cursor: pointer;
    padding-bottom: 0.75rem;
}

.bank-details-accordion[open] summary {
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.question-bank-select-preview[hidden] {
    display: none;
}

.import-bank-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Placeholder shown when no bank image is available */
.import-bank-preview:has(.question-bank-select-preview[hidden])::before {
    content: '';
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px dashed var(--border-color);
    border-radius: 0.4rem;
    background: var(--bg-panel-secondary);
    flex-shrink: 0;
}

.import-bank-preview:has(.question-bank-select-preview[hidden])::after {
    content: 'No bank image';
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.question-bank-inline {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.question-bank-inline .question-bank-thumb {
    flex: 0 0 auto;
}

.bank-form {
    display: grid;
    gap: var(--space-3);
}

.bank-form-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.topic-primary-details {
    grid-template-columns: minmax(18rem, 2fr) minmax(12rem, 1fr) minmax(8rem, auto);
    align-items: end;
}

.topic-primary-details .pool-meta-list {
    height: 100%;
    align-content: end;
}

.topic-secondary-details {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    padding-top: 0.2rem;
}

.topic-lifecycle-actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.topic-lifecycle-actions .content-actions {
    justify-content: flex-start;
}

@media (max-width: 760px) {
    .topic-primary-details {
        grid-template-columns: 1fr;
    }
}

.pool-detail-layout {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
}

.pool-detail-main {
    min-width: 0;
}

.pool-meta-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.pool-meta-list div {
    display: grid;
    gap: var(--space-1);
}

.pool-meta-list dt {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin: 0;
}

.pool-meta-list dd {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
}

.pool-summary-list {
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.pool-summary-list div {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    padding: 0.55rem 0.65rem;
}

.pool-meta-list--wide {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.pool-meta-list--wide div:nth-child(2) {
    grid-column: 1 / -1;
}

@media (max-width: 860px) {
    .pool-detail-layout {
        grid-template-columns: 1fr;
    }
}

.bank-edit-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    min-width: 40rem;
}

.bank-edit-grid textarea {
    min-height: 4.5rem;
}

.reference-term-summary {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.reference-term-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
}

.bank-question-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bank-question-info small {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.bank-question-actions {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex-wrap: wrap;
}

.bank-question-actions form {
    margin: 0;
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

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

.filter-form label {
    min-width: 12rem;
}

.analysis-run-form {
    align-items: flex-end;
}

.analysis-run-about,
.analysis-run-inputs,
.analysis-run-actions,
.analysis-run-form > .admin-feedback {
    flex: 1 0 100%;
    width: 100%;
}

.analysis-run-inputs {
    min-width: 0;
}

.analysis-run-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-3);
    align-items: end;
}

.analysis-run-fields label {
    min-width: 0;
}

.analysis-run-fields input:not([type="checkbox"]) {
    width: 100%;
}

.analysis-run-fields select {
    width: 100%;
}

/* Multi-value entity pickers on the
   Run-analysis form reuse the T-008 question-picker primitives; the widget
   spans the whole grid row so the filter list has room to breathe. */
.analysis-run-fields .analysis-entity-picker {
    grid-column: 1 / -1;
    min-width: 0;
}

.analysis-entity-picker-advanced {
    margin-top: var(--space-2);
}

.analysis-entity-picker-advanced summary {
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--text-secondary);
}

/* The Adaptive delivery hub list on the
   psychometrics dashboard — one link plus a one-line job description per
   suite page. */
.adaptive-hub-links {
    margin: 0;
    padding-left: 1.25rem;
}

.adaptive-hub-links li {
    margin-bottom: var(--space-2);
}

.analysis-run-actions {
    align-items: flex-start;
}

.analysis-run-developer-details {
    min-width: min(100%, 12rem);
    max-width: min(100%, 44rem);
}

.analysis-run-developer-details[open] {
    flex-basis: 100%;
}

.analysis-run-developer-details textarea {
    width: 100%;
}

.session-list-filters {
    margin-bottom: var(--space-4);
}

.session-warning-flag {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-1);
    vertical-align: top;
    border: 1px solid var(--warning-border);
    border-radius: var(--border-radius-sm);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.cohort-overview {
    display: grid;
    gap: var(--space-4);
}

.cohort-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
}

.cohort-summary-card {
    min-width: 0;
}

.cohort-summary-card .stat-value {
    font-size: 1.2rem;
    line-height: 1.3;
    word-break: break-word;
}

.cohort-summary-empty {
    color: var(--text-muted);
    font-weight: 600;
}

.cohort-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    justify-content: space-between;
    margin-top: var(--space-4);
}

.cohort-status-form {
    flex: 1 1 22rem;
    margin: 0;
}

.cohort-status-form label {
    min-width: 0;
    flex: 1 1 12rem;
}

.cohort-create-form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
}

.cohort-create-field {
    min-width: 0;
}

.cohort-create-field--name {
    grid-column: span 4;
}

.cohort-create-field--code {
    grid-column: span 4;
}

.cohort-create-field--date {
    grid-column: span 2;
}

.cohort-create-field--description {
    grid-column: span 8;
}

.cohort-create-field--description textarea {
    min-height: 6.5rem;
}

.cohort-create-actions {
    grid-column: span 4;
    align-self: end;
    margin-top: 0;
}

.cohort-create-actions .button {
    min-width: 10rem;
}

.cohort-create-form .admin-feedback {
    grid-column: 1 / -1;
}

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

.bank-question-filter label {
    min-width: 12rem;
}

/* ── Admin question editor ──────────────────────────────────────────────── */

.question-layout {
    display: grid;
    gap: var(--space-4);
}

.question-toolbar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* Names the question bank the author is editing through; secondary to the
   question identity and status line directly above it. */
.question-editing-context {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
}

.question-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

.question-actions > form {
    display: flex;
    margin-top: 0;
}

.question-action-note {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.question-status-actions {
    gap: var(--space-3);
    row-gap: var(--space-2);
    margin-top: var(--space-3);
}

.question-form {
    display: grid;
    gap: var(--space-3);
}

.question-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/*
 * The question-topic-picker uses bodyWrapper=false so the topic
 * controls remain direct children of the accordion. Keep the "Manage topics"
 * action in normal document flow to avoid overlap with the topic tags.
 */
.question-topic-picker {
    padding-bottom: 0.75rem;
}

.question-topic-picker-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0.5rem 0.9rem 0.8rem;
}

.question-topic-picker-actions > .button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.7rem 1.25rem;
    line-height: 1.2;
}

@media (max-width: 720px) {
    .cohort-link-row {
        grid-template-columns: 1fr;
    }

    .cohort-link-row button {
        width: 100%;
    }

    /* R5-a: stack the create-form field pairs (Name/Type, Start/End) so they
       never two-up below the small-screen breakpoint. */
    .create-form-row {
        grid-template-columns: 1fr;
    }

    .cohort-create-form {
        grid-template-columns: 1fr;
    }

    .cohort-create-field--name,
    .cohort-create-field--code,
    .cohort-create-field--date,
    .cohort-create-field--description,
    .cohort-create-actions {
        grid-column: 1;
    }

    .cohort-create-actions .button {
        width: 100%;
    }

    .cohort-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cohort-status-form {
        width: 100%;
    }

    .cohort-status-form .actions,
    .cohort-status-form .button {
        width: 100%;
    }

    .question-topic-picker-actions {
        justify-content: stretch;
    }

    .question-topic-picker-actions > .button {
        width: 100%;
        justify-content: center;
    }
}

.topic-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.topic-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill, 999px);
    background: var(--bg-panel);
    color: var(--text-primary);
    white-space: nowrap;
}

.topic-tag input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    accent-color: var(--accent);
}

.topic-tag span {
    white-space: nowrap;
}

.topic-tag small {
    color: var(--text-secondary);
    white-space: nowrap;
}

.topic-tag.is-selected {
    border-color: var(--border-status-ready);
    background: var(--bg-status-ready);
}

.topic-tag.is-retired {
    opacity: 0.72;
}

/* Topic allocation weighting controls */
.topic-tag-weight {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: 0.4rem;
}

.topic-tag-weight[hidden] {
    display: none;
}

.topic-tag-weight-input {
    width: 3.5rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm, 4px);
    font-size: var(--font-size-sm);
    /* Hide the native number spinner — 0.01 steps are not useful and integer
       steps would flag `Distribute evenly` rounding values (e.g. 33.34) invalid. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.topic-tag-weight-input::-webkit-outer-spin-button,
.topic-tag-weight-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.topic-tag-weight-suffix {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.topic-allocation-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.topic-allocation-status-total {
    font-weight: 600;
    color: var(--text-primary);
}

.topic-allocation-balance {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-text);
    cursor: pointer;
    font-size: var(--font-size-md);
}

.topic-allocation-balance[disabled] {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.topic-allocation-status-message {
    flex-basis: 100%;
    color: var(--text-error);
    margin: 0;
}

/* Candidate-facing topic breakdown */
.candidate-topic-breakdown {
    margin-top: var(--space-5);
}

.candidate-topic-breakdown table {
    width: 100%;
    border-collapse: collapse;
}

.candidate-topic-breakdown th,
.candidate-topic-breakdown td {
    padding: 0.45rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.candidate-topic-breakdown td.num,
.candidate-topic-breakdown th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.candidate-topic-breakdown .topic-confidence-flag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: var(--border-radius-sm, 4px);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: var(--font-size-xs);
}

.candidate-topic-breakdown .topic-unmapped-note {
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Confidence summary — the shared score-versus-confidence cell/block rendered by
   src/reporting/confidence_display.php. Every value (index, per-bucket shares,
   coverage) is present as visible text; nothing is carried by colour or width
   alone, and the fixed Certain / Unsure / Guessing order is preserved. */
.confidence-summary {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.confidence-summary--block {
    gap: 0.3rem;
}

.confidence-summary--absent,
.confidence-index--absent {
    color: var(--text-muted);
    font-style: italic;
}

.confidence-index-label {
    color: var(--text-muted);
}

.confidence-index-value {
    font-weight: 600;
}

.confidence-distribution {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.confidence-coverage {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* Individual categorical value (candidate response). */
.confidence-value {
    font-weight: 600;
}

.confidence-value--absent {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

.confidence-review-prompts {
    margin-top: var(--space-2);
}

@media print {
    /* Keep every confidence value legible in high contrast for print. */
    .confidence-summary--absent,
    .confidence-index--absent,
    .confidence-distribution,
    .confidence-coverage {
        color: #000;
    }
}

/* Review signal: the four-state question-level score-vs-confidence
   review prompt. The text label is authoritative; the colour treatment is
   redundant reinforcement carried by theme tokens (never a bare coloured dot),
   so a signal stays identifiable in monochrome print, forced-colours modes and
   for colour-vision differences. Four states use four distinct status families
   (green / sky-blue / amber / red) that adapt per theme. */
.review-signal-cell {
    white-space: normal;
}

/* Small sample sits under the signal in the same cell: both answer "how far can
   I trust this row?", so they read together. It is a separate warning about
   available marks, never a Review-signal state, so it keeps its own warning
   token family rather than any of the four signal colours.

   The wrapper (not the <td>) carries the stacking: a flex <td> would leave
   table layout and break column alignment on the four tables sharing this
   class. align-items keeps each pill at its natural width. */
.review-signal-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.review-signal-stack .topic-confidence-flag {
    padding: 0.1rem 0.5rem;
    border-radius: var(--border-radius-sm, 0.25rem);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: var(--font-size-xs);
}

.review-signal {
    display: inline-block;
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.review-signal-label {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--border-radius-sm, 0.25rem);
    border: var(--border-width, 1px) solid transparent;
    font-weight: 600;
}

.review-signal--green .review-signal-label {
    background: var(--bg-status-open);
    border-color: var(--border-status-open);
    color: var(--text-status-open);
}

.review-signal--blue .review-signal-label {
    background: var(--bg-status-sky);
    border-color: var(--border-status-sky);
    color: var(--text-status-sky);
}

.review-signal--amber .review-signal-label {
    background: var(--bg-status-closed);
    border-color: var(--border-status-closed);
    color: var(--text-status-closed);
}

.review-signal--red .review-signal-label {
    background: var(--bg-error);
    border-color: var(--border-error);
    color: var(--text-error);
}

/* "Unclassified" evidence state: its own named grey grade — a distinct neutral
   pill, never one of the four meaning colours. */
.review-signal--grey .review-signal-label {
    background: var(--bg-status-archived);
    border-color: var(--border-status-archived);
    color: var(--text-status-archived);
}

/* Legacy-snapshot "Not available in this snapshot" state: plain muted text (it is
   the absence of a projection, not a grade). */
.review-signal--absent {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
}

@media (forced-colors: active) {
    /* In forced-colours mode the token fills are dropped by the UA; keep the
       label distinguishable with a system border so the four pills stay legible
       (the text label remains the authoritative carrier regardless). */
    .review-signal-label {
        border: 1px solid CanvasText;
        color: CanvasText;
        background: Canvas;
    }
}

@media print {
    /* Text-first in print: high-contrast label, no reliance on the colour fill. */
    .review-signal-label {
        color: #000;
        border-color: #000;
        background: transparent;
    }
    .review-signal--insufficient,
    .review-signal--absent {
        color: #000;
    }
}

/* Understanding profile: the square Review-signal composition glyph, the
   headline item on the two analytics report headers. The exact reading (band,
   counts, shares) lives in a hover/focus tip on the square and in the SVG's
   full-sentence accessible name; print reveals the tip as static text so the
   paper report keeps the numbers. Segment fills reuse the same four status
   families as the signal pills so word, pill and segment always agree. */
.understanding-profile {
    display: inline-flex;
    font-size: var(--font-size-sm);
}

.understanding-profile-figure {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    cursor: help;
}

.understanding-profile-figure:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.understanding-profile-glyph {
    width: 6rem;
    height: 6rem;
    display: block;
}

/* The track is the glyph's frame: it marks the full extent the strip could
   fill, so the space above a part-height strip reads as unfilled rather than
   absent. That is structure, not status, so it takes the neutral bounding
   token — a brand-tinted frame reads as a fifth signal competing with the four
   real ones, and would change hue between themes while the data stayed the
   same. Paler than the segment seams on purpose: the container should sit
   behind the divisions inside it, not compete with them. */
.understanding-profile-track {
    fill: var(--bg-panel-secondary, transparent);
    stroke: var(--border-color);
    stroke-width: 1;
}

/* Segments use the reporting charts' 30% tint so the glyph reads at the same
   saturation as the bars and stacked tracks beside it. The separator is a
   neutral grey rather than each segment's own colour: at glyph scale a
   saturated border competes with the fill it surrounds, and the edge segments
   sit flush against the clip path, so a coloured stroke would trace the
   square's rounded corners.

   It takes --text-muted at half a unit: a hairline reads as a division between
   two fills, while a full unit at 48 viewBox units across is a visible frame
   around each segment. The muted TEXT token, not a border token, because the
   border tokens are pale by design (they separate panels from a page) and
   --border-color-emphasis is a saturated brand colour in every theme. */
.understanding-profile-segment {
    stroke: var(--text-muted);
    stroke-width: 0.5;
}

.understanding-profile-segment--green { fill: color-mix(in srgb, var(--text-status-open) 30%, transparent); }
.understanding-profile-segment--blue  { fill: color-mix(in srgb, var(--text-status-sky) 30%, transparent); }
.understanding-profile-segment--amber { fill: color-mix(in srgb, var(--text-status-closed) 30%, transparent); }
.understanding-profile-segment--red   { fill: color-mix(in srgb, var(--text-error) 30%, transparent); }

/* The awaiting-evidence icon sits centred over the empty track. */
.understanding-profile-empty-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* The reading tip: a panel-styled popover below the square, shown on hover or
   keyboard focus (same disclosure pattern as .field-help-tooltip). Panel
   colours rather than the dark tooltip tokens because the share swatches
   carry the four status colours, which need the panel background to keep
   their contrast. Print reveals it statically so the paper keeps the numbers. */
.understanding-profile-tip {
    position: absolute;
    top: calc(100% + 0.45rem);
    /* Right-anchored: the square sits at the panel's right edge, so the tip
       grows leftward into the page rather than off it. */
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: max-content;
    max-width: 260px;
    padding: 0.5rem 0.7rem;
    background: var(--bg-panel);
    color: var(--text-primary);
    border: var(--border-width, 1px) solid var(--border-color-emphasis, currentColor);
    border-radius: var(--border-radius-sm, 6px);
    text-align: left;
    white-space: normal;
    box-shadow: var(--elevation-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease;
}

.understanding-profile-figure:hover .understanding-profile-tip,
.understanding-profile-figure:focus-visible .understanding-profile-tip {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .understanding-profile-tip {
        transition: none;
    }
}

.understanding-profile-tip-title {
    font-weight: 700;
    color: var(--text-secondary);
}

.understanding-profile-band {
    font-weight: 600;
}

.understanding-profile-counts {
    color: var(--text-muted);
}

.understanding-profile-shares {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
}

.understanding-profile-share {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* The share swatch repeats the segment colour beside its named percentage so
   the legend travels with the numbers; the words remain the meaning. */
.understanding-profile-share-swatch {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--border-radius-sm, 0.25rem);
    /* The same neutral tone the glyph's segment seams carry, so the tip legend
       and the square hold one weight of colour between them. These are HTML
       boxes rather than SVG, so they keep a 1px border — a hairline is a
       viewBox-unit trick that does not apply at this size. */
    border: var(--border-width, 1px) solid var(--text-muted);
}

.understanding-profile-share--green .understanding-profile-share-swatch {
    background: color-mix(in srgb, var(--text-status-open) 30%, transparent);
}

.understanding-profile-share--blue .understanding-profile-share-swatch {
    background: color-mix(in srgb, var(--text-status-sky) 30%, transparent);
}

.understanding-profile-share--amber .understanding-profile-share-swatch {
    background: color-mix(in srgb, var(--text-status-closed) 30%, transparent);
}

.understanding-profile-share--red .understanding-profile-share-swatch {
    background: color-mix(in srgb, var(--text-error) 30%, transparent);
}

.understanding-profile--absent {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* The analytics report header: meta text on the left, the profile square hard
   right. Both children top-align so the square keeps its position beside the
   heading however many meta lines the report carries (the assessment report's
   versions/exclusions/limit lines vary), instead of drifting down with the
   shared toolbar's centre alignment. */
.report-header-toolbar {
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Constrained so long meta lines wrap instead of pushing the square down onto
   its own row; it still shrinks first on narrow viewports. */
.report-header-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 72ch;
}

/* The headline placement: pushed to the right edge of the report header row,
   with the square right-justified inside it (its title lives in the tip). */
.understanding-profile-headline {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

/* Below the panel's comfortable two-column width the square drops under the
   text rather than squeezing the heading. */
@media (max-width: 40rem) {
    .report-header-toolbar {
        flex-wrap: wrap;
    }
    .report-header-text {
        max-width: 100%;
    }
}

@media (forced-colors: active) {
    /* Token fills are dropped by the UA; keep the track and segments visible as
       system-ink shapes with Canvas seams. Segment hues cannot be distinguished
       here — the adjacent text carries the composition, by design. */
    .understanding-profile-track {
        fill: Canvas;
        stroke: CanvasText;
    }
    .understanding-profile-segment--green,
    .understanding-profile-segment--blue,
    .understanding-profile-segment--amber,
    .understanding-profile-segment--red {
        fill: CanvasText;
        stroke: Canvas;
        stroke-width: 1;
    }
    .understanding-profile-share-swatch {
        background: CanvasText;
        border-color: CanvasText;
    }
}

@media print {
    /* Charts are part of the printed report: keep the glyph's fills on paper,
       and reveal the hover tip as static text beside the square so the paper
       report keeps the exact numbers. */
    .understanding-profile-glyph {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .understanding-profile-track {
        stroke: #000;
    }
    .understanding-profile-figure {
        display: inline-flex;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .understanding-profile-tip {
        position: static;
        opacity: 1;
        visibility: visible;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .understanding-profile--absent,
    .understanding-profile-counts {
        color: #000;
    }
}

/* Component preview board (admin/_ui_preview.php), a design
   review surface. The cells are deliberately plain so the component under
   review carries all the visual interest; the glyph is right-aligned in its
   cell because that is where the report header places it. */
/* Section headings carry no top margin of their own, so each panel after the
   first states its own separation from the cells above it. */
.admin-panel + .admin-panel {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: var(--border-width, 1px) solid var(--border-color);
}

.ui-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-6) var(--space-5);
    margin-top: var(--space-4);
}

.ui-preview-case {
    margin: 0;
    padding: var(--space-4);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--border-radius-sm, 6px);
    background: var(--bg-panel-secondary, transparent);
}

/* Reserves the square's height so a degenerate cell keeps the grid rhythm, and
   right-aligns to match the report header placement. */
.ui-preview-case-glyph {
    display: flex;
    justify-content: flex-end;
    min-height: 6rem;
}

.ui-preview-case-caption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.ui-preview-case-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.ui-preview-case-meta {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* Per-question marker feedback on the candidate result page. */
.candidate-result-feedback {
    margin-top: var(--space-5);
}

.candidate-result-feedback .candidate-feedback-item + .candidate-feedback-item {
    margin-top: var(--space-3);
}

.candidate-result-feedback .candidate-feedback-question {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Submitted-answer review ("Your answers") on the candidate result page.
   Correctness pills use colour as reinforcement only: their visible words
   remain the authoritative meaning in every theme, print and forced colours.
   Long responses wrap; nothing scrolls horizontally. */
.candidate-answer-review {
    margin-top: var(--space-5);
}

.candidate-answer-review-intro {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
}

.candidate-answer-review-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

.candidate-answer-review-item {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.candidate-answer-review-question {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.candidate-answer-review-stem {
    margin: 0 0 var(--space-2);
    overflow-wrap: anywhere;
}

.candidate-answer-review-detail {
    margin: 0;
    display: grid;
    gap: var(--space-2);
}

.candidate-answer-review-detail div {
    display: grid;
    gap: 0.15rem;
}

.candidate-answer-review-detail dt {
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
}

.candidate-answer-review-detail dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.candidate-answer-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.15rem 0.55rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.35;
}

.candidate-answer-state--correct {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.candidate-answer-state--partially-correct {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.candidate-answer-state--incorrect {
    background: var(--bg-error);
    border-color: var(--border-error);
    color: var(--text-error);
}

.candidate-answer-state--not-answered,
.candidate-answer-state--not-marked {
    background: var(--bg-status-archived);
    border-color: var(--border-status-archived);
    color: var(--text-status-archived);
}

@media (forced-colors: active) {
    .candidate-answer-state {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
    }
}

@media print {
    .candidate-answer-state {
        color: #000;
        background: transparent;
        border-color: #000;
    }
}

.is-muted {
    opacity: 0.72;
}

.question-secondary-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.question-save-actions {
    display: grid;
    gap: var(--space-2);
    padding-top: 0.25rem;
    scroll-margin-top: var(--space-4);
}

.question-save-primary-actions,
.question-save-secondary-actions,
.question-editor-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.question-save-primary-actions {
    width: 100%;
}

/* Creating another item is useful but secondary to progressing through the
   current review set, so keep it quieter than Save and next. */
.question-save-primary-actions .question-save-new {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.question-save-primary-actions .question-save-new:hover,
.question-save-primary-actions .question-save-new:focus-visible {
    background: var(--bg-panel-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.question-editor-navigation {
    margin-left: auto;
}

.question-version-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-basis: auto;
    flex-shrink: 0;
    order: 0;
    margin-top: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm, 4px);
    background: color-mix(in srgb, var(--bg-panel-secondary) 78%, transparent);
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
}

.question-version-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.question-note-fields {
    display: grid;
    gap: var(--space-3);
    padding: 0.85rem;
}

.question-authoring-panel {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: var(--border-width-emphasis, 2px) solid var(--question-accent-border);
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--question-accent-bg) 82%, var(--bg-panel) 18%);
    scroll-margin-top: var(--space-4);
}

.question-authoring-panel-title {
    margin: 0;
    color: var(--accent-text);
    font-size: var(--font-size-base);
    line-height: 1.25;
}

.question-authoring-field-label {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.35;
}

.question-authoring-panel .label-wrap {
    gap: var(--space-2);
}

.question-authoring-panel #sr-section {
    display: grid;
    gap: var(--space-2);
}

.question-authoring-panel .rich-editor {
    background: var(--bg-panel);
    box-shadow: var(--elevation-1);
}

.question-table td,
.question-table th {
    vertical-align: top;
    white-space: nowrap;
}

.sr-options-list {
    display: grid;
    gap: var(--space-2);
}

.sr-option-row {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto auto;
    gap: var(--space-3);
    align-items: center;
}

.sr-option-label {
    font-weight: 600;
    text-align: center;
    font-size: var(--font-size-base);
}

.sr-option-row input[name="option_text[]"] {
    min-width: 0;
}

.sr-correct-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    cursor: pointer;
}

.sr-correct-label input {
    margin: 0;
}

.sr-remove-option {
    min-width: 0;
}

.sr-option-actions {
    margin-top: var(--space-3);
}

.sr-numeric-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Ordering / matching editor rows. Mirrors .sr-option-row's
   grid-with-trailing-action layout for plain-text item, prompt, and
   option rows. */
.sr-ordering-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: 1.5rem;
}

.sr-ordering-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: var(--space-2);
    align-items: center;
}

.sr-matching-list {
    display: grid;
    gap: var(--space-2);
}

.sr-matching-prompt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    align-items: center;
}

.sr-matching-option-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.sr-matching-correct-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

@media (max-width: 820px) {
    .sr-ordering-row,
    .sr-matching-prompt-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sr-matching-option-row {
        grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    }
}

@media (max-width: 820px) {
    .sr-option-row {
        grid-template-columns: 1.35rem minmax(0, 1fr) 1.75rem 2.25rem;
        gap: var(--space-2);
    }

    .sr-option-label {
        font-size: var(--font-size-base);
    }

    .sr-correct-label {
        justify-content: center;
        gap: 0;
    }

    .sr-correct-label span {
        display: none;
    }

    .sr-remove-option {
        width: 2.25rem;
        min-height: 2.25rem;
        padding: 0;
        overflow: hidden;
    }

    .sr-remove-option .sr-remove-text {
        display: none;
    }

    .question-save-actions {
        gap: var(--space-2);
    }

    .question-save-secondary-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .question-editor-navigation {
        flex-basis: 100%;
        margin-left: 0;
    }

    .question-version-option {
        white-space: normal;
    }
}

/* ── Marking-guidance rubric (banded mark scheme) ───────────────────────── */

.marking-guidance-rows {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.marking-guidance-row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.marking-guidance-row-head {
    font-weight: 600;
    align-items: center;
}

.marking-guidance-criteria {
    min-width: 0;
    min-height: 2.5rem;
}

.marking-guidance-remove {
    min-width: 0;
}

.marking-guidance-actions {
    margin-top: var(--space-3);
}

/* Read-only mark-scheme table shown to markers. */
.mark-scheme-table .mark-scheme-points {
    width: 6rem;
    white-space: nowrap;
    text-align: left;
    vertical-align: top;
}

.mark-scheme-table td {
    vertical-align: top;
    white-space: normal;
}

@media (max-width: 820px) {
    .marking-guidance-row {
        grid-template-columns: 4.5rem minmax(0, 1fr) 2.25rem;
        gap: var(--space-2);
    }

    .marking-guidance-remove {
        width: 2.25rem;
        min-height: 2.25rem;
        padding: 0;
        overflow: hidden;
    }

    .marking-guidance-remove .marking-guidance-remove-text {
        display: none;
    }
}

/* ── Admin templates ────────────────────────────────────────────────────── */

.template-layout {
    display: grid;
    gap: var(--space-4);
}

.template-toolbar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.template-toolbar p {
    margin: 0;
}

.template-bulk-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.template-bulk-form .admin-helper {
    flex: 1 0 100%;
}

.template-bulk-form button {
    flex: 0 0 auto;
    width: auto;
}

.template-form {
    display: grid;
    gap: var(--space-3);
}

.template-editor-block {
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.template-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.template-field--title {
    grid-column: span 2;
}

.template-grid--section {
    grid-template-columns: minmax(220px, 1fr) minmax(90px, 0.25fr);
}

.template-check {
    align-content: end;
}

.template-check input {
    width: auto;
    justify-self: start;
}

.template-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: flex-end;
}

.template-actions form {
    margin: 0;
}

.template-card {
    display: grid;
    gap: var(--space-3);
}

.template-section-list,
.template-rules {
    display: grid;
    gap: var(--space-3);
}

.template-section-tabs {
    display: grid;
    gap: 0;
    min-width: 0;
}

.template-section-tablist {
    display: flex;
    gap: var(--space-1);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.45rem 0.55rem 0;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-color) 58%);
    border-left: 4px solid color-mix(in srgb, var(--accent) 62%, var(--border-color) 38%);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    background: color-mix(in srgb, var(--accent-subtle) 72%, var(--bg-panel) 28%);
    scrollbar-width: thin;
}

.template-section-tab {
    flex: 0 0 auto;
    max-width: min(18rem, 70vw);
    margin: 0 0 -1px;
    padding: 0.7rem 0.9rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-bottom-color: color-mix(in srgb, var(--accent) 42%, var(--border-color) 58%);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-section-tab:hover {
    background: color-mix(in srgb, var(--bg-panel) 72%, var(--accent-subtle) 28%);
    color: var(--text-primary);
}

.template-section-tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color) 58%);
    border-bottom-color: var(--bg-panel);
    background: var(--bg-panel);
    color: var(--text-primary);
}

.template-section-tab--add {
    color: var(--accent);
}

.template-section-tabs--enhanced [data-section-panel][hidden] {
    display: none;
}

.template-section-tabs > .template-section-list > .template-section {
    border-top: 0;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.template-meta {
    display: grid;
    gap: var(--space-1);
}

.template-section {
    display: grid;
    gap: var(--space-2);
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, var(--accent) 22%);
    border-left: 4px solid color-mix(in srgb, var(--accent) 62%, var(--border-color) 38%);
    border-radius: var(--border-radius-md);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent-subtle) 22%, transparent), transparent 18rem),
        color-mix(in srgb, var(--bg-panel) 86%, var(--bg-panel-secondary) 14%);
}

.template-rule {
    display: grid;
    gap: var(--space-3);
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, var(--progress-fill) 16%);
    border-left: 3px solid color-mix(in srgb, var(--progress-fill) 46%, var(--border-color) 54%);
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--bg-panel-secondary) 86%, var(--bg-input) 14%);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.template-rule-summary {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.template-rule-summary strong {
    color: var(--text-primary);
}

.template-rule-summary .question-bank-thumb + strong {
    margin-right: auto;
}

.template-rule-form {
    margin-top: 0;
}

.template-source-note {
    display: block;
    margin-top: var(--space-2);
    padding: 0.45rem 0.6rem;
    border-radius: var(--border-radius-sm);
    line-height: 1.4;
}

.template-source-note--info {
    border: 1px solid var(--border-status-info);
    background: var(--bg-status-info);
    color: var(--text-status-info);
}

.template-source-note a {
    color: inherit;
    font-weight: 600;
}

.template-source-note-field {
    grid-column: 1 / -1;
}

.template-source-note-field .template-source-note {
    margin-top: 0;
}

.template-add-rule {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.template-empty,
.template-note {
    padding: 0.85rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

.template-empty {
    display: grid;
    gap: var(--space-1);
}

.template-empty strong {
    color: var(--text-primary);
}

/* Version/lineage line in the builder header. */
.template-version-line {
    margin: 0;
    color: var(--text-secondary);
}

.template-version-label {
    font-weight: 600;
    color: var(--text-primary);
}

.template-version-head {
    font-weight: 600;
    color: var(--success-text);
}

.template-version-head-note {
    color: var(--text-muted);
}

/* Publication-readiness checklist, mirroring the session-readiness
   pattern so the design language is consistent. Colour is never the only signal
   (an icon and a state word accompany every row). */
.readiness-checklist {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.readiness-check {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.readiness-check .readiness-check-icon {
    align-self: center;
}

.readiness-check-label {
    color: var(--text-primary);
}

.readiness-check-state {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.readiness-check-detail {
    flex-basis: 100%;
    color: var(--text-muted);
}

.readiness-check--met {
    border-color: var(--success-border);
}

.readiness-check--met .readiness-check-label {
    color: var(--success-text);
}

.readiness-check--pending {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.readiness-check--pending .readiness-check-label,
.readiness-check--pending .readiness-check-state,
.readiness-check--pending .readiness-check-detail {
    color: var(--warning-text);
}

.template-inline-delete {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
}

.template-editor-actions {
    align-items: center;
    margin-top: 0;
}

.template-editor-actions > form {
    display: flex;
}

@media (max-width: 720px) {
    .template-field--title {
        grid-column: auto;
    }

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

/* ── Marker shared ──────────────────────────────────────────────────────── */

.marker-layout {
    display: grid;
    gap: var(--space-4);
}

.marker-toolbar {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

.marker-toolbar p {
    margin: 0;
}

.marker-table-wrap {
    overflow: auto;
}

.marker-table td small {
    display: block;
}

/* ── Marker dashboard ───────────────────────────────────────────────────── */

.marker-dash-layout {
    display: grid;
    gap: var(--space-4);
}

/* ── Marker attempt ─────────────────────────────────────────────────────── */

.marker-question {
    display: grid;
    gap: var(--space-4);
    /* Use the full semantic tint: mixing it mostly back to the panel made the
       distinction disappear in Modern and Learning. Amber supplies component
       overrides because its success palette is intentionally dark green. */
    background: var(--marker-question-bg, var(--success-bg));
    border-color: var(--marker-question-border, var(--success-border));
}

.marker-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.marker-score-field {
    align-self: start;
    max-width: 13rem;
}

.marker-score-field input[type="number"] {
    width: 8rem;
    max-width: 100%;
    min-height: 2.75rem;
}

/* Keep the prompt and answer content on the white input surface so it remains
   distinct and easy to scan inside the tinted question card. */
.marker-pre {
    white-space: pre-wrap;
    background: var(--bg-input);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0.85rem;
}

/* A frozen rich stem (question_content_json) on the marker screens: the same
   input-surface box as .marker-pre, but flowing as governed content blocks
   (not preformatted text) so authored paragraphs, lists, tables, images and
   equations keep their structure. */
.marker-prompt-content {
    background: var(--bg-input);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0.85rem;
}

.marker-prompt-content > :first-child {
    margin-top: 0;
}

.marker-prompt-content > :last-child {
    margin-bottom: 0;
}

.marker-prompt-content img {
    max-width: 100%;
    height: auto;
}

/* Tells markers where feedback goes (it is candidate-visible
   once results are released), shown under the feedback label on both screens. */
.marker-feedback-audience-note {
    display: block;
    margin: 0.1rem 0 0.35rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Publication-readiness checklist on the question editor Status
   section — mark scheme (hard) and Category (soft) checks shown before publish. */
.question-publish-checklist {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    gap: var(--space-1);
    font-size: var(--font-size-md);
}

.question-publish-checklist > li {
    padding-left: 1.4rem;
    position: relative;
}

.question-publish-checklist > li::before {
    position: absolute;
    left: 0;
    font-weight: 600;
}

.question-publish-checklist > li.check-pass {
    color: var(--success-text);
}

.question-publish-checklist > li.check-pass::before {
    content: "\2713"; /* check mark */
}

.question-publish-checklist > li.check-warn {
    color: var(--warning-text);
}

.question-publish-checklist > li.check-warn::before {
    content: "\26A0"; /* warning sign */
}

.question-publish-checklist > li.check-fail {
    color: var(--error-text);
}

.question-publish-checklist > li.check-fail::before {
    content: "\2715"; /* cross mark */
}

.marker-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.marker-question-workspace {
    display: grid;
    gap: var(--space-4);
}

.marker-question-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.marker-question-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.marker-question-nav {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.marker-question-nav-button {
    min-width: 4.75rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    padding: 0.5rem 0.65rem;
    text-align: left;
    cursor: pointer;
}

.marker-question-nav-button span,
.marker-question-nav-button small {
    display: inline-block;
    vertical-align: baseline;
}

.marker-question-nav-button span {
    font-weight: 700;
    line-height: 1.1;
    margin-right: 0.35rem;
}

.marker-question-nav-button small {
    color: var(--text-muted, var(--text-primary));
    font-size: var(--font-size-xs);
    line-height: 1.1;
}

.marker-question-nav-button.is-active,
.marker-question-nav-button:hover,
.marker-question-nav-button:focus {
    border-color: var(--accent-color, var(--accent-text));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.marker-question-nav-button[data-marker-nav-status="full-marks"] {
    border-color: var(--success-text);
    background: color-mix(in srgb, var(--success-text) 10%, var(--bg-panel-secondary) 90%);
}

.marker-question-nav-button[data-marker-nav-status="below-full-marks"] {
    border-color: var(--warning-text);
    background: color-mix(in srgb, var(--warning-text) 12%, var(--bg-panel-secondary) 88%);
}

.marker-question-nav-button[data-marker-nav-status="full-marks"] small {
    color: var(--success-text);
}

.marker-question-nav-button[data-marker-nav-status="below-full-marks"] small {
    color: var(--warning-text);
}

.marker-question-nav-button.is-active[data-marker-nav-status="marked"] {
    background: color-mix(in srgb, var(--success-text) 16%, var(--bg-panel-secondary) 84%);
}

.marker-question-nav-button.is-active[data-marker-nav-status="unmarked"] {
    background: color-mix(in srgb, var(--warning-text) 18%, var(--bg-panel-secondary) 82%);
}

.marker-feedback {
    min-height: 1.5rem;
    white-space: pre-wrap;
}

.marker-question-feedback {
    color: var(--text-muted, var(--text-secondary));
}

.marker-lock {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Mark by question (cross-candidate marking) ──────────────────────────── */

/* Pin the prompt and mark scheme so the marker keeps the standard in view while
   scrolling the cohort's answers. The offset clears the sticky page header. */
.marker-question-sticky {
    position: sticky;
    top: 1rem;
    z-index: 2;
}

.marker-answer-head {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: baseline;
}

.marker-candidate-name {
    color: var(--text-muted);
    font-size: var(--font-size-md);
}

.marker-answer-status {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-size-md);
}

/* ── Rich content editor ─────────────────────────────────────────────────── */

.rich-editor {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-input);
    min-width: 0;
    transition: border-color var(--duration-base);
}

.rich-editor:focus-within {
    border-color: var(--border-color-emphasis);
    outline: none;
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3rem 0.45rem;
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--bg-panel-secondary);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.rich-editor-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding: 0 0.35rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-secondary-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    line-height: 1;
}

.rich-editor-toolbar-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.rich-editor-toolbar-btn:hover {
    background: var(--btn-secondary-bg);
    border-color: var(--border-color);
}

.rich-editor-toolbar-btn:focus-visible {
    outline: 2px solid var(--border-color-emphasis);
    outline-offset: 1px;
}

.rich-editor-toolbar-btn.is-active {
    background: var(--btn-secondary-bg);
    border-color: var(--border-color-emphasis);
    color: var(--border-color-emphasis);
}

.rich-editor-toolbar-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--border-color);
    margin: 0 0.2rem;
    flex-shrink: 0;
}

.rich-editor-content {
    padding: 0.5rem 0.75rem;
    min-height: 7rem;
    outline: none;
    line-height: 1.6;
    color: var(--text-primary);
    overflow-y: auto;
}

.rich-editor-source {
    display: block;
    width: 100%;
    min-height: 12rem;
    padding: 0.75rem;
    border: 0;
    border-top: var(--border-width) solid var(--border-color);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    resize: vertical;
    white-space: pre;
}

.rich-editor-source[hidden] {
    display: none;
}

.rich-editor-content > p,
.rich-editor-content > h2,
.rich-editor-content > h3,
.rich-editor-content > ul,
.rich-editor-content > ol {
    margin: 0 0 0.5rem;
}

.rich-editor-content > *:last-child {
    margin-bottom: 0;
}

.rich-editor-content > h2 {
    font-size: 1.15rem;
    font-weight: 600;
}

.rich-editor-content > h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.rich-editor-content > ul,
.rich-editor-content > ol {
    padding-left: 1.4rem;
}

.rich-editor-content figure {
    margin: 0.5rem 0;
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.rich-editor-content figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm);
}

.rich-editor-content figcaption {
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
    margin-top: var(--space-1);
}

.rich-editor-image-remove {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-base);
}

.rich-editor-image-remove::before,
.rich-editor-image-remove::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.75rem;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--border-radius-pill);
    transform-origin: center;
}

.rich-editor-image-remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.rich-editor-image-remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.rich-editor-image-resize {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--shadow-color) 20%, transparent);
    color: var(--text-primary);
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity var(--duration-base);
}

.rich-editor-image-resize::before,
.rich-editor-image-resize::after {
    content: "";
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.rich-editor-image-resize::before {
    width: 0.7rem;
    height: 0.7rem;
}

.rich-editor-image-resize::after {
    width: 0.38rem;
    height: 0.38rem;
}

.rich-editor-content figure:hover .rich-editor-image-remove,
.rich-editor-content figure:focus-within .rich-editor-image-remove,
.rich-editor-content figure:hover .rich-editor-image-resize,
.rich-editor-content figure:focus-within .rich-editor-image-resize,
.rich-editor-content figure.is-resizing .rich-editor-image-resize {
    opacity: 1;
}

/* Placeholder text when content area is empty */
.rich-editor-content:empty::before,
.rich-editor-content[data-empty="true"]::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    pointer-events: none;
    opacity: 0.6;
}

/* The delivery-override form carries .edit-form (capped at 40rem); let its
   rich-text editors use the full accordion width on the template/session pages. */
.delivery-content-form {
    max-width: none;
}

/* Option editor in the answer option rows */
.sr-option-row .rich-editor {
    min-width: 0;
}

.sr-option-row .rich-editor-content {
    min-height: 2.5rem;
}

/* Image insertion dialog */
.rich-editor-image-dialog {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rich-editor-image-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--shadow-color) 55%, transparent);
}

.rich-editor-image-dialog__panel {
    position: relative;
    z-index: 1;
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    width: min(480px, calc(100vw - 2rem));
    display: grid;
    gap: var(--space-3);
    box-shadow: var(--elevation-4);
}

.rich-editor-image-dialog__title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.rich-editor-image-tabs {
    display: inline-flex;
    gap: var(--space-1);
    padding: 0.2rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    width: fit-content;
}

.rich-editor-image-tab {
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--btn-secondary-text);
    cursor: pointer;
}

.rich-editor-image-tab.is-active {
    background: var(--bg-panel);
    border-color: var(--border-color-emphasis);
    color: var(--text-primary);
    font-weight: 600;
}

.rich-editor-image-pane {
    display: none;
}

.rich-editor-image-pane.is-active {
    display: block;
}

.rich-editor-image-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--space-3);
    max-height: min(18rem, 42vh);
    overflow: auto;
    padding: 0.2rem;
}

.rich-editor-image-library-card {
    display: grid;
    gap: var(--space-2);
    min-height: 0;
    padding: 0.4rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}

.rich-editor-image-library-card:hover,
.rich-editor-image-library-card.is-selected {
    border-color: var(--border-color-emphasis);
}

.rich-editor-image-library-card.is-selected {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-color-emphasis) 35%, transparent);
}

.rich-editor-image-library-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--bg-panel-secondary);
    border-radius: var(--border-radius-sm);
}

.rich-editor-image-library-card span,
.rich-editor-image-library-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
}

.rich-editor-image-library-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Platform-mode owner attribution on library tiles (mirrors the Owner column). */
.rich-editor-image-library-owner {
    font-size: var(--font-size-xs);
    color: var(--text-muted, var(--text-secondary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rich-editor-image-dialog__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.rich-editor-image-error {
    color: var(--text-error);
    font-size: var(--font-size-md);
    min-height: 1.2rem;
}

/* ── Equation content (shared rendered surfaces) ─────────────────────────
   The governed equation block renders as an inert <span
   class="content-equation"> placeholder (content_renderer.php) hydrated by
   equation-renderer.js. Inline equations flow with the surrounding text;
   display equations are centred on their own line and scroll horizontally
   within their own container so a wide formula never widens the page. KaTeX
   inherits currentColor, so themes and forced-colours mode apply without
   equation-specific colour rules. */

.content-equation {
    color: inherit;
}

.content-equation--inline {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    /* overflow-x:auto makes overflow-y compute to auto as well. KaTeX
       fractions can then provoke a tiny vertical scrollbar whose arrow
       buttons appear beside the formula. Keep a little vertical breathing
       room and suppress that incidental scrollbar. */
    overflow-y: hidden;
    padding-block: 0.3em;
    vertical-align: middle;
}

.content-equation--display {
    display: block;
    margin: 0.75rem 0;
    text-align: center;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.1rem 0;
}

/* Un-hydrated (or failed) equations show the escaped LaTeX source. */
.content-equation-fallback {
    font-family: var(--font-mono);
    font-size: 0.95em;
    word-break: break-word;
}

/* Textual failure note — never colour-only. */
.content-equation-error,
.rich-editor-equation-error {
    color: var(--text-error);
    font-size: var(--font-size-sm);
    font-family: inherit;
}

@media print {
    /* Printing must never clip a wide equation: let it wrap the page flow
       instead of scrolling. */
    .content-equation--inline,
    .content-equation--display {
        overflow-x: visible;
    }
}

/* ── Equation wrappers in the rich editor ──────────────────────────────── */

.rich-editor-equation {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0.15rem 0.35rem;
    border: 1px dashed transparent;
    border-radius: var(--border-radius-sm);
    vertical-align: middle;
}

.rich-editor-equation--display {
    display: block;
    margin: 0.75rem 0;
    text-align: center;
}

.rich-editor-equation:hover,
.rich-editor-equation:focus-within {
    border-color: var(--border-color-emphasis);
    background: var(--bg-panel-secondary);
}

.rich-editor-equation-preview {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
}

.rich-editor-equation-controls {
    display: inline-flex;
    gap: var(--space-1);
    margin-left: var(--space-2);
    vertical-align: middle;
    visibility: hidden;
}

.rich-editor-equation:hover .rich-editor-equation-controls,
.rich-editor-equation:focus-within .rich-editor-equation-controls {
    visibility: visible;
}

.rich-editor-equation-controls button {
    min-height: 1.6rem;
    min-width: 0;
    padding: 0 0.5rem;
    font-size: var(--font-size-sm);
    line-height: 1;
}

/* ── Equation dialog ───────────────────────────────────────────────────── */

.rich-editor-equation-dialog__panel {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.rich-editor-equation-source {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    resize: vertical;
}

.rich-editor-equation-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.rich-editor-equation-shortcut {
    min-height: 1.8rem;
    padding: 0 0.55rem;
    font-size: var(--font-size-sm);
}

.rich-editor-equation-layout {
    display: grid;
    gap: var(--space-1);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 0.75rem;
}

.rich-editor-equation-layout legend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0 0.25rem;
}

.rich-editor-equation-preview-region {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    padding: 0.5rem 0.75rem;
    display: grid;
    gap: var(--space-1);
}

.rich-editor-equation-preview-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted, var(--text-secondary));
}

.rich-editor-equation-preview-output {
    min-height: 2.2rem;
    overflow-x: auto;
    text-align: center;
}

.rich-editor-equation-dialog-error {
    color: var(--text-error);
    font-size: var(--font-size-md);
    min-height: 1.2rem;
}

/* ── Confirmation dialog ────────────────────────────────────────────────── */

.confirm-dialog {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel);
    color: var(--text-primary);
    padding: 0;
    max-width: min(480px, calc(100vw - 2rem));
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: var(--elevation-3);
}

.confirm-dialog-wide {
    max-width: min(720px, calc(100vw - 2rem));
}

.confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.confirm-dialog-inner {
    padding: 1.5rem;
    display: grid;
    gap: var(--space-4);
}

.confirm-dialog-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.confirm-dialog-body {
    display: grid;
    gap: var(--space-2);
}

.confirm-dialog-body p {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.5;
}

.confirm-dialog-item {
    font-weight: 600;
}

.confirm-dialog-reversibility {
    color: var(--text-muted, var(--text-secondary));
    font-size: var(--font-size-sm) !important;
}

/* The from-state → to-state note inside the History disclosure. */
.lifecycle-history-move {
    color: var(--text-muted, var(--text-secondary));
    font-size: var(--font-size-sm);
}

/* Optional mandatory-reason input inside the governed dialog. */
.confirm-dialog-reason {
    display: grid;
    gap: var(--space-1);
}

.confirm-dialog-reason-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.confirm-dialog-reason-input {
    width: 100%;
}

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

button[disabled],
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Admin breadcrumb ───────────────────────────────────────────────────── */

.admin-breadcrumb {
    margin-bottom: var(--space-2);
}

.admin-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
}

.admin-breadcrumb li + li::before {
    content: '/';
    margin-right: 0.25rem;
    color: var(--text-muted, var(--text-secondary));
}

.admin-breadcrumb a {
    color: var(--link-color, var(--text-primary));
    text-decoration: none;
}

.admin-breadcrumb a:hover {
    text-decoration: underline;
}

.admin-breadcrumb [aria-current='page'] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-to-main-content link (WCAG 2.4.1 Bypass Blocks): visually hidden until it
   receives keyboard focus, then revealed as the first focusable element so
   keyboard and screen-reader users can jump past the header/nav to the page body. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    /* --surface is not defined by any theme; it silently fell back to white,
       making near-white text disappear on dark palettes. --bg-panel is defined
       by every theme and inverts correctly with --text-primary. */
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 2px solid var(--accent, currentColor);
    border-radius: 0.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: top var(--duration-base) ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0.5rem;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

/* Required field marker — red asterisk, no extra margin */
.field-required {
    color: var(--text-error);
    margin-left: 0;
    font-weight: 700;
}

/* Contextual field help text */
.field-help {
    display: block;
    font-size: var(--font-size-md);
    color: var(--text-muted, var(--text-secondary));
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

/* Field label + info-tip pattern: inline label text with a hover/focus tooltip
   so help text doesn't add height to grid form cells. */
.field-label-row {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.field-label-row .field-help-tip {
    margin-left: var(--space-1);
}

.field-help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.8 Target Size (Minimum): keep the interactive box >= 24px;
       the icon stays 1rem via .field-help-tip-icon, the rest is hit area. */
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    /* Inherit the surrounding text colour so the glyph stays legible on any
       background — body panels (muted text), coloured table headers
       (--text-on-accent), dark themes, etc. A fixed muted grey disappeared on
       the accent-coloured `table thead th` headers. The 0.75 opacity keeps the
       resting "muted relative to its neighbours" look without pinning a colour
       that fails contrast on non-panel backgrounds. */
    color: currentColor;
    opacity: 0.75;
    cursor: help;
    border-radius: 50%;
    line-height: 1;
}

.field-help-tip:hover,
.field-help-tip:focus-visible {
    /* Full-strength glyph on hover/focus; still inherits the container colour so
       it remains legible regardless of theme or background. The :focus-visible
       outline below keeps --accent (a non-text UI indicator governed by
       1.4.11 at 3:1). */
    background: transparent;
    color: currentColor;
    opacity: 1;
}

.field-help-tip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.field-help-tip-icon {
    width: 1rem;
    height: 1rem;
}

.field-help-tooltip {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: 260px;
    padding: 0.5rem 0.7rem;
    background: var(--text-primary);
    color: var(--bg-panel);
    border-radius: var(--border-radius-sm, 6px);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: var(--elevation-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease;
}

.empty-state-heading {
    font-size: var(--font-size-base);
}

.empty-state-message {
    font-size: var(--font-size-base);
}

.field-label-row:hover .field-help-tooltip,
.field-help-tip:focus-visible .field-help-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .field-help-tooltip {
        transition: none;
    }
}

/* Question editor: positional label between Prev/Next nav buttons */
.question-nav-position {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
    padding: 0 0.5em;
}

/* Icon-only First/Previous/Next/Last controls: 44px minimum touch target (iconography §7.3) */
.question-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

/* Template rule question picker */
.question-picker {
    margin-top: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
}
.question-picker-body {
    margin-top: var(--space-2);
}
.question-picker-search {
    width: 100%;
    margin-bottom: var(--space-2);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: var(--font-size-sm);
}
.question-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 14rem;
    overflow-y: auto;
}
.question-picker-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}
.question-picker-item:last-child { border-bottom: none; }
.question-picker-add {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    font-size: var(--font-size-xs);
}
.question-picker-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.question-picker-code {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.question-picker-text {
    color: var(--text-secondary);
}
.question-picker-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 0.25rem 0;
}
.fixed-question-field {
    display: block;
    margin-bottom: var(--space-3);
}
.fixed-question-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
}
.fixed-question-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}
.fixed-question-item:last-child { border-bottom: none; }
.fixed-question-item .question-picker-label {
    flex: 1 1 auto;
}
.fixed-question-remove {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    font-size: var(--font-size-xs);
}
/* Reorderable fixed-question rows: same drag affordances as the candidate
   ordering widget (grab cursor, dot-grid handle, dimmed row while dragging),
   with compact arrow buttons as the keyboard/single-pointer interaction. */
.fixed-question-item[draggable="true"] {
    cursor: grab;
    transition: opacity var(--duration-fast) ease;
}
.fixed-question-item[draggable="true"]:active {
    cursor: grabbing;
}
.fixed-question-item.is-dragging {
    opacity: 0.42;
}
.fixed-question-drag-handle {
    width: 0.75rem;
    height: 1.25rem;
    flex: 0 0 auto;
    align-self: center;
    background-image: radial-gradient(circle, currentColor 1.25px, transparent 1.5px);
    background-position: 0 0;
    background-size: 0.35rem 0.35rem;
    color: var(--text-secondary);
}
.fixed-question-move-controls {
    display: inline-flex;
    gap: var(--space-1);
    flex-shrink: 0;
}
.fixed-question-move {
    display: inline-grid;
    width: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.1rem;
    place-items: center;
    font-size: var(--font-size-sm);
    line-height: 1;
}
.fixed-question-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 0.25rem 0;
}

/* Random-at-publish (fixed-random) rule controls */
.random-at-publish-field {
    display: grid;
    grid-template-columns: 1rem minmax(0, max-content);
    align-items: center;
    column-gap: var(--space-2);
    width: fit-content;
    margin-bottom: var(--space-2);
}
.random-at-publish-field input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
}
.random-at-publish-field .field-label-row {
    min-width: 0;
}
.random-at-publish-preview {
    margin-bottom: var(--space-3);
}
.random-at-publish-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.random-at-publish-frozen {
    margin-top: var(--space-2);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm, 4px);
    background: var(--bg-panel-secondary);
}
.random-at-publish-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
}
.random-at-publish-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}
.random-at-publish-item:last-child { border-bottom: none; }
.random-at-publish-empty,
.random-at-publish-error {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 0.25rem 0;
}
.random-at-publish-error { color: var(--text-error); }

/* Psychometric metadata on questions */

.psychometrics-section {
    display: grid;
    gap: var(--space-3);
}

.calibration-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
    letter-spacing: 0.02em;
}

.calibration-status-uncalibrated {
    background: var(--bg-status-closed);
    border-color: var(--border-status-closed);
    color: var(--text-status-closed);
}

.calibration-status-provisional {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.calibration-status-calibrated {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.calibration-status-stale {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

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

.psychometrics-table thead th,
.psychometrics-table tbody th,
.psychometrics-table tbody td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.exposure-progress {
    margin-top: var(--space-1);
    width: 100%;
    height: 0.5rem;
    border-radius: var(--border-radius-sm);
    background: var(--bg-status-closed);
    overflow: hidden;
}

.exposure-progress-bar {
    display: block;
    height: 100%;
    background: var(--border-status-ready);
}

.psychometrics-cap-form,
.psychometrics-approve-form {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.psychometrics-cap-form label {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* The optional licence attribution line ("powered by / © Owner"), shown
   to a licensee on content licensed to them. Display only — it carries no other
   licence field and never reaches the candidate's frozen script. A muted, italic
   credit so it reads as attribution, not a heading or a call to action. */
.content-attribution {
    font-style: italic;
    color: var(--text-secondary);
}

.psychometrics-cap-form input[type="number"] {
    width: 9rem;
}

/* Performance feedback loop */

.performance-metrics-row {
    display: grid;
    gap: var(--space-1);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.performance-metrics-row h3 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.review-flags-block {
    display: grid;
    gap: var(--space-2);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.review-flags-block h3 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.review-flags-list,
.review-flag-descriptions {
    margin: 0;
    padding-left: 1.2rem;
}

.review-flags-list li {
    margin-bottom: var(--space-1);
}

.review-flag-descriptions {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.review-flag-severity-info,
.review-flag-severity-warning,
.review-flag-severity-critical {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.review-flag-severity-info {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
}

.review-flag-severity-warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.review-flag-severity-critical {
    background: var(--bg-error);
    border-color: var(--border-error);
    color: var(--text-error);
}

/* Calibration lifecycle */
.psychometrics-dashboard {
    display: grid;
    gap: var(--space-5);
}

.psychometrics-panel {
    display: block;
}

.calibration-status-summary {
    width: auto;
}

.calibration-status-summary-row td {
    padding: 0.25rem 0.75rem;
}

.retirement-recommendations-table {
    width: 100%;
}

.review-flag-action-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: end;
    margin: 0.25rem 0;
}

.review-flag-action-form label {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
    gap: var(--space-1);
}

.retirement-reason-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--border-radius-pill);
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.retirement-reason-persistent_low_discrimination {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.retirement-reason-exposure_cap_reached {
    background: var(--bg-error);
    border-color: var(--border-error);
    color: var(--text-error);
}

.retirement-reason-persistent_distractor_imbalance {
    background: var(--bg-status-info);
    border-color: var(--border-status-info);
    color: var(--text-status-info);
}

.retirement-reason-manual_request {
    background: var(--bg-status-sky);
    border-color: var(--border-status-sky);
    color: var(--text-status-sky);
}

.threshold-config-table {
    width: auto;
}

.threshold-config-table td {
    vertical-align: middle;
}

.threshold-config-form {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}

.threshold-config-form input[type="number"] {
    width: 7rem;
}

/* Standard-setting */
.standard-setting-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
}

.standard-setting-method-select {
    min-width: 12rem;
}

.standard-setting-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0.5rem 0;
}

.standard-setting-panellists-table th,
.standard-setting-panellists-table td {
    padding: 0.25rem 0.5rem;
    vertical-align: top;
}


.standard-setting-method-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
    border: 1px solid var(--border-color);
}

.standard-setting-method-angoff {
    background-color: var(--bg-status-ready);
    color: var(--text-status-ready);
    border-color: var(--text-status-ready);
}

.standard-setting-method-modified_angoff {
    background-color: var(--bg-status-info);
    color: var(--text-status-info);
    border-color: var(--text-status-info);
}

.standard-setting-method-bookmark {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-text);
}

.standard-setting-method-percentage_threshold {
    background-color: var(--bg-status-archived);
    color: var(--text-secondary);
    border-color: var(--text-secondary);
}

.standard-setting-method-other {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-text);
}

.standard-setting-frozen-banner {
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-panel-secondary);
    border-left: 3px solid var(--warning-text);
    font-style: italic;
    margin: 0.5rem 0;
}

/* Core analysis modules */
.analysis-runs-panel pre {
    max-height: 18rem;
    overflow: auto;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-panel-secondary);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

.analysis-runs-panel details summary {
    cursor: pointer;
    font-weight: 600;
}

.analysis-runs-panel code {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Printable reporting */
.printable-view {
    background: #ffffff;
}

.print-only {
    display: none;
}

.reports-nav {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4) 1.15rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--bg-panel-secondary) 22%);
    box-shadow: var(--elevation-2);
}

.reports-nav p {
    margin: 0;
}

.reports-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.reports-print-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.8rem;
}

.reports-print-action-icon {
    flex: 0 0 auto;
}

.reports-nav-links .button {
    min-height: 2.8rem;
}

.session-report-export-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: var(--space-4);
}

.session-report-export-grid > .card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
}

.session-report-export-grid > .card > p {
    margin-top: 0;
}

.session-report-export-grid > .card > .actions {
    margin-top: auto;
}

.session-report-print-export {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

@media (min-width: 900px) {
    .reports-nav {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        align-items: center;
    }

}

.analysis-reports-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.analysis-reports-shell {
    display: grid;
    gap: var(--space-4);
}

.analysis-reports-nav {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--accent-subtle) 12%);
    box-shadow: var(--elevation-2);
}

.analysis-reports-nav ul {
    margin-top: var(--space-2);
}

.analysis-reports-nav a,
.analysis-reports-nav .button {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.analysis-reports-nav a:hover,
.analysis-reports-nav .button:hover,
.analysis-reports-nav a:focus-visible {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.analysis-reports-nav a.is-active,
.analysis-reports-nav .button.is-active {
    font-weight: 600;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel) 84%);
    color: var(--text-primary);
    text-decoration: none;
}

.analysis-report-render {
    display: grid;
    gap: var(--space-4);
}

.analysis-report-table-wrap {
    margin-top: var(--space-1);
}

.analysis-report-render .workspace-section-label + .analysis-report-table-wrap,
.analysis-report-render .admin-helper + .analysis-report-table-wrap {
    margin-top: 0;
}

.analysis-report-render .candidate-table td,
.analysis-report-render .candidate-table th {
    vertical-align: middle;
}

.analysis-report-render .candidate-table td:last-child,
.analysis-report-render .candidate-table th:last-child {
    white-space: nowrap;
}

.analysis-report-render .report-stats-grid {
    margin-top: var(--space-1);
}

.coverage-flag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--bg-panel-secondary);
    font-size: var(--font-size-sm);
}

.coverage-flag-insufficient_n {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.coverage-flag-no_variance {
    background: var(--bg-error);
    color: var(--text-error);
}

.distractor-flag-pill {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--bg-panel-secondary);
    font-size: var(--font-size-sm);
}

.distractor-flag-pill-weak {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.distractor-flag-pill-misleading {
    background: var(--bg-error);
    color: var(--text-error);
}

.discrimination-row-negative td {
    background: var(--bg-error);
}

.discrimination-row-low td {
    background: var(--warning-bg);
}

.discrimination-row-acceptable td {
    background: var(--success-bg);
}

@media print {
    /* Analytics printouts omit proprietary question stems unless the operator
       explicitly enables them before printing. Question numbers and
       reference/version identifiers remain visible for traceability. */
    .print-question-text-hidden .analysis-question-text,
    .print-question-text-hidden .question-performance-text {
        display: none !important;
    }

    /* Once the stem is hidden, the Question cell only contains its short
       number/reference. Reclaim that space for the analytical measures and
       override the responsive table minimum that would otherwise overflow a
       portrait print page. */
    .print-question-text-hidden .question-performance-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .print-question-text-hidden .question-performance-table th,
    .print-question-text-hidden .question-performance-table td {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .print-question-text-hidden .question-performance-table th:nth-child(1) { width: 9%; }
    .print-question-text-hidden .question-performance-table th:nth-child(2) { width: 11%; }
    .print-question-text-hidden .question-performance-table th:nth-child(3) { width: 11%; }
    .print-question-text-hidden .question-performance-table th:nth-child(4) { width: 14%; }
    .print-question-text-hidden .question-performance-table th:nth-child(5) { width: 14%; }
    .print-question-text-hidden .question-performance-table th:nth-child(6) { width: 22%; }
    .print-question-text-hidden .question-performance-table th:nth-child(7) { width: 19%; }

    .no-print,
    nav,
    .admin-toolbar button,
    .filter-form button {
        display: none !important;
    }

    .print-only {
        display: block;
    }

    .printable-view {
        padding: 0;
        margin: 0;
    }

    .panel, .candidate-shell-card {
        box-shadow: none;
        background: transparent;
    }

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

/* Specialist-page audience lead. */
.page-audience-lead {
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--accent);
    background: var(--bg-panel-secondary);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Audit-events row layout. The primary scan unit is
   timestamp + summary + actor; the entity and request-id detail moves
   behind a per-row Technical details accordion in the trailing column. */
.audit-events-table .audit-col-when {
    width: 14rem;
    white-space: nowrap;
}

.audit-events-table .audit-col-summary .audit-event-summary {
    display: block;
}

.audit-events-table .audit-col-summary .audit-event-type {
    display: block;
    color: var(--text-secondary);
}

.audit-events-table .audit-col-actor .audit-actor-name {
    display: block;
}

.audit-events-table .audit-col-actor .audit-actor-role {
    display: block;
    color: var(--text-secondary);
}

.audit-events-table .audit-col-details {
    width: 18rem;
}

.audit-event-technical {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-2);
}

.audit-event-technical dt {
    font-weight: 600;
    color: var(--text-secondary);
}

.audit-event-technical dd {
    margin: 0;
}

.audit-request-id {
    word-break: break-all;
}

/* Shared metadata-grid primitive. A two-column <dl> used inside
   Technical details accordions (marker queue, audit events) for compact
   key/value pairs. */
.metadata-grid {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-2);
}

.metadata-grid dt {
    font-weight: 600;
    color: var(--text-secondary);
}

.metadata-grid dd {
    margin: 0;
}

.metadata-grid-helper {
    color: var(--text-secondary);
}

/* Marker queue four-column row layout. The primary scan unit is
   Script + Status + Waiting; raw script ids and the marking-status code move
   behind a per-row Technical details accordion in the trailing column. */
.marker-queue-table .marker-col-waiting {
    white-space: nowrap;
    width: 9rem;
}

.marker-queue-table .marker-col-details {
    width: 18rem;
}

.marker-queue-table .marker-col-action {
    width: 8rem;
    white-space: nowrap;
}

.marker-queue-candidate,
.marker-queue-assessment,
.marker-queue-status,
.marker-queue-progress {
    display: block;
}

.marker-queue-assessment,
.marker-queue-progress {
    color: var(--text-secondary);
}

/* Marker dashboard headline. One scannable sentence with three
   clauses; each clause links to the corresponding view of the marker queue. */
.marker-dashboard-headline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-2);
    align-items: baseline;
    margin: 0.4rem 0 0 0;
}

.marker-headline-clause {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--text-primary);
}

.marker-headline-clause strong {
    font-size: 1.4rem;
    line-height: 1;
}

.marker-headline-clause:hover,
.marker-headline-clause:focus {
    text-decoration: underline;
}

.marker-headline-clause--static {
    cursor: default;
}

.marker-headline-clause--static:hover,
.marker-headline-clause--static:focus {
    text-decoration: none;
}

.marker-headline-separator {
    color: var(--text-secondary);
}

/* Home-page tile typography. Each tile is an eyebrow + title
   (from renderCardHeader) + one-line description + a single action button.
   Preserves the existing card / launcher-card / launcher-form interactions. */
.home-tile {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.home-tile--candidate {
    background: var(--bg-table-header);
    border-color: var(--border-color-emphasis);
    box-shadow:
        0 26px 54px color-mix(in srgb, var(--shadow-color) 24%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--text-on-accent) 20%, transparent);
    color: var(--candidate-home-text, var(--text-on-accent));
}

.home-tile--candidate .card-header,
.home-tile--candidate .card-header h2,
.home-tile--candidate .card-header h3,
.home-tile--candidate .card-header h4,
.home-tile--candidate label,
.home-tile--candidate .home-tile-description {
    color: var(--candidate-home-text, var(--text-on-accent));
}

.home-tile--candidate .card-header-icon,
.home-tile--candidate .home-tile-eyebrow {
    color: var(--candidate-home-icon-text, color-mix(in srgb, var(--text-on-accent) 78%, var(--accent-subtle) 22%));
}

.home-tile--candidate .launcher-form-note,
.home-tile--candidate .launcher-form-note small {
    color: var(--candidate-home-helper-text, color-mix(in srgb, var(--text-on-accent) 72%, var(--accent-subtle) 28%));
}

.home-tile--candidate .launcher-form-note a {
    color: inherit;
}

.home-tile--candidate input[type="text"] {
    border-color: color-mix(in srgb, var(--text-on-accent) 18%, var(--border-color) 82%);
    background: color-mix(in srgb, var(--bg-table-header) 82%, var(--bg-page) 18%);
    color: var(--candidate-home-input-text, var(--text-on-accent));
}

.home-tile--candidate input[type="text"]::placeholder {
    color: var(--candidate-home-placeholder-text, color-mix(in srgb, var(--text-on-accent) 62%, var(--accent-subtle) 38%));
}

.home-tile--candidate .button.secondary,
.home-tile--candidate button.secondary {
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--bg-panel) 78%, var(--border-color-emphasis) 22%);
}

.home-tile--candidate .button.secondary:hover,
.home-tile--candidate .button.secondary:focus,
.home-tile--candidate button.secondary:hover,
.home-tile--candidate button.secondary:focus {
    background: var(--accent-subtle);
    border-color: var(--border-color-emphasis);
}

.home-tile .card-header {
    margin-bottom: 0;
}

.home-tile-eyebrow {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.home-tile-description {
    margin: 0;
    color: var(--text-primary);
}

/* Invigilator dashboard operational row layout. Mirrors the
   marker queue treatment. Candidate name + status
   chip + relative-time last-activity is the primary scan; raw script ids and
   heartbeat fingerprints move behind a per-row Technical details accordion. */
.invigilator-dashboard-table .invigilator-col-candidate {
    width: 14rem;
}

.invigilator-dashboard-table .invigilator-col-status {
    width: 16rem;
}

.invigilator-dashboard-table .invigilator-col-mark {
    width: 9rem;
    white-space: nowrap;
}

.invigilator-dashboard-table .invigilator-col-activity {
    width: 10rem;
    white-space: nowrap;
}

.invigilator-dashboard-table .invigilator-col-details {
    width: 18rem;
}

.invigilator-dashboard-table .invigilator-col-action {
    width: 9rem;
    white-space: nowrap;
}

.invigilator-dashboard-table .invigilator-candidate-row--completed > td {
    background: color-mix(in srgb, var(--success-bg) 82%, var(--bg-panel-secondary));
    border-color: color-mix(in srgb, var(--success-border) 62%, var(--border-color));
}

/* Session clock (room clock + elapsed-time cues). The elapsed readout uses
   tabular numerals so the per-second tick never jitters horizontally; the
   due-cue alerts reuse the governed warning notice tones so theme,
   forced-colours, and print treatments follow the shared notice styling. */
.session-clock-elapsed {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
}

.session-clock-elapsed-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.session-clock-elapsed-caption {
    color: var(--text-secondary);
}

.session-clock-sidebar-card .session-clock-elapsed {
    margin-bottom: 0;
}

.session-clock-details {
    margin: 0;
}

.session-clock-cue-list {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.session-clock-cue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-panel-secondary);
}

.session-clock-cue[data-cue-state="due"] {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

.session-clock-cue-state {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.session-clock-cue-actions {
    display: inline-flex;
    gap: 0.5rem;
    margin-left: auto;
}

.session-clock-due-alert {
    display: block;
}

.session-clock-due-heading {
    margin: 0;
    font-size: 1.15rem;
}

.session-clock-due-message {
    margin: 0.25rem 0 0.6rem;
    font-size: 1.05rem;
}

.session-clock-sound {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.session-clock-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.invigilator-attempt-status,
.invigilator-progress {
    display: block;
    color: var(--text-secondary);
}

.invigilator-help-row {
    display: block;
    margin-top: var(--space-1);
}

.invigilator-help-pill {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    max-width: 16rem;
    padding: 0.16rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--highlight-attention) 58%, var(--border-color));
    border-radius: 7px;
    background: color-mix(in srgb, var(--highlight-attention) 46%, var(--bg-panel));
    color: var(--highlight-attention-text);
    font-size: var(--font-size-sm);
    line-height: 1.25;
    white-space: normal;
    box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--highlight-attention) 16%, transparent);
}

.invigilator-help-pill-icon {
    flex: 0 0 auto;
    margin-top: var(--space-1);
}

.invigilator-question-indicator {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-left: 0.35rem;
    padding: 0.08rem 0.45rem;
    border-radius: var(--border-radius-pill);
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
    color: var(--accent-hover);
    transition: background-color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) ease;
}

.invigilator-question-indicator strong {
    font-weight: 800;
}

.invigilator-question-indicator.is-updating {
    animation: invigilator-question-change 1.8s ease-out;
}

@keyframes invigilator-question-change {
    0% {
        transform: scale(1);
        background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent);
    }

    16% {
        transform: scale(1.08);
        background: color-mix(in srgb, var(--highlight-attention) 46%, var(--bg-panel));
        box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--highlight-attention) 18%, transparent);
    }

    100% {
        transform: scale(1);
        background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
        box-shadow: 0 0 0 0 transparent;
    }
}

.invigilator-anomalies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.invigilator-activity-primary {
    display: block;
    font-weight: 600;
}

/* Question durations report */
.question-durations-card {
    display: grid;
    gap: var(--space-3);
}

.question-durations-card h2,
.question-durations-card .admin-helper,
.question-durations-card .admin-note {
    margin: 0;
}

.question-durations-card h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.question-durations-card .admin-helper,
.question-durations-card .admin-note {
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.question-durations-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.question-durations-form label {
    display: grid;
    gap: var(--space-1);
    flex: 1 1 18rem;
    max-width: 34rem;
    font-weight: 700;
    font-size: var(--font-size-md);
}

.question-durations-form .actions {
    margin-top: 0;
}

.question-durations-form .button {
    min-height: 2.6rem;
}

@media (max-width: 720px) {
    .question-durations-form {
        display: grid;
    }

    .question-durations-form label {
        max-width: none;
    }

    .question-durations-form .button {
        width: 100%;
    }
}


/* ---------------------------------------------------------------------------
   Candidate welcome & completion pages (governed rich content).
   Pre-start welcome gate and post-submission completion page rendered from the
   immutable per-script delivery snapshot via the governed content renderer.
   --------------------------------------------------------------------------- */
.candidate-welcome,
.candidate-completion {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.candidate-welcome-actions,
.candidate-completion-onward {
    margin-top: var(--space-2);
}

.candidate-welcome-content :first-child,
.candidate-completion-content :first-child {
    margin-top: 0;
}

.candidate-completion-availability {
    font-weight: 600;
}

/* The finished attempt's released score. Populated client-side from the
   server-gated attempt.score_summary and hidden while the results release
   policy withholds scores. Meaning is carried by the words (score, Pass/Fail);
   colour on the outcome only reinforces it. */
.candidate-completion-score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.candidate-completion-score .workspace-section-label {
    margin: 0;
}

.candidate-completion-score strong {
    font-size: 1.5rem;
}

.candidate-completion-score-outcome {
    font-weight: 600;
}

.candidate-completion-score-outcome--pass {
    color: var(--success-text);
}

.candidate-completion-score-outcome--fail {
    color: var(--text-error);
}

/* F-15: the welcome/completion phase heading naming the delivered assessment.
   Spacing comes from the parent flex gap; the heading only resets its own
   margins so the label sits tight above it. */
.candidate-phase-assessment .workspace-section-label {
    margin: 0 0 0.25rem;
}

.candidate-phase-assessment h2 {
    margin: 0;
    font-size: 1.35rem;
}

.rich-content h2 {
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
}

.rich-content h3 {
    font-size: 1.1rem;
    margin: 0.75rem 0 0.5rem;
}

.rich-content p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.rich-content ul,
.rich-content ol {
    margin: 0 0 0.75rem 1.25rem;
    line-height: 1.6;
}

.rich-content a {
    color: var(--accent);
    text-decoration: underline;
}

.rich-content figure {
    margin: 0 0 0.75rem;
}

.rich-content img {
    max-width: 100%;
    height: auto;
}

.rich-content figcaption {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
}

.candidate-completion-onward .button,
.candidate-completion-result-cta .button {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--accent);
    color: var(--text-on-accent);
    text-decoration: none;
    font-weight: 600;
}

@media print {
    .candidate-welcome-actions,
    .candidate-actions,
    .candidate-status-card {
        display: none !important;
    }

    .candidate-welcome,
    .candidate-completion {
        break-inside: avoid;
    }
}

/* ── Session command centre ─────────────────────────────────────────────────
   The session detail page's "what to do next" surface: one prioritised next
   action and the full journey as a stable strip. All
   states are named in text so the surface reads without colour; colour is a
   reinforcement only. */

.session-next-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.9rem 1rem;
    border: var(--border-width) solid var(--border-status-ready);
    border-radius: var(--border-radius-md);
    background: var(--bg-status-ready);
    color: var(--text-status-ready);
}

.session-next-action-label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.session-next-action-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* All of a session's action buttons share one row: the primary next action on
   the left, the secondary lifecycle controls grouped and slightly separated to
   its right. */
.session-next-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.session-next-action-secondary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: var(--border-width) solid var(--border-status-ready);
}

.session-next-action-reason,
.session-next-action-help {
    margin: 0;
    font-size: var(--font-size-md);
}

.session-next-action-help {
    line-height: 1.6;
}

/* Workflow strip: a compact, wrapping row of ordered steps. */
.session-workflow-strip {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.session-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.session-step-state {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.session-step--done {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.session-step--done .session-step-state {
    color: inherit;
}

.session-step--current {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
    font-weight: 700;
}

.session-step--current .session-step-state {
    color: inherit;
}

.session-step--blocked {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.session-step--blocked .session-step-state {
    color: inherit;
}

/* The "To do" state keeps the neutral panel of the base
   chip but mutes the label, so not-yet steps read quieter than the
   highlighted current/done/blocked states. */
.session-step--upcoming {
    color: var(--text-muted);
}

/* Readiness checklist: a stacked list keyed by the same step states. */
.session-readiness {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.session-check {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.session-check .session-check-icon {
    align-self: center;
}

.session-check-label {
    color: var(--text-primary);
}

.session-check-state {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.session-check-reason {
    flex-basis: 100%;
    color: var(--text-muted);
}

.session-check--met {
    border-color: var(--success-border);
}

.session-check--met .session-check-label {
    color: var(--success-text);
}

.session-check--current {
    border-color: var(--border-status-ready);
}

/* The "Not yet" state keeps the neutral border and mutes
   the label — the quiet sibling of --met (success border) and --current
   (ready border). */
.session-check--pending .session-check-label {
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .session-workflow-strip {
        flex-direction: column;
        align-items: stretch;
    }

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

/* ── Candidate setup panel ───────────────────────────────────────────────────
   The three plain candidate-setup routes on the session command centre. Reuses
   the shared design tokens; no inline styles, no uppercase text-transform. */

.session-setup-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.session-setup-choice {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.session-join-access-summary {
    margin-top: var(--space-2);
}

.session-join-access-controls .admin-detail-grid {
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}

.session-join-access-controls .edit-form {
    gap: var(--space-2);
    margin-top: 0;
    max-width: 100%;
}

.session-join-access-controls .edit-form-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.session-join-access-controls .edit-form-row > * {
    min-width: 0;
}

.session-join-access-controls input {
    max-width: 100%;
}

.session-join-access-controls .actions {
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.session-join-access-controls .actions button {
    flex: 0 0 auto;
}

.session-join-access-controls .actions > span {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.session-setup-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
}

.session-setup-manage {
    margin-top: var(--space-3);
}

@media (max-width: 720px) {
    .session-setup-choices {
        grid-template-columns: 1fr;
    }
}

/* ── Operations action queue ─────────────────────────────────────────────────
   The operations dashboard's primary content: "what needs attention now",
   grouped by step. Each row names its session, its reason, and one direct
   action. Reuses the shared design tokens; no inline styles, no uppercase
   text-transform. */

.action-queue {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.action-queue-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.action-queue-group-label {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.action-queue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: var(--border-radius-pill);
    background: var(--bg-panel-secondary);
    border: var(--border-width) solid var(--border-color);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.action-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.action-queue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.75rem 0.9rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.action-queue-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.action-queue-name {
    font-weight: 600;
}

.action-queue-meta {
    color: var(--text-muted);
}

.action-queue-reason {
    margin: 0.1rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.action-queue-cta {
    flex: 0 0 auto;
}

.action-queue-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .action-queue-row {
        flex-direction: column;
        align-items: stretch;
    }

    .action-queue-cta {
        align-self: flex-start;
    }
}

/* Printable session question paper (admin/session_paper.php).
   Screen shows the sheet inside the normal admin shell; print strips the
   shell chrome (the masthead is inside main, so the page-scoped rule below
   reaches it) and keeps only the paper itself. */
.paper-sheet {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
}

.session-paper-view .no-print + .paper-sheet {
    margin-top: var(--space-6);
}

.paper-title {
    margin: 0;
}

.paper-subtitle {
    margin: 0.2rem 0 0;
    color: var(--text-secondary);
}

.paper-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-3) 0 0;
}

.paper-meta div {
    display: flex;
    gap: var(--space-2);
}

.paper-meta dt {
    font-weight: 600;
}

.paper-meta dd {
    margin: 0;
}

.paper-candidate-fields {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
}

.paper-candidate-field {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.paper-candidate-field-label {
    flex: 0 0 auto;
    font-weight: 600;
}

.paper-candidate-field-line {
    flex: 1 1 auto;
    min-height: 1.6rem;
    border-bottom: 1px solid var(--border-color);
}

.paper-section {
    margin-top: var(--space-5);
}

.paper-section-title {
    padding-bottom: var(--space-1);
    border-bottom: 2px solid var(--text-primary);
}

.paper-section-marks {
    font-weight: 400;
    color: var(--text-secondary);
}

.paper-section-instructions {
    margin-top: var(--space-2);
    color: var(--text-secondary);
}

.paper-question {
    margin-top: var(--space-4);
}

.paper-question-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

.paper-question-marks {
    color: var(--text-secondary);
    white-space: nowrap;
}

.paper-question-instructions {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

.paper-response-guidance {
    margin: var(--space-2) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.paper-options,
.paper-matching-options {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.paper-option,
.paper-matching-option {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.paper-mark-box,
.paper-write-box {
    flex: 0 0 auto;
    align-self: center;
    border: 1.5px solid var(--text-primary);
    border-radius: 2px;
}

.paper-mark-box {
    width: 1.1rem;
    height: 1.1rem;
}

.paper-write-box {
    width: 1.8rem;
    height: 1.5rem;
}

.paper-option-letter {
    flex: 0 0 auto;
    min-width: 1.4rem;
    font-weight: 600;
}

.paper-option-body {
    flex: 1 1 auto;
}

.paper-option-body p {
    margin: 0;
}

.paper-ordering-items,
.paper-matching-prompts {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.paper-ordering-item,
.paper-matching-prompt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.paper-written-answer {
    margin-top: var(--space-2);
}

.paper-answer-line {
    min-height: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.paper-answer-line--numeric {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    max-width: 20rem;
    margin-top: var(--space-2);
}

.paper-answer-line-label {
    font-weight: 600;
}

.paper-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.print-organisation-branding {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.print-organisation-logo { max-width: 9rem; max-height: 3rem; object-fit: contain; }
/* Display size above the body scale (the token scale stops at --font-size-base);
   --font-size-lg does not exist, so a var() here silently fell back to inherit. */
.print-organisation-name { font-size: 1.2rem; font-weight: 700; }
.print-branding-hidden [data-print-branding] { display: none !important; }

.paper-footer p {
    margin: 0;
}

.paper-footer .paper-produced-by {
    margin-top: var(--space-1);
}

.paper-signature {
    font-family: var(--font-mono, monospace);
    overflow-wrap: anywhere;
}

@media (min-width: 700px) {
    .paper-candidate-fields {
        grid-template-columns: 2fr 1.5fr 1fr;
    }
}

@media print {
    .session-paper-view .page-masthead,
    .session-paper-view .page-context-nav {
        display: none !important;
    }

    .session-paper-view {
        padding: 0;
        margin: 0;
    }

    .paper-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: #ffffff;
        color: #000000;
    }

    .paper-question {
        break-inside: avoid;
    }

    .paper-section-title,
    .paper-section-instructions {
        break-after: avoid;
    }

    /* Writing guides print grey so they recede behind handwriting; the
       mark/write-in boxes stay black — they are answer targets, not guides. */
    .paper-candidate-field-line,
    .paper-answer-line {
        border-bottom-color: #767676;
    }

    .paper-mark-box,
    .paper-write-box {
        border-color: #000000;
    }
}