frontend/styles.css

/* ============================================================================
   FORGE — Compatibility Graph for ML Training Components
   Aesthetic: dark coal + ember glow + tactile cards. D&D character sheet
   meets a modern dev tool. Smoothness is the point.
   ============================================================================ */

:root {
  /* Coal & steel base */
  --coal-0: #07090c;        /* pitch — under everything */
  --coal-1: #0b0e13;        /* canvas */
  --coal-2: #11151c;        /* rail / panel */
  --coal-3: #161b25;        /* card body */
  --coal-4: #1d2330;        /* card hover */
  --coal-5: #262d3d;        /* divider */
  --steel-1: #2a3346;       /* border on cards */
  --steel-2: #3a455c;       /* border bright */
  --steel-3: #5a6580;       /* dim icon */

  /* Forge palette */
  --ember-1: #ff6a1f;       /* hot iron */
  --ember-2: #ff8a3d;       /* sparks */
  --ember-3: #ffba5e;       /* slag */
  --ember-glow: rgba(255, 106, 31, 0.45);
  /* Rarity / tier palette (Diablo-style loot)
     T1 = legendary orange · T2 = rare blue · T3 = common grey */
  --brass-1: #ff8a3d;       /* tier 1 — legendary ember */
  --brass-2: #5b9bd8;       /* tier 2 — rare cobalt   */
  --brass-3: #9a9285;       /* tier 3 — common bone   */
  --tier1-glow: rgba(255, 138, 61, 0.55);
  --tier2-glow: rgba(91, 155, 216, 0.55);
  --tier3-glow: rgba(154, 146, 133, 0.40);
  --rust:    #c8403c;       /* blocked / breaks */
  --rust-2:  #8a2520;
  --amber:   #e0a13c;       /* conditional */
  --amber-2: #b07a1f;
  --bone-1:  #efeae0;       /* text bright */
  --bone-2:  #cfc8b8;
  --bone-3:  #8c8676;       /* dim */
  --bone-4:  #5e5a4f;       /* very dim */

  /* Type palette (component categories) */
  --t-optimizer:    #d4a444;  /* brass */
  --t-scheduler:    #5fb3d4;  /* sky steel */
  --t-technique:    #a78bfa;  /* arcane violet */
  --t-quantization: #ff6a1f;  /* hot iron */
  --t-architecture: #6ec7a0;  /* patina */
  --t-inference:    #e16d8e;  /* magenta steel */

  /* Type glow (same hue, low alpha) */
  --t-optimizer-glow:    rgba(212, 164, 68,   0.55);
  --t-scheduler-glow:    rgba(95, 179, 212,   0.55);
  --t-technique-glow:    rgba(167, 139, 250,  0.55);
  --t-quantization-glow: rgba(255, 106, 31,   0.55);
  --t-architecture-glow: rgba(110, 199, 160,  0.55);
  --t-inference-glow:    rgba(225, 109, 142,  0.55);

  /* Type families for the available "ready" state — desaturated steel-blue. */
  --steel-glow: rgba(120, 156, 200, 0.18);

  /* Type */
  --f-display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-ui: "Geist", "Space Grotesk", -apple-system, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body, #root { height: 100%; overflow: hidden; }

body {
  background: var(--coal-1);
  color: var(--bone-1);
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Atmosphere: subtle hex grid + corner ember bloom ─────────────────────── */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    /* molten heart at bottom-center of viewport */
    radial-gradient(circle at 50% 92%, rgba(255, 60, 30, 0.18) 0%, transparent 30%),
    radial-gradient(circle at 50% 102%, rgba(180, 30, 10, 0.35) 0%, transparent 16%),
    /* hearth-glow + cold corner */
    radial-gradient(ellipse at 8% 85%, rgba(255, 106, 31, 0.10), transparent 45%),
    radial-gradient(ellipse at 92% 10%, rgba(95, 100, 140, 0.06), transparent 55%),
    /* deep vignette */
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 110%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  /* painterly canvas grain — SVG turbulence baked into a data URI */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.35  0 0 0 0 0.15  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* Light sparks falling in the background (cheap CSS) */
.sparks {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.sparks span {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--ember-2);
  box-shadow: 0 0 6px var(--ember-1);
  opacity: 0;
  animation: spark-fall linear infinite;
}
@keyframes spark-fall {
  0%   { transform: translateY(-10vh); opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(110vh); opacity: 0; }
}

/* ── App shell ───────────────────────────────────────────────────────────── */
#root { position: relative; z-index: 1; }

.app {
  display: grid;
  grid-template-rows: 64px 1fr;
  height: 100vh;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 22px;
  border-bottom: 1px solid #1a1208;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch' seed='2'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.15  0 0 0 0 0.08  0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    linear-gradient(180deg, #1a1208 0%, #0f0a05 50%, #1a1208 100%);
  background-blend-mode: overlay, normal;
  position: relative;
  z-index: 5;
  box-shadow: 0 1px 0 rgba(212, 164, 68, 0.18), 0 4px 16px rgba(0,0,0,0.6);
}
.topbar::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 164, 68, 0.35) 50%, transparent 100%);
  pointer-events: none;
}
.topbar .brand {
  display: flex; align-items: center; gap: 14px;
}
.topbar .brand .mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 65%, #4a1c0a 0%, #0f0805 70%);
  border: 1px solid #5a3010;
  box-shadow:
    inset 0 0 14px rgba(255, 106, 31, 0.55),
    inset 0 -2px 0 rgba(255, 138, 61, 0.4),
    0 0 12px rgba(255,106,31,0.25);
  position: relative;
}
.topbar .brand .mark svg { display: block; }
.topbar .brand .name {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #f6e4c8;
  text-shadow:
    0 0 1px #000,
    0 1px 0 #000,
    0 0 10px rgba(255, 138, 61, 0.30);
}
.topbar .brand .tag {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--brass-2);
  padding-top: 4px;
}

