* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    color-scheme: var(--page-color-scheme, light);
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Outfit", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size-adjust: 0.52;
    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 (Phase 88): 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.app-shell {
    width: min(1320px, calc(100% - 1.5rem));
    padding-top: 0.85rem;
}

.page-masthead {
    margin-bottom: 1rem;
    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: 0 18px 40px color-mix(in srgb, var(--shadow-color) 12%, transparent);
}

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

.page-masthead-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    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;
    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: 0 12px 28px color-mix(in srgb, var(--shadow-color) 14%, transparent);
}

.site-brand-logo {
    display: block;
    width: min(220px, 40vw);
    max-width: min(220px, 100%);
    height: auto;
}

.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: 0.5rem;
    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: 0.82rem;
    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: "Outfit", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

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;
}

small {
    color: var(--text-muted);
}

code {
    font-family: "Consolas", "Courier New", monospace;
    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: 0.9rem;
    margin-top: 1rem;
}

label,
.label-wrap {
    display: grid;
    gap: 0.3rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

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

.admin-form-grid {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.75rem;
}

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: 1rem;
    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: 0.85rem;
    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: 0.75rem;
}

.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: 0.6rem;
    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: 1rem;
    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: 1rem;
    margin-top: 1.5rem;
}

.card {
    padding: 1.35rem;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-color) 15%, transparent);
}

.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: 0.5rem;
}

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

.launcher-card {
    display: grid;
    align-content: start;
    gap: 0.8rem;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    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: 0.9rem;
    margin-top: 0.5rem;
}

.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: 1rem;
}

.eyebrow {
    margin-bottom: 0.75rem;
}

.actions,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.stack {
    display: grid;
    gap: 1rem;
}

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

.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: 0.5rem;
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.app-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--shadow-color) 18%, transparent);
    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;
    }
}

@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: 0.6rem;
    margin-top: 0.4rem;
    padding: 1rem 1.25rem;
}

.operational-warning .app-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.operational-warning-compact {
    display: inline-flex;
    margin-top: 0.4rem;
    padding: 0.5rem 0.9rem;
    gap: 0.45rem;
    align-items: center;
}

.operational-warning-compact .app-icon {
    margin-top: 0;
}

.meta {
    display: grid;
    gap: 0.65rem;
}

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

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

.inline-code-list li {
    margin-bottom: 0.35rem;
}

.instance-groups {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.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,
.instance-meta-row,
.instance-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.instance-group-heading {
    margin-bottom: 0.75rem;
}

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

.instance-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
}

.instance-list-item {
    padding: 0.6rem 0;
    border-top: 1px solid var(--border-color);
}

.instance-list-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.instance-list-item:last-child {
    padding-bottom: 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: 0.78rem;
    font-weight: 700;
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
}

.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: 0.72rem;
    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: 0.72rem;
    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: 0.72rem;
    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: 0.6rem;
}

.manage-consent-grant-form label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
}

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

/* Phase 52: sponsor governance */

.sponsor-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    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,
.sponsor-consent-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,
.sponsor-consent-table th,
.sponsor-consent-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: 0.6rem;
}

.sponsor-grant-form label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    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: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sponsor-data-scope legend {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 0.25rem;
}

.sponsor-grant-form .sponsor-data-scope label,
.sponsor-data-scope > label {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
    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.6rem;
    padding: 0.7rem 0.8rem;
    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;
}

.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: 0.5rem;
}

.user-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    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: 0.75rem;
    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: 0.1rem;
}

.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: 0 18px 40px color-mix(in srgb, var(--shadow-color) 14%, transparent);
    min-height: calc(100vh - 7rem);
}

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

