/* =============================================================================
   PuppetNET — Graph Intelligence Console
   styles.css
   =============================================================================

   The cyberpunk design system: a matte near-black canvas, hairline borders that
   read as instrument panels, and three signal colours used with discipline —

     cyan    #22d3ee   structure, selection, primary action
     emerald #10b981   verified / high-confidence evidence
     purple  #a855f7   offshore, calculated, anomaly

   Everything is dark by design: an analyst stares at this for hours, and a
   bright page in a dark room is how you miss a faint edge in a dense cluster.

   Tailwind (compiled to vendor/tailwind.css) carries spacing, typography and
   one-off utilities used in JS-generated markup. This file owns the components,
   the glow effects, the animations and the responsive behaviour — the parts a
   utility framework cannot express without becoming unreadable.

   Layering order matters: variables → reset → shell → components → canvas →
   overlays → animations → responsive → reduced motion.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/*  1. Tokens                                                                  */
/* -------------------------------------------------------------------------- */

:root {
  /* surfaces — matte, never pure black: pure black blooms on OLED and hides
     the hairline borders that separate panels */
  --void:        #05070d;
  --void-2:      #070a12;
  --panel:       #0b101c;
  --panel-2:     #0e1524;
  --panel-3:     #121b2e;
  --raised:      #16203a;

  /* lines */
  --edge:        #1b2740;
  --edge-soft:   rgba(148, 180, 224, 0.10);
  --edge-strong: rgba(148, 180, 224, 0.20);

  /* signal colours */
  --cyan:        #22d3ee;
  --cyan-dim:    #0e7490;
  --cyan-soft:   rgba(34, 211, 238, 0.14);
  --emerald:     #10b981;
  --emerald-dim: #047857;
  --emerald-soft:rgba(16, 185, 129, 0.14);
  --purple:      #a855f7;
  --purple-dim:  #7e22ce;
  --purple-soft: rgba(168, 85, 247, 0.14);
  --amber:       #f59e0b;
  --amber-soft:  rgba(245, 158, 11, 0.14);
  --rose:        #f43f5e;
  --rose-soft:   rgba(244, 63, 94, 0.14);

  /* type */
  --text:        #dbe6f5;
  --text-dim:    #8ea0bd;
  --text-mute:   #61748f;
  --text-faint:  #47586f;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* metrics */
  --header-h:    58px;
  --status-h:    26px;
  --footer-h:    34px;   /* site footer: legal links, attribution, support */
  --rail-w:      268px;
  --inspector-w: 340px;
  --radius:      10px;
  --radius-sm:   7px;
  --radius-xs:   5px;

  /* effects */
  --glow-cyan:    0 0 0 1px rgba(34,211,238,.35), 0 0 18px rgba(34,211,238,.22);
  --glow-emerald: 0 0 0 1px rgba(16,185,129,.35), 0 0 18px rgba(16,185,129,.20);
  --glow-purple:  0 0 0 1px rgba(168,85,247,.35), 0 0 18px rgba(168,85,247,.20);
  --glow-soft:    0 0 12px rgba(34,211,238,.14);
  --shadow-1:     0 1px 2px rgba(0,0,0,.5);
  --shadow-2:     0 8px 30px rgba(0,0,0,.55);
  --shadow-3:     0 24px 70px rgba(0,0,0,.7);

  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --dur:          160ms;
  --dur-2:        260ms;
}

/* -------------------------------------------------------------------------- */
/*  2. Reset & base                                                            */
/* -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  background: var(--void);
  /* two-layer backdrop: a fine instrument grid and a corner vignette. Both are
     painted once by the compositor — no image requests, no repaint cost. */
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(34,211,238,.055), transparent 62%),
    radial-gradient(900px 560px at 8% 108%, rgba(168,85,247,.05), transparent 60%),
    linear-gradient(rgba(148,180,224,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,180,224,.028) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .92em; }
code { color: var(--cyan); background: rgba(34,211,238,.07); padding: .06em .34em; border-radius: 4px; }
[hidden] { display: none !important; }
::selection { background: rgba(34,211,238,.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* scrollbars: thin, dark, and only visible while scrolling on touch devices */
* { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1e2c47, #16203a);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #2a3c5e; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

.muted   { color: var(--text-dim); }
.dim     { color: var(--text-mute); }
.warn    { color: var(--amber); }
.bad     { color: var(--rose); }
.good    { color: var(--emerald); }
.num     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------- */
/*  3. Boot splash                                                             */
/* -------------------------------------------------------------------------- */

.boot-screen {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(600px 400px at 50% 45%, #0a1120, var(--void) 70%);
  transition: opacity 420ms var(--ease), visibility 420ms;
}
.boot-screen.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-core { position: relative; width: 74px; height: 74px; display: grid; place-items: center; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(34,211,238,.22);
  border-top-color: var(--cyan);
  animation: spin 1.05s linear infinite;
}
.boot-ring-2 {
  inset: 12px;
  border-color: rgba(168,85,247,.2);
  border-top-color: var(--purple);
  animation-duration: 1.6s; animation-direction: reverse;
}
.boot-glyph { color: var(--cyan); font-size: 19px; text-shadow: var(--glow-soft); animation: breathe 2.4s var(--ease) infinite; }
.boot-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .42em;
  color: var(--text-dim); text-indent: .42em;
}
.boot-status { font-size: 11.5px; color: var(--text-mute); font-family: var(--font-mono); }

/* -------------------------------------------------------------------------- */
/*  4. Shell                                                                   */
/* -------------------------------------------------------------------------- */

.app-shell {
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--header-h) minmax(0, 1fr) var(--footer-h);
  opacity: 0;
  animation: shell-in 380ms var(--ease-out) forwards;
}
.app-shell.is-ready { opacity: 1; }

.app-body {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--inspector-w);
  min-height: 0;                       /* let children scroll instead of growing */
  position: relative;
}

.main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--status-h);
  min-width: 0; min-height: 0;
  background: var(--void-2);
  border-left: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
}

.view { display: none; min-height: 0; min-width: 0; position: relative; }
.view.is-active { display: grid; grid-template-rows: minmax(0,1fr); }

/* -------------------------------------------------------------------------- */
/*  5. Header                                                                  */
/* -------------------------------------------------------------------------- */

.app-header {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 0 14px 0 16px;
  background: linear-gradient(180deg, #0c1220, #080c16);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 0 rgba(34,211,238,.07), 0 10px 30px rgba(0,0,0,.45);
  position: relative; z-index: 40;
}
/* the hairline of light under the header: cheap, and it is what makes the
   whole thing read as an instrument rather than a web page */
.app-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.5) 18%, rgba(168,85,247,.45) 62%, transparent);
  opacity: .55;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  color: var(--cyan); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: radial-gradient(circle at 32% 26%, rgba(34,211,238,.22), rgba(34,211,238,.05));
  border: 1px solid rgba(34,211,238,.28);
  box-shadow: inset 0 0 14px rgba(34,211,238,.12), var(--glow-soft);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.06; min-width: 0; }
