/* Vitrine — a display case for the Reliquary archive.
   Palette: verdigris on bronze. Museum-label serif for headings, monospace
   for every number, system UI for controls. Tokens carry both themes; nothing
   below defines a colour outside :root. */

:root {
  --ground:    #f1f3f2;
  --surface:   #fbfcfb;
  --surface-2: #e8ebe9;
  --line:      #d3d9d6;
  --line-soft: #e2e7e4;
  --ink:       #14191a;
  --ink-2:     #4a5553;
  --ink-3:     #77837f;

  --verdigris: #2f7d6b;
  --verdigris-d: #246254;
  --verdigris-deep: #1e5a4d;
  --bronze:    #9a6f2e;
  --oxide:     #a8483a;
  --amber:     #b07b2e;

  --sel:   #2f7d6b;
  --run:   #b07b2e;
  --rej:   #a8483a;
  --watch: #5b4bb8;

  --grid:   #dfe4e1;
  --shadow: 0 1px 2px rgba(20,25,26,.06), 0 8px 24px rgba(20,25,26,.05);
  --radius: 7px;
  --primary-fg: #ffffff;

  --ui:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --disp: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #0e1214;
    --surface:   #151b1d;
    --surface-2: #1d2427;
    --line:      #2a3336;
    --line-soft: #212a2c;
    --ink:       #e6ebe9;
    --ink-2:     #a3b0ad;
    --ink-3:     #75837f;
    --verdigris: #4fb79c;
    --verdigris-d: #3d9a83;
    --verdigris-deep: #7fd4bd;
    --bronze:    #cfa055;
    --oxide:     #d8705f;
    --amber:     #d9a24f;
    --sel:   #4fb79c;
    --run:   #d9a24f;
    --rej:   #d8705f;
    --watch: #9b8ef0;
    --primary-fg: #08110f;
    --grid:  #232c2f;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"] {
  --ground:#0e1214; --surface:#151b1d; --surface-2:#1d2427; --line:#2a3336;
  --line-soft:#212a2c; --ink:#e6ebe9; --ink-2:#a3b0ad; --ink-3:#75837f;
  --verdigris:#4fb79c; --verdigris-d:#3d9a83; --verdigris-deep:#7fd4bd;
  --bronze:#cfa055; --oxide:#d8705f; --amber:#d9a24f;
  --sel:#4fb79c; --run:#d9a24f; --rej:#d8705f; --watch:#9b8ef0;
  --primary-fg:#08110f; --grid:#232c2f; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 14px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */
#shell {
  display: grid; min-height: 100%;
  grid-template-columns: 216px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "rail bar" "rail main";
}
#rail {
  grid-area: rail; background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 0 14px; position: sticky; top: 0; height: 100vh;
}
.mark {
  font: 600 21px/1 var(--disp); letter-spacing: .01em;
  padding: 0 20px; color: var(--ink);
}
.mark-g { color: var(--verdigris); }
.mark-sub {
  margin: 6px 0 18px; padding: 0 20px;
  font: 11px/1.4 var(--ui); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
#nav { list-style: none; margin: 0; padding: 0 10px; display: grid; gap: 2px; }
#nav button {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 10px; border-radius: 5px; cursor: pointer;
  font: 14px/1 var(--ui); color: var(--ink-2);
}
#nav button:hover { background: var(--surface-2); color: var(--ink); }
#nav button.on {
  background: var(--surface-2); color: var(--ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--verdigris);
}
.rail-foot { margin-top: auto; padding: 0 16px; display: grid; gap: 8px; }

#bar {
  grid-area: bar; background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px 24px; position: sticky; top: 0; z-index: 5;
}
#bar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.dash { color: var(--ink-3); }
#main { grid-area: main; min-width: 0; }
.pad { padding: 24px; display: grid; gap: 20px; }

