/* ============================================================================
   GMI 0.25 — components.

   THE RULE THIS FILE EXISTS TO ENFORCE: a row is a row. Market rows and Book
   rows are the same three-column grid with the same fact grid underneath, so a
   field lands in the same place on every screen. In the old app they were two
   separate implementations and they drifted — the operator reported it twice.
   There is one `.row` here and every tab uses it.

   No hex codes in this file. Everything comes from tokens.css.
   ========================================================================== */

/* ── app shell ────────────────────────────────────────────────────────────── */
.app{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh }
.app__body{ flex:1; padding-bottom:.5rem }

/* ── app bar ──────────────────────────────────────────────────────────────── */
.bar{ display:flex; align-items:center; gap:.4rem; padding:.65rem var(--pad) .55rem }
.bar__brand{ display:flex; align-items:center; gap:.42rem; min-width:0; margin-right:auto }
.bar__mark{ width:var(--mark-size); height:var(--mark-size); flex:none; object-fit:contain;
  filter:var(--mark-lift) }
.bar__name{ font-size:var(--t-sym); font-weight:var(--w-semi); letter-spacing:.01em }
.bar__ver{ font-size:var(--t-key); color:var(--dim); letter-spacing:.04em }

/* ── chips: small always-true statements about the app's state ─────────────── */
.chip{ font-size:var(--t-key); letter-spacing:.06em; text-transform:uppercase;
  font-weight:var(--w-semi); padding:.2rem .42rem; border-radius:4px; white-space:nowrap;
  border:1px solid; display:inline-flex; align-items:center; gap:.28rem }
.chip__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
.chip--on{      color:var(--up);      border-color:var(--up-edge);      background:var(--up-wash) }
.chip--off{     color:var(--mute);    border-color:var(--rule);         background:rgba(255,255,255,.03) }
.chip--paper{   color:var(--accent);  border-color:var(--accent-edge);  background:var(--accent-wash) }
.chip--live{    color:var(--down);    border-color:var(--down-edge);    background:var(--down-wash) }
.chip--nokeys{  color:var(--caution); border-color:var(--caution-edge); background:var(--caution-wash) }

/* ── the rail. Pinned under the bar on every tab, byte-identical each time.
      Seven numbers: equity, today $ and %, all-time $ and %, spendable cash,
      position count. Tapping cash reveals what has not settled. ───────────── */
.rail{ border-bottom:1px solid var(--rule); padding:0 var(--pad) .5rem;
  display:flex; flex-direction:column; gap:.28rem }
.rail__top{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; width:100%; text-align:left }
.rail__eq{ font-size:var(--t-hero); font-weight:var(--w-bold); letter-spacing:-.015em }
.rail__today{ font-size:var(--t-fact); font-weight:var(--w-semi) }
.rail__lab{ font-size:var(--t-why); color:var(--dim) }
.rail__go{ margin-left:auto; color:var(--accent); font-size:var(--t-fact); font-weight:var(--w-bold) }
.rail__grid{ display:grid; grid-template-columns:1.35fr 1fr .62fr; gap:.5rem }
.rail__cell{ display:flex; flex-direction:column; min-width:0; text-align:left }
.rail__k{ font-size:.53rem; letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--dim); font-weight:var(--w-semi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rail__v{ font-size:var(--t-fact); font-weight:var(--w-semi); white-space:nowrap;
  display:flex; align-items:center; gap:.22rem }
.rail__badge{ width:15px; height:15px; border-radius:50%; background:var(--caution);
  color:var(--on-fill); font-size:.56rem; font-weight:800; flex:none;
  display:flex; align-items:center; justify-content:center }
.rail__unsettled{ display:flex; gap:.4rem; align-items:baseline; padding:.34rem .5rem;
  border-left:2px solid var(--caution); background:var(--caution-wash);
  border-radius:0 4px 4px 0; font-size:var(--t-why); color:var(--mute); line-height:1.4 }
.rail__unsettled b{ color:var(--caution); font-weight:var(--w-bold) }
.rail__unsettled i{ color:var(--dim); font-style:normal }

/* ── notice strips. State that needs saying where it is true, not in a log. ── */
.strip{ display:flex; gap:.5rem; align-items:flex-start; padding:.5rem var(--pad);
  border-bottom:1px solid var(--rule-2); font-size:var(--t-why); line-height:1.42; color:var(--mute) }
.strip b{ color:var(--ink); font-weight:var(--w-semi) }
.strip__i{ font-weight:var(--w-bold); flex:none }
.strip--caution{ background:rgba(227,179,65,.055) } .strip--caution .strip__i{ color:var(--caution) }
.strip--down{ background:rgba(248,81,73,.075) }     .strip--down .strip__i{ color:var(--down) }
.strip__fix{ margin-left:auto; flex:none; color:var(--accent); font-weight:var(--w-semi);
  font-size:var(--t-why); white-space:nowrap }

/* ── section headers ──────────────────────────────────────────────────────── */
.sec{ display:flex; align-items:baseline; gap:.4rem; padding:.6rem var(--pad) .32rem }
.sec__t{ font-size:var(--t-label); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--mute); font-weight:var(--w-semi) }
.sec__n{ font-size:var(--t-label); color:var(--dim); font-weight:var(--w-semi) }
.sec__r{ margin-left:auto; font-size:var(--t-why); color:var(--dim) }
.sec__r b{ font-weight:var(--w-semi) }

