/*
 * Transfer Center redesign skins — prelim candidates (2026-07-04).
 *
 * SOURCE: Claude Design project cf6a41fd, "Transfer Center.dc.html", Turn 4.
 *   T3 established the invariant surface (one layout, emphasis shifts,
 *   nothing relocates); T4 proposed two visual identities on it. This file
 *   implements both as pure token-override skins on the REAL production DOM:
 *   zero markup relocation, zero id/data-field changes — the redesign fits
 *   our functionality, never the reverse.
 *
 * ACTIVATION: flag ENABLE_TC_REDESIGN renders the skin toggle + loads this
 *   sheet. Skin choice lives in localStorage('tc-skin') and lands as
 *   body[data-tc-skin="night-dispatch" | "phosphor-pure"]. No attribute =
 *   stock Dark-Roast-derived terminal look, byte-identical behavior.
 *
 * FONTS: candidate 4a specced Barlow Condensed for strip labels; NOT vendored
 *   locally, so we approximate with the existing display stack + tracking
 *   (no external CDN fonts — hard rule).
 */

/* ==========================================================================
   4a · NIGHT DISPATCH — graphite-blue ink, cyan = live, amber = decision
   ========================================================================== */
body[data-tc-skin="night-dispatch"] {
    --term-bg-void:       #090E13;
    --term-bg-surface:    #101820;
    --term-bg-elevated:   #16212B;
    --term-bg-header:     #0A0F14;
    --term-bg-input:      #0D141B;

    --term-fg-primary:    #F2F7FA;
    --term-fg-secondary:  #9FB0BC;
    --term-fg-muted:      #5E7280;
    --term-fg-inverse:    #090E13;

    --term-border-subtle: #1C2833;
    --term-border-default:#31424F;
    --term-border-strong: #43535F;

    /* T5 R0 (2026-07-06): three roles, one hue each. The first cut mapped the
       GOLD family to cyan, which leaked cyan into every gold-driven decision
       surface (PENDING read as "live"). Now: slate = chrome (labels/kickers/
       note title), cyan = live (recorder/extraction/transcript), amber =
       decision — gold means "label", never "decision". */
    --term-gold:          #7A93A5;
    --term-gold-dim:      rgba(122, 147, 165, 0.35);
    --term-gold-subtle:   rgba(122, 147, 165, 0.10);
    --term-gold-ghost:    rgba(122, 147, 165, 0.05);

    /* live family follows the skin accent — cyan = live, ONLY live */
    --term-accent:        #59D6C5;
    --term-accent-dim:    rgba(89, 214, 197, 0.40);
    --term-accent-subtle: rgba(89, 214, 197, 0.10);
    --term-accent-ghost:  rgba(89, 214, 197, 0.05);
    --term-live:          #59D6C5;
    --term-live-dim:      rgba(89, 214, 197, 0.40);
    --term-live-subtle:   rgba(89, 214, 197, 0.10);
    --term-live-ghost:    rgba(89, 214, 197, 0.05);
    --term-glow-accent:         0 0 8px rgba(89, 214, 197, 0.25), 0 0 24px rgba(89, 214, 197, 0.08);
    --term-glow-accent-intense: 0 0 12px rgba(89, 214, 197, 0.40), 0 0 36px rgba(89, 214, 197, 0.12);
    --term-glow-gold:           0 0 10px rgba(122, 147, 165, 0.15), 0 0 24px rgba(122, 147, 165, 0.06);

    /* Decision amber / decline red per T4 semantic split */
    --term-status-editing:   #F2A93B;
    --term-status-warning:   #F2A93B;
    --term-status-error:     #E05B4F;
    --term-status-critical:  #E05B4F;
    --term-status-generating:#59D6C5;
}

/* Flight-strip rail: list cards read as ATC strips — hard left status bar,
   condensed-feel labels via tracking (Barlow Condensed not vendored). */
