/* THE MONEY BIN, the Desk's dashboard skin.
   Everything is driven by the variables in :root. To re-theme the whole desk,
   edit the palette below; the components inherit it. No inline styles live in
   the templates, so this file is the single home for the look. Redesigned to the
   Money Bin design system (D-028): two self-hosted faces, a riveted bin, brass
   nameplates and a vault handle. The base palette is preserved to the hex. */

/* Two faces, self-hosted so the strict CSP stays intact and the desk reads the
   same on any machine. Anton is the heavy condensed counting and shouting face;
   IBM Plex Mono carries the body and every figure with true tabular numbers. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/plexmono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/plexmono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/plexmono-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/plexmono-700.woff2') format('woff2'); }

:root {
  /* base palette (preserved to the hex from the original skin) */
  --bin-gold: #f4b915;          /* the hoard, primary brand gold */
  --bin-gold-bright: #ffd24a;   /* coins, hover, highlights */
  --bin-gold-deep: #c8860d;     /* gold edges, brass, borders on gold cards */
  --bin-teal: #1f7a6e;          /* the bin body */
  --bin-teal-dark: #124d45;     /* the bin shadow and stroke */
  --bin-teal-dome: #26867a;     /* the bin dome highlight */
  --bin-red: #d6453f;           /* alarm, the kill switch, the drawdown band */
  --vault-bg: #14100a;          /* the page, deepest vault dark */
  --vault-panel: #1c160c;       /* stat tiles, buttons */
  --vault-ledger: #1a1812;      /* parchment briefs surface */
  --vault-line: #3a2c12;        /* borders */
  --vault-line-soft: #2a2009;   /* table rules */
  --parchment: #efe3c6;         /* primary text */
  --parchment-dim: #b6a877;     /* labels */
  --parchment-faint: #9a8c62;   /* hints */
  --money-green: #7bdca0;       /* gains, secure */
  --loss-red: #e08a86;          /* losses */
  /* extra vault darks for tinted surfaces */
  --gold-card-bg: #1b1408;      /* the stake card and vault door interior */
  --secure-bg: #13251a;
  --secure-line: #1f5132;
  --breached-bg: #2a1414;
  --breached-line: #5a2020;
  --button-hover: #261d10;
  --pass-bg: #2a1410;
  --pass-hover: #3a1a1a;

  /* semantic aliases the components read */
  --bg-page: var(--vault-bg);
  --surface-card: var(--vault-panel);
  --surface-ledger: var(--vault-ledger);
  --surface-treasure: var(--gold-card-bg);
  --text-body: var(--parchment);
  --text-label: var(--parchment-dim);
  --text-hint: var(--parchment-faint);
  --text-on-gold: #3a2a05;
  --border-line: var(--vault-line);
  --border-rule: var(--vault-line-soft);
  --border-treasure: var(--bin-gold-deep);
  --accent: var(--bin-gold);
  --accent-bright: var(--bin-gold-bright);
  --gain: var(--money-green);
  --loss: var(--loss-red);
  --alarm: var(--bin-red);

  /* type: the webfonts first, the original system stacks as fallback */
  --font-meme: 'Anton', Impact, "Arial Black", "Haettenschweiler", "Franklin Gothic Bold", sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-base: 14px;
  --leading-body: 1.55;
  --leading-tight: 1.2;
  --track-meme: 1px;
  --track-meme-tight: 0.5px;

  /* shape and space */
  --radius-sm: 3px;     /* chips, tags, inline marks */
  --radius: 8px;        /* tiles, buttons, panels */
  --radius-lg: 12px;    /* treasure cards, the vault door, the login */
  --bw-cornice: 3px;
  --maxw: 880px;        /* the reading column */
  --maxw-app: 1040px;   /* the desk with its sidebar */
  /* the only shadows on the desk: stamped, tight, never floaty */
  --shadow-stamp: inset 0 1px 0 rgba(255, 210, 74, 0.06),
                  inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --shadow-coin: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.meme { font-family: var(--font-meme); }

* { box-sizing: border-box; }