/* the section header doubling as the sort control */
.sec--sort{ position:relative }
.sec__sort{ margin-left:auto; display:flex; align-items:center; gap:.3rem; flex:none;
  font-size:var(--t-why); font-weight:var(--w-semi); color:var(--accent);
  border:1px solid transparent; border-radius:4px; padding:.1rem .2rem; max-width:62% }
.sec__sort[aria-expanded="true"]{ border-color:var(--accent); background:var(--accent-wash) }
.sec__sortv{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ══ THE ROW ═══════════════════════════════════════════════════════════════
   Three columns: caret · identity · right-aligned number. Then a fixed
   three-column fact grid, then one plain-English why-line. Every tab.
   ========================================================================= */
.list{ display:flex; flex-direction:column }

.row{ border-bottom:1px solid var(--rule-2) }
.row--self{ background:rgba(227,179,65,.028) }   /* you are managing this one */
.row--bare{ background:rgba(248,81,73,.045) }    /* ...and it has no stop */

/* a DIV, not a button — see the note in ui.js row(). It still has to look and
   feel tappable, which the button element used to give it for free. */
.row__top{ display:grid; grid-template-columns:var(--caret-col) minmax(0,1fr) auto;
  gap:.5rem; align-items:center; padding:.6rem var(--pad); width:100%; text-align:left;
  cursor:pointer }
.row__caret{ color:var(--dim); font-size:.58rem; line-height:1; transition:transform .12s;
  display:block; text-align:left }
.row.is-open .row__caret{ transform:rotate(90deg) }

/* Fixed columns, not inline flow. The ticker occupies a set width and every
   pill is the same width, so the first pill starts at the same x on every row
   regardless of whether the ticker is 2 letters or 5. No flex-wrap: wrapping
   would reintroduce exactly the raggedness this is fixing. */
.row__id{ display:flex; align-items:center; gap:.36rem; min-width:0 }
.row__id > .sym{ width:var(--sym-col); flex:none }
/* WIDTH, not min-width. min-width only sets a floor, so "buy ready" grew past
   it and ended up wider than "watch" — same left edge, different box, and the
   centred text landed somewhere different on every row. A fixed width makes
   every pill an identical box: both edges align and so do the labels. The cost
   is that the longest label sets the column for the whole app, which is why
   they are all seven characters or fewer. */
.row__id > .badge{ width:var(--badge-col); justify-content:center; flex:none;
  /* containment, not a feature: if an unexpected font ever made a label wider
     than the box it clips at the border instead of spilling across the next
     pill. The 7-character cap in the harness is what stops it happening. */
  overflow:hidden }
.row__id > .qual{ min-width:0; overflow:hidden; text-overflow:ellipsis }

/* On a genuinely narrow phone, tighten the columns rather than letting the row
   overflow. The worst row in the app is a Book holding that is yours AND has no
   stop — three pills — and it has to fit beside the price at 390px. */
@media (max-width:389px){
  :root{ --sym-col:3.4rem; --badge-col:3.7rem }
}
@media (max-width:344px){
  :root{ --sym-col:3.1rem; --badge-col:3.4rem; --t-badge:.54rem }
}

.row__right{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25 }
.row__px{ font-weight:var(--w-semi); font-size:var(--t-sym) }
.row__chg{ font-size:var(--t-why); font-weight:var(--w-semi) }

/* a ticker is always its own tap target and always opens the ticker.
   Operator's rule: "if a ticker is shown in a row, or in an alert, it should
   be tappable and viewable." */
.sym{ font-weight:var(--w-bold); font-size:var(--t-sym); display:inline-flex;
  align-items:center; gap:.1rem }
.sym__go{ color:var(--accent); font-size:.8em; font-weight:var(--w-bold) }

/* ── badges ───────────────────────────────────────────────────────────────── */
.badge{ font-size:var(--t-badge); letter-spacing:.06em; text-transform:uppercase;
  font-weight:var(--w-bold); padding:.14rem .36rem; border-radius:3px; white-space:nowrap;
  border:1px solid transparent; display:inline-flex; align-items:center; gap:.24rem }
.badge__dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:none }