.workspace-sidebar {
    display: grid;
    align-content: start;
    gap: 1rem;
    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,
.workspace-sidebar .text-muted {
    color: var(--sidebar-muted, var(--text-secondary));
}

.workspace-sidebar-card {
    display: grid;
    gap: 0.5rem;
    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;
}

.workspace-sidebar-header {
    display: grid;
    gap: 0.4rem;
}

.workspace-sidebar-number {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
}

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

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

.workspace-summary {
    display: grid;
    gap: 0.75rem;
}

.workspace-summary-card {
    display: grid;
    gap: 0.2rem;
    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: 0.75rem;
    color: var(--text-secondary);
}

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

.candidate-status-card {
    display: grid;
    gap: 0.85rem;
    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: 0.9rem 1.4rem;
}

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

.candidate-progress-block {
    display: grid;
    gap: 0.45rem;
}

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

/* 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: 0.5rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

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

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

.question-stage {
    display: grid;
    align-content: start;
    gap: 1.1rem;
    min-height: 420px;
}

.question-stage-header {
    display: grid;
    gap: 0.65rem;
}

.question-stage-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.98rem;
}

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

.question-stage-body {
    font-size: 1rem;
}

.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: 1rem;
}

.question-hint--revealed {
    margin-top: 0.5rem;
    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: 0.5rem;
}

/* "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: 0.5rem;
}

.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;
}

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

.question-stage-ref {
    font-size: 0.78rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.candidate-choice-list {
    gap: 0.75rem;
}

/* Phase 71: 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 {
    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: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

.candidate-confidence-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
    font-size: 0.85rem;
}

.candidate-confidence-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.candidate-confidence-option input[type="radio"] {
    margin: 0;
}

.choice-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    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 0.18s ease, background-color 0.18s ease, box-shadow 0.18s 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: 0.15rem;
    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: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.candidate-actions-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.candidate-nav-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

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

.candidate-help-form {
    display: grid;
    gap: 0.65rem;
}

.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: 1.2rem;
}

.candidate-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

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

.candidate-result-outcome {
    display: grid;
    gap: 0.25rem;
    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: 0.75rem;
    margin: 0;
}

.candidate-result-grid div {
    display: grid;
    gap: 0.2rem;
    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: 0.78rem;
    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: 1rem;
}

.dashboard-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

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

.dashboard-summary-stat-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

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

.dashboard-table thead th,
.dashboard-table tbody td {
    font-size: 0.95rem;
}

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

.dashboard-table td small {
    margin-top: 0.2rem;
}

.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: 0.78rem;
    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,
    .instance-meta-row,
    .instance-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

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

.table-wrap {
    overflow-x: auto;
    margin-top: 1rem;
}

.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);
}

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 (Phase 88): 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;
}

/* 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);
}

.summary-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.summary-grid p,
.question-panel p {
    margin: 0;
}

.question-panel {
    display: grid;
    gap: 1rem;
}

.choice-list {
    display: grid;
    gap: 0.6rem;
}

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

.choice-item input {
    width: auto;
    margin-top: 0.15rem;
}

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

.question-panel > p:last-of-type {
    margin-top: 0.75rem;
}

.question-panel .question-text,
.question-panel > p:first-of-type:last-of-type,
.question-panel > p:nth-of-type(1) {
    color: var(--text-primary);
}

.page-nav {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    gap: 0.75rem;
    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: 0 8px 22px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

.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: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.page-nav button.secondary {
    min-height: 2.5rem;
    padding-inline: 1rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 8%, transparent);
}

.page-context-nav {
    display: flex;
    gap: 0.75rem;
    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: 0 8px 22px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

.page-context-nav .button.secondary {
    min-height: 2.5rem;
    padding-inline: 1rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 8%, transparent);
}

.page-help-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

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

.page-help-dialog .modal-dialog-body {
    display: grid;
    gap: 1rem;
    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: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
    font-size: 0.92rem;
}

.site-footer p {
    margin: 0;
}

.site-footer-group {
    display: grid;
    gap: 0.2rem;
    margin-right: auto;
}

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

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

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

.help-doc-meta {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
    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: 0.65rem;
    margin-bottom: 0.35rem;
}

.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: 0.74rem;
    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: 0.9rem;
}

.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: 0.3rem;
}

.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: "Consolas", "Courier New", monospace;
    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: 0.6rem;
    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%);
}

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

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stack-actions {
    display: grid;
    gap: 0.5rem;
}

.panel-link-row {
    margin-top: 0.75rem;
}

.content-meta {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.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: 0.72rem;
    line-height: 1.1;
}

.template-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    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: 0.72rem;
    line-height: 1.1;
}

.session-type-status-stack {
    display: grid;
    gap: 0.55rem;
    justify-items: start;
}

.input-order {
    width: 6rem;
}

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

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

.stat-note {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    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%;
    }

    .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-logo {
        width: min(152px, 38vw);
        max-width: min(152px, 100%);
    }

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

    .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: 1rem;
}

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

.login-note {
    margin: 0;
    color: var(--text-secondary);
}

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

[hidden] {
    display: none;
}

.admin-layout {
    display: grid;
    gap: 1rem;
}

.admin-toolbar {
    display: flex;
    gap: 0.75rem;
    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: 1.5rem;
}

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

.admin-feedback-inline {
    min-height: 0;
    margin-top: 0.75rem;
}

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

.preview-result {
    white-space: normal;
    display: grid;
    gap: 1rem;
}

.preview-summary-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.preview-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1.25rem;
    margin: 0;
    font-size: 0.875rem;
}

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

.preview-dl dd {
    margin: 0;
}

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

.preview-notice {
    margin: 0;
}

.preview-section-instructions {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    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: 0.8rem;
    text-align: right;
    padding-top: 0.15rem;
}

.preview-question-body {
    display: grid;
    gap: 0.25rem;
}

.preview-question-prompt {
    font-size: 0.875rem;
    line-height: 1.4;
}

.preview-question-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.preview-question-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.preview-q-type {
    font-size: 0.7rem;
    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: 0.75rem;
    color: var(--text-muted);
}

.admin-note {
    margin: 0;
}

.admin-meta {
    display: grid;
    gap: 0.25rem;
}

.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-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-actions form {
    margin: 0;
}

.admin-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-stack {
    display: grid;
    gap: 1rem;
}

.admin-form-row {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.admin-role-checkbox-grid {
    display: grid;
    gap: 0.6rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 0.75rem;
}

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

.checkbox-label {
    display: flex;
    gap: 0.6rem;
    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"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

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

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

.dash-layout {
    display: grid;
    gap: 1rem;
}

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

.dash-stat {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
}

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

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

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

.dash-toolbar p {
    margin: 0;
}

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

.dash-link-group {
    display: grid;
    align-content: start;
    gap: 0.5rem;
}

.dash-link-group > span {
    color: var(--text-muted, var(--text-primary));
    font-size: 0.72rem;
    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-table td,
.dash-table th {
    vertical-align: top;
}

.audit-table td {
    font-size: 0.85rem;
}

.audit-event-type {
    font-family: monospace;
    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: 0.4rem;
}

.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: 1rem;
    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: 0.15rem;
    min-width: 0;
}

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

.section-drawer-subtitle {
    margin: 0;
    font-size: 0.8rem;
    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 (UI Phase 24) ──────────────────────────── */

.section-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-drawer-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.section-drawer-nav-group-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding-bottom: 0.4rem;
    border-bottom: var(--border-width, 1px) solid var(--border-color);
    font-size: 0.92rem;
    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: 0.35rem;
}

