/**
 * EchoTools - Echocardiogram Report Builder
 * Dark/Light Theme with Toggle Support
 * 
 * Copyright © 2026-2027 SamshawKSE Ltd. All rights reserved.
 * Unauthorised use, copying, or distribution is strictly prohibited.
 * 
 * Version: 9.0
 * Build: 2026-02-09 v9.0 — color-mix() derived hue system
 * 
 * COLOR SCHEME: Clinical Mono
 * 
 *   Hue 0  Background    Grey scale (8 explicit values, not derived)
 *   Hue 1  Interactive    Pure grey — buttons, spans, embedded
 *   Hue 2  Attention      Lighter grey — edited/manual spans
 *   Hue 3  Auto           Muted teal — the ONE chromatic hue
 *   Hue 4  Normal         Clinical green — reference range normal
 *   Hue 5  Abnormal       Muted red — reference range abnormal
 *
 *   THEMING: Change the 5 base hues (--h1 to --h5) per theme.
 *   All derivatives (hover, bg, border, glow) are auto-derived via
 *   color-mix(). Opacity percentages are tuned per theme and stay fixed.
 *
 *   v8.11: Refactored H1–H5 to color-mix() derived system
 *          Base hues define each family; derivatives cascade automatically
 *          10 knobs total (5 dark + 5 light) control all hue-derived colors
 *   v8.10: Removed 25 dead/duplicate/alias variables (112 → 89)
 *          Collapsed semantic alias layer → hue-based variables (89 → 44)
 *          Merged: span-fixed→parameter, span-manual→dirty, span-summary→parameter
 *          Moved: calculated outputs from H2 (grey) → H3 (teal)
 *          Pivoted H1 from steel blue to pure grey (Clinical Mono)
 *          Fixed: --text-muted → --text-tertiary (was undefined)
 */

/* ============================================================================
   CLINICAL MONO THEME
   Optimised for extended use in dimly lit radiology environments
   6-hue semantic colour system: Background, Interactive, Attention, Auto,
   Normal, Abnormal
   ============================================================================ */

:root {
    /* ========================================================================
       GREY SCALE (8) — The foundation
       ======================================================================== */
    
    --grey-base: #0a0a0a;                    /* Page background - near black */
    --grey-surface: #111111;                 /* Panels, cards */
    --grey-elevated: #1a1a1a;                /* Headers, modals, hover states */
    --grey-border: #2a2a2a;                  /* Subtle borders */
    --grey-border-strong: #3a3a3a;           /* Emphasized borders */
    --grey-muted: #505050;                   /* Disabled, tertiary text */
    --grey-text: #787878;                    /* Secondary text, labels */
    --grey-bright: #b0b0b0;                  /* Primary text - soft, not white */
    
    /* ========================================================================
       BASE HUES — Change these 5 values to re-theme (dark mode)
       All derivatives below are auto-derived via color-mix().
       ======================================================================== */
    
    --h1: #567659;                           /* Interactive */
    --h2: #909090;                           /* Attention */
    --h3: #a37c0a;                           /* Auto */
    --h4: #5aaa64;                           /* Normal */
    --h5: #c07070;                           /* Abnormal */
    
    /* ========================================================================
       H1: INTERACTIVE — derived from --h1 (8)
       Buttons, focus rings, parameter/fixed/summary spans, embedded,
       secondary button bg
       ======================================================================== */
    
    --interactive:          var(--h1);
    --interactive-hover:    color-mix(in srgb, var(--h1) 88%, black);
    --interactive-dim:      color-mix(in srgb, var(--h1) 31%, black);  /* measurement highlight headers */
    --interactive-subtle:   color-mix(in srgb, var(--h1)  8%, transparent);
    --interactive-muted:    color-mix(in srgb, var(--h1) 14%, transparent);
    --interactive-glow:     color-mix(in srgb, var(--h1) 22%, transparent);
    --interactive-neutral:  color-mix(in srgb, var(--h1) 48%, black);  /* secondary button bg */
    --interactive-neutral-hover: color-mix(in srgb, var(--h1) 45%, black);
    
    /* ========================================================================
       H2: ATTENTION — derived from --h2
       Dirty spans, manual spans, empty embedded measurements
       ======================================================================== */
    
    --attention-dim:     color-mix(in srgb, var(--h2) 10%, transparent);
    --attention-muted:     color-mix(in srgb, var(--h2) 12%, transparent);
    --attention-border:    color-mix(in srgb, var(--h2) 28%, transparent);
    --attention-btn:       color-mix(in srgb, var(--h2) 45%, black);  /* H2 button bg */
    --attention-btn-hover: color-mix(in srgb, var(--h2) 45%, black);
    --attention-glow:      color-mix(in srgb, var(--h2) 22%, transparent);
    --attention-strong:    color-mix(in srgb, var(--h1) 45%, transparent);
    
    /* ========================================================================
       H3: AUTO — derived from --h3
       Algorithm spans, calculated outputs, calc inputs
       ======================================================================== */
    
    --auto:       var(--h3);
    --auto-hover: color-mix(in srgb, var(--h3) 88%, black);
    --auto-faint: color-mix(in srgb, var(--h3)  3%, transparent);
    --auto-subtle:color-mix(in srgb, var(--h3)  7%, transparent);
    --auto-muted: color-mix(in srgb, var(--h3) 16%, transparent);
    --auto-medium:color-mix(in srgb, var(--h3) 24%, transparent);
    --auto-glow:  color-mix(in srgb, var(--h3) 30%, transparent);
    --auto-strong:color-mix(in srgb, var(--h3) 45%, transparent);
    
    /* ========================================================================
       H4: NORMAL — derived from --h4
       Reference range: within normal limits
       ======================================================================== */
    
    --normal-bg:     color-mix(in srgb, var(--h4) 20%, transparent);
    --normal-border: color-mix(in srgb, var(--h4) 45%, transparent);
    
    /* ========================================================================
       H5: ABNORMAL — derived from --h5
       Reference range: outside normal limits, errors
       ======================================================================== */
    
    --status-error:        var(--h5);
    --abnormal-bg:     color-mix(in srgb, var(--h5) 22%, transparent);
    --abnormal-border: color-mix(in srgb, var(--h5) 45%, transparent);
    
    /* ========================================================================
       THEME-DEPENDENT MAPPINGS (4)
       Grey-scale step changes between dark/light
       ======================================================================== */
    
    --bg-surface-hover: var(--grey-elevated);
    --bg-modal-header: var(--grey-elevated);
    --bg-input: var(--grey-surface);
    --bg-input-focus: var(--grey-elevated);
    
    /* ========================================================================
       FIXED VALUES (3)
       ======================================================================== */
    
    --text-inverse: #ffffff;
    --modal-backdrop: rgba(0, 0, 0, 0.80);
    --modal-backdrop-light: rgba(0, 0, 0, 0.70);
    
    /* ========================================================================
       LAYOUT & SIZING
       ======================================================================== */
    
    --element-height: 32px;
    --border-radius-sm: 4px;
    --border-radius: 6px;
    --border-radius-lg: 8px;
    --border-width: 1px;
    --outline-width: 2px;
    --transition-fast: 0.1s ease;
    --transition: 0.15s ease;
    
    /* ========================================================================
       TYPOGRAPHY
       ======================================================================== */
    
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --line-height: 1.5;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
}


/* ============================================================================
   LIGHT MODE THEME
   ============================================================================ */