/* the four-state verdict */
.badge--ready{ color:var(--on-fill); background:var(--up); border-color:var(--up) }
.badge--watch{ color:var(--on-fill); background:var(--caution); border-color:var(--caution) }
.badge--avoid{ color:var(--ink); background:var(--down-wash); border-color:var(--down-edge) }
.badge--nodata{ color:var(--dim); background:transparent; border-color:var(--rule) }

/* trade kind. Three, not four — a cash account cannot short, so there is no
   SHORT badge. Operator: "I am not a short seller." */
.badge--day{   color:var(--accent); background:var(--accent-wash); border-color:var(--accent-edge) }
.badge--swing{ color:var(--swing);  background:var(--swing-wash);  border-color:var(--swing-edge) }
.badge--long{  color:var(--up);     background:var(--up-wash);     border-color:var(--up-edge) }

/* who manages this trade — tappable, per-trade */
.badge--gmi{ color:var(--up);      background:var(--up-wash);      border-color:var(--up-edge) }
.badge--you{ color:var(--caution); background:var(--caution-wash); border-color:var(--caution-edge) }

/* is there a stop resting at the broker */
.badge--stop-on{  color:var(--up); background:var(--up-wash); border-color:var(--up-edge) }
.badge--stop-off{ color:#fff; background:var(--down); border-color:var(--down) }

/* a qualifier folded into the state's own wording, not a second badge */
.qual{ font-size:var(--t-why); color:var(--caution); font-weight:var(--w-semi); white-space:nowrap }

/* ── the fact grid. Fixed three columns so a field never moves between rows.
      Flex-wrap was the original bug: fields shifted line to line. ─────────── */
.facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.32rem .5rem;
  padding:0 var(--pad) .5rem var(--indent) }
.fact{ display:flex; flex-direction:column; min-width:0 }
.fact__k{ font-size:var(--t-key); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--dim); font-weight:var(--w-semi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fact__v{ font-size:var(--t-fact); font-weight:var(--w-semi); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }

/* a missing value is dim and lighter — it must never look like a real number */
.is-missing{ color:var(--dim); font-weight:var(--w-reg) }
.is-up{ color:var(--up) } .is-down{ color:var(--down) }
.is-caution{ color:var(--caution) } .is-good{ color:var(--up) } .is-bad{ color:var(--down) }

/* ── the why-line. Under every row, always. This is the direct answer to
      "not knowing why GMI did or did not act". ──────────────────────────── */
.why{ padding:.1rem var(--pad) .6rem var(--indent); font-size:var(--t-why);
  line-height:1.42; color:var(--mute) }
.why b{ color:var(--ink); font-weight:var(--w-semi) }
.why__lab{ color:var(--dim) }

/* a glossary word explains itself where you meet it */
.term{ border-bottom:1px dotted var(--dim); cursor:pointer }

/* ── expanded body ────────────────────────────────────────────────────────── */
.row__body{ display:none; border-top:1px solid var(--rule-2); background:var(--panel) }
.row.is-open .row__body{ display:block }
.row__inner{ display:flex; flex-direction:column; gap:.7rem; padding:.65rem var(--pad) .8rem }

/* ── charts. Numbers go ABOVE the chart, per the operator's correction. ──── */
.chart{ display:flex; flex-direction:column; gap:.35rem }
.chart__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem }
.chart__t{ font-size:var(--t-key); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--dim); font-weight:var(--w-semi) }
.chart__r{ font-size:var(--t-why); color:var(--mute); white-space:nowrap }
.chart__box{ height:104px; border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--panel-2); position:relative; overflow:hidden }
.chart__box svg{ display:block; width:100%; height:100% }
.chart__empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:var(--t-why); color:var(--dim); text-align:center; padding:0 1.2rem; line-height:1.45 }
.chart--tall .chart__box{ height:110px }

