/* Tradabase — terminal styles. Tokens and rules follow the build spec
   (scratch/design-spec.md §9): dark, dense, hairlines, no cards, no
   shadows, system fonts, every number mono + tabular. */

:root {
  color-scheme: dark;
  --bg-0: #07090D; --bg-1: #0C0F15; --bg-2: #12161E; --bg-3: #181D27;
  --line: #1F2531; --line-strong: #2C3442;
  --ink-0: #E6EAF2; --ink-1: #AEB6C6; --ink-2: #7A8498; --ink-3: #4E5768;
  --bull: #19C37D; --bear: #F0464D; --mixed: #E8A317; --neutral: #7A8498;
  --bull-dim: rgba(25,195,125,.12); --bear-dim: rgba(240,70,77,.12); --mixed-dim: rgba(232,163,23,.12);
  --accent: #4F8CFF; --accent-dim: rgba(79,140,255,.14);
  --thesis: #A78BFA; --thesis-dim: rgba(167,139,250,.14);
  --warn: #F59E0B; --wl: #F5C451;
  --live: #22D3EE; --live-poll: #F59E0B; --live-down: #F0464D;
  --src-0: #9AA5B8; --src-1: #5B9CFF; --src-2: #36C5C1; --src-3: #FF8A5B; --src-4: #A78BFA;
  --src-5: #E879A9; --src-6: #7DD3FC; --src-7: #BEF264;
  --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --h-status: 36px; --h-pane-head: 28px; --h-filter: 32px; --h-row: 32px; --h-tape-row: 56px; --h-book-row: 28px;
  --r-chip: 3px;
}
@media (pointer: coarse), (max-width: 899px) {
  :root { --h-row: 44px; --h-tape-row: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: opacity .3s !important; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg-0); color: var(--ink-0); font: 13px/18px var(--font-ui); overflow: hidden; }