[data-theme="light"] {
    /* Grey scale — inverted for light */
    --grey-base: #f0f0f0;
    --grey-surface: #fafafa;
    --grey-elevated: #ffffff;
    --grey-border: #d8d8d8;
    --grey-border-strong: #c0c0c0;
    --grey-muted: #a0a0a0;
    --grey-text: #808080;
    --grey-bright: #2a2a2a;
    
    /* ========================================================================
       BASE HUES — Change these 5 values to re-theme (light mode)
       Opacity percentages are lower than dark mode because the same alpha
       is more prominent against light backgrounds.
       ======================================================================== */
    
    --h1: #69916e;                           /* Interactive */
    --h2: #6a6a6a;                           /* Attention */
    --h3: #a37c0a;                           /* Auto */
    --h4: #7cd486;                           /* Normal */
    --h5: #df9393;                           /* Abnormal */
    
    /* H1: Interactive — light mode derivatives */
    --interactive-hover:    color-mix(in srgb, var(--h1) 90%, black);
    --interactive-dim:      color-mix(in srgb, var(--h1) 23%, white);  /* light tint for headers */
    --interactive-subtle:   color-mix(in srgb, var(--h1)  4%, transparent);
    --interactive-muted:    color-mix(in srgb, var(--h1)  8%, transparent);
    --interactive-glow:     color-mix(in srgb, var(--h1) 14%, transparent);
    --interactive-neutral:  color-mix(in srgb, var(--h1) 60%, black);  /* secondary button bg */
    --interactive-neutral-hover: color-mix(in srgb, var(--h1) 46%, black);
    
    /* H2: Attention — light mode derivatives */
    --attention-dim:     color-mix(in srgb, var(--h2) 5%, transparent);
    --attention-muted:     color-mix(in srgb, var(--h2)  6%, transparent);
    --attention-border:    color-mix(in srgb, var(--h2) 16%, transparent);
    --attention-btn:       color-mix(in srgb, var(--h2) 85%, black);  /* H2 button bg */
    --attention-btn-hover: color-mix(in srgb, var(--h2) 46%, black);
    --attention-glow:      color-mix(in srgb, var(--h2) 14%, transparent);
    --attention-strong:    color-mix(in srgb, var(--h1) 30%, transparent);
    
    /* H3: Auto — light mode derivatives */
    --auto-hover: color-mix(in srgb, var(--h3) 88%, black);
    --auto-faint: color-mix(in srgb, var(--h3)  2%, transparent);
    --auto-subtle:color-mix(in srgb, var(--h3)  6%, transparent);
    --auto-muted: color-mix(in srgb, var(--h3) 12%, transparent);
    --auto-medium:color-mix(in srgb, var(--h3) 14%, transparent);
    --auto-glow:  color-mix(in srgb, var(--h3) 20%, transparent);
    --auto-strong:color-mix(in srgb, var(--h3) 30%, transparent);
    
    /* H4/H5: Reference ranges — light mode derivatives */
    --normal-bg:     color-mix(in srgb, var(--h4) 14%, transparent);
    --normal-border: color-mix(in srgb, var(--h4) 35%, transparent);
    --abnormal-bg:     color-mix(in srgb, var(--h5) 16%, transparent);
    --abnormal-border: color-mix(in srgb, var(--h5) 35%, transparent);
    
    /* Theme-dependent mappings */
    --bg-surface-hover: var(--grey-base);
    --bg-modal-header: var(--grey-surface);
    --bg-input: var(--grey-elevated);
    --bg-input-focus: var(--grey-surface);
    
    /* Fixed overrides */
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --modal-backdrop-light: rgba(0, 0, 0, 0.4);
}

/* Light mode element overrides */
[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme="light"] select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Light mode: Secondary buttons need white text */
[data-theme="light"] button.secondary,
[data-theme="light"] .icon-button.secondary,
[data-theme="light"] .add-snippet-button,
[data-theme="light"] .inline-delete-button,
[data-theme="light"] #new-report-button {
    color: var(--text-inverse) !important;
}

[data-theme="light"] button.secondary svg,
[data-theme="light"] .icon-button.secondary svg,
[data-theme="light"] .add-snippet-button svg,
[data-theme="light"] .inline-delete-button svg,
[data-theme="light"] #new-report-button svg {
    stroke: var(--text-inverse) !important;
}

/* ============================================================================
   SNIPPET PLACEHOLDERS (v8.0)
   Hidden during render - processed by insertTemplateSnippets()
   ============================================================================ */

.snippet-placeholder {
    display: none !important;
}

/* ============================================================================
   SNIPPETS PANEL (v7.3)
   ============================================================================ */

/* Add snippet button - primary style (matches Import/Copy) */
.add-snippet-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--element-height);
    height: var(--element-height);
    min-width: var(--element-height);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    background-color: var(--interactive);
    border: var(--border-width) solid var(--interactive);
    border-radius: var(--border-radius);
    color: var(--text-inverse);
    cursor: pointer;
    transition: background-color var(--transition),
                border-color var(--transition);
}

.add-snippet-button:hover {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

.add-snippet-button:focus {
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}

.add-snippet-button.active {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
    box-shadow: 0 0 0 2px var(--interactive-glow);
}

.add-snippet-button svg {
    stroke: var(--text-inverse);
}

/* Icon toggle - show plus when closed, X when open */
.add-snippet-button .icon-plus {
    display: block;
}

.add-snippet-button .icon-close {
    display: none;
}

.add-snippet-button.active .icon-plus {
    display: none;
}

.add-snippet-button.active .icon-close {
    display: block;
}

/* Snippets panel - overlays measurements panel only */
.snippets-panel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--grey-surface);
    border-radius: var(--border-radius-lg);
    z-index: 100;
    flex-direction: column;
    overflow: hidden;
}

.snippets-panel.active {
    display: flex;
}

.snippets-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0.75rem 1rem;
    background-color: var(--grey-elevated);
    border-bottom: var(--border-width) solid var(--grey-border);
    flex-shrink: 0;
}

.snippets-panel-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--grey-bright);
    text-align: center;
}

.snippets-panel-close {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--border-radius);
    color: var(--grey-text);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: background-color var(--transition), color var(--transition);
}

.snippets-panel-close:hover {
    background-color: var(--bg-surface-hover);
    color: var(--grey-bright);
}

.snippets-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Snippet items - simple cards with highlight color */
.snippet-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--bg-surface-hover);
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius);
    cursor: grab;
    transition: background-color var(--transition),
                border-color var(--transition),
                box-shadow var(--transition),
                transform var(--transition);
}

.snippet-item:hover {
    background-color: var(--grey-elevated);
    border-color: var(--grey-border-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.snippet-item:active {
    cursor: grabbing;
    transform: translateY(0);
}

.snippet-item-name {
    font-size: 0.85rem;
    font-weight: var(--font-weight-normal);
    color: var(--grey-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Snippet being dragged */
.snippet-item.snippet-dragging {
    opacity: 0.5;
    box-shadow: 0 0 0 2px var(--interactive-glow);
}

/* Empty state */
.snippets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--grey-text);
}

.snippets-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Make measurements panel position relative for overlay positioning */
#measurements-panel {
    position: relative;
}

/* ============================================================================
   THEME TOGGLE BUTTON
   ============================================================================ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--element-height);
    height: var(--element-height);
    min-width: var(--element-height);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    background-color: var(--grey-elevated);
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius);
    color: var(--grey-text);
    cursor: pointer;
    transition: background-color var(--transition),
                border-color var(--transition),
                color var(--transition);
}

.theme-toggle:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--grey-border-strong);
    color: var(--grey-bright);
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    transition: transform 0.3s ease;
}

/* Sun icon (shown in dark mode) */
.theme-toggle .icon-sun {
    display: block;
}

.theme-toggle .icon-moon {
    display: none;
}

/* Moon icon (shown in light mode) */
[data-theme="light"] .theme-toggle .icon-sun {
    display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}


/* ============================================================================
   BASE STYLES
   ============================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

html {
    font-family: var(--font-family);
    font-size: 100%;
    line-height: var(--line-height);
    color: var(--grey-bright);
    background-color: var(--grey-base);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--grey-base);
    color: var(--grey-bright);
    position: relative;
}

/* v8.5: Texture overlay removed — was causing rendering flickers in some browsers */

html, body {
    height: 100%;
    overflow: hidden;
}

main {
    display: block;
    position: relative;
    z-index: 1;
}

main.container {
    height: 100%;
    padding: 0;
    max-width: none;
}

/* Custom Scrollbar - Dark Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--grey-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--grey-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--grey-border-strong);
}

/* Selection */
::selection {
    background-color: var(--interactive-glow);
}


/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    color: var(--grey-bright);
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

hr {
    height: 0;
    border: 0;
    border-top: var(--border-width) solid var(--grey-border);
    color: inherit;
}


/* ============================================================================
   CONTAINER
   ============================================================================ */

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}


/* ============================================================================
   BUTTONS
   ============================================================================ */

button {
    margin: 0;
    padding: 0.5rem 1rem;
    height: var(--element-height);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    border: var(--border-width) solid var(--interactive);
    border-radius: var(--border-radius);
    background-color: var(--interactive);
    color: var(--text-inverse);
    transition: background-color var(--transition),
                border-color var(--transition),
                color var(--transition),
                box-shadow var(--transition);
}

button:hover {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}

button:active {
    background-color: var(--interactive-hover);
}

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

/* Secondary buttons (grey) */
button.secondary {
    background-color: var(--interactive-neutral);
    border-color: var(--interactive-neutral);
    color: var(--grey-bright);
}

button.secondary:hover {
    background-color: var(--interactive-neutral-hover);
    border-color: var(--interactive-neutral-hover);
}

button.secondary:focus {
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}


/* ============================================================================
   FORM ELEMENTS - Inputs, Selects, Textareas
   ============================================================================ */

input,
select,
textarea {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    color: var(--grey-bright);
    background-color: var(--bg-input);
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius);
    outline: none;
    transition: background-color var(--transition),
                border-color var(--transition),
                color var(--transition),
                box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    background-color: var(--bg-input-focus);
    border-color: var(--interactive);
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}

