body {
    background: var(--bg-page);
    color: var(--text-primary);
    margin: 0;
}

.panel,
.card,
.hero {
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    min-width: 0;
}

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

.role-pill,
.role-label,
.eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    background: var(--role-pill-bg, var(--role-icon-bg));
    color: var(--role-pill-text, var(--role-icon-text));
    border: 1px solid transparent;
    border-color: var(--role-pill-border, var(--role-icon-bg));
    box-shadow: var(--role-pill-shadow, none);
    padding: 3px 8px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 6px;
}

/* Role colours are part of the Criterium visual design language for subtle area identification. */
.role-pill--admin,
.role-pill--platform_operator,
.role-pill--platform_security,
.role-pill--platform_engineer,
.role-pill--organisation_admin,
.role-pill--content_author,
.role-pill--content_reviewer,
.role-pill--marker,
.role-pill--invigilator,
.role-pill--analyst,
.role-pill--psychometrician,
.role-pill--results_viewer,
.role-pill--candidate {
    --role-pill-text: var(--text-primary);
    --role-pill-bg: color-mix(in srgb, var(--role-pill-color) 12%, var(--bg-panel-secondary) 88%);
    --role-pill-border: color-mix(in srgb, var(--role-pill-color) 28%, var(--border-color) 72%);
    --role-pill-shadow: inset 3px 0 0 0 var(--role-pill-color);
}

.role-pill--admin {
    --role-pill-color: var(--role-admin);
}

.role-pill--platform_operator,
.role-pill--platform_security,
.role-pill--platform_engineer,
.role-pill--organisation_admin {
    --role-pill-color: var(--role-admin);
}

.role-pill--content_author {
    --role-pill-color: var(--role-content-author);
}

.role-pill--content_reviewer {
    --role-pill-color: var(--role-content-reviewer);
}

.role-pill--marker {
    --role-pill-color: var(--role-marker);
}

.role-pill--invigilator {
    --role-pill-color: var(--role-invigilator);
}

.role-pill--analyst,
.role-pill--psychometrician,
.role-pill--results_viewer {
    --role-pill-color: var(--role-content-reviewer);
}

.role-pill--candidate {
    --role-pill-color: var(--role-candidate);
}

.btn-primary,
.button,
button,
input[type="submit"],
input[type="button"] {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: var(--btn-primary-border, none);
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--accent-hover);
}

.btn-secondary,
.button.secondary,
button.secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: var(--btn-secondary-border);
    border-radius: var(--border-radius-sm);
    padding: 8px 14px;
    cursor: pointer;
}

.btn-secondary:hover,
.button.secondary:hover,
button.secondary:hover {
    background: var(--accent-subtle);
    color: var(--text-primary);
    border-color: var(--border-color-emphasis);
}

.btn-primary:focus-visible,
.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary:active,
.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
}

.btn-secondary:active,
.button.secondary:active,
button.secondary:active {
    background: var(--accent-subtle);
    border-color: var(--border-color-emphasis);
}

.button.danger,
button.danger {
    background: var(--bg-error);
    color: var(--text-error);
    border: var(--border-width) solid var(--border-error);
    border-radius: var(--border-radius-sm);
    padding: 8px 14px;
    cursor: pointer;
}

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

.button.danger:active,
button.danger:active {
    transform: translateY(1px);
}

.form-input,
input,
textarea,
select {
    background: var(--bg-input);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    padding: 6px 10px;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
}

.form-input:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
}

.answer-option,
.choice-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
    cursor: pointer;
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
    transition: border-color 0.15s;
}

.answer-option:hover,
.choice-item:hover {
    border-color: var(--border-color-emphasis);
}

.answer-option.is-selected {
    border: var(--border-width-emphasis) solid var(--border-color-emphasis);
    background: var(--bg-radio-selected);
    color: var(--text-primary);
}

.choice-item:has(input:checked) {
    border: var(--border-width-emphasis) solid var(--border-color-emphasis);
    background: var(--bg-radio-selected);
    color: var(--text-primary);
}

.radio-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answer-option.is-selected .radio-dot {
    border-color: var(--accent);
}

.answer-option.is-selected .radio-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: block;
}

.progress-track {
    background: var(--progress-track);
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
}

.progress-fill {
    background: var(--progress-fill);
    height: 4px;
    border-radius: 99px;
    transition: width 0.3s ease;
    width: 0%;
}

