@import url("tokens.css");

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-text);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: 0;
  font-feature-settings: "cv01", "ss03", "tnum";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: rgba(61,139,253,0.35); }
[hidden] { display: none !important; }

/* ---------- three voices ---------- */
/* body voice: 13.5/400/1.45 sentence case --ink-1 (default on body, colored --ink-0 for primary) */
.body { font-size: 13.5px; line-height: 1.45; color: var(--ink-1); }
/* data voice: mono 12 */
.mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ticker { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-0); letter-spacing: 0; }
.ts { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.cap { font-size: 11px; line-height: 1.3; color: var(--ink-3); letter-spacing: 0; }
.sec { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); letter-spacing: 0; }
.evidence { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0; }
.pos { color: var(--long); }
.neg { color: var(--short); }
.flat { color: var(--ink-1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
abbr[title], [title] { text-decoration: none; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0 var(--s-6);
  background: rgba(5,5,6,0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-0); white-space: nowrap; }
.wordmark .mark { display: block; width: 14px; height: 14px; color: var(--ink-0); flex: none; margin-right: -1px; }
.tick-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; margin-left: 4px; }
.tick-readout { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.tick-dot.is-live { background: var(--long-solid); }
.tick-dot.is-pulse { animation: tick-pulse var(--pulse-dur) ease-out 1; }
@keyframes tick-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,220,132,0.5); }
  100% { box-shadow: 0 0 0 7px rgba(61,220,132,0); }
}
.topbar-right { display: flex; align-items: center; gap: var(--s-6); min-width: 0; }
.readout { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.readout .lbl { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.readout .lbl.risk_on { color: var(--long); }
.readout .lbl.risk_off { color: var(--short); }
.readout .lbl.transition { color: var(--warn); }
.readout .lbl.neutral { color: var(--ink-1); }
.readout .sep { color: var(--ink-2); }
.readout .val { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.readout .k { font-size: 11px; color: var(--ink-3); }
.readout .money { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.link-quiet { display: inline-flex; align-items: center; height: 44px; font-size: 12px; color: var(--ink-2); }
.link-quiet:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- layout ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 1600px; margin: 0 auto; padding: var(--s-4) var(--s-6) var(--s-6);
}
/* Panel heights are derived from the row grids plus a 28px fade gutter so the visible
   cut lands on a whole card / row boundary and the fade dissolves the *next* item, not
   the last readable one: recs body 644 = 3 cards × 200 + 2 gaps × 8 + 28;
   sources body 448 = 28 head + 7 rows × 56 + 28; events body 448 = 7 rows × 60 + 28.
   Signals group heads vary with data, so markScroll() snaps every overflowing body's
   height down to its last whole row + gutter inside the fixed panel. */
.p-recs      { grid-column: 1 / 8;  height: calc(644px + var(--panel-head-h)); }
.p-signals   { grid-column: 8 / 13; height: calc(644px + var(--panel-head-h)); }
.p-sources   { grid-column: 1 / 5;  height: calc(448px + var(--panel-head-h)); }
.p-events    { grid-column: 5 / 9;  height: calc(448px + var(--panel-head-h)); }
.p-portfolio { grid-column: 9 / 13; height: calc(448px + var(--panel-head-h)); }
.p-claims    { grid-column: 1 / -1; height: auto; max-height: 420px; }
.p-trades    { grid-column: 1 / -1; height: auto; max-height: 640px; }
.p-strip     { grid-column: 1 / -1; }

@media (max-width: 1279.98px) {
  .p-recs { grid-column: 1 / 8; }
  .p-signals { grid-column: 8 / 13; }
  .p-sources, .p-events { grid-column: span 6; }
  .p-portfolio { grid-column: 1 / -1; height: auto; max-height: 720px; }
}
@media (max-width: 899.98px) {
  .grid { padding: var(--s-3) var(--s-4) var(--s-4); gap: var(--s-3); }
  .grid > * { grid-column: 1 / -1 !important; height: auto; }
  /* Mobile: panels stack at natural height; only the two long feeds keep an inner scroll. */
  .panel > .panel-body { max-height: none; overflow: visible; }
  /* 60vh cap; markScroll() snaps the cap down to the last whole row + fade gutter. */
  .p-signals > .panel-body, .p-events > .panel-body { max-height: 60vh; overflow-x: hidden; overflow-y: auto; }
  .topbar { padding: 0 var(--s-4); gap: var(--s-2); }
  .topbar-right { gap: var(--s-3); }
  .readout .k, .readout .val { display: none; }
  .readout .money { font-size: 14px; }
}

/* ---------- panel: no border, one tonal step ---------- */
.panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-1);
  border-radius: var(--r-3);
  overflow: hidden;
}
.panel-head {
  flex: none; height: var(--panel-head-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0 var(--s-4);
}
.panel-title {
  font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.panel-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.panel-meta .updating { display: none; }
.panel.htmx-request .panel-meta .live { display: none; }
.panel.htmx-request .panel-meta .updating { display: inline; }
/* Every dense body is a bounded scroll region: the panel has a fixed height,
   the body fills it, scrolls, and ends in 16px of padding so the last row is
   never cut by the panel boundary. Scrollbar: thin, --ink-3 thumb, no track. */
.panel-body {
  flex: 1 1 auto; min-height: 0; max-height: 100%;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding-bottom: var(--s-4);
  scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
}
.panel-body::-webkit-scrollbar { width: 6px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 3px; }
/* Scroll affordance: a soft fade at the bottom edge of a scrollable body tells the
   operator there is more below, so the last visible row never reads as "cut off".
   The panel must be position:relative for the fade to pin to its bottom edge. */
.panel { position: relative; }
.panel-body.can-scroll::after {
  content: ""; position: sticky; bottom: 0; left: 0; right: 0;
  display: block; height: 28px; margin-top: -28px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,11,13,0), var(--bg-1) 90%);
}
.panel-body > :last-child { margin-bottom: 0; }
/* "N more ↓" caption: created by markScroll() when a body overflows, pinned to the
   panel's bottom-right over the fade; removed once scrolled to the end. */
.more-cap {
  position: absolute; right: var(--s-3); bottom: 6px; z-index: 2; pointer-events: none; /* bottom is set by markScroll() to sit inside the body's fade gutter */
  font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--ink-2); white-space: nowrap;
}
.empty { padding: var(--s-2) var(--s-4) var(--s-4); font-size: 12.5px; color: var(--ink-2); }