input::placeholder,
textarea::placeholder {
    color: var(--grey-muted);
    opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Select specific - dark dropdown arrow */
select {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    appearance: none;
}

select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* All selects match button height */
select {
    height: var(--element-height);
    font-size: 0.85rem;
    padding: 0 2rem 0 0.5rem;
    line-height: var(--element-height);
}

/* Textarea specific */
textarea {
    display: block;
    width: 100%;
    resize: vertical;
}

/* Input type=text specific */
input[type="text"] {
    width: 100%;
}


/* ============================================================================
   CHECKBOX - Dark Theme
   ============================================================================ */

input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-input);
    border-color: var(--grey-border);
    cursor: pointer;
    appearance: none;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--interactive);
    border-color: var(--interactive);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-size: 0.75rem auto;
    background-repeat: no-repeat;
}

input[type="checkbox"]:focus {
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}


/* ============================================================================
   LABELS
   ============================================================================ */

label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--grey-bright);
}


/* ============================================================================
   TABLES
   ============================================================================ */

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}

th,
td {
    padding: 0.5rem;
    border-bottom: var(--border-width) solid var(--grey-border);
}

th {
    font-weight: var(--font-weight-bold);
    text-align: left;
    color: var(--grey-bright);
}


/* ============================================================================
   TWO-COLUMN LAYOUT
   ============================================================================ */

/* v9.02: Options wrapper — flex column: toolbar above, grid below */
#options {
    height: 100%;
}

.options-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.two-column-layout {
    display: grid;
    grid-template-columns: 325px 1fr;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    padding: 0 1rem 1rem 1rem;
}

@media (min-width: calc(1300px + 2rem)) {
    .options-wrapper {
        max-width: 1300px;
        margin: 0 auto;
    }
}


/* ============================================================================
   MEASUREMENTS PANEL (Left Column)
   ============================================================================ */

#measurements-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    min-width: 0;
    background-color: var(--grey-surface);
    border-radius: var(--border-radius-lg);
    border: var(--border-width) solid var(--grey-border);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--grey-elevated);
    z-index: 10;
    padding: 0.75rem 1rem;
    border-bottom: var(--border-width) solid var(--grey-border);
    flex-shrink: 0;
}

.panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--grey-bright);
}

.panel-header button {
    margin: 0;
    height: var(--element-height);
    padding: 0 0.8rem;
    font-size: 0.8rem;
}

#measurements-table {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.5rem 0.5rem 0.5rem;
    min-width: 0;
}


/* ============================================================================
   MEASUREMENTS TABLE
   ============================================================================ */

.measurement-group-header {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    padding: 0.4rem 0.5rem;
    background-color: var(--grey-elevated);
    border-bottom: var(--border-width) solid var(--grey-border);
    margin-top: 0.5rem;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--border-radius-sm);
    /* v8.08: Removed sticky positioning - headers now scroll naturally */
    transition: background-color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--grey-text);
}

.measurement-group-header:first-child {
    margin-top: 0;
    background-color: var(--interactive-dim);
    color: var(--grey-bright);
}

/* Highlighted measurement section header */
.measurement-group-header.highlight-header {
    background-color: var(--attention-glow);
    color: var(--grey-bright);
}

/* Highlighted measurement section rows */
.measurement-group-table.highlight-table tr td {
    background-color: var(--attention-muted);
}

.measurement-group-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.measurement-group-table td:first-child {
    width: 145px;
}

.measurement-group-table td:last-child {
    width: 165px;
}

.measurement-group-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: var(--border-width) solid var(--grey-border);
    font-size: 0.8rem;
    box-sizing: border-box;
    vertical-align: middle;
}

.measurement-label {
    white-space: normal;
    word-wrap: break-word;
    text-align: right;
    color: var(--grey-text);
}

.measurement-value {
    /* v8.08: Removed display:flex from td to fix border alignment with label cell */
    /* Input and unit span flow naturally as inline elements */
    white-space: nowrap;
}

/* Measurement inputs - dark theme specific */
#measurements-table .measurement-group-table input[type="text"].measurement-input,
.measurement-group-table input.measurement-input,
.measurement-input,
input.measurement-input[type="text"] {
    width: 80px !important;
    min-width: 0 !important;
    max-width: 80px !important;
    height: 26px !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.8rem !important;
    background-color: var(--bg-input) !important;
    border: var(--border-width) solid var(--grey-border) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--grey-bright) !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    text-align: right;
    box-sizing: border-box !important;
    vertical-align: middle;  /* v8.08: Align with unit span */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Full-width input */
#measurements-table .measurement-group-table input[type="text"].measurement-input.full-width,
.measurement-group-table input.measurement-input.full-width,
.measurement-input.full-width,
input.measurement-input.full-width[type="text"] {
    width: 149px !important;
    max-width: 149px !important;
    text-align: left;
}

.measurement-input:focus {
    border-color: var(--attention) !important;
    outline: none;
    box-shadow: 0 0 0 2px var(--attention-glow);
    background-color: var(--bg-input-focus) !important;
}

/* Calculated measurement inputs - high specificity to override base rules */
#measurements-table .measurement-group-table input[type="text"].measurement-input.calculated,
.measurement-group-table input.measurement-input.calculated,
.measurement-input.calculated,
input.measurement-input.calculated[type="text"] {
    background-color: var(--attention-dim) !important;
}

#measurements-table .measurement-group-table input[type="text"].measurement-input.calculated:focus,
.measurement-group-table input.measurement-input.calculated:focus,
.measurement-input.calculated:focus,
input.measurement-input.calculated[type="text"]:focus {
    background-color: var(--attention-dim) !important;
    border-color: var(--attention-strong) !important;
    box-shadow: 0 0 0 2px var(--attention-glow);
}

/* v8.09: Reference range highlighting for measurement table inputs */
#measurements-table .measurement-group-table input[type="text"].measurement-input.ref-normal,
.measurement-group-table input.measurement-input.ref-normal,
.measurement-input.ref-normal,
input.measurement-input.ref-normal[type="text"],
.modal-measurement-input.ref-normal {
    background-color: var(--normal-bg) !important;
}

#measurements-table .measurement-group-table input[type="text"].measurement-input.ref-abnormal,
.measurement-group-table input.measurement-input.ref-abnormal,
.measurement-input.ref-abnormal,
input.measurement-input.ref-abnormal[type="text"],
.modal-measurement-input.ref-abnormal {
    background-color: var(--abnormal-bg) !important;
}

/* Focused ref-range inputs keep ref background with accent border */
.measurement-input.ref-normal:focus,
.modal-measurement-input.ref-normal:focus {
    background-color: var(--normal-bg) !important;
    border-color: var(--interactive) !important;
}

.measurement-input.ref-abnormal:focus,
.modal-measurement-input.ref-abnormal:focus {
    background-color: var(--abnormal-bg) !important;
    border-color: var(--interactive) !important;
}

.measurement-unit {
    color: var(--grey-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    width: 65px;
    display: inline-block;  /* v8.08: Replaces flex sizing */
    text-align: left;
    overflow: hidden;
    margin-left: 4px;  /* v8.08: Replaces flex gap */
    vertical-align: middle;
}

/* Hide unit when input is full-width */
.measurement-input.full-width + .measurement-unit {
    display: none;
}

/* v7.0: Hover feedback for measurement rows */
.measurement-group-table tr:hover {
    background-color: color-mix(in srgb, var(--h1) 6%, transparent);
}

/* v7.0: Measurement row being dragged */
.measurement-group-table tr.measurement-row-dragging {
    opacity: 0.5;
    background-color: color-mix(in srgb, var(--h1) 15%, transparent) !important;
}

/* Show grab cursor on measurement rows (except on inputs) */
.measurement-group-table tr td:not(:has(input)) {
    cursor: grab;
}

.measurement-group-table tr td:not(:has(input)):active {
    cursor: grabbing;
}

/* v8.08: Attention highlight when clicking measurement span in report */
.measurement-group-table tr.measurement-row-attention {
    animation: measurement-attention 1.5s ease-out;
}

@keyframes measurement-attention {
    0% {
        background-color: color-mix(in srgb, var(--h1) 25%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h1) 40%, transparent);
    }
    50% {
        background-color: color-mix(in srgb, var(--h1) 15%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h1) 25%, transparent);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}


/* ============================================================================
   OPTIONS PANEL (Right Column)
   ============================================================================ */

#options-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* v9.02: Unified toolbar — grid aligned with columns below */
.toolbar-row {
    display: grid;
    grid-template-columns: 325px 1fr;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
}

/* Left cell — aligned with measurements column */
.toolbar-left {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* Import button sizing */
.toolbar-left #open-import-modal {
    padding: 0 0.8rem;
    font-size: 0.8rem;
    line-height: calc(var(--element-height) - 2 * var(--border-width));
}

