/* ═══════════════════════════════════════════════════════════════════════
   reading-echo.components.css
   ─────────────────────────────────────────────────────────────────────
   Component grammar for 牌影回响 / Reading Echo + the
   Fate Thread Signal Toggle. Consumes tokens from reading-echo.tokens.css

   Layers:
     1. Atoms             (.ct-btn, .ct-chip, .ct-meta, .ct-card)
     2. Question Trace    (.ct-rail · .ct-node)
     3. Echo Candle       (.ct-candle)
     4. Observation       (.ct-tracks · .ct-tracks-seg)
     5. Domain Band       (.ct-domain)
     6. Old-Card Anchor   (.ct-anchor)
     7. Panels & Sheet    (.ct-panel · .ct-sheet)
     8. Fate Thread Toggle (.fate-thread-toggle  — single homepage signal)

   ⚠ For consumers: import this file's TOKENS file first.
     @import './reading-echo.tokens.css';
   ═══════════════════════════════════════════════════════════════════════ */

@import url('./reading-echo.tokens.css');

/* ─────────────────────────────────────────────────────────────────────
   1 · ATOMS
   ───────────────────────────────────────────────────────────────────── */

.ct-btn {
  height: 36px; padding: 0 16px;
  border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-primary);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer; border-radius: var(--ct-radius-control);
  transition: border-color var(--ct-dur-fast) var(--ct-ease-quiet-out),
              box-shadow   var(--ct-dur-fast) var(--ct-ease-quiet-out),
              background   var(--ct-dur-fast) var(--ct-ease-quiet-out);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ct-btn:hover  { border-color: var(--border-active); box-shadow: var(--glow-subtle); }
.ct-btn:active { background: rgba(0,0,0,0.4); }
.ct-btn[disabled],
.ct-btn.is-disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

.ct-btn--primary { background: var(--text-primary); color: #000; border-color: var(--text-primary); }
.ct-btn--primary:hover { box-shadow: var(--glow-halo); border-color: var(--text-primary); }
.ct-btn--ghost   { border-color: transparent; color: var(--text-secondary); }
.ct-btn--ghost:hover { color: var(--text-primary); border-color: var(--border-subtle); }
.ct-btn--lg      { height: 44px; padding: 0 20px; font-size: 12px; }

/* CN labels — buttons whose face is Chinese (no uppercase / tracking) */
.ct-btn--cn { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 13px; }

.ct-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--ct-radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  background: transparent; cursor: pointer;
  transition: all var(--ct-dur-fast) var(--ct-ease-quiet-out);
}
.ct-chip[aria-selected="true"],
.ct-chip.is-selected { border-color: var(--ct-border-selected); color: var(--text-primary); box-shadow: var(--glow-signal); }
.ct-chip.is-warning  { border-color: var(--ct-border-warning); color: var(--accent-warning); }
.ct-chip.is-closed   { border-color: var(--ct-border-closed); color: var(--text-subtle); }

.ct-meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mono);
}
.ct-hairline { height: 1px; background: var(--border-hairline); border: 0; }
.ct-card     { background: var(--ct-surface-raised); border: 1px solid var(--ct-border-hairline); border-radius: var(--ct-radius-surface); }

/* ─────────────────────────────────────────────────────────────────────
   2 · QUESTION TRACE RAIL  (问迹信号轨)
   ─────────────────────────────────────────────────────────────────────
   A11y: every node is a real <button> with aria-label and visible focus.
   On mobile, tooltips degrade to a bottom-sheet (handled in JS / kit
   markup) — do not rely on the :hover tooltip on touch devices.
   ───────────────────────────────────────────────────────────────────── */

.ct-rail { position: relative; height: 56px; width: 100%; display: flex; align-items: center; }
.ct-rail--compact { height: 36px; }
.ct-rail--lg      { height: 96px; }

.ct-rail__track { position: absolute; inset: 0; display: flex; align-items: center; }
.ct-rail__track::before {
  content: ""; flex: 1; height: var(--ct-rail-thickness);
  background: var(--ct-rail-track-color);
}

