/*
 * Staff-surface styles: loaded by every NON-candidate audience (admin,
 * marker, invigilator, sponsor, platform and signed-out shells) after
 * site.css. Candidate-audience pages — candidate delivery and its
 * entry/consent/result surfaces, the public survey respondent page, and the
 * staff question preview that deliberately renders candidate chrome — do
 * not load this file, so a rule here must never be needed by markup a
 * candidate-audience surface can render. CandidateShellAssetGatingTest
 * enforces that census and that no selector appears in both files; when a
 * candidate surface adopts a class styled here, the rule moves back to
 * site.css. Ambiguity always defaults to site.css.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Shown above English content a reader asked for in another language: quiet,
   informational, and never mistaken for the page's own copy. */
.help-doc-translation-notice {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--bg-panel-secondary) 80%, var(--bg-panel) 20%);
    color: var(--text-muted);
}

.help-doc-library-link {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.help-doc-library-link .help-search-form {
    flex: 1 1 18rem;
    margin: 0;
}

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

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

.help-contents {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--border-color);
}

.help-contents-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-secondary);
}

.help-contents ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-contents a {
    font-size: var(--font-size-sm);
}

.help-library-section + .help-library-section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border-color);
}

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

@media (min-width: 48rem) {
    .help-page-reference-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.help-guides-link--disabled {
    cursor: default;
    border-color: var(--border-status-archived);
    background: var(--bg-status-archived);
    color: var(--text-status-archived);
}

.help-guides-link--disabled .help-feature-badge {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}

.help-edition-summary {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-left: 0.25rem solid var(--accent);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.help-edition-context {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Help search: the shared filter-form rules do the layout; these only size
   the single field and space the form from what follows it. */
.help-search-form {
    margin: 0 0 var(--space-4);
}

.help-search-form label {
    flex: 1 1 16rem;
}

.help-search-form input[type="search"] {
    width: 100%;
}

.help-search-count {
    margin-bottom: var(--space-3);
}

.help-search-result {
    display: grid;
    gap: var(--space-1);
}

.help-search-result-meta,
.help-search-snippet {
    margin: 0;
    color: var(--text-secondary);
}

.help-search-result-meta {
    font-size: var(--font-size-sm);
}

.help-search-snippet {
    font-size: var(--font-size-md);
}

/* The attention pair is a fixed yellow/brown in every theme, so the mark
   keeps its contrast on the dark themes without per-theme overrides. */
.help-search-snippet mark {
    padding: 0 0.15em;
    border-radius: var(--border-radius-sm);
    background: var(--highlight-attention);
    color: var(--highlight-attention-text);
}

.help-feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.help-feature-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

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

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

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

/* Keyboard focus keeps the governed ring; the shared background shift alone is
   indistinguishable from hover. */
.help-guides-item a.help-guides-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.admin-toolbar p {
    margin: 0;
}

/* Raw constraint JSON shown in the adaptive session monitor's disclosure:
   wrap rather than letting one long line set the table's min-content width. */
.adaptive-constraints-json {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

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

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

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

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

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

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

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

.preview-dl dd {
    margin: 0;
}

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

.preview-notice {
    margin: 0;
}

.admin-note {
    margin: 0;
}

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

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

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

/* Keyboard focus keeps the governed ring; an underline shared with hover does
   not indicate focus. */
.admin-meta-title-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.admin-meta small {
    display: block;
}

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

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

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

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

/* Keyboard focus keeps the governed ring. Recolouring the border alone is not a
   focus indicator — it is indistinguishable from the hover state. */
.session-tool-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

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

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

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

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

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

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

/*
 * A choice that carries a description under its name, so a ticklist can say
 * what each option means without a second column. The base rule centres a
 * single line against its box; a two-line choice has to align to the top
 * instead, and the box grows rather than holding the one-line minimum.
 */
.checkbox-label--stacked {
    align-items: flex-start;
    min-height: 0;
}

.checkbox-label--stacked input[type="checkbox"],
.checkbox-label--stacked input[type="radio"] {
    margin-top: 0.15rem;
}

.checkbox-choice-text {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.checkbox-choice-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.checkbox-choice-description {
    color: var(--text-secondary);
}

/*
 * The client choice form — one All / Selected radio pair followed by a
 * disclosed client checkbox list — shared by the assessment Client
 * availability panel and the candidate context field Client applicability
 * panel. Reset the browser fieldset chrome and arrange each choice as a
 * normal card-sized target; otherwise the generic full-width input rule
 * stretches its radios away from their labels. The list fieldset carries
 * data-client-choice-list and reads as a shaded sub-panel.
 */
.client-choice-form {
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.client-choice-form > .admin-feedback:empty {
    display: none;
}

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

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

.client-choice-form > fieldset[data-client-choice-list] > .admin-helper {
    grid-column: 1 / -1;
}

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

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

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

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

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

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

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

/* ── Workspace overview ─────────────────────────────────────────────────── */

/* One secondary panel per entity: the linked name, the total as a stat, then
   the non-zero states as label / count pairs read down the panel. */
.overview-entity-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: var(--space-3);
}

.overview-entity {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: 1rem 1.25rem;
}

.overview-entity-title {
    margin: 0;
    font-size: var(--font-size-base);
}

.overview-entity-total {
    margin: 0;
    display: grid;
    gap: var(--space-1);
    color: var(--text-secondary);
}

.overview-entity-count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.overview-entity-statuses {
    margin: 0;
    display: grid;
    gap: var(--space-1);
}

.overview-entity-status {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.overview-entity-status dt {
    color: var(--text-secondary);
}

.overview-entity-status dd {
    margin: 0;
    font-weight: 600;
}

/* The per-domain, per-bank question count table beneath the Content panels:
   domain rows carry the subtotal and read as group headings; bank rows are
   indented beneath them; counts right-align so a column reads down. */
.overview-bank-breakdown {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.overview-bank-table-count {
    text-align: right;
}

/* The domain rows are body rows, so they keep the body text colour. Their
   band therefore uses the secondary panel tint (the same pairing as the
   entity panels above), never the header background, which is a dark
   surface that pairs only with the header's on-accent text. */
.overview-bank-table-domain th,
.overview-bank-table-domain td {
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    font-weight: 700;
}

.overview-bank-table-bank {
    padding-left: var(--space-5);
}

/* The grand total: bold, ruled off from the last domain, body colours. */
.overview-bank-table-total th,
.overview-bank-table-total td {
    border-top: 2px solid var(--border-color-emphasis);
    color: var(--text-primary);
    font-weight: 700;
}

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

.dash-toolbar p {
    margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.section-drawer-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 2.5rem;
    padding-inline: 0.65rem;
}

.page-nav .section-drawer-trigger {
    padding-inline: 0.65rem;
}

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

.section-drawer.is-open .section-drawer-backdrop {
    opacity: 1;
    animation: section-drawer-backdrop-in 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    /* Promoted only while open: a resting hint would hold a compositor layer
       on every page that renders the drawer closed. */
    will-change: opacity;
}

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

.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);
    will-change: transform;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

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

    to {
        transform: translateX(0);
    }
}

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

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

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

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

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

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

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

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

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

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

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

/* Client, cohort, session type and attempts allowed are concise selection
   fields. On the deliberately wide create-session form, cap them at half the
   form width; min(100%, ...) leaves them full width on a narrow viewport. */
.create-session-form .create-session-select-field {
    width: min(100%, 36rem);
}

/* Let the four short selection fields actually use the available horizontal
   space. Other form content (assessment, name/code, dates, accordions and
   actions) remains full-row, while each field keeps its own help text. */
@media (min-width: 720px) {
    .create-session-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .create-session-form > :not(.create-session-select-field) {
        grid-column: 1 / -1;
    }

    .create-session-form .create-session-select-field {
        width: 100%;
        /* Session type and attempts have longer help text than client/cohort.
           Do not stretch the shorter label's internal grid to its row mate,
           which can make its native select appear taller. */
        align-self: start;
    }
}

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

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

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

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

/* Paired field labels are themselves grids. Keep their rows top-aligned so a
   longer helper on one side does not stretch and push the other input down. */
.create-form-row > label {
    align-content: start;
}

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

/* Session code plus its status chips. A flex row rather than a run of inline
   text: .status-chip is an inline-flex box with its own vertical padding, so on
   a single prose line-height its box overlaps the code beside it. Wraps on
   narrow viewports instead of pushing the chips off the panel. */
.session-identity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
}

.session-identity-code {
    color: var(--text-secondary);
}

/* Live operational counts for one session. These four numbers are what a
   delivery user scans mid-session, so they are stated once with real weight
   above the flat configuration grid rather than competing inside it. */
.session-live-counts {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin: 0 0 var(--space-4);
}

.session-live-count {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.session-live-count dt {
    order: 2;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-secondary);
}

.session-live-count dd {
    order: 1;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

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

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

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

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

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

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

.cohort-link-row--action-only {
    grid-template-columns: max-content;
}

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

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

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

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

/* The session course-document override benefits from the full accordion
   width: uploaded filenames can be long, while the adjacent actions retain
   their natural width. */
.session-course-documents-form {
    max-width: none;
}

/* Session details sits in a full-width accordion, so it should not inherit the
   compact editor cap. Fields and independent settings share the available
   width, then stack naturally when the viewport cannot support two columns. */
.session-details-form {
    max-width: none;
}

.session-details-form .edit-form-row,
.session-details-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--space-3);
}

.session-details-option {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The count that heads the list. Sits above the names rather than beside the
   column heading, because each row carries its own. */
.feature-inclusion-count {
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

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

.feature-inclusion-tick {
    /* --text-success, not the --success fill: a glyph reads as text and
       #22c55e on a panel fails 1.4.3 / 1.4.11 on the light themes. */
    color: var(--text-success);
    font-weight: 700;
}

/* One fieldset per feature group on the edition ticklist, and the matching
   heading on the org-facing included list. The catalogue runs to two dozen
   entries, so the groups need enough separation to read as separate sets
   rather than as one long grid with occasional bold lines in it. */
.feature-group-fieldset + .feature-group-fieldset {
    margin-top: var(--space-5);
}

.feature-group-fieldset > legend {
    font-weight: 600;
}

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

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

/* The compact per-row variant, inside the editions list cell. It repeats once
   per edition, so it stays a paragraph rather than a heading and sits tighter
   than the standalone group headings above. */
.feature-inclusion-group-label {
    margin: var(--space-3) 0 var(--space-1);
    font-weight: 600;
}

.feature-inclusion-count + .feature-inclusion-group-label {
    margin-top: 0;
}

/* Keep the edition/subscription summary compact and aligned. The browser's
   default definition-list indents otherwise make the edition name and the
   override action look unrelated to their labels. */
.edition-subscription-summary {
    display: grid;
    grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    align-items: center;
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel);
}

.edition-subscription-summary dt,
.edition-subscription-summary dd {
    min-width: 0;
    margin: 0;
}

.edition-subscription-summary dt {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.edition-subscription-summary dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.edition-subscription-summary dd > strong {
    font-size: 1.05rem;
}

.edition-subscription-summary dd > small {
    color: var(--text-secondary);
}

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

@media (max-width: 520px) {
    .edition-subscription-summary {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .edition-subscription-summary dd {
        margin-bottom: var(--space-2);
    }
}

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

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

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

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

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

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

/* Keep the eight-column users ledger inside its panel at desktop widths.
   Auto table layout lets a long email address claim excess width and pushes
   the Actions column beyond the scroll region's visible edge. The governed
   proportions retain room for the stacked actions while long cell content
   wraps instead of changing the table's intrinsic width. */
table[data-users-table] {
    table-layout: fixed;
}

table[data-users-table] th:nth-child(1) { width: 8%; }
table[data-users-table] th:nth-child(2) { width: 24%; }
table[data-users-table] th:nth-child(3) { width: 10%; }
table[data-users-table] th:nth-child(4) { width: 13%; }
table[data-users-table] th:nth-child(5) { width: 8%; }
table[data-users-table] th:nth-child(6) { width: 8%; }
table[data-users-table] th:nth-child(7) { width: 13%; }
table[data-users-table] th:nth-child(8) { width: 16%; }

table[data-users-table] td {
    overflow-wrap: anywhere;
}

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

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

.confidence-reference cite {
    font-style: italic;
}

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

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

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

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

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

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

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

/* Per-row copy outcome. Empty until a copy happens, so it must not reserve
   space or push the row's other content around when it fills. */
.candidate-access-feedback:empty {
    display: none;
}

.access-qr-dialog .modal-dialog-body {
    display: grid;
    justify-items: center;
    text-align: center;
}

.access-qr-image {
    padding: var(--space-3);
    border: var(--border-width) solid var(--border-color);
    background: #fff;
}

.access-qr-image img,
.access-qr-image canvas {
    display: block;
    width: min(256px, 70vw);
    height: auto;
    aspect-ratio: 1;
}

.access-qr-help {
    margin: 0;
}

.access-qr-actions {
    justify-content: center;
    margin-top: var(--space-2);
}

.access-qr-feedback {
    margin-top: 0;
}

.access-qr-feedback:empty {
    display: none;
}

/* Roster cells state one fact each. The phrase itself carries the meaning, so
   emphasis only helps the eye find the rows with work outstanding — nothing
   here is said by weight or colour alone. */
.roster-readiness {
    font-weight: 600;
}

.roster-readiness--ready {
    font-weight: 400;
}

.roster-readiness--muted {
    font-weight: 400;
    color: var(--text-secondary);
}

/* The second line of a roster cell: an extra-time arrangement beneath the
   readiness phrase, or the marks beneath the script's state. */
.roster-cell-note {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-secondary);
}

/* One candidate's facts on their own page, where the roster's four columns
   deliberately do not go. */
.candidate-detail-facts {
    margin-top: var(--space-3);
}

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

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

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

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

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

/* Scripts and results uses one compact lifecycle column rather than four date
   columns. Fixed proportions keep the action controls inside the panel while
   long candidate details wrap within their assigned column. */
.attempts-table {
    table-layout: fixed;
}

.attempts-table th:nth-child(1) { width: 18%; }
.attempts-table th:nth-child(2) { width: 13%; }
.attempts-table th:nth-child(3) { width: 15%; }
.attempts-table th:nth-child(4) { width: 11%; }
.attempts-table th:nth-child(5) { width: 9%; }
.attempts-table th:nth-child(6) { width: 19%; }
.attempts-table th:nth-child(7) { width: 15%; }

.attempts-table th,
.attempts-table td {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    /* Data-dense tables keep a readable minimum and scroll inside their wrap
       rather than crushing columns (WCAG 1.4.10 data-table exemption). This
       minimum is only safe for a table inside a scroll container: the page
       shell sets overflow-x:hidden on html/body, so an unwrapped table wider
       than the viewport is clipped and its later columns become unreachable.
       Wrap wide tables in .table-scroll (see renderTableScrollRegion() in
       src/ui_components.php). */
    .candidate-table {
        min-width: 980px;
    }

    /* Narrow key/value and two-column summary tables have no columns to crush,
       so the shared minimum would only force needless horizontal scrolling.
       They reflow in place instead. */
    .candidate-table--narrow {
        min-width: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.health-label {
    flex: 1;
}

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

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

/* Risk Ledger domain tables share one column grid so their headings and
   findings remain aligned as the amount of control text changes. */
.risk-ledger-table {
    width: 100%;
    min-width: 56rem;
    table-layout: fixed;
}

.risk-ledger-table__control { width: 28%; }
.risk-ledger-table__finding { width: 14%; }
.risk-ledger-table__scope { width: 18%; }
.risk-ledger-table__assessment { width: 40%; }

.risk-ledger-table .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.35;
}

.risk-ledger-table .status-conforms {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success-text);
}

.risk-ledger-table .status-does_not_conform {
    border-color: var(--border-error);
    background: var(--bg-error);
    color: var(--text-error);
}

.risk-ledger-table .status-not_verified {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.risk-ledger-table .status-no_relevance {
    border-color: var(--border-color);
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

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

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

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

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

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

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

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

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

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

@media (min-width: 40rem) {
    .report-stats-grid .stat-card--confidence {
        grid-column: span 2;
    }
}

/* Pass/fail stat numbers: text tokens, never the --success fill (2.3:1 on
   the default panel, 1.7:1 on amber and forest). --text-success is tuned per
   theme against the stat-card panel like --text-error already is. */
.status-pass {
    color: var(--text-success);
}

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

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

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

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

.inventory-toolbar p {
    margin: 0;
}

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

.inventory-actions form {
    margin: 0;
}

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

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

/* Keep the apply/reset pair together instead of wrapping the reset link below
   the submit button when the final filter field shares its row. */
.inventory-filters .filter-actions {
    grid-column: span 2;
    flex-wrap: nowrap;
}

.session-picker td strong + small {
    display: block;
}

@media (max-width: 390px) {
    .inventory-filters .filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }
}

.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: 24%;
}

.question-selection-table__answer {
    width: 12%;
}

/* A long ordering/matching answer wraps inside a bounded block so it cannot
   starve the question column in auto-layout tables. Table cells only: the
   panel view clones the same cell into a full-width detail. */
.candidate-table .question-answer-key {
    display: block;
    max-width: 20rem;
    /* The inventory table defaults its cells to nowrap; the answer must wrap
       inside its bounded block rather than run under the neighbouring columns. */
    white-space: normal;
}

/* Question and panel-heading links are standalone (the whole cell or heading
   is the link), so the link colour carries the affordance and the underline
   arrives on hover/focus — the sortable-header / breadcrumb pattern. Links
   inside prose keep their resting underline. */
.bank-question-info a,
.inventory-reference-stack a,
.first-class-panel__primary a {
    text-decoration: none;
}

.bank-question-info a:hover,
.bank-question-info a:focus-visible,
.inventory-reference-stack a:hover,
.inventory-reference-stack a:focus-visible,
.first-class-panel__primary a:hover,
.first-class-panel__primary a:focus-visible {
    text-decoration: underline;
}

/* Keyboard focus keeps the governed ring. These links drop their resting
   underline, so the hover underline is their only other state — it cannot also
   serve as the focus indicator. */
.bank-question-info a:focus-visible,
.inventory-reference-stack a:focus-visible,
.first-class-panel__primary a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

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

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

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

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

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

.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: 12%;
}

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

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

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

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

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

/* Question (2) and Banks (7) hold sentence-length content; the Correct answer
   column between them wraps via .question-answer-key. */
/* The user page's effective-access list: one permitted kind of work per line. */
.effective-access-list {
    margin: var(--space-2) 0;
    padding-left: 1.25em;
    display: grid;
    gap: var(--space-1);
}

/* Group labels between the question editor's disclosures. */
.question-editor-group-label {
    margin: var(--space-4) 0 var(--space-2);
}

/* The question list's More actions disclosure: full row width beneath the
   usual action, its forms laid out as a wrapping button row. */
.inventory-more-actions {
    flex-basis: 100%;
}

.inventory-more-actions-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) 0 0;
}

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

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

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

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

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

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

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

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

/* The base code rule pins --text-primary, which would hide the link colour —
   the reference link's only resting affordance now the underline is
   hover-only. */
.inventory-reference-stack a code {
    color: inherit;
}

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

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

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

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

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

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

.content-toolbar p {
    margin: 0;
}

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

.content-actions form {
    margin: 0;
}

/* Keeps a destructive action away from the constructive lifecycle buttons:
   the wrapper is pushed to the far end of the action row so a slip on a
   neighbouring button cannot land on it. */
.content-actions form.content-actions__danger {
    margin-left: auto;
}

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

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

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

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

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

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

.question-bank-detail-toolbar {
    display: flex;
    justify-content: flex-end;
}

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

.question-bank-detail-switch__link {
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
    border-color: transparent;
    box-shadow: none;
}

.question-bank-detail-switch__link[aria-current="page"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
}

.question-bank-summary-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.question-bank-summary-table tfoot th,
.question-bank-summary-table tfoot td {
    border-top: 2px solid var(--border-color);
    font-weight: 600;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Session cards lead with the full-width assessment, then pair related facts:
   client with cohort, followed by operational type/status with questions. The
   explicit order is panel-only; the source table keeps its scan-friendly
   column order. */
[data-first-class-panel="sessions"] .first-class-panel__detail--assessment {
    order: -3;
    grid-column: 1 / -1;
}

[data-first-class-panel="sessions"] .first-class-panel__detail--access-code {
    order: -2;
    grid-column: 1 / -1;
}

[data-first-class-panel="sessions"] .first-class-panel__detail--access-code code {
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

[data-first-class-panel="sessions"] .first-class-panel__detail--client,
[data-first-class-panel="sessions"] .first-class-panel__detail--cohort {
    order: -2;
}

[data-first-class-panel="sessions"] .first-class-panel__detail--type-status,
[data-first-class-panel="sessions"] .first-class-panel__detail--questions {
    order: -1;
}

[data-first-class-panel="sessions"] .first-class-panel__detail--billing {
    order: 1;
}

/* The assessment title is a standalone navigation link, so its underline is
   reserved for hover/focus rather than competing with the panel heading. */
[data-first-class-panel="sessions"] .first-class-panel__detail--assessment a {
    text-decoration: none;
}

[data-first-class-panel="sessions"] .first-class-panel__detail--assessment a:hover,
[data-first-class-panel="sessions"] .first-class-panel__detail--assessment a:focus-visible {
    text-decoration: underline;
}

/* A session's schedule also benefits from the whole panel: timestamps remain
   readable instead of competing with a count. Counts then follow together on
   the next row, making the candidate/script relationship easy to scan. */
[data-first-class-panel="sessions"] .first-class-panel__detail--schedule {
    grid-column: 1 / -1;
}

/* Edition cards lead with the compact operational facts, then keep the
   explanatory description readable and give the included-feature list its own
   full-width subpanel. */
[data-first-class-panel="editions"] .first-class-panel__detail--status,
[data-first-class-panel="editions"] .first-class-panel__detail--organisations {
    order: -1;
}

[data-first-class-panel="editions"] .first-class-panel__detail--description,
[data-first-class-panel="editions"] .first-class-panel__detail--included-features {
    grid-column: 1 / -1;
}

/* Question cards lead with the answer directly after the question heading.
   Domain follows as the only full-width classification fact; the remaining
   facts are individual two-column subpanels created by the panel renderer. */
[data-first-class-panel="bank-questions"] .first-class-panel__detail--correct-answer,
[data-first-class-panel="bank-add-questions"] .first-class-panel__detail--correct-answer,
[data-first-class-panel="questions"] .first-class-panel__detail--correct-answer,
[data-first-class-panel="pool-questions"] .first-class-panel__detail--correct-answer,
[data-first-class-panel="question-picker"] .first-class-panel__detail--correct-answer,
[data-first-class-panel="bank-questions"] .first-class-panel__detail--domain,
[data-first-class-panel="questions"] .first-class-panel__detail--categories,
[data-first-class-panel="pool-questions"] .first-class-panel__detail--categories,
[data-first-class-panel="question-picker"] .first-class-panel__detail--categories {
    grid-column: 1 / -1;
}

[data-first-class-panel="bank-questions"] .first-class-panel__detail--correct-answer {
    order: -3;
}

[data-first-class-panel="bank-questions"] .first-class-panel__detail--domain {
    order: -2;
}

/* The classification filing leads the details so a card reads subject-first. */
[data-first-class-panel="questions"] .first-class-panel__detail--categories,
[data-first-class-panel="pool-questions"] .first-class-panel__detail--categories,
[data-first-class-panel="question-picker"] .first-class-panel__detail--categories {
    order: -1;
}

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

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

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

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

/* Validation problems for one assessment, listed inside a warning notice in the
   Configuration cell. Itemised so the reader can count them; the run-on
   sentence this replaced was reachable only by hovering the row. */
.assessment-validation-list {
    margin: var(--space-1) 0 0;
    padding-left: 1.25rem;
}

.assessment-validation-list li + li {
    margin-top: var(--space-1);
}

.assessment-validation-overflow {
    margin: var(--space-2) 0 0;
}

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

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

/* Cards in a grid row share the tallest card's height; the footer (and its
   separator) must sit against the panel bottom whatever mix of media and
   details a card has, so the clamp is structural rather than per-entity. */
.first-class-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: auto;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-color);
}

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

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

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

@media (max-width: 520px) {
    .first-class-panel__details {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .first-class-panel,
    .first-class-panel__image {
        transition: none;
    }

    .first-class-panel:hover,
    .first-class-panel:hover .first-class-panel__image {
        transform: none;
    }
}

@media print {
    .first-class-list-toolbar,
    .first-class-panel-grid {
        display: none !important;
    }

    table[data-first-class-table] {
        display: table !important;
    }

    .table-scroll:has(table[data-first-class-table]) {
        display: block !important;
    }

    .first-class-panel {
        box-shadow: none;
    }
}

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

.question-bank-description {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.45;
}

.question-bank-image {
    display: block;
    width: auto;
    max-width: min(100%, 28rem);
    max-height: 16rem;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    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: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

@media (max-width: 520px) {
    .list-view-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .list-view-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.bank-image-field,
.bank-image-current {
    display: grid;
    gap: var(--space-2);
}

.bank-image-current {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.bank-details-accordion summary {
    cursor: pointer;
    padding-bottom: 0.75rem;
}

.bank-details-accordion[open] summary {
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

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

.import-bank-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Placeholder shown when no bank image is available */
.import-bank-preview:has(.question-bank-select-preview[hidden])::before {
    content: '';
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    flex-shrink: 0;
}

.import-bank-preview:has(.question-bank-select-preview[hidden])::after {
    content: 'No bank image';
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.question-bank-inline {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

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

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

.bank-form-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.bank-form-grid--primary {
    grid-template-columns: minmax(20rem, 2fr) repeat(3, minmax(10rem, 1fr));
}

.bank-image-picker {
    display: grid;
    gap: var(--space-2);
}

.bank-image-picker__selection {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 3.2rem;
    color: var(--text-secondary);
}

@media (max-width: 1000px) {
    .bank-form-grid--primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bank-form-grid--primary .bank-form-name {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .bank-form-grid--primary {
        grid-template-columns: 1fr;
    }

    .bank-form-grid--primary .bank-form-name {
        grid-column: auto;
    }
}

/* Name and description share a row on the edition detail page, but the
   description is deliberately multiline. Keep the grid from stretching the
   single-line name control to the textarea's height. */
.edition-details-grid {
    align-items: start;
}

.topic-primary-details {
    grid-template-columns: minmax(18rem, 2fr) minmax(12rem, 1fr) minmax(8rem, auto);
    align-items: end;
}

.topic-primary-details .pool-meta-list {
    height: 100%;
    align-content: end;
}

.topic-secondary-details {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    padding-top: 0.2rem;
}

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

.topic-lifecycle-actions .content-actions {
    justify-content: flex-start;
}

@media (max-width: 760px) {
    .topic-primary-details {
        grid-template-columns: 1fr;
    }
}

.pool-detail-layout {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
}

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

.pool-meta-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.pool-meta-list div {
    display: grid;
    gap: var(--space-1);
}

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

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

.pool-summary-list {
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.pool-summary-list div {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.55rem 0.65rem;
}

.pool-meta-list--wide {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.pool-meta-list--wide div:nth-child(2) {
    grid-column: 1 / -1;
}

@media (max-width: 860px) {
    .pool-detail-layout {
        grid-template-columns: 1fr;
    }
}

.bank-edit-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.bank-edit-grid textarea {
    min-height: 4.5rem;
}

.reference-term-summary {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.reference-term-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
}

.bank-question-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

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

#bank-question-table {
    table-layout: fixed;
}

#bank-question-table th:nth-child(1) {
    width: 19%;
}

#bank-question-table th:nth-child(2) {
    width: 22%;
}

#bank-question-table th:nth-child(3) {
    width: 14%;
}

#bank-question-table th:nth-child(4) {
    width: 19%;
}

#bank-question-table th:nth-child(5) {
    width: 14%;
}

#bank-question-table th:nth-child(6) {
    width: 12%;
}

.bank-question-cell-details {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.bank-question-cell-details > div {
    min-width: 0;
}

.bank-question-cell-details dt {
    margin: 0 0 0.1rem;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.bank-question-cell-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.bank-question-actions {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex-wrap: wrap;
}

.bank-question-actions form {
    margin: 0;
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

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

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

.analysis-run-form {
    align-items: flex-end;
}

.analysis-run-about,
.analysis-run-inputs,
.analysis-run-actions,
.analysis-run-form > .admin-feedback {
    flex: 1 0 100%;
    width: 100%;
}

.analysis-run-inputs {
    min-width: 0;
}

.analysis-run-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-3);
    align-items: end;
}

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

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

.analysis-run-fields select {
    width: 100%;
}

/* Multi-value entity pickers on the
   Run-analysis form reuse the T-008 question-picker primitives; the widget
   spans the whole grid row so the filter list has room to breathe. */
.analysis-run-fields .analysis-entity-picker {
    grid-column: 1 / -1;
    min-width: 0;
}

.analysis-entity-picker-advanced {
    margin-top: var(--space-2);
}

.analysis-entity-picker-advanced summary {
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--text-secondary);
}

/* The Adaptive delivery hub list on the
   psychometrics dashboard — one link plus a one-line job description per
   suite page. */
.adaptive-hub-links {
    margin: 0;
    padding-left: 1.25rem;
}

.adaptive-hub-links li {
    margin-bottom: var(--space-2);
}

.analysis-run-actions {
    align-items: flex-start;
}

.analysis-run-developer-details {
    min-width: min(100%, 12rem);
    max-width: min(100%, 44rem);
}

.analysis-run-developer-details[open] {
    flex-basis: 100%;
}

.analysis-run-developer-details textarea {
    width: 100%;
}

.session-list-filters {
    margin-bottom: var(--space-4);
}

.session-warning-flag {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-1);
    vertical-align: top;
    border: 1px solid var(--warning-border);
    border-radius: var(--border-radius-sm);
    background: var(--warning-bg);
    color: var(--warning-text);
}

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

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

.cohort-summary-card {
    min-width: 0;
}

.cohort-summary-card .stat-value {
    font-size: 1.2rem;
    line-height: 1.3;
    word-break: break-word;
}

.cohort-summary-empty {
    color: var(--text-muted);
    font-weight: 600;
}

.cohort-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    justify-content: space-between;
    margin-top: var(--space-4);
}

/* Sized to its content, not to the toolbar row: a short status list has no
   reason to stretch across the panel, and a full-width select reads as a text
   field rather than a small fixed choice. The mobile block below deliberately
   overrides this to full width, matching the other narrow-width controls. */
.cohort-status-form {
    flex: 0 1 auto;
    margin: 0;
}

.cohort-status-form label {
    min-width: 0;
    flex: 0 1 auto;
}

.cohort-status-form select {
    width: auto;
    min-width: 12rem;
}

.cohort-create-form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
}

.cohort-create-field {
    min-width: 0;
}

.cohort-create-field--name {
    grid-column: span 4;
}

.cohort-create-field--code {
    grid-column: span 4;
}

.cohort-create-field--date {
    grid-column: span 2;
}

.cohort-create-field--description {
    grid-column: span 8;
}

.cohort-create-field--description textarea {
    min-height: 6.5rem;
}

.cohort-create-actions {
    grid-column: span 4;
    align-self: end;
    margin-top: 0;
}

.cohort-create-actions .button {
    min-width: 10rem;
}

.cohort-create-form .admin-feedback {
    grid-column: 1 / -1;
}

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

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

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

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

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

/* Keep the active bank visually distinct from the question identity. */
.question-editing-context {
    margin-left: auto;
    max-width: min(100%, 28rem);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.question-editing-context__link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: inherit;
    text-decoration: none;
}

.question-editing-context__link:hover .question-editing-context__name,
.question-editing-context__link:focus-visible .question-editing-context__name {
    text-decoration: underline;
}

/* Keyboard focus keeps the governed ring on the link itself. Underlining a
   child on focus mirrors hover and leaves the focused control unmarked. */
.question-editing-context__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.question-editing-context__text {
    display: grid;
    min-width: 0;
    text-align: right;
}

.question-editing-context__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
}

.question-editing-context__name {
    overflow-wrap: anywhere;
    font-weight: 600;
    color: var(--text-primary);
}

.question-editing-context__image {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .question-toolbar__identity,
    .question-editing-context {
        width: 100%;
    }
}

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

.question-actions > form {
    display: flex;
    margin-top: 0;
}

.question-action-note {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.question-status-actions {
    gap: var(--space-3);
    row-gap: var(--space-2);
    margin-top: var(--space-3);
}

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

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

.question-grid__internal-title {
    grid-column: span 2;
}

@media (max-width: 520px) {
    .question-grid__internal-title {
        grid-column: span 1;
    }
}

/*
 * The question-topic-picker uses bodyWrapper=false so the topic
 * controls remain direct children of the accordion.
 */
.question-topic-picker {
    padding-bottom: 0.75rem;
}

.question-topic-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.question-topic-picker-actions {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.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;
        margin-left: 0;
    }

    .question-topic-picker-actions > .button {
        width: 100%;
        justify-content: center;
    }

    .question-topic-picker-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

.topic-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.question-topic-picker > .topic-tag-list {
    margin-top: var(--space-2);
}

.question-topic-picker-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    background: var(--bg-panel);
    color: var(--text-primary);
    white-space: nowrap;
}

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

.topic-tag span {
    white-space: nowrap;
}

.topic-tag small {
    color: var(--text-secondary);
    white-space: nowrap;
}

.topic-tag.is-selected {
    border-color: var(--border-status-ready);
    background: var(--bg-status-ready);
}

.topic-tag.is-retired {
    opacity: 0.72;
}

/* Topic allocation weighting controls */
.topic-tag-weight {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: 0.4rem;
}

.topic-tag-weight[hidden] {
    display: none;
}

.topic-tag-weight-input {
    width: 3.5rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    /* Hide the native number spinner — 0.01 steps are not useful and integer
       steps would flag `Distribute evenly` rounding values (e.g. 33.34) invalid. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.topic-tag-weight-input::-webkit-outer-spin-button,
.topic-tag-weight-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.topic-tag-weight-suffix {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.topic-allocation-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.question-topic-picker-footer .topic-allocation-status {
    margin-top: 0;
}

.topic-allocation-status-total {
    font-weight: 600;
    color: var(--text-primary);
}

.topic-allocation-balance {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-text);
    cursor: pointer;
    font-size: var(--font-size-md);
}

.topic-allocation-balance[disabled] {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.topic-allocation-status-message {
    flex-basis: 100%;
    color: var(--text-error);
    margin: 0;
}

/* Confidence summary — the shared score-versus-confidence cell/block rendered by
   src/reporting/confidence_display.php. Every value (index, per-bucket shares,
   coverage) is present as visible text; nothing is carried by colour or width
   alone, and the fixed Certain / Unsure / Guessing order is preserved. */
.confidence-summary {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.confidence-summary--block {
    gap: 0.3rem;
}

.confidence-summary--absent,
.confidence-index--absent {
    color: var(--text-muted);
    font-style: italic;
}

.confidence-index-label {
    color: var(--text-muted);
}

.confidence-index-value {
    font-weight: 600;
}

.confidence-distribution {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 400;
}

.confidence-coverage {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 400;
}

/* Individual categorical value (candidate response). */
.confidence-value {
    font-weight: 600;
}

.confidence-value--absent {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

.confidence-review-prompts {
    margin-top: var(--space-2);
}

@media print {
    /* Keep every confidence value legible in high contrast for print. */
    .confidence-summary--absent,
    .confidence-index--absent,
    .confidence-distribution,
    .confidence-coverage {
        color: #000;
    }
}

/* Review signal: the four-state question-level score-vs-confidence
   review prompt. The text label is authoritative; the colour treatment is
   redundant reinforcement carried by theme tokens (never a bare coloured dot),
   so a signal stays identifiable in monochrome print, forced-colours modes and
   for colour-vision differences. Four states use four distinct status families
   (green / sky-blue / amber / red) that adapt per theme. */
.review-signal-cell {
    white-space: normal;
}

/* Small sample sits under the signal in the same cell: both answer "how far can
   I trust this row?", so they read together. It is a separate warning about
   available marks, never a Review-signal state, so it keeps its own warning
   token family rather than any of the four signal colours.

   The wrapper (not the <td>) carries the stacking: a flex <td> would leave
   table layout and break column alignment on the four tables sharing this
   class. align-items keeps each pill at its natural width. */
.review-signal-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* The internal candidate id under a person's name on a report row. It stays
   visible for cross-referencing but stops being the row's only identity, which
   is what a printed client report was left with. */
.candidate-row-id {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: normal;
}

/* A column the shared Category performance table cannot populate on this report
   still appears and says so. It is a statement of absence, not a value, so it
   takes secondary text and never the absent-value marker (which means "this row
   has no value" rather than "this report does not calculate this"). */
.category-performance-table .report-column-absent {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.review-signal-stack .topic-confidence-flag {
    padding: 0.1rem 0.5rem;
    border-radius: var(--border-radius-sm);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: var(--font-size-xs);
}

.review-signal {
    display: inline-block;
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.review-signal-label {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--border-radius-sm);
    border: var(--border-width, 1px) solid transparent;
    font-weight: 600;
}

.review-signal--green .review-signal-label {
    background: color-mix(in srgb, var(--review-signal-secure) 20%, var(--bg-panel) 80%);
    border-color: var(--review-signal-secure);
    color: var(--text-primary);
}

.review-signal--blue .review-signal-label {
    background: color-mix(in srgb, var(--review-signal-fragile) 20%, var(--bg-panel) 80%);
    border-color: var(--review-signal-fragile);
    color: var(--text-primary);
}

.review-signal--amber .review-signal-label {
    background: color-mix(in srgb, var(--review-signal-gap) 20%, var(--bg-panel) 80%);
    border-color: var(--review-signal-gap);
    color: var(--text-primary);
}

.review-signal--red .review-signal-label {
    background: color-mix(in srgb, var(--review-signal-misconception) 20%, var(--bg-panel) 80%);
    border-color: var(--review-signal-misconception);
    color: var(--text-primary);
}

/* "Unclassified" evidence state: its own named grey grade — a distinct neutral
   pill, never one of the four meaning colours. */
.review-signal--grey .review-signal-label {
    background: var(--bg-status-archived);
    border-color: var(--border-status-archived);
    color: var(--text-status-archived);
}

/* Legacy-snapshot "Not available in this snapshot" state: plain muted text (it is
   the absence of a projection, not a grade). */
.review-signal--absent {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
}

@media (forced-colors: active) {
    /* In forced-colours mode the token fills are dropped by the UA; keep the
       label distinguishable with a system border so the four pills stay legible
       (the text label remains the authoritative carrier regardless). */
    .review-signal-label {
        border: 1px solid CanvasText;
        color: CanvasText;
        background: Canvas;
    }
}

@media print {
    /* Text-first in print: high-contrast label, no reliance on the colour fill. */
    .review-signal-label {
        color: #000;
        border-color: #000;
        background: transparent;
    }
    .review-signal--insufficient,
    .review-signal--absent {
        color: #000;
    }
}

/* Understanding profile: the square Review-signal composition glyph, the
   headline item on the two analytics report headers. The exact reading (band,
   counts, shares) lives in a hover/focus tip on the square and in the SVG's
   full-sentence accessible name; print reveals the tip as static text so the
   paper report keeps the numbers. Segment fills reuse the same four status
   families as the signal pills so word, pill and segment always agree. */
.understanding-profile {
    display: inline-flex;
    font-size: var(--font-size-sm);
}

.understanding-profile-figure {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    cursor: help;
}

.understanding-profile-figure:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.understanding-profile-glyph {
    width: 6rem;
    height: 6rem;
    display: block;
}

/* The track is the glyph's frame: it marks the full extent the strip could
   fill, so the space above a part-height strip reads as unfilled rather than
   absent. That is structure, not status, so it takes the neutral bounding
   token — a brand-tinted frame reads as a fifth signal competing with the four
   real ones, and would change hue between themes while the data stayed the
   same. Paler than the segment seams on purpose: the container should sit
   behind the divisions inside it, not compete with them. */
.understanding-profile-track {
    fill: var(--bg-panel-secondary, transparent);
    stroke: var(--border-color);
    stroke-width: 1;
}

/* Segments use the controlled Review-signal palette at its validated strength,
   so adjacent shares remain distinguishable at glyph scale. The separator is a
   neutral grey rather than each segment's own colour: at glyph scale a
   saturated border competes with the fill it surrounds, and the edge segments
   sit flush against the clip path, so a coloured stroke would trace the
   square's rounded corners.

   It takes --text-muted at half a unit: a hairline reads as a division between
   two fills, while a full unit at 48 viewBox units across is a visible frame
   around each segment. The muted TEXT token, not a border token, because the
   border tokens are pale by design (they separate panels from a page) and
   --border-color-emphasis is a saturated brand colour in every theme. */
.understanding-profile-segment {
    stroke: var(--text-muted);
    stroke-width: 0.5;
}

.understanding-profile-segment--green { fill: var(--review-signal-secure); }
.understanding-profile-segment--blue  { fill: var(--review-signal-fragile); }
.understanding-profile-segment--amber { fill: var(--review-signal-gap); }
.understanding-profile-segment--red   { fill: var(--review-signal-misconception); }

/* The awaiting-evidence icon sits centred over the empty track. */
.understanding-profile-empty-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* The reading tip: a panel-styled popover below the square, shown on hover or
   keyboard focus (same disclosure pattern as .field-help-tooltip). Panel
   colours rather than the dark tooltip tokens because the share swatches
   carry the four status colours, which need the panel background to keep
   their contrast. Print reveals it statically so the paper keeps the numbers. */
.understanding-profile-tip {
    position: absolute;
    top: calc(100% + 0.45rem);
    /* Right-anchored: the square sits at the panel's right edge, so the tip
       grows leftward into the page rather than off it. */
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: max-content;
    max-width: 260px;
    padding: 0.5rem 0.7rem;
    background: var(--bg-panel);
    color: var(--text-primary);
    border: var(--border-width, 1px) solid var(--border-color-emphasis, currentColor);
    border-radius: var(--border-radius-sm);
    text-align: left;
    white-space: normal;
    box-shadow: var(--elevation-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease;
}

.understanding-profile-figure:hover .understanding-profile-tip,
.understanding-profile-figure:focus-visible .understanding-profile-tip {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .understanding-profile-tip {
        transition: none;
    }
}

.understanding-profile-tip-title {
    font-weight: 700;
    color: var(--text-secondary);
}

.understanding-profile-band {
    font-weight: 600;
}

.understanding-profile-counts {
    color: var(--text-muted);
}

.understanding-profile-shares {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
}

.understanding-profile-share {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* The share swatch repeats the segment colour beside its named percentage so
   the legend travels with the numbers; the words remain the meaning. */
.understanding-profile-share-swatch {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--border-radius-sm);
    /* The same neutral tone the glyph's segment seams carry, so the tip legend
       and the square hold one weight of colour between them. These are HTML
       boxes rather than SVG, so they keep a 1px border — a hairline is a
       viewBox-unit trick that does not apply at this size. */
    border: var(--border-width, 1px) solid var(--text-muted);
}

.understanding-profile-share--green .understanding-profile-share-swatch {
    background: var(--review-signal-secure);
}

.understanding-profile-share--blue .understanding-profile-share-swatch {
    background: var(--review-signal-fragile);
}

.understanding-profile-share--amber .understanding-profile-share-swatch {
    background: var(--review-signal-gap);
}

.understanding-profile-share--red .understanding-profile-share-swatch {
    background: var(--review-signal-misconception);
}

.understanding-profile--absent {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* The analytics report header: meta text on the left, the profile square hard
   right. Both children top-align so the square keeps its position beside the
   heading however many meta lines the report carries (the assessment report's
   versions/exclusions/limit lines vary), instead of drifting down with the
   shared toolbar's centre alignment. */
.report-header-toolbar {
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* min-width lets long meta lines wrap at the space remaining beside the
   square instead of forcing the row wider; the row itself never wraps at
   desktop widths, so the square cannot be pushed down. */
.report-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* The headline placement: pushed to the right edge of the report header row,
   with the square right-justified inside it (its title lives in the tip). */
.understanding-profile-headline {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

/* Below the panel's comfortable two-column width the square drops under the
   text rather than squeezing the heading. */
@media (max-width: 40rem) {
    .report-header-toolbar {
        flex-wrap: wrap;
    }
}

@media (forced-colors: active) {
    /* Token fills are dropped by the UA; keep the track and segments visible as
       system-ink shapes with Canvas seams. Segment hues cannot be distinguished
       here — the adjacent text carries the composition, by design. */
    .understanding-profile-track {
        fill: Canvas;
        stroke: CanvasText;
    }
    .understanding-profile-segment--green,
    .understanding-profile-segment--blue,
    .understanding-profile-segment--amber,
    .understanding-profile-segment--red {
        fill: CanvasText;
        stroke: Canvas;
        stroke-width: 1;
    }
    .understanding-profile-share-swatch {
        background: CanvasText;
        border-color: CanvasText;
    }
}

@media print {
    /* Charts are part of the printed report: keep the glyph's fills on paper,
       and reveal the hover tip as static text beside the square so the paper
       report keeps the exact numbers. */
    .understanding-profile-glyph {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .understanding-profile-track {
        stroke: #000;
    }
    .understanding-profile-figure {
        display: inline-flex;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .understanding-profile-tip {
        position: static;
        opacity: 1;
        visibility: visible;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .understanding-profile--absent,
    .understanding-profile-counts {
        color: #000;
    }
}

/* Component preview board (admin/_ui_preview.php), a design
   review surface. The cells are deliberately plain so the component under
   review carries all the visual interest; the glyph is right-aligned in its
   cell because that is where the report header places it. */
/* Section headings carry no top margin of their own, so each panel after the
   first states its own separation from the cells above it. */
.admin-panel + .admin-panel {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: var(--border-width, 1px) solid var(--border-color);
}

.ui-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-6) var(--space-5);
    margin-top: var(--space-4);
}

.ui-preview-case {
    margin: 0;
    padding: var(--space-4);
    border: var(--border-width, 1px) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary, transparent);
}

/* Reserves the square's height so a degenerate cell keeps the grid rhythm, and
   right-aligns to match the report header placement. */
.ui-preview-case-glyph {
    display: flex;
    justify-content: flex-end;
    min-height: 6rem;
}

.ui-preview-case-caption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.ui-preview-case-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.ui-preview-case-meta {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.is-muted {
    opacity: 0.72;
}

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

.question-save-actions {
    display: grid;
    gap: var(--space-2);
    padding-top: 0.25rem;
    scroll-margin-top: var(--space-4);
}

.question-save-primary-actions,
.question-save-secondary-actions,
.question-editor-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.question-save-primary-actions {
    width: 100%;
}

/* Creating another item is useful but secondary to progressing through the
   current review set, so keep it quieter than Save and next. */
.question-save-primary-actions .question-save-new {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.question-save-primary-actions .question-save-new:hover,
.question-save-primary-actions .question-save-new:focus-visible {
    background: var(--bg-panel-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Keyboard focus keeps the governed ring. This control starts with a transparent
   border, so without the ring the focused state reads as plain hover. */
.question-save-primary-actions .question-save-new:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.question-editor-navigation {
    margin-left: auto;
}

.question-version-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-basis: auto;
    flex-shrink: 0;
    order: 0;
    margin-top: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--bg-panel-secondary) 78%, transparent);
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
}

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

.question-note-fields {
    display: grid;
    gap: var(--space-3);
    padding: 0.85rem;
}

.question-authoring-panel {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: var(--border-width-emphasis, 2px) solid var(--question-accent-border);
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--question-accent-bg) 82%, var(--bg-panel) 18%);
    scroll-margin-top: var(--space-4);
}

.question-authoring-panel-title {
    margin: 0;
    color: var(--accent-text);
    font-size: var(--font-size-base);
    line-height: 1.25;
}

.question-authoring-field-label {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.35;
}

.question-authoring-panel .label-wrap {
    gap: var(--space-2);
}

.question-authoring-panel #sr-section {
    display: grid;
    gap: var(--space-2);
}

.question-authoring-panel .rich-editor {
    background: var(--bg-panel);
    box-shadow: var(--elevation-1);
}

/* Question writers need the stem and answer choices to be easier to scan than
   the surrounding administration UI. Supporting instructions/stimulus editors
   deliberately keep the standard rich-editor scale. */
.question-authoring-panel #rich-editor-question .rich-editor-content,
.question-authoring-panel .sr-option-editor .rich-editor-content {
    font-size: 1.125rem;
    line-height: 1.65;
}

.question-authoring-panel #rich-editor-question .rich-editor-content > h2,
.question-authoring-panel .sr-option-editor .rich-editor-content > h2 {
    font-size: 1.35rem;
}

.question-authoring-panel #rich-editor-question .rich-editor-content > h3,
.question-authoring-panel .sr-option-editor .rich-editor-content > h3 {
    font-size: 1.2rem;
}

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

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

.sr-option-row {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto auto;
    gap: var(--space-3);
    align-items: center;
}

.sr-option-label {
    font-weight: 600;
    text-align: center;
    font-size: var(--font-size-base);
}

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

.sr-correct-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    cursor: pointer;
}

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

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

.sr-option-actions {
    margin-top: var(--space-3);
}

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

/* Ordering / matching editor rows. Mirrors .sr-option-row's
   grid-with-trailing-action layout for plain-text item, prompt, and
   option rows. */
.sr-ordering-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: 1.5rem;
}

.sr-ordering-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: var(--space-2);
    align-items: center;
}

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

.sr-matching-prompt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    align-items: center;
}

.sr-matching-option-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.sr-matching-correct-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

@media (max-width: 820px) {
    .sr-ordering-row,
    .sr-matching-prompt-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sr-matching-option-row {
        grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    }
}

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

    .sr-option-label {
        font-size: var(--font-size-base);
    }

    .sr-correct-label {
        justify-content: center;
        gap: 0;
    }

    .sr-correct-label span {
        display: none;
    }

    .sr-remove-option {
        width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        overflow: hidden;
    }

    .sr-remove-option .sr-remove-text {
        display: none;
    }

    .question-save-actions {
        gap: var(--space-2);
    }

    .question-save-secondary-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .question-editor-navigation {
        flex-basis: 100%;
        margin-left: 0;
    }

    .question-version-option {
        white-space: normal;
    }
}

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

.marking-guidance-rows {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.marking-guidance-row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.marking-guidance-row-head {
    font-weight: 600;
    align-items: center;
}

.marking-guidance-criteria {
    min-width: 0;
    min-height: 2.5rem;
}

.marking-guidance-remove {
    min-width: 0;
}

.marking-guidance-actions {
    margin-top: var(--space-3);
}

/* Read-only mark-scheme table shown to markers. */
.mark-scheme-table .mark-scheme-points {
    width: 6rem;
    white-space: nowrap;
    text-align: left;
    vertical-align: top;
}

.mark-scheme-table td {
    vertical-align: top;
    white-space: normal;
}

@media (max-width: 820px) {
    .marking-guidance-row {
        grid-template-columns: 4.5rem minmax(0, 1fr) 2.25rem;
        gap: var(--space-2);
    }

    .marking-guidance-remove {
        width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        overflow: hidden;
    }

    .marking-guidance-remove .marking-guidance-remove-text {
        display: none;
    }
}

/* ── Admin templates ────────────────────────────────────────────────────── */

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

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

.template-toolbar p {
    margin: 0;
}

.template-bulk-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.template-bulk-form .admin-helper {
    flex: 1 0 100%;
}

.template-bulk-form button {
    flex: 0 0 auto;
    width: auto;
}

/* Candidate context field selection (assessment Candidate experience view):
   the order column takes a short number box so the table stays scannable. */
.candidate-context-selection-table .candidate-context-order-input {
    width: 5rem;
}

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

.template-editor-block {
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.template-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.template-field--title {
    grid-column: span 2;
}

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

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

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

.template-rule-count-field {
    display: grid;
    gap: 0.35rem;
}

.template-rule-count-controls {
    display: grid;
    grid-template-columns: minmax(4.5rem, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.template-rule-count-controls > input[type="number"] {
    min-width: 0;
    width: 100%;
}

.template-rule-count-all {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

.template-rule-count-all input {
    width: auto;
    margin: 0;
}

.template-rule-randomisation-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

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

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

.template-actions form {
    margin: 0;
}

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

.template-section-list,
.template-rules {
    display: grid;
    gap: var(--space-3);
}

.template-section-tabs {
    display: grid;
    gap: 0;
    min-width: 0;
}

.template-section-tablist {
    display: flex;
    gap: var(--space-1);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.45rem 0.55rem 0;
    border: var(--border-width) solid color-mix(in srgb, var(--accent) 42%, var(--border-color) 58%);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    background: color-mix(in srgb, var(--accent-subtle) 72%, var(--bg-panel) 28%);
    scrollbar-width: thin;
}

.template-section-tab {
    flex: 0 0 auto;
    max-width: min(18rem, 70vw);
    margin: 0 0 -1px;
    padding: 0.7rem 0.9rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-bottom-color: color-mix(in srgb, var(--accent) 42%, var(--border-color) 58%);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-section-tab:hover {
    background: color-mix(in srgb, var(--bg-panel) 72%, var(--accent-subtle) 28%);
    color: var(--text-primary);
}

.template-section-tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color) 58%);
    border-bottom-color: var(--bg-panel);
    background: var(--bg-panel);
    color: var(--text-primary);
}

.template-section-tab--add {
    color: var(--accent-text);
}

.template-section-tabs--enhanced [data-section-panel][hidden] {
    display: none;
}

.template-section-tabs > .template-section-list > .template-section {
    border-top: 0;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

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

.template-section {
    display: grid;
    gap: var(--space-2);
    padding: 0.9rem;
    border: var(--border-width) solid color-mix(in srgb, var(--border-color) 78%, var(--accent) 22%);
    border-radius: var(--border-radius-md);
    box-shadow: var(--panel-boundary-shadow);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent-subtle) 22%, transparent), transparent 18rem),
        color-mix(in srgb, var(--bg-panel) 86%, var(--bg-panel-secondary) 14%);
}

.template-rule {
    display: grid;
    gap: var(--space-3);
    padding: 0.75rem;
    border: var(--border-width) solid color-mix(in srgb, var(--border-color) 84%, var(--progress-fill) 16%);
    border-radius: var(--border-radius-md);
    box-shadow: var(--panel-boundary-shadow);
    background: color-mix(in srgb, var(--bg-panel-secondary) 86%, var(--bg-input) 14%);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

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

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

.template-rule-summary .question-bank-thumb + strong {
    margin-right: auto;
}

.template-rule-form {
    margin-top: 0;
}

.template-source-note {
    display: block;
    margin-top: var(--space-2);
    padding: 0.45rem 0.6rem;
    border-radius: var(--border-radius-sm);
    line-height: 1.4;
}

.template-source-note--info {
    border: 1px solid var(--border-status-info);
    background: var(--bg-status-info);
    color: var(--text-status-info);
}

.template-source-note a {
    color: inherit;
    font-weight: 600;
}

.template-source-note-field {
    grid-column: 1 / -1;
}

.template-source-note-field .template-source-note {
    margin-top: 0;
}

.template-add-rule {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.template-empty,
.template-note {
    padding: 0.85rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

.template-empty {
    display: grid;
    gap: var(--space-1);
}

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

/* Version/lineage line in the builder header. */
.template-version-line {
    margin: 0;
    color: var(--text-secondary);
}

.template-version-label {
    font-weight: 600;
    color: var(--text-primary);
}

.template-version-head {
    font-weight: 600;
    color: var(--success-text);
}

.template-version-head-note {
    color: var(--text-muted);
}

/* Publication-readiness checklist, mirroring the session-readiness
   pattern so the design language is consistent. Colour is never the only signal
   (an icon and a state word accompany every row). */
.readiness-checklist {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.readiness-check {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.readiness-check .readiness-check-icon {
    align-self: center;
}

.readiness-check-label {
    color: var(--text-primary);
}

.readiness-check-state {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.readiness-check-detail {
    flex-basis: 100%;
    color: var(--text-muted);
}

/* The correction link on an outstanding readiness row: a full-width line
   beneath the detail so the row reads "what is wrong, then where to fix it". */
.readiness-check-correction {
    flex-basis: 100%;
}

.readiness-check--met {
    border-color: var(--success-border);
}

.readiness-check--met .readiness-check-label {
    color: var(--success-text);
}

.readiness-check--pending {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.readiness-check--pending .readiness-check-label,
.readiness-check--pending .readiness-check-state,
.readiness-check--pending .readiness-check-detail {
    color: var(--warning-text);
}

/* The one-line readiness statement beside the assessment toolbar. It states
   the same count the checklist itemises, in both the ready and the not-ready
   state, so an author never reads the absence of a warning as confirmation. */
.assessment-readiness-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0.3rem 0.6rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.assessment-readiness-summary--met {
    border-color: var(--success-border);
    color: var(--success-text);
}

.assessment-readiness-summary--pending {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

/* Navigation for a page split into server-rendered views (renderPageViewNav).
   These are links, not tabs: the server emits only the chosen view, so there
   is no hidden panel for arrow keys to move between and no tablist semantics
   to honour. The active link is marked with aria-current, and the underline
   is a second, non-colour signal of which view is open. */
.page-view-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--border-color);
}

.page-view-nav-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    text-decoration: none;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius-sm);
}

.page-view-nav-link:hover {
    color: var(--text-primary);
    background: var(--accent-subtle);
}

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

.page-view-nav-link--active {
    color: var(--text-primary);
    font-weight: 700;
    border-color: var(--border-color);
    background: var(--bg-panel-secondary);
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

.page-view-nav-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.page-view-nav-link--active .page-view-nav-meta {
    color: var(--text-secondary);
}

/* Moving between a session's views is a full navigation, because each view
   is its own server-rendered route. Opting the staff documents into the
   browser's cross-document view transition makes that navigation read as a
   switch rather than a reload: the outgoing page stays on screen until the
   incoming one is ready, the two crossfade, and the Session views strip
   (named below) keeps its identity and glides to its new position instead of
   fading. Browsers without the feature navigate exactly as before. The opt-in
   sits under no-preference so a reduced-motion reader gets no transition at
   all rather than a suppressed one. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

.page-view-nav--session {
    view-transition-name: session-views-nav;
}

.template-inline-delete {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
}

.template-editor-actions {
    align-items: center;
    margin-top: 0;
}

.template-editor-actions > form {
    display: flex;
}

@media (max-width: 720px) {
    .template-field--title {
        grid-column: auto;
    }

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

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

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

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

.marker-toolbar p {
    margin: 0;
}

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

/* ── Marker dashboard ───────────────────────────────────────────────────── */

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

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

.marker-question {
    display: grid;
    gap: var(--space-4);
    /* Use the full semantic tint: mixing it mostly back to the panel made the
       distinction disappear in Modern and Learning. Amber supplies component
       overrides because its success palette is intentionally dark green. */
    background: var(--marker-question-bg, var(--success-bg));
    border-color: var(--marker-question-border, var(--success-border));
}

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

.marker-score-field {
    align-self: start;
    max-width: 13rem;
}

.marker-score-field input[type="number"] {
    width: 8rem;
    max-width: 100%;
    min-height: 2.75rem;
}

/* Candidate answers only. An unbounded free-text answer pushes the mark scheme,
   score field and Save button arbitrarily below the fold on every question of
   every script; prompts, mark schemes and correct answers stay unconstrained
   because they are reference material the marker reads once. The box scrolls, so
   it must be reachable and scrollable by keyboard alone (WCAG 2.1.1) and carry
   the governed focus ring. */
.marker-pre--answer {
    max-height: 60vh;
    overflow-y: auto;
}

.marker-pre--answer:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* A frozen rich stem (question_content_json) on the marker screens: the same
   input-surface box as .marker-pre, but flowing as governed content blocks
   (not preformatted text) so authored paragraphs, lists, tables, images and
   equations keep their structure. */
.marker-prompt-content {
    background: var(--bg-input);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0.85rem;
}

.marker-prompt-content > :first-child {
    margin-top: 0;
}

.marker-prompt-content > :last-child {
    margin-bottom: 0;
}

.marker-prompt-content img {
    max-width: 100%;
    height: auto;
}

/* Tells markers where feedback goes (it is candidate-visible
   once results are released), shown under the feedback label on both screens. */
.marker-feedback-audience-note {
    display: block;
    margin: 0.1rem 0 0.35rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Publication-readiness checklist on the question editor Status
   section — mark scheme (hard) and Category (soft) checks shown before publish. */
.question-publish-checklist {
    list-style: none;
    margin: var(--space-2) 0 var(--space-3);
    padding: 0;
    display: grid;
    gap: var(--space-1);
    font-size: var(--font-size-md);
    line-height: 1.45;
}

.question-publish-checklist > li {
    padding: var(--space-1) 0 var(--space-1) 1.65rem;
    position: relative;
}

.question-publish-checklist > li::before {
    position: absolute;
    left: 0;
    top: var(--space-1);
    font-weight: 600;
}

.question-publish-checklist > li.check-pass {
    color: var(--success-text);
}

.question-publish-checklist > li.check-pass::before {
    content: "\2713"; /* check mark */
}

.question-publish-checklist > li.check-warn {
    color: var(--warning-text);
}

.question-publish-checklist > li.check-warn::before {
    content: "\26A0"; /* warning sign */
}

.question-publish-checklist > li.check-fail {
    color: var(--text-error);
}

.question-publish-checklist > li.check-fail::before {
    content: "\2715"; /* cross mark */
}

.marker-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.marker-question-workspace {
    display: grid;
    gap: var(--space-4);
}

.marker-question-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.marker-question-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.marker-question-nav {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.marker-question-nav-button {
    min-width: 4.75rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    padding: 0.5rem 0.65rem;
    text-align: left;
    cursor: pointer;
}

.marker-question-nav-button span,
.marker-question-nav-button small {
    display: inline-block;
    vertical-align: baseline;
}

.marker-question-nav-button span {
    font-weight: 700;
    line-height: 1.1;
    margin-right: 0.35rem;
}

.marker-question-nav-button small {
    color: var(--text-muted, var(--text-primary));
    font-size: var(--font-size-xs);
    line-height: 1.1;
}

.marker-question-nav-button.is-active,
.marker-question-nav-button:hover,
.marker-question-nav-button:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.marker-question-nav-button[data-marker-nav-status="full-marks"] {
    border-color: var(--success-text);
    background: color-mix(in srgb, var(--success-text) 10%, var(--bg-panel-secondary) 90%);
}

.marker-question-nav-button[data-marker-nav-status="below-full-marks"] {
    border-color: var(--warning-text);
    background: color-mix(in srgb, var(--warning-text) 12%, var(--bg-panel-secondary) 88%);
}

.marker-question-nav-button[data-marker-nav-status="full-marks"] small {
    color: var(--success-text);
}

.marker-question-nav-button[data-marker-nav-status="below-full-marks"] small {
    color: var(--warning-text);
}

.marker-question-nav-button.is-active[data-marker-nav-status="marked"] {
    background: color-mix(in srgb, var(--success-text) 16%, var(--bg-panel-secondary) 84%);
}

.marker-question-nav-button.is-active[data-marker-nav-status="unmarked"] {
    background: color-mix(in srgb, var(--warning-text) 18%, var(--bg-panel-secondary) 82%);
}

.marker-feedback {
    min-height: 1.5rem;
    white-space: pre-wrap;
}

.marker-question-feedback {
    color: var(--text-muted, var(--text-secondary));
}

.marker-lock {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Mark by question (cross-candidate marking) ──────────────────────────── */

/* Pin the prompt and mark scheme so the marker keeps the standard in view while
   scrolling the cohort's answers. The offset clears the sticky page header. */
.marker-question-sticky {
    position: sticky;
    top: 1rem;
    z-index: 2;
    /* The panel holds the full prompt and mark scheme, so it can be taller
       than the viewport. Without its own scroll it would pin over the
       candidate answers and make them unreachable (WCAG 1.4.10 reflow),
       which is routine at phone sizes and at 200%+ zoom. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

@media (max-width: 820px) {
    .marker-question-sticky {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

.marker-answer-head {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: baseline;
}

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

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

/* ── Rich content editor ─────────────────────────────────────────────────── */

.rich-editor {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-input);
    min-width: 0;
    transition: border-color var(--duration-base);
}

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

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3rem 0.45rem;
    border-bottom: var(--border-width) solid var(--border-color);
    background: var(--bg-panel-secondary);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

/* Documented deviation from the platform's 2.75rem control floor: a dense
   formatting toolbar at full size would wrap to three rows above every
   authoring field. 1.75rem (28px) satisfies WCAG 2.5.8's 24px minimum —
   the same registered exception the field help tip carries. */
.rich-editor-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding: 0 0.35rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: inherit;
    color: var(--btn-secondary-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    line-height: 1;
}

.rich-editor-toolbar-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.rich-editor-toolbar-btn:hover {
    background: var(--btn-secondary-bg);
    border-color: var(--border-color);
}

.rich-editor-toolbar-btn:focus-visible {
    outline: 2px solid var(--border-color-emphasis);
    outline-offset: 1px;
}

.rich-editor-toolbar-btn.is-active {
    background: var(--btn-secondary-bg);
    border-color: var(--border-color-emphasis);
    color: var(--border-color-emphasis);
}

.rich-editor-colour-control {
    position: relative;
}

/* The A glyph must read as one of the lettered format controls, so it inherits
   the toolbar button's size rather than setting its own: B, U, and I are bare
   letters in the button and any literal size here makes A the odd one out. */
.rich-editor-toolbar-colour-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

.rich-editor-toolbar-colour-icon--foreground {
    color: var(--text-error);
}

/* Depicts the editor's fixed yellow-highlight swatch (the same literal as the
   exempt content palette below), so it deliberately does not follow the theme. */
.rich-editor-toolbar-colour-icon--background {
    color: #1f2937;
    background: #fef08a;
    border-radius: var(--border-radius-xs);
}

.rich-editor-colour-palette {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    display: grid;
    grid-template-columns: repeat(8, 1.5rem);
    gap: 0.25rem;
    width: max-content;
    padding: 0.4rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-color-emphasis);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--elevation-2);
}

.rich-editor-colour-palette[hidden] {
    display: none;
}

.rich-editor-colour-palette-divider {
    grid-column: 1 / -1;
    height: 0;
    margin: 0.05rem 0;
    border-top: 1px solid var(--border-color);
    opacity: 0.45;
}

.rich-editor-colour-palette-divider--brands {
    border-top-style: dashed;
    border-top-color: var(--border-color-emphasis);
    opacity: 0.6;
}

/* Documented deviation from the 2.75rem control floor: a 16-swatch palette at
   full control size would not fit the picker. 1.5rem (24px) meets WCAG
   2.5.8's minimum, matching the field-help-tip exception. */
.rich-editor-colour-swatch {
    box-sizing: border-box;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xs);
    cursor: pointer;
}

.rich-editor-colour-swatch:hover,
.rich-editor-colour-swatch:focus-visible {
    /* The swatch colour itself remains fixed; the outline supplies the cue. */
    background-color: var(--rich-editor-swatch-colour);
    filter: none;
    opacity: 1;
    outline: 2px solid var(--border-color-emphasis);
    outline-offset: 1px;
}

.rich-editor-colour-swatch--brand {
    border-color: color-mix(in srgb, var(--border-color-emphasis) 65%, var(--rich-editor-swatch-colour));
}

.rich-editor-colour-reset {
    grid-column: 1 / -1;
    min-height: 1.75rem;
    padding: 0.15rem 0.4rem;
    color: var(--btn-secondary-text);
    background: var(--btn-secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 400;
    cursor: pointer;
}

.rich-editor-colour-reset:hover {
    background: var(--accent-subtle);
    color: var(--text-primary);
    border-color: var(--border-color-emphasis);
}

.rich-editor-colour-reset:focus-visible {
    border-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);
    caret-color: var(--text-primary);
    overflow-y: auto;
}

.rich-editor-source {
    display: block;
    width: 100%;
    min-height: 12rem;
    padding: 0.75rem;
    border: 0;
    border-top: var(--border-width) solid var(--border-color);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    resize: vertical;
    white-space: pre;
}

.rich-editor-source[hidden] {
    display: none;
}

.rich-editor-content > p,
.rich-editor-content > h2,
.rich-editor-content > h3,
.rich-editor-content > ul,
.rich-editor-content > ol {
    margin: 0 0 0.5rem;
}

.rich-editor-content > *:last-child {
    margin-bottom: 0;
}

.rich-editor-content > h2 {
    font-size: 1.15rem;
    font-weight: 600;
}

.rich-editor-content > h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
}

.rich-editor-content > ul,
.rich-editor-content > ol {
    padding-left: 1.4rem;
}

.rich-editor-content figure {
    margin: 0.5rem 0;
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.rich-editor-content figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm);
}

.rich-editor-content figcaption {
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
    margin-top: var(--space-1);
}

.rich-editor-image-remove {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-base);
}

.rich-editor-image-remove::before,
.rich-editor-image-remove::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.75rem;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--border-radius-pill);
    transform-origin: center;
}

.rich-editor-image-remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.rich-editor-image-remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.rich-editor-image-resize {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--shadow-color) 20%, transparent);
    color: var(--text-primary);
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity var(--duration-base);
}

.rich-editor-image-resize::before,
.rich-editor-image-resize::after {
    content: "";
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.rich-editor-image-resize::before {
    width: 0.7rem;
    height: 0.7rem;
}

.rich-editor-image-resize::after {
    width: 0.38rem;
    height: 0.38rem;
}

.rich-editor-content figure:hover .rich-editor-image-remove,
.rich-editor-content figure:focus-within .rich-editor-image-remove,
.rich-editor-content figure:hover .rich-editor-image-resize,
.rich-editor-content figure:focus-within .rich-editor-image-resize,
.rich-editor-content figure.is-resizing .rich-editor-image-resize {
    opacity: 1;
}

/* Placeholder text when content area is empty */
.rich-editor-content:empty::before,
.rich-editor-content[data-empty="true"]::before {
    content: attr(data-placeholder);
    color: var(--text-muted, var(--text-secondary));
    pointer-events: none;
    opacity: 0.6;
}

/* An empty contenteditable contains a real paragraph plus this generated
   placeholder. Some browsers place the selection against the generated text,
   leaving no visible insertion caret. Once focused, the field label supplies
   its context, so remove the placeholder and expose the real blinking caret. */
.rich-editor-content:focus[data-empty="true"]::before {
    display: none;
}

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

/* A session value replaces its assessment default; show that default clearly. */
.session-delivery-reference {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.session-delivery-reference section + section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border-color);
}

/* Reference-content sub-headings. h5 so they sit below the panel's own h3/h4
   in the page heading tree rather than outranking whole sections. */
.session-delivery-reference h5 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-base);
}