/* settle motion: with DOM morphing, only nodes whose text changed get a brief
   highlight (color lift + settle); unchanged content never repaints or moves. */
.did-change { animation: did-change 900ms ease-out; }
@keyframes did-change {
  0%   { color: var(--ink-0); text-shadow: 0 0 10px rgba(245,245,247,0.35); }
  100% { color: inherit; text-shadow: none; }
}
.rec.did-change, tr.did-change, .sig.did-change { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--swap-dur); }

/* ---------- shared primitives ---------- */
.row:hover, tbody tr:hover { background: var(--bg-3); }

/* direction chip: text + 6px dot, no fill, no border */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0; white-space: nowrap; flex: none; line-height: 1; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.long  { color: var(--long); }
.chip.short { color: var(--short); }
.chip.neut  { color: var(--ink-2); }
/* exit-reason chips (trade history): neutral mechanics, loss-driven exit, unknown */
.chip.chip-neutral { color: var(--ink-2); }
.chip.chip-neg     { color: var(--short); }
.chip.chip-muted   { color: var(--ink-3); }

/* tags: text-only mono 11 --ink-2, joined by " · " */
.tag { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.tags .tag + .tag::before { content: " · "; color: var(--ink-3); }

/* bars: 4px, legible track, full-opacity fill, min 48px */
.bar { position: relative; display: inline-block; height: 4px; min-width: 48px; width: 100%; background: var(--track); border-radius: 2px; overflow: hidden; vertical-align: middle; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--ink-1); border-radius: 2px; }
.bar.seg { display: inline-flex; gap: 1px; background: none; overflow: visible; }
.bar.seg > span { position: relative; flex: 1; height: 100%; min-width: 0; background: var(--track); border-radius: 2px; overflow: hidden; }
.bar.seg > span > i { position: absolute; inset: 0 auto 0 0; background: var(--ink-1); }

