/* FieldLog Microphone Calibration - Design System */
/* Consistent with FieldLog.net branding and visual style */

/* Design System Variables */
:root {
    /* Brand Colors */
    --brand-green: #6a8472; /* Ranger Green */
    --brand-blue: #0e3a5d;  /* Deep Ocean Blue */
    
    /* Primary Colors - Light Theme
       Ranger Green darkened from #6a8472, which measured 4.07:1 both as text on
       white and as a fill under white text — failing 4.5:1 in both of its roles.
       `-accent` is the brand colour used as TEXT or a border on a page surface;
       the base token is a FILL that carries `-on` as its foreground. One green
       cannot clear 4.5:1 in both roles, so the roles are separate tokens. */
    --color-primary: #5f7767;
    --color-primary-light: #7a9582;
    --color-primary-dark: #4d6355;
    --color-primary-accent: #4d6355;
    --color-primary-on: #ffffff;
    --color-primary-50: #f0f4f1;
    --color-primary-100: #d9e4db;
    
    /* Logo Display */
    --logo-black-display: inline-block;
    --logo-white-display: none;
    
    /* Secondary Colors */
    --color-secondary: #64748b;
    --color-secondary-light: #94a3b8;
    --color-secondary-dark: #475569;
    
    --color-accent: #06b6d4;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* `-dark` is safe as TEXT on a light tint; `-strong` is dark enough to carry
       WHITE text as a fill. The base values above are too light for either. */
    --color-success-dark: #047857;
    --color-success-strong: #047857;
    --color-warning-dark: #b45309;
    --color-danger-dark: #b91c1c;
    --color-accent-dark: #155e75;

    /* Second item in a comparison. Deliberately outside the status hues so it
       cannot be read as an error the way the previous red did. */
    --color-compare: #7c3aed;

    /* Text sitting on a low-alpha tint of its own hue (badges, score pills).
       The light-surface values are too dark to read once the tint composites
       over a dark card, so this role flips with the theme. */
    --on-tint-brand: var(--color-primary-dark);
    --on-tint-accent: var(--color-accent-dark);
    --on-tint-success: var(--color-success-strong);
    --on-tint-warning: var(--color-warning-dark);
    --on-tint-danger: var(--color-danger-dark);
    --on-tint-neutral: var(--color-secondary-dark);
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    
    /* Semantic Colors */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-tertiary: var(--color-gray-100);
    
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-500);
    
    --border-color: var(--color-gray-200);
    --border-color-light: var(--color-gray-100);

    /* Input Level Meter
       Scale runs -24 to 0 dBFS, mapped linearly in dB. Band edges at
       50% / 75% / 87.5% are -12 / -6 / -3 dBFS. Track bands are tinted
       so the solid fill bar reads above them. */
    --meter-band-low: rgba(100, 116, 139, 0.12);
    --meter-band-target: rgba(16, 185, 129, 0.18);
    --meter-band-hot: rgba(245, 158, 11, 0.20);
    --meter-band-over: rgba(239, 68, 68, 0.20);

    /* The bar sits on a near-white track here, so it needs the darker variants */
    --meter-fill-low: var(--color-secondary);
    --meter-fill-target: var(--color-success-dark);
    --meter-fill-hot: var(--color-warning-dark);
    --meter-fill-over: var(--color-danger-dark);

    /* Spectrum analyser. Stays a dark instrument field in both themes; the
       trace needs the contrast and it reads as a screen, not a page surface. */
    --spectrum-field: #0b1220;
    --spectrum-grid: #1f2c44;
    --spectrum-label: #94a3b8;
    --spectrum-trace-low: #5f7767;
    --spectrum-trace-high: #7dd3fc;

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    
    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   CALIBRATION STATUS INDICATORS
   ================================ */

.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.status-indicator.status-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 1px solid var(--color-warning-dark);
}

.status-content {
    flex: 1;
}

.status-title {
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-1) 0;
    color: var(--text-primary);
}

.status-subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ================================
   PISTONPHONE CALIBRATION MODAL
   ================================ */

