/* ============================================================
   SugarBets MLB Intelligence — app shell + table primitives
   Dense, Tufte-style evidence sheet. Responsive desktop ⇄ mobile.
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--sb-font-body);
  background: var(--sb-bg);
  color: var(--sb-fg-1);
  line-height: var(--sb-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   SHELL — sticky header + horizontal tab nav
============================================================ */
.sb-shell {
  max-width: var(--sb-content-max); /* 1280px — 2026-06-10, was 1480px */
  margin: 0 auto;
  padding: 0;
}

.sb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sb-bg);
  border-bottom: 1px solid var(--sb-border);
}
.sb-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px 8px;
  gap: 16px;
}
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sb-brand-mark {
  width: 18px; height: 18px;
  border: 2px solid var(--sb-accent);
  border-radius: 3px;
  position: relative;
}
.sb-brand-mark::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sb-accent);
  transform: translate(-50%,-50%);
}
.sb-brand-name { font-weight: 800; font-size: var(--sb-fs-body); letter-spacing: -0.02em; }
.sb-brand-sub  {
  font-size: var(--sb-fs-small); color: var(--sb-fg-2); font-weight: 500;
  padding-left: 10px; border-left: 1px solid var(--sb-border);
  letter-spacing: -0.005em;
}

.sb-meta-strip {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px */
  color: var(--sb-fg-3);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  row-gap: 2px;
}
.sb-meta-strip > div > span { white-space: nowrap; }

/* C2 — A1 status pills row inside HeaderMeta */
.sb-status-pills { padding-top: 2px; }
.sb-status-pills .lbl { font-size: 10px; padding: 0 5px; line-height: 16px; }
.sb-meta-strip .live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--sb-green); border-radius: 50%;
  margin-right: 4px;
  animation: livepulse 2s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Tab nav */
.sb-tabs {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--sb-border);
  background: var(--sb-bg);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.sb-tabs::-webkit-scrollbar { display: none; }
.sb-tab {
  font-family: var(--sb-font-body);
  font-size: var(--sb-fs-body);
  font-weight: 500;
  color: var(--sb-fg-2);
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;  /* reserves space so active underline doesn't shift layout */
  white-space: nowrap;
  scroll-snap-align: start;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.sb-tab:hover {
  color: var(--sb-fg-1);
  background: var(--sb-surface-2);
}
.sb-tab:active {
  background: var(--sb-surface-3);
  transition: none;
}
.sb-tab:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: -2px;
}
.sb-tab[aria-current="page"] {
  color: var(--sb-fg-1);
  font-weight: 600;
  background: var(--sb-surface-2);
  border-bottom-color: var(--sb-accent);
}
.sb-tab .tab-badge,
.tab-badge {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sb-surface-3);
  color: var(--sb-fg-3);
  font-size: var(--sb-fs-micro); /* 11px */
  font-family: var(--sb-font-mono);
  font-weight: 500;
}

/* Page content area */
.sb-page {
  padding: 20px 24px 48px;
}
@media (max-width: 720px) {
  .sb-header-row { padding: 10px 14px 6px; flex-wrap: wrap; gap: 8px; }
  .sb-brand-sub { font-size: var(--sb-fs-micro); } /* 11px */
  .sb-meta-strip { font-size: var(--sb-fs-micro); width: 100%; } /* 11px */
  .sb-page { padding: 14px 14px 40px; }
}

