/* Betclub demo build — TQC design system.
   v0.3 applies the 58-finding polish audit: true glass-v2 (inset ring + top
   rim, no border), noise grain, scrim overlays, motion vocabulary (staggered
   rises, draws, count-ups, press states), 44px tap floors, 16px input floor,
   dvh, safe-areas, and TQC's reduced-motion neutralization. */

/* Brand type family, inherited from The Quantum Club. All SIL OFL, all self-hosted.
   Weight RANGES must match each file's real fvar axis: declaring a single weight
   on a variable font pins it to the fvar default, which is how Cormorant silently
   rendered Light on every surface that asked for 400 or 500. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-400-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fragment Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/fragment-mono-400-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";                      /* fvar: opsz 14-32, wght 100-900 */
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-300-700-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";                      /* fvar: wght 100-900 */
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-300-700-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";         /* fvar: wght 300-700, default 300 */
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/cormorant-garamond-300-700-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/cormorant-garamond-400-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Allura";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/allura-400-normal-latin.woff2") format("woff2");
}

:root {
  --bg: #0e0e10;
  --page: #090909;
  --surface: rgba(15, 15, 17, 0.13);
  --raised: #1e1e1e;
  --charcoal: #29292b;
  --line: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.1);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.5);
  --sand: #d1c4b0;
  --sand-dim: #b8a98f;
  --win: #52d5a4;
  --win-dot: #30c48d;
  --win-dim: rgba(48, 196, 141, 0.13);
  --loss: #f49097;
  --loss-dot: #f0616b;
  --loss-dim: rgba(240, 97, 107, 0.13);
  --boost: #e7b86a;
  --boost-dim: rgba(224, 163, 62, 0.12);
  --info: #89b9f4;
  --info-dim: rgba(91, 157, 239, 0.13);
  --scrim-ink: rgba(14, 14, 16, 0.98);
  --scrim-black: rgba(0, 0, 0, 0.85);
  --mono: "Fragment Mono", ui-monospace, monospace;
  --sans: "Inter", system-ui, sans-serif;
  --geist: "Geist", "Inter", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --editorial: "Cormorant Garamond", Georgia, serif;  /* long-form */
  --signature: "Allura", cursive;                     /* signature only, sparingly */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 52px -14px rgba(0, 0, 0, 0.72);
  --glass-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
  --glass-ring-hover: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  -webkit-font-smoothing: antialiased;
}
input, textarea, select { font-size: 16px; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; }
.skip-link { position: absolute; top: 10px; left: 10px; z-index: 60;
  transform: translateY(-300%); background: var(--sand); color: #0e0e10;
  border: 0; border-radius: 9999px; padding: 10px 16px;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.skip-link:focus-visible { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Mobile: the frame IS the viewport — .screen scrolls, chrome stays pinned.
   Without this, content growth makes the PAGE scroll and the tabbar/FABs
   ride away with it (the "not sticky" bug). */
@media (max-width: 899px) {
  body { height: 100vh; height: 100dvh; overflow: hidden; }
  .phone { height: 100vh; height: 100dvh; min-height: 0; }
}

/* ---- chrome ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid transparent;
  position: relative; z-index: 10;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  flex: 0 0 auto;
}
.topbar.scrolled {
  border-color: var(--line);
  background: rgba(9, 9, 9, 0.72);
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
}
/* THE WORDMARK — mark A, chosen 2026-08-14.
   BET 400 / CLUB 700 in Geist, monochrome, .30em tracking (this is the
   "44px and below" tier of the spec; .42em is display only). The domain is
   deliberately NOT in the primary lockup — it lives in the URL bar.
   text-indent cancels the trailing letter-space so the mark optically centres.
   Was: Instrument Serif, lowercase, -0.01em, with a sand `.gg`. */
.brand {
  font-family: var(--geist); font-size: 1.05rem;
  letter-spacing: 0.30em; text-indent: 0.30em; cursor: pointer;
  background: none; border: 0; color: var(--ink); padding: 0;
  position: relative; white-space: nowrap;
}
.brand .bet  { font-weight: 400; }
.brand .club { font-weight: 700; }

/* Welcome-screen mark. No CSS existed for it — it was styled inline in app.js.
   NOT inside the >=1100px block: the welcome screen renders at every width,
   and nesting it there left it unstyled on mobile. Size stays with the caller. */
.stage-brand {
  font-family: var(--geist); color: var(--ink);
  letter-spacing: 0.30em; text-indent: 0.30em; white-space: nowrap;
}
.stage-brand .bet  { font-weight: 400; color: var(--ink); }
.stage-brand .club { font-weight: 700; color: var(--ink); }
.brand::before { content: ""; position: absolute; inset: -8px -4px; }
@keyframes foil-sweep {
  0% { background-position: 250% 0; }
  100% { background-position: -150% 0; }
}
@media (hover: hover) {
  .brand::after {
    /* second copy of the brand string — must change with the markup above */
    content: "BETCLUB";
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);
    background-size: 250% 100%; background-position: 180% 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; opacity: 0;
  }
  .brand:hover::after, .brand:focus-visible::after {
    opacity: 1; animation: foil-sweep 1.1s ease-out;
  }
}
.avatar-btn {
  width: 32px; height: 32px; border-radius: 9999px;
  background: var(--raised); color: var(--sand);
  border: 1px solid var(--line);
  font-family: var(--geist); font-weight: 500; font-size: 0.75rem; cursor: pointer;
  position: relative;
  transition: transform 0.2s var(--ease);
}
.avatar-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 9999px; }
.avatar-btn:active { transform: scale(0.94); }

.screen {
  flex: 1 1 auto; overflow-y: auto;
  padding: 16px 16px calc(148px + env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  overscroll-behavior: contain;
}
.screen::-webkit-scrollbar { width: 4px; }
.screen::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 9999px; }

