/* AKRA ARENA v3 dashboard — dark-committed design.
 * Chrome/ink tokens follow the dataviz reference (dark mode), adapted to the
 * AKRA surface family used by ui/status.html. Series colors live in
 * js/data/roster.js (entity-fixed, validated for this surface). */

:root {
  color-scheme: dark;
  --bg: #0e1116;          /* page plane */
  --panel: #161b22;       /* card / chart surface */
  --panel-2: #1c232d;
  --line: #26303d;        /* hairline borders */
  --grid: #222a35;
  --fg: #e6edf3;          /* primary ink */
  --dim: #8b98a5;         /* secondary ink */
  --muted: #66737f;
  --up: #0ca30c;          /* delta good (dark) */
  --down: #e34948;
  --warn: #fab219;
  --bad: #d03b3b;
  --live: #0ca30c;
  --accent: #3987e5;
  --radius: 10px;
  /* categorical model hues (entity-fixed; slot order is the validated
     CVD-safe order). Design B's light mode overrides these in sharp.css. */
  --m1: #3987e5; --m2: #d95926; --m3: #199e70;
  --m4: #c98500; --m5: #d55181; --m6: #008300;
  /* chart identity fallbacks (authoritative values live in sharp.css /
     js/chartseries.js; these keep charts sane if sharp.css fails to load) */
  --chart-primary: #d4a857;
  --chart-benchmark: #8a8a85;
  --cmp1: #3987e5; --cmp2: #d55181; --cmp3: #2fa4b8; --cmp4: #7e6ae0;

  /* ---- P&L BOX TINTING (presentation only) ------------------------------
     A box whose primary displayed performance metric is positive carries a
     light tint of the same green the number does; negative gets the same
     red; exactly zero and unmeasured stay neutral. The tint is a glance cue
     only — the number is still the fact, and no definition changes.
     Both steps are mixed from the ACTIVE mode's own --up/--down over the
     card's own surface, so light mode gets light-mode tints automatically. */
  --tint-fill-mix: 10%;      /* how much colour reaches the surface */
  --tint-edge-mix: 42%;      /* …and the hairline border */
  --tint-up-fill:   color-mix(in srgb, var(--up)   var(--tint-fill-mix), var(--panel));
  --tint-up-edge:   color-mix(in srgb, var(--up)   var(--tint-edge-mix), var(--line));
  --tint-down-fill: color-mix(in srgb, var(--down) var(--tint-fill-mix), var(--panel));
  --tint-down-edge: color-mix(in srgb, var(--down) var(--tint-edge-mix), var(--line));
  /* A SMALL tile shows far less surface than a card, so the same mix reads
     as almost nothing on it. The strong step is the same colour taken a
     little further — same tokens, same sign rule, just enough of it to be
     legible on a one-line selectable tile. */
  --tint-fill-mix-strong: 19%;
  --tint-up-fill-strong:   color-mix(in srgb, var(--up)   var(--tint-fill-mix-strong), var(--panel));
  --tint-down-fill-strong: color-mix(in srgb, var(--down) var(--tint-fill-mix-strong), var(--panel));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, Menlo, monospace; }

/* ------------------------------------------------------------- shell ----- */
#fixture-banner {
  background: #4a2a00;
  color: #ffd27a;
  border-bottom: 1px solid #7a5a1a;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
}
.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.brand-name {
  color: var(--fg);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 3px;
}
.brand-name:hover { text-decoration: none; }
.brand-sub {
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-top: 2px;
}
.status-box { text-align: right; }

/* The banner line. Owner-frozen wording, kept at the top of every page and
   deliberately NOT sticky. */
.hero-line { min-width: 0; }
.hero-slogan {
  color: var(--fg);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.2;
}
.hero-sub {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* GLOBAL HEALTH, QUIET. A healthy publication is a dot with the detail in
   its tooltip; a real problem becomes a labelled .pill again (js/app.js). */
.health-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: help;
}
.health-ok {
  background: var(--live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 18%, transparent);
}

/* STICKY NAVIGATION. The owner must never have to scroll back to the top to
   change section, so the bar — and only the bar — stays pinned. The banner
   above it is deliberately left to scroll away: it is identity, not a
   control. The bar is opaque and gets its edge only once it is actually
   pinned (js/app.js toggles .nav-stuck from a sentinel), so a page at rest
   looks exactly as it did before. */
.site-nav {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
}
.site-nav.nav-stuck {
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .75);
  border-bottom-color: var(--fg);
  border-bottom-color: color-mix(in srgb, var(--fg) 22%, var(--line));
}
/* The sentinel the sticky state is read from. It needs a real box — a
   zero-area target is not reliably reported by IntersectionObserver — so it
   is one pixel tall and immediately takes that pixel back. */
