/* Poker Insights app stylesheet. Mobile-first; dark by default, light via
   prefers-color-scheme. Tokens mirror index.html / design/Hub.jsx (amber on near-black).
   Shared components: .wrap .card .tile .tbl .stat .chip .empty .stub .muted .good .ok .leak */

:root {
  --bg: #0e0e10; --card: #16161a; --line: #2a2a30;
  --amber: #e0a458; --amber2: #f0c690; --ink: #ece8e1; --mut: #9a958c;
  --green: #7fc99a; --red: #e08a7a; --blue: #7fb0d8;
  --row-alt: rgba(255, 255, 255, .018);
  --radius: 14px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f3ee; --card: #ffffff; --line: #ddd6ca;
    --amber: #a8641a; --amber2: #8a4f0e; --ink: #1d1b18; --mut: #6f6a60;
    --green: #2c7a4b; --red: #b4442f; --blue: #2b6590;
    --row-alt: rgba(0, 0, 0, .025);
    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg); color: var(--ink); line-height: 1.45;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber2); }

/* ---- layout ------------------------------------------------------------ */
.topbar { border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 10; }
.topbar-in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px;
  padding: 10px 16px 4px; max-width: 1100px; margin: 0 auto; }
.brand { font-weight: 800; color: var(--amber2); letter-spacing: .01em; font-size: 17px; }
.nav { display: flex; gap: 2px; overflow-x: auto; padding: 0 12px 0;
  max-width: 1100px; margin: 0 auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--mut); font-size: 13.5px; font-weight: 700; padding: 8px 10px;
  white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--amber2); border-bottom-color: var(--amber); }
.wrap { max-width: 720px; margin: 0 auto; padding: 22px 16px 40px; }
.wrap.wide { max-width: 1100px; }
@media (min-width: 900px) { .wrap { max-width: 900px; } }
.foot { text-align: center; font-size: 11px; color: var(--mut); letter-spacing: .05em;
  padding: 0 16px 28px; }

/* ---- type -------------------------------------------------------------- */
h1 { font-size: 24px; font-weight: 800; color: var(--amber2); letter-spacing: .01em;
  margin-bottom: 4px; }
h2 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut);
  font-weight: 700; margin: 24px 0 10px; }
.lede { color: var(--mut); font-size: 14px; margin-bottom: 14px; }
.muted { color: var(--mut); }
.good { color: var(--green); } .ok { color: var(--blue); } .leak { color: var(--red); }
.warn { color: var(--amber); font-weight: 700; }

/* ---- components -------------------------------------------------------- */
.card, a.tile { display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 11px; color: var(--ink); }
a.tile:hover { border-color: var(--amber); }
.tile .t { font-size: 16px; font-weight: 800; color: var(--amber2); }
.tile .d, .card .d { font-size: 13px; color: var(--mut); margin-top: 4px; }
.grid { display: grid; gap: 11px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr; } }
.grid > .card, .grid > a.tile { margin-bottom: 0; }

.stats { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin: 12px 0; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; }
.stat .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }

.chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--mut); }

.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.tbl { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13.5px; }
.tbl th { background: var(--card); color: var(--mut); text-align: right; padding: 10px 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 14px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tbody tr:nth-child(even) { background: var(--row-alt); }
.tbl td a { font-weight: 700; }

.empty, .stub { background: var(--card); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 22px 18px; text-align: center; color: var(--mut); }
.empty b, .stub b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* ---- sync indicator ---------------------------------------------------- */
.sync { font-size: 12px; color: var(--mut); flex: 1 1 220px; min-width: 0; }
.sync-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.sync-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); }
.sync-running .dot { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
.sync-done .dot { background: var(--green); }
.sync-error .dot { background: var(--red); }
.sync-error .sync-pill { color: var(--red); }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sync-running .dot { animation: none; } }
.sync-src-error { color: var(--red); }
.sync-note { margin-top: 2px; }
.sync-note-error { color: var(--red); }
.sync-prov { margin-top: 2px; font-variant-numeric: tabular-nums; }
.sync-new { font-weight: 700; }