.session-delivery-reference__content > :last-child,
.session-delivery-reference__documents:last-child {
    margin-bottom: 0;
}

.session-delivery-reference__documents {
    margin-top: var(--space-2);
    padding-left: 1.25rem;
}

/* Option editor in the answer option rows */
.sr-option-row .rich-editor {
    min-width: 0;
}

.sr-option-row .rich-editor-content {
    min-height: 2.5rem;
}

/* Image insertion dialog */
.rich-editor-image-dialog {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rich-editor-image-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--shadow-color) 55%, transparent);
}

.rich-editor-image-dialog__panel {
    position: relative;
    z-index: 1;
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    width: min(480px, calc(100vw - 2rem));
    display: grid;
    gap: var(--space-3);
    box-shadow: var(--elevation-4);
}

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

.rich-editor-image-tabs {
    display: inline-flex;
    gap: var(--space-1);
    padding: 0.2rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    width: fit-content;
}

.rich-editor-image-tab {
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--btn-secondary-text);
    cursor: pointer;
}

.rich-editor-image-tab.is-active {
    background: var(--bg-panel);
    border-color: var(--border-color-emphasis);
    color: var(--text-primary);
    font-weight: 600;
}

.rich-editor-image-pane {
    display: none;
}

.rich-editor-image-pane.is-active {
    display: block;
}