#nav-sentinel {
  display: block;
  height: 1px;
  margin-bottom: -1px;
}
/* Anything the reader can jump to must clear the pinned bar. */
:target, [id] { scroll-margin-top: 56px; }
.site-nav a {
  color: var(--dim);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--fg); text-decoration: none; }
.site-nav a.nav-on { color: var(--fg); border-bottom-color: var(--accent); }

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 60px;
}
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
  padding: 18px 24px 34px;
  display: grid;
  gap: 4px;
}

/* ------------------------------------------------------------- cards ----- */
section.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.card-title {
  font-size: 12px;
  margin: 0 0 12px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
}
.footnote { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.chart-what { color: var(--muted); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; margin: 0 0 2px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  gap: 4px;
  align-content: start;
}
.stat-label {
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 600;
}
.stat-value { font-size: 24px; font-weight: 700; }
.stat-small .stat-value { font-size: 16px; padding-top: 5px; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--dim); font-size: 12px; }
.stat-unavailable .stat-value { color: var(--muted); }
.stat-unavailable .stat-sub { color: var(--muted); font-style: italic; }
.delta-up .stat-value, .stat-card.delta-up .stat-value { color: var(--up); }
.delta-down .stat-value, .stat-card.delta-down .stat-value { color: var(--down); }
span.delta-up { color: var(--up); }
span.delta-down { color: var(--down); }
span.delta-none { color: var(--muted); }

/* ------------------------------------------------------------- pills ----- */
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  border: 1px solid var(--line);
  vertical-align: middle;
}
.pill-live { color: var(--live); border-color: color-mix(in srgb, var(--live) 50%, transparent); }
.pill-terminal { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); }
.pill-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.pill-bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); }
.pill-unknown { color: var(--muted); font-style: italic; }

.model-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}
.model-dot[data-slot="model_1"] { background: var(--m1); }
.model-dot[data-slot="model_2"] { background: var(--m2); }
.model-dot[data-slot="model_3"] { background: var(--m3); }
.model-dot[data-slot="model_4"] { background: var(--m4); }
.model-dot[data-slot="model_5"] { background: var(--m5); }
.model-dot[data-slot="model_6"] { background: var(--m6); }
.model-tag { white-space: nowrap; font-weight: 600; }
.family-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 7px;
  background: var(--panel-2);
}
.x-sep { padding: 0 2px; }

/* ------------------------------------------------------------- tables ---- */
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.data-table th, .data-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.data-table th {
  color: var(--dim);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.data-table td.num, .data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--panel-2); }
tr.row-link:focus-visible td { outline: 2px solid var(--accent); }

/* ------------------------------------------------------------- filters --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding: 6px 0 14px;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  margin-right: 2px;
}
.filter-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.chip {
  background: var(--panel-2);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  padding: 3px 12px;
  cursor: pointer;
}
.chip:hover { color: var(--fg); }
.chip-on {
  color: var(--fg);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
}
.chip-clear { border-style: dashed; }
.chip-clear:disabled { opacity: .4; cursor: default; }

.tab-row { display: flex; gap: 4px; margin-bottom: 12px; }
.tab {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 16px;
  cursor: pointer;
}
.tab-on { color: var(--fg); border-color: var(--accent); }

/* ------------------------------------------------------- model/family ---- */
.model-grid, .family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.model-card, .family-card {
  display: grid;
  gap: 8px;
  align-content: start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--fg);
}
.family-card { border-left-color: var(--line); }
.model-card:hover, .family-card:hover {
  text-decoration: none;
  border-color: var(--accent);
}
.model-card-short { font-size: 20px; font-weight: 800; letter-spacing: 2px; }
.model-card-full { color: var(--dim); font-size: 13px; margin-top: -6px; }
.family-card-name { font-size: 17px; font-weight: 800; letter-spacing: 1.6px; }
.model-card-metric { display: grid; gap: 2px; }
.model-card-return { font-size: 21px; font-weight: 700; }
.model-card-foot { display: flex; gap: 8px; align-items: center; font-size: 12px; }

