/* ====== Root Variables ====== */
:root {
    /* Layout Grid */
    --dense-row-height: 28px;
    --dense-label-width: 40%;

    /* Component Dimensions — compact */
    --dense-input-height: 26px;
    --dense-font-size: 0.8rem;
    --dense-btn-padding: 0 0.4rem;

    /* Navbar */
    --navbar-height: 40px;

    /* Toolbar */
    --toolbar-height: auto;

    /* Shadows */
    --shadow-subtle: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

/* ====== Generic Input Sizing ====== */
/* Scoped to the dense study form only — these compact heights/widths must not
   leak into ordinary forms (e.g. user settings), where they truncate text. */
#study-form input[type="number"],
#study-form input.auto-calc,
.field-row-dense input[type="number"],
.field-row-dense input.auto-calc {
    max-width: 6rem;
    height: calc(1.1em + .4rem + 2px);
    display: inline-block;
}

#study-form select,
.field-row-dense select {
    height: calc(1.1em + .4rem + 2px);
}

#study-form input.auto-calc,
input.auto-calc {
    background-color: var(--bs-secondary-bg);
    cursor: not-allowed;
}

/* Visual cue for fields that trigger calculations */
.calc-dependency {
    border-right: 3px solid var(--bs-secondary) !important;
}

/* ====== Panel Section Dividers ====== */
.section-divider {
    margin-top: 0.3rem;
    margin-bottom: 0.15rem;
    padding-bottom: 0.15rem;
}

.panel-border {
    border: 1px solid var(--bs-border-color);
    padding: 6px;
    margin: 2px;
    border-radius: 4px;
    background-color: var(--bs-body-bg);
}

#study-form label,
label {
    margin-right: 0.2rem;
    margin-bottom: 0.15rem;
    font-size: 0.82rem;
}

/* Tighter gutter */
.row.g-3 {
    --bs-gutter-y: 0.35rem;
}

/* ====== Dense Form Mode ====== */
.field-row-dense {
    display: grid;
    grid-template-columns: var(--dense-label-width) 1fr;
    gap: 6px;
    align-items: center;
    margin-bottom: 1px;
    min-height: var(--dense-row-height);
}

.field-row-dense label {
    text-align: right;
    font-size: var(--dense-font-size);
    line-height: 1.1;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-row-dense .form-control,
.field-row-dense .form-select {
    height: var(--dense-input-height) !important;
    min-height: var(--dense-input-height);
    padding: 0 0.35rem;
    font-size: var(--dense-font-size);
    line-height: var(--dense-input-height);
}

.field-row-dense .input-group-text {
    height: var(--dense-input-height) !important;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    line-height: var(--dense-input-height);
    display: flex;
    align-items: center;
}

.field-row-dense .btn {
    height: var(--dense-input-height) !important;
    padding: var(--dense-btn-padding);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.field-row-dense .btn i {
    font-size: 0.85rem;
    vertical-align: middle;
}

/* Candidate list button in dense rows */
.field-row-dense .candidate-trigger {
    height: var(--dense-input-height);
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
}

/* Prevent layout breaking on narrow columns */
.field-row-dense .input-group {
    flex-wrap: nowrap;
}

/* Dense small controls – scoped to dense rows to avoid affecting matrix panels */
.field-row-dense .form-control-sm,
.field-row-dense .btn-sm,
.field-row-dense .form-select-sm,
.field-row-dense .input-group-sm > .form-control,
.field-row-dense .input-group-sm > .input-group-text {
    min-height: 26px;
}

/* Validation citation — compact (legacy, kept for backward compat) */
.validation-citation {
    min-height: 0.8em;
    font-size: 0.7rem;
    margin-left: 2px;
}

/* ====== Range Indicator ====== */
.range-indicator {
    font-weight: 600;
    line-height: 1;
    user-select: none;
    padding: 0 2px;
}
.field-row-dense .range-indicator {
    height: var(--dense-input-height) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Severity color classes for range arrows (values in tokens.css) */
.range-severity-mild    { color: var(--sev-mild) !important; }     /* amber / yellow */
.range-severity-moderate { color: var(--sev-moderate) !important; } /* orange */
.range-severity-severe   { color: var(--sev-severe) !important; }   /* red (Bootstrap danger) */

/* ====== Unified Study Toolbar ====== */
.study-toolbar {
    position: sticky;
    top: var(--navbar-height);
    z-index: 1020;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    margin: -1rem -0.75rem 0.5rem -0.75rem;
    padding: 0;
}

.toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
}

.toolbar-main {
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.toolbar-secondary {
    padding: 0.25rem 0.75rem;
    background: var(--bs-tertiary-bg);
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.toolbar-patient {
    min-width: 0;
    flex: 1;
}

.toolbar-views {
    flex-shrink: 0;
}

.toolbar-actions {
    flex-shrink: 0;
}

.toolbar-macros {
    flex-shrink: 0;
}

/* Patient info in toolbar */
.toolbar-patient-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.toolbar-patient-name {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-patient-meta {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-sep {
    margin: 0 0.2rem;
    opacity: 0.5;
}

/* Back button in toolbar */
.toolbar-back-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ====== Provisional Data Highlighting ====== */
.form-control-provisional {
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning) !important;
    transition: background-color 0.5s ease;
}

.form-control-provisional:focus {
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
}

.source-badge {
    font-size: 0.65em;
    vertical-align: text-top;
    margin-left: 4px;
    text-transform: uppercase;
    cursor: help;
}

/* ====== Persistent per-field value-origin badge ====== */
/* Always shown next to a field's label; colour encodes the value's origin.
   Machine sources stay amber ("verify me"); human/derived are muted. Kept in
   sync with layout_renderer.ORIGIN_BADGE_META and the JS map in base_form.html. */
.origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.62em;
    line-height: 1;
    padding: 1px 5px;
    margin-left: 5px;
    border-radius: 8px;
    vertical-align: middle;
    white-space: nowrap;
    cursor: help;
    border: 1px solid transparent;
}
.origin-badge .origin-badge-label { text-transform: uppercase; letter-spacing: 0.02em; }
.origin-badge.origin-machine  { background: #fff3cd; color: #7a5b00; border-color: #ffe69c; }
.origin-badge.origin-human    { background: #e7f1ff; color: #0a58ca; border-color: #cfe2ff; }
.origin-badge.origin-calc     { background: #eef1f4; color: #55606b; border-color: #dde3e9; }
.origin-badge.origin-gen      { background: #eef1f4; color: #55606b; border-color: #dde3e9; }
.origin-badge.origin-previous { background: #f0eef4; color: #6b5b8a; border-color: #e0dbec; }
.origin-badge.origin-prefill  { background: #d9f2ec; color: #0f6a55; border-color: #b8e5da; }

/* Dark-theme origin badges (SmartCVI design system values) */
[data-bs-theme="dark"] .origin-badge.origin-machine  { background: rgba(230, 168, 23, 0.16); color: var(--warning-deep); border-color: rgba(230, 168, 23, 0.4); }
[data-bs-theme="dark"] .origin-badge.origin-human    { background: rgba(13, 110, 253, 0.16); color: var(--blue-300); border-color: rgba(13, 110, 253, 0.4); }
[data-bs-theme="dark"] .origin-badge.origin-calc     { background: var(--surface-raised); color: var(--text-muted); border-color: var(--border); }
[data-bs-theme="dark"] .origin-badge.origin-gen      { background: var(--surface-raised); color: var(--text-muted); border-color: var(--border); }
[data-bs-theme="dark"] .origin-badge.origin-previous { background: rgba(155, 135, 200, 0.16); color: #b6a5da; border-color: rgba(155, 135, 200, 0.4); }
[data-bs-theme="dark"] .origin-badge.origin-prefill  { background: rgba(28, 143, 110, 0.16); color: var(--green-300); border-color: rgba(28, 143, 110, 0.4); }

/* ====== Split Screen Viewer ====== */
.study-workspace {
    display: flex;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.editor-pane {
    flex: 1;
    transition: width 0.3s ease;
    min-width: 0;
}

.viewer-pane {
    width: 0;
    height: calc(100vh - 100px);
    background-color: #000;
    transition: width 0.3s ease;
    overflow: hidden;
    position: sticky;
    top: 10px;
}

.viewer-pane.is-open {
    width: 45vw;
    border-left: 5px solid var(--bs-gray-700);
}

@media (max-width: 768px) {
    .viewer-pane.is-open {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2000;
    }
}

/* Suggestion Box */
.suggestion-box {
    font-size: 0.8rem;
    border-left: 4px solid var(--bs-warning);
    background-color: var(--bs-warning-bg-subtle);
}

[data-bs-theme="dark"] .suggestion-box {
    background-color: rgba(230, 168, 23, 0.10);
    border-left-color: var(--warning);
    color: var(--text-body);
}

.btn-xs {
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.2;
    border-radius: 0.2rem;
}

/* ====== Reduced Height Navbar ====== */
.navbar {
    --bs-navbar-padding-y: 0.25rem;
    min-height: 40px;
    z-index: 1030;
}

/* ====== App navbar (SmartCVI shell — always dark chrome) ====== */
.app-navbar {
    background: var(--surface-card);
    border-bottom: 1px solid var(--border);
}
.app-navbar .nav-link {
    color: var(--text-muted);
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--text-body);
}

/* Brand device: accent square + two-tone wordmark */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.brand-square {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-xs);
    background: var(--accent);
}
.brand-name {
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--text-strong);
    line-height: 1;
}
.brand-suffix {
    color: var(--text-muted);
    font-weight: var(--fw-bold);
}
/* Stacked variant: "SmartCVI" over a small surface qualifier ("Reporter"). */
.brand-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.brand-sub {
    font-size: 0.625rem;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    line-height: 1;
    margin-top: 2px;
}

/* ====== Auth (login) page ====== */
/* Centered card with the brand device as the logo. Lives on the page body,
   which flips with the Bootstrap theme — so colours come from --bs-* vars
   (theme-aware), unlike the always-dark navbar brand above. */
.auth-wrap {
    max-width: 400px;
}
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.auth-brand .brand-square {
    width: 16px;
    height: 16px;
}
.auth-brand-name {
    font-weight: var(--fw-bold);
    font-size: 1.35rem;
    letter-spacing: var(--ls-tight);
    line-height: 1;
    color: var(--bs-emphasis-color);
}
.auth-brand-suffix {
    color: var(--bs-secondary-color);
}
.auth-brand-sub {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--bs-secondary-color);
    line-height: 1;
    margin-top: 3px;
}

/* Learning-shell nav pills (Learn / My progress) */
.navbar-nav .nav-link.lp-nav-pill {
    border-radius: var(--radius-md);
    padding: 6px 12px;
}
.navbar-nav .nav-link.lp-nav-pill.active {
    color: var(--text-strong) !important;
    background: var(--surface-raised);
}

/* Offset main content for sticky navbar */
main.container {
    padding-top: 0.5rem;
}
.navbar-brand {
    font-size: 1rem;
    padding: 0;
    line-height: 1.2;
}
.navbar-nav .nav-link {
    font-size: 0.85rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    line-height: 1.2;
}

/* ====== Tab Navigation ====== */
.nav-arrow-item {
    display: flex;
    align-items: center;
    padding: 0 2px;
}
.nav-arrow {
    background-color: transparent !important;
    border: none !important;
    color: var(--bs-primary) !important;
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}
.nav-tabs .nav-link.nav-arrow:hover {
    color: var(--bs-primary) !important;
    opacity: 1;
    transform: scale(1.1);
}
.nav-tabs .nav-link.nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* Tab Hints — compact */
.tab-navigation-hints {
    user-select: none;
    font-size: 0.75rem;
}
.tab-navigation-hints kbd {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    padding: 0.1rem 0.3rem;
    font-size: 0.75em;
    border-radius: 3px;
}
.tab-position {
    background-color: var(--bs-light);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--bs-border-color);
    font-size: 0.75rem;
}
[data-bs-theme="dark"] .tab-position {
    background-color: var(--bs-dark);
}

/* Smaller nav-tabs text */
.nav-tabs .nav-link {
    font-size: 0.82rem;
    padding: 0.3rem 0.6rem;
}

/* Dark-theme tab strip: underline style (study form; light mode untouched).
   .nav-arrow buttons keep their own transparent/!important styling. */
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.nav-arrow) {
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}
[data-bs-theme="dark"] .nav-tabs .nav-link:not(.nav-arrow):hover {
    color: var(--text-body);
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active:not(.nav-arrow) {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: var(--fw-medium);
    background: transparent;
}

/* Focus indicators */
.field-focused {
    background: rgba(13, 110, 253, 0.05);
    border-radius: 0.25rem;
    transition: background 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2) !important;
}

input[readonly]:focus,
textarea[readonly]:focus {
    outline: 1px solid var(--bs-border-color) !important;
    box-shadow: none !important;
}

/* ====== Dark Mode ====== */
/* Cards read as raised panels on the dark surface (DS Card spec):
   surface-card fill + hairline border, not flush with the page bg. */
[data-bs-theme="dark"] .card {
    background-color: var(--surface-card);
    border-color: var(--border-subtle);
    border-radius: var(--radius-lg);
}
[data-bs-theme="dark"] .card > .card-header {
    background-color: transparent;
    border-bottom-color: var(--border-subtle);
}

[data-bs-theme="dark"] .panel-border {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--bs-secondary-text) !important;
}

[data-bs-theme="dark"] .table-light {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .study-toolbar {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .toolbar-secondary {
    background: var(--bs-tertiary-bg);
}

/* ====== Mobile ====== */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .nav-tabs::-webkit-scrollbar {
        height: 3px;
    }

    .nav-tabs::-webkit-scrollbar-thumb {
        background: var(--bs-primary);
        border-radius: 2px;
    }

    .nav-link {
        padding: 0.5rem 1rem !important;
        white-space: nowrap;
    }

    .nav-arrow {
        padding: 0.5rem 0.75rem !important;
        font-size: 1.25rem;
    }

    .keyboard-hints {
        display: none !important;
    }

    /* Toolbar responsive */
    .toolbar-main {
        flex-wrap: wrap;
    }

    .toolbar-patient {
        order: 1;
        width: 100%;
    }

    .toolbar-views {
        order: 2;
    }

    .toolbar-actions {
        order: 3;
        flex-wrap: wrap;
    }

    .toolbar-secondary {
        flex-wrap: wrap;
    }

    .toolbar-patient-name {
        font-size: 0.82rem;
    }
}

/* ====== Legacy compatibility — action bar classes (kept minimal) ====== */
.study-actions-footer {
    display: none; /* No longer used; toolbar replaces it */
}

/* ====== AI Scribe ====== */
@keyframes scribe-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.scribe-recording-pulse {
    animation: scribe-pulse 1.2s ease-in-out infinite;
}

@keyframes scribe-highlight-fade {
    0%   { background-color: #fff3cd; outline: 2px solid #ffc107; }
    80%  { background-color: #fff3cd; outline: 2px solid #ffc107; }
    100% { background-color: transparent; outline: none; }
}

.scribe-highlight {
    animation: scribe-highlight-fade 3s ease-out forwards;
    border-radius: 4px;
}

/* Dark-theme variant: amber wash tuned for dark surfaces. The reduce-motion
   opt-outs below use `animation: none !important`, which overrides this
   animation-name in both themes. */
@keyframes scribe-highlight-fade-dark {
    0%   { background-color: rgba(230, 168, 23, 0.18); outline: 2px solid rgba(255, 193, 7, 0.5); }
    80%  { background-color: rgba(230, 168, 23, 0.18); outline: 2px solid rgba(255, 193, 7, 0.5); }
    100% { background-color: transparent; outline: none; }
}

[data-bs-theme="dark"] .scribe-highlight {
    animation-name: scribe-highlight-fade-dark;
}

/* ── Field update highlight (universal: scribe, macros, SR) ── */
@keyframes field-updated-glow {
    0%   { background-color: rgba(25, 135, 84, 0.18); box-shadow: inset 0 0 0 2px rgba(25, 135, 84, 0.5); }
    70%  { background-color: rgba(25, 135, 84, 0.10); box-shadow: inset 0 0 0 2px rgba(25, 135, 84, 0.3); }
    100% { background-color: transparent; box-shadow: none; }
}

.scribe-field-updated {
    animation: field-updated-glow 4s ease-out forwards;
    border-radius: 3px;
}

/* ── Tab new-data indicator dot ── */
.tab-new-data-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #198754;
    animation: tab-dot-pulse 1.5s ease-in-out 3;
}

@keyframes tab-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.6); opacity: 0.6; }
}

/* ── Reduce motion: opt-out of the update highlight flashes/pulses ──
   Triggered by the per-user "Reduce motion" preference (body.reduce-motion)
   or the OS-level prefers-reduced-motion setting. Status colours/dots remain
   visible; only the animation (the distracting flash) is suppressed. */
body.reduce-motion .scribe-field-updated,
body.reduce-motion .scribe-highlight,
body.reduce-motion .tab-new-data-dot {
    animation: none !important;
}
body.reduce-motion .scribe-field-updated,
body.reduce-motion .scribe-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .scribe-field-updated,
    .scribe-highlight,
    .tab-new-data-dot {
        animation: none !important;
    }
    .scribe-field-updated,
    .scribe-highlight {
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}

/* ====== Field Action Toolbar (floating icons inside textareas) ====== */
.field-action-toolbar {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 2;
    opacity: 0.72;
    transition: opacity 0.15s ease-in-out;
}

.position-relative:hover > .field-action-toolbar,
.field-action-toolbar:focus-within {
    opacity: 1;
}

.field-action-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.field-action-btn:hover {
    background: var(--bs-light);
}

[data-bs-theme="dark"] .field-action-btn {
    background: rgba(52, 58, 64, 0.9);
    color: var(--text-body);
    box-shadow: var(--shadow-xs);
}

[data-bs-theme="dark"] .field-action-btn:hover {
    background: var(--surface-raised);
}

textarea.field-action-host {
    padding-right: 2.75rem;
}

/* ====== Fill-Panel Textarea ====== */
.fill-height-field-body,
.fill-height-field-row,
.fill-height-input-shell {
    min-height: 0;
}

@media (min-width: 768px) {
    .fill-height-field-body,
    .fill-height-field-row,
    .fill-height-input-shell {
        flex: 1 1 auto;
    }

    textarea[data-fill-panel="true"] {
        height: 100%;
    }
}

textarea[data-fill-panel="true"] {
    flex: 1 1 auto;
    resize: vertical;
    min-height: 120px;
}

@media (max-width: 767.98px) {
    textarea[data-fill-panel="true"] {
        flex: 0 0 auto;
        height: auto;
        min-height: 12rem;
    }
}

/* ====== Text Refinement ====== */
.text-refined {
    border-left: 3px solid var(--bs-info) !important;
}

.text-refine-bar {
    margin-top: 0.25rem;
}

/* ── Interpretation hints ─────────────────────────────────────────────── */
.hint-btn { color: var(--bs-secondary, #667085); line-height: 1; }
.hint-btn:hover { color: var(--bs-primary, #1849a9); }
.hint-overlay {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.hint-overlay[hidden] { display: none; }
.hint-card {
    background: #fff; border-radius: 8px; max-width: 760px; width: 100%;
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.hint-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.9rem; border-bottom: 1px solid #e4e7ec;
}
.hint-card-body { padding: 0.9rem; overflow: auto; }
.hint-card-body .hint-image { max-width: 100%; height: auto; display: block; margin: 0 auto 0.8rem; }
.hint-card-body .hint-text { font-size: 0.9rem; line-height: 1.45; color: #344054; white-space: normal; }
.hint-table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.82rem; }
.hint-table th, .hint-table td { border: 1px solid #d0d5dd; padding: 0.3rem 0.45rem; text-align: left; }
.hint-table th { background: #f8fafc; font-weight: 600; }

/* ── Hint: Mermaid diagram + Markdown ─────────────────────────────────── */
.hint-card-body .hint-mermaid { background: transparent; border: none; margin: 0 0 0.6rem; padding: 0; text-align: center; overflow-x: auto; }
.hint-card-body .hint-mermaid svg { max-width: 100%; height: auto; }
.hint-card-body .hint-md-out { font-size: 0.85rem; line-height: 1.45; color: #344054; }
.hint-card-body .hint-md-out p { margin: 0 0 0.4rem; }
.hint-card-body .hint-md-out code { background: #f2f4f7; padding: 0 0.2rem; border-radius: 3px; }

/* ── Interpretation hints: dark theme ─────────────────────────────────── */
[data-bs-theme="dark"] .hint-overlay { background: var(--backdrop); }
[data-bs-theme="dark"] .hint-card {
    background: var(--surface-overlay);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}
[data-bs-theme="dark"] .hint-card-head { border-color: var(--border-subtle); }
[data-bs-theme="dark"] .hint-card-body .hint-text,
[data-bs-theme="dark"] .hint-card-body .hint-md-out { color: var(--text-body); }
[data-bs-theme="dark"] .hint-table th { background: var(--surface-raised); }
[data-bs-theme="dark"] .hint-table th,
[data-bs-theme="dark"] .hint-table td { border-color: var(--border); }
[data-bs-theme="dark"] .hint-card-body .hint-md-out code { background: var(--surface-raised); }

/* ── Bulls-eye numeric per-segment inputs ─────────────────────────────── */
/* Hide the number spinner arrows so the full (already small) field width is
   usable for typing a mapping value. See static/js/bullseye.js. */
.bullseye-num-input {
    -moz-appearance: textfield;
    appearance: textfield;
}
.bullseye-num-input::-webkit-outer-spin-button,
.bullseye-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Toggle-as-switch (universal boolean switch rendering) ────────────── */
/* Applied when an attribute/layout opts a boolean into switch styling
   (widget_class: switch, or layout field `as_switch: true`). Renders the
   Bootstrap form-switch inline with its label. */
.field-switch { display: flex; align-items: center; gap: 0.5rem; }
.field-switch .form-check-input { width: 2.25em; height: 1.15em; margin: 0; cursor: pointer; }

/* ── Report document + WYSIWYG editor: dark theme ─────────────────────── */
/* The report surface is styled by two files that must stay print-safe:
   templates/studies/print/_report_styles.html (shared with the WeasyPrint
   PDF) and the inline <style> in report_wysiwyg/_report_editor.html. Both
   hardcode light-paper hex values; neither may be edited for the screen,
   because the print template loads _report_styles.html ONLY (no tokens.css,
   no custom.css, no data-bs-theme) — so everything below is screen-only by
   construction and can never reach the PDF.
   Selectors mirror the source ones so the [data-bs-theme="dark"] prefix
   raises specificity above the later-in-document inline <style>. */
[data-bs-theme="dark"] .report-doc { color: var(--text-body); }
[data-bs-theme="dark"] .report-doc h2 { color: var(--text-strong); }
[data-bs-theme="dark"] .report-doc .header { border-bottom-color: var(--border); }
[data-bs-theme="dark"] .report-doc .label,
[data-bs-theme="dark"] .report-doc .metric-label,
[data-bs-theme="dark"] .report-doc .section-subheader,
[data-bs-theme="dark"] .report-doc .report-meas-table .rm-label,
[data-bs-theme="dark"] .report-doc .report-meas-table th,
[data-bs-theme="dark"] .report-doc .report-grid-table th,
[data-bs-theme="dark"] .report-doc .report-paired-table th,
[data-bs-theme="dark"] .report-doc .report-grid-table .grid-label,
[data-bs-theme="dark"] .report-doc .report-paired-table .rm-label,
[data-bs-theme="dark"] .report-doc .report-widget-image figcaption,
[data-bs-theme="dark"] .report-doc .muted,
[data-bs-theme="dark"] .report-doc .report-ranges-footnote { color: var(--text-muted); }
[data-bs-theme="dark"] .report-doc .summary-table td.is-empty .metric-value { color: var(--text-faint); }

/* Borders: hairlines -> --border-subtle; structural rules (document header,
   grid group row, T1 summary row) keep the stronger --border so the visual
   hierarchy of the light original survives. */
[data-bs-theme="dark"] .report-doc .summary-table td,
[data-bs-theme="dark"] .report-doc .section-body,
[data-bs-theme="dark"] .report-doc .report-meas-table th,
[data-bs-theme="dark"] .report-doc .report-grid-table th,
[data-bs-theme="dark"] .report-doc .report-paired-table th,
[data-bs-theme="dark"] .report-doc .report-grid-table td,
[data-bs-theme="dark"] .report-doc .report-paired-table td,
[data-bs-theme="dark"] .report-doc .addendum-table th,
[data-bs-theme="dark"] .report-doc .addendum-table td,
[data-bs-theme="dark"] .report-doc .report-ranges-footnote { border-color: var(--border-subtle); }
[data-bs-theme="dark"] .report-doc .report-grid-table .grid-group-row th,
[data-bs-theme="dark"] .report-doc .report-t1-table .t1-summary-row td { border-color: var(--border); }
[data-bs-theme="dark"] .report-doc .report-grid-table .grid-group-row th { color: var(--text-strong); }

/* Filled blocks. "Empty" / "off" states must read as recessed on the dark
   card, so they get a sunken wash or go transparent — never a bright block. */
[data-bs-theme="dark"] .report-doc .summary-table td.is-empty { background: var(--surface-sunken); }
[data-bs-theme="dark"] .report-doc .measurement-inline {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-body);
}
[data-bs-theme="dark"] .report-doc .addendum-table th { background: var(--surface-raised); }

/* Inlined widget SVGs use currentColor for labels/hints — pin a readable
   colour on their containers so it resolves against the dark surface. */
[data-bs-theme="dark"] .report-doc .report-widget-image svg,
[data-bs-theme="dark"] .report-wysiwyg .wys-widget-svg { color: var(--text-body); }

/* Curation affordances (preview only, never printed) */
[data-bs-theme="dark"] .report-doc .summary-table td .report-curate-remove,
[data-bs-theme="dark"] .report-doc .addendum-table td .report-curate-remove,
[data-bs-theme="dark"] .report-wysiwyg .wys-chip .wys-x,
[data-bs-theme="dark"] .report-wysiwyg .wys-cell-tools .wys-x { color: var(--danger-fg); }
[data-bs-theme="dark"] .report-doc .report-curate-remove:hover,
[data-bs-theme="dark"] .report-wysiwyg .wys-chip .wys-x:hover,
[data-bs-theme="dark"] .report-wysiwyg .wys-cell-tools .wys-x:hover { color: #f2a6ad; }
[data-bs-theme="dark"] .report-doc .report-curation-hidden .report-curate-add,
[data-bs-theme="dark"] .report-wysiwyg .wys-add-back {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text-body);
}
[data-bs-theme="dark"] .report-doc .report-curation-hidden .report-curate-add:hover,
[data-bs-theme="dark"] .report-wysiwyg .wys-add-back:hover {
    background: var(--surface-raised);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

/* Editor: narrative textareas (the light-cream fields) */
[data-bs-theme="dark"] .report-wysiwyg .wys-field textarea {
    background: var(--surface-raised);
    color: var(--text-body);
}
[data-bs-theme="dark"] .report-wysiwyg .wys-field textarea::placeholder { color: var(--text-faint); }
[data-bs-theme="dark"] .report-wysiwyg .wys-field textarea:hover { border-color: var(--border); }
[data-bs-theme="dark"] .report-wysiwyg .wys-field textarea:focus {
    background: var(--surface-raised);
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}

/* Editor: chips, range pills, panels */
[data-bs-theme="dark"] .report-wysiwyg .wys-chip {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text-body);
}
[data-bs-theme="dark"] .report-wysiwyg .wys-r {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text-muted);
}
[data-bs-theme="dark"] .report-wysiwyg .wys-chip.is-extra,
[data-bs-theme="dark"] .report-wysiwyg .wys-r.active {
    background: var(--accent-weak);
    border-color: var(--accent);
    color: var(--blue-300);
}
[data-bs-theme="dark"] .report-wysiwyg .wys-subheader { color: var(--text-muted); }
[data-bs-theme="dark"] .report-wysiwyg .wys-doc-hint { color: var(--text-faint); }
[data-bs-theme="dark"] .report-wysiwyg .wys-add-panel {
    background: transparent;
    border-color: var(--border);
}
[data-bs-theme="dark"] .report-wysiwyg .wys-widget-image {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}
[data-bs-theme="dark"] .report-wysiwyg .wys-widget-image.is-off { background: transparent; }

/* ── Coronary lesion modal (hand-rolled in static/js/coronary_tree.js) ── */
/* Not a Bootstrap modal: a plain div appended to document.body. Light-mode
   defaults below carry over the previous inline-styled look so the JS can drop
   its inline styles; the dark block follows. Two deliberate nudges rather than
   a pixel-exact port: chip type goes 11px → 12px and option gaps 4px → 6px
   (the chips were cramped, which is what made the dark modal hard to read in
   the first place), and the dialog gains backdrop padding + a 90vh cap so it
   cannot butt against the viewport edge on short screens. */
.ct-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
}
.ct-modal__dialog {
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ct-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bs-border-color, #eee);
}
.ct-modal__title { margin: 0; font-size: 15px; }
.ct-modal__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
}
.ct-modal__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.ct-modal__foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--bs-border-color, #eee);
}
.ct-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.3;
    background: transparent;
    border: 1px solid var(--bs-border-color, #ddd);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.ct-chip input { width: 12px; height: 12px; flex: none; margin: 0; cursor: pointer; }
.ct-chip--radio input { accent-color: #1976d2; }
.ct-chip--check input { accent-color: #e65100; }
.ct-chip:hover { background: var(--bs-tertiary-bg, #f8f9fa); }
.ct-chip.is-selected { background: #e3f2fd; border-color: #1976d2; font-weight: 600; }
.ct-chip.is-checked { background: #fff3e0; border-color: #e65100; font-weight: 600; }

/* Coronary lesion modal: dark theme */
[data-bs-theme="dark"] .ct-modal { background: var(--backdrop); }
[data-bs-theme="dark"] .ct-modal__dialog {
    background: var(--surface-overlay);
    color: var(--text-body);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
[data-bs-theme="dark"] .ct-modal__head,
[data-bs-theme="dark"] .ct-modal__foot { border-color: var(--border-subtle); }
[data-bs-theme="dark"] .ct-modal__title { color: var(--text-strong); }
[data-bs-theme="dark"] .ct-modal__label { color: var(--text-muted); }
/* Bootstrap 5.3 already inverts .btn-close under [data-bs-theme=dark]
   (filter: invert(1) ...), so the glyph is light-on-dark; only the default
   0.5 opacity needs lifting to stay legible on the overlay surface. */
[data-bs-theme="dark"] .ct-modal__head .btn-close { --bs-btn-close-opacity: 0.75; }
[data-bs-theme="dark"] .ct-chip { color: var(--text-body); border-color: var(--border); }
[data-bs-theme="dark"] .ct-chip:hover { background: var(--surface-raised); }
[data-bs-theme="dark"] .ct-chip.is-selected {
    background: var(--accent-weak);
    border-color: var(--accent);
    color: var(--text-strong);
}
/* Amber tint keeps the checkbox state readable as distinct from the blue
   radio state on the dark surface. */
[data-bs-theme="dark"] .ct-chip.is-checked {
    background: rgba(230, 168, 23, 0.18);
    border-color: var(--warning-deep);
    color: var(--text-strong);
}
[data-bs-theme="dark"] .ct-chip--radio input { accent-color: var(--accent); }
[data-bs-theme="dark"] .ct-chip--check input { accent-color: var(--warning-deep); }
.field-switch .form-check-label { margin: 0; cursor: pointer; }