/* ==========================================================================
   SOMANOTES / SOMACURA — PHOSPHOR THEATRE TERMINAL THEME
   ==========================================================================

   Location:  /static/css/note-rail-terminal.css
   Activator: data-theme="terminal" on .note-rail element
   Default:   Terminal theme active (classic available via toggle)
   Version:   2.0.0 — Phosphor Theatre

   Design DNA:
   ┌──────────────────────────────────────────────────────────────────────┐
   │  Terminal/CLI × Art Deco Cinema × Bitcoin DeFi                      │
   │  Warm void · Dual accent (mint interactive / gold decorative)       │
   │  Stepped ziggurat corners · Film grain texture · Fan-motif dividers │
   │  Three-tier typography: Mono / Display / Body                       │
   │  Theatrical transitions · Neon phosphor glows                       │
   └──────────────────────────────────────────────────────────────────────┘

   Font Dependencies (load via Google Fonts or self-host):
     - JetBrains Mono 300..700       (labels, metadata, code, status)
     - Outfit 200..600               (display headings, stage titles, detection)
     - DM Sans 300..500, 400i        (clinical body text, note content)

   ========================================================================== */


/* ==========================================================================
   §1  DESIGN TOKENS — extracted to terminal-core.css (2026-02-20)
   All --term-* variables now defined globally on body[data-theme="terminal"].
   ========================================================================== */


/* ==========================================================================
   §2  RAIL CONTAINER
   ========================================================================== */

/* FIX (2026-03-09): Bumped font size tokens for the rail scope.
   BUG: Text was 9-11px throughout — too small for a clinical writing workspace.
   FIX: Override the --rail-text-* scale: each step bumps +1 for clinical readability.
   All downstream rules using var(--rail-text-*) inherit the bump automatically. */
.note-rail[data-theme="terminal"] {
    /* Type scale bump — each step +1 vs base for clinical readability */
    --rail-text-2xs:  0.625rem;    /* 10px (base: 9px)  */
    --rail-text-xs:   0.6875rem;   /* 11px (base: 10px) */
    --rail-text-sm:   0.75rem;     /* 12px (base: 11px) */
    --rail-text-base: 0.8125rem;   /* 13px (base: 12px) */
    --rail-text-md:   0.875rem;    /* 14px (base: 13px) */
    --rail-text-lg:   1rem;        /* 16px (base: 14px) */
    --rail-text-xl:   1.125rem;    /* 18px (base: 16px) */

    /* WHY: System sans chosen over DM Sans for clinical note readability at body size.
       Tokenized here so downstream rules use var(--rail-font-editor) instead of hardcoding. */
    --rail-font-editor: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* FIX (2026-04-24): Doctor reported generated-note text wasn't bright enough.
       --term-fg-primary (#E8E4DC, or #FFF7EE under dark-roast) reads dim on the void
       background when you're staring at 200+ words of clinical prose. A rail-local
       token keeps the body chrome (labels, metadata) at --term-fg-primary while
       pushing the primary reading surface — editor + streaming output — to pure
       white. Scoped to rail; other surfaces unaffected. */
    --rail-note-fg: #FFFFFF;

    /* Map generic rail tokens to terminal theme fonts */
    --rail-font-mono: var(--term-font-mono);
    --rail-font-body: var(--term-font-body);

    background: var(--term-bg-void);
    color: var(--term-fg-primary);
    font-family: var(--term-font-body);
    font-size: var(--term-text-base);
    line-height: 1.6;
    border-left: 1px solid var(--term-border-default);
    position: relative;
    overflow: hidden;
}

/* Film grain overlay — covers entire rail */
.note-rail[data-theme="terminal"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--term-grain);
    background-size: 512px 512px;
    pointer-events: none;
    z-index: 1;
}

/* Ensure all content sits above grain */
.note-rail[data-theme="terminal"] > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   §2b  STRUCTURAL OVERRIDES — Consolidated
   WHY: Terminal aesthetic uses sharp corners (ziggurat DNA). All rounded UI
   becomes angular. Gathered here from 25 scattered rules for maintainability.
   ========================================================================== */
.note-rail[data-theme="terminal"] .note-rail-theme-toggle,
.note-rail[data-theme="terminal"] .note-rail-toggle,
.note-rail[data-theme="terminal"] select,
.note-rail[data-theme="terminal"] textarea,
.note-rail[data-theme="terminal"] button:not(.note-rail-theme-toggle):not(.note-rail-collapse-toggle),
.note-rail[data-theme="terminal"] .rail-actions-overflow-toggle,
.note-rail[data-theme="terminal"] .clinical-update-counter,
.note-rail[data-theme="terminal"] .rail-secondary-actions,
.note-rail[data-theme="terminal"] .rail-problem-card,
.note-rail[data-theme="terminal"] .rail-tag,
.note-rail[data-theme="terminal"] .rail-editor,
.note-rail[data-theme="terminal"] ::-webkit-scrollbar-thumb,
.note-rail[data-theme="terminal"] .rail-tier-count,
.note-rail[data-theme="terminal"] .rail-core-card,
.note-rail[data-theme="terminal"] .rail-consolidations-badge,
.note-rail[data-theme="terminal"] .rail-consolidation-card,
.note-rail[data-theme="terminal"] .rail-cons-confidence,
.note-rail[data-theme="terminal"] .rail-cons-pill,
.note-rail[data-theme="terminal"] .rail-cons-apply,
.note-rail[data-theme="terminal"] .draft-version-chip,
.note-rail[data-theme="terminal"] .draft-version-chip.active::before,
.note-rail[data-theme="terminal"] .rail-note-card,
.note-rail[data-theme="terminal"] .rail-note-type,
.note-rail[data-theme="terminal"] .rail-detail-action-btn {
    border-radius: 0;
}

/* sol-action-btn needs !important to override inline specificity */
.note-rail[data-theme="terminal"] .sol-action-btn.primary {
    border-radius: 0 !important;
}


/* ==========================================================================
   §3  HEADER — Window Chrome
   ========================================================================== */

/* FIX (2026-03-11): Compact header — reduced from 44px to 36px
   BUG: Two stacked headers consumed 88px of chrome
   FIX: Tighter vertical padding, lower min-height */
.note-rail[data-theme="terminal"] .note-rail-header {
    background: var(--term-bg-header);
    border-bottom: 1px solid var(--term-border-default);
    padding: var(--term-space-xs) var(--term-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 36px;
}

/* Gold accent line under header — Art Deco transom */
.note-rail[data-theme="terminal"] .note-rail-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--term-gold-dim),
        transparent
    );
    pointer-events: none;
}

/* Traffic light dots — decorative window chrome.
   2026-09-02 (owner: "the box they are in doesn't fit them"): the 40px dots
   sat at right:16px, exactly over the 34px collapse toggle at the header's
   right end, so they painted across the "‹" box. Park them to its left. */
.note-rail[data-theme="terminal"] .note-rail-header::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--term-space-lg) + 46px); /* 34px toggle + 12px gap */
    transform: translateY(-50%);
    width: 40px;
    height: 10px;
    /* Three dots via radial gradients */
    background:
        radial-gradient(circle at 4px 5px,  #EF4444 3px, transparent 3.5px),
        radial-gradient(circle at 18px 5px, #F59E0B 3px, transparent 3.5px),
        radial-gradient(circle at 32px 5px, #22C55E 3px, transparent 3.5px);
    opacity: 0.6;
    pointer-events: none;
}

/* Status pill — glow text, no background
   FIX (2026-02-12): Selector was .note-rail-status (nonexistent).
   HTML uses .note-rail-status-pill > .status-label */
.note-rail[data-theme="terminal"] .note-rail-status-pill .status-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    font-weight: 500;
    letter-spacing: var(--term-tracking-widest);
    text-transform: uppercase;
    border: none;
    background: none;
    padding: 0;
    transition: color var(--term-duration-normal) var(--term-easing),
                text-shadow var(--term-duration-normal) var(--term-easing);
}

/* Patient name
   FIX (2026-02-12): Selector was .note-rail-patient-name; HTML uses .note-rail-patient-label */
.note-rail[data-theme="terminal"] .note-rail-patient-label {
    /* 2026-08-18 polish: the name clipped to "MOCK SEPSIS I…" with free
       space beside it — let it breathe and ellipsize only when truly out
       of room. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--term-font-display);
    font-size: var(--term-text-sm);
    font-weight: 400;
    color: var(--term-fg-primary);
    letter-spacing: 0.04em;
}


/* ==========================================================================
   §4  HEADER — Theme Toggle Button
   ========================================================================== */

.note-rail[data-theme="terminal"] .note-rail-theme-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--term-border-default);
    color: var(--term-fg-muted);
    font-size: var(--rail-text-lg);
    cursor: pointer;
    transition: all var(--term-duration-normal) var(--term-easing);
    will-change: border-color, box-shadow;
}

.note-rail[data-theme="terminal"] .note-rail-theme-toggle:hover {
    border-color: var(--term-gold-dim);
    color: var(--term-gold);
    box-shadow: var(--term-glow-gold);
}

.note-rail[data-theme="terminal"] .note-rail-theme-toggle:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: 2px;
}


/* ==========================================================================
   §5  HEADER — Collapse Toggle
   ========================================================================== */

/* FIX (2026-02-12): Selector was .note-rail-collapse-toggle (nonexistent).
   HTML uses .note-rail-toggle — base styles live in note-rail.css;
   terminal theme overrides colors/borders here. */
.note-rail[data-theme="terminal"] .note-rail-toggle {
    background: transparent;
    border: 1px solid var(--term-border-default);
    color: var(--term-fg-muted);
    font-family: var(--term-font-mono);
    cursor: pointer;
    transition: all var(--term-duration-normal) var(--term-easing);
}

.note-rail[data-theme="terminal"] .note-rail-toggle:hover {
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
    box-shadow: var(--term-glow-accent);
}


/* ==========================================================================
   §6  STAGE TITLES — Display Type + Prompt Prefix
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-stage-title {
    font-family: var(--term-font-display);
    font-size: var(--term-text-sm);
    font-weight: 300;
    letter-spacing: var(--term-tracking-widest);
    text-transform: uppercase;
    color: var(--term-gold);
    padding: var(--term-space-xl) var(--term-space-lg) var(--term-space-sm);
    display: flex;
    align-items: center;
    gap: var(--term-space-sm);
    text-shadow: 0 0 16px rgba(212, 168, 87, 0.20);
}

/* Prompt prefix > character */
.note-rail[data-theme="terminal"] .rail-stage-title::before {
    content: '>';
    font-family: var(--term-font-mono);
    font-weight: 700;
    font-size: var(--term-text-base);
    color: var(--term-accent);
    text-shadow: 0 0 10px rgba(0, 255, 208, 0.30);
    flex-shrink: 0;
}

/* Extending line after title text (Art Deco) */
.note-rail[data-theme="terminal"] .rail-stage-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--term-gold-dim),
        transparent 80%
    );
    margin-left: var(--term-space-md);
}


/* ==========================================================================
   §7  DETECTION PIPELINE — Terminal Theme Overrides
   ========================================================================== */

/* Pipeline stepper — terminal colors */
.note-rail[data-theme="terminal"] .detect-step.active {
    background: rgba(0, 255, 208, 0.06);
}

.note-rail[data-theme="terminal"] .detect-spinner {
    border-color: rgba(0, 255, 208, 0.2);
    border-top-color: var(--term-fg-primary);
}

.note-rail[data-theme="terminal"] .detect-step.complete .detect-step-icon::after {
    color: var(--term-fg-primary);
}

.note-rail[data-theme="terminal"] .detect-step-label {
    font-family: var(--term-font-mono);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .detect-step.active .detect-step-label {
    color: var(--term-fg-primary);
}

.note-rail[data-theme="terminal"] .detect-step-time {
    font-family: var(--term-font-mono);
    color: var(--term-gold-dim);
}

/* Timer in header — terminal mono */
.note-rail[data-theme="terminal"] .rail-detect-timer {
    font-family: var(--term-font-mono);
    color: var(--term-gold-dim);
}

/* Section headers — terminal gold */
.note-rail[data-theme="terminal"] .detect-section-header {
    color: var(--term-gold);
    font-family: var(--term-font-mono);
    letter-spacing: var(--term-tracking-wide);
}

/* Count badges — terminal accent */
.note-rail[data-theme="terminal"] .detect-problem-count,
.note-rail[data-theme="terminal"] .detect-merge-count {
    background: var(--term-fg-primary);
    color: var(--term-bg-void);
}

/* Problem cards — terminal surface */
.note-rail[data-theme="terminal"] .detect-problem-card {
    background: var(--term-bg-surface);
    border-color: var(--term-border-subtle);
}

.note-rail[data-theme="terminal"] .detect-problem-title {
    font-family: var(--term-font-mono);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .detect-problem-evidence {
    font-family: var(--term-font-mono);
    color: var(--term-fg-muted);
}

/* Cancel button — terminal style */
.note-rail[data-theme="terminal"] .detect-cancel-btn {
    font-family: var(--term-font-mono);
    border-color: var(--term-border-subtle);
    color: var(--term-fg-muted);
}

.note-rail[data-theme="terminal"] .detect-cancel-btn:hover {
    background: rgba(255, 59, 48, 0.08);
    color: var(--term-status-error);
    border-color: rgba(255, 59, 48, 0.3);
}

/* Merge status — terminal mono */
.note-rail[data-theme="terminal"] .detect-merges-status {
    font-family: var(--term-font-mono);
    color: var(--term-fg-muted);
}

.note-rail[data-theme="terminal"] .detect-merges-status::before {
    border-color: rgba(0, 255, 208, 0.2);
    border-top-color: var(--term-fg-primary);
}


/* Hero detection counter — large Outfit number with inset gold frame */
.note-rail[data-theme="terminal"] .rail-detection-count {
    display: flex;
    align-items: baseline;
    gap: var(--term-space-sm);
    padding: var(--term-space-md) var(--term-space-lg);
    margin: var(--term-space-sm) var(--term-space-lg);
    border: 1px solid var(--term-gold-subtle);
    position: relative;
}

.note-rail[data-theme="terminal"] .rail-detection-number {
    font-family: var(--term-font-display);
    font-weight: 200;
    font-size: var(--term-text-huge);
    line-height: 1;
    color: var(--term-fg-primary);
    letter-spacing: -0.02em;
}

.note-rail[data-theme="terminal"] .rail-detection-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-widest);
    text-transform: uppercase;
    color: var(--term-fg-muted);
}


/* ==========================================================================
   §7b  GENERATING STAGE — Terminal Theme Overrides
   ADDED (2026-04-24): The GENERATING stage (#railStageGenerating) inherited
   its styling entirely from note-rail.css (old pre-terminal theme). That left
   the streaming container in monospace at a dimmer body color — jarring
   against the rest of the rail. These overrides bring the streaming surface
   in line with the editor (same sans stack, same 17px, same bright fg),
   plus terminal treatment for the cancel button and stream-status label.

   NOTE: In the common path (progress/H&P/one-shot), #railStreamingOutput is
   not the live surface — note-generation.js forces stage=INPUT so streaming
   text lands in the Tiptap editor (see note-generation.js:2355-2365). But
   GENERATING still renders for brief windows and two-phase detection flows,
   and its header/footer/chips are visible throughout generation.
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-generating-body {
    padding: var(--term-space-md) var(--term-space-lg);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Streaming note content — match editor typography exactly.
   WHY: Same reading surface philosophy as the Tiptap editor: sans, 17px,
   1.7 leading, antialiased, bright white. pre-wrap preserves LLM newlines. */
