/* Light, quiet, generous. Type and space carry the hierarchy; colour is used
   only where it means something: a series, a status, or the sign of a number. */
:root {
  color-scheme: light;
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --line: #e6e6ea;
  --ink: #1d1d1f;
  --ink-2: #4b4b51;
  --ink-3: #86868b;
  --accent: #0066cc;
  --good: #0ca30c;
  --critical: #d03b3b;
  --warning: #fab219;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #000000;
    --surface: #161617;
    --surface-2: #1f1f21;
    --line: #2a2a2d;
    --ink: #f5f5f7;
    --ink-2: #c9c9ce;
    --ink-3: #86868b;
    --accent: #2997ff;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
b, strong { font-weight: 600; }
.mono, table, .log, .figure, .value { font-variant-numeric: tabular-nums; }

/* ---- header ---------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.bar, .tabs, main, footer { max-width: 1040px; margin: 0 auto; padding-inline: 22px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
       padding-block: 14px; flex-wrap: wrap; }
.lead, .trail { display: flex; align-items: center; gap: 10px; }
.wordmark { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.chip.live { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.chip.stale { background: color-mix(in srgb, var(--warning) 22%, transparent); color: #8a5a00; }
.chip.down { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .chip.stale { color: var(--warning); }
}
.who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.who .signout { color: var(--accent); text-decoration: none; }
.who .signout:hover { text-decoration: underline; }
.clocks { display: flex; gap: 14px; }
.clocks span { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.clocks b { font-size: 14px; font-variant-numeric: tabular-nums; }
.clocks i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.tabs { display: flex; gap: 4px; padding-bottom: 10px; }
.tabs button {
  font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 0;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.tabs button.on { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.tab-count { color: var(--ink-3); font-weight: 400; }

/* ---- message feed ------------------------------------------------------ */
.feed { display: grid; gap: 10px; margin-top: 14px; }
.msg {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; max-width: 760px;
}
.msg.failed { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }
.msg .meta {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3); margin-bottom: 4px;
}
.msg .body {
  margin: 0; font: inherit; font-size: 13px; white-space: pre-wrap; word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.msg .tagline { font-size: 12px; margin-top: 6px; }
.msg .body b { font-weight: 600; }
.msg .body code, .msg .body pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.msg .body pre { margin: 4px 0; white-space: pre-wrap; }
.msg .body blockquote {
  margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--line); color: var(--ink-2);
}
.msg .body a { color: var(--accent); }
.msg .body .spoiler {
  background: var(--ink-3); color: transparent; border-radius: 4px;
}
.msg .body .spoiler:hover, .msg .body .spoiler:focus { background: none; color: inherit; }
.badge {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-3);
}
.badge.bad { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, var(--line)); }
@media (max-width: 640px) { .msg { max-width: 100%; } }

/* ---- layout ---------------------------------------------------------- */
main { padding-block: 28px 40px; display: grid; gap: 20px; }
.tab { display: grid; gap: 20px; }
.tab[hidden] { display: none; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
}
/* Two charts side by side when there is room for both to stay readable, and one
   per row when there is not. 900px is where the narrower of the two starts to
   crowd its labels. */
.charts-row { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .charts-row { grid-template-columns: 1fr 1fr; }   /* equal height, so the row reads as one band */
}
.charts-row .card { min-width: 0; }        /* a grid child may shrink below its content */

