/* Oddy — Robinhood-inspired trading aesthetic.
   Dark-first, calm, spacious. Green = a gain (best price / money saved),
   red = a loss (overpaying / worst price). The two colors carry meaning; nothing
   else competes with them. Editorial serif for display, clean tabular sans for
   every number. */

:root {
  color-scheme: dark;
  --bg: #0b0d0e;
  --surface: #141719;
  --raised: #1b1f22;
  --hairline: #262b2f;
  --text: #f4f6f7;
  --muted: #8b9298;

  --up: #00c805;                        /* gain: best price, money saved, CTA */
  --up-ink: #35d94a;                    /* green text tuned for the dark bg */
  --up-soft: rgba(0, 200, 5, 0.13);
  --down: #ff5545;                      /* loss: overpaying, worst price */
  --down-ink: #ff6a5c;
  --down-soft: rgba(255, 85, 69, 0.12);

  /* LIVE badge: broadcast red, deliberately its own tokens so the live
     state never borrows loss-red's meaning. Outline chip, not a fill. */
  --live-ink: #ff5545;
  --live-bg: rgba(255, 85, 69, 0.14);
  --live-bd: rgba(255, 85, 69, 0.5);

  /* Sheet elevation: in dark mode a raised layer must be LIGHTER than the
     page (shadow and scrim barely read on near-black), so sheets get their
     own surface a step up, lighter internal lines, and a deeper scrim. */
  --sheet: #20262a;
  --sheet-hairline: #3a4147;
  --sheet-raised: #2a3136;
  --scrim: rgba(0, 0, 0, 0.62);

  --radius: 12px;
  --radius-lg: 16px;
  --pill: 9999px;
  --serif: "Fraunces", "Martina Plantijn", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --num: "SF Mono", ui-monospace, var(--sans);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #ffffff; --surface: #ffffff; --raised: #f6f7f8; --hairline: #e9ecee;
    --text: #0b0d0e; --muted: #6b7178;
    --up-ink: #058a00; --up-soft: rgba(0, 168, 4, 0.12);
    --down-ink: #d92d20; --down-soft: rgba(217, 45, 32, 0.10);
    --live-ink: #c92a1e; --live-bg: rgba(214, 45, 32, 0.08); --live-bd: rgba(214, 45, 32, 0.45);
    /* Light mode already separates via the scrim — sheets keep the normal
       surface and lines there. */
    --sheet: #ffffff; --sheet-hairline: #e9ecee; --sheet-raised: #f6f7f8;
    --scrim: rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--text); font-family: var(--sans); line-height: 1.35;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  max-width: 720px; margin: 0 auto; padding: 0 20px 72px;
}
button { font-family: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Header */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0 14px; position: sticky; top: 0; background: var(--bg); z-index: 20; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.logo { font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -0.01em; }
.logo::first-letter { color: var(--up); }
.tagline { color: var(--muted); font-size: 13px; }

/* Bottom-align so the toggle lines up with the input row, not with the
   taller label+input block (the label above the stake was floating the
   toggle high). */
.controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.toggle { margin-bottom: 3px; }
.stake { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.stake-input { display: flex; align-items: center; height: 38px; padding: 0 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.stake-input .dollar { color: var(--muted); font-size: 14px; }
#stake { background: transparent; border: none; color: var(--text); font: 600 16px var(--sans); font-variant-numeric: tabular-nums; width: 78px; padding: 0 4px; outline: none; }
#stake::-webkit-outer-spin-button, #stake::-webkit-inner-spin-button { -webkit-appearance: none; }

.toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--pill); padding: 3px; }
.toggle button { border: none; background: none; color: var(--muted); font: 600 13px var(--sans); padding: 6px 14px; border-radius: var(--pill); cursor: pointer; transition: color .2s, background .2s; }
.toggle button.on { background: var(--raised); color: var(--text); }

/* Sport bar */
.sportbar { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 6px 20px 16px; scrollbar-width: none; }
.sportbar::-webkit-scrollbar { display: none; }
.spill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); font: 600 14px var(--sans); padding: 8px 15px; border-radius: var(--pill); cursor: pointer; transition: color .2s, border-color .2s; }
.spill:hover { color: var(--text); }
.spill.on { color: var(--text); border-color: var(--text); }
.spill .em { font-size: 15px; }

