/* ==========================================================================
   theobo web UI - design system
   Dark-only exchange-trading terminal. Every page consumes tokens below,
   never raw hex. No CDN references - fonts and this stylesheet are the
   only assets, both self-hosted.
   ========================================================================== */

/* ---- fonts (self-hosted woff2, latin subset, OFL) ---- */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('/static/fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/static/fonts/instrument-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/static/fonts/instrument-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- design tokens ---- */

:root {
  /* palette */
  --pitch: #0B1210;   /* page ground */
  --surface: #121A16; /* cards / tables */
  --line: #1F2A24;    /* hairlines */

  --chalk: #E9EDE9;   /* primary ink */
  --muted: #8A968E;   /* secondary ink */

  --back-pink: #F09EB8; /* live-mode, actions, REAL-money data */
  --lay-blue: #8FC7E8;  /* counterfactual / secondary data */

  --win: #5BD08C;
  --loss: #E86A6A;
  --warn: #E3B34C;

  /* type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif-condensed, sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* spacing / radius */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 4px;
}

/* ---- reset / base ---- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: var(--pitch);
  -webkit-text-size-adjust: 100%;
}

html, body {
  max-width: 100%;
  overflow-x: hidden; /* quality floor: no horizontal scroll, even at 375px */
}

body {
  margin: 0;
  background: var(--pitch);
  color: var(--chalk);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-3);
}

/* ---- type scale ---- */

/* Display: Barlow Condensed 600 - uppercase, tracked-out eyebrows and page titles */
.eyebrow,
.page-title,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.eyebrow {
  font-size: 11px;
  color: var(--muted);
}

.page-title {
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--chalk);
  margin: 0 0 var(--space-4);
}

h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

/* Body/UI: Instrument Sans 400/500 */
.body-strong {
  font-family: var(--font-body);
  font-weight: 500;
}

/* Data: IBM Plex Mono 400/600, tabular numerals - odds, stakes, P&L, timestamps */
.mono,
.data,
code, pre, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mono--strong {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---- links / focus ---- */

a:hover {
  color: var(--chalk);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lay-blue);
  outline-offset: 2px;
}

/* ---- wordmark ---- */

.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk);
}

.wordmark__underline {
  display: block;
  height: 3px;
  width: 44px;
  background: var(--back-pink);
  border-radius: 2px;
}

.wordmark--login {
  font-size: 30px;
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.wordmark--login .wordmark__underline {
  width: 56px;
}

/* ---- site header / nav ---- */

.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.nav {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto; /* contained scroll only - the page itself must not scroll */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover {
  color: var(--chalk);
}

.nav a.is-active {
  color: var(--chalk);
  border-bottom-color: var(--back-pink);
}

.logout-form {
  margin-left: auto;
}

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--chalk);
  cursor: pointer;
}

.btn:hover {
  border-color: var(--muted);
}

.btn--primary {
  background: var(--back-pink);
  border-color: var(--back-pink);
  color: var(--pitch);
  font-weight: 600;
}

.btn--primary:hover {
  filter: brightness(1.05);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  font-weight: 600;
}

.btn--ghost:hover {
  color: var(--chalk);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--danger {
  background: var(--loss);
  border-color: var(--loss);
  color: var(--pitch);
  font-weight: 600;
}

/* ---- flash messages ---- */

.flash {
  margin: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
}

.flash--ok {
  border-color: var(--win);
}

.flash--error {
  border-color: var(--loss);
}

.flash--warn {
  border-color: var(--warn);
}

/* ---- content area ---- */

.content {
  padding: var(--space-4);
}

@media (min-width: 900px) {
  .content {
    padding: var(--space-6);
  }

  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-5);
  }
}

/* ---- login page ---- */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.field-input {
  background: var(--pitch);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--chalk);
  font-size: 15px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.field-input:focus-visible {
  outline: 2px solid var(--lay-blue);
  outline-offset: 1px;
}

.login-error {
  color: var(--loss);
  font-size: 13px;
  margin-bottom: var(--space-4);
}