/* screen + card entrance choreography (TQC qc-menu-rise numbers) */
@keyframes screen-enter {
  from { opacity: 0.02; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.screen.entering > * { animation: screen-enter 0.42s var(--ease) both; }
.screen.entering > :nth-child(1) { animation-delay: 0.04s; }
.screen.entering > :nth-child(2) { animation-delay: 0.085s; }
.screen.entering > :nth-child(3) { animation-delay: 0.13s; }
.screen.entering > :nth-child(4) { animation-delay: 0.175s; }
.screen.entering > :nth-child(5) { animation-delay: 0.22s; }
.screen.entering > :nth-child(6) { animation-delay: 0.265s; }
.screen.entering > :nth-child(n+7) { animation-delay: 0.28s; }

/* Per-leg match selector. A cross-match acca is the common case on a real
   slip, so which match a leg belongs to has to be readable at a glance rather
   than inferred from the team names in the dropdown below it. */
.leg-fx {
  width: 100%; margin: 6px 0 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--sand-dim); font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.06em; padding: 7px 10px;
}
.leg-fx:focus { outline: 2px solid var(--sand-dim); outline-offset: 1px; }

.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  /* Every other piece of persistent chrome carries an explicit z-index —
     topbar 10, ptr 15, fb-fab 20, drawer 30, note 40, sheet 45, toast 50,
     skip-link 60. The tab bar was the one exception, sitting at `auto`, and it
     is emitted BEFORE #screen in the DOM. Positioned elements with z-index auto
     paint in document order, so every `position: relative` card inside #screen
     drew straight over it: the nav labels sat *under* the page text. It is
     translucent by design (rgba + backdrop blur), which made the result read as
     a rendering artefact rather than a stacking bug. 12 puts it above content
     and below the floating FAB and any overlay. */
  z-index: 12;
  display: flex;
  background: rgba(9, 9, 9, 0.88);
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
  border-top: 1px solid var(--line);
  padding: 7px 4px calc(9px + env(safe-area-inset-bottom));
}
.tabbar button {
  flex: 1; background: none; border: 0; color: var(--faint);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 0; min-height: 44px; cursor: pointer;
  transition: color 0.2s var(--ease);
}
.tabbar button .ti {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  transition: transform 0.2s var(--ease);
}
.tabbar button.active { color: var(--sand); }
.tabbar button.active .ti { transform: translateY(-1px); }
.tabbar button:active .ti { transform: scale(0.9); }

/* ---- shared bits ---- */
.h-screen {
  font-family: var(--serif); font-size: 1.8rem; font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.05; margin: 6px 2px 4px;
  text-wrap: balance;
}
.h-screen em { font-style: italic; }
.sub { color: var(--faint); font-size: 0.84rem; font-weight: 300;
  margin: 0 2px 14px; text-wrap: pretty; }
.section-label {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sand-dim); margin: 22px 2px 10px;
}
.card {
  position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
  border: none;
  border-radius: 1.5rem;
  box-shadow: var(--glass-ring);
  padding: 15px 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s var(--ease);
}
/* TQC glass v2 drops grain on translucent glass (cards melt into black);
   grain lives only on the near-opaque elevated overlays, at a whisper. */