.note-rail[data-theme="terminal"] .rail-streaming-output {
    font-family: var(--rail-font-editor);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--rail-note-fg);
    white-space: pre-wrap;
    -webkit-font-smoothing: antialiased;
    padding: 0;
}

/* Problem chips row during streaming — sharp-corner terminal pills. */
.note-rail[data-theme="terminal"] .rail-problem-chips {
    gap: var(--term-space-xs);
}

.note-rail[data-theme="terminal"] .rail-problem-chip {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-default);
    border-radius: 0;
    color: var(--term-fg-secondary);
    font-family: var(--term-font-mono);
    font-size: var(--rail-text-xs);
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
    padding: 3px 8px;
}

/* Stream status label (shared with detect stage) — terminal mono gold-dim. */
.note-rail[data-theme="terminal"] .rail-stream-status {
    font-family: var(--term-font-mono);
    font-size: var(--rail-text-xs);
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
    color: var(--term-gold-dim);
}

.note-rail[data-theme="terminal"] .rail-stream-dot {
    background: var(--term-status-generating);
    box-shadow: var(--term-glow-blue);
}

/* Cancel button — match detect-cancel-btn terminal treatment. */
.note-rail[data-theme="terminal"] .rail-cancel-btn {
    font-family: var(--term-font-mono);
    font-size: var(--rail-text-xs);
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--term-border-subtle);
    border-radius: 0;
    color: var(--term-fg-muted);
    padding: 6px 12px;
    transition: all 150ms ease;
}

.note-rail[data-theme="terminal"] .rail-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--term-status-error);
    border-color: rgba(239, 68, 68, 0.3);
}


/* ==========================================================================
   §8  DIVIDERS — Art Deco Fan Motif
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-divider {
    height: 1px;
    margin: var(--term-space-xl) var(--term-space-lg);
    position: relative;
    background: linear-gradient(
        to right,
        transparent,
        var(--term-gold-dim) 30%,
        var(--term-gold-dim) 70%,
        transparent
    );
}

/* Fan/sunburst glow above divider centerpoint */
.note-rail[data-theme="terminal"] .rail-divider::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 21px;
    background: radial-gradient(
        ellipse at bottom center,
        rgba(212, 168, 87, 0.10) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Accent variant — for major transitions */
.note-rail[data-theme="terminal"] .rail-divider-accent {
    background: linear-gradient(
        to right,
        transparent,
        var(--term-accent-dim) 25%,
        var(--term-accent-dim) 75%,
        transparent
    );
}

.note-rail[data-theme="terminal"] .rail-divider-accent::before {
    background: radial-gradient(
        ellipse at bottom center,
        rgba(0, 255, 208, 0.08) 0%,
        transparent 70%
    );
}


/* ==========================================================================
   §9  INPUTS — Bottom-Border with Warm Elevation
   ========================================================================== */

.note-rail[data-theme="terminal"] input,
.note-rail[data-theme="terminal"] select {
    width: 100%;
    background: var(--term-bg-input);
    border: none;
    border-bottom: 2px solid var(--term-border-default);
    color: var(--term-fg-primary);
    font-family: var(--term-font-body);
    font-size: var(--term-text-base);
    padding: var(--term-space-md) var(--term-space-sm);
    outline: none;
    transition: border-color var(--term-duration-normal) var(--term-easing),
                box-shadow var(--term-duration-normal) var(--term-easing);
}

.note-rail[data-theme="terminal"] input:focus,
.note-rail[data-theme="terminal"] select:focus {
    border-bottom-color: var(--term-accent);
    box-shadow: 0 4px 16px rgba(0, 255, 208, 0.10);
}

/* WHY: Base input has outline:none which blocks the §20 *:focus-visible rule.
   Re-apply outline on keyboard focus so doctors can tab through rail inputs. */
.note-rail[data-theme="terminal"] input:focus-visible,
.note-rail[data-theme="terminal"] select:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: 2px;
}

.note-rail[data-theme="terminal"] input::placeholder {
    color: var(--term-fg-muted);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wide);
}

/* Input labels — gold decorative with display font */
.note-rail[data-theme="terminal"] .rail-input-label,
.note-rail[data-theme="terminal"] label {
    font-family: var(--term-font-display);
    font-size: var(--term-text-xs);
    font-weight: 300;
    letter-spacing: var(--term-tracking-display);
    text-transform: uppercase;
    color: var(--term-gold);
    opacity: 0.6;
    margin-bottom: var(--term-space-xs);
    display: block;
}


/* ==========================================================================
   §10  TEXTAREAS — Note Editor / SOL Textarea
   ========================================================================== */

.note-rail[data-theme="terminal"] textarea {
    width: 100%;
    background: var(--term-bg-input);
    border: 1px solid var(--term-border-subtle);
    border-bottom: 2px solid var(--term-border-default);
    color: var(--term-fg-primary);
    font-family: var(--term-font-body);
    font-size: var(--term-text-base);
    line-height: 1.65;
    padding: var(--term-space-md);
    outline: none;
    resize: vertical;
    transition: border-color var(--term-duration-normal) var(--term-easing),
                box-shadow var(--term-duration-normal) var(--term-easing);
}

.note-rail[data-theme="terminal"] textarea:focus {
    border-color: var(--term-border-strong);
    border-bottom-color: var(--term-accent);
    box-shadow: 0 4px 20px rgba(0, 255, 208, 0.08);
}

.note-rail[data-theme="terminal"] textarea:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: 2px;
}

.note-rail[data-theme="terminal"] textarea::placeholder {
    color: var(--term-fg-muted);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
}


/* ==========================================================================
   §11  BUTTONS — Architectural Elements
   ========================================================================== */

/* — Base button reset — */
.note-rail[data-theme="terminal"] .rail-btn,
.note-rail[data-theme="terminal"] button:not(.note-rail-theme-toggle):not(.note-rail-collapse-toggle) {
    font-family: var(--term-font-display);
    font-size: var(--term-text-xs);
    font-weight: 400;
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--term-duration-normal) var(--term-easing);
    will-change: box-shadow, border-color;
    min-height: 36px;
    padding: var(--term-space-sm) var(--term-space-lg);
}

/* — Ghost (default) — */
.note-rail[data-theme="terminal"] .rail-btn {
    background: transparent;
    border: 1px solid var(--term-border-default);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .rail-btn:hover {
    border-color: var(--term-gold);
    color: var(--term-gold);
    box-shadow: var(--term-glow-gold);
}

/* — Primary (mint border) — */
.note-rail[data-theme="terminal"] .rail-btn-primary {
    background: transparent;
    border: 2px solid var(--term-accent);
    color: var(--term-accent);
    text-shadow: 0 0 10px rgba(0, 255, 208, 0.15);
}

.note-rail[data-theme="terminal"] .rail-btn-primary:hover {
    background: var(--term-accent);
    color: var(--term-fg-inverse);
    text-shadow: none;
    box-shadow: var(--term-glow-accent-intense);
}

/* — Solid (Generate Note CTA) — */
.note-rail[data-theme="terminal"] .rail-generate-btn {
    background: linear-gradient(135deg, var(--term-accent), #00DDC0);
    border: none;
    color: var(--term-fg-inverse);
    font-weight: 600;
    padding: var(--term-space-md) var(--term-space-xl);
    min-height: var(--sn-density-entry-control, 40px);   /* tier-1 #5: rail-action button = entry-density control */
}

.note-rail[data-theme="terminal"] .rail-generate-btn:hover {
    box-shadow: var(--term-glow-accent-intense);
}

/* — Danger — */
.note-rail[data-theme="terminal"] .rail-btn-danger {
    border-color: var(--term-status-error);
    color: var(--term-status-error);
}

.note-rail[data-theme="terminal"] .rail-btn-danger:hover {
    background: var(--term-status-error);
    color: var(--term-fg-primary);
    box-shadow: var(--term-glow-error);
}

/* — Disabled state (all variants) — */
/* FIX (2026-02-25): Bumped specificity to match the base button rule on line 506
   which uses :not() selectors that inflate specificity to (0,4,1).
   BUG: cursor: not-allowed was overridden by cursor: pointer from the base rule.
   ROOT CAUSE: :not(.x):not(.y) adds (0,2,0), making the base (0,4,1) > disabled (0,3,1).
   FIX: Match the :not() chain so disabled specificity = (0,5,1) > base (0,4,1). */
.note-rail[data-theme="terminal"] .rail-btn:disabled,
.note-rail[data-theme="terminal"] .rail-btn[disabled],
.note-rail[data-theme="terminal"] button:not(.note-rail-theme-toggle):not(.note-rail-collapse-toggle):disabled,
.note-rail[data-theme="terminal"] button:not(.note-rail-theme-toggle):not(.note-rail-collapse-toggle)[disabled] {
    /* 2026-08-19: 0.3 on an already-ghost button landed under 1.5:1 —
       disabled must still be findable. */
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* Prevent hover glow/color on disabled buttons */
.note-rail[data-theme="terminal"] button:disabled:hover,
.note-rail[data-theme="terminal"] button[disabled]:hover {
    border-color: var(--term-border-default) !important;
    color: var(--term-fg-secondary) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* — Pressed / :active state — 100ms depression on all rail buttons
   UX (2026-04-06): Closes the click→feedback gap. Doctor sees physical press
   confirmation before any async work begins.
   Scoped to :not(:disabled) — disabled buttons must never animate.
   prefers-reduced-motion: transforms replaced with opacity flash. */
.note-rail[data-theme="terminal"] .rail-btn:active:not(:disabled),
.note-rail[data-theme="terminal"] .rail-btn-primary:active:not(:disabled),
.note-rail[data-theme="terminal"] .rail-generate-btn:active:not(:disabled),
.note-rail[data-theme="terminal"] .rail-btn-danger:active:not(:disabled),
.note-rail[data-theme="terminal"] button:not(.note-rail-theme-toggle):not(.note-rail-collapse-toggle):active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    transition: transform 100ms ease, box-shadow 100ms ease;
}

/* DRT diff-review buttons — same press pattern */
.note-rail[data-theme="terminal"] .drt-btn:active:not(:disabled),
.note-rail[data-theme="terminal"] .drt-btn-sm:active:not(:disabled),
.note-rail[data-theme="terminal"] .drt-nav-btn:active:not(:disabled),
.note-rail[data-theme="terminal"] .drf-cancel-btn:active:not(:disabled),
.note-rail[data-theme="terminal"] .drf-finalize-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    transition: transform 100ms ease, box-shadow 100ms ease;
}

@media (prefers-reduced-motion: reduce) {
    /* Replace transform with opacity flash — no layout shift */
    .note-rail[data-theme="terminal"] .rail-btn:active:not(:disabled),
    .note-rail[data-theme="terminal"] .rail-btn-primary:active:not(:disabled),
    .note-rail[data-theme="terminal"] .rail-generate-btn:active:not(:disabled),
    .note-rail[data-theme="terminal"] .rail-btn-danger:active:not(:disabled),
    .note-rail[data-theme="terminal"] button:not(.note-rail-theme-toggle):not(.note-rail-collapse-toggle):active:not(:disabled),
    .note-rail[data-theme="terminal"] .drt-btn:active:not(:disabled),
    .note-rail[data-theme="terminal"] .drt-btn-sm:active:not(:disabled),
    .note-rail[data-theme="terminal"] .drt-nav-btn:active:not(:disabled),
    .note-rail[data-theme="terminal"] .drf-cancel-btn:active:not(:disabled),
    .note-rail[data-theme="terminal"] .drf-finalize-btn:active:not(:disabled) {
        transform: none;
        opacity: 0.75;
        box-shadow: none !important;
        transition: opacity 100ms ease;
    }
}


/* ==========================================================================
   §11b  OVERFLOW TOGGLE + GENERATE BUTTON — Terminal Theme Overrides
   ==========================================================================
   FIX (2026-03-09): The overflow `...` toggle and Generate Note button were
   inheriting SOL palette styles (indigo gradient, 14px radius, muted colors).
   These overrides force them into the terminal design system.
   ========================================================================== */

/* — Overflow toggle: prominent mint-accented icon button — */
.note-rail[data-theme="terminal"] .rail-actions-overflow-toggle {
    background: transparent;
    border: 1px solid var(--term-accent-dim);
    color: var(--term-accent);
    font-family: var(--term-font-mono);
    font-size: var(--rail-text-2xl);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: all var(--term-duration-normal) var(--term-easing);
    opacity: 0.7;
}

.note-rail[data-theme="terminal"] .rail-actions-overflow-toggle:hover {
    border-color: var(--term-accent);
    color: var(--term-accent);
    opacity: 1;
    box-shadow: var(--term-glow-accent);
}

.note-rail[data-theme="terminal"] .rail-actions-overflow-toggle[aria-expanded="true"] {
    border-color: var(--term-accent);
    color: var(--term-accent);
    background: rgba(0, 255, 208, 0.08);
    opacity: 1;
    box-shadow: var(--term-glow-accent);
}

/* — Inline loading spinner — [data-loading="true"] on async-action buttons
   UX (2026-04-06, B3): Per-button spinner closes the "did it register?" gap.
   Button text is hidden (color: transparent) — label width preserved.
   pointer-events: none prevents double-submission during async work.
   NOTE: #generateNoteBtn is excluded — it uses its own SVG spinner pattern
   injected directly via JS (note-generation.js) and must not be touched here.
   Targets: #saveNoteBtn, #tightenNoteBtn, .drf-finalize-btn, #signNoteBtn */
.note-rail[data-theme="terminal"] .sol-action-btn[data-loading="true"],
.note-rail[data-theme="terminal"] .rail-btn[data-loading="true"],
.note-rail[data-theme="terminal"] .drf-finalize-btn[data-loading="true"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    cursor: not-allowed;
}

.note-rail[data-theme="terminal"] .sol-action-btn[data-loading="true"]::after,
.note-rail[data-theme="terminal"] .rail-btn[data-loading="true"]::after,
.note-rail[data-theme="terminal"] .drf-finalize-btn[data-loading="true"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rail-btn-spin 0.7s linear infinite;
    /* Use the button's foreground color through text color inheritance */
    color: var(--term-accent);
}

/* For primary buttons (dark text on mint), use dark spinner */
.note-rail[data-theme="terminal"] .sol-action-btn.primary[data-loading="true"]::after {
    color: var(--term-fg-inverse);
}

@keyframes rail-btn-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* Static spinner — dots instead of rotation */
    .note-rail[data-theme="terminal"] .sol-action-btn[data-loading="true"]::after,
    .note-rail[data-theme="terminal"] .rail-btn[data-loading="true"]::after,
    .note-rail[data-theme="terminal"] .drf-finalize-btn[data-loading="true"]::after {
        animation: none;
        border-right-color: var(--term-accent); /* closed circle, no spin */
    }
}


/* — Generate Note CTA: mint gradient, sharp corners, terminal typography — */
.note-rail[data-theme="terminal"] #generateNoteBtn,
.note-rail[data-theme="terminal"] .sol-action-btn.primary {
    background: linear-gradient(135deg, var(--term-accent), #00DDC0) !important;
    border: none !important;
    color: var(--term-fg-inverse) !important;
    font-family: var(--term-font-display);
    font-weight: 600;
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    padding: var(--term-space-md) var(--term-space-xl);
    min-height: var(--sn-density-entry-control, 40px);   /* tier-1 #5: rail-action button = entry-density control */
    box-shadow: none;
    transition: all var(--term-duration-normal) var(--term-easing);
}

.note-rail[data-theme="terminal"] #generateNoteBtn:hover,
.note-rail[data-theme="terminal"] .sol-action-btn.primary:hover {
    box-shadow: var(--term-glow-accent-intense) !important;
    transform: none;
}

.note-rail[data-theme="terminal"] #generateNoteBtn::before,
.note-rail[data-theme="terminal"] .sol-action-btn.primary::before {
    display: none !important;  /* Kill the SOL gradient overlay pseudo-element */
}

/* — Warning / Tighten button: demoted to ghost+amber in terminal theme
   B5 (2026-04-06): The base warning class (solid amber fill) competes visually
   with the primary Save button. Terminal theme overrides it to outline+amber
   so Save remains the unambiguous primary in REVIEWING stage.
   prefers-reduced-motion note: no animation here, just color change. */
.note-rail[data-theme="terminal"] .sol-action-btn.warning {
    background: transparent;
    /* 2026-08-19 contrast pass: .5-alpha amber border was near-invisible on
       the void. Ghost keeps the transparent fill; the border stays legible. */
    border: 1px solid rgba(245, 158, 11, 0.85);
    color: rgba(245, 158, 11, 0.85);
}
.note-rail[data-theme="terminal"] .sol-action-btn.warning:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.8);
    color: rgb(245, 158, 11);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

/* — Character counter: terminal mono, no rounded corners — */
.note-rail[data-theme="terminal"] .clinical-update-counter {
    background: var(--term-bg-surface);
    color: var(--term-fg-muted);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wide);
}