/* ============================================================
   SECTION HEADERS
============================================================ */
.sb-section { margin-bottom: 32px; }
.sb-section + .sb-section { margin-top: 0; }
.sb-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sb-border);
  margin-bottom: 14px;
  padding-top: 4px;
}
.sb-section-head > div:first-child {
  min-width: 0;
  flex: 1 1 280px;
}
.sb-section-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sb-fg-1);
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  line-height: 1.15;
}
.sb-section-head h2 .h2-faint {
  font-weight: 400;
  font-size: 13px;
  color: var(--sb-fg-3);
  letter-spacing: -0.005em;
}
@media (max-width: 540px) {
  .sb-section-head h2 { font-size: 18px; gap: 6px; }
  .sb-section-head h2 .h2-faint { font-size: var(--sb-fs-micro); } /* 11px */
}
.sb-section-head h2 .h2-faint {
  font-weight: 400;
  font-size: var(--sb-fs-caption); /* 12px */
  color: var(--sb-fg-3);
}
.sb-section-sub {
  font-family: var(--sb-font-body);
  font-size: var(--sb-fs-caption); /* 12px */
  font-weight: 400;
  color: var(--sb-fg-2);
  margin-top: 4px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.sb-section-sub .mono { font-family: var(--sb-font-mono); }
.sb-section-actions {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px */
  color: var(--sb-fg-2);
}

/* Base pill — standalone or inside pill-group */
.pill {
  display: inline-flex; align-items: center;
  background: var(--sb-surface-2);
  padding: 4px 10px;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px */
  color: var(--sb-fg-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  cursor: pointer;
  transition: var(--sb-transition);
}
.pill:hover { color: var(--sb-fg-1); background: var(--sb-surface-3); }
.pill:active { background: var(--sb-surface-3); transition: none; }
.pill:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }
.pill.active {
  background: var(--sb-accent);
  color: #fff;
  border-color: var(--sb-accent);
}

/* Filter pills (segmented) */
.pill-group {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pill-group .pill {
  background: var(--sb-surface-2);
  padding: 4px 10px;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px */
  color: var(--sb-fg-2);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  transition: var(--sb-transition);
}
.pill-group .pill:hover { color: var(--sb-fg-1); background: var(--sb-surface-3); }
.pill-group .pill:active { background: var(--sb-surface-3); transition: none; }
.pill-group .pill:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }
.pill-group .pill.active {
  background: var(--sb-accent);
  color: #fff;
  border-color: var(--sb-accent);
}

/* Sort buttons */
.sort-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro); /* 11px */
  color: var(--sb-fg-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 6px;
}
.sort-btn { cursor: pointer; }
.sort-btn.active { color: var(--sb-fg-1); }
.sort-btn:active { background: var(--sb-surface-3); transition: none; }
.sort-btn:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }
.sort-btn .arr { color: var(--sb-accent); }

/* ============================================================
   TABLES — base, sticky thead, optional sticky first col
   Hairlines only, no card wrap by default.
============================================================ */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scroll affordance: edge shadows appear only while columns overflow,
     so the hidden columns on mobile are discoverable. Gradient covers use
     local attachment so the shadow fades out at either end of the scroll. */
  background:
    linear-gradient(to right, var(--sb-bg) 30%, rgba(0,0,0,0)),
    linear-gradient(to left, var(--sb-bg) 30%, rgba(0,0,0,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.45), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.45), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tbl-wrap.no-chrome { } /* legacy alias */
table.sb-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--sb-font-body);
}
table.sb-tbl thead th {
  text-align: left;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sb-fg-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--sb-border-light);
  white-space: nowrap;
  background: var(--sb-bg);
}
table.sb-tbl thead th.num { text-align: right; }
table.sb-tbl thead th.ctr { text-align: center; }
table.sb-tbl tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(45, 52, 68, 0.4);
  vertical-align: middle;
}
table.sb-tbl tbody td.num,
td.num, th.num {
  text-align: right;
  font-family: var(--sb-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.sb-tbl tbody td.ctr { text-align: center; }
table.sb-tbl tbody tr:last-child td { border-bottom: none; }
/* Subtle zebra — must stay subtle on dark */
table.sb-tbl tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.022);
}
table.sb-tbl tbody tr {
  transition: background 100ms ease, box-shadow 100ms ease;
  position: relative;
}
/* Hover: surface-2 fill + left-edge accent bar */
table.sb-tbl tbody tr:hover {
  background: var(--sb-surface-2) !important;
  box-shadow: inset 2px 0 0 var(--sb-accent);
}
table.sb-tbl td.dim { color: var(--sb-fg-3); }
/* Sticky first column — all viewports.
   Mobile (≤768px) in tokens.css adds a box-shadow and sets an explicit
   background; this base rule ensures the column is sticky everywhere. */
table.sb-tbl tbody td:first-child,
table.sb-tbl thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--sb-bg); /* opaque — scrolling columns must not show through */
  z-index: 1;
}
/* Opaque equivalent of the translucent zebra (bg + 2.2% white) so the pinned
   cell matches its row without letting content bleed through */
table.sb-tbl tbody tr:nth-child(even) td:first-child {
  background: var(--sb-surface-zebra-pinned);
}
table.sb-tbl tbody tr:hover td:first-child {
  background: var(--sb-surface-2);
}
table.sb-tbl td.team-cell {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}
table.sb-tbl td.team-cell .team-sub {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--sb-fg-3);
  margin-top: 1px;
  letter-spacing: 0;
}