.fb-drawer::before, .fb-note-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.35; mix-blend-mode: soft-light; border-radius: inherit;
  background-image: var(--noise); background-size: 240px 240px;
}
@media (hover: hover) { .card:hover { box-shadow: var(--glass-ring-hover); } }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row, .grow { min-width: 0; }
.grow { flex: 1; }
.num { font-family: var(--geist); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.avatar {
  width: 34px; height: 34px; border-radius: 9999px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--geist); font-weight: 500; font-size: 0.75rem; color: var(--ink);
  background: var(--raised); border: 1px solid var(--line);
}
.handle { font-weight: 500; font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbadge {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  color: var(--win); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em;
}
.vbadge::before { content: "✓"; font-size: 0.7rem; border: 1px solid var(--win);
  border-radius: 9999px; width: 12px; height: 12px; display: inline-flex;
  align-items: center; justify-content: center; }
.time { color: var(--faint); font-size: 0.72rem; font-weight: 300; }

.odds {
  font-family: var(--mono); font-size: 0.8rem; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 9999px; padding: 2px 10px;
  background: rgba(255, 255, 255, 0.04); color: var(--sand);
}
.pill {
  font-family: var(--mono); font-size: 0.64rem; border-radius: 9999px;
  padding: 4px 11px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.pill.ev { background: var(--win-dim); color: var(--win); }
.pill.won { background: var(--win-dim); color: var(--win); }
.pill.lost { background: var(--loss-dim); color: var(--loss); }
.pill.pending { background: var(--info-dim); color: var(--info);
  display: inline-flex; align-items: center; gap: 6px; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pill.pending::before { content: ""; width: 5px; height: 5px;
  border-radius: 9999px; background: var(--info);
  animation: pulse-dot 2.4s ease-in-out infinite; }
.pill.boost { background: var(--boost-dim); color: var(--boost); }
/* a finding we can see but can't yet prove — deliberately quieter than boost */
.pill.watch { background: rgba(255, 255, 255, 0.05); color: var(--faint); }

/* leak split: the two halves of a bettor, side by side */
.leak-split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.leak-split > div { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  border-radius: 1rem; padding: 9px 10px; display: flex; flex-direction: column; gap: 1px; }
.leak-split .k { font-family: var(--mono); font-size: 0.58rem; color: var(--faint);
  letter-spacing: 0.08em; text-transform: uppercase; }
.leak-split .v { font-family: var(--geist); font-size: 1.05rem; font-weight: 500; }

.btn {
  border-radius: 9999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04); color: var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: 0.78rem;
  padding: 8px 16px; cursor: pointer; position: relative;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn::after { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px);
  border-radius: 9999px; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) {
  .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, 0.08); }
  .btn-primary:hover { transform: scale(1.02); }
}
.btn-primary { background: var(--sand); border-color: var(--sand); color: #0e0e10; }
.btn-ghost { background: none; }
.btn-small { padding: 6px 13px; font-size: 0.73rem; }
.btn.active { background: rgba(209, 196, 176, 0.14); border-color: var(--sand); color: var(--sand); }
.tail-btn { min-width: 92px; }   /* "Tail this" ↔ "Tailed ✓" — same capsule */
.follow-btn { min-width: 64px; } /* "Follow" ↔ "✓" — narrower rows need the space */
.lb-row { gap: 8px; }
@keyframes btn-confirm {
  0% { transform: scale(1); } 35% { transform: scale(0.95); } 100% { transform: scale(1); }
}
.btn.confirming { animation: btn-confirm 0.35s var(--ease); }

.money-pos { color: var(--win); font-weight: 500; }
.money-neg { color: var(--loss); font-weight: 500; }

/* ---- feed ---- */
.slip-market { color: var(--muted); font-size: 0.8rem; font-weight: 300; margin-top: 2px; }
.slip-body { margin: 11px 0 8px; }
.slip-match { font-weight: 500; font-size: 0.95rem; }
.slip-line { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.slip-foot { display: flex; align-items: center; gap: 14px; color: var(--faint);
  font-size: 0.76rem; margin-top: 11px; }
.club-tag { color: var(--sand-dim); font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- edge ---- */
.why-wrap { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease); }
.card.open .why-wrap { grid-template-rows: 1fr; }
.why { display: block; overflow: hidden; min-height: 0; opacity: 0;
  margin-top: 0; border-top: 1px dashed transparent; padding-top: 0;
  color: var(--muted); font-size: 0.82rem; font-weight: 300;
  transition: opacity 0.28s var(--ease), margin-top 0.28s var(--ease),
    padding-top 0.28s var(--ease), border-color 0.28s var(--ease); }
.card.open .why { opacity: 1; margin-top: 11px; padding-top: 10px;
  border-top-color: var(--line); }
.why-toggle { color: var(--info); background: none; border: none; font-size: 0.78rem;
  font-family: var(--sans); font-weight: 500; cursor: pointer; padding: 0;
  min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.why-caret { display: inline-block; transition: transform 0.3s var(--ease); }
.card.open .why-caret { transform: rotate(180deg); }
.fairline { display: flex; gap: 14px; margin-top: 9px; font-size: 0.78rem; color: var(--muted); }
.ledger-note { text-align: center; color: var(--faint); font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.06em; margin: 18px 0 6px; }
.ledger-note a { color: var(--sand); text-decoration: none; }

/* ---- track ---- */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat {
  position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
  border: none; border-radius: 1.5rem;
  box-shadow: var(--glass-ring);
  padding: 13px 16px;
}
.stat .k { color: var(--sand-dim); font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.stat .v { font-family: var(--geist); font-size: 1.35rem; font-weight: 500;
  letter-spacing: -0.01em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat .d { color: var(--faint); font-size: 0.7rem; font-weight: 300; margin-top: 1px; }

.chart-wrap { position: relative; }
.chart-tip {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--scrim-black);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: none; box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-2);
  border-radius: 9999px; padding: 5px 12px; font-size: 0.72rem;
  white-space: nowrap; z-index: 3; transform: translate(-50%, -115%);
  transition: opacity 0.15s ease-out;
}
.chart-tip.visible { opacity: 1; }
.chart-tip .tv { font-family: var(--geist); font-weight: 500;
  font-variant-numeric: tabular-nums; }
#chartVline, #chartDot { transition: opacity 0.15s ease-out; }
.chart-months { display: flex; justify-content: space-between; margin-top: 2px;
  padding-left: calc(6 / 372 * 100%); padding-right: calc(42 / 372 * 100%); }

/* chart draw-in choreography */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes dot-pop { from { transform: scale(0); } to { transform: scale(1); } }
.entering .pnl-line { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 0.8s var(--ease) 0.2s forwards; }
.entering .pnl-area { opacity: 0; animation: fadein 0.4s ease-out 0.6s forwards; }
.entering .pnl-grid { opacity: 0; animation: fadein 0.4s ease-out 0.1s forwards; }
.entering .pnl-end { transform-box: fill-box; transform-origin: center;
  animation: dot-pop 0.3s var(--ease) 0.9s both; }

.bkdn { display: flex; flex-direction: column; gap: 10px; }
.bkdn-row { display: grid; grid-template-columns: 84px 1fr 64px; align-items: center; gap: 10px; }
.bkdn-name { font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.bkdn-bar { height: 5px; border-radius: 9999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bkdn-fill { height: 100%; border-radius: 9999px; background: var(--win-dot); }
.bkdn-fill.neg { background: var(--loss-dot); }
.bkdn-val { text-align: right; font-size: 0.8rem; white-space: nowrap; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.entering .bkdn-fill { transform-origin: left; animation: bar-grow 0.8s var(--ease) both; }
.entering .bkdn-row:nth-child(1) .bkdn-fill { animation-delay: 0.25s; }
.entering .bkdn-row:nth-child(2) .bkdn-fill { animation-delay: 0.31s; }
.entering .bkdn-row:nth-child(3) .bkdn-fill { animation-delay: 0.37s; }
.entering .bkdn-row:nth-child(4) .bkdn-fill { animation-delay: 0.43s; }

.leak { border-left: 2px solid var(--boost); border-radius: 0 1.5rem 1.5rem 0; }
.books-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.book-chip {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 9999px; padding: 6px 12px;
  font-size: 0.74rem; font-weight: 400; background: rgba(255, 255, 255, 0.04);
  transition: background 0.2s var(--ease);
}
.book-chip .ok { color: var(--win-dot); }
.book-chip .warn { color: var(--boost); }
.coverage { display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 52px; height: 52px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring .pct { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-family: var(--geist); font-size: 0.72rem; font-weight: 500; }
@keyframes ring-draw { from { stroke-dasharray: 0 138.2; } }
.entering .ring-fill { animation: ring-draw 0.8s var(--ease) 0.3s both; }
.rg { border-left: 2px solid var(--info); border-radius: 0 1.5rem 1.5rem 0; }
.rg .sub { margin-bottom: 0; }

/* ---- leaders ---- */
.seg { position: relative; display: flex;
  background: var(--surface);
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
  border: none; box-shadow: inset 0 0 0 1px var(--glass-border);
  border-radius: 9999px; padding: 4px; margin-bottom: 12px; }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / 3); border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translateX(calc(var(--seg-i, 0) * 100%));
  transition: transform 0.3s var(--ease); }
.seg button { position: relative; z-index: 1; flex: 1; background: none; border: 0;
  color: var(--faint);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 8px 0; min-height: 44px;
  border-radius: 9999px; cursor: pointer;
  transition: color 0.2s var(--ease); }
.seg button.active { color: var(--ink); }
.seg button[aria-disabled="true"] { opacity: 0.45; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s var(--ease); }
.lb-row:last-child { border-bottom: none; }
@media (hover: hover) { .lb-row:hover { background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem; } }
.lb-rank { width: 18px; text-align: center; color: var(--faint);
  font-family: var(--geist); font-weight: 500; font-size: 0.8rem; flex: 0 0 auto; }
.lb-row .avatar { width: 30px; height: 30px; }
.lb-rank.top { color: var(--sand); }
.lb-stat { text-align: right; flex: 0 0 auto; }
.lb-stat .p { font-family: var(--geist); font-weight: 500; font-size: 0.9rem;
  white-space: nowrap; }
.lb-stat .n { color: var(--faint); font-size: 0.68rem; white-space: nowrap; }
.lb-me { background: rgba(209, 196, 176, 0.08); border-radius: 1rem; }
.verified-note { display: flex; align-items: center; gap: 6px; color: var(--faint);
  font-size: 0.72rem; font-weight: 300; margin: 4px 2px 12px; }

/* ---- arena ---- */
.honesty { border-left: 2px solid var(--sand); border-radius: 0 1.5rem 1.5rem 0;
  color: var(--muted); font-size: 0.8rem; font-weight: 300; }
.creator-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 11px 0; }
.cstat { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  border-radius: 1rem; padding: 8px 6px; text-align: center; }
.cstat .k { font-family: var(--mono); font-size: 0.6rem; color: var(--faint);
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.cstat .v { font-family: var(--geist); font-size: 0.85rem; font-weight: 500; margin-top: 2px; }
.small-sample { border-left: 2px solid var(--boost); border-radius: 0 1.5rem 1.5rem 0; }
.price { font-family: var(--geist); font-weight: 500; white-space: nowrap;
  text-align: right; line-height: 1.2; }
.price small { color: var(--faint); font-weight: 400; }
.price-alt { display: block; font-style: normal; font-size: 0.68rem;
  color: var(--faint); font-weight: 400; margin-top: 1px; }

/* ---- fixtures strip ---- */
.fx-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.fx-strip::-webkit-scrollbar { display: none; }
.fx-card {
  flex: 0 0 148px; scroll-snap-align: start; position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
  border: none; border-radius: 1.25rem;
  box-shadow: var(--glass-ring);
  padding: 12px 13px;
}
.fx-badges { display: flex; align-items: center; flex: 0 0 auto; }
.fx-badges .tbadge + .tbadge { margin-left: -6px; }
.fx-teams { font-size: 0.78rem; font-weight: 500; line-height: 1.35;
  margin-top: 8px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.fx-meta { color: var(--faint); font-size: 0.66rem; margin-top: 5px;
  white-space: nowrap; }

/* ---- fixture day chips (Feed) ---- */
.fx-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 2px 10px;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.fx-chips::-webkit-scrollbar { display: none; }
.fx-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 12px; border-radius: 9999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--muted); font-family: var(--geist); font-size: 0.76rem;
  font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease); }
.fx-chip.on { background: var(--sand); border-color: var(--sand); color: #0e0e10; }
.fx-chip-n { font-size: 0.68rem; opacity: 0.72; }
.fx-chip-all { color: var(--sand); border-style: dashed; }
.fx-chip.on .fx-chip-n { opacity: 0.62; }
@media (hover: hover) {
  .fx-chip:hover { background: rgba(255, 255, 255, 0.09); color: var(--ink); }
  .fx-chip.on:hover { background: var(--sand); color: #0e0e10; }
}

/* ---- guest lock (Track) ---- */
.lock-cta { border: 1px solid var(--sand-dim); }
.locked { position: relative; filter: blur(7px) saturate(0.6); opacity: 0.5;
  pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .locked { filter: blur(5px); } }

/* ---- all-fixtures screen: vertical list, sticky day headers ---- */
.fx-dayhead { position: sticky; top: 0; z-index: 2; display: flex;
  align-items: center; gap: 8px; padding: 10px 2px 8px;
  background: var(--page); font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-dim); }
.fx-dayhead-n { color: var(--faint); letter-spacing: 0.08em; }
.fx-daycard { padding: 2px 14px; }
.fx-row { display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-top: 1px solid var(--line); cursor: pointer; }
.fx-daycard .fx-row:first-child { border-top: none; }
.fx-row-teams { font-size: 0.85rem; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fx-row .fx-odds { margin-top: 0; flex: 0 0 auto; }
@media (hover: hover) { .fx-row:hover .fx-row-teams { color: var(--sand); } }

/* ---- match detail ---- */
.match-hero { text-align: center; padding: 8px 8px 4px; margin-bottom: 12px; }
.match-hero .fx-badges { justify-content: center; }
.match-hero .fx-badges .tbadge + .tbadge { margin-left: -8px; }
.match-hero .h-screen { text-align: center; font-size: 1.45rem; }
.match-hero .vs { color: var(--faint); font-size: 1rem; font-style: italic; }
.match-hero .club-meta { margin-top: 4px; }
.fx-card { cursor: pointer; transition: box-shadow 0.2s var(--ease); }
@media (hover: hover) { .fx-card:hover { box-shadow: var(--glass-ring-hover); } }
.odds-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 6px 8px; align-items: center; margin-top: 6px; }
.odds-grid .oh { font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; color: var(--sand-dim); text-align: center;
  text-transform: uppercase; padding: 4px 0; }
.odds-grid .ob { font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.odds-grid .oc { font-family: var(--mono); font-size: 0.8rem; text-align: center;
  border: 1px solid var(--line); border-radius: 9999px; padding: 6px 0;
  background: rgba(255, 255, 255, 0.03); }
.odds-grid .oc.best { color: var(--win); border-color: rgba(48, 196, 141, 0.4);
  background: var(--win-dim); }

/* ---- clubs & crests ---- */
.crest { flex: 0 0 auto; display: block; }
.club-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--sand-dim); font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
@media (hover: hover) { .club-tag:hover { color: var(--sand); } }
.club-card { cursor: pointer; }
.club-card .chev { color: var(--faint); font-size: 1.1rem;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
@media (hover: hover) {
  .club-card:hover .chev { transform: translateX(2px); color: var(--muted); }
}
.backlink {
  background: none; border: 0; color: var(--faint); cursor: pointer;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0 2px; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: color 0.2s var(--ease);
}
@media (hover: hover) { .backlink:hover { color: var(--sand); } }
.club-hero { text-align: center; padding: 8px 8px 4px; }
.club-hero .crest { margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); }
.club-hero .h-screen { text-align: center; }
.club-hero .sub { text-align: center; margin-left: auto; margin-right: auto; max-width: 34ch; }
.club-meta { display: flex; justify-content: center; gap: 8px;
  color: var(--faint); font-size: 0.74rem; flex-wrap: wrap; }

.match-teams { display: inline-flex; align-items: center; margin-right: 7px;
  vertical-align: -2px; }
.match-teams .tbadge + .tbadge { margin-left: -4px; }
.tbadge { position: relative; display: inline-block; border-radius: 9999px;
  flex: 0 0 auto; }
.tbadge svg { display: block; }
.tbadge img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #14141a; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14); padding: 1px; }
.club-badge { position: relative; display: inline-block; flex: 0 0 auto; }
.club-badge .crest { visibility: hidden; }  /* keeps layout; img covers it */
.club-badge.badge-failed .crest { visibility: visible; }
.club-badge img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; }
.club-hero .club-badge { margin: 0 auto; display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); }
.ugc-note { color: var(--faint); font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 2px 0 8px; }
.ugc-note span { color: var(--sand-dim); cursor: pointer; }
.badge-upload {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 1px dashed var(--line); border-radius: 9999px;
  color: var(--faint); font-family: var(--sans); font-size: 0.72rem;
  font-weight: 400; padding: 9px 14px; cursor: pointer; min-height: 44px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) { .badge-upload:hover { color: var(--sand);
  border-color: rgba(209, 196, 176, 0.4); } }

/* ---- profile ---- */
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-chip { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  border-radius: 9999px; padding: 6px 13px; font-size: 0.74rem; font-weight: 400; }
.settings-list { display: flex; flex-direction: column; }
.settings-list button { display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink);
  padding: 14px 2px; font-family: var(--sans); font-size: 0.88rem; font-weight: 400;
  cursor: pointer; min-height: 44px;
  transition: background-color 0.2s var(--ease); }
.settings-list button:last-child { border-bottom: none; }
.settings-list button:active { background: rgba(255, 255, 255, 0.04); }
.settings-list .chev { color: var(--faint);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
@media (hover: hover) {
  .settings-list button:hover { background: rgba(255, 255, 255, 0.03); }
  .settings-list button:hover .chev { transform: translateX(2px); color: var(--muted); }
}

/* ---- feedback framework ---- */
.fb-fab {
  position: absolute; right: 16px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 20;
  width: 46px; height: 46px; border-radius: 9999px;
  background: var(--charcoal); border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-1);
  font-size: 1.05rem; cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.fb-fab:active { transform: scale(0.94); }
body.fb-mode .fb-fab { background: var(--sand);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--shadow-1); }

body.fb-mode [data-fb] { position: relative;
  outline: 1px dashed rgba(209, 196, 176, 0.55); outline-offset: 3px; cursor: pointer; }
body.fb-mode [data-fb]::after {
  content: attr(data-fb-mark);
  position: absolute; top: -9px; right: 8px; z-index: 5;
  background: var(--charcoal); box-shadow: inset 0 0 0 1px var(--glass-border);
  border-radius: 9999px; font-size: 0.66rem; padding: 2px 9px;
}
body.fb-mode [data-fb].fb-up { outline-color: var(--win-dot); }
body.fb-mode [data-fb].fb-down { outline-color: var(--loss-dot); }

@keyframes rise-in {
  from { opacity: 0.02; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in {
  from { opacity: 0.02; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: none; }
}

.fb-drawer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--scrim-ink);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-2);
  border-radius: 1.6rem 1.6rem 0 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 70%; display: flex; flex-direction: column; gap: 10px;
  animation: rise-in 0.4s var(--ease) both;
}
.fb-drawer-head { display: flex; justify-content: space-between; align-items: center; }
.fb-drawer-head strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.fb-drawer-head button { background: none; border: 0; color: var(--faint);
  font-size: 1rem; cursor: pointer; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; }