/* ── the indicator grid inside an open row. One grid, one gap — per-tile
      padding was what made the spacing look uneven. ────────────────────── */
.ind{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem }

/* ── GMI's intent. Blue rule on the left so it reads as an intention rather
      than as another measurement of the stock. Amber when it is only advice
      because you are managing that trade. ──────────────────────────────── */
.plan{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .55rem;
  padding:.42rem .55rem; border-left:2px solid var(--accent); background:var(--accent-wash);
  border-radius:0 4px 4px 0; font-size:var(--t-why); color:var(--mute) }
.plan--advice{ border-left-color:var(--caution); background:var(--caution-wash) }
.plan__lab{ width:100%; font-size:var(--t-key); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--dim); font-weight:var(--w-semi) }
.plan b{ color:var(--ink); font-weight:var(--w-semi) }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btns{ display:grid; gap:.4rem; grid-template-columns:repeat(2, minmax(0,1fr)) }
.btns--3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.btns--1{ grid-template-columns:1fr }
.btn{ font-size:var(--t-fact); font-weight:var(--w-semi); padding:.44rem .3rem;
  border-radius:var(--radius); border:1px solid var(--rule); color:var(--ink); text-align:center }
.btn--go{      background:var(--up);     border-color:var(--up);     color:var(--on-fill) }
.btn--accent{  background:var(--accent);  border-color:var(--accent); color:#08101F }
.btn--danger{  background:var(--down);    border-color:var(--down);   color:#fff }
.btn--sell{    border-color:var(--down);  color:var(--down) }
.btn--caution{ border-color:var(--caution-edge); color:var(--caution) }
.btn--ghost{   color:var(--mute) }
.btn[disabled]{ opacity:.4; cursor:not-allowed }
.btn--wide{ padding:.5rem 1rem }

.lock-note{ font-size:var(--t-why); color:var(--caution); text-align:center }

/* ── the one total worth having ───────────────────────────────────────────── */
.total{ display:flex; align-items:baseline; gap:.4rem; padding:.5rem var(--pad);
  border-bottom:1px solid var(--rule-2); background:rgba(255,255,255,.014) }
.total__k{ font-size:var(--t-key); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--dim); font-weight:var(--w-semi) }
.total__v{ font-size:var(--t-body); font-weight:var(--w-bold) }
.total__r{ margin-left:auto; font-size:var(--t-why); color:var(--dim) }

/* ── pulldowns. Replaced two rows of ragged pills; multi-select, fixed width,
      and each option carries its count. ────────────────────────────────── */
.pulls{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:.4rem; padding:.55rem var(--pad); border-bottom:1px solid var(--rule-2) }
.pull{ font-size:var(--t-why); font-weight:var(--w-semi); color:var(--ink);
  background:var(--panel-2); border:1px solid var(--rule); border-radius:var(--radius);
  padding:.34rem .5rem; display:flex; align-items:center; gap:.4rem; min-width:0; text-align:left }
.pull__k{ font-size:var(--t-key); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--dim); font-weight:var(--w-semi); flex:none }
.pull__v{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.pull__caret{ margin-left:auto; color:var(--dim); font-size:.6rem; flex:none }
.pull[aria-expanded="true"]{ border-color:var(--accent) }

.panel{ position:absolute; top:calc(100% - .28rem); z-index:9; background:var(--panel);
  border:1px solid var(--rule); border-radius:8px; padding:.3rem;
  display:flex; flex-direction:column; box-shadow:0 10px 26px rgba(0,0,0,.55); min-width:11rem }
.panel--left{ left:var(--pad) } .panel--right{ right:var(--pad) }
.opt{ display:flex; align-items:center; gap:.5rem; padding:.38rem .45rem; border-radius:5px;
  font-size:var(--t-fact); width:100%; text-align:left }
.opt__box{ width:14px; height:14px; border-radius:3px; border:1px solid var(--rule); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:.62rem;
  color:var(--on-fill); font-weight:800 }
.opt[aria-checked="true"] .opt__box{ background:var(--accent); border-color:var(--accent) }
.opt__radio{ width:14px; height:14px; border-radius:50%; border:1px solid var(--rule); flex:none;
  display:flex; align-items:center; justify-content:center }
.opt[aria-checked="true"] .opt__radio{ border-color:var(--accent) }
.opt[aria-checked="true"] .opt__radio::after{ content:''; width:7px; height:7px;
  border-radius:50%; background:var(--accent) }
.opt__n{ margin-left:auto; color:var(--dim); font-size:var(--t-why); font-weight:var(--w-semi) }
.opt--master{ border-bottom:1px solid var(--rule-2); margin-bottom:.15rem;
  padding-bottom:.42rem; font-weight:var(--w-semi) }

/* ── confirm sheets. Tap then confirm, as chosen. The sheet states the number
      rather than asking "are you sure", and the destructive button says what
      it does — "Sell 340 shares", never "OK". ─────────────────────────── */
.sheet-wrap{ position:fixed; inset:0; background:rgba(3,6,10,.74); display:flex;
  align-items:flex-end; z-index:60 }
.sheet{ width:100%; background:var(--panel); border-top:1px solid var(--rule);
  border-radius:14px 14px 0 0; padding:.9rem var(--pad) 1rem;
  display:flex; flex-direction:column; gap:.55rem }
.sheet__h{ margin:0; font-size:var(--t-lead); font-weight:var(--w-semi); text-wrap:balance }
.sheet__lines{ display:flex; flex-direction:column; gap:.24rem }
.sheet__ln{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  font-size:var(--t-body); color:var(--mute) }
.sheet__ln b{ color:var(--ink); font-weight:var(--w-semi); text-align:right }
.sheet__caveat{ font-size:var(--t-why); color:var(--dim); line-height:1.45 }
.sheet__caveat b{ color:var(--caution) }

/* ── honest empty states. Dashes and a sentence, never zeros — zeros are a
      claim, and "no keys" must not look like "an empty account". ───────── */
.empty{ display:flex; flex-direction:column; gap:.45rem; align-items:center;
  text-align:center; padding:2.2rem 1.6rem }
.empty__icon{ width:34px; height:34px; color:var(--dim) }
.empty__h{ font-size:var(--t-body); font-weight:var(--w-semi) }
.empty__p{ font-size:var(--t-fact); color:var(--mute); line-height:1.5; max-width:28ch }

/* ── tab bar ──────────────────────────────────────────────────────────────── */
.tabs{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule);
  background:var(--panel); position:sticky; bottom:0; z-index:30;
  padding-bottom:env(safe-area-inset-bottom) }