.detail-head { margin: 4px 0 16px; }
.detail-head { border-left: 4px solid var(--accent); padding-left: 14px; }
.detail-title { font-size: 24px; margin: 0 0 4px; font-weight: 800; }
.detail-subrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.account-card {
  display: grid;
  gap: 6px;
  align-content: start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  color: var(--fg);
}
.account-card:hover { text-decoration: none; border-color: var(--accent); }
.account-card-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.account-card-equity { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.account-card-sub { display: flex; gap: 10px; align-items: center; font-size: 13px; }

/* ------------------------------------------------------------- matrix ---- */
.matrix-wrap { padding-bottom: 4px; }
.matrix-table { border-collapse: collapse; min-width: 720px; width: 100%; }
.matrix-table th, .matrix-table td { border: 1px solid var(--line); padding: 0; }
.matrix-table thead th, .matrix-rowhead {
  background: var(--panel-2);
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
}
.matrix-corner { color: var(--muted); font-weight: 600; font-size: 11px; }
.matrix-cell-link {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  color: var(--fg);
  min-height: 46px;
}
.matrix-cell-link:hover { text-decoration: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.matrix-val { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- compare --- */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.picker-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.picker-item:hover { border-color: var(--accent); }
.picker-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.picker-eq { margin-left: auto; font-variant-numeric: tabular-nums; }
.compare-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.compare-card {
  display: grid;
  gap: 6px;
  align-content: start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 13px 14px;
}

/* ------------------------------------------------------------- chart ----- */
.chart-holder { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-label { fill: var(--muted); font-size: 11px; font-family: inherit; }
.crosshair { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 3; }

/* right-edge series labels — the market-chart convention: every line is
 * named where it ENDS, so the reader never has to match a colour to a
 * legend chip at the bottom of the card. The bottom legend stays where it
 * is still doing work (it is also the show/hide control). */
.chart-scale-divider { stroke: var(--line); stroke-width: 1; }
.chart-end-connector { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-end-name { font-size: 11px; font-family: inherit; font-weight: 650; }
.chart-end-value {
  font-size: 10.5px; font-family: inherit; font-weight: 500; fill: var(--dim);
  font-variant-numeric: tabular-nums;
}
.chart-end-up   { fill: var(--up); }
.chart-end-down { fill: var(--down); }
.chart-end-flat { fill: var(--dim); }

/* Small screens scale the whole SVG down, so its text is stepped up to stay
 * legible; js/components.js widens the gutters to match. */
@media (max-width: 760px) {
  .axis-label { font-size: 15px; }
  .chart-end-name { font-size: 15px; }
  .chart-end-value { font-size: 14px; }
}
.chart-tip {
  position: absolute;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  pointer-events: none;
  min-width: 160px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.tip-when { color: var(--dim); margin-bottom: 4px; }
.tip-row { display: flex; gap: 6px; align-items: center; }
.tip-val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; font-size: 12px; color: var(--dim); }
.legend-item { display: inline-flex; align-items: center; }
.chart-empty { display: grid; place-items: center; }

/* chart control area (account page): primary key, Benchmark toggle,
   comparison chips, + Add comparison. Deliberately simple — a key row, not
   a charting terminal. */
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding-bottom: 10px;
  font-size: 13px;
  color: var(--dim);
}
.chart-check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.chart-check input { cursor: pointer; }
.chart-check input:disabled { cursor: default; }
.chart-check input:disabled + span { opacity: .8; }
.chart-key {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--fg);
  font-weight: 650;
}
.key-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.key-swatch-dash {
  background: none;
  border-top: 3px dashed currentColor;
  height: 0;
}
.cmp-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-size: 12px;
  padding: 2px 6px 2px 10px;
}
.cmp-chip-x {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
}
.cmp-chip-x:hover { color: var(--fg); }
.cmp-add {
  background: var(--panel-2);
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 3px 12px;
  cursor: pointer;
}
.cmp-add:hover { color: var(--fg); border-color: var(--dim); }
.cmp-add[aria-expanded="true"] { color: var(--fg); border-style: solid; border-color: var(--dim); }
.cmp-add:disabled { opacity: .5; cursor: default; }
.cmp-limit { color: var(--muted); font-size: 12px; font-style: italic; }

/* compact comparison picker (opens under the control row) */
.cmp-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.cmp-picker .filter-bar { padding: 0 0 8px; }
.cmp-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.cmp-picker-note { color: var(--muted); font-size: 12px; padding-top: 8px; margin: 0; }

/* ------------------------------------------------------- empty states ---- */
.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  display: grid;
  gap: 6px;
  place-items: center;
}
.empty-title { color: var(--dim); font-weight: 600; }
.empty-detail { color: var(--muted); font-size: 13px; max-width: 560px; }

.problem-strip {
  border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
  color: var(--warn);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  display: grid;
  gap: 4px;
}

/* --------------------------------------------------------- responsive ---- */
@media (max-width: 720px) {
  .site-header { padding: 14px 14px 10px; flex-wrap: wrap; align-items: flex-start; }
  .brand-name { font-size: 21px; }
  .hero-slogan { font-size: 13px; letter-spacing: 1.4px; }
  .hero-sub { font-size: 10px; }
  main { padding: 14px 12px 40px; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .stat-value { font-size: 19px; }
  .model-grid, .family-grid, .account-grid, .picker-grid, .compare-cards {
    grid-template-columns: 1fr 1fr;
  }
  .detail-title { font-size: 19px; }
}
@media (max-width: 460px) {
  .model-grid, .family-grid, .account-grid, .picker-grid, .compare-cards {
    grid-template-columns: 1fr;
  }
  .status-box { text-align: left; }
}

/* ============================ shared additions ============================
 * Components introduced with Design B but shared by BOTH designs (theme
 * toggles, info tooltips, human time, About page, explainers, fixture
 * extras). Purely additive — Design A's original look is unchanged. */

/* header controls: design A/B switch + light/dark */
.header-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.ctl {
  background: var(--panel-2);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 2px 9px;
  cursor: pointer;
}
.ctl:hover { color: var(--fg); }
.ctl-on { color: var(--fg); border-color: var(--fg); }
[data-design="sharp"] .ctl { border-radius: 2px; }
[data-design="classic"] .ctl-mode { display: none; } /* Design A is dark-committed */
.brand-mark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--fg); }
.brand-name { display: inline-flex; align-items: center; gap: 10px; }