/* — Secondary actions tray: terminal surface with border — */
.note-rail[data-theme="terminal"] .rail-secondary-actions {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-default);
}

/* — Companion button highlight — B7 (2026-04-06)
   When a textarea/input is focused, the button that acts on that field
   gets a subtle accent outline ring. Signals "this button will act here."
   Class .rail-btn--companion-active is added/removed via JS focusin/focusout.
   prefers-reduced-motion: outline still applies (no animation, just color). */
.note-rail[data-theme="terminal"] .rail-btn--companion-active,
.note-rail[data-theme="terminal"] .sol-action-btn.rail-btn--companion-active {
    outline: 1px solid var(--term-accent);
    outline-offset: 2px;
    box-shadow: 0 0 6px rgba(0, 255, 208, 0.15);
}
/* Ensure companion ring is visible even without hover */
.note-rail[data-theme="terminal"] .sol-action-btn.rail-btn--companion-active:not(:hover) {
    border-color: rgba(0, 255, 208, 0.4);
}


/* ==========================================================================
   §12  PROBLEM CARDS — Framed Exhibits with Stepped Corners
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-problem-card {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-subtle);
    margin: var(--term-space-sm) var(--term-space-md);
    padding: var(--term-space-lg) var(--term-space-lg) var(--term-space-lg);
    position: relative;
    transition:
        transform var(--term-duration-theatrical) var(--term-easing),
        border-color var(--term-duration-theatrical) var(--term-easing),
        box-shadow var(--term-duration-theatrical) var(--term-easing);
    will-change: transform, box-shadow;
}

/* — Stepped ziggurat corner: top-right —
   Uses clip-path to create a 2-step staircase motif.
   More authentically Art Deco than simple L-brackets. */
.note-rail[data-theme="terminal"] .rail-problem-card::before {
    content: '';
    position: absolute;
    top: var(--term-corner-offset);
    right: var(--term-corner-offset);
    width: var(--term-corner-size);
    height: var(--term-corner-size);
    border-top: var(--term-corner-width) solid var(--term-gold-dim);
    border-right: var(--term-corner-width) solid var(--term-gold-dim);
    opacity: 0.35;
    transition: opacity var(--term-duration-normal) var(--term-easing);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 40%, 0 40%);
}

/* — Stepped ziggurat corner: bottom-left — */
.note-rail[data-theme="terminal"] .rail-problem-card::after {
    content: '';
    position: absolute;
    bottom: var(--term-corner-offset);
    left: var(--term-corner-offset);
    width: var(--term-corner-size);
    height: var(--term-corner-size);
    border-bottom: var(--term-corner-width) solid var(--term-gold-dim);
    border-left: var(--term-corner-width) solid var(--term-gold-dim);
    opacity: 0.35;
    transition: opacity var(--term-duration-normal) var(--term-easing);
    pointer-events: none;
    clip-path: polygon(0 0, 40% 0, 40% 60%, 100% 60%, 100% 100%, 0 100%);
}

/* — Card hover: lift + glow + corners intensify — */
.note-rail[data-theme="terminal"] .rail-problem-card:hover {
    transform: translateY(-2px);
    border-color: var(--term-border-strong);
    box-shadow:
        0 0 12px rgba(212, 168, 87, 0.08),
        0 0 30px rgba(0, 255, 208, 0.03);
}

.note-rail[data-theme="terminal"] .rail-problem-card:hover::before,
.note-rail[data-theme="terminal"] .rail-problem-card:hover::after {
    opacity: 0.75;
}

/* — Card: selected state — */
.note-rail[data-theme="terminal"] .rail-problem-card.selected,
.note-rail[data-theme="terminal"] .rail-problem-card[data-selected="true"] {
    border-color: var(--term-gold-dim);
    background: linear-gradient(
        180deg,
        rgba(212, 168, 87, 0.04) 0%,
        var(--term-bg-surface) 100%
    );
}

.note-rail[data-theme="terminal"] .rail-problem-card.selected::before,
.note-rail[data-theme="terminal"] .rail-problem-card.selected::after,
.note-rail[data-theme="terminal"] .rail-problem-card[data-selected="true"]::before,
.note-rail[data-theme="terminal"] .rail-problem-card[data-selected="true"]::after {
    opacity: 0.7;
    border-color: var(--term-gold);
}

/* — Card title (Display font for scannable problem names) — */
.note-rail[data-theme="terminal"] .rail-problem-card .problem-name,
.note-rail[data-theme="terminal"] .rail-problem-card .card-title {
    font-family: var(--term-font-display);
    font-size: var(--term-text-lg);
    font-weight: 500;
    color: var(--term-fg-primary);
    letter-spacing: 0.02em;
    margin-bottom: var(--term-space-xs);
    line-height: 1.3;
}

/* — Card metadata (mono, tiny, uppercase) — */
.note-rail[data-theme="terminal"] .rail-problem-card .problem-meta,
.note-rail[data-theme="terminal"] .rail-problem-card .card-meta {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    font-weight: 400;
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    color: var(--term-fg-muted);
    margin-bottom: var(--term-space-sm);
}

/* — Card body (Body font — readable clinical text) —
   FIX (2026-02-12): Added .rail-problem-evidence (class from JS render) */
.note-rail[data-theme="terminal"] .rail-problem-card .problem-evidence,
.note-rail[data-theme="terminal"] .rail-problem-card .rail-problem-evidence,
.note-rail[data-theme="terminal"] .rail-problem-card .card-body {
    font-family: var(--term-font-body);
    font-size: var(--term-text-sm);
    font-weight: 400;
    color: var(--term-fg-secondary);
    line-height: 1.65;
}

/* — ICD code — */
.note-rail[data-theme="terminal"] .rail-problem-card .icd-code {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    font-weight: 500;
    color: var(--term-accent);
    opacity: 0.6;
    margin-top: var(--term-space-sm);
    text-shadow: 0 0 8px rgba(0, 255, 208, 0.12);
    transition: opacity var(--term-duration-normal);
}

.note-rail[data-theme="terminal"] .rail-problem-card.selected .icd-code,
.note-rail[data-theme="terminal"] .rail-problem-card[data-selected="true"] .icd-code {
    opacity: 1;
}

/* — Card entrance animation (stagger via JS --card-index) — */
@keyframes term-card-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-rail[data-theme="terminal"] .rail-problem-card[data-animate="enter"] {
    animation: term-card-enter var(--term-duration-entrance) var(--term-easing-dramatic) both;
    animation-delay: calc(var(--card-index, 0) * 50ms);
}


/* ==========================================================================
   §13  BLINKING CURSOR — Streaming Indicator
   ========================================================================== */

.note-rail[data-theme="terminal"] .term-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.15em;
    background: var(--term-accent);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: term-cursor-blink 1s step-end infinite;
}

@keyframes term-cursor-blink {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}


/* ==========================================================================
   §14  STATUS STATES — Glow-Based Communication
   ========================================================================== */

/* FIX (2026-02-12): Selectors targeted .note-rail-status (nonexistent).
   data-status lives on .note-rail; status text is in .status-label inside .note-rail-status-pill. */

/* Idle */
.note-rail[data-theme="terminal"][data-status="idle"] .status-label {
    color: var(--term-status-idle);
    text-shadow: none;
}

/* Generating */
.note-rail[data-theme="terminal"][data-status="generating"] .status-label {
    color: var(--term-status-generating);
    text-shadow:
        0 0 8px rgba(59, 130, 246, 0.40),
        0 0 20px rgba(59, 130, 246, 0.15);
}

/* Ready */
.note-rail[data-theme="terminal"][data-status="ready"] .status-label {
    color: var(--term-status-ready);
    text-shadow:
        0 0 8px rgba(34, 197, 94, 0.40),
        0 0 20px rgba(34, 197, 94, 0.15);
}

/* Editing */
.note-rail[data-theme="terminal"][data-status="editing"] .status-label {
    color: var(--term-status-editing);
    text-shadow:
        0 0 8px rgba(245, 158, 11, 0.40),
        0 0 20px rgba(245, 158, 11, 0.15);
}

/* Error */
.note-rail[data-theme="terminal"][data-status="error"] .status-label {
    color: var(--term-status-error);
    text-shadow:
        0 0 8px rgba(239, 68, 68, 0.50),
        0 0 16px rgba(239, 68, 68, 0.20);
}

/* WHY: Status pill needs visible background + glow during generation to give doctor
   immediate feedback that the system is working, not just a text-color change. */
.note-rail[data-theme="terminal"][data-status="generating"] .note-rail-status-pill {
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
    border-radius: 4px;
}

/* Status border glow on the rail itself */
.note-rail[data-theme="terminal"][data-status="generating"] {
    border-left-color: rgba(59, 130, 246, 0.3);
}
.note-rail[data-theme="terminal"][data-status="ready"] {
    border-left-color: rgba(34, 197, 94, 0.3);
}
.note-rail[data-theme="terminal"][data-status="editing"] {
    border-left-color: rgba(245, 158, 11, 0.3);
}
.note-rail[data-theme="terminal"][data-status="error"] {
    border-left-color: rgba(239, 68, 68, 0.4);
}


/* ==========================================================================
   §15  DRAFT CHIPS / TAGS
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-chip,
.note-rail[data-theme="terminal"] .rail-tag {
    display: inline-block;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    font-weight: 500;
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
    padding: 2px var(--term-space-sm);
    border: 1px solid var(--term-border-default);
    color: var(--term-fg-secondary);
    background: transparent;
    transition: all var(--term-duration-normal) var(--term-easing);
}

.note-rail[data-theme="terminal"] .rail-chip:hover {
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
    box-shadow: var(--term-glow-accent);
}

.note-rail[data-theme="terminal"] .rail-chip.active {
    border-color: var(--term-accent);
    color: var(--term-accent);
    background: var(--term-accent-ghost);
}


/* ==========================================================================
   §16  STATUS BAR (Footer)
   ========================================================================== */

/* FIX (2026-03-11): Compact footer — 20px to match base rail */
.note-rail[data-theme="terminal"] .note-rail-footer,
.note-rail[data-theme="terminal"] .note-rail-status-bar {
    background: var(--term-bg-header);
    border-top: 1px solid var(--term-border-default);
    padding: 1px var(--term-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wider);
    color: var(--term-fg-muted);
    min-height: 20px;
}

.note-rail[data-theme="terminal"] .note-rail-footer .status-active {
    color: var(--term-status-ready);
    text-shadow:
        0 0 8px rgba(34, 197, 94, 0.30),
        0 0 20px rgba(34, 197, 94, 0.08);
}


/* ==========================================================================
   §17  SOL EDITOR OVERRIDES
   ========================================================================== */

/* Editor container
   FIX (2026-02-12): Added .sol-note-editor-wrapper (actual class from HTML) */
.note-rail[data-theme="terminal"] .sol-editor-container,
.note-rail[data-theme="terminal"] .sol-note-editor-wrapper,
.note-rail[data-theme="terminal"] .rail-editor {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-subtle);
    position: relative;
}

/* Editor toolbar
   FIX (2026-02-12): Added .pm-toolbar (actual class from HTML) */
.note-rail[data-theme="terminal"] .sol-toolbar,
.note-rail[data-theme="terminal"] .pm-toolbar,
.note-rail[data-theme="terminal"] .rail-editor-toolbar {
    background: var(--term-bg-header);
    border-bottom: 1px solid var(--term-border-default);
    padding: var(--term-space-xs) var(--term-space-sm);
}

.note-rail[data-theme="terminal"] .sol-toolbar button,
.note-rail[data-theme="terminal"] .pm-toolbar .pm-toolbar-button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--term-fg-muted);
    min-height: 28px;
    min-width: 28px;
    padding: var(--term-space-xs);
}