body[data-tc-skin="night-dispatch"] .tc-transfer-card {
    border-left: 3px solid var(--term-border-strong);
    border-radius: 2px;
}
body[data-tc-skin="night-dispatch"] .tc-transfer-card.selected,
body[data-tc-skin="night-dispatch"] .tc-transfer-card:hover {
    /* R0: selected strip is the LIVE one — cyan, not chrome-slate */
    border-left-color: var(--term-live);
}
body[data-tc-skin="night-dispatch"] .tc-card-name {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.95em;
}
body[data-tc-skin="night-dispatch"] .tc-card-facility,
body[data-tc-skin="night-dispatch"] .tc-card-time {
    letter-spacing: 0.08em;
}
/* Decision spine reads amber — the one thing that must pop mid-call. */
body[data-tc-skin="night-dispatch"] .tc-disposition-badge,
body[data-tc-skin="night-dispatch"] .tc-urgency-badge {
    border-color: var(--term-status-editing);
}

/* ==========================================================================
   4b · PHOSPHOR PURE — true-black CRT, one green family, mono only
   ========================================================================== */
body[data-tc-skin="phosphor-pure"] {
    --term-bg-void:       #060907;
    --term-bg-surface:    #0B120D;
    --term-bg-elevated:   #121B15;
    --term-bg-header:     #070B08;
    --term-bg-input:      #0B120D;

    --term-fg-primary:    #D6EBDD;
    --term-fg-secondary:  #8FAF9A;
    --term-fg-muted:      #567A63;
    --term-fg-inverse:    #060907;

    --term-border-subtle: #1D2B21;
    --term-border-default:#2A3D2F;
    --term-border-strong: #3A5245;

    --term-gold:          #45E0A6;
    --term-gold-dim:      rgba(69, 224, 166, 0.35);
    --term-gold-subtle:   rgba(69, 224, 166, 0.10);
    --term-gold-ghost:    rgba(69, 224, 166, 0.05);

    /* T5 R0: live/accent join the single green family (one-family rule is
       this skin's identity — gold STAYS green here, unlike night-dispatch). */
    --term-accent:        #45E0A6;
    --term-accent-dim:    rgba(69, 224, 166, 0.40);
    --term-accent-subtle: rgba(69, 224, 166, 0.10);
    --term-accent-ghost:  rgba(69, 224, 166, 0.05);
    --term-live:          #45E0A6;
    --term-live-dim:      rgba(69, 224, 166, 0.40);
    --term-live-subtle:   rgba(69, 224, 166, 0.10);
    --term-live-ghost:    rgba(69, 224, 166, 0.05);
    --term-glow-accent:         0 0 8px rgba(69, 224, 166, 0.25), 0 0 24px rgba(69, 224, 166, 0.08);
    --term-glow-accent-intense: 0 0 12px rgba(69, 224, 166, 0.40), 0 0 36px rgba(69, 224, 166, 0.12);

    --term-status-editing:   #F2A93B;
    --term-status-warning:   #F2A93B;
    --term-status-error:     #E05B4F;
    --term-status-critical:  #E05B4F;
    --term-status-generating:#45E0A6;

    /* One type family: everything mono, per 4b spec */
    --term-font-display: var(--term-font-mono);
    --term-font-body:    var(--term-font-mono);
}

/* Phosphor glow on primary accents — restrained, text-shadow only. */
body[data-tc-skin="phosphor-pure"] .tc-logo-mark,
body[data-tc-skin="phosphor-pure"] .tc-card-name,
body[data-tc-skin="phosphor-pure"] .tc-routing-value--primary {
    text-shadow: 0 0 8px var(--term-gold-dim);
}
body[data-tc-skin="phosphor-pure"] .tc-transfer-card.selected {
    box-shadow: inset 0 0 0 1px var(--term-gold-dim);
}

/* ==========================================================================
   T5 R0 · Decision surfaces read AMBER under both skins.
   Stock CSS colors PENDING from the gold family (transfer-center.css:4697,
   4706, 5037) — post-R0 that family is chrome (slate under night-dispatch),
   so decision emphasis must be re-pointed explicitly at amber.
   ========================================================================== */