/* ---------- table base (only place row dividers exist) ---------- */
.tbl th {
  position: sticky; top: 0; z-index: 1;
  height: 30px; padding: 0 var(--s-3);
  background: var(--bg-1);
  font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); white-space: nowrap;
}
.tbl th.num, .tbl td.num { text-align: right; }
.tbl td { height: 44px; padding: 0 var(--s-3); border-bottom: 1px solid var(--line-row); font-size: 13.5px; font-weight: 500; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--s-4); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--s-4); }

/* ---------- recommendations (the objects of action; only hairlines on the page) ---------- */
.rec-list { display: flex; flex-direction: column; gap: var(--s-2); padding: 0 var(--s-3) var(--s-3); }
.rec {
  background: var(--bg-2);
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
  padding: var(--s-4) 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); row-gap: 10px;
  align-content: start; min-height: 200px;
}
.rec-head { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.rec-sym { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink-0); }
.rec-conv { grid-column: 2; grid-row: 1 / 3; align-self: start; text-align: right; }
.rec-conv .n { display: block; font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--ink-0); }
.rec-conv .cap { display: block; margin-top: 4px; }
.rec-thesis { grid-column: 1; grid-row: 2; font-size: 14px; line-height: 1.45; min-height: 2.9em; color: var(--ink-0); font-weight: 400; letter-spacing: -0.005em; text-wrap: pretty; }
.rec-def { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--s-3); row-gap: 6px; align-items: baseline; }
.rec-def dt { font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.rec-def dd { font-size: 12.5px; line-height: 1.6; color: var(--ink-1); min-width: 0; }
.rec-def dd .evd { color: var(--ink-1); white-space: nowrap; }
.rec-def dd { overflow-wrap: anywhere; }
.rec-def dd .evd:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.rec-def dd .evd .mono { color: var(--ink-2); }
.rec-def dd .sep { color: var(--ink-2); padding: 0 4px; }
.rec-status { grid-column: 1 / -1; grid-row: 5; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.rec-lin { grid-column: 1 / -1; grid-row: 4; }
.rec-lin:empty { display: none; }
.rec-lin .lineage { margin: 0; }
.rec-lin .lin-close { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.rec-lin .lin-close:hover { color: var(--ink-1); }
@media (max-width: 899.98px) {
  .rec { padding: var(--s-3) var(--s-4); min-height: 0; }
  .rec-thesis { min-height: 0; }
  .rec-sym { font-size: 20px; }
  .rec-conv .n { font-size: 24px; }
  .rec-def { grid-template-columns: 60px minmax(0, 1fr); }
  .rec-def dd .evd { white-space: normal; }
}

/* ---------- signals board v2: fixed-track grid ---------- */
.sig-group { padding-top: var(--s-6); }
.sig-group:first-child { padding-top: var(--s-1); }
.sig-group-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  height: 28px; padding: 0 var(--s-4);
  background: var(--bg-1);
}
.sig-group-head .name { font-size: 12.5px; font-weight: 500; color: var(--ink-1); }
.sig-group-head .count { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.sig-rows { list-style: none; }
/* Two-line row. Line 1: chevron · ticker · direction · bar · value · age.
   Line 2: the full human reason (12.5px --ink-2), wrapping to two lines,
   never ellipsised. Formula reasons use the mono evidence voice. */
.sig, .lin {
  display: grid;
  grid-template-columns: 20px 64px 64px 96px 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center; column-gap: var(--s-2); row-gap: 2px;
  min-height: 40px; padding: 8px var(--s-4) 8px;
}
/* Signal rows are a fixed 72px (6 + 24 + 2 + 36 + 4) so the panel grid divides evenly. */
.sig { height: 72px; grid-template-rows: 24px 36px; padding: 6px var(--s-4) 4px; overflow: hidden; }
.sig .c-chev { grid-row: 1; }
.sig .c-str, .lin .c-str { display: flex; align-items: center; }
.sig .bar, .lin .bar { width: 96px; min-width: 48px; }
.sig .v, .lin .v { font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); text-align: right; }
.sig .c-age, .lin .c-age { grid-column: 6; grid-row: 1; text-align: right; }
.sig .c-reason, .lin .c-reason {
  grid-column: 2 / -1; grid-row: 2;
  font-size: 12.5px; line-height: 18px; color: var(--ink-2); letter-spacing: 0; min-width: 0; align-self: start;
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sig .c-reason .evidence, .lin .c-reason .evidence { display: inline; font-size: 11.5px; }
.sig.extra, .lineage-row.extra { display: none; }
.sig-group.is-open .sig.extra { display: grid; }
.sig-group.is-open .lineage-row.extra:not([hidden]) { display: block; }
.view-all { display: inline-flex; align-items: center; height: 28px; margin: 0 var(--s-4); font-size: 12px; color: var(--ink-2); }
.view-all:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }
.view-all .when-open { display: none; }
.sig-group.is-open .view-all .when-folded { display: none; }
.sig-group.is-open .view-all .when-open { display: inline; }
.sig .src-link { color: var(--ink-2); font-family: var(--font-mono); font-size: 11.5px; }
.sig .src-link:hover { color: var(--ink-0); }
.sig.open { background: var(--bg-2); }
.disclose {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: -4px; border-radius: var(--r-1); color: var(--ink-2);
}
.disclose:hover { color: var(--ink-0); background: var(--bg-3); }
.disclose svg { transition: rotate var(--swap-dur) ease-out; }
.disclose[aria-expanded="true"] svg { rotate: 180deg; }
.lineage-row { background: var(--bg-2); padding: 0 var(--s-4) var(--s-2) 0; }
.lineage { margin-left: calc(var(--s-4) + 10px); padding-left: var(--s-2); border-left: 1px solid var(--line-1); }
.lineage .lin { padding: 4px 0 4px var(--s-1); min-height: 34px; }
.lineage .lin .c-chev { width: 20px; }
.lineage .lineage { margin: 0 0 0 var(--s-3); }
.lineage-note { padding: 6px 0 2px var(--s-1); font-size: 11px; color: var(--ink-3); }
.lin .lin-type { font-size: 11px; color: var(--ink-3); grid-column: 2 / -1; grid-row: 3; margin-top: -2px; }

/* How to read — one paragraph, sentence case, --ink-2 */
.howto { margin: var(--s-4) var(--s-4) var(--s-3); }
.howto summary { cursor: pointer; list-style: none; font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; height: 28px; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::before { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: -45deg; transition: rotate var(--swap-dur) ease-out; translate: 0 -1px; }
.howto[open] summary::before { rotate: 45deg; translate: 0 -2px; }
.howto summary:hover { color: var(--ink-0); }
.howto p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; margin-top: 4px; }

@media (max-width: 899.98px) {
  .sig, .lin { grid-template-columns: 20px 56px 60px minmax(48px, 1fr) 40px 52px; padding: 6px var(--s-3); min-height: 44px; }
  .sig { padding: 6px var(--s-3) 4px; }
  .sig .c-age, .lin .c-age { grid-column: 6; }
  .sig .bar, .lin .bar { width: 100%; min-width: 48px; }
  .view-all { margin-left: var(--s-3); }
  .sig-group-head { padding: 0 var(--s-3); }
  .lineage { margin-left: var(--s-3); }
}

/* ---------- sources ---------- */
/* Name column is at least 160px; names that still do not fit get an ellipsis and carry a title. */
.src-name { font-weight: 500; font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-sub { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.src-sub .mono { font-size: 11.5px; }
.gauge { display: inline-flex; align-items: center; gap: 8px; }
.gauge .track { position: relative; width: 64px; height: 4px; background: var(--track); border-radius: 2px; flex: none; }
.gauge .track > i { position: absolute; inset: 0 auto 0 0; background: var(--ink-1); border-radius: 2px; }
.gauge .track > b { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--ink-2); }
.gauge .v { font-family: var(--font-mono); font-size: 12px; color: var(--ink-0); width: 34px; text-align: right; }
.spark { display: block; width: 56px; height: 16px; color: var(--ink-2); }
.spark polyline { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.src-tbl { table-layout: fixed; }
.src-tbl col.g-src { width: auto; min-width: 160px; }
.src-tbl col.g-cred { width: 172px; }
.src-tbl col.g-brier { width: 108px; }
.src-tbl td:nth-child(2) .gauge .track { width: 56px; }
.src-tbl td:nth-child(2) .spark { width: 40px; }
.src-tbl td:nth-child(3) .gauge .track { width: 40px; }
/* Fixed 56px rows: 7 rows + 28px header fill the 420px body exactly. */
.src-tbl th { height: 28px; }
.src-tbl td { height: 56px; padding-top: 0; padding-bottom: 0; }
.src-tbl tbody tr { height: 56px; }
.src-tbl td:first-child { min-width: 0; }
tr:target td { background: var(--bg-3); }
@media (max-width: 899.98px) {
  #panel-sources .panel-meta .sort-cap { display: none; }
  .src-tbl col.g-cred { width: 96px; }
  .src-tbl col.g-brier { width: 96px; }
  .src-tbl td { padding: 0 var(--s-2); }
  .gauge { gap: 6px; }
  .gauge .track, .src-tbl td:nth-child(2) .gauge .track, .src-tbl td:nth-child(3) .gauge .track { width: 40px; }
  .gauge .v { width: 32px; }
  .src-tbl .spark { display: none; }
  .src-tbl th:first-child, .src-tbl td:first-child { padding-left: var(--s-3); }
  .src-tbl th:last-child, .src-tbl td:last-child { padding-right: var(--s-3); }
}

/* ---------- events ---------- */
/* Message first (13.5 --ink-0); one quiet metadata line below. */
.ev { display: flex; flex-direction: column; gap: 3px; padding: 10px var(--s-4); }
.ev-text {
  font-size: 13.5px; line-height: 1.45; color: var(--ink-0); letter-spacing: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ev-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.ev-meta .sep { color: var(--ink-3); }
.ev-meta .mono, .ev-meta .ticker { font-size: 11.5px; font-weight: 400; color: var(--ink-2); }
.ev-src { font-size: 12px; font-weight: 500; color: var(--ink-1); }
.ev-meta .res { font-family: var(--font-mono); font-size: 11.5px; }
.ev-meta .res.warn { color: var(--warn); }

/* ---------- claims ---------- */
.claims-subhead, .trd-subhead {
  padding: var(--s-3) var(--s-4) var(--s-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.claim { display: flex; flex-direction: column; gap: 6px; padding: 10px var(--s-4); }
.claim-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.claim-id { color: var(--ink-3); }
.claim-src { font-size: 12px; font-weight: 500; color: var(--ink-1); }
.claim-text {
  font-size: 13px; line-height: 1.4; color: var(--ink-1); letter-spacing: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.claim-actions { display: flex; gap: var(--s-2); }
.btn-claim {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 var(--s-3);
  border: 1px solid var(--line-1); border-radius: var(--r-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-1);
  background: var(--bg-2);
}
.btn-claim:hover { color: var(--ink-0); border-color: var(--ink-2); }
.btn-claim.confirm:hover { color: var(--long); border-color: var(--long); }
.btn-claim.deny:hover { color: var(--short); border-color: var(--short); }
.claim.is-resolved .claim-text { -webkit-line-clamp: 1; }
.claim.is-queued { opacity: 0.5; }
.claim-queued { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.htmx-request .claim-actions { opacity: 0.6; pointer-events: none; }

/* ---------- portfolio ---------- */
.pnl-top { padding: var(--s-1) var(--s-4) 0; display: flex; align-items: baseline; gap: var(--s-3); }
.pnl-top .eq { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-0); }
.pnl-top .chg { font-family: var(--font-mono); font-size: 12px; }
/* Four fixed 25% tracks; label above value, values right-aligned tabular. */
.pnl-sum { display: grid; grid-template-columns: repeat(4, 25%); gap: 0; padding: var(--s-3) var(--s-4) 0; }
.pnl-sum > div { display: flex; flex-direction: column; justify-content: space-between; min-height: 44px; min-width: 0; padding-right: var(--s-2); text-align: right; }
.pnl-sum > div:last-child { padding-right: 0; }
.pnl-sum .k { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-sum .v { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pnl-sum .v .sec { font-family: var(--font-mono); font-size: 12px; }
.pnl-chart { display: grid; grid-template-columns: 56px minmax(0, 1fr) 72px; margin: var(--s-3) var(--s-4) 0; }
.pnl-plot { position: relative; height: 160px; }
.pnl-plot svg { display: block; width: 100%; height: 160px; }
.pnl-plot .grid-line { stroke: var(--line-1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pnl-plot .axis { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pnl-plot .area { fill: url(#pnl-fill); }
.pnl-plot .line { fill: none; stroke: var(--ink-0); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pnl-plot .base { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pnl-plot .dd { fill: var(--short-dim); }
.pnl-plot .fill-tick { stroke: var(--ink-1); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pnl-plot .end-dot { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ink-0); }
.pnl-y { position: relative; height: 160px; }
.pnl-y span { position: absolute; right: 8px; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.pnl-y .start { color: var(--ink-2); }
.pnl-end { position: relative; height: 160px; }
.pnl-end { overflow: hidden; }
.pnl-end .last { position: absolute; left: 8px; right: 0; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-x { display: grid; grid-template-columns: 56px minmax(0, 1fr) 72px; margin: 4px var(--s-4) 0; }
.pnl-x .ticks { grid-column: 2; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }
.pnl-legend { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); padding: 8px var(--s-4) var(--s-3); font-size: 11px; color: var(--ink-2); }
.pnl-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pnl-legend i { display: inline-block; flex: none; }
.pnl-legend .sw-line { width: 14px; height: 0; border-top: 1.5px solid var(--ink-0); }
.pnl-legend .sw-dash { width: 14px; height: 0; border-top: 1px dashed var(--ink-2); }
.pnl-legend .sw-band { width: 12px; height: 8px; background: var(--short-dim); border-radius: 1px; }
.pnl-legend .sw-tick { width: 3px; height: 8px; background: var(--ink-1); }
.pos-tbl .c-side { width: 64px; }
@media (max-width: 899.98px) {
  .pnl-sum { grid-template-columns: repeat(2, 50%); row-gap: var(--s-2); padding: var(--s-3) var(--s-3) 0; }
  .pnl-sum > div:nth-child(2n) { padding-right: 0; }
  .pnl-chart, .pnl-x { grid-template-columns: 44px minmax(0, 1fr) 72px; margin-left: var(--s-3); margin-right: var(--s-3); }
  .pnl-legend { padding-left: var(--s-3); padding-right: var(--s-3); }
  .pos-tbl th, .pos-tbl td { padding: 0 6px; }
  .pos-tbl th:first-child, .pos-tbl td:first-child { padding-left: var(--s-3); }
  .pos-tbl th:last-child, .pos-tbl td:last-child { padding-right: var(--s-3); }
  .pos-tbl th:nth-child(6), .pos-tbl td:nth-child(6) { display: none; }
  .pos-tbl td { font-size: 13px; }
}


/* ---------- trade history ---------- */
/* Window toggle sits in the head between title and meta: two mono links, the
   current one reads as text (--ink-1, no underline), the other as a quiet link. */
.trd-win { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; white-space: nowrap; }
.trd-win a { display: inline-flex; align-items: center; height: 28px; padding: 0 2px; color: var(--ink-3); }
.trd-win a:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }
.trd-win a[aria-current] { color: var(--ink-1); text-decoration: none; cursor: default; }
.trd-win .sep { color: var(--ink-3); }
/* Summary strip: the portfolio's label-over-value readouts, laid out as an
   auto-width row so it reads as one line of facts, not a scoreboard. */
.trd-sum { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); padding: var(--s-1) var(--s-4) var(--s-3); }
.trd-sum > div { display: flex; flex-direction: column; min-width: 0; }
.trd-sum .k { font-size: 11px; color: var(--ink-3); margin-bottom: 3px; white-space: nowrap; }
.trd-sum .v { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Closed trades: one 44px row each (table base). Entry → exit and the P&L pair
   are mono; the arrow and the % are a step quieter than the prices. */
.trd-tbl th.c-time, .trd-tbl td.c-time { text-align: left; }
.trd-tbl td .mono { font-size: 12.5px; }
.trd-tbl .arrow { color: var(--ink-3); padding: 0 5px; }
.trd-tbl .c-time .ts { display: block; }
.trd-tbl .c-time .cap { display: block; margin-top: 1px; }
/* Fixed tracks on every column but Exit, so the row reads as two clusters:
   identity and prices on the left, outcome on the right; the slack sits after
   the exit chip instead of between related numbers. */
.trd-tbl .c-sym { width: 88px; }
.trd-tbl .c-qty { width: 64px; }
.trd-tbl .c-px { width: 190px; }
.trd-tbl .c-time { width: 132px; }
.trd-tbl .c-hold { width: 80px; }
.trd-tbl .c-exit { width: auto; padding-left: var(--s-6); }
.trd-tbl .c-pnl { width: 168px; }
.trd-tbl .c-fees { width: 72px; }
.trd-tbl .pnl { font-weight: 500; }
.trd-tbl .pct { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); margin-left: 8px; }
.trd-tbl td.c-fees { color: var(--ink-2); }
.m-only { display: none; }
/* Rejected: 36px rows in the secondary voice. Long reject reasons ellipsise on
   one line; the full text rides on the title attribute. */
.rej-tbl td { height: 36px; font-size: 12.5px; font-weight: 400; color: var(--ink-1); }
.rej-tbl .c-side { width: 72px; }
.rej-tbl .c-reason { width: 100%; max-width: 0; }
.rej-tbl .reason { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.rej-tbl tbody tr:hover .reason { color: var(--ink-1); }
@media (max-width: 899.98px) {
  .p-trades { max-height: none; }
  .trd-win { margin-left: 0; }
  .p-trades .panel-head { gap: var(--s-2); }
  .p-trades .panel-meta { margin-left: auto; }
  .trd-sum { gap: var(--s-2) var(--s-4); padding-left: var(--s-3); padding-right: var(--s-3); }
  .trd-tbl th, .trd-tbl td, .rej-tbl th, .rej-tbl td { padding: 0 6px; }
  .trd-tbl th:first-child, .trd-tbl td:first-child, .rej-tbl th:first-child, .rej-tbl td:first-child { padding-left: var(--s-3); }
  .trd-tbl th:last-child, .trd-tbl td:last-child, .rej-tbl th:last-child, .rej-tbl td:last-child { padding-right: var(--s-3); }
  /* Phone: four columns. Qty folds under the symbol, times and hold under the
     prices, the % under the P&L; fees stay in the summary strip. */
  .trd-tbl .c-qty, .trd-tbl .c-time, .trd-tbl .c-hold, .trd-tbl .c-fees, .rej-tbl .c-qty { display: none; }
  .trd-tbl td { height: auto; padding-top: 7px; padding-bottom: 7px; vertical-align: top; }
  .trd-tbl td > .m-only { display: block; margin-top: 2px; white-space: nowrap; }
  .trd-tbl td .ticker { display: block; line-height: 18px; }
  .trd-tbl .c-sym, .trd-tbl .c-px, .trd-tbl .c-pnl { width: auto; }
  .trd-tbl .c-exit { padding-left: 6px; }
  .trd-tbl td.c-exit { padding-top: 10px; }
  .trd-tbl .pct { display: block; margin: 2px 0 0; }
  .trd-tbl .arrow { padding: 0 3px; }
  .rej-tbl td { height: auto; padding-top: 7px; padding-bottom: 7px; vertical-align: top; }
  .rej-tbl .reason { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .rej-tbl td .m-only { display: block; margin-top: 2px; }
}

/* ---------- regime & scenario strip ---------- */
.strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.strip > * { min-width: 0; }
.regime { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-3) var(--s-6); align-items: center; padding: 0 var(--s-4) var(--s-4); }
.regime-label { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.regime-label.risk_on { color: var(--long); }
.regime-label.neutral { color: var(--ink-1); }
.regime-label.risk_off { color: var(--short); }
.regime-label.transition { color: var(--warn); }
.regime-ra { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.regime-explain { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 72ch; text-wrap: pretty; }
.meter { position: relative; height: 4px; background: var(--track); border-radius: 2px; }
.meter > b { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 1px; background: var(--ink-2); }
.meter > i { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink-0); }
.meter-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.readouts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: 12px; }
.readouts .k { color: var(--ink-2); }
.readouts .v { font-family: var(--font-mono); color: var(--ink-1); }
.scenario { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-6); align-items: baseline; padding: 0 var(--s-4) var(--s-4); }
.scenario .name { font-size: 14px; font-weight: 500; color: var(--ink-0); }
.scenario .phase { font-size: 12.5px; color: var(--ink-2); }
.scenario .prog { grid-column: 1 / -1; }
.scenario .prog .bar { margin-top: 6px; display: block; }
.scenario .prog .k { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.scenario .note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); letter-spacing: 0; text-wrap: pretty; }
.scenario .steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); }
.scenario .steps .dots { display: inline-flex; align-items: center; gap: 5px; }
.scenario .steps .dots i { display: block; width: 14px; height: 3px; border-radius: 2px; background: var(--track); }
.scenario .steps .dots i.on { background: var(--ink-1); }
.scenario .steps .k { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.scenario .steps .next { font-size: 12px; color: var(--ink-2); }
.scenario .steps .next .k { margin-right: 4px; }
@media (max-width: 899.98px) {
  .strip { grid-template-columns: 1fr; gap: 0; }
  .regime { grid-template-columns: 1fr; }
}

/* ---------- login ---------- */
.login { min-height: 100dvh; padding: 22vh var(--s-6) var(--s-12) max(var(--s-6), 10vw); }
.login-col { width: 100%; max-width: 360px; }
.login .wordmark { margin-bottom: var(--s-8); }
.login h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s-6); }
.field { display: block; margin-bottom: var(--s-4); }
.field span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; letter-spacing: 0; }
.input {
  display: block; width: 100%; height: 44px; padding: 0 var(--s-3);
  background: var(--bg-2); color: var(--ink-0);
  border: 1px solid var(--line-1); border-radius: var(--r-2);
  font: inherit; font-size: 14px; letter-spacing: -0.01em;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 44px; margin-top: var(--s-2);
  background: var(--ink-0); color: var(--bg-0);
  border-radius: var(--r-2); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
.btn-primary:hover { background: var(--ink-1); }
.form-error { font-size: 12.5px; color: var(--short); margin-bottom: var(--s-4); letter-spacing: 0; }
.login-foot { margin-top: var(--s-6); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tick-dot.is-pulse { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- Ask panel (analysis only) ---- */
.ask { min-height: calc(100dvh - var(--topbar-h)); padding: var(--s-6) var(--s-6) var(--s-12); display: flex; justify-content: center; }
.ask-col { width: 100%; max-width: 820px; display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - var(--s-12) - var(--s-6)); }
.ask-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.ask-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ask-meta { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.ask-meta .k { color: var(--ink-3); }
.ask-meta .v { color: var(--ink-1); }
.ask-meta .sep { margin: 0 6px; color: var(--ink-3); }
.ask-disclaimer { margin: var(--s-2) 0 var(--s-4); color: var(--ink-3); }
.ask-thread { flex: 1 1 auto; overflow-y: auto; background: var(--bg-1); border-radius: var(--r-2); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); min-height: 240px; max-height: 68vh; scrollbar-width: thin; }
.ask-empty { color: var(--ink-3); margin: 0; }
.ask-turn { display: flex; flex-direction: column; gap: var(--s-2); }
.ask-q, .ask-a { border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-size: 13.5px; line-height: 1.5; }
.ask-q { background: var(--bg-2); align-self: flex-end; max-width: 85%; color: var(--ink-1); }
.ask-a { background: var(--bg-2); border-left: 2px solid var(--line-2); color: var(--ink-0); }
.ask-a.is-error { border-left-color: var(--short); color: var(--short); }
.ask-a.is-pending .ask-text:empty::after { content: "thinking…"; color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
.ask-a.is-streaming .ask-text::after { content: "▍"; color: var(--ink-3); animation: ask-blink 1s steps(2) infinite; }
@keyframes ask-blink { 50% { opacity: 0; } }
.ask-role { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ask-text { white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ask-form { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.ask-input { width: 100%; resize: vertical; font-family: var(--font-text); font-size: 13.5px; line-height: 1.45; min-height: 72px; }
.ask-actions { display: flex; align-items: center; gap: var(--s-4); }
.ask-send { width: auto; padding: 0 var(--s-6); }
.ask-actions .link-quiet { background: none; border: 0; cursor: pointer; padding: 0; }
.topbar .nav-ask { font-size: 12px; color: var(--ink-2); text-decoration: none; }
.topbar .nav-ask:hover, .topbar .nav-ask.is-current { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899.98px) { .ask { padding-left: var(--s-4); padding-right: var(--s-4); } .ask-thread { max-height: none; } .ask-q { max-width: 100%; } }