.topbar .crumbs {
  display: flex; align-items: center; gap: 12px;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--bone-3);
}
.topbar .crumbs .api-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--coal-5);
  border-radius: 4px;
  background: var(--coal-2);
}
.topbar .crumbs .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--t-architecture);
  box-shadow: 0 0 6px var(--t-architecture);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.topbar .legend {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bone-3);
}
.topbar .legend .swatch {
  display: inline-flex; align-items: center; gap: 7px;
}
.topbar .legend .sw {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.topbar .legend .sw.t1 { background: radial-gradient(circle at 35% 30%, #ffd09a, #ff8a3d 50%, #6a2a08); box-shadow: 0 0 8px var(--tier1-glow), inset 0 1px 0 rgba(255,255,255,0.2); }
.topbar .legend .sw.t2 { background: radial-gradient(circle at 35% 30%, #b8d4f0, #5b9bd8 50%, #1c3a5a); box-shadow: 0 0 6px var(--tier2-glow), inset 0 1px 0 rgba(255,255,255,0.2); }
.topbar .legend .sw.t3 { background: radial-gradient(circle at 35% 30%, #cac4b6, #9a9285 50%, #3a3528); box-shadow: 0 0 3px var(--tier3-glow), inset 0 1px 0 rgba(255,255,255,0.2); }

/* ── Main grid ───────────────────────────────────────────────────────────── */
.main {
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  height: 100%;
  min-height: 0;
}

/* ── Left rail: inventory ────────────────────────────────────────────────── */
.rail-left {
  border-right: 1px solid var(--coal-5);
  background:
    /* parchment grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    linear-gradient(180deg, var(--coal-2) 0%, var(--coal-1) 100%);
  background-blend-mode: overlay, normal;
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative;
}
.rail-left::before,
.rail-right::before {
  /* hammered-iron seam down the inner edge */
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(212,164,68,0.25) 15%, rgba(212,164,68,0.25) 85%, transparent 100%);
  pointer-events: none;
}
.rail-left::before  { right: 0; }
.rail-right::before { left: 0; }
.rail-left .rail-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--coal-5);
  position: relative;
}
.rail-left .rail-head::after,
.rail-right .rail-head::after {
  /* filigree ornament under the section header */
  content: "";
  position: absolute; left: 18px; right: 18px; bottom: -1px;
  height: 1px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(212,164,68,0.5) 50%, transparent 100%);
}
.rail-left .rail-head h2,
.rail-right .rail-head h2 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 3px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bone-1);
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}
.rail-left .rail-head .sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--bone-3);
}
.rail-left .filters {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--coal-5);
}
.rail-left .filters .chip {
  font-family: var(--f-display);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 0;
  background: var(--coal-1);
  border: 1px solid var(--coal-5);
  border-top-color: rgba(255,255,255,0.05);
  color: var(--bone-3);
  cursor: pointer;
  transition: all 140ms ease;
  font-weight: 500;
}
.rail-left .filters .chip:hover { color: var(--bone-1); border-color: var(--brass-3); }
.rail-left .filters .chip.on {
  color: var(--coal-0);
  background: linear-gradient(180deg, var(--brass-1) 0%, #c46822 100%);
  border-color: var(--brass-1);
  box-shadow: 0 0 8px rgba(255, 138, 61, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.rail-left .filters .chip .ct {
  margin-left: 5px;
  opacity: 0.7;
  font-family: var(--f-mono);
  font-size: 9.5px;
}

.rail-left .search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--coal-5);
}
.rail-left .search input {
  width: 100%;
  background: var(--coal-0);
  border: 1px solid var(--coal-5);
  border-top-color: rgba(0,0,0,0.6);
  border-radius: 0;
  padding: 7px 12px;
  color: var(--bone-1);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.rail-left .search input::placeholder { color: var(--bone-4); }
.rail-left .search input:focus { border-color: var(--brass-1); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255, 138, 61, 0.25); }

/* ── Loot-sidebar item cards ────────────────────────────────────────────── */
.rail-left .inv-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 4px 10px 100px;
}
.inv-group-title {
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brass-2);
  padding: 14px 4px 6px;
  display: flex; align-items: center; gap: 8px;
}
.inv-group-title::before, .inv-group-title::after {
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,155,216,0.35), transparent);
}