.rich-editor-image-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--space-3);
    max-height: min(18rem, 42vh);
    overflow: auto;
    padding: 0.2rem;
}

.rich-editor-image-library-card {
    display: grid;
    gap: var(--space-2);
    min-height: 0;
    padding: 0.4rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}

.rich-editor-image-library-card:hover,
.rich-editor-image-library-card.is-selected {
    border-color: var(--border-color-emphasis);
}

.rich-editor-image-library-card.is-selected {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-color-emphasis) 35%, transparent);
}

.rich-editor-image-library-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--bg-panel-secondary);
    border-radius: var(--border-radius-sm);
}

.rich-editor-image-library-card span,
.rich-editor-image-library-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
}

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

/* Platform-mode owner attribution on library tiles (mirrors the Owner column). */
.rich-editor-image-library-owner {
    font-size: var(--font-size-xs);
    color: var(--text-muted, var(--text-secondary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rich-editor-image-dialog__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

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

/* ── Equation wrappers in the rich editor ──────────────────────────────── */

.rich-editor-equation {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0.15rem 0.35rem;
    border: 1px dashed transparent;
    border-radius: var(--border-radius-sm);
    vertical-align: middle;
}

.rich-editor-equation--display {
    display: block;
    margin: 0.75rem 0;
    text-align: center;
}

.rich-editor-equation:hover,
.rich-editor-equation:focus-within {
    border-color: var(--border-color-emphasis);
    background: var(--bg-panel-secondary);
}

.rich-editor-equation-preview {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
}

.rich-editor-equation-controls {
    display: inline-flex;
    gap: var(--space-1);
    margin-left: var(--space-2);
    vertical-align: middle;
    visibility: hidden;
}

.rich-editor-equation:hover .rich-editor-equation-controls,
.rich-editor-equation:focus-within .rich-editor-equation-controls {
    visibility: visible;
}

/* Deliberately below the 2.75rem control floor: these Edit/Delete controls
   float over an inline equation inside flowing text, and a full-height pair
   would cover the neighbouring words. 1.6rem (25.6px) still clears WCAG
   2.5.8's 24px minimum, matching the rich-editor toolbar deviation. */
.rich-editor-equation-controls button {
    min-height: 1.6rem;
    min-width: 0;
    padding: 0 0.5rem;
    font-size: var(--font-size-sm);
    line-height: 1;
}

/* ── Equation dialog ───────────────────────────────────────────────────── */

.rich-editor-equation-dialog__panel {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.rich-editor-equation-source {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    resize: vertical;
}

.rich-editor-equation-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.rich-editor-equation-shortcut {
    min-height: 1.8rem;
    padding: 0 0.55rem;
    font-size: var(--font-size-sm);
}

.rich-editor-equation-layout {
    display: grid;
    gap: var(--space-1);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 0.75rem;
}

.rich-editor-equation-layout legend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0 0.25rem;
}

.rich-editor-equation-preview-region {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    padding: 0.5rem 0.75rem;
    display: grid;
    gap: var(--space-1);
}

.rich-editor-equation-preview-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted, var(--text-secondary));
}

.rich-editor-equation-preview-output {
    min-height: 2.2rem;
    overflow-x: auto;
    text-align: center;
}

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

/* ── Admin breadcrumb ────────────────────────────────────────────────────── */

.admin-breadcrumb {
    margin-bottom: var(--space-2);
}

.admin-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--text-secondary));
}

.admin-breadcrumb li + li::before {
    content: '/';
    margin-right: 0.25rem;
    color: var(--text-muted, var(--text-secondary));
}

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

.admin-breadcrumb a:hover {
    text-decoration: underline;
}

.admin-breadcrumb [aria-current='page'] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Template authoring & question navigation ────────────────────────────── */

/* Contextual field help text */
.field-help {
    display: block;
    font-size: var(--font-size-md);
    color: var(--text-muted, var(--text-secondary));
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

/* Question editor: compact direct-access selector between Prev/Next buttons. */
.question-nav-select {
    width: auto;
    max-width: 11rem;
    min-height: 44px;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Icon-only First/Previous/Next/Last controls: 44px minimum touch target (iconography §7.3) */
.question-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

/* Template rule question picker */
.question-picker {
    margin-top: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xs);
    padding: 0.5rem;
}
.question-picker-body {
    margin-top: var(--space-2);
}
.question-picker-search {
    width: 100%;
    margin-bottom: var(--space-2);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xs);
    font-size: var(--font-size-sm);
}
.question-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 14rem;
    overflow-y: auto;
}
.question-picker-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}
.question-picker-item:last-child { border-bottom: none; }
.question-picker-add {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    font-size: var(--font-size-xs);
}
.question-picker-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.question-picker-code {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.question-picker-text {
    color: var(--text-secondary);
}
.question-picker-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 0.25rem 0;
}
.fixed-question-field {
    display: block;
    margin-bottom: var(--space-3);
}
.fixed-question-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
}
.fixed-question-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}
.fixed-question-item:last-child { border-bottom: none; }
.fixed-question-index {
    width: 3.5ch;
    flex: 0 0 3.5ch;
    color: var(--text-muted);
    text-align: left;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fixed-question-item .question-picker-label {
    flex: 1 1 auto;
}
.fixed-question-edit-link {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.fixed-question-edit-link:hover .question-picker-text,
.fixed-question-edit-link:focus-visible .question-picker-text {
    color: var(--accent-text);
    text-decoration: underline;
}
.fixed-question-remove {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    font-size: var(--font-size-xs);
}
/* Reorderable fixed-question rows: same drag affordances as the candidate
   ordering widget (grab cursor, dot-grid handle, dimmed row while dragging),
   with compact arrow buttons as the keyboard/single-pointer interaction. */
.fixed-question-item[draggable="true"] {
    cursor: grab;
    transition: opacity var(--duration-fast) ease;
}
.fixed-question-item[draggable="true"]:active {
    cursor: grabbing;
}
.fixed-question-item.is-dragging {
    opacity: 0.42;
}
.fixed-question-drag-handle {
    width: 0.75rem;
    height: 1.25rem;
    flex: 0 0 auto;
    align-self: center;
    background-image: radial-gradient(circle, currentColor 1.25px, transparent 1.5px);
    background-position: 0 0;
    background-size: 0.35rem 0.35rem;
    color: var(--text-secondary);
}
.fixed-question-move-controls {
    display: inline-flex;
    gap: var(--space-1);
    flex-shrink: 0;
}
.fixed-question-move {
    display: inline-grid;
    width: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.1rem;
    place-items: center;
    font-size: var(--font-size-sm);
    line-height: 1;
}
.fixed-question-empty {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 0.25rem 0;
}

/* Selection-rule option checkboxes */
.template-rule-option {
    display: grid;
    grid-template-columns: 1rem minmax(0, max-content);
    align-items: center;
    column-gap: var(--space-2);
    width: fit-content;
}
.template-rule-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
}
.template-rule-option .field-label-row {
    min-width: 0;
}
.random-at-publish-preview {
    margin-bottom: var(--space-3);
}
.random-at-publish-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.random-at-publish-frozen {
    margin-top: var(--space-2);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}
.random-at-publish-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem 0 0;
}
.random-at-publish-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}
.random-at-publish-item:last-child { border-bottom: none; }
.random-at-publish-empty,
.random-at-publish-error {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 0.25rem 0;
}
.random-at-publish-error { color: var(--text-error); }