body[data-tc-skin="night-dispatch"] .tc-decision-btn--pending:hover,
body[data-tc-skin="phosphor-pure"] .tc-decision-btn--pending:hover {
    border-left-color: var(--term-status-editing);
}
body[data-tc-skin="night-dispatch"] .tc-decision-btn--pending.is-active,
body[data-tc-skin="phosphor-pure"] .tc-decision-btn--pending.is-active {
    border-left-color: var(--term-status-editing);
    border-color: var(--term-status-editing);
    background: rgba(242, 169, 59, 0.12);
    box-shadow: inset 0 0 0 1px rgba(242, 169, 59, 0.40), 0 0 12px rgba(242, 169, 59, 0.10);
}
/* Generate is a FILLED button (transfer-center.css:1508 — border: none), so
   the decision color goes on the fill, not a border that doesn't render. */
body[data-tc-skin="night-dispatch"] .tc-generate-btn,
body[data-tc-skin="phosphor-pure"] .tc-generate-btn {
    background: var(--term-status-editing);
    color: var(--term-fg-inverse);
}
body[data-tc-skin="night-dispatch"] .tc-note-status.is-unsaved,
body[data-tc-skin="phosphor-pure"] .tc-note-status.is-unsaved {
    color: var(--term-status-editing);
}
/* Promoted ACCEPT lane: stock rule (transfer-center.css `.tc-disposition-on
   #tcAcceptBlock.tc-lane-promote`) hard-codes a warm gold wash and borders
   from the gold family — post-R0 that would render slate borders over a gold
   wash. Keep the ID so this beats the stock (1,2,0) specificity. */
body[data-tc-skin="night-dispatch"] .tc-disposition-on #tcAcceptBlock.tc-lane-promote,
body[data-tc-skin="phosphor-pure"] .tc-disposition-on #tcAcceptBlock.tc-lane-promote {
    background: rgba(242, 169, 59, 0.12);
    border-color: rgba(242, 169, 59, 0.35);
    border-left: 4px solid var(--term-status-editing);
    box-shadow: inset 0 0 0 1px rgba(242, 169, 59, 0.35), 0 2px 16px rgba(0, 0, 0, 0.40);
}

/* ==========================================================================
   Skin toggle button (rendered by skin-toggle.js, flag-gated)
   ========================================================================== */
.tc-skin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--term-border-default);
    border-radius: 999px;
    color: var(--term-fg-muted);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: 0.08em;
    cursor: pointer;
}
.tc-skin-toggle:hover {
    color: var(--term-fg-primary);
    border-color: var(--term-gold-dim);
}
.tc-skin-toggle .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--term-gold);
}

/* ==========================================================================
   T5 UX REFINEMENTS (2026-07-06) — design source: TRANSFER-CENTER-UX-HANDOFF.md
   (Claude Design cf6a41fd, T5). Skin-AGNOSTIC layer: these rules are unscoped
   (apply under stock/night-dispatch/phosphor alike) but live in THIS sheet so
   ENABLE_TC_REDESIGN stays the single kill-switch — the sheet only loads
   flag-ON, and all companion markup/JS behavior is gated on the same flag.
   Token-based throughout, so active skins restyle every surface for free.
   ========================================================================== */
@keyframes tc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- S-DG · DAY GLANCE — rail decision board (also needs disposition flag) --
   Every call = a dot on the 06:00–18:00 track colored by disposition, plus a
   density bar. Renderer: renderDayGlance() in transfer-list.js. */