/* v9.02: New Report button — square icon, matches Report Manager colour */
#new-report-button {
    background-color: var(--attention-btn);
    border-color: var(--attention-btn);
}

#new-report-button:hover {
    background-color: var(--attention-btn-hover);
    border-color: var(--attention-btn-hover);
}

#new-report-button svg {
    stroke: var(--grey-bright);
}

/* Right cell — aligned with report column */
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hidden spacer — hides snippet button without affecting layout */
.add-snippet-button.hidden-spacer {
    display: none;
}

/* Center group - state and template controls */
.template-selector-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
}

/* Right group - utility buttons */
.utility-buttons-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* REMOVED: Label no longer needed with two dropdowns
.template-selector-group label {
    margin: 0;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--grey-text);
}
*/

/* Container for dynamic options file buttons */
#options-file-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* v8.1: State dropdown - base configuration selector */
#state-config-select {
    min-width: 140px;
    max-width: 180px;
    height: var(--element-height);
    margin: 0;
    padding: 0 2rem 0 0.75rem;
    font-weight: var(--font-weight-medium);
}

/* v8.1: Template dropdown - report layout selector */
#template-select {
    min-width: 160px;
    max-width: 220px;
    height: var(--element-height);
    margin: 0;
    padding: 0 2rem 0 0.75rem;
    font-weight: var(--font-weight-normal);
    color: var(--grey-text);
}

#template-select:focus,
#template-select:hover {
    color: var(--grey-bright);
}

/* Legacy: Single dropdown (backward compatibility - can be removed later) */
#report-config-select {
    min-width: 300px;
    height: var(--element-height);
    margin: 0;
    padding: 0 2rem 0 0.75rem;
}

/* Default for any select in the toolbar */
.toolbar-row select {
    height: var(--element-height);
    margin: 0;
}

/* v8.1: Responsive - adjust dropdowns on smaller screens */
@media (max-width: 900px) {
    .template-selector-group {
        flex-wrap: wrap;
    }
    
    #state-config-select,
    #template-select {
        min-width: 120px;
        max-width: 160px;
    }
}


/* ============================================================================
   ICON BUTTONS
   ============================================================================ */

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--element-height);
    height: var(--element-height);
    min-width: var(--element-height);
    padding: 0 !important;
    margin: 0;
    background-color: var(--interactive);
    border: var(--border-width) solid var(--interactive);
    border-radius: var(--border-radius);
    color: var(--text-inverse);
    cursor: pointer;
    transition: background-color var(--transition),
                border-color var(--transition);
}

.icon-button:hover {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

.icon-button:focus {
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}

.icon-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

/* H2: Secondary icon buttons (Undo, Redo, Help) — attention hue */
.icon-button.secondary {
    background-color: var(--attention-btn);
    border-color: var(--attention-btn);
    color: var(--grey-bright);
}

.icon-button.secondary:hover {
    background-color: var(--attention-btn-hover);
    border-color: var(--attention-btn-hover);
}

.icon-button.secondary:focus {
    box-shadow: 0 0 0 var(--outline-width) var(--attention-glow);
}

/* Disabled state for icon buttons */
.icon-button:disabled,
.icon-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.icon-button.secondary:disabled,
.icon-button.secondary.disabled {
    background-color: var(--attention-btn);
    border-color: var(--attention-btn);
}

/* H3: Auto/Algorithm button - teal accent */
#run-algorithms {
    font-size: 0;
    background-color: var(--auto);
    border-color: var(--auto);
}

#run-algorithms:hover {
    background-color: var(--auto-hover);
    border-color: var(--auto-hover);
}

#run-algorithms:focus {
    box-shadow: 0 0 0 var(--outline-width) var(--auto-glow);
}


/* ============================================================================
   REPORT TEXTAREA (Contenteditable)
   ============================================================================ */

#report-textarea,
.report-contenteditable {
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius-lg);
    padding: 0.75rem;
    padding-left: 46px;  /* v8.5: Wider for horizontal button group */
    padding-bottom: 3em;  /* Extra padding for scroll context below cursor */
    background-color: var(--grey-surface);
    color: var(--grey-bright);
    min-height: 0;
}

#report-textarea:focus,
.report-contenteditable:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px var(--interactive-glow);
}

/* v9.1: Visual feedback during rebuild — content fades out then back in */
#report-textarea {
    transition: opacity 0.15s ease;
}
#report-textarea.rebuilding {
    opacity: 0;
}

/* Copy button */
.copy-button-container {
    margin-top: 0.75rem;
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
}

#copy-report {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: var(--element-height);
}

#freeze-report {
    flex-shrink: 0;
}


/* ============================================================================
   BUTTON STYLES - Named Elements
   ============================================================================ */

/* H1: Interactive primary buttons (steel blue) */
#copy-report,
#submit,
#open-import-modal,
.inline-edit-button,
.modal-back-button,
.modal-next-button,
.modal-done-button,
/* v8.1.1: Differential edit button states */
.modal-edit-button.edit-mode-dropdown {
    background-color: var(--interactive);
    border-color: var(--interactive);
    color: var(--text-inverse);
}

.modal-edit-button.edit-mode-text {
    background-color: var(--interactive-neutral);
    border-color: var(--interactive-neutral);
    color: var(--text-inverse);
}

.modal-edit-button.edit-mode-dropdown:hover {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

.modal-edit-button.edit-mode-text:hover {
    background-color: var(--interactive-neutral-hover);
    border-color: var(--interactive-neutral-hover);
}

#copy-report:hover,
#submit:hover,
#open-import-modal:hover,
.inline-edit-button:hover,
.modal-back-button:hover,
.modal-next-button:hover,
.modal-done-button:hover {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

/* v8.1.1: Auto button for algorithm output parameters in modals */
.param-options.has-auto-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.param-options.has-auto-button .modal-select,
.param-options.has-auto-button .modal-textarea,
.param-options.has-auto-button .modal-custom-textarea {
    flex: 1;
    min-width: 0;
}

.modal-auto-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--auto);
    border-radius: var(--border-radius);
    background-color: var(--auto);
    color: var(--text-inverse);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.modal-auto-button:hover {
    background-color: var(--auto-hover);
    border-color: var(--auto-hover);
}

.modal-auto-button:focus {
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--auto-glow);
}

.modal-auto-button svg {
    width: 14px;
    height: 14px;
}

/* v9.1 Algorithm Modal Overrides */
.algo-modal {
    z-index: 1050;
}

.algo-confirm-button {
    background-color: var(--auto);
    border: 1px solid var(--auto);
    color: var(--text-inverse);
    padding: 0.4rem 1.2rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.algo-confirm-button:hover {
    background-color: var(--auto-hover);
    border-color: var(--auto-hover);
}

.algo-confirm-button:focus {
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--auto-glow);
}

/* Per-algorithm Confirm uses interactive styling (commits, doesn't re-run) */
.modal-done-button.algo-confirm-button {
    background-color: var(--interactive);
    border-color: var(--interactive);
}

.modal-done-button.algo-confirm-button:hover {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

.modal-done-button.algo-confirm-button:focus {
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}

/* Auto (re-run) button in algorithm modal action bar — square icon */
.algo-auto-button {
    background-color: var(--auto);
    border: 1px solid var(--auto);
    color: var(--text-inverse);
    width: var(--element-height);
    height: var(--element-height);
    padding: 0;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.algo-auto-button:hover {
    background-color: var(--auto-hover);
    border-color: var(--auto-hover);
}

.algo-auto-button:focus {
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--auto-glow);
}

.algo-auto-button svg {
    width: 14px;
    height: 14px;
}

/* v9.1 Algorithm Output Section — pinned to bottom of modal */
.algo-output-section {
    flex-shrink: 0;
    border-top: 1px solid var(--auto-medium);
    background-color: var(--auto-subtle);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    padding: 0.25rem 0;
}

.algo-output-table {
    margin: 0;
}

.algo-output-row .param-label {
    color: var(--auto);
    font-weight: 500;
}

/* Ochre tint on output row dropdowns/textareas when showing auto value */
.algo-output-row.algo-output-auto .modal-select,
.algo-output-row.algo-output-auto .modal-custom-textarea,
.algo-output-row.algo-output-auto .modal-textarea {
    border-color: var(--auto-strong);
    background-color: var(--auto-muted);
}

/* Select elements need an opaque background — semi-transparent causes
   Chromium to fall back to OS-native dropdown popups */
.algo-output-row.algo-output-auto .modal-select {
    background-color: color-mix(in srgb, var(--h3) 16%, var(--bg-input));
}

.algo-output-row.algo-output-auto .modal-select:focus,
.algo-output-row.algo-output-auto .modal-custom-textarea:focus,
.algo-output-row.algo-output-auto .modal-textarea:focus {
    border-color: var(--auto);
    box-shadow: 0 0 0 var(--outline-width) var(--auto-glow);
}

/* Secondary/gray buttons */
#reset-selections,
#clear-import {
    background-color: var(--interactive-neutral);
    border-color: var(--interactive-neutral);
    color: var(--grey-bright);
}