.tab{ display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.5rem .2rem .55rem; color:var(--dim) }
.tab svg{ width:18px; height:18px }
.tab span{ font-size:var(--t-label); font-weight:var(--w-semi) }
.tab[aria-current="page"]{ color:var(--ink) }

/* ── settings rows ────────────────────────────────────────────────────────── */
.srow{ display:flex; align-items:center; gap:.6rem; padding:.55rem var(--pad);
  border-bottom:1px solid var(--rule-2) }
.srow__txt{ display:flex; flex-direction:column; min-width:0; gap:.04rem }
.srow__t{ font-size:var(--t-body); font-weight:var(--w-semi) }
.srow__d{ font-size:var(--t-why); color:var(--dim); line-height:1.4 }
.srow__v{ margin-left:auto; font-size:var(--t-fact); color:var(--mute);
  font-weight:var(--w-semi); flex:none }
.srow__chev{ margin-left:auto; color:var(--dim); font-size:var(--t-body); flex:none }

.sw{ width:38px; height:22px; border-radius:999px; border:1px solid var(--rule);
  background:var(--panel-2); position:relative; flex:none; margin-left:auto }
.sw::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--dim); transition:left .14s, background .14s }
.sw[aria-checked="true"]{ background:var(--up-wash); border-color:var(--up) }
.sw[aria-checked="true"]::after{ left:18px; background:var(--up) }

/* the absolute rules render as ticks, never as switches. A toggle would imply
   they can be turned off, which would be a lie the moment you looked at it. */
.rules{ margin:.15rem var(--pad) .2rem; border:1px solid var(--rule);
  border-radius:8px; overflow:hidden }
.rules__h{ display:flex; align-items:center; gap:.4rem; padding:.42rem .6rem;
  background:var(--panel-2); border-bottom:1px solid var(--rule-2) }