.fb-list { overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
  font-size: 0.8rem; font-weight: 300;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.fb-list::-webkit-scrollbar { width: 4px; }
.fb-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 9999px; }
.fb-item { display: flex; gap: 8px; align-items: baseline; }
.fb-item .where { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; }
.fb-item .note { color: var(--muted); font-style: italic; }
.fb-drawer textarea, .fb-note textarea {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  border-radius: 1rem; color: var(--ink); font-family: var(--sans);
  font-weight: 300; font-size: 16px; padding: 9px 13px; resize: none; width: 100%;
}
.fb-actions { display: flex; gap: 8px; }

.fb-note { position: absolute; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: overlay-in 0.2s ease-out both; }
.fb-note-card { position: relative; background: var(--raised); border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-2);
  border-radius: 1.5rem; padding: 16px;
  width: 100%; display: flex; flex-direction: column; gap: 10px;
  animation: card-in 0.4s var(--ease) both; }
.fb-note-title { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }

.fb-popover {
  position: absolute; z-index: 35; display: flex; gap: 4px;
  background: var(--scrim-black);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: none; box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-2);
  border-radius: 9999px; padding: 4px;
  animation: pop-in 0.18s var(--ease) both; transform-origin: bottom left;
}
.fb-popover button { background: none; border: 0; font-size: 1rem; cursor: pointer;
  width: 44px; height: 44px; border-radius: 9999px;
  transition: background 0.15s var(--ease); }