#reset-selections:hover,
#clear-import:hover {
    background-color: var(--interactive-neutral-hover);
    border-color: var(--interactive-neutral-hover);
}

/* Two-step clear button states (Import Modal) */
#clear-import.clear-textarea {
    background-color: var(--interactive);
    border-color: var(--interactive);
    color: var(--text-inverse);
}

#clear-import.clear-textarea:hover {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

#clear-import.clear-all {
    background-color: var(--interactive-neutral);
    border-color: var(--interactive-neutral);
    color: var(--grey-bright);
}

#clear-import.clear-all:hover {
    background-color: var(--interactive-neutral-hover);
    border-color: var(--interactive-neutral-hover);
}

#clear-import:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#clear-import:disabled:hover {
    background-color: var(--interactive-neutral);
    border-color: var(--interactive-neutral);
}


/* ============================================================================
   INLINE BUTTONS (Edit button within report text)
   v8.5: Horizontal layout - [x] on left, [edit] on right (next to text)
   Fits within single line height to avoid overlap on adjacent snippet rows
   ============================================================================ */

.inline-button-group {
    display: inline-flex;
    flex-direction: row-reverse;  /* DOM order is edit,delete; visual is delete,edit */
    align-items: center;
    gap: 2px;
    float: left;
    margin-left: -46px;  /* Match padding-left on .report-contenteditable */
    width: 38px;
    margin-right: 5px;
    margin-bottom: 0;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    line-height: 1;
    vertical-align: top;
}

/* Edit button - small square, positioned next to text */
.inline-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
}

.inline-edit-button svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Delete button - matches secondary icon button styling */
.inline-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 18px;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: none;
    border-radius: var(--border-radius-sm);
    background-color: var(--interactive-neutral);
    color: var(--grey-bright);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.inline-delete-button:hover {
    background-color: var(--interactive-neutral-hover);
}

.inline-delete-button:active {
    background-color: var(--grey-base);
}

.inline-delete-button svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Hide delete button in print */
@media print {
    .inline-delete-button {
        display: none !important;
    }
}


/* ============================================================================
   SPAN TEXT COLORING - Block-like appearance on interaction
   Uses box-shadow instead of border to avoid layout shifts
   ============================================================================ */

[data-type],
[data-handle] {
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast),
                box-shadow var(--transition-fast),
                color var(--transition-fast);
    cursor: pointer;
}

/* Clean measurements - transparent container (v8.2)
   Inner .embedded-measurement span handles all visual presentation */
.span-clean-measurement,
[data-type="measurement"][data-status="clean"] {
    background-color: transparent;
}

.span-clean-measurement:hover,
[data-type="measurement"][data-status="clean"]:hover {
    background-color: transparent;
}

/* Dirty/auto measurement outer spans - transparent container (v8.2)
   Override generic dirty/auto hover for measurements */
[data-type="measurement"][data-status="dirty"],
[data-type="measurement"][data-status="dirty"]:hover {
    background-color: transparent;
    box-shadow: none;
}

[data-type="measurement"][data-status="auto"],
[data-type="measurement"][data-status="auto"]:hover {
    background-color: transparent;
    box-shadow: none;
}

/* Clean parameters - Green */
.span-clean-parameter,
[data-type="parameter"][data-status="clean"] {
    background-color: transparent;
}

.span-clean-parameter:hover,
[data-type="parameter"][data-status="clean"]:hover {
    background-color: var(--interactive-subtle);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--interactive-glow);
}

/* Alt/Alt2/Fixed/Embedded parameters - share parameter styling (H1) */
.span-clean-alt,
.span-clean-alt2,
.span-clean-fixed,
.embedded-alt,
.embedded-alt2,
.embedded-alt.embedded-empty,
.embedded-alt2.embedded-empty,
[data-type="alt"][data-status="clean"],
[data-type="alt2"][data-status="clean"],
[data-type="fixed-text"][data-status="clean"] {
    background-color: transparent;
}

.span-clean-alt:hover,
.span-clean-alt2:hover,
.span-clean-fixed:hover,
.embedded-alt:hover,
.embedded-alt2:hover,
.embedded-alt.embedded-empty:hover,
.embedded-alt2.embedded-empty:hover,
[data-type="alt"][data-status="clean"]:hover,
[data-type="alt2"][data-status="clean"]:hover,
[data-type="fixed-text"][data-status="clean"]:hover {
    background-color: var(--interactive-subtle);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--interactive-glow);
}

/* Dirty (any type) - Blue (hover-only) */
.span-dirty,
[data-status="dirty"] {
    background-color: transparent;
}

.span-dirty:hover,
[data-status="dirty"]:hover {
    background-color: var(--attention-muted);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--attention-border);
}

/* Manual edit spans - shares dirty styling (H2) */
[data-type="manual"] {
    background-color: transparent;
}

[data-type="manual"]:hover {
    background-color: var(--attention-muted);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--attention-border);
}

/* H3: Auto (algorithm-set) - Teal (PERSISTENT - always visible) */
.span-auto,
[data-status="auto"] {
    background-color: var(--auto-muted);
    border-radius: var(--border-radius);
}

.span-auto:hover,
[data-status="auto"]:hover {
    background-color: var(--auto-medium);
    box-shadow: inset 0 0 0 1px var(--auto-strong);
}

/* Unknown state */
.span-unknown {
    background-color: var(--grey-muted);
    color: var(--grey-bright);
}

.span-unknown:hover {
    background-color: var(--grey-text);
}

/* Clean summarystring - shares parameter styling (H1) */
.span-clean-summarystring,
[data-type="summarystring"][data-status="clean"] {
    background-color: transparent;
}

.span-clean-summarystring:hover,
[data-type="summarystring"][data-status="clean"]:hover {
    background-color: var(--interactive-subtle);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--interactive-glow);
}

/* Summary anchor - invisible placeholder */
.summary-anchor,
[data-type="summary-anchor"] {
    display: inline;
    background: none;
    padding: 0;
    margin: 0;
    box-shadow: none !important;
}

/* Summary line break spans */
.summary-linebreak,
[data-type="summary-linebreak"] {
    background-color: transparent;
}

.summary-linebreak:hover,
[data-type="summary-linebreak"]:hover {
    background-color: var(--interactive-subtle);
}

/* v7.0: Summary number spans - auto-generated line numbers */
.span-summary-number,
[data-type="summary-number"] {
    background-color: transparent;
    color: var(--grey-text);
    font-weight: 500;
    user-select: none;
    pointer-events: none;  /* Can't be clicked/edited */
}

/* Summarystring dirty state (hover-only) */
[data-type="summarystring"][data-status="dirty"] {
    background-color: transparent;
}

[data-type="summarystring"][data-status="dirty"]:hover {
    background-color: var(--attention-muted);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--attention-border);
}

/* Summarystring auto state (PERSISTENT - always visible) */
[data-type="summarystring"][data-status="auto"] {
    background-color: var(--auto-muted);
    border-radius: var(--border-radius);
}

[data-type="summarystring"][data-status="auto"]:hover {
    background-color: var(--auto-medium);
    box-shadow: inset 0 0 0 1px var(--auto-strong);
}

/* ============================================================================
   EMBEDDED MEASUREMENT SPANS (v8.1 Phase 1)
   Nested spans within parameter body content that hold live measurement values.
   These are always visible (PERSISTENT) to indicate they are editable/linked.
   ============================================================================ */

.embedded-measurement {
    background-color: var(--attention-subtle);
    border-radius: 2px;
    padding: 0 2px;
    margin: 0 1px;
    cursor: text;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    display: inline;
}

.embedded-measurement:hover {
    background-color: var(--attention-muted);
}

.embedded-measurement:focus {
    background-color: var(--attention-muted);
    outline: none;
}

/* Empty embedded measurement - minimal placeholder so span stays clickable */
.embedded-measurement.embedded-empty {
    background-color: var(--attention-dim);
    min-width: 2em;
    display: inline-block;
}

/* v8.09: Reference range highlighting for embedded measurement spans */
.embedded-measurement.ref-normal {
    background-color: color-mix(in srgb, var(--h4) 30%, transparent);
}

.embedded-measurement.ref-abnormal {
    background-color: color-mix(in srgb, var(--h5) 32%, transparent);
}

/* Template-dirty status -
   Static text around embedded spans was edited, but live measurement links preserved
   v8.2: Matches manual/dirty hover-only styling (no persistent indicator) */