.card-head { margin-bottom: 14px; }
button.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  width: 100%; padding: 0; border: 0; background: none; text-align: left;
  cursor: pointer; color: inherit; font: inherit;
}
button.card-head:hover .chevron { color: var(--ink); }
.toggle-text { display: block; }
.chevron {
  flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3);
  transition: transform .18s ease;
}
.chevron::before {
  content: ""; display: block; width: 9px; height: 9px; margin: 3px auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.collapsible.closed .chevron { transform: rotate(-90deg); }
.collapsible.closed .card-head { margin-bottom: 0; }
.card h2 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.sub { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
.count { color: var(--ink-3); font-weight: 400; }

/* ---- hero ------------------------------------------------------------ */
.hero { display: grid; gap: 18px; grid-template-columns: minmax(220px, 1fr) 2fr; align-items: center; }
.headline { display: grid; gap: 2px; }
.eyebrow { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.figure { font-size: clamp(38px, 7vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.caption { font-size: 12px; color: var(--ink-3); }
/* The KPI row follows the charts' rule: four across when there is room, two when
   there is not, one when the screen is very narrow. */
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* The ladder follows the space the tiles actually get, which jumps when the hero
   stops sitting beside them at 860px:
     wide            4 across
     1080 and under  2 across (the hero still takes a third of the row)
     860 and under   4 across (the hero has stacked, so the tiles have it all)
     600 and under   2 across
     420 and under   1 */
@media (max-width: 1080px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .hero-stats { grid-template-columns: 1fr; } }
.stat { min-width: 0; }
.stat .value { overflow-wrap: anywhere; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.stat .label { font-size: 12px; color: var(--ink-3); }
.stat .value { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-top: 2px; }
.stat .foot { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.neg { color: var(--critical); }
.pos { color: var(--good); }

/* ---- charts ---------------------------------------------------------- */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.axis-text { fill: var(--ink-3); font-size: 11px; }
.series-label { fill: var(--ink-2); font-size: 12px; }
.value-label { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.crosshair { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.tooltip {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); color: var(--ink);
  max-width: 240px;
}
.tooltip b { display: block; font-size: 13px; }

/* ---- tables ---------------------------------------------------------- */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child, th.l, td.l { text-align: left; }
th { font-weight: 500; color: var(--ink-3); font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }

/* ---- grouped tables --------------------------------------------------- */
/* A group header names the strategy; a subtotal closes it. Both are furniture
   and must not read as a trade, so the header borrows the column-header weight
   and the subtotal is separated by a rule rather than by colour alone. */
tr.group td {
  padding-top: 16px; padding-bottom: 4px; border-bottom: 0;
  color: var(--ink-3); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase;
}
tr.group:first-child td { padding-top: 2px; }
tr.subtotal td {
  border-top: 1px solid var(--line); border-bottom: 0;
  font-weight: 500; color: var(--ink-2);
}
tr.subtotal td:first-child { color: var(--ink); }

/* ---- a control strip above a table ------------------------------------ */
.table-controls { display: flex; justify-content: flex-end; padding: 0 0 10px; }
.checkline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none;
}
.checkline input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--ink-2); }

/* ---- controls -------------------------------------------------------- */
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.action {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: var(--accent); color: #fff; font-weight: 500;
  text-decoration: none;                     /* the same pill whether button or link */
}
.action.secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.action.danger { background: var(--critical); color: #fff; }
.action:disabled { opacity: .45; cursor: default; }
a.action:hover { background: var(--line); }
.note { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }
.note.neg { color: var(--critical); }

.row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.row:last-child { border-bottom: 0; }
.row .name { font-weight: 500; }
.row .meta { font-size: 12px; color: var(--ink-3); }
.row .right { display: flex; align-items: center; gap: 10px; }
.group-label {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin: 16px 0 2px;
}
.group-label:first-child { margin-top: 0; }
input[type="number"], input[type="text"] {
  font: inherit; font-size: 14px; width: 108px; text-align: right;
  padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
}
.switch { position: relative; width: 46px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; z-index: 2; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); transition: background .18s ease;
}
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.switch input:checked + span { background: var(--good); border-color: transparent; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:disabled + span { opacity: .45; }

.log { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.log li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }
.log li:last-child { border-bottom: 0; }
.log .when { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.empty { color: var(--ink-3); font-size: 13px; padding: 6px 0; }

/* ---- the chart panel -------------------------------------------------- */
#chart-card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
#chart-card .card-head .buttons { flex: none; }
a.action { text-decoration: none; display: inline-flex; align-items: center; }
/* A fixed height, because the widget sizes itself to its container and a
   container that starts at zero gets a chart one pixel tall. */
.tv { height: 520px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.tv .tradingview-widget-container,
.tv .tradingview-widget-container__widget { height: 100%; }
.tv iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .tv { height: 380px; } }
.footnote { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* A symbol you can click. Underlined on hover only, so the tables stay quiet. */
.sym {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.sym:hover, .sym:focus-visible { text-decoration-color: currentColor; }
.sym.on { font-weight: 600; }
.action.more { margin-top: 12px; font-size: 13px; padding: 7px 14px; }
footer { padding-block: 22px 40px; color: var(--ink-3); font-size: 12px; text-align: center; }

/* ---- narrower screens -------------------------------------------------
   Three steps: the hero stacks, then the header compacts, then the tables
   stop being tables and become one block per row. */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bar, .tabs, main, footer { padding-inline: 16px; }
  .bar { padding-block: 10px; gap: 8px; }
  .lead, .trail { gap: 8px; flex: 1 1 auto; }
  .trail { justify-content: space-between; }
  .clocks { gap: 12px; }
  main { padding-block: 18px 28px; gap: 14px; }
  .charts-row { gap: 14px; }
  .card { padding: 16px; border-radius: 14px; }
  .figure { font-size: clamp(32px, 11vw, 44px); }
  .hero-stats { gap: 10px; }
  .tabs button { padding: 7px 12px; }
  .row { align-items: flex-start; }
  .row .right { width: 100%; justify-content: flex-end; }
  input[type="number"], input[type="text"] { width: 92px; }

  /* a table with eight columns cannot be read on a phone: stack it */
  .scroll table, .scroll thead, .scroll tbody, .scroll tr, .scroll td { display: block; width: 100%; }
  .scroll thead { position: absolute; left: -9999px; }      /* headers move onto the cells */
  .scroll tr {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 6px 12px; margin-bottom: 10px;
  }
  .scroll tbody tr:last-child { margin-bottom: 0; }
  .scroll td {
    display: flex; justify-content: space-between; gap: 14px;
    text-align: right; padding: 5px 0; border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .scroll tr td:last-child { border-bottom: 0; }
  .scroll td::before {
    content: attr(data-label);
    color: var(--ink-3); font-size: 12px; text-align: left; flex: none;
  }
  .scroll td.l { text-align: right; }
  .scroll td.minor { display: none; }   /* detail that does not survive a phone */
  /* Stacked, every cell prints its label. A subtotal's empty cells would then
     read as six blank rows of "Entry —", so the furniture drops them. */
  .scroll td.blank { display: none; }
  .scroll tr.group td, .scroll tr.subtotal td { border-bottom: 0; }
  .scroll tr.group td::before { content: none; }
  .scroll tr.group td { justify-content: flex-start; padding-top: 14px; }
  .scroll tr.subtotal td:first-child::before { content: none; }
  .scroll tr.subtotal { display: block; border-top: 1px solid var(--line); margin-top: 6px; }
  .log li { gap: 6px; }
}
@media (max-width: 380px) {
  .clocks i { display: none; }
}

.log .warn { color: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .log .warn { color: var(--warning); }
}