/* ── Psychometrics & calibration ─────────────────────────────────────────── */

/* Psychometric metadata on questions */

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

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

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

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

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

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

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

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

.exposure-progress {
    margin-top: var(--space-1);
    width: 100%;
    height: 0.5rem;
    border-radius: var(--border-radius-sm);
    background: var(--bg-status-closed);
    overflow: hidden;
}

.exposure-progress-bar {
    display: block;
    height: 100%;
    background: var(--border-status-ready);
}

.psychometrics-cap-form,
.psychometrics-approve-form {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.psychometrics-cap-form label {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* The optional licence attribution line ("powered by / © Owner"), shown
   to a licensee on content licensed to them. Display only — it carries no other
   licence field and never reaches the candidate's frozen script. A muted, italic
   credit so it reads as attribution, not a heading or a call to action. */
.content-attribution {
    font-style: italic;
    color: var(--text-secondary);
}

.psychometrics-cap-form input[type="number"] {
    width: 9rem;
}

/* Performance feedback loop */

.performance-metrics-row {
    display: grid;
    gap: var(--space-1);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.performance-metrics-row h3 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.review-flags-block {
    display: grid;
    gap: var(--space-2);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.review-flags-block h3 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

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

.review-flags-list li {
    margin-bottom: var(--space-1);
}

.review-flag-descriptions {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.review-flag-severity-info,
.review-flag-severity-warning,
.review-flag-severity-critical {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

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

.review-flag-severity-warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.review-flag-severity-critical {
    background: var(--bg-error);
    border-color: var(--border-error);
    color: var(--text-error);
}

/* Calibration lifecycle */
.psychometrics-dashboard {
    display: grid;
    gap: var(--space-5);
}

.psychometrics-panel {
    display: block;
}

.calibration-status-summary {
    width: auto;
}

.calibration-status-summary-row td {
    padding: 0.25rem 0.75rem;
}

.retirement-recommendations-table {
    width: 100%;
}

.review-flag-action-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: end;
    margin: 0.25rem 0;
}

.review-flag-action-form label {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-sm);
    gap: var(--space-1);
}

.retirement-reason-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--border-radius-pill);
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.retirement-reason-persistent_low_discrimination {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.retirement-reason-exposure_cap_reached {
    background: var(--bg-error);
    border-color: var(--border-error);
    color: var(--text-error);
}

.retirement-reason-persistent_distractor_imbalance {
    background: var(--bg-status-info);
    border-color: var(--border-status-info);
    color: var(--text-status-info);
}

.retirement-reason-manual_request {
    background: var(--bg-status-sky);
    border-color: var(--border-status-sky);
    color: var(--text-status-sky);
}

.threshold-config-table {
    width: auto;
}

.threshold-config-table td {
    vertical-align: middle;
}

.threshold-config-form {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}

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

/* ── Standard setting ────────────────────────────────────────────────────── */

/* Standard-setting */
.standard-setting-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
}

.standard-setting-method-select {
    min-width: 12rem;
}

.standard-setting-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0.5rem 0;
}

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

.standard-setting-method-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--border-radius-xs);
    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(--warning-bg);
    border: var(--border-width) solid var(--warning-text);
    border-radius: var(--border-radius-md);
    color: var(--warning-text);
    font-style: italic;
    margin: 0.5rem 0;
}