.section-drawer-nav-subgroup + .section-drawer-nav-subgroup {
    margin-top: 0.35rem;
}

.section-drawer-nav-subgroup-heading {
    margin: 0;
    font-size: 0.7rem;
    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: 0.35rem;
}

.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: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background 0.15s ease, border-color 0.15s 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: 0.5rem;
    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: 0.75rem;
    max-width: 40rem;
}

.create-form-row {
    display: grid;
    gap: 0.5rem;
    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: 1rem;
    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: 1rem;
}

.cohort-link-row {
    display: grid;
    align-items: end;
    gap: 0.75rem;
    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: 0.75rem;
    max-width: 40rem;
}

.edit-form-row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
}

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

.admin-import-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.admin-import-grid textarea {
    min-height: 180px;
}

.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: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 0.9rem;
}

.import-form {
    gap: 0.85rem;
}

.import-form textarea {
    min-height: 9rem;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.92rem;
    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-form .actions {
    margin-top: 0.25rem;
}

.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: 0.45rem;
}

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

.import-copy-button {
    min-height: 2.2rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.88rem;
}

.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;
    gap: 0.5rem;
    flex-wrap: wrap;
}

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

/* Phase 85: shared layout helpers for the edition-administration surfaces. */
.admin-inline-form {
    margin-top: 1rem;
}

.admin-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.admin-checkbox-row input {
    margin-top: 0.2rem;
}

/* Phase 86: 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: 1rem;
}

/* Phase 87: 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: 0.35rem;
}

.feature-inclusion-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

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

/* Phase 89: 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, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    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;
}

/* 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: 0.4rem;
}

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

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

.candidate-identity {
    display: grid;
    gap: 0.2rem;
}

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

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

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

.candidate-access-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: stretch;
}

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

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

.candidate-status-stack,
.candidate-script-status,
.candidate-registration-status,
.candidate-script-score {
    display: grid;
    gap: 0.45rem;
}

/* 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: 0.7rem;
    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: 0.1rem;
}

.candidate-inline-actions {
    margin-top: 0.15rem;
}

/* Merged lifecycle column: Started / Submitted / Finalised stacked as
   label + relative-time pairs. */