/* Home hero */
.hero { margin: 14px 0 8px; }
.hero h1 { font-family: var(--sans); font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
.hero p { color: var(--muted); font-size: 15px; margin: 12px 0 0; max-width: 48ch; }
/* Landing hero: the pitch in two lines — the board below is the demo. */
.hero.compact { margin: 10px 0 4px; }
.hero.compact h1 { font-size: 27px; }
.hero.compact p { font-size: 13px; margin-top: 6px; max-width: 60ch; }
.home-live { display: flex; flex-direction: column; gap: 10px; }
.g-league { display: block; font: 600 11px var(--sans); color: var(--muted); margin-bottom: 2px; }
.section-title h2 .qual { font: 500 13px var(--sans); color: var(--muted); letter-spacing: 0; display: inline-block; }
.home-foot { margin: 30px 0 8px; text-align: center; font-size: 11.5px; color: var(--muted); }
.fcard .bc-foot strong { color: var(--text); }

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 34px 0 14px; }
.section-title h2 { font-family: var(--sans); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.section-title .sub { font-size: 12.5px; color: var(--muted); }

/* Change chips: the green/red heart of the system */
.chg { display: inline-flex; align-items: center; gap: 3px; font: 700 13px var(--sans); font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: var(--pill); }
.chg.up { color: var(--up-ink); background: var(--up-soft); }
.chg.down { color: var(--down-ink); background: var(--down-soft); }
.chg.flat { color: var(--muted); background: var(--raised); }
.chg .arrow { font-size: 10px; }

/* Cards */
.cards { display: flex; flex-direction: column; gap: 10px; }
.betcard { display: flex; flex-direction: column; gap: 12px; text-align: left; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); padding: 16px; cursor: pointer; font: inherit; transition: border-color .2s; }
.betcard:hover { border-color: var(--muted); }
.bc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-market { font-size: 12px; color: var(--muted); letter-spacing: .01em; }
.bc-team { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.bc-prices { display: flex; gap: 10px; }
.bc-foot { font-size: 13.5px; color: var(--muted); }
.bc-foot .save { color: var(--up-ink); font-weight: 600; }
.bc-foot .arrow { color: var(--muted); }

/* Odds quote (best = green, calm otherwise) */
.quote { flex: 1; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg); padding: 10px 12px; }
.quote .q-src { font-size: 11px; color: var(--muted); }
.quote .q-val { font: 700 17px var(--num); font-variant-numeric: tabular-nums; }
.quote .native { color: var(--muted); font-weight: 400; font-size: 12px; }
.quote.best { border-color: var(--up); background: var(--up-soft); }
.quote.best .q-val { color: var(--up-ink); }
.quote.worst { border-color: var(--down-soft); }
.quote.worst .q-val { color: var(--down-ink); }

/* Sport view */
.sport-head { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.back { border: none; background: none; color: var(--muted); font: 600 22px var(--sans); cursor: pointer; padding: 0 2px; line-height: 1; }
.back:hover { color: var(--text); }
.sport-title { font-family: var(--sans); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; }
.tab { border: none; background: none; color: var(--muted); font: 600 15px var(--sans); padding: 10px 0; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--text); border-bottom-color: var(--up); }

.section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 22px 2px 12px; font-size: 16px; font-weight: 600; }
.section-sub { font-size: 12px; font-weight: 400; color: var(--muted); }

/* Board rows */
.board { display: flex; flex-direction: column; }
.brow, .grow { border-top: 1px solid var(--hairline); }
.brow:first-child, .grow:first-child { border-top: none; }
.brow-head, .grow-head { width: 100%; display: grid; align-items: center; gap: 12px; text-align: left; padding: 15px 4px; border: none; background: none; cursor: pointer; font: inherit; }
.brow-head { grid-template-columns: 1.5fr auto auto; }
.grow-head { grid-template-columns: 1fr auto; }
.brow-head:hover, .grow-head:hover { opacity: .82; }
.b-team { font-size: 15px; font-weight: 600; }
.b-best { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.b-best .bv { font: 700 15px var(--num); font-variant-numeric: tabular-nums; }
.b-best .bv.win { color: var(--up-ink); }
.b-best .bs { font-size: 11px; color: var(--muted); }

.g-match { display: flex; flex-direction: column; gap: 3px; }
.g-teams { font-size: 15px; font-weight: 600; }
.g-time { font-size: 12px; color: var(--muted); }
.g-time.g-score { color: var(--text); font-variant-numeric: tabular-nums; }
.g-time.g-score.live { color: var(--text); font-weight: 600; }
.live-badge { display: inline-block; background: var(--live-bg); color: var(--live-ink);
  border: 1px solid var(--live-bd); font: 700 10px/1.3 var(--sans); letter-spacing: .06em;
  padding: 1.5px 6px; border-radius: 4px; vertical-align: 1px; }

/* 6-odds sportsbook card */
.gcard { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); padding: 15px; }
.gc-head { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: none; border: none; cursor: pointer; text-align: left; padding: 0 0 13px; }
.gc-head:hover { opacity: .85; }
.oddsgrid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 6px; align-items: stretch; }
/* reduced-market cards (fights: moneyline + rounds) drop missing columns */
.oddsgrid.c2 { grid-template-columns: 1.25fr 1fr; }
.oddsgrid.c3 { grid-template-columns: 1.25fr 1fr 1fr; }
.og-h { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; padding-bottom: 2px; }
.og-h:first-child { text-align: left; }
.og-team { display: flex; align-items: center; font-size: 13.5px; font-weight: 600; }
.og-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--hairline); border-radius: 11px; padding: 9px 4px; background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s; }
.og-cell:hover { border-color: var(--muted); }
.og-cell.empty { color: var(--muted); font-size: 13px; cursor: default; }
.og-cell.empty:hover { border-color: var(--hairline); }
.og-cell.good { border-color: var(--up); background: var(--up-soft); }
.og-cell.good .og-price { color: var(--up-ink); }
.og-cell.good .og-line { color: var(--up-ink); opacity: .8; }
.og-cell.open { border-color: var(--text); border-width: 2px; padding: 8px 3px; }
.og-line { font-size: 10.5px; color: var(--muted); }
.og-price { font: 700 14px var(--num); font-variant-numeric: tabular-nums; }