/* info affordance: one-line explanations on hover/focus */
.info {
  display: inline-block;
  position: relative;
  margin-left: 5px;
  width: 14px; height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
}
[data-design="sharp"] .info { border-radius: 2px; }
.info:hover, .info:focus-visible { color: var(--fg); border-color: var(--dim); }
.info::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 30;
}
.info:hover::after, .info:focus-visible::after { opacity: 1; }
[data-design="sharp"] .info::after { border-radius: 2px; }

/* human-friendly time + fixture DEMO marker */
.when { white-space: nowrap; }
.demo-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #ffd27a;
  background: #4a2a00;
  border: 1px solid #7a5a1a;
  border-radius: 3px;
  vertical-align: middle;
}
[data-mode="light"] .demo-tag { color: #7a5200; background: #fff3d6; border-color: #e6c980; }

/* explainer blocks (family/model/account pages) */
.explainer {
  border-left: 3px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--dim);
  max-width: 860px;
}
.explainer strong { color: var(--fg); font-weight: 650; }
.explainer a { white-space: nowrap; }
[data-design="sharp"] .explainer { border: 1px solid var(--line); border-left-width: 3px; padding: 9px 12px; font-size: 12.5px; }

/* About page */
.about { max-width: 780px; }
.about h1 { font-size: 26px; margin: 6px 0 4px; font-weight: 800; }
.about h2 { font-size: 17px; margin: 26px 0 8px; font-weight: 700; }
.about p, .about li { color: var(--dim); font-size: 14.5px; line-height: 1.65; }
.about li { margin: 4px 0; }
.about strong { color: var(--fg); font-weight: 650; }
.about .lede { font-size: 16px; color: var(--fg); }
.flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 14px 0 6px;
  max-width: 380px;
}
.flow-step {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-weight: 650;
  font-size: 13px;
  text-align: center;
}
.flow-arrow { text-align: center; color: var(--muted); font-size: 14px; padding: 1px 0; }
.about-family {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 10px 0;
}
.about-family h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--fg); }
.about-family p { margin: 0; font-size: 13.5px; }
.science-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--dim);
  font-size: 13px;
  padding: 10px 14px;
  margin-top: 22px;
  max-width: 860px;
}

/* fixture-only richness on account pages (positions/trades) reuses
   .data-table; direction words are semantic, not model-colored */
.dir-long { color: var(--up); font-weight: 650; }
.dir-short { color: var(--down); font-weight: 650; }
.decision-quote {
  border-left: 3px solid var(--line);
  color: var(--dim);
  font-size: 13.5px;
  padding: 6px 12px;
  margin: 0;
  font-style: italic;
}
@media (max-width: 720px) {
  .header-controls { justify-content: flex-start; }
  .about h1 { font-size: 21px; }
}

/* The DEV design switcher is gone (owner ruling 2026-08-15: Refined Design B
   locked as canonical; rejected designs live in git history only). */

/* legend items are now buttons (series toggles) — neutral reset shared by
   all designs; visual treatment stays per-design */
button.legend-item {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
}

/* Official-vs-classic brand mark gating: Design A keeps its hexagon; the
   official AKRA convergence mark shows in Design B (and any later design). */
.brand-mark-official { display: none; }
[data-design="sharp"] .brand-mark-classic,
[data-design="premium"] .brand-mark-classic { display: none; }
[data-design="sharp"] .brand-mark-official,
[data-design="premium"] .brand-mark-official { display: inline-block; }

/* ------------------------------------------------ Latest AI decision ----
   The decision chain. Token-only: every colour comes from the theme
   variables above, so light mode needs no second definition here. */