.note-rail[data-theme="terminal"] .sol-toolbar button:hover,
.note-rail[data-theme="terminal"] .pm-toolbar .pm-toolbar-button:hover {
    border-color: var(--term-border-default);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .sol-toolbar button.active,
.note-rail[data-theme="terminal"] .pm-toolbar .pm-toolbar-button.active {
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
}

/* Editor body text (ProseMirror content area)
   FIX (2026-02-12): Added .sol-note-content and .ProseMirror (actual classes)
   FIX (2026-03-09): Bumped editor font to 17px with tighter leading for clinical prose.
   WHY: Doctors read generated notes in the rail — readability > density here.
   Using system sans stack for clinical content (cleaner than DM Sans at body size). */
.note-rail[data-theme="terminal"] .sol-editor,
.note-rail[data-theme="terminal"] .sol-note-content,
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror,
.note-rail[data-theme="terminal"] .rail-editor-content {
    font-family: var(--rail-font-editor);
    font-size: 1.0625rem;  /* 17px — one step above base for clinical readability */
    /* FIX (2026-04-24): Switched from --term-fg-primary to --rail-note-fg (#FFF).
       See token declaration above for context. */
    color: var(--rail-note-fg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Padding only on the ProseMirror editor (not double-applied) */
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror {
    padding: var(--term-space-lg);
}

/* FIX (2026-04-24): Neutralize tiptap-editor.css + sol-layout.css chrome.
   The live streaming surface is the Tiptap editor (#noteContent / ProseMirror).
   Tiptap ships its own light-theme chrome — container border, border-radius,
   raised background, blue H2 accent bar, H1 underline, focus ring — that was
   leaking through under data-theme=terminal and making the rail note look
   like a different product. These rules match the terminal-theme container
   aesthetic (sharp, void background, no raised chrome). */
.note-rail[data-theme="terminal"] .sol-note-content,
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
}

.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror:focus,
.note-rail[data-theme="terminal"] .sol-note-content .tiptap:focus,
.note-rail[data-theme="terminal"] .sol-note-content:focus-within {
    border: none;
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

/* Kill the blue H2 accent bar (::before pseudo) from tiptap-editor.css.
   Terminal H2 is uppercase gold-tracked — the blue bar clashed. */
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror h2 {
    padding-left: 0;
    position: static;
}
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror h2::before {
    content: none;
    display: none;
    background: transparent;
}

/* Kill H1 border-bottom + padding-bottom from both tiptap-editor.css and
   sol-layout.css. Terminal H1 stands on letter-spacing alone. */
.note-rail[data-theme="terminal"] .sol-note-content h1,
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror h1 {
    border-bottom: none;
    padding-bottom: 0;
}

/* Paragraph rhythm — tighten the 0.75em–0.8em default so clinical prose
   doesn't look over-aired during streaming. */
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror p,
.note-rail[data-theme="terminal"] .sol-note-content p {
    margin: 0 0 0.4em 0;
}

/* List markers — tiptap-editor.css tints list bullets --tt-accent (blue).
   Match terminal gold. */
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror ul > li::marker,
.note-rail[data-theme="terminal"] .sol-note-content .ProseMirror ol > li::marker {
    color: var(--term-gold);
}

/* FIX (2026-04-24): Streaming-mode line breaks.
   During streaming, note-generation.js appends each LLM chunk to the Tiptap
   editor via insertContentAt(endPos, rawText). ProseMirror inserts that as
   inline text in the last paragraph — \n characters are kept as literal text
   but collapse to a single space under default white-space:normal. Result:
   the doctor sees a wall of text with no visible line breaks until
   finishStreaming() runs the structural parse at end-of-stream.
   pre-wrap during the streaming window makes those embedded newlines render
   as breaks in real time. Scoped to #noteContent.streaming so the normal
   (post-parse) layout is unaffected once the class is removed. */
.note-rail[data-theme="terminal"] #noteContent.streaming .ProseMirror,
.note-rail[data-theme="terminal"] #noteContent.streaming .ProseMirror p {
    white-space: pre-wrap;
}

/* Section headers within the note */
.note-rail[data-theme="terminal"] .sol-editor h1,
.note-rail[data-theme="terminal"] .sol-editor h2,
.note-rail[data-theme="terminal"] .sol-editor h3,
.note-rail[data-theme="terminal"] .sol-note-content h1,
.note-rail[data-theme="terminal"] .sol-note-content h2,
.note-rail[data-theme="terminal"] .sol-note-content h3,
.note-rail[data-theme="terminal"] .rail-editor-content h1,
.note-rail[data-theme="terminal"] .rail-editor-content h2,
.note-rail[data-theme="terminal"] .rail-editor-content h3 {
    font-family: var(--term-font-display);
    font-weight: 500;
    letter-spacing: var(--term-tracking-wide);
    color: var(--term-fg-primary);
    margin-top: var(--term-space-xl);
    margin-bottom: var(--term-space-sm);
}

.note-rail[data-theme="terminal"] .sol-editor h1,
.note-rail[data-theme="terminal"] .sol-note-content h1 { font-size: var(--term-text-lg); }
.note-rail[data-theme="terminal"] .sol-editor h2,
.note-rail[data-theme="terminal"] .sol-note-content h2 { font-size: var(--term-text-base); text-transform: uppercase; letter-spacing: var(--term-tracking-wider); }
.note-rail[data-theme="terminal"] .sol-editor h3,
.note-rail[data-theme="terminal"] .sol-note-content h3 { font-size: var(--term-text-sm); color: var(--term-gold); text-transform: uppercase; letter-spacing: var(--term-tracking-display); }


/* ==========================================================================
   §18  SCROLLBAR
   ========================================================================== */

/* WHY: Firefox needs scrollbar-width/scrollbar-color; WebKit needs ::-webkit-scrollbar.
   Hover state uses accent color for terminal aesthetic consistency. */
.note-rail[data-theme="terminal"] {
    scrollbar-width: thin;
    scrollbar-color: var(--term-border-default) var(--term-bg-void);
}

.note-rail[data-theme="terminal"] .note-rail-body,
.note-rail[data-theme="terminal"] .rail-note-body {
    scrollbar-width: thin;
    scrollbar-color: var(--term-border-default) var(--term-bg-void);
}

.note-rail[data-theme="terminal"] ::-webkit-scrollbar {
    width: 8px;
}

.note-rail[data-theme="terminal"] ::-webkit-scrollbar-track {
    background: var(--term-bg-void);
}

.note-rail[data-theme="terminal"] ::-webkit-scrollbar-thumb {
    background: var(--term-border-default);
    border-radius: 4px;
}

.note-rail[data-theme="terminal"] ::-webkit-scrollbar-thumb:hover {
    background: var(--term-accent);
}


/* ==========================================================================
   §19  RAIL STAGES — State-Specific Layouts
   ========================================================================== */

/* Detecting stage — pipeline active step glow */
.note-rail[data-theme="terminal"] .detect-step.active {
    box-shadow: inset 0 0 20px rgba(0, 255, 208, 0.04);
}

/* Error stage */
.note-rail[data-theme="terminal"] .rail-stage-error {
    border-left: 3px solid var(--term-status-error);
    padding-left: var(--term-space-md);
    margin: var(--term-space-md) var(--term-space-lg);
}

.note-rail[data-theme="terminal"] .rail-stage-error .error-title {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-sm);
    font-weight: 600;
    color: var(--term-status-error);
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.note-rail[data-theme="terminal"] .rail-stage-error .error-message {
    font-family: var(--term-font-body);
    font-size: var(--term-text-sm);
    color: var(--term-fg-secondary);
    margin-top: var(--term-space-xs);
}


/* ==========================================================================
   §20  FOCUS STATES — Accessibility
   ========================================================================== */

.note-rail[data-theme="terminal"] *:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: 2px;
}

/* Suppress focus ring on mouse click */
.note-rail[data-theme="terminal"] *:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   §21  REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .note-rail[data-theme="terminal"] * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .note-rail[data-theme="terminal"] .term-cursor {
        animation: none;
        opacity: 1;
    }

    .note-rail[data-theme="terminal"] .rail-problem-card:hover {
        transform: none;
    }
}


/* ==========================================================================
   §22  RESPONSIVE — Tablets
   ========================================================================== */

@media (max-width: 768px) {
    .note-rail[data-theme="terminal"] {
        --term-text-huge: 3rem;
        --term-corner-size: 12px;
        --term-corner-offset: 4px;
        --term-space-2xl: 24px;
    }

    /* Hide traffic light dots on mobile */
    .note-rail[data-theme="terminal"] .note-rail-header::before {
        display: none;
    }
}


/* ==========================================================================
   §23  RESPONSIVE — Mobile
   ========================================================================== */

@media (max-width: 480px) {
    .note-rail[data-theme="terminal"] {
        --term-text-huge: 2.5rem;
        --term-space-lg: 12px;
        --term-space-xl: 16px;
        --term-corner-size: 10px;
    }

    /* Hide extending line after stage titles */
    .note-rail[data-theme="terminal"] .rail-stage-title::after {
        display: none;
    }

    /* Reduce fan motif on dividers */
    .note-rail[data-theme="terminal"] .rail-divider::before {
        display: none;
    }

    /* Stack buttons */
    .note-rail[data-theme="terminal"] .rail-btn-group {
        flex-direction: column;
    }
}


/* ==========================================================================
   §24  COLLAPSED STATE
   ========================================================================== */

.note-rail[data-theme="terminal"].collapsed {
    width: 48px;
    min-width: 48px;
    transition: width var(--term-duration-normal) var(--term-easing);
}

.note-rail[data-theme="terminal"].collapsed .note-rail-body {
    display: none;
}

.note-rail[data-theme="terminal"].collapsed .note-rail-header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: var(--term-space-lg) var(--term-space-sm);
    min-height: auto;
    height: 100%;
}


/* ==========================================================================
   §25  SELECTION / HIGHLIGHT
   ========================================================================== */

.note-rail[data-theme="terminal"] ::selection {
    background: rgba(0, 255, 208, 0.20);
    color: var(--term-fg-primary);
}

.note-rail[data-theme="terminal"] ::-moz-selection {
    background: rgba(0, 255, 208, 0.20);
    color: var(--term-fg-primary);
}


/* ==========================================================================
   §26  UTILITY CLASSES
   ========================================================================== */

/* Text colors */
.note-rail[data-theme="terminal"] .term-text-accent  { color: var(--term-accent); }
.note-rail[data-theme="terminal"] .term-text-gold    { color: var(--term-gold); }
.note-rail[data-theme="terminal"] .term-text-muted   { color: var(--term-fg-muted); }
.note-rail[data-theme="terminal"] .term-text-error   { color: var(--term-status-error); }

/* Font families */
.note-rail[data-theme="terminal"] .term-font-mono    { font-family: var(--term-font-mono); }
.note-rail[data-theme="terminal"] .term-font-display { font-family: var(--term-font-display); }
.note-rail[data-theme="terminal"] .term-font-body    { font-family: var(--term-font-body); }

/* Tracking */
.note-rail[data-theme="terminal"] .term-tracking-wide    { letter-spacing: var(--term-tracking-wide); }
.note-rail[data-theme="terminal"] .term-tracking-wider   { letter-spacing: var(--term-tracking-wider); }
.note-rail[data-theme="terminal"] .term-tracking-widest  { letter-spacing: var(--term-tracking-widest); }

/* Glow effects */
.note-rail[data-theme="terminal"] .term-glow-accent { box-shadow: var(--term-glow-accent); }
.note-rail[data-theme="terminal"] .term-glow-gold   { box-shadow: var(--term-glow-gold); }


/* ==========================================================================
   §27  PROMPT PREFIX SYSTEM — Recurring Terminal Motif
   ==========================================================================
   Every content zone gets its own prefix glyph. This makes the prompt
   character a system-wide signature, not a one-off on stage titles.

     >  Stage titles   (mint)   — §6
     $  Input labels   (gold)   — below
     // Card metadata  (muted)  — below
     !  Error titles   (red)    — below
     ~  Footer status  (muted)  — §33
   ========================================================================== */

/* Input labels: $ prefix in gold.
   FIX (2026-08-18 polish): the bare `label::before` arm was a shotgun — it
   stamped the shell prompt on EVERY rail label, including the checkbox
   wrappers on the two-phase problem cards, which rendered a meaningless
   stray "$" on each problem (harness screenshot). Prompt only labels that
   CAPTION a field, never labels that wrap a control. */
.note-rail[data-theme="terminal"] .rail-input-label::before,
.note-rail[data-theme="terminal"] label:not(:has(input, select, textarea))::before {
    content: '$ ';
    font-family: var(--term-font-mono);
    font-weight: 600;
    font-size: inherit;
    color: var(--term-gold);
    opacity: 0.45;
    letter-spacing: 0;
    text-transform: none;
}

/* Card metadata: // prefix */
.note-rail[data-theme="terminal"] .rail-problem-card .problem-meta::before,
.note-rail[data-theme="terminal"] .rail-problem-card .card-meta::before {
    content: '// ';
    letter-spacing: normal;
    font-weight: 400;
    color: var(--term-fg-muted);
    opacity: 0.5;
}

/* Error titles: ! prefix with red glow */
.note-rail[data-theme="terminal"] .rail-stage-error .error-title::before {
    content: '! ';
    font-family: var(--term-font-mono);
    font-weight: 700;
    color: var(--term-status-error);
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}


/* ==========================================================================
   §28  NEON STATUS TUBE — Left Edge Power Indicator
   ==========================================================================
   Replaces the subtle 1px border-left with a 3px neon tube that glows
   with status color. The rail's "power indicator" — visible from across
   the room during a long shift.
   ========================================================================== */

/* Widen the left border to tube width */
.note-rail[data-theme="terminal"] {
    border-left-width: 3px;
}

/* Generating: pulsing blue tube */
.note-rail[data-theme="terminal"][data-status="generating"] {
    border-left-color: var(--term-status-generating);
    box-shadow:
        inset 4px 0 12px rgba(59, 130, 246, 0.15),
        inset 2px 0 4px rgba(59, 130, 246, 0.30);
    animation: term-tube-pulse-blue 2s ease-in-out infinite;
}

@keyframes term-tube-pulse-blue {
    0%, 100% {
        box-shadow:
            inset 4px 0 12px rgba(59, 130, 246, 0.15),
            inset 2px 0 4px rgba(59, 130, 246, 0.30);
    }
    50% {
        box-shadow:
            inset 6px 0 20px rgba(59, 130, 246, 0.25),
            inset 3px 0 8px rgba(59, 130, 246, 0.45);
    }
}

/* Ready: steady green tube */
.note-rail[data-theme="terminal"][data-status="ready"] {
    border-left-color: var(--term-status-ready);
    box-shadow:
        inset 4px 0 12px rgba(34, 197, 94, 0.12),
        inset 2px 0 4px rgba(34, 197, 94, 0.25);
}

/* Editing: steady amber tube */
.note-rail[data-theme="terminal"][data-status="editing"] {
    border-left-color: var(--term-status-editing);
    box-shadow:
        inset 4px 0 12px rgba(245, 158, 11, 0.12),
        inset 2px 0 4px rgba(245, 158, 11, 0.25);
}

/* Error: intense red tube */
.note-rail[data-theme="terminal"][data-status="error"] {
    border-left-color: var(--term-status-error);
    box-shadow:
        inset 4px 0 12px rgba(239, 68, 68, 0.15),
        inset 2px 0 4px rgba(239, 68, 68, 0.35);
}


/* ==========================================================================
   §29  GOLD KEYLINE FRAMES — Geometric Container Accents
   ==========================================================================
   Different containers get different gold frame treatments, creating a
   family of architectural frames under one system. Each frame variant
   uses different geometry to avoid monotony.
   ========================================================================== */

/* Editor container: double gold transom (top + bottom) with asymmetric inset
   FIX (2026-02-12): Added .sol-note-editor-wrapper (actual class from HTML) */
.note-rail[data-theme="terminal"] .sol-editor-container::before,
.note-rail[data-theme="terminal"] .sol-note-editor-wrapper::before,
.note-rail[data-theme="terminal"] .rail-editor::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--term-gold-dim), transparent);
    pointer-events: none;
    z-index: 1;
}

.note-rail[data-theme="terminal"] .sol-editor-container::after,
.note-rail[data-theme="terminal"] .sol-note-editor-wrapper::after,
.note-rail[data-theme="terminal"] .rail-editor::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--term-gold-subtle), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Detection pipeline: gold accent on section headers */
.note-rail[data-theme="terminal"] .detect-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    margin-left: var(--term-space-sm);
    background: linear-gradient(to right, var(--term-gold-ghost), transparent);
}


/* ==========================================================================
   §30  GEOMETRIC CARD NUMBERING — Exhibit Numbers
   ==========================================================================
   Problem cards get oversized exhibit numbers (01, 02, 03...) in the
   corner — Outfit at weight 200, barely visible gold watermark. Turns
   a list of cards into a numbered gallery of clinical findings.
   ========================================================================== */

/* Counter on rail, increment on each card */
.note-rail[data-theme="terminal"] {
    counter-reset: card-number;
}

.note-rail[data-theme="terminal"] .rail-problem-card {
    counter-increment: card-number;
}

