/* Shared look for every FastAPI desk page, on the hub's "Desk" tokens.

   The tokens themselves (--d-bg, --d-surface, --d-ink, ... in a light and a dark set) are
   injected into every page by shared/desk.py, together with the top bar and its theme toggle,
   so this sheet only says which token each piece uses. Same class names as before.

   ⚠No web-font @import: the box may have no outbound HTTP. System fonts only. */

:root {
  /* old names, kept so page-level CSS that still uses them follows the theme */
  --bg0: var(--d-bg); --bg1: var(--d-bg);
  --card: var(--d-surface);
  --line: var(--d-rule); --line2: var(--d-rule-2);
  --fg: var(--d-ink-2); --fg-hi: var(--d-ink); --muted: var(--d-muted); --dim: var(--d-muted);
  --teal: var(--d-up); --teal-hi: var(--d-up); --blue: var(--d-accent); --blue-hi: var(--d-accent);
  --gold: var(--d-warn); --red: var(--d-down); --green: var(--d-up);
  --mono: var(--d-mono);
  --sans: var(--d-sans);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--d-bg); }
body { font-family: var(--d-sans); color: var(--d-ink-2); font-size: 15px; line-height: 1.5; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1.5rem 2rem; }
a { color: var(--d-accent); }
code { font-family: var(--d-mono); font-size: 0.9em; color: var(--d-ink);
       background: var(--d-sunk); border: 1px solid var(--d-rule); padding: 0 5px; border-radius: 3px; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { margin: 0 0 1.3rem; padding: 1.4rem 1.6rem; border-radius: 4px;
        background: var(--d-surface); border: 1px solid var(--d-rule-2); }
.hero h1 { font: 800 1.9rem/1.1 var(--d-sans); letter-spacing: -0.03em; margin: 0; color: var(--d-ink); }
.hero .sub { margin-top: 8px; color: var(--d-ink-2); font-size: 0.95rem; max-width: 90ch; }
.chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 9px; border-radius: 3px; font: 600 0.72rem/1.3 var(--d-sans); letter-spacing: .04em;
        border: 1px solid var(--d-rule-2); background: var(--d-sunk); color: var(--d-ink-2); }
.chip.accent { color: var(--d-up); border-color: color-mix(in srgb, var(--d-up) 45%, var(--d-rule)); }
.chip.blue   { color: var(--d-accent); border-color: color-mix(in srgb, var(--d-accent) 45%, var(--d-rule)); }
.chip.gold   { color: var(--d-warn); border-color: color-mix(in srgb, var(--d-warn) 45%, var(--d-rule)); }

/* ── Sections ─────────────────────────────────────────────────── */
.section-title { margin: 1.6rem 0 0.6rem; padding-top: 10px; border-top: 1px solid var(--d-rule-2);
  color: var(--d-ink); font: 700 0.72rem/1 var(--d-sans); text-transform: uppercase; letter-spacing: 0.1em; }
.caption { color: var(--d-muted); font-size: 0.82rem; margin: 0.3rem 0 0.5rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }

/* ── Callouts: a coloured left rule on a quiet panel ──────────── */
.warn-note, .focus-note, .info-note, .ok-note, .error-note {
  margin: 6px 0 14px; padding: 10px 14px; border-radius: 0 4px 4px 0; font-size: 14px; line-height: 1.55;
  background: var(--d-sunk); border: 1px solid var(--d-rule); border-left: 2px solid var(--d-rule-2); color: var(--d-ink-2);
}
.warn-note  { border-left-color: var(--d-warn); }
.focus-note { border-left-color: var(--d-accent); }
.ok-note    { border-left-color: var(--d-up); }
.error-note { border-left-color: var(--d-down); color: var(--d-down); }
.warn-note b, .focus-note b, .info-note b, .ok-note b { color: var(--d-ink); }

/* ── Metric cards ─────────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0;
           background: var(--d-surface); border: 1px solid var(--d-rule-2); border-radius: 4px; overflow: hidden; }
.metric { padding: 14px 18px; border-right: 1px solid var(--d-rule); border-bottom: 1px solid var(--d-rule); margin: 0 -1px -1px 0; }
.metric .label { color: var(--d-muted); text-transform: uppercase; font: 600 0.68rem/1.2 var(--d-sans); letter-spacing: 0.09em; }
.metric .value { color: var(--d-ink); font: 700 1.6rem/1.1 var(--d-mono); letter-spacing: -0.02em; margin-top: 6px;
                 font-variant-numeric: tabular-nums; }
.metric .delta { font-size: 0.8rem; font-family: var(--d-mono); margin-top: 2px; }
.metric .delta.up { color: var(--d-up); } .metric .delta.down { color: var(--d-down); }

/* ── Inputs ───────────────────────────────────────────────────── */
label.field { display: flex; flex-direction: column; gap: 5px; color: var(--d-muted);
              font: 600 0.7rem/1.2 var(--d-sans); letter-spacing: .07em; text-transform: uppercase; }