/* ======================================================================== *
 * SESSION REPORT + BIG POTS (roadmap 1c). Ported from the static pages
 * (report/render_html.py _TEMPLATE / _POTS_TEMPLATE) so cards, badges, calc
 * chips, pot articles and worked-formula cards look the same. Everything is
 * scoped under .rpt (wrap the page content in <div class="rpt">) so it cannot
 * leak into other page groups. Reusable by any group that renders cards:
 *   .pc (card)  .badge.good/.ok/.leak  .calc.{mdf,alpha,po,outs,spr,blk}
 *   .pot / .wf-card / .keydec / .takeaway  .filters  .sess-nav  .btn-link
 * Colours are tokens (--rp-*) with a light-mode override.
 * ======================================================================== */
.rpt {
  --rp-sunk: #0a0a0c;          /* card face, calc chip well */
  --rp-card-ink: #cfd6dd;      /* spades / clubs */
  --rp-card-red: #e08a7a;      /* hearts / diamonds */
  --rp-good-bg: #16291e; --rp-good-bd: #2c4a38;
  --rp-ok-bg: #1a2230;   --rp-ok-bd: #2c3a4a;
  --rp-leak-bg: #2a1714; --rp-leak-bd: #4a2c26;
  --rp-panel: #13131a;         /* key decision */
  --rp-wf: #0f1620;            /* worked-formula card */
  --rp-wf-mut: #8a97a6; --rp-wf-ink: #c4cedb; --rp-wf-hi: #e7edf3;
  --rp-take-bg: #1a1612; --rp-take-bd: #3a2c1c;
  --rp-warn-bg: #1a1413; --rp-warn-bd: #3a2622;
  --rp-amber-bd: #4a3a1c;
  --rp-mdf: #cdd6dd; --rp-mdf-bd: #33414e;
  --rp-blk: #d6a8e0; --rp-blk-bd: #42284a;
  --rp-forfeit: #e5604d;
}
@media (prefers-color-scheme: light) {
  .rpt {
    --rp-sunk: #f1ece3; --rp-card-ink: #2a3138; --rp-card-red: #b4442f;
    --rp-good-bg: #e3f2e8; --rp-good-bd: #a9d2b8;
    --rp-ok-bg: #e4eef7;   --rp-ok-bd: #a9c6de;
    --rp-leak-bg: #f8e4df; --rp-leak-bd: #e0b0a4;
    --rp-panel: #f4efe6; --rp-wf: #eaf0f6;
    --rp-wf-mut: #5a6573; --rp-wf-ink: #2c3744; --rp-wf-hi: #111a24;
    --rp-take-bg: #faf1e1; --rp-take-bd: #e6cfa4;
    --rp-warn-bg: #fbeee9; --rp-warn-bd: #e6bdb0;
    --rp-amber-bd: #dcc08e;
    --rp-mdf: #33414e; --rp-mdf-bd: #b8c3cd;
    --rp-blk: #7b3d8a; --rp-blk-bd: #d3b4dc;
    --rp-forfeit: #b4442f;
  }
}
.rpt .sub { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; font-weight: 400; }
.rpt .caveat, .rpt .notice { background: var(--rp-warn-bg); border: 1px solid var(--rp-warn-bd);
  color: var(--amber2); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 8px 0; }
.rpt .caveat b { color: var(--red); }
.rpt .notice b { color: var(--amber2); }
.rpt .legend { font-size: 12px; color: var(--mut); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0 12px;
  line-height: 1.7; }
.rpt .legend b { color: var(--amber2); }
.rpt .net-line { margin-bottom: 4px; }

/* cards, badges */
.rpt .pc { display: inline-block; font-weight: 800; background: var(--rp-sunk);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; margin-right: 3px;
  font-size: 13px; min-width: 26px; text-align: center; }
.rpt .pc.h, .rpt .pc.d { color: var(--rp-card-red); }
.rpt .pc.s, .rpt .pc.c { color: var(--rp-card-ink); }
.rpt .badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rpt .badge.good { background: var(--rp-good-bg); color: var(--green); border: 1px solid var(--rp-good-bd); }
.rpt .badge.ok { background: var(--rp-ok-bg); color: var(--blue); border: 1px solid var(--rp-ok-bd); }
.rpt .badge.leak { background: var(--rp-leak-bg); color: var(--red); border: 1px solid var(--rp-leak-bd); }