@media (max-width: 899px) { body { font-size: 14px; line-height: 20px; } }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.mono, [data-mono] { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }
.ink-1 { color: var(--ink-1); } .ink-2 { color: var(--ink-2); } .ink-3 { color: var(--ink-3); }
.c-bull { color: var(--bull); } .c-bear { color: var(--bear); } .c-mixed { color: var(--mixed); } .c-neutral { color: var(--neutral); }
.c-warn { color: var(--warn); } .c-wl { color: var(--wl); } .c-thesis { color: var(--thesis); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- app frame ---------- */
.app { display: grid; grid-template-rows: var(--h-status) 1fr; grid-template-columns: minmax(0, 1fr); height: 100dvh; }   /* nothing in a row may widen the page */
.app[data-gated] > :not(#tb-status):not(#tb-gate) { display: none; }
.pane { background: var(--bg-1); min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.pane:last-child { border-right: 0; }
.pane-head { height: var(--h-pane-head); display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); border-bottom: 1px solid var(--line); background: var(--bg-1); position: sticky; top: 0; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); flex: none; }
.pane-head .label { color: var(--ink-1); }
.pane-head .spacer, .spacer { flex: 1; }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; }
.filter-bar { height: var(--h-filter); display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--ink-2); flex: none; overflow-x: auto; }
.disclaimer { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.disclaimer .d-short { display: none; }

/* ---------- status bar ---------- */
#tb-status { height: var(--h-status); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); background: var(--bg-1); border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.wordmark { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-0); font-weight: 600; }
.wordmark b { color: var(--accent); font-weight: 600; }
.nav { display: flex; gap: 2px; margin-left: var(--s2); min-width: 0; overflow-x: auto; scrollbar-width: none; }   /* shrinks before the menu is pushed off */
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; }
.nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 0 var(--s2); height: var(--h-status); line-height: var(--h-status); border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink-0); }
.nav a.active { color: var(--ink-0); border-bottom-color: var(--accent); }
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-1); }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.live[data-state="live"] .dot { background: var(--live); }
.live[data-state="live"] .dot.pulse { animation: dblpulse .3s ease-out 2; }
.live[data-state="poll"] .dot, .live[data-state="stale"] .dot { background: var(--live-poll); }
.live[data-state="offline"] .dot { background: var(--live-down); }
@keyframes dblpulse { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 100% { transform: scale(1); } }
.clock { font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.newcount { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.spend { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.spend b { color: var(--ink-0); font-weight: 500; }
.search { position: relative; width: 220px; }
#tb-status .search { flex: 0 1 220px; min-width: 120px; }
#tb-status > * { flex-shrink: 0; }
#tb-status > .nav, #tb-status > .search { flex-shrink: 1; }
.search input { width: 100%; height: 24px; padding: 0 var(--s2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-chip); font-family: var(--font-mono); font-size: 12px; color: var(--ink-0); }
.search input::placeholder { color: var(--ink-3); }
.search .menu { position: absolute; top: 26px; left: 0; right: 0; background: var(--bg-3); border: 1px solid var(--line-strong); z-index: 20; max-height: 280px; overflow: auto; }
.search .menu div { display: flex; gap: var(--s2); padding: 5px var(--s2); font-size: 12px; cursor: pointer; }
.search .menu div.sel, .search .menu div:hover { background: var(--bg-2); }
.search .menu .t { font-family: var(--font-mono); width: 62px; color: var(--ink-0); }
.search .menu .n { flex: 1; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search .menu .x { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.menu-btn { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); padding: 0 var(--s2); height: 24px; border: 1px solid var(--line); border-radius: var(--r-chip); }
.menu-btn:hover { color: var(--ink-0); border-color: var(--line-strong); }
.acct { position: relative; }
.acct .menu { position: absolute; right: 0; top: 28px; background: var(--bg-3); border: 1px solid var(--line-strong); z-index: 20; min-width: 140px; }
.acct .menu button, .acct .menu a { display: block; width: 100%; text-align: left; padding: 6px var(--s3); font-size: 12px; color: var(--ink-1); }
.acct .menu a.mobile-only { display: none; }
@media (max-width: 899px) { .acct .menu a.mobile-only { display: block; } #tb-status .acct { display: block; } }
.acct .menu button:hover { background: var(--bg-2); color: var(--ink-0); }

/* ---------- sign-in gate ---------- */
#tb-gate { display: grid; place-items: center; background: var(--bg-0); }
#tb-gate form { width: 360px; max-width: calc(100vw - 32px); background: var(--bg-1); border: 1px solid var(--line); padding: var(--s6); }
#tb-gate h1 { margin: 0 0 2px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; }
#tb-gate p { margin: 0 0 var(--s4); color: var(--ink-2); font-size: 12px; }
#tb-gate label { display: block; font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin: var(--s3) 0 var(--s1); }
#tb-gate input { width: 100%; height: 32px; padding: 0 var(--s2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--ink-0); }
#tb-gate button { width: 100%; height: 32px; margin-top: var(--s4); background: var(--accent); color: #fff; border-radius: var(--r-chip); font-weight: 600; }
#tb-gate button[disabled] { opacity: .6; }
#tb-gate .err { min-height: 18px; margin-top: var(--s2); font-size: 12px; color: var(--warn); }
#tb-gate .foot { margin-top: var(--s4); font-size: 11px; color: var(--ink-3); }

/* ---------- chips, glyphs, bars, cells ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-chip); font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); white-space: nowrap; }
.src { --c: var(--src-0); border-color: var(--c); color: var(--ink-0); background: color-mix(in srgb, var(--c) 18%, transparent); }
.src.off { background: none; border-color: var(--line); color: var(--ink-3); }
.src.strike { text-decoration: line-through; }
.src .err { position: absolute; top: -2px; right: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--warn); }
.src { position: relative; }
.glyph { font-family: var(--font-mono); font-size: 12px; }
.glyph.bullish { color: var(--bull); } .glyph.bearish { color: var(--bear); } .glyph.mixed { color: var(--mixed); } .glyph.neutral { color: var(--neutral); }
.bar { display: inline-flex; gap: 1px; vertical-align: middle; }
.bar i { display: block; width: 6px; height: 10px; background: var(--bg-3); }
.bar i.on { background: var(--ink-1); }
.bar i.on.hi { background: var(--accent); }
.bar.q i.on { background: var(--thesis); }
.tk { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px 0 5px; border: 1px solid var(--line); border-left: 3px solid var(--neutral); border-radius: var(--r-chip); font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); white-space: nowrap; }
.tk.primary { border-color: var(--line-strong); color: var(--ink-0); }
.tk.primary.bullish, .tk.bullish { border-left-color: var(--bull); }
.tk.bearish { border-left-color: var(--bear); }
.tk.mixed { border-left-color: var(--mixed); }
.tk .sfx { font-size: 9px; color: var(--ink-3); }
.tk .wl { width: 5px; height: 5px; border-radius: 50%; background: var(--wl); }
.tk .ret { font-size: 11px; }
.tk:hover { border-color: var(--line-strong); color: var(--ink-0); }
.ret { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ret.pos { color: var(--bull); } .ret.neg { color: var(--bear); } .ret.flat { color: var(--ink-2); } .ret.na { color: var(--ink-3); }
.ret.big { font-weight: 600; } .ret.huge.pos { background: var(--bull-dim); } .ret.huge.neg { background: var(--bear-dim); }
.hit { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } .hit.miss { color: var(--warn); }
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.rail.bullish { background: var(--bull); } .rail.bearish { background: var(--bear); } .rail.mixed { background: var(--mixed); } .rail.neutral { background: var(--neutral); }
.rail.thesis { background: var(--thesis); } .rail.error { background: var(--warn); }
.rail.queued { background: var(--ink-3); animation: qpulse 1.2s ease-in-out infinite; }
@keyframes qpulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.wl-dot { position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--wl); }
.state { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 5px; }
.state.ev { color: var(--ink-1); } .state.th { color: var(--thesis); } .state.err { color: var(--warn); } .state.warn { color: var(--warn); }
.pulse-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: qpulse 1.2s ease-in-out infinite; }
.skeleton { height: 10px; background: var(--bg-2); margin: 6px 10px; }
.empty { padding: var(--s6) var(--s3); color: var(--ink-3); font-size: 12px; text-align: center; }
.errline { padding: var(--s2) var(--s3); color: var(--warn); font-size: 12px; border-bottom: 1px solid var(--line); }
.errline button { color: var(--accent); margin-left: var(--s2); }
.btn { height: 24px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 12px; color: var(--ink-1); display: inline-flex; align-items: center; gap: 4px; }
.btn:hover { border-color: var(--line-strong); color: var(--ink-0); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.on { border-color: var(--wl); color: var(--wl); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-chip); overflow: hidden; }
.seg button { height: 22px; padding: 0 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.seg button.on { background: var(--bg-3); color: var(--ink-0); }
.check { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); cursor: pointer; }
.sel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-chip); height: 22px; font-size: 11px; color: var(--ink-1); padding: 0 4px; }
.pill { position: absolute; left: 50%; transform: translateX(-50%); top: 6px; z-index: 3; height: 28px; padding: 0 var(--s3); background: var(--accent); color: #fff; border-radius: 14px; font-family: var(--font-mono); font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
.day-div { position: sticky; top: 0; z-index: 1; height: 24px; line-height: 24px; padding: 0 var(--s3); background: var(--bg-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.seen-div { height: 18px; line-height: 18px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); border-bottom: 1px dashed var(--line); }

/* ---------- original post block ---------- */
.orig { background: var(--bg-0); border: 1px solid var(--line); padding: var(--s2) var(--s3); font-size: 13px; line-height: 18px; }
.orig pre { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; }
.orig .attr { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-2); }
.orig .attr a { color: var(--accent); }
.orig img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; background: #000; margin-top: var(--s2); cursor: zoom-in; }
.thumb { width: 56px; height: 40px; background: var(--bg-2); flex: none; position: relative; display: grid; place-items: center; cursor: zoom-in; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb .n { position: absolute; right: 2px; bottom: 1px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-1); background: rgba(0,0,0,.6); padding: 0 3px; }
.thumb .x { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }

/* ---------- lightbox, toast, tooltip ---------- */
#tb-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 100; display: grid; grid-template-rows: 1fr auto; place-items: center; }
#tb-lightbox img { max-width: 96vw; max-height: 88vh; object-fit: contain; }
#tb-lightbox .cap { padding: var(--s2) var(--s3); font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); }
#tb-lightbox .cap a { color: var(--accent); }
#tb-toasts { position: fixed; left: var(--s3); bottom: var(--s3); z-index: 90; display: flex; flex-direction: column; gap: var(--s2); }
.toast { background: var(--bg-3); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); padding: var(--s2) var(--s3); font-size: 12px; color: var(--ink-0); display: flex; gap: var(--s3); align-items: center; }
.toast.warn { border-left-color: var(--warn); }
.toast button { color: var(--accent); }
.tip { position: fixed; z-index: 80; background: var(--bg-3); border: 1px solid var(--line-strong); padding: 4px 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); max-width: 360px; white-space: pre-wrap; pointer-events: none; }

/* ---------- tables (ledger-style) ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th { height: 24px; padding: 0 var(--s2); text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-1); z-index: 1; white-space: nowrap; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th.sort { cursor: pointer; } .tbl th.sort:hover { color: var(--ink-0); }
.tbl td { height: var(--h-row); padding: 0 var(--s2); border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.tbl td.ell { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tbl tr.row { cursor: pointer; position: relative; }
.tbl tr.row:hover td { background: var(--bg-2); }
.tbl tr.row.sel td { background: var(--bg-3); }
.tbl tr.wl td:first-child { box-shadow: inset 2px 0 var(--wl); }
.tbl .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- laptop widths: the full status bar needs ~1,430px ---------- */
@media (max-width: 1439px) {
  #tb-status .clock { display: none; }
  #tb-status .disclaimer .d-long { display: none; }
  #tb-status .disclaimer .d-short { display: inline; }
}

/* ---------- mobile bottom nav ---------- */
#tb-bottomnav { display: none; }
@media (max-width: 899px) {
  .app { grid-template-rows: var(--h-status) 1fr 56px; }
  /* one row on phones: logo, search (flexes), live state, short disclaimer, menu */
  #tb-status { gap: var(--s2); }
  #tb-status .nav, #tb-status .clock, #tb-status .spend, #tb-status > .spacer { display: none; }
  #tb-status .search { flex: 1 1 auto; width: auto; min-width: 0; max-width: 200px; margin-left: auto; }
  #tb-status .disclaimer .d-long { display: none; }
  #tb-status .disclaimer .d-short { display: inline; }
  #tb-status .acct .menu-btn { min-width: 40px; height: 30px; }
  #tb-bottomnav { display: flex; border-top: 1px solid var(--line); background: var(--bg-1); padding-bottom: env(safe-area-inset-bottom); }
  #tb-bottomnav a { flex: 1; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-top: 2px solid transparent; }
  #tb-bottomnav a.active { color: var(--ink-0); border-top-color: var(--accent); }
  #tb-toasts { bottom: calc(56px + var(--s3) + env(safe-area-inset-bottom)); }
}

/* ---------- topic tabs (Energy & Oil, Tech & AI, …) ---------- */
.topic-tabs { display: flex; gap: 2px; padding: 0 var(--s2); border-bottom: 1px solid var(--line); background: var(--bg-1); overflow-x: auto; scrollbar-width: none; flex: none; }
.topic-tabs::-webkit-scrollbar { display: none; }
.topic-tabs button { flex: none; height: 32px; padding: 0 10px; font-size: 12px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.topic-tabs button:hover { color: var(--ink-0); }
.topic-tabs button.on { color: var(--ink-0); border-bottom-color: var(--accent); }
.topic-tabs .n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.topic-tabs button.on .n { color: var(--ink-2); }
@media (max-width: 899px) { .topic-tabs button { height: 40px; } }