.rail-left .inv-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 5px;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  background:
    linear-gradient(180deg, rgba(40,30,18,0.25) 0%, rgba(15,12,8,0.65) 100%);
  border: 1px solid var(--coal-5);
  border-left: 2px solid var(--rarity, var(--brass-3));
  transition: background 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 120ms ease;
}
/* rarity colors set per row (T1/T2/T3) */
.rail-left .inv-row.tier-1 { --rarity: var(--brass-1); }
.rail-left .inv-row.tier-2 { --rarity: var(--brass-2); }
.rail-left .inv-row.tier-3 { --rarity: var(--brass-3); }

.rail-left .inv-row::before {
  /* glint along the top edge */
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rarity), transparent);
  opacity: 0.35;
}
.rail-left .inv-row:hover {
  background: linear-gradient(180deg, rgba(60,42,22,0.35) 0%, rgba(20,14,10,0.7) 100%);
  border-color: var(--rarity);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 14px -2px var(--rarity);
  transform: translateX(1px);
}
.rail-left .inv-row.selected {
  background:
    linear-gradient(180deg, rgba(255,106,31,0.18) 0%, rgba(60,18,8,0.55) 100%);
  border-color: var(--ember-1);
  border-left-color: var(--ember-1);
  box-shadow:
    inset 0 0 0 1px rgba(255,160,80,0.18),
    0 0 18px -2px var(--ember-glow);
}
.rail-left .inv-row.selected::after {
  content: "❖";
  position: absolute; left: -8px; top: 50%;
  transform: translateY(-50%);
  color: var(--ember-1);
  font-size: 10px;
  text-shadow: 0 0 6px var(--ember-1);
}
.rail-left .inv-row.dim { opacity: 0.40; filter: grayscale(80%); }
.rail-left .inv-row.dim:hover { opacity: 0.95; filter: grayscale(20%); }
.rail-left .inv-row.blocked { opacity: 0.35; filter: grayscale(100%) brightness(0.65); }
.rail-left .inv-row.blocked .inv-name { color: var(--rust); text-decoration: line-through; text-decoration-color: rgba(200,64,60,0.5); }

/* item icon — ornate brass frame */
.rail-left .inv-row .type-ic {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06) 0%, transparent 60%),
    var(--coal-0);
  border: 1px solid var(--rarity, var(--brass-3));
  position: relative;
  color: var(--type-color, var(--bone-3));
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}
.rail-left .inv-row .type-ic::before,
.rail-left .inv-row .type-ic::after {
  /* brass corner notches */
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border: 1px solid var(--rarity, var(--brass-3));
}
.rail-left .inv-row .type-ic::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.rail-left .inv-row .type-ic::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.rail-left .inv-row .inv-name {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--bone-1);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.rail-left .inv-row.tier-1 .inv-name { color: var(--brass-1); }
.rail-left .inv-row.tier-2 .inv-name { color: var(--brass-2); }
.rail-left .inv-row.tier-3 .inv-name { color: #c8c0b0; }
.rail-left .inv-row.selected .inv-name { color: #fff5e8; }

.rail-left .inv-row .inv-meta {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--bone-4);
}
.rail-left .inv-row .inv-meta .canon {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0;
  opacity: 0.7;
}
.rail-left .inv-row .tier-pip {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--coal-0);
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0;
}
.rail-left .inv-row .tier-pip.t1 { background: radial-gradient(circle at 35% 30%, #ffd09a, #ff8a3d 50%, #6a2a08); }
.rail-left .inv-row .tier-pip.t2 { background: radial-gradient(circle at 35% 30%, #b8d4f0, #5b9bd8 50%, #1c3a5a); }
.rail-left .inv-row .tier-pip.t3 { background: radial-gradient(circle at 35% 30%, #cac4b6, #9a9285 50%, #3a3528); }

/* ── Center: graph stage ─────────────────────────────────────────────────── */
.stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 65%, rgba(255, 106, 31, 0.07) 0%, transparent 55%),
    var(--coal-1);
}
.stage svg.graph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  user-select: none;
}
.stage svg.graph:active { cursor: grabbing; }

/* anvil-mark watermark at bottom center of stage */
.stage .anvil-watermark {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--bone-4);
  opacity: 0.5;
  pointer-events: none;
}

/* Empty hint overlay */
.stage .stage-hint {
  position: absolute;
  left: 50%; top: 26%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 2;
  max-width: 380px;
  background: none;
  padding: 0;
  opacity: 0.6;
}
.stage .stage-hint .ring {
  width: 40px; height: 40px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 50%;
  margin: 0 auto 10px;
  position: relative;
  animation: gentle-rotate 40s linear infinite;
}
@keyframes gentle-rotate { to { transform: rotate(360deg); } }
.stage .stage-hint .ring::before, .stage .stage-hint .ring::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px dashed rgba(255,255,255,0.05);
  border-radius: 50%;
}
.stage .stage-hint .ring::after { inset: 24px; border-style: dotted; }
.stage .stage-hint h3 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
  color: var(--bone-2);
}
.stage .stage-hint p {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-3);
  margin: 0;
}