.ct-rail__segments {
  position: absolute; inset: 0;
  display: grid; align-items: center;
  grid-auto-flow: column; grid-auto-columns: 1fr;
}
.ct-rail__segment { height: var(--ct-rail-thickness); background: var(--ct-rail-track-color); position: relative; }
.ct-rail__segment--waiting   { background: transparent;
  background-image: linear-gradient(to right, var(--ct-rail-track-color) 0, var(--ct-rail-track-color) 4px, transparent 4px, transparent 8px);
  background-size: 8px 1px; background-repeat: repeat-x; background-position: center; }
.ct-rail__segment--completed { background: var(--ct-rail-track-completed); }
.ct-rail__segment--paused    { background: transparent;
  background-image: linear-gradient(to right, var(--ct-echo-paused) 0, var(--ct-echo-paused) 12px, transparent 12px, transparent 22px);
  background-size: 22px 1px; background-repeat: repeat-x; background-position: center; }
.ct-rail__segment--closing   { background: linear-gradient(to right, var(--ct-rail-track-completed), rgba(236,233,225,0.04)); }
.ct-rail__segment--highlight { background: var(--text-primary); box-shadow: 0 0 8px rgba(236,233,225,0.32); }
.ct-rail__segment--suppress  { background: rgba(236,233,225,0.04); }

.ct-rail__nodes {
  position: relative; z-index: 1; flex: 1;
  display: flex; justify-content: space-between; align-items: center;
}

/* Base node — implemented as a real button for keyboard a11y */
.ct-node {
  --size: var(--ct-rail-node-md);
  appearance: none; -webkit-appearance: none;
  padding: 0; margin: 0;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: var(--ct-bg-cosmos);
  border: 1px solid var(--ct-star-quiet);
  position: relative;
  cursor: pointer;
  transition: all var(--ct-dur-fast) var(--ct-ease-quiet-out);
}
/* expand hit target without changing visual size — meets 44px touch min */
.ct-node::after {
  content: ""; position: absolute;
  inset: calc((100% - 44px) / 2);
  border-radius: 50%;
}
.ct-node:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 4px; }

/* ── node types ─────────────────────────────────────────────────── */
.ct-node--anchor   { --size: var(--ct-rail-node-anchor); border: 1px solid var(--text-primary); background: var(--ct-bg-cosmos); }
.ct-node--anchor::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--text-primary); opacity: 0.65;
}
.ct-node--wait     { --size: var(--ct-rail-node-sm); border-color: var(--ct-star-faint); background: transparent; }
.ct-node--due      { --size: var(--ct-rail-node-lg); border-color: var(--text-primary); background: var(--text-primary); box-shadow: var(--ct-echo-due-glow); }
.ct-node--light    { background: var(--ct-echo-light); border-color: var(--ct-echo-light); }
.ct-node--full     { background: var(--ct-echo-full); border-color: var(--ct-echo-full); box-shadow: var(--glow-halo); }
.ct-node--evidence-low    { background: transparent; border-color: var(--ct-evidence-low);    border-style: dashed; }
.ct-node--evidence-medium { background: linear-gradient(to top, var(--ct-evidence-medium) 50%, transparent 50%); border-color: var(--ct-evidence-medium); box-shadow: var(--ct-evidence-medium-glow); }
.ct-node--evidence-high   { background: var(--ct-evidence-high); border-color: var(--ct-evidence-high); box-shadow: var(--ct-evidence-high-glow); }
.ct-node--paused   { background: transparent; border-color: var(--ct-echo-paused); position: relative; }
.ct-node--paused::before { content:""; position: absolute; inset: 30% 42%; background: var(--ct-echo-paused); }
.ct-node--closing  { --size: var(--ct-rail-node-md); background: var(--ct-echo-closed); border-color: var(--ct-echo-closed); }
.ct-node--derived  { background: var(--ct-bg-cosmos); border: 1px dashed var(--text-primary); }

.ct-node.is-pulsing  { animation: ct-due-node-pulse var(--ct-dur-pulse) var(--ct-ease-signal-pulse) infinite; }
.ct-node.is-selected { animation: ct-rail-node-select var(--ct-dur-medium) var(--ct-ease-quiet-out) forwards; }

/* tooltip — DESKTOP ONLY · hidden under @media (hover:none) */
.ct-rail__tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 220px; max-width: 280px;
  padding: 12px 14px;
  background: var(--bg-glass-strong);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-subtle);
  border-radius: var(--ct-radius-surface);
  font-size: 12px; color: var(--text-primary);
  box-shadow: var(--shadow-popover);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ct-dur-fast) var(--ct-ease-quiet-out);
  z-index: 20;
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  .ct-node:hover .ct-rail__tooltip,
  .ct-node:focus-visible .ct-rail__tooltip { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  /* on touch, the tooltip never shows — tap opens a bottom sheet via JS */
  .ct-rail__tooltip { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   3 · ECHO CANDLE MARKER  (回声烛标)
   ───────────────────────────────────────────────────────────────────── */

.ct-candle {
  --candle-h: 48px;
  position: relative;
  width: 22px; height: var(--candle-h);
  display: inline-block; flex-shrink: 0;
}
.ct-candle__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--text-primary);
  background: transparent;
}
.ct-candle[data-evidence="medium"] .ct-candle__center { background: linear-gradient(to top, var(--ct-evidence-medium) 50%, transparent 50%); }
.ct-candle[data-evidence="high"]   .ct-candle__center { background: var(--ct-evidence-high); box-shadow: var(--ct-evidence-high-glow); }

.ct-candle__ext {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 1px; height: 14px;
  background: var(--text-primary); opacity: 0;
  transform-origin: center bottom;
  animation: ct-echo-candle-tick var(--ct-dur-medium) var(--ct-ease-quiet-out) 0ms forwards;
}
.ct-candle__int {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 1px; height: 14px;
  background: var(--ct-signal-depletion); opacity: 0;
  transform-origin: center top;
  animation: ct-echo-candle-tick var(--ct-dur-medium) var(--ct-ease-quiet-out) 120ms forwards;
}
.ct-candle[data-depletion="none"] .ct-candle__int { background: var(--ct-star-faint); }
.ct-candle__act {
  position: absolute; left: calc(50% + 7px); top: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 1px;
  background: var(--ct-signal-action); opacity: 0;
  animation: ct-echo-candle-tick var(--ct-dur-medium) var(--ct-ease-quiet-out) 240ms forwards;
}
.ct-candle[data-action="none"] .ct-candle__act { display: none; }

.ct-candle--lg { width: 36px; height: 80px; }
.ct-candle--lg .ct-candle__center { width: 16px; height: 16px; }
.ct-candle--lg .ct-candle__ext, .ct-candle--lg .ct-candle__int { height: 24px; }
.ct-candle--lg .ct-candle__act { width: 10px; left: calc(50% + 11px); }

/* ─────────────────────────────────────────────────────────────────────
   4 · OBSERVATION TRACKS  (三信号分层)
   ───────────────────────────────────────────────────────────────────── */

.ct-tracks { display: flex; flex-direction: column; gap: 8px; }
.ct-tracks__row { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 16px; }
.ct-tracks__label {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--text-secondary);
}
.ct-tracks__line { position: relative; height: 18px; display: flex; align-items: center; }
.ct-tracks__line::before {
  content: ""; position: absolute; inset: auto 0; height: 1px;
  background: var(--ct-rail-track-color);
}
.ct-tracks__dots { position: relative; z-index: 1; flex: 1; display: flex; justify-content: space-between; }
.ct-tracks__dot {
  --size: 10px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--ct-bg-cosmos); border: 1px solid var(--ct-star-quiet);
}
.ct-tracks__dot[data-state="yes"]     { background: var(--text-primary); border-color: var(--text-primary); box-shadow: var(--ct-evidence-high-glow); }
.ct-tracks__dot[data-state="partial"] { background: linear-gradient(to top, var(--ct-evidence-medium) 50%, transparent 50%); border-color: var(--ct-evidence-medium); }
.ct-tracks__dot[data-state="no"]      { background: transparent; border-color: var(--ct-star-faint); border-style: dashed; opacity: 0.6; }
.ct-tracks__dot[data-state="unknown"] { background: transparent; border-color: var(--ct-star-quiet); }
.ct-tracks__dot[data-state="na"]      { background: transparent; border: 0; height: 1px; width: 8px; background: var(--ct-star-faint); border-radius: 0; }