.span-template-dirty {
    background-color: transparent;
}

.span-template-dirty:hover {
    background-color: var(--attention-muted);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--attention-border);
}

/* Template-dirty placeholder option in modal dropdowns */
.template-dirty-placeholder {
    color: var(--grey-muted);
    font-style: italic;
}


/* ============================================================================
   DRAG AND DROP - Span Reordering
   ============================================================================ */

/* v7.5: Normal text cursor for spans - Ctrl/Cmd+drag for reordering */
#report-textarea [data-type],
#report-textarea [data-handle] {
    cursor: text;
}

/* Grabbing cursor while dragging */
body.is-dragging-span,
body.is-dragging-span * {
    cursor: grabbing !important;
}

/* Dragging state - the element being dragged */
.span-dragging {
    opacity: 0.4;
    background-color: var(--bg-surface-hover) !important;
    box-shadow: none !important;
}

/* Drop target hover state */
.span-drag-over {
    background-color: var(--interactive-muted) !important;
    box-shadow: inset 0 0 0 1px var(--interactive) !important;
    border-radius: var(--border-radius);
}

/* Drop indicator line - both vertical (between spans) and horizontal (empty lines) */
.drop-indicator {
    background-color: var(--interactive);
    border-radius: 1px;
    box-shadow: 0 0 4px var(--interactive),
                0 0 8px var(--interactive-glow);
}

/* Visual feedback when element is successfully moved */
.span-just-moved {
    animation: span-moved-flash 0.5s ease;
}

@keyframes span-moved-flash {
    0% {
        background-color: var(--interactive-muted);
        box-shadow: 0 0 8px var(--interactive-glow);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Disable text selection while dragging */
#report-textarea[data-dragging="true"] {
    user-select: none;
    -webkit-user-select: none;
}

#report-textarea[data-dragging="true"] * {
    user-select: none;
    -webkit-user-select: none;
}

/* Prevent pointer events on other elements while dragging */
body.is-dragging-span #report-textarea [data-type]:not(.span-dragging),
body.is-dragging-span #report-textarea [data-handle]:not(.span-dragging) {
    pointer-events: auto;
}


/* ============================================================================
   PARAM BLOCKS (conditional if-block wrappers)
   ============================================================================ */

.param-block {
    display: inline;
}

.param-block:not(.block-empty)::before {
    content: "\A";
    white-space: pre;
}

.param-block.block-empty {
    display: none;
}


/* ============================================================================
   LINE CONTAINERS (v8.0)
   Each template line becomes a .report-line div. Line breaks are implicit
   (one div = one line). Internal newlines within spans are just \n characters.
   ============================================================================ */

/* Base line container */
.report-line {
    display: block;
    min-height: 1.4em;  /* Ensure empty lines have height */
    line-height: 1.4;   /* Match min-height for consistent cursor positioning */
}

/* Hidden lines (if-block with empty value) */
.report-line.block-empty {
    display: none;
}

/* Inline if-blocks */
.if-inline {
    display: inline;
}

.if-inline.block-empty {
    display: none;
}

/* Line placeholder for empty lines - uses zero-width space for cursor positioning */
.report-line [data-type="line-placeholder"] {
    display: inline;
    color: transparent;
    user-select: none;
}

/* Ensure spans with internal newlines render correctly */
.report-line [data-handle] {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Summary line containers */
.report-line.summary-line {
    display: block;  /* Use block so spans flow inline */
}

/* Summary number styling */
.report-line.summary-line [data-type="summary-number"] {
    display: inline-block;
    min-width: 1.5em;
    text-align: right;
    margin-right: 0.25em;
    white-space: nowrap;
}

/* Summarystring and manual spans flow inline within summary lines */
.report-line.summary-line [data-type="summarystring"],
.report-line.summary-line [data-type="manual"] {
    display: inline;
}

/* v8.0 Fix: Hide lines that ONLY contain the invisible summary-anchor */
.report-line:has([data-type="summary-anchor"]):not(:has([data-handle]:not([data-type="summary-anchor"]))) {
    display: none;
}

/* User-inserted lines */
.report-line[data-inserted="user"] {
    /* Optional: subtle visual indicator for user-inserted content */
}

/* Drag-drop target lines */
.report-line.drop-target {
    background-color: var(--interactive-muted);
    box-shadow: inset 0 0 0 1px var(--interactive);
    border-radius: var(--border-radius);
}


/* ============================================================================
   PARAMETER CONTEXT MENU - Dark Theme
   ============================================================================ */

.param-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--grey-elevated);
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    padding: 3px 0;
    margin: 0;
    list-style: none;
    min-width: 150px;
    max-width: 600px;
    max-height: 400px;
    overflow-y: auto;
}

.param-context-menu .context-menu-item {
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--grey-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.param-context-menu .context-menu-item:hover {
    background-color: var(--bg-surface-hover);
}

.param-context-menu .context-menu-item.selected {
    background-color: var(--interactive-muted);
    font-weight: var(--font-weight-medium);
}

.param-context-menu .context-menu-item.selected::before {
    content: "✓ ";
    color: var(--interactive);
}

.param-context-menu .context-menu-separator {
    height: 1px;
    background-color: var(--grey-border);
    margin: 3px 8px;
    padding: 0;
}

.param-context-menu .context-menu-custom {
    color: var(--grey-text);
    font-style: italic;
}

/* v7.5: Context menu action items */
.param-context-menu .context-menu-action {
    font-weight: var(--font-weight-medium);
}

/* H3: Auto option - teal background with white text */
.param-context-menu .context-menu-auto {
    background-color: var(--auto);
    color: var(--text-inverse);
}

.param-context-menu .context-menu-auto:hover {
    background-color: var(--auto-hover);
}

/* Summary/Clear options - subtle accent background */
.param-context-menu .context-menu-summary,
.param-context-menu .context-menu-clear {
    background-color: var(--interactive-muted);
}

.param-context-menu .context-menu-summary:hover,
.param-context-menu .context-menu-clear:hover {
    background-color: var(--interactive-glow);
}
/* ============================================================================
   MODAL STYLES - Base
   ============================================================================ */

.modal,
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--modal-backdrop);
}

#import-modal {
    z-index: 1100;
}

.modal.active,
.modal-overlay.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
}

.modal-content {
    background-color: var(--grey-elevated);
    border-radius: var(--border-radius-lg);
    border: var(--border-width) solid var(--grey-border-strong);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    min-width: 300px;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#import-modal .modal-content {
    max-width: 600px;
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: var(--border-width) solid var(--grey-border);
    background-color: var(--bg-modal-header);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    position: relative;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    text-align: center;
    color: var(--grey-bright);
}

.modal-header .close-button {
    position: absolute;
    right: 1rem;
}

.close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--grey-text);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

.close-button:hover {
    background-color: var(--bg-surface-hover);
    color: var(--grey-bright);
}

.modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-body .template-options-table {
    margin: 0;
}

.modal-body .template-options-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-body .template-options-table tbody td:first-child,
.modal-body .template-options-table tbody td:last-child {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}


/* ============================================================================
   MODAL ACTIONS BAR
   ============================================================================ */

.modal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: var(--border-width) solid var(--grey-border);
    background-color: var(--bg-modal-header);
}

.modal-back-button,
.modal-done-button,
.modal-next-button {
    margin: 0 !important;
    padding: 0 1.25rem !important;
    height: var(--element-height) !important;
    font-size: 0.9rem !important;
}

.modal-back-placeholder {
    visibility: hidden;
    margin: 0 !important;
    padding: 0 1.25rem !important;
    height: var(--element-height) !important;
    font-size: 0.9rem !important;
    width: auto;
    min-width: 70px;
}


/* ============================================================================
   MODAL STYLES - Group Modals (Right Column Overlay)
   ============================================================================ */

.modal-overlay {
    left: auto;
    right: 0;
    width: calc(100% - 325px - 2rem);
    background-color: var(--modal-backdrop-light);
}

@media (min-width: calc(1300px + 2rem)) {
    .modal-overlay {
        right: calc((100% - 1300px + 2rem) / 2);
        width: calc(1300px - 325px - 2rem);
    }
}

.modal-overlay.active {
    padding: 5vh 1rem 1rem 1rem;
}

.modal-overlay .modal-content {
    max-width: 750px;
    width: 95%;
}

.modal-overlay .modal-body {
    padding-bottom: 1.5rem;
}


/* ============================================================================
   TEMPLATE OPTIONS TABLE - Dark Theme
   ============================================================================ */

.template-options-table {
    width: 100%;
    border-collapse: collapse;
}

.template-options-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-modal-header);
}

.template-options-table thead th {
    color: var(--grey-text);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 2px solid var(--grey-border);
    background-color: var(--bg-modal-header);
}