.dec-head {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin-bottom: 12px;
}
.dec-head-row { display: contents; }
.dec-head-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-self: center;
}
.dec-head-value {
  color: var(--fg);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dec-note { color: var(--dim); font-size: 12.5px; margin: 10px 0 0; }

.dec-pill {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
}
.dec-pill-none { color: var(--muted); font-style: italic; }
.dec-pill-ok { color: var(--dim); }
.dec-pill-fail { color: var(--down); border-color: var(--down); }

.dec-open {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
.dec-open:hover { border-color: var(--accent); }
.dec-loading { color: var(--muted); font-size: 12.5px; font-style: italic; }

.dec-record { margin-top: 14px; }
.dec-arrow {
  color: var(--muted);
  text-align: center;
  font-size: 16px;
  line-height: 1;
  margin: 2px 0;
}

.dec-stage {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 12px 14px;
}
.dec-stage-final { border-color: var(--accent); }
.dec-stage-head { display: flex; align-items: center; gap: 10px; }
.dec-stage-n {
  color: var(--muted);
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dec-stage-titles { flex: 1 1 auto; min-width: 0; }
.dec-stage-label { color: var(--fg); font-weight: 650; font-size: 13.5px; }
.dec-stage-meta { color: var(--dim); font-size: 11.5px; }
.dec-stage-what { color: var(--dim); font-size: 12px; margin: 8px 0 4px; }
.dec-attempt-label {
  color: var(--warn);
  font-size: 11.5px;
  margin: 10px 0 2px;
}

.dec-disc { border-top: 1px solid var(--line); }
.dec-disc-summary {
  color: var(--dim);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 7px 0;
  list-style: none;
}
.dec-disc-summary::-webkit-details-marker { display: none; }
.dec-disc-summary::before { content: "▸ "; color: var(--muted); }
.dec-disc[open] > .dec-disc-summary::before { content: "▾ "; }
.dec-disc-summary:hover { color: var(--fg); }
.dec-disc-body { padding: 2px 0 10px; }

.dec-sub {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 10px 0 4px;
}
.dec-absent { color: var(--muted); font-size: 12.5px; font-style: italic; margin: 4px 0; }
.dec-hash { color: var(--muted); font-size: 11px; margin: 6px 0 0; word-break: break-all; }
.dec-verdict { color: var(--fg); font-weight: 650; margin: 0; }
.dec-list { color: var(--dim); font-size: 12.5px; margin: 4px 0; padding-left: 18px; }
.dec-list li { margin-bottom: 5px; }

.dec-pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--dim);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0 0 8px;
  max-height: 420px;
  overflow: auto;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.dec-kv { display: grid; gap: 3px; }
.dec-kv-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 12px;
  justify-content: space-between;
}
.dec-kv-k { color: var(--muted); flex: none; }
.dec-kv-v { color: var(--dim); text-align: right; word-break: break-all; }

.dec-context:empty { display: none; }

@media (max-width: 560px) {
  .dec-head { grid-template-columns: 1fr; gap: 0 0; }
  .dec-head-label { margin-top: 8px; }
  .dec-kv-row { flex-direction: column; gap: 0; }
  .dec-kv-v { text-align: left; }
}

/* Round selector — the season's published decision history. */
.dec-rounds {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.dec-rounds-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dec-rounds-select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  padding: 4px 8px;
  max-width: 100%;
}
.dec-rounds-select:hover { border-color: var(--accent); }
.dec-rounds-note { color: var(--muted); font-size: 11.5px; }

/* ---------------------------------------------------- Decision journey ----
   A mechanical recap above the full record. Token-only, like the rest. */
.dec-journey {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel-2);
  margin: 12px 0;
  padding: 12px 14px;
}
.dec-journey-title {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .09em;
  margin-bottom: 10px;
}
.dec-journey-steps { display: grid; gap: 2px; }
.dec-journey-step { display: grid; gap: 2px; }
.dec-journey-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dec-journey-value { color: var(--fg); font-size: 14px; font-weight: 600; }
.dec-journey-arrow {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.1;
  margin: 4px 0 2px;
}
.dec-journey-effect {
  border-top: 1px solid var(--line);
  color: var(--fg);
  display: grid;
  font-size: 13px;
  gap: 3px;
  margin-top: 10px;
  padding-top: 9px;
}
.dec-journey .decision-quote { margin: 2px 0; }

/* Performance-detail block headings reuse .chart-what; give the repeated
   headings inside one card a little air. */
.card .chart-what + .footnote { margin-top: 2px; }
.card .stat-grid + .chart-what { margin-top: 18px; }
.card .table-wrap + .chart-what,
.card .empty-state + .chart-what { margin-top: 18px; }

/* --------------------------------------------------- market + round bar ---
   ONE compact area for the whole site: BTC now, its clearly-labelled change,
   and where the experiment is in its 4-hour cycle. It sits in the site
   chrome between the banner and the sticky navigation, so this information
   appears exactly once no matter which page is open. Token-only. */