@media (hover: hover) {
  .fb-popover button:hover { background: rgba(255, 255, 255, 0.07); }
}

.toast {
  position: absolute; bottom: calc(144px + env(safe-area-inset-bottom));
  left: 50%; transform: translate(-50%, 0);
  background: var(--scrim-black);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: none; box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-2);
  border-radius: 1.25rem; padding: 9px 18px; font-size: 0.78rem; font-weight: 400;
  z-index: 50; white-space: normal; width: max-content;
  max-width: min(340px, calc(100% - 32px)); text-align: center;
  animation: toast-in 0.4s var(--ease) both;
}
@keyframes toast-in {
  from { opacity: 0.02; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.toast.leaving { opacity: 0; transform: translate(-50%, 4px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out; }

@media (prefers-reduced-motion: no-preference) {
  .screen { scroll-behavior: smooth; }
}
:focus-visible { outline: none;
  box-shadow: 0 0 0 2px #0e0e10, 0 0 0 4px rgba(209, 196, 176, 0.6); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ---- honesty chips (audit v0.6: label every fabricated surface) ---- */
.sim-chip {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--boost);
  border: 1px solid rgba(224, 163, 62, 0.35); border-radius: 9999px;
  padding: 1px 8px; white-space: nowrap; vertical-align: 1px;
}
.demo-pill {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--boost); border: 1px solid rgba(224, 163, 62, 0.35);
  border-radius: 9999px; padding: 3px 9px; white-space: nowrap;
}
/* same two-tone as the wordmark: the mark reads as brand, not as build noise.
   Kept out of the amber so the pill still reads as the caution chip it is. */
.demo-pill .gg { color: var(--sand); }
@media (max-width: 359px) {
  .demo-pill { font-size: 0.55rem; letter-spacing: 0.08em; padding: 3px 7px; }
}

/* ---- generic bottom sheet (v0.7) ---- */
.sheet-overlay { position: absolute; inset: 0; z-index: 45;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  display: flex; align-items: flex-end;
  animation: overlay-in 0.2s ease-out both; }
.sheet-card { position: relative; width: 100%;
  background: var(--scrim-ink);
  box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-2);
  border-radius: 1.6rem 1.6rem 0 0;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 78%; overflow-y: auto;
  animation: rise-in 0.4s var(--ease) both; }
.sheet-title { font-family: var(--serif); font-weight: 400; font-size: 1.2rem;
  margin: 0 0 4px; }
.sheet-sub { color: var(--faint); font-size: 0.8rem; font-weight: 300;
  margin: 0 0 14px; }
.sheet-field { margin-bottom: 12px; }
.sheet-field label { display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-dim);
  margin-bottom: 6px; }
.sheet-field input, .sheet-field select, .sheet-field textarea {
  width: 100%; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); border-radius: 1rem; color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 16px;
  padding: 11px 14px; }
.sheet-row { display: flex; gap: 8px; margin-top: 6px; }
.provenance { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: 9999px; padding: 2px 8px;
  white-space: nowrap; }
.provenance.synced { background: var(--win-dim); color: var(--win); }
.provenance.manual { background: var(--boost-dim); color: var(--boost); }
.compose-fab {
  position: absolute; right: 16px;
  bottom: calc(138px + env(safe-area-inset-bottom));
  z-index: 20; width: 46px; height: 46px; border-radius: 9999px;
  background: var(--sand); border: none; color: #0e0e10;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease); }
.compose-fab:active { transform: scale(0.94); }
.bet-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.bet-row:last-child { border-bottom: none; }
.bet-row .bs { flex: 0 0 auto; width: 20px; text-align: center;
  font-family: var(--mono); font-size: 0.7rem; }
.icon-btn { width: 32px; height: 32px; border-radius: 9999px; background: none;
  border: 1px solid var(--line); color: var(--faint); cursor: pointer;
  display: grid; place-items: center; position: relative;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.icon-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 9999px; }
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) { .icon-btn:hover { color: var(--sand); } }
.handle-link { background: none; border: 0; padding: 0; color: inherit;
  font: inherit; font-weight: 500; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; min-height: 24px; }
.handle-link::after { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px; }
@media (hover: hover) { .handle-link:hover { color: var(--sand); } }

/* ---- v0.7 craft ---- */
.tbadge-init { display: inline-flex; align-items: center; justify-content: center;
  background: var(--raised); border: 1px solid var(--line);
  color: var(--faint); font-family: var(--geist); font-weight: 500; }
.fx-day { flex: 0 0 auto; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sand-dim);
  display: flex; align-items: center; padding: 6px 0; }