.rules__h svg{ width:13px; height:13px; color:var(--up); flex:none }
.rules__h span{ font-size:var(--t-key); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--mute); font-weight:var(--w-semi) }
.rules__r{ display:flex; gap:.45rem; padding:.38rem .6rem; font-size:var(--t-why);
  color:var(--mute); border-bottom:1px solid var(--rule-2); line-height:1.42 }
.rules__r:last-child{ border-bottom:0 }
.rules__r b{ color:var(--ink); font-weight:var(--w-semi) }
.rules__tick{ color:var(--up); font-weight:800; flex:none }

/* ── the key-transfer callout: the only thing on any screen that asks ─────── */
.keys{ margin:.15rem var(--pad) .45rem; border:1px solid var(--caution-edge);
  border-radius:8px; background:rgba(227,179,65,.055); padding:.55rem .6rem;
  display:flex; flex-direction:column; gap:.38rem }
.keys__t{ font-size:var(--t-body); font-weight:var(--w-semi); display:flex;
  align-items:center; gap:.35rem }
.keys__t i{ color:var(--caution); font-style:normal }
.keys__d{ font-size:var(--t-why); color:var(--mute); line-height:1.45 }
.keys__d b{ color:var(--ink); font-weight:var(--w-semi) }

/* ── glossary ─────────────────────────────────────────────────────────────── */
.gloss{ margin:.15rem var(--pad) .45rem; border:1px solid var(--rule);
  border-radius:8px; overflow:hidden }
.gloss__g{ display:grid; grid-template-columns:5.9rem minmax(0,1fr); gap:.5rem;
  padding:.4rem .6rem; border-bottom:1px solid var(--rule-2);
  font-size:var(--t-why); align-items:baseline }
.gloss__g:last-child{ border-bottom:0 }
.gloss__w{ font-weight:var(--w-bold); color:var(--ink) }
.gloss__d{ color:var(--mute); line-height:1.42 }

/* ── about ────────────────────────────────────────────────────────────────── */
.about{ margin:.15rem var(--pad) .5rem; display:flex; flex-direction:column;
  align-items:center; gap:.2rem; padding:1.1rem .6rem 1rem;
  border:1px solid var(--rule); border-radius:8px; background:var(--panel-2) }
.about img{ width:84px; height:84px; object-fit:contain }
.about__name{ font-size:1.15rem; font-weight:var(--w-bold); margin-top:.3rem; letter-spacing:-.01em }
.about__ver{ font-size:var(--t-why); color:var(--dim) }
.about__by{ font-size:var(--t-body); font-weight:var(--w-semi); margin-top:.4rem }
.about__em{ font-size:var(--t-why); color:var(--accent); font-weight:var(--w-semi) }
.about__cr{ font-size:.67rem; color:var(--dim); margin-top:.5rem; text-align:center; line-height:1.55 }
.about__tag{ font-size:var(--t-why); color:var(--mute); font-style:italic; margin-top:.3rem }

/* ── activity log ─────────────────────────────────────────────────────────── */
.ev{ border-bottom:1px solid var(--rule-2) }
.ev__top{ display:grid; grid-template-columns:2.9rem minmax(0,1fr) auto; gap:.5rem;
  align-items:baseline; padding:.55rem var(--pad) .2rem; width:100%; text-align:left;
  cursor:pointer }
.ev__time{ font-size:var(--t-why); color:var(--dim); font-weight:var(--w-semi); padding-top:.1rem }
.ev__head{ display:flex; align-items:center; gap:.35rem; min-width:0; flex-wrap:wrap }
.ev__right{ display:flex; flex-direction:column; align-items:flex-end;
  line-height:1.25; white-space:nowrap }
.ev__result{ font-size:var(--t-body); font-weight:var(--w-bold) }
.ev__sub{ font-size:var(--t-why); color:var(--dim) }
.ev__facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.28rem .5rem;
  padding:0 var(--pad) .35rem calc(var(--pad) + 2.9rem + .5rem) }
.ev__why{ padding:0 var(--pad) .55rem calc(var(--pad) + 2.9rem + .5rem);
  font-size:var(--t-why); line-height:1.42; color:var(--mute) }
.ev__why b{ color:var(--ink); font-weight:var(--w-semi) }
.ev__body{ display:none; background:var(--panel); border-top:1px solid var(--rule-2) }
.ev.is-open .ev__body{ display:block }
.ev__inner{ display:flex; flex-direction:column; gap:.55rem; padding:.6rem var(--pad) .7rem }