.template-options-table thead th:first-child {
    text-align: right;
    width: 25%;
    max-width: 220px;
}

.template-options-table thead th:nth-child(2) {
    text-align: center;
    width: 40px;
}

.template-options-table thead th:nth-child(3) {
    text-align: left;
    width: auto;
}

.template-options-table thead th:last-child {
    text-align: center;
    width: 60px;
}

.template-options-table tbody td {
    border-bottom: var(--border-width) solid var(--grey-border);
    vertical-align: middle;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}

.template-options-table tbody td:first-child {
    padding-left: 1rem;
}

.template-options-table tbody td:last-child {
    padding-right: 1rem;
}

.template-options-table thead th:first-child {
    padding-left: 1rem;
}

.template-options-table thead th:last-child {
    padding-right: 1rem;
}

.template-options-table .param-label,
.template-options-table .measurement-label {
    font-weight: var(--font-weight-medium);
    font-size: 0.8rem;
    white-space: nowrap;
    text-align: right;
    padding-right: 1rem;
    width: 220px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--grey-text);
}

.template-options-table .param-edit,
.template-options-table .measurement-edit {
    text-align: center;
    width: 40px;
    padding: 0.35rem 0.25rem;
}

.modal-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.template-options-table .param-options,
.template-options-table .measurement-value-cell {
    padding: 0.35rem 0.5rem;
}

.template-options-table .param-options select,
.template-options-table .param-options textarea {
    width: 100%;
    min-width: 250px;
    margin: 0;
    height: var(--element-height);
    font-size: 0.8rem;
}

.template-options-table .param-options textarea,
.template-options-table .modal-textarea {
    height: var(--element-height);
    min-height: var(--element-height);
    resize: none;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
    overflow: hidden;
}

.modal-custom-textarea {
    width: 100%;
    margin-top: 0.5rem !important;
    height: var(--element-height);
    min-height: var(--element-height);
    resize: none;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.4rem 0.6rem;
    background-color: var(--bg-input);
    color: var(--grey-bright);
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.modal-custom-textarea:focus {
    border-color: var(--interactive);
    outline: none;
    box-shadow: 0 0 0 var(--outline-width) var(--interactive-glow);
}

/* Greyed out dropdown */
/* v8.1.1: greyed-out class removed - dropdown is now hidden during custom text mode */

.template-options-table .param-summary,
.template-options-table .measurement-summary {
    text-align: center;
    width: 60px;
}

.template-options-table .param-summary input[type="checkbox"] {
    margin: 0;
    width: 20px;
    height: 20px;
}


/* ============================================================================
   MODAL MEASUREMENT ROWS
   ============================================================================ */

/* Measurement rows inherit default background like parameter rows */

.modal-measurement-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal-measurement-input {
    width: 80px !important;
    min-width: 0 !important;
    max-width: 80px !important;
    height: var(--element-height);
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    text-align: right;
    background-color: var(--bg-input);
    color: var(--grey-bright);
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius);
    margin: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

.modal-measurement-input.full-width {
    width: 149px !important;
    max-width: 149px !important;
    text-align: left;
}

.modal-measurement-input:focus {
    border-color: var(--interactive);
    outline: none;
    box-shadow: 0 0 0 2px var(--interactive-glow);
}

.modal-measurement-input.calculated {
    background-color: var(--attention-dim);
}

.modal-measurement-input.calculated:focus {
    background-color: var(--attention-dim);
    border-color: var(--attention-strong);
    box-shadow: 0 0 0 2px var(--attention-glow);
}

.modal-measurement-unit {
    color: var(--grey-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    width: 65px;
    flex: 0 0 65px;
    text-align: left;
}

.modal-measurement-input.full-width + .modal-measurement-unit {
    display: none;
}


/* ============================================================================
   IMPORT MODAL SPECIFIC
   ============================================================================ */

.format-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    background-color: var(--bg-modal-header);
}

.format-selector label {
    margin: 0;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--grey-text);
}

.format-selector select {
    flex: 1;
    min-width: 150px;
    margin: 0;
}

.format-selector button {
    margin: 0;
    height: var(--element-height);
    padding: 0 1rem;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.format-selector .help-button {
    padding: 0 0.65rem;
    font-size: 0.9rem;
    min-width: var(--element-height);
}

#report {
    width: calc(100% - 2rem);
    min-height: 300px;
    font-family: var(--font-family-mono);
    font-size: 0.85rem;
    resize: vertical;
    margin: 0 1rem 1rem 1rem;
    background-color: var(--bg-input);
    color: var(--grey-bright);
}


/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

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

.text-small {
    font-size: 0.85rem;
}

.hidden {
    display: none !important;
}


/* ============================================================================
   PASSWORD GATE OVERLAY - Dark Theme
   ============================================================================ */

#password-gate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--grey-base) 0%, var(--grey-surface) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#password-gate-overlay.fade-out {
    opacity: 0;
}

.password-gate-modal {
    background: var(--grey-surface);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 90%;
    text-align: center;
    border: var(--border-width) solid var(--grey-border);
}

.password-gate-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--interactive);
    letter-spacing: -0.5px;
}

.password-gate-header p {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: var(--grey-text);
    font-weight: var(--font-weight-normal);
}

.password-gate-form {
    margin-bottom: 1.25rem;
}

.password-gate-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#password-gate-input {
    width: 250px;
    height: 40px;
    padding: 0 1rem;
    font-size: 1rem;
    background-color: var(--bg-input);
    color: var(--grey-bright);
    border: var(--border-width) solid var(--grey-border);
    border-radius: var(--border-radius);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

#password-gate-input:focus {
    border-color: var(--interactive);
    box-shadow: 0 0 0 3px var(--interactive-glow);
}

#password-gate-input::placeholder {
    color: var(--grey-muted);
}

#password-gate-submit {
    width: 120px;
    height: 40px;
    padding: 0 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: var(--interactive);
    color: var(--text-inverse);
    border: var(--border-width) solid var(--interactive);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

#password-gate-submit:hover:not(:disabled) {
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

#password-gate-submit:active:not(:disabled) {
    transform: scale(0.98);
}

#password-gate-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.password-gate-error {
    color: var(--status-error);
    font-size: 0.85rem;
    min-height: 1.25rem;
    margin-top: 0.5rem;
}

@keyframes password-gate-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.password-gate-form.shake {
    animation: password-gate-shake 0.5s ease;
}

@media (max-width: 480px) {
    .password-gate-modal {
        padding: 2rem 1.5rem;
    }
    
    #password-gate-input,
    #password-gate-submit {
        width: 100%;
    }
}

/* ============================================================================
   FRESH START MODAL
   ============================================================================ */

/* Full-page overlay (override the right-column-only default) */
#fresh-start-modal.modal-overlay {
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 99999;
}

#fresh-start-modal .modal-content {
    max-width: 400px;
    width: 90%;
}

#fresh-start-modal .modal-header {
    justify-content: center;
    position: relative;
}

#fresh-start-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

#fresh-start-modal .modal-header .close-button {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

#fresh-start-modal .modal-header-icon {
    color: var(--interactive);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

#fresh-start-modal .modal-header-icon svg {
    width: 22px;
    height: 22px;
}

#fresh-start-modal .modal-body {
    padding: 1.25rem;
}

/* Session list */
.fs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Session item - div-based clickable container */
.fs-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--grey-surface);
    border: 1px solid var(--grey-border);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    overflow: hidden;
}

.fs-item:hover {
    border-color: var(--interactive);
    background: var(--grey-elevated);
}

.fs-item:focus {
    outline: none;
    border-color: var(--interactive);
    box-shadow: 0 0 0 2px var(--interactive-glow);
}

.fs-item-new {
    background: var(--grey-elevated);
    border-color: var(--grey-border-strong);
}

/* Danger/destructive action item */
.fs-item-danger {
    border-color: var(--grey-border);
    opacity: 0.85;
}

.fs-item-danger:hover {
    border-color: var(--status-error);
    background: color-mix(in srgb, var(--h5) 8%, transparent);
}

.fs-item-danger:focus {
    border-color: var(--status-error);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--h5) 15%, transparent);
}

.fs-item-danger .fs-name {
    color: var(--status-error);
}

.fs-item-danger .fs-name svg {
    stroke: var(--status-error);
}

/* Row inside session item */
.fs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0.75rem;
}

.fs-row + .fs-row {
    margin-top: 0.375rem;
}

/* Template name */
.fs-name {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--grey-bright);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-name svg {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Timestamp */
.fs-time {
    font-size: 0.85rem;
    color: var(--grey-text);
}

/* Status badges */
.fs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.fs-badge svg {
    width: 12px;
    height: 12px;
}

.fs-badge-ok {
    background: var(--interactive-muted);
    color: var(--grey-text);
}

.fs-badge-freeze {
    background: var(--attention-muted);
    color: var(--grey-muted);
}

/* Frozen report visual indicator */
#report-textarea.text-frozen {
    border-style: dashed;
}

