/* Meaningful colours differ in lightness too: blue = favourable, orange = adverse (NF-11). */
:root {
  --bg: #f7f7f5; --surface: #ffffff; --line: #dcdcd6; --text: #1d1d1b; --muted: #5d5d57;
  --good: #1f5fbf; --good-soft: #dce8fa; --bad: #b3540f; --bad-soft: #fbe6d4; --warn: #8a6d00;
  --accent: #1f5fbf; --zone: rgba(31, 95, 191, .10);
  --link: #1f5fbf; --link-hover: #0d3f8a;
  color-scheme: light dark;
  /* Validated mark colours (dataviz validator, both surfaces) and the diverging midpoint. */
  --good-mark: #1f5fbf; --bad-mark: #b3540f; --mid: #f0efec; --grid: #e6e5e0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151514; --surface: #1f1f1d; --line: #3a3a36; --text: #ededea; --muted: #a8a8a0;
    --good: #7fb0ff; --good-soft: #1d2d47; --bad: #ffab6b; --bad-soft: #472c17; --warn: #e3c35a;
    --accent: #7fb0ff; --zone: rgba(127, 176, 255, .12);
    --link: #8fd3ff; --link-hover: #c4e8ff;
    --good-mark: #4f8fe6; --bad-mark: #d46d2c; --mid: #383835; --grid: #30302d; }
}
* { box-sizing: border-box; }
/* Links: the browser default (dark blue / purple) disappears on a dark background. */
a, a:visited { color: var(--link); }
a:hover, a:focus-visible { color: var(--link-hover); }
body { margin: 0; background: var(--bg); color: var(--text); }
header.top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.tabs button, .sub { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; color: var(--muted);
  font: inherit; cursor: pointer; }