/* what GMI did */
.act{ font-size:var(--t-badge); letter-spacing:.06em; text-transform:uppercase;
  font-weight:var(--w-bold); padding:.14rem .34rem; border-radius:3px;
  white-space:nowrap; border:1px solid transparent }
.act--bought{  color:var(--on-fill); background:var(--accent); border-color:var(--accent) }
.act--sold{    color:var(--on-fill); background:var(--up);     border-color:var(--up) }
.act--stopped{ color:#fff;           background:var(--down);   border-color:var(--down) }
.act--raised{  color:var(--up);      background:var(--up-wash);      border-color:var(--up-edge) }
.act--passed{  color:var(--mute);    background:rgba(255,255,255,.03); border-color:var(--rule) }
.act--blocked{ color:var(--caution); background:var(--caution-wash); border-color:var(--caution-edge) }
.act--learned{ color:var(--swing);   background:var(--swing-wash);   border-color:var(--swing-edge) }

/* grouped passes: volume without noise */
.mini{ display:flex; flex-direction:column }
.mini__r{ display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:.5rem;
  align-items:baseline; padding:.34rem 0; border-bottom:1px solid var(--rule-2) }
.mini__r:last-child{ border-bottom:0 }
.mini__why{ font-size:var(--t-why); color:var(--mute); line-height:1.35 }
.mini__why b{ color:var(--ink); font-weight:var(--w-semi) }
.mini__n{ font-size:var(--t-why); color:var(--dim); white-space:nowrap; font-weight:var(--w-semi) }

/* evidence behind a LEARNED entry — the sample size is always stated, because
   a rule learned from four trades is not a rule */
.evidence{ display:flex; flex-direction:column; gap:.35rem; padding:.5rem .55rem;
  border-left:2px solid var(--swing); background:var(--swing-wash); border-radius:0 4px 4px 0 }
.evidence__lab{ font-size:var(--t-key); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--dim); font-weight:var(--w-semi) }
.evidence__b{ font-size:var(--t-why); color:var(--mute); line-height:1.45 }
.evidence__b b{ color:var(--ink); font-weight:var(--w-semi) }
.evidence__n{ font-size:var(--t-why); color:var(--dim) }
.tally{ display:flex; flex-direction:column; gap:.18rem }
.tally__r{ display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.5rem;
  font-size:var(--t-why); align-items:baseline }
.tally__c{ font-weight:var(--w-bold); text-align:right }
.tally__d{ color:var(--mute); line-height:1.35 }
.tally__d b{ color:var(--ink); font-weight:var(--w-semi) }

/* a day separator in the log */
.daysep{ display:flex; align-items:center; gap:.5rem; padding:.5rem var(--pad) .35rem;
  background:rgba(255,255,255,.014); border-bottom:1px solid var(--rule-2) }
.daysep__d{ font-size:var(--t-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--mute); font-weight:var(--w-semi) }
.daysep__p{ margin-left:auto; font-size:var(--t-why); font-weight:var(--w-semi) }

/* ── orders ───────────────────────────────────────────────────────────────── */
.ord{ display:flex; flex-direction:column; gap:.32rem; padding:.6rem var(--pad);
  border-bottom:1px solid var(--rule-2) }
.ord__top{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap }
.ord__life{ margin-left:auto; font-size:var(--t-why); color:var(--dim); white-space:nowrap }
.ord__what{ font-size:var(--t-body); font-weight:var(--w-semi) }
.ord__detail{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.28rem .5rem }
.ord__note{ font-size:var(--t-why); color:var(--mute); line-height:1.42 }
.ord__note b{ color:var(--ink); font-weight:var(--w-semi) }

.ostate{ font-size:var(--t-badge); letter-spacing:.06em; text-transform:uppercase;
  font-weight:var(--w-bold); padding:.12rem .34rem; border-radius:3px;
  white-space:nowrap; border:1px solid transparent }
.ostate--working{ color:var(--accent);  background:var(--accent-wash);  border-color:var(--accent-edge) }
.ostate--resting{ color:var(--up);      background:var(--up-wash);      border-color:var(--up-edge) }
.ostate--blocked{ color:var(--caution); background:var(--caution-wash); border-color:var(--caution-edge) }