/* ---------- controls ---------- */
input, select, textarea, button, a.ghost {
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 5px; padding: 6px 9px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--verdigris); outline-offset: 1px;
}
input[type=number] { width: 88px; }
input.narrow { width: 56px; }
button, a.ghost { cursor: pointer; text-decoration: none; }
button:hover, a.ghost:hover { border-color: var(--verdigris); }
.primary {
  background: var(--verdigris); border-color: var(--verdigris-d);
  color: var(--primary-fg); font-weight: 600;
}
.primary:hover { background: var(--verdigris-d); }
.ghost { background: transparent; }
.tiny { font-size: 11.5px; padding: 4px 7px; }
.inline { display: inline-flex; align-items: center; gap: 5px; }
.busy { color: var(--verdigris); font-size: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- panels ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px 20px;
  box-shadow: var(--shadow); min-width: 0;
}
.panel h2 {
  margin: 0 0 4px; font: 600 16px/1.3 var(--disp);
  letter-spacing: .01em;
}
.phead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.phead h2 { margin: 0; margin-right: auto; }
.note { margin: 0 0 14px; color: var(--ink-2); font-size: 12.5px; }
.muted { color: var(--ink-3); }
.cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.scrollx { overflow-x: auto; }
code {
  font-family: var(--mono); font-size: .92em;
  background: var(--surface-2); padding: 1px 4px; border-radius: 3px;
}

/* ---------- stat cards ---------- */
.statgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow);
}
.stat b {
  display: block; font: 600 24px/1.15 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat span {
  display: block; margin-top: 3px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat.accent b { color: var(--verdigris); }

/* ---------- tables ---------- */
table.grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.grid th {
  text-align: right; padding: 7px 9px; white-space: nowrap;
  border-bottom: 1px solid var(--line); color: var(--ink-3);
  font: 600 11px/1.3 var(--ui); letter-spacing: .04em; text-transform: uppercase;
  position: sticky; top: 0; background: var(--surface); cursor: pointer;
}
table.grid th:first-child, table.grid td:first-child { text-align: left; }
table.grid th.nosort { cursor: default; }
table.grid th.sorted { color: var(--verdigris); }
table.grid td {
  padding: 6px 9px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.watched td { box-shadow: inset 2px 0 0 var(--watch); }
td.name, th.name { font-family: var(--ui); }

.pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font: 600 10.5px/1.6 var(--ui); letter-spacing: .03em;
  border: 1px solid currentColor;
}
.pill.sel { color: var(--sel); }
.pill.run { color: var(--run); }
.pill.rej { color: var(--rej); }

/* proportional bar rendered behind a number */
.bar { position: relative; }
.bar i {
  position: absolute; left: 0; top: 3px; bottom: 3px;
  background: var(--verdigris); opacity: .14; border-radius: 2px;
}
.bar span { position: relative; }

/* ---------- charts ---------- */
canvas { width: 100%; display: block; }
.legend {
  margin: 10px 0 0; font-size: 11.5px; color: var(--ink-2);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.sw.sel { background: var(--sel); }
.sw.all { background: var(--ink-3); }
.sw.run { background: var(--run); }
.sw.rej { background: var(--rej); }
.sw.watch { background: var(--watch); }

/* ---------- query ---------- */
#sqlbox {
  width: 100%; min-height: 130px; resize: vertical; line-height: 1.55;
  background: var(--ground);
}

/* ---------- envelope bands ---------- */
.band { display: grid; grid-template-columns: 150px 1fr 150px; gap: 12px; align-items: center; padding: 5px 0; }
.band-name { font: 12.5px/1.3 var(--mono); color: var(--ink-2); }
.band-track { position: relative; height: 20px; }
.band-track .rail-line { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--grid); }
.band-track .iqr { position: absolute; top: 5px; height: 10px; background: var(--verdigris); opacity: .28; border-radius: 2px; }
.band-track .p1090 { position: absolute; top: 8px; height: 4px; background: var(--verdigris); opacity: .45; border-radius: 2px; }
.band-track .med { position: absolute; top: 2px; width: 2px; height: 16px; background: var(--verdigris); }
.band-track .you { position: absolute; top: 0; width: 2px; height: 20px; background: var(--watch); }
.band-track .you::after {
  content: ""; position: absolute; left: -3px; top: -4px;
  border: 4px solid transparent; border-top-color: var(--watch);
}
.band-num { font: 11.5px/1.3 var(--mono); color: var(--ink-3); text-align: right; }

.err { color: var(--rej); font-family: var(--mono); font-size: 12.5px; }

@media (max-width: 860px) {
  #shell { grid-template-columns: 1fr; grid-template-areas: "rail" "bar" "main"; }
  #rail { position: static; height: auto; flex-direction: row; align-items: center;
          flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  #nav { display: flex; flex-wrap: wrap; padding: 0; }
  .rail-foot { margin: 0; padding: 0; }
  .band { grid-template-columns: 110px 1fr; }
  .band-num { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- login ---------- */
.login-body {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background-color: var(--ground);
  background-image:
    radial-gradient(1100px 520px at 50% -10%,
      color-mix(in srgb, var(--verdigris) 11%, transparent), transparent 70%);
}
.login-card {
  width: min(370px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 30px 30px 24px; box-shadow: var(--shadow);
}
.login-mark { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.login-mark h1 { margin: 0; font: 600 22px/1.1 var(--disp); letter-spacing: .01em; }
.login-mark p {
  margin: 4px 0 0; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.login-card form { display: grid; gap: 6px; }
.login-card label {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 10px;
}
.login-card input { width: 100%; padding: 9px 11px; font-size: 14px; }
.login-card .primary { margin-top: 20px; padding: 10px; font-size: 14px; }
.login-card .err {
  margin: 0 0 16px; padding: 9px 12px; border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--rej);
  color: var(--rej); font-size: 12.5px; font-family: var(--ui);
}
.login-foot {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
}

/* signed-in chip in the rail */
.whoami {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--ink-3);
}
.whoami b { color: var(--ink-2); font-weight: 600; }
.whoami a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); }
.whoami a:hover { color: var(--rej); border-color: var(--rej); }

/* ---------- live stream ---------- */
.live-wrap { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.live {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); user-select: none;
}
.live input { appearance: none; width: 0; height: 0; margin: 0; position: absolute; }
.live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3);
  box-shadow: 0 0 0 0 var(--sel);
}
.live[data-state="live"]  { color: var(--sel); }
.live[data-state="live"]  .dot { background: var(--sel); animation: pulse 2.4s ease-out infinite; }
.live[data-state="paused"] .dot { background: var(--bronze); }
.live[data-state="paused"] { color: var(--bronze); }
.live[data-state="down"]  .dot { background: var(--rej); }
.live[data-state="down"]  { color: var(--rej); }
.live input:focus-visible + .dot { outline: 2px solid var(--verdigris); outline-offset: 2px; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sel) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .live .dot { animation: none; } }