/* Section divider */
.fs-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--grey-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fs-divider::before,
.fs-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--grey-border);
}

.fs-divider span {
    padding: 0 0.75rem;
}

/* Danger divider variant */
.fs-divider-danger {
    margin-top: 1.5rem;
    color: var(--grey-muted);
}

.fs-divider-danger::before,
.fs-divider-danger::after {
    background: var(--grey-border);
}

[data-theme="light"] .fs-item-danger .fs-name,
[data-theme="light"] .fs-item-danger .fs-name svg {
    color: color-mix(in oklch, var(--h5), #cc0000 70%);
    stroke: color-mix(in oklch, var(--h5), #cc0000 70%);
}

/* Empty state */
.fs-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--grey-text);
}

.fs-empty p {
    margin: 0;
}

/* =============================================================================
   HELP MODAL STYLES
   ============================================================================= */

/* Modal container */
.help-modal-content {
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.help-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Tab navigation - uses base button styles via .secondary class */
.help-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--grey-surface);
    border-bottom: 1px solid var(--grey-border);
}

.help-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.help-tab:focus {
    box-shadow: none;
}

/* Tab content panels */
.help-tab-content {
    display: none;
}

.help-tab-content.active {
    display: block;
}

/* Content headings */
.help-tab-content h3 {
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--grey-border);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--grey-bright);
}

.help-tab-content h3:not(:first-child) {
    margin-top: 1.75rem;
}

/* Content sections */
.help-section {
    margin-bottom: 1.25rem;
}

.help-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grey-bright);
}

.help-section p {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--grey-text);
}

.help-section p:last-child {
    margin-bottom: 0;
}

.help-section ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--grey-text);
}

.help-section ul li {
    margin-bottom: 0.25rem;
}

.help-section strong {
    font-weight: 600;
    color: var(--grey-bright);
}

/* Video container */
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 1rem auto;
    background: var(--grey-elevated);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--grey-border);
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    background: var(--grey-base);
}

.video-caption {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--grey-text);
    margin: 0.5rem 0 1.5rem 0;
}

.download-link {
    color: var(--interactive);
    text-decoration: none;
    margin-left: 0.5rem;
}

.download-link:hover {
    color: var(--interactive-hover);
    text-decoration: underline;
}

/* Tables */
.help-table {
    width: 100%;
    margin: 0.75rem 0;
    font-size: 0.9rem;
    border-collapse: collapse;
}

.help-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--grey-border);
    color: var(--grey-text);
}

.help-table tr:last-child td {
    border-bottom: none;
}

.help-table td:first-child {
    width: 45%;
    font-weight: 500;
    color: var(--grey-bright);
}

.help-table-summary td:first-child {
    width: 40%;
}

.help-table-summary td:last-child strong {
    color: var(--interactive);
}

.help-table kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--grey-bright);
    background: var(--grey-elevated);
    border: 1px solid var(--grey-border);
    border-radius: 3px;
}

/* Document link section */
.help-contact {
    margin-top: 1.5rem;
    text-align: center;
}

.help-contact p {
    margin: 0;
}

/* Document link styled as button */
.help-doc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--element-height);
    padding: 0 1rem;
    font-size: 0.9rem;
    font-weight: var(--font-weight-normal);
    text-align: center;
    text-decoration: none;
    color: var(--text-inverse);
    background-color: var(--interactive);
    border: var(--border-width) solid var(--interactive);
    border-radius: var(--border-radius);
    transition: background-color var(--transition), border-color var(--transition);
}

.help-doc-link:hover {
    text-decoration: none;
    color: var(--text-inverse);
    background-color: var(--interactive-hover);
    border-color: var(--interactive-hover);
}

/* About tab */
.help-about-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--grey-border);
}

.help-about-header h3 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    border: none;
}

.help-version {
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
    color: var(--grey-text);
}

.help-copyright {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    border-top: 1px solid var(--grey-border);
}

.help-copyright p {
    color: var(--grey-muted);
}

.help-legal-note {
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 600px) {
    .help-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .help-tab {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .help-modal-content {
        max-height: 90vh;
    }
    
    .help-modal-body {
        padding: 1rem;
    }
}

/* ============================================================================
   SECURITY TAB STYLES
   ============================================================================ */

/* Security check status indicators */
.security-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.security-check.pending {
    background: var(--grey-elevated);
    border: 1px solid var(--grey-border);
    color: var(--grey-text);
}

.security-check.pass {
    background: var(--interactive-muted);
    border: 1px solid var(--interactive-glow);
    color: var(--interactive);
}

.security-check.fail {
    background: var(--abnormal-bg);
    border: 1px solid var(--abnormal-border);
    color: var(--status-error);
}

.security-check.warn {
    background: var(--auto-muted);
    border: 1px solid var(--auto-glow);
    color: var(--auto);
}

.security-check.neutral {
    background: var(--grey-surface);
    border: 1px solid var(--grey-border);
    color: var(--grey-text);
}

.security-check .security-icon {
    font-size: 1.1rem;
    min-width: 1.5rem;
    text-align: center;
}

.security-check .security-text {
    flex: 1;
}

/* Security details box */
.security-details {
    background: var(--grey-surface);
    border: 1px solid var(--grey-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.security-details code {
    background: var(--grey-elevated);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-family: var(--font-family-mono);
    font-size: 0.8rem;
    word-break: break-all;
}

.security-details ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.security-details li {
    margin: 0.25rem 0;
}

/* Security table cells */
.help-table-security td.security-cell {
    text-align: right;
    white-space: nowrap;
}

.security-cell .security-icon {
    display: inline-block;
    width: 1.2rem;
    text-align: center;
    margin-right: 0.25rem;
}

.security-cell .security-icon.pass { color: var(--interactive); }
.security-cell .security-icon.fail { color: var(--status-error); }
.security-cell .security-icon.neutral { color: var(--grey-text); }

/* Compact table for localStorage */
.help-table-compact {
    font-size: 0.85rem;
}

.help-table-compact td,
.help-table-compact th {
    padding: 0.4rem 0.75rem;
}

/* Test button */
.help-button-test {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--interactive-neutral);
    color: var(--grey-bright);
    border: 1px solid var(--grey-border-strong);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}

.help-button-test:hover {
    background: var(--interactive-neutral-hover);
}

/* Security intro text */
.help-security-intro {
    color: var(--grey-text);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--grey-border);
}

/* Help note */
.help-note {
    font-size: 0.85rem;
    color: var(--grey-muted);
    margin-top: 0.75rem;
}

/* Light mode overrides */
[data-theme="light"] .help-button-test {
    color: var(--text-inverse) !important;
}

[data-theme="light"] .security-check.pending {
    background: var(--grey-surface);
    border-color: var(--grey-border);
}

[data-theme="light"] .security-check.pass {
    background: var(--interactive-subtle);
    border-color: var(--interactive-glow);
    color: var(--interactive);
}

[data-theme="light"] .security-check.fail {
    background: var(--abnormal-bg);
    border-color: var(--abnormal-border);
    color: var(--status-error);
}

[data-theme="light"] .security-details {
    background: var(--grey-surface);
    border-color: var(--grey-border);
}

[data-theme="light"] .security-details code {
    background: var(--grey-base);
}

/* ============================================================================
   REFERENCE RANGE TOOLTIPS
   Hover tooltips showing BSE reference range grading for measurements.
   Append to style-echotools.css.
   ============================================================================ */

.ref-tooltip {
    display: none;
    position: absolute;
    min-width: 180px;
    z-index: 200;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--grey-border-strong);
    background: var(--grey-elevated);
    color: var(--grey-bright);
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.ref-tooltip-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: var(--border-width) solid var(--grey-border);
}

.ref-tooltip-unit {
    font-weight: 400;
    font-size: 0.72rem;
}

.ref-tooltip-table {
    border-collapse: collapse;
    width: 100%;
}

.ref-tooltip-table td {
    padding: 1px 0;
    vertical-align: top;
}

.ref-tooltip-label {
    padding-right: 16px;
}

.ref-tooltip-range {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Gender/age context note */
.ref-tooltip-note {
    margin-top: 4px;
    padding-top: 4px;
    border-top: var(--border-width) solid var(--grey-border);
    font-size: 0.7rem;
    font-style: italic;
}

/* Source attribution */
.ref-tooltip-source {
    margin-top: 2px;
    font-size: 0.65rem;
    color: var(--grey-muted);
    opacity: 0.7;
}

/* Light theme adjustments */
[data-theme="light"] .ref-tooltip {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}