/* ---- status chips ----
   Small caps Barlow with a 3px square swatch. win/loss/warn always carry
   the swatch AND the word - colour is never the only signal. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chalk);
}

.chip__swatch {
  display: inline-block;
  width: 3px;
  height: 3px;
  min-width: 3px;
  background: var(--muted);
}

.chip--win .chip__swatch { background: var(--win); }
.chip--loss .chip__swatch { background: var(--loss); }
.chip--warn .chip__swatch { background: var(--warn); }
.chip--live .chip__swatch { background: var(--back-pink); }
.chip--track .chip__swatch { background: var(--lay-blue); }

/* minute badge, e.g. 65' */
.minute-badge {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}

/* ---- tables ----
   Dense, disciplined: terminal, not brochure. Hairline separators, no
   zebra stripes, generous space only in the header band. */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
}

thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody td {
  color: var(--chalk);
}

.num-pos { color: var(--win); }
.num-neg { color: var(--loss); }

/* ---- ladder strip ----
   Signature element: three exchange-style price cells (MODE / TODAY GBP /
   OPEN GBP). LIVE fills the mode cell with --back-pink; TRACK is a neutral
   --surface outline. One orchestrated load: cells tick in with a 120ms
   stagger (opacity + 2px rise); prefers-reduced-motion disables it. */

.ladder-strip {
  display: grid;
  grid-template-columns: 1fr; /* mobile-first: stacked below 600px */
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (min-width: 600px) {
  .ladder-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ladder-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ladder-cell__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.ladder-cell__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  color: var(--chalk);
}

.ladder-cell--live {
  background: var(--back-pink);
  border-color: var(--back-pink);
}

.ladder-cell--live .ladder-cell__eyebrow,
.ladder-cell--live .ladder-cell__value {
  color: var(--pitch);
}

.ladder-cell {
  animation: ladder-tick-in 320ms ease-out both;
}

.ladder-cell:nth-child(1) { animation-delay: 0ms; }
.ladder-cell:nth-child(2) { animation-delay: 120ms; }
.ladder-cell:nth-child(3) { animation-delay: 240ms; }

@keyframes ladder-tick-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ladder-cell {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- table-scroll ----
   Wraps every <table> so wide data scrolls inside its own container instead
   of forcing the page to overflow horizontally (quality floor at 375px). */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-5);
}

/* ---- dashboard meta row (heartbeat, staked-today) ---- */

.dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.meta-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ---- dashboard controls (mode / kill) ---- */

.dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.mode-form,
.kill-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mode-form--live {
  gap: var(--space-3);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--muted);
}

.kill-form {
  margin-left: auto;
}

/* ---- signals: filter bar ----
   Reuses the login form's field-label/field-input tokens so filters read as
   part of the same system, not a bespoke widget. */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-field .field-input {
  margin-bottom: 0;
  min-width: 140px;
}

/* ---- signals: pagination ---- */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* ---- signal detail: reason chips list ---- */

.reason-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
}

/* ---- collapsible sections (settings snapshot, raw message) ---- */

details {
  margin-bottom: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

details > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

details[open] > summary {
  margin-bottom: var(--space-3);
  color: var(--chalk);
}

details table {
  margin-top: 0;
}

.raw-message {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ---- sparkline ----
   Cumulative real P&L: 2px --back-pink line on --surface, endpoint dot
   >=8px, current figure direct-labelled in mono (design language). */

.sparkline {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}

.sparkline__label {
  font-size: 13px;
  fill: var(--chalk);
}

/* ---- analytics: section notes + bar charts ----
   One-line operator-voiced explanation under each section heading, and the
   paired/segment horizontal bar charts (real vs counterfactual, and P&L by
   polarity) -- same server-rendered-SVG approach as the sparkline above. */

.section-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 var(--space-3);
}

.bar-chart {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin-bottom: var(--space-4);
}

/* ---- settings: money-path banner + mode note ----
   Operator-voiced warning line, always visible at the top of the page --
   this editor controls REAL staking parameters on a LIVE bot. */

.settings-banner {
  border-left: 3px solid var(--warn);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--chalk);
  font-size: 14px;
}

.settings-mode-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ---- settings: inline set forms + per-alert grid ---- */

.inline-set-form,
.alert-toggle-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field-input--inline {
  margin-bottom: 0;
  padding: var(--space-1) var(--space-2);
  font-size: 13px;
  width: 100px;
}

/* Danger styling: stake/caps inputs -- the fields that move real money --
   get a subtle warn-coloured left border so they read as higher-stakes than
   a plumbing setting like a timeout. */