/* Stage chrome: controls in the corners */
.stage .stage-controls {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 4;
}
.stage .stage-controls .ctrl {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--coal-2);
  border: 1px solid var(--coal-5);
  border-radius: 4px;
  color: var(--bone-3);
  cursor: pointer;
  transition: all 120ms ease;
}
.stage .stage-controls .ctrl:hover {
  color: var(--bone-1);
  border-color: var(--steel-2);
  background: var(--coal-3);
}

.stage .stage-toolbar {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 6px;
  z-index: 4;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.stage .stage-toolbar .pill {
  padding: 5px 10px;
  background: var(--coal-2);
  border: 1px solid var(--coal-5);
  border-radius: 3px;
  color: var(--bone-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.stage .stage-toolbar .pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
}

/* ── Node visuals — arcane brass-framed plaques ──────────────────────────── */
g.node { cursor: pointer; }
g.node * { transition: opacity 240ms ease, fill 220ms ease, stroke 220ms ease, filter 240ms ease; }

/* outer halo — only visible on hover/selected/conditional */
g.node .node-aura {
  fill: none;
  stroke: none;
  pointer-events: none;
  opacity: 0;
}

/* the stone plate sitting behind the brass frame */
g.node .node-plate {
  fill: var(--coal-2);
  stroke: rgba(0,0,0,0.5);
  stroke-width: 1.5;
}

/* the gem behind the icon — type-colored glow */
g.node .node-gem {
  fill: var(--type-color);
  opacity: 0.18;
  filter: blur(2px);
}

/* the ornate brass frame — outer + inner stroke for a beveled look */
g.node .node-frame-outer { fill: none; stroke: #2a2017; stroke-width: 2.2; }
g.node .node-frame       { fill: none; stroke: #6b5026; stroke-width: 1.2; }
g.node .node-frame-inner { fill: none; stroke: rgba(255,200,120,0.18); stroke-width: 0.7; }

/* corner studs — tiny brass rivets */
g.node .node-stud {
  fill: #8a6a32;
  stroke: #2a2017;
  stroke-width: 0.6;
}

/* the icon glyph */
g.node .node-icon {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  stroke: var(--type-color, var(--bone-2));
}

/* the name on its etched ribbon below */
g.node .node-ribbon {
  fill: rgba(11,14,19,0.85);
  stroke: rgba(107, 80, 38, 0.7);
  stroke-width: 0.7;
}
g.node .node-name {
  fill: var(--bone-1);
  font-family: var(--f-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-anchor: middle;
  pointer-events: none;
}

/* tier wax-seal medallion top-right */
g.node .node-seal {
  pointer-events: none;
}
g.node .node-seal-disc {
  stroke: #1a1208;
  stroke-width: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7));
}
g.node .node-seal text {
  font-family: var(--f-display);
  font-size: 7.5px;
  font-weight: 700;
  text-anchor: middle;
  fill: #1a1208;
  letter-spacing: 0.04em;
}

/* ─── STATE: available ─── cool steel, ready to be set on the anvil */
g.node.s-available .node-plate { fill: var(--coal-2); }
g.node.s-available .node-icon { opacity: 0.9; }
g.node.s-available:hover .node-plate { fill: var(--coal-3); }
g.node.s-available:hover .node-aura {
  opacity: 0.6;
  stroke: var(--type-color);
  stroke-width: 1.2;
  fill: none;
}
g.node.s-available:hover .node-gem { opacity: 0.32; }
g.node.s-available:hover .node-frame { stroke: #9a7434; }

/* ─── STATE: selected ─── molten, just-forged, red-hot ─────────────────── */
g.node.s-selected .node-plate {
  fill: url(#grad-molten-plate);
  filter: url(#node-ember-glow);
}
g.node.s-selected .node-frame       { stroke: #d4a049; stroke-width: 1.5; }
g.node.s-selected .node-frame-outer { stroke: #3a1a08; }
g.node.s-selected .node-frame-inner { stroke: rgba(255,200,120,0.45); }
g.node.s-selected .node-stud { fill: #d4a049; stroke: #3a1a08; }
g.node.s-selected .node-gem  { fill: var(--ember-1); opacity: 0.55; }
g.node.s-selected .node-icon { stroke: #fff5e8; opacity: 1; filter: drop-shadow(0 0 3px var(--ember-1)); }
g.node.s-selected .node-name { fill: #fff5e8; }
g.node.s-selected .node-ribbon { stroke: #d4a049; fill: rgba(40,15,5,0.92); }
g.node.s-selected .node-aura {
  opacity: 1;
  stroke: var(--ember-1);
  stroke-width: 1.5;
  fill: none;
  animation: pulse-ring 2.6s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%,100% { opacity: 0.85; stroke-width: 1.5; }
  50%     { opacity: 0.25; stroke-width: 4; }
}

/* ─── STATE: conditional ─── cold ash, dimmed, dashed amber rim ────────── */
g.node.s-conditional .node-plate {
  fill: var(--coal-1);
  filter: grayscale(85%) brightness(0.7);
}
g.node.s-conditional .node-frame { stroke: #3a2f1c; }
g.node.s-conditional .node-frame-outer { stroke: #1a1208; }
g.node.s-conditional .node-frame-inner { stroke: rgba(255,200,120,0.05); }
g.node.s-conditional .node-stud { fill: #3a2f1c; }
g.node.s-conditional .node-gem { opacity: 0.05; }
g.node.s-conditional .node-icon { stroke: var(--bone-4); opacity: 0.5; }
g.node.s-conditional .node-name { fill: var(--bone-4); }
g.node.s-conditional .node-ribbon { fill: rgba(11,14,19,0.6); stroke: rgba(60,60,60,0.4); }
g.node.s-conditional .node-aura {
  opacity: 0.7;
  stroke: var(--amber);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
  animation: spin-dashes 22s linear infinite;
}
@keyframes spin-dashes { to { stroke-dashoffset: -100; } }
g.node.s-conditional:hover .node-plate { filter: grayscale(50%) brightness(0.95); }
g.node.s-conditional:hover .node-icon { opacity: 0.85; }
g.node.s-conditional:hover .node-name { fill: var(--bone-2); }

/* ─── STATE: blocked ─── rusted, chained ───────────────────────────────── */
g.node.s-blocked .node-plate {
  fill: var(--coal-1);
  filter: grayscale(100%) brightness(0.55);
}
g.node.s-blocked .node-frame { stroke: var(--rust-2); }
g.node.s-blocked .node-frame-outer { stroke: #1a0808; }
g.node.s-blocked .node-frame-inner { stroke: rgba(200,64,60,0.2); }
g.node.s-blocked .node-stud { fill: var(--rust-2); }
g.node.s-blocked .node-gem { opacity: 0; }
g.node.s-blocked .node-icon { stroke: var(--rust); opacity: 0.45; }
g.node.s-blocked .node-name { fill: var(--rust); opacity: 0.7; }
g.node.s-blocked .node-ribbon { fill: rgba(15,5,5,0.85); stroke: rgba(138,37,32,0.5); }
g.node.s-blocked .node-aura {
  opacity: 0.85;
  stroke: var(--rust);
  stroke-width: 1.2;
  fill: none;
}
g.node.s-blocked:hover .node-plate { filter: grayscale(60%) brightness(0.85); }
g.node.s-blocked:hover .node-icon { opacity: 0.85; }

/* Lock chain + padlock (drawn in JSX) */
g.node .node-lock { opacity: 0; }
g.node.s-blocked .node-lock { opacity: 1; }
g.node .node-lock .lock-body { fill: var(--rust-2); stroke: var(--bone-3); stroke-width: 0.6; }
g.node .node-lock .lock-shackle { fill: none; stroke: var(--bone-3); stroke-width: 1.1; stroke-linecap: round; }
g.node .node-lock .lock-keyhole { fill: var(--coal-0); }

/* "needs X" tag for conditional */
g.node .needs-chip { opacity: 0; pointer-events: none; }
g.node.s-conditional .needs-chip { opacity: 1; }
g.node .needs-chip rect {
  fill: rgba(40, 26, 8, 0.9);
  stroke: var(--amber);
  stroke-width: 0.7;
}
g.node .needs-chip .chip-pin {
  fill: var(--amber);
}
g.node .needs-chip text {
  fill: var(--amber);
  font-family: var(--f-mono);
  font-size: 7.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

/* ── Edges — molten veins / etched-iron chains ──────────────────────────── */
g.edge path { fill: none; transition: stroke 220ms ease, opacity 220ms ease, stroke-width 220ms ease; }
g.edge path.edge-glow { display: none; }
g.edge path.edge-path { stroke-linecap: round; }

/* base relations */
g.edge.compatible  .edge-path { stroke: rgba(212, 164, 68, 0.20); stroke-width: 1.1; }
g.edge.requires    .edge-path { stroke: rgba(255, 160, 60, 0.50); stroke-width: 1.4; }
g.edge.conditional .edge-path { stroke: rgba(224, 161, 60, 0.45); stroke-width: 1.2; stroke-dasharray: 4 5; }
g.edge.degrades    .edge-path { stroke: rgba(225, 109, 142, 0.40); stroke-width: 1; stroke-dasharray: 1 4; }
g.edge.breaks .edge-path {
  stroke: var(--rust);
  stroke-width: 1.6;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgba(200,64,60,0.7));
}

/* hot edges (incident to a selection) — molten ember overlay */
g.edge.hot path.edge-glow {
  display: inline;
  fill: none;
  stroke-linecap: round;
}
g.edge.hot.requires .edge-path {
  stroke: var(--ember-2);
  stroke-width: 2.2;
  stroke-dasharray: 8 6;
  filter: drop-shadow(0 0 6px var(--ember-glow));
  animation: edge-march 1.2s linear infinite;
}
g.edge.hot.requires .edge-glow {
  stroke: rgba(255, 138, 61, 0.35);
  stroke-width: 7;
  filter: blur(2.2px);
}
@keyframes edge-march { to { stroke-dashoffset: -28; } }

g.edge.hot.breaks .edge-path {
  stroke: var(--rust);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 7px rgba(200,64,60,1));
  animation: edge-pulse-rust 1.6s ease-in-out infinite;
}
g.edge.hot.breaks .edge-glow {
  stroke: rgba(200, 64, 60, 0.45);
  stroke-width: 9;
  filter: blur(3px);
  animation: edge-pulse-rust 1.6s ease-in-out infinite;
}
@keyframes edge-pulse-rust {
  0%,100% { opacity: 0.65; }
  50%     { opacity: 1; }
}

g.edge.hot.conditional .edge-path,
g.edge.hot.compatible  .edge-path {
  stroke: rgba(255, 191, 90, 0.85);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px rgba(255, 138, 61, 0.5));
}
g.edge.hot.conditional .edge-glow,
g.edge.hot.compatible  .edge-glow {
  stroke: rgba(255, 138, 61, 0.30);
  stroke-width: 5;
  filter: blur(2px);
}

/* faded edges */
g.edge.faded .edge-path { opacity: 0.10; }
g.edge.faded .edge-glow { display: none; }

/* ── Right rail: recipe card ─────────────────────────────────────────────── */
.rail-right {
  border-left: 1px solid var(--coal-5);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='12'/><feColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    linear-gradient(180deg, var(--coal-2) 0%, var(--coal-1) 100%);
  background-blend-mode: overlay, normal;
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative;
}
.rail-right .rail-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--coal-5);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  position: relative;
}
.rail-right .rail-head .sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--bone-3);
}
.rail-right .recipe-status {
  font-family: var(--f-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  border-radius: 0;
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.recipe-status.valid    { background: rgba(110,199,160,0.10); color: var(--t-architecture); border: 1px solid rgba(110,199,160,0.4); }
.recipe-status.warn     { background: rgba(224,161,60,0.10);  color: var(--amber);          border: 1px solid rgba(224,161,60,0.4); }
.recipe-status.broken   { background: rgba(200,64,60,0.12);   color: var(--rust);           border: 1px solid rgba(200,64,60,0.45); }
.recipe-status.empty    { background: var(--coal-1); color: var(--bone-4); border: 1px solid var(--coal-5); }

.rail-right .recipe-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
}

.section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--coal-5);
  position: relative;
}
.section + .section::before {
  content: "❖";
  position: absolute; left: 50%; top: -8px;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--brass-2);
  background: var(--coal-1);
  padding: 0 6px;
  letter-spacing: 0.6em;
  opacity: 0.7;
}
.section h3 {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-2);
  font-weight: 500;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.section h3::before {
  content: "";
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-2));
}
.section h3::after {
  content: "";
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(212,164,68,0.25), transparent);
}
.section h3 .ct {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  background: var(--coal-0);
  border: 1px solid var(--brass-3);
  border-radius: 0;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--brass-1);
  letter-spacing: 0;
}

/* selected build chips — equipped item slots */
.build-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.build-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 6px;
  background:
    linear-gradient(180deg, rgba(60,30,8,0.4) 0%, rgba(15,8,4,0.7) 100%);
  border: 1px solid var(--ember-1);
  border-radius: 0;
  font-family: var(--f-display);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: #fff5e8;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 0 8px rgba(255, 106, 31, 0.18),
    0 0 6px var(--ember-glow);
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.build-chip:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 10px rgba(255,138,61,0.25), 0 0 12px var(--ember-1);
}
.build-chip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.build-chip .x {
  color: var(--bone-4);
  margin-left: 3px;
  font-size: 14px;
  line-height: 1;
  font-family: var(--f-mono);
}
.build-chip:hover .x { color: var(--rust); }

/* conflict / unmet entries — scribed crafting warnings */
.entry {
  position: relative;
  padding: 10px 12px 11px 14px;
  border-radius: 0;
  margin-bottom: 7px;
  background:
    linear-gradient(180deg, rgba(40,18,8,0.25) 0%, rgba(15,8,4,0.65) 100%);
  border: 1px solid rgba(60, 38, 18, 0.7);
  border-left-width: 2px;
  font-size: 12px;
}
.entry.conflict { border-left-color: var(--rust);  box-shadow: 0 0 10px -2px rgba(200,64,60,0.25); }
.entry.unmet    { border-left-color: var(--amber); box-shadow: 0 0 10px -2px rgba(224,161,60,0.25); }
.entry.warning  { border-left-color: var(--t-inference); }
.entry .title {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 5px;
  display: flex; align-items: center; gap: 6px;
}
.entry .title.conflict { color: var(--rust); }
.entry .title.unmet    { color: var(--amber); }
.entry .title.warning  { color: var(--t-inference); }
.entry .fix {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-2);
  letter-spacing: 0.005em;
}
.entry .meta {
  margin-top: 7px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone-4);
}
.entry .meta a { color: var(--bone-3); text-decoration: none; border-bottom: 1px dotted var(--bone-4); }
.entry .meta a:hover { color: var(--ember-2); border-color: var(--ember-2); }
.entry .add-btn {
  margin-top: 9px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 11px;
  background: linear-gradient(180deg, rgba(224,161,60,0.18) 0%, rgba(120,80,20,0.18) 100%);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 8px rgba(224,161,60,0.18);
}
.entry .add-btn:hover {
  background: linear-gradient(180deg, rgba(224,161,60,0.30) 0%, rgba(120,80,20,0.30) 100%);
  color: #fff5e8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 14px var(--ember-glow);
}

/* scheduler picks table */
.bench-table {
  display: grid;
  grid-template-columns: 1fr auto auto;
  font-family: var(--f-mono);
  font-size: 11px;
  border: 1px solid var(--coal-5);
  border-radius: 4px;
  overflow: hidden;
}
.bench-table .br {
  display: contents;
}
.bench-table .br > * {
  padding: 7px 10px;
  border-bottom: 1px solid var(--coal-5);
  background: var(--coal-2);
  color: var(--bone-2);
}
.bench-table .br.head > * {
  background: var(--coal-3);
  color: var(--bone-4);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.bench-table .br:last-child > * { border-bottom: none; }
.bench-table .br > *:first-child { color: var(--bone-1); }
.bench-table .br .val {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bench-table .br.best > *:first-child::before {
  content: "★";
  color: var(--brass-1);
  margin-right: 6px;
}
.bench-table .br.warn .val { color: var(--rust); }

/* empty state */
.empty-state {
  padding: 30px 18px;
  text-align: center;
  color: var(--bone-4);
}
.empty-state .glyph {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px dashed var(--coal-5);
  color: var(--bone-4);
}
.empty-state .ttl {
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--bone-2);
  margin-bottom: 4px;
}
.empty-state .sub {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* ── Live Discoveries ticker (bottom-center floating) ────────────────────── */
.ticker {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 660px));
  max-width: 600px;
  z-index: 10;
  pointer-events: none;
  padding-bottom: 14px;
}
.ticker::before {
  /* the hearth itself — a glowing mouth at the very bottom */
  content: "";
  position: absolute; left: 10%; right: 10%; bottom: 0;
  height: 14px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 138, 61, 0.7) 0%, rgba(180, 30, 10, 0.5) 35%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}
