/* Terminal — the look of the public page (landing.html), applied to the app.
 * Hallmark · genre: atmospheric · theme: Terminal · anchor hue: amber 80°
 *
 * Near-black paper, Space Grotesk for words, JetBrains Mono for every number,
 * one amber accent, phosphor-green / hot-red candles, hairlines and one thick
 * amber rule under the active tab. Overrides the :root variables style.css
 * defines; layout is untouched on purpose — a beginner should find every
 * control where the Guide says it is. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --bg: #0f1319;
  --panel: #161b23;
  --panel-2: #1e242e;
  --line: #2b3442;
  --text: #e6ebf2;
  --muted: #94a0b0;
  --accent: #f2b544;
  --accent-ink: #1f1607;
  --long: #3fdc9a;
  --short: #f0524f;
  --warn: #f2b544;
  --good: #3fdc9a;
  --bad: #f0524f;
  --radius: 3px;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

body {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color-scheme: dark;
}

/* Numbers, codes, times and symbols: always mono, always tabular. */
.chip, .score-value, .score-sub, .stat-value, .tf, input.tf-custom, .badge, .tag,
.ov-legend, .ov-risk, .measure-label, .storage-box, .k, td.num, .num, .qv-facts,
.qv-chip, .rc-facts, .timeline, .tl-time, .cal-day, .cal-dow, .acct-risk,
.strategy-pick select, .ag-code, code, pre, .position, .orders, .order-line,
input[type=number], input[type=date], input[type=time] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- top bar: a prompt, not a toolbar ---- */
.topbar { background: var(--bg); border-bottom: 1px solid var(--line); height: 46px; gap: 14px; }
.brand { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .02em; text-transform: lowercase; }
.brand::before { content: "> "; color: var(--accent); }
.brand span { color: var(--text); }
.tabs { gap: 2px; align-self: stretch; }
.tab {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 400;
  border-radius: 0; padding: 0 10px; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab::before { content: "--"; color: var(--line); margin-right: 1px; }
.tab:hover { background: transparent; color: var(--text); }
.tab.active { background: transparent; color: var(--text); border-bottom-color: var(--accent); }
.tab.active::before { color: var(--accent); }
.badge { border-radius: var(--radius); font-size: 11px; }
.badge.ok { border-color: var(--line); }
.badge.bad { border-color: var(--line); }

/* ---- surfaces ---- */
.card, .modal-card, .scorebox, .sizing, .storage-box, .cal-pop, .draw-pop, .ov-menu, .toast {
  border-radius: var(--radius);
}
.card { background: var(--panel); border: 1px solid var(--line); }
h2 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: -.02em;
}
.hint { color: var(--muted); }
.lbl, label.lbl, .field label, .jc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; text-transform: none; }
.side-tabs { border-bottom: 1px solid var(--line); }
.stab { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }

/* ---- controls ---- */
input[type=text], input[type=number], input[type=date], input[type=time], select, textarea {
  border-radius: var(--radius); background: var(--bg); border-color: var(--line);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.btn { border-radius: var(--radius); font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.btn:hover:not(:disabled) { border-color: var(--muted); background: var(--panel-2); }
.btn.primary, .btn.opt.sel, .tf.active, input.tf-custom.active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700;
}
.btn.primary:hover:not(:disabled) { background: #f7c465; }
.btn.long { color: #04211d; } .btn.short { color: #2a0a09; }
.btn.pass { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.btn.danger { border-color: var(--line); color: var(--bad); }
.seg-btn, .tf { border-radius: var(--radius); }

/* ---- scoreboard: process first, dollars smallest (unchanged rule) ---- */
.score-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.score-value.pos { color: var(--long); }
.score-value.neg { color: var(--short); }

/* ---- chart overlay ---- */
.ov-toolbar, .ov-ticket, .ov-legend { border-radius: var(--radius); }
.tag { border-radius: 2px; }
.tag.sl { background: #a8332f; }
.tag.tp { background: #1f8f66; }
.tag.entry { background: #b98424; }
.tag.entry.sell { background: #8a3f9c; }
.ov-btn.buy { background: #1f8f66; }
.ov-btn.sell { background: #c9403c; }
.measure-label { background: #b98424; color: var(--accent-ink); }
.measure-label.neg { background: #a8332f; color: #fff; }

/* ---- tables ---- */
.table-wrap table { font-size: 12.5px; }
.table-wrap th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.table-wrap td { border-color: var(--line); }

/* ---- thick amber rule = the one decoration ---- */
.resume-bar, .outcome-banner { border-left: 6px solid var(--accent); border-radius: var(--radius); }
.qv-warn, .sizing.bad { border-color: var(--line); }

::selection { background: #f2b54455; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The theme picker (built by theme.js) inherits the app's controls. */
.theme-pick { font-family: var(--font-mono); }

/* style.css hard-codes the old blue on these; the theme takes them back. */
.seg-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.strategy-pick select:focus, .scale input:focus { border-color: var(--accent); }
.stg.current, .qv-item.active, .qv-item:hover { border-color: var(--accent); }
.eq-line { stroke: var(--accent); }
.tf-typed, .stg-badge { background: var(--accent); color: var(--accent-ink); }
.stg.current { background: var(--panel-2); }