.field-input--danger {
  border-left: 3px solid var(--warn);
}

.btn--small {
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
}

.tag-global {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1px var(--space-1);
}

/* ---- aliases: candidate list + low-match note ----
   Each pending signal can carry several scored candidates; every one gets
   its own row with an inline Confirm form. Scores below the warn threshold
   (see LOW_SCORE_THRESHOLD) get the --warn swatch AND this note -- colour is
   never the only signal on a page that teaches the matcher real-money
   fixtures. */

.candidate-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.candidate-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.low-match-note {
  font-size: 12px;
  color: var(--warn);
}

/* ---- learned aliases: action button group ---- */

.alias-actions {
  display: flex;
  gap: var(--space-2);
}


/* ==========================================================================
   v2 layout architecture — the "make it beautiful" pass.
   Card system, page rhythm, refined chrome. Overrides earlier base rules
   by cascade; every class the tests pin keeps its name and meaning.
   ========================================================================== */

:root {
  --radius-lg: 10px;
  --space-7: 48px;
  --glow-pink: 0 0 0 1px rgba(240, 158, 184, 0.35), 0 4px 24px rgba(240, 158, 184, 0.12);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
}

body {
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(240, 158, 184, 0.05), transparent 60%),
    radial-gradient(900px 600px at 85% 110%, rgba(143, 199, 232, 0.04), transparent 55%),
    var(--pitch);
  min-height: 100vh;
}

/* ---- chrome: sticky slim header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--pitch) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--space-5);
  min-height: 56px;
  gap: var(--space-6);
}

.wordmark { font-size: 17px; gap: 3px; }
.wordmark__underline { height: 2px; width: 38px; }

.nav { gap: var(--space-2); }

.nav a {
  padding: var(--space-2) var(--space-3);
  border-bottom: none;
  border-radius: var(--radius);
  line-height: 1;
}

.nav a.is-active {
  color: var(--chalk);
  background: color-mix(in srgb, var(--back-pink) 14%, transparent);
  box-shadow: inset 0 -2px 0 var(--back-pink);
}

/* ---- page scaffold ---- */

.content {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.content > section { margin: 0; }

.page-title { position: relative; font-size: 24px; margin: 0; padding-bottom: var(--space-2); }
.page-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--back-pink);
  border-radius: 2px;
}

/* ---- card system: every section becomes a surface ---- */

.card,
.content > section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* the title and grid wrappers are not cards */
.content > .page-title,
.content > .grid,
.content > .ladder-strip,
.content > .flash { background: none; border: none; box-shadow: none; padding: 0; }

.content > section > h2,
.card > h2 {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--main-side { grid-template-columns: 2fr 1fr; }
}
.grid > section { margin: 0; }

/* ---- ladder strip: the signature earns real presence ---- */

.ladder-strip { gap: var(--space-4); }

.ladder-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow-card);
}

.ladder-cell__eyebrow { font-size: 11px; letter-spacing: 0.16em; }
.ladder-cell__value { font-size: 30px; font-weight: 600; line-height: 1.1; }

.ladder-cell--live {
  border-color: var(--back-pink);
  box-shadow: var(--glow-pink);
}
.ladder-cell--live .ladder-cell__eyebrow { color: color-mix(in srgb, var(--pitch) 45%, transparent); }

/* ---- tables: rhythm, alignment, hover ---- */

.table-scroll { margin: 0 calc(-1 * var(--space-2)); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: left;
  padding: var(--space-2) var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line);
}

tbody td {
  padding: 10px var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in srgb, var(--chalk) 3%, transparent); }

td.num, th.num { text-align: right; }

/* ---- chips: quieter, rounder ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: color-mix(in srgb, var(--chalk) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.chip__swatch { width: 7px; height: 7px; border-radius: 2px; background: var(--muted); }
.chip--win  { color: var(--win); }  .chip--win  .chip__swatch { background: var(--win); }
.chip--loss { color: var(--loss); } .chip--loss .chip__swatch { background: var(--loss); }
.chip--warn { color: var(--warn); } .chip--warn .chip__swatch { background: var(--warn); }
.chip--live { color: var(--back-pink); } .chip--live .chip__swatch { background: var(--back-pink); }
.chip--track { color: var(--lay-blue); } .chip--track .chip__swatch { background: var(--lay-blue); }

/* ---- buttons: weight and intent ---- */