.g-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.arb { display: inline-flex; align-items: center; font: 700 12px var(--sans); color: var(--up-ink); background: var(--up-soft); border: 1px solid var(--up); border-radius: var(--pill); padding: 3px 9px; }

.cell-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.cell-detail-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
/* BETA live lines */
.live-beta { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
.live-beta .lb-tag { color: var(--up-ink); font-weight: 700; letter-spacing: .02em; }
.live-pulled { font-size: 12px; color: var(--muted); margin: -6px 0 10px; font-style: italic; }
.lage { font: 600 9.5px var(--sans); color: var(--muted); border: 1px solid var(--hairline);
  border-radius: var(--pill); padding: 1px 6px; vertical-align: 1px; }
.lrow.lstale { opacity: .55; }
.lstale-note { font: 500 11.5px var(--sans); color: var(--muted); padding: 8px 2px 2px; }
.stake-edit { background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--pill);
  padding: 2px 9px; cursor: pointer; font: 600 11px var(--sans); color: var(--text);
  vertical-align: 1px; }
.stake-edit:hover { border-color: var(--muted); }
.arb-note { margin-top: 10px; font-size: 12.5px; color: var(--up-ink); background: var(--up-soft); border-radius: var(--radius); padding: 9px 12px; }
.arb-note strong { color: var(--up-ink); }

.side-block { padding: 2px 0 14px; }
.side-name { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 8px; }

/* Price ladder — the P&L view: green best, red worst */
.ladder-wrap { margin: 0 0 14px; }
.ladder { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
a.lrow { text-decoration: none; color: inherit; cursor: pointer; }
a.lrow:hover { background: var(--raised); }
a.lrow.best:hover { filter: brightness(1.06); }

.bet-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 13px 16px; border-radius: var(--pill);
  background: var(--up); color: #04210a; font: 700 15px var(--sans);
  text-decoration: none; transition: filter .15s;
}
.bet-cta:hover { filter: brightness(1.06); }
.bet-cta .cta-arrow { font-weight: 400; }
@media (prefers-color-scheme: dark) { .bet-cta { color: #052b0d; } }
.lrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto 10px; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--hairline); }
.lrow:not(:has(.lchev)) { grid-template-columns: 1.3fr 1fr 1fr auto; }
.lchev { color: var(--muted); font: 400 15px var(--sans); line-height: 1; text-align: right; }
a.lrow:hover .lchev { color: var(--up-ink); }
.lrow:first-child { border-top: none; }
.lrow.best { background: var(--up-soft); }
.lrow.worst { background: var(--down-soft); }
.lsrc { font-size: 13.5px; font-weight: 600; }
.lsrc .tag { font: 700 9.5px var(--sans); letter-spacing: .05em; color: var(--up-ink); background: var(--up-soft); border-radius: var(--pill); padding: 2px 7px; margin-left: 7px; }
.lrow.kalshi .lsrc { color: var(--up-ink); }
.lval { font: 600 14px var(--num); font-variant-numeric: tabular-nums; }
.lval .native { color: var(--muted); font-weight: 400; font-size: 12px; }
.lpay { font: 400 13px var(--num); color: var(--muted); font-variant-numeric: tabular-nums; }
.ldiff { font: 600 13px var(--num); text-align: right; font-variant-numeric: tabular-nums; }
.ldiff.loss { color: var(--down-ink); }
.ldiff.zero { color: var(--muted); font-weight: 400; }