.fresh {
  background: var(--verdigris); border-color: var(--verdigris-d);
  color: var(--primary-fg); font-weight: 600; font-size: 11.5px;
  padding: 5px 10px; letter-spacing: .02em;
}
.fresh:hover { background: var(--verdigris-d); }

/* newest-window chip on the Field view */
.pulse-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3); margin: 0 0 4px;
}
.pulse-line b { font-family: var(--mono); color: var(--ink-2); font-weight: 600; }

/* ---------- miner x parameter heat matrix ---------- */
table.heat td.cell { position: relative; padding-right: 26px; }
table.heat td.cell i {
  position: absolute; inset: 2px 1px; border-radius: 2px; z-index: 0;
}
table.heat td.cell span { position: relative; z-index: 1; }
table.heat td.cell u {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  z-index: 1; text-decoration: none; font-size: 9.5px; color: var(--ink-3);
}
.sw.hi { background: var(--verdigris); }
.sw.lo { background: var(--bronze); }

/* one miner's parameter profile against the field */
.prof-row {
  display: grid; grid-template-columns: 132px 1fr 210px; gap: 14px;
  align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft);
}
.prof-row:last-child { border-bottom: 0; }
.prof-name { font: 12.5px/1.3 var(--mono); color: var(--ink-2); }
.prof-track { position: relative; height: 22px; }
.prof-track .field-band {
  position: absolute; top: 9px; height: 4px; background: var(--grid); border-radius: 2px;
}
.prof-track .field-med { position: absolute; top: 5px; width: 1px; height: 12px; background: var(--ink-3); }
.prof-track .mine-band {
  position: absolute; top: 6px; height: 10px; background: var(--verdigris);
  opacity: .3; border-radius: 2px;
}
.prof-track .mine-med { position: absolute; top: 2px; width: 2px; height: 18px; background: var(--verdigris); }
.prof-nums {
  font: 11.5px/1.3 var(--mono); color: var(--ink-3); text-align: right;
  display: flex; gap: 9px; justify-content: flex-end;
}
.prof-nums b { color: var(--ink-2); font-weight: 600; }
.prof-nums .z-out { color: var(--bronze); }
.prof-nums .z-far { color: var(--rej); }

@media (max-width: 900px) {
  .prof-row { grid-template-columns: 110px 1fr; }
  .prof-nums { display: none; }
}
.pill.cand { color: var(--ink-3); }


/* ---- "this is me" ------------------------------------------------------
   The window table lists ~64 candidates with truncated hotkeys, so without a
   colour cue finding your own rows means reading every line.
   Specificity note: the existing rule is `table.grid tr.watched td` (0,2,3).
   A bare `tr.watched td` (0,1,2) loses the cascade and the highlight silently
   does nothing, so these carry the same `table.grid` prefix. Uses the theme's
   existing --watch hue rather than a new colour, so it stays distinct from the
   seat/rejected pills in both themes. */
.me { color: var(--watch); font-weight: 700; }
table.grid tr.watched td {
  background: color-mix(in srgb, var(--watch) 15%, transparent);
}
table.grid tr.watched td:first-child {
  box-shadow: inset 3px 0 0 var(--watch);
}
.me-summary {
  border-left: 3px solid var(--watch);
  background: color-mix(in srgb, var(--watch) 10%, transparent);
  padding: 8px 12px;
}

/* Two watched hotkeys must not read as one generic "watched". Slot 0 keeps the
   existing --watch hue; slot 1 gets a clearly separate one. Both are distinct
   from --sel/--rej so a marked row is never confused with a seat or a reject. */
.me0, tr.watched.w0 td:first-child { --mine: var(--watch); }
.me1, tr.watched.w1 td:first-child { --mine: var(--sel); }
.me0 { color: var(--watch); }
.me1 { color: var(--sel); }
table.grid tr.watched.w0 td { background: color-mix(in srgb, var(--watch) 15%, transparent); }
table.grid tr.watched.w1 td { background: color-mix(in srgb, var(--sel) 15%, transparent); }
table.grid tr.watched.w0 td:first-child { box-shadow: inset 3px 0 0 var(--watch); }
table.grid tr.watched.w1 td:first-child { box-shadow: inset 3px 0 0 var(--sel); }
.me-summary.ms0 { border-left-color: var(--watch); background: color-mix(in srgb, var(--watch) 10%, transparent); }
.me-summary.ms1 { border-left-color: var(--sel);   background: color-mix(in srgb, var(--sel) 10%, transparent); }
button.mark { margin-left: auto; }
button.mark.on { border-color: currentColor; }

/* windows tab: sustained seat rate, so a row reads against the miner's norm */
.sw-hi  { color: var(--verdigris); font-weight: 600; }
.sw-mid { color: var(--ink-2); }
.sw-lo  { color: var(--ink-3); }

/* Windows tab: the summary lines under the heading are dense DATA (candidate
   counts, prompt range, every rank we placed), not prose. The 72ch measure on
   .note is a readability limit for paragraphs and wraps these into a narrow
   column with half the row empty, so let them use the full width here only. */


/* ---------- funds tab ---------- */
/* Data marks come from a VALIDATED categorical pair, not from Vitrine's museum
   palette: verdigris+bronze failed the chroma floor (both read gray) and the
   normal-vision floor (dE 14.3 < 15). Chrome stays Vitrine's; only the marks
   change. Both modes pass all six checks against Vitrine's own surfaces. */
.viz-root {
  --c-earned: #2a78d6;
  --c-cost:   #eb6834;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .viz-root {
    --c-earned: #3987e5;
    --c-cost:   #d95926;
  }
}
:root[data-theme="dark"] .viz-root {
  --c-earned: #3987e5;
  --c-cost:   #d95926;
}