.ticker .ticker-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--brass-1);
  margin-bottom: 8px;
  padding: 0 6px;
  text-shadow: 0 0 8px var(--ember-glow);
}
.ticker .ticker-head .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember-1);
  box-shadow: 0 0 8px var(--ember-1), 0 0 16px var(--ember-2);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.ticker .ticker-head .label { color: var(--brass-1); }
.ticker .ticker-head .src {
  color: var(--bone-4);
  font-family: var(--f-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
}
.ticker .ticker-head .feed {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--bone-3);
  text-transform: none;
  text-shadow: none;
}

.ticker .ticker-list {
  display: flex; flex-direction: column-reverse;
  gap: 5px;
  pointer-events: auto;
  max-height: 158px;
  overflow: hidden;
  mask-image: linear-gradient(to top, black 65%, transparent 100%);
}

.disc-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  background: rgba(15, 12, 9, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(70, 50, 28, 0.6);
  border-left-width: 2px;
  border-radius: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--bone-2);
  animation: ember-rise 700ms cubic-bezier(0.16, 0.92, 0.30, 1.05);
  position: relative;
}
.disc-row::before {
  content: "";
  position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ember-2), transparent);
  opacity: 0.7;
  animation: ember-fade 1800ms ease-out forwards;
}
.disc-row.r-breaks      { border-left-color: var(--rust); }
.disc-row.r-conditional { border-left-color: var(--amber); }
.disc-row.r-requires    { border-left-color: var(--ember-1); }
.disc-row.r-degrades    { border-left-color: var(--t-inference); }
.disc-row.r-compatible  { border-left-color: var(--brass-1); }