/* Mobile segmented control */
.ct-tracks-seg {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--border-subtle); border-radius: var(--ct-radius-control);
  overflow: hidden;
}
.ct-tracks-seg button {
  appearance: none; background: transparent; border: 0;
  height: 44px; color: var(--text-secondary);
  font-family: var(--font-sans); font-size: 13px;
  cursor: pointer;
  border-right: 1px solid var(--border-hairline);
  transition: all var(--ct-dur-fast) var(--ct-ease-quiet-out);
}
.ct-tracks-seg button:last-child { border-right: 0; }
.ct-tracks-seg button[aria-pressed="true"] { background: var(--text-primary); color: #000; }
.ct-tracks-seg button:focus-visible { outline: 1px solid var(--border-strong); outline-offset: -2px; }

/* ─────────────────────────────────────────────────────────────────────
   5 · DOMAIN SIGNAL BAND
   ───────────────────────────────────────────────────────────────────── */

.ct-domain {
  display: grid; grid-template-columns: 120px 1fr 36px; align-items: center;
  gap: 14px; padding: 10px 12px;
  border-top: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: background var(--ct-dur-fast) var(--ct-ease-quiet-out);
  position: relative;
}
.ct-domain:first-child { border-top: 0; }
.ct-domain:hover { background: rgba(236,233,225,0.02); }
.ct-domain.is-active { background: rgba(236,233,225,0.04); }
.ct-domain:focus-visible { outline: 1px solid var(--border-strong); outline-offset: -1px; }

.ct-domain__name { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); }
.ct-domain.is-active .ct-domain__name { color: var(--text-primary); }

.ct-domain__band { position: relative; height: 18px; display: flex; align-items: center; }
.ct-domain__band::before {
  content: ""; position: absolute; inset: auto 0; height: 1px;
  background: var(--ct-domain-other); opacity: 0.5;
}
.ct-domain[data-domain="rel"]     .ct-domain__band::before { background: var(--ct-domain-rel); }
.ct-domain[data-domain="work"]    .ct-domain__band::before { background: var(--ct-domain-work); }
.ct-domain[data-domain="inner"]   .ct-domain__band::before { background: var(--ct-domain-inner); }
.ct-domain[data-domain="affairs"] .ct-domain__band::before { background: var(--ct-domain-affairs); }

.ct-domain__nodes { position: relative; z-index: 1; flex: 1; display: flex; gap: 0; justify-content: flex-start; }
.ct-domain__node {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-primary); opacity: 0.4;
  margin-left: 5%;
}
.ct-domain__node.is-due { opacity: 1; box-shadow: var(--ct-echo-due-glow); }
.ct-domain__node.is-closed { opacity: 0.18; }

.ct-domain__count { text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-mono); font-feature-settings: 'tnum'; }

/* ─────────────────────────────────────────────────────────────────────
   6 · OLD-CARD ANCHOR
   ─────────────────────────────────────────────────────────────────────
   ⚠ Only the anchor of the CURRENTLY SELECTED or DUE question may use
   .is-breathing. Never animate every list-item anchor.
   ───────────────────────────────────────────────────────────────────── */

.ct-anchor {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--ct-radius-control);
  background: rgba(0,0,0,0.4);
  position: relative;
}
.ct-anchor__card {
  position: relative;
  width: 28px; aspect-ratio: 3 / 4.6;
  border: 1px solid var(--border-active);
  background: #000; overflow: hidden;
}
.ct-anchor__card img { width: 100%; height: 100%; object-fit: cover; }
.ct-anchor--lg .ct-anchor__card { width: 56px; }
.ct-anchor--xl .ct-anchor__card { width: 86px; }
.ct-anchor.is-breathing .ct-anchor__card {
  animation: ct-old-card-anchor-breathe 4s var(--ct-ease-signal-pulse) infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   7 · PANELS — drawer, modal, bottom sheet
   ───────────────────────────────────────────────────────────────────── */

.ct-panel {
  background: var(--ct-surface-glass);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-subtle);
  border-radius: var(--ct-radius-surface);
  box-shadow: var(--ct-shadow-panel);
  animation: ct-panel-glass-rise var(--ct-dur-slow) var(--ct-ease-cinematic) both;
}
.ct-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-hairline); }
.ct-panel__body { padding: 20px; }