.btn { transition: border-color 120ms ease, background 120ms ease, transform 60ms ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { color: var(--pitch); font-weight: 600; }
.btn--primary:hover { background: color-mix(in srgb, var(--back-pink) 88%, white); border-color: transparent; }
.btn--danger {
  background: transparent;
  border-color: var(--loss);
  color: var(--loss);
}
.btn--danger:hover { background: color-mix(in srgb, var(--loss) 14%, transparent); border-color: var(--loss); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { color: var(--chalk); border-color: var(--line); }

/* ---- forms ---- */

input[type="text"], input[type="password"], input[type="number"], select {
  background: var(--pitch);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  padding: var(--space-2) var(--space-3);
  min-height: 34px;
}
input:hover, select:hover { border-color: var(--muted); }

/* ---- flash: floating status toast ---- */

.flash {
  position: sticky;
  top: 64px;
  z-index: 15;
  margin: 0 auto;
  max-width: 1160px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
}
.flash--ok { border-color: color-mix(in srgb, var(--win) 45%, var(--line)); }
.flash--error { border-color: color-mix(in srgb, var(--loss) 55%, var(--line)); }

/* ---- empty states ---- */

.content > section > p:only-of-type,
.empty {
  color: var(--muted);
  font-size: 13.5px;
  padding: var(--space-4) 0 var(--space-2);
}

/* ---- reduced motion honoured for the new transitions too ---- */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---- filter bar (signals/audit) ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}
.filter-field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.controls-note { color: var(--muted); font-size: 13px; }
.dashboard-meta { display: flex; gap: var(--space-6); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.meta-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.mode-form, .kill-form { margin: 0 0 var(--space-3); }
.checkbox-label { display: flex; gap: var(--space-2); align-items: center; font-size: 13px; color: var(--muted); margin-bottom: var(--space-2); }

/* ==========================================================================
   v3 readability pass — from the user's own screenshot.
   Legible LIVE cell, real card separation, type hierarchy, chart room.
   ========================================================================== */

:root {
  --surface: #17231D;         /* lifted: cards must SEPARATE from the pitch */
  --line: #2A382F;            /* borders visible, not implied */
  --muted: #9AA89E;           /* secondary ink readable at 13px */
  --ink-on-pink: #14100E;     /* dark ink for pink fills */
}

/* the signature back-cell: SOLID pink when LIVE, dark ink — like the ladder */
.ladder-cell--live {
  background: var(--back-pink);
  border-color: transparent;
  box-shadow: 0 6px 28px rgba(240, 158, 184, 0.25);
}
.ladder-cell--live .ladder-cell__eyebrow { color: var(--ink-on-pink); opacity: 0.65; }
.ladder-cell--live .ladder-cell__value { color: var(--ink-on-pink); }

/* type hierarchy: one big voice, then quiet */
.page-title { font-size: 34px; letter-spacing: 0.02em; padding-bottom: var(--space-3); }
.page-title::after { width: 40px; height: 3px; }

.ladder-cell { gap: 6px; padding: var(--space-5); }
.ladder-cell__eyebrow { font-size: 11px; }
.ladder-cell__value { font-size: 40px; letter-spacing: -0.01em; }

.content > section > h2, .card > h2 {
  color: var(--chalk);
  font-size: 13px;
  letter-spacing: 0.16em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.content > section > h2::before, .card > h2::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--back-pink);
  border-radius: 1px;
  flex: none;
}

/* cards: visible top sheen so surfaces read as raised */
.card, .content > section {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chalk) 3.5%, var(--surface)), var(--surface) 42%);
}
.content > .page-title, .content > .grid, .content > .ladder-strip, .content > .flash {
  background: none;
}

/* chart fills its card */
.sparkline { width: 100%; height: 180px; display: block; border-radius: var(--radius); }
.sparkline__label { font-size: 13px; fill: var(--chalk); font-weight: 600; }

/* controls: full-width actions, danger zone separated */
.dashboard-controls .btn { width: 100%; justify-content: center; padding: var(--space-3) var(--space-4); }
.dashboard-controls .kill-form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.controls-note { font-size: 13.5px; margin-bottom: var(--space-4); }