/* Sticky first column variant (for wide team/player tables) */
table.sb-tbl.sticky-name th:first-child,
table.sb-tbl.sticky-name td:first-child {
  position: sticky; left: 0;
  background: var(--sb-bg);
  z-index: 1;
}
table.sb-tbl.sticky-name thead th:first-child {
  z-index: 3;
}
table.sb-tbl.sticky-name tbody tr:hover td:first-child {
  background: var(--sb-bg);
}
table.sb-tbl.sticky-name th:nth-child(2),
table.sb-tbl.sticky-name td:nth-child(2) {
  position: sticky; left: 32px;
  background: var(--sb-bg);
  z-index: 1;
  box-shadow: 1px 0 0 var(--sb-border);
}
table.sb-tbl.sticky-name tbody tr:hover td:nth-child(2) {
  background: var(--sb-bg);
}
table.sb-tbl.sticky-name thead th:nth-child(2) { z-index: 3; }

/* Compact rank cell */
.rank-cell {
  font-family: var(--sb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--sb-fg-3);
  text-align: right;
  width: 28px;
  padding-right: 4px !important;
}

/* ============================================================
   PILLS / BADGES — semantic
============================================================ */
.lbl {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 9px */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.lbl-bet      { background: var(--sb-green-dim); color: var(--sb-green); border-color: color-mix(in srgb, var(--sb-green) 35%, transparent); }
.lbl-lean     { background: var(--sb-amber-dim); color: var(--sb-amber); border-color: color-mix(in srgb, var(--sb-amber) 35%, transparent); }
.lbl-pass     { background: rgba(80,88,105,0.2);   color: var(--sb-fg-3);  border-color: rgba(80,88,105,0.3); }
.lbl-wait  { background: rgba(59,130,246,0.15); color: var(--sb-accent); border-color: rgba(59,130,246,0.35); }
.lbl-moved { background: rgba(80,88,105,0.18);  color: var(--sb-fg-2);   border-color: rgba(80,88,105,0.30); }
.lbl-buylow   { background: var(--sb-green-dim);   color: var(--sb-green); border-color: color-mix(in srgb, var(--sb-green) 40%, transparent); }
.lbl-sellhigh { background: rgba(239,68,68,0.15);  color: var(--sb-red);   border-color: rgba(239,68,68,0.35); }
.lbl-bottom   { background: rgba(239,68,68,0.15);  color: var(--sb-red);   border-color: rgba(239,68,68,0.35); }
.lbl-over     { background: rgba(34,197,94,0.18);  color: var(--sb-green); border-color: rgba(34,197,94,0.4); }
.lbl-under    { background: rgba(239,68,68,0.15);  color: var(--sb-red);   border-color: rgba(239,68,68,0.35); }
.lbl-flat     { background: rgba(80,88,105,0.2);   color: var(--sb-fg-3);  border-color: rgba(80,88,105,0.3); }
.lbl-ace      { background: rgba(59,130,246,0.18); color: var(--sb-accent); border-color: rgba(59,130,246,0.35); }
.lbl-risk     { background: rgba(245,158,11,0.15); color: var(--sb-amber); border-color: rgba(245,158,11,0.35); }
.lbl-veldown  { background: rgba(239,68,68,0.15);  color: var(--sb-red);   border-color: rgba(239,68,68,0.35); }
.lbl-k        { background: rgba(168,85,247,0.15); color: var(--sb-purple); border-color: rgba(168,85,247,0.35); }
.lbl-walk     { background: rgba(245,158,11,0.15); color: var(--sb-amber); border-color: rgba(245,158,11,0.35); }
.lbl-hr       { background: rgba(239,68,68,0.15);  color: var(--sb-red);   border-color: rgba(239,68,68,0.35); }
.lbl-leash    { background: rgba(80,88,105,0.25);  color: var(--sb-fg-2);  border-color: rgba(80,88,105,0.35); }
.lbl-fresh    { background: rgba(34,197,94,0.18);  color: var(--sb-green); border-color: rgba(34,197,94,0.4); }
.lbl-tired    { background: rgba(239,68,68,0.15);  color: var(--sb-red);   border-color: rgba(239,68,68,0.35); }
.lbl-watch    { background: rgba(245,158,11,0.15); color: var(--sb-amber); border-color: rgba(245,158,11,0.35); }

/* Tiny inline qualifier (low-weight) */
.qmark {
  display: inline-block;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 9px */
  font-weight: 600;
  color: var(--sb-fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Stat with delta */
.stat-delta {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 10px */
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.delta-up   { color: var(--sb-green); }
.delta-down { color: var(--sb-red); }
.delta-flat { color: var(--sb-fg-3); }

/* ============================================================
   CARDS — minimal, hairline only
============================================================ */
.sb-card {
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 16px;
}
.sb-card-bare {
  background: transparent;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 16px;
}
.sb-card-flush {
  border-left: 0; border-right: 0;
  border-radius: 0;
  padding: 16px 0;
}

/* Plain-English read panel — typographic, no border-rule */
.read-panel {
  padding: 4px 0 4px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sb-fg-1);
  max-width: 720px;
  letter-spacing: -0.005em;
}
.read-panel strong { font-weight: 600; color: var(--sb-fg-1); }
.read-panel em {
  font-style: normal;
  font-weight: 600;
  color: var(--sb-fg-1);
}
.read-panel .read-call {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sb-border);
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-caption); /* 12px */
  font-weight: 600;
  color: var(--sb-fg-1);
  letter-spacing: 0;
}
.read-panel .read-call .call-prefix {
  color: var(--sb-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-right: 8px;
}

/* Comparison stat row (matchup page) */
.cmp-row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(45,52,68,0.5);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row .cmp-label {
  grid-column: 1 / -1;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 10px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sb-fg-3);
  padding-bottom: 2px;
}
.cmp-row .cmp-side {
  font-family: var(--sb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
}
.cmp-row .cmp-side.left  { text-align: right; }
.cmp-row .cmp-side.right { text-align: left; }
.cmp-row .cmp-side.dim   { color: var(--sb-fg-3); font-weight: 400; }
.cmp-row .cmp-bar { grid-column: 2; }
.cmp-row .cmp-side .side-sub {
  display: block;
  font-family: var(--sb-font-body);
  font-size: var(--sb-fs-micro); /* 11px — was 10px */
  font-weight: 400;
  color: var(--sb-fg-3);
  margin-top: 1px;
}

/* Mobile: keep grid but tighter */
@media (max-width: 540px) {
  .cmp-row { grid-template-columns: 1fr 44px 1fr; gap: 8px; }
  .cmp-row .cmp-side { font-size: 12px; }
}

/* ============================================================
   PAGE HEADLINE — one big takeaway per page
============================================================ */
.page-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 8px 28px;
  align-items: end;
  padding: 6px 0 24px;
  border-bottom: 1px solid var(--sb-border);
  margin-bottom: 24px;
}
.page-headline .ph-eyebrow {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  grid-row: 1;
  grid-column: 1 / -1;
}
.page-headline .ph-num {
  font-family: var(--sb-font-mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--sb-fg-1);
  grid-row: 2;
  grid-column: 1;
  white-space: nowrap;
}
.page-headline .ph-num > * { vertical-align: baseline; }
.page-headline .ph-num .num-up { color: var(--sb-green); }
.page-headline .ph-num .num-dn { color: var(--sb-red); }
.page-headline .ph-num .num-nx { color: var(--sb-amber); }
.page-headline .ph-sub {
  font-size: 14px;
  color: var(--sb-fg-2);
  font-weight: 400;
  max-width: 620px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  grid-row: 3;
  grid-column: 1 / -1;
  margin-top: 6px;
}
.page-headline .ph-sub strong { font-weight: 600; color: var(--sb-fg-1); }
.page-headline .ph-meta {
  display: flex; gap: 22px; align-items: baseline;
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-fg-3);
  flex-wrap: wrap;
  grid-row: 2;
  grid-column: 2;
  text-align: right;
}
.page-headline .ph-meta > div {
  text-align: left;
  white-space: nowrap;
}
.page-headline .ph-meta .meta-num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--sb-fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1px;
}
@media (max-width: 720px) {
  .page-headline { grid-template-columns: 1fr; gap: 6px 16px; }
  .page-headline .ph-meta { grid-column: 1; grid-row: 4; justify-content: flex-start; margin-top: 6px; gap: 16px; }
  .page-headline .ph-meta .meta-num { font-size: 16px; }
  .page-headline .ph-num { font-size: 30px; }
}
@media (max-width: 540px) {
  .page-headline .ph-num { font-size: 26px; gap: 8px; }
}