.badge--live {
    background: var(--bg-status-live);
    color: var(--text-status-live);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    letter-spacing: 0.5px;
}

.badge--draft {
    background: var(--bg-badge-draft);
    color: var(--text-badge-draft);
    font-size: 9px;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.badge--warning {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: var(--warning-bg, #fff7ed);
    color: var(--warning-text, #9a3412);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    border: 1px solid color-mix(in srgb, var(--warning-text, #9a3412) 30%, transparent);
}

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

.sidebar .notice {
    background: var(--bg-panel-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.candidate-table,
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.45;
}

.candidate-table thead tr,
table thead tr {
    background: var(--bg-table-header);
}

.candidate-table thead th,
table thead th {
    color: var(--text-on-accent);
    text-align: left;
    padding: 0.65rem 0.85rem;
    font-weight: 700;
}

.candidate-table tbody td,
table tbody td {
    padding: 0.72rem 0.85rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.question-text {
    padding: 10px 12px;
    border-left: 4px solid var(--question-accent-border);
    background: var(--question-accent-bg);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    line-height: 1.5;
}

[data-theme="slate-command"] .question-text {
    border-left: none;
    background: transparent;
    padding: 0;
}

[data-theme="amber-ledger"] h1,
[data-theme="amber-ledger"] h2,
[data-theme="amber-ledger"] .question-text {
    font-family: var(--heading-font, var(--font-serif));
}

[data-theme="amber-ledger"] .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    --bg-panel: var(--sidebar-card-bg);
    --bg-panel-secondary: var(--sidebar-card-bg);
    --bg-input: var(--sidebar-card-bg);
    --border-color: var(--sidebar-card-border);
    --text-primary: var(--sidebar-card-text);
    --text-secondary: var(--sidebar-card-label);
    --text-muted: var(--sidebar-card-label);
}

[data-theme="amber-ledger"] .sidebar .text-muted {
    color: var(--sidebar-muted);
}

[data-theme="forest-authority"] .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    --bg-panel: var(--sidebar-card-bg);
    --bg-panel-secondary: var(--sidebar-card-bg);
    --bg-input: var(--sidebar-card-bg);
    --border-color: var(--sidebar-card-border);
    --text-primary: var(--sidebar-card-text);
    --text-secondary: var(--sidebar-card-label);
    --text-muted: var(--sidebar-card-label);
}

[data-theme="forest-authority"] .sidebar .text-muted {
    color: var(--sidebar-muted);
}

[data-theme="civic-clear"] .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    --bg-panel: var(--sidebar-card-bg);
    --bg-panel-secondary: var(--sidebar-card-bg);
    --bg-input: var(--sidebar-card-bg);
    --border-color: var(--sidebar-card-border);
    --text-primary: var(--sidebar-card-text);
    --text-secondary: var(--sidebar-card-label);
    --text-muted: var(--sidebar-card-label);
}

[data-theme="civic-clear"] .sidebar .text-muted {
    color: var(--sidebar-muted);
}

[data-theme="forest-authority"] .candidate-table thead th {
    color: var(--text-on-accent);
}

[data-theme="obsidian-edge"] .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--accent);
}

[data-theme="obsidian-edge"] .radio-dot {
    border-radius: 0;
}

[data-theme="obsidian-edge"] .answer-option.is-selected .radio-dot::after {
    border-radius: 0;
}

[data-theme="obsidian-edge"] .btn-primary,
[data-theme="obsidian-edge"] .btn-secondary {
    font-weight: 700;
}

[data-theme="obsidian-edge"] .candidate-table thead tr {
    background: var(--bg-table-header);
}

[data-theme="obsidian-edge"] .candidate-table thead th {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 1.5px;
}

