/* BiasHQ: a dark dealing-desk screen. Blue is bullish, red is bearish, slate is neutral. */
:root {
  --bg: #0f141c; --panel: #171e29; --panel-2: #1d2532; --line: #2a3443;
  --ink: #e7ecf3; --muted: #98a3b4; --dim: #6c7789;
  --bull: #3f5ce8; --bull-2: #2a3fa8; --bear: #e0554d; --bear-2: #a53a34; --flat: #465061; --none: #222a37;
  --accent: #e2ab4f; --ok: #3ecf8e;
  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --data: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Header */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px max(16px, 3vw); border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; }
.brand { font: 700 1.35rem/1 var(--display); text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--bull); }
nav { display: flex; flex-wrap: wrap; gap: 4px; }
nav a { text-decoration: none; padding: 6px 12px; border-radius: 6px; color: var(--muted); font-weight: 500; }
nav a:hover { color: var(--ink); background: var(--panel-2); }
nav a.on { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--bull); }
nav a.out::after { content: ' \2197'; color: var(--dim); }
.status { margin-left: auto; font: 400 .8rem var(--data); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 7px; }
.dot.late { background: var(--accent); } .dot.down { background: var(--bear); }
.ghost { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; color: var(--muted); cursor: pointer; }
.ghost:hover { color: var(--ink); border-color: var(--dim); }