/* ============================================================
   QUADRANT SCATTER GRID
============================================================ */
.scatter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.scatter-panel { }
.scatter-panel .sp-title {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 10px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sb-fg-3);
  margin-bottom: 4px;
}
.scatter-panel .sp-sub {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 9px */
  color: var(--sb-fg-3);
  margin-bottom: 6px;
}

/* ============================================================
   SCORE INGREDIENT BREAKDOWN (SP Trust Score)
============================================================ */
.ingredient-list { display: flex; flex-direction: column; gap: 4px; }
.ingredient-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  gap: 8px;
  align-items: center;
  font-family: var(--sb-font-mono);
  font-size: 11px;
}
.ingredient-row .ing-label { color: var(--sb-fg-2); }
.ingredient-row .ing-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sb-fg-1);
}
.ingredient-row.missing .ing-value { color: var(--sb-amber); font-style: italic; }

/* Empty/loading states */
.empty-state {
  padding: 24px;
  text-align: center;
  font-family: var(--sb-font-mono);
  font-size: 11px;
  color: var(--sb-fg-3);
}

/* Footer */
.sb-footer {
  margin-top: 32px;
  padding: 14px 24px 24px;
  border-top: 1px solid var(--sb-border);
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 10px */
  color: var(--sb-fg-3);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sb-bg); }