/* Modal Overlay */
.modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-xl);
}

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mtype-badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mtype-badge--sweep {
    background: rgba(6, 182, 212, 0.12);
    color: var(--on-tint-accent);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.mtype-badge--piston {
    background: rgba(106, 132, 114, 0.12);
    color: var(--on-tint-brand);
    border: 1px solid rgba(106, 132, 114, 0.3);
}

.mtype-badge--excluded {
    background: rgba(100, 116, 139, 0.12);
    color: var(--on-tint-neutral);
    border: 1px solid rgba(100, 116, 139, 0.3);
    text-decoration: line-through;
}

/* Excluded mic-item row */
.mic-item--excluded {
    opacity: 0.5;
}

/* ========================================
   PISTONPHONE LEVEL SEGMENTED CONTROL
   ======================================== */

.piston-level-toggle {
    display: flex;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
    max-width: 320px;
}

.piston-level-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    color: var(--color-primary-accent);
    gap: var(--space-1);
    line-height: 1;
    font-family: var(--font-family-sans);
}

.piston-level-btn + .piston-level-btn {
    border-left: 2px solid var(--color-primary);
}

.piston-level-btn:hover:not(.active) {
    background: var(--color-primary-50);
}

.piston-level-btn.active {
    background: var(--color-primary);
    color: var(--color-primary-on);
}

.piston-level-btn__db {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-mono);
    letter-spacing: -0.5px;
}

.piston-level-btn__unit {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .piston-level-btn:hover:not(.active) {
    background: rgba(106, 132, 114, 0.15);
}

/* Match Threshold Row */
.pistonphone-threshold-row {
    margin-bottom: var(--space-5);
}

.pistonphone-threshold-row label {
    margin-bottom: var(--space-2);
}

.threshold-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.threshold-slider {
    flex: 1;
    max-width: 240px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--color-success), var(--color-warning), var(--color-danger));
    border-radius: var(--radius-full);
    cursor: pointer;
    border: none;
    outline: none;
}

.threshold-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.threshold-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    border-color: var(--color-primary-dark);
}

.threshold-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-mono);
    color: var(--color-primary-accent);
    min-width: 5rem;
    white-space: nowrap;
}

.threshold-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ========================================
   GENERATOR BAR & CALIBRATION CONTROLS
   ======================================== */

.generator-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    justify-content: space-between;
}

.generator-bar__signals,
.generator-bar__calibration {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.btn-sm.active {
    background: var(--color-primary);
    color: var(--color-primary-on);
    border-color: var(--color-primary);
}

.cal-status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-success-strong);
    color: white;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.level-spl {
    font-size: var(--font-size-sm);
    color: var(--color-success-dark);
    font-weight: var(--font-weight-normal);
}

/* Dark Theme */
[data-theme="dark"] {
    --logo-black-display: none;
    --logo-white-display: inline-block;

    /* The fill keeps its light-theme value (its contrast is against its own
       white label, not the page), but brand text has to lift off a dark surface */
    --color-primary-accent: #8faa97;

    --on-tint-brand: #a7c3b0;
    --on-tint-accent: #67e8f9;
    --on-tint-success: #6ee7b7;
    --on-tint-warning: #fcd34d;
    --on-tint-danger: #fca5a5;
    --on-tint-neutral: #cbd5e1;
    --color-compare: #c4b5fd;

    --bg-primary: var(--color-gray-900);
    --bg-secondary: var(--color-gray-800);
    --bg-tertiary: var(--color-gray-700);
    
    --text-primary: var(--color-gray-100);
    --text-secondary: var(--color-gray-300);
    --text-muted: var(--color-gray-400);
    
    --border-color: var(--color-gray-700);
    --border-color-light: var(--color-gray-600);

    /* Kept light enough that the solid fill still clears 3:1 against the band
       it sits on; the band only has to read as a zone, not compete with the bar */
    --meter-band-low: rgba(148, 163, 184, 0.10);
    --meter-band-target: rgba(16, 185, 129, 0.14);
    --meter-band-hot: rgba(245, 158, 11, 0.15);
    --meter-band-over: rgba(239, 68, 68, 0.16);

    /* On a dark track the bar reads better bright, so the base values win here */
    --meter-fill-low: var(--color-secondary-light);
    --meter-fill-target: var(--color-success);
    --meter-fill-hot: var(--color-warning);
    --meter-fill-over: var(--color-danger);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Header */
.app-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-4) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
   text-decoration: none;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.brand:hover {
    color: var(--color-primary-accent);
}

.brand-logo-black {
    height: 32px;
    width: auto;
    display: var(--logo-black-display);
}

.brand-logo-white {
    height: 32px;
    width: auto;
    display: var(--logo-white-display);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Theme Toggle */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.theme-toggle:hover {
    background: var(--bg-secondary);
    border-color: var(--color-primary-accent);
    color: var(--color-primary-accent);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* Page Title */
.page-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
    line-height: var(--line-height-relaxed);
}

/* Tabs */
.tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: thin;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

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

.tab-btn.active {
    color: var(--color-primary-accent);
    border-bottom-color: var(--color-primary-accent);
}

/* Secondary Tabs (for mode selection) */
.tabs-secondary {
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color-light);
}

.tabs-secondary .tab-btn {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
}

/* Mode Description Panel */
.mode-description-panel {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    min-height: 60px;
}

.mode-desc {
    display: none;
}

.mode-desc.active {
    display: block;
    animation: fadeIn var(--transition-fast);
}

.mode-desc p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

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

.tab-content.active {
    display: block;
    animation: fadeIn var(--transition-normal);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cards */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Form Elements */
.form-group {
    margin-bottom: var(--space-5);
}

label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-family: var(--font-family-sans);
}

.form-control:focus-visible,
.form-control:focus {
    outline: 2px solid var(--color-primary-accent);
    outline-offset: 1px;
    border-color: var(--color-primary-accent);
}

/* Buttons, tabs and links keep a visible ring too — previously none of them
   had a focus style of their own. */
.btn:focus-visible,
.tab-btn:focus-visible,
.theme-toggle:focus-visible,
.piston-level-btn:focus-visible,
.advanced-toggle-btn:focus-visible,
.mic-item:focus-visible,
.pair-card:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary-accent);
    outline-offset: 2px;
}

select.form-control {
    cursor: pointer;
}

input[type="range"].form-control {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    height: 6px;
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--color-primary-dark);
    transform: scale(1.1);
}

.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

.unit {
    display: inline-block;
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.help-text {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
    display: block;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1;
    font-family: var(--font-family-sans);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-on);
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--color-primary-accent);
    color: var(--color-primary-accent);
}

.btn-success {
    background: var(--color-success-strong);
    color: white;
    border-color: var(--color-success-strong);
}

.btn-success:hover:not(:disabled) {
    background: var(--color-success-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--color-danger-dark);
    color: white;
    border-color: var(--color-danger-dark);
}

/* Destructive actions that sit beside ordinary ones stay quiet until reached
   for, so they do not become the visual anchor of the group. */
.btn-danger-quiet {
    background: transparent;
    color: var(--on-tint-danger);
    border-color: var(--border-color);
}

.btn-danger-quiet:hover:not(:disabled),
.btn-danger-quiet:focus-visible {
    background: var(--color-danger-dark);
    color: #fff;
    border-color: var(--color-danger-dark);
}

.btn-danger:hover:not(:disabled) {
    background: #991b1b;
    transform: translateY(-1px);
}

.btn-large {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
}

.btn-group {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Progress */
.progress-container {
    margin: var(--space-6) 0;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-3);
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
    transition: width var(--transition-normal);
    width: 0%;
    border-radius: var(--radius-full);
}

.progress-fill.computing {
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1);
    }
    50% { 
        opacity: 0.85;
        filter: brightness(1.1);
    }
}

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