.candidate-lifecycle {
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

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

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

.candidate-actions-grid {
    display: grid;
    gap: 0.6rem;
}

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

.candidate-access-code {
    font-family: monospace;
    word-break: break-all;
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

.candidate-import-panel {
    display: grid;
    gap: 0.85rem;
}

.candidate-import-actions {
    display: flex;
    justify-content: flex-start;
}

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

@media (min-width: 960px) {
    .admin-import-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

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

.audit-layout {
    display: grid;
    gap: 1rem;
}

.audit-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.audit-filters label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.875rem;
}

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

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

.audit-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.audit-pagination {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

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

.health-layout {
    display: grid;
    gap: 1rem;
}

.health-group {
    display: grid;
    gap: 0.5rem;
}

.health-row {
    display: flex;
    gap: 1rem;
    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: 0.75rem;
    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: 1rem;
}

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

.stat-card {
    display: grid;
    gap: 0.25rem;
    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: 0.8rem;
    color: var(--text-muted);
}

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

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

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

.inventory-layout {
    display: grid;
    gap: 1rem;
}

.inventory-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.inventory-toolbar p {
    margin: 0;
}

.inventory-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.inventory-actions form {
    margin: 0;
}

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

.inventory-filters {
    display: grid;
    gap: 0.75rem;
    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: 0.5rem;
    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: 0.25rem;
}

.inventory-id-heading,
.inventory-id-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.inventory-reference-cell {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
}

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

.inventory-reference-stack {
    display: grid;
    gap: 0.12rem;
    min-width: 7.5rem;
}

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

.inventory-state {
    display: grid;
    gap: 0.3rem;
    min-width: 10rem;
}

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

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

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

.content-layout {
    display: grid;
    gap: 1rem;
}

.content-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.content-toolbar p {
    margin: 0;
}

.content-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.content-actions form {
    margin: 0;
}

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

.question-bank-description {
    color: var(--text-primary);
    font-size: 1rem;
    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);
}

.bank-image-field,
.bank-image-current {
    display: grid;
    gap: 0.5rem;
}

.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: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.question-bank-select-preview[hidden] {
    display: none;
}

.import-bank-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* 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: 0.85rem;
}

.question-bank-inline {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.question-bank-inline .question-bank-thumb {
    flex: 0 0 auto;
}

.bank-form {
    display: grid;
    gap: 0.75rem;
}

.bank-form-grid {
    display: grid;
    gap: 0.5rem;
    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: 0.55rem;
    margin-top: 0.35rem;
    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: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
}

.pool-detail-main {
    min-width: 0;
}

.pool-meta-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.pool-meta-list div {
    display: grid;
    gap: 0.15rem;
}

.pool-meta-list dt {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
}

.pool-meta-list dd {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
}

.pool-summary-list {
    gap: 0.5rem;
    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: 0.5rem;
    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: 0.55rem;
    justify-items: start;
}

.reference-term-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}

.bank-question-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
}

.bank-question-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bank-question-info small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.bank-question-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.bank-question-actions form {
    margin: 0;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.bank-question-actions .input-order {
    width: 4rem;
}

.filter-form {
    display: flex;
    gap: 0.5rem;
    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: 0.75rem;
    align-items: end;
}

.analysis-run-fields label {
    min-width: 0;
}

.analysis-run-fields input:not([type="checkbox"]) {
    width: 100%;
}

.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: 1rem;
}

.session-warning-flag {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    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: 1rem;
}

.cohort-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
}

.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: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 1rem;
}

.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: 0.85rem 1rem;
    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: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.bank-question-filter label {
    min-width: 12rem;
}

/* ── Admin question editor ──────────────────────────────────────────────── */

.question-layout {
    display: grid;
    gap: 1rem;
}

.question-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.question-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.question-form {
    display: grid;
    gap: 0.75rem;
}

.question-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.question-secondary-fields > summary::before,
.question-note-accordion summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.18s ease;
}

.question-secondary-fields[open] > summary::before,
.question-note-accordion[open] summary::before {
    transform: rotate(-135deg);
}