.club-tag { min-height: 32px; padding: 4px 6px 4px 0; position: relative; }
.club-tag::after { content: ""; position: absolute; inset: -6px 0; }
.live-edge { box-shadow: inset 0 0 0 1px rgba(48, 196, 141, 0.28),
  inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4); }
@media (hover: hover) {
  .live-edge:hover { box-shadow: inset 0 0 0 1px rgba(48, 196, 141, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4); }
}
.tabbar .tab-core.active .ti { color: var(--sand);
  filter: drop-shadow(0 0 6px rgba(209, 196, 176, 0.5)); }
.ptr { position: absolute; top: 64px; left: 50%; transform: translate(-50%, -10px);
  z-index: 15; opacity: 0; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sand-dim);
  background: var(--charcoal); border-radius: 9999px; padding: 5px 12px;
  box-shadow: inset 0 0 0 1px var(--glass-border); pointer-events: none; }
.ptr.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- slip scanner ---- */
.scan-drop { display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1.5px dashed rgba(209, 196, 176, 0.4); border-radius: 1.25rem;
  padding: 28px 16px; margin-bottom: 14px; cursor: pointer;
  color: var(--sand-dim); font-size: 0.84rem;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
@media (hover: hover) {
  .scan-drop:hover { border-color: var(--sand); color: var(--sand); }
}
.provenance.scanned { background: var(--info-dim); color: var(--info); }

/* ---- results & settlement ---- */
.fx-result { border-left: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 0 1.25rem 1.25rem 0; cursor: default; }
@media (hover: hover) { .fx-result:hover { box-shadow: var(--glass-ring); } }
.fx-score { font-family: var(--geist); font-size: 1.15rem; font-weight: 500;
  margin-top: 6px; }
.ft-score { font-family: var(--geist); font-size: 2rem; font-weight: 500;
  margin: 6px 0 2px; }
.ft-score .ft-tag { font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; color: var(--faint); margin-left: 8px;
  vertical-align: 6px; }

/* ---- pick of the day: the ONE promoted surface ---- */
.potd { box-shadow: inset 0 0 0 1.5px rgba(209, 196, 176, 0.45),
  inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4); }
@media (hover: hover) { .potd:hover { box-shadow:
  inset 0 0 0 1.5px rgba(209, 196, 176, 0.7),
  inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4); } }
.potd-star { color: var(--sand); margin-right: 4px; }
.potd-compact { width: 100%; text-align: left; cursor: pointer;
  font-family: var(--sans); color: var(--ink); }

/* ============================================================
   RESPONSIVE SYSTEM v1.1 — mobile (<768) untouched above.
   Tablet 768-1099: full-bleed app, wider reading column.
   Desktop ≥1100: sidebar nav + main column.
   Wide ≥1360: + contextual right rail.
   ============================================================ */

@media (min-width: 768px) {
  body { display: block; height: 100vh; height: 100dvh; overflow: hidden; }
  .stage-note { display: none; }
  .phone {
    max-width: none; width: 100%; margin: 0;
    height: 100vh; height: 100dvh; max-height: none;
    border: none; border-radius: 0; box-shadow: none;
  }
  /* reading column: cards cap at 720 and center */
  .screen, .topbar {
    padding-left: max(24px, env(safe-area-inset-left), calc((100% - 720px) / 2));
    padding-right: max(24px, env(safe-area-inset-right), calc((100% - 720px) / 2)); }
  /* tablet: stat tiles go 4-up, chart breathes */
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* sheets become centered modals, not bottom drawers */
  .sheet-overlay { display: flex; align-items: center; justify-content: center; }
  .sheet-card { max-width: 460px; width: 100%; border-radius: 1.5rem;
    margin: 0 24px; }
  /* drawer centers by margin, not transform — rise-in's fill-mode ends at
     transform:none and would permanently cancel a translateX(-50%) */
  .fb-drawer { left: 0; right: 0; margin-inline: auto;
    width: min(520px, calc(100% - 48px)); max-width: 520px;
    border-radius: 1.6rem 1.6rem 0 0; }
  .fb-note-card { max-width: 460px; }
  /* fabs track the 720 reading column's right edge, inset like on mobile */
  .fb-fab, .compose-fab { right: calc(max(0px, (100% - 720px) / 2,
    env(safe-area-inset-right)) + 16px); }
  /* the phone tabbar doesn't stretch across a tablet — cap and center */
  /* Per-leg match selector. A cross-match acca is the common case on a real
   slip, so which match a leg belongs to has to be readable at a glance rather
   than inferred from the team names in the dropdown below it. */
.leg-fx {
  width: 100%; margin: 6px 0 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--sand-dim); font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.06em; padding: 7px 10px;
}
.leg-fx:focus { outline: 2px solid var(--sand-dim); outline-offset: 1px; }

.tabbar { justify-content: center; gap: 6px; }
  .tabbar button { flex: 0 1 108px; }
  .potd .row .btn.grow { flex: 0 1 200px; }
  .fx-card { flex-basis: 168px; }
}

/* landscape phones / narrow splits (431-767): full-bleed, capped column */
@media (min-width: 431px) and (max-width: 767px) {
  .phone { max-width: none; }
  .screen, .topbar {
    padding-left: max(16px, env(safe-area-inset-left), calc((100% - 560px) / 2));
    padding-right: max(16px, env(safe-area-inset-right), calc((100% - 560px) / 2)); }
  /* Per-leg match selector. A cross-match acca is the common case on a real
   slip, so which match a leg belongs to has to be readable at a glance rather
   than inferred from the team names in the dropdown below it. */
.leg-fx {
  width: 100%; margin: 6px 0 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--sand-dim); font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.06em; padding: 7px 10px;
}
.leg-fx:focus { outline: 2px solid var(--sand-dim); outline-offset: 1px; }

.tabbar { justify-content: center; }
  .tabbar button { flex: 0 1 108px; }
  .fb-note-card { max-width: 460px; }
  .sheet-card { max-width: 460px; margin-inline: auto;
    border-radius: 1.5rem 1.5rem 0 0; }
  .fb-drawer { margin-inline: auto; width: min(520px, calc(100% - 48px)); }
  .fb-fab, .compose-fab { right: calc(max(0px, (100% - 560px) / 2,
    env(safe-area-inset-right)) + 16px); }
}

/* mouse users get a scroll affordance on the horizontal strips */
@media (min-width: 768px) and (pointer: fine) {
  .fx-strip { scroll-snap-type: x proximity; scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
  .fx-strip::-webkit-scrollbar { display: block; height: 4px; }
  .fx-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16);
    border-radius: 9999px; }
}

/* tablet landscape (900-1099): use the width — two-up where it reads well */
@media (min-width: 900px) and (max-width: 1099px) {
  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; align-items: start; }
  .duo > .card { margin-bottom: 12px; }
  .duo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px; }
}