.tc-list-panel {
    --tc-dispo-accept:    var(--term-status-ready);
    --tc-dispo-pending:   var(--term-status-editing);
    --tc-dispo-advice:    var(--term-blue, #5B9BD5);
    --tc-dispo-decline:   var(--term-red, #E55A50);
    --tc-dispo-undecided: var(--term-fg-muted);
}
.tc-day-glance {
    padding: var(--term-space-md) var(--term-space-md) var(--term-space-sm);
    border-bottom: 1px solid var(--term-border-default);
    background: var(--term-bg-header);
}
.tc-day-glance[hidden] { display: none; }
.tc-day-glance-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--term-space-sm);
}
.tc-day-glance-kicker {
    font-family: var(--term-font-mono); font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wider); text-transform: uppercase;
    color: var(--term-gold);
}
.tc-day-glance-count {
    font-family: var(--term-font-mono); font-size: var(--term-text-xs);
    color: var(--term-fg-muted);
}
.tc-day-glance-track { position: relative; height: 14px; margin: 0 2px; }
.tc-day-glance-track::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: var(--term-border-default);
}
.tc-day-dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--tc-dispo-undecided);
}
.tc-day-dot[data-disposition="accept"]             { background: var(--tc-dispo-accept); }
.tc-day-dot[data-disposition="pending_specialist"] { background: var(--tc-dispo-pending); }
.tc-day-dot[data-disposition="local_mgmt_advice"]  { background: var(--tc-dispo-advice); }
.tc-day-dot[data-disposition="decline"]            { background: var(--tc-dispo-decline); opacity: 0.55; }
.tc-day-dot.is-selected {
    width: 11px; height: 11px;
    background: var(--term-live);
    box-shadow: var(--term-glow-accent);
}
.tc-day-glance-bar {
    display: flex; height: 4px; margin: 6px 2px 0;
    border-radius: 2px; overflow: hidden; background: var(--term-bg-input);
}
.tc-day-seg[data-disposition="accept"]             { background: var(--tc-dispo-accept); }
.tc-day-seg[data-disposition="pending_specialist"] { background: var(--tc-dispo-pending); }
.tc-day-seg[data-disposition="local_mgmt_advice"]  { background: var(--tc-dispo-advice); }
.tc-day-seg[data-disposition="decline"]            { background: var(--tc-dispo-decline); opacity: 0.55; }
.tc-day-seg[data-disposition="undecided"]          { background: var(--tc-dispo-undecided); opacity: 0.4; }

/* --- S-CB · CAPTURE BAR — live intake scoreboard (also disposition-gated) --
   One 6-segment bar = the call agenda at arm's length. Segment states mirror
   the old intake cards; writer: updateLiveIntakeFromDom() in call-recorder.js. */
.tc-capture-bar { display: flex; gap: 3px; height: 5px; margin: var(--term-space-sm) 0; }
.tc-capture-seg { flex: 1; border-radius: 1px; background: var(--term-bg-input); }
.tc-capture-seg.is-captured,
.tc-capture-seg.is-confirmed { background: var(--term-live); }
.tc-capture-seg.is-manual    { background: var(--term-gold); }
.tc-capture-seg.is-preview   { background: var(--term-live-dim); animation: tc-pulse 2s ease-in-out infinite; }
.tc-capture-bar.has-critical .tc-capture-seg.is-missing {
    background: color-mix(in srgb, var(--term-red, #E55A50) 30%, var(--term-bg-input));
    animation: tc-pulse 2.2s ease-in-out infinite;
}

/* --- R3 · GAP LINE ESCALATION — impossible to miss before hang-up ----------
   is-critical: recording + callback/clinical still missing → red pulse.
   is-clear (existing convention): all captured → ready-green. */
.tc-live-gaps.is-critical {
    color: var(--term-red, #E55A50); font-weight: 600;
    animation: tc-pulse 2.2s ease-in-out infinite;
}

/* --- S-NT · NOTE TAB + DRAWER DOCKING (R4) ---------------------------------
   Persistent reopen affordance in the workspace footer once a note exists; at
   ≥1560px an open drawer docks beside the workspace instead of covering chart
   materials. Below 1560px the fixed overlay is unchanged. */
:root { --tc-note-drawer-w: 480px; }
.tc-note-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--term-gold-ghost);
    border: 1px dashed var(--term-gold-dim);
    border-radius: 2px;
    color: var(--term-gold);
    font-family: var(--term-font-mono); font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wide); cursor: pointer;
    white-space: nowrap;
}
/* Author display beats the UA [hidden] rule — restore it explicitly (same
   documented bug class as .tc-empty-state[hidden] in transfer-center.css). */
.tc-note-tab[hidden] { display: none; }
.tc-note-tab:hover { border-style: solid; background: var(--term-gold-subtle); }
@media (min-width: 1560px) {
    /* Drawer docks beside the workspace — chart materials stays visible. */
    body.tc-note-open .tc-workspace {
        margin-right: var(--tc-note-drawer-w, 480px);
    }
}