body {
  background: var(--bg-page);
  color: var(--text-body);
  font: var(--text-base) / var(--leading-body) var(--font-data);
  margin: 0;
  padding: 0 0 3rem;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(244, 185, 21, 0.28); color: var(--parchment); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* header cornice ---------------------------------------------------------- */
.bin-header {
  background: var(--bin-gold); color: #3a2a05;
  padding: 0.7rem 1.5rem; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 3px solid var(--bin-gold-deep);
}
.bin-header .title {
  font-family: var(--font-meme); font-size: 1.5rem; letter-spacing: 1.2px;
  display: flex; align-items: center; gap: 0.7rem;
}
.bin-header .phase { font-size: 0.72rem; font-weight: bold; opacity: 0.82; }
.bin-sub { color: var(--parchment-dim); margin: 0.6rem 0 0; }

/* vault integrity strip --------------------------------------------------- */
.vault-strip {
  padding: 0.45rem 1.5rem; font-size: 0.78rem; display: flex;
  align-items: center; gap: 0.55rem; border-bottom: 1px solid;
}
.vault-strip.secure { background: #13251a; color: var(--money-green); border-color: #1f5132; }
.vault-strip.breached { background: #2a1414; color: #e6a3a3; border-color: #5a2020; }
.vault-strip .light { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

/* section headers --------------------------------------------------------- */
h2.section {
  font-family: var(--font-meme); font-size: 1.05rem; color: var(--bin-gold);
  letter-spacing: 1px; margin: 2rem 0 0.6rem;
}

/* the silo ---------------------------------------------------------------- */
.silo-row {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  margin: 1.5rem 0 0.5rem;
}
.silo svg { display: block; }
.silo .ground { fill: #241b08; }
.silo .body { fill: var(--bin-teal); stroke: var(--bin-teal-dark); stroke-width: 2.5; }
.silo .dome { fill: var(--bin-teal-dome); stroke: var(--bin-teal-dark); stroke-width: 2; }
.silo .rivet { fill: var(--bin-teal-dark); }
.silo .window-back { fill: #0f0c06; }
.silo .gold { fill: var(--bin-gold); }
.silo .band { fill: var(--bin-red); opacity: 0.92; }
.silo .coin { fill: var(--bin-gold-bright); }
.silo .coin.deep { fill: var(--bin-gold-deep); }
.silo .dollar { font-family: var(--font-meme); font-size: 40px; fill: var(--bin-gold-deep); opacity: 0.35; }
.silo .hwm { stroke: var(--parchment); stroke-width: 1.5; }
.silo .window-frame { fill: none; stroke: var(--bin-gold-deep); stroke-width: 2; }
.silo .dial-ring { fill: var(--bin-gold-deep); stroke: var(--bin-gold-bright); stroke-width: 1.5; }
.silo .dial-face { fill: #2a1c08; }
.silo .dial-tick { stroke: var(--bin-gold); stroke-width: 1; }
.silo .dial-pointer { stroke: var(--bin-gold-bright); stroke-width: 2; stroke-linecap: round; }
.silo .dial-hub { fill: var(--bin-gold-bright); }

/* the confirm flourish: a few coins drop into the bin, the figure flashes gold (D-028) */
.silo { position: relative; }
.coin-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.coin-fx-coin {
  position: absolute; top: -10px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bin-gold-bright);
  box-shadow: inset 0 0 0 2px var(--bin-gold-deep), var(--shadow-coin);
  animation: coindrop 1.1s cubic-bezier(0.5, 0.05, 0.7, 1) forwards;
}
@keyframes coindrop {
  0% { transform: translateY(-16px) scale(0.8); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(180px) scale(1); opacity: 0; }
}
.pot-figure { transition: color 300ms ease; }
.pot-figure.flash { color: var(--bin-gold-bright); }
@media (prefers-reduced-motion: reduce) { .coin-fx { display: none; } }

.silo-stats { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 0.7rem; }
.pot-label { font-size: 0.72rem; color: var(--parchment-dim); letter-spacing: 1px; }
.pot-figure { font-family: var(--font-meme); font-size: 2.3rem; color: var(--bin-gold); line-height: 1; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.stat {
  background: var(--vault-panel); border: 1px solid var(--vault-line);
  border-radius: var(--radius); padding: 0.5rem 0.65rem;
}
.stat .k { font-size: 0.72rem; color: var(--parchment-faint); letter-spacing: 0.5px; }
.stat .v { font-size: 1.15rem; font-variant-numeric: tabular-nums; line-height: 1.25; }
.stat .v.gold { color: var(--bin-gold); font-family: var(--font-meme); letter-spacing: 0.5px; }
.v.up { color: var(--money-green); }
.v.down { color: var(--loss-red); }

/* calibration: stated confidence against outcomes (D-023) */
.calib { margin: 0.6rem 0 0.4rem; }
.calib-head { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.8rem; margin-bottom: 0.3rem; }
.calib-who { font-family: var(--font-meme); color: var(--bin-gold); letter-spacing: 1px; }
.calib-grid { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.calib-grid th, .calib-grid td { border: 1px solid var(--vault-line); padding: 0.25rem 0.4rem;
  text-align: center; }
.calib-grid th { color: var(--parchment-faint); background: var(--vault-panel); }
.calib .up { color: var(--money-green); }
.calib .down { color: var(--loss-red); }

/* the crew page: personas as character cards with a brass nameplate (D-027, D-028) */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.7rem; }
.crew-card { background: var(--vault-panel); border: 1px solid var(--vault-line);
  border-radius: var(--radius); overflow: hidden; }
.crew-plate {
  position: relative; background: var(--bin-gold); color: var(--text-on-gold);
  padding: 0.5rem 0.9rem; display: flex; align-items: baseline; gap: 0.5rem;
  box-shadow: var(--shadow-stamp); border-bottom: 2px solid var(--bin-gold-deep);
}
.crew-name { font-family: var(--font-meme); font-size: 1.05rem; letter-spacing: 1px; color: var(--text-on-gold); }
.crew-title { font-size: 0.68rem; opacity: 0.78; color: var(--text-on-gold); }
.crew-rivet { position: absolute; top: 50%; transform: translateY(-50%); width: 5px; height: 5px;
  border-radius: 50%; background: var(--bin-gold-deep); }
.crew-rivet.left { left: 7px; }
.crew-rivet.right { right: 7px; }
.crew-body { padding: 0.6rem 0.9rem 0.8rem; }
.crew-purpose { font-size: 0.78rem; margin: 0 0 0.55rem; color: var(--parchment-dim); line-height: 1.5; }
.crew-agents { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.55rem; }
.crew-jobs { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.74rem;
  border-top: 1px solid var(--vault-line); padding-top: 0.5rem; }
.job { display: flex; align-items: center; gap: 0.4rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--parchment-faint); }
.job.ok .dot { background: var(--money-green); }
.job.bad .dot { background: var(--loss-red); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.1rem;
  border-bottom: 1px solid var(--vault-line); font-size: 0.78rem; }
.feed-row .dot { background: var(--money-green); }
.feed-row.bad .dot { background: var(--loss-red); }
.feed-who { font-family: var(--font-meme); color: var(--bin-gold); letter-spacing: 0.6px; min-width: 5.5rem; }
.feed-label { color: var(--parchment); }
.feed-reason { color: var(--loss-red); font-size: 0.7rem; }
.feed-ago { margin-left: auto; white-space: nowrap; }

/* your stake (the per-person slice; the bin is shared, this panel is private) */
.stake-card {
  border: 2px solid var(--bin-gold-deep); border-radius: var(--radius-lg);
  background: #1b1408; padding: 0.9rem 1.1rem; margin: 0.5rem 0;
}
.stake-head {
  font-family: var(--font-meme); letter-spacing: 1px; color: var(--bin-gold);
  display: flex; align-items: baseline; gap: 0.6rem;
}
.stake-who {
  font-family: var(--font-data); font-size: 0.78rem; color: var(--parchment-dim);
  letter-spacing: 0;
}
.stake-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem; margin-top: 0.7rem;
}
.stake-fig {
  background: var(--vault-panel); border: 1px solid var(--vault-line);
  border-radius: var(--radius); padding: 0.5rem 0.65rem;
}
.stake-fig .k { font-size: 0.7rem; color: var(--parchment-faint); letter-spacing: 0.5px; }
.stake-fig .v { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stake-fig .v.gold { color: var(--bin-gold); font-family: var(--font-meme); letter-spacing: 0.5px; }
.stake-note { font-size: 0.74rem; color: var(--parchment-faint); margin-top: 0.6rem; }

/* ledgers (the hoard, the calendar) -------------------------------------- */
table.ledger { border-collapse: collapse; width: 100%; }
table.ledger th {
  text-align: left; color: var(--parchment-faint); font-weight: 500;
  padding: 0.3rem 0.6rem; font-size: 0.78rem;
}
table.ledger td { padding: 0.4rem 0.6rem; border-top: 1px solid var(--vault-line-soft); }
table.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
table.ledger .sym { color: var(--bin-gold-bright); font-weight: 500; }
table.ledger tr.watch { opacity: 0.62; }
table.ledger tr.watch .sym { color: var(--parchment-dim); }
.delta-up { color: var(--money-green); }
.delta-down { color: var(--loss-red); }
.muted { color: var(--parchment-faint); }
.tag {
  display: inline-block; margin-left: 0.4rem; padding: 0 0.35rem; font-size: 0.7rem;
  color: var(--parchment-faint); border: 1px solid var(--vault-line); border-radius: 3px;
  vertical-align: middle;
}

/* buttons ----------------------------------------------------------------- */
button {
  background: var(--vault-panel); color: var(--parchment); border: 1px solid var(--vault-line);
  padding: 0.45rem 0.9rem; border-radius: var(--radius); cursor: pointer; font: inherit;
  transition: background 120ms ease;
}
button:hover { background: var(--button-hover); }

/* augur's read ------------------------------------------------------------ */
.regime { font-weight: 500; max-width: var(--maxw); }
.asof { font-size: 0.78rem; margin-bottom: 0.4rem; }
ul.wire { list-style: none; padding: 0; margin: 0.5rem 0 0; }
ul.wire li { padding: 0.3rem 0; border-top: 1px solid var(--vault-line-soft); }
ul.wire .src {
  display: inline-block; min-width: 140px; font-size: 0.76rem; color: var(--parchment-faint);
}
.relay {
  margin: 0.6rem 0 0.4rem; padding: 0.5rem 0.7rem; line-height: 1.5;
  background: var(--vault-ledger); border-left: 3px solid var(--bin-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.relay-tag {
  font-family: var(--font-meme); font-size: 0.7rem; letter-spacing: 0.6px;
  color: var(--bin-gold); margin-right: 0.4rem;
}
ul.read { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.read-item { padding: 0.5rem 0; border-top: 1px solid var(--vault-line-soft); }
.read-item.faded { opacity: 0.5; }
.read-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.read-title { font-weight: 500; }
.read-why { font-size: 0.85rem; margin-top: 0.2rem; }
.read-boring { font-size: 0.78rem; margin-top: 0.1rem; }
.chip {
  font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.4px;
  color: var(--parchment-dim); border: 1px solid var(--vault-line);
  border-radius: 3px; padding: 0 0.35rem; white-space: nowrap;
}
.chip.ok { color: var(--money-green); border-color: #1f5132; }
.chip.warn { color: var(--loss-red); border-color: #5a2020; }
.wire-label {
  font-family: var(--font-meme); font-size: 0.72rem; letter-spacing: 0.8px;
  color: var(--parchment-dim); margin: 0.9rem 0 0.1rem;
}
.wire-item { padding: 0.45rem 0; border-top: 1px solid var(--vault-line-soft); }
.wire-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.wire-link { color: var(--bin-gold-bright); text-decoration: none; }
.wire-link:hover { text-decoration: underline; }
.wire-meta { font-size: 0.74rem; color: var(--parchment-faint); margin-top: 0.1rem; }
.wire-body { font-size: 0.82rem; margin-top: 0.25rem; color: var(--parchment-dim); }

/* parchment briefs -------------------------------------------------------- */
.brief-md {
  white-space: pre-wrap; line-height: 1.6; color: var(--parchment);
  background: var(--vault-ledger); border: 1px solid var(--vault-line);
  border-left: 4px solid var(--bin-gold-deep); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
}

/* the vault door (the gate) ----------------------------------------------- */
.vault-door {
  border: 2px solid var(--bin-gold-deep); border-radius: var(--radius-lg);
  background: #1b1408; padding: 1rem 1.1rem;
}
.vault-door .head { font-weight: 500; }
.vault-door .thesis { color: var(--parchment); margin: 0.4rem 0 0.9rem; line-height: 1.5; }
.vault-door .case { margin: 0 0 0.9rem; font-size: 0.85rem; }
.vault-door .case .prosecution summary { cursor: pointer; color: var(--parchment-dim); margin-top: 0.35rem; }
.vault-door .case .prosecution p { color: var(--parchment-dim); margin: 0.4rem 0 0; line-height: 1.45; }
.vault-door .case .rebuttal { color: var(--parchment); }
.actions { display: flex; gap: 0.6rem; align-items: center; }
/* the spoked brass handle by the gate, so confirming feels like turning a wheel */
.vault-handle { flex: none; }
.vault-handle .ring { fill: none; stroke: var(--bin-gold-deep); stroke-width: 3; }
.vault-handle .spoke { stroke: var(--bin-gold-deep); stroke-width: 2.5; stroke-linecap: round; }
.vault-handle .hub { fill: var(--bin-gold-deep); }
.vault-handle .pin { fill: var(--bin-gold-bright); }
button.confirm {
  background: var(--bin-gold); color: #3a2a05; border: none;
  font-family: var(--font-meme); letter-spacing: 1px; padding: 0.6rem 1.1rem;
}
button.confirm:hover { background: var(--bin-gold-bright); }
button.pass { background: #2a1410; color: #e6a3a3; border: 1px solid #5a2020; }
button.pass:hover { background: #3a1a1a; }

/* the login (present your key) ------------------------------------------- */
.login-wrap { max-width: 460px; margin: 4rem auto; padding: 0 1.5rem; }
.login-card {
  border: 2px solid var(--bin-gold-deep); border-radius: var(--radius-lg);
  background: #1b1408; padding: 1.5rem 1.5rem 1.75rem;
}
.login-title { font-size: 1.4rem; margin: 0 0 0.5rem; }
.key-input {
  width: 100%; box-sizing: border-box; background: var(--vault-panel);
  color: var(--parchment); border: 1px solid var(--vault-line);
  border-radius: var(--radius); padding: 0.6rem 0.7rem; font: inherit; margin: 0.9rem 0;
}
.key-input:focus { outline: none; border-color: var(--bin-gold); }
.login-error { color: var(--loss-red); margin-top: 0.8rem; font-size: 0.85rem; }

/* admin: keys and keepers ------------------------------------------------- */
a.adminlink { color: #3a2a05; text-decoration: none; border-bottom: 1px solid #3a2a05; }
.flash {
  background: #13251a; color: var(--money-green); border: 1px solid #1f5132;
  border-radius: var(--radius); padding: 0.5rem 0.8rem; margin: 1rem 0;
}
.minted {
  background: #1b1408; border: 2px solid var(--bin-gold-deep);
  border-radius: var(--radius-lg); padding: 0.8rem 1rem; margin: 1rem 0;
}
.minted-label { font-size: 0.74rem; color: var(--parchment-dim); letter-spacing: 0.5px; }
.minted-key {
  display: block; margin-top: 0.4rem; font-family: var(--font-data);
  font-size: 1.05rem; color: var(--bin-gold); word-break: break-all;
}
.row-form { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.key-input.inline { width: auto; margin: 0; }
.key-input.narrow { min-width: 130px; padding: 0.3rem 0.45rem; }
.inline-form, .topic-form { display: inline-flex; gap: 0.3rem; align-items: center; margin: 0.12rem 0; }
.actions-cell { white-space: nowrap; }
.actions-cell .inline-form { margin-right: 0.2rem; }
table.ledger td form button { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

/* charts ------------------------------------------------------------------ */
.chart-box { position: relative; height: 170px; margin: 0.6rem 0; }
.chart-note { font-size: 0.74rem; margin: 0.2rem 0 0; }
.spark-wrap { position: relative; height: 110px; }
.chart-toggle { padding: 0.2rem 0.5rem; font-size: 0.78rem; }
.chart-row > td { background: #181308; padding: 0.4rem 0.6rem; }

/* the kill switch, emergency stop (D-013) --------------------------------- */
.kill-strip { padding: 0.5rem 1.5rem; display: flex; align-items: center; gap: 0.6rem; }
.kill-strip.tripped {
  background: #2a1414; color: #e6a3a3; border-bottom: 1px solid #5a2020; font-weight: 600;
}
.kill-strip.tripped .light { width: 9px; height: 9px; border-radius: 50%; background: var(--bin-red); }
.killbtn {
  background: #2a1410; color: #e6a3a3; border: 1px solid #5a2020;
  font-size: 0.72rem; padding: 0.25rem 0.6rem; letter-spacing: 0.5px;
}
.killbtn:hover { background: #3a1a1a; }

/* the veto window (D-012) ------------------------------------------------- */
.vault-door.veto { border-color: var(--bin-red); }
.mode-chip {
  font-family: var(--font-data); font-size: 0.7rem; color: var(--bin-red);
  border: 1px solid var(--bin-red); border-radius: 3px; padding: 0 0.35rem;
  vertical-align: middle; letter-spacing: 0.5px;
}
.veto-bar { display: flex; align-items: baseline; gap: 0.55rem; margin: 0.1rem 0 0.9rem; }
.veto-count {
  font-family: var(--font-meme); font-size: 1.7rem; color: var(--bin-red);
  letter-spacing: 1px; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .pot-figure { font-size: 1.9rem; }
  .bin-header .title { font-size: 1.2rem; }
}

/* tabbed layout: a simple sidebar plus the content area --------------------- */
.layout {
  display: flex; gap: 1.6rem; max-width: 1040px; margin: 0 auto;
  padding: 0 1.5rem; align-items: flex-start;
}
.sidebar {
  flex: 0 0 132px; position: sticky; top: 0.8rem;
  display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.2rem;
}
.sidebar a {
  padding: 0.45rem 0.7rem; color: var(--parchment-dim); text-decoration: none;
  border-radius: var(--radius); border-left: 3px solid transparent;
  font-family: var(--font-meme); font-size: 0.95rem; letter-spacing: 0.6px;
}
.sidebar a:hover { background: var(--vault-panel); color: var(--parchment); }
.sidebar a.on {
  background: var(--vault-panel); color: var(--bin-gold);
  border-left-color: var(--bin-gold);
}
.content { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) {
  .layout { flex-direction: column; gap: 0.6rem; }
  .sidebar { flex-direction: row; flex-wrap: wrap; position: static; gap: 0.3rem; }
  .sidebar a { border-left: none; }
}

/* the main page headlines (condensed read) -------------------------------- */
ul.headlines { list-style: none; padding: 0; margin: 0.4rem 0 0; }
ul.headlines li { padding: 0.4rem 0; border-top: 1px solid var(--vault-line-soft); }
ul.headlines a { color: var(--bin-gold-bright); text-decoration: none; }
ul.headlines a:hover { text-decoration: underline; }
.hl-src { font-size: 0.74rem; margin-left: 0.5rem; }
.wire-asof { font-size: 0.72rem; margin-top: 0.5rem; letter-spacing: 0.3px; }
.seemore {
  font-family: var(--font-data); font-size: 0.72rem; color: var(--bin-gold-bright);
  text-decoration: none; margin-left: 0.5rem; vertical-align: middle;
}
.seemore:hover { text-decoration: underline; }

/* the weekly universe proposal -------------------------------------------- */
.uni-note { margin: 0.4rem 0 0.6rem; line-height: 1.5; }
.approvebtn {
  font-family: var(--font-meme); letter-spacing: 0.6px; color: #14100a;
  background: var(--bin-gold); border: none; border-radius: var(--radius);
  padding: 0.5rem 1rem; cursor: pointer; margin-bottom: 0.6rem;
}
.approvebtn:hover { background: var(--bin-gold-bright); }
ul.picks { list-style: none; padding: 0; margin: 0.4rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.pick { background: var(--vault-panel); border: 1px solid var(--vault-line);
  border-radius: var(--radius); padding: 0.5rem 0.7rem; }
.pick-head { display: flex; justify-content: space-between; align-items: baseline; }
.pick-sym { font-family: var(--font-meme); color: var(--bin-gold); font-size: 1rem; letter-spacing: 0.5px; }
.pick-score { font-size: 0.74rem; }
.pick-why { font-size: 0.82rem; margin-top: 0.2rem; color: var(--parchment-dim); }

/* the hunt cockpit (D-030) */
.huntbtn {
  font-family: var(--font-data); font-size: 0.74rem; padding: 0.2rem 0.6rem;
  color: var(--bin-gold-bright); background: var(--vault-panel);
  border: 1px solid var(--bin-gold-deep); border-radius: var(--radius-sm); cursor: pointer;
}
.huntbtn:hover { background: var(--button-hover); }
.hunt-card {
  background: var(--vault-panel); border: 1px solid var(--vault-line);
  border-radius: var(--radius); padding: 0.7rem 0.9rem; margin: 0.5rem 0;
}
.hunt-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.hunt-sym { font-family: var(--font-meme); font-size: 1.05rem; color: var(--bin-gold); letter-spacing: 0.5px; }
.hunt-struct { font-size: 0.82rem; margin: 0.4rem 0 0.2rem; color: var(--parchment-dim);
  font-variant-numeric: tabular-nums; }
.hunt-struct .loss { color: var(--loss-red); }
.hunt-thesis { font-size: 0.85rem; margin: 0.2rem 0; }
.hunt-trigger { font-size: 0.78rem; margin-bottom: 0.3rem; }
.hunt-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0; }
.hunt-add .key-input { width: auto; margin: 0; }
.hunt-add input[name="name"] { flex: 1 1 220px; }