@media (min-width: 1100px) {
  .phone {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .topbar { grid-column: 2; grid-row: 1; }
  .screen { grid-column: 2; grid-row: 2;
    padding-left: max(32px, calc((100% - 680px) / 2));
    padding-right: max(32px, calc((100% - 680px) / 2)); }
  .topbar { padding-left: 32px; padding-right: 32px; }
  /* the tabbar becomes the sidebar */
  /* Per-leg match selector. A cross-match acca is the common case on a real
   slip, so which match a leg belongs to has to be readable at a glance rather
   than inferred from the team names in the dropdown below it. */
.leg-fx {
  width: 100%; margin: 6px 0 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--sand-dim); font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.06em; padding: 7px 10px;
}
.leg-fx:focus { outline: 2px solid var(--sand-dim); outline-offset: 1px; }

.tabbar {
    position: static; grid-column: 1; grid-row: 1 / -1;
    flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 18px 12px;
    border-top: none; border-right: 1px solid var(--line);
    background: rgba(9, 9, 9, 0.6);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Desktop rail wordmark — mark A, same system as .brand in the topbar.
     This is the ONLY wordmark visible above 1100px, since .topbar .brand is
     hidden at that width. The retired rule set var(--serif), -0.01em and a
     `span { color: var(--sand) }` that tinted CLUB sand. The span rule is gone
     rather than overridden: it was span-level, so a colour on the button alone
     would have lost on specificity. */
  .tabbar .side-brand {
    font-family: var(--geist); font-size: 1.4rem; color: var(--ink);
    padding: 6px 12px 22px; letter-spacing: 0.30em; text-indent: 0.30em;
    text-align: left; text-transform: none; min-height: 0; white-space: nowrap;
  }
  .tabbar .side-brand .bet  { font-weight: 400; color: var(--ink); }
  .tabbar .side-brand .club { font-weight: 700; color: var(--ink); }
  .tabbar button {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 11px 12px; border-radius: 12px;
    font-size: 0.72rem; letter-spacing: 0.1em; width: 100%;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
  }
  @media (hover: hover) {
    .tabbar button:hover { background: rgba(255, 255, 255, 0.05); }
  }
  .tabbar button.active { background: rgba(209, 196, 176, 0.1); }
  .tabbar button.active .ti { transform: none; }
  /* fabs, toast and PTR anchor to the reading column, not the viewport */
  .compose-fab { right: calc((100% - 232px - 680px) / 2 + 20px); bottom: 32px; }
  .fb-fab { right: calc((100% - 232px - 680px) / 2 + 20px); bottom: 92px; }
  .toast { bottom: 40px; left: calc(232px + (100% - 232px) / 2); }
  .ptr { left: calc(232px + (100% - 232px) / 2); }
  .screen { padding-bottom: 148px; } /* scrolled-to-end content clears the fab stack */
  .fb-drawer { left: 232px; }
  .sheet-overlay { padding-left: 232px; }
  /* the sidebar owns the brand on desktop — drop the topbar duplicate */
  .topbar .brand { display: none; }
  .topbar .row { margin-left: auto; }
}

@media (min-width: 1360px) {
  .phone { grid-template-columns: 232px minmax(0, 1fr) 320px; }
  .rail {
    grid-column: 3; grid-row: 1 / -1; display: block;
    border-left: 1px solid var(--line); padding: 20px 18px;
    overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  }
  .rail::-webkit-scrollbar { width: 4px; }
  .rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16);
    border-radius: 9999px; }
  .rail .fx-strip { flex-direction: column; }
  .rail .fx-card { flex-basis: auto; }
  .compose-fab, .fb-fab {
    right: calc(320px + (100% - 232px - 320px - 680px) / 2 + 20px); }
  .toast, .ptr { left: calc(232px + (100% - 232px - 320px) / 2); }
  .fb-drawer { right: 320px; }
  .sheet-overlay { padding-right: 320px; }
}
.rail { display: none; }
@media (min-width: 1360px) { #phone .rail { display: block; } }
.tabbar .side-brand { display: none; }
@media (min-width: 1100px) { .tabbar .side-brand { display: block; } }

/* ≥1360: the rail owns fixtures/results/POTD — don't duplicate them in the feed */
@media (min-width: 1360px) {
  #screen [data-fb="feed-fixtures"], #screen [data-fb="feed-results"],
  #screen [data-fb="feed-potd"] { display: none; }
}

/* ---- mini odds on fixture cards ---- */
.fx-odds { display: flex; gap: 4px; margin-top: 7px; }
.oc-mini {
  font-family: var(--mono); font-size: 0.66rem; flex: 1; text-align: center;
  border: 1px solid var(--line); border-radius: 7px; padding: 3px 0;
  background: rgba(255, 255, 255, 0.03); color: var(--sand);
  white-space: nowrap;
}

/* ---- onboarding focus mode: no sidebar track, no rail, no escape hatches ---- */
#phone.no-nav { grid-template-columns: minmax(0, 1fr); }
#phone.no-nav .topbar, #phone.no-nav .screen { grid-column: 1; }
#phone.no-nav .rail { display: none; }
#phone.no-nav .topbar .icon-btn, #phone.no-nav .topbar .avatar-btn { display: none; }
#phone.no-nav .brand { pointer-events: none; }
@media (min-width: 1100px) { #phone.no-nav .topbar .brand { display: block; } }
@media (min-width: 768px) {
  #phone.no-nav .club-hero { max-width: 430px; margin-inline: auto; }
}

/* feed carries the compose fab on top of the fb fab — clear the taller stack */
#phone[data-screen="feed"] .screen {
  padding-bottom: calc(200px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  #phone[data-screen="feed"] .screen { padding-bottom: 148px; }
}

/* on-screen keyboard: keep open dialogs inside the visual viewport */
.sheet-overlay.kbd { align-items: flex-start; padding-top: 10px; }
.sheet-overlay.kbd .sheet-card { max-height: calc(var(--vvh, 100dvh) - 20px); }
.fb-note.kbd { align-items: flex-start; padding-top: 10px; }
.fb-note.kbd .fb-note-card { max-height: calc(var(--vvh, 100dvh) - 20px);
  overflow-y: auto; }

/* ---- print: unlock the frame, drop chrome, dark-on-white ---- */
@media print {
  :root { --ink: #111; --muted: #333; --faint: #666; --sand: #6b5d49;
    --sand-dim: #6b5d49; --page: #fff; --bg: #fff; --surface: #fff;
    --raised: #fff; --charcoal: #fff;
    --win: #0e7a52; --win-dot: #0e7a52; --loss: #b3242f; --loss-dot: #b3242f;
    --info: #1d4f91; --boost: #7a5b1e; }
  .screen { padding-bottom: 16px !important; }
  body { background: #fff !important; color: #111 !important;
    height: auto !important; overflow: visible !important; display: block; }
  .phone, .screen { height: auto !important; max-height: none !important;
    overflow: visible !important; display: block !important; }
  .phone { max-width: none; }
  .tabbar, .fb-fab, .compose-fab, .rail, .toast, .ptr, .fb-drawer, .fb-note,
  .sheet-overlay, .skip-link, .icon-btn, .avatar-btn, .demo-pill { display: none !important; }
  .card, .stat { box-shadow: none !important; border: 1px solid #ccc !important;
    background: #fff !important; }
}

/* feed's taller fab stack: lift the toast clear of the compose fab */
#phone[data-screen="feed"] .toast {
  bottom: calc(200px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  #phone[data-screen="feed"] .toast { bottom: 40px; }
}

/* welcome focus mode removes the sidebar/rail — recenter toast + ptr */
#phone.no-nav .toast, #phone.no-nav .ptr { left: 50%; }

/* on the Edge screen the full POTD card is present — drop the rail teaser */
@media (min-width: 1360px) {
  #phone[data-screen="edge"] .rail [data-fb="rail-potd"] { display: none; }
}

/* ============================================================================
   BET BUILDERS — leg lists, the compose editor, and the price panel.

   Appended as one block rather than threaded through the sheet in the file
   above: prototype/styles.css is shared with another lane, and a contiguous
   addition at the end is the smallest merge surface available.
   ========================================================================== */

/* --- the leg list on a slip card ---------------------------------------- */
.legs { margin: 6px 0 2px; }
.leg {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 8px;
  align-items: baseline; padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.leg:first-child { border-top: 0; }
.leg-mark { font-size: 0.72rem; line-height: 1.4; color: var(--faint); text-align: center; }
.leg-sel { font-size: 0.83rem; color: var(--muted); }
.leg-sub { display: block; font-size: 0.72rem; color: var(--faint); }
.leg-odds { font-size: 0.76rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.leg.won .leg-mark, .leg.won .leg-sel { color: var(--win); }
.leg.lost .leg-mark, .leg.lost .leg-sel { color: var(--loss); }
.leg.void .leg-sel { color: var(--faint); text-decoration: line-through; }
.leg.ungraded .leg-mark { color: var(--boost); cursor: help; }
.leg.live .leg-mark { color: var(--info); animation: pulse-dot 1.6s ease-in-out infinite; }
.legs-more {
  background: none; border: 0; padding: 4px 0; color: var(--faint);
  font: inherit; font-size: 0.74rem; cursor: pointer;
}
.legs-more:hover { color: var(--muted); }
.legs-foot {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem; color: var(--faint);
}
.legs-foot .num { font-variant-numeric: tabular-nums; }
.legs-progress { color: var(--muted); }

/* one leg from home, and one leg short — different feelings, different cards */
.card.one-away { border-color: rgba(209, 196, 176, 0.45); }
.card.one-away .legs-progress { color: var(--sand); }
.card.one-short .legs-progress { color: var(--loss); }

/* --- "what was this actually worth" ------------------------------------- */
.priced { margin-top: 10px; }
.priced-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; font-size: 0.83rem; color: var(--muted);
}
.priced-row .num { font-variant-numeric: tabular-nums; color: var(--ink-hi, #fff); }
.priced-gap {
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem; color: var(--sand);
}
.priced-why {
  margin: 8px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--faint);
}

/* --- the compose leg editor --------------------------------------------- */
.legs-label {
  display: flex; align-items: baseline; gap: 6px; margin: 12px 0 6px;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
}
.legs-count { color: var(--muted); letter-spacing: 0; }
.leg-edit {
  padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.leg-edit:first-of-type { border-top: 0; }
.leg-edit-head { display: flex; align-items: center; gap: 8px; }
.leg-n {
  width: 18px; font-size: 0.72rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.leg-x {
  margin-left: auto; background: none; border: 0; color: var(--faint);
  font-size: 0.9rem; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.leg-x:hover { color: var(--loss); }
.leg-edit-fields {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-left: 26px;
}
/* sized so player + line + price still share one row on a 360px phone —
   margin-left:auto on the price pushed it onto a line of its own instead */
.leg-edit-fields select, .leg-edit-fields input { min-width: 0; flex: 1 1 auto; }
.leg-edit-fields input[data-k="subject"] { flex: 2 1 6em; }
.leg-edit-fields input[data-k="line"] { flex: 0 0 4em; }
/* scoped to beat `.leg-edit-fields input` above — a bare .leg-price-in is one
   specificity point short, so the price kept flex:1 1 auto, sized to its own
   content and wrapped onto a line of its own */
.leg-edit-fields input.leg-price-in { flex: 0 0 4.8em; }
.market-picker {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; padding-left: 26px;
}
.chip {
  border: 1px solid rgba(255, 255, 255, 0.16); background: transparent;
  color: var(--muted); border-radius: 999px; padding: 4px 10px;
  font: inherit; font-size: 0.74rem; cursor: pointer;
}
.chip:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--ink-hi, #fff); }
.chip.on { border-color: rgba(209, 196, 176, 0.5); background: rgba(209, 196, 176, 0.14); color: var(--sand); }
.chip.market { font-size: 0.78rem; }
.cs-pair { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }

/* the running total — the reward that makes the typing worth doing */
.indep-tick {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem; color: var(--muted);
}
.indep-tick strong { font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--sand); }
.indep-tick.dim strong { color: var(--faint); }

.seg { display: flex; gap: 0; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16); }
.seg button {
  flex: 1; background: transparent; border: 0; color: var(--faint);
  padding: 7px 10px; font: inherit; font-size: 0.76rem; cursor: pointer;
  /* the sheet's button styling uppercases, letter-spaces and rounds; inside a
     pill-shaped track that produced a pill within a pill and two-line labels */
  text-transform: none; letter-spacing: 0; white-space: nowrap; border-radius: 0;
}
.seg button.on { background: rgba(209, 196, 176, 0.16); color: var(--sand); }
.hint { margin: 6px 0 0; font-size: 0.72rem; color: var(--faint); }

/* --- the by-shape table -------------------------------------------------- */
.shape-head, .shape-row {
  display: grid; grid-template-columns: 1fr 2.2em 4.4em 3.8em 3.6em;
  gap: 8px; align-items: baseline;
}
.shape-head {
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.shape-head span:not(:first-child), .shape-row .num { text-align: right; }
.shape-row {
  padding: 7px 0; font-size: 0.84rem; color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.shape-row:last-of-type { border-bottom: 0; }
.shape-row .num { font-variant-numeric: tabular-nums; }
.shape-name { color: var(--ink-hi, #fff); }
/* the dash is the affordance: the absence is the point, so it is tappable */
button.shape-na {
  background: none; border: 0; padding: 0; font: inherit; cursor: help;
  color: var(--faint); text-decoration: underline dotted;
  text-underline-offset: 3px; text-align: right;
}
button.shape-na:hover { color: var(--sand); }
span.shape-na { color: var(--faint); cursor: help; }
.shape-note {
  margin: 10px 0 0; font-size: 0.76rem; line-height: 1.5; color: var(--faint);
}
.shape-note strong { color: var(--muted); font-weight: 500; }
/* a present number needs no "why" affordance — the dotted rule is reserved for
   the dash, where the absence is the thing worth explaining */
button.shape-has {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--muted); text-align: right;
}
button.shape-has:hover { color: var(--sand); }