.ct-sheet {
  border-top-left-radius: 12px; border-top-right-radius: 12px;
  background: var(--bg-glass-strong);
  backdrop-filter: var(--backdrop-blur);
  border-top: 1px solid var(--border-subtle);
  animation: ct-mobile-sheet-rise var(--ct-dur-slow) var(--ct-ease-cinematic) both;
}
.ct-sheet__grab { width: 36px; height: 3px; border-radius: 2px; background: var(--border-active); margin: 8px auto 0; }

/* ─────────────────────────────────────────────────────────────────────
   8 · FATE THREAD SIGNAL TOGGLE
   ─────────────────────────────────────────────────────────────────────
   The SINGLE top-level Fate Thread entry on the main 3D app surface.
   Stateful — visual changes per priority signal. Never two of these.
   Never combined with a separate Daily Card / reward / streak button.

   Markup:
     <button class="fate-thread-toggle signal-echo-due"
             type="button" aria-label="…">
       <span class="fate-thread-signal-label">今日回声</span>
       <span class="fate-thread-signal-glyph" data-signal="reading_echo_due"></span>
     </button>
   ───────────────────────────────────────────────────────────────────── */

.fate-thread-toggle {
  appearance: none; -webkit-appearance: none;
  position: relative;
  min-width: var(--ct-toggle-size);
  height: var(--ct-toggle-size);
  border-radius: var(--ct-radius-pill);
  border: 1px solid var(--ct-toggle-ring);
  background: var(--ct-toggle-bg);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0 6px 0 18px;
  display: inline-flex; align-items: center; gap: 12px;
  transition: border-color var(--ct-dur-fast) var(--ct-ease-quiet-out),
              box-shadow   var(--ct-dur-fast) var(--ct-ease-quiet-out);
}
.fate-thread-toggle:hover { border-color: var(--ct-toggle-ring-active); box-shadow: var(--ct-toggle-glow-active); }
.fate-thread-toggle:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 3px; }
.fate-thread-toggle:active { transform: scale(0.985); }

/* Icon-only (no label) variant — defaults to perfect circle */
.fate-thread-toggle.is-iconic { width: var(--ct-toggle-size); min-width: 0; padding: 0; justify-content: center; }

.fate-thread-signal-label {
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1; letter-spacing: 0;
  color: var(--text-primary);
  opacity: 0.92;
  white-space: nowrap;
}
.fate-thread-signal-glyph {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ct-toggle-ring);
  background: var(--ct-toggle-bg);
  position: relative;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.fate-thread-toggle.is-morphing .fate-thread-signal-label,
.fate-thread-toggle.is-morphing .fate-thread-signal-glyph {
  animation: ct-signal-toggle-morph var(--ct-dur-morph) var(--ct-ease-cinematic) both;
}

/* ─── default — constellation orbit ─────────────────────────────── */
.fate-thread-toggle.signal-default { padding: 0; width: var(--ct-toggle-size); min-width: 0; justify-content: center; }
.fate-thread-toggle.signal-default .fate-thread-signal-label { display: none; }
.fate-thread-toggle.signal-default .fate-thread-signal-glyph {
  border: 0; background: transparent;
  width: 28px; height: 28px;
}
.fate-thread-toggle.signal-default .fate-thread-signal-glyph::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ct-star-quiet);
}
.fate-thread-toggle.signal-default .fate-thread-signal-glyph::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 4px; background: var(--text-primary); border-radius: 50%;
}

/* ─── daily_card_ready — mini card back inside an orbit ─────────── */
.fate-thread-toggle.signal-daily-ready { animation: ct-signal-toggle-pulse 4s var(--ct-ease-signal-pulse) infinite; }
.fate-thread-toggle.signal-daily-ready .fate-thread-signal-glyph {
  border-color: var(--ct-toggle-ring-active);
}
.fate-thread-toggle.signal-daily-ready .fate-thread-signal-glyph::before {
  content: ""; position: absolute; inset: 6px;
  width: auto; height: auto;
  background: #000;
  border: 1px solid var(--ct-star-quiet);
}
.fate-thread-toggle.signal-daily-ready .fate-thread-signal-glyph::after {
  content: ""; position: absolute; inset: 10px;
  background-image:
    radial-gradient(circle at 40% 30%, rgba(236,233,225,0.25), transparent 1px),
    radial-gradient(circle at 65% 60%, rgba(236,233,225,0.18), transparent 1px),
    radial-gradient(circle at 30% 70%, rgba(201,166,107,0.40), transparent 1px);
  background-size: 12px 12px;
}

/* ─── reading_echo_due — old-card anchor node + arc ─────────────── */
.fate-thread-toggle.signal-echo-due { box-shadow: var(--ct-toggle-glow-due); border-color: var(--ct-toggle-ring-active); }
.fate-thread-toggle.signal-echo-due .fate-thread-signal-glyph { border: 0; background: transparent; }
.fate-thread-toggle.signal-echo-due .fate-thread-signal-glyph::before {
  /* short trace arc */
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--ct-star-quiet);
  border-right-color: transparent; border-bottom-color: transparent;
  transform: rotate(-35deg);
}
.fate-thread-toggle.signal-echo-due .fate-thread-signal-glyph::after {
  /* due node */
  content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-primary);
  animation: ct-due-node-pulse var(--ct-dur-pulse) var(--ct-ease-signal-pulse) infinite;
}

/* ─── thread_observation_ready — three layered signal lines ─────── */
.fate-thread-toggle.signal-thread-observation .fate-thread-signal-glyph::before,
.fate-thread-toggle.signal-thread-observation .fate-thread-signal-glyph::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 1px;
  background: var(--text-primary); opacity: 0.55;
}
.fate-thread-toggle.signal-thread-observation .fate-thread-signal-glyph::before { top: 12px; }
.fate-thread-toggle.signal-thread-observation .fate-thread-signal-glyph::after  { bottom: 12px; opacity: 0.32; }
.fate-thread-toggle.signal-thread-observation .fate-thread-signal-glyph {
  background-image: linear-gradient(transparent calc(50% - 0.5px), rgba(236,233,225,0.42) calc(50% - 0.5px), rgba(236,233,225,0.42) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* ─── history_resume — half-open card / interrupted line ────────── */
.fate-thread-toggle.signal-resume .fate-thread-signal-glyph::before {
  content: ""; position: absolute; left: 8px; top: 8px;
  width: 10px; height: 20px;
  border: 1px solid var(--text-primary);
  border-right: 0;
  background: rgba(236,233,225,0.06);
}
.fate-thread-toggle.signal-resume .fate-thread-signal-glyph::after {
  content: ""; position: absolute; right: 6px; top: 12px;
  width: 12px; height: 1px;
  background: var(--text-primary);
  background-image: linear-gradient(to right, var(--text-primary) 0 3px, transparent 3px 6px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

/* ─── reward_available — constellation + gold notch ─────────────── */
.fate-thread-toggle.signal-reward { animation: ct-signal-toggle-shimmer 2.4s var(--ct-ease-signal-pulse) 1; }
.fate-thread-toggle.signal-reward .fate-thread-signal-glyph::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--ct-star-quiet);
}
.fate-thread-toggle.signal-reward .fate-thread-signal-glyph::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 4px; background: var(--accent-signal); border-radius: 50%;
  box-shadow: 0 -8px 0 -2px var(--text-primary),
              0  8px 0 -2px var(--text-primary),
              -8px 0 0 -2px var(--text-primary);
}

/* ─── system_notice — constellation + tiny ivory dot ───────────── */
.fate-thread-toggle.signal-notice .fate-thread-signal-glyph::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--ct-star-quiet);
}
.fate-thread-toggle.signal-notice .fate-thread-signal-glyph::after {
  content: ""; position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────
   STARFIELD — utility backdrop for previews
   ───────────────────────────────────────────────────────────────────── */

.ct-starfield { background: var(--ct-bg-cosmos); position: relative; isolation: isolate; overflow: hidden; }
.ct-starfield::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,0.07), transparent 1px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,0.06), transparent 1px),
    radial-gradient(circle at 42% 78%, rgba(255,255,255,0.05), transparent 1px),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,0.07), transparent 1px),
    radial-gradient(circle at 12% 72%, rgba(255,255,255,0.04), transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(20,20,30,0.35), #000 70%);
  background-size: 240px 240px, 320px 320px, 200px 200px, 280px 280px, 360px 360px, 100% 100%;
  pointer-events: none;
}
.ct-starfield > * { position: relative; z-index: 1; }