.empty { color: var(--muted); font-size: 14px; padding: 28px 4px; }

/* Footer */
.foot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 12.5px; }
.foot strong { color: var(--text); }
.gcard.started { opacity: .55; }
.gcard.started:hover { opacity: .8; }

/* ---- parlay slip: bottom bar + half sheet ---- */
body.has-parlay { padding-bottom: 84px; }
.pbar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  margin: 0 auto; max-width: 680px; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 15px 16px; cursor: pointer; font: 600 14px var(--sans); color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.pbar-count { background: var(--up); color: #04210a; border-radius: var(--pill); min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--sans); padding: 0 6px; }
.pbar-line { flex: 1; text-align: left; }
.pbar-line strong { color: var(--up-ink); }
.pbar-chev { color: var(--muted); }
/* touch-action none: a touch on the backdrop closes, it never scrolls the
   page behind. overscroll contain: a swipe past the end of the sheet's own
   scroll stops dead instead of chaining to the body. */
.sheet-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 39; touch-action: none; }
.psheet { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 41; margin: 0 auto; max-width: 680px;
  max-height: 70vh; overflow: auto; overscroll-behavior: contain;
  background: var(--sheet); border: 1px solid var(--sheet-hairline);
  border-radius: 16px; padding: 14px 16px 16px;
  /* Everything inside the sheet inherits the elevated palette: internal
     hairlines and hover fills lighten with the surface. */
  --hairline: var(--sheet-hairline); --raised: var(--sheet-raised); --surface: var(--sheet); }

/* While a sheet is open the body is PINNED (iOS Safari ignores a plain
   overflow:hidden for touch scrolling). JS stores the scroll offset in
   body.style.top and restores it on close. */