.brand-text strong {
  font-family: var(--font-mono); font-size: 14.5px; letter-spacing: .17em;
  color: #eaf3ff; text-shadow: 0 0 14px rgba(34,211,238,.3);
}
.brand-accent { color: var(--cyan); }
.brand-text small {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-mute); font-family: var(--font-mono);
}

/* --- search --------------------------------------------------------------- */

.search-wrap { position: relative; min-width: 0; }
.search-box {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 10px;
  background: linear-gradient(180deg, #0a0f1b, #080d17);
  border: 1px solid var(--edge);
  border-radius: 9px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.search-box:focus-within {
  border-color: rgba(34,211,238,.55);
  box-shadow: var(--glow-cyan);
  background: linear-gradient(180deg, #0b1220, #090e19);
}
.search-icon { color: var(--text-mute); flex: none; }
.search-box:focus-within .search-icon { color: var(--cyan); }

#search {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: none; border: 0; outline: none;
  color: var(--text); font-size: 13px; letter-spacing: .01em;
}
#search::placeholder { color: var(--text-faint); }
#search::-webkit-search-cancel-button { display: none; }

.search-clear {
  flex: none; width: 20px; height: 20px; border-radius: 5px;
  color: var(--text-mute); font-size: 11px; line-height: 1;
  transition: color var(--dur), background var(--dur);
}
.search-clear:hover { color: var(--rose); background: var(--rose-soft); }

.search-spinner {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.6px solid rgba(34,211,238,.25); border-top-color: var(--cyan);
  animation: spin .7s linear infinite;
}
.search-kbd {
  flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  border: 1px solid var(--edge); border-radius: 5px; padding: 1px 5px; background: #0a0f1a;
}
.search-hint {
  position: absolute; left: 2px; top: calc(100% + 3px);
  font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono);
  pointer-events: none; opacity: 0; transition: opacity var(--dur);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.search-box:focus-within ~ .search-hint,
.search-wrap:focus-within .search-hint { opacity: 1; }

/* suggestion dropdown */
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 60;
  max-height: min(58vh, 420px); overflow: auto;
  background: rgba(9, 13, 22, .985);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(9px);
  padding: 5px;
  animation: pop-in 130ms var(--ease-out);
}
.suggest-item {
  display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 9px; align-items: center;
  padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur);
}
.suggest-item:hover, .suggest-item.is-cursor { background: rgba(34,211,238,.10); }
.suggest-item.is-cursor { box-shadow: inset 2px 0 0 var(--cyan); }
.suggest-dot { width: 8px; height: 8px; border-radius: 50%; justify-self: center; }
.suggest-main { min-width: 0; }
.suggest-name {
  font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-name mark { background: rgba(34,211,238,.22); color: #eafcff; border-radius: 3px; padding: 0 1px; }
.suggest-sub {
  font-size: 10px; color: var(--text-mute); font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-score { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); flex: none; }
.suggest-empty { padding: 12px; color: var(--text-mute); font-size: 12px; text-align: center; }
.suggest-foot {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 9px 3px; margin-top: 3px; border-top: 1px solid var(--edge);
  font-size: 10px; color: var(--text-faint); font-family: var(--font-mono);
}

/* --- view tabs ------------------------------------------------------------ */

.view-tabs { position: relative; display: flex; gap: 2px; padding: 3px; background: #080d17; border: 1px solid var(--edge); border-radius: 9px; }
.view-tab {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 6px;
  font-size: 12px; color: var(--text-mute); letter-spacing: .02em;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.view-tab:hover { color: var(--text-dim); }
.view-tab.is-active { color: #eafcff; text-shadow: 0 0 12px rgba(34,211,238,.45); }
.tab-ink {
  position: absolute; top: 3px; bottom: 3px; border-radius: 6px; z-index: 0;
  background: linear-gradient(180deg, rgba(34,211,238,.20), rgba(34,211,238,.07));
  border: 1px solid rgba(34,211,238,.34);
  box-shadow: var(--glow-soft);
  transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out);
  pointer-events: none;
}

/* --- header actions ------------------------------------------------------- */

.header-actions { display: flex; align-items: center; gap: 7px; }

.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  border-radius: 8px; color: var(--text-dim);
  border: 1px solid transparent;
  transition: color var(--dur), background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.icon-btn:hover { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(34,211,238,.28); }
.icon-btn.is-active { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(34,211,238,.4); box-shadow: var(--glow-soft); }
.icon-btn-lg { width: 38px; height: 38px; font-size: 17px; }

.conn-pill {
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px;
  border-radius: 99px; border: 1px solid var(--edge);
  background: #080d17; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute);
  transition: border-color var(--dur), color var(--dur);
  cursor: help;
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); box-shadow: 0 0 0 0 currentColor; }
.conn-pill[data-state="live"]    { color: var(--emerald); border-color: rgba(16,185,129,.35); }
.conn-pill[data-state="live"] .conn-dot    { background: var(--emerald); animation: pulse-dot 2.4s var(--ease) infinite; }
.conn-pill[data-state="demo"]    { color: var(--purple); border-color: rgba(168,85,247,.35); }
.conn-pill[data-state="demo"] .conn-dot    { background: var(--purple); }
.conn-pill[data-state="busy"]    { color: var(--cyan); border-color: rgba(34,211,238,.35); }
.conn-pill[data-state="busy"] .conn-dot    { background: var(--cyan); animation: pulse-dot 1s var(--ease) infinite; }
.conn-pill[data-state="error"]   { color: var(--rose); border-color: rgba(244,63,94,.4); }
.conn-pill[data-state="error"] .conn-dot   { background: var(--rose); }
.conn-pill[data-state="degraded"]{ color: var(--amber); border-color: rgba(245,158,11,.4); }
.conn-pill[data-state="degraded"] .conn-dot{ background: var(--amber); }

/* -------------------------------------------------------------------------- */
/*  6. Rail (left control column)                                              */
/* -------------------------------------------------------------------------- */

.rail {
  background: linear-gradient(180deg, #0a0f1b, #070b14);
  border-right: 1px solid var(--edge);
  min-height: 0; position: relative; z-index: 30;
}
.rail-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 24px; }

.rail-section { padding: 12px 0; border-bottom: 1px dashed var(--edge); }
.rail-section:first-child { padding-top: 4px; }
.rail-section-last { border-bottom: 0; }

.rail-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 10px;
}
.rail-title span::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px;
  background: var(--cyan); border-radius: 1px; box-shadow: 0 0 8px var(--cyan);
  transform: translateY(-1px);
}
.rail-title-em {
  font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px;
  color: var(--text-dim); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.link-btn {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); transition: color var(--dur);
}
.link-btn:hover { color: var(--cyan); }

/* --- fields --------------------------------------------------------------- */

.field { margin-bottom: 11px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--text-dim); margin-bottom: 5px; letter-spacing: .01em;
}
.field-output { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); }
/* One line under a control, for the caveat that belongs to it — e.g. why a
   weighted handshake is capped at four hops while a hop-count one is not. */