/* ── Reports & analysis ──────────────────────────────────────────────────── */

/* Core analysis modules */
.analysis-runs-panel pre {
    max-height: 18rem;
    overflow: auto;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-panel-secondary);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

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

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

/* The results overview's grouped destinations: one group per kind of result. */
.reports-nav-groups {
    display: grid;
    gap: var(--space-4);
}

.reports-nav-group > .admin-helper {
    margin-bottom: var(--space-2);
}

.reports-nav {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-4) 1.15rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--bg-panel-secondary) 22%);
    box-shadow: var(--elevation-2);
}

.reports-nav p {
    margin: 0;
}

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

.reports-print-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.8rem;
}

.reports-print-action-icon {
    flex: 0 0 auto;
}

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

.session-report-export-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: var(--space-4);
}

.session-report-export-grid > .card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
}

.session-report-export-grid > .card > p {
    margin-top: 0;
}

.session-report-export-grid > .card > .actions {
    margin-top: auto;
}

.session-report-print-export {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

@media (min-width: 900px) {
    .reports-nav {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        align-items: center;
    }

}

/* Four columns fit the report panel, including in the shared print layout. */
.session-report-view .candidate-table.question-bank-performance-table {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
}

/* Written as th/td pairs rather than :is(th, td): the candidate-audience
   stylesheet census splits selector lists on commas, and a comma inside
   :is() would read as a bare "td):nth-child(n)" rule. */
.session-report-view .candidate-table.question-bank-performance-table th:nth-child(1),
.session-report-view .candidate-table.question-bank-performance-table td:nth-child(1) { width: 42%; }
.session-report-view .candidate-table.question-bank-performance-table th:nth-child(2),
.session-report-view .candidate-table.question-bank-performance-table td:nth-child(2) { width: 24%; }
.session-report-view .candidate-table.question-bank-performance-table th:nth-child(3),
.session-report-view .candidate-table.question-bank-performance-table td:nth-child(3) { width: 18%; }
.session-report-view .candidate-table.question-bank-performance-table th:nth-child(4),
.session-report-view .candidate-table.question-bank-performance-table td:nth-child(4) { width: 16%; }

.session-report-view .question-bank-performance-table th,
.session-report-view .question-bank-performance-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.question-bank-performance-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
}

.question-bank-performance-metrics dt {
    color: var(--text-muted);
    font-weight: 400;
}

.question-bank-performance-metrics dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Give report summaries their own row so controls cannot squeeze the copy. */
.reports-nav.report-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.report-intro .admin-helper {
    max-width: 85ch;
}

.report-intro .reports-nav-links {
    align-items: center;
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
}

.report-intro .reports-nav-links [data-print-page] {
    margin-inline-start: auto;
}

@media (max-width: 600px) {
    .report-intro .reports-nav-links > * {
        width: 100%;
    }
}

.analysis-reports-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.analysis-reports-shell {
    display: grid;
    gap: var(--space-4);
}

.analysis-reports-nav {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--bg-panel) 88%, var(--accent-subtle) 12%);
    box-shadow: var(--elevation-2);
}

.analysis-reports-nav ul {
    margin-top: var(--space-2);
}

.analysis-reports-nav a,
.analysis-reports-nav .button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.analysis-reports-nav a:hover,
.analysis-reports-nav .button:hover,
.analysis-reports-nav a:focus-visible {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--text-primary);
}

/* Keyboard focus keeps the governed ring; recolouring the border alone matches
   the hover state and so says nothing about focus. */
.analysis-reports-nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.analysis-reports-nav a.is-active,
.analysis-reports-nav .button.is-active {
    font-weight: 600;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-panel) 84%);
    color: var(--text-primary);
    text-decoration: none;
}

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

.analysis-report-table-wrap {
    margin-top: var(--space-1);
}

.analysis-report-render .workspace-section-label + .analysis-report-table-wrap,
.analysis-report-render .admin-helper + .analysis-report-table-wrap {
    margin-top: 0;
}

.analysis-report-render .candidate-table td,
.analysis-report-render .candidate-table th {
    vertical-align: middle;
}

.analysis-report-render .candidate-table td:last-child,
.analysis-report-render .candidate-table th:last-child {
    white-space: nowrap;
}

.analysis-report-render .report-stats-grid {
    margin-top: var(--space-1);
}

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

.coverage-flag-insufficient_n {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.coverage-flag-no_variance {
    background: var(--bg-error);
    color: var(--text-error);
}

.distractor-flag-pill {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: var(--border-radius-xs);
    background: var(--bg-panel-secondary);
    font-size: var(--font-size-sm);
}

.distractor-flag-pill-weak {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.distractor-flag-pill-misleading {
    background: var(--bg-error);
    color: var(--text-error);
}

.discrimination-row-negative td {
    background: var(--bg-error);
}

.discrimination-row-low td {
    background: var(--warning-bg);
}

.discrimination-row-acceptable td {
    background: var(--success-bg);
}

/* ── Specialist-page audience lead ───────────────────────────────────────── */

/* Specialist-page audience lead. */
.page-audience-lead {
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--accent-subtle);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* ── Audit events row layout ─────────────────────────────────────────────── */

/* Audit-events row layout. The primary scan unit is
   timestamp + summary + actor; the entity and request-id detail moves
   behind a per-row Technical details accordion in the trailing column. */
.audit-events-table .audit-col-when {
    width: 14rem;
    white-space: nowrap;
}

.audit-events-table .audit-col-summary .audit-event-summary {
    display: block;
}

.audit-events-table .audit-col-summary .audit-event-type {
    display: block;
    color: var(--text-secondary);
}

.audit-events-table .audit-col-actor .audit-actor-name {
    display: block;
}

.audit-events-table .audit-col-actor .audit-actor-role {
    display: block;
    color: var(--text-secondary);
}

.audit-events-table .audit-col-details {
    width: 18rem;
}

.audit-event-technical {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-2);
}

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

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

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

/* ── Metadata grid ───────────────────────────────────────────────────────── */

/* Shared metadata-grid primitive. A two-column <dl> used inside
   Technical details accordions (marker queue, audit events) for compact
   key/value pairs. */
.metadata-grid {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-2);
}

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

.metadata-grid dd {
    margin: 0;
}

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

/* ── Marker queue & dashboard ────────────────────────────────────────────── */

/* Marker queue four-column row layout. The primary scan unit is
   Script + Status + Waiting; raw script ids and the marking-status code move
   behind a per-row Technical details accordion in the trailing column. */
.marker-queue-table .marker-col-waiting {
    white-space: nowrap;
    width: 9rem;
}

.marker-queue-table .marker-col-details {
    width: 18rem;
}

.marker-queue-table .marker-col-action {
    width: 8rem;
    white-space: nowrap;
}

.marker-queue-candidate,
.marker-queue-assessment,
.marker-queue-status,
.marker-queue-progress {
    display: block;
}

.marker-queue-assessment,
.marker-queue-progress {
    color: var(--text-secondary);
}

/* Marker dashboard headline. One scannable sentence with three
   clauses; each clause links to the corresponding view of the marker queue. */
.marker-dashboard-headline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-2);
    align-items: baseline;
    margin: 0.4rem 0 0 0;
}

.marker-headline-clause {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--text-primary);
}

.marker-headline-clause strong {
    font-size: 1.4rem;
    line-height: 1;
}

.marker-headline-clause:hover,
.marker-headline-clause:focus {
    text-decoration: underline;
}

.marker-headline-clause--static {
    cursor: default;
}

.marker-headline-clause--static:hover,
.marker-headline-clause--static:focus {
    text-decoration: none;
}

.marker-headline-separator {
    color: var(--text-secondary);
}

/* ── Invigilator dashboard & session clock ───────────────────────────────── */

/* Invigilator dashboard operational row layout. Mirrors the
   marker queue treatment. Candidate name + status
   chip + relative-time last-activity is the primary scan; raw script ids and
   heartbeat fingerprints move behind a per-row Technical details accordion. */
/* Needs-attention filter: rows the count does not include are hidden while the
   toggle is pressed, except a row the operator is working in (focus inside it),
   which stays put so an action is never pulled out from under them. */
.invigilator-dashboard-table[data-attention-only] tbody tr[data-needs-attention="0"]:not(:focus-within) {
    display: none;
}

.invigilator-attention-toggle {
    margin-top: var(--space-2);
}

.invigilator-dashboard-table .invigilator-col-candidate {
    width: 14rem;
}

.invigilator-dashboard-table .invigilator-col-status {
    width: 16rem;
}

.invigilator-dashboard-table .invigilator-col-mark {
    width: 9rem;
    white-space: nowrap;
}

.invigilator-dashboard-table .invigilator-col-activity {
    width: 10rem;
    white-space: nowrap;
}

.invigilator-dashboard-table .invigilator-col-details {
    width: 18rem;
}

.invigilator-dashboard-table .invigilator-col-action {
    width: 9rem;
    white-space: nowrap;
}

/* On narrow operational screens (an iPad in portrait is a real
   live-supervision setting) the fixed column plan above totals ~76rem and
   pushes most of the table into sideways scrolling. Below 1100px the columns
   release their fixed widths and nowrap so the primary scan compresses to
   the table's shared minimum width instead, and the scroll region carries
   whatever still overflows. */
@media (max-width: 1100px) {
    .invigilator-dashboard-table .invigilator-col-candidate,
    .invigilator-dashboard-table .invigilator-col-status,
    .invigilator-dashboard-table .invigilator-col-mark,
    .invigilator-dashboard-table .invigilator-col-activity,
    .invigilator-dashboard-table .invigilator-col-details,
    .invigilator-dashboard-table .invigilator-col-action {
        width: auto;
    }

    .invigilator-dashboard-table .invigilator-col-mark,
    .invigilator-dashboard-table .invigilator-col-activity,
    .invigilator-dashboard-table .invigilator-col-action {
        white-space: normal;
    }
}

.invigilator-dashboard-table .invigilator-candidate-row--completed > td {
    background: color-mix(in srgb, var(--success-bg) 82%, var(--bg-panel-secondary));
    border-color: color-mix(in srgb, var(--success-border) 62%, var(--border-color));
}

/* Session clock (room clock + elapsed-time cues). The elapsed readout uses
   tabular numerals so the per-second tick never jitters horizontally; the
   due-cue alerts reuse the governed warning notice tones so theme,
   forced-colours, and print treatments follow the shared notice styling. */