/* Watermark number via card-title pseudo-element.
   Positioned absolutely relative to .rail-problem-card (nearest positioned ancestor)
   since .problem-name/.card-title does not have position: relative. */
.note-rail[data-theme="terminal"] .rail-problem-card .problem-name::before,
.note-rail[data-theme="terminal"] .rail-problem-card .card-title::before {
    content: counter(card-number, decimal-leading-zero);
    position: absolute;
    top: var(--term-space-sm);
    right: var(--term-space-xl);
    font-family: var(--term-font-display);
    font-weight: 200;
    font-size: var(--term-text-2xl);
    line-height: 1;
    color: var(--term-gold);
    opacity: 0.07;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 0;
}

/* Intensify number on card hover */
.note-rail[data-theme="terminal"] .rail-problem-card:hover .problem-name::before,
.note-rail[data-theme="terminal"] .rail-problem-card:hover .card-title::before {
    opacity: 0.14;
}

/* Full visibility on selected card */
.note-rail[data-theme="terminal"] .rail-problem-card.selected .problem-name::before,
.note-rail[data-theme="terminal"] .rail-problem-card.selected .card-title::before,
.note-rail[data-theme="terminal"] .rail-problem-card[data-selected="true"] .problem-name::before,
.note-rail[data-theme="terminal"] .rail-problem-card[data-selected="true"] .card-title::before {
    opacity: 0.18;
    color: var(--term-gold);
}


/* ==========================================================================
   §31  STEPPED GEOMETRIC SHADOWS — Art Deco Depth
   ==========================================================================
   Hard-edged stacked offset shadows that create visible staircase depth.
   Distinctly Art Deco, distinctly un-Tailwind. Combined with the existing
   glow system for elevated surfaces that feel both geometric and luminous.
   ========================================================================== */

/* Editor container: stepped shadow
   FIX (2026-02-12): Added .sol-note-editor-wrapper */
.note-rail[data-theme="terminal"] .sol-editor-container,
.note-rail[data-theme="terminal"] .sol-note-editor-wrapper,
.note-rail[data-theme="terminal"] .rail-editor {
    box-shadow:
        2px 2px 0 var(--term-border-subtle),
        4px 4px 0 rgba(12, 11, 10, 0.6);
}

/* Card hover: stepped shadow + glow hybrid (overrides §12 box-shadow) */
.note-rail[data-theme="terminal"] .rail-problem-card:hover {
    box-shadow:
        2px 2px 0 var(--term-border-subtle),
        4px 4px 0 rgba(12, 11, 10, 0.6),
        0 0 12px rgba(212, 168, 87, 0.08),
        0 0 30px rgba(0, 255, 208, 0.03);
}

/* Selected card: stepped shadow in gold */
.note-rail[data-theme="terminal"] .rail-problem-card.selected,
.note-rail[data-theme="terminal"] .rail-problem-card[data-selected="true"] {
    box-shadow:
        2px 2px 0 rgba(212, 168, 87, 0.12),
        4px 4px 0 rgba(12, 11, 10, 0.5);
}


/* ==========================================================================
   §32  STAGE TRANSITION CURTAIN — Theatrical Reveal
   ==========================================================================
   When switching between rail stages, a brief gold gradient line sweeps
   top-to-bottom like a theatre curtain before new content appears.
   Applied via JS by adding .rail-stage-enter to the incoming stage.
   ========================================================================== */

@keyframes term-stage-reveal {
    from {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0);
    }
}

@keyframes term-curtain-sweep {
    0% {
        top: 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Stage entrance: content reveals top-to-bottom */
.note-rail[data-theme="terminal"] .rail-stage-enter {
    animation: term-stage-reveal 150ms var(--term-easing-dramatic) both; /* 400→150 (2026-09-01): the curtain sat on top of the rail open */
    position: relative;
    overflow: hidden;
}

/* Gold sweep line during entrance */
.note-rail[data-theme="terminal"] .rail-stage-enter::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--term-gold), transparent);
    top: 0;
    animation: term-curtain-sweep 150ms var(--term-easing) both;
    pointer-events: none;
    z-index: 10;
    box-shadow: var(--term-glow-gold);
}


/* ==========================================================================
   §33  TICKER-TAPE FOOTER — Living Status Line
   ==========================================================================
   The footer gets a ~ prompt prefix and a trailing blinking cursor,
   making the status bar feel like an active terminal session.
   ========================================================================== */

/* Prompt prefix */
.note-rail[data-theme="terminal"] .note-rail-footer::before,
.note-rail[data-theme="terminal"] .note-rail-status-bar::before {
    content: '~';
    font-family: var(--term-font-mono);
    color: var(--term-fg-muted);
    opacity: 0.35;
    flex-shrink: 0;
    margin-right: var(--term-space-xs);
}

/* Trailing blinking cursor */
@keyframes term-ticker-blink {
    0%, 50%  { opacity: 0.25; }
    51%, 100% { opacity: 0; }
}

.note-rail[data-theme="terminal"] .note-rail-footer::after,
.note-rail[data-theme="terminal"] .note-rail-status-bar::after {
    content: '\2588';  /* █ full block */
    font-family: var(--term-font-mono);
    font-size: 0.7em;
    color: var(--term-fg-muted);
    animation: term-ticker-blink 1.5s step-end infinite;
    flex-shrink: 0;
    margin-left: var(--term-space-xs);
}


/* ==========================================================================
   §34  DIFF REVIEW MODE — Proposed Changes Inline Review
   ==========================================================================
   Activated when data-status="reviewing" on .note-rail.
   Contains: diff toolbar, evidence tooltip, review footer, suggestion marks.

   ARCHITECTURE: All styles scoped under .note-rail[data-theme="terminal"]
   WHY: Diff-first progress notes show only changes for faster review
   NOTE: Gold accent exception for re-prompt button (interactive, documented)
   ========================================================================== */

/* Rail border glow in REVIEWING state (amber/editing color) */
.note-rail[data-theme="terminal"][data-status="reviewing"] {
    border-color: var(--term-status-editing);
    box-shadow:
        0 0 8px rgba(245, 158, 11, 0.20),
        0 0 24px rgba(245, 158, 11, 0.06);
}

/* ── Diff Review Toolbar ─────────────────────────────────────────── */

/* NOTE: diff-review editor chrome hiding (display:none !important) is defined
   in note-rail.css (base). Not duplicated here. */

/* FIX (2026-02-11): Compact toolbar — was 122px with wrap, now ~70px single row
   WHY: Chrome was eating 242/359px of rail body, editor had 0 height */
.note-rail[data-theme="terminal"] .diff-review-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--term-bg-elevated, #1B1A16);
    border-bottom: 1px solid var(--term-border-default, #2A2720);
    font-family: var(--term-font-mono);
    font-size: 0.72rem;
    flex-wrap: wrap;
    min-height: 32px;
    flex-shrink: 0;
    animation: drt-slide-in 0.25s ease-out;
}

@keyframes drt-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Navigation */
.note-rail[data-theme="terminal"] .drt-nav {
    display: flex;
    align-items: center;
    gap: var(--term-space-xs, 4px);
}

