/* Odin: a Theta network telemetry console. Mono-forward, dense, night-slate. */

@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../vendor/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../vendor/fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../vendor/fonts/jetbrains-mono-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../vendor/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../vendor/fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Foundry (default): the FuelFoundry brand. Warm near-black with the
     fuelfoundry.io red accent, teal for healthy, amber/red for warn/error.
     Tokens taken from revoke.fuelfoundry.io. */
  --bg: #0f0f0f;
  --bg-grid: #141414;
  --surface: #181818;
  --surface-2: #1f1f1f;
  --hair: #2a2a2a;
  --hair-strong: #383838;
  --text: #f4f4f5;
  --text-dim: #b3b3b6;
  --text-faint: #79797e;
  --accent: #e10600;
  --accent-dim: #a60400;
  --accent-glow: rgba(225, 6, 0, 0.5);
  --good: #2dd4a7;
  --bad: #ff3b30;
  --warn: #ffb020;
  --pos: #2dd4a7;
  --neg: #ff3b30;
  --chart-2: #e10600; /* second chart line; brand red in Foundry */
  --shadow: 0 1px 0 rgba(0,0,0,0.5);
}

/* Dark: the night-slate console (cool, teal accent). */
[data-theme="dark"] {
  --bg: #0a0f14;
  --bg-grid: #0d1419;
  --surface: #121a21;
  --surface-2: #18222b;
  --hair: #223039;
  --hair-strong: #2c3d48;
  --text: #d9e2e8;
  --text-dim: #74858f;
  --text-faint: #4a5862;
  --accent: #2ad4c0;
  --accent-dim: #18796f;
  --accent-glow: rgba(42, 212, 192, 0.45);
  --good: #3fb950;
  --bad: #f0556b;
  --warn: #d8a838;
  --pos: #3fb950;
  --neg: #f0556b;
  --chart-2: #3fb950; /* green in Dark */
  --shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* Light: cool paper. */
[data-theme="light"] {
  --bg: #eef1f3;
  --bg-grid: #e6eaed;
  --surface: #ffffff;
  --surface-2: #f3f6f8;
  --hair: #d6dde2;
  --hair-strong: #c2ccd2;
  --text: #19242b;
  --text-dim: #5c6b73;
  --text-faint: #97a4ab;
  --accent: #0f9c8d;
  --accent-dim: #7fd6cc;
  --accent-glow: rgba(15, 156, 141, 0.3);
  --good: #1a7f37;
  --bad: #cf2440;
  --warn: #9a6700;
  --pos: #1a7f37;
  --neg: #cf2440;
  --chart-2: #1a7f37; /* green in Light */
  --shadow: 0 1px 0 rgba(0,0,0,0.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.7px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }

.mono { font-family: var(--font-mono); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.accent { color: var(--accent); }

/* ---- command bar ---- */
.statusbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  height: 46px; padding: 0 16px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-grid) 100%);
  border-bottom: 1px solid var(--hair-strong);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand .glyph {
  display: grid; place-items: center; color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.icon { display: inline-block; vertical-align: -0.16em; flex-shrink: 0; }
.brand .word {
  font-family: var(--font-display); font-weight: 700; font-size: 14.4px;
  letter-spacing: 0.32em; padding-left: 0.1em;
}
.brand .sub { color: var(--text-faint); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; }
.statusbar .spacer { flex: 1; }

.stat-chip { display: flex; align-items: baseline; gap: 6px; }
.stat-chip .k { color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; }
.stat-chip .v { font-weight: 500; }

.conn { display: flex; align-items: center; gap: 6px; font-size: 9.9px; color: var(--text-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.dot.online { background: var(--good); box-shadow: 0 0 7px -1px var(--good); }
.dot.offline { background: var(--bad); }
.dot.live { background: var(--accent); box-shadow: 0 0 7px -1px var(--accent); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

.toggle {
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: 4px;
  padding: 4px 9px; font-size: 9.9px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.toggle:hover { border-color: var(--accent-dim); color: var(--text); }

/* ---- layout ---- */
.wrap { max-width: 1680px; margin: 0 auto; padding: 14px 16px 60px; }
.grid { display: grid; gap: 12px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

.panel { background: var(--surface); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; }
.panel > .head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--hair);
  background: var(--bg-grid);
}
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 9.9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 7px;
}
.eyebrow .i { color: var(--accent); }
.panel > .body { padding: 10px 12px; }
.panel > .body.flush { padding: 0; }

/* ---- heartbeat (signature) ---- */
.pulse { display: flex; align-items: stretch; gap: 2px; height: 38px; }
.pulse .tick {
  flex: 1 1 0; min-width: 2px; border-radius: 1px;
  background: var(--hair); align-self: flex-end;
  transition: height 0.3s ease, background 0.3s ease;
}
.pulse .tick.new { animation: pop 0.7s ease; }
@keyframes pop { 0% { background: var(--accent); box-shadow: 0 0 12px var(--accent); } 100% {} }
.pulse-legend { display: flex; gap: 14px; font-size: 9px; color: var(--text-faint); margin-top: 6px; }
/* Checkpoint pulse hover: bar fades to FuelFoundry red + a fixed data card. */
.pulse .tick { cursor: pointer; }
.pulse .tick:hover { background: #e10600; }
.cp-card {
  position: fixed; z-index: 50; transform: translate(-50%, calc(-100% - 10px));
  min-width: 210px; background: var(--surface); border: 1px solid var(--hair-strong);
  border-radius: 6px; padding: 8px 10px; box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease; font-size: 11px;
}
.cp-card.on { opacity: 1; }
.cp-card .cp-row { display: flex; justify-content: space-between; gap: 18px; padding: 1px 0; }
.cp-card .cp-head { font-weight: 600; border-bottom: 1px solid var(--hair); padding-bottom: 4px; margin-bottom: 3px; }
.cp-card .cp-sub { font-size: 10px; }
.cp-card .cp-hint { font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); margin-top: 5px; text-align: right; }

/* ---- stat cells (overview) ---- */
.cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; }
@media (max-width: 1100px) { .cells { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cells { grid-template-columns: repeat(2, 1fr); } }
.cell { background: var(--surface); padding: 11px 13px; }
.cell .k { color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: 0.11em; }
.cell .v { font-size: 18.9px; font-weight: 500; margin-top: 3px; font-variant-numeric: tabular-nums; }
.cell .u { color: var(--text-dim); font-size: 9.9px; margin-left: 4px; }
.cell .sub2 { color: var(--text-dim); font-size: 9.9px; margin-top: 2px; }

/* ---- ticker ---- */
.ticker { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.tk { display: flex; flex-direction: column; gap: 1px; padding: 8px 16px; border-right: 1px solid var(--hair); white-space: nowrap; }
.tk .sym { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; }
.tk .price { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tk .chg { font-size: 9px; display: flex; gap: 8px; }
.fng { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.fng .gauge { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13.5px; }

/* ---- tables ---- */
.tabs { display: flex; gap: 2px; }
.tab {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  padding: 5px 13px; font-size: 9.9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); border-radius: 4px 4px 0 0;
}
.tab.active { color: var(--accent); background: var(--surface); border-color: var(--hair); }
.tab:hover:not(.active) { color: var(--text); }

.toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.search { background: var(--bg-grid); border: 1px solid var(--hair); border-radius: 4px; padding: 5px 9px; color: var(--text); font-family: var(--font-mono); font-size: 10.8px; min-width: 320px; }
.search:focus { outline: none; border-color: var(--accent-dim); }
.chip { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 4px; padding: 4px 9px; font-size: 9.9px; color: var(--text-dim); }
.chip.on { color: var(--accent); border-color: var(--accent-dim); }

/* border-collapse must be "separate" for sticky headers to pin correctly;
   collapsed borders make the browser detach the sticky thead by a few pixels. */
table.dense { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.dense th {
  position: sticky; top: 0; z-index: 5;
  text-align: left; font-weight: 500; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); padding: 7px 10px; background: var(--bg-grid);
  /* The bottom rule is an inset shadow, not a border, so it stays painted with
     the sticky cell instead of detaching and floating a few pixels above. */
  box-shadow: inset 0 -1px 0 var(--hair-strong);
  white-space: nowrap; cursor: pointer; user-select: none;
}
table.dense th.right, table.dense td.right { text-align: right; }
table.dense th .ar { color: var(--accent); margin-left: 4px; }
table.dense td { padding: 6px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
table.dense tbody tr:hover { background: var(--surface-2); }
table.dense tbody tr { cursor: pointer; }
.addr { color: var(--text-dim); }
.addr:hover { color: var(--accent); }
.tag { color: var(--text); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.badge.up { color: var(--good); }
.badge.down { color: var(--bad); }

/* efficiency mini bar */
.effbar { display: inline-flex; align-items: center; gap: 6px; }
.effbar .track { width: 46px; height: 5px; background: var(--hair); border-radius: 3px; overflow: hidden; }
.effbar .fill { height: 100%; background: var(--accent); }
.effbar.lo .fill { background: var(--bad); }
.effbar.mid .fill { background: var(--warn); }

/* row sparkline */
.spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 16px; }
.spark i { width: 2px; background: var(--accent-dim); border-radius: 1px; }
.spark i.miss { background: var(--bad); opacity: 0.6; }

/* pager */
.pager { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--hair); color: var(--text-dim); font-size: 9.9px; }
.pager button { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 4px; padding: 4px 10px; color: var(--text-dim); font-size: 9.9px; }
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager button:not(:disabled):hover { color: var(--accent); border-color: var(--accent-dim); }

/* withdrawals + events */
.queue-row, .feed-row { display: grid; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--hair); }
.queue-row { grid-template-columns: 70px 1fr 110px 80px 110px; }
.feed-row { grid-template-columns: 78px 1fr 76px 118px; }
.queue-row:hover, .feed-row:hover { background: var(--surface-2); }
.queue-row > *, .feed-row > * { min-width: 0; }
.feed-addrs { display: flex; flex-direction: column; gap: 1px; }
.queue-row .addr, .feed-addrs .addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.countdown .track { height: 4px; background: var(--hair); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.countdown .fill { height: 100%; background: var(--warn); }
.kind { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--hair); color: var(--text-dim); justify-self: start; }
.kind.transfer { color: var(--accent); border-color: var(--accent-dim); }
.kind.stake { color: var(--good); }
.kind.withdraw { color: var(--warn); }
.kind.earning { color: var(--text-dim); }

/* Top transfers: rank | from->to | block | age | amount */
.top-row { display: grid; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--hair); grid-template-columns: 26px 1fr 96px 50px 84px; }
.top-row:hover { background: var(--surface-2); }
.top-row > * { min-width: 0; }
.top-row .rank { color: var(--text-faint); font-size: 9.9px; text-align: center; }
.toptx-controls { align-items: center; }
.win-select { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 4px; padding: 4px 8px; font-size: 9.9px; color: var(--text-dim); font-family: var(--font-mono); cursor: pointer; margin-left: 6px; }
.win-select:focus { outline: none; border-color: var(--accent-dim); color: var(--accent); }
.nodename { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
/* Featured (house) guardian: always FuelFoundry brand red, every theme. */
.nodename.featured { color: #e10600; font-weight: 600; }

/* Header nav link */
.navlink { display: inline-flex; align-items: center; gap: 6px; font-size: 10.8px; color: var(--text-dim); border: 1px solid var(--hair); border-radius: 5px; padding: 4px 10px; }
.navlink:hover { color: var(--accent); border-color: var(--accent-dim); }

/* Wallet payouts: sparkline + dual-handle range slider */
.wallet .spark { display: flex; align-items: flex-end; gap: 0; height: 64px; padding: 4px 0; overflow: hidden; }
.wallet .spark .bar { flex: 1 1 0; min-width: 0; background: var(--hair-strong); opacity: 0.45; }
.wallet .spark .bar.inrange { background: var(--accent); opacity: 1; }
.range-slider { position: relative; height: 30px; margin-top: 4px; }
.range-slider .track { position: absolute; top: 13px; left: 0; right: 0; height: 4px; background: var(--hair); border-radius: 2px; }
.range-slider .fill { position: absolute; top: 13px; height: 4px; background: var(--accent); border-radius: 2px; }
.range-slider input[type=range] { position: absolute; top: 5px; left: 0; width: 100%; height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range-slider input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: pointer; box-shadow: 0 0 0 1px var(--hair-strong); }
.range-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: pointer; }
.range-slider input[type=range]::-webkit-slider-runnable-track { background: none; border: none; }
.range-slider input[type=range]::-moz-range-track { background: none; border: none; }
.range-labels { display: flex; justify-content: space-between; font-size: 9.9px; margin-top: 6px; }
/* Wallet stakes table: let the wider Node column use its full width. */
.wallet .nodename { max-width: none; }

.chartbox { height: 192px; width: 100%; }
.chartbox.sm { height: 200px; }

/* node detail */
.back { font-size: 9.9px; color: var(--text-dim); }
.back:hover { color: var(--accent); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 14px; font-size: 10.8px; }
.kv .k { color: var(--text-faint); }
.detail-eff { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-eff .e { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 6px; padding: 10px 14px; min-width: 120px; }
.detail-eff .e .w { color: var(--text-faint); font-size: 9px; text-transform: uppercase; }
.detail-eff .e .p { font-size: 19.8px; font-weight: 500; }

.empty { padding: 24px; text-align: center; color: var(--text-faint); font-size: 10.8px; }
.copyable { cursor: copy; }

::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* Mobile: declutter the command bar, tighten spacing, let panels breathe. The
   reactive store.isMobile flips wallet addresses to the ellipsed form. */
@media (max-width: 768px) {
  .wrap { padding: 10px 8px 48px; }
  .statusbar { gap: 12px; padding: 0 10px; height: 44px; }
  .statusbar .stat-chip { display: none; }
  .brand .sub { display: none; }
  .brand .word { font-size: 13.5px; letter-spacing: 0.22em; }
  .cell .v { font-size: 16.2px; }
  .toolbar { flex-wrap: nowrap; }
  .toolbar .search { min-width: 0; flex: 1; }
  .panel > .head { flex-wrap: wrap; row-gap: 6px; }
  .tk { padding: 8px 12px; }
  .top-row { grid-template-columns: 22px 1fr 48px 104px; }
  .top-row .block-col { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }