/* Satstats terminal theme, shared by the dashboard and the vault deep-dive pages.
   Colour tokens (--bg, --surface, --accent, --epoch, ...) come from theme.css, which
   drives Light / Dark / High-Contrast. Only the local aliases and layout live here. */

/* Local palette names map onto the shared theme tokens. Only NON-conflicting
   names are aliased; --bg, --faint, --strike, --epoch, --onebtc, --sats are
   owned by theme.css and used directly so the Dark / High-Contrast overrides
   (higher specificity) keep working. */
:root{
  --bg-2: var(--surface-2);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --line: var(--border);
  --line-2: var(--border-strong);
  --ink: var(--text);
  --dim: var(--muted);
  --amber: var(--accent);
  --amber-dim: var(--accent);
  --green: var(--pos);
  --red: var(--neg);
  --blue: var(--epoch);
  --violet: var(--onebtc);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  letter-spacing:.2px;
}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--amber);color:var(--accent-ink)}
::-webkit-scrollbar{height:9px;width:9px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--amber-dim)}

/* ---------- top status bar ---------- */
.status{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  padding:8px 14px;background:var(--surface);
  border-bottom:var(--bw) solid var(--line-2);
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .mark{color:var(--amber);font-weight:800;letter-spacing:2px;font-size:15px}
.brand .sub{color:var(--dim);font-size:10px;letter-spacing:2px;text-transform:uppercase;display:none}
@media(min-width:720px){.brand .sub{display:inline}}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:.15;box-shadow:none}}
.status .spacer{flex:1 1 auto}
.stat{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.stat .k{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px}
.stat .v{font-size:13px;font-weight:700;color:var(--ink)}
.stat .v.amber{color:var(--amber)}
.stat .v.green{color:var(--green)}
.status .sep{width:1px;height:26px;background:var(--line-2);flex:0 0 auto}
.status .hide-sm{display:none}
@media(min-width:900px){.status .hide-sm{display:flex}}
.status .mount{display:flex;align-items:center}
.status .back{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  border:var(--bw) solid var(--line-2);padding:4px 9px;color:var(--dim);white-space:nowrap
}
.status .back:hover{color:var(--amber);border-color:var(--amber-dim);text-decoration:none}

/* tip jar: quiet control in the status bar, opens a small popover */
.tip{position:relative;flex:0 0 auto}
.tip>summary{
  list-style:none;cursor:pointer;user-select:none;white-space:nowrap;
  font-size:11px;color:var(--dim);border:var(--bw) solid var(--line-2);padding:4px 8px;
}
.tip>summary::-webkit-details-marker{display:none}
.tip>summary:hover,.tip[open]>summary{color:var(--amber);border-color:var(--amber-dim)}
.tip-pop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  width:min(300px,calc(100vw - 28px));
  background:var(--panel);border:var(--bw) solid var(--line-2);
  padding:12px;box-shadow:0 14px 34px rgb(0 0 0 / .35);
}
.tip-pop .t{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--amber)}
.tip-pop .s{font-size:11px;color:var(--dim);margin-top:4px;line-height:1.5}
.tip-addr{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
.tip-addr code{
  flex-basis:100%;font-family:inherit;font-size:11px;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line);padding:6px 8px;overflow-wrap:anywhere;
}
.tip-addr button,.tip-addr a{
  font:700 10px inherit;font-family:inherit;letter-spacing:1px;text-transform:uppercase;
  padding:5px 10px;cursor:pointer;white-space:nowrap;
  border:var(--bw) solid var(--amber);background:var(--amber);color:var(--accent-ink);
}
.tip-addr a{background:transparent;color:var(--amber)}
.tip-addr button:hover,.tip-addr a:hover{filter:brightness(1.08);text-decoration:none}
.tip-addr button.ok{background:var(--green);border-color:var(--green)}

/* ---- "Trigger the Strike" (for fun) ---- */
.ts-btn{
  position:relative;overflow:hidden;width:100%;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 16px;font:800 13px inherit;font-family:inherit;
  letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;
  color:var(--accent-ink);background:var(--strike);border:var(--bw) solid var(--strike);
  transition:transform .05s ease,filter .15s ease;
}
.ts-btn:hover{filter:brightness(1.06)}
.ts-btn:active{transform:translateY(1px) scale(.99)}
.ts-btn .ts-bolt{font-size:15px;line-height:1}
.ts-btn.flash{animation:tsflash .32s ease-out}
@keyframes tsflash{0%{filter:brightness(1.7)}100%{filter:brightness(1)}}
.ts-spark{
  position:absolute;top:50%;font-size:15px;pointer-events:none;
  animation:tsspark .65s ease-out forwards;
}
@keyframes tsspark{
  0%{opacity:1;transform:translateY(0) scale(.7)}
  100%{opacity:0;transform:translateY(-30px) scale(1.4)}
}
.ts-fizz{text-align:center;margin-top:7px;font-size:11px;color:var(--dim);font-style:italic;letter-spacing:.5px;min-height:14px}
.ts-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:12px}
.ts-col-h{
  font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--dim);
  border-bottom:var(--bw) solid var(--line-2);padding-bottom:6px;margin-bottom:2px;
}
.ts-you .ts-col-h{color:var(--strike)}
.ts-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:6px 0;border-bottom:1px dotted var(--line);font-size:11.5px;color:var(--dim);
}
.ts-row:last-child{border-bottom:0}
.ts-row b{color:var(--ink);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- Stats Lookup box ---- */
.sl-form{display:flex;gap:8px;flex-wrap:wrap}
.sl-form input{flex:1 1 200px;min-width:0}
.sl-go{border:var(--bw) solid var(--amber);background:var(--amber);color:var(--accent-ink);font:800 12px inherit;font-family:inherit;letter-spacing:1px;text-transform:uppercase;padding:0 16px;cursor:pointer;white-space:nowrap}
.sl-go:hover{filter:brightness(1.06)}
.sl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:11px}
.sl-recent{color:var(--dim);letter-spacing:1px;text-transform:uppercase;font-size:9px;margin-right:2px}
.sl-chip{border:var(--bw) solid var(--line-2);background:var(--panel-2);padding:4px 8px;color:var(--ink);font-variant-numeric:tabular-nums}
.sl-chip:hover{border-color:var(--amber-dim);color:var(--amber);text-decoration:none}

/* ---------- ticker ---------- */
.ticker{
  position:sticky;top:44px;z-index:49;
  background:var(--bg-2);border-bottom:var(--bw) solid var(--line);
  overflow:hidden;white-space:nowrap;padding:5px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.ticker .track{display:inline-block;white-space:nowrap;will-change:transform;animation:marq 44s linear infinite}
.ticker:hover .track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:7px;padding:0 20px;font-size:12px;border-right:1px solid var(--line)}
.tk b{color:var(--dim);font-weight:500;text-transform:uppercase;font-size:10px;letter-spacing:1px}
.tk .up{color:var(--green)}
.tk .down{color:var(--red)}
.tk .am{color:var(--amber)}

/* ---------- layout ---------- */
.wrap{max-width:1600px;margin:0 auto;padding:16px 14px 60px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
.col-12{grid-column:span 12}
.col-8{grid-column:span 12}
.col-6{grid-column:span 12}
.col-4{grid-column:span 12}
.col-3{grid-column:span 12}
@media(min-width:640px){
  .col-6{grid-column:span 6}
  .col-4{grid-column:span 6}
  .col-3{grid-column:span 6}
}
@media(min-width:1000px){
  .col-8{grid-column:span 8}
  .col-4{grid-column:span 4}
  .col-3{grid-column:span 3}
  .col-6{grid-column:span 6}
}

/* ---------- panel ---------- */
.panel{background:var(--panel);border:var(--bw) solid var(--line);display:flex;flex-direction:column;min-width:0;position:relative}
/* Reserve a clear strip at the bottom-right of every panel for the watermark /
   share button so neither ever sits on body text. */
.panel:not(.vcard)>.panel-bd{padding-bottom:22px}
/* satstats.app watermark — crisp mono text in the bottom-right corner. No
   background: it lives in the reserved strip above, so it never overlaps text.
   html2canvas rasterises this ::after as-is, so the export matches the page. */
.panel:not(.vcard)::after{
  content:"satstats.app";position:absolute;bottom:6px;right:11px;z-index:2;pointer-events:none;
  font-size:9px;letter-spacing:1px;font-weight:700;color:var(--accent);opacity:.55;
}
/* Per-panel share button. It lives in the SAME bottom-right corner as the
   watermark (never the header, which on many panels holds tabs / LIVE / tags).
   On hover the watermark hides and the button takes its place; during capture
   the button hides and the watermark shows, so exports always carry the mark. */
.panel-share{
  position:absolute;bottom:4px;right:8px;z-index:6;font-family:inherit;
  font-size:9.5px;letter-spacing:.5px;line-height:1;cursor:pointer;white-space:nowrap;
  border:var(--bw) solid var(--line-2);background:var(--surface);color:var(--dim);padding:3px 8px;
  opacity:0;transition:opacity .12s ease,color .12s ease;
}
.panel:hover>.panel-share{opacity:1}
.panel-share:hover{color:var(--amber);border-color:var(--amber-dim)}
.panel-share.busy{opacity:1;color:var(--amber);cursor:default}
/* hover (desktop): swap watermark -> button. capture wins, so the mark stays in exports. */
.panel:not(.capturing):hover::after{opacity:0}
.panel.capturing>.panel-share{display:none}
/* touch: no hover, so show the button (faint) in place of the on-page watermark;
   the exported image still carries the watermark via the .capturing rule above. */
@media(hover:none){
  .panel-share{opacity:.6}
  .panel:not(.capturing)::after{opacity:0}
}
.share-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999;pointer-events:none;
  background:var(--ink);color:var(--bg);padding:8px 16px;font-size:12px;font-weight:700;letter-spacing:.5px;
  border:var(--bw) solid var(--amber);opacity:0;transition:opacity .2s ease;
}
.share-toast.show{opacity:1}
.panel-hd{
  display:flex;align-items:center;gap:8px;padding:6px 28px 6px 10px;
  position:relative;overflow:hidden;
  background:var(--surface-2);
  border-bottom:var(--bw) solid var(--line-2);
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--amber);font-weight:700;
  white-space:nowrap;
}
.panel-hd .c{color:var(--faint);font-weight:400}
/* Pin the closing ─┐ corner to the right edge so it can never spill past the
   panel border on narrow screens; the tag/fill absorb the compression and clip
   cleanly behind it (padding-right above reserves its slot). */
.panel-hd .c:last-child{position:absolute;right:10px;top:0;bottom:0;display:flex;align-items:center;padding-left:5px;letter-spacing:0;background:var(--surface-2)}
.panel-hd .fill{flex:1 1 6px;min-width:0;height:0;border-top:1px dashed var(--line-2);margin:0 2px}
.panel-hd .tag{color:var(--dim);font-weight:400;letter-spacing:1px;text-transform:none;font-size:10px;min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}
.panel-hd .live{color:var(--green);font-size:9px;display:flex;align-items:center;gap:4px}
.panel-hd .live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 1.1s steps(1) infinite}
.panel-bd{padding:10px;min-width:0}

/* ---------- KPI strip ---------- */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.kpis{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.kpis{grid-template-columns:repeat(8,1fr)}}
.kpis.k4{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.kpis.k4{grid-template-columns:repeat(4,1fr)}}
.kpis.k3{grid-template-columns:1fr}
@media(min-width:700px){.kpis.k3{grid-template-columns:repeat(3,1fr)}}
.kpi{border:var(--bw) solid var(--line);background:var(--panel-2);padding:9px 10px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--faint)}
.kpi.accent::after{background:var(--amber)}
.kpi.good::after{background:var(--green)}
.kpi.bad::after{background:var(--red)}
.kpi .k{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-size:19px;font-weight:800;margin-top:3px;line-height:1.1;color:var(--ink)}
.kpi.accent .v{color:var(--amber)}
.kpi .v.g{color:var(--green)}
.kpi .v.r{color:var(--red)}
.kpi .f{font-size:10px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- THIS ROUND hero ---------- */
.hero-rail{display:flex;flex-direction:column;gap:10px;height:100%}
.hero-rail .rail-k{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}
.hero-rail .eta{font-size:38px;line-height:1;color:var(--ink)}
.hero-rail .vrows{margin-top:auto}
@media(min-width:1000px){.hero-rail .eta{font-size:46px}}

/* ---------- chart hover tooltip ---------- */
.hov-line{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3}
.hov-catch{cursor:crosshair}
.chart-tip{
  position:absolute;z-index:5;pointer-events:none;
  background:var(--panel);border:var(--bw) solid var(--line-2);
  padding:6px 8px;font-size:11px;white-space:nowrap;box-shadow:0 10px 24px rgb(0 0 0 / .3)
}
.chart-tip .x{color:var(--dim);font-size:10px;letter-spacing:1px;margin-bottom:4px}
.chart-tip .r{display:flex;align-items:center;gap:7px}
.chart-tip .r i{width:8px;height:8px;flex:0 0 auto}
.chart-tip .r span{color:var(--dim)}
.chart-tip .r b{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- tables ---------- */
.scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:100%}
thead th{
  text-align:left;color:var(--dim);font-weight:500;text-transform:uppercase;font-size:9.5px;letter-spacing:1px;
  padding:6px 10px;border-bottom:var(--bw) solid var(--line-2);white-space:nowrap;position:sticky;top:0;background:var(--panel)
}
tbody td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.key{color:var(--blue)}
.rk{color:var(--dim)}
.rk.top{color:var(--amber);font-weight:700}

/* ---------- vault rows ---------- */
.vrow{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.vrow:last-child{border-bottom:none}
.vrow span{color:var(--dim)}
.vrow b{font-weight:700;font-variant-numeric:tabular-nums}
.vbig{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
/* vault cards: equal height across the row, deep-dive link pinned to the bottom */
.vcell{display:flex}
.vcard{flex:1;display:flex;flex-direction:column}
.vcard-bd{flex:1;display:flex;flex-direction:column}
.vcard-bd .vrows{margin-top:2px}
.vcard-bd .vlink{margin-top:auto}
.vlink{
  display:block;margin-top:10px;padding:6px 9px;text-align:center;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  border:var(--bw) solid currentColor;background:transparent;
}
.vlink:hover{text-decoration:none;background:var(--surface-2)}
.vname{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.vname i{width:9px;height:9px;flex:0 0 auto}
.prog{height:8px;background:var(--panel-2);border:var(--bw) solid var(--line-2);margin:8px 0;position:relative;overflow:hidden}
.prog>span{position:absolute;left:0;top:0;bottom:0;background:var(--onebtc)}
.prog-lab{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:-2px}

/* ---------- fee flow ---------- */
.barstack{display:flex;height:26px;border:var(--bw) solid var(--line-2);overflow:hidden;margin:4px 0 12px}
.barstack .seg{height:100%;position:relative}
.barstack .seg:not(:last-child){border-right:1px solid var(--surface)}
.fee-legend{display:grid;grid-template-columns:1fr;gap:2px}
.fee-legend .li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dotted var(--line);font-size:11px}
.fee-legend .li .lab{display:flex;align-items:center;gap:7px;color:var(--ink)}
.fee-legend .li i{width:9px;height:9px;flex:0 0 auto}
.fee-legend .li .desc{color:var(--dim);font-size:10px}
.fee-legend .li b{font-variant-numeric:tabular-nums}
.note{font-size:10.5px;color:var(--dim);line-height:1.5;margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px}
.note b{color:var(--ink)}
/* inline colour swatch, replaces decorative block glyphs in prose */
.sw{display:inline-block;width:8px;height:8px;vertical-align:baseline;margin-right:3px}

/* ---------- charts ---------- */
.chart{width:100%;display:block}
.chart text{fill:var(--dim);font-size:9px;font-family:inherit}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--dim);margin-top:6px}
.chart-legend .li{display:flex;align-items:center;gap:6px}
.chart-legend .li i{width:14px;height:2px;display:inline-block}

/* fairness bars */
.fair-wrap{position:relative}
.verdict{display:inline-flex;align-items:center;gap:8px;font-size:11px;margin-top:8px;padding:3px 8px;border:var(--bw) solid var(--line-2)}
/* solid pos/neg borders — html2canvas (used by panel share) can't parse the
   color(srgb ...) that a color-mix() computes to, so avoid it on captured nodes. */
.verdict.ok{color:var(--green);border-color:var(--pos)}
.verdict.warn{color:var(--red);border-color:var(--neg)}

/* ---------- tile heatmap ---------- */
/* 21 tiles stay 7 across at every width: it is the board's real shape and it
   divides evenly (3 rows), where 5 columns strands a single tile on its own. */
.tiles{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
@media(max-width:480px){
  .tiles{gap:3px}
  .tile .amt{font-size:8.5px}
  .tile .n{font-size:7px;top:1px;left:2px}
}
/* Wide tiles: square ones ran ~118px tall at desktop width and swamped the
   hero. On phones the columns are narrow enough that square is right again. */
.tile{
  aspect-ratio:1.9/1;border:var(--bw) solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;position:relative;overflow:hidden;color:var(--text);font-weight:700;
}
@media(max-width:700px){.tile{aspect-ratio:1/1}}
.tile .n{position:absolute;top:2px;left:3px;font-size:8px;opacity:.7;font-weight:500}
.tile .amt{font-variant-numeric:tabular-nums;font-size:10px}
/* Call out the two extremes so the ends of the ramp are unmistakable. */
.tile.hot-edge{box-shadow:inset 0 0 0 1px var(--amber);border-width:2px}
.tile.cold-edge{box-shadow:inset 0 0 0 1px var(--green);border-width:2px}
.tiles-legend{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:9.5px;color:var(--dim);white-space:nowrap}
/* gradient is set inline from the same ramp the tiles use, so they cannot drift */
.tiles-legend .ramp{flex:1;height:7px;min-width:60px;border:var(--bw) solid var(--line-2)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:0;margin-left:auto}
.tabs button{
  font-family:inherit;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  background:transparent;border:var(--bw) solid var(--line-2);color:var(--dim);padding:3px 9px;cursor:pointer;border-right:none
}
.tabs button:last-child{border-right:var(--bw) solid var(--line-2)}
.tabs button.active{color:var(--accent-ink);background:var(--amber);border-color:var(--amber);font-weight:700}
.tabs button:hover:not(.active){color:var(--amber)}

/* ---------- forms (calculators) ---------- */
.field{display:block}
.field label{display:block;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
input[type=number],input[type=text]{
  width:100%;font-family:inherit;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--panel-2);border:var(--bw) solid var(--line-2);color:var(--ink);padding:8px 10px;
}
input[type=number]:focus,input[type=text]:focus{outline:none;border-color:var(--amber)}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.presets button{
  font-family:inherit;font-size:10px;letter-spacing:1px;font-weight:700;cursor:pointer;
  background:var(--panel-2);border:var(--bw) solid var(--line-2);color:var(--dim);padding:4px 9px
}
.presets button:hover{color:var(--amber);border-color:var(--amber-dim)}

/* ---------- vault deep-dive pages ---------- */
.hero-big{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--v,var(--amber))}
@media(min-width:700px){.hero-big{font-size:44px}}
.hero-sub{font-size:11px;color:var(--dim);margin-top:4px}
.legs{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
.legs .lk{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)}
.legs .lv{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.eta{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.better{color:var(--green);font-weight:700}
.worse{color:var(--red);font-weight:700}

/* fact grid: replaces prose blocks with scannable label/value pairs */
.facts{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:700px){.facts{grid-template-columns:1fr 1fr}}
.fact{border:var(--bw) solid var(--line);background:var(--panel-2);padding:9px 11px}
.fact .fk{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:var(--amber);font-weight:700}
.fact .fv{font-size:11.5px;color:var(--dim);line-height:1.55;margin-top:3px}
.fact .fv b{color:var(--ink)}

/* ---------- loader ---------- */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:14px;color:var(--dim)}
.loader .big{color:var(--amber);font-size:16px;letter-spacing:4px}
.cursor{display:inline-block;width:9px;height:16px;background:var(--amber);animation:blink 1s steps(1) infinite;vertical-align:middle}
.boot{font-size:11px;color:var(--faint);white-space:pre;text-align:left}

/* ---------- footer ---------- */
.footer{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--surface);border-top:var(--bw) solid var(--line-2);
  padding:5px 12px;font-size:10px;color:var(--dim)
}
.footer .kb{display:flex;align-items:center;gap:5px}
.footer kbd{background:var(--panel-2);border:1px solid var(--line-2);border-bottom-width:2px;padding:1px 6px;color:var(--ink);font-family:inherit;font-size:10px}
.footer .spacer{flex:1}
.muted{color:var(--faint)}
.hidden{display:none!important}

/* ---------- mobile ---------- */
@media(max-width:700px){
  body{font-size:12.5px}
  .wrap{padding:12px 10px 58px}
  .grid{gap:10px}

  /* Wrap the sticky bar on phones instead of scrolling it sideways: a scrolled
     bar hid the theme toggle and tip jar off the right edge. Items flow left to
     right and wrap onto as many rows as needed, so every control stays visible
     in the fixed header. The spacer and sub are dropped to pack tighter. */
  .status{gap:8px 10px;padding:7px 10px;flex-wrap:wrap;overflow-x:visible}
  .status>*{flex:0 0 auto}
  .status .spacer{display:none}
  .status .sep{display:none}
  .status .sub{display:none}
  /* The tip popover is anchored to the TIP button's right edge; once the bar
     wraps, that button sits mid-row, so the 300px popover overflowed off the
     LEFT of the screen. Pin it to the viewport instead (full width, inset 8px);
     top:auto keeps it dropping just below the button. */
  .tip-pop{position:fixed;left:8px;right:8px;top:auto;width:auto;max-height:75vh;overflow:auto}
  .brand .mark{font-size:13px;letter-spacing:1.4px}
  .ticker{position:static}

  .panel-hd{font-size:9.5px;letter-spacing:1.4px;padding:6px 24px 6px 8px}
  .panel-hd .c:last-child{right:8px}
  /* Headers with interactive tabs are the most crowded; on a phone the decorative
     closing corner steals room and overlaps the last tab. Drop it there (keep the
     opening corner) and reclaim its gutter so the tabs — and the BTC price — fit. */
  .panel-hd:has(.tabs){padding-right:8px}
  .panel-hd:has(.tabs) > .c:last-child{display:none}
  /* On a phone the BTC header shows the live price full; drop the secondary
     change-% (still shown on desktop, and the exact price is in the note below). */
  .panel-hd .tag .chg{display:none}
  .panel-bd{padding:9px}
  .kpi .v{font-size:17px}
  .kpi .k,.kpi .f{white-space:normal}
  .hero-big{font-size:30px}
  .eta{font-size:22px}
  .vbig{font-size:20px}

  /* Give thumbs a real target and stop iOS zooming on focus (needs >=16px). */
  input[type=number],input[type=text]{font-size:16px;padding:10px}
  .presets button{padding:7px 11px;font-size:11px}
  .tabs button{padding:6px 8px;font-size:10px}
  .vlink{padding:9px}

  .footer{padding:5px 10px;font-size:9.5px}
  .footer .kb{display:none}
  .tk{padding:0 14px}
}
@media(max-width:420px){
  .kpis,.kpis.k4{grid-template-columns:1fr}
  .legs{gap:12px}
  .wrap{padding:10px 8px 58px}
}