/* ==========================================
   FRMS Session Wizard Styles
   Extracted from frms-system/session.html inline <style> block
   (FRMS v3 plan §E2.7 — CSS extraction).
   ========================================== */
        /* ============================================================
           FRMS token layer (FRMS-049 / Structural D)
           css/v905-theme.css (linked BEFORE this sheet) is the source of
           truth for the cool-slate palette; the old warm-brown redefinition
           of --text-primary/secondary/muted is GONE. What remains:
            (a) FRMS-only semantic aliases the FRMS rules read, retuned cool;
            (b) a per-theme WCAG-AA nudge for the handful of tokens whose
                V905 value misses AA on FRMS's off-white / dark panels
                (muted 4.1-4.3:1; button accent 4.43:1). All AA-verified.
           Kept identical in frms-dashboard.css / frms-calculator.css so
           every FRMS page resolves the same values. --text-primary now
           inherits from V905 (#1e293b light / #f1f5f9 dark).
           ============================================================ */
        :root {
            --glass-bg: var(--bg-card, #ffffff);
            --glass-bg-light: var(--bg-card, #ffffff);
            --glass-border: var(--warm-border, #e2e8f0);
            --glass-highlight: var(--warm-subtle, #f8fafc);
            /* AA nudge: V905 muted/secondary #64748b is only 4.1-4.3:1 on FRMS panels */
            --text-secondary: #586576;
            --text-muted: #586576;
            /* FRMS semantic accents (cool-slate, AA on light surfaces) */
            --accent-blue: #2c5282;
            --accent-green: #047857;
            --accent-yellow: #8a6d1f;
            --accent-orange: #b45309;
            --accent-red: #c0392b;
            --gold-accent: #8a6d1f;
            --warning: #b45309;
            --risk-low: #047857;
            --risk-moderate: #8a6d1f;
            --risk-high: #b45309;
            --risk-very-high: #c0392b;
        }

        /* Warm Professional Background */
        body {
            background: var(--bg-primary, #eef1f6) !important;
            min-height: 100vh;
            color: var(--text-primary);
        }

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

        /* Glass Panel Base */
        .glass-panel {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-lg, 16px);
            box-shadow: var(--shadow-sm, 0 2px 8px rgba(44, 82, 130, 0.06));
        }

        /* Compact layout overrides */
        body .step-container {
            padding: var(--spacing-lg);
        }
        .form-group {
            margin-bottom: var(--spacing-md);
        }
        .assessment-card {
            margin-bottom: var(--spacing-md);
        }
        .wizard-actions {
            padding: var(--spacing-md) 0;
            margin-top: var(--spacing-lg);
        }

        /* Airport Autocomplete Styles */
        .autocomplete-container {
            position: relative;
        }
        .autocomplete-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-elevated);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            max-height: 250px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .autocomplete-results.show {
            display: block;
        }
        .autocomplete-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            border-bottom: 1px solid var(--warm-subtle, #f5f3f0);
        }
        .autocomplete-item:hover {
            background: var(--bg-secondary, #f5f0eb);
        }
        .autocomplete-item:last-child {
            border-bottom: none;
        }
        .autocomplete-item-main {
            font-weight: 600;
            color: var(--warm-accent, #2c5282);
        }
        .autocomplete-item-name {
            font-size: 0.8125rem;
            color: var(--text-secondary, #55627a);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 280px;
        }
        .autocomplete-item-sub {
            font-size: 0.75rem;
            color: var(--text-muted, #64748b);
        }

        /* Session Wizard Styles - Blue Glass Theme */
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-md) 0;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .breadcrumb a {
            color: var(--accent-blue);
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

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

        /* Warm Professional Step Container */
        .step-container {
            background: var(--bg-card, #ffffff);
            border-radius: var(--radius-lg, 16px);
            padding: var(--spacing-2xl);
            margin-bottom: var(--spacing-2xl);
            border: 1px solid var(--warm-border, #f0ebe3);
            box-shadow: var(--shadow-sm, 0 2px 8px rgba(44, 82, 130, 0.06));
        }

        .step-content {
            display: none;
        }

        .step-content.active {
            display: block;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
            font-size: 0.875rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: var(--spacing-sm) var(--spacing-md);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            transition: border-color 0.2s;
            background: var(--bg-card, #ffffff);
            color: var(--text-primary, #2c2c2c);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--text-muted, #9a8a7a);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--warm-accent, #2c5282);
            box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
        }

        .form-group select option {
            background: var(--bg-card, #ffffff);
            color: var(--text-primary, #2c2c2c);
        }

        /* Fix native select appearance for warm theme */
        .form-group select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b7355' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 36px;
        }

        /* Side-by-side settings row for Time Settings + Crew Config */
        .settings-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-xl);
        }

        .settings-row .section-divider {
            border-top: none;
            margin: 0;
            padding-top: 0;
        }

        @media (max-width: 1024px) {
            .settings-row {
                grid-template-columns: 1fr;
            }
        }

        /* Multi-Leg Flight Routing Section - Warm Theme */
        #multiLegRoutingSection {
            background: var(--warm-subtle, #f5f3f0);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
        }

        #multiLegRoutingSection .config-label {
            color: var(--text-primary, #2c2c2c);
        }

        #multiLegRoutingSection p {
            color: var(--text-muted, #64748b);
        }

        .leg-row {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-md);
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-sm);
        }

        .leg-row input {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            color: var(--text-primary, #2c2c2c);
        }

        .leg-row span {
            color: var(--text-primary, #2c2c2c);
        }

        #multiLegSummary {
            background: rgba(44, 82, 130, 0.1);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-left: 4px solid var(--warm-accent, #2c5282);
        }

        #multiLegSummary strong,
        #routeSummaryContent {
            color: var(--text-primary, #2c2c2c);
        }

        /* Live Weather METAR Text Readability */
        .weather-panel,
        #weatherSummary {
            color: var(--text-primary, #2c2c2c);
        }

        .weather-panel p,
        #weatherSummary #weatherSummaryContent,
        #weatherSummary #weatherSummaryContent * {
            color: var(--text-secondary, #55627a);
            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
        }

        .step-container .weather-panel h4 {
            color: var(--warm-accent, #2c5282);
        }

        .form-group small {
            color: var(--text-muted);
            font-size: 0.75rem;
            margin-top: var(--spacing-xs);
        }

        .section-divider {
            border-top: 1px solid var(--glass-border);
            margin: var(--spacing-2xl) 0;
            padding-top: var(--spacing-xl);
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: var(--spacing-lg);
        }

        .wizard-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-sm, 0.5rem);
            justify-content: space-between;
            align-items: center;
            margin-top: var(--spacing-2xl);
            padding-top: var(--spacing-xl);
            border-top: 1px solid var(--glass-border);
        }

        .wizard-actions .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* global.css gives .btn display:inline-flex, which beats [hidden]
           (Start Flight hides outside PRE_FLIGHT). */
        .wizard-actions .btn[hidden] {
            display: none;
        }

        .wizard-actions .btn-primary {
            background: var(--warm-accent, #2c5282);
            color: white;
            border: none;
        }

        .wizard-actions .btn-primary:hover {
            background: var(--warm-dark, #1e3a5f);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(44, 82, 130, 0.2));
        }

        .wizard-actions .btn-secondary {
            background: var(--glass-bg, rgba(44, 82, 130, 0.08));
            color: var(--text-primary);
            border: 1px solid var(--glass-border);
        }

        .wizard-actions .btn-secondary:hover {
            background: var(--warm-subtle, rgba(44, 82, 130, 0.1));
        }

        /* ----------------------------------------------------------------
           In-Flight Check-In (FRMS v3 plan §B.3) — phone-first redesign.
           Wraps the panel in a max-width column so it stays readable on
           desktops but fills the viewport on phones. All touch targets
           ≥ 44px so a thumb in turbulence can hit them.
           ---------------------------------------------------------------- */
        .checkin-mobile-wrap {
            max-width: 28rem;
            margin: 0 auto;
            padding: 0;
        }

        .checkin-card {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 14px;
            padding: 1.25rem;
            margin-bottom: 1rem;
            box-shadow: 0 1px 4px rgba(44, 82, 130, 0.04);
        }

        .cadence-card .cadence-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .cadence-label {
            color: var(--text-muted, #64748b);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.15rem;
        }

        .cadence-time {
            color: var(--warm-accent, #2c5282);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .cadence-count {
            color: var(--text-primary, #2c2c2c);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .cadence-footnote {
            color: var(--text-muted, #64748b);
            font-size: 0.72rem;
            margin-top: 0.5rem;
            line-height: 1.4;
        }

        /* The latest check-in's reported score beside the fatigue score, on
           one ruler (step 4). Two tiles on a phone (a 375px screen leaves
           the card 257px); they stack only below the width two can share. */
        .reported-now-pair {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
            gap: 0.5rem;
        }

        .reported-now-tile {
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 10px;
            padding: 0.6rem;
            min-width: 0;
        }

        .reported-now-value {
            color: var(--text-heading, #1a2233);
            font-size: 1.5rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            margin-bottom: 0.35rem;
        }

        .reported-now-max {
            color: var(--text-secondary, #55627a);
            font-size: 0.9rem;
            font-weight: 500;
            margin-left: 0.15rem;
        }

        .reported-now-note {
            color: var(--text-secondary, #55627a);
            font-size: 0.8rem;
            line-height: 1.4;
            margin: 0.5rem 0 0;
        }

        /* The debrief KSS's "Prefer not to answer" (owner ruling 2026-09-23). */
        .debrief-kss-decline {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.75rem;
        }

        .reported-now-earlier {
            color: var(--text-primary, #2c2c2c);
            font-weight: 600;
        }

        /* KSS slider — full-width, large, thumb-friendly */
        .kss-slider-wrapper {
            margin: 1rem 0;
        }

        /* A neutral track: it ran green to red, a verdict on each level
           shown before the pilot answered (owner rulings 2026-09-22/23: the
           scale is the nine anchors; the finding comes after the answer). */
        .kss-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 12px;
            border-radius: 6px;
            background: var(--warm-border, #dfe5ee);
            outline: none;
            margin: 0 0 0.5rem 0;
        }

        .kss-slider:focus-visible {
            outline: 2px solid var(--warm-accent, #2c5282);
            outline-offset: 6px;
        }

        /* No level chosen yet for this check-in (owner ruling 2026-09-23):
           the thumb is hidden so nothing looks preselected. A tap or a drag
           on the track places it. */
        .kss-slider.kss-slider--unset::-webkit-slider-thumb {
            opacity: 0;
        }

        .kss-slider.kss-slider--unset::-moz-range-thumb {
            opacity: 0;
        }

        .kss-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-card, #ffffff);
            border: 3px solid var(--warm-accent, #2c5282);
            box-shadow: 0 2px 6px rgba(44, 82, 130, 0.25);
            cursor: pointer;
        }

        .kss-slider::-moz-range-thumb {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-card, #ffffff);
            border: 3px solid var(--warm-accent, #2c5282);
            box-shadow: 0 2px 6px rgba(44, 82, 130, 0.25);
            cursor: pointer;
        }

        .kss-slider-labels {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            color: var(--text-muted, #64748b);
            font-size: 0.7rem;
            margin-bottom: 0.5rem;
        }

        /* The two ends carry the published anchors, and 9's is long: each end
           keeps to its half and the right one wraps against the right edge. */
        .kss-slider-labels > span {
            max-width: 48%;
        }

        .kss-slider-labels > span:last-child {
            text-align: right;
        }

        .kss-slider-value {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 0.6rem;
        }

        .kss-slider-value #kssSliderNumber {
            color: var(--warm-accent, #2c5282);
            font-size: 2.25rem;
            font-weight: 700;
        }

        .kss-slider-value #kssSliderLabel {
            color: var(--text-secondary, #55627a);
            font-size: 0.95rem;
        }

        /* Countermeasures chips */
        .countermeasures-label {
            color: var(--text-secondary, #55627a);
            font-size: 0.8rem;
            margin: 0.85rem 0 0.5rem 0;
        }

        .countermeasures-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .cm-chip {
            min-height: 44px;
            padding: 0.55rem 0.95rem;
            border: 1px solid var(--warm-border, #f0ebe3);
            background: var(--bg-secondary, #f5f0eb);
            color: var(--text-primary, #2c2c2c);
            border-radius: 22px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .cm-chip:hover {
            border-color: var(--warm-accent, #2c5282);
        }

        .cm-chip.selected {
            background: var(--warm-accent, #2c5282);
            color: white;
            border-color: var(--warm-accent, #2c5282);
        }

        /* Voice capture stub */
        .voice-capture-btn {
            display: block;
            width: 100%;
            min-height: 44px;
            margin-top: 1rem;
            padding: 0.7rem;
            background: transparent;
            color: var(--text-muted, #64748b);
            border: 1px dashed var(--warm-border, #f0ebe3);
            border-radius: 10px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .voice-capture-btn:hover {
            border-color: var(--warm-accent, #2c5282);
            color: var(--warm-accent, #2c5282);
        }

        /* Submit button — full-width, big, sticky-feeling */
        .checkin-submit-btn {
            display: block;
            width: 100%;
            min-height: 52px;
            margin-top: 1rem;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 12px;
        }

        /* TOD NASA-TLX prompt */
        .tod-prompt-btn {
            display: block;
            width: 100%;
            min-height: 48px;
        }

        .tod-status {
            margin-top: 0.6rem;
            font-size: 0.78rem;
            color: var(--text-muted, #64748b);
            min-height: 1rem;
        }

        /* NASA-TLX dimension grid (assessments.js renderTLX). It was an inline
           two-column grid whose slider columns could not shrink, so on a
           phone the right column clipped inside narrow cards (2b). */
        .tlx-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .tlx-grid .assessment-slider {
            min-width: 0;
            width: 100%;
            /* One neutral track: the TLX has no good or bad colour (T-1,
               2026-09-25); the shared green-to-red gradient read as one. */
            background: var(--line, #dfe5ee);
        }

        /* Not rated yet (T-3): the thumb is hidden so nothing looks chosen;
           a tap or a drag on the track places it. Same as the KSS slider. */
        .tlx-slider.tlx-slider--unset::-webkit-slider-thumb {
            opacity: 0;
        }

        .tlx-slider.tlx-slider--unset::-moz-range-thumb {
            opacity: 0;
        }

        .tlx-grid .tlx-scale {
            background: var(--bg-secondary, #f5f0eb);
            padding: 0.875rem;
            border-radius: var(--radius-md, 8px);
            margin: 0;
        }

        /* Each end label stays at its end, on a phone too: stacked, "Good"
           above "Poor" read as one list, not a scale's two ends. */
        .tlx-scale .assessment-slider-labels {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .tlx-scale .assessment-slider-header {
            margin-bottom: 0.25rem;
        }

        .tlx-scale .assessment-slider-label {
            font-size: 0.875rem;
        }

        .tlx-scale .assessment-slider-value {
            min-width: 2.5rem;
            padding: 0.125rem 0.5rem;
            font-size: 0.875rem;
            text-align: center;
        }

        .tlx-question {
            margin: 0 0 0.5rem 0;
            font-size: 0.8125rem;
            line-height: 1.4;
            color: var(--text-secondary, #55627a);
        }

        .tlx-status {
            margin: 0.75rem 0 0 0;
            font-size: 0.8125rem;
            color: var(--text-secondary, #55627a);
            text-align: center;
        }

        .tlx-actions {
            margin-top: 0.75rem;
            text-align: center;
        }

        @media (max-width: 480px) {
            .tlx-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        /* TOD NASA-TLX sliders, rendered inline under the prompt (2b) */
        .tod-tlx-form {
            margin-top: 1rem;
        }

        .tod-tlx-form[hidden],
        .checkin-closed-notice[hidden] {
            display: none;
        }

        /* Flight not in progress: the log stays readable, logging is closed */
        .checkin-closed-notice {
            margin: 0 0 1rem 0;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            background: var(--info-bg);
            color: var(--info-ink);
            font-size: 0.875rem;
        }

        @media (max-width: 480px) {
            .checkin-mobile-wrap {
                padding: 0 0.25rem;
            }

            .checkin-card {
                padding: 1rem;
            }
        }

        .weather-panel {
            display: none;
            margin-top: var(--spacing-lg);
            padding: var(--spacing-lg);
            background: rgba(44, 82, 130, 0.08);
            border-left: 4px solid var(--warm-accent, #2c5282);
            border-radius: var(--radius-md);
        }

        .weather-panel.visible {
            display: block;
        }

        .weather-panel h4 {
            margin: 0 0 var(--spacing-sm) 0;
            font-size: 1rem;
            color: var(--warm-accent, #2c5282);
        }

        /* Assessment Battery Styles */
        .battery-section {
            background: linear-gradient(135deg, rgba(44, 82, 130, 0.06) 0%, rgba(52, 104, 160, 0.08) 100%);
            border-left: 4px solid var(--warm-accent, #2c5282);
            border-radius: var(--radius-lg);
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-lg);
        }

        .battery-header {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .battery-title {
            color: var(--warm-accent, #2c5282);
            margin: 0;
            font-size: 1.25rem;
        }

        .battery-progress {
            color: var(--text-muted, #64748b);
            font-size: 0.875rem;
            margin-top: var(--spacing-xs);
        }

        .battery-progress-highlight {
            font-weight: 600;
            color: var(--warm-accent, #2c5282);
        }

        .battery-info {
            margin-top: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-md);
            background: var(--bg-card);
            border-radius: var(--radius-sm);
            border: 2px solid var(--warm-accent-light, #4a7ab5);
        }

        .battery-info p {
            color: var(--warm-accent-dark, #1e3a5f);
            font-size: 0.85rem;
            margin: 0;
        }

        .battery-arrow {
            font-size: 1.5rem;
            color: var(--warm-accent, #2c5282);
            transition: transform 0.3s;
        }

        .battery-arrow.expanded {
            transform: rotate(180deg);
        }

        .battery-content {
            display: none;
            margin-top: var(--spacing-xl);
            padding-top: var(--spacing-xl);
            border-top: 2px solid var(--warm-accent-light, #4a7ab5);
        }

        .battery-content.expanded {
            display: block;
        }

        .assessment-card {
            margin-bottom: var(--spacing-lg);
            padding: var(--spacing-lg);
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border-left: 4px solid var(--text-muted, #9a8a7a);
        }

        .assessment-card.required {
            border-left-color: var(--accent-red, #ef4444);
        }

        .assessment-header {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-md);
        }

        .assessment-badge {
            background: var(--text-muted, #64748b);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .assessment-badge.required {
            background: var(--accent-red, #ef4444);
        }

        .assessment-title {
            margin: 0;
            color: var(--text-primary, #2c2c2c);
            font-size: 1rem;
        }

        /* Post-Flight Rating Options */
        .rating-options {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .rating-option {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            background: var(--glass-bg-light);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .rating-option:hover {
            background: rgba(44, 82, 130, 0.1);
            border-color: rgba(44, 82, 130, 0.2);
        }
        .rating-option input[type="radio"] {
            width: 1.25rem;
            height: 1.25rem;
            accent-color: var(--warm-accent, #2c5282);
        }
        .rating-option input[type="radio"]:checked + .rating-label {
            color: var(--gold-accent, #3468a0);
            font-weight: 600;
        }
        .rating-label {
            color: var(--text-primary, #2c2c2c);
            font-size: 0.9375rem;
        }

        .sleep-data-section {
            margin-top: var(--spacing-2xl);
            margin-bottom: var(--spacing-lg);
            padding: var(--spacing-lg);
            background: linear-gradient(135deg, var(--status-warning-soft) 0%, #fde68a 100%);
            border-radius: var(--radius-md);
            /* Was var(--yellow), which is declared nowhere. An undeclared
               custom property in a colour position is INVALID at computed
               value time, so the declaration is dropped and the border
               paints in currentColor — the section's own text — instead of
               an accent. The callout is a warning, so it takes the
               palette's warning ink. */
            border-left: 4px solid var(--warn-ink);
        }

        .sleep-data-section h4 {
            color: var(--text-primary, #2c2c2c);
            margin-bottom: var(--spacing-xs);
            font-size: 1rem;
        }

        .sleep-data-section p {
            color: var(--text-secondary, #55627a);
            font-size: 0.875rem;
            margin-bottom: var(--spacing-lg);
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .checkbox-group input[type="checkbox"] {
            width: 1.25rem;
            height: 1.25rem;
            cursor: pointer;
        }

        .checkbox-group label {
            cursor: pointer;
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .time-setting {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }

        .time-setting > div {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .time-setting input[type="number"] {
            flex: 1;
        }

        /* Results Styles - Blue Glass Theme */
        .results-header {
            text-align: center;
            margin-bottom: var(--spacing-2xl);
        }

        .results-header h2 {
            color: var(--text-primary);
            margin-bottom: var(--spacing-sm);
        }

        .results-header p {
            color: var(--text-secondary);
        }

        .score-display {
            display: flex;
            justify-content: center;
            gap: var(--spacing-xl);
            margin-bottom: var(--spacing-2xl);
        }

        .score-card {
            background: var(--warm-accent, #2c5282);
            border-radius: 12px;
            padding: var(--spacing-xl);
            text-align: center;
            border: none;
            min-width: 200px;
            box-shadow: var(--shadow-md, 0 4px 12px rgba(44, 82, 130, 0.15));
        }

        .score-card h3 {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--spacing-sm);
        }

        .score-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-inverse);
            margin-bottom: var(--spacing-xs);
        }

        .score-max {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
        }

        .risk-indicator {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.7rem;
            text-transform: uppercase;
        }

        .risk-low {
            background: var(--success-green-light);
            color: var(--text-inverse);
        }

        .risk-moderate {
            background: var(--status-warning);
            color: var(--text-inverse);
        }

        .risk-high {
            background: var(--accent-red, #ef4444);
            color: var(--text-inverse);
        }

        .risk-very-high {
            background: var(--status-danger);
            color: var(--text-inverse);
        }

        /* Settings Card Styles (Step 1) - Warm Professional Theme */
        .settings-card {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--shadow-sm, 0 2px 8px rgba(44, 82, 130, 0.06));
        }

        .settings-card-header {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-lg);
            background: var(--warm-subtle, #f5f3f0);
            border-bottom: 1px solid var(--warm-border, #f0ebe3);
        }

        .settings-icon {
            font-size: 1.5rem;
        }

        .settings-subtitle {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin: 0;
        }

        .settings-card-body {
            padding: var(--spacing-lg);
        }

        .time-settings-grid {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .time-setting-item {
            background: var(--warm-subtle, #f5f3f0);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
        }

        .time-setting-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .toggle-checkbox {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            cursor: pointer;
        }

        .toggle-checkbox input[type="checkbox"] {
            width: 1.25rem;
            height: 1.25rem;
            cursor: pointer;
            accent-color: var(--warm-accent, #2c5282);
        }

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

        .time-input-group {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .time-input-group input[type="number"] {
            width: 80px;
            text-align: center;
            padding: var(--spacing-xs) var(--spacing-sm);
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 6px;
            color: var(--text-primary);
        }

        .time-unit {
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        .settings-hint {
            margin-top: var(--spacing-md);
            padding: var(--spacing-sm) var(--spacing-md);
            background: rgba(44, 82, 130, 0.1);
            border-radius: var(--radius-sm);
            font-size: 0.85rem;
            color: var(--accent-blue);
        }

        .config-section {
            background: var(--warm-subtle, #f5f3f0);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
        }

        .config-label {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9rem;
            margin-bottom: var(--spacing-md);
            display: block;
        }

        .radio-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .radio-option {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-md);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            background: var(--bg-card, #ffffff);
        }

        .radio-option:hover {
            background: var(--warm-subtle, #f5f3f0);
            border-color: var(--warm-accent, #2c5282);
        }

        .radio-option input[type="radio"] {
            width: 1.25rem;
            height: 1.25rem;
            margin-top: 0.15rem;
            cursor: pointer;
            accent-color: var(--warm-accent, #2c5282);
        }

        .radio-content {
            display: flex;
            flex-direction: column;
        }

        .radio-title {
            font-weight: 600;
            color: var(--text-primary);
        }

        .radio-desc {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .checkbox-option {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-sm) var(--spacing-md);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            background: var(--bg-card, #ffffff);
        }

        .checkbox-hint {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        /* Accordion Assessment Groups (Step 2) - Warm Professional Theme */
        .accordion-group {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-lg, 12px);
            margin-bottom: var(--spacing-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm, 0 2px 8px rgba(44, 82, 130, 0.06));
        }

        .accordion-group.required {
            border-color: rgba(239, 68, 68, 0.5);
        }

        .accordion-group.recommended {
            border-color: rgba(44, 82, 130, 0.5);
        }

        .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-lg);
            cursor: pointer;
            background: var(--warm-subtle, #f5f3f0);
            transition: background 0.2s ease;
        }

        .accordion-header:hover {
            background: var(--bg-card-alt, #f8fafc);
        }

        .accordion-group.required .accordion-header {
            background: rgba(229, 115, 115, 0.15);
        }

        .accordion-group.recommended .accordion-header {
            background: rgba(52, 104, 160, 0.15);
        }

        .accordion-header-left {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }

        .accordion-icon {
            font-size: 1.5rem;
        }

        .accordion-title {
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }

        .accordion-subtitle {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin: var(--spacing-xs) 0 0 0;
        }

        .accordion-header-right {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }

        .accordion-badge {
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .accordion-badge.required {
            /* Solid badge (fixed red both themes) — a translucent red tint
               under red text fails WCAG AA on the pink accordion (FRMS-049). */
            background: #c0392b;
            color: var(--text-inverse);
        }

        .accordion-badge.recommended {
            background: rgba(52, 104, 160, 0.2);
            color: var(--accent-blue);
        }

        .accordion-badge.optional {
            background: var(--glass-bg, rgba(44, 82, 130, 0.08));
            color: var(--text-muted);
        }

        .accordion-progress {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .accordion-progress .done {
            color: var(--accent-green);
        }

        .accordion-arrow {
            font-size: 1.25rem;
            color: var(--text-muted);
            transition: transform 0.3s ease;
        }

        .accordion-group.expanded .accordion-arrow {
            transform: rotate(180deg);
        }

        .accordion-content {
            display: none;
            padding: 1.5rem;
            border-top: 1px solid var(--warm-border, #f0ebe3);
        }

        .accordion-group.expanded .accordion-content {
            display: block;
        }

        /* Progress Bar - Option A Style (Blue Glass) */
        .assessments-progress {
            padding: 1rem 1.5rem;
            background: var(--warm-subtle, rgba(44, 82, 130, 0.05));
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            margin-bottom: var(--spacing-lg);
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .assessments-progress .progress-bar {
            flex: 1;
            height: 8px;
            background: var(--glass-bg, rgba(44, 82, 130, 0.08));
            border-radius: 4px;
            overflow: hidden;
        }

        .assessments-progress .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--warm-accent, #2c5282), var(--success-green-light));
            width: 0%;
            transition: width 0.3s ease;
            border-radius: var(--radius-sm, 8px);
        }

        .assessments-progress .progress-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        /* Compact Assessment Item (Option A) */
        .assessment-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-md, 1rem);
            padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
            background: var(--bg-card, #ffffff);
            border-radius: var(--radius-md, 12px);
            margin-bottom: var(--spacing-sm, 0.5rem);
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid var(--warm-border, #f0ebe3);
        }

        .assessment-item:hover {
            background: var(--warm-subtle, #f5f3f0);
            border-color: var(--warm-accent, #2c5282);
            transform: translateX(2px);
            box-shadow: 0 2px 8px rgba(44, 82, 130, 0.08);
        }

        .assessment-item.expanded {
            background: rgba(44, 82, 130, 0.05);
            border-color: rgba(44, 82, 130, 0.3);
            border-radius: 8px 8px 0 0;
            margin-bottom: 0;
        }

        .assessment-check {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            flex-shrink: 0;
        }

        .assessment-check.done {
            background: var(--success-green-light);
            color: white;
        }

        .assessment-check.pending {
            background: var(--warm-subtle, #f5f3f0);
            border: 2px solid var(--warm-border);
        }

        .assessment-name {
            flex: 1;
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .assessment-value {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* Assessment Form Container */
        .assessment-form {
            background: var(--bg-primary, #eef1f6);
            border: 1px solid rgba(44, 82, 130, 0.2);
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 1rem;
            margin-bottom: 0.5rem;
        }

        .assessment-form.hidden {
            display: none;
        }

        /* Results Tabs Styles - Charter Quote Style */
        .results-tabs {
            display: flex;
            gap: 0.5rem;
            background: var(--warm-subtle, #f5f3f0);
            padding: 0.5rem;
            border-radius: var(--radius-md, 12px);
            margin-bottom: 1.5rem;
            border: 1px solid var(--warm-border, #f0ebe3);
            box-shadow: 0 2px 8px rgba(44, 82, 130, 0.08);
            flex-wrap: wrap;
        }

        .results-tab {
            padding: 0.5rem 1rem;
            border: none;
            background: transparent;
            color: var(--text-secondary, #55627a);
            font-size: 0.8125rem;
            font-weight: 500;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            white-space: nowrap;
        }

        .results-tab:hover {
            background: var(--bg-card, #ffffff);
            color: var(--text-primary, #2c2c2c);
        }

        .results-tab.active {
            background: var(--warm-accent, #2c5282);
            color: white;
            box-shadow: 0 2px 8px rgba(44, 82, 130, 0.2);
        }

        .results-tab-content {
            display: none;
        }

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

        /* Hybrid Subjective Display - Grouped Categories with Progress Bars */
        .subjective-group {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 12px;
            margin-bottom: 0.75rem;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(44, 82, 130, 0.08);
        }

        .subjective-group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            background: var(--warm-subtle, #f5f3f0);
            border-bottom: 1px solid var(--warm-border, #f0ebe3);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .subjective-group-header:hover {
            background: var(--bg-card-alt, #f8fafc);
        }

        .subjective-group-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
        }

        .subjective-group-count {
            background: rgba(52, 104, 160, 0.2);
            color: var(--warm-accent, #2c5282);
            font-size: 0.7rem;
            padding: 0.15rem 0.5rem;
            border-radius: 10px;
        }

        .subjective-group-summary {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .subjective-group-avg {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .subjective-group-chevron {
            color: var(--text-muted, #64748b);
            font-size: 0.75rem;
            transition: transform 0.2s ease;
        }

        .subjective-group.expanded .subjective-group-chevron {
            transform: rotate(180deg);
        }

        .subjective-group-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 1rem;
        }

        .subjective-group.expanded .subjective-group-content {
            max-height: 1000px;
            padding: 0.75rem 1rem;
        }

        .subjective-bar-item {
            padding: 0.6rem 0;
            border-bottom: 1px solid var(--warm-border, rgba(44, 82, 130, 0.08));
        }

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

        .subjective-bar-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.4rem;
        }

        .subjective-bar-icon {
            font-size: 1.1rem;
            width: 24px;
            text-align: center;
        }

        .subjective-bar-name {
            flex: 1;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-primary, #2c2c2c);
        }

        .subjective-bar-value {
            font-size: 0.85rem;
            font-weight: 600;
            min-width: 55px;
            text-align: right;
        }

        .subjective-bar-badge {
            font-size: 0.65rem;
            padding: 0.2rem 0.5rem;
            border-radius: 10px;
            text-transform: capitalize;
            min-width: 55px;
            text-align: center;
        }

        .subjective-bar-badge.risk-low {
            background: rgba(16, 185, 129, 0.2);
            color: var(--accent-green, #10b981);
        }

        .subjective-bar-badge.risk-moderate {
            background: rgba(251, 191, 36, 0.2);
            color: var(--status-warning-light);
        }

        .subjective-bar-badge.risk-high {
            background: rgba(239, 68, 68, 0.2);
            color: var(--accent-red, #ef4444);
        }

        .subjective-bar-container {
            height: 6px;
            background: var(--glass-bg, rgba(44, 82, 130, 0.08));
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 0.3rem;
        }

        .subjective-bar-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .subjective-bar-fill.risk-low {
            background: linear-gradient(90deg, var(--status-success), #34d399);
        }

        .subjective-bar-fill.risk-moderate {
            background: linear-gradient(90deg, var(--status-warning), var(--status-warning-light));
        }

        .subjective-bar-fill.risk-high {
            background: linear-gradient(90deg, var(--risk-critical), #f87171);
        }

        .subjective-bar-desc {
            font-size: 0.75rem;
            color: var(--text-muted, #64748b);
        }

        @media (max-width: 768px) {
            .subjective-bar-row {
                flex-wrap: wrap;
            }
            .subjective-bar-name {
                flex: 1 1 100%;
                order: 1;
                margin-bottom: 0.25rem;
            }
            .subjective-bar-icon {
                order: 0;
            }
            .subjective-bar-value {
                order: 2;
            }
            .subjective-bar-badge {
                order: 3;
            }
        }

        /* Flight Summary Card - Blue Glass Theme */
        .flight-summary-card {
            background: rgba(52, 104, 160, 0.1);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 12px;
            padding: var(--spacing-xl);
            margin-top: var(--spacing-xl);
        }

        .flight-summary-card h3 {
            color: var(--text-primary, #2c2c2c);
            margin-bottom: var(--spacing-lg);
        }

        .flight-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: var(--spacing-md);
        }

        .flight-summary-item {
            background: var(--warm-subtle, #f5f3f0);
            padding: var(--spacing-md);
            border-radius: var(--radius-md);
            border: 1px solid var(--warm-border, #f0ebe3);
        }

        .flight-summary-item label {
            font-size: 0.75rem;
            color: var(--text-secondary, #55627a);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .flight-summary-item .value {
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
            margin-top: var(--spacing-xs);
        }

        /* Metrics Grid - Blue Glass Theme */
        .metrics-header {
            margin-bottom: var(--spacing-xl);
        }

        .metrics-header h3 {
            color: var(--text-primary);
            margin-bottom: var(--spacing-sm);
        }

        .metrics-header p {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--spacing-lg);
        }

        .metric-card {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 12px;
            padding: var(--spacing-lg);
            transition: all 0.2s ease;
            box-shadow: var(--shadow-sm, 0 2px 8px rgba(44, 82, 130, 0.06));
        }

        .metric-card:hover {
            border-color: var(--warm-accent, #2c5282);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(44, 82, 130, 0.12));
        }

        .metric-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-sm);
        }

        .metric-icon {
            font-size: 1.5rem;
        }

        .metric-weight {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .metric-label {
            font-size: 0.875rem;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
        }

        .metric-score {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: var(--spacing-sm);
            color: var(--text-primary);
        }

        .metric-bar {
            height: 8px;
            background: var(--glass-bg, rgba(44, 82, 130, 0.08));
            border-radius: 4px;
            overflow: hidden;
        }

        .metric-bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .metric-risk-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-top: var(--spacing-sm);
        }

        .metric-risk-low {
            background: rgba(34, 197, 94, 0.15);
            color: var(--success-text);
        }

        .metric-risk-moderate {
            background: rgba(245, 158, 11, 0.15);
            color: var(--warning-color);
        }

        .metric-risk-high {
            background: rgba(239, 68, 68, 0.15);
            color: var(--status-danger);
        }

        /* Analysis Sections - Blue Glass Theme */
        .analysis-section {
            background: var(--warm-subtle, rgba(44, 82, 130, 0.06));
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            margin-bottom: var(--spacing-lg);
            overflow: hidden;
        }

        .analysis-section.crm-section {
            border-color: rgba(52, 104, 160, 0.5);
        }

        .analysis-section.tem-section {
            border-color: rgba(229, 115, 115, 0.5);
        }

        .analysis-section.adm-section {
            border-color: rgba(129, 199, 132, 0.5);
        }

        .analysis-section.decide-section {
            border-color: rgba(58, 80, 107, 0.5);
        }

        .analysis-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-lg);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .crm-section .analysis-header {
            background: rgba(52, 104, 160, 0.15);
        }

        .tem-section .analysis-header {
            background: rgba(229, 115, 115, 0.15);
        }

        .adm-section .analysis-header {
            background: rgba(129, 199, 132, 0.15);
        }

        .decide-section .analysis-header {
            background: rgba(58, 80, 107, 0.15);
        }

        .analysis-header:hover {
            filter: brightness(1.1);
        }

        .analysis-header-left {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }

        .analysis-icon {
            font-size: 1.5rem;
        }

        .analysis-header h3 {
            margin: 0;
            font-size: 1rem;
        }

        .crm-section .analysis-header h3 { color: var(--accent-blue); }
        .tem-section .analysis-header h3 { color: var(--accent-red); }
        .adm-section .analysis-header h3 { color: var(--accent-green); }
        .decide-section .analysis-header h3 { color: #3a506b; }

        .analysis-chevron {
            font-size: 1.25rem;
            color: var(--text-muted);
            transition: transform 0.3s ease;
        }

        .analysis-content {
            display: none;
            padding: var(--spacing-lg);
            border-top: 1px solid var(--glass-border);
        }

        .analysis-content.expanded {
            display: block;
        }

        .analysis-chevron.collapsed {
            transform: rotate(-90deg);
        }

        /* CRM Grid - Blue Glass Theme */
        .crm-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--spacing-lg);
        }

        .crm-category {
            background: var(--bg-card-alt, #f8fafc);
            padding: 1.25rem;
            border-radius: var(--radius-md);
            border: 1px solid var(--warm-border, #f0ebe3);
        }

        .crm-category h4 {
            font-size: 0.875rem;
            color: var(--warm-accent, #2c5282);
            margin-bottom: var(--spacing-sm);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .crm-category ul {
            font-size: 0.85rem;
            color: var(--text-secondary, #55627a);
            padding-left: var(--spacing-lg);
            margin: 0;
        }

        .crm-category li {
            margin-bottom: var(--spacing-xs);
        }

        /* TEM Threats - Warm Professional Theme */
        .tem-threat-group {
            margin-bottom: var(--spacing-lg);
        }

        .tem-threat-group h4 {
            font-size: 0.875rem;
            color: var(--text-primary, #2c2c2c);
            margin-bottom: var(--spacing-sm);
        }

        .tem-threat-card {
            background: var(--bg-card, #ffffff);
            padding: var(--spacing-md);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-sm);
            border-left: 3px solid var(--warm-accent, #2c5282);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-left: 3px solid var(--warm-accent, #2c5282);
        }

        .tem-threat-card.active { border-left-color: var(--accent-orange); }
        .tem-threat-card.error-prone { border-left-color: var(--accent-yellow); }

        .tem-threat-type {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
        }

        .tem-threat-severity {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .tem-threat-desc {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-xs);
        }

        .tem-threat-mitigation {
            font-size: 0.75rem;
            color: var(--accent-green);
        }

        /* ADM Tree - Warm Professional Theme */
        .adm-tree-root {
            background: var(--bg-card-alt, #f8fafc);
            padding: var(--spacing-lg);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-lg);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-left: 4px solid var(--success-green-light);
        }

        .adm-tree-score {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--success-text);
        }

        .adm-scenario {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-md);
            overflow: hidden;
        }

        .adm-scenario-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: var(--spacing-lg);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .adm-scenario-header:hover {
            background: var(--warm-subtle, #f5f3f0);
        }

        .adm-scenario-title {
            font-weight: 700;
            font-size: 1rem;
            color: var(--text-primary, #2c2c2c);
            margin-bottom: var(--spacing-sm);
        }

        .adm-scenario-rationale {
            font-size: 0.9rem;
            color: var(--text-muted, #64748b);
            line-height: 1.6;
            padding: var(--spacing-sm) 0;
            margin-top: var(--spacing-xs);
        }

        .adm-decision-badge {
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.8rem;
            white-space: nowrap;
            margin-left: var(--spacing-md);
            flex-shrink: 0;
            letter-spacing: 0.02em;
        }

        .adm-decision-go { background: rgba(129, 199, 132, 0.25); color: var(--accent-green); border: 1px solid var(--accent-green); }
        .adm-decision-caution { background: rgba(255, 213, 79, 0.25); color: var(--accent-yellow); border: 1px solid var(--accent-yellow); }
        .adm-decision-nogo { background: rgba(229, 115, 115, 0.25); color: var(--accent-red); border: 1px solid var(--accent-red); }

        .adm-scenario-chevron {
            font-size: 1.25rem;
            color: var(--text-secondary, #55627a);
            transition: transform 0.3s ease;
            margin-left: var(--spacing-md);
        }

        .adm-scenario.expanded .adm-scenario-chevron {
            transform: rotate(180deg);
        }

        .adm-mitigations {
            display: none;
            padding: var(--spacing-lg);
            border-top: 1px solid var(--warm-border, #f0ebe3);
            background: var(--warm-subtle, #f5f3f0);
        }

        .adm-scenario.expanded .adm-mitigations {
            display: block;
        }

        .adm-mitigations h5 {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
        }

        .adm-mitigations ul {
            font-size: 0.9rem;
            color: var(--text-secondary, #55627a);
            padding-left: var(--spacing-lg);
            margin: 0;
            line-height: 1.6;
        }

        .adm-mitigations ul li {
            margin-bottom: var(--spacing-sm);
            padding: var(--spacing-xs) 0;
            line-height: 1.5;
        }

        .adm-decision-options {
            margin-top: var(--spacing-lg);
            padding-top: var(--spacing-lg);
            border-top: 1px solid var(--glass-border);
        }

        .adm-decision-options h5 {
            font-size: 0.95rem;
            margin-bottom: var(--spacing-md);
        }

        .adm-option-btn {
            width: 100%;
            padding: var(--spacing-md) var(--spacing-lg);
            margin-bottom: var(--spacing-sm);
            background: var(--bg-card, #ffffff);
            border: 2px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            text-align: left;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-primary);
            box-shadow: 0 1px 4px rgba(44, 82, 130, 0.06);
        }

        .adm-option-btn:hover {
            border-color: var(--accent-blue);
            background: rgba(52, 104, 160, 0.15);
            transform: translateX(4px);
        }

        .adm-option-btn:focus {
            outline: 2px solid var(--accent-blue);
            outline-offset: 2px;
        }

        .adm-option-text {
            font-weight: 600;
            font-size: 0.95rem;
            color: #fff;
            margin-bottom: var(--spacing-xs);
        }

        .adm-option-outcome {
            font-size: 0.85rem;
            color: var(--text-muted, #64748b);
        }

        /* DECIDE Framework - Blue Glass Theme */
        .decide-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--spacing-md);
        }

        .decide-step {
            background: var(--bg-card-alt, #f8fafc);
            border: 1px solid var(--warm-border, #f0ebe3);
            padding: 1.25rem;
            border-radius: var(--radius-md);
        }

        .decide-step h4 {
            font-size: 0.875rem;
            color: var(--warm-accent, #2c5282);
            margin-bottom: var(--spacing-sm);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .decide-step ul {
            font-size: 0.8rem;
            color: var(--text-secondary);
            padding-left: var(--spacing-lg);
            margin: 0;
        }

        .decide-step li {
            margin-bottom: var(--spacing-xs);
        }

        /* Help Icon Tooltips */
        .help-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(52, 104, 160, 0.2);
            color: var(--warm-accent, #2c5282);
            font-size: 0.7rem;
            font-weight: 700;
            cursor: help;
            margin-left: 0.4rem;
            position: relative;
            border: 1px solid rgba(52, 104, 160, 0.4);
            transition: all 0.2s ease;
            vertical-align: middle;
        }

        .help-icon:hover {
            background: rgba(52, 104, 160, 0.35);
            transform: scale(1.1);
        }

        .help-icon::before {
            content: '?';
        }

        .help-tooltip {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-card, #ffffff);
            color: var(--text-primary, #2c2c2c);
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 400;
            line-height: 1.5;
            width: max-content;
            max-width: 280px;
            /* Out of the layout while hidden: a hidden tooltip near the
               right edge used to widen the page on a phone (16 px at 375). */
            display: none;
            opacity: 0;
            visibility: hidden;
            z-index: 1000;
            box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
            border: 1px solid var(--warm-border, #f0ebe3);
            text-align: left;
            pointer-events: none;
        }

        .help-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: var(--bg-card, #ffffff);
        }

        .help-icon:hover .help-tooltip,
        .help-icon:focus .help-tooltip {
            display: block;
            opacity: 1;
            visibility: visible;
        }

        /* Help tooltip positioning variants */
        .help-tooltip.tooltip-right {
            left: auto;
            right: -10px;
            transform: none;
        }

        .help-tooltip.tooltip-right::after {
            left: auto;
            right: 16px;
            transform: none;
        }

        .help-tooltip.tooltip-left {
            left: -10px;
            right: auto;
            transform: none;
        }

        .help-tooltip.tooltip-left::after {
            left: 16px;
            right: auto;
            transform: none;
        }

        /* Export Options - Blue Glass Theme */
        .export-header {
            margin-bottom: var(--spacing-xl);
        }

        .export-header h3 {
            color: var(--text-primary);
            margin-bottom: var(--spacing-sm);
        }

        .export-header p {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .export-options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--spacing-md);
        }

        .export-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-xl);
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            box-shadow: var(--shadow-sm, 0 2px 8px rgba(44, 82, 130, 0.06));
        }

        .export-btn:hover {
            border-color: var(--warm-accent, #2c5282);
            background: var(--warm-subtle, #f5f3f0);
        }

        .export-icon {
            font-size: 2rem;
            margin-bottom: var(--spacing-sm);
        }

        .export-label {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
        }

        .export-desc {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* SMS Hazard Section - Blue Glass Theme */
        .sms-hazard-section {
            margin-top: var(--spacing-2xl);
            padding-top: var(--spacing-xl);
            border-top: 1px solid var(--glass-border);
        }

        .sms-hazard-warning {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-md);
            padding: var(--spacing-lg);
            background: rgba(229, 115, 115, 0.15);
            border-radius: 12px;
            margin-bottom: var(--spacing-lg);
        }

        .sms-warning-icon {
            font-size: 2rem;
        }

        .sms-warning-text strong {
            color: var(--accent-red);
        }

        .sms-warning-text p {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-top: var(--spacing-xs);
        }

        .sms-hazard-btn {
            background: rgba(229, 115, 115, 0.15);
            border-color: var(--accent-red);
        }

        /* The Summary tab's pointer to the report offer on the Export tab. */
        .sms-hazard-pointer {
            margin: var(--spacing-md, 12px) 0 0;
            color: var(--text-secondary, #55627a);
            font-size: 0.9rem;
        }

        .sms-hazard-pointer-link {
            background: none;
            border: 0;
            padding: 0;
            font: inherit;
            color: var(--warm-accent, #2c5282);
            text-decoration: underline;
            cursor: pointer;
        }

        .sms-hazard-btn:hover {
            background: rgba(229, 115, 115, 0.25);
            border-color: var(--accent-red);
        }

        /* Score Cards Grid - Blue Glass Theme */
        .score-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .score-cards-grid .score-card.large {
            padding: var(--spacing-lg);
        }

        /* One score now: A (owner ruling 2026-09-18). */
        .score-cards-grid--single {
            grid-template-columns: 1fr;
        }

        /* Two, side by side (owner ruling 2026-09-22): the fatigue score and
           the pilot's reported score, on one ruler, neither moving the other.
           They stack at 768px with the rest of the grid. */
        .score-cards-grid--pair {
            grid-template-columns: repeat(2, 1fr);
        }

        .score-card-band {
            margin-top: var(--spacing-sm, 8px);
        }

        .fatigue-action {
            margin: var(--spacing-md, 12px) auto 0;
            max-width: 52ch;
            color: var(--text-inverse);
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.45;
        }

        /* The flight's planned score, under this pilot's (owner ruling
           2026-09-19: reported sleep counts both ways, so the plan it moved
           from stays in sight). */
        /* The note under a score: the flight's plan under A, what was
           reported under B. Both sit on the card's accent fill, so both
           take the card's own inverse ink. */
        .fatigue-planned,
        .score-card-note {
            margin: var(--spacing-md, 12px) auto 0;
            padding-top: var(--spacing-sm, 8px);
            max-width: 52ch;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
            color: var(--text-inverse);
            font-size: 0.85rem;
            line-height: 1.45;
        }

        .fatigue-breakdown-card { margin-top: 1rem; }
        .fatigue-breakdown-card[hidden] { display: none; }
        .fatigue-breakdown-card h3 { margin: 0 0 0.5rem; }
        .fatigue-factors { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
        .fatigue-factors th, .fatigue-factors td {
            padding: 0.4rem 0.5rem;
            border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
            text-align: left;
            vertical-align: top;
        }
        .fatigue-factors td.num, .fatigue-factors th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .fatigue-factors .group th {
            padding-top: 0.8rem;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--text-muted, #64748b);
        }
        .fatigue-factors .note { display: block; font-weight: 400; color: var(--text-muted, #64748b); font-size: 0.8rem; }
        .fatigue-factors tfoot th, .fatigue-factors tfoot td { font-weight: 700; border-bottom: none; }
        .fatigue-notes { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; color: var(--text-muted, #64748b); }
        .fatigue-notes li { margin: 0.2rem 0; }

        /* Before this flight (js/before-flight-guide.js, owner 2026-09-25) */
        .before-flight-guide { margin-top: 1rem; }
        .before-flight-guide[hidden] { display: none; }
        .bfg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
        .bfg-head h3 { margin: 0; }
        .bfg-follows { font-size: 0.8rem; color: var(--text-muted, #586576); }
        .bfg-part { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)); }
        .bfg-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin-bottom: 0.4rem; }
        .bfg-step { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-blue, #2c5282); }
        .bfg-part-head h4 { margin: 0; font-size: 0.95rem; }
        .bfg-part p { margin: 0 0 0.5rem; max-width: 68ch; font-size: 0.9rem; line-height: 1.5; }
        .bfg-part .bfg-hazard { padding: 0.6rem 0.8rem; border-radius: 8px; font-weight: 600; background: rgba(192, 57, 43, 0.08); color: var(--risk-very-high, #c0392b); }
        .bfg-part .bfg-hazard--high { background: rgba(180, 83, 9, 0.08); color: var(--risk-high, #b45309); }
        .bfg-part .bfg-summary { font-weight: 600; }
        .bfg-part .bfg-cant { padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--warm-subtle, #f8fafc); font-size: 0.85rem; }
        .bfg-part .bfg-intro { font-size: 0.82rem; color: var(--text-muted, #586576); }
        .bfg-mitigations { list-style: none; margin: 0; padding: 0; }
        .bfg-mitigation { padding: 0.55rem 0; border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.08)); }
        .bfg-mitigation:first-child { border-top: 0; }
        .bfg-acts { display: block; margin-bottom: 0.2rem; font-size: 0.72rem; color: var(--text-muted, #586576); }
        .bfg-whatifs { display: grid; gap: 0.3rem; margin-top: 0.1rem; }
        .bfg-whatif { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
        .bfg-whatif-note { font-size: 0.8rem; color: var(--text-muted, #586576); }

        .score-cards-grid .score-card.large .score-value {
            font-size: 3rem;
        }

        @media (max-width: 768px) {
            .score-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Individual Assessment Metrics Section */
        .metrics-section-panel {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 2px 8px rgba(44, 82, 130, 0.08);
        }

        .metrics-section-title {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .metric-row {
            display: grid;
            grid-template-columns: 2rem 1fr auto 100px auto;
            gap: 1rem;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--glass-border);
        }

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

        .metric-row-icon {
            font-size: 1.25rem;
        }

        .metric-row-name {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .metric-row-value {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .metric-row-bar {
            width: 100px;
            height: 8px;
            background: var(--glass-bg, rgba(44, 82, 130, 0.08));
            border-radius: 4px;
            overflow: hidden;
        }

        .metric-row-bar-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .metric-row-badge {
            font-size: 0.65rem;
            padding: 0.2rem 0.5rem;
            border-radius: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }

        @media (max-width: 768px) {
            .metric-row {
                grid-template-columns: 2rem 1fr;
                gap: 0.5rem;
            }

            .metric-row-value,
            .metric-row-bar,
            .metric-row-badge {
                grid-column: 2;
            }
        }

        /* Recommendation Cards */
        .recommendation-card {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 12px;
            padding: 1.25rem;
            margin-bottom: 1rem;
            border-left: 4px solid var(--warm-accent, #2c5282);
            box-shadow: 0 2px 6px rgba(44, 82, 130, 0.08);
        }

        .recommendation-card.warning {
            border-left-color: var(--accent-yellow);
        }

        .recommendation-card.alert {
            border-left-color: var(--accent-red);
        }

        .recommendation-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .recommendation-icon {
            font-size: 1.5rem;
        }

        .recommendation-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .recommendation-text {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .recommendation-actions {
            margin-top: 1rem;
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .rec-action-btn {
            background: rgba(52, 104, 160, 0.2);
            border: 1px solid var(--accent-blue);
            color: var(--accent-blue);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .rec-action-btn:hover {
            background: rgba(52, 104, 160, 0.3);
        }

        /* TEM Analysis Grid */
        .tem-analysis-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .tem-analysis-item {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 8px;
            padding: 1rem;
            box-shadow: 0 1px 4px rgba(44, 82, 130, 0.06);
        }

        .tem-analysis-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .tem-analysis-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .tem-analysis-risk {
            font-size: 0.65rem;
            padding: 0.2rem 0.5rem;
            border-radius: 10px;
        }

        .tem-analysis-desc {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .tem-analysis-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Export Grid */
        .export-grid-new {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .export-grid-btn {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 12px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            box-shadow: 0 2px 6px rgba(44, 82, 130, 0.08);
        }

        .export-grid-btn:hover {
            background: var(--warm-subtle, #f5f3f0);
            border-color: var(--warm-accent, #2c5282);
        }

        .export-grid-btn.danger:hover {
            background: rgba(229, 115, 115, 0.15);
            border-color: var(--accent-red);
        }

        .export-grid-icon {
            font-size: 2rem;
            margin-bottom: 0.75rem;
        }

        .export-grid-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .export-grid-desc {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .export-grid-btn.danger {
            background: rgba(229, 115, 115, 0.1);
            border-color: rgba(229, 115, 115, 0.3);
        }

        .export-grid-btn.danger .export-grid-icon,
        .export-grid-btn.danger .export-grid-title {
            color: var(--accent-red);
        }

        @media (max-width: 768px) {
            .export-grid-new {
                grid-template-columns: 1fr;
            }
        }

        /* Assessment Content Text Visibility Fix - Blue Glass Theme */
        .accordion-content,
        .accordion-content * {
            color: var(--text-primary);
        }

        .accordion-group .accordion-content label {
            color: var(--text-primary);
        }

        .accordion-content h4,
        .accordion-content h5,
        .accordion-content p,
        .accordion-content span {
            color: var(--text-primary);
        }

        .accordion-content input[type="radio"] + span,
        .accordion-content input[type="checkbox"] + span {
            color: var(--text-primary);
        }

        /* Ensure assessment card container content is visible */
        [id$="Container"] {
            color: var(--text-primary);
        }

        .tab-panel [id$="Container"] label {
            color: var(--text-primary);
            display: flex;
            visibility: visible;
        }

        [id$="Container"] div {
            color: var(--text-primary);
        }

        /* Assessment button visibility */
        .tab-panel [id$="Container"] button {
            color: white;
            background: var(--warm-accent, #2c5282);
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md, 8px);
            font-weight: 600;
            cursor: pointer;
        }

        .tab-panel [id$="Container"] button:hover {
            background: var(--warm-dark, #1e3a5f);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(44, 82, 130, 0.2));
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {



            .form-grid {
                grid-template-columns: 1fr;
            }

            .score-display {
                flex-direction: column;
                align-items: center;
            }

            .results-tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
            }

            .results-tab {
                padding: 0.375rem 0.75rem;
                font-size: 0.75rem;
            }

            .metrics-grid {
                grid-template-columns: 1fr;
            }

            .crm-grid, .decide-grid {
                grid-template-columns: 1fr;
            }

            .export-options-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Assessment Explanation Modal */
        .explanation-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 1rem;
        }
        .explanation-modal.active {
            display: flex;
        }
        .explanation-modal-content {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: 16px;
            max-width: 600px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(44, 82, 130, 0.25);
        }
        .explanation-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--warm-border, #f0ebe3);
            position: sticky;
            top: 0;
            background: var(--warm-subtle, #f5f3f0);
        }
        .explanation-modal-title {
            margin: 0;
            font-size: 1.25rem;
            color: var(--text-primary, #2c2c2c);
        }
        .explanation-modal-close {
            background: none;
            border: none;
            color: var(--text-muted, #64748b);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            line-height: 1;
        }
        .explanation-modal-close:hover {
            color: var(--text-primary, #2c2c2c);
        }
        .explanation-modal-body {
            padding: 1.5rem;
        }
        .explanation-section {
            margin-bottom: 1.5rem;
        }
        .explanation-section:last-child {
            margin-bottom: 0;
        }
        .explanation-section h4 {
            color: var(--warm-accent, #2c5282);
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
        }
        .explanation-section p {
            color: var(--text-primary, #2c2c2c);
            margin: 0;
            font-size: 0.9rem;
            line-height: 1.6;
        }
        .explanation-section ul {
            margin: 0.5rem 0 0 0;
            padding-left: 1.25rem;
            color: var(--text-secondary, #55627a);
            font-size: 0.9rem;
        }
        .explanation-section li {
            margin-bottom: 0.25rem;
        }
        .info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.25rem;
            height: 1.25rem;
            background: rgba(44, 82, 130, 0.1);
            border: 1px solid rgba(44, 82, 130, 0.2);
            border-radius: 50%;
            color: var(--gold-accent, #3468a0);
            font-size: 0.7rem;
            cursor: pointer;
            margin-left: 0.5rem;
            transition: all 0.2s ease;
        }
        .info-icon:hover {
            background: rgba(44, 82, 130, 0.15);
            transform: scale(1.1);
        }

        /* ===============================================
           6-TAB NAVIGATION SYSTEM
           Tab-based navigation with sequential locking
           =============================================== */

        .session-tab-nav {
            display: flex;
            justify-content: center;
            background: var(--bg-card, #ffffff);
            border-radius: var(--radius-lg, 16px);
            padding: var(--spacing-sm);
            margin-bottom: var(--spacing-xl);
            border: 1px solid var(--warm-border, #f0ebe3);
            box-shadow: 0 4px 16px rgba(44, 82, 130, 0.12);
            gap: var(--spacing-xs);
            flex-wrap: wrap;
        }

        /* Session Tab Navigation - Charter Quote Style */
        .session-tab-btn {
            /* The style guide's touch floor (40px); on a phone the padding
               below shrinks and left the step tabs 24px tall. */
            min-height: 40px;
            padding: 0.625rem 1.25rem;
            border: none;
            background: transparent;
            color: var(--text-secondary, #55627a);
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            white-space: nowrap;
        }

        .session-tab-btn:hover:not(:disabled) {
            background: var(--warm-subtle, #f8fafc);
            color: var(--text-primary, #2c2c2c);
        }

        .session-tab-btn.active {
            background: var(--warm-accent, #2c5282);
            color: white;
            box-shadow: 0 4px 12px rgba(44, 82, 130, 0.3);
        }

        .session-tab-btn.completed {
            background: rgba(34, 197, 94, 0.15);
            color: var(--success-text);
        }

        .session-tab-btn.completed:hover:not(:disabled) {
            background: rgba(34, 197, 94, 0.2);
        }

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

        .session-tab-btn:disabled:hover {
            background: transparent;
        }

        /* Hide lock icons - use disabled state instead */
        .lock-icon {
            display: none;
        }

        /* Tab Panel Content. No frame of its own (owner, 2026-09-26, P-3):
           each step sits directly in the page's card (.step-container), not
           in a second card inside it. */
        .tab-panel {
            display: none;
        }

        .tab-panel.active {
            display: block;
            animation: fadeIn 0.2s ease-out;
        }

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

        /* Session Status Bar */
        .session-status-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--spacing-md) var(--spacing-lg);
            background: var(--warm-subtle, #f5f3f0);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-lg);
            flex-wrap: wrap;
            gap: var(--spacing-md);
            box-shadow: 0 2px 6px rgba(44, 82, 130, 0.06);
        }

        .session-status-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-size: 0.875rem;
        }

        .session-status-label {
            color: var(--text-muted, #64748b);
        }

        .session-status-value {
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
        }

        .flight-state-badge {
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 6px rgba(44, 82, 130, 0.12);
        }

        .flight-state-badge.pre-flight {
            background: rgba(74, 122, 181, 0.15);
            color: var(--accent-blue, #2c5282);
        }

        .flight-state-badge.ready-to-fly {
            background: rgba(52, 104, 160, 0.2);
            color: var(--gold-accent, #3468a0);
        }

        .flight-state-badge.in-flight {
            background: rgba(58, 80, 107, 0.15);
            color: var(--navy-accent, #3a506b);
        }

        .flight-state-badge.post-flight {
            background: rgba(245, 158, 11, 0.15);
            color: var(--status-warning);
        }

        .flight-state-badge.completed {
            background: rgba(16, 185, 129, 0.15);
            color: var(--accent-green, #10b981);
        }

        /* Not on the shared flight record yet, and a cancelled flight:
           neither is a stage of flying, so neither takes a colour. */
        .flight-state-badge.draft,
        .flight-state-badge.cancelled {
            background: transparent;
            color: var(--text-secondary, #55627a);
            box-shadow: inset 0 0 0 1px var(--warm-border, #dfe5ee);
        }

        /* Mobile responsive tabs */
        @media (max-width: 768px) {
            .session-tab-nav {
                padding: var(--spacing-xs);
                gap: var(--spacing-xs);
                flex-wrap: wrap;
                justify-content: center;
            }

            .session-tab-btn {
                padding: var(--spacing-xs) var(--spacing-sm);
                /* 13 px, the style guide's floor for a control's label
                   (owner, 2026-09-26, P-5); 12 px is for dense data grids. */
                font-size: 0.8125rem;
            }
        }

        /* ===============================================
           PHASE 6: ASSESSMENT UI/UX ENHANCEMENT
           Comprehensive CSS class architecture for
           improved assessment visual display
           =============================================== */

        /* Assessment Form Container - Enhanced Structure */
        .assessment-form-container {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-lg, 12px);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-md);
            transition: all 0.3s ease;
        }

        .assessment-form-container:hover {
            box-shadow: var(--shadow-md, 0 4px 12px rgba(44, 82, 130, 0.1));
        }

        /* Risk level border indicators */
        .assessment-form-container.risk-low {
            border-left: 4px solid var(--success-green-light);
        }

        .assessment-form-container.risk-moderate {
            border-left: 4px solid #eab308;
        }

        .assessment-form-container.risk-high {
            border-left: 4px solid #f97316;
        }

        .assessment-form-container.risk-critical {
            border-left: 4px solid var(--risk-critical);
            animation: pulse-critical 1s ease-in-out;
        }

        @keyframes pulse-critical {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
            50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.15); }
        }

        /* Assessment Header Enhancement */
        .assessment-form-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--spacing-md);
            padding-bottom: var(--spacing-sm);
            border-bottom: 1px solid var(--warm-border, #f0ebe3);
        }

        .assessment-form-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary, #2c2c2c);
            margin: 0;
        }

        .assessment-form-description {
            font-size: 0.875rem;
            color: var(--text-secondary, #55627a);
            margin-top: var(--spacing-xs);
            line-height: 1.5;
        }

        .assessment-form-meta {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-size: 0.75rem;
            color: var(--text-muted, #64748b);
        }

        .assessment-time-estimate {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            background: var(--bg-secondary, #f5f0eb);
            border-radius: var(--radius-sm);
        }

        /* Enhanced Radio/Option Items */
        .assessment-options {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }

        .assessment-options.horizontal {
            flex-direction: row;
            flex-wrap: wrap;
        }

        .assessment-option {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 1rem;
            border: 2px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md, 8px);
            background: var(--bg-card, #ffffff);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .assessment-option:hover {
            background: var(--warm-subtle, #f8fafc);
            border-color: var(--warm-accent, #2c5282);
            transform: translateX(2px);
        }

        .assessment-option.selected {
            background: rgba(44, 82, 130, 0.08);
            border-color: var(--warm-accent, #2c5282);
            box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
        }

        /* Custom Radio Indicator */
        .assessment-radio-indicator {
            width: 22px;
            height: 22px;
            min-width: 22px;
            border: 2px solid var(--warm-border, #dfe5ee);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
            margin-top: 2px;
        }

        .assessment-option:hover .assessment-radio-indicator {
            border-color: var(--warm-accent, #2c5282);
        }

        .assessment-option.selected .assessment-radio-indicator {
            border-color: var(--warm-accent, #2c5282);
            background: var(--warm-accent, #2c5282);
        }

        .assessment-option.selected .assessment-radio-indicator::after {
            content: '';
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
        }

        /* Option Content */
        .assessment-option-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .assessment-option-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            background: var(--bg-secondary, #f5f0eb);
            border-radius: 50%;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-secondary, #55627a);
            margin-right: 0.5rem;
        }

        .assessment-option.selected .assessment-option-number {
            background: var(--warm-accent, #2c5282);
            color: white;
        }

        .assessment-option-label {
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
            font-size: 0.9375rem;
        }

        .assessment-option.selected .assessment-option-label {
            color: var(--warm-accent, #2c5282);
        }

        .assessment-option-description {
            font-size: 0.8125rem;
            color: var(--text-secondary, #55627a);
            line-height: 1.4;
        }

        /* Risk Badges - Enhanced */
        .risk-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        .risk-badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .risk-badge.low {
            background: rgba(34, 197, 94, 0.15);
            color: var(--success-green-light);
        }

        .risk-badge.low::before {
            background: var(--success-green-light);
        }

        .risk-badge.moderate {
            background: rgba(234, 179, 8, 0.15);
            color: #ca8a04;
        }

        .risk-badge.moderate::before {
            background: #eab308;
        }

        .risk-badge.high {
            background: rgba(249, 115, 22, 0.15);
            color: #ea580c;
        }

        .risk-badge.high::before {
            background: #f97316;
        }

        .risk-badge.critical {
            background: rgba(239, 68, 68, 0.15);
            color: var(--status-danger);
        }

        .risk-badge.critical::before {
            background: var(--risk-critical);
        }

        /* Custom Sliders - Enhanced Styling */
        .assessment-slider-container {
            margin: var(--spacing-lg) 0;
        }

        .assessment-slider-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-sm);
        }

        .assessment-slider-label {
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
            font-size: 0.9375rem;
        }

        .assessment-slider-value {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 3rem;
            padding: 0.25rem 0.75rem;
            background: rgba(44, 82, 130, 0.65);
            color: white;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 1rem;
        }

        .assessment-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background: linear-gradient(to right,
                #22c55e 0%,
                #eab308 50%,
                #ef4444 100%
            );
            outline: none;
            cursor: pointer;
        }

        .assessment-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: white;
            border: 3px solid var(--warm-accent, #2c5282);
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.15s ease;
        }

        .assessment-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .assessment-slider::-moz-range-thumb {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: white;
            border: 3px solid var(--warm-accent, #2c5282);
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .assessment-slider-labels {
            display: flex;
            justify-content: space-between;
            margin-top: var(--spacing-xs);
            font-size: 0.75rem;
            color: var(--text-muted, #64748b);
        }

        /* Quick Select Buttons for Sliders */
        .assessment-quick-select {
            display: flex;
            gap: 0.5rem;
            margin-top: var(--spacing-md);
            flex-wrap: wrap;
        }

        .assessment-quick-btn {
            padding: 0.5rem 1rem;
            background: var(--bg-secondary, #f5f0eb);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-secondary, #55627a);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .assessment-quick-btn:hover {
            background: var(--warm-subtle, #f8fafc);
            border-color: var(--warm-accent, #2c5282);
            color: var(--warm-accent, #2c5282);
        }

        .assessment-quick-btn.selected {
            background: var(--warm-accent, #2c5282);
            border-color: var(--warm-accent, #2c5282);
            color: white;
        }

        /* Progress Bar Enhancement */
        .assessment-progress-container {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-lg, 12px);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-xl);
        }

        .assessment-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-sm);
        }

        .assessment-progress-title {
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
            font-size: 0.9375rem;
        }

        .assessment-progress-stats {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            font-size: 0.875rem;
            color: var(--text-secondary, #55627a);
        }

        .assessment-progress-percent {
            font-weight: 700;
            color: var(--warm-accent, #2c5282);
        }

        .assessment-progress-bar {
            height: 10px;
            background: var(--bg-secondary, #f5f0eb);
            border-radius: 5px;
            overflow: hidden;
        }

        .assessment-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--warm-accent, #2c5282), var(--success-green-light));
            border-radius: 5px;
            transition: width 0.4s ease;
        }

        .assessment-progress-details {
            display: flex;
            justify-content: space-between;
            margin-top: var(--spacing-sm);
            font-size: 0.8125rem;
            color: var(--text-muted, #64748b);
        }

        /* Result Card with Animation */
        .assessment-result {
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
            margin-top: var(--spacing-lg);
            padding: var(--spacing-lg);
            background: var(--bg-secondary, #f5f0eb);
            border-radius: var(--radius-md);
            border-left: 4px solid var(--warm-accent, #2c5282);
        }

        .assessment-result.show {
            opacity: 1;
            transform: translateY(0);
        }

        .assessment-result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-sm);
        }

        .assessment-result-score {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary, #2c2c2c);
        }

        .assessment-result-max {
            font-size: 0.875rem;
            color: var(--text-muted, #64748b);
        }

        .assessment-result-interpretation {
            font-size: 0.9375rem;
            color: var(--text-secondary, #55627a);
            line-height: 1.5;
        }

        /* The KSS finding: the reported score's band, the level's own words,
           and above Low what to do (assessments.js updateKSSScore). */
        .assessment-result-interpretation .kss-finding-words {
            margin: 0.5rem 0 0;
        }

        .assessment-result-interpretation .kss-finding-action {
            margin: 0.35rem 0 0;
            color: var(--text-primary, #2c2c2c);
            font-weight: 600;
        }

        /* IMSAFE: the answers as given, the FAA's line under any that isn't
           clear, and the closing line (assessments.js renderIMSAFEAnswers). */
        .assessment-result-interpretation .imsafe-answers { margin: 0; padding: 0; list-style: none; }
        .assessment-result-interpretation .imsafe-answers li { margin: 0 0 0.45rem; color: var(--text-primary, #2c2c2c); }
        .assessment-result-interpretation .imsafe-line {
            margin: 0.2rem 0 0 0.9rem;
            color: var(--warn-ink, #92500e);
            font-size: 0.875rem;
        }
        .assessment-result-interpretation .imsafe-closing {
            margin: 0.6rem 0 0;
            color: var(--text-primary, #2c2c2c);
            font-weight: 600;
        }

        /* Submit Button with Loading State */
        .assessment-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.875rem 1.5rem;
            background: var(--warm-accent, #2c5282);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.9375rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            min-width: 160px;
        }

        .assessment-submit:hover {
            background: var(--warm-dark, #1e3a5f);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(44, 82, 130, 0.25);
        }

        .assessment-submit:active {
            transform: translateY(0);
        }

        .assessment-submit.loading {
            color: transparent;
            pointer-events: none;
        }

        .assessment-submit.loading::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border: 2px solid white;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Visual Hierarchy - Required/Recommended/Optional Sections */
        .assessment-section-required {
            background: rgba(239, 68, 68, 0.04);
            border: 2px solid rgba(239, 68, 68, 0.2);
            border-radius: var(--radius-lg, 12px);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }

        .assessment-section-required .assessment-section-header {
            color: var(--status-danger);
        }

        .assessment-section-recommended {
            background: rgba(234, 179, 8, 0.04);
            border: 2px solid rgba(234, 179, 8, 0.2);
            border-radius: var(--radius-lg, 12px);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }

        .assessment-section-recommended .assessment-section-header {
            color: #ca8a04;
        }

        .assessment-section-optional {
            background: var(--bg-secondary, #f5f0eb);
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-lg, 12px);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }

        .assessment-section-header {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--spacing-lg);
        }

        .assessment-section-icon {
            font-size: 1.25rem;
        }

        /* Collapsible Section */
        .assessment-collapsible {
            border: 1px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-lg, 12px);
            overflow: hidden;
        }

        .assessment-collapsible-trigger {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: var(--spacing-md) var(--spacing-lg);
            background: var(--bg-secondary, #f5f0eb);
            border: none;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .assessment-collapsible-trigger:hover {
            background: var(--warm-subtle, #f8fafc);
        }

        .assessment-collapsible-title {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
        }

        .assessment-collapsible-arrow {
            transition: transform 0.3s ease;
            color: var(--text-muted, #64748b);
        }

        .assessment-collapsible.expanded .assessment-collapsible-arrow {
            transform: rotate(180deg);
        }

        .assessment-collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .assessment-collapsible.expanded .assessment-collapsible-content {
            max-height: 5000px;
        }

        .assessment-collapsible-inner {
            padding: var(--spacing-lg);
        }

        /* Accessibility - Focus States */
        .assessment-option:focus-visible {
            outline: 2px solid var(--warm-accent, #2c5282);
            outline-offset: 2px;
        }

        .assessment-slider:focus-visible {
            outline: 2px solid var(--warm-accent, #2c5282);
            outline-offset: 4px;
        }

        .assessment-submit:focus-visible {
            outline: 2px solid var(--gold-accent, #3468a0);
            outline-offset: 2px;
        }

        .assessment-quick-btn:focus-visible {
            outline: 2px solid var(--warm-accent, #2c5282);
            outline-offset: 2px;
        }

        /* Mobile Responsiveness for Assessments */
        @media (max-width: 768px) {
            .assessment-form-container {
                padding: var(--spacing-md);
            }

            .assessment-option {
                padding: 1rem;
                min-height: 60px;
            }

            .assessment-radio-indicator {
                width: 26px;
                height: 26px;
                min-width: 26px;
            }

            .assessment-option.selected .assessment-radio-indicator::after {
                width: 10px;
                height: 10px;
            }

            .assessment-slider {
                height: 14px;
            }

            .assessment-slider::-webkit-slider-thumb {
                width: 34px;
                height: 34px;
            }

            .assessment-slider::-moz-range-thumb {
                width: 34px;
                height: 34px;
            }

            .assessment-slider-labels {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }

            .assessment-quick-select {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 0.375rem;
            }

            .assessment-quick-btn {
                padding: 0.625rem 0.5rem;
                font-size: 0.75rem;
                text-align: center;
            }

            .assessment-progress-stats {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }

            .assessment-result {
                padding: var(--spacing-md);
            }

            .assessment-submit {
                width: 100%;
                padding: 1rem;
            }

            .assessment-section-header {
                font-size: 0.875rem;
            }

            .assessment-form-header {
                flex-direction: column;
                gap: var(--spacing-sm);
            }

            .assessment-form-meta {
                width: 100%;
                justify-content: flex-start;
            }
        }

        /* Button Grid Layout (IMSAFE, ALFA) */
        .assessment-button-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: var(--spacing-md);
        }

        .assessment-grid-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: var(--spacing-lg);
            background: var(--bg-card, #ffffff);
            border: 2px solid var(--warm-border, #f0ebe3);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .assessment-grid-item:hover {
            border-color: var(--warm-accent, #2c5282);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(44, 82, 130, 0.15);
        }

        .assessment-grid-item.selected {
            border-color: var(--success-green-light);
            background: rgba(34, 197, 94, 0.08);
        }

        .assessment-grid-item.selected.negative {
            border-color: var(--risk-critical);
            background: rgba(239, 68, 68, 0.08);
        }

        .assessment-grid-letter {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: var(--spacing-xs);
        }

        .assessment-grid-item.selected .assessment-grid-letter {
            color: var(--success-green-light);
        }

        .assessment-grid-item.selected.negative .assessment-grid-letter {
            color: var(--risk-critical);
        }

        .assessment-grid-label {
            font-size: 0.75rem;
            color: var(--text-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        .assessment-grid-status {
            margin-top: var(--spacing-sm);
            font-size: 0.8125rem;
            font-weight: 600;
        }

        .assessment-grid-item.selected .assessment-grid-status {
            color: var(--success-green-light);
        }

        .assessment-grid-item.selected.negative .assessment-grid-status {
            color: var(--risk-critical);
        }

        @media (max-width: 768px) {
            .assessment-button-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .assessment-grid-item {
                padding: var(--spacing-md);
            }

            .assessment-grid-letter {
                font-size: 1.5rem;
            }
        }

        /* Accessibility - Focus states for keyboard navigation */
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        .assessment-item:focus-visible,
        .tab-btn:focus-visible,
        .results-tab:focus-visible,
        .adm-option-btn:focus-visible {
            outline: 2px solid var(--warm-accent, #2c5282);
            outline-offset: 2px;
        }

        /* Ensure focus is visible on dark backgrounds too */
        .adm-scenario-header:focus-visible,
        .accordion-header:focus-visible {
            outline: 2px solid var(--gold-accent, #3468a0);
            outline-offset: 2px;
        }

        /* ==========================================
           Sprint 5 — Mobile responsive polish
           Target: iPhone SE (375x667) usable end-to-end
           per FRMS v3 plan §E S5-1. These rules come LAST so
           they override any earlier 768px breakpoint that
           assumed a tablet-sized viewport.
           ========================================== */

        @media (max-width: 480px) {
            /* Wizard Phase 1/2/3: single-column forms */
            .form-grid {
                grid-template-columns: 1fr !important;
                gap: var(--spacing-md);
            }

            .step-content {
                padding: var(--spacing-sm);
            }

            /* Assessment battery accordion — tighten padding so
               the Required Six fit without horizontal scroll */
            .battery-section {
                padding: var(--spacing-md);
                border-left-width: 3px;
            }

            .battery-title {
                font-size: 1.05rem;
            }

            .battery-content.expanded {
                padding-top: var(--spacing-sm);
            }

            /* In-flight check-in: already compact, but iPhone SE
               needs the KSS slider full-width and larger tap targets */
            .checkin-mobile-wrap {
                max-width: 100%;
                padding: 0;
            }

            .checkin-card .kss-slider,
            .checkin-card input[type="range"] {
                width: 100%;
                height: 44px; /* Apple HIG minimum tap target */
            }

            .checkin-card button,
            .checkin-card .btn {
                min-height: 48px;
                font-size: 1rem;
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            /* The step buttons stack, full width, instead of running off
               the screen (Start Flight did, by 16 px at 375). */
            .wizard-actions .btn {
                flex: 1 1 100%;
            }

            /* A help tooltip opens as a panel inside the screen's edges,
               wherever its icon sits, so none of its text is cut off. */
            .help-tooltip,
            .help-tooltip.tooltip-left,
            .help-tooltip.tooltip-right {
                position: fixed;
                left: var(--spacing-md, 1rem);
                right: var(--spacing-md, 1rem);
                top: auto;
                bottom: calc(var(--spacing-md, 1rem) + env(safe-area-inset-bottom, 0px));
                transform: none;
                width: auto;
                max-width: none;
            }

            .help-tooltip::after {
                display: none;
            }

            /* A scaled icon would become the panel's frame instead of the screen. */
            .help-icon:hover {
                transform: none;
            }
        }

        /* iPhone SE / small Android: 375px wide */
        @media (max-width: 375px) {
            /* Further shrink wizard header + progress text so the
               "Phase 2 of 3" label doesn't wrap */
            .wizard-header h1,
            .wizard-header h2 {
                font-size: 1.1rem;
            }

            .wizard-header .subtitle,
            .wizard-subtitle {
                font-size: 0.8rem;
            }

            /* Collapse the left/right padding on the wizard container */
            .container,
            .wizard-container,
            main.container {
                padding-left: var(--spacing-sm);
                padding-right: var(--spacing-sm);
            }

            /* Results-page sub-tab row allows wrapping */
            .results-tabs {
                flex-wrap: wrap;
                gap: 0.25rem;
            }

            .results-tabs .tab,
            .results-tabs button {
                flex: 1 1 calc(50% - 0.25rem);
                font-size: 0.85rem;
                padding: 0.5rem 0.25rem;
            }

            /* Modal dialogs (voice-capture confirmation, etc.) */
            .modal, .dialog {
                max-width: calc(100vw - 1rem);
                margin: 0.5rem;
            }
        }

        /* Safe-area inset support for iPhone notch / home-bar */
        @supports (padding: env(safe-area-inset-bottom)) {
            @media (max-width: 480px) {
                body {
                    padding-bottom: env(safe-area-inset-bottom);
                }
                .wizard-nav,
                .wizard-footer,
                .checkin-card {
                    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
                }
            }
        }

/* FRMS-051: honour prefers-reduced-motion for ALL FRMS animation/transition
   (pulse-critical, fadeIn, spinner, transform hovers) — not just the
   skeleton. Blanket override, scoped to this FRMS sheet. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* FRMS-051: print styles for the document-shaped outputs a crew member
   prints — session results + post-flight debrief. Hide chrome; ink-friendly. */
@media print {
    nav-bar, glass-footer, .skip-link, .skip-to-content,
    .session-tab-nav, .breadcrumb, .wizard-actions,
    .btn, .results-tab, .info-icon, .accordion-arrow { display: none !important; }
    body, .container { background: #fff !important; color: #000 !important; }
    .glass-panel, .settings-card, .assessment-card {
        box-shadow: none !important; border-color: #ccc !important;
        break-inside: avoid;
    }
    .results-tab-content { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 3h — classes for markup that assessments.js used to style with
   inline JS event handlers. Seven onmouseover/onmouseout pairs wrote
   background, border, opacity and transform straight onto elements;
   they are :hover rules now. The elements, their copy, and every score
   they feed are unchanged — only where the styling lives has moved.

   Appended at end-of-file deliberately: nothing above is touched.
   ═══════════════════════════════════════════════════════════════════ */

/* Selectable option rows in the CFQ and IMSAFE batteries. */
.fa-choice {
    background: var(--bg-tertiary, #f1f4f8);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.fa-choice:hover {
    background: var(--wash, #f6f8fb);
    border-color: var(--accent-light, #4a7ab5);
}

.fa-choice:focus-within {
    border-color: var(--accent, #2c5282);
}

/* SAFTE-FAST acknowledgement button. */
.fa-ack-btn {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(44, 82, 130, 0.10);
    border: 1px solid rgba(44, 82, 130, 0.30);
    border-radius: 8px;
    color: var(--warm-accent, #2c5282);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fa-ack-btn:hover { background: rgba(44, 82, 130, 0.20); }

/* Buttons whose only hover affordance was a 1px lift. */
.fa-lift { transition: transform 0.2s ease; }
.fa-lift:hover { transform: translateY(-1px); }

/* The delete pip on a logged sleep entry. Opacity moved off the inline
   style so the :hover rule can actually win. */
.fa-sleep-delete {
    position: absolute;
    top: -4px;
    right: -2px;
    z-index: 10;
    width: 16px;
    height: 16px;
    padding: 0;
    background: rgba(239, 68, 68, 0.80);
    color: var(--text-inverse);
    border: none;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.fa-sleep-delete:hover,
.fa-sleep-delete:focus-visible { opacity: 1; }

/* The PVT at the debrief (js/pvt-b-runner.js; PVT-B, owner ruling
   2026-09-23). A large tap area that does not scroll, zoom or select on a
   press; the reaction time in tabular figures; the result as measured,
   with no verdict colour. */
.pvtb { display: grid; gap: 0.75rem; }
.pvtb p.pvtb-intro { margin: 0; color: var(--text-secondary, #55627a); font-size: 0.9rem; max-width: 60ch; }
.pvtb-actions[hidden], .pvtb-stage[hidden], .pvtb-result[hidden], .pvtb-dot[hidden] { display: none; }
.pvtb-stage { display: grid; gap: 0.5rem; }
.pvtb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text-primary, #111827);
    font-size: 0.9rem;
}
.pvtb-clock { font-variant-numeric: tabular-nums; }
.pvtb-target {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--warm-border, #c6cfdc);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-card, #ffffff);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.pvtb-target:focus-visible { outline: 3px solid var(--warm-accent, #2c5282); outline-offset: 2px; }
.pvtb-dot { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-red, #c0392b); }
.pvtb-msg { color: var(--text-primary, #111827); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pvtb-result { display: grid; gap: 0.5rem; }
.pvtb p.pvtb-result-head { margin: 0; color: var(--text-primary, #111827); font-weight: 600; }
.pvtb-result-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.pvtb-result-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; border-bottom: 1px solid var(--warm-border, #dfe5ee); padding: 0.25rem 0; }
.pvtb span.pvtb-result-label { color: var(--text-secondary, #55627a); }
.pvtb span.pvtb-result-value { color: var(--text-primary, #111827); font-weight: 600; font-variant-numeric: tabular-nums; }
.pvtb p.pvtb-result-note { margin: 0; color: var(--text-secondary, #55627a); font-size: 0.85rem; }
/* The battery's PVT sits in #preFlight_pvtContainer, and the blanket
   ".tab-panel [id$=Container] button" rule above paints every button there
   primary: Stop keeps the quiet look it has in the debrief. */
.tab-panel [id$="Container"] .pvtb button.pvtb-stop {
    background: var(--bg-card-alt, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--warm-border, #dfe5ee);
    padding: 0.5rem 1rem;
    box-shadow: none;
}
.tab-panel [id$="Container"] .pvtb button.pvtb-stop:hover {
    background: var(--bg-secondary, #eef1f6);
    box-shadow: none;
}