/*
 * UI_Phase 12: 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: 0.5rem;
}

.topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    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;
}

/* Phase 48b — Topic allocation weighting controls */
.topic-tag-weight {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    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: 0.85rem;
    /* 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: 0.85rem;
}

.topic-allocation-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.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: 0.9rem;
}

.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: 1.25rem;
}

.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: 0.75rem;
}

.candidate-topic-breakdown .topic-unmapped-note {
    margin-top: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.is-muted {
    opacity: 0.72;
}

.question-secondary-fields {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md, 7px);
    background: var(--bg-panel-secondary);
}

.question-secondary-fields > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.question-secondary-fields > summary::-webkit-details-marker {
    display: none;
}

.question-secondary-fields .workspace-section-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.question-secondary-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.question-save-actions {
    padding-top: 0.25rem;
    scroll-margin-top: 1rem;
}

.question-version-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    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-secondary-fields label,
.question-note-accordion summary {
    color: var(--text-secondary);
}

.question-note-accordion {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md, 7px);
    background: var(--bg-panel);
}

.question-note-accordion + .question-note-accordion {
    margin-top: 0.35rem;
}

.question-note-accordion summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    font-weight: 700;
}

.question-note-accordion[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.question-note-fields {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
}

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

.sr-options-list {
    display: grid;
    gap: 0.5rem;
}

.sr-option-row {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
}

.sr-option-label {
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
}

.sr-option-row input[name="option_text[]"] {
    min-width: 0;
}

.sr-correct-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    cursor: pointer;
}

.sr-correct-label input {
    margin: 0;
}

.sr-remove-option {
    min-width: 0;
}

.sr-option-actions {
    margin-top: 0.75rem;
}

.sr-numeric-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 820px) {
    .sr-option-row {
        grid-template-columns: 1.35rem minmax(0, 1fr) 1.75rem 2.25rem;
        gap: 0.45rem;
    }

    .sr-option-label {
        font-size: 0.95rem;
    }

    .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: 0.45rem;
    }

    .question-version-option {
        flex-basis: 100%;
        white-space: normal;
    }
}

/* ── Marking-guidance rubric (banded mark scheme) ───────────────────────── */

.marking-guidance-rows {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.marking-guidance-row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    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: 0.75rem;
}

/* 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: 0.45rem;
    }

    .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: 1rem;
}

.template-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.template-toolbar p {
    margin: 0;
}

.template-form {
    display: grid;
    gap: 0.75rem;
}

.template-filters {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    flex-wrap: wrap;
}

.template-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.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: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.template-grid--section {
    grid-template-columns: minmax(220px, 1fr) minmax(90px, 0.25fr) minmax(110px, 0.25fr);
}

.template-check {
    align-content: end;
}

.template-check input {
    width: auto;
    justify-self: start;
}

.template-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.template-actions form {
    margin: 0;
}

.template-card {
    display: grid;
    gap: 0.85rem;
}

.template-section-list,
.template-rules {
    display: grid;
    gap: 0.75rem;
}

.template-meta {
    display: grid;
    gap: 0.2rem;
}

.template-section {
    display: grid;
    gap: 0.6rem;
    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: 0.65rem;
    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: 0.875rem;
    color: var(--text-secondary);
}

.template-rule-summary {
    display: flex;
    gap: 0.75rem;
    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-add-rule {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.template-feedback {
    min-height: 1.5rem;
}

.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: 0.25rem;
}

.template-empty strong {
    color: var(--text-primary);
}

.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;
}

button.danger,
.button.danger {
    color: var(--text-error);
    border-color: var(--border-error);
}

button.danger:hover,
.button.danger:hover {
    background: var(--bg-error);
    color: var(--text-error);
}

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

/* ── Marker shared ──────────────────────────────────────────────────────── */

.marker-layout {
    display: grid;
    gap: 1rem;
}

.marker-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    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: 1rem;
}

.marker-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.marker-stat {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
}

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

.marker-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-primary));
}

/* ── Marker attempt ─────────────────────────────────────────────────────── */

.marker-question {
    display: grid;
    gap: 1rem;
}

.marker-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Content blocks (prompt, candidate answer, mark scheme) borrow the sidebar-card
   palette so they read with the same strong contrast the invigilator left panel
   has — a solid, saturated surface rather than a near-white tint that vanishes
   against the panel and page. The sidebar-card tokens are themed for every theme,
   so this lifts contrast consistently across palettes. */