::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-border-light); }

/* ============================================================
   MOBILE: vertical "evidence row" pattern
   1 hero stat + 3 support, sparkline tertiary
============================================================ */
.evidence-list { display: flex; flex-direction: column; gap: 0; }
.evidence-row {
  display: grid;
  gap: 8px 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(45,52,68,0.4);
  position: relative;
  transition: box-shadow 100ms ease, padding-left 100ms ease;
}
.evidence-row:hover {
  box-shadow: inset 2px 0 0 var(--sb-accent);
  padding-left: 6px;
}
.evidence-row:last-child { border-bottom: none; }
.evidence-row .er-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.evidence-row .er-rank {
  font-family: var(--sb-font-mono); font-size: 11px;
  color: var(--sb-fg-3); width: 22px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.evidence-row .er-team {
  font-weight: 700;
  font-size: 15px;
  color: var(--sb-fg-1);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.evidence-row .er-team .er-team-sub {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--sb-fg-3);
  margin-top: 2px;
  letter-spacing: 0;
}
/* hero stat right of header */
.evidence-row .er-hero {
  font-family: var(--sb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
.evidence-row .er-hero .er-hero-cap {
  display: block;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro); /* 11px — was 9px */
  font-weight: 500;
  color: var(--sb-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  text-align: right;
  letter-spacing: 0.06em;
}
.evidence-row .er-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 14px;
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--sb-fg-2);
}
.evidence-row .er-stats .er-stat .lbl-cap {
  display: block;
  font-size: var(--sb-fs-micro); /* 11px — was 9px */
  color: var(--sb-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 1px;
}
.evidence-row .er-trail {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro); /* 11px — was 10px */
  color: var(--sb-fg-3);
  margin-top: 2px;
}

/* Visibility toggles between desktop table and mobile evidence */
.show-desktop { display: block; }
.show-mobile  { display: none; }
@media (max-width: 720px) {
  .show-desktop { display: none; }
  .show-mobile  { display: block; }
}

/* ---------- Market Check column reduction on mobile (≤768px) --------------------- */
/* The Market Check table has 12 columns; on phones only the actionable subset
   is shown. hide-mobile targets th/td in the same column position via class.
   Kept columns: Matchup, Starters, Model home%, Mkt cur, Edge@pred, Tot Δ, CLV.
   Hidden: Mkt close, Edge vs close, Model tot, Mkt tot, Movement. */
@media (max-width: 768px) {
  .vegas-col-hide-mobile {
    display: none !important;
  }
}

/* Tweaks bg */
[data-no-barnacles] .barnacle { display: none !important; }

/* ── Segmented control (.sb-seg) ──────────────────────────────────────────── */
/* Primary sub-page entity/category switchers (e.g. Teams/Pitchers/Hitters,   */
/* K Props / HR Props / Model Projections). Pill-group container with inset.   */
.sb-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
}
.sb-seg-btn {
  font-family: var(--sb-font-body);
  font-size: var(--sb-fs-body); /* 14px */
  font-weight: 600;
  padding: 8px 18px;
  min-height: 38px;
  border: none;
  border-radius: calc(var(--sb-radius) - 3px);
  color: var(--sb-fg-2);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--sb-transition);
  line-height: 1;
}
.sb-seg-btn:hover { color: var(--sb-fg-1); }
.sb-seg-btn:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }
.sb-seg-btn.active {
  background: var(--sb-surface-3);
  color: var(--sb-fg-1);
  box-shadow: var(--sb-shadow-1);
}