/* buttons, navigation, export row */
.btn-link, .rpt .bigbtn { display: inline-block; font-weight: 700; font-size: 13px;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; background: var(--card);
  color: var(--amber); cursor: pointer; font-family: inherit; }
.btn-link:hover, .rpt .bigbtn:hover { border-color: var(--amber); color: var(--amber2); }
.btn-link.off { color: var(--mut); opacity: .55; cursor: default; }
.btn-link.off:hover { border-color: var(--line); color: var(--mut); }
.rpt .bigbtn { display: block; text-align: center; font-size: 14.5px; padding: 12px 14px;
  background: var(--rp-take-bg); border-color: var(--rp-amber-bd); color: var(--amber2); }
.rpt .export-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; align-items: stretch; }
.rpt .export-row .bigbtn { flex: 1 1 100%; }
.sess-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 6px 0 14px; flex-wrap: wrap; }
.sess-nav .picker { flex: 1 1 140px; min-width: 120px; text-align: center; }
.sess-nav select { width: 100%; max-width: 240px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rpt select { background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 8px; font: inherit; font-size: 13px; }

/* filter bar */
.rpt .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin-bottom: 10px; align-items: end; }
@media (min-width: 700px) { .rpt .filters { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rpt .filters label { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
  color: var(--mut); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; min-width: 0; }
.rpt .filters label select { width: 100%; text-transform: none; letter-spacing: 0; font-weight: 400; }
.rpt .filters label.chk { flex-direction: row; align-items: center; gap: 6px; text-transform: none;
  letter-spacing: 0; font-size: 13px; color: var(--ink); font-weight: 600; padding: 6px 0; }
.rpt .filters .filter-actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.rpt .result-count { font-size: 13px; margin: 4px 0 10px; }
.htmx-request .result-count { opacity: .55; }
.rpt .warn-box { border-color: var(--amber); }

/* tables */
.rpt .tbl.tbl-left td, .rpt .tbl.tbl-left th { text-align: left; }
.rpt .tbl.tbl-left td.r, .rpt .tbl.tbl-left th.r { text-align: right; }
.rpt .tbl td { vertical-align: top; }
.rpt .tbl td.reason { white-space: normal; min-width: 240px; font-size: 13px; }
.rpt .tbl td.act { font-weight: 700; }
.rpt .tbl td.hid, .rpt .tbl .hid { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--mut); }
@media (min-width: 900px) { .wrap:has(> .rpt) { max-width: 1100px; } }   /* room for the reason column */
.rpt .tbl { min-width: 0; }               /* short tables fit a 390px phone */
.rpt .tbl.wide { min-width: 640px; }        /* key-hands list scrolls sideways */
.rpt .rpt-dec { min-width: 880px; }
.rpt .tbl th, .rpt .tbl td { padding: 9px 10px; }

/* pot articles (street-by-street) */
.rpt .pot { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 14px; scroll-margin-top: 96px; }
.rpt .pot:target { border-color: var(--amber); }
.rpt .pot-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rpt .pot-head .rank { font-size: 13px; font-weight: 800; color: var(--mut); }
.rpt .pot-head .potbb { font-size: 13px; color: var(--amber); font-weight: 700; }
.rpt .pot-head .net { margin-left: auto; font-size: 13px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.rpt .net.win { color: var(--green); background: var(--rp-good-bg); }
.rpt .net.loss { color: var(--red); background: var(--rp-leak-bg); }
.rpt .pot-meta { font-size: 12.5px; color: var(--ink); margin-bottom: 3px; }
.rpt .pot-meta.sub { color: var(--mut); font-size: 11.5px; display: block; }
.rpt .flag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.rpt .flag.allin { background: var(--rp-leak-bg); color: var(--red); }
.rpt .flag.rit { background: var(--rp-ok-bg); color: var(--blue); }
.rpt .flag.sd { background: var(--rp-good-bg); color: var(--green); }
.rpt .pot-pre { font-size: 13px; color: var(--amber2); margin: 8px 0 4px; font-weight: 600; }
.rpt .streets { margin: 6px 0; }
.rpt .street { padding: 7px 0; border-top: 1px solid var(--line); }
.rpt .st-head { font-size: 13px; margin-bottom: 3px; }
.rpt .st-name { font-weight: 800; color: var(--amber); text-transform: uppercase; font-size: 11px;
  letter-spacing: .08em; margin-right: 6px; }
.rpt .street ul { list-style: none; padding-left: 4px; }
.rpt .street li { font-size: 13.5px; padding: 3px 0; color: var(--ink); }
.rpt .street.rit .st-head { color: var(--blue); }
.rpt .calcrow { margin: 3px 0 2px; display: flex; flex-wrap: wrap; gap: 5px; }
.rpt .calc { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: var(--mut); background: var(--rp-sunk); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; line-height: 1.3; }
.rpt .calc.mdf { color: var(--rp-mdf); border-color: var(--rp-mdf-bd); }
.rpt .calc.alpha { color: var(--amber); border-color: var(--rp-amber-bd); }
.rpt .calc.po { color: var(--blue); border-color: var(--rp-ok-bd); }
.rpt .calc.outs { color: var(--green); border-color: var(--rp-good-bd); }
.rpt .calc.spr { color: var(--amber2); border-color: var(--rp-amber-bd); font-weight: 700; }
.rpt .calc.blk { color: var(--rp-blk); border-color: var(--rp-blk-bd); }
.rpt .keydec { background: var(--rp-panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0; }
.rpt .kd-head { font-size: 12px; font-weight: 800; color: var(--amber); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 4px; }
.rpt .kd-head .sub { display: inline; text-transform: none; letter-spacing: 0; }
.rpt .kd-body { font-size: 13.5px; }
.rpt .wf-card { background: var(--rp-wf); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0; }
.rpt .wf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.rpt .wf-chip { font-weight: 800; letter-spacing: .04em; background: var(--green); color: #06130c;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.rpt .wf-chip.wf-fold { background: var(--rp-forfeit); color: #1a0606; }
.rpt .wf-tag { font-size: 11px; color: var(--rp-wf-mut); }
.rpt .wf-f { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.7;
  color: var(--rp-wf-ink); overflow-wrap: anywhere; }
.rpt .wf-f b { color: var(--rp-wf-hi); }
.rpt .wf-ev { color: var(--green); }
.rpt .wf-muted { color: var(--rp-wf-mut); }
.rpt .wf-bar { position: relative; height: 8px; background: var(--rp-ok-bg); border-radius: 5px;
  margin: 5px 0; overflow: hidden; }
.rpt .wf-bar i { display: block; height: 100%; background: var(--green); }
.rpt .wf-bar u { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--amber); }
.rpt .wf-cmp { display: flex; gap: 14px; flex-wrap: wrap; font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; margin-bottom: 4px; }
.rpt .wf-cmp b { font-weight: 800; }
.rpt .wf-bayes { display: flex; height: 8px; border-radius: 5px; overflow: hidden; margin: 5px 0; }
.rpt .wf-bayes .wf-bv { background: var(--rp-forfeit); }
.rpt .wf-bayes .wf-ba { background: var(--green); }
.rpt .forfeit { color: var(--rp-forfeit); font-weight: 700; font-size: 12px; margin-left: 6px; }
.rpt .takeaway { font-size: 14px; background: var(--rp-take-bg); border: 1px solid var(--rp-take-bd);
  border-radius: 10px; padding: 10px 12px; }
.rpt .takeaway b { color: var(--amber2); }
.rpt .dual { margin: 6px 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; background: var(--row-alt); }
.rpt .appendix { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 8px; }
.rpt .appendix summary { cursor: pointer; color: var(--mut); font-weight: 700; padding: 8px 0; }
@media (max-width: 520px) {
  .rpt .pot { padding: 12px 10px; }
  .rpt .pot-head .net { margin-left: 0; }
}

/* ======================================================================== *
 * HUB DASHBOARD (roadmap 1c, hub group). Page content sits in <div class="hub rpt">.
 * Reusable by other groups:
 *   .stats-5            five-up stat tiles (extends .stats / .stat)
 *   .gbar (+ .seg-*)    stacked GOOD/OK/LEAK bar, widths via flex-grow, 2px surface gaps
 *   .meter              thin proportional bar (child <i> width in %)
 *   .leak-row           leak list row: node, description, total bb, meter, N/mean/CI
 *   .kv                 compact label/value grid (<dl>)
 *   .chip-warn/.chip-ok status chips; .hub-note notice box; .fresh freshness line
 * ======================================================================== */
.hub .stats-5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .hub .stats-5 { grid-template-columns: repeat(5, 1fr); } }
.hub .stats-5 .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 560px) { .hub .stats-5 .stat:last-child:nth-child(odd) { grid-column: auto; } }
.hub h2.card-h { margin-top: 0; }
.hub .card { margin-bottom: 11px; }
.hub .more { margin-top: 10px; }
.hub-cols { display: grid; gap: 0 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hub-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.chip-warn { color: var(--amber2); border-color: var(--amber); }
.chip-ok { color: var(--green); border-color: var(--green); }
.hub-note { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; margin: 8px 0 12px; }
.hub-note.warn-box { border-color: var(--amber); }
.hub-note b { color: var(--amber2); }
.fresh { font-size: 12.5px; color: var(--mut); margin: 2px 0 8px; }
.fresh .chip { margin: 0 4px; }
.fresh-stale { color: var(--amber2); }

.kv { display: grid; gap: 10px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; }
@media (min-width: 560px) { .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kv dt { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.kv dd { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv.kv-wide { grid-template-columns: minmax(0, 1fr); }
.kv.kv-wide dd { font-size: 14px; font-weight: 400; }
.kv.prov { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* latest-session card */
.latest-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.latest-date { font-size: 20px; font-weight: 800; color: var(--amber2); }
.latest-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* grade bars */
.gbars { display: grid; gap: 14px; }
.gbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.gbar-label { font-weight: 800; }
.gbar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--line); }
.gbar .seg { display: block; flex-basis: 0; min-width: 3px; }
.gbar .seg-good { background: var(--green); }
.gbar .seg-ok { background: var(--blue); }
.gbar .seg-leak { background: var(--red); }
.gbar-empty { background: var(--row-alt); border: 1px dashed var(--line); }
.gbar-nums { display: flex; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 3px; font-weight: 700; }

/* leak rows */
.leak-list { list-style: none; display: grid; gap: 10px; }
.leak-row { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.leak-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.leak-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.leak-desc { font-size: 13px; color: var(--ink); margin: 2px 0 6px; }
.leak-meta { font-size: 12px; font-variant-numeric: tabular-nums; }
.leak-meta .chip { margin-left: 6px; }
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 5px; }
.meter > i { display: block; height: 100%; background: var(--red); border-radius: 3px; }

/* sync panel */
.syncp-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.syncp .sync-pill { color: var(--ink); }
.syncp .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); display: inline-block; }
.syncp.sync-running .dot { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
.syncp.sync-done .dot { background: var(--green); }
.syncp.sync-error .dot { background: var(--red); }
.syncp-last { font-size: 12.5px; margin-top: 2px; }
.syncp button[disabled] { opacity: .55; cursor: default; }
.sync-msg { margin-top: 8px; font-size: 13px; color: var(--amber2); font-weight: 700; }
.syncp .sync-note { font-size: 12.5px; margin-top: 6px; color: var(--mut); }
.syncp .sync-note-error { color: var(--red); }
table.mini { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 10px; font-variant-numeric: tabular-nums; }
table.mini th { text-align: left; color: var(--mut); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; padding: 4px 8px 4px 0; }
table.mini td { padding: 4px 8px 4px 0; }
.syncp .kv.prov { margin-bottom: 0; }
@media (max-width: 420px) { .kv.prov { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* onboarding */
.cmds { list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.cmds li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
code.cmd { background: var(--rp-sunk, var(--bg)); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; user-select: all; overflow-wrap: anywhere; }
#recent-sessions th, #recent-sessions td { padding: 9px 6px; }
#recent-sessions th:first-child, #recent-sessions td:first-child { padding-left: 10px; }
#recent-sessions th:last-child, #recent-sessions td:last-child { padding-right: 10px; }
#top-hands td:first-child { white-space: normal; }
#top-hands th, #top-hands td { padding: 9px 8px; }

/* ======================================================================== *
 * STUDY GUIDE (roadmap 1c, study group). Page content sits in <div class="sg rpt">.
 * Reusable by other groups:
 *   .sg-card (+ .sg-leak/.sg-ontarget/.sg-insufficient/.sg-pinned)  focus card
 *   .sg-track/.sg-fill/.sg-tick   value bar with a target tick (one bar, no axis)
 *   .sg-nums                      label/value tiles (dl of divs)
 *   .sg-tag(-leak/-good/-insuff)  state pill;  .sg-delta.sg-d-good/-leak/-muted  trend text
 *   .sg-tabs                      segmented filter links;  .sg-actions  pin/studied controls
 * ======================================================================== */
.sg .sg-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.sg-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 8px; }
.sg-tabs a { font-size: 13px; font-weight: 700; color: var(--mut); border: 1px solid var(--line);
  background: var(--card); border-radius: 999px; padding: 6px 12px; }
.sg-tabs a:hover { color: var(--ink); }
.sg-tabs a.on { color: var(--amber2); border-color: var(--amber); }
.sg-tabs .sg-n { font-variant-numeric: tabular-nums; opacity: .8; margin-left: 2px; }
.sg-tabs-r { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }

.sg-card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 11px; }
.sg-card.sg-ontarget { border-left-color: var(--green); }
.sg-card.sg-insufficient { border-left-color: var(--mut); }
.sg-card.sg-pinned { border-color: var(--amber); border-left-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber) inset; }
.sg-top { display: flex; align-items: flex-start; gap: 8px; }
.sg-rank { font: 800 12px ui-monospace, Menlo, monospace; background: var(--line); color: var(--ink);
  border-radius: 6px; padding: 3px 7px; margin-top: 1px; }
.sg-label { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.3; font-weight: 800;
  color: var(--ink); margin: 0; letter-spacing: 0; text-transform: none; }
.sg-label a { color: var(--ink); }
.sg-label a:hover { color: var(--amber2); }
.sg-tag { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--mut);
  white-space: nowrap; }
.sg-tag-leak { color: var(--red); border-color: var(--red); }
.sg-tag-good { color: var(--green); border-color: var(--green); }
.sg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
.sg-dir { color: var(--red); border-color: var(--red); }
.sg-track { position: relative; height: 10px; background: var(--line); border-radius: 6px; margin: 12px 0 8px; }
.sg-fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.sg-fill-leak { background: var(--red); }
.sg-fill-good { background: var(--green); }
.sg-tick { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; background: var(--ink); }
.sg-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin: 8px 0; }
@media (min-width: 560px) { .sg-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sg-nums dt { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.sg-nums dd { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sg-nums dd small { font-size: 11px; font-weight: 400; color: var(--mut); }
.sg-d-good { color: var(--green); } .sg-d-leak { color: var(--red); } .sg-d-muted { color: var(--mut); font-weight: 400; }
.sg-rule { font-size: 14px; margin: 8px 0 10px; }
.sg-rule-big { font-size: 16px; }
.sg-warn { font-size: 13px; margin: 4px 0; }
.sg-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.sg-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
.sg-act { display: flex; gap: 6px; align-items: center; margin: 0; }
.sg-btn-on { color: var(--amber2); border-color: var(--amber); }
.sg-studied > summary { list-style: none; cursor: pointer; }
.sg-studied > summary::-webkit-details-marker { display: none; }
.sg-studied[open] > summary { border-color: var(--amber); }
.sg-note { margin-top: 8px; flex-wrap: wrap; }
.sg-note input[type=text] { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.sg-snote { flex-basis: 100%; font-size: 12.5px; margin: 0; }
.sg-msg { flex-basis: 100%; color: var(--red); font-weight: 700; font-size: 13px; margin: 0; }
.sg-insuff > summary { cursor: pointer; font-weight: 700; color: var(--mut); margin: 18px 0 8px; }
.sg-insuff > p { font-size: 13px; margin-bottom: 10px; }
.sg-detail-card .card-h { margin-top: 14px; }
.sg-detail-card .card-h:first-child { margin-top: 0; }
.sg-explain { font-size: 14px; margin: 4px 0; }
.sg-small { font-size: 12px; }
.sg-ex-links { white-space: nowrap; }
.sg-ex-links .btn-link { padding: 4px 9px; margin: 6px 4px 0 0; }
.sg #study-list h2:first-child { margin-top: 14px; }
@media (max-width: 520px) {
  .sg-top { flex-wrap: wrap; }
  .sg-label { flex-basis: calc(100% - 60px); }
  .sg-tabs-r { flex-basis: 100%; margin-left: 0; }
}

/* ======================================================================== *
 * EXPLOIT STUDY (roadmap 1c, exploit group). Page content sits in <div class="ex rpt">;
 * reuses the .sg-card / .sg-chips / .sg-tag / .sg-foot study components.
 *   .ex-chart/.ex-bar   one single-series horizontal bar per archetype (CSS, no axis)
 *   .ex-bar-t/.ex-bar-f bar track / fill (also used inside the breakdown table)
 * ======================================================================== */
.ex .ex-explain { padding: 12px 16px; }
.ex .ex-explain > summary { cursor: pointer; font-weight: 800; color: var(--amber2); }
.ex .ex-explain p { font-size: 14px; margin-top: 8px; }
.ex .ex-recent { font-size: 13px; margin: 0 0 10px; }
.ex .ex-spot { font-size: 14px; margin: 6px 0; }
.ex-chart { margin: 0 0 11px; }
.ex-bar { display: grid; grid-template-columns: minmax(84px, 150px) minmax(0, 1fr) 62px; gap: 10px;
  align-items: center; padding: 6px 0; color: var(--ink); }
.ex-bar:hover .ex-bar-f { filter: brightness(1.15); }
.ex-bar-l { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.ex-bar-t { display: block; height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; }
.ex-bar-f { display: block; height: 100%; background: var(--red); border-radius: 0 4px 4px 0; }
.ex-bar-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ex .ex-share { min-width: 90px; }
@media (max-width: 520px) { .ex-bar { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 54px; gap: 8px; } }
.ex .tbl td { white-space: normal; }
.ex #ex-nodes td:nth-child(2) { min-width: 150px; }
@media (max-width: 520px) { .ex .ex-share { display: none; } }
.ex #ex-examples td:nth-child(4), .ex #ex-examples td:nth-child(5) { white-space: nowrap; }

/* ======================================================================== *
 * TRENDS (roadmap 1c, trends group). Page content sits in <div class="tr rpt">.
 *   .tc-*   inline-SVG chart parts (pages/_charts.py line_chart): .tc-svg .tc-gl .tc-yt .tc-xt
 *           .tc-seg(.tc-seg-thin) .tc-pt(.tc-pt-solid/.tc-pt-thin) .tc-ci .tc-target .tc-cue
 *   .tr-bar bar-list row (label, track+fill, value, n+tier); .tr-bar-thin is striped
 *   .tr-arrow-better/-worse  drift arrows (green/red AND a glyph AND words, never colour alone)
 * Series colour is --blue; the target is --amber; good/bad use --green/--red.
 * ======================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tr .tr-h { margin-top: 18px; }
.tr .tr-sub { font-size: 14px; margin: 14px 0 6px; color: var(--amber2); }
.tr-picker { margin: 8px 0; }
.tr-picker a { text-align: center; }
.tr-dir { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tr-chart, .tr-bars { padding: 12px 12px 10px; }
.tr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--mut); margin-bottom: 6px; }
.tr-key { display: inline-flex; align-items: center; gap: 6px; }
.tr-swatch { width: 28px; height: 10px; flex: none; }
.tc-svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; overflow: visible; }
.tc-gl { stroke: var(--line); stroke-width: 1; }
.tc-yt, .tc-xt, .tc-cue, .tc-target-l { font: 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--mut); font-variant-numeric: tabular-nums; }
.tc-cue { font-size: 11px; letter-spacing: .04em; }
.tc-target-l { fill: var(--amber2); font-weight: 700; }
.tc-seg { stroke: var(--blue); stroke-width: 2; stroke-linecap: round; fill: none; }
.tc-seg-thin { stroke-dasharray: 5 5; opacity: .85; }
.tc-pt { stroke-width: 2; }
.tc-pt-solid { fill: var(--blue); stroke: var(--card); }
.tc-pt-thin { fill: var(--card); stroke: var(--blue); }
.tc-hit { fill: transparent; }
.tc-pt-g:hover .tc-pt, .tc-pt-g:focus .tc-pt { stroke-width: 3; }
.tc-ci { fill: var(--blue); fill-opacity: .16; stroke: none; }
.tc-target { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 1 0; }
.tr-axis-note { font-size: 12px; margin-top: 6px; }
.tr-note { font-size: 13px; margin-top: 6px; color: var(--amber2); }
.tr-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.tr-table-wrap > summary { cursor: pointer; font-weight: 700; color: var(--amber2); margin: 4px 0 8px; font-size: 13.5px; }
.tr .tbl { min-width: 0; }
.tr .tbl th[scope=row] { text-align: left; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink);
  font-size: 13px; background: transparent; white-space: normal; }
.tr .tbl td { white-space: nowrap; }
.tr-row-suppress td { color: var(--mut); }
.tr-caveat { margin: 0 0 11px; font-size: 13.5px; }
.tr-bar { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 62px; gap: 2px 10px; align-items: center; padding: 7px 0; }
.tr-bar-l { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.tr-bar-t { position: relative; display: block; height: 12px; background: var(--line); border-radius: 6px; overflow: hidden; }
.tr-bar-f { position: absolute; top: 0; bottom: 0; background: var(--blue); border-radius: 0 4px 4px 0; }
.tr-bar-thin .tr-bar-f { background: repeating-linear-gradient(135deg, var(--blue) 0 4px, transparent 4px 7px);
  box-shadow: inset 0 0 0 1.5px var(--blue); }
.tr-bar-ci { position: absolute; top: 5px; height: 2px; background: var(--ink); opacity: .75; }
.tr-bar-cit { margin-left: 4px; }
.tr-bar-target { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--amber); }
.tr-bar-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.tr-bar-n { grid-column: 2 / 4; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.tr-bar-suppress .tr-bar-l, .tr-bar-suppress .tr-bar-v { color: var(--mut); }
.tr-worsening ul { margin: 6px 0 0 18px; font-size: 14px; }
.tr-drift-note, .tr-no-worsening { font-size: 13px; margin-bottom: 10px; }
.tr-arrow { font-size: 12px; }
.tr-arrow-better, .tr-mean-better { color: var(--green); }
.tr-arrow-worse, .tr-mean-worse { color: var(--red); }
.tr-mean { font-weight: 700; }
.tr-mean-flat, .tr-mean-na, .tr-mean-neutral { color: var(--mut); }

.tr-export-metric { margin-top: 26px; }
@media (max-width: 520px) {
  .tc-alt { display: none; }
  .tr-bar { grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) 54px; gap: 2px 8px; }
  .tr-chart { padding: 10px 6px 8px; }
  .tr .tbl th, .tr .tbl td { padding: 9px 8px; }
  .tr .tbl td { font-size: 13px; }
}
.tr .tbl th[scope=row] { border: 0; }
.tr-sample { display: block; font-size: 11.5px; font-weight: 400; color: var(--mut); margin-top: 3px; }
.tr-sample .chip { font-size: 10.5px; padding: 0 6px; }
.tr .tbl td.tr-ft { white-space: normal; }
.tr-move .tr-mean { display: block; font-size: 12.5px; }
.tr-drift-table th[scope=row] { min-width: 120px; }