/* MONEY PLAYZ terminal — shared refinement layer.
 *
 * Loaded AFTER each page's base styles, so it overrides them. It keeps the
 * OLED terminal identity (lime accent, the three self-hosted faces) but makes
 * the surface read as a clean professional dashboard: panels become bordered
 * cards with real breathing room, micro-labels calm down and get legible,
 * vertical rhythm opens up, and the new settlement states (unsettled / a
 * provenance mark) get first-class styling. Both the paper and live pages link
 * this one file, so their look can no longer drift.
 *
 * Targets the EXISTING class vocabulary on purpose — it is a reskin, not a
 * rewrite, so none of the intricate client-side P&L math is touched.
 */

/* ── tokens: lift the surfaces so cards separate from the ground ─────── */
:root {
  --panel:   #0C121E;
  --panel-2: #111A29;
  --line:    #203044;   /* brighter: borders should be visible, not implied */
  --line-soft: rgba(32,48,68,.6);
  --ink: #E6EDF7; --sub: #B4C0D2; --dim: #8593A8;
  --card: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.22);
}

/* The live cockpit tags <html data-mode="live"> — flip the lime accent to
   red so the whole page reads as real money, consistently. Semantic
   win/loss (--pos/--neg) are untouched. */
:root[data-mode="live"] { --data: #F76C6C; --violet: #C23B3B; }

/* Quieter ambient glow — a pro dashboard shouldn't shimmer. */
.aurora::before, .aurora::after { opacity: .08 !important; filter: blur(140px); }

/* A touch more gutter and a wider comfortable column. */
.wrap { max-width: min(96vw, 1720px); padding-bottom: 56px; }

/* ── panels become clean cards ──────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--card);
}
.panel h2 {
  font-size: .78rem; letter-spacing: .15em; font-weight: 500;
  color: var(--sub); margin-bottom: 6px;
}
.panel h2 { border-left-width: 3px; padding-left: 12px; }
.panel .note { color: var(--dim); margin-bottom: 16px; max-width: 74ch; }

/* More space between stacked panels — the single biggest "cleaner" lever. */
.grid { gap: 18px; margin-bottom: 18px; }
.panel + .panel, .grid + .panel, .panel + .grid { margin-top: 18px; }

/* ── KPIs: keep the accent-bar identity, add air + a subtle ground ───── */
.results-band { gap: 16px; margin-bottom: 16px; }
.stat-chips { gap: 14px; margin-bottom: 24px; }
.kpi.hero {
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-left-width: 3px; box-shadow: var(--card);
}
.kpi .lab { font-size: .64rem; letter-spacing: .16em; }   /* was .2em — calmer, more legible */
.kpi.hero .sub, .kpi.chip .sub { color: var(--sub); }
/* Chips get a hairline card too, instead of a bare divider. */
.stat-chips .kpi {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
}
.stat-chips .kpi:not(:first-child) { border-left: 1px solid var(--line); }
@media (max-width: 900px) { .stat-chips .kpi:nth-child(odd) { border-left: 1px solid var(--line); padding-left: 14px; } }

/* ── P&L breakdown: a bit more room, calmer labels ──────────────────── */
.perf { gap: 4px 26px; }
.perf .stat { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.perf .stat .k { font-size: .62rem; letter-spacing: .14em; }
.perf .stat .v { font-size: 1.18rem; }

/* ── tables: more padding, quieter grid, sticky header ──────────────── */
table { font-size: .82rem; }
th {
  letter-spacing: .13em; font-size: .62rem; padding: 10px 14px;
  position: sticky; top: 0; background: var(--panel-2); z-index: 1;
  border-bottom: 1px solid var(--line);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: color-mix(in srgb, var(--data) 5%, transparent); }

/* ── settlement chips: add the new states, keep the palette ─────────── */
.chip { padding: 2px 10px; font-size: .66rem; letter-spacing: .06em; }
.chip.open      { color: var(--data);  background: color-mix(in srgb, var(--data) 14%, transparent); }
.chip.unsettled { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
.chip.pending   { color: var(--sub);   background: color-mix(in srgb, var(--sub) 12%, transparent); }
/* provenance mark trailing a settled result: ✓venue · ~alerter · ✎manual */
.prov { font-family: var(--mono); font-size: .6rem; color: var(--dim); margin-left: 5px; }

/* ── feed / footer: a little more breathing room ────────────────────── */
.feed-item { padding: 11px 6px; }
footer.status { padding-top: 22px; border-top: 1px solid var(--line-soft); margin-top: 8px; }

/* Softer separators inside sub-lists. */
.alerter { border-bottom: 1px solid var(--line-soft); }

/* ── live pulse: activity toast + in-play win-probability bar ────────── */
.toast{ position:fixed; bottom:var(--s4); left:50%; transform:translateX(-50%);
  background:var(--panel-2); color:var(--ink); border:1px solid var(--line-2);
  box-shadow:var(--card); padding:9px 18px; border-radius:var(--r1);
  font-family:var(--display); font-size:.74rem; letter-spacing:.08em; opacity:0;
  pointer-events:none; transition:opacity .25s, transform .25s; z-index:50; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }
.toast.win{ border-color:var(--pos); color:var(--pos); }
.toast.loss{ border-color:var(--neg); color:var(--neg); }

.winbar{ position:relative; display:inline-flex; align-items:center; justify-content:flex-end;
  min-width:56px; height:17px; border-radius:5px; background:var(--panel-2);
  border:1px solid var(--line); overflow:hidden; vertical-align:middle; }
.winbar .fillp{ position:absolute; left:0; top:0; bottom:0; opacity:.4; transition:width .6s ease; }
.winbar .fillp.pos{ background:var(--pos); } .winbar .fillp.neg{ background:var(--neg); }
.winbar .txt{ position:relative; z-index:1; font-family:var(--mono); font-size:.66rem; padding:0 6px; }

/* a settled play flips: brief flash cue */
@keyframes flashrow{ 0%{ background:color-mix(in srgb,var(--accent) 22%,transparent); } 100%{ background:transparent; } }
.flash{ animation:flashrow 1.2s ease-out; }