.market-strip {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.market-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  align-items: center;
  justify-content: space-between;
}
.mk-btc { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.mk-btc-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.mk-btc-price {
  color: var(--fg);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.mk-btc-off { color: var(--muted); font-size: 16px; }
.mk-btc-change { display: inline-flex; align-items: baseline; gap: 5px; }
.mk-btc-pct { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The PERIOD is part of the figure, never optional — an unlabelled
   percentage next to a price is the thing this line exists to prevent. */
.mk-btc-period { color: var(--muted); font-size: 11px; letter-spacing: .03em; }
.mk-feed-warn { color: var(--warn); font-size: 11.5px; }

.mk-round { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.mk-round-head {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--fg); font-size: 12px; font-weight: 700; letter-spacing: .07em;
  font-variant-numeric: tabular-nums;
}
.mk-round-sep { color: var(--muted); }
.mk-round-done { color: var(--dim); }
.mk-round-run { color: var(--warn); }
.mk-round-row { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12px; }
.mk-round-k { color: var(--muted); }

@media (max-width: 720px) {
  .market-strip-inner { padding: 8px 12px; gap: 4px 14px; }
  .mk-btc-price { font-size: 18px; }
}

/* live secondary line on model/family cards */
.model-card-pnl {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---- Trader story ------------------------------------------------------- */
/* One account's season in the order it happened. AI rounds and protective
   exits are visually distinct because they are different KINDS of event: a
   stop loss is the market acting on the account, not a decision. */
.story-now {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  margin-bottom: 12px;
}
.story-now-k {
  color: var(--muted); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 3px;
}
.story-now-v { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.story-now-sub { color: var(--dim); font-size: 11.5px; margin-top: 2px; }
.story-now-pos { min-width: 170px; }

.story-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.story-modes-note, .story-loading { color: var(--muted); font-size: 11.5px; }
.story-loading { color: var(--warn); }

.story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.story-ev {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  overflow: hidden;
}
.story-ev-protective { border-left: 3px solid var(--warn); }
.story-ev-round { color: var(--muted); font-size: 11px; margin-right: 8px; letter-spacing: .05em; }
.story-ev-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--fg);
  font: inherit; padding: 9px 12px;
}
.story-ev-head:hover { background: var(--panel); }
.story-ev-when { color: var(--dim); font-size: 12px; min-width: 190px; }
.story-ev-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; flex: 1 1 auto;
}
.story-ev-pnl { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.story-ev-more { color: var(--muted); font-size: 11px; white-space: nowrap; }
.story-ev-head:hover .story-ev-more { color: var(--fg); }

.story-detail { padding: 2px 12px 12px; display: grid; gap: 10px; }
.story-kv {
  display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px;
  align-items: baseline; font-size: 13px;
}
.story-k { color: var(--muted); font-size: 11.5px; }
.story-v { font-variant-numeric: tabular-nums; }
.story-between {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-size: 12.5px; padding: 6px 9px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
}
.story-between-k {
  color: var(--warn); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.story-chain { display: grid; gap: 2px; }
.story-arrow { color: var(--muted); font-size: 12px; line-height: 1; }
.story-step { display: grid; gap: 1px; padding: 4px 0; }
.story-step-k {
  color: var(--muted); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase;
}
.story-step-v { font-size: 13.5px; }

/* DECISION -> ACTION -> RESULT. The arrow is chronology, never causation. */
.story-dar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.story-dar-cell { min-width: 0; }
.story-dar-k {
  color: var(--muted); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 3px;
}
.story-dar-v { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.story-dar-sub { color: var(--dim); font-size: 11px; }
.story-dar-arrow { color: var(--muted); align-self: center; }
.story-dar-note { grid-column: 1 / -1; margin: 0; }
.story-jump {
  justify-self: start; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--dim); cursor: pointer;
  font: inherit; font-size: 11.5px; padding: 5px 10px;
}
.story-jump:hover { color: var(--fg); border-color: var(--fg); }

/* A jump that lands somewhere says so for a moment, then gets out of the way. */
.focus-flash { animation: focus-flash 1.6s ease-out 1; }
@keyframes focus-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .focus-flash { animation: none; outline: 2px solid var(--accent); }
}

@media (max-width: 760px) {
  .story-dar { grid-template-columns: 1fr; }
  .story-dar-arrow { transform: rotate(90deg); justify-self: start; }
  .story-ev-when { min-width: 0; }
}

/* ---- what changed this round ------------------------------------------- */
.changed-body { display: grid; gap: 10px; }
.changed-counts { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; }
.changed-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.changed-n { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.changed-w { color: var(--dim); font-size: 12px; }
.changed-quiet .changed-n { color: var(--muted); font-weight: 600; font-size: 16px; }
.changed-between {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12.5px;
}
.changed-between-k {
  color: var(--warn); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.changed-movers { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.changed-mover {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); color: var(--fg); font-size: 13px;
}
.changed-mover:hover { text-decoration: none; border-color: var(--fg); }
.changed-mover-k {
  color: var(--muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
}
.changed-mover-name { font-weight: 650; }
.changed-mover-v, .changed-mover-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.changed-mover-pct { font-size: 12px; opacity: .9; }

/* ---- account ranking cards (Top 6 / Bottom 6) --------------------------- */
/* The unit of the Overview. Six across on a desktop, wrapping to 3x2 then
   2x3; names are never squeezed below legibility, the grid gives up a
   column first. Tinted by the card's OWN result via tintBox(), so a
   profitable bottom-six account is green — the heading says where it sits,
   the colour says how it is doing. */
.rank-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.rank-card {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 12px 13px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  min-width: 0;
}
.rank-card:hover {
  text-decoration: none;
  border-color: var(--fg);
}
.rank-num {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.rank-who { display: grid; gap: 1px; min-width: 0; }
.rank-model {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
}
.rank-model > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The architecture (and, for Critic, the reviewer) — secondary but always
   readable. It wraps rather than truncating: "Critic x DeepSeek" losing its
   second half would make two different accounts look identical. */
.rank-context {
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.3;
}
.rank-pct {
  font-size: 19px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.rank-money {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.rank-pos {
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}
/* Direction is not a result: on a card whose whole point is a green or red
   figure, LONG and SHORT stay neutral. */
.rank-dir { color: var(--fg); letter-spacing: .04em; }
/* The latest thing that actually happened. Never an unchanged round. */
.rank-last {
  display: grid;
  gap: 0;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.rank-last-k {
  color: var(--muted); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase;
}
.rank-last-v {
  font-size: 11.5px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-last-t { color: var(--dim); font-size: 10.5px; }
.account-card-last {
  display: grid;
  gap: 0;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  min-width: 0;
}

/* Family: kept, and deliberately quiet. One small strip, never a row of
   cards that competes with the twelve account cards above it. */
.family-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 18px;
}
.family-rank-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font-size: 13px;
}
.family-rank-item:hover { text-decoration: none; border-color: var(--fg); }
.family-rank-k {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.family-rank-name { font-weight: 650; }
.family-rank-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.family-rank-note, .family-rank-none { color: var(--muted); font-size: 11.5px; }

@media (max-width: 1100px) {
  .rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rank-model { font-size: 14px; }
  .rank-pct { font-size: 17px; }
}

/* ---- what happened this round ------------------------------------------ */
/* Facts only: where the position started, what the AI asked for, what the
   engine did. A protective exit that fired BETWEEN rounds gets its own line
   above it and is never attributed to the round. */
.dec-what {
  margin: 12px 0 4px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}
.dec-what-title {
  font-size: 10.5px; letter-spacing: .09em; color: var(--dim);
  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
}
.dec-what-rows { display: grid; gap: 4px; }
.dec-what-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dec-what-k {
  color: var(--muted); font-size: 11.5px; min-width: 118px;
}
.dec-what-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.dec-what-effect {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
}
.dec-what-sentence { font-size: 14px; }
.dec-what-between {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 9px; padding: 6px 9px; border-radius: 8px;
  font-size: 12.5px;
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
}
.dec-what-betweenk {
  color: var(--warn); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ---- simple decision view ---------------------------------------------- */
.dec-simple { margin: 14px 0 6px; }
.dec-simple-head {
  display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2);
}
.dec-simple-k {
  font-size: 10.5px; letter-spacing: .09em; color: var(--dim);
  text-transform: uppercase; margin-bottom: 3px;
}
.dec-simple-k2 {
  font-size: 10.5px; letter-spacing: .07em; color: var(--dim);
  text-transform: uppercase; margin: 10px 0 3px;
}
.dec-simple-v { font-size: 13px; }
.dec-simple-final { margin-left: auto; text-align: right; }
.dec-simple-size { color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.dec-simple-lvl {
  color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums;
}
.dec-simple-steps { margin-top: 12px; }
.dec-simple-step {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  background: var(--panel);
}
.dec-simple-steptitle {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}
.dec-simple-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  background: var(--line); color: var(--fg); font-size: 11px; font-weight: 700;
}
.dec-simple-decision {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; font-size: 14px; font-weight: 600;
}
.dec-simple-text { font-size: 13px; margin: 2px 0; white-space: pre-wrap; }
.dec-simple-change {
  font-size: 13px; margin: 8px 0 0; font-weight: 600;
}
.dec-simple-notrun {
  font-size: 13px; font-weight: 600; color: var(--warn); margin: 8px 0 2px;
}
.dec-simple-yes {
  font-size: 12.5px; font-weight: 600; color: var(--live); margin-top: 8px;
}
.dec-simple-list { margin: 4px 0 0; padding-left: 18px; }
.dec-simple-list li { font-size: 12.5px; margin: 3px 0; }
.dir-flat { color: var(--dim); }
@media (max-width: 640px) {
  .dec-simple-final { margin-left: 0; text-align: left; }
}
.dec-simple-no {
  font-size: 12.5px; font-weight: 600; color: var(--dim); margin-top: 8px;
}

/* ---- THE profit colour rule ------------------------------------------- */
/* One class set, applied to the element holding the whole value. Each number
 * is coloured by its own sign — a red open-position figure inside a green
 * total is correct, not a bug. */
.p-up   { color: var(--up); }
.p-down { color: var(--down); }
.p-zero { color: var(--fg); }
.p-none { color: var(--muted); }
.stat-value .p-up, .stat-value .p-down { color: inherit; }

/* ---- THE box tint rule -------------------------------------------------
 * `.tint-up` / `.tint-down` go on the BOX whose primary displayed
 * performance metric is positive / negative; `.tint-flat` (or no class at
 * all) leaves it neutral. One implementation, applied by js/format.js
 * boxTintClass() so a card can never disagree with its own number.
 *
 * Stat cards carry the profit classes themselves (.p-up / .p-down), so the
 * rule is stated for those too. `delta-up` / `delta-down` deliberately do
 * NOT tint: they colour a value that is not itself a profit (a count, a
 * direction), and a green box around "3 winning trades" would read as a
 * result. */
.tint-up, .stat-card.p-up {
  background: var(--tint-up-fill);
  border-color: var(--tint-up-edge);
}
.tint-down, .stat-card.p-down {
  background: var(--tint-down-fill);
  border-color: var(--tint-down-edge);
}
.tint-flat { background: inherit; }

/* ---- selectable account tiles (Compare picker, comparison picker) -------
 * A tile you can pick is still a P&L box, so it carries the tint too — at
 * the strong step, because a one-line tile has very little surface to
 * colour. The SELECTED state therefore moves entirely to the EDGE (border
 * plus an inset hairline), which stays legible on green, on red and on a
 * neutral tile alike; expressing selection as a background would have
 * fought the tint for the same pixels. */
.picker-item.tint-up   { background: var(--tint-up-fill-strong); }
.picker-item.tint-down { background: var(--tint-down-fill-strong); }
.picker-item.tint-up:hover,
.picker-item.tint-down:hover { border-color: var(--dim); }
.picker-item.picker-on {
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}

/* ---- sortable table headers -------------------------------------------- */
.th-sort { padding: 0; }
.th-sort-btn {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; padding: 9px 10px; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; text-align: inherit;
}
.data-table th.num .th-sort-btn { justify-content: flex-end; }
.th-sort-btn:hover { color: var(--fg); }
.th-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.th-arrow { color: var(--muted); font-size: 10px; opacity: .45; }
.th-arrow-on { color: var(--accent); opacity: 1; font-size: 12px; }

/* ---- the grouped profit box -------------------------------------------- */
/* Realized, open-position and total profit belong together: three detached
 * cards made the reader assemble the relationship themselves. */
.profit-box {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: stretch;
}
.profit-box-tint-up   { background: var(--tint-up-fill);   border-color: var(--tint-up-edge); }
.profit-box-tint-down { background: var(--tint-down-fill); border-color: var(--tint-down-edge); }
.profit-item { min-width: 128px; }
.profit-item-total {
  margin-left: auto; padding-left: 26px;
  border-left: 1px solid var(--line);
}
.profit-k {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 4px; display: flex; align-items: center;
  gap: 5px;
}
.profit-v { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.profit-item-total .profit-v { font-size: 23px; }
.profit-sub { font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.profit-note { flex-basis: 100%; color: var(--dim); font-size: 11.5px; margin: 2px 0 0; }
@media (max-width: 700px) {
  .profit-item-total { margin-left: 0; padding-left: 0; border-left: 0;
    border-top: 1px solid var(--line); padding-top: 12px; flex-basis: 100%; }
}
.card-line { display: block; font-size: 12px; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.card-line-k { color: var(--dim); }
.account-card-k {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-top: 8px;
}
.account-card-pos { font-size: 11.5px; margin-top: 8px; }

/* ---- chart legend: colour and name read as one unit -------------------- */
/* The marker must sit immediately beside the name it identifies, never
 * float away from it — a legend whose colour and label can be read
 * separately is not a legend. */
.chart-legend { gap: 8px 18px; align-items: center; }
button.legend-item, .chart-key, .cmp-chip, .chart-check { gap: 7px; }
.chart-legend .model-dot,
.chart-key .key-swatch,
.cmp-chip .model-dot { margin-right: 0; flex: none; }
button.legend-item { white-space: nowrap; }