.field-note {
  margin: 4px 0 0; font-size: 10.5px; line-height: 1.45;
  color: var(--text-faint); white-space: normal;
}
.field-help { font-size: 10.5px; color: var(--text-faint); margin-top: 5px; line-height: 1.5; }
.field-help code { font-size: 10px; }
.field-help.warn { color: var(--amber); }
.field-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.field-row-tight { gap: 12px; }
.field-grow { flex: 1 1 130px; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: 8px;
  font-size: 12px; letter-spacing: .015em; white-space: nowrap;
  border: 1px solid var(--edge); background: var(--panel-2); color: var(--text-dim);
  transition: color var(--dur), background var(--dur), border-color var(--dur), box-shadow var(--dur), transform 90ms var(--ease);
}
.btn:hover { color: var(--text); border-color: var(--edge-strong); background: var(--panel-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; }
.btn-block { width: 100%; }

.btn-primary {
  color: #04121a; font-weight: 600;
  background: linear-gradient(180deg, #4ee3f7, #17b6d4);
  border-color: rgba(34,211,238,.6);
  box-shadow: 0 0 18px rgba(34,211,238,.24), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover { color: #04121a; background: linear-gradient(180deg, #67e9fb, #22d3ee); border-color: var(--cyan); box-shadow: 0 0 26px rgba(34,211,238,.36), inset 0 1px 0 rgba(255,255,255,.3); }

.btn-ghost { background: transparent; }
.btn-danger-ghost { background: transparent; border-color: rgba(244,63,94,.28); color: var(--rose); }
.btn-danger-ghost:hover { background: var(--rose-soft); border-color: rgba(244,63,94,.5); color: #ffd9e0; }

/* --- segmented control ---------------------------------------------------- */

.segmented { display: flex; gap: 3px; padding: 3px; background: #080d17; border: 1px solid var(--edge); border-radius: 8px; }
.segmented-sm { padding: 2px; }
.seg {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; padding: 0 9px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-mute);
  transition: color var(--dur), background var(--dur), box-shadow var(--dur);
}
.seg:hover { color: var(--text-dim); background: rgba(148,180,224,.05); }
.seg.is-active {
  color: #eafcff; background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(34,211,238,.07));
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.34), var(--glow-soft);
}
.seg-count {
  font-size: 9.5px; padding: 0 5px; border-radius: 99px; background: rgba(148,180,224,.1);
  color: var(--text-dim); font-weight: 400;
}
.seg.is-active .seg-count { background: rgba(34,211,238,.22); color: #d9fbff; }

/* --- range inputs --------------------------------------------------------- */

.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; background: none; cursor: pointer; display: block;
}
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan) var(--fill, 0%), #16203a var(--fill, 0%));
  box-shadow: inset 0 0 0 1px rgba(148,180,224,.09);
}
.range::-moz-range-track { height: 4px; border-radius: 99px; background: #16203a; }
.range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--cyan); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #eafeff, var(--cyan));
  border: 1px solid rgba(34,211,238,.7);
  box-shadow: 0 0 10px rgba(34,211,238,.55);
  transition: transform 110ms var(--ease), box-shadow var(--dur);
}
.range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #eafeff, var(--cyan));
  border: 1px solid rgba(34,211,238,.7); box-shadow: 0 0 10px rgba(34,211,238,.5);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.14); }
.range:active::-webkit-slider-thumb { transform: scale(1.24); box-shadow: 0 0 16px rgba(34,211,238,.8); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(34,211,238,.28), 0 0 12px rgba(34,211,238,.6); }

.range-emerald::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--emerald) var(--fill,0%), #16203a var(--fill,0%)); }
.range-emerald::-moz-range-progress { background: var(--emerald); }
.range-emerald::-webkit-slider-thumb { background: radial-gradient(circle at 34% 30%, #e6fff5, var(--emerald)); border-color: rgba(16,185,129,.7); box-shadow: 0 0 10px rgba(16,185,129,.5); }
.range-emerald::-moz-range-thumb { background: var(--emerald); border-color: rgba(16,185,129,.7); }

.range-purple::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--purple) var(--fill,0%), #16203a var(--fill,0%)); }
.range-purple::-moz-range-progress { background: var(--purple); }
.range-purple::-webkit-slider-thumb { background: radial-gradient(circle at 34% 30%, #f6eaff, var(--purple)); border-color: rgba(168,85,247,.7); box-shadow: 0 0 10px rgba(168,85,247,.5); }
.range-purple::-moz-range-thumb { background: var(--purple); border-color: rgba(168,85,247,.7); }

/* --- selects & inputs ----------------------------------------------------- */

.select, .input {
  width: 100%; height: 30px; padding: 0 9px;
  background: #080d17; border: 1px solid var(--edge); border-radius: var(--radius-sm);
  color: var(--text); font-size: 12px;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.select { appearance: none; padding-right: 24px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 13px) 13px, calc(100% - 9px) 13px;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.select:hover, .input:hover { border-color: var(--edge-strong); }
.select:focus, .input:focus { outline: none; border-color: rgba(34,211,238,.55); box-shadow: var(--glow-soft); }
.select option { background: #0a0f1b; color: var(--text); }
.select-sm { height: 27px; font-size: 11.5px; width: auto; min-width: 96px; }
.input[type="number"] { font-family: var(--font-mono); }

/* --- switches ------------------------------------------------------------- */

.switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: relative; width: 30px; height: 16px; flex: none; border-radius: 99px;
  background: #131c30; border: 1px solid var(--edge);
  transition: background var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.switch-track::after {
  content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--text-faint); transition: transform var(--dur) var(--ease-out), background var(--dur);
}
.switch input:checked + .switch-track { background: rgba(34,211,238,.2); border-color: rgba(34,211,238,.5); box-shadow: var(--glow-soft); }
.switch input:checked + .switch-track::after { transform: translateX(14px); background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(34,211,238,.25); }
.switch-label { font-size: 11.5px; color: var(--text-dim); }
.switch input:checked ~ .switch-label { color: var(--text); }

/* --- chips (entity types) -------------------------------------------------- */

.chip-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 9px 0 7px; border-radius: 99px;
  border: 1px solid var(--edge); background: #0a0f1b;
  font-size: 11.5px; color: var(--text-mute);
  transition: color var(--dur), border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.chip:hover { color: var(--text-dim); border-color: var(--edge-strong); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; transition: opacity var(--dur), box-shadow var(--dur); }
.chip-count { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); }
.chip.is-on { color: var(--text); border-color: var(--chip-color, var(--cyan)); background: var(--chip-bg, var(--cyan-soft)); }
.chip.is-on .chip-dot { opacity: 1; box-shadow: 0 0 7px currentColor; }
.chip.is-on .chip-count { color: var(--text-dim); }

/* --- relationship list ---------------------------------------------------- */

.rel-list { display: flex; flex-direction: column; gap: 1px; max-height: 190px; overflow-y: auto; margin-top: 4px;
  padding: 3px; background: #080d17; border: 1px solid var(--edge); border-radius: var(--radius-sm); }
.rel-item {
  display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 7px; align-items: center;
  padding: 3px 5px; border-radius: 4px; cursor: pointer; font-size: 11px;
  transition: background var(--dur);
}
.rel-item:hover { background: rgba(148,180,224,.05); }
.rel-item input { accent-color: var(--cyan); width: 11px; height: 11px; margin: 0; cursor: pointer; }
.rel-name { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-item.is-off .rel-name { color: var(--text-faint); text-decoration: line-through; opacity: .7; }
.rel-count { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); }

/* --- leaderboard ---------------------------------------------------------- */

.leaderboard { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.lb-item {
  display: grid; grid-template-columns: 16px minmax(0,1fr) 42px; gap: 8px; align-items: center;
  padding: 5px 7px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; background: #0a0f1b;
  transition: border-color var(--dur), background var(--dur), transform 90ms var(--ease);
}
.lb-item:hover { border-color: rgba(168,85,247,.35); background: rgba(168,85,247,.08); }
.lb-item:active { transform: translateX(1px); }
.lb-rank { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); text-align: right; }
.lb-name { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-item:hover .lb-name { color: var(--text); }
.lb-bar { grid-column: 2 / -1; height: 3px; border-radius: 99px; background: #16203a; overflow: hidden; }
.lb-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--purple), var(--rose)); box-shadow: 0 0 8px rgba(168,85,247,.6); transition: width 420ms var(--ease-out); }
.lb-score { font-family: var(--font-mono); font-size: 10.5px; color: var(--purple); text-align: right; }
.lb-empty { font-size: 11px; color: var(--text-faint); padding: 6px 2px; }

/* -------------------------------------------------------------------------- */
/*  7. Canvas (Cytoscape)                                                      */
/* -------------------------------------------------------------------------- */

.cy {
  position: relative; width: 100%; height: 100%; min-height: 0;
  background:
    radial-gradient(900px 620px at 50% 42%, rgba(34,211,238,.035), transparent 68%),
    var(--void-2);
  outline: none;
}
.cy:focus-visible { box-shadow: inset 0 0 0 1px rgba(34,211,238,.35); }
/* instrument grid + corner brackets, painted over the canvas background but
   under Cytoscape's own <canvas> (which is transparent) */
.cy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(148,180,224,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,180,224,.035) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 92%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 92%);
}
.cy::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none; z-index: 0;
  border-radius: 4px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 16px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top left / 1px 16px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 16px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 1px 16px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 16px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 1px 16px no-repeat;
  opacity: .3;
}
.cy > canvas { position: relative; z-index: 1; }

