/* Tora public dashboard.

   Tokens (light / dark): fog page, slate ink, muted secondary text, line hairlines, gold = XAU series only,
   cobalt = BTC series only, up / down for gains, losses and price ticks. Dark follows prefers-color-scheme.

   Layout: a single status strip across the top (wordmark, paper badge, feed / kill switch / bot / last decision).
   Under it two equal market columns, gold left and bitcoin right; each is a price block (price, day change, high / low
   on the right), a 320 px chart (240 px on phones; smooth area by default, candles on request) with a legend row,
   and Tora's latest reasoning set as serif prose with a verdict line underneath. The reasoning
   is the one loud element: everything else is small condensed sans, tabular numbers, hairlines, no boxes.
   Then the paper account curve full width, then open positions and the last 20 trades side by side. Columns
   stack under 820 px; 16 px side gutters; nothing may scroll sideways at 375 px (tables scroll in their own box).
*/

@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Newsreader-Regular.woff2") format("woff2");
}

:root {
  --fog: #EEF1F4;
  --slate: #1B2430;
  --muted: #5B6878;
  --line: #D3DAE2;
  --gold: #A87B22;
  --cobalt: #2F5FC4;
  --up: #23805F;
  --down: #B8432F;

  --sans: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --gutter: 16px;
  --col-gap: 40px;
  --chart-h: 320px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fog: #12171D;
    --slate: #E3E8EE;
    --muted: #94A1B0;
    --line: #2A333E;
    --gold: #D9A845;
    --cobalt: #7FA2F0;
    --up: #4CC08F;
    --down: #F07A63;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fog);
  color: var(--slate);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, p, ul, figure, blockquote { margin: 0; }

a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 2px; }

[hidden] { display: none !important; }

/* ---- Status strip ---- */

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.badge {
  padding: 1px 8px;
  border: 1px solid var(--slate);
  border-radius: 3px;
  font-weight: 600;
}

/* Plain sentences, no dots or separators: healthy states stay quiet ink, problems turn --down. */
.st[data-state="warn"] { color: var(--down); }
.st[data-state="bad"] { color: var(--down); font-weight: 600; }
.st[data-state="idle"], .st-quiet { color: var(--muted); }

/* ---- Page frame ---- */

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.markets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  padding: 28px 0 40px;
}

.markets[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

.market { min-width: 0; }

/* ---- Price block ---- */

.quote {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

/* Today's high and low, top right, small and quiet. */
.range {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  margin: 0;
  font-size: 0.9375rem;
  text-align: right;
}
.range div { display: contents; }
.range dt { color: var(--muted); }
.range dd { margin: 0; }

.quote h2 {
  font-size: 1.375rem;
  font-weight: 600;
}

.ticker {
  margin-left: 6px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--muted);
}

.quote-main { display: grid; gap: 4px; min-width: 0; }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }

.price-figure {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.change { font-size: 1rem; color: var(--muted); }
.change:empty { display: none; }
.price-figure.is-empty, .equity-return.is-empty { color: var(--line); }
.up { color: var(--up); }
.down { color: var(--down); }

/* The only motion on the page: the price figure tints for 200 ms when it moves. */
.price-figure.tick-up { color: var(--up); }
.price-figure.tick-down { color: var(--down); }
@media (prefers-reduced-motion: no-preference) {
  .price-figure { transition: color 200ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .price-figure.tick-up, .price-figure.tick-down { color: inherit; }
}

/* ---- Charts ---- */

.chart {
  position: relative;
  height: var(--chart-h);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.chart-equity { height: 220px; }

/* Crosshair tooltip: time range, price, and what Tora did on that bar. Positioned by app.js. */
.tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  min-width: 128px;
  padding: 7px 10px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--fog);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.tip-time { color: var(--muted); }
.tip-price { font-size: 1.0625rem; font-weight: 600; }
.tip-ohlc { color: var(--muted); white-space: pre; }
.tip-act { font-weight: 600; }

/* ---- Legend row under each chart: marker key, last price, spread, line / candles switch ---- */

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--muted);
}

.keys {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 0;
  list-style: none;
}
.key::before { margin-right: 4px; font-size: 0.75rem; }
.key-buy::before { content: "\25B2"; color: var(--up); }
.key-sell::before { content: "\25BC"; color: var(--down); }
.key-exit::before { content: "\25CF"; color: var(--slate); font-size: 0.625rem; }
.key-fig span { margin-left: 3px; color: var(--slate); }

.view {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.view button {
  min-height: 28px;
  padding: 2px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.view button[aria-pressed="true"] { background: var(--slate); color: var(--fog); }
.view button:hover:not([aria-pressed="true"]) { color: var(--slate); }

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  color: var(--muted);
  z-index: 4;
  pointer-events: none;
}

/* ---- Tora's reasoning: the hero of each column ---- */

.thought {
  margin-top: 24px;
  max-width: 68ch;
}

.reasoning {
  padding-left: 18px;
  border-left: 2px solid var(--muted);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  font-variant-numeric: normal;
  overflow-wrap: anywhere;
  hanging-punctuation: first;
}
.market[data-symbol="XAUUSD"] .reasoning { border-left-color: var(--gold); }
.market[data-symbol="BTCUSD"] .reasoning { border-left-color: var(--cobalt); }

.reasoning p::before { content: "\201C"; }
.reasoning p::after { content: "\201D"; }
.reasoning.is-placeholder { color: var(--muted); }
.reasoning.is-placeholder p::before,
.reasoning.is-placeholder p::after { content: none; }

.verdict {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 0.9375rem;
}
.verdict [data-role="verdict"] { font-weight: 600; }
.when { color: var(--muted); margin-left: 6px; }

/* ---- Paper account ---- */

.equity {
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 12px;
}

.section-head h2, .book h2 {
  font-size: 1.125rem;
  font-weight: 600;
}

.equity-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.equity-return { font-size: 1.75rem; font-weight: 600; line-height: 1; }
.equity-note, .equity-abs { color: var(--muted); }

/* ---- Positions and trades ---- */

.books {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  padding: 28px 0 48px;
  border-top: 1px solid var(--line);
}

.book { min-width: 0; }
.book h2 { margin-bottom: 10px; }

.table-wrap { overflow-x: auto; }

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.ledger th {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--slate);
  font-weight: 400;
  color: var(--muted);
  text-align: left;
}

.ledger td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--line);
}

.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger .num { text-align: right; }
.ledger .sym-XAUUSD { box-shadow: inset 2px 0 0 var(--gold); padding-left: 8px; }
.ledger .sym-BTCUSD { box-shadow: inset 2px 0 0 var(--cobalt); padding-left: 8px; }
.ledger .soft { color: var(--muted); }

.empty-row { padding: 14px 0; color: var(--muted); }

/* ---- Footer ---- */

.foot {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px var(--gutter) 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}
.foot p { max-width: 90ch; }
.foot p + p { margin-top: 6px; }

/* ---- Narrow screens ---- */

@media (max-width: 819.98px) {
  :root { --chart-h: 240px; --col-gap: 0px; }
  .markets { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 20px; }
  .market + .market { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
  .market[hidden] + .market { margin-top: 0; padding-top: 0; border-top: 0; }
  .books { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .price-figure { font-size: 2rem; }
  .reasoning { font-size: 1.15rem; }
  .chart-equity { height: 180px; }
}

@media (max-width: 520px) {
  /* Keep the result columns on screen: stop, target and trade entry are the first to go. */
  .ledger .opt { display: none; }
}

@media (max-width: 420px) {
  .strip { gap: 6px 16px; }
  .status { gap: 4px 14px; font-size: 0.875rem; }
}