/* QuantDesk Terminal — minimalist monochrome. Colour carries meaning only:
   muted green = up, muted red = down. Every colour is a token below.
   Self-hosted font, no external assets (CSP self-only). */
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  /* surfaces */
  --bg: #000000; --panel: #050505; --head: #0d0d0d; --bar: #070707; --input: #000000;
  /* grey scale: borders, rules, grid */
  --border: #2a2a2a; --rule: #171717; --grid: #121212; --scroll: #333333;
  /* text */
  --fg: #d6d6d6; --fg-hi: #ffffff; --fg-dim: #8c8c8c; --fg-faint: #555555; --on-hi: #000000;
  /* meaning */
  --up: #5fa77c; --down: #c0605c;
  --up-a: rgba(95, 167, 124, .35); --down-a: rgba(192, 96, 92, .35);
  --up-flash: rgba(95, 167, 124, .45); --down-flash: rgba(192, 96, 92, .45);
  /* the single optional highlight: selection / focus */
  --sel: #1b1b1b; --hover: #101010; --focus: #ffffff;
  /* chart */
  --chart-text: #8c8c8c; --chart-grid: #121212; --chart-border: #2a2a2a; --chart-cross: #555555;
  --chart-vol: #333333; --level-above: #9a9a9a; --level-below: #d6d6d6;
  --ind-1: #ffffff; --ind-2: #a6a6a6; --ind-3: #6b6b6b; --ind-4: #c8c8c8;
  --font: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 11px/1.35 var(--font); font-variant-numeric: tabular-nums; display: flex;
  flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--fg-hi); text-decoration: underline; }
button, select { font: inherit; color: var(--fg); background: var(--head); border: 1px solid var(--border);
  padding: 1px 6px; cursor: pointer; text-transform: uppercase; }
select { text-transform: none; padding: 0 2px; }
input[type=number], input[type=text], input[type=search] { font: inherit; color: var(--fg-hi); background: var(--input);
  border: 1px solid var(--border); padding: 1px 4px; outline: 0; }
input:focus, select:focus { border-color: var(--focus); }
button:hover { border-color: var(--fg-dim); color: var(--fg-hi); }
button.on { background: var(--fg-hi); color: var(--on-hi); border-color: var(--fg-hi); }
:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.hidden { display: none !important; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.up { color: var(--up); }
.down { color: var(--down); }
.hi { color: var(--fg-hi); font-weight: 700; }
.na { color: var(--fg-faint); cursor: help; border-bottom: 1px dotted var(--fg-faint); }
.unavail { color: var(--fg-hi); font-weight: 700; letter-spacing: .04em; padding: 6px 2px; }
.unavail .why { display: block; color: var(--fg-dim); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.stale-badge { border: 1px solid var(--fg-hi); color: var(--fg-hi); font-weight: 700; padding: 0 3px; margin-left: 4px;
  font-size: 9.5px; letter-spacing: .06em; }

/* demo banner: inverted, impossible to miss */
.demo-banner { background: var(--fg-hi); color: var(--on-hi); font-weight: 700; text-align: center;
  letter-spacing: .12em; padding: 2px 0; flex: none; border-bottom: 2px solid var(--bg); }

/* top bar */
.topbar { display: flex; align-items: center; gap: 10px; padding: 3px 6px; border-bottom: 1px solid var(--border);
  background: var(--bar); flex: none; min-height: 32px; position: relative; z-index: 30; }
.brand { font-weight: 700; letter-spacing: .14em; white-space: nowrap; color: var(--fg-hi); }
.cmd { display: flex; align-items: center; flex: 0 1 460px; min-width: 200px; border: 1px solid var(--border);
  background: var(--input); position: relative; }
.cmd:focus-within { border-color: var(--focus); }
.cmd .prompt { padding: 0 4px 0 6px; color: var(--fg-hi); }
.cmd input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg-hi);
  font: inherit; font-size: 12px; text-transform: uppercase; padding: 4px 2px; }