.cy-hud { position: absolute; z-index: 6; pointer-events: none; }
.cy-hud > * { pointer-events: auto; }
.cy-hud-tl { top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.cy-hud-tr { top: 12px; right: 12px; }
.cy-hud-bl { bottom: 12px; left: 12px; right: 12px; display: flex; justify-content: flex-start; }

.hud-stat {
  display: flex; align-items: baseline; gap: 5px; padding: 4px 9px;
  background: rgba(8, 12, 21, .82); border: 1px solid var(--edge); border-radius: 7px;
  backdrop-filter: blur(7px); box-shadow: var(--shadow-1);
}
.hud-stat b { font-family: var(--font-mono); font-size: 13px; color: var(--cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(34,211,238,.4); }
.hud-stat span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); font-family: var(--font-mono); }
.hud-stat-time b { color: var(--emerald); text-shadow: 0 0 10px rgba(16,185,129,.4); }

.hud-tools { display: flex; flex-direction: column; gap: 4px; }
.tool {
  width: 29px; height: 29px; display: grid; place-items: center;
  background: rgba(8, 12, 21, .82); border: 1px solid var(--edge); border-radius: 7px;
  color: var(--text-dim); font-size: 14px; line-height: 1;
  backdrop-filter: blur(7px); box-shadow: var(--shadow-1);
  transition: color var(--dur), border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.tool:hover { color: var(--cyan); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.1); box-shadow: var(--glow-soft); }
.tool:active { transform: translateY(1px); }
.tool:disabled { opacity: .35; cursor: not-allowed; }

.legend {
  display: flex; gap: 5px; flex-wrap: wrap; max-width: 100%;
  padding: 5px 7px; background: rgba(8,12,21,.78); border: 1px solid var(--edge);
  border-radius: 8px; backdrop-filter: blur(7px);
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-mute); font-family: var(--font-mono); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 7px currentColor; background: currentColor; }
.legend-sep { width: 1px; background: var(--edge); margin: 1px 3px; }

.cy-empty { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.cy-empty-inner {
  pointer-events: auto; text-align: center; max-width: 400px; padding: 26px 28px;
  background: rgba(8, 12, 21, .9); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: var(--shadow-3); backdrop-filter: blur(9px);
}
.cy-empty-glyph { display: block; font-size: 30px; color: var(--cyan); opacity: .55; margin-bottom: 8px; animation: breathe 3s var(--ease) infinite; }
.cy-empty-inner h3 { font-size: 15px; color: var(--text); margin-bottom: 6px; letter-spacing: .01em; }
.cy-empty-inner p { font-size: 12px; color: var(--text-mute); margin-bottom: 14px; line-height: 1.6; }
.cy-empty-actions { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }

.cy-busy { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 8; overflow: hidden; background: rgba(34,211,238,.08); }
.cy-busy-bar {
  position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
  box-shadow: 0 0 12px rgba(34,211,238,.7);
  animation: sweep 1.15s var(--ease) infinite;
}

/* -------------------------------------------------------------------------- */
/*  8. Toasts                                                                  */
/* -------------------------------------------------------------------------- */

.toast-host { position: absolute; z-index: 70; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: min(420px, calc(100vw - 40px));
  display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 9px; align-items: start;
  padding: 9px 11px; border-radius: var(--radius);
  background: rgba(10, 15, 26, .96); border: 1px solid var(--edge-strong);
  box-shadow: var(--shadow-2); backdrop-filter: blur(9px);
  animation: toast-in 220ms var(--ease-out);
}
.toast.is-out { animation: toast-out 180ms var(--ease) forwards; }
.toast-icon { font-size: 12px; line-height: 1.4; text-align: center; }
.toast-body { min-width: 0; }
.toast-title { font-size: 12px; color: var(--text); font-weight: 600; letter-spacing: .01em; }
.toast-msg { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; word-break: break-word; }
.toast-msg code { font-size: 10.5px; }
.toast-close { color: var(--text-faint); font-size: 11px; line-height: 1.5; padding: 0 2px; border-radius: 4px; }
.toast-close:hover { color: var(--rose); }
.toast[data-kind="info"]    { border-left: 2px solid var(--cyan); }
.toast[data-kind="info"] .toast-icon    { color: var(--cyan); }
.toast[data-kind="success"] { border-left: 2px solid var(--emerald); }
.toast[data-kind="success"] .toast-icon { color: var(--emerald); }
.toast[data-kind="warn"]    { border-left: 2px solid var(--amber); }
.toast[data-kind="warn"] .toast-icon    { color: var(--amber); }
.toast[data-kind="error"]   { border-left: 2px solid var(--rose); box-shadow: var(--shadow-2), 0 0 26px rgba(244,63,94,.14); }
.toast[data-kind="error"] .toast-icon   { color: var(--rose); }

/* -------------------------------------------------------------------------- */
/*  9. Table view                                                              */
/* -------------------------------------------------------------------------- */

#panel-table { grid-template-rows: auto minmax(0,1fr) auto; }

.table-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, #0a0f1b, #080c15);
}
.table-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-left: auto; }