/* body copy readable */
.content > section > p { color: var(--muted); font-size: 14px; }
tbody td { font-size: 13.5px; }

/* header: a whisper of the accent along the top edge */
.site-header { border-top: 2px solid var(--back-pink); }
.wordmark { font-size: 19px; }

/* meta chips slightly larger */
.chip { font-size: 11px; padding: 4px 10px; }
.chip__swatch { width: 8px; height: 8px; }

/* ==========================================================================
   v4 — LIGHT THEME (user brief: "bright and readable", entire scheme change).
   The exchange ladder look: paper ground, white cells, pink/blue deepened
   for ink-on-white. Token-level flip; component layers inherit.
   ========================================================================== */

:root {
  /* ground & surfaces */
  --pitch: #F5F4F0;          /* warm paper page ground */
  --surface: #FFFFFF;        /* cards: clean white */
  --line: #DFDCD4;           /* visible warm hairlines */

  /* ink */
  --chalk: #212723;          /* primary ink: near-black */
  --muted: #6E7770;          /* secondary ink: readable grey-green */

  /* exchange semantics — deepened for lines/text on white */
  --back-pink: #D6537F;      /* real money accent: lines, links, active */
  --lay-blue: #3E86B5;       /* counterfactual accent */
  --pink-fill: #F6B8CD;      /* the classic pale back-cell fill (dark ink on it) */
  --ink-on-pink: #33131F;

  /* status — darkened for white surfaces */
  --win: #1F8A50;
  --loss: #CC3D3D;
  --warn: #A87413;

  /* depth on light */
  --shadow-card: 0 1px 2px rgba(33, 39, 35, 0.05), 0 6px 20px rgba(33, 39, 35, 0.07);
  --glow-pink: 0 0 0 1px rgba(214, 83, 127, 0.35), 0 6px 22px rgba(214, 83, 127, 0.14);
}

body {
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(214, 83, 127, 0.05), transparent 60%),
    var(--pitch);
}

.site-header {
  background: color-mix(in srgb, #FFFFFF 82%, transparent);
  border-top-color: var(--back-pink);
  border-bottom-color: var(--line);
}

.nav a.is-active {
  background: color-mix(in srgb, var(--back-pink) 10%, transparent);
  box-shadow: inset 0 -2px 0 var(--back-pink);
}

/* cards: flat white + shadow, no dark sheen gradient */
.card, .content > section {
  background: var(--surface);
}
.content > .page-title, .content > .grid, .content > .ladder-strip, .content > .flash {
  background: none;
}

/* ladder cells on white */
.ladder-cell { background: var(--surface); }
.ladder-cell--live {
  background: var(--pink-fill);
  border-color: color-mix(in srgb, var(--back-pink) 45%, transparent);
  box-shadow: var(--glow-pink);
}
.ladder-cell--live .ladder-cell__eyebrow { color: var(--ink-on-pink); opacity: 0.6; }
.ladder-cell--live .ladder-cell__value { color: var(--ink-on-pink); }

/* buttons */
.btn { background: var(--surface); }
.btn--primary { background: var(--back-pink); border-color: var(--back-pink); color: #FFFFFF; }
.btn--primary:hover { background: color-mix(in srgb, var(--back-pink) 88%, black); }
.btn--danger { border-color: var(--loss); color: var(--loss); background: transparent; }
.btn--danger:hover { background: color-mix(in srgb, var(--loss) 8%, transparent); }
.btn--ghost { color: var(--muted); }

/* inputs on light */
input[type="text"], input[type="password"], input[type="number"], select {
  background: #FFFFFF;
  border-color: var(--line);
}
input:hover, select:hover { border-color: var(--muted); }

/* chips: tinted pills on white */
.chip { background: color-mix(in srgb, var(--chalk) 4%, transparent); }

/* tables */
tbody tr:hover td { background: color-mix(in srgb, var(--back-pink) 4%, transparent); }
tbody td { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }

/* focus ring: blue reads on light too, thicken slightly */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--lay-blue);
  outline-offset: 2px;
}

/* flash toast on light */
.flash { background: color-mix(in srgb, #FFFFFF 94%, transparent); }

/* sparkline: dot ring must be the card colour, not the page */
.sparkline__dot { stroke: var(--surface); }
.sparkline__label { fill: var(--chalk); }