.cmd input::placeholder { color: var(--fg-faint); text-transform: none; }
.cmd .go { border: 0; border-left: 1px solid var(--border); background: var(--fg-hi); color: var(--on-hi); font-weight: 700; }
.cmd.err { border-color: var(--down); }
.cmdmsg { color: var(--down); white-space: nowrap; }
.macro { display: flex; gap: 14px; flex: 1; overflow: hidden; white-space: nowrap; justify-content: flex-end; }
.macro .m { display: inline-flex; gap: 5px; align-items: baseline; }
.macro .k { color: var(--fg-dim); }
.fkeys { display: flex; gap: 3px; flex: none; }

/* autocomplete */
.ac { position: absolute; left: -1px; right: -1px; top: 100%; background: var(--bg); border: 1px solid var(--focus);
  z-index: 60; max-height: 60vh; overflow: auto; }
.ac .opt { display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; padding: 2px 6px; cursor: pointer;
  border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ac .opt .code { color: var(--fg-hi); font-weight: 700; }
.ac .opt .desc { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; }
.ac .opt .cat { color: var(--fg-faint); font-size: 10px; }
.ac .opt.on { background: var(--sel); }
.ac .opt.on .desc { color: var(--fg); }

/* grid + layouts */
.grid { flex: 1; min-height: 0; display: grid; gap: 3px; padding: 3px;
  grid-template-columns: 468px minmax(0, 1fr) minmax(0, 1fr) 350px;
  grid-template-rows: 1.25fr 1fr 1fr .95fr;
  grid-template-areas: "watch chart chart derivs" "watch chart chart levels"
                       "watch desk record news" "watch alts cal news"; }
#p-watch { grid-area: watch; } #p-chart { grid-area: chart; } #p-derivs { grid-area: derivs; }
#p-levels { grid-area: levels; } #p-desk { grid-area: desk; } #p-record { grid-area: record; }
#p-alts { grid-area: alts; } #p-news { grid-area: news; } #p-cal { grid-area: cal; }

body.layout-2 .grid { grid-template-rows: 1fr 1fr; grid-template-columns: 468px minmax(0, 1fr) 380px;
  grid-template-areas: "watch chart derivs" "watch chart levels"; }
body.layout-2 :is(#p-desk, #p-record, #p-alts, #p-news, #p-cal) { display: none; }
body.layout-3 .grid { grid-template-rows: 1fr; grid-template-columns: 468px minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "watch news cal"; }
body.layout-3 :is(#p-chart, #p-derivs, #p-levels, #p-desk, #p-record, #p-alts) { display: none; }
body.layout-4 .grid { grid-template-rows: 1fr 1fr; grid-template-columns: 468px minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "watch desk record" "watch alts levels"; }
body.layout-4 :is(#p-chart, #p-derivs, #p-news, #p-cal) { display: none; }
body.fn-open .grid, body.layout-5 .grid { display: none; }

/* panels */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--border);
  background: var(--panel); }
.panel > header { display: flex; align-items: center; gap: 8px; background: var(--head); padding: 2px 6px;
  border-bottom: 1px solid var(--border); flex: none; min-height: 20px; }
.panel > header h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--fg-hi);
  white-space: nowrap; }
.panel > header .fk { color: var(--on-hi); background: var(--fg-dim); padding: 0 3px; font-weight: 700; font-size: 10px; }
.panel > header .meta { margin-left: auto; color: var(--fg-dim); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: 10px; max-width: 60%; }
.panel > header .tools { display: flex; gap: 2px; flex-wrap: wrap; }
.panel .body { flex: 1; min-height: 0; overflow: auto; padding: 2px 4px; }
.panel .body::-webkit-scrollbar, .fnbody::-webkit-scrollbar { width: 6px; height: 6px; }
.panel .body::-webkit-scrollbar-thumb, .fnbody::-webkit-scrollbar-thumb { background: var(--scroll); }
.panel > footer { flex: none; border-top: 1px solid var(--rule); padding: 1px 6px; color: var(--fg-faint);
  font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel.pulse { animation: pulse .8s ease-out 2; }
@keyframes pulse { 50% { border-color: var(--focus); } }
.paper-tag { color: var(--on-hi); background: var(--fg-dim); font-weight: 700; padding: 0 4px; font-size: 10px;
  white-space: nowrap; }

/* tables */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 0; background: var(--panel); color: var(--fg-dim); font-weight: 500;
  text-align: right; padding: 2px 3px; border-bottom: 1px solid var(--border); white-space: nowrap;
  cursor: default; user-select: none; text-transform: uppercase; }