.mini-search { position: relative; display: flex; align-items: center; }
.mini-search input {
  width: 190px; height: 27px; padding: 0 9px 0 26px;
  background: #080d17; border: 1px solid var(--edge); border-radius: var(--radius-sm);
  color: var(--text); font-size: 11.5px; transition: border-color var(--dur), box-shadow var(--dur), width var(--dur-2) var(--ease);
}
.mini-search input:focus { outline: none; border-color: rgba(34,211,238,.5); box-shadow: var(--glow-soft); width: 240px; }
.mini-search-icon { position: absolute; left: 8px; color: var(--text-faint); font-size: 13px; pointer-events: none; }

.table-scroll { overflow: auto; min-height: 0; background: var(--void-2); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.data-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, #0d1424, #0a101c);
  border-bottom: 1px solid var(--edge-strong);
  padding: 7px 10px; text-align: left; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 500; cursor: pointer; user-select: none;
}
.data-table thead th:hover { color: var(--cyan); }
.data-table thead th.is-sorted { color: var(--cyan); }
.data-table thead th .sort-arrow { opacity: .85; margin-left: 4px; font-size: 9px; }
.data-table tbody td {
  padding: 6px 10px; border-bottom: 1px solid rgba(27,39,64,.5);
  color: var(--text-dim); vertical-align: middle; white-space: nowrap;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis;
}
.data-table tbody tr { transition: background var(--dur); cursor: pointer; }
.data-table tbody tr:hover { background: rgba(34,211,238,.055); }
.data-table tbody tr.is-selected { background: rgba(34,211,238,.11); box-shadow: inset 2px 0 0 var(--cyan); }
.data-table tbody tr.is-selected td { color: var(--text); }
.data-table td.cell-name { color: var(--text); font-weight: 500; }
.data-table td.cell-mono { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }
.data-table td.cell-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.table-empty { padding: 40px 20px; text-align: center; color: var(--text-mute); font-size: 12.5px; }

/* inline score bar in a table cell */
.cell-bar { display: flex; align-items: center; gap: 7px; }
.cell-bar-track { width: 54px; height: 4px; border-radius: 99px; background: #16203a; overflow: hidden; flex: none; }
.cell-bar-fill { height: 100%; border-radius: 99px; background: var(--cyan); transition: width 320ms var(--ease-out); }
.cell-bar-fill.is-purple { background: var(--purple); box-shadow: 0 0 7px rgba(168,85,247,.55); }
.cell-bar-fill.is-emerald { background: var(--emerald); box-shadow: 0 0 7px rgba(16,185,129,.5); }
.cell-bar-fill.is-amber { background: var(--amber); }
.cell-bar-fill.is-rose { background: var(--rose); box-shadow: 0 0 7px rgba(244,63,94,.5); }
.cell-bar-value { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px;
  border-radius: 99px; border: 1px solid var(--edge);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute); background: #0a0f1b; white-space: nowrap;
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.tag-cyan    { color: var(--cyan);    border-color: rgba(34,211,238,.3);  background: var(--cyan-soft); }
.tag-emerald { color: var(--emerald); border-color: rgba(16,185,129,.3);  background: var(--emerald-soft); }
.tag-purple  { color: var(--purple);  border-color: rgba(168,85,247,.3);  background: var(--purple-soft); }
.tag-amber   { color: var(--amber);   border-color: rgba(245,158,11,.3);  background: var(--amber-soft); }
.tag-rose    { color: var(--rose);    border-color: rgba(244,63,94,.3);   background: var(--rose-soft); }
.tag-stack { display: inline-flex; gap: 3px; }

.table-foot {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-top: 1px solid var(--edge); background: #080c15;
  font-size: 11px; color: var(--text-mute);
}
.table-range { font-family: var(--font-mono); font-size: 10.5px; }
.pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pager-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); padding: 0 6px; }
.pager .tool { width: 25px; height: 25px; font-size: 12px; background: #0a0f1b; }

/* -------------------------------------------------------------------------- */
/*  10. Pathfinding / handshake view                                           */
/* -------------------------------------------------------------------------- */

.path-grid {
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr);
  gap: 12px; padding: 12px; overflow: auto; min-height: 0;
}
.path-panel, .path-side {
  background: linear-gradient(180deg, #0a0f1b, #080c15);
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 14px 15px; box-shadow: var(--shadow-1);
  align-self: start;
}
.panel-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 5px; text-shadow: 0 0 14px rgba(34,211,238,.3);
}
.panel-title-sm { font-size: 10px; letter-spacing: .15em; }
.panel-sub { font-size: 11.5px; color: var(--text-mute); line-height: 1.6; margin-bottom: 13px; }

.path-inputs { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 9px; align-items: end; margin-bottom: 13px; }
.path-picker { position: relative; display: flex; align-items: center; }
.path-picker input {
  width: 100%; height: 34px; padding: 0 10px 0 30px;
  background: #080d17; border: 1px solid var(--edge); border-radius: var(--radius-sm);
  color: var(--text); font-size: 12.5px; transition: border-color var(--dur), box-shadow var(--dur);
}
.path-picker input:focus { outline: none; border-color: rgba(34,211,238,.5); box-shadow: var(--glow-soft); }
.path-swatch { position: absolute; left: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); pointer-events: none; }
.path-swatch-a.is-set { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.path-swatch-b.is-set { background: var(--purple); box-shadow: 0 0 9px var(--purple); }
.path-controls { align-items: end; gap: 11px; margin-bottom: 14px; }

.path-result { min-height: 40px; }
.path-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 11px; margin-bottom: 11px; border-radius: var(--radius-sm);
  background: rgba(34,211,238,.07); border: 1px solid rgba(34,211,238,.24);
}
.path-summary b { font-family: var(--font-mono); color: var(--cyan); font-size: 12.5px; }
.path-summary span { font-size: 11px; color: var(--text-dim); }
.path-summary .path-metric { display: flex; align-items: baseline; gap: 5px; }
.path-summary .path-metric i { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.path-summary .path-metric em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute); }

