/* ==========================================================================
   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 token scale within the rail: xs 12→13, sm 13→14, base 15→16.
   All downstream rules using var(--term-text-*) inherit the bump automatically. */
.note-rail[data-theme="terminal"] {
    --term-text-xs:   0.8125rem;   /* 13px (was 11px) */
    --term-text-sm:   0.875rem;    /* 14px (was 13px) */
    --term-text-base: 1rem;        /* 16px (was 15px) */
    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;
}


/* ==========================================================================
   §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 */
.note-rail[data-theme="terminal"] .note-rail-header::before {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--term-space-lg);
    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 {
    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);
    border-radius: var(--term-radius-none);
    color: var(--term-fg-muted);
    font-size: 14px;
    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);
    border-radius: var(--term-radius-none);
    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);
}


/* ==========================================================================
   §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);
    border-radius: var(--term-radius-none);
    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);
}

.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);
    border-radius: var(--term-radius-none);
    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::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;
    border-radius: var(--term-radius-none);
    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: 40px;
}

.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] {
    opacity: 0.3;
    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;
}


/* ==========================================================================
   §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);
    border-radius: var(--term-radius-none);
    color: var(--term-accent);
    font-family: var(--term-font-mono);
    font-size: 18px;
    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);
}

/* — 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;
    border-radius: var(--term-radius-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: 40px;
    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 */
}

/* — Character counter: terminal mono, no rounded corners — */
.note-rail[data-theme="terminal"] .clinical-update-counter {
    background: var(--term-bg-surface);
    border-radius: var(--term-radius-none);
    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);
    border-radius: var(--term-radius-none);
}


/* ==========================================================================
   §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);
    border-radius: var(--term-radius-none);
    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);
}

/* 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);
    border-radius: var(--term-radius-none);
    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);
    border-radius: var(--term-radius-none);
    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: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 1.0625rem;  /* 17px — one step above base for clinical readability */
    color: var(--term-fg-primary);
    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);
}

/* 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
   ========================================================================== */

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

.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: 0;
}

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


/* ==========================================================================
   §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 */
.note-rail[data-theme="terminal"] .rail-input-label::before,
.note-rail[data-theme="terminal"] label::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 400ms var(--term-easing-dramatic) both;
    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 400ms 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 ─────────────────────────────────────────── */

/* FIX (2026-02-11): Hide editor chrome during diff review
   WHY: Editor expand btn (36px), PM toolbar (50px), RAG panel (210px), edit btn (36px)
   eat 332px — more than the entire 317px rail body. Doctor only needs the diff content.
   FIX (2026-02-11): Added .diff-review-active fallback for Firefox ESR (no :has()) */
.rail-note-body:has(.diff-review-toolbar) .editor-expand-btn,
.rail-note-body:has(.diff-review-toolbar) .pm-toolbar,
.rail-note-body:has(.diff-review-toolbar) .rag-knowledge-panel,
.rail-note-body:has(.diff-review-toolbar) .edit-selection-btn,
.rail-note-body:has(.diff-review-toolbar) #editBtn,
.rail-note-body.diff-review-active .editor-expand-btn,
.rail-note-body.diff-review-active .pm-toolbar,
.rail-note-body.diff-review-active .rag-knowledge-panel,
.rail-note-body.diff-review-active .edit-selection-btn,
.rail-note-body.diff-review-active #editBtn {
    display: none !important;
}

/* 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 */
.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, 'JetBrains Mono', monospace);
    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 */
.drt-nav {
    display: flex;
    align-items: center;
    gap: var(--term-space-xs, 4px);
}