.note-rail[data-theme="terminal"] .drt-nav-btn {
    background: transparent;
    border: 1px solid var(--term-border-subtle, #1E1C18);
    color: var(--term-fg-secondary, #A09888);
    border-radius: 4px;
    padding: 2px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.15s, border-color 0.15s;
}
.note-rail[data-theme="terminal"] .drt-nav-btn:hover {
    color: var(--term-accent, #00FFD0);
    border-color: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
}

.note-rail[data-theme="terminal"] .drt-change-label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}
.note-rail[data-theme="terminal"] .drt-problem-title {
    font-family: var(--term-font-display);
    font-weight: 500;
    color: var(--term-fg-primary, #E8E4DC);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-rail[data-theme="terminal"] .drt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 600;
    font-family: var(--term-font-mono);
    white-space: nowrap;
    margin-left: 4px;
}
.note-rail[data-theme="terminal"] .drt-status-badge.improving {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.30);
}
.note-rail[data-theme="terminal"] .drt-status-badge.worsening {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.30);
}
.note-rail[data-theme="terminal"] .drt-status-badge.stable {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.note-rail[data-theme="terminal"] .drt-status-badge.new {
    background: rgba(0, 255, 208, 0.12);
    color: var(--term-accent, #00FFD0);
    border: 1px solid rgba(0, 255, 208, 0.25);
}
.note-rail[data-theme="terminal"] .drt-change-counter {
    color: var(--term-fg-muted, #564E42);
    font-size: 0.7rem;
}

/* Action buttons */
.note-rail[data-theme="terminal"] .drt-actions {
    display: flex;
    gap: var(--term-space-xs, 4px);
    margin-left: auto;
}

.note-rail[data-theme="terminal"] .drt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid;
    font-family: var(--term-font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.note-rail[data-theme="terminal"] .drt-accept {
    background: transparent;
    border-color: var(--term-status-ready, #22C55E);
    color: var(--term-status-ready, #22C55E);
}
.note-rail[data-theme="terminal"] .drt-accept:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.12);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.20);
}

.note-rail[data-theme="terminal"] .drt-reject {
    background: transparent;
    border-color: var(--term-status-error, #EF4444);
    color: var(--term-status-error, #EF4444);
}
.note-rail[data-theme="terminal"] .drt-reject:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.20);
}

/* NOTE: Gold accent exception for re-prompt — normally decorative only,
   but here used interactively because it semantically represents "revise/redo"
   which is distinct from accept (green) and reject (red). Documented exception. */
.note-rail[data-theme="terminal"] .drt-reprompt {
    background: transparent;
    border-color: var(--term-gold, #D4A857);
    color: var(--term-gold, #D4A857);
}
.note-rail[data-theme="terminal"] .drt-reprompt:hover:not(:disabled) {
    background: var(--term-gold-subtle, rgba(212, 168, 87, 0.10));
    box-shadow: var(--term-glow-gold);
}

.note-rail[data-theme="terminal"] .drt-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Bulk action buttons */
.note-rail[data-theme="terminal"] .drt-bulk {
    display: flex;
    gap: 4px;
}
.note-rail[data-theme="terminal"] .drt-btn-sm {
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--term-border-strong, #3A3630);
    background: transparent;
    color: var(--term-fg-secondary, #A09888);
    font-family: var(--term-font-mono);
    font-size: 0.65rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.note-rail[data-theme="terminal"] .drt-btn-sm:hover {
    color: var(--term-fg-primary, #E8E4DC);
    border-color: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
}
.note-rail[data-theme="terminal"] .drt-kbd-hint {
    font-size: 0.58rem;
    color: var(--term-fg-muted, #564E42);
    margin-left: 4px;
    white-space: nowrap;
}

/* Re-prompt inline input */
.note-rail[data-theme="terminal"] .drt-reprompt-input {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding-top: 4px;
}
.note-rail[data-theme="terminal"] .drt-reprompt-input.hidden { display: none; }

.note-rail[data-theme="terminal"] .drt-reprompt-text {
    flex: 1;
    background: var(--term-bg-input, #17160F);
    border: 1px solid var(--term-gold-dim, rgba(212, 168, 87, 0.35));
    border-radius: 4px;
    color: var(--term-fg-primary, #E8E4DC);
    font-family: var(--term-font-mono);
    font-size: 0.72rem;
    padding: 4px 8px;
    outline: none;
}
.note-rail[data-theme="terminal"] .drt-reprompt-text:focus {
    border-color: var(--term-gold, #D4A857);
    box-shadow: 0 0 6px rgba(212, 168, 87, 0.15);
}

/* ── Diff Review Layout ────────────────────────────────────────── */
/* NOTE: diff-review-active layout (flex column + output scroll) is defined
   in note-rail.css (base). Not duplicated here — terminal adds only colors. */

/* ── Diff Review Footer ──────────────────────────────────────────── */

.note-rail[data-theme="terminal"] .diff-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 8px;
    background: var(--term-bg-elevated, #1B1A16);
    border-top: 1px solid var(--term-border-default, #2A2720);
    font-family: var(--term-font-mono);
    font-size: 0.68rem;
    flex-shrink: 0;
}

.note-rail[data-theme="terminal"] .drf-bulk {
    display: flex;
    gap: 4px;
    align-items: center;
}

.note-rail[data-theme="terminal"] .drf-progress-bar {
    width: 100%;
    height: 2px;
    background: var(--term-border-default, #2A2720);
    border-radius: 1px;
    overflow: hidden;
    margin-bottom: 4px;
}
.note-rail[data-theme="terminal"] .drf-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--term-accent, #00FFD0);
    border-radius: 1px;
    transition: width 0.3s ease;
}

.note-rail[data-theme="terminal"] .drf-counts {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--term-fg-secondary, #A09888);
}
.note-rail[data-theme="terminal"] .drf-accepted { color: var(--term-status-ready, #22C55E); }
.note-rail[data-theme="terminal"] .drf-rejected { color: var(--term-status-error, #EF4444); }
.note-rail[data-theme="terminal"] .drf-pending { color: var(--term-status-editing, #F59E0B); }
.note-rail[data-theme="terminal"] .drf-separator { color: var(--term-fg-muted, #564E42); }

.note-rail[data-theme="terminal"] .drf-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.note-rail[data-theme="terminal"] .drf-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--term-status-error, #EF4444);
    background: rgba(239, 68, 68, 0.08);
    color: var(--term-status-error, #EF4444);
    font-family: var(--term-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.note-rail[data-theme="terminal"] .drf-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.25);
}

.note-rail[data-theme="terminal"] .drf-finalize-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border-radius: 4px;
    border: 1px solid var(--term-accent, #00FFD0);
    background: var(--term-accent-subtle, rgba(0, 255, 208, 0.10));
    color: var(--term-accent, #00FFD0);
    font-family: var(--term-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.note-rail[data-theme="terminal"] .drf-finalize-btn:hover:not(:disabled) {
    background: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    box-shadow: var(--term-glow-accent);
}
.note-rail[data-theme="terminal"] .drf-finalize-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Diff Summary Banner (2026-02-11) ───────────────────────────── */
/* FIX (2026-02-11): Orients doctor before per-change review
   WHY: "5 changes proposed: AKI, Sepsis, ..." gives context at a glance */

/* FIX (2026-02-11): Compact single-line banner — saves ~45px for editor content
   WHY: Banner + toolbar + footer were 242px of 359px rail body, leaving 0 for editor */
.note-rail[data-theme="terminal"] .drt-summary-banner {
    padding: 3px 8px;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    color: var(--term-accent, #00FFD0);
    background: var(--term-accent-subtle, rgba(0, 255, 208, 0.06));
    border-bottom: 1px solid var(--term-border-default, #2A2720);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
}

.note-rail[data-theme="terminal"] .drt-summary-label {
    flex-shrink: 0;
}

/* WHY: Terminal theme uses single-row chips with horizontal scroll instead of wrap.
   Scoped to terminal to avoid leaking into base theme. */
.note-rail[data-theme="terminal"] .drt-problem-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.note-rail[data-theme="terminal"] .drt-problem-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: var(--term-text-xs);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--term-fg-secondary, rgba(255,255,255,0.7));
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}
.note-rail[data-theme="terminal"] .drt-problem-chip:hover {
    background: rgba(0, 255, 208, 0.08);
    border-color: var(--term-accent-dim, rgba(0, 255, 208, 0.30));
    color: var(--term-fg-primary, #E8E4DC);
}
.note-rail[data-theme="terminal"] .drt-problem-chip.active {
    background: rgba(0, 255, 208, 0.15);
    border-color: var(--term-accent, #00FFD0);
    color: var(--term-accent, #00FFD0);
    font-weight: 600;
}
/* UX (2026-02-11): Color-coded chip statuses — green=accepted, red=rejected
   WHY: Line-through + opacity was too subtle for fast clinical review */
.note-rail[data-theme="terminal"] .drt-problem-chip.accepted {
    border-color: var(--term-status-ready, #22C55E);
    color: var(--term-status-ready, #22C55E);
    opacity: 0.7;
}
.note-rail[data-theme="terminal"] .drt-problem-chip.rejected {
    border-color: var(--term-status-error, #EF4444);
    color: var(--term-status-error, #EF4444);
    text-decoration: line-through;
    opacity: 0.6;
}
/* Doctor-intent indicator — subtle accent when working edits informed the proposal */
.note-rail[data-theme="terminal"] .drt-problem-chip.doctor-intent {
    border-color: var(--term-status-editing, #F59E0B);
}
.note-rail[data-theme="terminal"] .drt-intent-icon {
    margin-left: 3px;
    font-size: 0.55rem;
    opacity: 0.7;
}

.note-rail[data-theme="terminal"] .drt-evidence-count {
    font-size: var(--term-text-xs);
    color: var(--term-fg-muted, #564E42);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Evidence Summary Row (2026-02-11) ─────────────────────────── */
/* UX (2026-02-11): Evidence chips instead of truncated text
   WHY: Individual chips are scannable and show source type at a glance */

.note-rail[data-theme="terminal"] .drt-evidence-summary {
    width: 100%;
    padding: 1px 8px 2px;
    font-family: var(--term-font-mono);
    font-size: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* NOTE: .drt-evidence-chips layout (flex wrap) is defined in note-rail.css (base). */

.note-rail[data-theme="terminal"] .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: var(--term-fg-secondary, #A09888);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-rail[data-theme="terminal"] .drt-evidence-chip.drt-conf-high {
    color: var(--term-status-ready, #22C55E);
    border-color: rgba(34, 197, 94, 0.25);
}
.note-rail[data-theme="terminal"] .drt-evidence-chip.drt-conf-moderate {
    color: var(--term-status-editing, #F59E0B);
    border-color: rgba(245, 158, 11, 0.25);
}
.note-rail[data-theme="terminal"] .drt-evidence-chip.drt-conf-low {
    color: var(--term-status-error, #EF4444);
    border-color: rgba(239, 68, 68, 0.25);
}

/* ── Diff Preview (2026-02-11) ──────────────────────────────────── */
/* UX: Compact old→new text preview between nav and evidence */
.note-rail[data-theme="terminal"] .drt-diff-preview {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-family: var(--term-font-mono);
    font-size: 0.58rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.note-rail[data-theme="terminal"] .drt-preview-old {
    color: var(--term-status-error, #EF4444);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
}
.note-rail[data-theme="terminal"] .drt-preview-arrow {
    color: var(--term-fg-muted, #564E42);
    flex-shrink: 0;
}
.note-rail[data-theme="terminal"] .drt-preview-new {
    color: var(--term-status-ready, #22C55E);
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
}

/* ── Quick-Action Chips (2026-02-11) ─────────────────────────────── */
/* UX: Preset re-prompt chips — "More detail", "Less aggressive", "Explain reasoning" */
.note-rail[data-theme="terminal"] .drt-quick-actions {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}
.note-rail[data-theme="terminal"] .drt-quick-action {
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--term-gold-dim, rgba(212, 168, 87, 0.30));
    background: transparent;
    color: var(--term-gold, #D4A857);
    font-family: var(--term-font-mono);
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.note-rail[data-theme="terminal"] .drt-quick-action:hover {
    background: var(--term-gold-subtle, rgba(212, 168, 87, 0.10));
    border-color: var(--term-gold, #D4A857);
}

/* NOTE: @keyframes drt-flash-green/red defined in note-rail.css (base). */
.note-rail[data-theme="terminal"] .diff-review-toolbar.drt-flash-accept {
    animation: drt-flash-green 0.25s ease-out;
}
.note-rail[data-theme="terminal"] .diff-review-toolbar.drt-flash-reject {
    animation: drt-flash-red 0.25s ease-out;
}

/* ── Change Evidence Tooltip ─────────────────────────────────────── */

.note-rail[data-theme="terminal"] .change-evidence-tooltip {
    position: absolute;
    z-index: 100;
    background: var(--term-bg-elevated, #1B1A16);
    border: 1px solid var(--term-border-strong, #3A3630);
    border-radius: 6px;
    padding: var(--term-space-sm, 8px) var(--term-space-md, 12px);
    max-width: 320px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(0, 255, 208, 0.08);
    font-family: var(--term-font-mono);
    font-size: 0.72rem;
    color: var(--term-fg-primary, #E8E4DC);
    animation: cet-fade-in 0.15s ease-out;
}

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

.note-rail[data-theme="terminal"] .cet-header {
    font-size: 0.7rem;
    color: var(--term-fg-secondary, #A09888);
    margin-bottom: 6px;
}
.note-rail[data-theme="terminal"] .cet-header strong {
    color: var(--term-fg-primary, #E8E4DC);
    font-family: var(--term-font-display);
}

.note-rail[data-theme="terminal"] .cet-divider {
    height: 1px;
    background: var(--term-border-default, #2A2720);
    margin: 4px 0 6px;
}

.note-rail[data-theme="terminal"] .cet-evidence-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    line-height: 1.4;
}
.note-rail[data-theme="terminal"] .cet-icon { font-size: 0.8rem; flex-shrink: 0; }

.note-rail[data-theme="terminal"] .cet-no-evidence {
    color: var(--term-fg-muted, #564E42);
    font-style: italic;
}

/* Confidence bar */
.note-rail[data-theme="terminal"] .cet-confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--term-border-subtle, #1E1C18);
}
.note-rail[data-theme="terminal"] .cet-confidence-label {
    color: var(--term-fg-muted, #564E42);
    font-size: 0.65rem;
}
.note-rail[data-theme="terminal"] .cet-confidence-bar {
    flex: 1;
    height: 4px;
    background: var(--term-bg-void, #0C0B0A);
    border-radius: 2px;
    overflow: hidden;
}
.note-rail[data-theme="terminal"] .cet-confidence-fill {
    height: 100%;
    background: var(--term-accent, #00FFD0);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.note-rail[data-theme="terminal"] .cet-confidence-pct {
    color: var(--term-accent, #00FFD0);
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 28px;
    text-align: right;
}

/* ── Diff Suggestion Marks (in-rail overrides) ───────────────────── */

/* Suggestion marks in rail TipTap editor */
/* FIX (2026-02-09): Selectors match TiptapSuggestion extension renderHTML output:
   class="suggestion insert" / class="suggestion delete" (space-separated, not hyphenated) */
.note-rail[data-theme="terminal"] .suggestion.insert,
.note-rail[data-theme="terminal"] .ProseMirror .suggestion.insert {
    background: rgba(34, 197, 94, 0.12);
    color: var(--term-status-ready, #22C55E);
    border-bottom: 1px solid rgba(34, 197, 94, 0.30);
    text-decoration: none;
}

.note-rail[data-theme="terminal"] .suggestion.delete,
.note-rail[data-theme="terminal"] .ProseMirror .suggestion.delete {
    background: rgba(239, 68, 68, 0.10);
    color: var(--term-status-error, #EF4444);
    text-decoration: line-through;
    opacity: 0.7;
}

/* Focus ring on currently-navigated change */
.note-rail[data-theme="terminal"] .suggestion.focused {
    box-shadow: var(--term-glow-accent);
    outline: 1px solid var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    border-radius: 2px;
}

/* ── Diff Analyzing Indicator ────────────────────────────────────── */
/* WHY: Per-problem LLM calls in diff mode run sequentially and can take
   30-90s total. Without a prominent signal, the loaded base note looks
   "done" and physicians are stuck waiting with no clear status.
   FIX (2026-04-16): Promoted from 0.75rem amber text to a full progress
   panel with live counter, elapsed timer, and editor dim to communicate
   that analysis is still in progress. */

.diff-analyzing-indicator {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--term-font-mono);
    font-size: 0.875rem;
    color: var(--term-text-primary, #E8E4DB);
    background: var(--term-bg-surface, #13120F);
    border: 1px solid var(--term-status-editing, #F59E0B);
    border-radius: 4px;
    margin: 10px 12px;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08), 0 4px 16px rgba(0, 0, 0, 0.35);
}

.diff-analyzing-indicator .dai-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.diff-analyzing-indicator .dai-title {
    flex: 1;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--term-status-editing, #F59E0B);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.diff-analyzing-indicator .dai-timer {
    font-size: 0.75rem;
    color: var(--term-text-secondary, #8C857A);
    font-variant-numeric: tabular-nums;
}

.diff-analyzing-indicator .dai-progress-bar {
    height: 4px;
    width: 100%;
    background: var(--term-border-subtle, #1E1C18);
    border-radius: 2px;
    overflow: hidden;
}

.diff-analyzing-indicator .dai-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--term-status-editing, #F59E0B);
    transition: width 0.35s ease-out;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.diff-analyzing-indicator .dai-current {
    font-size: 0.8rem;
    color: var(--term-text-secondary, #8C857A);
}

.diff-analyzing-indicator .dai-problem-name {
    font-size: 0.95rem;
    color: var(--term-text-primary, #E8E4DB);
    font-weight: 500;
    min-height: 1.2em;
    word-break: break-word;
}

.diff-analyzing-indicator .dai-problem-name:empty::before {
    content: "—";
    color: var(--term-text-secondary, #8C857A);
}

.diff-analyzing-indicator .dai-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.7rem;
    color: var(--term-text-secondary, #8C857A);
}

.diff-analyzing-indicator .dai-count {
    font-variant-numeric: tabular-nums;
    color: var(--term-status-editing, #F59E0B);
    font-weight: 600;
}

.diff-analyzing-indicator .dai-hint {
    font-style: italic;
}

.diff-analyzing-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--term-status-editing, #F59E0B);
    border-top-color: transparent;
    border-radius: 50%;
    animation: drt-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* Editor dim while diff analysis is running — makes it visually clear
   that yesterday's note is not yet reviewable. pointer-events disables
   accidental edits/clicks on the pre-diff base content. */
/* 2026-08-22: the editor is #prosemirrorEditor (data-legacy-id="noteContent") —
   the old #noteContent selector matched nothing, so yesterday's note rendered at
   full opacity during the amend stream and read as the finished output. During
   the stream the base note is HIDDEN; the "Amending yesterday's note" panel is
   what the physician sees. Removed on diff_complete / cancel / error. */
#prosemirrorEditor.diff-pending-review,
#noteContent.diff-pending-review {
    display: none !important;
}
.diff-analyzing-indicator .dai-title { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.diff-analyzing-indicator .dai-sections { margin-top: 4px; font-size: 12.5px; opacity: 0.9; }
.diff-analyzing-indicator .dai-sections:empty { display: none; }

/* ── Reasoning Tree Header Button States (2026-04-16) ──────────────── */
/* WHY: Physicians had no visual cue during 5-15s of V3 generation or whether
   the tree is ready to view. The patient-header "Reasoning" button is always
   visible when there's a patient, so we use it as the primary status surface. */

#viewReasoningTreeBtn.rtree-generating {
    /* Pulsing amber — matches diff-analyzing-indicator color so the
       "something-is-generating" signal is consistent across features. */
    color: var(--term-status-editing, #F59E0B);
    border-color: var(--term-status-editing, #F59E0B);
    background: color-mix(in srgb, var(--term-status-editing, #F59E0B) 12%, transparent);
    animation: rtree-pulse 1.6s ease-in-out infinite;
    cursor: wait;
}

#viewReasoningTreeBtn.rtree-ready {
    /* Subtle cyan accent to signal actionable — clicking re-opens the tree panel. */
    color: var(--term-accent-primary, #00FFD0);
    border-color: color-mix(in srgb, var(--term-accent-primary, #00FFD0) 55%, transparent);
    background: color-mix(in srgb, var(--term-accent-primary, #00FFD0) 10%, transparent);
}

#viewReasoningTreeBtn.rtree-failed {
    color: var(--term-text-secondary, #8C857A);
    border-color: var(--term-border-subtle, #1E1C18);
    opacity: 0.6;
    cursor: not-allowed;
}

@keyframes rtree-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--term-status-editing, #F59E0B) 35%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--term-status-editing, #F59E0B) 0%, transparent);
    }
}

/* ── EHR Final Modal ─────────────────────────────────────────────── */

.ehr-final-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}
.ehr-final-modal.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ehr-final-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.efm-content {
    position: relative;
    z-index: 1;
    /* 2026-05-13 — blow the modal up. Paste destination + diff each need
       enough breathing room to actually read a clinical note. Was
       width: min(560px, 92vw); max-height: 85vh; overflow-y: auto; */
    width: min(1280px, 96vw);
    height: 92vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--term-bg-surface, #13120F);
    border: 1px solid var(--term-border-default, #2A2720);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.efm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--term-border-subtle, #1E1C18);
}
.efm-header h2 {
    font-family: var(--term-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--term-fg-primary, #E8E4DC);
    margin: 0;
}
.efm-context {
    font-family: var(--term-font-mono);
    font-size: 0.72rem;
    color: var(--term-fg-secondary, #A09888);
}
.efm-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--term-fg-muted, #564E42);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px;
}
.efm-close:hover {
    color: var(--term-fg-primary, #E8E4DC);
}

.efm-body {
    /* 2026-05-13 — body fills the available height between header and
       footer and lays out its children as a 2-column grid so paste-target
       and diff sit side-by-side instead of stacked. Stacks on narrower
       viewports via media query below. */
    flex: 1;
    min-height: 0;
    padding: 16px 20px;
    display: grid;
    grid-template-areas:
        "description description"
        "form        diff"
        "result      result";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 14px 18px;
    overflow: hidden;
}
@media (max-width: 1000px) {
    .efm-body {
        grid-template-areas:
            "description"
            "form"
            "diff"
            "result";
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(40vh, 1fr) minmax(30vh, 1fr) auto;
        overflow-y: auto;
    }
}
.efm-description { grid-area: description; margin: 0 0 4px; }
.efm-form-group { grid-area: form; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.efm-diff-container { grid-area: diff; display: flex; flex-direction: column; min-height: 0; margin: 0; }
#efm-result { grid-area: result; margin: 0; }
.efm-description {
    font-family: var(--term-font-body);
    font-size: 0.85rem;
    color: var(--term-fg-secondary, #A09888);
    line-height: 1.5;
    margin: 0 0 12px;
}
.efm-form-group {
    margin-bottom: 12px;
}
.efm-form-group label {
    display: block;
    font-family: var(--term-font-mono);
    font-size: 0.72rem;
    color: var(--term-fg-secondary, #A09888);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.efm-textarea {
    width: 100%;
    background: var(--term-bg-input, #17160F);
    border: 1px solid var(--term-border-default, #2A2720);
    border-radius: 4px;
    color: var(--term-fg-primary, #E8E4DC);
    font-family: var(--term-font-body);
    font-size: 0.85rem;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.6;
    box-sizing: border-box;
    /* 2026-05-13 — fill the form-group grid cell so the paste destination
       gets the height of the modal body. Was rows="14" hard-cap (~12rem). */
    flex: 1;
    min-height: 0;
}
.efm-textarea:focus {
    border-color: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    outline: none;
    box-shadow: 0 0 4px rgba(0, 255, 208, 0.12);
}
.efm-char-count {
    font-family: var(--term-font-mono);
    font-size: 0.65rem;
    color: var(--term-fg-muted, #564E42);
    text-align: right;
    padding-top: 2px;
}

.efm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--term-border-subtle, #1E1C18);
}
.efm-btn {
    padding: 6px 16px;
    border-radius: 4px;
    font-family: var(--term-font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.efm-btn-secondary {
    background: transparent;
    border: 1px solid var(--term-border-default, #2A2720);
    color: var(--term-fg-secondary, #A09888);
}
.efm-btn-secondary:hover {
    border-color: var(--term-fg-secondary, #A09888);
    color: var(--term-fg-primary, #E8E4DC);
}
.efm-btn-primary {
    background: var(--term-accent-subtle, rgba(0, 255, 208, 0.10));
    border: 1px solid var(--term-accent, #00FFD0);
    color: var(--term-accent, #00FFD0);
}
.efm-btn-primary:hover:not(:disabled) {
    background: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    box-shadow: var(--term-glow-accent);
}
.efm-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.efm-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    border-top-color: var(--term-accent, #00FFD0);
    border-radius: 50%;
    animation: drt-spin 0.8s linear infinite;
}

.efm-result {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.82rem;
}
.efm-result-error {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: var(--term-status-error, #EF4444);
}
.efm-result-success {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.20);
    color: var(--term-status-ready, #22C55E);
}
.efm-success-header {
    font-weight: 600;
    margin-bottom: 4px;
}
.efm-success-icon {
    color: var(--term-status-ready, #22C55E);
    margin-right: 4px;
}
.efm-success-note {
    font-size: 0.78rem;
    color: var(--term-fg-secondary, #A09888);
    margin-top: 4px;
}

/* ── EHR Final Modal — Auto-diff panel (2026-05-13) ───────────────────
   Shows the word-level diff between the somaNotes-generated baseline
   and the live textarea content so the doctor can review what they
   actually shipped. Reuses .diff-added / .diff-removed / .diff-unchanged
   classes from diff-renderer.js (same visual vocabulary as A&P history). */
.efm-diff-container {
    /* 2026-05-13 — when in grid layout, fill the cell so the inner
       panel can flex. The earlier rule (line ~2909) sets grid-area
       + flex column + min-height: 0; this just adds the cosmetic
       padding/border. margin overridden in the grid-cell rule above. */
    padding: 10px;
    background: var(--term-bg-elevated, rgba(0, 0, 0, 0.18));
    border: 1px solid var(--term-border-subtle, rgba(255, 255, 255, 0.06));
    border-radius: 3px;
}
.efm-diff-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.72rem;
    color: var(--term-fg-secondary, #A09888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.efm-diff-title { flex: 0 0 auto; font-weight: 600; }
.efm-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.efm-diff-toggle input { accent-color: var(--term-accent-amber, #E8A23A); }
.efm-diff-stats {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--term-fg-tertiary, #7B7264);
    font-size: 0.7rem;
}
.efm-diff-panel {
    /* 2026-05-13 — fill the diff grid cell. Was max-height: 220px which
       was a fixed ~13 line cap; diff is now as tall as the modal body. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px;
    background: var(--term-bg-surface, rgba(0, 0, 0, 0.28));
    border: 1px solid var(--term-border-subtle, rgba(255, 255, 255, 0.05));
    border-radius: 2px;
    font-family: var(--ff-mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.efm-diff-panel .diff-added {
    background: rgba(76, 196, 180, 0.18);
    color: var(--term-accent-mint, #4CC4B4);
    text-decoration: none;
}
.efm-diff-panel .diff-removed {
    background: rgba(229, 82, 74, 0.16);
    color: var(--term-fg-secondary, #A09888);
    text-decoration: line-through;
}
.efm-diff-panel .diff-unchanged {
    color: var(--term-fg-primary, #E8E0D6);
    opacity: 0.7;
}

/* Grounding telemetry line in the success state. Different visual weight
   than the existing efm-success-note — this is the "we did the work,
   here's proof" callout; the note above is the contextual statement. */
.efm-success-grounding {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(76, 196, 180, 0.10);
    border-left: 3px solid var(--term-accent-mint, #4CC4B4);
    color: var(--term-fg-primary, #E8E0D6);
    font-size: 0.78rem;
    border-radius: 2px;
}
.efm-success-grounding-degraded {
    background: rgba(232, 162, 58, 0.10);
    border-left-color: var(--term-accent-amber, #E8A23A);
    color: var(--term-fg-secondary, #A09888);
}

/* ── PNP EHR Final Button (Prior Notes Panel) ────────────────────── */

.pnp-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pnp-ehr-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--term-border-default, #444);
    background: transparent;
    color: var(--term-fg-secondary, #999);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pnp-ehr-final-btn:hover {
    border-color: var(--term-accent, #00FFD0);
    color: var(--term-accent, #00FFD0);
}


/* ==========================================================================
   §34  TIERED APPROVAL — Terminal Theme Overrides (2026-02-14)
   ==========================================================================
   Core cards get amber/gold left border. Peripheral rows get dim borders.
   Tier headers use terminal accent color. Accept All uses accent styling.
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-tier-label {
    color: var(--term-accent, #00FFD0);
    font-family: var(--term-font-ui);
}

.note-rail[data-theme="terminal"] .rail-tier-count {
    background: rgba(0, 255, 208, 0.1);
    color: var(--term-accent, #00FFD0);
}

.note-rail[data-theme="terminal"] .rail-core-card {
    border-left-color: var(--term-gold, #D4A843);
}

.note-rail[data-theme="terminal"] .rail-core-evidence {
    font-family: var(--term-font-ui);
    font-size: var(--rail-text-sm);
    color: var(--term-text-dim, #5C5945);
}

.note-rail[data-theme="terminal"] .rail-core-prior {
    color: var(--term-text-dim, #5C5945);
    font-family: var(--term-font-ui);
    font-size: var(--rail-text-xs);
}

.note-rail[data-theme="terminal"] .rail-trend-badge {
    font-family: var(--term-font-ui);
    border: 1px solid currentColor;
    background: transparent;
}

.note-rail[data-theme="terminal"] .rail-peripheral-row {
    border-color: rgba(92, 89, 69, 0.3);
}

.note-rail[data-theme="terminal"] .rail-peripheral-row.selected {
    border-color: rgba(0, 255, 208, 0.3);
    background: rgba(0, 255, 208, 0.03);
}

.note-rail[data-theme="terminal"] .rail-peripheral-qualifier {
    font-family: var(--term-font-ui);
    font-size: var(--rail-text-xs);
    color: var(--term-text-dim, #5C5945);
}

.note-rail[data-theme="terminal"] .rail-accept-all-btn {
    border-color: var(--term-accent, #00FFD0);
    color: var(--term-accent, #00FFD0);
    font-family: var(--term-font-ui);
}

.note-rail[data-theme="terminal"] .rail-accept-all-btn:hover {
    background: rgba(0, 255, 208, 0.1);
}

.note-rail[data-theme="terminal"] .rail-add-problem-input {
    font-family: var(--term-font-ui);
    background: rgba(12, 11, 10, 0.6);
    border-color: rgba(92, 89, 69, 0.3);
    color: var(--term-text, #A09A7C);
}

.note-rail[data-theme="terminal"] .rail-add-problem-input:focus {
    border-color: var(--term-accent, #00FFD0);
}

.note-rail[data-theme="terminal"] .rail-add-problem-submit {
    border-color: rgba(92, 89, 69, 0.3);
    color: var(--term-text-dim, #5C5945);
}

.note-rail[data-theme="terminal"] .rail-add-problem-submit:hover {
    border-color: var(--term-accent, #00FFD0);
    color: var(--term-accent, #00FFD0);
}

.note-rail[data-theme="terminal"] .rail-approval-cancel {
    font-family: var(--term-font-ui);
    border-color: rgba(92, 89, 69, 0.3);
    color: var(--term-text-dim, #5C5945);
}

.note-rail[data-theme="terminal"] .rail-approval-cancel:hover {
    border-color: #f87171;
    color: #f87171;
}

.note-rail[data-theme="terminal"] .rail-approval-title {
    font-family: var(--term-font-ui);
    color: var(--term-text, #A09A7C);
}

.note-rail[data-theme="terminal"] .rail-confidence-badge {
    font-family: var(--term-font-ui);
}

/* ==========================================================================
   §36  TIERED APPROVAL CARDS — Terminal Overrides
   ==========================================================================
   Core problems use accent border (clinically important = interactive mint).
   Peripheral problems use warm muted tones.
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-tier-section {
    margin-bottom: var(--term-space-lg);
}

.note-rail[data-theme="terminal"] .rail-tier-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-widest);
    color: var(--term-fg-muted);
}

.note-rail[data-theme="terminal"] .rail-tier-count {
    font-family: var(--term-font-mono);
    background: var(--term-border-subtle);
    color: var(--term-fg-secondary);
}

/* Core cards: accent left border for clinical emphasis */
.note-rail[data-theme="terminal"] .rail-core-card {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-subtle);
    border-left: 3px solid var(--term-accent);
}

.note-rail[data-theme="terminal"] .rail-core-card.selected {
    border-color: var(--term-border-strong);
    border-left-color: var(--term-accent);
    background: var(--term-accent-ghost);
}

/* Trend badges: terminal mono, transparent bg with border */
.note-rail[data-theme="terminal"] .rail-trend-badge.trend-worsening,
.note-rail[data-theme="terminal"] .rail-trend-badge.trend-critical {
    background: transparent;
    border: 1px solid var(--term-status-error);
    color: var(--term-status-error);
}

.note-rail[data-theme="terminal"] .rail-trend-badge.trend-active,
.note-rail[data-theme="terminal"] .rail-trend-badge.trend-new {
    background: transparent;
    border: 1px solid var(--term-status-generating);
    color: var(--term-status-generating);
}

.note-rail[data-theme="terminal"] .rail-trend-badge.trend-stable {
    background: transparent;
    border: 1px solid var(--term-status-editing);
    color: var(--term-status-editing);
}

.note-rail[data-theme="terminal"] .rail-trend-badge.trend-improving {
    background: transparent;
    border: 1px solid var(--term-status-ready);
    color: var(--term-status-ready);
}

/* Peripheral rows: warm muted tone */
.note-rail[data-theme="terminal"] .rail-peripheral-name {
    font-family: var(--term-font-mono);
    color: var(--term-fg-secondary);
}


/* ==========================================================================
   §37  CONSOLIDATION CARDS — Terminal Overrides
   ==========================================================================
   Replaces cyan (#22d3ee) with terminal warm gold tones.
   Consolidation is a decorative/informational element, not interactive.
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-consolidations {
    border-bottom-color: var(--term-gold-subtle);
}

.note-rail[data-theme="terminal"] .rail-consolidations-header {
    font-family: var(--term-font-mono);
    letter-spacing: var(--term-tracking-wider);
    color: var(--term-gold);
}

.note-rail[data-theme="terminal"] .rail-consolidations-badge {
    background: var(--term-gold);
    color: var(--term-bg-void);
}

.note-rail[data-theme="terminal"] .rail-consolidation-card {
    background: var(--term-gold-ghost);
    border: 1px solid var(--term-gold-subtle);
    border-left: 3px solid var(--term-gold-dim);
}

.note-rail[data-theme="terminal"] .rail-cons-title {
    font-family: var(--term-font-display);
    color: var(--term-fg-primary);
}

.note-rail[data-theme="terminal"] .rail-cons-confidence {
    font-family: var(--term-font-mono);
    background: var(--term-gold-subtle);
    color: var(--term-gold);
}

.note-rail[data-theme="terminal"] .rail-cons-pill {
    font-family: var(--term-font-mono);
    background: var(--term-bg-void);
    border-color: var(--term-gold-subtle);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .rail-cons-rationale {
    font-family: var(--term-font-body);
    color: var(--term-fg-muted);
}

.note-rail[data-theme="terminal"] .rail-cons-apply {
    /* 2026-08-19 polish: suggestion, not primary CTA — outline, not solid. */
    font-family: var(--term-font-display);
    font-weight: 600;
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    background: transparent;
    color: var(--term-gold);
    /* Full-opacity border: gold-dim (alpha .35) composited on the void was an
       invisible edge — the label floated with no button boundary. */
    border: 1px solid var(--term-gold);
}

.note-rail[data-theme="terminal"] .rail-cons-apply:hover {
    background: var(--term-gold-ghost);
    box-shadow: var(--term-glow-gold-intense);
}


/* ==========================================================================
   §38  DRAFT VERSIONS ROW — Terminal Overrides
   ==========================================================================
   Version chips styled as terminal mono chips with accent on active.
   ========================================================================== */

.note-rail[data-theme="terminal"] .draft-versions-row {
    background: var(--term-bg-header);
    border-bottom-color: var(--term-border-default);
}

.note-rail[data-theme="terminal"] .draft-versions-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wide);
    color: var(--term-fg-muted);
}

.note-rail[data-theme="terminal"] .draft-version-chip {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    border-color: var(--term-border-strong);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .draft-version-chip:hover:not(:disabled) {
    border-color: var(--term-accent-dim);
    color: var(--term-fg-primary);
    background: var(--term-accent-ghost);
}

.note-rail[data-theme="terminal"] .draft-version-chip.active {
    border-color: var(--term-accent);
    color: var(--term-accent);
    background: var(--term-accent-ghost);
}

.note-rail[data-theme="terminal"] .draft-version-chip.active::before {
    background: var(--term-accent);
}


/* ==========================================================================
   §FRESHNESS  PROBLEM CARD FRESHNESS BADGES (Event-Sourced Timeline)
   --------------------------------------------------------------------------
   REF: docs/plans/EVENT-SOURCED-TIMELINE-IMPLEMENTATION.md §5 (Phase 3)
   Badges show recency of edits per problem. Freshness tiers from API:
     hot (<1h), warm (1-4h), stale (4-12h), cold (>12h)
   ========================================================================== */

/* Freshness badge — compact inline indicator after problem title */
.problem-card__freshness-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    line-height: 1;
    color: var(--term-fg-muted, #8A8278);
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Freshness dot — color-coded by tier */
.freshness-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Hot: bright mint, pulsing */
.problem-card__freshness-badge--hot .freshness-dot {
    background: var(--term-accent, #00FFD0);
    box-shadow: 0 0 4px var(--term-accent-dim, rgba(0, 255, 208, 0.4));
}
.problem-card__freshness-badge--hot {
    color: var(--term-accent, #00FFD0);
}

/* Warm: gold */
.problem-card__freshness-badge--warm .freshness-dot {
    background: var(--term-gold, #D4A857);
    box-shadow: 0 0 3px var(--term-gold-dim, rgba(212, 168, 87, 0.35));
}
.problem-card__freshness-badge--warm {
    color: var(--term-gold, #D4A857);
}

/* Stale: muted foreground */
.problem-card__freshness-badge--stale .freshness-dot {
    background: var(--term-fg-muted, #8A8278);
}

/* Cold: dim, barely visible */
.problem-card__freshness-badge--cold .freshness-dot {
    background: var(--term-fg-muted, #8A8278);
    opacity: 0.4;
}
.problem-card__freshness-badge--cold {
    opacity: 0.5;
}

/* Left border accent on cards with recent updates */
.problem-card--has-updates {
    border-left: 2px solid var(--term-gold-dim, rgba(212, 168, 87, 0.35));
}

/* "Just updated" glow animation for hot items */
.problem-card--has-updates.just-updated {
    border-left-color: var(--term-accent, #00FFD0);
    animation: freshness-glow 1.5s ease-out;
}

@keyframes freshness-glow {
    0% {
        box-shadow: inset 3px 0 8px -2px var(--term-accent-dim, rgba(0, 255, 208, 0.4));
    }
    100% {
        box-shadow: inset 3px 0 8px -2px transparent;
    }
}


/* ==========================================================================
   §N  PRIOR NOTES / SAVED NOTES VIEWER — Terminal Overrides
   FIX (2026-02-26): Note cards had rounded corners (8px) and blue accents,
   inconsistent with terminal theme's sharp corners and cyan/gold accents.
   ========================================================================== */

.note-rail[data-theme="terminal"] .rail-viewing-header {
    background: var(--term-bg-header);
    border-bottom: 1px solid var(--term-border-default);
}

.note-rail[data-theme="terminal"] .rail-viewing-header-title {
    font-family: var(--term-font-display);
    font-size: var(--term-text-sm);
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    color: var(--term-gold);
}

.note-rail[data-theme="terminal"] .rail-viewing-header-title::before {
    content: '>';
    font-family: var(--term-font-mono);
    font-weight: 700;
    color: var(--term-accent);
    margin-right: var(--term-space-sm);
}

.note-rail[data-theme="terminal"] .rail-viewing-patient-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .rail-note-card {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-subtle);
}

.note-rail[data-theme="terminal"] .rail-note-card:hover {
    border-color: var(--term-border-strong);
    background: var(--term-bg-elevated);
}

.note-rail[data-theme="terminal"] .rail-note-card:focus {
    outline: 2px solid var(--term-accent);
    outline-offset: -2px;
}

.note-rail[data-theme="terminal"] .rail-note-card.selected {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent);
    box-shadow: var(--term-glow-accent);
}

.note-rail[data-theme="terminal"] .rail-note-type {
    font-family: var(--term-font-mono);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wider);
}

.note-rail[data-theme="terminal"] .rail-detail-action-btn {
    font-family: var(--term-font-display);
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
}

.note-rail[data-theme="terminal"] .rail-detail-action-btn.primary {
    background: transparent;
    border: 2px solid var(--term-accent);
    color: var(--term-accent);
}

.note-rail[data-theme="terminal"] .rail-detail-action-btn.primary:hover:not(:disabled) {
    background: var(--term-accent);
    color: var(--term-fg-inverse);
    box-shadow: var(--term-glow-accent-intense);
}

.note-rail[data-theme="terminal"] .rail-detail-action-btn.secondary {
    background: transparent;
    border: 1px solid var(--term-border-strong);
    color: var(--term-fg-secondary);
}

.note-rail[data-theme="terminal"] .rail-detail-action-btn.secondary:hover:not(:disabled) {
    border-color: var(--term-gold);
    color: var(--term-gold);
    box-shadow: var(--term-glow-gold);
}

.note-rail[data-theme="terminal"] .rail-note-card--silenced,
.note-rail[data-theme="terminal"] .rail-note-card--silenced.selected {
    background: color-mix(in srgb, var(--term-bg-surface) 76%, #777 24%);
    border-color: var(--term-fg-muted);
    box-shadow: none;
    filter: saturate(0.2);
    opacity: 0.7;
}

.note-rail[data-theme="terminal"] .rail-viewing-container button.rail-note-lifecycle-btn {
    font-family: var(--term-font-display);
    font-size: 0.58rem;
    min-height: 22px;
    padding: 1px 5px;
}

:root .note-rail[data-theme="terminal"] .rail-viewing-container .rail-viewing-footer-actions button.rail-import-context-btn,
:root .note-rail[data-theme="terminal"] .rail-viewing-container .rail-viewing-footer-actions button.rail-import-delete-btn {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.64rem;
    line-height: 1.2;
    align-self: center;
}

.note-rail[data-theme="terminal"] .rail-import-context-btn {
    background: color-mix(in srgb, var(--term-gold) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--term-gold) 48%, transparent);
    color: color-mix(in srgb, var(--term-gold) 76%, var(--term-fg-secondary));
}

.note-rail[data-theme="terminal"] .rail-import-delete-btn {
    background: color-mix(in srgb, var(--term-status-error) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--term-status-error) 42%, transparent);
    color: color-mix(in srgb, var(--term-status-error) 68%, var(--term-fg-secondary));
}

.note-rail[data-theme="terminal"] .rail-note-silence-btn {
    background: transparent;
    color: color-mix(in srgb, var(--term-gold) 58%, var(--term-fg-muted));
}

.note-rail[data-theme="terminal"] .rail-note-delete-btn {
    background: transparent;
    color: color-mix(in srgb, var(--term-status-error) 52%, var(--term-fg-muted));
}

.note-rail[data-theme="terminal"] .rail-import-context-btn.is-restore {
    background: color-mix(in srgb, var(--term-accent) 7%, transparent);
    border-color: color-mix(in srgb, var(--term-accent) 44%, transparent);
    color: color-mix(in srgb, var(--term-accent) 70%, var(--term-fg-secondary));
}


/* ==========================================================================
   §NEW  STREAMING SKELETON — shimmer lines during TTFT (time-to-first-token)
   ARCHITECTURE: Shown immediately on Generate click, removed on first text chunk.
   WHY: 40% perceived speed improvement (NN/g skeleton screen research).
   TRADEOFF: 7 DOM elements + CSS vs blank panel for 0.5-2s.
   ========================================================================== */

.note-rail[data-theme="terminal"] .streaming-skeleton {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.note-rail[data-theme="terminal"] .streaming-skeleton-line {
    height: 14px;
    background: linear-gradient(
        90deg,
        var(--term-bg-surface) 0%,
        var(--term-bg-void) 50%,
        var(--term-bg-surface) 100%
    );
    background-size: 200% 100%;
    border-radius: 2px;
    animation: sol-shimmer 1.5s ease-in-out infinite;
}

.streaming-skeleton-line:nth-child(1) { width: 95%; }
.streaming-skeleton-line:nth-child(2) { width: 80%; animation-delay: 0.05s; }
.streaming-skeleton-line:nth-child(3) { width: 90%; animation-delay: 0.1s; }
.streaming-skeleton-line:nth-child(4) { width: 70%; animation-delay: 0.15s; }
.streaming-skeleton-line:nth-child(5) { width: 85%; animation-delay: 0.2s; }
.streaming-skeleton-line:nth-child(6) { width: 60%; animation-delay: 0.25s; }
.streaming-skeleton-line:nth-child(7) { width: 75%; animation-delay: 0.3s; }


/* ==========================================================================
   §NEW  RESUME FOLLOWING INDICATOR — auto-scroll override pill
   ARCHITECTURE: Sticky pill at bottom of editor scroll container. Shows when
     user scrolls up during streaming, hides when they click it or scroll back.
   WHY: Physicians read back through generated text mid-stream (ChatGPT/Claude
     pattern). Unconditional auto-scroll loses their place.
   ========================================================================== */

.streaming-resume-indicator {
    position: sticky;
    bottom: 8px;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--term-accent-mint);
    color: var(--term-bg-void);
    border: none;
    border-radius: 20px;
    font-family: var(--term-font-label);
    font-size: var(--term-text-xs);
    font-weight: 600;
    cursor: pointer;
    z-index: 10;
    opacity: 0.95;
    transition: opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.streaming-resume-indicator:hover {
    opacity: 1;
}

.streaming-resume-indicator.hidden {
    display: none;
}

/* Reduced motion: disable shimmer and transition animations */
@media (prefers-reduced-motion: reduce) {
    .note-rail[data-theme="terminal"] .streaming-skeleton-line {
        animation: none;
        opacity: 0.4;
    }

    .streaming-resume-indicator {
        transition: none;
    }
}


/* ── Streaming Hint (2026-02-28) ──────────────────────────────────────────
   WHY: Discrete instruction telling doctors they can switch tabs during generation.
   Only visible when #noteProgress is shown (streaming active).
   ──────────────────────────────────────────────────────────────────────── */
.sol-streaming-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--rail-text-sm);
    color: var(--term-text-muted, #6b7280);
    opacity: 0.7;
    text-align: center;
    font-style: italic;
}

/* ==========================================================================
   DIFF GUIDE TOOLTIP — contextual hover guide for the diff pipeline
   ========================================================================== */

.dg-tooltip {
    position: fixed;
    z-index: 9100;
    width: 260px;
    background: var(--term-bg-elevated, #1B1A16);
    border: 1px solid var(--term-border-strong, #3A3630);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 255, 208, 0.06);
    font-family: var(--term-font-mono);
    font-size: 0.7rem;
    color: var(--term-fg-primary, #E8E4DC);
    /* FIX (2026-04-11): Tooltip body MUST stay click-through so it never
       blocks its anchor button. Only the "Full guide" link (.dg-link) is
       interactive. BUG: .dg-visible used to flip this to auto, causing the
       tooltip to swallow clicks on #viewPriorNotesBtn when positioning
       clamped the tooltip to overlap the button. */
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.dg-tooltip.dg-visible {
    opacity: 1;
    transform: translateY(0);
    /* pointer-events stays none from .dg-tooltip base — see FIX comment above. */
}

/* FIX (2026-04-11): Only the link inside the tooltip is interactive. Everything
   else is click-through so the tooltip never blocks its anchor button. */
.dg-tooltip .dg-link {
    pointer-events: auto;
}

.dg-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.dg-title {
    font-family: var(--term-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--term-accent, #00FFD0);
    text-transform: uppercase;
}

.dg-step {
    font-size: 0.62rem;
    color: var(--term-fg-tertiary, #5A5650);
}

.dg-body {
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--term-fg-secondary, #A09888);
    margin: 0 0 8px;
}

.dg-footer {
    border-top: 1px solid var(--term-border-subtle, #1E1C18);
    padding-top: 6px;
    text-align: right;
}

.dg-link {
    font-size: 0.65rem;
    color: var(--term-accent-dim, rgba(0, 255, 208, 0.55));
    text-decoration: none;
    transition: color 0.12s;
}
.dg-link:hover {
    color: var(--term-accent, #00FFD0);
    text-decoration: underline;
}

/* ⓘ info button placed next to the Prior Notes button */
.diff-guide-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--term-border-subtle, #1E1C18);
    background: transparent;
    color: var(--term-fg-tertiary, #5A5650);
    font-size: var(--rail-text-xs);
    font-family: var(--term-font-display);
    font-style: italic;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: color 0.12s, border-color 0.12s;
    flex-shrink: 0;
    align-self: center;
}
.diff-guide-info-btn:hover {
    color: var(--term-accent, #00FFD0);
    border-color: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
}

/* ==========================================================================
   SMOOTHING (2026-04-05): Reduce generation progress signal redundancy
   WHY: Doctor was seeing 10 simultaneous progress signals during streaming
        (progress bar + text + rate + ETA + rail ETA + status pill + stage
        label + streaming hint + editor animation + rail header pill).
        Rate and ETA are developer trivia; the progress bar + word count +
        clinical stage label already communicate position and tempo.
   KEPT: #progressFill, #progressText (word count), #railStageLabel,
         #streamingHint, status pill, animated editor content.
   HIDDEN: .sol-progress-stats (progressRate + progressETA), .note-rail-eta.
   NOTE: DOM elements preserved; JS writes still execute without error.
   ========================================================================== */
.sol-progress-stats,
.note-rail-eta {
    display: none !important;
}

/* Draft banner (2026-04-05) — persistent disclosure of restored draft age.
   Sits above the editor; dismissible; auto-clears on save/new-generation/patient-switch. */
.draft-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: 0 0 8px 0;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-left: 2px solid rgba(251, 191, 36, 0.6);
    border-radius: 4px;
    color: rgba(251, 191, 36, 0.9);
    font-size: 12px;
    font-weight: 500;
}

.draft-banner.hidden {
    display: none;
}

.draft-banner i {
    font-size: 14px;
    flex-shrink: 0;
}

.draft-banner-text {
    flex: 1;
}

.draft-banner-dismiss {
    background: transparent;
    border: none;
    color: rgba(251, 191, 36, 0.6);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
}

.draft-banner-dismiss:hover {
    background: rgba(251, 191, 36, 0.15);
    color: rgba(251, 191, 36, 1);
}

.draft-banner-action {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 2px 6px;
}

.draft-banner-action:hover {
    background: rgba(251, 191, 36, 0.12);
}

.note-rail[data-theme="terminal"] .draft-banner {
    background: rgba(0, 255, 208, 0.04);
    border-color: rgba(0, 255, 208, 0.25);
    border-left-color: var(--term-accent-dim);
    color: var(--term-accent-dim);
    font-family: var(--term-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.note-rail[data-theme="terminal"] .draft-banner-dismiss {
    color: var(--term-fg-muted);
}

.note-rail[data-theme="terminal"] .draft-banner-dismiss:hover {
    background: rgba(0, 255, 208, 0.08);
    color: var(--term-accent);
}

.note-rail[data-theme="terminal"] .draft-banner-action:hover {
    background: rgba(0, 255, 208, 0.08);
}

/* Template mode badge (2026-04-05) — signals diff vs carry-forward BEFORE generation.
   Sits inside #templateIndicator next to the "Using: [title]" text.
   WHY: Visual language aligned with .note-rail-status-pill — same font-size token,
   same letter-spacing, same radius/padding rhythm. Modes distinguished by color only. */
.template-indicator-mode {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 4px;
    font-size: var(--term-text-xs, 10px);
    font-weight: 500;
    letter-spacing: var(--term-tracking-widest, 0.08em);
    text-transform: uppercase;
    white-space: nowrap;
}

.template-indicator-mode[hidden] {
    display: none;
}

.template-indicator-mode[data-mode="diff"] {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: rgba(165, 180, 252, 1);
}

.template-indicator-mode[data-mode="carry"] {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: rgba(203, 213, 225, 1);
}

.template-indicator-mode[data-mode="regen"] {
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.35);
    color: rgba(254, 215, 170, 1);
}

.note-rail[data-theme="terminal"] .template-indicator-mode[data-mode="diff"] {
    background: rgba(0, 255, 208, 0.10);
    border-color: rgba(0, 255, 208, 0.35);
    color: var(--term-accent);
}

.note-rail[data-theme="terminal"] .template-indicator-mode[data-mode="carry"] {
    background: rgba(0, 255, 208, 0.04);
    border-color: var(--term-accent-subtle);
    color: var(--term-accent-dim);
}

.note-rail[data-theme="terminal"] .template-indicator-mode[data-mode="regen"] {
    background: rgba(251, 146, 60, 0.10);
    border-color: rgba(251, 146, 60, 0.35);
    color: rgba(254, 215, 170, 1);
}

/* ==========================================================================
   END — PHOSPHOR THEATRE v2.1.0
   ========================================================================== */