.tbl th.l, .tbl td.l { text-align: left; }
.tbl th.c, .tbl td.c { text-align: center; }
.tbl th.sortable { cursor: pointer; }
.tbl th.sorted { color: var(--fg-hi); }
.tbl td { padding: 1px 3px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover td { background: var(--hover); }
.tbl tr.row:has(+ tr.tps) td { border-bottom: 0; }
.tbl tr.tps td { font-size: 10px; padding-top: 0; }
.tbl tr.sel td { background: var(--sel); color: var(--fg-hi); }
.tbl tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--focus); }
.tbl tr.group td { color: var(--fg-faint); font-size: 10px; letter-spacing: .1em; padding-top: 4px; cursor: default; }
.tbl tr.mark td { color: var(--on-hi); background: var(--fg-hi); font-weight: 700; }
.tbl td.atm { border-top: 1px solid var(--fg-dim); }
.tbl td.k { color: var(--fg-hi); font-weight: 700; background: var(--head); text-align: center; }
td.flash-up { animation: fu 1s ease-out; } td.flash-down { animation: fd 1s ease-out; }
@keyframes fu { 0% { background: var(--up-flash); } 100% { background: transparent; } }
@keyframes fd { 0% { background: var(--down-flash); } 100% { background: transparent; } }
.bias-LONG { color: var(--up); } .bias-SHORT { color: var(--down); } .bias-MIXED { color: var(--fg-hi); }

/* key/value lists */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 1px 10px; padding: 2px 0; }
.kv .k { color: var(--fg-dim); white-space: nowrap; }
.kv .v { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { color: var(--fg-dim); font-size: 10px; letter-spacing: .1em; margin: 5px 0 1px;
  border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 6px;
  text-transform: uppercase; }
.sub > span:first-child { white-space: nowrap; flex: none; }
.sub .src { color: var(--fg-faint); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none;
  white-space: nowrap; min-width: 0; flex: 1; text-align: right; }
canvas.spark { width: 100%; height: 34px; display: block; }

/* chart */
#p-chart .body { padding: 0; position: relative; }
#chart { position: absolute; inset: 0; }
.chart-label { position: absolute; left: 6px; top: 4px; z-index: 5; pointer-events: none; display: flex;
  flex-direction: column; gap: 1px; }
.chart-label .big { font-size: 13px; font-weight: 700; color: var(--fg-hi); }
.chart-label .band { color: var(--on-hi); background: var(--fg-hi); padding: 0 4px; align-self: flex-start; font-weight: 700; }
.chart-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6;
  pointer-events: none; text-align: center; }
.tfbtn.on { background: var(--fg-hi); color: var(--on-hi); }

/* gate */
.gate { margin: 3px 0; }
.bar { height: 7px; border: 1px solid var(--fg-dim); position: relative; margin: 2px 0 4px; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fg-hi); }
.met { color: var(--up); } .unmet { color: var(--fg-dim); }

/* news / calendar */
.news-item { padding: 3px 0; border-bottom: 1px solid var(--rule); }
.news-item .row1 { display: flex; gap: 6px; color: var(--fg-dim); font-size: 10px; flex-wrap: wrap; }
.news-item .t1 { color: var(--on-hi); background: var(--fg-hi); padding: 0 3px; font-weight: 700; }
.news-item a { display: block; color: var(--fg); }
.tag { color: var(--fg-hi); border: 1px solid var(--fg-faint); padding: 0 3px; font-size: 10px; }
.countdown { font-size: 20px; font-weight: 700; color: var(--fg-hi); letter-spacing: .04em; }
.next { padding: 4px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 3px; }
.imp-high { color: var(--on-hi); background: var(--fg-hi); padding: 0 3px; font-weight: 700; }
.imp-medium { color: var(--fg-dim); border: 1px solid var(--fg-faint); padding: 0 3px; }
.imp-low { color: var(--fg-faint); }