.progress-text {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.progress-text.computing {
    color: var(--color-primary-accent);
    font-weight: var(--font-weight-semibold);
}

/* Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--bg-secondary);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Results */
.results-box {
    background: var(--color-primary-50);
    border-left: 1px solid var(--color-primary);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    margin: var(--space-6) 0;
}

[data-theme="dark"] .results-box {
    background: rgba(106, 132, 114, 0.1);
}

.results-box h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.results-box p {
    margin: var(--space-2) 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.results-box strong {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Browser Info */
/* Audio Device Row */
.device-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.device-row .form-control {
    flex: 1;
    min-width: 0;
}

.device-row__channel {
    flex: 0 0 auto;
    width: auto;
    min-width: 5rem;
}

.device-row__refresh {
    flex: 0 0 auto;
    padding: var(--space-3);
    font-size: var(--font-size-lg);
    line-height: 1;
}

.level-meter-container {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.level-meter-container label {
    display: block;
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-semibold);
}

/* Track shows the zone map ahead of the signal; hard stops land exactly on
   the tick marks below. Boundaries: -12 dBFS (under-driven -> target),
   -6 (target -> hot), -3 (hot -> too loud). */
.level-meter {
    position: relative;
    width: 100%;
    height: 40px;
    background: linear-gradient(to right,
        var(--meter-band-low) 0 50%,
        var(--meter-band-target) 50% 75%,
        var(--meter-band-hot) 75% 87.5%,
        var(--meter-band-over) 87.5% 100%);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* Scaled rather than resized: this updates every animation frame while the
   spectrum canvas is also repainting, so it must stay off the layout path. */
.level-meter-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--meter-fill-low);
    transition: transform 80ms linear, background-color var(--transition-fast);
    will-change: transform;
}

.level-meter-fill--low { background: var(--meter-fill-low); }
.level-meter-fill--target { background: var(--meter-fill-target); }
.level-meter-fill--hot { background: var(--meter-fill-hot); }
.level-meter-fill--over { background: var(--meter-fill-over); }

/* Tick scale sits below the bar so labels are never overprinted by the fill */
.level-scale {
    position: relative;
    height: 1.5rem;
    margin-top: var(--space-1);
}

.level-scale__mark {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding-top: 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-mono);
    color: var(--text-muted);
    white-space: nowrap;
}

.level-scale__mark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 5px;
    background: var(--border-color);
}

.level-scale__mark--start {
    transform: none;
}

.level-scale__mark--start::before {
    left: 0;
}

.level-scale__mark--end {
    transform: translateX(-100%);
}

.level-scale__mark--end::before {
    left: auto;
    right: 0;
}

/* Below ~640px the -3 and 0 labels collide. The unit is already carried by
   the section label and the readout under the bar, so the ticks drop it. */
@media (max-width: 640px) {
    .level-scale__unit {
        display: none;
    }
}

.level-value {
    text-align: center;
    margin-top: var(--space-2);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    font-family: var(--font-family-mono);
    color: var(--text-primary);
}

.clipping-warning {
    background: var(--color-danger-dark);
    opacity: 1;
    transition: opacity 300ms linear;
    color: white;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.clipping-warning.is-fading {
    opacity: 0;
}

/* Severity is a class now, not an inline gradient, so it follows the palette */
.clipping-warning--hot {
    background: var(--color-warning-dark);
}

.clipping-warning--clipping {
    background: var(--color-danger-dark);
}

.spectrum-container {
    margin: var(--space-5) 0;
}

.spectrum-container canvas {
    width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--spectrum-field);
    display: block;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.stat-card {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-accent);
    font-family: var(--font-family-mono);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* Pair Card */
.pair-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.pair-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.pair-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-50);
}

[data-theme="dark"] .pair-card.selected {
    background: rgba(106, 132, 114, 0.1);
}

.score-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-mono);
}

.score-excellent {
    background: rgba(16, 185, 129, 0.1);
    color: var(--on-tint-success);
}

.score-good {
    background: rgba(6, 182, 212, 0.1);
    color: var(--on-tint-accent);
}

.score-fair {
    background: rgba(245, 158, 11, 0.1);
    color: var(--on-tint-warning);
}

.score-poor {
    background: rgba(239, 68, 68, 0.1);
    color: var(--on-tint-danger);
}