/* --- R5 · INVARIANT-SURFACE STATE (T3) -------------------------------------
   Call-end is a STATE change — emphasis shifts, nothing relocates. Classes set
   by call-recorder.js start/stop. Motion budget: pulses are LIVE-ONLY; wrap-up
   freezes every pulse in place and promotes the one next action (Generate). */
.tc-workspace-form.is-wrapup .tc-rec-dot-pulse,
.tc-workspace-form.is-wrapup .tc-capture-seg,
/* higher-specificity twin: the has-critical missing-seg pulse (0,4,0) would
   otherwise outrank a plain .is-wrapup freeze */
.tc-workspace-form.is-wrapup .tc-capture-bar.has-critical .tc-capture-seg.is-missing,
.tc-workspace-form.is-wrapup .tc-live-gaps { animation: none; }
.tc-workspace-form.is-wrapup .tc-generate-btn {
    background: var(--term-status-editing);
    border-color: var(--term-status-editing);
    color: var(--term-fg-inverse);
}

/* ==========================================================================
   T3 COMPLETION · wrap-up emphasis deltas beyond R5 (2026-07-07)
   Design: cf6a41fd T3 — call-end is a page-level STATE; emphasis shifts,
   nothing relocates. These extend the shipped R5 block (freeze + Generate
   promotion) with the remaining per-element deltas from the T3 spec that map
   to REAL DOM. State class comes from call-recorder.js (is-wrapup).
   ========================================================================== */
/* Gap seams stop asking: red-dashed → solid, settled */
.tc-workspace-form.is-wrapup .tc-field-gap {
    border-style: solid;
    animation: none;
}
/* Promoted ACCEPT lane: gold "asking" → olive "decided" (all skins + stock;
   skin-prefixed twins outrank the R0 amber skin rule) */
.tc-workspace-form.is-wrapup #tcAcceptBlock.tc-lane-promote,
body[data-tc-skin="night-dispatch"] .tc-workspace-form.is-wrapup #tcAcceptBlock.tc-lane-promote,
body[data-tc-skin="phosphor-pure"] .tc-workspace-form.is-wrapup #tcAcceptBlock.tc-lane-promote {
    background: rgba(148, 158, 78, 0.10);
    border-color: rgba(148, 158, 78, 0.35);
    border-left: 4px solid #949E4E;
    box-shadow: inset 0 0 0 1px rgba(148, 158, 78, 0.30), 0 2px 16px rgba(0, 0, 0, 0.35);
}
/* Guideline cards: unresolved REQUIRE stays visible but static; resolved
   recede — the wrap-up question is "what's still open", not history */
.tc-workspace-form.is-wrapup .tc-gl-card { animation: none; }
.tc-workspace-form.is-wrapup .tc-gl-card--resolved { opacity: 0.45; }
/* Note affordance: dashed promise → solid artifact */
.tc-workspace-form.is-wrapup .tc-note-tab { border-style: solid; }
/* Transcript status reads as finalizing chrome (text itself is owned by the
   enhancement pipeline: receiving → Enhancing… → Enhanced ready) */
.tc-workspace-form.is-wrapup .tc-transcript-status {
    color: var(--term-gold);
}

/* ==========================================================================
   T5 2a · DECISION-BOARD RAIL (2026-07-07) — flight-strip cards + bays.
   Skin-agnostic (sheet is flag-loaded); disposition colors reuse the S-DG
   palette custom props defined on .tc-list-panel (cards inherit them).
   ========================================================================== */
.tc-rail-bay {
    list-style: none;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    font-weight: 600;
    letter-spacing: var(--term-tracking-wider);
    color: var(--term-fg-muted);
    padding: 10px 12px 4px;
    border-bottom: 1px solid var(--term-border-subtle);
    pointer-events: none;
}
.tc-card-decision-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}
.tc-card-dispo-word {
    font-family: var(--term-font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tc-dispo-undecided, var(--term-fg-muted));
}
.tc-card-dispo-word[data-disposition="accept"]             { color: var(--tc-dispo-accept); }
.tc-card-dispo-word[data-disposition="pending_specialist"] { color: var(--tc-dispo-pending); }
.tc-card-dispo-word[data-disposition="local_mgmt_advice"]  { color: var(--tc-dispo-advice); }
.tc-card-dispo-word[data-disposition="decline"]            { color: var(--tc-dispo-decline); opacity: 0.75; }
.tc-card-call-time {
    font-family: var(--term-font-mono);
    font-size: 0.5rem;
    color: var(--term-fg-muted);
    flex: none;
}
/* The lead line answers "decision?" — the legacy badge repeating it below is
   noise; the urgency/status badges stay. */