.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;
}
.drt-nav-btn:hover {
    color: var(--term-accent, #00FFD0);
    border-color: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
}

.drt-change-label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}
.drt-problem-title {
    font-family: var(--term-font-display, 'Outfit', sans-serif);
    font-weight: 500;
    color: var(--term-fg-primary, #E8E4DC);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.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, 'JetBrains Mono', monospace);
    white-space: nowrap;
    margin-left: 4px;
}
.drt-status-badge.improving {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.30);
}
.drt-status-badge.worsening {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.30);
}
.drt-status-badge.stable {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.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);
}
.drt-change-counter {
    color: var(--term-fg-muted, #564E42);
    font-size: 0.7rem;
}

/* Action buttons */
.drt-actions {
    display: flex;
    gap: var(--term-space-xs, 4px);
    margin-left: auto;
}

.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, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.drt-reject {
    background: transparent;
    border-color: var(--term-status-error, #EF4444);
    color: var(--term-status-error, #EF4444);
}
.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. */
.drt-reprompt {
    background: transparent;
    border-color: var(--term-gold, #D4A857);
    color: var(--term-gold, #D4A857);
}
.drt-reprompt:hover:not(:disabled) {
    background: var(--term-gold-subtle, rgba(212, 168, 87, 0.10));
    box-shadow: var(--term-glow-gold);
}

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

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

/* Re-prompt inline input */
.drt-reprompt-input {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding-top: 4px;
}
.drt-reprompt-input.hidden { display: none; }

.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, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    padding: 4px 8px;
    outline: none;
}
.drt-reprompt-text:focus {
    border-color: var(--term-gold, #D4A857);
    box-shadow: 0 0 6px rgba(212, 168, 87, 0.15);
}

/* ── Diff Review Layout ────────────────────────────────────────── */
/* FIX (2026-02-11): When diff review is active, rail-note-body becomes flex column
   so banner+toolbar stay at top, editor scrolls in middle, footer pins to bottom.
   WHY: Without this, footer is pushed below 700px editor (invisible to doctor).
   FIX (2026-02-11): .diff-review-active fallback for Firefox ESR (no :has()) */
.rail-note-body:has(.diff-review-toolbar),
.rail-note-body.diff-review-active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rail-note-body:has(.diff-review-toolbar) .sol-note-output-section,
.rail-note-body.diff-review-active .sol-note-output-section {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

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

.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, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    flex-shrink: 0;
}

.drf-bulk {
    display: flex;
    gap: 4px;
    align-items: center;
}

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

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

.drf-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.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, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.drf-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.25);
}

.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, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.drf-finalize-btn:hover:not(:disabled) {
    background: var(--term-accent-dim, rgba(0, 255, 208, 0.40));
    box-shadow: var(--term-glow-accent);
}
.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 */
.drt-summary-banner {
    padding: 3px 8px;
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--term-text-xs, 0.65rem);
    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;
}

.drt-summary-label {
    flex-shrink: 0;
}

.drt-problem-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
}

.drt-problem-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: var(--term-text-xs, 0.65rem);
    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;
}
.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);
}
.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 */
.drt-problem-chip.accepted {
    border-color: var(--term-status-ready, #22C55E);
    color: var(--term-status-ready, #22C55E);
    opacity: 0.7;
}
.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 */
.drt-problem-chip.doctor-intent {
    border-color: var(--term-status-editing, #F59E0B);
}
.drt-intent-icon {
    margin-left: 3px;
    font-size: 0.55rem;
    opacity: 0.7;
}

.drt-evidence-count {
    font-size: var(--term-text-xs, 0.65rem);
    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 */

.drt-evidence-summary {
    width: 100%;
    padding: 1px 8px 2px;
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.drt-evidence-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.drt-evidence-chip {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.58rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--term-fg-secondary, #A09888);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drt-evidence-chip.drt-conf-high {
    color: var(--term-status-ready, #22C55E);
    border-color: rgba(34, 197, 94, 0.25);
}
.drt-evidence-chip.drt-conf-moderate {
    color: var(--term-status-editing, #F59E0B);
    border-color: rgba(245, 158, 11, 0.25);
}
.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 */
.drt-diff-preview {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.58rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.drt-preview-old {
    color: var(--term-status-error, #EF4444);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
}
.drt-preview-arrow {
    color: var(--term-fg-muted, #564E42);
    flex-shrink: 0;
}
.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" */
.drt-quick-actions {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}
.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, 'JetBrains Mono', monospace);
    font-size: 0.58rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.drt-quick-action:hover {
    background: var(--term-gold-subtle, rgba(212, 168, 87, 0.10));
    border-color: var(--term-gold, #D4A857);
}

/* ── Accept/Reject Flash (2026-02-11) ────────────────────────────── */
/* UX: 200ms visual pulse confirms action before auto-advancing */
@keyframes drt-flash-green {
    0%   { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.5); }
    50%  { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.3), 0 0 8px rgba(34, 197, 94, 0.15); }
    100% { box-shadow: none; }
}
@keyframes drt-flash-red {
    0%   { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.5); }
    50%  { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3), 0 0 8px rgba(239, 68, 68, 0.15); }
    100% { box-shadow: none; }
}
.diff-review-toolbar.drt-flash-accept {
    animation: drt-flash-green 0.25s ease-out;
}
.diff-review-toolbar.drt-flash-reject {
    animation: drt-flash-red 0.25s ease-out;
}

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

.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, 'JetBrains Mono', monospace);
    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); }
}

.cet-header {
    font-size: 0.7rem;
    color: var(--term-fg-secondary, #A09888);
    margin-bottom: 6px;
}
.cet-header strong {
    color: var(--term-fg-primary, #E8E4DC);
    font-family: var(--term-font-display, 'Outfit', sans-serif);
}

.cet-divider {
    height: 1px;
    background: var(--term-border-default, #2A2720);
    margin: 4px 0 6px;
}

.cet-evidence-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    line-height: 1.4;
}
.cet-icon { font-size: 0.8rem; flex-shrink: 0; }

.cet-no-evidence {
    color: var(--term-fg-muted, #564E42);
    font-style: italic;
}

/* Confidence bar */
.cet-confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--term-border-subtle, #1E1C18);
}
.cet-confidence-label {
    color: var(--term-fg-muted, #564E42);
    font-size: 0.65rem;
}
.cet-confidence-bar {
    flex: 1;
    height: 4px;
    background: var(--term-bg-void, #0C0B0A);
    border-radius: 2px;
    overflow: hidden;
}
.cet-confidence-fill {
    height: 100%;
    background: var(--term-accent, #00FFD0);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.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 ────────────────────────────────────── */

.diff-analyzing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    color: var(--term-status-editing, #F59E0B);
    background: var(--term-bg-surface, #13120F);
    border-bottom: 1px solid var(--term-border-subtle, #1E1C18);
}

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

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

/* ── 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;
    width: min(560px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    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, 'Outfit', sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--term-fg-primary, #E8E4DC);
    margin: 0;
}
.efm-context {
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    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 {
    padding: 16px 20px;
}
.efm-description {
    font-family: var(--term-font-body, 'DM Sans', sans-serif);
    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, 'JetBrains Mono', monospace);
    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, 'DM Sans', sans-serif);
    font-size: 0.85rem;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.6;
    box-sizing: border-box;
}
.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, 'JetBrains Mono', monospace);
    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, 'JetBrains Mono', monospace);
    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;
}

/* ── 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, 'JetBrains Mono', monospace);
}

.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, 'JetBrains Mono', monospace);
    font-size: 11px;
    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, 'JetBrains Mono', monospace);
    font-size: 10px;
}

.note-rail[data-theme="terminal"] .rail-trend-badge {
    font-family: var(--term-font-ui, 'JetBrains Mono', monospace);
    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, 'JetBrains Mono', monospace);
    font-size: 10px;
    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, 'JetBrains Mono', monospace);
}

.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, 'JetBrains Mono', monospace);
    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, 'JetBrains Mono', monospace);
    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, 'JetBrains Mono', monospace);
    color: var(--term-text, #A09A7C);
}

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

/* ==========================================================================
   §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);
    border-radius: var(--term-radius-none);
}

/* 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);
    border-radius: var(--term-radius-none);
}

.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);
    border-radius: var(--term-radius-none);
}

.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);
    border-radius: var(--term-radius-none);
}

.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);
    border-radius: var(--term-radius-none);
}

.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);
    border-radius: var(--term-radius-none);
}

.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 {
    font-family: var(--term-font-display);
    font-weight: 600;
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    background: var(--term-gold);
    color: var(--term-bg-void);
    border-radius: var(--term-radius-none);
}

.note-rail[data-theme="terminal"] .rail-cons-apply:hover {
    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-radius: var(--term-radius-none);
    border-color: var(--term-border-default);
    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);
    border-radius: var(--term-radius-none);
}


/* ==========================================================================
   §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, 'JetBrains Mono', monospace);
    font-size: var(--term-text-xs, 0.6875rem);
    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 {
    border-radius: var(--term-radius-none);
    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);
    border-radius: var(--term-radius-none);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wider);
}

.note-rail[data-theme="terminal"] .rail-detail-action-btn {
    border-radius: var(--term-radius-none);
    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-default);
    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);
}


/* ==========================================================================
   §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: 11px;
    color: var(--term-text-muted, #6b7280);
    opacity: 0.7;
    text-align: center;
    font-style: italic;
}

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