@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-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); }

/* 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); }

/* ---------- 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; }
}

/* ---------- 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; }
}