/* Swing Agent UI — light only, Apple-style surfaces.
 *
 * Gain/loss is a POLARITY encoding, and the pair is validated rather than
 * eyeballed. Red-green is the classic colour-vision trap: #0ca30c vs #d03b3b
 * scores CVD ΔE 4.1 (deutan), far under the ≥8 target. Separating the two by
 * LIGHTNESS rescues the conventional pairing — dark green against light red
 * scores 11.2 and passes.
 *
 *   marks (bars):  gain #046b04 · loss #e8615f   (CVD ΔE 11.2, both ≥3:1)
 *   text (values): gain #046b04 · loss #c2302f   (6.75:1 and 5.59:1, WCAG AA)
 *
 * The loss red is lightened for marks to win CVD separation and darkened for
 * text to win contrast; the hue is the same in both. Colour is never the sole
 * carrier — every value shows its sign, and every bar diverges from a zero
 * axis, so position and numeral both encode direction independently.
 */
:root {
  color-scheme: light;
  --page:      #f5f5f7;   /* Apple system background */
  --panel:     #ffffff;
  --panel-2:   #f5f5f7;
  --line:      #d2d2d7;
  --line-soft: #e8e8ed;
  --ink:       #1d1d1f;
  --ink-2:     #6e6e73;
  --ink-3:     #86868b;
  --gain:      #046b04;
  --gain-mark: #046b04;
  --loss:      #c2302f;
  --loss-mark: #e8615f;
  --accent:    #0071e3;   /* Apple blue */
  --warn:      #8a6200;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }
html, body { background: var(--page); }
body {
  margin: 0; color: var(--ink);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif,
        system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.num, td.num, .tile-value { font-variant-numeric: tabular-nums; }

/* ---------- chrome ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 22px; background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 600; letter-spacing: -.02em; font-size: 16px; }
.grow { flex: 1; }
.tabs { display: flex; gap: 2px; background: var(--panel-2); padding: 3px; border-radius: 10px; }
.tabs button {
  border: 0; background: transparent; color: var(--ink-2);
  padding: 6px 16px; border-radius: 8px; font: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  background: var(--panel); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.09);
}
select, input, .btn {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 13px;
}
.btn { cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.notice {
  padding: 8px 22px; font-size: 12.5px; color: var(--ink-2);
  background: var(--panel); border-bottom: 1px solid var(--line-soft);
}
main { padding: 22px; max-width: 1400px; margin: 0 auto; }

/* ---------- stat tiles ---------- */
.tiles {
  display: grid; gap: 13px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.tile {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow);
}
.tile-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 600; margin-bottom: 6px;
}
.tile-value { font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.18; }
.tile-sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.tile.hero .tile-value { font-size: 29px; }
.pos { color: var(--gain); }
.neg { color: var(--loss); }
.flat { color: var(--ink-2); }

/* ---------- panels & tables ---------- */
.cols { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 16px; align-items: start; }
@media (max-width: 1040px) { .cols { grid-template-columns: 1fr; } }
.panel {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 16px;
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 17px; border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.panel-head .count { color: var(--ink-3); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
.scroll { max-height: 70vh; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
th {
  position: sticky; top: 0; z-index: 1; background: var(--panel);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .055em; color: var(--ink-3); border-bottom: 1px solid var(--line);
}
td.num, th.num { text-align: right; }
.sym { font-weight: 600; letter-spacing: -.01em; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--panel-2); }
tbody tr.sel { background: rgba(0,113,227,.09); }

.meter { height: 5px; border-radius: 3px; background: var(--panel-2); position: relative; margin-top: 6px; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); }
.meter u { position: absolute; top: -2px; bottom: -2px; width: 1.5px; background: var(--ink-3); opacity: .6; }

/* ---------- charts ---------- */
.chart { padding: 6px 17px 16px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .axis { stroke: var(--line); stroke-width: 1; }          /* recessive */
.chart .zero { stroke: var(--ink-3); stroke-width: 1; }
.chart .tick { fill: var(--ink-3); font-size: 11px; }
.chart .lbl  { fill: var(--ink);   font-size: 13px; font-weight: 500; }
.chart .val  { fill: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .bar  { rx: 3; ry: 3; }        /* rounded data-end, anchored at the zero axis */
.chart .bar.p { fill: var(--gain-mark); }
.chart .bar.n { fill: var(--loss-mark); }
.chart .bar.neutral { fill: var(--accent); }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover + .bar, .chart g:hover .bar { opacity: .82; }
.chart .thresh { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart-note { padding: 0 17px 14px; font-size: 12px; color: var(--ink-3); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.pill.buy, .pill.add   { background: rgba(4,107,4,.11);  color: var(--gain); }
.pill.sell, .pill.exit,
.pill.trim             { background: rgba(194,48,47,.11); color: var(--loss); }
.pill.hold             { background: rgba(250,178,25,.18); color: var(--warn); }
.pill.no_action        { background: var(--panel-2); color: var(--ink-3); }
.chip {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px;
  padding: 0 5px; font-weight: 600; margin-left: 4px;
}

/* ---------- decision detail ---------- */
.detail { padding: 17px; }
.detail h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.detail .meta { color: var(--ink-2); font-size: 12.5px; margin: 3px 0 17px; }
.agent { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.agent:first-of-type { border-top: 0; padding-top: 0; }
.agent-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.agent-name { font-weight: 600; font-size: 13.5px; }
.agent-fig { margin-left: auto; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.agent-why { color: var(--ink-2); font-size: 12.5px; margin-top: 4px; }
.contrib { height: 6px; background: var(--panel-2); border-radius: 3px; position: relative; margin-top: 8px; }
.contrib i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.contrib i.p { background: var(--gain-mark); }
.contrib i.n { background: var(--loss-mark); }
.contrib u { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--ink-3); opacity: .55; }
.verdict { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.verdict .line, .line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px,1fr)); gap: 5px 18px; }
.kv > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.kv span:first-child { color: var(--ink-3); }
.kv span:last-child { font-variant-numeric: tabular-nums; }
.section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 600; margin: 18px 0 8px;
}
.empty { padding: 38px 18px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* ---------- login ---------- */
.login { max-width: 360px; margin: 14vh auto; }
.login .panel { padding: 26px; }
.login h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.025em; }
.login p { margin: 0 0 20px; color: var(--ink-3); font-size: 13px; }
.login form { display: flex; flex-direction: column; gap: 11px; }
.login input { padding: 10px 12px; font-size: 14px; }
.login .btn {
  padding: 10px; font-weight: 600; background: var(--accent);
  color: #fff; border-color: transparent;
}
.login .btn:hover { background: #0077ed; color: #fff; }
.err { color: var(--loss); font-size: 12.5px; min-height: 17px; }