.tabs button[aria-selected="true"], .sub.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.sub:disabled { opacity: .5; cursor: default; }
.status { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--muted); white-space: nowrap; }
.pill.bad { color: var(--bad); border-color: var(--bad); }
.pill.good { color: var(--good); border-color: var(--good); }
main { padding: 16px; max-width: 1600px; margin: 0 auto; }
.placeholder { padding: 24px; background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; }
.muted { color: var(--muted); }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.rules, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.rules summary, .panel summary { cursor: pointer; font-weight: 600; }
.rules ul { margin: 8px 0; padding-left: 18px; columns: 2 320px; }
.gate { font-size: 11px; font-weight: 700; color: var(--bad); margin-left: 4px; }
.filters, .inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 12px; }
input, select, button { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; }
button { cursor: pointer; }
form button, .btn { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (prefers-color-scheme: dark) { form button, .btn { color: #111; } }
.btn.ghost { background: none; color: var(--accent); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.split:has(.detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); }
@media (max-width: 1000px) { .split:has(.detail:not([hidden])) { grid-template-columns: minmax(0, 1fr); } }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
table.grid { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.grid th { position: sticky; top: 0; background: var(--surface); font-size: 12px; color: var(--muted); font-weight: 600; }
.grid th:first-child, .grid td:first-child, .grid td.l, .grid th.l { text-align: left; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover, .grid tbody tr.sel { background: var(--zone); }
.pos { color: var(--good); } .neg { color: var(--bad); }
.bar { display: inline-block; width: 60px; height: 8px; background: var(--line); border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--good-soft); margin-right: 3px; }
.tag.bad { background: var(--bad-soft); }
.est { font-size: 10px; font-weight: 700; color: var(--warn); margin-left: 3px; }
.detail { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; align-self: start;
  position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; }
.detail h3 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.detail h2 { margin: 0 0 4px; }
.close { float: right; background: none; border: 0; font-size: 18px; color: var(--muted); }
.check { list-style: none; padding: 0; margin: 0; }
.check li { padding: 3px 0; }
.check .m { display: inline-block; width: 16px; font-weight: 700; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; min-width: 150px; }
.card .v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.card .k { font-size: 12px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chips button { border-radius: 999px; font-size: 12px; }
.chips button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 10px 0; align-items: end; }
.form-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.form-grid.small { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-top: 12px; }
.hbar { display: grid; grid-template-columns: 160px 1fr 60px; gap: 8px; align-items: center; margin: 4px 0; }
.hbar .track { position: relative; height: 12px; background: var(--line); border-radius: 3px; }
.hbar .fill { height: 100%; background: var(--accent); border-radius: 3px; }
.hbar .fill.over { background: var(--bad); }
.hbar .limit { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
svg.chart { width: 100%; height: auto; }
svg.chart text { fill: var(--muted); font-size: 10px; }
.notes li { margin-bottom: 6px; }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg);
  padding: 8px 14px; border-radius: 6px; }
h3 { font-size: 15px; }

.small { font-size: 12px; }
.banner { border: 1px solid var(--line); border-left: 4px solid var(--bad); background: var(--surface); padding: 8px 12px;
  border-radius: 6px; margin-bottom: 12px; }
.banner.info { border-left-color: var(--accent); }
.pulse-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 900px) { .pulse-top, .split-even { grid-template-columns: minmax(0, 1fr) !important; } }
.split-even { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
#scoreboard td, #scoreboard th { padding: 5px 6px; }
.table-wrap.flat { border: 0; border-radius: 0; }
.hero { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.chips.static span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 12px; }
.chips.static span.open { border-color: var(--good); color: var(--good); }
.gauge { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; padding: 3px 0; align-items: center; }
.gauge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.gauge.on .dot { background: var(--bad-mark); }
td.heat { color: var(--text); text-align: center; min-width: 52px; }
.news li { margin-bottom: 8px; }
.news .meta { font-size: 12px; color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.plans .card { min-width: 0; }
.layer h4 { margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
svg text.lbl { fill: var(--text); font-size: 10px; }
svg .gridline { stroke: var(--grid); stroke-width: 1; }
.tip { position: fixed; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12px; padding: 4px 8px;
  border-radius: 4px; z-index: 20; white-space: pre; line-height: 1.45; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); }

.tk { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; font-weight: 700; }
.tk:hover, .tk:focus-visible { color: var(--accent); outline: none; }
#chart-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--text); padding: 14px 18px; }
#chart-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.cd-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cd-head h2 { margin: 0; }
.cd-head .close { float: none; }
.cd-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; font-variant-numeric: tabular-nums; }
.cd-stats span b { font-size: 16px; }
.cd-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); }
.cd-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 5px; }
svg.pc text { fill: var(--muted); font-size: 11px; }
svg.pc .crosshair { stroke: var(--muted); stroke-dasharray: 3 3; }

/* ---- help ---- */
.help-i { display: inline-block; margin-left: 5px; font-size: 12px; font-weight: 400; color: var(--muted); cursor: help;
  line-height: 1; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.help-i:hover, .help-i:focus-visible { color: var(--accent); outline: none; }
#helppop { position: fixed; z-index: 50; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: 13px; line-height: 1.45;
  text-align: left; white-space: normal; font-weight: 400; }