.tc-transfer-card .tc-card-decision-line ~ .tc-card-badges .tc-disposition-badge {
    display: none;
}

/* ==========================================================================
   T5 2a · CHART-MATERIALS FORMATTING LAYER (2026-07-07)
   Read-only formatted view over the paste well (chart-materials-view.js).
   The lane stays a paste target: click/Enter swaps back to the raw textarea.
   ========================================================================== */
.tc-chart-raw-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tc-chart-view {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    line-height: 1.55;
    background: var(--term-bg-input);
    border: 1px solid var(--term-border-default);
    border-radius: 3px;
    padding: 8px 10px;
    max-height: 260px;      /* ≈ the rows=10 textarea it replaces */
    overflow-y: auto;
    cursor: text;
    color: var(--term-fg-secondary);
}
.tc-chart-view[hidden] { display: none; }
.tc-chart-view:focus-visible { outline: 2px solid var(--term-gold); }
.tcv-header {
    margin: 8px 0 2px;
    padding-top: 6px;
    border-top: 1px solid var(--term-border-subtle);
    font-weight: 700;
    letter-spacing: var(--term-tracking-wide);
    color: var(--term-gold);
}
.tcv-header:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.tcv-blank { height: 6px; }
.tcv-hi { color: var(--term-red, #E55A50); font-weight: 600; }
.tcv-lo { color: var(--term-blue, #5B9BD5); font-weight: 600; }
.tcv-hint {
    margin-top: 8px;
    font-size: 0.5rem;
    color: var(--term-fg-muted);
}

/* ==========================================================================
   T5 R6 · CALL-ACTIVITY TIMELINE (2026-07-07) — turns × rules × extractions
   on the call clock. Fills live; freezes at END (motion budget: live-only —
   the only animation is the open-REQUIRE pulse, gated on .is-call-live).
   ========================================================================== */
.tc-call-activity {
    margin-top: var(--term-space-sm);
    padding: 8px 10px;
    background: var(--term-bg-header);
    border: 1px solid var(--term-border-subtle);
    border-radius: 3px;
}
.tc-call-activity[hidden] { display: none; }
.tca-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
}
.tca-title {
    font-family: var(--term-font-mono); font-size: 0.5rem; font-weight: 700;
    letter-spacing: var(--term-tracking-wider); color: var(--term-gold);
}
.tca-clock {
    font-family: var(--term-font-mono); font-size: 0.5625rem;
    color: var(--term-live);
}
.tca-clock.is-ended { color: var(--term-fg-muted); }
.tca-lane {
    display: grid; grid-template-columns: 34px 1fr; gap: 8px;
    align-items: center; padding: 2px 0;
}
.tca-lane-label {
    font-family: var(--term-font-mono); font-size: 0.4375rem; font-weight: 700;
    letter-spacing: 0.08em; color: var(--term-fg-muted); text-align: right;
}
.tca-track {
    position: relative; height: 10px;
    border-bottom: 1px solid var(--term-border-subtle);
}
.tca-mark {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
}
.tca-turn {
    width: 2px; height: 7px; border-radius: 1px;
    background: var(--term-live-dim);
}
.tca-extract {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--term-live);
}
/* Rules are diamonds, colored by action */
.tca-rule {
    width: 6px; height: 6px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.tca-rule--require   { background: var(--term-status-editing); }
.tca-rule--flag      { background: var(--term-red, #E55A50); }
.tca-rule--recommend { background: var(--term-live); }
.tca-rule--resolved  { background: var(--term-fg-muted); opacity: 0.5; }
/* Open REQUIRE pulses only while the call is live (R5 motion budget) */
.tc-workspace-form.is-call-live ~ * .tca-rule--require,
.tc-workspace-form.is-call-live .tca-rule--require {
    animation: tc-pulse 2s ease-in-out infinite;
}