/* ==========================================================================
   NOTE RAIL - Inline AI Note Generation Rail
   EvroDark-inspired slideout rail pattern (2026-02)

   ARCHITECTURE: Inline rail beside clinical grid, expands/collapses with transition
   WHY: Less disruptive than overlay modal - user can see patient data alongside note
   TRADEOFF: Uses horizontal space vs overlay approach
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS VARIABLES - Rail-specific tokens
   -------------------------------------------------------------------------- */
:root {
    /* Rail dimensions */
    --rail-width-collapsed: 64px;
    --rail-width-expanded: 800px;
    --rail-transition-duration: 300ms;
    --rail-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Status colors (mapped to SOL palette) */
    --rail-status-idle: var(--sol-text-tertiary, #64748b);
    --rail-status-generating: var(--sol-info, #3b82f6);
    --rail-status-ready: var(--sol-stable, #22c55e);
    --rail-status-editing: var(--sol-warning, #f59e0b);

    /* Rail backgrounds */
    --rail-bg: var(--sol-bg-tertiary, #1c1f2a);
    --rail-bg-header: var(--sol-bg-secondary, #161922);
    --rail-border: var(--sol-border, rgba(255, 255, 255, 0.1));

    /* Typography (theme-overridable) */
    --rail-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
    --rail-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Type scale — 1:1 mapping of existing sizes, tokenized for central control.
       WHY: 143 hardcoded px values → single override point per step.
       Terminal theme bumps all steps +1 for clinical readability. */
    --rail-text-2xs:     0.5625rem;  /*  9px — tiny labels, metadata */
    --rail-text-xs:      0.625rem;   /* 10px — small labels, counts */
    --rail-text-sm:      0.6875rem;  /* 11px — common small text */
    --rail-text-base:    0.75rem;    /* 12px — secondary text, inputs */
    --rail-text-md:      0.8125rem;  /* 13px — body-adjacent */
    --rail-text-lg:      0.875rem;   /* 14px — body text */
    --rail-text-xl:      1rem;       /* 16px — base headings */
    --rail-text-2xl:     1.125rem;   /* 18px — section headings */
    --rail-text-3xl:     1.25rem;    /* 20px — larger headings */
    --rail-text-heading: 1.625rem;   /* 26px — display heading */
    --rail-text-display: 3rem;       /* 48px — hero display */
}

/* --------------------------------------------------------------------------
   RAIL CONTAINER
   -------------------------------------------------------------------------- */
.note-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%; /* Ensure full height even when collapsed */
    background: var(--rail-bg);
    border-left: 1px solid var(--rail-border);
    overflow: hidden;

    /* PERF (2026-09-01): width is NOT tweened. The rail is in-flow, so a
       64→960px width tween shrank the chart on every frame and repainted the
       whole ~4.5k-node tapestry ~18 times (traced: 2,875 ms raster, four
       100–150 ms long tasks, a 300 ms tween settling at ~850 ms). Snapping
       costs ONE reflow + paint; the body then fades in on the compositor
       (see .note-rail.expanded .note-rail-body below). Same pattern the
       legacy sidebar adopted 2026-07-12. */
    width: var(--rail-width-collapsed);
    transition: border-color var(--rail-transition-duration) ease,
                box-shadow var(--rail-transition-duration) ease;
}

/* Collapsed state - purposeful vertical workspace indicator
   FIX (2026-02-05): Use relative positioning so rail reserves space in layout
   BUG: position:absolute caused rail to overlay content underneath
   ROOT CAUSE: Absolute positioning removes element from document flow
   FIX: Keep relative positioning, let flex container allocate 64px width */
.note-rail:not(.expanded) {
    cursor: pointer;
    /* Subtle gradient that says "this is a workspace" */
    background: linear-gradient(
        180deg,
        var(--sol-bg-secondary, #161922) 0%,
        var(--rail-bg) 15%,
        var(--rail-bg) 85%,
        rgba(59, 130, 246, 0.08) 100%
    );
    border-left: 3px solid var(--sol-accent, #3b82f6);
    box-shadow: 
        -4px 0 20px rgba(59, 130, 246, 0.15),
        inset 0 0 40px rgba(59, 130, 246, 0.03);
    /* Stay in document flow - don't cover content */
    position: relative;
    flex-shrink: 0;
}

.note-rail:not(.expanded):hover {
    background: linear-gradient(
        180deg,
        var(--sol-bg-secondary, #161922) 0%,
        rgba(59, 130, 246, 0.08) 15%,
        rgba(59, 130, 246, 0.05) 85%,
        rgba(59, 130, 246, 0.15) 100%
    );
    box-shadow: 
        -4px 0 30px rgba(59, 130, 246, 0.3),
        inset 0 0 60px rgba(59, 130, 246, 0.06);
    border-left-color: var(--sol-accent-hover, #60a5fa);
}

/* CRITICAL: Make ALL children pass clicks through to the rail when collapsed
   FIX (2026-02-02): Use wildcard selector to catch everything, not just named classes
   WHY: Clicks on children with pointer-events:none fall through to parent (rail) */
.note-rail:not(.expanded) > * {
    pointer-events: none;
}

/* Ensure nested elements also don't capture clicks */
.note-rail:not(.expanded) * {
    pointer-events: none;
}

/* FIX (2026-03-11): Progressive width scale — Small → Medium → Large
   BUG: >1600px override was 900px (smaller than default 920px) — backwards
   FIX: 640px (<1200) → 800px (default) → 960px (>1600px) */
.note-rail.expanded {
    width: 800px;
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
    flex-shrink: 0;
}

/* Responsive widths — progressive widening */
@media (min-width: 1600px) {
    .note-rail.expanded {
        width: 960px;
    }
}

@media (max-width: 1200px) {
    .note-rail.expanded {
        width: 640px;
    }
}

/* --------------------------------------------------------------------------
   STATUS EDGE - Vertical gradient accent line
   -------------------------------------------------------------------------- */
.note-rail-edge {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity var(--rail-transition-duration) ease,
                background var(--rail-transition-duration) ease;
}

.note-rail.expanded .note-rail-edge {
    opacity: 0.9;
}

/* Status-based edge colors */
.note-rail[data-status="idle"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(100, 116, 139, 0.6),
        transparent
    );
}

.note-rail[data-status="generating"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(59, 130, 246, 0.9),
        rgba(59, 130, 246, 0)
    );
    animation: rail-edge-pulse 1.5s ease-in-out infinite;
}

.note-rail[data-status="ready"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(34, 197, 94, 0.9),
        rgba(34, 197, 94, 0)
    );
}

.note-rail[data-status="editing"] .note-rail-edge {
    background: linear-gradient(
        to bottom,
        rgba(245, 158, 11, 0.9),
        rgba(245, 158, 11, 0)
    );
}

@keyframes rail-edge-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   RAIL HEADER
   FIX (2026-03-11): Compact header — reduced from 44px to 36px
   BUG: Two stacked headers (rail-header + rail-note-header) consumed 88px
   FIX: Tighter padding + lower min-height to reduce chrome ratio
   -------------------------------------------------------------------------- */
.note-rail-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: var(--rail-bg-header);
    border-bottom: 1px solid var(--rail-border);
    min-height: 36px;
    gap: 6px;
}

/* Header content - expanded state */
.note-rail-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    opacity: 1;
    transition: opacity 150ms ease;
}

.note-rail:not(.expanded) .note-rail-header-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.note-rail-title {
    font-size: var(--rail-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sol-text-primary, #f8fafc);
    white-space: nowrap;
}

.note-rail-patient-label {
    font-size: var(--rail-text-xs);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--sol-text-tertiary, #64748b);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   COLLAPSED STATE - Full-height vertical workspace indicator
   FIX (2026-02-03): Complete redesign for clinical utility
   WHY: Collapsed rail must communicate useful info at a glance, not look empty
   -------------------------------------------------------------------------- */
.note-rail-collapsed-content {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex: 1;
    padding: 0;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.note-rail:not(.expanded) .note-rail-collapsed-content {
    display: flex;
}

/* Hide header completely in collapsed state */
.note-rail:not(.expanded) .note-rail-header {
    display: none;
}

/* Hide toggle button when collapsed - whole rail is clickable */
.note-rail:not(.expanded) .note-rail-toggle {
    display: none;
}

/* --------------------------------------------------------------------------
   COLLAPSED STATE METADATA - Redesigned vertical workspace indicator
   FIX (2026-02-03): Complete redesign for clinical utility and visual appeal
   -------------------------------------------------------------------------- */

/* Top zone: Note type badge - prominent and color-coded */
.rail-collapsed-type {
    width: 100%;
    padding: 14px 6px 12px;
    text-align: center;
    font-size: var(--rail-text-base);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    background: linear-gradient(
        180deg,
        var(--sol-accent, #3b82f6) 0%,
        rgba(59, 130, 246, 0.7) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Type badge color variants by note type */
.note-rail[data-note-type="progress"] .rail-collapsed-type {
    background: linear-gradient(180deg, #3b82f6 0%, rgba(59, 130, 246, 0.7) 100%);
}
.note-rail[data-note-type="handp"] .rail-collapsed-type {
    background: linear-gradient(180deg, #22c55e 0%, rgba(34, 197, 94, 0.7) 100%);
}
.note-rail[data-note-type="discharge"] .rail-collapsed-type {
    background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.7) 100%);
}
.note-rail[data-note-type="aandp"] .rail-collapsed-type {
    background: linear-gradient(180deg, #C44C4C 0%, rgba(196, 76, 76, 0.7) 100%);
}

/* Idle state - shows icon instead of text
   FIX (2026-02-04): Icon is cleaner than "NOTE" text in compact rail */
.rail-collapsed-type[data-idle="true"] {
    background: linear-gradient(
        180deg,
        var(--sol-text-tertiary, #64748b) 0%,
        rgba(100, 116, 139, 0.6) 100%
    );
    font-size: var(--rail-text-2xl);
    letter-spacing: 0;
}

/* FIX (2026-03-11): Hide patient name in collapsed rail — illegible at 64px
   BUG: 11px text in 64px-wide strip truncated to 2-3 chars — no value
   FIX: Hidden. Status dot color + type badge tell the full story at 64px.
   Patient name shows in the expanded header (railPatientLabel). */
.rail-collapsed-patient {
    display: none;
}

/* Status indicator - compact for 64px rail */
.rail-collapsed-status {
    width: 100%;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rail-collapsed-status .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rail-status-idle, #64748b);
    transition: background 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 0 8px rgba(100, 116, 139, 0.4);
}

/* Status dot states with glow effect */
.note-rail[data-status="idle"] .rail-collapsed-status .status-dot {
    background: var(--rail-status-idle, #64748b);
    box-shadow: 0 0 8px rgba(100, 116, 139, 0.4);
}
.note-rail[data-status="generating"] .rail-collapsed-status .status-dot {
    background: var(--rail-status-generating, #3b82f6);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
    animation: status-dot-pulse 1s ease-in-out infinite;
}
.note-rail[data-status="ready"] .rail-collapsed-status .status-dot {
    background: var(--rail-status-ready, #22c55e);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}
.note-rail[data-status="editing"] .rail-collapsed-status .status-dot {
    background: var(--rail-status-editing, #f59e0b);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

/* Status label below dot - REMOVED for cleaner compact state
   FIX (2026-02-04): Dot with glow is sufficient visual feedback
   WHY: Redundant text labels in 56px width felt cramped */

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* FIX (2026-03-11): Hide draft indicator and word count in collapsed rail
   BUG: Draft icon (18px SVG) + word count badge were barely visible at 64px
   FIX: Status dot glow already communicates "ready" state (green glow).
   Draft details only matter when expanded — removed from collapsed view. */
.rail-collapsed-draft {
    display: none !important;
}

.rail-collapsed-words {
    display: none !important;
}

/* Bottom zone: Expand hint - takes remaining space
   FIX (2026-02-04): Removed "OPEN" text - chevron is sufficient, whole rail is clickable */
.rail-collapsed-expand-hint {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 8px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(59, 130, 246, 0.06) 100%
    );
}

.rail-collapsed-expand-hint::before {
    content: '‹';
    font-size: var(--rail-text-heading);
    font-weight: bold;
    color: var(--sol-accent, #3b82f6);
    opacity: 0.75;
    animation: chevron-bounce 2s ease-in-out infinite;
}

/* Removed ::after "OPEN" label - redundant when entire rail is clickable */

@keyframes chevron-bounce {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(-3px); opacity: 1; }
}

/* Remove old chevron pseudo-element */
.note-rail-collapsed-content::after {
    display: none;
}

/* --------------------------------------------------------------------------
   STATUS PILL (expanded state)
   -------------------------------------------------------------------------- */
.note-rail-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--rail-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 150ms ease, color 150ms ease;
}

.note-rail-status-pill .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Status pill variants */
.note-rail[data-status="idle"] .note-rail-status-pill {
    background: transparent;
    color: var(--sol-text-tertiary);
}
.note-rail[data-status="idle"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-idle);
}

.note-rail[data-status="generating"] .note-rail-status-pill {
    background: rgba(59, 130, 246, 0.15);
    color: var(--rail-status-generating);
}
.note-rail[data-status="generating"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-generating);
    animation: status-dot-pulse 1s ease-in-out infinite;
}

.note-rail[data-status="ready"] .note-rail-status-pill {
    background: rgba(34, 197, 94, 0.15);
    color: var(--rail-status-ready);
}
.note-rail[data-status="ready"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-ready);
}

.note-rail[data-status="editing"] .note-rail-status-pill {
    background: rgba(245, 158, 11, 0.15);
    color: var(--rail-status-editing);
}
.note-rail[data-status="editing"] .note-rail-status-pill .status-dot {
    background: var(--rail-status-editing);
}

@keyframes status-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   HOVER-TO-EXPAND EFFECTS
   WHY: Visual feedback during hover delay before expansion
   NOTE: Different from sidebar - uses accent glow instead of width pulse
   -------------------------------------------------------------------------- */

/* Collapsed rail hover - anticipatory glow effect */
.note-rail:not(.expanded):hover {
    border-left-color: var(--sol-accent, #3b82f6);
    box-shadow:
        -4px 0 20px rgba(59, 130, 246, 0.25),
        0 0 30px rgba(59, 130, 246, 0.1);
}

/* More active chevron animation on hover - signals imminent expansion */
.note-rail:not(.expanded):hover .rail-collapsed-expand-hint::before {
    animation: chevron-eager-bounce 0.5s ease-in-out infinite;
    color: var(--sol-accent, #3b82f6);
    opacity: 1;
}

@keyframes chevron-eager-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

/* Hover-expanded state - subtle visual distinction */
.note-rail.hover-expanded {
    box-shadow:
        -4px 0 25px rgba(59, 130, 246, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   READY PULSE - Draft available indicator for collapsed state
   WHY: Draw attention when draft is ready but rail is collapsed
   NOTE: Unique green glow distinct from generating blue
   -------------------------------------------------------------------------- */

/* Persistent ready indicator - subtle breathing glow */
.note-rail.ready-pulse:not(.expanded) {
    animation: ready-glow-breathe 2.5s ease-in-out infinite;
}

@keyframes ready-glow-breathe {
    0%, 100% {
        border-left-color: var(--rail-status-ready, #22c55e);
        box-shadow:
            -4px 0 15px rgba(34, 197, 94, 0.3),
            0 0 20px rgba(34, 197, 94, 0.1);
    }
    50% {
        border-left-color: var(--rail-status-ready, #22c55e);
        box-shadow:
            -6px 0 25px rgba(34, 197, 94, 0.5),
            0 0 35px rgba(34, 197, 94, 0.2);
    }
}

/* Status dot pulses more actively when ready and collapsed */
.note-rail.ready-pulse:not(.expanded) .rail-collapsed-status .status-dot {
    animation: ready-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes ready-dot-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
    }
    50% {
        transform: scale(1.4);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.9);
    }
}

/* Draft-ready flash - momentary attention grab when generation completes */
.note-rail.draft-ready-pulse {
    animation: draft-ready-flash 0.6s ease-out;
}

@keyframes draft-ready-flash {
    0% {
        border-left-color: var(--rail-status-generating, #3b82f6);
        box-shadow: -4px 0 30px rgba(59, 130, 246, 0.5);
    }
    40% {
        border-left-color: var(--rail-status-ready, #22c55e);
        box-shadow:
            -6px 0 40px rgba(34, 197, 94, 0.7),
            0 0 50px rgba(34, 197, 94, 0.4);
    }
    100% {
        border-left-color: var(--rail-status-ready, #22c55e);
        box-shadow:
            -4px 0 20px rgba(34, 197, 94, 0.4),
            0 0 25px rgba(34, 197, 94, 0.15);
    }
}

/* --------------------------------------------------------------------------
   STATUS DOT (collapsed state)
   -------------------------------------------------------------------------- */
.note-rail-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 150ms ease;
}

.note-rail[data-status="idle"] .note-rail-status-dot {
    background: var(--rail-status-idle);
}

.note-rail[data-status="generating"] .note-rail-status-dot {
    background: var(--rail-status-generating);
    animation: status-dot-pulse 1s ease-in-out infinite;
}

.note-rail[data-status="ready"] .note-rail-status-dot {
    background: var(--rail-status-ready);
}

.note-rail[data-status="editing"] .note-rail-status-dot {
    background: var(--rail-status-editing);
}

/* --------------------------------------------------------------------------
   RAIL TOGGLE BUTTON
   -------------------------------------------------------------------------- */
.note-rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid var(--sol-accent, #3b82f6);
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--sol-accent, #3b82f6);
    font-size: var(--rail-text-lg);
    font-weight: bold;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    flex-shrink: 0;
}

.note-rail-toggle:hover {
    background: rgba(59, 130, 246, 0.3);
    color: var(--sol-text-primary, #f8fafc);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

/* Collapsed state - make toggle more prominent with pulse */
.note-rail:not(.expanded) .note-rail-toggle {
    animation: toggle-pulse 2s ease-in-out infinite;
}

@keyframes toggle-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.7);
    }
}

/* FIX (2026-09-06, owner): the expanded rail's collapse control was a 32px
   muted square that the terminal theme faded to a 1px hairline — "way too
   small and hidden". Expanded = a labeled 44px pill in the accent colour;
   the theme override below keeps it that way under [data-theme="terminal"]. */
.note-rail.expanded #noteRailToggle {
    /* id selector on purpose: roast-ladder-light.css restyles the toggle at
       (0,5,0) per theme; the expanded control must beat every skin.
       Solid fill + light ink (owner 2026-09-06: the translucent 44px version
       read "a smudge too large and not crisp"). */
    width: auto;
    min-width: 36px;
    height: 36px;
    padding: 0 12px 0 9px;
    gap: 6px;
    border: 1px solid var(--term-accent, var(--sol-accent, #3b82f6));
    border-radius: 6px;
    background: var(--term-accent, var(--sol-accent, #3b82f6));
    color: var(--sol-bg-elevated, #f8fafc);
    font: 600 12px/1 var(--term-font-mono, var(--rail-font-mono, ui-monospace, monospace));
    letter-spacing: .04em;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    box-shadow: none;
    animation: none;
}
.note-rail.expanded #noteRailToggle::after { content: 'close rail'; }
/* The terminal skin paints three decorative traffic-light dots at the header's
   right (`.note-rail-header::before`); the wider button now occupies that
   corner, and the dots showed through the label as coloured blotches. */
.note-rail.expanded[data-theme="terminal"] .note-rail-header::before { display: none; }
.note-rail.expanded #noteRailToggle:hover {
    background: var(--term-accent, var(--sol-accent, #3b82f6));
    color: var(--sol-bg-elevated, #f8fafc);
    filter: brightness(1.12);
    transform: none;
    box-shadow: none;
}
.note-rail.expanded #noteRailToggle .note-rail-toggle-icon { font-size: 16px; line-height: 1; }

/* ── Expanded-rail top band (owner walk 2026-09-07: "these issues are all real") ──
   Id-keyed on purpose: roast-ladder-light.css restyles these controls per skin
   at (0,5,0) and would otherwise win. */
/* 1. The ⌘ theme toggle floated unlabeled beside the patient name. */
.note-rail.expanded #noteRailThemeToggle {
    margin-left: auto; /* sits against CLOSE RAIL, not mid-row */
    width: auto;
    height: 28px;
    padding: 0 8px;
    gap: 5px;
    opacity: .7;
    font: 500 11px/1 var(--term-font-mono, ui-monospace, monospace);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.note-rail.expanded #noteRailThemeToggle::after { content: 'theme'; }
.note-rail.expanded #noteRailThemeToggle:hover { opacity: 1; }
/* 2. Back-to-types is the rare action; the type picker is the daily one. */
.note-rail #railInputBack {
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 8px;
    font-size: 12px;
    opacity: .75;
    box-shadow: none; /* cold-brew draws its heavy 'border' as a box-shadow */
}
.note-rail #railInputBack:hover { opacity: 1; box-shadow: none; border-color: var(--sol-border-default, rgba(255,255,255,.15)); }
/* ── Depth for the default (terminal) rail under cold-brew (owner 2026-09-07:
   the classic theme "has a smidge of depth and different colours per
   component" — the terminal rail was flat paper on paper). Body recessed one
   step, header/footer on their own band, cards lifted. (0,6,0) on purpose:
   roast-ladder-light.css sets these surfaces at (0,5,0). ── */
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .note-rail-body {
    background: #DBD1C2;
    box-shadow: var(--cb-well, inset 0 2px 6px rgba(48, 38, 30, .12));
}
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .note-rail-header,
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .note-rail-footer {
    background: var(--cb-paper-lo, #E9E1D5);
    border-bottom: 1px solid var(--cb-edge-soft, rgba(120, 93, 71, .2));
}
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .note-rail-footer {
    border-bottom: 0;
    border-top: 1px solid var(--cb-edge-soft, rgba(120, 93, 71, .2));
}
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .note-type-card,
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .rail-review-card,
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .sol-note-input-section {
    background: var(--cb-paper-hi, #F6F1E8);
    border: 1px solid var(--cb-edge-soft, rgba(120, 93, 71, .2));
    border-radius: 6px;
    box-shadow: var(--cb-sheen2, inset 0 1px 0 rgba(255, 253, 248, .6)),
                var(--cb-umbra-card, 0 1px 2px rgba(48, 38, 30, .14), 0 5px 14px -4px rgba(48, 38, 30, .16));
}
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .sol-note-input-section {
    padding: 12px 14px 14px;
}
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded .note-type-card:hover {
    background: #FBF7F0;
    box-shadow: var(--cb-sheen2, inset 0 1px 0 rgba(255, 253, 248, .6)),
                var(--cb-umbra-lift, 0 3px 7px rgba(48, 38, 30, .2), 0 14px 30px -12px rgba(48, 38, 30, .24));
}
/* Owner 2026-09-07: the update box a little lighter than its card (#EDE6D9 → #F7F2EA). */
:root[data-roast-theme="cold-brew"] .note-rail[data-theme="terminal"].expanded #clinicalUpdateInput {
    background: #F7F2EA;
}
/* Mouse focus never draws the ring here; keyboard focus (:focus-visible) still does. */
.note-rail #railInputBack:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.note-rail #noteTypePickerBtn {
    border: 1px solid var(--term-accent, var(--sol-accent, #3b82f6));
    font-weight: 600;
}
/* 3. IDLE read like a state the patient was in — dot only while idle; the
      word returns for generating / ready / editing / error. */
.note-rail.expanded[data-status="idle"] .note-rail-status-pill .status-label { display: none; }
.note-rail.expanded[data-status="idle"] .note-rail-status-pill { padding-right: 6px; }
/* 4. Dead bands above the text box: the mode chip described the software, the
      section gap stacked on label margins. */
#noteInputSection .sn-mode-chip { display: none; }
.rail-note-body #noteInputSection { gap: 6px; }
.rail-note-body #noteInputSection > .sol-input-label { margin-bottom: 2px; }
/* 5. The $ prompt prefix on field captions read as a typo next to the label. */
.note-rail[data-theme="terminal"] #noteInputSection label::before { content: none; }
/* 6. Service date: fit the control to its content. */
#noteInputSection .note-input-date-row { align-items: center; gap: 10px; }
#noteInputSection #noteServiceDate { width: auto; min-width: 150px; max-width: 190px; height: 36px; }


/* Toggle icon rotation */
.note-rail-toggle-icon {
    transition: transform 150ms ease;
}

.note-rail.expanded .note-rail-toggle-icon {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   RAIL BODY
   -------------------------------------------------------------------------- */
/* FIX (2026-03-11): Reduced top padding to match normalized rhythm
   FIX (2026-04-07): Added display:flex + flex-direction:column so child
   .rail-stage elements can use flex:1 to fill available height.
   BUG: .note-rail-body was a flex item (of .note-rail) but not a flex
   container — children couldn't participate in flex sizing. */
.note-rail-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding-top: 4px;
    min-height: 0; /* Allow flex shrinking */
}

/* Hide body completely when collapsed - collapsed content takes over */
.note-rail:not(.expanded) .note-rail-body {
    display: none;
}
/* Motion without the repaint (owner 2026-09-01: the bare snap was "very
   abrupt"). The rail BOX still snaps its flow space (one reflow), but the
   header + body slide in from the box's right edge on the compositor —
   the rail is overflow:hidden, so the transform is clipped to the rail and
   the chart never repaints per frame. Closing holds .expanded until the
   panel has slid out (JS: rail-anim-close), then the box snaps to 64px. */
@keyframes rail-slide-in {
    from { transform: translateX(100%); opacity: .6; }
    to   { transform: none; opacity: 1; }
}
@keyframes rail-slide-out {
    from { transform: none; opacity: 1; }
    to   { transform: translateX(100%); opacity: .6; }
}
.note-rail.expanded > .note-rail-header,
.note-rail.expanded > .note-rail-body {
    animation: rail-slide-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.note-rail.expanded.rail-anim-close > .note-rail-header,
.note-rail.expanded.rail-anim-close > .note-rail-body {
    animation: rail-slide-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

/* Collapsed state message - now part of the collapsed content layout */
.note-rail-collapsed-message {
    display: none;
}

/* Hide completely - we use the new collapsed content layout instead */
.note-rail:not(.expanded) .note-rail-collapsed-message {
    display: none;
}

.note-rail-collapsed-message p {
    display: none;
}

/* Expanded content container
   FIX (2026-04-07): Added display:flex + flex:1 + min-height:0 to propagate
   flex sizing from .rail-stage-content → .rail-note-container.
   BUG: height:100% doesn't resolve against flex-computed parent heights.
   ROOT CAUSE: Four intermediate containers used height:100% instead of flex:1,
   breaking the flex chain. Editor wrapper stopped at min-height instead of filling.
   FIX: Full flex chain: note-rail-body → rail-stage → rail-stage-content →
   note-rail-content → rail-note-container → rail-note-body → output section.
   Removed overflow-y:auto — inner .rail-note-body already scrolls. */
.note-rail-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    opacity: 1;
    transition: opacity 150ms ease;
}

.note-rail:not(.expanded) .note-rail-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* --------------------------------------------------------------------------
   RAIL FOOTER
   -------------------------------------------------------------------------- */
/* FIX (2026-03-11): Minimal footer — 20px, only shows meaningful content
   BUG: Footer consumed 24px for low-value info even when idle
   FIX: Reduced to 20px, content-justified via gap and inline-flex */
.note-rail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 12px;
    border-top: 1px solid var(--rail-border);
    font-size: var(--rail-text-xs);
    color: var(--sol-text-tertiary, #64748b);
    min-height: 20px;
}

/* Hide "Status: Idle" when idle — only show meaningful statuses */
.note-rail[data-status="idle"] .note-rail-status-text {
    display: none;
}

.note-rail:not(.expanded) .note-rail-footer,
.note-rail:not(.expanded) .note-rail-status-text {
    display: none !important;
}

.note-rail-shortcut {
    opacity: 0.7;
}

.note-rail-unsaved {
    color: var(--rail-status-editing);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   LAYOUT INTEGRATION - Clinical Grid + Rail Flex Container
   -------------------------------------------------------------------------- */
.sol-clinical-workspace {
    display: flex;
    height: 100%;
    min-height: 0;
    gap: 0;
    /* NOTE: No position:relative here - collapsed rail positions relative to .sol-patient-detail */
}

.sol-clinical-workspace .sol-clinical-grid-container {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    position: relative; /* Anchor for reasoning tree panel overlay (2026-02-26) */
}

/* CRITICAL: Ensure rail stretches full height in workspace flex container */
.sol-clinical-workspace .note-rail {
    align-self: stretch;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE BEHAVIOR
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* On tablet/small screens, rail becomes full-width when expanded */
    .note-rail.expanded {
        position: fixed;
        top: var(--sol-nav-height, 88px);
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 520px;
        z-index: 100;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    }

    /* Add overlay backdrop */
    .note-rail.expanded::before {
        content: '';
        position: fixed;
        top: var(--sol-nav-height, 88px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

@media (max-width: 768px) {
    :root {
        --rail-width-collapsed: 0px;
    }

    .note-rail:not(.expanded) {
        display: none;
    }

    .note-rail.expanded {
        width: 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* FIX (2026-02-04): Focus indicator for collapsed rail when keyboard focused
   WHY: Entire collapsed rail is clickable, needs visible focus ring for a11y */
.note-rail:not(.expanded):focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: -2px;
    box-shadow: 
        -4px 0 30px rgba(59, 130, 246, 0.4),
        inset 0 0 60px rgba(59, 130, 246, 0.08);
}

.note-rail-toggle:focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: 2px;
}

/* Screen reader only class */
.note-rail .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   PHASE 2: NOTE CONTENT INSIDE RAIL
   Styles for noteInputSection and noteOutputSection when rendered in rail
   ========================================================================== */

/* --------------------------------------------------------------------------
   RAIL NOTE CONTAINER
   -------------------------------------------------------------------------- */
/* FIX (2026-04-07): Added flex:1, removed height:100%.
   Fourth broken link in the flex chain. Same root cause: height:100%
   doesn't resolve against flex-computed parent heights. */
.rail-note-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   RAIL NOTE HEADER - Note type picker + action buttons
   FIX (2026-03-11): Compact sub-header — reduced from 44px to 32px
   BUG: Two stacked headers consumed 88px of chrome before content
   FIX: Tighter padding, smaller gap, lower profile
   -------------------------------------------------------------------------- */
.rail-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 12px;
    background: var(--rail-bg-header);
    border-bottom: 1px solid var(--rail-border);
    flex-shrink: 0;
    min-height: 32px;
}

.rail-note-header .sol-note-type-wrapper {
    flex: 1;
    min-width: 0;
}

.rail-note-header .rail-input-back-btn {
    padding: 6px 8px;
    font-size: var(--rail-text-base);
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 2px;
}

.rail-note-header .sol-note-type-btn {
    font-size: var(--rail-text-base);
    padding: 6px 10px;
    background: var(--sol-bg-elevated, #232736);
    border: 1px solid var(--sol-border-default, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    color: var(--sol-text-primary, #f8fafc);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 150ms ease, border-color 150ms ease;
}

.rail-note-header .sol-note-type-btn:hover {
    background: var(--sol-bg-hover, #2a2e3d);
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
}

.rail-note-header .sol-note-type-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    z-index: 100;
    max-width: 280px;
}

.rail-note-header .sol-note-panel-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* FIX (2026-03-09): Hide disabled action buttons during input stage
   BUG: Copy/Edit&Add/Save occupied 50% of header width while disabled and non-functional
   FIX (2026-08-04): key the hiding on :disabled, not on the stage.
   BUG: the one-shot H&P (and any non-progress note) completes while the rail
   stays in data-stage="input", so the stage-keyed rule hid Save/Copy for a
   finished note the doctor could not save. The buttons are enabled exactly
   when they become actionable (updateActionButtonsDisabled(true) at stream
   completion), so :disabled expresses the original intent without welding
   visibility to the stage machine. */
.note-rail[data-stage="input"] .rail-note-header .sol-action-btn:disabled {
    display: none;
}

/* Compact action buttons in rail */
.rail-note-header .sol-action-btn {
    padding: 6px 10px;
    font-size: var(--rail-text-md);
}

.rail-note-header .sol-action-btn span {
    display: none; /* Hide text, show only icons */
}

@media (min-width: 1400px) {
    .rail-note-header .sol-action-btn span {
        display: inline;
    }
}

/* --------------------------------------------------------------------------
   RAIL NOTE BODY - Input/Output sections
   -------------------------------------------------------------------------- */
/* FIX (2026-03-11): Normalized vertical rhythm — 8px intra-section, 12px body pad
   BUG: Mixed paddings: body 12px, header 8px/12px, sections 0px — no rhythm
   FIX: Consistent 8px internal gaps via gap property, 12px outer padding */
.rail-note-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px;
    /* FIX (2026-03-09): Flex column so input section + textarea can stretch to fill */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Override note input section styles for rail context */
.rail-note-body .sol-note-input-section {
    padding: 0;
    margin: 0;
    background: transparent;
    /* FIX (2026-03-09): Flex column so textarea can flex: 1 to fill available space */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.rail-note-body .sol-note-input-section .sol-input-label {
    font-size: var(--rail-text-md);
    margin-bottom: 4px;
}

/* FIX (2026-03-11): Tighter date row — normalized to 8px rhythm */
.rail-note-body .sol-note-input-section .note-input-date-row {
    margin-bottom: 8px;
}

/* FIX (2026-03-09): Textarea-first layout — textarea gets majority of rail space
   BUG: Textarea capped at 150px (18% of rail), chrome consumed 47% of vertical space
   ROOT CAUSE: max-height: 150px + action row bloat + always-visible help text
   FIX: Remove max-height cap, use flex: 1 to fill available space. The input section
   becomes a flex column so the textarea grows into reclaimed space from collapsed actions. */
.rail-note-body .sol-note-input-section .sol-note-textarea {
    min-height: 120px;
    flex: 1;
    font-size: var(--rail-text-lg);
    line-height: 1.65;
    padding: 12px;
    resize: vertical;
}

/* FIX (2026-02-26): Prompt chips permanently hidden.
   BUG: :focus-within triggered on ANY click inside the input section —
   textarea, buttons, preset dropdown, anywhere. Chips popped up constantly.
   Removing them entirely; the inline help strip provides the same guidance. */
.rail-note-body .prompt-chips {
    display: none !important;
}

/* FIX (2026-03-09): Compact action row — secondary tools behind overflow toggle
   BUG: 8 interactive elements in one row consumed 107px (72% of textarea height)
   FIX: Only show Generate Note + overflow toggle. Secondary tools in collapsible tray. */
.rail-note-body .sol-note-input-section .sol-note-input-actions {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 8px;
    flex-shrink: 0;
}

/* Overflow toggle button */
.rail-actions-overflow-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--dr-crater-deep, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--dr-mocha, #64748b);
    cursor: pointer;
    font-size: var(--rail-text-xl);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.rail-actions-overflow-toggle:hover {
    border-color: var(--dr-mocha, rgba(76, 196, 180, 0.3));
    color: var(--dr-teal, #4CC4B4);
}

.rail-actions-overflow-toggle[aria-expanded="true"] {
    border-color: var(--dr-mocha, rgba(76, 196, 180, 0.3));
    color: var(--dr-teal, #4CC4B4);
    background: rgba(76, 196, 180, 0.06);
}

/* Secondary actions tray — in-flow collapsible above the action row.
   WHY: Textarea has flex:1, so opening the tray naturally shrinks it.
   The textarea min-height (120px) prevents it from collapsing to nothing. */
.rail-secondary-actions {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: var(--dr-obsidian, rgba(15, 23, 42, 0.95));
    border: 1px solid var(--dr-crater-deep, rgba(255,255,255,0.1));
    border-radius: 8px;
    flex-shrink: 0;
}

.rail-secondary-actions.open {
    display: flex;
}

/* Audio upload sub-controls — hidden until Upload Audio is clicked
   FIX (2026-03-10): Bumped specificity to beat terminal theme rule
   BUG: .note-rail[data-theme="terminal"] label { display: block } (0-2-1)
        was overriding .audio-upload-group .audio-diarize-toggle (0-2-0)
   FIX: Added .note-rail ancestor to both rules (now 0-3-0) */
.note-rail .audio-upload-group .audio-preset-select,
.note-rail .audio-upload-group .audio-diarize-toggle {
    display: none;
}

.note-rail .audio-upload-group.audio-active .audio-preset-select,
.note-rail .audio-upload-group.audio-active .audio-diarize-toggle {
    display: flex;
}

.rail-note-body .sol-note-input-section .sol-action-btn {
    padding: 8px 12px;
    font-size: var(--rail-text-md);
}

/* Character counter */
.rail-note-body .clinical-update-counter {
    font-size: var(--rail-text-base);
    margin-top: 4px;
}

/* FIX (2026-03-09): Compact AI data summary in rail — single line instead of stacked
   BUG: "AI already has" banner consumed 79px (label on own row + chip wrap)
   FIX: Inline label with chips, no wrap, overflow hidden. Reclaims ~45px. */
.rail-note-body .ai-data-summary {
    padding: 6px 10px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.rail-note-body .ai-data-summary-label {
    width: auto;
    margin-bottom: 0;
    font-size: var(--rail-text-xs);
    flex-shrink: 0;
}

.rail-note-body .ai-data-chip {
    padding: 2px 6px;
    font-size: var(--rail-text-xs);
}

/* Template indicator */
.rail-note-body .template-indicator {
    font-size: var(--rail-text-sm);
    padding: 4px 8px;
    margin-bottom: 8px;
}

/* Override note output section styles for rail context
   FIX (2026-03-11): Complete flex chain so editor fills rail after generation
   BUG: Output section had flex:1 (from sol-layout) but children didn't propagate it,
        so the editor only rendered at its 300px min-height — "tiny display area"
   FIX: Add flex:1 + min-height:0 through the full chain: output → wrapper → editor */
/* FIX (2026-04-06): Added overflow: visible to override note-editor-v2.css overflow: hidden.
   Without this, the output section clips children instead of letting them fill via flex. */
/* FIX (2026-04-07): Mirror for .rail-review-fullnote — JS moves #noteOutputSection there in
   REVIEW "Full Note" toggle; outside .rail-note-body, notes.css viewport height wins. */
.rail-note-body .sol-note-output-section,
.note-rail .rail-review-fullnote .sol-note-output-section {
    padding: 0;
    margin: 0;
    background: transparent;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

/* Progress bar in rail.
   WHY: The stepper, meter, status, cancel, stall, and hint are siblings. Keeping
   the legacy one-line flex layout crushes the trailing hint at rail widths. */
.rail-note-body .sol-note-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    margin-bottom: 12px;
}

.rail-note-body .sol-gen-stepper,
.rail-note-body .sol-progress-bar,
.rail-note-body .sol-gen-stall,
.rail-note-body .sol-streaming-hint {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.rail-note-body .sol-gen-stepper,
.rail-note-body .sol-progress-bar,
.rail-note-body .sol-streaming-hint {
    margin-bottom: 0;
}

.rail-note-body .sol-progress-details {
    grid-column: 1;
    min-width: 0;
    font-size: var(--rail-text-sm);
}

.rail-note-body .cancel-generation-btn {
    grid-column: 2;
    margin-top: 0;
}

/* Cancel generation button */
.cancel-generation-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: var(--rail-text-base);
    font-weight: 500;
    color: var(--sol-text-secondary, #94a3b8);
    background: transparent;
    border: 1px solid var(--sol-border, #334155);
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms ease;
}

.cancel-generation-btn:hover {
    color: var(--sol-error, #C44C4C);
    border-color: var(--sol-error, #C44C4C);
    background: rgba(196, 76, 76, 0.08);
}

.cancel-generation-btn.hidden {
    display: none;
}

/* Note display wrapper in rail
   FIX (2026-03-11): Propagate flex:1 so editor fills available space
   FIX (2026-04-06): Override height + overflow from notes.css
   BUG: notes.css sets height: calc(100vh - 200px) + overflow-y: auto — designed for
        the standalone 2-column note view, not the rail. In the rail, this creates a
        fixed-height scroll box that's shorter than available space, leaving blank area
        below. The doctor sees the note in the top half and empty space in the bottom.
   ROOT CAUSE: Rail override had flex:1 but never unset the explicit height/overflow.
   FIX: height: auto lets flex:1 control sizing. overflow: visible delegates scrolling
        to .sol-note-editor-wrapper (which already has overflow-y: auto). */
.rail-note-body .note-display-wrapper,
.note-rail .rail-review-fullnote .note-display-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: visible;
}

/* Editor wrapper in rail
   FIX (2026-03-11): flex:1 so editor fills rail instead of sitting at min-height
   BUG: Editor rendered at 300px min-height after generation — "tiny display area"
   ROOT CAUSE: Flex chain broken — parent had flex:1 but editor wrapper didn't
   FIX: Add flex:1. min-height:300px still prevents collapse, resize:vertical still works */
.rail-note-body .sol-note-editor-wrapper,
.note-rail .rail-review-fullnote .sol-note-editor-wrapper {
    min-height: 300px;
    max-height: none;  /* Allow vertical expansion */
    overflow-y: auto;
    resize: vertical;  /* User can drag to resize */
    position: relative;  /* For expand button positioning */
    flex: 1;
}

/* Expand-to-fit button */
.editor-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}

.sol-note-editor-wrapper:hover .editor-expand-btn,
.editor-expand-btn:focus {
    opacity: 1;
}

.editor-expand-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.editor-expand-btn:active {
    transform: scale(0.95);
}

.editor-expand-btn i {
    font-size: var(--rail-text-lg);
}

/* Toolbar in rail */
.rail-note-body .pm-toolbar {
    padding: 6px 8px;
    gap: 4px;
    flex-wrap: wrap;
}

.rail-note-body .pm-toolbar-button {
    width: 28px;
    height: 28px;
    font-size: var(--rail-text-base);
}

/* Note content in rail */
.rail-note-body #prosemirrorEditor,
.rail-note-body #noteContent,
.note-rail .rail-review-fullnote #prosemirrorEditor,
.note-rail .rail-review-fullnote #noteContent {
    font-size: var(--rail-text-md);
    line-height: 1.5;
    padding: 12px;
}

/* --------------------------------------------------------------------------
   COMPACT TYPOGRAPHY FOR RAIL TIPTAP EDITOR
   WHY: Space-efficient display for clinical notes in split-pane view
   TRADEOFF: Denser text vs. more visible content without scrolling
   -------------------------------------------------------------------------- */
.rail-note-body .ProseMirror,
.note-rail .rail-review-fullnote .ProseMirror {
    font-size: var(--rail-text-md);
    line-height: 1.6;
    padding: 1rem 1.25rem;
    min-height: 250px;  /* Generous visible area for editing */
}

.rail-note-body .ProseMirror h2 {
    font-size: 1rem;
    margin-top: 0.75em;
    margin-bottom: 0.2em;
}

.rail-note-body .ProseMirror h3 {
    font-size: 0.875rem;
    margin-top: 0.5em;
    margin-bottom: 0.1em;
}

.rail-note-body .ProseMirror p {
    margin: 0.3em 0;
}

.rail-note-body .ProseMirror li {
    margin: 0.1em 0;
}

/* Hide toolbar in rail - bubble menu is sufficient */
.rail-note-body .tiptap-toolbar,
.rail-note-body .pm-toolbar {
    display: none;
}

/* RAG panel in rail - needs to stack, not side-by-side */
.rail-note-body .rag-knowledge-panel,
.note-rail .rail-review-fullnote .rag-knowledge-panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 12px;
    border-radius: 8px;
}

.rail-note-body .rag-knowledge-header,
.note-rail .rail-review-fullnote .rag-knowledge-header {
    padding: 8px 12px;
}

.rail-note-body .rag-knowledge-content,
.note-rail .rail-review-fullnote .rag-knowledge-content {
    max-height: 200px;
}

/* Reasoning tree — MOVED to dashboard (2026-02-26)
   Panel is now inside .sol-clinical-grid-container, uses position:sticky to stay
   at the top of the dashboard scroll area. No longer overlays the rail. */

/* D3 SVG constraints — now in reasoning-tree.css since panel moved to dashboard (2026-02-26) */

/* --------------------------------------------------------------------------
   SNAPSHOT & PRIOR NOTES SELECTORS IN RAIL
   -------------------------------------------------------------------------- */
.rail-note-body .snapshot-selector-group {
    flex-wrap: wrap;
}

.rail-note-body .selected-snapshot-label {
    font-size: var(--rail-text-xs);
    max-width: 100px;
}

/* --------------------------------------------------------------------------
   TIPS PANEL IN RAIL
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   SCROLLBAR STYLING FOR RAIL
   -------------------------------------------------------------------------- */
.rail-note-body::-webkit-scrollbar {
    width: 6px;
}

.rail-note-body::-webkit-scrollbar-track {
    background: transparent;
}

.rail-note-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.rail-note-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   PHASE 3: DRAFT VERSIONING
   Per-patient draft history with version chips
   ========================================================================== */

/* --------------------------------------------------------------------------
   DRAFT VERSIONS ROW - Container for version chips
   -------------------------------------------------------------------------- */
.draft-versions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--rail-bg-header);
    border-bottom: 1px solid var(--rail-border);
    flex-wrap: wrap;
    min-height: 32px;
}

.draft-versions-row.hidden {
    display: none;
}

.draft-versions-label {
    font-size: var(--rail-text-xs);
    color: var(--sol-text-tertiary, #64748b);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   DRAFT VERSION CHIPS - Individual version buttons
   -------------------------------------------------------------------------- */
.draft-versions-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.draft-version-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: var(--rail-text-xs);
    font-family: inherit;
    color: var(--sol-text-secondary, #94a3b8);
    background: transparent;
    border: 1px solid var(--sol-border-default, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
    white-space: nowrap;
}

.draft-version-chip:hover:not(:disabled) {
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.05));
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
    color: var(--sol-text-primary, #f8fafc);
}

.draft-version-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Active version chip */
.draft-version-chip.active {
    background: var(--sol-bg-elevated, #232736);
    border-color: var(--sol-accent, #3b82f6);
    color: var(--sol-text-primary, #f8fafc);
}

.draft-version-chip.active::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sol-accent, #3b82f6);
}

/* Version chip template type indicator */
.draft-version-chip .chip-template {
    font-size: var(--rail-text-2xs);
    opacity: 0.7;
}

/* Version chip timestamp on hover */
.draft-version-chip[title] {
    position: relative;
}

/* --------------------------------------------------------------------------
   DRAFT VERSION CHIP COLOR VARIANTS BY TEMPLATE
   -------------------------------------------------------------------------- */
.draft-version-chip[data-template="progress"] {
    --chip-accent: var(--sol-info, #3b82f6);
}

.draft-version-chip[data-template="handp"] {
    --chip-accent: var(--sol-stable, #22c55e);
}

.draft-version-chip[data-template="discharge"] {
    --chip-accent: var(--sol-warning, #f59e0b);
}

.draft-version-chip[data-template="aandp"] {
    --chip-accent: var(--sol-critical, #C44C4C);
}

.draft-version-chip.active[data-template] {
    border-color: var(--chip-accent);
}

.draft-version-chip.active[data-template]::before {
    background: var(--chip-accent);
}

/* --------------------------------------------------------------------------
   RESPONSIVE DRAFT CHIPS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .draft-versions-row {
        padding: 4px 8px;
    }

    .draft-version-chip {
        padding: 2px 6px;
        font-size: var(--rail-text-2xs);
    }
}

/* --------------------------------------------------------------------------
   EMPTY STATE FOR NO DRAFTS (hidden by default)
   -------------------------------------------------------------------------- */
.draft-versions-empty {
    font-size: var(--rail-text-xs);
    color: var(--sol-text-tertiary, #64748b);
    font-style: italic;
}

/* ==========================================================================
   PHASE 4: RELIABILITY UX
   ETA countdown during generation and offline handling
   ========================================================================== */

/* --------------------------------------------------------------------------
   ETA COUNTDOWN - Shows estimated time remaining during generation
   -------------------------------------------------------------------------- */
.note-rail-eta {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: var(--rail-text-xs);
    color: var(--sol-text-secondary, #94a3b8);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 200ms ease;
}

.note-rail-eta.visible {
    display: inline-flex;
    opacity: 1;
}

/* ETA shown only during generating status */
.note-rail[data-status="generating"] .note-rail-eta.visible {
    display: inline-flex;
}

/* ETA text styling */
.note-rail-eta-text {
    background: rgba(59, 130, 246, 0.15);
    color: var(--sol-accent, #3b82f6);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    animation: eta-pulse 2s ease-in-out infinite;
}

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

/* "finishing..." state */
.note-rail-eta-text.finishing {
    background: rgba(251, 191, 36, 0.15);
    color: var(--sol-warning, #fbbf24);
    animation: none;
}

/* --------------------------------------------------------------------------
   OFFLINE BANNER - Shown when network connection is lost
   R10a (2026-07-13): DEMOTED from a full-width red alert to a small muted
   footnote. The diagnostic indicator must read as a footnote, not an alarm,
   while the note itself is visibly working. Colors from dark-roast tokens
   (--dr-mocha = muted footnote), with legacy sol- fallbacks.
   -------------------------------------------------------------------------- */
.note-rail-offline-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 12px;
    background: transparent;
    border-bottom: 1px dotted var(--dr-mocha, #8B7355);
    color: var(--dr-mocha, #8B7355);
    font-size: var(--rail-text-xs, 11px);
    opacity: 0.85;
}

.note-rail-offline-banner.visible {
    display: flex;
}

.note-rail-offline-banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Offline status dot — small, static, muted (no alarm blink) */
.note-rail-offline-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dr-mocha, #8B7355);
    flex-shrink: 0;
    animation: none;
}

@keyframes offline-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.note-rail-offline-message {
    color: var(--dr-mocha, #8B7355);
}

/* Retry button — quiet text affordance, not a filled CTA */
.note-rail-offline-retry {
    padding: 2px 8px;
    font-size: var(--rail-text-xs);
    font-weight: 500;
    font-family: inherit;
    color: var(--dr-mocha, #8B7355);
    background: transparent;
    border: 1px solid var(--dr-mocha, #8B7355);
    border-radius: 4px;
    cursor: pointer;
    transition:
        background 150ms ease,
        transform 100ms ease;
    white-space: nowrap;
}

.note-rail-offline-retry:hover {
    color: var(--dr-teal, #4CC4B4);
    border-color: var(--dr-teal, #4CC4B4);
    background: transparent;
}

.note-rail-offline-retry:active {
    transform: scale(0.96);
}

.note-rail-offline-retry:focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   STALL DETECTION - Visual indicator when generation takes too long
   (Complements existing ERR-005 in streaming)
   -------------------------------------------------------------------------- */
.note-rail-stall-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.1);
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
    font-size: var(--rail-text-sm);
    color: var(--sol-warning, #fbbf24);
}

.note-rail-stall-indicator.visible {
    display: flex;
}

.note-rail-stall-icon {
    font-size: var(--rail-text-lg);
}

/* --------------------------------------------------------------------------
   RESPONSIVE PHASE 4 ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .note-rail-offline-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 6px 10px;
    }

    .note-rail-offline-retry {
        align-self: flex-end;
    }

    .note-rail-eta-text {
        font-size: var(--rail-text-2xs);
        padding: 2px 5px;
    }
}

/* ==========================================================================
   PHASE 5: POLISH
   Final UX refinements - unsaved indicator, animations, a11y, responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   UNSAVED INDICATOR - Shows when note has unsaved changes
   -------------------------------------------------------------------------- */
.note-rail-unsaved {
    display: none;
    align-items: center;
    gap: 4px;
    color: var(--rail-status-editing, #f59e0b);
    font-weight: 500;
    font-size: var(--rail-text-xs);
    animation: unsaved-fade-in 200ms ease;
}

.note-rail-unsaved:not([hidden]) {
    display: inline-flex;
}

.note-rail-unsaved .unsaved-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rail-status-editing, #f59e0b);
    animation: unsaved-pulse 2s ease-in-out infinite;
}

@keyframes unsaved-fade-in {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes unsaved-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* --------------------------------------------------------------------------
   ENHANCED STATUS PILL TRANSITIONS
   -------------------------------------------------------------------------- */
.note-rail-status-pill {
    transition:
        background 250ms ease,
        color 250ms ease,
        transform 150ms ease;
}

.note-rail-status-pill .status-dot {
    transition:
        background 250ms ease,
        transform 150ms ease;
}

.note-rail-status-pill .status-label {
    transition: opacity 150ms ease;
}

/* Subtle scale on status change */
.note-rail[data-status="generating"] .note-rail-status-pill,
.note-rail[data-status="ready"] .note-rail-status-pill {
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   RAIL STAGE INDICATOR — Doctor-readable progress label (2026-02-11)
   WHY: Shows clinical stage (e.g., "Checking guidelines...") in rail header
   -------------------------------------------------------------------------- */
#railStageLabel {
    font-family: var(--rail-font-mono);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    padding: 0 8px;
    transition: opacity 200ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0;
}

/* --------------------------------------------------------------------------
   DIFF REVIEW — Evidence summary + summary banner (base styles)
   FIX (2026-02-11): These must exist in base theme, not only terminal theme
   WHY: Without base styles, evidence row is unstyled (invisible text) in non-terminal theme
   -------------------------------------------------------------------------- */
.drt-summary-banner {
    font-family: var(--rail-font-mono);
    font-size: 0.72rem;
    color: rgba(102, 217, 239, 0.85);
    background: rgba(102, 217, 239, 0.06);
    border: 1px solid rgba(102, 217, 239, 0.15);
    border-radius: 4px;
    padding: 6px 10px;
    margin: 4px 8px 6px;
    flex-shrink: 0;
}

.drt-summary-label {
    margin-bottom: 2px;
}

.drt-problem-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0;
}

.drt-problem-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}
.drt-problem-chip:hover {
    background: rgba(102, 217, 239, 0.12);
    border-color: rgba(102, 217, 239, 0.35);
    color: rgba(102, 217, 239, 0.9);
}
.drt-problem-chip.active {
    background: rgba(102, 217, 239, 0.15);
    border-color: rgba(102, 217, 239, 0.5);
    color: #66D9EF;
    font-weight: 600;
}
/* UX (2026-02-11): Color-coded chip statuses */
.drt-problem-chip.accepted {
    border-color: #22C55E;
    color: #22C55E;
    opacity: 0.7;
}
.drt-problem-chip.rejected {
    border-color: #EF4444;
    color: #EF4444;
    text-decoration: line-through;
    opacity: 0.6;
}

.drt-evidence-count {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

/* UX (2026-02-11): Evidence chips */
.drt-evidence-summary {
    width: 100%;
    padding: 1px 8px 2px;
    font-family: var(--rail-font-mono);
    font-size: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.drt-evidence-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}
.drt-evidence-chip {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.58rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drt-evidence-chip.drt-conf-high { color: #22C55E; border-color: rgba(34,197,94,0.25); }
.drt-evidence-chip.drt-conf-moderate { color: #F59E0B; border-color: rgba(245,158,11,0.25); }
.drt-evidence-chip.drt-conf-low { color: #EF4444; border-color: rgba(196, 76, 76,0.25); }

/* UX (2026-02-11): Diff preview */
.drt-diff-preview {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-family: var(--rail-font-mono);
    font-size: 0.58rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.drt-preview-old { color: #EF4444; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.drt-preview-arrow { color: rgba(255,255,255,0.3); flex-shrink: 0; }
.drt-preview-new { color: #22C55E; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }

/* UX (2026-02-11): Quick-action chips */
.drt-quick-actions { display: flex; gap: 4px; margin-bottom: 4px; }
.drt-quick-action {
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(212,168,87,0.30);
    background: transparent;
    color: #D4A857;
    font-family: var(--rail-font-mono);
    font-size: 0.58rem;
    cursor: pointer;
    white-space: nowrap;
}
.drt-quick-action:hover { background: rgba(212,168,87,0.10); }

/* UX (2026-02-11): Accept/Reject flash */
@keyframes drt-flash-green {
    0%   { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.5); }
    50%  { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.3), 0 0 8px rgba(34,197,94,0.15); }
    100% { box-shadow: none; }
}
@keyframes drt-flash-red {
    0%   { box-shadow: inset 0 0 0 1px rgba(196, 76, 76,0.5); }
    50%  { box-shadow: inset 0 0 0 1px rgba(196, 76, 76,0.3), 0 0 8px rgba(196, 76, 76,0.15); }
    100% { box-shadow: none; }
}
.diff-review-toolbar.drt-flash-accept { animation: drt-flash-green 0.25s ease-out; }
.diff-review-toolbar.drt-flash-reject { animation: drt-flash-red 0.25s ease-out; }

/* --------------------------------------------------------------------------
   DIFF REVIEW — Layout fixes (base theme)
   FIX (2026-02-11): Flex column layout with sticky footer + hidden editor chrome
   FIX (2026-02-11): Added .diff-review-active fallback for Firefox ESR (no :has() support)
   JS toggles .diff-review-active on .rail-note-body in diff-review-toolbar.js show/hide
   -------------------------------------------------------------------------- */
.rail-note-body:has(.diff-review-toolbar),
.rail-note-body.diff-review-active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rail-note-body:has(.diff-review-toolbar) .sol-note-output-section,
.rail-note-body.diff-review-active .sol-note-output-section {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.rail-note-body:has(.diff-review-toolbar) .diff-review-footer,
.rail-note-body.diff-review-active .diff-review-footer {
    flex-shrink: 0;
}
.rail-note-body:has(.diff-review-toolbar) .editor-expand-btn,
.rail-note-body:has(.diff-review-toolbar) .pm-toolbar,
.rail-note-body:has(.diff-review-toolbar) .rag-knowledge-panel,
.rail-note-body:has(.diff-review-toolbar) .edit-selection-btn,
.rail-note-body:has(.diff-review-toolbar) #editBtn,
.rail-note-body.diff-review-active .editor-expand-btn,
.rail-note-body.diff-review-active .pm-toolbar,
.rail-note-body.diff-review-active .rag-knowledge-panel,
.rail-note-body.diff-review-active .edit-selection-btn,
.rail-note-body.diff-review-active #editBtn,
/* 2026-08-22: the diff review now mounts inside the REVIEW stage's Full Note view */
#railReviewFullNote.diff-review-active .editor-expand-btn,
#railReviewFullNote.diff-review-active .pm-toolbar,
#railReviewFullNote.diff-review-active .rag-knowledge-panel,
#railReviewFullNote.diff-review-active .edit-selection-btn,
#railReviewFullNote.diff-review-active #editBtn {
    display: none !important;
}

/* --------------------------------------------------------------------------
   COLLAPSED STATE STATUS MESSAGES - Now shown via status indicator
   FIX (2026-02-03): Removed old message approach, status shown in new layout
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   KEYBOARD FOCUS MANAGEMENT
   -------------------------------------------------------------------------- */
.note-rail:focus-within {
    /* Subtle outline when rail has focus */
}

.note-rail .note-rail-content:focus {
    outline: none;
}

/* Focus trap indicator */
.note-rail.expanded .note-rail-body:focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   SCREEN READER ONLY - A11y announcements
   -------------------------------------------------------------------------- */
#railA11yAnnouncer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   ENHANCED MOBILE RESPONSIVE (Phase 5)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Full-width rail on mobile */
    .note-rail.expanded {
        max-width: 100%;
        left: 0;
        border-radius: 0;
    }

    /* Larger touch targets */
    .note-rail-toggle {
        width: 48px;
        height: 48px;
    }

    /* Simplified footer on mobile */
    .note-rail-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .note-rail-shortcut {
        display: none; /* Hide keyboard shortcut hint on mobile */
    }

    /* Larger status pill for touch */
    .note-rail-status-pill {
        padding: 4px 10px;
        font-size: var(--rail-text-sm);
    }

    /* Stack header content on very small screens */
    .note-rail-header-content {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION - Respect user preferences
   -------------------------------------------------------------------------- */
/* WHY: note-rail.css has 19 @keyframes (pulses, glows, spins, bounces) but the original
   block only covered 6 elements. Broad rule catches all rail animations + transitions.
   note-rail-terminal.css has its own * rule scoped to [data-theme="terminal"]; this
   covers the base rail regardless of theme. */
@media (prefers-reduced-motion: reduce) {
    .note-rail,
    .note-rail *,
    .note-rail-status-pill,
    .note-rail-status-pill .status-dot,
    .note-rail-unsaved,
    .note-rail-unsaved .unsaved-dot,
    .note-rail-eta-text,
    .note-rail-offline-dot,
    .diff-review-toolbar {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   SECTION: RAIL STAGES
   Stage-based content visibility for multi-step workflows

   ARCHITECTURE: Stages control which content panel is visible within the rail
   WHY: Two-phase progress note flow needs detection → approval → generation stages
   TRADEOFF: Additional CSS complexity vs simpler show/hide, but better UX (no context switch)
   ========================================================================== */

/* Stage container - hidden by default
   FIX (2026-04-07): Replaced height:100% with flex:1 + min-height:0.
   height:100% doesn't resolve against flex-computed parent heights —
   this was the second broken link in the flex chain causing the editor
   to render at min-height instead of filling the rail. */
.rail-stage {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    opacity: 0;
    transition: opacity 200ms ease;
}

/* Active stage visibility based on parent data-stage attribute */
.note-rail[data-stage="picker"] .rail-stage[data-stage="picker"],
.note-rail[data-stage="input"] .rail-stage[data-stage="input"],
.note-rail[data-stage="detecting"] .rail-stage[data-stage="detecting"],
.note-rail[data-stage="approval"] .rail-stage[data-stage="approval"],
.note-rail[data-stage="generating"] .rail-stage[data-stage="generating"],
.note-rail[data-stage="review"] .rail-stage[data-stage="review"],
.note-rail[data-stage="evolution"] .rail-stage[data-stage="evolution"],
.note-rail[data-stage="ready"] .rail-stage[data-stage="ready"],
.note-rail[data-stage="error"] .rail-stage[data-stage="error"] {
    display: flex;
    opacity: 1;
}

/* Stage header */
.rail-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    flex-shrink: 0;
}

.rail-stage-title {
    font-size: var(--rail-text-lg);
    font-weight: 600;
    color: var(--sol-text-primary, #e8e8e8);
}

/* Stage body - scrollable content area */
.rail-stage-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Stage footer
   FIX (2026-02-17): Added position:relative + z-index to establish stacking
   context above floating overlays (voice bar children, toasts) that could
   intercept clicks on footer buttons like "Generate Note →" */
.rail-stage-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    flex-shrink: 0;
}

/* Stage content wrapper (for INPUT stage)
   FIX (2026-04-07): Replaced height:100% with flex:1 + min-height:0.
   Third broken link in the flex chain. */
.rail-stage-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   DETECTING STAGE — Shared stream status (used by detecting + generating)
   -------------------------------------------------------------------------- */

.rail-stream-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rail-text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sol-text-tertiary, #666);
}

.rail-stream-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sol-status-generating, #3b82f6);
    animation: railPulse 1s ease infinite;
}

@keyframes railPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   DETECTING STAGE — Enhanced Pipeline + Live Feed
   -------------------------------------------------------------------------- */

/* Timer in header */
.rail-detect-timer {
    font-family: var(--rail-font-mono);
    font-size: var(--rail-text-base);
    color: var(--sol-text-tertiary, #666);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* Detect body layout */
.detect-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

/* ── Pipeline Stepper ── */
.detect-pipeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 0;
}

.detect-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    opacity: 0.4;
    transition: opacity 300ms ease, background 300ms ease;
}

.detect-step.active {
    opacity: 1;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 6px;
}

.detect-step.complete {
    opacity: 0.7;
}

.detect-step-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Spinner for active step */
.detect-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-top-color: var(--sol-accent, #3b82f6);
    border-radius: 50%;
    animation: detectSpin 0.8s linear infinite;
}

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

/* Check mark for completed step */
.detect-step.complete .detect-step-icon::after {
    content: "\2713";
    color: var(--sol-stable, #22c55e);
    font-size: var(--rail-text-lg);
    font-weight: 700;
}

/* Waiting circle for pending step */
.detect-step:not(.active):not(.complete) .detect-step-icon::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--sol-text-tertiary, #555);
}

.detect-step-label {
    font-size: var(--rail-text-md);
    font-weight: 500;
    color: var(--sol-text-primary, #e0e0e0);
    flex: 1;
}

.detect-step-time {
    font-family: var(--rail-font-mono);
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #666);
    font-variant-numeric: tabular-nums;
}

/* ── Section Headers ── */
.detect-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    font-size: var(--rail-text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sol-text-tertiary, #666);
}

.detect-problem-count,
.detect-merge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--sol-accent, #3b82f6);
    color: white;
    font-size: var(--rail-text-sm);
    font-weight: 700;
    transition: transform 150ms ease;
}

.detect-problem-count.bump {
    transform: scale(1.2);
}

/* ── Live Problem Feed ── */
.detect-problems-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.detect-problem-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sol-surface-elevated, rgba(255,255,255,0.04));
    border-radius: 8px;
    border-left: 3px solid transparent;
    animation: detectCardSlideIn 300ms ease;
}

@keyframes detectCardSlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Trend-based left border colors */
.detect-problem-card[data-trend="worsening"] {
    border-left-color: var(--sol-critical, #C44C4C);
}
.detect-problem-card[data-trend="stable"] {
    border-left-color: var(--sol-warning, #f59e0b);
}
.detect-problem-card[data-trend="improving"] {
    border-left-color: var(--sol-stable, #22c55e);
}

.detect-problem-trend {
    font-size: var(--rail-text-xl);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

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

.detect-problem-title {
    font-size: var(--rail-text-md);
    font-weight: 600;
    color: var(--sol-text-primary, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detect-problem-evidence {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #888);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detect-problem-badge {
    font-size: var(--rail-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.detect-problem-badge[data-trend="worsening"] {
    background: rgba(196, 76, 76, 0.15);
    color: #C44C4C;
}
.detect-problem-badge[data-trend="stable"] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
.detect-problem-badge[data-trend="improving"] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* ── Merge Analysis Section ── */
.detect-merges-section {
    padding-top: 4px;
}

.detect-merges-status {
    font-size: var(--rail-text-base);
    color: var(--sol-text-tertiary, #888);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detect-merges-status::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-top-color: var(--sol-accent, #3b82f6);
    border-radius: 50%;
    animation: detectSpin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── Footer ── */
.detect-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detect-cancel-btn {
    font-size: var(--rail-text-base);
    padding: 4px 12px;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.15));
    border-radius: 6px;
    background: transparent;
    color: var(--sol-text-secondary, #a0a0a0);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.detect-cancel-btn:hover {
    background: rgba(196, 76, 76, 0.1);
    color: var(--sol-critical, #C44C4C);
    border-color: rgba(196, 76, 76, 0.3);
}

/* --------------------------------------------------------------------------
   APPROVAL STAGE
   -------------------------------------------------------------------------- */

.rail-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--sol-text-secondary, #a0a0a0);
    font-size: var(--rail-text-md);
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-back-btn:hover {
    border-color: var(--sol-text-secondary);
    color: var(--sol-text-primary);
}

.rail-step-indicator {
    font-size: var(--rail-text-base);
    color: var(--sol-text-tertiary, #666);
}

.rail-problems-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Problem card in rail */
.rail-problem-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--sol-surface, rgba(255,255,255,0.03));
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 8px;
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-problem-card:hover {
    border-color: var(--sol-border-strong, rgba(255,255,255,0.2));
    background: var(--sol-surface-elevated, rgba(255,255,255,0.05));
}

.rail-problem-card.selected {
    border-color: var(--sol-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
}

.rail-problem-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.rail-problem-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--sol-accent, #3b82f6);
}

.rail-problem-title {
    font-size: var(--rail-text-lg);
    font-weight: 600;
    color: var(--sol-text-primary, #e8e8e8);
}

.rail-problem-evidence {
    font-size: var(--rail-text-base);
    color: var(--sol-text-tertiary, #888);
    margin-top: 6px;
    margin-left: 28px;
    line-height: 1.4;
}

.rail-selection-count {
    font-size: var(--rail-text-md);
    color: var(--sol-text-secondary, #a0a0a0);
}

.rail-approval-actions {
    display: flex;
    gap: 8px;
}

.rail-add-problem-btn {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--sol-text-secondary, #a0a0a0);
    font-size: var(--rail-text-md);
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-add-problem-btn:hover {
    border-color: var(--sol-accent, #3b82f6);
    color: var(--sol-accent);
}

.rail-generate-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--sol-accent, #3b82f6);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: var(--rail-text-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-generate-btn:hover {
    background: var(--sol-accent-hover, #2563eb);
    transform: translateY(-1px);
}

.rail-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* --------------------------------------------------------------------------
   TIERED APPROVAL — Phase 2 UX (2026-02-14)
   Core problems: expanded cards with evidence + warning border
   Peripheral problems: compact single-line rows
   -------------------------------------------------------------------------- */

/* Approval header — title + cancel */
.rail-approval-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

.rail-approval-title {
    font-size: var(--rail-text-lg);
    font-weight: 700;
    color: var(--sol-text-primary, #e8e8e8);
    letter-spacing: 0.3px;
}

.rail-approval-cancel {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 4px;
    color: var(--sol-text-tertiary, #888);
    font-size: var(--rail-text-base);
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-approval-cancel:hover {
    border-color: var(--sol-status-error, #C44C4C);
    color: var(--sol-status-error);
}

/* Tier section (Core / Peripheral groups) */
.rail-tier-section {
    margin-bottom: 12px;
}

.rail-tier-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
    margin-bottom: 8px;
}

.rail-tier-label {
    font-size: var(--rail-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sol-text-tertiary, #888);
}

.rail-tier-count {
    font-size: var(--rail-text-2xs);
    font-weight: 700;
    padding: 1px 6px;
    background: rgba(255,255,255,0.1);
    color: var(--sol-text-secondary, #a0a0a0);
    border-radius: 8px;
}

/* Accept All button in peripheral header */
.rail-accept-all-btn {
    margin-left: auto;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--sol-accent, #3b82f6);
    border-radius: 4px;
    color: var(--sol-accent, #3b82f6);
    font-size: var(--rail-text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-accept-all-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

/* Core card — expanded with warning left border */
.rail-core-card {
    padding: 12px;
    border-left: 3px solid var(--sol-warning, #f59e0b);
    border-radius: 6px;
}

.rail-core-card.selected {
    border-color: var(--sol-accent, #3b82f6);
    border-left-color: var(--sol-warning, #f59e0b);
    background: rgba(59, 130, 246, 0.08);
}

.rail-core-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.rail-core-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.rail-trend-badge {
    font-size: var(--rail-text-2xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.rail-trend-badge.trend-worsening,
.rail-trend-badge.trend-critical {
    background: rgba(196, 76, 76, 0.2);
    color: #f87171;
}

.rail-trend-badge.trend-active,
.rail-trend-badge.trend-new {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.rail-trend-badge.trend-stable {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.rail-trend-badge.trend-improving {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.rail-confidence-badge {
    font-size: var(--rail-text-2xs);
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    color: var(--sol-text-tertiary, #888);
}

/* Core card evidence preview */
.rail-core-evidence {
    font-size: var(--rail-text-base);
    color: var(--sol-text-secondary, #a0a0a0);
    margin-top: 6px;
    margin-left: 28px;
    line-height: 1.4;
}

.rail-core-prior {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #666);
    margin-top: 4px;
    margin-left: 28px;
    font-style: italic;
    line-height: 1.3;
}

/* Machine-merge subtitle (2026-08-22): "detected as: … · undo" / "merged: … · undo". Passive,
   inherits the card's secondary ink; undo is a quiet inline link, never a slab. */
.rail-core-merged {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #666);
    margin-top: 3px;
    margin-left: 28px;
    line-height: 1.3;
}
.rail-peripheral-row .rail-core-merged { margin-left: 8px; margin-top: 0; }
.rail-merge-undo {
    background: none;
    border: 0;
    padding: 0 2px;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.85;
}
.rail-merge-undo:hover,
.rail-merge-undo:focus-visible { opacity: 1; }

/* Peripheral row — compact single line */
.rail-peripheral-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--sol-border-subtle, rgba(255,255,255,0.06));
    border-radius: 4px;
    gap: 8px;
}

.rail-peripheral-row .rail-problem-checkbox {
    flex: 1;
    min-width: 0;
}

.rail-peripheral-row .rail-problem-title {
    font-size: var(--rail-text-md);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-peripheral-qualifier {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #666);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-peripheral-row.selected {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
}

/* Manual add problem row */
.rail-add-problem-row {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sol-border-subtle, rgba(255,255,255,0.06));
}

.rail-add-problem-input {
    flex: 1;
    padding: 6px 10px;
    background: var(--sol-surface, rgba(255,255,255,0.03));
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 4px;
    color: var(--sol-text-primary, #e8e8e8);
    font-size: var(--rail-text-base);
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease;
}

.rail-add-problem-input:focus {
    border-color: var(--sol-accent, #3b82f6);
}

.rail-add-problem-input::placeholder {
    color: var(--sol-text-tertiary, #666);
}

.rail-add-problem-submit {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 4px;
    color: var(--sol-text-secondary, #a0a0a0);
    font-size: var(--rail-text-lg);
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease;
    line-height: 1;
}

.rail-add-problem-submit:hover {
    border-color: var(--sol-accent, #3b82f6);
    color: var(--sol-accent);
}

/* Approval footer — selection count + generate button */
.rail-approval-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--sol-border, rgba(255,255,255,0.1));
}

/* --------------------------------------------------------------------------
   GENERATING STAGE
   -------------------------------------------------------------------------- */

.rail-problem-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rail-problem-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--sol-surface-elevated, rgba(255,255,255,0.08));
    border-radius: 12px;
    font-size: var(--rail-text-sm);
    font-weight: 600;
    color: var(--sol-text-secondary, #a0a0a0);
}

.rail-streaming-output {
    font-family: var(--font-mono, monospace);
    font-size: var(--rail-text-md);
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--sol-text-primary, #e8e8e8);
}

.rail-cancel-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--sol-status-error, #C44C4C);
    border-radius: 6px;
    color: var(--sol-status-error);
    font-size: var(--rail-text-base);
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-cancel-btn:hover {
    background: rgba(196, 76, 76, 0.1);
}

/* --------------------------------------------------------------------------
   READY STAGE
   -------------------------------------------------------------------------- */

.rail-note-actions {
    display: flex;
    gap: 8px;
}

.rail-note-output {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Content inside scrolls, not this container */
}

.rail-word-count {
    font-size: var(--rail-text-base);
    color: var(--sol-text-tertiary, #666);
}

.rail-save-status {
    font-size: var(--rail-text-base);
    color: var(--sol-text-tertiary, #666);
}

/* --------------------------------------------------------------------------
   ERROR STAGE
   -------------------------------------------------------------------------- */

.rail-error-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
}

.rail-error-icon {
    font-size: var(--rail-text-display);
    margin-bottom: 16px;
}

.rail-error-title {
    font-size: var(--rail-text-xl);
    font-weight: 600;
    color: var(--sol-text-primary, #e8e8e8);
    margin-bottom: 8px;
}

.rail-error-message {
    font-size: var(--rail-text-md);
    color: var(--sol-text-tertiary, #888);
    margin-bottom: 24px;
    max-width: 280px;
}

.rail-retry-btn {
    padding: 10px 20px;
    background: var(--sol-accent, #3b82f6);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: var(--rail-text-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-retry-btn:hover {
    background: var(--sol-accent-hover, #2563eb);
}

/* ==========================================================================
   APPROVAL TABS (2026-02-04)
   ARCHITECTURE: Tabbed view for Problems/Overview in approval stage
   WHY: Keeps rail compact while providing both card view and tree view
   ========================================================================== */

.rail-approval-tabs {
    display: flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 2px;
}

.rail-tab {
    padding: 4px 10px;
    font-size: var(--rail-text-sm);
    font-weight: 600;
    color: var(--sol-text-secondary, #94a3b8);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 100ms ease;
}

.rail-tab:hover {
    color: var(--sol-text-primary, #e8e8e8);
}

.rail-tab.active {
    background: var(--sol-accent, #818cf8);
    color: #fff;
}

.rail-tab-badge {
    margin-left: 3px;
    padding: 0 5px;
    font-size: var(--rail-text-2xs);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.rail-tab.active .rail-tab-badge {
    background: rgba(255, 255, 255, 0.25);
}

.rail-tab-panel {
    display: none;
}

.rail-tab-panel.active {
    display: block;
}

/* ==========================================================================
   CONSOLIDATION CARDS (Accent: Cyan/Teal)
   ARCHITECTURE: AI-suggested problem merges shown above problem list
   WHY: Prominent placement encourages reviewing suggestions first
   ========================================================================== */

.rail-consolidations {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

.rail-consolidations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--rail-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #22d3ee;
    margin-bottom: 6px;
}

.rail-consolidations-badge {
    padding: 1px 6px;
    font-size: var(--rail-text-2xs);
    font-weight: 700;
    background: #22d3ee;
    color: #0f172a;
    border-radius: 8px;
}

.rail-consolidation-card {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-left: 3px solid #22d3ee;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 6px;
}

.rail-cons-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.rail-cons-title {
    font-size: var(--rail-text-base);
    font-weight: 600;
    color: #fff;
}

.rail-cons-confidence {
    font-size: var(--rail-text-2xs);
    font-weight: 700;
    padding: 1px 5px;
    background: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    border-radius: 3px;
}

.rail-cons-members {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}

/* 2026-08-23 tiering: RELATED cards are a relationship, not a merge offer. */
.rail-consolidation-card--related {
    opacity: 0.85;
    border-left-style: dashed;
}

/* 2026-09-02 structural LINK (ENABLE_PROBLEM_LINK): Link sits beside Merge,
   same quiet outline; a linked child card is inset under its parent. */
.rail-cons-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.rail-cons-actions .rail-cons-apply { margin-left: 0; }
.rail-problem-card .rail-core-linked { opacity: 0.85; }
.rail-link-undo {
    background: none;
    border: 0;
    padding: 0 2px;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.rail-cons-pill {
    font-size: var(--rail-text-2xs);
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 3px;
    color: var(--sol-text-secondary, #94a3b8);
}

.rail-cons-rationale {
    font-size: var(--rail-text-xs);
    color: var(--sol-text-tertiary, #64748b);
    margin-bottom: 6px;
    line-height: 1.3;
}

/* 2026-08-19 polish (owner: the suggestion bar out-shouted GENERATE NOTE):
   a SUGGESTION earns a quiet outline, right-aligned at content width —
   never a full-width primary-weight slab. */
.rail-cons-apply {
    display: block;
    width: max-content;
    margin-left: auto;
    padding: 4px 14px;
    font-size: var(--rail-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* FIX (2026-08-19): #0e7490 ink read ~1.9:1 on the tinted card — the old
       FILL color had landed in the TEXT slot. De-emphasis keeps the outline;
       the label must still be legible. */
    color: #22d3ee;
    background: transparent;
    border: 1px solid #22d3ee;
    border-radius: 3px;
    cursor: pointer;
    transition: all 100ms ease;
}

.rail-cons-apply:hover {
    background: rgba(34, 211, 238, 0.15);
}

/* ==========================================================================
   PROBLEM TREE (Accent: Purple/Violet)
   ARCHITECTURE: Severity-grouped tree view with merge history
   WHY: Provides overview of all problems by clinical priority
   ========================================================================== */

.rail-problem-tree {
    padding: 2px 0;
}

.rail-tree-group {
    margin-bottom: 10px;
}

.rail-tree-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--rail-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rail-tree-icon {
    font-size: var(--rail-text-sm);
    width: 14px;
    text-align: center;
}

.rail-tree-count {
    font-weight: 500;
    opacity: 0.5;
    margin-left: auto;
}

.rail-tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    margin: 1px 0;
    font-size: var(--rail-text-sm);
    color: var(--sol-text-primary, #e8e8e8);
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-left: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: all 100ms ease;
}

.rail-tree-item:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    border-left-color: #a78bfa;
}

.rail-tree-item.unchecked {
    opacity: 0.35;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.05);
}

.rail-tree-item.has-merges {
    border-left-color: #a78bfa;
}

.rail-tree-item.was-merged {
    opacity: 0.3;
    cursor: default;
    background: transparent;
    border-style: dashed;
}

.rail-tree-item.was-merged:hover {
    background: transparent;
    border-color: rgba(139, 92, 246, 0.15);
}

.rail-tree-item.was-merged .rail-tree-title {
    text-decoration: line-through;
}

.rail-tree-arrow {
    font-size: var(--rail-text-2xs);
    color: #a78bfa;
    opacity: 0.7;
}

.rail-tree-merged {
    padding: 2px 6px 2px 18px;
    font-size: var(--rail-text-2xs);
    color: #a78bfa;
    opacity: 0.6;
}

.rail-tree-empty {
    padding: 16px;
    text-align: center;
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #64748b);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* ==========================================================================
   PICKER STAGE (Note Type Selection)
   2026-02-05: Inline picker replaces modal
   ========================================================================== */

.rail-picker-header {
    padding: 16px 16px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sol-border, rgba(255,255,255,0.1));
}

.rail-picker-header h3 {
    font-size: var(--rail-text-lg);
    font-weight: 600;
    color: var(--sol-text-primary, #e8e8e8);
    margin: 0 0 4px 0;
}

.rail-picker-header p {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #888);
    margin: 0;
}

.rail-picker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 16px 16px;
}

.rail-picker-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--sol-surface, rgba(255,255,255,0.03));
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 150ms ease;
    width: 100%;
}

.rail-picker-card:hover {
    background: var(--sol-surface-elevated, rgba(255,255,255,0.06));
    border-color: var(--sol-border-strong, rgba(255,255,255,0.2));
    transform: translateY(-1px);
}

.rail-picker-card.featured {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
}

.rail-picker-card.featured:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.5);
}

.rpc-icon {
    font-size: var(--rail-text-3xl);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
}

.rail-picker-card.featured .rpc-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.rpc-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rpc-title {
    font-size: var(--rail-text-md);
    font-weight: 600;
    color: var(--sol-text-primary, #e8e8e8);
}

.rpc-desc {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #888);
}


/* ==========================================================================
   VIEWING STAGE - Note Viewer Integration
   CREATED: 2026-02-04 - Migrating from patient-chart.js and prior-notes-panel.js
   ========================================================================== */

/* Container for viewing stage content */
/* FIX (2026-02-06): Added opacity: 1 — viewing stage was invisible because
   base .rail-stage sets opacity: 0 and only the main active-stage rule
   (picker/input/detecting/approval/generating/ready/error) sets opacity: 1.
   Viewing was omitted, so the stage was laid out (display:flex) but transparent. */
.note-rail[data-stage="viewing"] .rail-stage[data-stage="viewing"] {
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 1;
}

/* Hide viewing stage when not active */
.note-rail:not([data-stage="viewing"]) .rail-stage[data-stage="viewing"] {
    display: none;
}

/* Viewing header */
.rail-viewing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    background: var(--sol-bg-secondary, #1e1e1e);
}

.rail-viewing-header-title {
    font-size: var(--rail-text-lg);
    font-weight: 600;
    color: var(--sol-text-primary, #e8e8e8);
}

.rail-viewing-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--sol-text-secondary, #a0a0a0);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.rail-viewing-close-btn:hover {
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.1));
    color: var(--sol-text-primary, #e8e8e8);
}

/* Filter tabs */
.rail-viewing-filters {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255, 255, 255, 0.08));
    background: var(--sol-bg-secondary, #1e1e1e);
}

.rail-viewing-filter-tab {
    padding: 6px 12px;
    font-size: var(--rail-text-base);
    font-weight: 500;
    color: var(--sol-text-tertiary, #888);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rail-viewing-filter-tab:hover {
    color: var(--sol-text-secondary, #a0a0a0);
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.05));
}

.rail-viewing-filter-tab.active {
    color: var(--sol-text-primary, #e8e8e8);
    background: var(--sol-bg-tertiary, #2a2a2a);
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
}

/* Search input */
.rail-viewing-search {
    padding: 8px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255, 255, 255, 0.08));
}

.rail-viewing-search-input {
    width: 100%;
    padding: 8px 12px;
    font-size: var(--rail-text-md);
    color: var(--sol-text-primary, #e8e8e8);
    background: var(--sol-bg-tertiary, #2a2a2a);
    border: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease;
}

.rail-viewing-search-input::placeholder {
    color: var(--sol-text-tertiary, #666);
}

.rail-viewing-search-input:focus {
    border-color: var(--sol-accent, #3b82f6);
}

/* List view container */
.rail-viewing-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.rail-viewing-list.hidden {
    display: none;
}

/* Notes list */
.rail-notes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail-notes-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--sol-text-tertiary, #888);
    font-size: var(--rail-text-md);
}

/* Note card in list */
.rail-note-card {
    padding: 12px;
    background: var(--sol-bg-tertiary, #252525);
    border: 1px solid var(--sol-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rail-note-card:hover {
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.05));
    border-color: var(--sol-border-strong, rgba(255, 255, 255, 0.15));
}

.rail-note-card:focus {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: -2px;
}

.rail-note-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.rail-note-type-badge {
    font-size: var(--rail-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 6px;
    border-radius: 3px;
    background: var(--sol-bg-secondary, #333);
    color: var(--sol-text-secondary, #a0a0a0);
}

.rail-note-type-progress { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.rail-note-type-handp { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.rail-note-type-discharge { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
.rail-note-type-consult { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

.rail-note-date {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #888);
}

.rail-note-preview {
    font-size: var(--rail-text-base);
    color: var(--sol-text-secondary, #a0a0a0);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rail-note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #666);
}

/* Detail view container */
.rail-viewing-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rail-viewing-detail.hidden {
    display: none;
}

/* Detail header with back button */
.rail-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    background: var(--sol-bg-secondary, #1e1e1e);
}

.rail-detail-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--sol-bg-tertiary, #2a2a2a);
    color: var(--sol-text-secondary, #a0a0a0);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.rail-detail-back-btn:hover {
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.15));
    color: var(--sol-text-primary, #e8e8e8);
}

.rail-detail-title-section {
    flex: 1;
}

.rail-note-detail-title {
    font-size: var(--rail-text-lg);
    font-weight: 600;
    color: var(--sol-text-primary, #e8e8e8);
    margin: 0 0 4px 0;
}

.rail-note-detail-meta {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #888);
}

/* Detail content area */
.rail-note-detail-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    font-size: var(--rail-text-md);
    line-height: 1.7;
    color: var(--sol-text-primary, #e8e8e8);
    white-space: pre-wrap;
    font-family: var(--rail-font-mono);
}

/* Detail actions footer */
.rail-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    background: var(--sol-bg-secondary, #1e1e1e);
}

.rail-detail-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--rail-text-base);
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rail-detail-action-btn.secondary {
    background: var(--sol-bg-tertiary, #2a2a2a);
    border: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    color: var(--sol-text-secondary, #a0a0a0);
}

.rail-detail-action-btn.secondary:hover {
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.1));
    color: var(--sol-text-primary, #e8e8e8);
}

.rail-detail-action-btn.primary {
    background: var(--sol-accent, #3b82f6);
    border: 1px solid transparent;
    color: #fff;
}

.rail-detail-action-btn.primary:hover {
    background: var(--sol-accent-hover, #2563eb);
}

/* Use as Template button - only shown in select mode */
.rail-use-template-btn {
    display: none;
}

.rail-viewing-detail[data-mode="select"] .rail-use-template-btn {
    display: flex;
}

/* ==========================================================================
   ENHANCED VIEWING STAGE - 2-Column Layout (2026-02-05)
   ARCHITECTURE: Notes list on left (280px), Preview pane on right (flex-1)
   WHY: Feature parity with Prior Notes Panel - users need full preview before selecting
   ========================================================================== */

/* Container layout */
.rail-viewing-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Header: Title + Patient Label + Close
   -------------------------------------------------------------------------- */
.rail-viewing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    background: var(--sol-bg-secondary, #1e1e1e);
    flex-shrink: 0;
}

.rail-viewing-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rail-viewing-patient-label {
    font-size: var(--rail-text-sm);
    font-weight: 500;
    color: var(--sol-text-tertiary, #888);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Meta Row: Note count | Filter tabs
   -------------------------------------------------------------------------- */
.rail-viewing-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255, 255, 255, 0.08));
    background: var(--sol-bg-secondary, #1e1e1e);
    flex-shrink: 0;
}

.rail-viewing-note-count {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #888);
}

.rail-viewing-meta .rail-viewing-filters {
    display: flex;
    gap: 6px;
    padding: 0;
    border-bottom: none;
    background: transparent;
}

/* --------------------------------------------------------------------------
   Search Row: Input + Mode Toggle
   -------------------------------------------------------------------------- */
.rail-viewing-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}

.rail-viewing-search-wrap {
    position: relative;
    flex: 1;
}

.rail-viewing-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sol-text-tertiary, #666);
    pointer-events: none;
}

.rail-viewing-search-row .rail-viewing-search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    font-size: var(--rail-text-base);
    color: var(--sol-text-primary, #e8e8e8);
    background: var(--sol-bg-tertiary, #2a2a2a);
    border: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease;
}

.rail-viewing-search-row .rail-viewing-search-input:focus {
    border-color: var(--sol-accent, #3b82f6);
}

/* Mode toggle button */
.rail-viewing-mode-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: var(--rail-text-sm);
    font-weight: 600;
    color: var(--sol-text-secondary, #94a3b8);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.rail-viewing-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sol-text-primary, #f8fafc);
}

.rail-viewing-mode-toggle.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: #c4b5fd;
}

.rail-viewing-mode-toggle svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Body: 2-Column Grid Layout
   -------------------------------------------------------------------------- */
.rail-viewing-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Notes column (left) */
.rail-viewing-notes-column {
    overflow-y: auto;
    padding: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.1);
}

/* Preview column (right) */
.rail-viewing-preview-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
    background: var(--sol-bg-surface, #0f1219);
}

/* --------------------------------------------------------------------------
   Preview Pane States
   -------------------------------------------------------------------------- */
/* Empty state */
.rail-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    text-align: center;
    color: var(--sol-text-tertiary, #64748b);
}

.rail-preview-empty svg {
    opacity: 0.3;
}

.rail-preview-empty p {
    margin: 0;
    font-size: var(--rail-text-md);
}

/* display:flex above beats the UA [hidden] { display:none }, so a selected
   note still stacked the placeholder on top of the body (I1 replay). */
.rail-preview-empty[hidden] {
    display: none;
}

/* Preview content */
.rail-preview-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rail-preview-content[hidden] {
    display: none;
}

/* Cross-patient warning */
.rail-cross-patient-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    color: #fbbf24;
}

.rail-cross-patient-warning[hidden] {
    display: none;
}

.rail-cross-patient-warning svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.rail-cross-patient-warning p {
    margin: 0;
    font-size: var(--rail-text-base);
    line-height: 1.5;
}

.rail-cross-patient-text strong {
    color: #fcd34d;
}

/* Preview header */
.rail-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rail-preview-type {
    font-size: var(--rail-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.rail-preview-patient {
    font-size: var(--rail-text-base);
    color: var(--sol-text-secondary, #a0a0a0);
}

.rail-preview-date {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #888);
    margin-left: auto;
}

/* Preview body */
.rail-preview-body {
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: var(--rail-text-md);
    font-family: var(--rail-font-mono);
    line-height: 1.7;
    color: var(--sol-text-primary, #e8e8e8);
    white-space: pre-wrap;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Footer: Selection Info + Actions
   -------------------------------------------------------------------------- */
.rail-viewing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
    background: var(--sol-bg-secondary, #1e1e1e);
    flex-shrink: 0;
}

.rail-viewing-footer-info {
    flex: 1;
    min-width: 0;
    font-size: var(--rail-text-base);
}

.rail-selected-label {
    color: var(--sol-text-tertiary, #888);
    margin-right: 6px;
}

.rail-selected-title {
    color: var(--sol-text-primary, #e8e8e8);
    font-weight: 500;
}

.rail-hint {
    color: var(--sol-text-tertiary, #888);
    font-style: italic;
}

.rail-cross-patient-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-size: var(--rail-text-xs);
    font-weight: 600;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 4px;
    color: #fbbf24;
}

.rail-viewing-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Disabled button state */
.rail-detail-action-btn.disabled,
.rail-detail-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Show Use as Template button in footer always (controlled by disabled state) */
.rail-viewing-footer .rail-use-template-btn {
    display: flex;
}

/* --------------------------------------------------------------------------
   Note Card Enhancements
   -------------------------------------------------------------------------- */
/* Selected state */
.rail-note-card.selected {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

/* Cross-patient indicator */
.rail-note-card--cross-patient {
    border-left: 3px solid rgba(251, 191, 36, 0.5);
}

/* Imported-note lifecycle is managed on the Saved Notes surface itself. */
.rail-note-card--silenced,
.rail-note-card--silenced.selected {
    background: color-mix(in srgb, var(--sol-bg-tertiary, #252525) 82%, #808080 18%);
    border-color: color-mix(in srgb, var(--sol-border-strong, #777) 75%, #9ca3af 25%);
    box-shadow: none;
    filter: saturate(0.25);
    opacity: 0.72;
}

.rail-note-context-off-badge {
    padding: 2px 6px;
    border: 1px solid currentColor;
    color: var(--sol-text-tertiary, #9ca3af);
    font-size: var(--rail-text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rail-note-card:has(.rail-note-context-off-badge) .rail-note-card-header {
    flex-wrap: wrap;
    gap: 6px;
}

.rail-note-card:has(.rail-note-context-off-badge) .rail-note-date {
    margin-left: auto;
}

.rail-note-lifecycle-actions {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid var(--sol-border, rgba(255, 255, 255, 0.1));
}

.rail-note-lifecycle-reason {
    align-self: center;
    color: var(--sol-text-tertiary, #9ca3af);
    font-size: var(--rail-text-2xs);
    line-height: 1.25;
}

.rail-import-context-btn,
.rail-import-delete-btn {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 4px;
    font: inherit;
    font-size: var(--rail-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.rail-note-lifecycle-btn {
    min-height: 22px;
    padding: 1px 5px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    font: inherit;
    font-size: var(--rail-text-2xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.rail-import-context-btn {
    border: 1px solid color-mix(in srgb, #d49b35 58%, transparent);
    background: color-mix(in srgb, #6b4308 20%, transparent);
    color: color-mix(in srgb, #fff3d6 76%, var(--sol-text-secondary, #aaa));
}

.rail-import-delete-btn {
    border: 1px solid color-mix(in srgb, #b65353 58%, transparent);
    background: color-mix(in srgb, #4d1f1f 20%, transparent);
    color: color-mix(in srgb, #ffd7d7 76%, var(--sol-text-secondary, #aaa));
}

.rail-note-silence-btn {
    color: color-mix(in srgb, #d49b35 62%, var(--sol-text-tertiary, #888));
}

.rail-note-delete-btn {
    color: color-mix(in srgb, #b65353 62%, var(--sol-text-tertiary, #888));
}

.rail-note-lifecycle-btn:hover:not(:disabled),
.rail-import-context-btn:hover:not(:disabled),
.rail-import-delete-btn:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 10%, transparent);
    filter: brightness(1.12);
}

.rail-import-context-btn.hidden,
.rail-import-delete-btn.hidden {
    display: none !important;
}

.rail-import-context-btn.is-restore {
    border-color: color-mix(in srgb, #2aa995 62%, transparent);
    background: color-mix(in srgb, #174b43 20%, transparent);
    color: color-mix(in srgb, #d4fff8 76%, var(--sol-text-secondary, #aaa));
}

.rail-preview-content--silenced {
    filter: saturate(0.2);
    opacity: 0.7;
}

.rail-note-cross-patient-badge {
    font-size: var(--rail-text-2xs);
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(196, 76, 76, 0.15);
    color: #fca5a5;
    white-space: nowrap;
}

/*
 * 2026-05-04: EHR-final chip
 *
 * WHY: Doctor reported being unable to tell whether a prior note shown in the
 * rail was the original LLM-generated version or the EHR-reconciled paste-back
 * version. Cyan chip flips on for the latter; absence is the default.
 *
 * Color: cyan (matches the "synced from a system of record" semantics — same
 * visual register as success but distinct from generation-flow greens). Sized
 * to sit alongside the type badge in list headers and the date in preview
 * headers without dominating either.
 */
.rail-note-ehr-final-badge {
    font-size: var(--rail-text-2xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(34, 211, 238, 0.18);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.35);
    white-space: nowrap;
    margin-left: 4px;
}

/* TIGHTENED chip (2026-08-19): shares the badge chassis, amber so it never
   reads as the cyan EHR FINAL state. */
.rail-note-tightened-badge {
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
}

/* Version-chip origin tints (2026-08-19): origin reads at a glance on idle
   chips — Tightened is amber (matching the TIGHTENED badge family), Edited is
   italic ghost. The ACTIVE chip keeps the theme accent regardless of origin:
   selection color stays one thing. Attribute selectors keep specificity below
   the themed `.active` rules, so no override is needed. */
.draft-version-chip[data-origin="tightened"]:not(.active) {
    color: #d9a441;
    border-color: rgba(251, 191, 36, 0.55);
}
.draft-version-chip[data-origin="tightened"]:not(.active):hover:not(:disabled) {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.07);
}
.draft-version-chip[data-origin="edited"]:not(.active) {
    font-style: italic;
    opacity: 0.85;
}

/*
 * Preview-header chip slot — the wrapper <span> is hidden by default via
 * the `hidden` attribute; when populated, JS removes the attribute. The
 * styling here just gives it left-margin to separate from the date.
 */
.rail-preview-ehr-chip {
    display: inline-flex;
    align-items: center;
}

.rail-preview-ehr-chip[hidden] {
    display: none;
}

/* Patient name row in global mode */
.rail-note-patient {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-secondary, #a0a0a0);
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Loading state */
.rail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--sol-text-tertiary, #64748b);
}

.rail-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(96, 165, 250, 0.2);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: rail-spin 0.8s linear infinite;
}

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

/* --------------------------------------------------------------------------
   Responsive: Collapse Preview at Narrow Width
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .rail-viewing-body {
        grid-template-columns: 1fr;
    }

    .rail-viewing-preview-column {
        display: none;
    }

    .rail-viewing-notes-column {
        border-right: none;
    }

    /* Footer shows hint about narrow view */
    .rail-viewing-footer-info .rail-hint::after {
        content: " (expand rail for preview)";
    }
}


/* ==========================================================================
   STAGE: REVIEW — Per-problem structured review (2026-02-14)
   ========================================================================== */

/* Header */
.rail-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    flex-shrink: 0;
    gap: 8px;
}

.rail-review-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rail-review-title {
    font-size: var(--rail-text-lg);
    font-weight: 600;
    color: var(--sol-text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-review-meta {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #64748b);
}

.rail-review-header-right {
    flex-shrink: 0;
}

.rail-review-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--rail-text-base);
    color: var(--sol-text-secondary, #94a3b8);
    background: var(--sol-bg-secondary, #161922);
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-review-toggle-btn:hover {
    color: var(--sol-text-primary, #e2e8f0);
    border-color: var(--sol-accent, #6366f1);
}

.rail-review-toggle-btn[aria-pressed="false"] {
    color: var(--sol-accent, #6366f1);
    border-color: var(--sol-accent, #6366f1);
    background: rgba(99, 102, 241, 0.08);
}

/* Body */
/* FIX (2026-04-30): Make the review body the scroll surface.
   BUG: Each review card content was capped at 300px, leaving most of the rail blank
        while the doctor had to scroll inside a tiny inner box.
   FIX: Let expanded cards grow naturally and keep scrolling on .rail-review-cards.
   Earlier 2026-04-07 context: flex column + overflow on .rail-review-cards, not here.
   BUG: Single "Full Note" card used .rail-review-card-content max-height:300px while
   body below stayed empty; doctor scrolled a postage stamp inside a tall rail.
   FIX: only-child card grows to fill; inner content scrolls. */
.rail-review-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.rail-review-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Full Note toggle target: flex chain for moved #noteOutputSection (see .sol-note-output-section above) */
.rail-review-fullnote {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: auto;
    padding: 8px 12px;
    overflow: hidden;
}

/* One problem / single-section fallback ("Full Note" card): use rail height, not 300px cap */
.rail-review-cards > .rail-review-card:only-child {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rail-review-cards > .rail-review-card:only-child .rail-review-card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rail-review-cards > .rail-review-card:only-child .rail-review-card-content {
    max-height: none;
    flex: 1;
    min-height: 200px;
    overflow-y: auto;
}

/* ── Problem Review Card ──────────────────────────────────────────── */
.rail-review-card {
    border-bottom: 1px solid var(--sol-border, rgba(255,255,255,0.08));
    transition: background 150ms ease;
}

.rail-review-card:last-child {
    border-bottom: none;
}

.rail-review-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 150ms ease;
}

.rail-review-card-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.rail-review-card-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--sol-text-tertiary, #64748b);
    transition: transform 200ms ease;
}

.rail-review-card[data-collapsed="true"] .rail-review-card-chevron {
    transform: rotate(-90deg);
}

.rail-review-card-title {
    flex: 1;
    font-size: var(--rail-text-md);
    font-weight: 600;
    color: var(--sol-text-primary, #e2e8f0);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-review-card-badge {
    flex-shrink: 0;
    font-size: var(--rail-text-xs);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--sol-accent, #6366f1);
    font-weight: 500;
}

/* Diff indicator on card header */
.rail-review-card-badge.has-changes {
    background: rgba(59, 130, 246, 0.15);
    color: var(--sol-info, #3b82f6);
}

/* Anchor-and-amend (2026-08-22): per-problem outcome badges */
.rail-review-card-badge.carried {
    background: var(--dr-bg-elev, rgba(255,255,255,0.06));
    color: var(--dr-fg-muted, #9aa0a6);
    font-weight: 500;
}
.rail-review-card-badge.failed {
    background: rgba(220, 80, 80, 0.18);
    color: var(--dr-danger, #e5484d);
}
.rail-review-card-body {
    padding: 0 16px 10px 16px;
    overflow: visible;
    transition: max-height 200ms ease, opacity 150ms ease;
}

.rail-review-card[data-collapsed="true"] .rail-review-card-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.rail-review-card-content {
    /* LEGIBILITY (2026-08-21, owner report "can't hardly read the fucking thing"):
       the note body is the primary reading surface — it was rendering in
       --sol-text-secondary (#9B8868 mocha under dr-compat) at 13px. Match the
       Transfer Center recipe the owner CAN read (.tc-note-output): primary fg,
       1.7 leading, one size up (base→md) and no larger — owner-specified cap. */
    font-size: var(--rail-text-md);
    line-height: 1.7;
    color: var(--sol-text-primary, #e2e8f0);
    white-space: pre-wrap;
    word-break: break-word;
    padding: 8px 12px;
    background: var(--sol-bg-secondary, #161922);
    border-radius: 6px;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.06));
    max-height: none;
    overflow: visible;
}

/* Editable state */
.rail-review-card-content[contenteditable="true"] {
    outline: none;
    border-color: var(--sol-accent, #6366f1);
    box-shadow: 0 0 0 1px var(--sol-accent, #6366f1);
    background: rgba(99, 102, 241, 0.04);
    cursor: text;
}

/* Section headers within the note body ("ASSESSMENT & PLAN:", "BRIEF HOSPITAL
   COURSE SUMMARY:") — Transfer Center-style rhythm (.tc-note-section). Inline
   spans only: renderNoteBodyHtml (note-rail.js) guarantees textContent stays
   byte-for-byte note text, so no margins here — display changes would eat the
   pre-wrap newlines around the span. */
.rail-note-heading {
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--term-gold, #C9A227);
}

/* Course strip (2026-08-24): per-problem course-over-hospitalization timeline
   under each problem card's text. Axis-free (Tufte word-sized) — identity and
   first→last course live in the caption, exact values in the scrub tooltip. */
.course-strip-host {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--sol-border, rgba(255,255,255,0.06));
}

.course-strip-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    font-size: 11px;
    font-family: var(--font-mono, "SF Mono", "Fira Code", monospace);
    color: var(--sol-text-secondary, #94a3b8);
    margin-bottom: 2px;
}

.course-strip-caption .cs-series {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--sol-text-primary, #e2e8f0);
}

.course-strip-caption .cs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    align-self: center;
    flex: none;
}

.course-strip-caption .cs-meta {
    margin-left: auto;
    color: var(--sol-text-secondary, #94a3b8);
    opacity: 0.75;
}

.course-strip-chart {
    height: 90px;
    width: 100%;
}

/* Sparse-data honesty: absence is a designed state, never a broken chart. */
.course-strip-empty {
    font-size: 11px;
    font-style: italic;
    color: var(--sol-text-secondary, #94a3b8);
    opacity: 0.7;
    padding: 6px 0 2px;
    border-bottom: 1px dashed var(--sol-border, rgba(255,255,255,0.08));
}

/* Diff highlights within card content */
.rail-review-card-content .diff-insert {
    background: rgba(34, 197, 94, 0.15);
    color: var(--sol-stable, #22c55e);
    text-decoration: none;
}

.rail-review-card-content .diff-delete {
    background: rgba(196, 76, 76, 0.12);
    color: var(--sol-critical, #C44C4C);
    text-decoration: line-through;
    opacity: 0.7;
}

/* ── Generated-snapshot source cues (rail card view only) ────────── */
.rail-provenance-surface .provenance {
    padding-left: 0;
    border-left: 0;
    border-bottom-width: 2px;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.rail-provenance-surface .provenance-carried_forward {
    background: rgba(156, 163, 175, 0.1);
    border-bottom-color: rgba(156, 163, 175, 0.82);
    border-bottom-style: dashed;
}

.rail-provenance-surface .provenance-today_evidence {
    background: rgba(16, 185, 129, 0.1);
    border-bottom-color: rgba(16, 185, 129, 0.82);
    border-bottom-style: solid;
}

.rail-provenance-surface .provenance-llm_synthesis {
    background: rgba(245, 158, 11, 0.12);
    border-bottom-color: rgba(245, 158, 11, 0.9);
    border-bottom-style: dotted;
}

.rail-provenance-surface.provenance-hidden .provenance {
    background: transparent !important;
    border-bottom-color: transparent !important;
}

.note-rail .provenance-legend {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    color: var(--sol-text-primary, #e5e7eb);
    background: var(--sol-bg-secondary, #111827);
    border-bottom: 1px solid var(--sol-border, rgba(148, 163, 184, 0.22));
    font-size: 12px;
    container-name: rail-provenance-legend;
    container-type: inline-size;
}

.note-rail .provenance-legend-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 36px;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 4px 7px 4px 12px;
    border-bottom: 1px solid var(--sol-border, rgba(148, 163, 184, 0.18));
    font-weight: 650;
    letter-spacing: 0.02em;
}

.note-rail .provenance-legend-scope {
    min-width: 0;
    overflow: hidden;
    color: var(--sol-text-secondary, #94a3b8);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-rail .provenance-legend-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--sol-text-secondary, #94a3b8);
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.note-rail .provenance-legend-toggle:hover,
.note-rail .provenance-legend-toggle:focus-visible {
    color: var(--sol-text-primary, #e5e7eb);
    background: rgba(148, 163, 184, 0.12);
    outline: none;
}

.note-rail .provenance-legend-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--sol-accent, #14b8a6);
}

.note-rail .provenance-legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 6px 12px;
    min-width: 0;
    padding: 7px 12px;
}

.note-rail .provenance-legend-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 20px;
}

.note-rail .provenance-legend-swatch {
    width: 16px;
    height: 0;
    border-top-width: 2px;
}

.note-rail .provenance-legend-swatch--carried_forward {
    border-top-style: dashed;
    border-top-color: rgba(156, 163, 175, 0.9);
}

.note-rail .provenance-legend-swatch--today_evidence {
    border-top-style: solid;
    border-top-color: rgba(16, 185, 129, 0.9);
}

.note-rail .provenance-legend-swatch--llm_synthesis {
    border-top-style: dotted;
    border-top-color: rgba(245, 158, 11, 0.95);
}

.note-rail .provenance-legend-label {
    min-width: 0;
    overflow: hidden;
    color: var(--sol-text-secondary, #94a3b8);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-rail .provenance-legend-count {
    color: var(--sol-text-primary, #e5e7eb);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

/* The rail is independently resizable, so respond to its width rather than
   the browser viewport. A narrow rail gets a calm, scannable single column. */
@container rail-provenance-legend (max-width: 420px) {
    .note-rail .provenance-legend-header {
        grid-template-columns: auto minmax(0, 1fr) 40px;
    }

    .note-rail .provenance-legend-toggle {
        width: 40px;
        height: 40px;
    }

    .note-rail .provenance-legend-items {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rail-provenance-surface .provenance {
        transition: none;
    }
}

/* Card Actions */
.rail-review-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
}

.rail-review-card-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #64748b);
    background: transparent;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.08));
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-review-card-action:hover {
    color: var(--sol-text-primary, #e2e8f0);
    border-color: var(--sol-text-tertiary, #64748b);
    background: rgba(255, 255, 255, 0.04);
}

.rail-review-card-action.editing {
    color: var(--sol-accent, #6366f1);
    border-color: var(--sol-accent, #6366f1);
    background: rgba(99, 102, 241, 0.08);
}

/* Refine prompt area */
.rail-review-refine-area {
    display: none;
    padding-top: 8px;
    gap: 6px;
}

.rail-review-refine-area.visible {
    display: flex;
    flex-direction: column;
}

.rail-review-refine-input {
    width: 100%;
    padding: 6px 10px;
    font-size: var(--rail-text-base);
    color: var(--sol-text-primary, #e2e8f0);
    background: var(--sol-bg-tertiary, #1c1f2a);
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 4px;
    resize: none;
    font-family: inherit;
}

.rail-review-refine-input::placeholder {
    color: var(--sol-text-tertiary, #64748b);
}

.rail-review-refine-input:focus {
    outline: none;
    border-color: var(--sol-accent, #6366f1);
}

.rail-review-refine-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.rail-review-refine-submit {
    padding: 4px 10px;
    font-size: var(--rail-text-sm);
    color: #fff;
    background: var(--sol-accent, #6366f1);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.rail-review-refine-submit:hover {
    filter: brightness(1.1);
}

.rail-review-refine-cancel {
    padding: 4px 10px;
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #64748b);
    background: transparent;
    border: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    border-radius: 4px;
    cursor: pointer;
}

/* Diff accept/reject within card */
.rail-review-diff-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    font-size: var(--rail-text-sm);
}

.rail-review-diff-counter {
    color: var(--sol-text-tertiary, #64748b);
    margin-right: auto;
}

.rail-review-diff-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: var(--rail-text-sm);
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 150ms ease;
}

.rail-review-diff-btn.accept {
    color: var(--sol-stable, #22c55e);
    background: rgba(34, 197, 94, 0.1);
}

.rail-review-diff-btn.accept:hover {
    background: rgba(34, 197, 94, 0.2);
}

.rail-review-diff-btn.reject {
    color: var(--sol-critical, #C44C4C);
    background: rgba(196, 76, 76, 0.08);
}

.rail-review-diff-btn.reject:hover {
    background: rgba(196, 76, 76, 0.16);
}

/* Footer */
.rail-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--sol-border, rgba(255,255,255,0.1));
    flex-shrink: 0;
    gap: 8px;
    flex-wrap: wrap;
}

.rail-review-footer-left {
    flex-shrink: 0;
}

.rail-review-word-count {
    font-size: var(--rail-text-sm);
    color: var(--sol-text-tertiary, #64748b);
}

.rail-review-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rail-review-action {
    font-size: var(--rail-text-base) !important;
    padding: 5px 10px !important;
}

.rail-review-action i {
    font-size: var(--rail-text-lg);
}

/* ── Terminal theme overrides for REVIEW stage ────────────────────
   FIX (2026-02-14): Replaced rgba(0,255,136) with correct --dr-teal
   (#4CC4B4) tokens; scoped selectors to .note-rail */
.note-rail[data-theme="terminal"] .rail-review-card-content {
    font-family: var(--dr-font-mono);
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--dr-crater-deep);
}

.note-rail[data-theme="terminal"] .rail-review-card-header:hover {
    /* One ladder step, not --dr-mocha: under night-shift mocha is the
       label ink (#BBA188), so the old hover erased its own title. */
    background: var(--sol-bg-hover, var(--dr-espresso-hover, #302117));
}

/* HIERARCHY (2026-08-25, owner: "none of the UI is layered … the refine and
   edit buttons' background is the same as the inactive substrate; spacing and
   typography all the same"). Measured under night-shift: card, header, body
   and action button were ALL transparent on the #0D0906 rail — the only fill
   anywhere was the content well. Three steps now, each carried by a canonical
   token so companion themes re-derive them:
     substrate (rail void)  <  section card (elevated)  <  action control (hover)
   and the content well stays the darkest thing INSIDE the card (inset), so
   "where I read/edit" and "what I can press" are different depths. Title
   becomes a small tracked label in secondary ink — quieter and smaller than
   the 14px body it introduces, instead of the same size one weight up. */
.note-rail[data-theme="terminal"] .rail-review-cards {
    padding: 0 0 8px;
}

.note-rail[data-theme="terminal"] .rail-review-card {
    margin: 8px 10px 0;
    background: var(--sol-bg-elevated, var(--term-bg-elevated, #251A11));
    border: 1px solid var(--sol-border, var(--term-border-default, #6A5140));
    border-radius: 6px;
    /* NEVER overflow:hidden here: the card is a flex item in the fixed-height
       .rail-review-cards column, and a non-visible overflow drops its
       min-height:auto floor — 12 cards shrank to a few px each with no text
       (owner report 2026-08-25, minutes after this shipped). flex-shrink:0 is
       the explicit floor; the header rounds its own top corners instead. */
}

.note-rail[data-theme="terminal"] .rail-review-card:not(:only-child) {
    flex-shrink: 0; /* the single "Full Note" card keeps its flex:1 fill chain */
}

.note-rail[data-theme="terminal"] .rail-review-card-header {
    border-radius: 5px 5px 0 0;
}

.note-rail[data-theme="terminal"] .rail-review-card-header {
    padding: 8px 12px;
}

.note-rail[data-theme="terminal"] .rail-review-card-body {
    padding: 0 12px 10px;
}

.note-rail[data-theme="terminal"] .rail-review-card-title {
    color: var(--sol-text-secondary, var(--dr-mocha, #BBA188));
    font-family: var(--term-font-display, inherit);
    font-size: var(--rail-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* note-rail-terminal.css:104 styles EVERY rail <button> at (0,4,1) — 36px min
   height, ghost fill — and loads after this sheet, so the card action needs
   (0,5,1) to be a secondary control instead of a full-size ghost button. */
.note-rail[data-theme="terminal"] .rail-review-card .rail-review-card-actions button.rail-review-card-action {
    min-height: 28px;
    padding: 4px 10px;
    background: var(--sol-bg-hover, var(--dr-espresso-hover, #302117));
    border: 1px solid var(--sol-border, var(--term-border-default, #6A5140));
    border-radius: 4px;
    color: var(--term-fg-secondary, var(--sol-text-secondary, #BBA188));
}

.note-rail[data-theme="terminal"] .rail-review-card .rail-review-card-actions button.rail-review-card-action:hover {
    color: var(--sol-text-primary, #FFF8F0);
    border-color: var(--sol-text-secondary, #BBA188);
}

.note-rail[data-theme="terminal"] .rail-review-card .rail-review-card-actions button.rail-review-card-action.editing {
    color: var(--sol-accent, #E9922E);
    border-color: var(--sol-accent, #E9922E);
}

.note-rail[data-theme="terminal"] .rail-review-toggle-btn {
    border-color: rgba(76, 196, 180, 0.2);
}

.note-rail[data-theme="terminal"] .rail-review-toggle-btn:hover {
    border-color: var(--dr-mocha);
    color: var(--dr-teal);
}

/* ==========================================================================
   PRINT STYLES
   Strip chrome, expand content, avoid page-break inside cards
   ========================================================================== */
@media print {
    .note-rail {
        width: 100% !important;
    }
    .rail-header, .rail-footer, .rail-actions,
    .rail-stage-indicator, .note-type-picker,
    .provenance-legend {
        display: none !important;
    }
    .rail-provenance-surface .provenance {
        background: transparent !important;
        border-bottom: 0 !important;
    }
    .rail-note-body {
        overflow: visible !important;
        max-height: none !important;
    }
    .rail-review-card {
        break-inside: avoid;
        border: 1px solid #ccc;
    }
}

/* ===========================================================================
 * Chart Data Preview Pane (2026-05-04, Phase 2 of chart injection).
 * Replaces .ai-data-summary chips with a real preview list of facts the LLM
 * will see, per-fact [exclude] toggles, and a conflicts row.
 * =========================================================================== */
.chart-data-preview {
    margin: 6px 0 8px 0;
    border: 1px solid var(--rail-border, rgba(255,255,255,0.08));
    border-radius: 6px;
    background: var(--rail-input-bg, rgba(255,255,255,0.02));
    font-size: 12px;
    line-height: 1.4;
}
.chart-data-preview.hidden { display: none; }
.chart-data-preview-header {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 6px 8px;
    background: transparent; border: 0;
    color: var(--rail-text, inherit); font: inherit;
    cursor: pointer; text-align: left;
}
.chart-data-preview-header:hover { background: rgba(255,255,255,0.03); }
.chart-data-preview-caret { font-size: 11px; opacity: 0.7; }
.chart-data-preview-title {
    font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; font-size: 10.5px;
    color: var(--rail-muted, rgba(255,255,255,0.6));
}
.chart-data-preview-meta {
    flex: 1; color: var(--rail-muted, rgba(255,255,255,0.55));
    font-size: 11px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.chart-data-preview-counts {
    color: var(--rail-muted, rgba(255,255,255,0.55));
    font-size: 11px;
}
.chart-data-preview-body {
    padding: 6px 10px 10px;
    border-top: 1px solid var(--rail-border, rgba(255,255,255,0.06));
}
.chart-data-preview-body[hidden] { display: none; }
.chart-data-conflicts {
    margin: 4px 0 8px; padding: 6px 8px;
    border: 1px solid rgba(255, 180, 0, 0.35);
    background: rgba(255, 180, 0, 0.06);
    border-radius: 4px; color: rgba(255, 200, 80, 0.95);
}
.chart-data-conflicts.hidden { display: none; }
.chart-data-conflicts-toggle {
    display: flex; align-items: center; gap: 6px;
    width: 100%; background: transparent; border: 0;
    color: inherit; font: inherit; cursor: pointer;
    text-align: left; padding: 0;
}
.chart-data-conflicts-toggle:hover { text-decoration: underline; }
.chart-data-conflicts-list {
    list-style: disc inside; margin: 6px 0 0;
    padding-left: 4px; color: rgba(255, 200, 80, 0.85);
}
.chart-data-section { margin-top: 6px; }
.chart-data-section:empty { display: none; }
.chart-data-section-title {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--rail-muted, rgba(255,255,255,0.55));
    margin: 4px 0 2px;
}
.chart-data-fact {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 4px; border-radius: 3px;
}
.chart-data-fact:hover { background: rgba(255,255,255,0.02); }
.chart-data-fact.excluded { opacity: 0.42; text-decoration: line-through; }
.chart-data-fact-name { flex: 0 0 auto; font-weight: 500; color: var(--rail-text, inherit); }
.chart-data-fact-value {
    flex: 1; color: var(--rail-text, inherit);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chart-data-fact-flag {
    color: rgba(255, 100, 100, 0.95);
    font-weight: 600; margin-left: 4px;
}
.chart-data-fact-toggle {
    flex: 0 0 auto; background: transparent;
    border: 1px solid var(--rail-border, rgba(255,255,255,0.12));
    color: var(--rail-muted, rgba(255,255,255,0.55));
    font-size: 10.5px; padding: 1px 6px;
    border-radius: 3px; cursor: pointer;
}
.chart-data-fact-toggle:hover {
    color: var(--rail-text, inherit);
    border-color: var(--rail-border-strong, rgba(255,255,255,0.25));
}

/* --------------------------------------------------------------------------
   R10a (2026-07-13): GENERATION AS A LEGIBLE 3-STEP WAIT
   Preparing chart evidence → Drafting note → Running quality checks
   (#genStepper, #genElapsed, #genStallActions in templates/census.html;
   driven by NoteGenerationManager._setGenerationStep / _startElapsedClock /
   _showStallActions). Colors from dark-roast tokens: --dr-amber (in
   progress), --dr-teal (complete/ready), --dr-mocha (muted), --dr-burnt-
   sienna (stall/error). Fallback hexes are those tokens' literal values.
   -------------------------------------------------------------------------- */
.sol-gen-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sol-gen-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sol-gen-step {
    position: relative;
    padding-left: 14px;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--dr-mocha, #8B7355);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 200ms ease;
}

.sol-gen-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--dr-mocha, #8B7355);
    background: transparent;
    transition: background 200ms ease, border-color 200ms ease;
}

.sol-gen-step.active {
    color: var(--dr-amber, #E69A4C);
    font-weight: 600;
}

.sol-gen-step.active::before {
    border-color: var(--dr-amber, #E69A4C);
    background: var(--dr-amber, #E69A4C);
    animation: sol-gen-step-pulse 1.4s ease-in-out infinite;
}

.sol-gen-step.complete {
    color: var(--dr-teal, #4CC4B4);
}

.sol-gen-step.complete::before {
    border-color: var(--dr-teal, #4CC4B4);
    background: var(--dr-teal, #4CC4B4);
    animation: none;
}

@keyframes sol-gen-step-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .sol-gen-step.active::before {
        animation: none;
    }
}

/* Live elapsed clock — tabular numerals so the ticking doesn't jitter */
.sol-gen-elapsed {
    flex-shrink: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--dr-amber, #E69A4C);
}

/* Explicit stall state: RETRY / CANCEL / KEEP PARTIAL DRAFT */
.sol-gen-stall {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--dr-burnt-sienna, #C75B39);
    border-radius: 6px;
    background: transparent;
}

.sol-gen-stall.hidden {
    display: none;
}

.sol-gen-stall-msg {
    font-size: 12px;
    color: var(--dr-burnt-sienna, #C75B39);
}

.sol-gen-stall-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sol-gen-stall-btns button {
    padding: 4px 12px;
    font-size: 11.5px;
    font-family: inherit;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--dr-mocha, #8B7355);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.sol-gen-stall-btns button:hover:not(:disabled) {
    border-color: var(--dr-amber, #E69A4C);
    color: var(--dr-amber, #E69A4C);
}

.sol-gen-stall-btns button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Retry is the primary recovery action */
#genStallRetry {
    border-color: var(--dr-amber, #E69A4C);
    color: var(--dr-amber, #E69A4C);
}