/* ── View-switch pills (.sb-viewswitch) ───────────────────────────────────── */
/* Secondary view selectors (Power/Offense/Bullpen/Form/…, 7d/30d/60d/season).*/
.sb-viewswitch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.sb-view-btn {
  font-family: var(--sb-font-body);
  font-size: var(--sb-fs-small); /* 13px */
  font-weight: 500;
  padding: 7px 14px;
  min-height: 34px;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-pill);
  color: var(--sb-fg-2);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--sb-transition);
  line-height: 1;
}
.sb-view-btn:hover { color: var(--sb-fg-1); border-color: var(--sb-border-light); }
.sb-view-btn:active { opacity: 0.8; transition: none; }
.sb-view-btn:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }
.sb-view-btn.active {
  background: var(--sb-accent-soft);
  border-color: var(--sb-accent);
  color: var(--sb-accent);
  font-weight: 600;
}

/* Mobile: adequate touch targets for both control types */
@media (max-width: 768px) {
  .sb-seg-btn  { min-height: 44px; padding: 0 16px; }
  .sb-view-btn { min-height: 44px; padding: 0 14px; }
}

/* ── Reduced-motion accessibility ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Kill all transitions and animations site-wide */
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Keep .live-dot visible and static — pulse is purely decorative */
  .sb-meta-strip .live-dot {
    animation: none;
    opacity: 1;
  }
}

/* ── Trust bar — model track record strip (redesign installment 1) ─────────
   Three divider-split, scannable claims on desktop; a collapsible single-line
   summary on mobile. All numbers neutral grey (honest-number rule). */
.sb-trustbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px;
  background: var(--sb-surface);
  border-bottom: 1px solid var(--sb-border);
  padding: 6px 16px;
  font-family: var(--sb-font-mono);
}
.sb-trustbar__summary { display: none; }   /* mobile only */
.sb-trustbar__claims { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px 18px; flex: 1 1 auto; }
.sb-trustbar__status {
  font-family: var(--sb-font-body); font-weight: 600;
  font-size: var(--sb-fs-small); color: var(--sb-fg-1);
  display: inline-flex; align-items: center; gap: 6px; align-self: center;
}
.sb-trustbar__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sb-fg-3); flex: none;   /* neutral dot — never red/green */
}
.sb-trustbar__cell {
  display: inline-flex; flex-direction: column; gap: 1px;
  border-left: 1px solid var(--sb-border); padding-left: 18px;
}
.sb-trustbar__label {
  font-size: var(--sb-fs-micro); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--sb-fg-3);
}
.sb-trustbar__value {
  font-family: var(--sb-font-mono); font-weight: 600;
  font-size: var(--sb-fs-small); color: var(--sb-fg-2-val);
  font-variant-numeric: tabular-nums;
}
.sb-trustbar__ci { color: var(--sb-fg-2); }   /* neutral grey, never red */
.sb-trustbar__sub { font-size: var(--sb-fs-micro); color: var(--sb-fg-3); }
.sb-trustbar__link {
  margin-left: auto; background: none;
  border: 1px solid var(--sb-border-light); border-radius: var(--sb-radius-sm);
  padding: 4px 10px; color: var(--sb-accent);
  font-family: var(--sb-font-body); font-weight: 600; font-size: 13px; cursor: pointer;
}
.sb-trustbar__link:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }

@media (max-width: 768px) {
  .sb-trustbar { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .sb-trustbar__summary {
    display: flex; align-items: center; gap: 6px; width: 100%;
    min-height: 44px; padding: 8px 16px; text-align: left; cursor: pointer;
    background: none; border: 0; border-bottom: 1px solid var(--sb-border);
    color: var(--sb-fg-1); font-family: var(--sb-font-body);
    font-weight: 600; font-size: var(--sb-fs-small);
  }
  .sb-trustbar__summary:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }
  .sb-trustbar__mobileroi { color: var(--sb-fg-2); font-family: var(--sb-font-mono); }
  .sb-trustbar__chev { margin-left: auto; color: var(--sb-fg-3); }
  .sb-trustbar__claims { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 16px 10px; }
  .sb-trustbar__claims[data-open="true"] { display: flex; }
  .sb-trustbar__status--desktop { display: none; }
  .sb-trustbar__cell {
    flex-direction: row; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 2px 8px;
    border-left: 0; border-top: 1px solid var(--sb-border); padding: 7px 0;
  }
  .sb-trustbar__cell:first-of-type { border-top: 0; }
  .sb-trustbar__sub { flex-basis: 100%; }   /* sub on its own line on mobile */
  .sb-trustbar__link { margin: 8px 0 0; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
}

/* Global focus ring for interactive content cards (role="link") — F8 */
[role="link"]:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }

/* Top Edges: focus ring for the ledger row disclosure toggle and the mobile
   edge cards (role="button"), which don't match the role="link" rule above. */
.sb-edge-chevron:focus-visible,
.sb-card[role="button"]:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }

/* ── TapHint keyboard-accessible trigger ─────────────────────────────────────
   The outer span now carries tabIndex=0 + role=button; this rule gives it the
   same focus ring used elsewhere in the app (--sb-shadow-focus). */
.tap-hint-trigger:focus-visible {
  box-shadow: var(--sb-shadow-focus);
  outline: none;
  border-radius: var(--sb-radius-sm);
}

/* ── Sub-tab scroll wrapper + right-edge fade affordance ──────────────────── */
/* .sb-tabs-wrap replaces the bare .sb-viewswitch on the default SubTabBar     */
/* variant — it scrolls horizontally and shows a right-edge gradient until the */
/* last tab is visible (.at-end toggles it off via JS in SubTabBar).           */
.sb-tabs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Preserve pill wrap on desktop (>768px); scroll only on mobile */
  flex-wrap: wrap;
}
.sb-tabs-wrap::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .sb-tabs-wrap {
    flex-wrap: nowrap;
    /* Extra right padding so the last tab clears the fade overlay */
    padding-right: 32px;
  }

  /* Right-edge fade: CSS-only ::after overlay, pointer-events:none so tabs    */
  /* behind it remain tappable. Gradient fades from transparent → page bg.     */
  .sb-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--sb-bg));
    pointer-events: none;
    transition: opacity 0.15s ease;
    opacity: 1;
  }

  /* Hide fade when scrolled to the end (class toggled by SubTabBar useEffect) */
  .sb-tabs-wrap.at-end::after {
    opacity: 0;
  }
}

/* Apply the same right-edge fade to the desktop .sb-tabs nav when it          */
/* overflows horizontally (visible on narrow desktop / rotated tablet).        */
@media (max-width: 900px) {
  .sb-tabs {
    position: relative;
  }
  /* Wrap .sb-tabs in a positioned ancestor via a sibling class applied by the */
  /* NavTabs render; since NavTabs renders a plain <nav> we use the parent      */
  /* .sb-app-header or fall back to the ::after on a wrapping .sb-tabs-nav-wrap.*/
  /* For now the fade is handled at the .sb-tabs level via a sticky pseudo on  */
  /* its containing block — this is a best-effort CSS-only approximation; the  */
  /* SubTabBar JS approach is the authoritative pattern for game-detail tabs.  */
}

/* ── Model Performance: in-page group nav + collapsible groups ─────────────── */
/* Smooth-scroll for the anchor-chip nav (respects reduced-motion below).      */
html { scroll-behavior: smooth; }

/* Sticky chip row that jumps to the four section groups. Scrolls horizontally */
/* on narrow viewports rather than wrapping into a tall block.                 */
.perf-subnav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 0;
  background: var(--sb-bg);
  border-bottom: 1px solid var(--sb-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.perf-subnav__label {
  flex: 0 0 auto;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro);            /* 11px floor */
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wide);
  color: var(--sb-fg-3);
  margin-right: 2px;
}
.perf-subnav a {
  flex: 0 0 auto;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro);
  white-space: nowrap;
  text-decoration: none;
  color: var(--sb-fg-2);
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  padding: 3px 10px;
}
.perf-subnav a:hover,
.perf-subnav a:focus-visible {
  color: var(--sb-accent);
  border-color: var(--sb-accent);
}

/* Keep a jumped-to group header clear of the sticky nav bar above it. */
.perf-anchor { scroll-margin-top: 64px; }

.perf-group { margin-bottom: 8px; }
.perf-group__header {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 20px 0 6px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--sb-border);
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.perf-group__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-h3);               /* 18px — group is the H2 level; lifted 14→18 (2026-06-24) for real hierarchy */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wide);
  color: var(--sb-fg-1);
}
.perf-group__sub {
  font-size: var(--sb-fs-caption);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--sb-fg-3);
}
.perf-group__chevron {
  flex: 0 0 auto;
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wide);
  color: var(--sb-fg-3);
}
.perf-group__header:hover .perf-group__chevron,
.perf-group__header:focus-visible .perf-group__chevron { color: var(--sb-accent); }
.perf-group__summary {
  font-size: var(--sb-fs-small);
  color: var(--sb-fg-2);
  line-height: 1.55;
  padding: 6px 0 16px;
}
/* Educational "what this is / what drives it" line shown when a group is open. */
.perf-group__intro {
  font-size: var(--sb-fs-small);
  color: var(--sb-fg-2);
  line-height: 1.55;
  max-width: 760px;
  padding: 6px 0 14px;
}
.perf-group__body { padding-top: 2px; }