#helppop .hp-title { font-weight: 700; margin-bottom: 4px; }
#helppop p { margin: 4px 0; }
#helppop a { color: var(--accent); font-size: 12px; }
.guide-link { color: var(--accent); text-decoration: none; font-weight: 600; border: 1px solid var(--accent);
  border-radius: 999px; padding: 2px 10px; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover, th.sortable:focus-visible { color: var(--text); outline: none; }
th.sortable[aria-sort="ascending"], th.sortable[aria-sort="descending"] { color: var(--accent); }
#earnings-cal { max-height: 420px; }
.table-wrap.flat:has(#earnings-cal) { max-height: 440px; overflow-y: auto; }
/* Economic calendar: scrolls inside its panel with the header pinned; past releases dimmed. */
.table-wrap.flat:has(#econ) { max-height: 520px; overflow-y: auto; }
#econ thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
#econ tr.past td { opacity: .6; }
#econ tr.day-start td { border-top: 2px solid var(--line); }
#econ tr.today td:first-child, #econ tr.today td:nth-child(2) { font-weight: 600; }

/* ---- rotation map ---- */
.rrg-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rrg-svg .trail { display: none; }
.rrg-svg .rrg-s { cursor: pointer; transition: opacity .15s; outline: none; }
#rrg.focus .rrg-s { opacity: .15; }
#rrg.focus .rrg-s.on { opacity: 1; }
#rrg .rrg-s.on .trail { display: inline; }
#rrg .rrg-s.on .dot { fill: var(--accent); }
#rrg .rrg-s:focus-visible .dot { stroke: var(--accent); stroke-width: 3; }
.rrg-svg text.wk { fill: var(--accent); font-size: 9px; }
.rrg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rrg-item { text-align: left; font-size: 12px; padding: 3px 6px; border-radius: 5px; display: flex; gap: 6px;
  align-items: center; background: none; }
.rrg-item.on { border-color: var(--accent); color: var(--accent); }
.rrg-item .q { display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: 4px; font-size: 11px;
  font-weight: 700; color: var(--text); }
.q-leading .q { background: color-mix(in oklab, var(--good-mark) 55%, var(--mid)); }
.q-weakening .q { background: color-mix(in oklab, var(--good-mark) 22%, var(--mid)); }
.q-improving .q { background: color-mix(in oklab, var(--bad-mark) 22%, var(--mid)); }
.q-lagging .q { background: color-mix(in oklab, var(--bad-mark) 55%, var(--mid)); }
.rrg-reading { margin-top: 8px; min-height: 36px; line-height: 1.45; }

.cd-ind { align-items: center; margin: 4px 0 6px; }
.cd-ind .muted { margin: 0 2px 0 8px; }
.cd-ind button { font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.cd-ind button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (prefers-color-scheme: dark) { .cd-ind button.on { color: #111; } }
.cd-readings ul { margin: 4px 0; padding-left: 18px; columns: 2 320px; }
svg.pc text.pane-title { fill: var(--text); font-size: 11px; }
#chart-dialog { max-height: calc(100vh - 24px); overflow: auto; }
.cd-ind button .help-i { color: inherit; opacity: .75; margin-left: 4px; }

/* ---- risk management ---- */
.heatbar { position: relative; height: 8px; background: var(--line); border-radius: 3px; margin: 4px 0; }
.heatbar .fill { height: 100%; background: var(--accent); border-radius: 3px; }
.heatbar .fill.over { background: var(--bad-mark); }
.heatbar .limit { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.chk { padding: 1px 0; }
.chk.bad span { color: var(--bad); }
.chk.warn span { color: var(--warn); }
.chk.ok span { color: var(--good); }
button.small { font-size: 11px; padding: 1px 6px; }
#risk-settings input { width: 110px; }

/* ---- research ---- */
.rs-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.rs-head h2 { margin: 0; }
.rs-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 12px 0; }
.verdict { font-size: 22px; font-weight: 700; }
.verdict.bull { color: var(--good); } .verdict.bear { color: var(--bad); } .verdict.neutral { color: var(--muted); }
.scorebar { position: relative; height: 8px; background: var(--line); border-radius: 4px; margin: 6px 0 10px; }
.scorebar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.scorebar b { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.factor { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; }
.fbar { position: relative; height: 6px; background: var(--line); border-radius: 3px; }
.fbar i { position: absolute; top: 0; bottom: 0; }
.fbar b { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text); }
.strat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; }
.strat { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.strat.fit { border-color: var(--accent); }
.strat h4 { margin: 0 0 2px; font-size: 14px; }
.strat table { font-size: 12px; }
.strat details summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.strat ul { margin: 4px 0; padding-left: 18px; font-size: 12px; }
.kv.tight dd, .kv.tight dt { font-size: 12px; }

/* Playbook */
.pb-table tr.pb-row { cursor: pointer; }
.pb-table tr.pb-row:hover td { background: var(--hover, rgba(127,127,127,.08)); }
.pb-bar { display: inline-block; width: 44px; height: 6px; border-radius: 3px; background: var(--line); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.pb-bar i { display: block; height: 100%; background: var(--good-mark); border-radius: 3px; }
.pb-detail > td { background: var(--surface); white-space: normal; text-align: left; }
.pb-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr); gap: 16px; padding: 6px 2px; }
@media (max-width: 800px) { .pb-grid { grid-template-columns: 1fr; } }
#pb-index { gap: 6px; }
.chip-link { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--text); text-decoration: none; }
.chip-link:hover { border-color: var(--accent); }
.ef-table tr.ef-row { cursor: pointer; }
.ef-table tr.ef-row:hover td { background: var(--hover, rgba(127,127,127,.08)); }
.ef-detail > td { white-space: normal; text-align: left; background: var(--surface); }

/* Radar category history */
.sig { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; margin: 1px 3px 1px 0; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.sig.on { border-color: var(--good); color: var(--good); }
.sig.on.short { border-color: var(--bad); color: var(--bad); }
.rh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 8px; }
.rh-grid h4 { margin: 4px 0 6px; }
.rh-grid table.grid td, .rh-grid table.grid th { font-size: 12px; }
.rh-best { font-weight: 700; }
.rh-share { display: inline-block; height: 8px; background: var(--accent); border-radius: 4px; vertical-align: middle; margin-right: 6px; }

/* Evidence tags on outlook factors (tested in the 10-year factor study) */
.ev { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 3px; margin-left: 4px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.ev.ev-ok { border-color: var(--good); color: var(--good); }
.ev.ev-weak { border-color: var(--good); color: var(--good); opacity: 0.75; }
.ev.ev-bad { border-color: var(--bad); color: var(--bad); }
.factor.unscored { opacity: 0.6; }

.fin-key { grid-template-columns: repeat(auto-fit, minmax(140px, auto) minmax(90px, auto)); column-gap: 18px; margin-bottom: 8px; }

ul.readings li { margin-bottom: 6px; }
ul.readings li .muted.small { margin-top: 1px; line-height: 1.35; }

/* Explore */
.ex-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.ex-form label { display: flex; flex-direction: column; font-size: 12px; gap: 3px; }
.ex-form label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.ex-table td, .ex-table th { font-size: 12px; }
#ex-subtabs { flex-wrap: wrap; }

/* Ask Claude chat (every tab) */
.chat-fab { position: fixed; right: 16px; bottom: 16px; z-index: 20; background: var(--accent); color: var(--surface); border: 0;
  border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 21; width: min(520px, calc(100vw - 32px)); height: min(72vh, 760px);
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.chat[hidden], .chat-fab[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chat-head #chat-where { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { border-radius: 8px; padding: 8px 10px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-msg.user { align-self: flex-end; background: var(--good-soft); max-width: 85%; white-space: pre-wrap; }
.chat-msg.bot { background: var(--bg); border: 1px solid var(--line); }
.chat-msg.err { border-color: var(--bad); color: var(--bad); }
.chat-msg p { margin: 0 0 6px; } .chat-msg p:last-child { margin-bottom: 0; }
.chat-msg ul, .chat-msg ol { margin: 4px 0 6px; padding-left: 20px; }
.chat-msg h4 { margin: 8px 0 4px; font-size: 14px; }
.chat-msg code { background: var(--mid); padding: 0 3px; border-radius: 3px; }
.chat-msg table { border-collapse: collapse; margin: 4px 0 6px; font-size: 12px; display: block; overflow-x: auto; }
.chat-msg th, .chat-msg td { border: 1px solid var(--line); padding: 2px 6px; text-align: left; white-space: nowrap; }
.chat-meta { margin-top: 6px; font-size: 11px; color: var(--muted); }
.chat-form { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; min-height: 40px; max-height: 200px; font: inherit; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.chat-thinking::after { content: "…"; animation: chatdots 1.2s steps(3, end) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes chatdots { from { width: 0; } to { width: 1.2em; } }
/* Market-moving news: scrolls inside its panel. */
#news { max-height: 520px; overflow-y: auto; padding-right: 8px; }
#econ th, #econ td { padding: 5px 4px; }
#econ td:nth-child(-n+3) { white-space: nowrap; }
#econ td:nth-child(4) { white-space: normal; min-width: 120px; }
#econ th, #econ td { font-size: 13px; }

/* Live price marker on charts during the session. */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; margin-right: 4px;
  vertical-align: 1px; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; } }

/* Level 1 list: keep the reason column narrow so the trade column fits. */
td.l1-why { max-width: 260px; min-width: 180px; white-space: normal; }
td.l1-trade { min-width: 420px; white-space: normal; }
td.nowrap { white-space: nowrap; }

/* Live price updates: a brief highlight when a price changes. */
.lp-flash { animation: lpflash 1.2s ease-out; }
@keyframes lpflash { from { background: var(--zone); } to { background: transparent; } }

/* Table headers stay visible while scrolling.
   Tables in a .table-wrap scroll inside it (capped at the window height) with the header pinned to its top;
   other tables pin their header just below the app's sticky top bar (--hdr, measured in app.js). */
.table-wrap { overflow: auto; max-height: calc(100vh - var(--hdr, 90px) - 24px); }
.grid thead th { position: sticky; top: var(--hdr, 0px); z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.table-wrap:not(.fits) .grid thead th { top: 0; }
.table-wrap.fits { overflow: visible; max-height: none; }   /* no inner scroll needed: let the header pin to the page */
/* Column width cap: text columns wrap at about 120 characters (and never squeeze below ~16), so one long
   explanation can't stretch a table across the screen. Numbers keep to one line. */
.grid td.l, .grid th.l { white-space: normal; max-width: 120ch; min-width: 16ch; overflow-wrap: anywhere; }
.grid td.l.small, .grid td.small { max-width: 120ch; }
.grid td.nowrap { white-space: nowrap; }
.grid td.wide-text { min-width: 45ch; }      /* long explanations: wrap into a few lines, not a narrow strip */
/* Signal chips: wide enough for the chips to sit on one or two lines instead of a tall stack. */
.grid td.sig-cell { min-width: 58ch; max-width: 80ch; }

/* ---- sign-in, user chip, viewer mode, admin ---- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; box-sizing: border-box; }
.login-card { width: min(360px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.login-card .brand { font-size: 18px; font-weight: 700; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-card input { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.login-err { color: var(--bad); margin: 0; }
.user-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.user-chip .role { border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; color: var(--muted); }
body.viewer .tabs [data-tab=watchlist], body.viewer .tabs [data-tab=holdings], body:not(.owner) .tabs [data-tab=admin],
body.viewer #chat-fab, body.viewer #chat, body.viewer [data-act=watch], body.viewer [data-act=trigger], body.viewer [data-act=pass],
body.viewer #pb-rebuild, body.viewer #ef-rebuild, body.viewer #screen-rebuild, body.viewer #top-rebuild, body.viewer #gc-rebuild { display: none !important; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.adm-cards .card .big { font-size: 20px; font-weight: 700; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 4px; }
.dot.on { background: #2e9e5b; }
.adm-trail { max-height: 520px; overflow: auto; }
.adm-bar { display: inline-block; height: 8px; background: var(--accent); border-radius: 2px; vertical-align: middle; margin-right: 6px; }
#tab-admin table.grid th, #tab-admin table.grid td { text-align: left; }

/* Find in table */
.tsearch { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.tsearch input { font: inherit; font-size: 13px; width: 200px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); }
.tsearch output.neg { color: var(--bad); }
tr.ts-hide { display: none; }
.universe-line { margin: 8px 0 4px; }
.universe-line select { font: inherit; }