/* status bar */
.statusbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 2px 6px; border-top: 1px solid var(--border);
  background: var(--bar); white-space: nowrap; overflow: hidden; font-size: 10.5px; min-height: 20px; }
.statusbar .clk { color: var(--fg-hi); }
.dots { display: flex; gap: 8px; overflow: hidden; }
.dot { display: inline-flex; align-items: center; gap: 3px; color: var(--fg-dim); cursor: help; }
.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); }
.dot.ok::before { background: var(--up); }
.dot.stale::before { background: transparent; border: 1px solid var(--fg-hi); width: 5px; height: 5px; }
.dot.down::before { background: var(--down); }
.statusbar .right { margin-left: auto; display: flex; gap: 12px; }

/* help overlay (legacy) */
.help { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 50; background: var(--bg);
  border: 1px solid var(--focus); padding: 10px 14px; min-width: 420px; max-width: 92vw; }
.help h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; }
.help td { padding: 1px 10px 1px 0; vertical-align: top; }

/* ── function views ─────────────────────────────────────────────────────── */
.fnwrap { flex: 1; min-height: 0; display: flex; padding: 3px; }
.fnwrap > .panel { flex: 1; }
.slots { flex: 1; min-height: 0; display: grid; gap: 3px; padding: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.slots.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slot-empty { display: flex; align-items: center; justify-content: center; color: var(--fg-faint);
  border: 1px dashed var(--border); text-align: center; padding: 8px; }
.fnbody { flex: 1; min-height: 0; overflow: auto; padding: 3px 6px; position: relative; }
.fnbody.chartbody { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.chartbox { position: relative; flex: 1; min-height: 120px; }
.fnbar { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; padding: 3px 6px;
  border-bottom: 1px solid var(--rule); flex: none; }
.fnbar label { color: var(--fg-dim); display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.fnbar .grp { display: inline-flex; gap: 2px; align-items: center; }
.fntools:empty { display: none; }
.fntools { background: var(--panel); }
.tbl.wrap td { white-space: normal; vertical-align: top; }
.wrapkv .kv .v { white-space: normal; text-align: left; }
.cols.wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.fnfoot { flex: none; border-top: 1px solid var(--rule); padding: 1px 6px; color: var(--fg-faint); font-size: 10px;
  white-space: normal; }
.cols { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.big-num { font-size: 18px; font-weight: 700; color: var(--fg-hi); }
.note { color: var(--fg-faint); font-size: 10px; margin: 3px 0; }
.attrib { color: var(--fg-faint); font-size: 10px; }
.pill { border: 1px solid var(--border); padding: 0 4px; color: var(--fg-dim); white-space: nowrap; }

/* v3: estimate badge (inverted outline, monochrome), inline magnitude bars */
.est-badge { display: inline-block; border: 1px solid var(--fg-hi); color: var(--fg-hi); font-weight: 700; letter-spacing: .08em;
  font-size: 10px; padding: 1px 6px; margin: 3px 0; }
.mbar { display: inline-block; height: 7px; margin-right: 4px; vertical-align: middle; }
.up-bg { background: var(--up-a); } .down-bg { background: var(--down-a); }

/* WEI: the stacked meta line only shows on a phone */
.tbl.wei .m { display: none; }

/* heatmap: the one place colour intensity is allowed */
.heat { display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; }
.tile { display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
  color: var(--fg-hi); border: 1px solid var(--bg); cursor: pointer; min-width: 54px; min-height: 40px; text-align: center; }
.tile .s { font-weight: 700; letter-spacing: .04em; }
.tile .p { font-size: 10px; }
.tile.na-tile { background: var(--head); color: var(--fg-faint); }

/* correlation matrix */
.corr td { min-width: 44px; text-align: center; }
.corr td.lab, .corr th { color: var(--fg-dim); }

/* toasts */
.toasts { position: fixed; right: 10px; bottom: 28px; z-index: 80; display: flex; flex-direction: column; gap: 4px; }
.toast { background: var(--bg); border: 1px solid var(--fg-hi); color: var(--fg-hi); padding: 6px 10px; min-width: 240px;
  max-width: 380px; box-shadow: 0 0 0 1px var(--bg); }
.toast .t { font-weight: 700; letter-spacing: .06em; }

/* login */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.login { border: 1px solid var(--border); background: var(--panel); width: 340px; max-width: 92vw; }
.login header { background: var(--head); padding: 4px 8px; border-bottom: 1px solid var(--border); font-weight: 700;
  letter-spacing: .12em; color: var(--fg-hi); }
.login form { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.login input { background: var(--input); border: 1px solid var(--border); color: var(--fg-hi); font: inherit; font-size: 13px;
  padding: 6px; outline: 0; }
.login input:focus { border-color: var(--focus); }
.login button { padding: 5px; background: var(--fg-hi); color: var(--on-hi); font-weight: 700; border-color: var(--fg-hi); }
.login .msg { color: var(--down); min-height: 14px; }
.login .fine { color: var(--fg-faint); font-size: 10px; padding: 0 12px 10px; }

/* phone / narrow: stack the panels, page scrolls, each panel scrolls inside */
@media (max-width: 900px) {
  body { overflow: auto; height: auto; min-height: 100%; }
  .topbar { flex-wrap: wrap; }
  .cmd { flex: 1 1 100%; order: 3; }
  .macro { order: 4; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; gap: 10px; }
  .fkeys { order: 2; margin-left: auto; }
  .fkeys button[data-layout] { display: none; }
  .grid, body[class] .grid { display: flex; flex-direction: column; overflow: visible; }
  body.fn-open .grid, body.layout-5 .grid { display: none; }
  .panel, body[class] .grid .panel { display: flex !important; height: auto; max-height: 440px; flex: none; }
  #p-watch { max-height: 560px; } #p-chart { height: 360px; max-height: none; }
  .fnwrap { min-height: calc(100vh - 110px); }
  .fnwrap > .panel { max-height: none; }
  .slots, .slots.n6 { display: flex; flex-direction: column; }
  .slots > .panel { height: 420px; flex: none; }
  .statusbar { flex-wrap: wrap; white-space: normal; position: sticky; bottom: 0; }
  .statusbar .right { margin-left: 0; }
  .panel > header .meta { max-width: 50%; }
  .help { min-width: 0; }
  .ac .opt { grid-template-columns: 70px 1fr; } .ac .opt .cat { display: none; }
}
@media (max-width: 600px) {
  /* phone: drop the two widest watchlist columns (24h volume, absolute OI) */
  #watch-tbl th:nth-child(4), #watch-tbl td:nth-child(4),
  #watch-tbl th:nth-child(6), #watch-tbl td:nth-child(6) { display: none; }
  /* WEI: AS OF / AGE / SOURCE stack under the name instead of scrolling sideways */
  .tbl.wei th:nth-child(n+4), .tbl.wei td:nth-child(n+4) { display: none; }
  .tbl.wei td.l { white-space: normal; }
  .tbl.wei .m { display: block; white-space: normal; color: var(--fg-faint); font-size: 10px; font-weight: 400;
    overflow-wrap: anywhere; }
  /* v3 wide tables on a phone: drop secondary columns (still in the desktop view) */
  .tbl.gex-exp th:nth-child(2), .tbl.gex-exp td:nth-child(2), .tbl.gex-exp th:nth-child(3), .tbl.gex-exp td:nth-child(3),
  .tbl.gex-exp th:nth-child(6), .tbl.gex-exp td:nth-child(6), .tbl.gex-exp th:nth-child(8), .tbl.gex-exp td:nth-child(8),
  .tbl.hlp th:nth-child(4), .tbl.hlp td:nth-child(4), .tbl.hlp th:nth-child(6), .tbl.hlp td:nth-child(6),
  .tbl.hlp th:nth-child(8), .tbl.hlp td:nth-child(8) { display: none; }
  /* v3 wide tables: wrap long text cells on a phone */
  .tbl.wrap-phone td.l { white-space: normal; overflow-wrap: anywhere; }
}