/* Inline text-button used in the reading guide (mobile-safe toggle). */
.perf-linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--sb-accent);
  cursor: pointer;
  text-decoration: underline;
}
.perf-linkbtn:hover,
.perf-linkbtn:focus-visible { color: var(--sb-accent-hover); }

/* ── Model Performance: evidence cockpit (verdict + grid + CI bars + meter) ── */
.perf-cockpit {
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: 6px;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
}
.perf-cockpit__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
/* Evidence grid + calibration curve, side by side (stack on narrow). */
.perf-cockpit__main {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start;
}
.perf-cockpit__main .perf-ev { flex: 1 1 380px; min-width: 0; }
.perf-calpanel { flex: 0 0 176px; }
.perf-hero {
  font-size: var(--sb-fs-h3);
  font-weight: 700;
  color: var(--sb-fg-1);
  line-height: 1.3;
}
/* Evidence grid — Test | Result | Read, scannable in one pass. */
.perf-ev {
  display: grid;
  grid-template-columns: auto max-content 1fr;
  gap: 0 16px;
  align-items: baseline;
}
.perf-ev > div {
  padding: 6px 0;
  border-top: 1px solid var(--sb-border);
  font-size: var(--sb-fs-caption);
}
.perf-ev__test   { color: var(--sb-fg-2); }
.perf-ev__result { font-family: var(--sb-font-mono); color: var(--sb-fg-1); text-align: right; white-space: nowrap; }
.perf-ev__read   { font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro); white-space: nowrap; }
.perf-ev__dot    { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.perf-cibars { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; }
.perf-cibar__label, .perf-meter__label {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro);
  text-transform: uppercase; letter-spacing: var(--sb-tracking-wide);
  color: var(--sb-fg-2); margin-bottom: 4px;
}
.perf-cibar__cap, .perf-meter__cap {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro);
  color: var(--sb-fg-3); margin-top: 3px; line-height: 1.4;
}
.perf-meter { margin-top: 16px; max-width: 380px; }
.perf-meter__track {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--sb-surface-3); border: 1px solid var(--sb-border);
}
.perf-meter__fill { height: 100%; }
.perf-cockpit__foot {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro);
  color: var(--sb-fg-3); margin-top: 14px; padding-top: 8px;
  border-top: 1px solid var(--sb-border);
}
@media (max-width: 540px) {
  /* Stack the evidence grid into label/value pairs so nothing truncates. */
  .perf-ev { grid-template-columns: 1fr max-content; }
  .perf-ev__read { grid-column: 1 / -1; padding-top: 0; border-top: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Build Parlay (SGP) ──
   Desktop: leg picker beside a sticky combo summary that follows the scroll.
   Mobile (≤768px): single column — the summary card is NOT rendered inline;
   instead a fixed bet-slip bar (above the bottom tab bar) expands into a
   bottom sheet (sportsbook pattern). Bar/sheet mount is JS-gated on the same
   768px breakpoint via matchMedia. */
@media (min-width: 769px) {
  .sgp-layout {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    align-items: start;
  }
  .sgp-summary > div {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}
@media (max-width: 768px) {
  /* Bet-slip bar — sits directly ABOVE the fixed bottom tab bar (52px +
     safe-area inset, z 60 in tokens.css). The whole bar is one button. */
  .sgp-slipbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    z-index: 70; /* above content + bottom tabs (60), below nav drawer (199) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 14px;
    background: var(--sb-surface-2);
    border: none;
    border-top: 1px solid var(--sb-border);
    border-bottom: 1px solid var(--sb-border);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
  }
  .sgp-slipbar:focus-visible { box-shadow: var(--sb-shadow-focus); outline: none; }

  /* Bottom-sheet bet slip — backdrop + bottom-anchored scrollable panel. */
  .sgp-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 210; /* covers content, bottom tabs and the slip bar */
  }
  .sgp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 211;
    max-height: 75vh;
    max-height: 75dvh; /* dvh where supported (mobile URL-bar safe) */
    overflow-y: auto;
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
  }
}