@keyframes ember-rise {
  0%   { opacity: 0; transform: translateY(28px) scale(0.94); filter: brightness(1.6) drop-shadow(0 0 12px var(--ember-1)); }
  40%  { opacity: 1; filter: brightness(1.3) drop-shadow(0 0 8px var(--ember-1)); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
@keyframes ember-fade {
  0%   { opacity: 1; }
  100% { opacity: 0.3; }
}

.disc-row .rel {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--coal-3);
}
.disc-row.r-breaks      .rel { color: var(--rust);  background: rgba(200,64,60,0.10); }
.disc-row.r-conditional .rel { color: var(--amber); background: rgba(224,161,60,0.10); }
.disc-row.r-requires    .rel { color: var(--ember-2);background: rgba(255,106,31,0.10); }
.disc-row.r-degrades    .rel { color: var(--t-inference); background: rgba(225,109,142,0.10); }
.disc-row.r-compatible  .rel { color: var(--t-architecture); background: rgba(110,199,160,0.10); }

.disc-row .pair {
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.01em;
}
.disc-row .pair .a, .disc-row .pair .b { color: var(--bone-1); }
.disc-row .pair .arr { color: var(--brass-2); margin: 0 6px; }

.disc-row .src {
  color: var(--bone-4);
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.disc-row .ts {
  color: var(--bone-4);
  font-size: 9px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* ── Evidence tooltip (positioned absolutely by JS) ──────────────────────── */
.evidence-tip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  max-width: 320px;
  background: rgba(11, 14, 19, 0.96);
  border: 1px solid var(--steel-1);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,106,31,0.06);
  font-size: 12px;
  animation: tip-in 160ms ease;
}
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.evidence-tip .tip-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--coal-5);
}
.evidence-tip .tip-name {
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--bone-1);
}
.evidence-tip .tip-status {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  border-radius: 2px;
}
.tip-status.blocked     { color: var(--rust);  background: rgba(200,64,60,0.12); }
.tip-status.conditional { color: var(--amber); background: rgba(224,161,60,0.12); }
.tip-status.selected    { color: var(--ember-2); background: rgba(255,106,31,0.12); }
.tip-status.available   { color: var(--t-architecture); background: rgba(110,199,160,0.12); }