.marker-pre {
    white-space: pre-wrap;
    background: var(--sidebar-card-bg, var(--bg-panel-secondary));
    color: var(--sidebar-card-text, var(--text-primary));
    border: var(--border-width) solid var(--sidebar-card-border, var(--border-color));
    border-radius: var(--border-radius-md);
    padding: 0.85rem;
}

.marker-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.marker-question-workspace {
    display: grid;
    gap: 1rem;
}

.marker-question-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.marker-question-stepper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.marker-question-nav {
    display: flex;
    gap: 0.5rem;
    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: 0.72rem;
    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="marked"] {
    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="unmarked"] {
    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="marked"] small {
    color: var(--success-text);
}

.marker-question-nav-button[data-marker-nav-status="unmarked"] 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: 0.75rem;
    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: 0.75rem;
    flex-wrap: wrap;
    align-items: baseline;
}

.marker-candidate-name {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.marker-answer-status {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── 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 0.15s;
}

.rich-editor:focus-within {
    border-color: var(--border-color-emphasis);
    outline: none;
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    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: 0.25rem;
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding: 0 0.35rem;
    font-size: 0.82rem;
    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: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    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: 1rem;
    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: 0.85rem;
    color: var(--text-muted, var(--text-secondary));
    margin-top: 0.25rem;
}

.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 0.15s;
}

.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: 999px;
    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 0.15s;
}

.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: 0.85rem;
    box-shadow: 0 24px 48px color-mix(in srgb, var(--shadow-color) 28%, transparent);
}

.rich-editor-image-dialog__title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.rich-editor-image-tabs {
    display: inline-flex;
    gap: 0.25rem;
    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: 0.65rem;
    max-height: min(18rem, 42vh);
    overflow: auto;
    padding: 0.2rem;
}

.rich-editor-image-library-card {
    display: grid;
    gap: 0.4rem;
    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: 0.85rem;
    color: var(--text-muted, var(--text-secondary));
}

.rich-editor-image-library-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rich-editor-image-dialog__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.rich-editor-image-error {
    color: var(--text-error);
    font-size: 0.9rem;
    min-height: 1.2rem;
}

/* ── Confirmation dialog (UI_Phase 4) ───────────────────────────────────── */

.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: 0 8px 32px color-mix(in srgb, var(--shadow-color) 18%, transparent);
}

.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: 1rem;
}

.confirm-dialog-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.confirm-dialog-body {
    display: grid;
    gap: 0.4rem;
}

.confirm-dialog-body p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.confirm-dialog-item {
    font-weight: 600;
}

.confirm-dialog-reversibility {
    color: var(--text-muted, var(--text-secondary));
    font-size: 0.85rem !important;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

button[disabled],
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Admin breadcrumb (UI_Phase 5) ──────────────────────────────────────── */

.admin-breadcrumb {
    margin-bottom: 0.5rem;
}

.admin-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    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 0.15s 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.1em;
    font-weight: 700;
}

/* Contextual field help text */
.field-help {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted, var(--text-secondary));
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
}

/* 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.35rem;
}

.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;
    color: var(--text-muted, var(--text-secondary));
    cursor: help;
    border-radius: 50%;
    line-height: 1;
}

.field-help-tip:hover,
.field-help-tip:focus-visible {
    /* WCAG 1.4.3 (Phase 88): hover/focus glyph colour uses the AA-compliant
       accent-text variant. The :focus-visible outline below keeps --accent
       (a non-text UI indicator governed by 1.4.11 at 3:1). */
    background: transparent;
    color: var(--accent-text, var(--accent));
}

.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: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-color) 22%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.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: 0.85rem;
    color: var(--text-muted, var(--text-secondary));
    padding: 0 0.5em;
}

/* Template rule question picker */
.question-picker {
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
}
.question-picker-toggle {
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-secondary);
}
.question-picker-body {
    margin-top: 0.5rem;
}
.question-picker-search {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.85rem;
}
.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: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
}
.question-picker-item:last-child { border-bottom: none; }
.question-picker-add {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
}
.question-picker-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.question-picker-code {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.question-picker-text {
    color: var(--text-secondary);
}
.question-picker-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
}
.fixed-question-field {
    display: block;
    margin-bottom: 0.75rem;
}
.fixed-question-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
}
.fixed-question-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
}
.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: 0.75rem;
}
.fixed-question-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
}