/* Footer */
.app-footer {
    margin-top: auto;
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.footer-link {
    color: var(--color-primary-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-primary-accent);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: var(--space-6) var(--space-4);
    }
    
    .header-container {
        padding: 0 var(--space-4);
    }
    
    .page-title {
        font-size: var(--font-size-2xl);
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .btn-group {
        flex-direction: column;
    }

    /* Scoped: previously every .btn went full-width, which made each mic row
       233px tall with Delete as its most prominent element. */
    .btn-group > .btn,
    .btn-large {
        width: 100%;
    }
    
    .tabs {
        justify-content: flex-start;
    }
}

/* ========================================
   APPLICATION COMPONENTS
   Ported from the retired style.css and rewritten against the design tokens.
   The originals carried a separate Material palette and hard-coded spacing.
   ======================================== */

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Microphone list ------------------------------------------------------- */

.search-box {
    margin-bottom: var(--space-4);
}

.mic-list {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.mic-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color-light);
    border-left: 3px solid transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mic-item:last-child {
    border-bottom: none;
}

.mic-item:hover {
    background: var(--bg-secondary);
}

.mic-item.selected {
    background: var(--color-primary-50);
    border-left-color: var(--color-primary);
}

.mic-item.selected-compare {
    background: rgba(124, 58, 237, 0.06);
    border-left-color: var(--color-compare);
}

[data-theme="dark"] .mic-item.selected {
    background: rgba(95, 119, 103, 0.18);
}

[data-theme="dark"] .mic-item.selected-compare {
    background: rgba(196, 181, 253, 0.12);
}

.mic-item--excluded {
    opacity: 0.55;
}

.mic-info {
    flex: 1;
    min-width: 0;
}

.mic-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.mic-details {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

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

/* Delete is the only irreversible action in the row, so it stays quiet until
   deliberately reached for rather than being the loudest thing on screen. */
.mic-actions .btn-danger {
    background: transparent;
    color: var(--on-tint-danger);
    border-color: transparent;
}

.mic-actions .btn-danger:hover:not(:disabled),
.mic-actions .btn-danger:focus-visible {
    background: var(--color-danger-dark);
    color: #fff;
    border-color: var(--color-danger-dark);
}

.placeholder-text {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-10) var(--space-4);
}

/* Database detail -------------------------------------------------------- */

.db-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.db-detail-header h2 {
    margin-bottom: 0;
}

.db-detail-actions {
    display: flex;
    gap: var(--space-2);
}

.db-detail-panels {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.db-mic-panel {
    flex: 1;
    min-width: 15rem;
}

.db-mic-panel + .db-mic-panel {
    padding-left: var(--space-5);
    border-left: 1px solid var(--border-color);
}

.db-mic-block {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

.db-mic-block__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.db-mic-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--space-2);
    vertical-align: middle;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.db-mic-notes {
    margin-top: var(--space-3);
    color: var(--text-secondary);
}

.notes-editor {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Pair list -------------------------------------------------------------- */

.pairs-list {
    max-height: 31rem;
    overflow-y: auto;
}

.pair-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.pair-mics {
    font-weight: var(--font-weight-semibold);
}

.pair-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-family: var(--font-family-mono);
}

.pair-report {
    margin: 0;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Matching table --------------------------------------------------------- */

.matching-results {
    margin-top: var(--space-4);
    overflow-x: auto;
}

.matching-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.matching-table th,
.matching-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.matching-table th {
    background: var(--bg-secondary);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.matching-table tbody tr:hover {
    background: var(--bg-secondary);
}

.matching-table .reference-row {
    background: var(--color-primary-50);
}

[data-theme="dark"] .matching-table .reference-row {
    background: rgba(95, 119, 103, 0.18);
}

.ref-badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-primary-on);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
}

.match-good {
    color: var(--on-tint-success);
    font-weight: var(--font-weight-semibold);
}

.match-reject {
    color: var(--on-tint-danger);
    font-weight: var(--font-weight-semibold);
}

.matching-summary {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.matching-summary h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}

.summary-stats p {
    margin: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Measurement quality ---------------------------------------------------- */

.quality-stats {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.quality-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

.quality-badge.quality-excellent {
    background: var(--color-success-strong);
    color: #fff;
}

.quality-badge.quality-good {
    background: var(--color-accent-dark);
    color: #fff;
}

.quality-badge.quality-fair {
    background: var(--color-warning-dark);
    color: #fff;
}

.quality-badge.quality-poor {
    background: var(--color-danger-dark);
    color: #fff;
}

.quality-details p {
    margin: var(--space-1) 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.measurement-list {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.measurement-item {
    padding: var(--space-3);
    margin: var(--space-2) 0;
    border-left: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-mono);
}

.measurement-item small {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

.measurement-item.good {
    border-left-color: var(--color-success-dark);
}

.measurement-item.rejected {
    border-left-color: var(--color-danger-dark);
    background: rgba(239, 68, 68, 0.06);
}

.measurement-item.rejected small {
    color: var(--on-tint-danger);
}

/* Advanced settings disclosure ------------------------------------------- */

.advanced-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.advanced-toggle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.advanced-toggle-chevron {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
}

.advanced-toggle-btn[aria-expanded="true"] .advanced-toggle-chevron {
    transform: rotate(180deg);
}

.advanced-settings-panel {
    margin-top: var(--space-4);
}

/* Pistonphone rapid measurement ------------------------------------------ */

.rapid-measurement-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
    align-items: end;
    margin-top: var(--space-4);
}

.rapid-measurement-controls .form-group {
    margin-bottom: 0;
}

.pistonphone-level-selector {
    margin-bottom: var(--space-5);
}

/* Setup / permission prompt ---------------------------------------------- */

.setup-prompt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.setup-prompt__text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 60ch;
    line-height: var(--line-height-relaxed);
}

/* Toast messaging -------------------------------------------------------- */

.toast-region {
    position: fixed;
    z-index: 9998;
    right: var(--space-6);
    bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(24rem, calc(100vw - var(--space-8)));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    animation: toast-in var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.toast__body {
    flex: 1;
    min-width: 0;
}

.toast__title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.toast__detail {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: var(--space-1);
    line-height: 1;
    font-size: var(--font-size-lg);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.toast__close:hover {
    color: var(--text-primary);
}

.toast--error {
    border-color: var(--color-danger-dark);
}

.toast--success {
    border-color: var(--color-success-strong);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Confirmation dialog (reuses .modal / .modal-content) -------------------- */

.modal__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
    padding-right: var(--space-8);
}

.modal__body {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 768px) {
    .mic-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .mic-actions {
        justify-content: flex-start;
    }

    .db-mic-panel + .db-mic-panel {
        padding-left: 0;
        border-left: none;
        padding-top: var(--space-4);
        border-top: 1px solid var(--border-color);
    }

    .toast-region {
        right: var(--space-4);
        left: var(--space-4);
        bottom: var(--space-4);
        width: auto;
    }
}

/* Touch devices need the 44px target that a compact desktop row doesn't */
@media (pointer: coarse) {
    .btn-sm,
    .mic-actions .btn,
    .matching-table .btn,
    .theme-toggle,
    .tab-btn {
        min-height: 44px;
    }

    .device-row__refresh {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Reduced motion ---------------------------------------------------------
   Not a blanket kill: the meter and progress bar still move, because their
   motion is the information. What goes is decoration and the 2 Hz flash. */
@media (prefers-reduced-motion: reduce) {
    .clipping-warning {
        animation: none;
        outline: 3px solid var(--color-danger-dark);
        outline-offset: 2px;
    }

    .progress-fill.computing {
        animation: none;
    }

    .spinner {
        animation-duration: 2s;
    }

    .tab-content.active,
    .mode-desc.active,
    .toast {
        animation: none;
    }

    .level-meter-fill {
        transition: none;
    }

    .btn-primary:hover:not(:disabled),
    .btn-success:hover:not(:disabled),
    .btn-danger:hover:not(:disabled) {
        transform: none;
    }
}

/* Layout utilities replacing repeated inline style= attributes ------------ */

.page-header {
    margin-bottom: var(--space-8);
}

.section-divider {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.section-divider--tight {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

.section-intro {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    max-width: 70ch;
}

.field-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.lede {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
    max-width: 70ch;
}

.stack-top { margin-top: var(--space-6); }
.stack-bottom { margin-bottom: var(--space-6); }
.stack-bottom-sm { margin-bottom: var(--space-4); }

.footer-meta {
    margin-top: var(--space-2);
}

/* About tab reading measure */
#tab-about p,
#tab-about li {
    max-width: 75ch;
}

#tab-about ul,
#tab-about ol {
    padding-left: var(--space-5);
}

#tab-about li {
    margin-bottom: var(--space-2);
}

/* Print */
@media print {
    .app-header,
    .tabs,
    .btn,
    .theme-toggle {
        display: none;
    }
}