.session-clock-elapsed {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
}

.session-clock-elapsed-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.session-clock-elapsed-caption {
    color: var(--text-secondary);
}

.session-clock-sidebar-card .session-clock-elapsed {
    margin-bottom: 0;
}

/* Invigilator "Join assessment" card: the access code is read aloud or
   transcribed by candidates across a room, so it renders display-sized
   rather than at the card's small-print size. */
.session-join-code {
    margin: 0;
    color: var(--sidebar-card-label, var(--text-secondary));
}

.session-join-code code {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sidebar-card-text, var(--text-primary));
    overflow-wrap: anywhere;
}

.session-clock-details {
    margin: 0;
}

.session-clock-cue-list {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.session-clock-cue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.session-clock-cue[data-cue-state="due"] {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

.session-clock-cue-state {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.session-clock-cue-actions {
    display: inline-flex;
    gap: 0.5rem;
    margin-left: auto;
}

.session-clock-due-alert {
    display: block;
}

.session-clock-due-heading {
    margin: 0;
    font-size: 1.15rem;
}

.session-clock-due-message {
    margin: 0.25rem 0 0.6rem;
    font-size: 1.05rem;
}

.session-clock-sound {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.session-clock-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.invigilator-attempt-status,
.invigilator-progress {
    display: block;
    color: var(--text-secondary);
}

.invigilator-help-row {
    display: block;
    margin-top: var(--space-1);
}

.invigilator-help-pill {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    max-width: 16rem;
    padding: 0.16rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--highlight-attention) 58%, var(--border-color));
    border-radius: var(--border-radius-sm);
    background: color-mix(in srgb, var(--highlight-attention) 46%, var(--bg-panel));
    color: var(--highlight-attention-text);
    font-size: var(--font-size-sm);
    line-height: 1.25;
    white-space: normal;
    box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--highlight-attention) 16%, transparent);
}

.invigilator-help-pill-icon {
    flex: 0 0 auto;
    margin-top: var(--space-1);
}

.invigilator-question-indicator {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-left: 0.35rem;
    padding: 0.08rem 0.45rem;
    border-radius: var(--border-radius-pill);
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
    color: var(--accent-hover);
    transition: background-color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) ease;
}

.invigilator-question-indicator strong {
    font-weight: 800;
}

.invigilator-question-indicator.is-updating {
    animation: invigilator-question-change 1.8s ease-out;
}

@keyframes invigilator-question-change {
    0% {
        transform: scale(1);
        background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent);
    }

    16% {
        transform: scale(1.08);
        background: color-mix(in srgb, var(--highlight-attention) 46%, var(--bg-panel));
        box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--highlight-attention) 18%, transparent);
    }

    100% {
        transform: scale(1);
        background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
        box-shadow: 0 0 0 0 transparent;
    }
}

.invigilator-anomalies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

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

/* ── Question durations report ───────────────────────────────────────────── */

/* Question durations report */
.question-durations-card {
    display: grid;
    gap: var(--space-3);
}

.question-durations-card h2,
.question-durations-card .admin-helper,
.question-durations-card .admin-note {
    margin: 0;
}

.question-durations-card h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.question-durations-card .admin-helper,
.question-durations-card .admin-note {
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.question-durations-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.question-durations-form label {
    display: grid;
    gap: var(--space-1);
    flex: 1 1 18rem;
    max-width: 34rem;
    font-weight: 700;
    font-size: var(--font-size-md);
}

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

@media (max-width: 720px) {
    .question-durations-form {
        display: grid;
    }

    .question-durations-form label {
        max-width: none;
    }

    .question-durations-form .button {
        width: 100%;
    }
}

/* ── Session command centre ─────────────────────────────────────────────────
   The session detail page's "what to do next" surface: one prioritised next
   action and the full journey as a stable strip. All
   states are named in text so the surface reads without colour; colour is a
   reinforcement only. */

.session-next-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--border-status-ready);
    border-radius: var(--border-radius-md);
    background: var(--bg-status-ready);
    color: var(--text-status-ready);
}

.session-next-action-label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.session-next-action-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* All of a session's action buttons share one row: the primary next action on
   the left, the secondary lifecycle controls grouped and slightly separated to
   its right. */
.session-next-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.session-next-action-secondary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border-left: var(--border-width) solid var(--border-status-ready);
}

/* Delivery / results stated as two tracks beneath the next action, and the
   work that runs alongside live delivery. */
.session-progress-tracks {
    margin-top: var(--space-3);
}

.session-parallel-action {
    margin-top: var(--space-2);
}

.session-next-action-reason,
.session-next-action-help {
    margin: 0;
    font-size: var(--font-size-md);
}

.session-next-action-help {
    line-height: 1.6;
}