.path-none {
  padding: 13px; border-radius: var(--radius-sm); text-align: center;
  background: var(--rose-soft); border: 1px solid rgba(244,63,94,.28); color: #ffd9e0; font-size: 12px;
}
.path-none code { color: #ffd9e0; background: rgba(244,63,94,.18); }

/* the chain itself: hop cards joined by a glowing connector */
.chain { display: flex; flex-direction: column; gap: 0; }
.chain-hop { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 11px; }
.chain-rail { display: flex; flex-direction: column; align-items: center; }
.chain-node-dot {
  width: 13px; height: 13px; border-radius: 50%; flex: none; margin-top: 4px;
  background: radial-gradient(circle at 34% 30%, #dffaff, var(--cyan));
  border: 1px solid rgba(34,211,238,.7); box-shadow: 0 0 11px rgba(34,211,238,.6);
}
.chain-hop.is-endpoint .chain-node-dot { background: radial-gradient(circle at 34% 30%, #f4e6ff, var(--purple)); border-color: rgba(168,85,247,.7); box-shadow: 0 0 12px rgba(168,85,247,.65); }
.chain-line { width: 2px; flex: 1 1 auto; min-height: 12px; background: linear-gradient(180deg, rgba(34,211,238,.6), rgba(168,85,247,.45)); box-shadow: 0 0 8px rgba(34,211,238,.3); }
.chain-body { padding-bottom: 11px; min-width: 0; }
.chain-name { font-size: 13px; color: var(--text); font-weight: 600; }
.chain-name:hover { color: var(--cyan); cursor: pointer; }
.chain-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.chain-edge {
  display: flex; align-items: center; gap: 8px; padding: 5px 9px; margin: 3px 0 9px;
  border-radius: var(--radius-sm); background: #0a0f1b; border: 1px dashed var(--edge);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap;
}
.chain-edge b { color: var(--emerald); font-weight: 500; letter-spacing: .05em; }
.chain-edge .edge-cost { color: var(--text-mute); }
.chain-edge.is-calculated b { color: var(--purple); }

.path-alts { margin-top: 12px; }
.path-alt-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; }
.path-alt {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; margin-bottom: 4px;
  border-radius: var(--radius-sm); background: #0a0f1b; border: 1px solid var(--edge);
  font-size: 11.5px; color: var(--text-dim); cursor: pointer; transition: border-color var(--dur), background var(--dur);
}
.path-alt:hover { border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.06); color: var(--text); }
.path-alt-nodes { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; }
.path-alt-cost { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--cyan); flex: none; }

.kv { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; background: #080d17; border: 1px solid var(--edge); border-radius: var(--radius-sm); margin-bottom: 12px; }
.kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 11.5px; }
.kv-row span { color: var(--text-mute); }
.kv-row b { color: var(--text-dim); font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-row b.mono { font-family: var(--font-mono); font-size: 10.5px; }
.neighbour-summary { font-size: 11px; color: var(--text-mute); margin-top: 10px; line-height: 1.6; font-family: var(--font-mono); }

/* -------------------------------------------------------------------------- */
/*  11. Inspector                                                              */
/* -------------------------------------------------------------------------- */

.inspector {
  background: linear-gradient(180deg, #0a0f1b, #070b14);
  border-left: 1px solid var(--edge);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  position: relative; z-index: 30;
}
.inspector-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px 9px; border-bottom: 1px solid var(--edge); flex: none;
}
.inspector-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .19em; text-transform: uppercase; color: var(--text-mute); }
.inspector-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 13px 26px; }
.inspector-empty { text-align: center; padding: 34px 14px; color: var(--text-faint); font-size: 11.5px; line-height: 1.7; }
.inspector-glyph { display: block; font-size: 24px; color: var(--cyan); opacity: .35; margin-bottom: 9px; }

.ins-head { margin-bottom: 12px; }
.ins-type { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; }
.ins-name { font-size: 15.5px; color: #eef5ff; font-weight: 600; line-height: 1.28; word-break: break-word; letter-spacing: -.005em; }
.ins-key { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 5px; word-break: break-all; cursor: pointer; }
.ins-key:hover { color: var(--cyan); }
.ins-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }

.ins-section { margin-top: 15px; padding-top: 12px; border-top: 1px dashed var(--edge); }
.ins-section-title {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.metric { margin-bottom: 8px; }
.metric-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.metric-label { font-size: 11px; color: var(--text-dim); }
.metric-value { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.metric-track { height: 5px; border-radius: 99px; background: #131c30; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(148,180,224,.05); }
.metric-fill { height: 100%; border-radius: 99px; width: 0; transition: width 520ms var(--ease-out); }
.metric-fill.f-cyan    { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); box-shadow: 0 0 9px rgba(34,211,238,.55); }
.metric-fill.f-emerald { background: linear-gradient(90deg, var(--emerald-dim), var(--emerald)); box-shadow: 0 0 9px rgba(16,185,129,.5); }
.metric-fill.f-purple  { background: linear-gradient(90deg, var(--purple-dim), var(--purple)); box-shadow: 0 0 9px rgba(168,85,247,.55); }
.metric-fill.f-amber   { background: linear-gradient(90deg, #92600a, var(--amber)); box-shadow: 0 0 9px rgba(245,158,11,.45); }
.metric-fill.f-rose    { background: linear-gradient(90deg, #9f1239, var(--rose)); box-shadow: 0 0 9px rgba(244,63,94,.5); }
.metric-note { font-size: 10px; color: var(--text-faint); margin-top: 3px; font-family: var(--font-mono); }

.props { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 3px 10px; font-size: 11.5px; }
.props dt { color: var(--text-mute); font-family: var(--font-mono); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.props dd { margin: 0; color: var(--text-dim); word-break: break-word; font-variant-numeric: tabular-nums; }
.props dd.is-strong { color: var(--text); }

.edge-item {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 9px;
  padding: 7px 9px; margin-bottom: 4px; border-radius: var(--radius-sm);
  background: #0a0f1b; border: 1px solid var(--edge); cursor: pointer;
  transition: border-color var(--dur), background var(--dur), transform 90ms var(--ease);
}
.edge-item:hover { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.055); }
.edge-item:active { transform: translateX(1px); }
.edge-title { font-size: 11.5px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edge-title b { color: var(--text); font-weight: 500; }
.edge-type { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--emerald); }
.edge-type.is-calc { color: var(--purple); }
.edge-nums { grid-column: 1 / -1; display: flex; gap: 9px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); flex-wrap: wrap; }
.edge-nums i { font-style: normal; color: var(--text-mute); }

.citation {
  display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 8px;
  padding: 7px 9px; margin-bottom: 4px; border-radius: var(--radius-sm);
  background: #0a0f1b; border: 1px solid var(--edge); font-size: 11.5px;
}
.citation-icon { color: var(--emerald); font-size: 11px; text-align: center; padding-top: 1px; }
.citation-title { color: var(--text-dim); word-break: break-word; line-height: 1.45; }
.citation-title a { color: var(--cyan); }
.citation-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); }
.citation-strength { font-family: var(--font-mono); font-size: 10px; color: var(--emerald); text-align: right; }

.evidence {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
  padding: 7px 9px; margin-bottom: 4px; border-radius: var(--radius-sm);
  background: #080d17; border-left: 2px solid rgba(16,185,129,.5); line-height: 1.55;
  word-break: break-word;
}
.evidence em { color: var(--emerald); font-style: normal; background: rgba(16,185,129,.16); border-radius: 3px; padding: 0 2px; }
.evidence-meta { font-size: 9.5px; color: var(--text-faint); margin-top: 3px; font-family: var(--font-mono); }

.alias-list { display: flex; flex-wrap: wrap; gap: 4px; }

/* -------------------------------------------------------------------------- */
/*  12. Status bar                                                             */
/* -------------------------------------------------------------------------- */

.statusbar {
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  border-top: 1px solid var(--edge); background: #070a12;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-mute);
  letter-spacing: .03em; overflow: hidden; white-space: nowrap;
}
.sb-item { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.sb-item b { color: var(--text-dim); font-weight: 500; }
.sb-item-dim { color: var(--text-faint); }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 7px currentColor; }
.sb-dot.is-live { background: var(--emerald); }
.sb-dot.is-error { background: var(--rose); }
.sb-dot.is-busy { background: var(--cyan); animation: pulse-dot 1s var(--ease) infinite; }
.sb-sep { width: 1px; height: 12px; background: var(--edge); flex: none; }
.sb-grow { flex: 1 1 auto; }

/* -------------------------------------------------------------------------- */
/*  13. Modals                                                                 */
/* -------------------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 10, .78); backdrop-filter: blur(5px); animation: fade-in 180ms var(--ease); }
.modal-card {
  position: relative; width: min(560px, 100%); max-height: min(86vh, 760px);
  display: grid; grid-template-rows: auto minmax(0,1fr) auto;
  background: linear-gradient(180deg, #0c1220, #090d17);
  border: 1px solid var(--edge-strong); border-radius: 14px;
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(34,211,238,.07), 0 0 60px rgba(34,211,238,.06);
  animation: modal-in 240ms var(--ease-out);
}
.modal-card-wide { width: min(880px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--edge); }
.modal-head h2 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 16px rgba(34,211,238,.3); }
.modal-body { overflow-y: auto; padding: 15px 16px; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--edge); }
.modal-foot-note { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); }
.modal-foot-note b { color: var(--text-dim); }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.settings-group {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-mute); margin: 16px 0 9px; padding-bottom: 5px; border-bottom: 1px solid var(--edge);
}
.settings-group:first-child { margin-top: 0; }

.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 4px 18px; margin-bottom: 12px; }
.help-grid > div { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-dim); padding: 3px 0; }
.help-grid > div span { margin-left: auto; text-align: right; color: var(--text-mute); }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  background: linear-gradient(180deg, #141d31, #0d1424);
  border: 1px solid var(--edge-strong); border-bottom-width: 2px; border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.help-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.help-list li { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; padding-left: 13px; position: relative; }
.help-list li::before { content: "▸"; position: absolute; left: 0; color: var(--cyan); opacity: .7; }
.help-list-dim li { color: var(--text-mute); }
.help-list b { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------------------------- */
/*  14. Context menu, scrims, misc                                             */
/* -------------------------------------------------------------------------- */

.ctx-menu {
  position: fixed; z-index: 120; min-width: 186px; padding: 5px;
  background: rgba(10, 15, 26, .985); border: 1px solid var(--edge-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-3); backdrop-filter: blur(9px);
  animation: pop-in 110ms var(--ease-out);
}
.ctx-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 9px; border-radius: var(--radius-xs);
  font-size: 12px; color: var(--text-dim); text-align: left;
  transition: background var(--dur), color var(--dur);
}
.ctx-item:hover { background: rgba(34,211,238,.11); color: var(--text); }
.ctx-item kbd { margin-left: auto; }
.ctx-item.is-danger:hover { background: var(--rose-soft); color: #ffd9e0; }
.ctx-sep { height: 1px; background: var(--edge); margin: 4px 6px; }
.ctx-head { padding: 5px 9px 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }

.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(3,5,10,.6); backdrop-filter: blur(2px); animation: fade-in 160ms var(--ease); }

.noscript {
  position: fixed; inset: auto 0 0 0; z-index: 300; padding: 14px 18px;
  background: var(--rose-soft); border-top: 1px solid rgba(244,63,94,.4);
  color: #ffd9e0; font-size: 12.5px; text-align: center;
}

/* -------------------------------------------------------------------------- */
/*  15. Animations                                                             */
/* -------------------------------------------------------------------------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shell-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(14px) scale(.97); } }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes breathe { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 6px transparent; opacity: .85; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
@keyframes row-flash { 0% { background: rgba(34,211,238,.28); } 100% { background: transparent; } }
.is-flash { animation: row-flash 900ms var(--ease-out); }

/* -------------------------------------------------------------------------- */
/*  16. Responsive                                                             */
/* -------------------------------------------------------------------------- */

/* narrow laptops: keep three columns but tighten them */
@media (max-width: 1440px) {
  :root { --rail-w: 244px; --inspector-w: 312px; }
}

/* tablets / small laptops: inspector becomes an off-canvas drawer */
@media (max-width: 1279px) {
  .app-body { grid-template-columns: var(--rail-w) minmax(0,1fr); }
  .inspector {
    position: fixed; top: var(--header-h); bottom: 0; right: 0; width: min(360px, 92vw);
    transform: translateX(102%); transition: transform var(--dur-2) var(--ease-out);
    box-shadow: var(--shadow-3); z-index: 35;
  }
  .inspector.is-open { transform: none; }
}

@media (max-width: 1023px) {
  :root { --rail-w: 250px; }
  .app-body { grid-template-columns: minmax(0,1fr); }
  .rail {
    position: fixed; top: var(--header-h); bottom: 0; left: 0; width: min(300px, 88vw);
    transform: translateX(-102%); transition: transform var(--dur-2) var(--ease-out);
    box-shadow: var(--shadow-3); z-index: 35;
  }
  .rail.is-open { transform: none; }
  .main { border-left: 0; border-right: 0; }
  .path-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 860px) {
  :root { --header-h: 54px; }
  .app-header { grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; padding: 0 10px; }
  /* The wordmark does not fit beside a wrapped tab bar, but it is the document's
     only h1 — so it is clipped out of sight instead of display:none, which would
     remove it from the accessibility tree and from the mobile outline as well. */
  .brand-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .view-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .app-header { grid-template-rows: auto auto; padding-bottom: 7px; }
  .view-tab span { display: none; }
  .view-tab { padding: 5px 12px; }
  .search-kbd { display: none; }
  .sb-hide-sm { display: none; }
  .mini-search input { width: 130px; }
  .mini-search input:focus { width: 160px; }
  .table-tools { width: 100%; margin-left: 0; }
}

@media (max-width: 620px) {
  body { font-size: 13px; }
  .cy-hud-bl { display: none; }
  .hud-stat-time { display: none; }
  .toast-host { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { max-width: none; }
  .modal { padding: 10px; }
  .modal-card, .modal-card-wide { max-height: 92vh; }
  .settings-grid { grid-template-columns: minmax(0,1fr); gap: 4px; }
}

/* touch: no hover-only affordances */
@media (hover: none) {
  .search-hint { display: none; }
  .data-table tbody tr:hover { background: transparent; }
  .tool, .btn { min-height: 34px; }
}

/* -------------------------------------------------------------------------- */
/*  17. Reduced motion & forced colours                                        */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .boot-ring, .boot-ring-2 { animation: none; border-top-color: var(--cyan); }
}

/* the toggle in settings overrides the media query for people who want it off
   even though their OS says otherwise */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

@media (forced-colors: active) {
  .btn, .tool, .chip, .seg, .conn-pill, .modal-card, .toast, .path-panel, .path-side {
    border: 1px solid CanvasText;
  }
  .cy::before, .cy::after, .app-header::after { display: none; }
}

/* -------------------------------------------------------------------------- */
/*  18. Print — an analyst will paste a subgraph into a report                 */
/* -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; overflow: visible; }
  .app-header, .rail, .inspector, .statusbar, .site-footer, .toast-host, .cy-hud, .modal, .ctx-menu, .scrim { display: none !important; }
  .app-shell, .app-body, .main, .view { display: block !important; height: auto !important; overflow: visible !important; }
  .cy { height: 620px; background: #fff; }
  .table-scroll { overflow: visible; }
  .data-table thead th { background: #eee; color: #000; }
  .data-table tbody td { color: #111; border-bottom: 1px solid #ccc; }
}

/* -------------------------------------------------------------------------- */
/*  12. Production package — site footer, donations, legal pages, contact      */
/* -------------------------------------------------------------------------- */

/* Site footer: a slim instrument-panel strip. It is the third row of the shell
   grid, so the canvas keeps every remaining pixel; nothing scrolls underneath
   it and the boot splash still covers the whole viewport. */
.site-footer {
  display: flex; align-items: center; gap: 14px;
  height: var(--footer-h); padding: 0 12px;
  background: linear-gradient(180deg, var(--void-2), #04060b);
  border-top: 1px solid var(--edge);
  font-size: 11px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.sf-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.sf-dim  { color: var(--text-faint); }
.sf-grow { flex: 1 1 auto; }
.sf-nav  { display: inline-flex; align-items: center; gap: 2px; }
.sf-link {
  background: none; border: 0; padding: 3px 7px; border-radius: var(--radius-xs);
  color: var(--text-dim); font: inherit; cursor: pointer; text-decoration: none;
  transition: color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.sf-link:hover, .sf-link:focus-visible { color: var(--cyan); background: var(--cyan-soft); }
a.sf-link:hover { text-decoration: underline; }
.sf-donate {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 99px;
  border: 1px solid rgba(244, 63, 94, .45);
  background: var(--rose-soft); color: #fda4af;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), color 160ms var(--ease-out);
}
.sf-donate:hover, .sf-donate:focus-visible {
  background: rgba(244, 63, 94, .22); color: #fecdd3;
  box-shadow: 0 0 14px rgba(244, 63, 94, .35);
}
.sf-donate span { font-size: 10px; }

/* The header heart, tinted rose so it reads as "support" and never as a control */
.donate-btn { color: var(--rose); }
.donate-btn:hover, .donate-btn:focus-visible { color: #fda4af; box-shadow: 0 0 12px rgba(244, 63, 94, .35); }

/* --- donation dialog ------------------------------------------------------ */
.donate-lead { margin: 0 0 14px; font-size: 12.5px; line-height: 1.65; color: var(--text-dim); }
.donate-lead b { color: var(--text); }
.donate-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.donate-tab {
  flex: 1 1 0; padding: 8px 0; border-radius: var(--radius);
  border: 1px solid var(--edge); background: var(--panel-2);
  color: var(--text-dim); font: inherit; font-weight: 700; font-size: 12px;
  letter-spacing: .14em; cursor: pointer;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out),
              background-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.donate-tab:hover { color: var(--text); border-color: var(--edge-strong); }
.donate-tab.is-active {
  color: var(--cyan); border-color: var(--cyan);
  background: var(--cyan-soft); box-shadow: var(--glow-soft);
}
.donate-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
/* The QR is rendered dark-on-light on purpose: wallets scan contrast, not mood. */
.donate-qr { padding: 8px; background: #f8fafc; border-radius: var(--radius); line-height: 0; }
.donate-qr .qr-svg { width: 148px; height: 148px; display: block; }
.qr-missing { width: 148px; font-size: 11px; line-height: 1.5; color: #334155; }
.donate-network { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.donate-address {
  display: block; padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--void-2); border: 1px solid var(--edge);
  color: var(--emerald); font-family: var(--font-mono); font-size: 11.5px;
  word-break: break-all; user-select: all;
}
.donate-fp { margin: 6px 0 10px; font-size: 11px; color: var(--text-faint); }
.donate-fp b { color: var(--cyan); font-family: var(--font-mono); font-weight: 600; }
#donate-copy.is-copied { border-color: var(--emerald); color: var(--emerald); }
.donate-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-dim); }
.donate-safety {
  margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid rgba(245, 158, 11, .35); background: var(--amber-soft);
  font-size: 11.5px; line-height: 1.6; color: #fcd34d;
}
.donate-safety code { color: #fde68a; }

/* --- legal pages and the OSINT guide -------------------------------------- */
.legal-body h3 {
  margin: 18px 0 6px; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan);
}
.legal-body h3:first-child { margin-top: 2px; }
.legal-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.legal-body b { color: var(--text); }
.legal-body i { color: var(--purple); }
.legal-body a { color: var(--cyan); }
.legal-body ul { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; line-height: 1.75; color: var(--text-dim); }
.legal-body code {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--emerald);
  background: var(--void-2); padding: 1px 5px; border-radius: var(--radius-xs);
}
.legal-body pre {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--void-2); border: 1px solid var(--edge); overflow-x: auto;
}
.legal-body pre code { background: none; padding: 0; color: #a5f3fc; font-size: 11px; line-height: 1.6; }

/* --- contact -------------------------------------------------------------- */
.contact-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 12px; margin-bottom: 14px;
  border-radius: var(--radius); border: 1px solid var(--edge); background: var(--panel-2);
}
.contact-avatar {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--cyan-soft);
  color: var(--cyan); font-size: 20px; box-shadow: var(--glow-soft);
}
.contact-name { margin: 0; font-size: 12.5px; color: var(--text); }
.contact-mail { margin: 2px 0; font-size: 12px; }
.contact-mail a { color: var(--emerald); }
.contact-links { margin: 0; font-size: 11px; color: var(--text-faint); }
.contact-links a { color: var(--text-dim); }
.contact-body h3 { margin: 4px 0 6px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.contact-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.contact-note { color: var(--text-faint); }
.mh-glyph { color: var(--rose); margin-right: 7px; }

/* --- responsive + reduced motion, for this section only -------------------- */
@media (max-width: 900px) {
  .sf-hide-md { display: none; }
}
@media (max-width: 640px) {
  .sf-hide-sm { display: none; }
  /* A phone cannot fit attribution plus five legal links. Clipping them would
     hide the disclaimer behind a pixel of overflow, so the strip scrolls instead
     — with the scrollbar suppressed, because a scrollbar in a 34 px bar is noise. */
  .site-footer { gap: 8px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
  .site-footer::-webkit-scrollbar { display: none; }
  .donate-panel { grid-template-columns: minmax(0, 1fr); }
  .donate-qr { justify-self: start; }
  .contact-card { grid-template-columns: auto minmax(0, 1fr); }
  .contact-card #contact-copy { grid-column: 2; justify-self: start; }
}
body.reduce-motion .sf-link,
body.reduce-motion .sf-donate,
body.reduce-motion .donate-tab { transition: none; }
body.reduce-motion .sf-donate:hover { box-shadow: none; }