.evidence-tip .tip-reason {
  margin-bottom: 8px;
}
.evidence-tip .tip-reason-label {
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone-4);
  margin-bottom: 3px;
}
.evidence-tip .tip-reason-fix {
  font-size: 12px;
  color: var(--bone-2);
  line-height: 1.5;
}
.evidence-tip .quote {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bone-2);
  border-left: 2px solid var(--brass-1);
  padding-left: 10px;
  margin: 6px 0 8px;
}
.evidence-tip .tip-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  color: var(--bone-4);
  margin-top: 6px;
}
.evidence-tip .src-link {
  color: var(--bone-3);
  text-decoration: none;
  border-bottom: 1px dotted var(--bone-4);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.evidence-tip .tier-badge {
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 2px;
  color: var(--coal-0);
}
.tier-badge.t1 { background: var(--brass-1); }
.tier-badge.t2 { background: var(--brass-2); }
.tier-badge.t3 { background: var(--brass-3); }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--coal-5);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--steel-1); background-clip: padding-box; }

/* ── Type colors injected via inline style on node group ─────────────────── */
/* They use --type-color which is set on the <g class="node"> element. */

/* ── Responsive guard for narrow viewports ──────────────────────────────── */
@media (max-width: 1100px) {
  .main { grid-template-columns: 260px 1fr 320px; }
  .ticker { width: min(440px, calc(100% - 600px)); }
}