/* Phase 102: 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: 0.5rem;
    width: fit-content;
    margin-bottom: 0.5rem;
}
.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: 0.75rem;
}
.random-at-publish-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.random-at-publish-frozen {
    margin-top: 0.5rem;
    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: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
}
.random-at-publish-item:last-child { border-bottom: none; }
.random-at-publish-empty,
.random-at-publish-error {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
}
.random-at-publish-error { color: var(--text-error); }

/* Phase 54: psychometric metadata on questions */

.psychometrics-section {
    display: grid;
    gap: 0.75rem;
}

.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: 0.78rem;
    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: 0.3rem;
    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: 0.6rem;
    flex-wrap: wrap;
}

.psychometrics-cap-form label {
    font-size: 0.82rem;
    font-weight: 600;
}

/* Phase 95: 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;
}

/* Phase 55: performance feedback loop */

.performance-metrics-row {
    display: grid;
    gap: 0.3rem;
    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: 0.9rem;
    font-weight: 600;
}

.review-flags-block {
    display: grid;
    gap: 0.4rem;
    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: 0.9rem;
    font-weight: 600;
}

.review-flags-list,
.review-flag-descriptions {
    margin: 0;
    padding-left: 1.2rem;
}

.review-flags-list li {
    margin-bottom: 0.3rem;
}

.review-flag-descriptions {
    font-size: 0.82rem;
    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: 0.78rem;
    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);
}

/* Phase 56: calibration lifecycle */
.psychometrics-dashboard {
    display: grid;
    gap: 1.5rem;
}

.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: 0.5rem;
    align-items: end;
    margin: 0.25rem 0;
}

.review-flag-action-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    gap: 0.15rem;
}

.retirement-reason-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    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: 0.5rem;
    align-items: center;
}

.threshold-config-form input[type="number"] {
    width: 7rem;
}

/* Phase 57: standard-setting */
.standard-setting-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    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: 0.5rem;
    margin: 0.5rem 0;
}

.standard-setting-panellists-table th,
.standard-setting-panellists-table td {
    padding: 0.25rem 0.5rem;
    vertical-align: top;
}

.standard-setting-judgements-matrix {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.standard-setting-judgements-matrix th,
.standard-setting-judgements-matrix td {
    padding: 0.25rem;
    text-align: center;
    border: 1px solid var(--border-color);
}

.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;
}

/* Phase 59: 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: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.analysis-runs-panel details summary {
    cursor: pointer;
    font-weight: 600;
}

.analysis-runs-panel code {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Phase 60: printable reporting */
.printable-view {
    background: #ffffff;
}

.print-only {
    display: none;
}

.reports-phase60-nav {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: color-mix(in srgb, var(--bg-panel) 78%, #ffffff 22%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

.reports-phase60-nav p {
    margin: 0;
}

.reports-phase60-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.reports-phase60-nav-links .button {
    min-height: 2.8rem;
}

@media (min-width: 900px) {
    .reports-phase60-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: 0.5rem;
}

.analysis-reports-shell {
    display: grid;
    gap: 1rem;
}

.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: 0 12px 26px color-mix(in srgb, var(--shadow-color) 10%, transparent);
}

.analysis-reports-nav ul {
    margin-top: 0.6rem;
}

.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: 999px;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.analysis-reports-nav a:hover,
.analysis-reports-nav .button:hover,
.analysis-reports-nav a:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent);
}

.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: 1rem;
}

.analysis-report-table-wrap {
    margin-top: 0.25rem;
}

.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: 0.25rem;
}

.coverage-flag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--bg-panel-secondary);
    font-size: 0.85rem;
}

.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: 0.85rem;
}

.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 {
    .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: "";
    }
}

/* UI_Phase 12: 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: 0.9rem;
    color: var(--text-secondary);
}

/* UI_Phase 13: 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: 0.15rem 0.5rem;
}

.audit-event-technical dt {
    font-weight: 600;
    color: var(--text-secondary);
}

.audit-event-technical dd {
    margin: 0;
}

.audit-request-id {
    word-break: break-all;
}

/* UI_Phase 14: 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: 0.15rem 0.5rem;
}

.metadata-grid dt {
    font-weight: 600;
    color: var(--text-secondary);
}

.metadata-grid dd {
    margin: 0;
}

.metadata-grid-helper {
    color: var(--text-secondary);
}

/* Tooltip helper mode (renderMetadataGrid helperMode => 'tooltip'): the gloss
   lives in the label's title attribute instead of an inline caption, so the
   value column stays clean. A dotted underline + help cursor signals it. */