.th-sortable {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

.th-sortable:hover {
    opacity: 0.8;
}

.sort-indicator {
    display: inline-block;
    margin-left: 0.2rem;
    font-size: 0.8em;
    opacity: 0.75;
}

/* Preview panel spacing and layout for assessment source previews */
.preview-root {
    margin: 0;
}
.preview-meta {
    margin: 0 0 0.75rem 0;
}
.preview-notices {
    margin: 0 0 0.75rem 1rem;
    padding-left: 0.5rem;
    color: var(--text-secondary);
}
.instance-group {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 0.9rem 1rem;
    margin: 0 0 1rem 0;
}
.instance-group-heading h3 {
    margin: 0 0 0.6rem 0;
    font-size: 1.05rem;
}
.preview-section-instructions {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
}
.preview-question-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.preview-question-item {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-color);
}
.preview-question-item:last-child {
    border-bottom: none;
}
.preview-question-num {
    display: inline-block;
    width: 2.2rem;
    margin-right: 0.6rem;
    color: var(--text-muted);
}
.preview-question-body {
    display: block;
}
.preview-question-prompt {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.preview-question-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

/* Section rule pill next to section titles */
.section-rule-pill {
    display: inline-block;
    margin-left: 0.6rem;
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    border-radius: var(--border-radius-pill);
    font-size: 0.85rem;
    vertical-align: middle;
}

.section-total-marks {
    display: inline-block;
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 10px;
}

.preview-template-title {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

/* Tighter, inline-styled notices for table rows to avoid overflow/clip issues */
.content-table .notice {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border-radius: var(--border-radius-sm);
    margin-left: 0.5rem;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* UI_Phase 8: Progressive-disclosure governed components.
   Sole sanctioned implementations of accordion, modal, tabs, and empty
   state. Backed by deploy/src/ui_components.php — do not introduce ad
   hoc <details>, <dialog>, or bespoke tab markup elsewhere.             */
/* ------------------------------------------------------------------ */

/* Accordion */
.accordion-section {
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin: 0 0 0.75rem 0;
    overflow: hidden;
}

/* Give the disclosure breathing room when it sits directly beneath its
   intro text (section label or helper paragraph). Panels lay out children
   by margin, not gap, and those text elements carry margin:0, so without
   this the accordion butts straight up against the copy above it. Scoped to
   the adjacency so it does not over-space accordions used in other layouts. */
.workspace-section-label + .accordion-section,
.admin-helper + .accordion-section {
    margin-top: 0.65rem;
}

.accordion-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text-primary);
}

.accordion-section-summary::-webkit-details-marker {
    display: none;
}

.accordion-section-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.accordion-section-summary:hover {
    background: var(--bg-panel-secondary);
}

.accordion-section-title-group {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.accordion-section-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.accordion-section-meta {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.9rem;
}

.accordion-section-chevron {
    transition: transform 0.18s ease;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.accordion-section[open] > .accordion-section-summary .accordion-section-chevron {
    transform: rotate(180deg);
}

.accordion-section-body {
    padding: 0.9rem;
    border-top: var(--border-width) solid var(--border-color);
    background: var(--bg-panel);
}

.accordion-section--compact .accordion-section-summary {
    padding: 0.45rem 0.7rem;
    font-size: 0.95rem;
}

.accordion-section--compact .accordion-section-body {
    padding: 0.6rem 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-section-chevron {
        transition: none;
    }
}

/* Modal dialog (also covers the existing confirm-dialog uses) */
.modal-dialog,
.confirm-dialog {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-panel);
    color: var(--text-primary);
    padding: 0;
    max-width: min(560px, 92vw);
    width: 100%;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.modal-dialog--wide {
    max-width: min(900px, 94vw);
}

.modal-dialog::backdrop,
.confirm-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.modal-dialog-inner,
.confirm-dialog-inner {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem 1rem 1.2rem;
}

.modal-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.modal-dialog-title-group {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.modal-dialog-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.modal-dialog-body {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-dialog-body p {
    margin: 0 0 0.6rem 0;
}

.modal-dialog-body p:last-child {
    margin-bottom: 0;
}

.modal-dialog-actions,
.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-dialog-close {
    padding: 4px 8px;
    line-height: 1;
}

/* Tabbed panel */
.tabbed-panel {
    margin: 0 0 1rem 0;
}

.tabbed-panel-tablist {
    display: flex;
    gap: 0.25rem;
    border-bottom: var(--border-width) solid var(--border-color);
    flex-wrap: wrap;
}

.tabbed-panel-tab {
    background: transparent;
    color: var(--text-secondary);
    border: var(--border-width) solid transparent;
    border-bottom: none;
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
    padding: 0.5rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    top: 1px;
}

.tabbed-panel-tab:hover {
    color: var(--text-primary);
    background: var(--bg-panel-secondary);
}

.tabbed-panel-tab[aria-selected="true"] {
    background: var(--bg-panel);
    color: var(--text-primary);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-panel);
}

.tabbed-panel-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.tabbed-panel-tab-meta {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.tabbed-panel-panel {
    padding: 1rem 0;
}

.tabbed-panel-panel:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.6rem 1rem;
    border: var(--border-width) dashed var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-panel-secondary);
    color: var(--text-secondary);
}

.empty-state-icon {
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.empty-state-heading {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

.empty-state-message {
    margin: 0;
    max-width: 48ch;
    font-size: 0.95rem;
}

.empty-state-actions {
    margin-top: 0.6rem;
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.empty-state--warning {
    border-color: color-mix(in srgb, var(--warning-text, #9a3412) 30%, transparent);
    background: color-mix(in srgb, var(--warning-bg, #fff7ed) 70%, var(--bg-panel-secondary));
}

.empty-state--success {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* UI_Phase 9: Organisation branding governed components.
 *
 * Subtle organisation branding for candidate-facing and organisation-admin
 * surfaces. The brand band is the only place the configured primary colour is
 * applied, and only as a thin accent border — brand colours never replace
 * semantic system colours (success/warning/error/destructive).
 */

.organisation-brand-band {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md, 0.5rem);
    border-left-width: 4px;
    border-left-color: var(--brand-primary, var(--accent));
    margin-bottom: 1rem;
}

.organisation-brand-logo {
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.organisation-brand-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.organisation-brand-support {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md, 0.5rem);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.organisation-brand-help {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.organisation-brand-support-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.organisation-brand-footer {
    margin: 1rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.branding-colour-preview {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-color);
    vertical-align: middle;
    margin-right: 0.4rem;
}

.branding-field-errors {
    color: var(--error-text, #b91c1c);
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
}

/* ─── Active organisation switcher — Phase 48a ────────────────────────────── */

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

.page-nav-org-switcher {
    display: inline-flex;
    align-items: center;
}

.page-nav-org-switcher select {
    min-height: 2.5rem;
    max-width: 14rem;
    padding: 0 0.6rem;
    font-size: 0.875rem;
}

.page-nav-org-logo {
    height: 1.4rem;
    width: auto;
    max-width: 2.4rem;
    object-fit: contain;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Brand-primary accent: when an active organisation has a primary brand
   colour, surface it as a thin bottom border on the page masthead so staff
   pages reflect the operating tenant context. Falls back to the existing
   border-color token when no brand colour is set. */
.page-masthead {
    border-bottom: 3px solid var(--brand-primary, transparent);
}

/* Report charts (Phase 113): accessible, dependency-free SVG charts rendered by
   report_charts.js ALONGSIDE each report table (never replacing it — see
   cohort_architecture.md §16). All colour comes from theme tokens so light/dark
   mode and theme switching work for free; there is no hard-coded colour here or
   in the JS. The charts are hidden in print/printable so the tables remain the
   complete, accessible fallback. */
.report-chart {
    margin: 0.75rem 0 0.5rem;
    max-width: 640px;
}

.report-chart-svg {
    display: block;
    width: 100%;
    /* Cap the rendered height so a sparse chart (one or two bars) never towers;
       the viewBox keeps the drawing proportionate within this box. */
    height: auto;
    max-height: 240px;
    overflow: visible;
}

/* Bars and the line/points take their colour from theme tokens. The neutral
   series uses --accent; pass/fail reinforces the table's pass/fail colours. */
.report-chart-bar {
    fill: var(--accent);
}

.report-chart-bar--pass {
    fill: var(--success-text);
}

.report-chart-bar--fail {
    fill: var(--text-error);
}

.report-chart-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.report-chart-point {
    fill: var(--accent);
}

.report-chart-axis {
    stroke: var(--text-muted);
    stroke-width: 1;
}

.report-chart-axis-label {
    fill: var(--text-secondary);
    font-size: 11px;
    font-family: inherit;
}

/* On-bar / on-point value annotation so the chart reads without the table. */
.report-chart-value-label {
    fill: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
}

/* Print and the printable view fall back to the tables only — hide the SVG so
   no broken/empty chart box is printed (the tables are already print-friendly). */
@media print {
    .report-chart {
        display: none;
    }
}

.printable-view .report-chart {
    display: none;
}