.f-hero {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.6rem;
  padding: 1rem 1.1rem; margin: .5rem 0 1.1rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.f-hero-n { font: 600 2.5rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.f-hero-n.pos { color: var(--verdigris); }
.f-hero-n.neg { color: #b2483c; }
.f-hero-l { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.f-hero-sub { display: flex; gap: 1.4rem; margin-left: auto; }
.f-hero-sub div { text-align: right; }
.f-hero-sub b { display: block; font: 600 1.05rem/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }

.f-card {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: .9rem 1.1rem 1rem; margin-bottom: 1.1rem;
}
.f-card h3 { margin: 0 0 .15rem; font-size: .95rem; }
.f-card .sub { margin: 0 0 .7rem; font-size: .72rem; color: var(--ink-3); }

.f-legend { display: flex; gap: 1rem; align-items: center; font-size: .75rem; color: var(--ink-2); margin-bottom: .5rem; }
.f-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-right: .35rem; vertical-align: middle; }

.f-chart { position: relative; width: 100%; }
.f-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.f-grid { stroke: var(--line-soft); stroke-width: 1; }
.f-axis { fill: var(--ink-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.f-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.f-area { opacity: .10; }
.f-endlab { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
            fill: var(--ink); }   /* ink, never the series colour */
.f-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.f-dot { r: 4; stroke: var(--surface); stroke-width: 2; opacity: 0; }
.f-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -115%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  padding: .4rem .55rem; font-size: .72rem; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0,0,0,.16); z-index: 5;
}
.f-tip b { font-variant-numeric: tabular-nums; }
.f-tip .k { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }

/* per-miner bars: 2px surface gap between adjacent fills, 4px rounded data end */
.f-bars { display: grid; gap: .55rem; }
.f-bar-row { display: grid; grid-template-columns: 74px minmax(0,1fr) 92px; align-items: center; gap: .6rem; }
.f-bar-lab { font-size: .8rem; color: var(--ink-2); }
.f-bar-track { display: grid; gap: 2px; }
.f-bar { height: 13px; border-radius: 0 4px 4px 0; min-width: 2px; }
.f-bar-val { font: 600 .78rem var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.stat-v.pos, b.pos { color: var(--verdigris); }
.stat-v.neg, b.neg { color: #b2483c; }

/* .pad is a grid with a 20px gap; the cards carry their own bottom margin too,
   which doubled the space between them. Let the grid own the rhythm. */
.pad.viz-root { gap: 0; }
.viz-root .f-card, .viz-root .f-hero { margin-bottom: 1rem; }


/* Live pulses patch values in place, so give the marks that DO change a short
   transition. Movement reads as an update; an instant swap reads as a reload. */
.f-bar { transition: width .55s cubic-bezier(.22,.61,.36,1); }
.f-line, .f-area { transition: d .55s cubic-bezier(.22,.61,.36,1); }
.f-endlab { transition: y .55s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .f-bar, .f-line, .f-area, .f-endlab { transition: none; }
}

/* Measured-vs-estimated: the reader must be able to tell which numbers are
   protocol-exact and which passed through an unverified constant. */
.f-measured {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.3rem;
  padding: .55rem .9rem; margin: 0 0 1rem;
  border: 1px dashed var(--line); border-radius: 8px;
  font-size: .78rem; color: var(--ink-2);
}
.f-measured b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.f-meas-tag {
  font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--verdigris); border: 1px solid var(--verdigris);
  border-radius: 4px; padding: .05rem .35rem;
}
.f-meas-note { margin-left: auto; color: var(--ink-3); font-size: .72rem; }
.f-hero-l.est { font-style: italic; }

/* ---------- funds: per-day table ---------- */
/* Today is still accruing; dim it so it is never read as a full day. */
.tbl.daily tr.partial { opacity: .55; }
.d-tz {
  font-size: .62rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px;
  padding: .08rem .3rem; margin-left: .4rem; vertical-align: middle;
}
.d-stats {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin: 0 0 .85rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--line-soft);
}
.d-stats > div { display: flex; flex-direction: column; gap: .1rem; }
.d-stats b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.d-stats span { font-size: .66rem; color: var(--ink-3); letter-spacing: .02em; }
.tbl.daily td { font-variant-numeric: tabular-nums; }
.tbl.daily .d-day { line-height: 1.15; }
.tbl.daily .d-day b { display: block; font-size: .8rem; }
.tbl.daily .d-sub { font-size: .62rem; color: var(--ink-3); }
.tbl.daily .d-dim { color: var(--ink-3); }
.tbl.daily .d-cost { color: var(--ink-2); }
.tbl.daily .d-earn { color: var(--ink-1); }
/* Inline magnitude bar: the shape of the run reads faster than the digits. */
.tbl.daily .d-bar { width: 84px; padding-left: .5rem; padding-right: .5rem; }
.tbl.daily .d-bar i {
  display: block; height: 5px; border-radius: 2px; min-width: 2px;
  background: var(--verdigris); opacity: .55;
}
.tbl.daily .d-bar i.neg { background: var(--oxide); }
/* TAO profit sits beside the dollar profit and carries the same sign colour,
   so the two readings of the same day are visually paired. */
.tbl.daily .d-tao { font-size: .78rem; opacity: .85; }

/* The per-period card used to break out of the page column to fit eight
   columns. It no longer needs to: TAO now sits INLINE beside each dollar figure
   instead of adding columns, and the numeric columns are content-sized. Keeping
   the breakout made this one card visibly wider than every other section, so it
   now shares the same column as the rest of the tab. */
.tbl.daily { width: 100%; }
.tbl.daily th, .tbl.daily td { white-space: nowrap; }

/* ---------- checkpoint cycle flow bar ---------- */
/* One cell per window of the ~16-window rollover cycle. Colour encodes the
   measured BLANK rate at that position, because blanks are what the bar exists
   to explain; the current window carries a marker. */
.cyc-wrap { margin: 0 0 .8rem; }
.cyc-head { font-size: .74rem; color: var(--ink-2); margin-bottom: .3rem; }
.cyc-head b { color: var(--ink); }
.cyc-zone { color: var(--ink-3); }
.cyc-bar { display: flex; gap: 2px; align-items: stretch; }
.cyc-bar i {
  flex: 1 1 0; height: 16px; border-radius: 2px; font-style: normal;
  font-size: .58rem; line-height: 16px; text-align: center; color: var(--surface);
}
.cyc-bar i.cyc-ok  { background: var(--verdigris); }
.cyc-bar i.cyc-mid { background: var(--ink-3); }
.cyc-bar i.cyc-bad { background: var(--oxide); }
.cyc-bar i.cyc-na  { background: var(--line); }
.cyc-bar i.cyc-now { outline: 2px solid var(--ink); outline-offset: 1px; }
.cyc-foot { font-size: .62rem; color: var(--ink-3); margin-top: .25rem; }

/* ---- funds owner tabs (Mine / Friend / Total) ---------------------------
   Each owner is a separate vast account and coldkey, so cost and reward only
   compose within one owner or summed across all. The chooser makes which
   basis you are looking at explicit rather than implied. */
.ownertabs { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; }
.otab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  /* theme tokens, not --panel: --panel was never defined, so the fallback
     #16181d painted near-black buttons with dark ink in the light theme */
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  font: inherit; text-align: left; transition: background .12s, border-color .12s;
}
.otab:hover { border-color: var(--ink-3); }
.otab.on { border-color: var(--sel); background: var(--surface-2); }
.otab.on { background: color-mix(in srgb, var(--sel) 14%, var(--surface)); }
.otab-l { font-weight: 600; font-size: 13px; letter-spacing: .01em; }
.otab-s { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.otab:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }

/* per-uid row sits under the owner row, visually subordinate */
.ownertabs.sub { margin-top: -10px; margin-bottom: 18px; }
.otab-sub { padding: 5px 11px; opacity: .82; }
.otab-sub .otab-l { font-size: 12px; font-weight: 500; }
.otab-sub .otab-s { font-size: 10px; }
.otab-sub.on { opacity: 1; }

/* ---- per-period card: Day | Week switch, dual USD/TAO cells --------------- */
.phead-row { display: flex; align-items: baseline; justify-content: space-between;
             gap: 16px; flex-wrap: wrap; }
.periodsw { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
            overflow: hidden; flex: 0 0 auto; }
.psw { padding: .3rem .85rem; font: inherit; font-size: .78rem; cursor: pointer;
       background: transparent; color: var(--ink-2); border: 0; }
.psw + .psw { border-left: 1px solid var(--line); }
.psw:hover { background: color-mix(in srgb, currentColor 8%, transparent); color: var(--ink-1); }
.psw.on { background: color-mix(in srgb, var(--verdigris) 22%, transparent);
          color: var(--ink-1); font-weight: 600; }
.psw:focus-visible { outline: 2px solid var(--verdigris); outline-offset: -2px; }

/* TAO sits INLINE beside the dollar figure -- same cell, same line, so the two
   readings of one number are read together rather than as two stacked rows. */
.tbl.duo .d-t {
  font-size: .68rem; opacity: .55; margin-left: .38rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap;
}
.tbl.duo .d-u { font-variant-numeric: tabular-nums; }
.d-stats .d-t { font-size: .72rem; opacity: .5; margin-left: .3rem; font-weight: 500; }

/* WIDTH: size every numeric column to its content and let the decorative bar
   absorb the slack. Without this the table stretches to 100% and the headers
   drift far from the digits they label (8 columns over ~1600px). */
.tbl.daily { width: 100%; table-layout: auto; }
.tbl.daily th, .tbl.daily td { white-space: nowrap; }
.tbl.daily th:not(:first-child):not(.d-bar),
.tbl.daily td:not(:first-child):not(.d-bar) { width: 1%; }
.tbl.daily .d-day { width: 1%; padding-right: 1.6rem; }
.tbl.daily th.d-bar, .tbl.daily td.d-bar { width: auto; min-width: 84px; }
/* Numbers right-align, and so do the headers over them, so each label sits
   directly on its own column. `.r` was on the cells already but NEVER had a
   text-align rule anywhere in this stylesheet -- the class was inert, the table
   was uniformly left-aligned, and adding a th-only rule split the two apart
   (heads right, cells left). Both sides must be declared together. */
.tbl.daily th.r, .tbl.daily td.r { text-align: right; }
.tbl.daily th { padding-bottom: .35rem; }

/* Reconciliation against vast's own page: vast shows only SETTLED charges, we
   add unbilled usage on top, so the two headline numbers legitimately differ.
   Stating the split inline stops that looking like an error. */
.f-recon { display: block; font-size: .62rem; opacity: .55; margin-top: .1rem;
           font-variant-numeric: tabular-nums; }

/* ---- live window timeline (Windows tab) ----------------------------------- */
.tl-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.tl-head b { color: var(--ink); }
.tl-track { padding: 22px 0 26px; }
.tl-bar { position: relative; height: 12px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line); }
.tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--sel) 55%, var(--surface)); }
.tl-fill.tl-done { background: color-mix(in srgb, var(--ink-3) 35%, var(--surface)); }
.tl-mark { position: absolute; top: -6px; bottom: -6px; width: 2px;
  transform: translateX(-1px); background: var(--ink-3); }
.tl-mark span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .7rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.tl-mark.tl-now { background: var(--ink); width: 3px; }
.tl-mark.tl-now span { top: -20px; color: var(--ink); font-weight: 600; }
.tl-mark.tl-cut { background: var(--run); }
.tl-mark.tl-back { background: var(--rej); }
.tl-mark.tl-next { background: var(--sel); }
.tl-mark.tl-typ { background: transparent; border-left: 2px dashed var(--ink-3); width: 0; }
.tl-envs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; }
.tl-env { display: grid; gap: 4px; font-size: .78rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.tl-env b { color: var(--ink); font-size: .8rem; }
.tl-gauge { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tl-gauge i { display: block; height: 100%; background: var(--sel); }
.tl-foot { font-size: .72rem; color: var(--ink-3); margin: 10px 0 0; }