/* Overclocked — Act III deep-time figures (js/figures-deep.js). Class prefix: fd-
 * Builds on figures.css (.fg shell, .fg-svg text classes). Colours are tokens only, so the figures read on
 * the Act III night palette (css/act3.css re-defines the tokens) and on paper. --star / --glow exist only in
 * Act III; fallbacks keep paper rendering sane. */

.fg.fd { --fd-glow: var(--glow, color-mix(in srgb, var(--accent) 45%, transparent)); --fd-star: var(--star, var(--ink)); }

/* ---------- readouts ---------- */
.fd-svg .fd-ro { font-size: 15px; font-weight: 700; letter-spacing: -.01em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.fd-svg .fd-ro--sm { font-size: 13px; }
.fd-svg .fd-ro-d { fill: var(--ink); }
.fd-svg .fd-ro-v { fill: var(--accent); }
.fd-svg .fd-ro-k { font-size: 10.5px; font-weight: 400; letter-spacing: 0; fill: var(--muted); }
/* exponents typeset as raised tspans (monospace superscript glyphs leave gaps) */
.fd-svg .fd-sup { font-size: 72%; }

/* ---------- ladders ---------- */
.fd-svg .fd-rail { stroke: var(--ink); stroke-width: 1.3; fill: none; stroke-linecap: round; }
.fd-svg .fd-rung { stroke: var(--rule); stroke-width: .7; stroke-dasharray: 1 3; fill: none; }
.fd-svg .fd-stub { stroke: var(--ink); stroke-width: 1; fill: none; }
.fd-svg .fd-l-rung { stroke: var(--muted); stroke-width: .7; opacity: .55; fill: none; }
.fd-svg .fd-l-rung10 { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.fd-svg .fd-fill { fill: var(--accent); fill-opacity: .26; }
.fd-svg .fd-fill-top { stroke: var(--accent); stroke-width: 2; }
.fd-svg .fd-climb-bar { fill: var(--accent); filter: drop-shadow(0 0 4px var(--fd-glow)); }
.fd-svg .fd-tick { stroke: var(--ink); stroke-width: 1.2; fill: none; transition: stroke .5s var(--ease); }
.fd-svg .fd-tick-acc { stroke: var(--accent); stroke-width: 1.4; fill: none; }
.fd-svg .fd-lead { stroke: var(--muted); stroke-width: .8; fill: none; opacity: .75; }
.fd-svg .fd-lt { fill: var(--muted); transition: fill .6s var(--ease); }
.fd-svg .is-lit .fd-tick { stroke: var(--accent); }
.fd-svg .is-lit .fd-lt { fill: var(--ink); }
.fd-svg .is-cur text:first-child { fill: var(--accent); }

/* ---------- reference rungs (kardashev) ---------- */
.fd-svg .fd-ref { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 5 3; opacity: .8; transition: stroke .5s var(--ease); }
.fd-svg .fd-ref.is-lit { stroke: var(--accent); }
.fd-svg .fd-ref-t { font-size: 10px; fill: var(--ink-2); transition: fill .5s var(--ease); }
.fd-svg .fd-ref-t.is-lit { fill: var(--ink); }
.fd-svg .fd-cross { fill: var(--bg); stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 2 1.6; }

/* ---------- trajectories ---------- */
.fd-svg .fd-traj { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.fd-svg .fd-traj-glow { fill: none; stroke: var(--accent); stroke-width: 8; stroke-opacity: .14; stroke-linejoin: round; stroke-linecap: round; }
.fd-svg .fd-stop-a { stop-color: var(--accent); stop-opacity: .26; }
.fd-svg .fd-stop-b { stop-color: var(--accent); stop-opacity: 0; }
.fd-svg .fd-ghost { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.fd-svg .fd-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 1.8; }
.fd-svg .fd-dot.is-on { fill: var(--accent); stroke: var(--bg); stroke-width: 1.4; }
.fd-svg .fd-head-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.2; filter: drop-shadow(0 0 4px var(--fd-glow)); }
.fd-svg .fd-ping { fill: none; stroke: var(--accent); stroke-width: 1; }
.fd-svg .fd-pulse { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---------- expansion-front ---------- */
.fd-svg .fd-hatch { stroke: var(--muted); stroke-width: 1; stroke-opacity: .42; }
.fd-svg .fd-cline { stroke: var(--ink-2); stroke-width: 1; fill: none; }
.fd-svg .fd-band { fill: var(--accent); fill-opacity: .07; }
.fd-svg .fd-guide { stroke: var(--accent-soft); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.fd-svg .fd-guide-t { font-size: 10px; }
.fd-svg .fd-ftl-t { fill: var(--ink-2); }
.fd-svg .fd-mark { stroke: var(--ink-2); stroke-width: .9; stroke-dasharray: 1 2.5; fill: none; }
.fd-svg .fd-mark-t { font-size: 10px; }

/* ---------- light-lag ---------- */
.fd-svg .fd-track { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 3; fill: none; }
.fd-svg .fd-bar-a { stop-color: var(--ink-2); stop-opacity: .55; }
.fd-svg .fd-bar-b { stop-color: var(--accent-soft); stop-opacity: .9; }
.fd-svg .fd-bar-c { stop-color: var(--accent); }
.fd-svg .fd-in { fill: var(--bg); }
.fd-svg .fd-gl { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; fill: none; opacity: .7; }
.fd-svg .fd-gl-t { fill: var(--ink-2); }
.fd-svg .fd-photon { fill: var(--fd-star); filter: drop-shadow(0 0 3px var(--fd-glow)) drop-shadow(0 0 1px var(--fd-star)); }
.fd-note {
  display: flex; flex-direction: column; gap: 2px;
  margin: 14px 0 0; padding: 7px 0 7px 12px; border-left: 2px solid var(--accent);
  font-family: var(--mono); font-size: 10.5px; line-height: 15px; color: var(--muted);
}
.fd-note-k { color: var(--ink); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 10.5px; }
.fd-note-s { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fd-note-mark { display: inline-block; vertical-align: middle; fill: var(--accent); }

/* ---------- deep-time ---------- */
.fd-svg .fd-star { fill: var(--fd-star); }
.fd-svg .fd-axis-main { stroke: var(--rule); stroke-width: 1.4; fill: none; }
.fd-svg .fd-axis-prog { stroke-width: 2; stroke-linecap: round; }
.fd-svg .fd-pg-s { stop-color: var(--accent); }
.fd-svg .fd-hz-s { stop-color: var(--fd-star); }
.fd-svg .fd-sig { fill: var(--fd-star); filter: drop-shadow(0 0 2.5px var(--fd-glow)); }
.fd-svg .fd-sig-t { fill: var(--ink-2); font-style: italic; }
.fd-svg .fd-lead-sig { stroke-dasharray: 1.5 2; }
.fd-svg .fd-axis-more { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 1.5 3; fill: none; }
.fd-svg .fd-arrow { stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }
.fd-svg .fd-pillbg { fill: var(--bg); stroke: var(--rule); stroke-width: 1; }
.fd-svg .fd-pill-t { font-size: 9px; fill: var(--ink-2); }
.fd-svg .fd-chap { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.fd-svg .fd-phys { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.fd-svg .fd-today { fill: var(--ink-2); }
.fd-svg .fd-bracket { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.fd-svg .fd-span { stroke: var(--accent); stroke-width: 3; stroke-opacity: .55; stroke-linecap: round; fill: none; }
.fd-svg .fd-serif { font-family: var(--serif); font-style: italic; font-size: 13.5px; fill: var(--ink); }
.fd-svg .fd-date { letter-spacing: .03em; }
.fd-svg .fd-cursor-l { stroke: var(--accent); stroke-width: 1; }

/* ---------- galaxy-brain mark (original abstract spiral network) ---------- */
.fd-svg .fd-spiral-w { stroke: var(--accent); stroke-width: .8; fill: none; opacity: .75; }
.fd-svg .fd-spiral-n { fill: var(--fd-star); }
.fd-svg .fd-spiral-core { fill: var(--accent); filter: drop-shadow(0 0 3px var(--fd-glow)); }
.fd-svg .fd-spin { transform-box: fill-box; transform-origin: center; }
.fd-svg .fd-gb .fd-spiral-n { fill: var(--accent); }

/* ---------- legend swatches ---------- */
.fg-sw.fd-sw--traj { width: 20px; height: 0; border-top: 2.2px solid var(--accent); border-radius: 0; }
.fg-sw.fd-sw--ghost { width: 20px; height: 0; border-top: 2px dotted var(--muted); border-radius: 0; }
.fg-sw.fd-sw--ref { width: 20px; height: 0; border-top: 1.2px dashed var(--ink-2); border-radius: 0; }

/* ---------- ambient motion: only after the entrance, only on screen ---------- */
@keyframes fd-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes fd-twinkle { 0%, 100% { opacity: var(--o, .6); } 50% { opacity: .08; } }
@keyframes fd-spin { to { transform: rotate(360deg); } }
.fg.fd.fd-live .fd-done .fd-pulse { animation: fd-pulse 2.6s cubic-bezier(.2, .7, .2, 1) infinite; }
.fg.fd.fd-live .fd-done .fd-tw { animation: fd-twinkle 4.6s ease-in-out infinite; }
.fg.fd.fd-live .fd-done .fd-spin { animation: fd-spin 40s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .fg.fd .fd-pulse, .fg.fd .fd-tw, .fg.fd .fd-spin { animation: none !important; }
}