/* Workflow strip: a compact, wrapping row of ordered steps. */
.session-workflow-strip {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.session-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.session-step-state {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.session-step--done {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.session-step--done .session-step-state {
    color: inherit;
}

.session-step--current {
    background: var(--bg-status-ready);
    border-color: var(--border-status-ready);
    color: var(--text-status-ready);
    font-weight: 700;
}

.session-step--current .session-step-state {
    color: inherit;
}

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

.session-step--blocked .session-step-state {
    color: inherit;
}

/* The "To do" state keeps the neutral panel of the base
   chip but mutes the label, so not-yet steps read quieter than the
   highlighted current/done/blocked states. */
.session-step--upcoming {
    color: var(--text-muted);
}

/* Readiness checklist: a stacked list keyed by the same step states. */
.session-readiness {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.session-check {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-panel-secondary);
}

.session-check .session-check-icon {
    align-self: center;
}

.session-check-label {
    color: var(--text-primary);
}

.session-check-state {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.session-check-reason {
    flex-basis: 100%;
    color: var(--text-muted);
}

.session-check--met {
    border-color: var(--success-border);
}

.session-check--met .session-check-label {
    color: var(--success-text);
}

.session-check--current {
    border-color: var(--border-status-ready);
}

/* The "Not yet" state keeps the neutral border and mutes
   the label — the quiet sibling of --met (success border) and --current
   (ready border). */
.session-check--pending .session-check-label {
    color: var(--text-muted);
}

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

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

/* ── Candidate setup panel ───────────────────────────────────────────────────
   The three plain candidate-setup routes on the session command centre. Reuses
   the shared design tokens; no inline styles, no uppercase text-transform. */

.session-setup-choices {
    display: grid;
    /*
       Self-registration is the normal session path, followed by adding one
       candidate. Keep both comfortably wide, with CSV import in the third column.
    */
    grid-template-columns: minmax(18rem, 2fr) minmax(16rem, 1.25fr) minmax(13rem, 0.9fr);
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.session-setup-choice {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.session-setup-choice-import {
    grid-column: 3;
}

.session-join-access-summary {
    margin-top: var(--space-2);
}

.session-join-access-controls .admin-detail-grid {
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}

.session-join-access-controls {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.session-join-access-controls .edit-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: 0;
    max-width: 100%;
}

.session-join-access-controls > .admin-feedback:empty {
    display: none;
}

.session-join-access-controls .edit-form-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.session-join-access-controls .edit-form-row > * {
    min-width: 0;
}

.session-join-access-capacity-panels {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-3);
}

.session-join-access-capacity-panel {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.session-join-access-capacity-label {
    font-weight: 700;
}

/* Display size above the body scale (the token scale stops at --font-size-base). */
.session-join-access-capacity-panel strong {
    font-size: 1.2rem;
}

.session-join-access-controls input {
    max-width: 100%;
}

.session-join-access-controls .actions {
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
}

.session-join-access-controls .actions button {
    flex: 0 0 auto;
}

.session-join-access-controls .actions > span {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

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

.session-setup-manage {
    margin-top: var(--space-3);
}

@media (max-width: 560px) {
    .session-join-access-capacity-panels {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1080px) {
    .session-setup-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .session-setup-choice-join-access,
    .session-setup-choice-add-one,
    .session-setup-choice-import {
        grid-column: auto;
        grid-row: auto;
    }
}

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

/* ── Operations action queue ─────────────────────────────────────────────────
   The operations dashboard's primary content: "what needs attention now",
   grouped by step. Each row names its session, its reason, and one direct
   action. Reuses the shared design tokens; no inline styles, no uppercase
   text-transform. */

.action-queue {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.action-queue-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.action-queue-group-label {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.action-queue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: var(--border-radius-pill);
    background: var(--bg-panel-secondary);
    border: var(--border-width) solid var(--border-color);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.action-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.action-queue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.75rem 0.9rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
}

.action-queue-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.action-queue-name {
    font-weight: 600;
}

.action-queue-meta {
    color: var(--text-muted);
}

.action-queue-reason {
    margin: 0.1rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

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

.action-queue-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

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

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

/* ── Session question paper (print) ──────────────────────────────────────── */

/* Printable session question paper (admin/session_paper.php).
   Screen shows the sheet inside the normal admin shell; print strips the
   shell chrome (the masthead sits inside the page container that carries the
   page-scoped class, so the rule below reaches it) and keeps only the paper
   itself. */
.paper-sheet {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--space-5);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
}

.session-paper-view .no-print + .paper-sheet {
    margin-top: var(--space-6);
}

.paper-title {
    margin: 0;
}

.paper-subtitle {
    margin: 0.2rem 0 0;
    color: var(--text-secondary);
}

.paper-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-3) 0 0;
}

.paper-meta div {
    display: flex;
    gap: var(--space-2);
}

.paper-meta dt {
    font-weight: 600;
}

.paper-meta dd {
    margin: 0;
}

.paper-candidate-fields {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
}

.paper-candidate-field {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.paper-candidate-field-label {
    flex: 0 0 auto;
    font-weight: 600;
}

.paper-candidate-field-line {
    flex: 1 1 auto;
    min-height: 1.6rem;
    border-bottom: 1px solid var(--border-color);
}

.paper-section {
    margin-top: var(--space-5);
}

.paper-section-title {
    padding-bottom: var(--space-1);
    border-bottom: 2px solid var(--text-primary);
}

.paper-section-marks {
    font-weight: 400;
    color: var(--text-secondary);
}

.paper-section-instructions {
    margin-top: var(--space-2);
    color: var(--text-secondary);
}

.paper-question {
    margin-top: var(--space-4);
}

.paper-question-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

.paper-question-marks {
    color: var(--text-secondary);
    white-space: nowrap;
}

.paper-question-categories {
    margin: calc(var(--space-1) * -1) 0 var(--space-2);
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* Per-question pre-approval marker on the assessment question paper. Red
   italic bold — the italic + weight (not colour alone) keep the flag legible
   on a greyscale print. */
.paper-question-unapproved {
    margin: calc(var(--space-1) * -1) 0 var(--space-2);
    color: var(--text-error);
    font-size: 0.9em;
    font-style: italic;
    font-weight: 600;
}

.paper-question-instructions {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

.paper-response-guidance {
    margin: var(--space-2) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.paper-options,
.paper-matching-options {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.paper-option,
.paper-matching-option {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.paper-mark-box,
.paper-write-box {
    flex: 0 0 auto;
    align-self: center;
    border: 1.5px solid var(--text-primary);
    border-radius: var(--border-radius-xs);
}

.paper-mark-box {
    width: 1.1rem;
    height: 1.1rem;
}

.paper-write-box {
    width: 1.8rem;
    height: 1.5rem;
}

.paper-option-letter {
    flex: 0 0 auto;
    min-width: 1.4rem;
    font-weight: 600;
}

.paper-option-body {
    flex: 1 1 auto;
}

.paper-option-body p {
    margin: 0;
}

.paper-ordering-items,
.paper-matching-prompts {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.paper-ordering-item,
.paper-matching-prompt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.paper-written-answer {
    margin-top: var(--space-2);
}

.paper-answer-line {
    min-height: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.paper-answer-line--numeric {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    max-width: 20rem;
    margin-top: var(--space-2);
}

.paper-answer-line-label {
    font-weight: 600;
}

/* Marking guide sheet: the same paper with the answer key, mark scheme and a
   marks-awarded box in place of each answer space, closed by a totals table.
   Labels are small caps-weight text rather than headings so the printed
   question keeps its single heading level. */
.paper-question-type {
    color: var(--text-secondary);
    font-weight: 400;
}

.paper-marking-guide {
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.paper-marking-label {
    margin: var(--space-2) 0 var(--space-1);
    font-weight: 600;
}

.paper-marking-guide > .paper-marking-label:first-child {
    margin-top: 0;
}

.paper-marking-note {
    margin: var(--space-1) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.paper-marking-value {
    margin: 0;
    font-weight: 600;
}

.paper-marking-text {
    margin: 0;
    white-space: normal;
}

.paper-marking-answers,
.paper-marking-matches {
    list-style: none;
    margin: 0;
    padding: 0;
}

.paper-marking-answer {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.paper-marking-matches li {
    margin-top: var(--space-1);
}

.paper-marking-match-prompt,
.paper-marking-match-answer {
    font-weight: 600;
}

.paper-marking-order {
    margin: 0;
    padding-left: 1.5rem;
}

.paper-mark-scheme,
.paper-marking-totals {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.paper-mark-scheme th,
.paper-mark-scheme td,
.paper-marking-totals th,
.paper-marking-totals td {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.paper-mark-scheme-points {
    width: 6rem;
    white-space: nowrap;
}

.paper-marks-awarded {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: var(--border-width) solid var(--border-color);
}

.paper-marks-awarded-label {
    font-weight: 600;
}

.paper-write-box--marks {
    width: 3.2rem;
    height: 1.8rem;
}

.paper-marking-totals {
    max-width: 32rem;
    margin-top: var(--space-5);
}

.paper-marking-totals-total th,
.paper-marking-totals-total td {
    font-weight: 600;
}

/* The Awarded cells are the write-in spaces: input surface, not panel tint. */
.paper-marking-totals-awarded {
    min-width: 6rem;
    background: var(--bg-input);
}

/* Answer key sheet: the compact grid (question number against option
   letters, an X under each correct letter, text keys spanning the letter
   columns) and the marks-record bands beneath it. Both are ruled tables so
   a marker can run a finger along a row. */
.paper-answer-key,
.paper-marks-record {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.paper-answer-key th,
.paper-answer-key td,
.paper-marks-record th,
.paper-marks-record td {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    text-align: center;
    vertical-align: middle;
}

.paper-answer-key thead th,
.paper-answer-key-section th,
.paper-marks-record th {
    font-weight: 600;
}

.paper-answer-key-number {
    width: 5.5rem;
}

.paper-answer-key-marks {
    width: 5rem;
}

.paper-answer-key-section th,
.paper-answer-key-text {
    text-align: left;
}

.paper-answer-key-cell--correct {
    font-weight: 700;
}

.paper-answer-key-legend {
    margin: var(--space-2) 0 0;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.paper-marks-record th[scope="row"] {
    width: 8rem;
    text-align: left;
    white-space: nowrap;
}

/* The write-in cells take the input surface, not the panel tint, so they
   read as spaces to write in — white on every light theme. */
.paper-marks-record-awarded td {
    height: 2rem;
    background: var(--bg-input);
}

.paper-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.paper-footer p {
    margin: 0;
}

.paper-footer .paper-produced-by {
    margin-top: var(--space-1);
}

.paper-signature {
    font-family: var(--font-mono, monospace);
    overflow-wrap: anywhere;
}

@media (min-width: 700px) {
    .paper-candidate-fields {
        grid-template-columns: 2fr 1.5fr 1fr;
    }

    /* The marking guide adds a Marker line to the header fields. */
    .paper-candidate-fields--marker {
        grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    }
}

@media print {
    .session-paper-view .page-masthead,
    .session-paper-view .page-context-nav {
        display: none !important;
    }

    .session-paper-view {
        padding: 0;
        margin: 0;
    }

    .paper-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: #ffffff;
        color: #000000;
    }

    .paper-question {
        break-inside: avoid;
    }

    .paper-section-title,
    .paper-section-instructions {
        break-after: avoid;
    }

    /* Writing guides print grey so they recede behind handwriting; the
       mark/write-in boxes stay black — they are answer targets, not guides. */
    .paper-candidate-field-line,
    .paper-answer-line {
        border-bottom-color: #767676;
    }

    .paper-mark-box,
    .paper-write-box {
        border-color: #000000;
    }

    /* The marking guide block stays with its question; its frame and the
       mark-scheme rules print grey so the key and the write-in box lead. */
    .paper-marking-guide {
        break-inside: avoid;
        border-color: #767676;
    }

    .paper-mark-scheme th,
    .paper-mark-scheme td,
    .paper-marking-totals th,
    .paper-marking-totals td {
        border-color: #767676;
    }

    .paper-marking-totals {
        break-inside: avoid;
    }

    /* The answer-key grids may split across pages, but never mid-row, and
       their rules print grey so the X marks and handwriting lead. */
    .paper-answer-key th,
    .paper-answer-key td,
    .paper-marks-record th,
    .paper-marks-record td {
        border-color: #767676;
    }

    .paper-answer-key tr,
    .paper-marks-record tr {
        break-inside: avoid;
    }

    .paper-marks-record-awarded td,
    .paper-marking-totals-awarded {
        background: #ffffff;
    }
}

/* ── Billing statement ───────────────────────────────────────────────────── */

/* Billing statement (admin/billing_statement.php). A statement is read top to
   bottom by somebody reconciling an invoice, and is routinely printed to PDF
   and sent on, so the subject and period are stated once at the top in plain
   text rather than carried only by the page header. */
.billing-statement-subject {
    margin: 0 0 0.25rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.billing-statement-period {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

/* The footer rows beneath each month's lines: the Charged row adds the
   Sittings column above it, and the conditional Individual candidates row explains
   a month where fewer people account for more sittings. The rule above the
   block separates the sums from the lines so the reader never mistakes one row
   kind for the other. */
.billing-statement-subtotal th,
.billing-statement-subtotal td {
    border-top: var(--border-width) solid var(--border-color);
    background: color-mix(in srgb, var(--bg-panel-secondary) 82%, var(--accent-subtle) 18%);
}

.billing-statement-subtotal th {
    text-align: left;
    font-weight: 600;
}

.billing-statement-subtotal .admin-helper {
    display: block;
}

/* Print: the statement is routinely printed to PDF and sent to the customer,
   so the paper copy is treated as a document in its own right — it opens with
   the print-only header (the shell masthead is stripped from print), keeps its
   arithmetic rows intact across page breaks, and drops every screen-only
   affordance (colour washes, link styling, scroll regions). */
@media print {
    .billing-statement-print-header {
        margin: 0 0 1rem 0;
        padding: 0 0 0.75rem 0;
        border-bottom: 2px solid #000;
    }

    /* 1.5rem literal: a display size above the body, per the typography-scale
       guard's print allowance. */
    .billing-statement-print-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #000;
    }

    .billing-statement-print-meta {
        margin: 0.25rem 0 0 0;
        font-size: var(--font-size-sm);
        color: #000;
    }

    /* A month's lines may run over a page; repeating the header keeps the
       columns readable on every sheet of a printed statement. */
    .billing-statement-month thead {
        display: table-header-group;
    }

    .billing-statement-month tfoot {
        display: table-row-group;
    }

    /* The table scroller is a screen affordance; on paper it must not clip. */
    .billing-statement-month .table-scroll {
        overflow: visible;
    }

    /* The statement tables carry candidate-table--narrow, which already opts
       out of the shared 980px data-table minimum — kept as belt and braces
       because print media matches the max-width query that applies it, and a
       reformat that dropped the modifier would silently run the table off the
       sheet (paper cannot scroll). Fit the page, and tighten the cells: the
       name and activity columns wrap, and the Usage column stacks its own
       detail line. */
    .billing-statement-month .candidate-table {
        min-width: 0;
        width: 100%;
    }

    .billing-statement-month .candidate-table th,
    .billing-statement-month .candidate-table td {
        font-size: var(--font-size-sm);
        padding: 0.35rem 0.5rem;
    }

    /* The attempts detail stacked inside the Usage cells is secondary text on
       screen; muted foregrounds flatten to illegible grey on paper. */
    .billing-statement-month .candidate-table .admin-helper {
        color: #000;
    }

    /* The Scheduled column is a screen convenience — Activity in month is the
       billing-relevant timing — and the paper copy gives its width to the
       session names, leaving three printed columns: Session, Activity in
       month, Usage. The footer rows carry their own (empty) cell in this class
       so their figures stay under the right columns when it goes. */
    .billing-col-scheduled {
        display: none;
    }

    /* A line split across two sheets reads as two lines; a footer row split
       from its table reads as a total for nothing. Keep each whole, and keep a
       month's heading with the table it introduces. */
    .billing-statement-month tr {
        break-inside: avoid;
    }

    .billing-statement-month .workspace-section-label,
    .billing-statement-month .admin-helper {
        break-after: avoid;
    }

    /* Colour washes flatten unpredictably on paper: the subtotal rows keep
       their separating rule and weight, high-contrast, and nothing else. */
    .billing-statement-subtotal th,
    .billing-statement-subtotal td {
        background: transparent;
        border-top: 1px solid #000;
        color: #000;
    }

    /* Session names link to the session on screen; on paper they are just
       names. */
    .billing-statement-month a {
        color: #000;
        text-decoration: none;
    }

    /* The summary cards print as plain bordered figures. */
    .billing-statement-header .stat-card {
        background: transparent;
        border: 1px solid #767676;
        box-shadow: none;
        color: #000;
    }

    .billing-statement-header .stat-card .stat-value,
    .billing-statement-header .stat-card .stat-label {
        color: #000;
    }

    /* The Not billable marker must survive without its colour treatment. */
    .billing-statement-month .status-chip {
        color: #000;
        background: transparent;
        border: 1px solid #000;
    }
}

/* ── Survey builder (authoring) ──────────────────────────────────────────── */

.survey-question-edit-panel {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.survey-question-edit-panel > .workspace-section-label {
    margin-bottom: var(--space-3);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.survey-question-edit-panel > form {
    margin-top: var(--space-3);
}

.survey-add-question-panel {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: clamp(var(--space-4), 2.5vw, var(--space-5));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel-secondary);
    box-shadow: var(--elevation-1);
}

.survey-add-question-panel > .workspace-section-label {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.1rem;
}

.survey-add-question-panel .survey-question-editor-form {
    margin: 0;
}

.survey-question-editor-disclosure {
    margin: 0;
}

.survey-question-editor-disclosure > .accordion-section-summary {
    background: var(--bg-panel-secondary);
}

.survey-question-editor-disclosure[open] > .accordion-section-summary {
    background: var(--bg-panel);
}

.survey-question-submit-actions {
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

.survey-question-submit-actions > form {
    gap: 0;
    margin: 0;
}

.survey-question-required-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    margin-right: auto;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    font-weight: 650;
    cursor: pointer;
}

.survey-question-required-toggle:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.survey-question-required-toggle input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--accent);
}

.survey-question-prompt-field [data-invalid="true"] .rich-editor {
    border-color: var(--text-error);
}

.survey-matrix-builder {
    display: grid;
    gap: var(--space-4);
}

.survey-matrix-builder__section,
.survey-matrix-builder__preview {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
}

.survey-matrix-builder__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.survey-matrix-builder__heading small,
.survey-matrix-builder__column-head small {
    color: var(--text-muted);
    font-weight: 400;
}

.survey-matrix-builder__items {
    display: grid;
    gap: var(--space-2);
}

.survey-matrix-builder__item {
    display: grid;
    grid-template-columns: 2rem minmax(12rem, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}

.survey-matrix-builder__item--column,
.survey-matrix-builder__column-head {
    grid-template-columns: 2rem minmax(10rem, 1fr) minmax(8rem, 0.45fr) auto;
}

.survey-matrix-builder__column-head {
    display: grid;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 650;
}

.survey-matrix-builder__column-head > :first-child {
    grid-column: 2;
}

.survey-matrix-builder__number {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.survey-matrix-builder__actions {
    display: flex;
    gap: var(--space-1);
}

.survey-matrix-builder__actions .button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--space-1) var(--space-2);
}

.survey-matrix-builder__paste summary {
    color: var(--accent-text);
    font-weight: 650;
    cursor: pointer;
}

.survey-matrix-builder__paste > .stack {
    margin-top: var(--space-3);
}

.survey-matrix-builder__preset {
    align-items: end;
    justify-content: flex-start;
    grid-template-columns: minmax(12rem, 24rem) max-content;
}

.survey-matrix-builder__preset .button {
    justify-self: start;
    width: auto;
}

.survey-matrix-builder__preview-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.survey-matrix-builder__preview table {
    width: 100%;
    min-width: 34rem;
    margin: 0;
    border-collapse: collapse;
}

.survey-matrix-builder__preview th,
.survey-matrix-builder__preview td {
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    text-align: center;
}

.survey-matrix-builder__preview tbody th {
    min-width: 12rem;
    text-align: left;
}

/* Ordered survey-item authoring. Choice options, ranking items and allocation
   items share the matrix builder's row-level identity and keyboard controls. */
.survey-list-builder,
.survey-answer-format-panel,
.survey-editor-live-preview {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
}

.survey-list-builder__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.survey-list-builder__heading small,
.survey-list-builder__column-head small {
    color: var(--text-muted);
    font-weight: 400;
}

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

.survey-list-builder__item,
.survey-list-builder__column-head {
    display: grid;
    grid-template-columns: 2rem minmax(12rem, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}

.survey-list-builder__item--with-value,
.survey-list-builder__column-head {
    grid-template-columns: 2rem minmax(10rem, 1fr) minmax(8rem, 0.45fr) auto;
}

.survey-list-builder__column-head {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 650;
}

.survey-list-builder__column-head > :first-child {
    grid-column: 2;
}

.survey-list-builder__number {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.survey-list-builder__actions {
    display: flex;
    gap: var(--space-1);
}

.survey-list-builder__actions .button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--space-1) var(--space-2);
}

.survey-list-builder__paste summary {
    color: var(--accent-text);
    font-weight: 650;
    cursor: pointer;
}

.survey-list-builder__paste > .stack {
    margin-top: var(--space-3);
}

.survey-list-builder__preview,
.survey-editor-live-preview {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-3);
}

.survey-list-builder__preview-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
}

div.survey-list-builder__preview-list {
    padding-left: 0;
}

.survey-list-builder__preview-option {
    cursor: default;
    pointer-events: none;
}

.survey-list-builder__choice-marker {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-panel);
}

.survey-list-builder__choice-marker--multiple {
    border-radius: var(--border-radius-sm);
}

.survey-list-builder--locked .survey-list-builder__paste {
    display: none;
}

.survey-editor-rating-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    overflow-x: auto;
}

.survey-editor-preview-option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    min-width: 2.75rem;
    flex: 1 1 3.5rem;
    min-height: 3.5rem;
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    text-align: center;
}

.survey-editor-preview-option small {
    color: var(--text-secondary);
    line-height: 1.25;
}

.survey-editor-rating-preview--stars {
    justify-content: flex-start;
}

.survey-editor-rating-preview--stars .survey-editor-preview-option {
    flex: 0 1 4rem;
    color: var(--accent-text);
    font-size: 1.5rem;
}

@media (max-width: 760px) {
    .survey-matrix-builder__heading,
    .survey-list-builder__heading {
        align-items: stretch;
        flex-direction: column;
    }

    .survey-matrix-builder__heading .button,
    .survey-list-builder__heading .button {
        align-self: flex-start;
    }

    .survey-matrix-builder__column-head,
    .survey-list-builder__column-head {
        display: none;
    }

    .survey-matrix-builder__item,
    .survey-matrix-builder__item--column {
        grid-template-columns: 1.5rem minmax(0, 1fr);
    }

    .survey-matrix-builder__item--column input[name="matrix_column_analysis_value[]"] {
        grid-column: 2;
    }

    .survey-matrix-builder__actions {
        grid-column: 2;
        flex-wrap: wrap;
    }

    .survey-list-builder__item,
    .survey-list-builder__item--with-value {
        grid-template-columns: 1.5rem minmax(0, 1fr);
    }

    .survey-list-builder__item--with-value input[name="choice_option_analysis_value[]"] {
        grid-column: 2;
    }

    .survey-list-builder__actions {
        grid-column: 2;
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .survey-matrix-builder__preset {
        grid-template-columns: minmax(0, 1fr);
    }
}

.survey-questions-panel > .workspace-section-label {
    margin-bottom: var(--space-2);
}

.survey-question-list-helper {
    margin: 0 0 var(--space-4);
}

.survey-question-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.survey-question-admin-card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    overflow: clip;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.survey-question-admin-card[open] {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    box-shadow: var(--elevation-1);
}

.survey-question-admin-summary::-webkit-details-marker {
    display: none;
}

.survey-question-admin-summary:hover {
    background: color-mix(in srgb, var(--bg-panel-secondary) 88%, var(--accent-subtle) 12%);
}

.survey-question-admin-summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: -3px;
}

.survey-question-admin-number {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent-text, var(--accent));
    font-weight: 800;
}

.survey-question-admin-summary__body {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.survey-question-admin-prompt {
    display: block;
    font-weight: 650;
    line-height: 1.45;
}

.survey-question-admin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 0;
}

.survey-question-admin-meta span {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 650;
}

.survey-question-admin-move-controls {
    display: inline-flex;
    gap: var(--space-1);
}

.survey-question-move-button {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
}

.survey-question-move-button .app-icon {
    pointer-events: none;
}

.survey-question-admin-options {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.survey-question-admin-chevron {
    width: 0.65rem;
    height: 0.65rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--text-secondary);
    transform: rotate(45deg) translate(-0.15rem, -0.15rem);
    transition: transform 120ms ease;
}

.survey-question-admin-card[open] .survey-question-admin-chevron {
    transform: rotate(225deg) translate(-0.05rem, -0.05rem);
}

/* The authoring preview's narrow-width toggle constrains the preview body
   and forces the stacked matrix rendering, so the narrow-screen behaviour
   can be checked without resizing the window. */
.survey-preview--narrow {
    max-width: 24rem;
}

.survey-preview--narrow .survey-matrix__head {
    display: none;
}

.survey-preview--narrow .survey-matrix__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: var(--space-3);
}

.survey-preview--narrow .survey-matrix__cells {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
}

.survey-preview--narrow .survey-matrix__cell {
    justify-content: flex-start;
}

.survey-preview--narrow .survey-matrix__cell-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.survey-preview-width-toggle {
    margin-bottom: var(--space-3);
}

/* The staff rules panel: one sentence per rule with its remove action. */
.survey-routing-rule-list {
    margin: 0;
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-3);
}

.survey-routing-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Staff option-image management rows under a choice question's editor. */
.survey-option-images__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-color);
}

.survey-option-images__label {
    font-weight: 600;
}

.survey-option-images__thumb {
    max-height: 3rem;
    width: auto;
    border-radius: var(--border-radius-sm);
}

.survey-option-images__attach {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* The authoring pipe picker sits between the wording fields it inserts into. */
.survey-pipe-picker {
    align-items: end;
}