/* app.css — single shared stylesheet for the GoGoPips /live pages (Leaderboard + Live).
   Owns: strict B&W theme tokens, the approved model-row component, nav, period tabs,
   chart cards (equity battle + candlestick), nomination cards, states and footer.
   Nothing here is duplicated in the HTML files — they only carry structural markup. */

/* ============================================================
   1. THEME TOKENS  (strict B&W — canonical values from the approved row demo)
   ============================================================ */
:root{
  --bg:#0a0a0b; --surface:#141416; --surface2:#1b1b1e; --line:#28282b; --line2:#34343a;
  --tx:#f4f4f5; --mut:#8b8b91; --faint:#57575f; --hi:#ffffff;
  --pos:#35e37c; --neg:#fa5d5d;              /* bright signal green / red */
  --grid:#1e1e21; --dayline:rgba(255,255,255,.055);
}

/* ============================================================
   2. BASE / RESET
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1360px; margin:0 auto; padding:20px}

/* ============================================================
   3. NAV  (identical structure on both pages; sticky, blurred)
   ============================================================ */
.nav{position:sticky; top:0; z-index:20; background:rgba(10,10,11,.9);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.navin{max-width:1360px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.nav .tabs{display:flex; gap:18px}
.nav .tab{color:var(--mut); font-weight:600; padding:6px 2px;
  border-bottom:2px solid transparent; letter-spacing:.2px}
.nav .tab.active{color:var(--hi); border-bottom-color:var(--hi)}
.nav .tab:hover{color:var(--tx)}
.navright{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.lang{display:flex; gap:2px; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.lang button{background:transparent; border:0; color:var(--mut); padding:5px 9px;
  cursor:pointer; font:inherit; font-weight:600}
.lang button.on{background:var(--surface2); color:var(--hi)}
.upd{color:var(--mut); font-size:12px}
.refresh{background:var(--surface2); border:1px solid var(--line2); color:var(--tx);
  padding:6px 13px; border-radius:8px; cursor:pointer; font:inherit; font-weight:600}
.refresh:hover{border-color:var(--faint); background:var(--surface)}
.refresh:active{transform:translateY(1px)}

/* ============================================================
   4. PAGE HEADER
   ============================================================ */
.head{padding:22px 0 12px}
.head h1{margin:0; font-size:24px; font-weight:700; letter-spacing:-.3px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* direct child only — the feed badge inside the h1 has its own `.sub` span */
.head>.sub{color:var(--mut); margin-top:5px; font-size:13px}
.head>.sub .faint{color:var(--faint)}
/* the live feed badge sits inside the h1 — scaled up a notch, but not headline-sized */
.head h1 .feedstat{font-size:12px; padding:3px 10px; border-radius:6px; gap:7px; flex:0 0 auto}
.head h1 .feedstat .dot{width:7px; height:7px}

/* ============================================================
   5. PERIOD TABS  (24H / 7D / 30D / ALL)
   ============================================================ */
.periods{display:flex; gap:8px; margin:14px 0 18px; flex-wrap:wrap}
.ptab{background:var(--surface); border:1px solid var(--line); color:var(--mut);
  padding:7px 16px; border-radius:9px; cursor:pointer; font:inherit; font-weight:600; letter-spacing:.3px}
.ptab.on{background:var(--surface2); color:var(--hi); border-color:var(--line2)}
.ptab:hover{color:var(--tx)}

/* ============================================================
   6. FLIP-HISTOGRAM LEGEND
   ============================================================ */
.legend{display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:var(--mut);
  font-size:11.5px; margin:4px 2px 12px}
.legend .it{display:inline-flex; align-items:center; gap:6px}
.legend .sw{width:11px; height:11px; border-radius:3px; display:inline-block; border:1px solid var(--line)}

/* ============================================================
   7. MODEL ROW — shared grid used by the table header AND every row.
      6 tracks: logo | name | prob | flips | curve | hero.
   ============================================================ */
.grid7{
  display:grid;
  grid-template-columns:46px 170px 312px minmax(230px,1fr) 150px 150px;
  gap:12px; align-items:center;
}
/* model-list sort bar (flat, compact, low-profile) */
.listsort{display:flex; align-items:center; gap:6px; padding:2px 18px 8px; flex-wrap:wrap}
.listsort .lslab{color:var(--faint); font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-right:2px}
.listsort .ptab{background:transparent; border:0; color:var(--mut); font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; cursor:pointer; font-variant-numeric:tabular-nums}
.listsort .ptab:hover{color:var(--tx)}
.listsort .ptab.on{background:var(--surface2); color:var(--hi)}
/* table header */
.thead{padding:2px 18px 8px; color:var(--faint); font-size:10px; font-weight:700; letter-spacing:.6px}
.thead .th{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thead .th.end{text-align:right}
/* rows container + row shell */
#rows{display:flex; flex-direction:column; gap:10px}
.row{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:12px; padding:11px 16px; height:96px; overflow:hidden;
}
.row.leader{border-color:var(--line2); border-left-color:var(--hi)}
.row.retired{opacity:.5}
/* selection: the same white stripe, now driven by a click (Live page) */
#rows.selectable .row{cursor:pointer; transition:border-color .12s, background .12s}
#rows.selectable .row:hover{border-color:var(--line2)}
#rows.selectable .row:hover{border-left-color:var(--faint)}
.row.sel{border-color:var(--line2); border-left-color:var(--hi); background:var(--surface2)}
#rows.selectable .row.sel:hover{border-left-color:var(--hi)}
.row.sel .logo-sq{border-color:var(--hi); color:var(--tx)}

/* chart palette picker (sits with the TF switcher) */
.themesel{background:var(--surface2); color:var(--mut); border:1px solid var(--line);
  border-radius:7px; padding:4px 8px; font-size:11.5px; font-weight:600; letter-spacing:.3px;
  cursor:pointer; outline:none}
.themesel:hover{color:var(--tx); border-color:var(--line2)}

/* 7a. logo slot (image with initials fallback) */
.c-logo{display:flex; flex-direction:column; align-items:center; gap:4px}
.logo-sq{
  position:relative; width:44px; height:44px; border-radius:11px; background:var(--surface2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--mut); font-weight:700; font-size:15px; letter-spacing:.5px; overflow:hidden;
}
.logo-ini{line-height:1}
/* image overlays the initials; on load-failure JS removes it and initials show through */
.logo-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  border-radius:11px; background:var(--surface2)}
/* procedural fallback "crest" — a deterministic B&W identicon drawn from the model name;
   a bespoke animal PNG (.logo-img) overlays and covers it when present */
.logo-proc{position:absolute; inset:9px; width:calc(100% - 18px); height:calc(100% - 18px)}
.row.leader .logo-sq{border-color:var(--hi); color:var(--tx)}
.logo-rank{font-size:10px; color:var(--faint); font-weight:600; letter-spacing:.4px}

/* 7b. name + status/position badges */
.c-name{display:flex; flex-direction:column; gap:4px; min-width:0}
.nm{font-size:15px; font-weight:700; line-height:1.15; color:var(--tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pill{ /* SYM · TF — subtle, no border */
  align-self:flex-start; color:var(--mut); background:var(--surface2);
  font-size:10.5px; font-weight:600; line-height:1.3; letter-spacing:.4px; padding:1px 7px; border-radius:6px;
  white-space:nowrap;
}
.badge{ /* status — outlined pill */
  align-self:flex-start; font-size:10px; font-weight:700; line-height:1.3; letter-spacing:.6px;
  padding:1px 7px; border-radius:6px; border:1px solid var(--line2);
}
.badge.live{color:var(--hi); border-color:var(--hi)}
.badge.sim{color:var(--mut); border-color:var(--line)}
.badge.retired{color:var(--faint); border-color:var(--line)}
.badge-row{display:flex; align-items:center; gap:5px}
/* position pill — white word, border coloured by direction, gentle rare pulse */
.pos-pill{font-size:10px; font-weight:700; line-height:1.3; letter-spacing:.6px;
  padding:1px 7px; border-radius:6px; border:1px solid var(--faint); color:var(--hi)}
.pos-pill.buy{border-color:var(--pos); animation:pulseBuy 3.5s ease-in-out infinite}
.pos-pill.sell{border-color:var(--neg); animation:pulseSell 3.5s ease-in-out infinite}
.pos-pill.flat{border-color:var(--faint); color:var(--mut)}
@keyframes pulseBuy{0%,72%,100%{box-shadow:0 0 0 0 rgba(127,209,166,0)} 86%{box-shadow:0 0 0 2px rgba(127,209,166,.16)}}
@keyframes pulseSell{0%,72%,100%{box-shadow:0 0 0 0 rgba(217,139,139,0)} 86%{box-shadow:0 0 0 2px rgba(217,139,139,.16)}}
@media(prefers-reduced-motion:reduce){.pos-pill{animation:none!important}}

/* 7c. conviction (prob) chart */
.c-prob{position:relative; line-height:0}
.c-prob svg{display:block; width:100%; height:66px}
.prob-lab{position:absolute; font-size:8.5px; font-weight:700; letter-spacing:.4px;
  line-height:1; padding:1px 3px; background:var(--surface); border-radius:3px; pointer-events:none}
.prob-lab.buy{left:1px; top:1px; color:var(--hi)}
.prob-lab.sell{left:1px; bottom:1px; color:var(--hi)}
.prob-lab.top{right:1px; top:1px; color:var(--faint)}
.prob-lab.bot{right:1px; bottom:1px; color:var(--faint)}
.prob-val{position:absolute; right:1px; top:50%; transform:translateY(-50%);
  font-size:13px; font-weight:600; line-height:1; padding:0 3px;
  background:var(--surface); border-radius:3px; pointer-events:none}
/* conviction markers as fixed-size HTML dots -> stay round at any chart width */
.pd{position:absolute; transform:translate(-50%,-50%); pointer-events:none; z-index:2}
.pd.dot{width:8px; height:8px; border-radius:50%; background:var(--dc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dc) 24%, transparent)}
.pd.ring{width:9px; height:9px; border-radius:50%; border:1.6px solid; background:transparent}

/* 7d. flips block = bipolar histogram + analysis text */
.c-flips{display:flex; gap:10px; align-items:center; min-width:0}
.flip-hist{flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center}
.flip-hist svg{display:block; width:100%; height:66px}
.flip-stats{flex:0 0 96px; display:flex; flex-direction:column; justify-content:center; gap:3px}
.fs-line{display:flex; align-items:baseline; gap:5px; line-height:1.2}
.fs-k{font-size:9px; color:var(--faint); letter-spacing:.3px; width:26px; flex:0 0 auto}
.fs-v{font-size:12px; color:var(--tx); font-weight:600}

/* 7e. cumulative P&L spark */
.c-curve{position:relative}
.c-curve svg{display:block; width:100%; height:66px}
/* rank shown before the NAME — mobile only (desktop shows it under the logo) */
.nm-rank{display:none; color:var(--faint); font-weight:700; margin-right:5px}

/* 7f. P&L hero + translucent PIPS caption */
.c-pnl{display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right}
.hero{font-size:23px; font-weight:800; letter-spacing:.2px; line-height:1.05}
.hero.pos{color:var(--pos)} .hero.neg{color:var(--neg)} .hero.nul{color:var(--faint)}
.hero-k{color:var(--mut); font-weight:700; opacity:.4}  /* same weight as the PIPS caption */
.pips-sub{font-size:11px; font-weight:700; letter-spacing:1.2px; color:var(--mut); opacity:.4}

/* ============================================================
   8. CHART CARDS  (shared shell)
   ============================================================ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px}
.chartcard{background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:16px 16px 12px; position:relative; margin-top:4px}
.chartcard .ctitle{font-weight:700; font-size:15px; margin:0 0 10px; letter-spacing:.2px}

/* 8a. Leaderboard — equity battle (relative-height box, DOM tooltip) */
.chartbox{position:relative; width:100%; height:300px}
.chartbox canvas{display:block; width:100%; height:100%}
.chart-tip{position:absolute; pointer-events:none; background:rgba(20,20,22,.96);
  border:1px solid var(--line2); border-radius:8px; padding:8px 10px; font-size:12px;
  color:var(--tx); z-index:5; display:none; min-width:120px; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.chart-tip .td{color:var(--mut); margin-bottom:5px; font-size:11px; letter-spacing:.3px}
.chart-tip .tr{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:1px 0}
.chart-tip .tn{display:flex; align-items:center; gap:6px; max-width:120px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.chart-tip .sw{width:9px; height:2px; border-radius:1px; flex:0 0 auto}
.chart-tip .tv{font-variant-numeric:tabular-nums; font-weight:600}

/* 8b. Live — candlestick (absolute canvas, zoom/pan, fade tooltip) */
.charthead{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px; padding:0 4px}
.chartttl{display:flex; align-items:center; gap:10px}
.chartttl .sym{font-size:14px; font-weight:600; letter-spacing:.2px}
.simbadge{font-size:10.5px; letter-spacing:.4px; color:var(--faint);
  border:1px solid var(--line); border-radius:5px; padding:2px 8px}
.chartlast{font-size:13px; color:var(--mut); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:10px}

/* feed status badge — LIVE / DELAYED / NO SIGNAL / HISTORY */
.feedstat{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.5px;
  font-weight:700; text-transform:uppercase; border:1px solid var(--line); border-radius:5px; padding:2px 8px; color:var(--mut)}
.feedstat .dot{width:6px; height:6px; border-radius:50%; background:var(--mut)}
.feedstat .sub{font-weight:500; letter-spacing:.2px; text-transform:none; color:var(--faint)}
.feedstat.live{color:var(--pos); border-color:color-mix(in srgb,var(--pos) 40%,var(--line))}
.feedstat.live .dot{background:var(--pos); box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 60%,transparent); animation:feedpulse 1.8s infinite}
.feedstat.delayed{color:var(--tx); border-color:var(--line2)}
.feedstat.delayed .dot{background:var(--tx)}
.feedstat.offline{color:var(--neg); border-color:color-mix(in srgb,var(--neg) 45%,var(--line))}
.feedstat.offline .dot{background:var(--neg)}
.feedstat.history .dot{background:var(--faint)}
@keyframes feedpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 55%,transparent)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* timeframe switcher */
.tfbar{display:inline-flex; gap:2px; background:var(--surface2); border:1px solid var(--line);
  border-radius:7px; padding:2px}
.tfbtn{border:0; background:transparent; color:var(--mut); font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:5px; cursor:pointer; letter-spacing:.3px}
.tfbtn:hover{color:var(--tx)}
.tfbtn.on{background:var(--hi); color:var(--bg)}

/* jump-to-latest (shown only when the view is scrolled off the right edge) */
.latestbtn{border:1px solid var(--line2); background:var(--surface2); color:var(--tx);
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:6px; cursor:pointer; display:none}
.latestbtn.show{display:inline-block}
.latestbtn:hover{border-color:var(--tx)}

/* two charts side by side: equity battle 1/3 + candles 2/3 */
.charts{display:flex; gap:14px; align-items:stretch}
.charts .chartcard{margin:0}
.charts .eqcard{flex:1 1 0; min-width:0}
.charts>.chartcard:not(.eqcard){flex:2 1 0; min-width:0}
.eqcard .eqperiods{display:inline-flex; gap:2px; background:var(--surface2); border:1px solid var(--line); border-radius:7px; padding:2px}
.eqcard .ptab{border:0; background:transparent; color:var(--mut); font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px; cursor:pointer; font-variant-numeric:tabular-nums}
.eqcard .ptab:hover{color:var(--tx)}
.eqcard .ptab.on{background:var(--hi); color:var(--bg)}
/* equity loading state: dim canvas + centred spinner, and disable the period tabs
   so slow connections can't spam the heavy ALL fetch. */
.eqcard .canvwrap .eq-spin{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--surface) 50%,transparent); z-index:3; border-radius:12px}
.eqcard .canvwrap.is-loading .eq-spin{display:flex}
.eqcard .canvwrap.is-loading canvas{opacity:.35}
.eqcard .eq-spin .spin{margin-right:0}
.eqcard .eqperiods.busy{opacity:.55; pointer-events:none}
@media (max-width:900px){ .charts{flex-direction:column} .charts .eqcard,.charts>.chartcard:not(.eqcard){flex:none} }

.canvwrap{position:relative; width:100%; height:320px; touch-action:none}
.canvwrap canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair}
.charthint{color:var(--faint); font-size:11px; text-align:center; margin-top:6px}
.cand-tip{position:absolute; pointer-events:none; z-index:5; background:var(--surface2);
  border:1px solid var(--line2); border-radius:8px; padding:8px 10px; font-size:11.5px;
  color:var(--tx); line-height:1.5; white-space:nowrap; opacity:0; transition:opacity .08s;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cand-tip.on{opacity:1}
.cand-tip .tt{color:var(--faint); font-size:10.5px; margin-bottom:3px}
.cand-tip .r{display:flex; justify-content:space-between; gap:16px}
.cand-tip .r span:first-child{color:var(--mut)}
.cand-tip .pos{color:var(--pos)} .cand-tip .neg{color:var(--neg)}
.cand-tip .sw{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle}
.cand-tip .r span:first-child{color:var(--tx)}

/* 8c. Live — trade legend (top-3 chips) */
.trades{margin-top:16px}
.trades .th{display:flex; align-items:center; gap:10px; color:var(--faint);
  font-size:11px; letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px}
.tlegend{display:flex; flex-wrap:wrap; gap:10px}
.tchip{display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:12.5px}
.tchip .idx{width:18px; height:18px; border-radius:50%; border:1px solid var(--line2);
  display:inline-flex; align-items:center; justify-content:center; font-size:10.5px;
  font-weight:700; color:var(--mut)}
.tchip .nm{font-weight:600}
.tchip .mt{color:var(--faint); font-size:11px}
.tchip .pl{margin-left:2px; font-variant-numeric:tabular-nums; font-weight:600}
.tchip .pl.pos{color:var(--pos)} .tchip .pl.neg{color:var(--neg)}
/* per-chip unselect — quiet until hovered */
.tchip .x{margin-left:2px; border:0; background:transparent; color:var(--faint); cursor:pointer;
  font:inherit; font-size:15px; line-height:1; padding:0 2px; border-radius:4px}
.tchip .x:hover{color:var(--tx)}
/* clear the whole selection — shown only when something is selected */
.clearsel{display:none; background:var(--surface2); border:1px solid var(--line); color:var(--faint);
  font:inherit; font-size:10.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:6px; cursor:pointer}
.clearsel.show{display:inline-block}
.clearsel:hover{color:var(--tx); border-color:var(--line2)}

/* ============================================================
   9. NOMINATION CARDS  (Leaderboard — leader per period)
   ============================================================ */
.noms{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 24px}
.nom{background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; cursor:pointer; transition:border-color .12s}
.nom:hover{border-color:var(--line2)}
.nom.on{border-color:var(--hi)}
.nom .nlabel{color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.nom .nname{color:var(--tx); font-weight:700; margin-top:8px; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nom .npl{margin-top:3px; font-variant-numeric:tabular-nums; font-weight:700; font-size:14px}
.nom .nempty{color:var(--faint)}

/* ============================================================
   10. STATES (loading / error / empty) + spinner
   ============================================================ */
.state{padding:50px 20px; text-align:center; color:var(--mut); font-size:14px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.state.err{color:var(--neg)}
.spin{width:22px; height:22px; border:2px solid var(--line); border-top-color:var(--hi);
  border-radius:50%; display:inline-block; animation:sp .8s linear infinite;
  vertical-align:middle; margin-right:10px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ============================================================
   11. FOOTER
   ============================================================ */
.footer{margin-top:32px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--faint); font-size:12px; text-align:center}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
/* row reflow + hide table header on narrower desktops/tablets */
@media(max-width:1200px){
  .thead{display:none}
  .row.grid7{grid-template-columns:46px 1fr 150px; grid-auto-rows:auto; row-gap:14px;
    height:auto; overflow:visible; padding:14px 16px}
  .c-prob{grid-column:1/-1}
  .c-flips{grid-column:1/-1}
  .c-curve{grid-column:1/3}
  .c-pnl{grid-column:3/4; align-self:center}
}
@media(max-width:900px){
  .noms{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .chartbox{height:200px}
  .canvwrap{height:220px}
}
/* ===== MOBILE: purpose-built 2-storey card (not the squished desktop row) =====
   Row 1: logo | name (+ "#N · SYM · TF") | P&L curve filling the rest, pips as a
          faint watermark inside the curve.
   Row 2: compact conviction | flip histogram with stats overlaid on a backing band. */
@media(max-width:600px){
  .wrap{padding:12px}
  /* chart header: TF bar + palette + price don't fit one phone line — let it wrap,
     and give the TF strip its own scrollable row instead of overflowing the page */
  .charthead{flex-wrap:wrap; row-gap:8px}
  .tfbar{order:3; width:100%; overflow-x:auto; justify-content:flex-start}
  .tfbtn{flex:0 0 auto}
  .themesel{margin-left:auto}
  .row.grid7{
    grid-template-columns:36px minmax(0,1fr) 52px auto;
    grid-template-areas:
      "logo name  curve pnl"
      "prob prob  flips flips";
    grid-auto-rows:auto; row-gap:8px; column-gap:9px; align-items:center;
    height:auto; overflow:visible; padding:12px 14px;
  }
  /* grid-template-areas place the cells; clear the desktop/tablet column spans so
     they don't fight the area assignment */
  .c-prob,.c-flips,.c-curve,.c-pnl{grid-column:auto}
  .c-logo{grid-area:logo; flex-direction:column; gap:0}
  .c-logo .logo-sq{width:36px; height:36px}
  .c-logo .logo-rank{display:none}                 /* rank moves before the name */
  .c-name{grid-area:name; align-self:center}
  .c-name .nm{font-size:14px}
  .nm-rank{display:inline}
  .c-name .pill{font-size:10.5px}
  .c-name .badge-row{margin-top:2px}

  /* row 1 — compact, symbolic P&L curve + a full value block after it */
  .c-curve{grid-area:curve; align-self:center}
  .c-curve svg{height:34px}
  .c-pnl{grid-area:pnl; display:flex; flex-direction:column; align-items:flex-end;
    justify-content:center; text-align:right; gap:0}
  .c-pnl .hero{font-size:17px; line-height:1.1}
  .c-pnl .pips-sub{font-size:7px; letter-spacing:.6px}

  /* row 2 left — conviction, compact */
  .c-prob{grid-area:prob}
  .c-prob svg{height:52px}
  .prob-lab{font-size:7.5px; padding:1px 2px}
  .prob-lab.top,.prob-lab.bot{display:none}        /* declutter: keep only BUY/SELL */
  .prob-val{font-size:11px}

  /* row 2 right — histogram with stats as an inline band over the bars */
  .c-flips{grid-area:flips; display:block; position:relative}
  .flip-hist{width:100%}
  .flip-hist svg{height:52px}
  .flip-stats{position:absolute; left:0; right:0; bottom:0; flex-direction:row;
    justify-content:space-between; gap:0; padding:2px 4px;
    background:linear-gradient(to top, var(--surface) 65%, transparent);
    border-radius:0 0 6px 6px}
  .fs-line{flex-direction:column; align-items:center; gap:0; line-height:1.1}
  .fs-k{width:auto; font-size:7.5px}
  .fs-v{font-size:10.5px}
  .row.sel .flip-stats{background:linear-gradient(to top, var(--surface2) 65%, transparent)}
}

/* Very narrow phones: logo + curve + value together squeeze the NAME to zero.
   The name must win, so the symbolic P&L curve — the least essential element — goes first. */
@media(max-width:420px){
  .row.grid7{
    /* col3 is shared by the value block (row 1) and the histogram (row 2) — `auto`
       would let the histogram's max-content blow it up and squeeze the name to zero,
       so it is capped explicitly. */
    grid-template-columns:34px minmax(0,1fr) minmax(0,92px);
    grid-template-areas:
      "logo name  pnl"
      "prob prob  flips";
    column-gap:8px; padding:11px 12px;
  }
  .c-curve{display:none}
  .c-logo .logo-sq{width:34px; height:34px}
  .c-pnl .hero{font-size:16px}
}