main { flex: 1; padding: 22px max(16px, 3vw) 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
h1 { font: 700 1.5rem/1.2 var(--display); margin: 0; }
h2 { font: 600 1rem/1.3 var(--display); margin: 0; color: var(--muted); letter-spacing: .02em; }
.sub { color: var(--muted); margin: 0; max-width: 78ch; }
.loading, .empty { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.scroll { overflow-x: auto; }

/* Bias colours */
.b2 { background: var(--bull); color: #fff; } .b1 { background: var(--bull-2); color: #fff; }
.r2 { background: var(--bear); color: #fff; } .r1 { background: var(--bear-2); color: #fff; }
.n0 { background: var(--flat); color: #fff; } .na { background: var(--none); color: var(--dim); }
.chip { display: inline-block; min-width: 104px; text-align: center; padding: 3px 10px; border-radius: 5px; font: 600 .82rem var(--body); white-space: nowrap; }

/* Releases strip */
.releases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.releases li { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.releases b { font: 600 .9rem var(--body); }
.releases span { font: 400 .76rem var(--data); color: var(--muted); }
.releases li.done { border-color: var(--bull-2); }
.releases li.done span { color: var(--ink); }
.hot { color: var(--accent); }

/* Top Setups */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
.matrix { font: 400 .8rem var(--data); min-width: 1080px; }
.matrix th, .matrix td { padding: 7px 6px; text-align: center; border-bottom: 2px solid var(--bg); border-right: 2px solid var(--bg); white-space: nowrap; }
.matrix thead th { font: 500 .7rem var(--data); color: var(--muted); letter-spacing: .04em; background: var(--panel); border-bottom: 1px solid var(--line); }
.matrix thead .grp th { font: 600 .82rem var(--display); color: var(--ink); letter-spacing: 0; padding-top: 12px; }
.matrix td.sym, .matrix th.sym { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--panel); font: 600 .9rem var(--body); padding-left: 14px; min-width: 96px; }
.matrix td.sym small { display: block; font: 400 .72rem var(--body); color: var(--muted); }
.matrix td.score { font-weight: 500; font-size: .95rem; background: var(--panel-2); }
.matrix td.cov { color: var(--dim); background: var(--panel); }
.matrix tbody tr { cursor: pointer; }
.matrix tbody tr:hover td.sym { background: var(--panel-2); }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { box-shadow: inset 0 0 0 2px var(--accent); } to { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--muted); padding: 12px 14px; border-top: 1px solid var(--line); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }

/* Scorecard */
.card-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.summary { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.summary select { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; font: 600 1.05rem var(--body); }
.price { font: 500 1.5rem var(--data); }
.price small { display: block; font: 400 .75rem var(--data); color: var(--muted); }
.banner { text-align: center; padding: 9px; border-radius: 6px; font: 700 1.15rem var(--display); }
.gauge { width: 100%; max-width: 260px; margin: 0 auto; display: block; }
.tiles { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; }
.tiles b { font: 500 1rem var(--data); min-width: 54px; text-align: center; padding: 3px 8px; border-radius: 5px; }
.note { font-size: .82rem; color: var(--muted); margin: 0; border-left: 2px solid var(--accent); padding-left: 10px; }
.rows th, .rows td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rows tr.grp td { font: 600 .82rem var(--display); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; background: var(--panel-2); border-top: 1px solid var(--line); }
.rows tr.grp td span { float: right; font: 500 .82rem var(--data); letter-spacing: 0; text-transform: none; }
.rows td.detail { color: var(--ink); font: 400 .86rem var(--data); }
.rows td.when { color: var(--dim); font: 400 .78rem var(--data); white-space: nowrap; text-align: right; }
.rows tr.off td.detail { color: var(--dim); font-family: var(--body); }
.rows tr:last-child td { border-bottom: 0; }

/* Bias_Entry_Zone chart */
.bez { display: flex; flex-direction: column; overflow: hidden; }
.bez-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { background: none; border: 0; border-right: 1px solid var(--line); padding: 5px 12px; font: 500 .8rem var(--data); color: var(--muted); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--bull); }
.bez-state { margin-left: auto; font: 400 .8rem var(--data); color: var(--muted); }
.bez-state.off { color: var(--accent); }
.bez-canvas { height: 520px; }
.bez-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bez-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; font: 400 .82rem var(--data); }
.bez-list li.entry { border-left-color: var(--accent); background: rgba(226, 171, 79, .08); }
.bez-list li.possible { border-left-color: var(--line); }
.bez-list li b { font: 600 .84rem var(--body); color: var(--accent); min-width: 150px; }
.bez-list li .at { margin-left: auto; color: var(--muted); white-space: nowrap; }
.bez-list li.none { color: var(--muted); font-family: var(--body); }
.bez-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 12px 14px; font-size: .78rem; color: var(--muted); }
.bez-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.bez-legend i.ring { background: none; border: 2px solid var(--accent); }

/* Changes */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 148px 88px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed time { font: 400 .78rem var(--data); color: var(--muted); }
.feed .who { font-weight: 600; }
.feed .what small { display: block; color: var(--muted); font: 400 .8rem var(--data); }
.feed .move { font: 500 .85rem var(--data); white-space: nowrap; }

/* Sign in */
.signin { max-width: 380px; margin: 8vh auto 0; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.signin input { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 11px 12px; font: 400 1rem var(--data); width: 100%; }
.signin button[type="submit"] { background: var(--bull); border: 0; border-radius: 6px; padding: 11px; font-weight: 600; color: #fff; cursor: pointer; }
.signin button[type="submit"]:hover { background: #5470f0; }
.error { color: #ff9189; margin: 0; min-height: 1.4em; font-size: .9rem; }

/* Members */
.addmember { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.addmember label { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; color: var(--muted); }
.addmember input, .addmember select { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; }
.addmember button { background: var(--bull); border: 0; border-radius: 6px; padding: 10px; font-weight: 600; color: #fff; cursor: pointer; }
.addmember .error { grid-column: 1 / -1; }
.members th, .members td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.members th { font: 500 .72rem var(--data); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.members td small { display: block; color: var(--muted); }
.members tr:last-child td { border-bottom: 0; }
.members .acts { display: flex; gap: 8px; justify-content: flex-end; }
.signals { width: 100%; border-collapse: collapse; }
.signals td.num { font: 400 .86rem var(--data); }
.signals td small { font: 400 .76rem var(--data); }
.signals tr.off td { opacity: .6; }
.signals .chip { min-width: 0; }
.releases b small { display: block; font: 400 .76rem var(--data); color: var(--muted); }
.ghost.danger:hover { color: #ff9189; border-color: var(--bear); }
.signin .ghost { align-self: center; border: 0; background: none; text-decoration: underline; font-size: .85rem; }
button:disabled { opacity: .6; cursor: default; }

footer { padding: 18px max(16px, 3vw) 28px; border-top: 1px solid var(--line); color: var(--dim); font-size: .78rem; }
footer p { margin: 0 0 6px; max-width: 110ch; }

@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
  .status { margin-left: 0; width: 100%; order: 3; }
  .feed li { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .feed time { grid-column: 1 / -1; }
  .feed .move { white-space: normal; text-align: right; }
  .chip { min-width: 0; }
  /* Phone header: one scrolling line of tabs, and it scrolls away with the page. */
  .top { position: static; gap: 8px 12px; }
  .top nav { order: 2; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .top nav a { white-space: nowrap; }
  .top .ghost { margin-left: auto; }
  /* Phone scorecard: label and vote on one line, the figures underneath. */
  .rows, .rows tbody { display: block; }
  .rows tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
  .rows td { padding: 0; border: 0; }
  .rows td.detail { grid-column: 1 / -1; }
  .rows td.when { display: none; }
  .rows tr.grp { display: block; padding: 0; }
  .rows tr.grp td { display: block; padding: 8px 12px; }
  .bez-canvas { height: 400px; }
  .bez-state { margin-left: 0; width: 100%; }
  .bez-list li .at { margin-left: 0; }
}