select, input[type=text], input[type=number], input[type=date], input[type=search] {
  background: var(--d-surface); border: 1px solid var(--d-rule-2); color: var(--d-ink);
  border-radius: 4px; padding: 7px 10px; font: inherit; font-size: 0.9rem; min-width: 160px;
  text-transform: none; letter-spacing: normal;
}
input[type=range] { accent-color: var(--d-accent); height: 30px; }
select:focus, input:focus { border-color: var(--d-accent); outline: none; }
.pills { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--d-rule-2); border-radius: 4px; overflow: hidden; }
.pills button { background: var(--d-surface); border: 0; border-right: 1px solid var(--d-rule); color: var(--d-ink-2);
  padding: 7px 14px; border-radius: 0; font: 600 0.85rem/1.2 var(--d-sans); cursor: pointer; }
.pills button:last-child { border-right: 0; }
.pills button:hover { background: var(--d-sunk); }
.pills button.on { background: var(--d-ink); color: var(--d-surface); }
.btn { background: var(--d-surface); border: 1px solid var(--d-rule-2); color: var(--d-ink);
  padding: 7px 14px; border-radius: 4px; font: 600 0.85rem/1.2 var(--d-sans); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--d-ink); }
.btn.primary { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-surface); }
.btn.primary:hover { background: var(--d-accent); border-color: var(--d-accent); color: var(--d-accent-ink); }

/* ── Tables ───────────────────────────────────────────────────── */
.tbl-wrap { border: 1px solid var(--d-rule-2); border-radius: 4px; overflow: auto; background: var(--d-surface); }
.tbl-wrap.scroll { max-height: 460px; }
table.iq { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
table.iq th, table.iq td { padding: 7px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--d-rule); }
table.iq th { position: sticky; top: 0; background: var(--d-sunk); color: var(--d-muted); z-index: 1;
              font: 600 11px/1.2 var(--d-sans); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; user-select: none; }
table.iq th.sorted-asc::after  { content: " ↑"; color: var(--d-accent); }
table.iq th.sorted-desc::after { content: " ↓"; color: var(--d-accent); }
table.iq td.num, table.iq th.num { text-align: right; font-family: var(--d-mono); }
table.iq tbody tr:hover { background: var(--d-sunk); }
table.iq.clickable tbody tr { cursor: pointer; }
table.iq tbody tr.sel { background: color-mix(in srgb, var(--d-accent) 12%, var(--d-surface)); box-shadow: inset 2px 0 0 var(--d-accent); }
td.pos { color: var(--d-up); } td.neg { color: var(--d-down); }
td.tag-buy, td.tag-win { color: var(--d-up); font-weight: 700; }
td.tag-sell, td.tag-loss { color: var(--d-down); font-weight: 700; }
td.tag-open { color: var(--d-warn); font-weight: 600; }
td.tag-purple { color: var(--d-violet); font-weight: 700; }
td.tag-cyan { color: var(--d-cyan); font-weight: 600; }
td.sym { font-weight: 700; color: var(--d-ink); }
.tbl-foot { color: var(--d-muted); font-size: 12px; padding: 6px 2px; }

/* ── Chart ────────────────────────────────────────────────────── */
.chart-card { border: 1px solid var(--d-rule-2); border-radius: 4px; overflow: hidden; background: var(--d-surface); }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--d-ink-2); padding: 6px 2px 10px; }

/* ── Expanders ────────────────────────────────────────────────── */
details { margin: 10px 0; border: 1px solid var(--d-rule-2); border-radius: 4px; background: var(--d-surface); }
details > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--d-ink); }
details[open] > summary { border-bottom: 1px solid var(--d-rule); }
details > .body { padding: 10px 16px 12px; font-size: 14px; color: var(--d-ink-2); }

/* ── Misc ─────────────────────────────────────────────────────── */
.card { padding: 14px 18px; border: 1px solid var(--d-rule-2); border-radius: 4px; background: var(--d-surface); }
.loading { color: var(--d-muted); font-size: 13px; padding: 12px 0; }
.footer-meta { margin-top: 2rem; padding: 0.9rem 0; border-top: 1px solid var(--d-rule-2);
               color: var(--d-muted); font-size: 0.78rem; letter-spacing: 0.02em; }

@media (max-width: 768px) {
  .wrap { padding: 0.75rem 0.75rem 1.5rem; }
  .hero { padding: 16px; }
  .hero h1 { font-size: 1.5rem; }
  .hero .sub { font-size: 13px; }
  .grid2 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric .value { font-size: 1.3rem; }
  .chart-legend { gap: 8px 14px; line-height: 1.6; }
}