body.sheet-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.ps-grab { width: 36px; height: 4px; border-radius: var(--pill); background: var(--hairline); margin: 0 auto 10px; }
.ps-max { font: 700 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--pill); padding: 2px 8px; vertical-align: 3px; margin-left: 6px; }
.psheet { transition: transform .15s ease-out; touch-action: pan-y; }
.ps-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.ps-title { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; flex: 1; }
.ps-actions { display: flex; align-items: center; gap: 14px; }
.ps-clear { border: none; background: none; color: var(--muted); font: 600 12px var(--sans); cursor: pointer; }
.ps-clear:hover { color: var(--down-ink); }
.ps-share { border: 1px solid var(--hairline); background: none; color: var(--text); font: 600 12px var(--sans); cursor: pointer; border-radius: var(--pill); padding: 5px 12px; }
.ps-share:hover { border-color: var(--up-ink); color: var(--up-ink); }
.ps-share:disabled { color: var(--up-ink); border-color: var(--up-ink); cursor: default; }
.ps-note, .share-note { color: var(--muted); font: 500 12.5px var(--sans); padding: 10px 2px 0; }
.share-note { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.ps-leg { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.ps-leg.stale { opacity: .55; }
.ps-leg-label { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ps-leg-bet { font: 600 14px var(--sans); }
.ps-leg-game { font: 500 12px var(--sans); color: var(--muted); }
.ps-leg-game .live-badge { font-size: 9px; padding: 1px 5px; }
.ps-leg-price { font: 600 13px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.ps-x { border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.ps-x:hover { color: var(--down-ink); }
.ps-empty, .ps-fine { color: var(--muted); font: 500 12.5px var(--sans); padding: 10px 2px 0; }
.ps-missing { color: var(--muted); font: 500 12.5px var(--sans); padding: 6px 2px 0; }
.psheet .cell-detail-label { margin-top: 12px; }
.parlay-add { display: block; width: 100%; margin-top: 8px; border: 1px dashed var(--hairline); background: none;
  color: var(--text); font: 600 13px var(--sans); padding: 9px; border-radius: var(--radius); cursor: pointer; }
.parlay-add:hover { border-color: var(--up); color: var(--up-ink); }
.parlay-add.in { border: 1px solid var(--up); color: var(--up-ink); background: var(--up-soft); }
.parlay-note { margin-top: 8px; color: var(--muted); font: 500 12px var(--sans); }
.og-cell { position: relative; }
.og-add { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; display: flex;
  align-items: center; justify-content: center; border-radius: 50%; font: 700 13px var(--sans);
  color: var(--muted); background: var(--surface); border: 1px solid var(--hairline); cursor: pointer; }
.og-add:hover { color: var(--up-ink); border-color: var(--up); }
.og-add.in { background: var(--up); color: #04210a; border-color: var(--up); }
.og-add.off { opacity: .45; border-style: dashed; cursor: pointer; }
.og-add.off:hover { color: var(--muted); border-color: var(--hairline); }

.foot .meta { font-variant-numeric: tabular-nums; font-size: 12px; }
.foot .fine { font-size: 11px; opacity: .85; }

/* ---- Header option 1: everything on a single line, no tagline ---- */
body.hdr-one-line .top { flex-wrap: nowrap; align-items: center; gap: 10px; }
body.hdr-one-line .tagline { display: none; }
body.hdr-one-line .logo { font-size: 24px; }
body.hdr-one-line .controls { margin-left: auto; align-items: center; flex-wrap: nowrap; }
body.hdr-one-line .toggle { margin-bottom: 0; }
body.hdr-one-line .stake > span { display: none; }        /* label lives in the $ prefix */
body.hdr-one-line .stake-input { height: 36px; padding: 0 10px; }
body.hdr-one-line #stake { width: 52px; font-size: 15px; }
body.hdr-one-line .toggle button { padding: 6px 10px; font-size: 12.5px; }

@media (max-width: 600px) {
  .hero h1 { font-size: 36px; }
  .sport-title { font-size: 28px; }
  .top { position: static; }
  /* Edge-to-edge bottom sheet on phones — the native pattern, and it
     removes the backdrop gutters where stray touches scrolled the page. */
  /* body prefix: outranks the later-in-file .psheet.settings-sheet override */
  body .psheet, body .psheet.settings-sheet {
    left: 0; right: 0; bottom: 0; max-width: none;
    border-left: none; border-right: none; border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .lrow { grid-template-columns: 1fr 1fr 10px; grid-template-areas: "src val chev" "pay diff chev"; row-gap: 3px; }
  .lrow:not(:has(.lchev)) { grid-template-columns: 1fr 1fr; grid-template-areas: "src val" "pay diff"; }
  .lsrc { grid-area: src; } .lval { grid-area: val; text-align: right; } .lpay { grid-area: pay; } .ldiff { grid-area: diff; }
  .lchev { grid-area: chev; align-self: center; }
}

/* ---------- settings sheet + your books ---------- */

.prefs-btn { border: none; background: none; color: var(--muted); cursor: pointer; padding: 6px; display: inline-flex; align-items: center; }
.prefs-btn:hover { color: var(--text); }
.prefs-link { border: none; background: none; color: var(--text); font: 600 13px var(--sans); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

.psheet.settings-sheet { bottom: 12px; }
.set-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.set-title { flex: 1; font: 700 17px var(--sans); letter-spacing: -0.01em; }
.set-back, .set-x { border: none; background: none; color: var(--muted); cursor: pointer; font: 400 17px var(--sans); padding: 2px 6px; }
.set-back:hover, .set-x:hover { color: var(--text); }
.set-note { color: var(--muted); font: 400 12.5px var(--sans); line-height: 1.5; padding: 10px 2px; }
.set-row { width: 100%; display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; text-align: left; padding: 14px 2px; border-top: 1px solid var(--hairline); }
.set-row:first-of-type { border-top: none; }
.set-row:hover { background: var(--raised); }
.set-label { flex: 1; font: 500 14px var(--sans); color: var(--text); }
.set-label.dim { color: var(--muted); }
.set-val { font: 400 14px var(--sans); color: var(--muted); }
.set-check { color: var(--up-ink); font: 600 15px var(--sans); }

.lrow.mine { border-left: 3px solid var(--up); }
.mine-cta { display: block; text-align: center; margin-top: 8px; font: 500 12.5px var(--sans); color: var(--muted); text-decoration: none; }
.mine-cta:hover { color: var(--text); }
.mine-cta .loss, .my-gap .loss { color: var(--down-ink); font-weight: 600; }
.my-gap { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hairline); font: 500 12px var(--sans); color: var(--muted); }

/* ---------- state availability ---------- */

.staterow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0 10px; }
.staterow-note { color: var(--muted); font: 400 12.5px var(--sans); }
.statechip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--pill); padding: 6px 12px; cursor: pointer; }
.statechip .pin { font-size: 12px; }
.statechip select { border: none; background: none; color: var(--text); font: 600 13px var(--sans); cursor: pointer; outline: none; max-width: 160px; }

.lrow.na { opacity: 0.45; }
.lrow.na .ldiff { font-size: 12px; }
.lna-line { display: block; width: 100%; border: none; background: none; color: var(--muted); font: 500 12.5px var(--sans); text-align: left; padding: 8px 14px 2px; cursor: pointer; }
.lna-line:hover { color: var(--text); }