.metadata-grid-hint {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

/* UI_Phase 14: 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);
}

/* UI_Phase 14: 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: 0.4rem 0.6rem;
    align-items: baseline;
    margin: 0.4rem 0 0 0;
}

.marker-headline-clause {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    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);
}

/* UI_Phase 14: 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: 0.55rem;
}

.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: color-mix(in srgb, var(--bg-panel) 84%, var(--accent-subtle) 16%);
}

.home-tile .card-header {
    margin-bottom: 0;
}

.home-tile-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.home-tile-description {
    margin: 0;
    color: var(--text-primary);
}

/* UI_Phase 15: invigilator dashboard four-column row layout. Mirrors the
   marker queue treatment introduced in UI_Phase 14. 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-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-attempt-status,
.invigilator-progress {
    display: block;
    color: var(--text-secondary);
}

.invigilator-help-row {
    display: block;
    margin-top: 0.35rem;
}

.invigilator-help-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    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: 0.82rem;
    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: 0.05rem;
}

.invigilator-question-indicator {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-left: 0.35rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
    color: var(--accent-hover);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms 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: 0.3rem;
    margin-top: 0.25rem;
}

.invigilator-activity-primary {
    display: block;
    font-weight: 600;
}

/* Question durations report */
.question-durations-main {
    gap: 1rem;
}

.question-durations-card {
    display: grid;
    gap: 0.85rem;
}

.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: 0.98rem;
    line-height: 1.5;
}

.question-durations-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.question-durations-form label {
    display: grid;
    gap: 0.35rem;
    flex: 1 1 18rem;
    max-width: 34rem;
    font-weight: 700;
    font-size: 0.92rem;
}

.question-durations-form .actions {
    margin-top: 0;
}

.question-durations-form .button {
    min-height: 2.6rem;
}

/*
 * UI_Phase 20: the advanced lookup is now the governed accordion primitive
 * (renderAccordionSection with extraClass "question-durations-advanced"), so the
 * summary chrome and disclosure behaviour come from .accordion-section-*; the
 * bespoke `> summary` rules that styled the old <details> were removed. The
 * accordion body supplies its own padding, so no summary-to-form margin is
 * needed. The form's own .question-durations-form margin-top is suppressed
 * inside the accordion body to avoid a double gap.
 */
.question-durations-advanced .accordion-section-body .question-durations-form {
    margin-top: 0;
}

@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: 1.25rem;
}

.candidate-welcome-actions,
.candidate-completion-onward {
    margin-top: 0.5rem;
}

.candidate-welcome-content :first-child,
.candidate-completion-content :first-child {
    margin-top: 0;
}

.candidate-completion-availability {
    font-weight: 600;
}

.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: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted, var(--text-secondary));
}

.candidate-completion-onward .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 (Phase 96) ──────────────────────────────────────
   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: 0.5rem;
    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: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.session-next-action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.session-next-action-reason {
    margin: 0;
    font-size: 0.92rem;
}

/* 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: 0.5rem;
}

.session-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    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: 0.85rem;
}

.session-step-state {
    font-size: 0.72rem;
    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;
}

/* 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: 0.4rem;
}

.session-check {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    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: 0.72rem;
    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);
}

@media (max-width: 720px) {
    .session-workflow-strip {
        flex-direction: column;
        align-items: stretch;
    }

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

/* ── Candidate setup panel (Phase 98) ────────────────────────────────────────
   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: 1rem;
    margin-top: 0.5rem;
}

.session-setup-choice {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.session-setup-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.session-setup-manage {
    margin-top: 0.75rem;
}

@media (max-width: 720px) {
    .session-setup-choices {
        grid-template-columns: 1fr;
    }
}

/* ── Operations action queue (Phase 97) ──────────────────────────────────────
   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: 1.25rem;
}

.action-queue-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-queue-group-label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.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: 999px;
    background: var(--bg-panel-secondary);
    border: var(--border-width) solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 700;
}

.action-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-queue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    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: 0.15rem;
    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: 0.85rem;
    color: var(--text-secondary);
}

.action-queue-cta {
    flex: 0 0 auto;
}

.action-queue-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .action-queue-row {
        flex-direction: column;
        align-items: stretch;
    }

    .action-queue-cta {
        align-self: flex-start;
    }
}