/* GAIM (Golf AI Modeler) website styles.
   Copyright (c) 2026 Greg Pejic. All rights reserved.
   Ported from docs/design/gaim-mockup-priority2.html (the approved Priority 2
   design). Per-tournament colours are never written here: app.jsx sets
   --t-primary / --t-accent / --t-accent-text from frontend/brands.json. */

/* ---------- Self-hosted fonts (SIL OFL 1.1, see fonts/SOURCES.txt) ---------- */
@font-face {
  font-family: "Inter";
  src: url(fonts/InterVariable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Code";
  src: url(fonts/CascadiaCode.woff2) format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --g-bg: #030907; --g-bg2: #08130f; --g-panel: rgba(10, 24, 19, .86); --g-panel-solid: #0a1813; --g-line: #163a2f;
  --g-mint: #2ee6a6; --g-mint-dim: #1aa678; --g-glow: rgba(46, 230, 166, .35);
  --g-silver: #d6dde0; --g-text: #e9f1ef; --g-muted: #86a198; --g-neg: #ff6b6b;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, ui-monospace, monospace;
  --fx: 1; /* effect intensity: Full */
  /* Group Picks states, the chrome Ask GAIM (the logo's brushed-chrome G) and print. */
  --g-amber: #ffcc4d;  --g-amber-bg: rgba(255,196,0,.08);  --g-amber-line: #6b5513;
  --g-neg-bg: rgba(255,107,107,.07);  --g-neg-line: #7a2f35;  --g-neg-soft: #ff9a9a;  --g-neg-ink: #2a0606;  --g-amber-ink: #2a1d00;
  --g-chrome: linear-gradient(135deg,#f7f9fa 0%,#a9b2b7 18%,#eef1f2 34%,#6e7a80 52%,#dfe4e6 70%,#8b969b 86%,#f2f4f5 100%);
  --g-chrome-txt: linear-gradient(180deg,#ffffff 0%,#d9dfe2 38%,#8e999e 56%,#e9edef 78%,#b5bec2 100%);
  --g-chrome-face: #0b1719;  --g-chrome-rim: #cfd6d9;
  --g-cyan: #26d9ee;  --g-cyan-glow: rgba(38,217,238,.45);  --g-cyan-soft: rgba(38,217,238,.35);
  --g-chat-bg: linear-gradient(180deg,#0c1a1d 0%,#071113 100%);
  --g-user-bubble: linear-gradient(135deg,#1fb8cc,#14907f);  --g-send-ink: #032228;
  --g-print-bg: #ffffff;  --g-print-text: #111111;  --g-print-line: #999999;
  /* The chat's remaining mockup colours (tints are color-mix of these). */
  --g-hi: #ffffff;  --g-shade: #000000;  --g-chip-ink: #dff9fc;  --g-chrome-rim-soft: #b9c2c6;  --g-teal: #14907f;
  --g-mint-ink: #04261a;
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--g-bg); color: var(--g-text); font-family: var(--sans); font-size: 14px; overflow-x: hidden; min-height: 100vh }

button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--g-mint); outline-offset: 2px;
}

/* ---------- Background layers: matrix code rain + putting-grid floor ---------- */
#rain { position: fixed; inset: 0; z-index: 0; opacity: calc(.22 * var(--fx)); pointer-events: none }
.floor { position: fixed; left: -20%; right: -20%; bottom: -8vh; height: 55vh; z-index: 0; pointer-events: none;
  perspective: 520px; opacity: calc(.9 * var(--fx)) }
.floor::before { content: ""; position: absolute; inset: 0; transform: rotateX(68deg); transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(46, 230, 166, .28) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(46, 230, 166, .22) 0 1px, transparent 1px 60px);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 90%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 90%);
  animation: floor 9s linear infinite }
@keyframes floor { to { background-position: 0 60px, 0 60px } }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0, 0, 0, .7) 100%) }

.layer { position: relative; z-index: 1 }

/* ---------- GAIM header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; padding: 12px 28px; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px 16px;
  background: linear-gradient(180deg, rgba(3, 12, 9, .94), rgba(3, 9, 7, .82)); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--g-line); box-shadow: 0 1px 0 rgba(46, 230, 166, .25), 0 8px 30px rgba(0, 0, 0, .5) }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-mint), transparent); opacity: .8 }
.brand { display: flex; align-items: center; gap: 14px }
/* Full transparent GAIM logo (G mark + wordmark + GOLF AI MODELER). */
.brand .logo { display: block; height: 60px; width: auto; margin: -4px 0; filter: drop-shadow(0 0 10px rgba(46, 230, 166, .22)) }
.ctrl { display: flex; align-items: center; gap: 8px; margin-left: 16px }
/* Tournament picker: compact trigger + GAIM-styled drop-down list. */
.picker { position: relative }
/* "Select Tournament": the same look as the header buttons (.hbtn), with a
   mint chevron where the others have their SOON badge. */
.pbtn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap }
.pbtn[aria-expanded=true] { border-color: var(--g-mint); color: #fff; box-shadow: 0 0 14px var(--g-glow) }
.pbtn .chev { color: var(--g-mint); transition: transform .15s }
.pbtn[aria-expanded=true] .chev { transform: rotate(180deg) }
.plist { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 340px; margin: 0; padding: 6px; list-style: none;
  background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim); border-radius: 10px;
  box-shadow: 0 0 24px var(--g-glow), 0 14px 40px rgba(0, 0, 0, .6); outline: none }
.plist ul { margin: 0; padding: 0; list-style: none }
.pyear { padding: 8px 10px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--g-mint) }
.popt { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 8px 12px; border-radius: 6px; cursor: pointer;
  border-left: 3px solid transparent }
.popt .oname { font-weight: 700; color: var(--g-text) }
.popt .ometa { font-family: var(--mono); font-size: 11.5px; color: var(--g-muted) }
.popt.active { background: rgba(46, 230, 166, .08); border-left-color: var(--o-accent) }
.popt.cur .oname::after { content: " \2713"; color: var(--g-mint) }
.spacer { flex: 1 1 0; min-width: 0 }
.hacts { display: flex; align-items: center; gap: 10px }
/* Site nav, the same on every page: Predictor · Group Picks · Bet Analyzer · Ask GAIM.
   Pages are links (hash routes); the current one is highlighted. */
.hnav { display: flex; align-items: center; gap: 10px; flex: none }
a.hbtn { display: inline-flex; align-items: center; text-decoration: none }
.hbtn.on { border-color: var(--g-mint); color: var(--g-text); box-shadow: 0 0 14px var(--g-glow) }
/* Screen-reader-only text. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.hbtn { background: transparent; border: 1px solid var(--g-line); color: var(--g-silver); border-radius: 8px; padding: 9px 14px; font-size: 13px;
  font-family: var(--sans); cursor: pointer; transition: .15s }
.hbtn:hover { border-color: var(--g-mint); color: #fff; box-shadow: 0 0 14px var(--g-glow) }
.hbtn.primary { background: var(--g-mint); color: #04261a; border-color: var(--g-mint); font-weight: 700; box-shadow: 0 0 16px var(--g-glow) }
/* Coming-soon placeholders: muted text instead of opacity, so the Soon badge
   keeps full contrast (mint on near-black). */
.hbtn[aria-disabled=true] { color: var(--g-muted); cursor: not-allowed }
.hbtn[aria-disabled=true]:hover { border-color: var(--g-line); color: var(--g-muted); box-shadow: none }
.hbtn[disabled] { opacity: .35; cursor: not-allowed; box-shadow: none }
/* Disabled with a reason: aria-disabled keeps the control focusable (the
   reason is in its title / description), dimmed instead of greyed out. */
.hbtn.primary[aria-disabled=true]:not([disabled]),
.hbtn.primary[aria-disabled=true]:not([disabled]):hover { opacity: .45; color: var(--g-mint-ink); border-color: var(--g-mint); box-shadow: none }
[aria-disabled=true] { cursor: not-allowed }
.avatar { position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim);
  display: grid; place-items: center; color: var(--g-silver); cursor: pointer; transition: .15s }
.avatar:hover, .avatar[aria-expanded=true] { border-color: var(--g-mint); color: #fff; box-shadow: 0 0 14px var(--g-glow) }
/* Login: the account menu (GAIM_AUTH=cognito) or the local-mode note. */
.acct { position: relative }
.amenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 230px; padding: 6px;
  background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim); border-radius: 8px;
  box-shadow: 0 0 24px var(--g-glow), 0 14px 40px rgba(0, 0, 0, .6) }
.aemail { padding: 8px 10px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--g-muted);
  border-bottom: 1px solid var(--g-line); margin-bottom: 6px }
.aemail span { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--g-text);
  overflow-wrap: anywhere }
.amenu [role=menuitem] { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent;
  color: var(--g-silver); border-radius: 6px; padding: 9px 10px; font: 13px var(--sans); cursor: pointer }
.amenu [role=menuitem]:hover { border-color: var(--g-mint); color: #fff; background: rgba(46, 230, 166, .08) }
.amenu [role=menuitem]:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 2px }
.localnote { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; color: var(--g-muted); border: 1px solid var(--g-line);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap }
/* The tagline shows in full on the header row; below 1100px it is hidden
   (see Responsive) rather than cut off. */
.brand, .ctrl, .hacts { flex: none }
.tagline { flex: none; font-size: 13px; color: var(--g-text); font-style: italic;
  letter-spacing: .3px; white-space: nowrap; margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--g-line) }

/* ---------- Tournament banner: tournament colour at 55% over the GAIM scene ---------- */
.banner { position: relative; overflow: hidden; color: #fff; padding: 24px 28px; display: flex; align-items: center; gap: 20px; min-height: 120px;
  background: color-mix(in srgb, var(--t-primary) 55%, transparent); border-bottom: 1px solid var(--g-line) }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 34px),
              linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)) }
.banner svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: calc(1 * var(--fx)) }
.banner > *:not(svg) { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .7) }
.flight { stroke: var(--g-mint); stroke-width: 2; fill: none; stroke-dasharray: 6 10; filter: drop-shadow(0 0 6px var(--g-mint));
  animation: roll 3.5s linear infinite }
@keyframes roll { to { stroke-dashoffset: -160 } }
.node { fill: var(--g-mint); filter: drop-shadow(0 0 6px var(--g-mint)) }
.ring { fill: none; stroke: var(--g-mint); stroke-opacity: .35 }
.contour { fill: none; stroke: var(--g-mint); stroke-opacity: .16 }
.tlogo { height: 56px; width: auto; background: #fff; border-radius: 8px; padding: 6px 10px }
.btitle { font-size: 24px; font-weight: 800 }
.bsub { color: var(--g-silver); margin-top: 3px }
.bstripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--t-accent); z-index: 2 }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; margin-top: 8px }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-accent) }
.chip.field .dot { background: var(--g-mint); box-shadow: 0 0 6px var(--g-mint) }
.chip.full_roster { border-style: dashed }
.chip.full_roster .dot { background: var(--g-muted) }

/* ---------- Summary tiles (compact: label line + value with detail beside it) ---------- */
.tag { font-family: var(--mono); color: var(--g-mint); font-size: 12px; letter-spacing: 2px; text-shadow: 0 0 8px var(--g-glow) }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.wrap > .tiles { margin-bottom: 18px }
.tile { position: relative; background: rgba(6, 18, 14, .78); backdrop-filter: blur(4px); border: 1px solid var(--g-line); border-radius: 10px; padding: 7px 14px; overflow: hidden }
.tile .row { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.tile::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(46, 230, 166, .05) 0 1px, transparent 1px 22px),
              repeating-linear-gradient(0deg, rgba(46, 230, 166, .05) 0 1px, transparent 1px 22px) }
.tile .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--g-muted); line-height: 1.3 }
.tile .v { font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; white-space: nowrap; flex: none }
.tile .s { color: var(--g-muted); font-size: 11px; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tile.accent { border-color: var(--g-mint-dim); box-shadow: 0 0 24px rgba(46, 230, 166, .12) inset }
.tile.accent .v { color: var(--g-mint); text-shadow: 0 0 16px var(--g-glow) }
/* corner brackets */
.br { position: absolute; width: 8px; height: 8px; border-color: var(--g-mint); opacity: .7 }
.br.tl { top: 4px; left: 4px; border-top: 1px solid; border-left: 1px solid }
.br.tr { top: 4px; right: 4px; border-top: 1px solid; border-right: 1px solid }
.br.bl { bottom: 4px; left: 4px; border-bottom: 1px solid; border-left: 1px solid }
.br.brr { bottom: 4px; right: 4px; border-bottom: 1px solid; border-right: 1px solid }

/* ---------- Content ---------- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 24px 28px 90px }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start }
.card { position: relative; background: var(--g-panel); backdrop-filter: blur(6px); border: 1px solid var(--g-line); border-radius: 14px; overflow: hidden }
.card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 230, 166, .6), transparent) }
.card h3 { margin: 0; padding: 15px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--g-silver);
  border-bottom: 1px solid var(--g-line); display: flex; align-items: center; gap: 10px }
.card h3 .pfx { color: var(--g-mint) }
.card h3 .note { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--g-muted); font-weight: 400; font-family: var(--sans) }
.lbtools { padding: 10px 18px; border-bottom: 1px solid var(--g-line) }
.search { width: 240px; max-width: 100%; background: rgba(3, 9, 7, .9); border: 1px solid var(--g-line); color: var(--g-text); border-radius: 6px;
  padding: 7px 10px; font-size: 13px; font-family: var(--sans) }
.tblwrap { overflow-x: auto }

table { width: 100%; border-collapse: collapse }
thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--g-muted); text-align: right; font-weight: 600;
  padding: 10px; border-bottom: 2px solid var(--t-accent); white-space: nowrap }
thead th:nth-child(1), thead th:nth-child(2) { text-align: left }
thead th:not(:nth-child(-n+2)) { padding: 10px 7px }
tbody td { padding: 10px 7px; border-bottom: 1px solid rgba(22, 58, 47, .6); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
tbody td:nth-child(1), tbody td:nth-child(2) { text-align: left }
tbody td:nth-child(1), tbody td:nth-child(2) { padding-left: 10px }
tbody tr { transition: background .12s }
tbody tr:hover { background: rgba(46, 230, 166, .06); box-shadow: inset 3px 0 0 var(--g-mint) }
tbody tr.cutline:hover { background: none; box-shadow: none }
.rk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #12302a; color: var(--g-silver); font-family: var(--mono) }
.rk.top3 { background: var(--t-accent); color: var(--t-accent-text) }
.rk.top10 { background: var(--t-primary); color: #fff }
.pl { font-weight: 600 }
.pl small { display: flex; align-items: center; gap: 4px; color: var(--g-muted); font-weight: 400; font-size: 11.5px; margin-top: 2px }
.pl small img { width: 16px; height: 12px }
/* Few-data rule: too few strokes-gained rounds, ranked below players with full data. */
.pl .fewdata { margin-left: 6px; font-size: 0.7em; padding: 0 5px; border-radius: 3px; border: 1px solid var(--g-muted);
  color: var(--g-muted); text-transform: uppercase; letter-spacing: .03em; vertical-align: middle }
.score { font-weight: 800; font-size: 15px; font-family: var(--mono) }
.pos { color: var(--g-mint) } .neg { color: var(--g-neg) }
td.z { font-family: var(--mono); font-size: 12.5px }
/* The stat bar sits under its value so eight stat columns fit beside the weights panel. */
.bar { display: block; height: 3px; border-radius: 2px; margin: 4px 0 0 auto; opacity: .75 }
.bar.up { background: var(--g-mint) } .bar.down { background: var(--g-neg) }
.pill { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; font-family: var(--mono) }
.pill.ok { background: rgba(46, 230, 166, .14); color: var(--g-mint) }
.pill.warn { background: rgba(255, 196, 0, .12); color: #ffcc4d }
.cutline td { padding: 0; border: 0 }
/* Phones: the label stays at the screen's left edge while the stat columns scroll under it. */
.cutline div span { position: sticky; left: 0; display: inline-block; padding: 0 12px }
/* Projected cut: the tournament accent (same as the header underline), so it stands out.
   Text is the accent lifted toward white so darker accents (e.g. a deep red) stay readable. */
.cutline div { margin: 6px 0; border-top: 2px dashed var(--t-accent); color: var(--t-accent); color: color-mix(in srgb, var(--t-accent) 75%, #fff);
  font-size: 11.5px; font-weight: 700; text-align: center; letter-spacing: 2px; padding: 5px 0 1px; font-family: var(--mono);
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-accent) 12%, transparent), transparent) }
.empty { padding: 18px; color: var(--g-muted) }
.insuff { padding: 14px 18px; color: var(--g-muted); font-size: 12.5px; border-top: 1px solid var(--g-line); line-height: 1.6 }
.insuff b { color: var(--g-silver) }

/* ---------- Weights side panel ---------- */
/* Desktop (two columns): the panel stays in view while the leaderboard
   scrolls. It sits under the sticky header (--hdr-h, set by app.jsx), scrolls
   on its own when taller than the window, and its heading + Total / Run stay
   pinned at its top. */
@media (min-width: 981px) {
  .weights { position: sticky; top: calc(var(--hdr-h, 76px) + 14px); max-height: calc(100vh - var(--hdr-h, 76px) - 28px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--g-line) transparent }
  .weights h3 { position: sticky; top: 0; z-index: 3; background: var(--g-panel-solid) }
  .weights .wtop { position: sticky; top: 45px; z-index: 2; background: var(--g-panel-solid) }
}
.wlist { padding-top: 6px }
.wrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 18px }
.wrow label { color: var(--g-silver) }
.wrow label small { color: var(--g-muted); margin-left: 6px; font-family: var(--mono); font-size: 10.5px }
/* Number pill + GAIM step buttons beside it (outside the pill). The pill's
   right padding leaves room for the caret after the digits. */
.wctl { display: flex; align-items: center; gap: 6px }
.wrow input { width: 52px; background: rgba(3, 9, 7, .9); border: 1px solid var(--g-line); color: var(--g-text); border-radius: 999px;
  padding: 5px 10px 5px 6px; text-align: right; caret-color: var(--g-mint); font-size: 13px; font-family: var(--mono) }
/* No native spinners on any number input in the editor. */
.wrow input::-webkit-inner-spin-button, .wrow input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.wrow input[type=number] { -moz-appearance: textfield; appearance: textfield }
.wstep { display: flex; flex-direction: column; gap: 2px }
.wstep button { width: 20px; height: 14px; padding: 0; display: grid; place-items: center; background: rgba(3, 9, 7, .9);
  border: 1px solid var(--g-line); border-radius: 4px; color: var(--g-mint); cursor: pointer; transition: .15s }
.wstep button:hover:not([disabled]) { border-color: var(--g-mint); box-shadow: 0 0 8px var(--g-glow) }
.wstep button[disabled] { opacity: .35; cursor: not-allowed }
.wstep svg { display: block }
.wrow input[aria-invalid=true] { border-color: var(--g-neg) }
.wrow.zero label { color: var(--g-muted) }
.wmeter { height: 3px; margin: 0 18px; background: rgba(46, 230, 166, .1); border-radius: 2px; overflow: hidden }
.wmeter i { display: block; height: 100%; background: var(--g-mint); box-shadow: 0 0 8px var(--g-mint) }
/* Total, hint and Run sit above the list so they stay in view while editing. */
.wtop { padding: 12px 18px 14px; border-bottom: 1px solid var(--g-line); display: flex; flex-direction: column; gap: 10px }
/* Remove a stat (session only): a small ghost button after the step buttons. */
.wremove { width: 20px; height: 20px; padding: 0; display: grid; place-items: center; background: transparent;
  border: 1px solid transparent; border-radius: 6px; color: var(--g-muted); cursor: pointer }
.wremove:hover { color: var(--g-neg); border-color: rgba(255, 107, 107, .4) }
.wremove:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 1px }
.wremove[disabled] { opacity: .3; cursor: not-allowed }
/* Add a stat: below the list. */
.wadd { padding: 12px 18px 14px; border-top: 1px solid var(--g-line); display: flex; flex-direction: column; gap: 6px }
.wadd label { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--g-mint) }
.wselect { width: 100%; background: rgba(3, 9, 7, .9); color: var(--g-text); border: 1px solid var(--g-line); border-radius: 8px;
  padding: 8px 10px; font: 13px var(--sans); cursor: pointer }
.wselect:hover { border-color: var(--g-mint-dim) }
.wselect option { background: var(--g-panel-solid); color: var(--g-text) }
.total { display: flex; justify-content: space-between; font-weight: 700; font-family: var(--mono) }
.total.bad { color: var(--g-neg) } .total.good { color: var(--g-mint) }
/* Run + Reset side by side, equal width. */
.wbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.wbtns button { min-width: 0; padding-left: 8px; padding-right: 8px; justify-content: center; text-align: center; white-space: nowrap }
.hint { color: var(--g-muted); font-size: 11.5px }
.wstatus { color: var(--g-silver); font-size: 12px; font-family: var(--mono) }
.err { color: var(--g-neg); font-size: 12px }
.src { font-size: 11px; color: var(--g-muted); padding: 0 18px 12px; font-family: var(--mono) }

.footer { color: var(--g-muted); font-size: 12px; text-align: center; margin-top: 30px; font-family: var(--mono); line-height: 1.8 }
.footer p { margin: 0 }
.footer .copy { margin-top: 10px; color: var(--g-silver) }

/* ---------- Ask G: an always-on chat, styled like the logo's brushed-chrome G ---------- */
/* Stacking: header 40, weights FAB 45, launcher 54, chat window 56 (Group
   Picks adds its bar 35, picker list 60, sheets 65/66 and toast 70). */
/* Header button "Ask G": chrome bezel, dark face, the chrome word "Ask", then the G mark (the mark is the G). */
.hbtn.askbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid transparent;
  color: var(--g-hi); background: linear-gradient(var(--g-chrome-face), var(--g-chrome-face)) padding-box, var(--g-chrome) border-box;
  box-shadow: 0 0 14px var(--g-cyan-glow), inset 0 1px 0 color-mix(in srgb, var(--g-hi) 8%, transparent) }
.hbtn.askbtn:hover, .hbtn.askbtn.ask-on { border-color: transparent; color: var(--g-hi);
  box-shadow: 0 0 22px var(--g-cyan-glow), 0 0 4px var(--g-hi) inset }
.askbtn img, .askfab img, .askav { border-radius: 50%; display: block }
.askbtn img { width: 28px; height: 28px; box-shadow: 0 0 8px var(--g-cyan-glow) }
.chrome-t { background: var(--g-chrome-txt); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: .4px }
/* Floating launcher "Ask G" ("Ask", then the G mark), bottom-right on every page; hidden while the chat is open. */
.askfab { position: fixed; right: 22px; bottom: 22px; z-index: 54; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px;
  border-radius: 999px; cursor: pointer; border: 2px solid transparent; color: var(--g-hi); font: inherit;
  background: linear-gradient(var(--g-chrome-face), var(--g-chrome-face)) padding-box, var(--g-chrome) border-box;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--g-shade) 60%, transparent), 0 0 22px var(--g-cyan-glow) }
.askfab img { width: 34px; height: 34px; box-shadow: 0 0 10px var(--g-cyan-glow) }
.askfab .t { display: flex; line-height: 1 }
.askfab .t b { font-size: 14px }
.askfab::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--g-cyan); opacity: 0;
  animation: askping 3.2s ease-out 1.2s infinite; pointer-events: none }
@keyframes askping { 0% { opacity: .55; transform: scale(.96) } 70%, 100% { opacity: 0; transform: scale(1.12) } }
.askfab:hover { box-shadow: 0 10px 30px color-mix(in srgb, var(--g-shade) 60%, transparent), 0 0 34px var(--g-cyan-glow) }
.askfab:focus-visible, .hbtn.askbtn:focus-visible { outline: 2px solid var(--g-cyan); outline-offset: 3px }
.askfab[hidden] { display: none }
/* Chat window: floats bottom-right with a chrome bezel; full screen on phones. */
.ask { position: fixed; right: 22px; bottom: 22px; z-index: 56; width: min(410px, calc(100vw - 32px)); height: min(640px, calc(100vh - 44px));
  display: flex; flex-direction: column; border: 2px solid transparent; border-radius: 20px; overflow: hidden;
  background: var(--g-chat-bg) padding-box, var(--g-chrome) border-box;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--g-shade) 70%, transparent), 0 0 34px var(--g-cyan-glow);
  transform-origin: bottom right; animation: askin .22s ease-out; transition: width .18s ease-out, height .18s ease-out }
@keyframes askin { from { opacity: 0; transform: translateY(12px) scale(.96) } to { opacity: 1; transform: none } }
.ask[hidden] { display: none }
/* Desktop resizing (#30): app.jsx sets the width/height inline (GAIMAskSize). Grips on the
   top edge, left edge and top-left corner (the window is pinned bottom-right); no
   transition while dragging. The reduced-motion rule below drops the expand transition. */
.ask.resizing { transition: none; user-select: none }
.askgrip { position: absolute; z-index: 2; touch-action: none }
.askgrip.t { top: 0; left: 18px; right: 18px; height: 7px; cursor: ns-resize }
.askgrip.l { left: 0; top: 18px; bottom: 18px; width: 7px; cursor: ew-resize }
.askgrip.tl { left: 0; top: 0; width: 18px; height: 18px; cursor: nwse-resize }
.askgrip.t::before { content: ""; position: absolute; left: 50%; top: 3px; width: 38px; height: 3px; margin-left: -19px;
  border-radius: 3px; background: color-mix(in srgb, var(--g-hi) 22%, transparent) }
.askgrip.t:hover::before, .ask.resizing .askgrip.t::before { background: var(--g-cyan) }
.askgrip.tl::before { content: ""; position: absolute; left: 5px; top: 5px; width: 7px; height: 7px;
  border-left: 2px solid color-mix(in srgb, var(--g-hi) 30%, transparent); border-top: 2px solid color-mix(in srgb, var(--g-hi) 30%, transparent);
  border-top-left-radius: 4px }
.askgrip.tl:hover::before { border-color: var(--g-cyan) }
.asktall { display: grid; place-items: center; padding: 0 }
.askhead { display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-hi) 7%, transparent), transparent),
    radial-gradient(260px 80px at 20% 0, color-mix(in srgb, var(--g-cyan) 18%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--g-cyan) 25%, transparent) }
.askhead .askav { width: 42px; height: 42px; flex: none; box-shadow: 0 0 0 2px var(--g-chrome-rim), 0 0 16px var(--g-cyan-glow) }
.askttl { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto }
.askhead h2 { margin: 0; font-size: 17px; line-height: 1.15 }
.askctx { color: var(--g-muted); font-size: 11.5px; display: flex; align-items: center; gap: 6px; min-width: 0 }
.askctx::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-cyan); box-shadow: 0 0 8px var(--g-cyan); flex: none }
.askclose { width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--g-hi) 18%, transparent);
  background: color-mix(in srgb, var(--g-hi) 4%, transparent); color: var(--g-silver); font-size: 17px; line-height: 1; cursor: pointer; flex: none }
.askclose:hover { border-color: var(--g-cyan); color: var(--g-hi) }
.askscope { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--g-hi) 6%, transparent);
  font-size: 12px; color: var(--g-muted) }
.askscope[hidden] { display: none }
.askscope select { flex: 1; min-width: 0; background: color-mix(in srgb, var(--g-shade) 35%, transparent); border: 1px solid color-mix(in srgb, var(--g-cyan) 30%, transparent);
  color: var(--g-text); border-radius: 999px; padding: 5px 10px; font: 12px var(--sans) }
.askscope select option { background: var(--g-panel-solid); color: var(--g-text) }
.asklog { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain }
.askintro { display: flex; flex-direction: column; gap: 12px }
.asksugg { display: flex; flex-wrap: wrap; gap: 7px; padding-left: 37px }
.asksugg button { text-align: left; border-radius: 999px; padding: 7px 12px; font: 12.5px var(--sans); cursor: pointer; color: var(--g-chip-ink);
  background: color-mix(in srgb, var(--g-cyan) 8%, transparent); border: 1px solid var(--g-cyan-soft) }
.asksugg button:hover, .asksugg button:focus-visible { background: color-mix(in srgb, var(--g-cyan) 18%, transparent); border-color: var(--g-cyan);
  outline: none; box-shadow: 0 0 10px var(--g-cyan-glow) }
.asksugg button[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none }
.arow { display: flex; gap: 9px; align-items: flex-end }
.arow.user { justify-content: flex-end }
.arow .askav { width: 28px; height: 28px; flex: none; box-shadow: 0 0 0 1.5px var(--g-chrome-rim-soft) }
.amsg { max-width: 84%; padding: 9px 13px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere }
.amsg.assistant { background: color-mix(in srgb, var(--g-hi) 5%, transparent); border: 1px solid color-mix(in srgb, var(--g-hi) 10%, transparent);
  border-radius: 16px 16px 16px 4px; color: var(--g-text) }
.amsg.user { background: var(--g-user-bubble); color: var(--g-hi); border-radius: 16px 16px 4px 16px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--g-teal) 35%, transparent) }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-cyan); opacity: .4; animation: askblink 1s infinite }
.typing i:nth-child(2) { animation-delay: .15s }
.typing i:nth-child(3) { animation-delay: .3s }
@keyframes askblink { 50% { opacity: 1; transform: translateY(-2px) } }
.askerr { padding: 0 16px 8px }
.askform { display: flex; gap: 8px; margin: 0 12px 8px; padding: 6px 6px 6px 14px; align-items: center; border-radius: 999px;
  background: color-mix(in srgb, var(--g-shade) 35%, transparent); border: 1px solid color-mix(in srgb, var(--g-cyan) 30%, transparent) }
.askform:focus-within { border-color: var(--g-cyan); box-shadow: 0 0 12px var(--g-cyan-glow) }
/* One line that grows with the question (app.jsx sets the height, up to 90px). */
.askform textarea { flex: 1 1 auto; width: auto; min-height: 0; height: 22px; max-height: 90px; overflow: hidden; resize: none; background: transparent;
  border: 0; color: var(--g-text); padding: 2px 0; font: 13.5px/1.4 var(--sans) }
.askform textarea:focus { outline: none }
.asksend { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; flex: none; color: var(--g-send-ink); font-size: 17px; font-weight: 800;
  background: var(--g-chrome); box-shadow: 0 0 10px var(--g-cyan-glow) }
.asksend:hover { box-shadow: 0 0 16px var(--g-cyan-glow) }
.asksend[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none }
.askfoot { padding: 0 16px 10px; color: var(--g-muted); font: 10.5px/1.4 var(--mono); text-align: center }
/* High-contrast mode: the chrome lettering falls back to plain text. */
@media (forced-colors: active) {
  .chrome-t { background: none; color: CanvasText }
}

/* ---------- Group Picks (#group-picks) ---------- */
/* Layout follows the approved Group Picks mockup. Colours are the :root
   variables only (tints are color-mix of them); the tournament accent is
   --t-accent. Stacking: steps bar 35 (under the header 40), tournament list
   60, player sheet scrim/sheet 65/66, toast 70. */
.gp .card h3:focus { outline: none }
.gp .muted { color: var(--g-muted) }
.gp .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.gp .card { margin-bottom: 18px }
/* Steps bar: sticky under the header, so Regenerate is always one click away. */
.gp-bar { position: sticky; top: var(--hdr-h, 76px); z-index: 35; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 0 18px; background: color-mix(in srgb, var(--g-panel-solid) 96%, transparent);
  border: 1px solid var(--g-line); border-radius: 12px; box-shadow: 0 8px 30px color-mix(in srgb, var(--g-shade) 50%, transparent) }
.gp-bar .steps { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font: 11px var(--mono); letter-spacing: .3px }
.gp-bar .steps-l { color: var(--g-silver); margin-right: 4px }
.gp-bar .step { padding: 3px 7px; border-radius: 999px; border: 1px solid var(--g-line); color: var(--g-muted) }
.gp-bar .step.done { border-color: var(--g-mint-dim); color: var(--g-mint) }
.gp-bar .step.now { background: var(--g-mint); color: var(--g-mint-ink); border-color: var(--g-mint) }
.gp-bar .acts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap }
.gp-bar .dirty { color: var(--g-amber); font: 12px var(--mono) }
.gp-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; font-size: 13px }
.gp-notice { margin: 0 0 14px; color: var(--g-amber); font-size: 12.5px }
/* Tournament row (Predictor; Group Picks step 1): the page's tournament
   picker under the banner; its list hangs over the next card. */
.card.tour-row { overflow: visible; z-index: 30; margin-bottom: 18px }
.tour-row .tpick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 18px }
.tour-row .tlab { font: 12px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--g-silver); white-space: nowrap }
.tour-row .tlab .pfx { color: var(--g-mint) }
.tour-row .ctrl { margin-left: 0 }
.tour-row .pbtn { font-size: 14px; padding: 10px 16px }
.pbtn.set { color: var(--g-hi); border-color: var(--g-mint-dim) }
.tour-row .plist { max-height: min(60vh, 460px); overflow-y: auto }
.tour-row .pyear { position: sticky; top: -6px; background: var(--g-panel-solid) }
.tour-row .tprompt { color: var(--g-amber); font: 12px var(--mono) }
/* Step 2 stays locked until step 1 is chosen on this visit. */
.gp .card.locked { opacity: .45; pointer-events: none }
.gp-lock { display: contents; border: 0; margin: 0; padding: 0; min-width: 0 }
/* Step 2: tabs, the rest-of-field switch, Generate and the paste box. */
.gp .card h3 .h3sub { margin-left: 6px; text-transform: none; letter-spacing: 0; font: 13px var(--sans); color: var(--g-muted) }
.gp-tabs { display: flex; gap: 8px; padding: 14px 18px 0; align-items: center; flex-wrap: wrap }
.gp-tablist { display: flex; gap: 8px }
.gp-tablist .hbtn.on { border-color: var(--g-mint); color: var(--g-hi); box-shadow: 0 0 14px var(--g-glow) }
.gp-tabs .gen { margin-left: auto }
.gp .toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; color: var(--g-silver); cursor: pointer; font-size: 14px }
.gp .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
.gp .toggle .track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; transition: .15s;
  background: color-mix(in srgb, var(--g-line) 80%, var(--g-bg)); border: 1px solid var(--g-line) }
.gp .toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--g-muted); transition: .15s }
.gp .toggle input:checked + .track { background: var(--g-mint-dim); border-color: var(--g-mint) }
.gp .toggle input:checked + .track::after { left: 18px; background: var(--g-hi) }
.gp .toggle input:focus-visible + .track { outline: 2px solid var(--g-mint); outline-offset: 2px }
.gp-err { padding: 8px 18px 0; text-align: right }
.gp .inbody { padding: 14px 18px 18px }
.gp .inbody[hidden] { display: none }
.gp-paste { display: block; width: 100%; min-height: 210px; resize: vertical; background: color-mix(in srgb, var(--g-bg) 90%, transparent);
  color: var(--g-text); border: 1px solid var(--g-line); border-radius: 10px; padding: 12px; font: 13px/1.5 var(--mono) }
.gp-paste::placeholder { color: var(--g-muted); opacity: 1 }
.gp-paste:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 1px }
.gp .hint { color: var(--g-muted); font-size: 12.5px; line-height: 1.5; margin: 8px 0 14px }
.gp .num-in, .gp .add input, .gp .mfoot input { background: color-mix(in srgb, var(--g-bg) 90%, transparent); border: 1px solid var(--g-line);
  color: var(--g-text); border-radius: 6px; padding: 7px 9px; font: 14px var(--sans) }
.gp .num-in { width: 72px; font-family: var(--mono) }
/* Results: pick tiles, summary, model note, legend. */
.gp .card h3 .r { margin-left: auto; text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--g-muted) }
.gp .rv { color: var(--g-neg); font-weight: 700 }
.gp .rvd { color: var(--g-mint); font-weight: 700 }
.gp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 16px 18px }
.gp-pk { display: block; border: 1px solid var(--g-line); border-radius: 10px; padding: 10px 12px; text-align: left; color: inherit; font: inherit;
  background: color-mix(in srgb, var(--g-bg) 60%, transparent); cursor: pointer; transition: border-color .15s, box-shadow .15s }
.gp-pk:hover { border-color: var(--g-mint-dim); box-shadow: 0 0 14px var(--g-glow) }
.gp-pk > span { display: block }
.gp-pk .g { font: 11px var(--mono); letter-spacing: 1px; color: var(--g-muted) }
.gp-pk .g .cc { color: var(--g-amber) }
.gp-pk .n { font-weight: 800; font-size: 15px; margin-top: 2px }
.gp-pk .s { font: 12px var(--mono); color: var(--g-muted) }
.gp-pk.close { border-color: var(--g-amber-line) }
/* Review required: the site's negative red, never a pick. */
.gp-pk.review { border-color: var(--g-neg-line); background: var(--g-neg-bg) }
.gp-pk.review:hover { border-color: var(--g-neg); box-shadow: 0 0 14px color-mix(in srgb, var(--g-neg) 25%, transparent) }
.gp-pk.review .g, .gp-pk.review .s { color: var(--g-neg-soft) }
.gp-pk.review .n { color: var(--g-neg) }
/* Reviewed, waiting on Regenerate: mint, no pick yet. */
.gp-pk.reviewed { border-color: var(--g-mint-dim) }
.gp-pk.reviewed .n { color: var(--g-mint) }
.gp .modelnote { margin: 0 18px 16px; padding: 9px 12px; border: 1px solid var(--g-line); border-radius: 8px; font-size: 12.5px; color: var(--g-silver) }
.gp .modelnote b { color: var(--g-mint) }
.gp .how > summary { display: none }
.gp .legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 18px 16px; font-size: 12.5px; color: var(--g-muted) }
.gp .legend b { color: var(--g-text); font-family: var(--mono); font-size: 11px; letter-spacing: 1px }
/* Group cards (desktop). */
.gp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: 16px }
.gp .grp { min-width: 0; background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 14px; overflow: hidden }
.gp .grp.rof { border-color: var(--g-mint-dim); box-shadow: 0 0 22px color-mix(in srgb, var(--g-mint) 12%, transparent) }
.gp .grp.needs { border-color: var(--g-neg-line); box-shadow: 0 0 18px color-mix(in srgb, var(--g-neg) 12%, transparent) }
.gp .grp.needs .gn { color: var(--g-neg) }
.gp .flash { animation: gpflash 1.2s ease-out }
@keyframes gpflash { from { box-shadow: 0 0 0 3px var(--g-mint) } to { box-shadow: none } }
.gp .gh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--g-line) }
.gp .gh .gn { margin: 0; font: 12px var(--mono); letter-spacing: 2px; color: var(--g-mint); text-transform: uppercase }
.gp .gn:focus { outline: none }
.gp .gn:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 2px }
.gp .gh .gpk { margin-left: auto; font-size: 12.5px; color: var(--g-muted) }
.gp .gh .gpk b { color: var(--g-text) }
.gp .x { width: 24px; height: 24px; padding: 0; background: none; border: 1px solid transparent; color: var(--g-muted); border-radius: 6px; cursor: pointer; font: 15px var(--sans) }
.gp .x:hover { border-color: var(--g-neg); color: var(--g-neg) }
.gp .gx { width: auto; height: auto; margin-left: 8px; padding: 2px 8px; border-color: var(--g-line); font-size: 12px }
.gp .revnote { margin: 10px 14px 0; padding: 9px 11px; border-left: 3px solid var(--g-neg); background: var(--g-neg-bg); border-radius: 0 8px 8px 0;
  color: color-mix(in srgb, var(--g-neg-soft) 60%, var(--g-hi)); font-size: 12.5px }
.gp .why { margin: 10px 14px; padding: 9px 11px; border-left: 3px solid var(--g-amber); background: var(--g-amber-bg); border-radius: 0 8px 8px 0;
  color: var(--g-silver); font-size: 12.5px }
.gp .fix { margin: 10px 14px 4px; display: flex; flex-direction: column; gap: 6px }
.gp-fix-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 8px; font-size: 12.5px }
.gp-fix-chip.amb { background: var(--g-amber-bg); border: 1px solid var(--g-amber-line); color: var(--g-amber) }
.gp-fix-chip.red { background: var(--g-neg-bg); border: 1px solid var(--g-neg-line); color: var(--g-neg-soft) }
.gp-fix-chip button { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 2px 9px; cursor: pointer; font: 12px var(--sans) }
.gp-fix-chip button:hover { background: color-mix(in srgb, currentColor 14%, transparent) }
.gp .grp thead th { padding: 7px 10px; text-align: left; cursor: help }
.gp .grp tbody td { padding: 7px 10px; text-align: left; white-space: nowrap }
.gp .grp th.num, .gp .grp td.num { text-align: right }
.gp .grp td.num { font-family: var(--mono) }
.gp .grp td.pl { white-space: normal }
.gp .grp tr.pick td { background: color-mix(in srgb, var(--g-mint) 7%, transparent) }
.gp .grp tr.pick td:first-child { box-shadow: inset 3px 0 0 var(--g-mint) }
.gp .ord { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--g-silver); font: 800 12px var(--mono);
  background: color-mix(in srgb, var(--g-line) 80%, var(--g-bg)) }
.gp .pick .ord { background: var(--t-accent); color: var(--t-accent-text) }
.gp .grp .pl b { display: block }
.gp .badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--mono); letter-spacing: 1px; vertical-align: middle }
.gp .b-pick { background: var(--g-mint); color: var(--g-mint-ink) }
.gp .pend { color: var(--g-amber) !important }
.gp .mv { background: color-mix(in srgb, var(--g-bg) 90%, transparent); color: var(--g-muted); border: 1px solid var(--g-line); border-radius: 6px;
  font: 11.5px var(--sans); padding: 2px 4px }
.gp .mv option { background: var(--g-panel-solid); color: var(--g-text) }
.gp .add { display: flex; gap: 8px; padding: 10px 14px 14px }
.gp .add input { flex: 1; min-width: 0 }
.gp .gp-adderr { padding: 0 14px 12px }
.gp .callout { padding: 10px 14px 14px; font-size: 12.5px; color: var(--g-muted) }
.gp .empty { padding: 14px }
.gp-addgrp { margin-top: 16px }
/* Menus (the phone ⋯ menu; export menus use the same pattern). */
.gp .more { position: relative }
.gp .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px; padding: 6px; background: var(--g-panel-solid);
  border: 1px solid var(--g-mint-dim); border-radius: 12px;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--g-shade) 60%, transparent), 0 0 18px var(--g-glow) }
.gp .menu[hidden] { display: none }
.gp .menu [role=menuitem] { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--g-text); padding: 11px 12px;
  border-radius: 8px; cursor: pointer; font: 14px var(--sans) }
.gp .menu [role=menuitem]:hover, .gp .menu [role=menuitem]:focus-visible { background: color-mix(in srgb, var(--g-mint) 10%, transparent); outline: none }
.gp .menu [role=menuitem][aria-disabled=true] { opacity: .45 }
.gp .menu small { display: block; color: var(--g-muted); font-size: 11.5px }
/* Export Picks ▾ (desktop) sits in the picks card heading; the menu drops the heading's mono caps. */
.card h3 .xls { margin-left: 12px }
.card h3 .xls .hbtn { padding: 6px 12px; font: 13px var(--sans); letter-spacing: 0; text-transform: none }
.card h3 .xls .menu { text-transform: none; letter-spacing: 0; font-weight: 400 }
.gp-toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 32px); padding: 10px 16px;
  background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim); border-radius: 999px; color: var(--g-text); font-size: 13px;
  box-shadow: 0 0 18px var(--g-glow) }
.gp-toast[hidden] { display: none }
/* Phones: the merged tap-to-open group list (rendered only at <= 640px). */
.gp .mfilt { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; padding-bottom: 2px }
.gp .mfilt button { flex: none; border-radius: 999px; padding: 7px 12px; font: 13px var(--sans); background: transparent; border: 1px solid var(--g-line);
  color: var(--g-silver); cursor: pointer }
.gp .mfilt button.on { background: var(--g-mint); border-color: var(--g-mint); color: var(--g-mint-ink); font-weight: 700 }
.gp .mfilt button.rvf.on { background: var(--g-neg); border-color: var(--g-neg); color: var(--g-neg-ink) }
.gp .mfilt button.ccf.on { background: var(--g-amber); border-color: var(--g-amber); color: var(--g-amber-ink) }
.gp .mfilt button[disabled] { opacity: .35; cursor: not-allowed }
.gp .mlist { display: flex; flex-direction: column; gap: 8px }
.gp .mg { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 12px; overflow: hidden; scroll-margin-top: 80px }
.gp .mg.close { border-color: var(--g-amber-line) }
.gp .mg.review { border-color: var(--g-neg-line); background: color-mix(in srgb, var(--g-neg) 5%, var(--g-panel-solid)) }
.gp .mg.reviewed, .gp .mg.rof { border-color: var(--g-mint-dim) }
.gp .mh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px;
  background: none; border: 0; color: var(--g-text); text-align: left; cursor: pointer; font: inherit }
.gp .mh .mgl { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px var(--mono); letter-spacing: 1px;
  color: var(--g-muted); text-transform: uppercase }
.gp .mh .mgp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 15px }
.gp .mh .mgb { padding: 2px 7px; border-radius: 999px; white-space: nowrap; font: 700 10px var(--mono); letter-spacing: .5px }
.gp .mh .mgb:empty { display: none }
.gp .mg.close .mgb { color: var(--g-amber); background: color-mix(in srgb, var(--g-amber) 10%, transparent) }
.gp .mg.review .mgl, .gp .mg.review .mgp { color: var(--g-neg) }
.gp .mg.review .mgb { color: var(--g-neg-soft); background: color-mix(in srgb, var(--g-neg) 12%, transparent) }
.gp .mg.reviewed .mgp { color: var(--g-mint) }
.gp .mg.reviewed .mgb { color: var(--g-muted) }
.gp .mh .chev { color: var(--g-mint); font-size: 18px; line-height: 1; transition: transform .15s }
.gp .mh[aria-expanded=true] .chev { transform: rotate(90deg) }
.gp .mb { border-top: 1px solid var(--g-line); padding-bottom: 6px }
.gp .mb[hidden] { display: none }
.gp .mb .revnote, .gp .mb .why, .gp .mb .fix { margin-left: 12px; margin-right: 12px }
.gp .mb .gp-fix-chip { flex-direction: column; align-items: stretch; padding: 10px 12px; font-size: 13.5px }
.gp .mb .gp-fix-chip .cbtns { display: flex; gap: 8px; flex-wrap: wrap }
.gp .mb .gp-fix-chip button { flex: 1 1 auto; padding: 9px 14px; font-size: 13.5px }
.gp .mhead, .gp .mr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 46px; gap: 10px; align-items: center }
.gp .mhead { padding: 8px 12px 4px; font: 600 10px var(--mono); letter-spacing: 1px; color: var(--g-muted); text-transform: uppercase;
  border-bottom: 2px solid var(--t-accent) }
.gp .mhead span:nth-child(3), .gp .mhead span:nth-child(4) { text-align: right }
.gp .mr { width: 100%; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--g-line) 60%, transparent);
  color: var(--g-text); text-align: left; font: inherit }
.gp button.mr { cursor: pointer }
.gp button.mr:active { background: color-mix(in srgb, var(--g-mint) 6%, transparent) }
.gp .mr.pick { background: color-mix(in srgb, var(--g-mint) 7%, transparent); box-shadow: inset 3px 0 0 var(--g-mint) }
.gp .mr .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700 }
.gp .mr .nm small { display: block; font-weight: 400; color: var(--g-muted); font-size: 11px }
.gp .mr .sc { font: 13px var(--mono); text-align: right }
.gp .mr .pill { justify-self: end }
.gp .mfoot { display: flex; gap: 8px; padding: 10px 12px 6px; align-items: center }
.gp .mfoot input { flex: 1; min-width: 0; padding: 10px; border-radius: 8px }
.gp .mrm { display: block; margin: 4px 12px 6px auto; padding: 6px 0; background: none; border: 0; color: var(--g-muted); font: 12.5px var(--sans);
  text-decoration: underline; cursor: pointer }
/* Phones: Move / Remove sheet for one player. */
.gp-scrim { position: fixed; inset: 0; z-index: 65; background: color-mix(in srgb, var(--g-shade) 55%, transparent) }
.gp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 66; max-height: 75vh; overflow-y: auto; padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--g-panel-solid); border-top: 2px solid var(--g-mint-dim); border-radius: 18px 18px 0 0;
  box-shadow: 0 -14px 40px color-mix(in srgb, var(--g-shade) 60%, transparent); animation: sheet-up .2s ease-out }
.gp-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--g-line); margin: 4px auto 10px }
.gp-sheet h4 { margin: 0 0 2px; font-size: 16px }
.gp-sheet .sm { color: var(--g-muted); font-size: 12.5px; margin-bottom: 10px }
.gp-sheet .lbl { margin: 10px 0 6px; font: 11px var(--mono); letter-spacing: 1.5px; color: var(--g-mint); text-transform: uppercase }
.gp-sheet .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.gp-sheet button { padding: 12px; border-radius: 10px; border: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-bg) 70%, transparent);
  color: var(--g-text); font: 14px var(--sans); cursor: pointer; text-align: left }
.gp-sheet button.danger { width: 100%; margin-top: 12px; color: var(--g-neg); border-color: var(--g-neg-line) }
.gp-sheet button.cancel { width: 100%; margin-top: 6px; text-align: center; color: var(--g-silver) }
/* Share copy box (no share sheet and no clipboard API): centred on wide screens. */
.gp-sheet.gp-share { max-width: 560px; margin: 0 auto }
.gp-share textarea { width: 100%; min-height: 150px; padding: 10px; border-radius: 10px; border: 1px solid var(--g-line); resize: vertical;
  background: color-mix(in srgb, var(--g-bg) 70%, transparent); color: var(--g-text); font: 16px var(--sans) }
.gp-share .row { display: flex; gap: 8px; margin-top: 10px }
.gp-share .row button { flex: 1; text-align: center }

/* Save as PDF: the print view is never shown on screen (even if a phone never
   fires afterprint); printing shows it alone. */
@media screen {
  .gp-print { display: none }
}
@media print {
  body.gp-printing .hdr, body.gp-printing #rain, body.gp-printing .floor, body.gp-printing .vignette,
  body.gp-printing .askfab, body.gp-printing .ask, body.gp-printing .footer, body.gp-printing .banner,
  body.gp-printing .wrap > :not(.gp-print) { display: none !important }
  html:has(body.gp-printing), body.gp-printing { background: var(--g-print-bg) !important }
  body.gp-printing .wrap { max-width: none; margin: 0; padding: 0 }
  .gp-print { display: block; color: var(--g-print-text); background: var(--g-print-bg); font: 11pt var(--sans) }
  .gp-print h1 { margin: 0 0 4px; font-size: 18pt; color: var(--g-print-text) }
  .gp-print h2 { margin: 14px 0 4px; font-size: 12pt; color: var(--g-print-text) }
  .gp-print .meta { margin: 0 0 12px; color: var(--g-print-text) }
  /* The phone rules make tables blocks/flex rows; print widths can be under 640px. */
  .gp-print table { display: table !important; width: 100%; border-collapse: collapse }
  .gp-print thead { display: table-header-group !important; position: static !important; width: auto !important; height: auto !important;
    overflow: visible !important; clip: auto !important }
  .gp-print tbody { display: table-row-group !important }
  .gp-print tr { display: table-row !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important }
  .gp-print th, .gp-print td { display: table-cell !important; flex: none !important; margin: 0 !important; padding: 3px 6px !important;
    text-align: left !important; white-space: normal !important; color: var(--g-print-text) !important; font-size: 10pt !important;
    border: 0 !important; border-bottom: 1px solid var(--g-print-line) !important }
  .gp-print th { font-weight: 700 }
  .gp-print .pg { break-inside: avoid; page-break-inside: avoid }
}

/* ---------- Responsive ---------- */
@media (max-width: 1380px) {
  /* The wide local-only note gives way first; the live site shows the small avatar. */
  .localnote { display: none }
}
/* The tagline gives way before anything on the right (buttons, avatar) can be
   pushed off the edge of a laptop screen. */
@media (max-width: 1380px) {
  .tagline { display: none }
}
@media (max-width: 1180px) {
  .hbtn { padding: 8px 10px }
  .hacts, .hnav { gap: 8px }
}
@media (max-width: 980px) {
  .hdr { flex-wrap: wrap }
  .grid { grid-template-columns: minmax(0, 1fr) }
  .ctrl { margin-left: 0 }
  /* The nav + login note/avatar wrap instead of running off a tablet screen. */
  .hnav { flex-wrap: wrap }
  .banner { flex-wrap: wrap }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: minmax(0, 1fr) }
  /* Phones: less side padding so the leaderboard gets the width. */
  .hdr, .banner { padding-left: 16px; padding-right: 16px }
  .wrap { padding: 16px 12px 70px }
  .card h3 { flex-wrap: wrap; padding: 12px 14px }
  .card h3 .note { margin-left: 0; flex-basis: 100% }
  .lbtools { padding: 8px 12px }
  /* The header scrolls away on phones (three rows of buttons would cover a
     third of the screen), and no frosted glass: it is slow on phones and
     breaks repainting while scrolling in Chrome on Android. */
  .hdr { position: relative }
  .card, .tile, .hdr { backdrop-filter: none }
  /* Header rows: logo + avatar, then the four nav buttons in one row. */
  .hdr { flex-wrap: wrap; gap: 10px }
  .brand, .spacer { order: 0 }
  .hacts { order: 1 }
  .hnav { order: 2; flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; min-width: 0 }
  .hnav .hbtn { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 12.5px; white-space: nowrap; text-align: center; justify-content: center }
  .hnav .hbtn.askbtn { padding: 4px 6px; gap: 5px }
  .hnav .hbtn.askbtn img { width: 20px; height: 20px }
  /* Chat: full screen; the launcher is just the G mark (accessible name still "Ask G"). */
  .ask { inset: 0; width: auto; height: auto; border-radius: 0; border-width: 0; border-top: 2px solid var(--g-chrome-rim) }
  .askfab { right: 14px; bottom: 14px; padding: 4px }
  .askfab .t { display: none }
  .askfab img { width: 44px; height: 44px }
  /* 16px stops iOS zooming into the question box. */
  .askform textarea { font-size: 16px }
  /* Leaderboard as cards (no sideways scroll, no pinned cells, which Chrome
     on Android failed to repaint): rank / player / score / cut on the first
     line, the stat columns below, four per line, each with its label. */
  .tblwrap { overflow-x: visible }
  table, tbody { display: block }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0) }
  tbody tr:not(.cutline) { display: flex; flex-wrap: wrap; align-items: center; padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(22, 58, 47, .6) }
  tbody tr:not(.cutline) td { display: block; padding: 0; border: 0 }
  /* The first four cells fill the whole first line (36 + name + 64 + 80 =
     100%), so the stats always start on the next line. 80px fits "100%" + the arrow. */
  tbody tr:not(.cutline) td:nth-child(1) { flex: 0 0 36px; padding: 0 }
  tbody tr:not(.cutline) td:nth-child(2) { flex: 0 0 calc(100% - 180px); min-width: 0; white-space: normal; padding: 0 6px 0 4px }
  tbody tr:not(.cutline) td:nth-child(3) { flex: 0 0 64px; text-align: right; padding-right: 6px }
  tbody tr:not(.cutline) td:nth-child(4) { flex: 0 0 80px; text-align: right; white-space: nowrap }
  /* One line per player; tapping the row shows its stats below (four per line). */
  tbody tr.tap { cursor: pointer; padding: 8px 12px; -webkit-tap-highlight-color: transparent }
  tbody tr.tap:hover { background: none; box-shadow: none }
  tbody tr.tap:focus-visible { outline: 2px solid var(--g-mint); outline-offset: -2px }
  tbody tr.tap.open { background: rgba(46, 230, 166, .05); box-shadow: inset 3px 0 0 var(--g-mint) }
  /* Expand arrow drawn with borders (no font glyph needed). */
  tbody tr.tap td:nth-child(4)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 9px;
    border-right: 2px solid var(--g-muted); border-bottom: 2px solid var(--g-muted); transform: rotate(45deg);
    vertical-align: middle; transition: transform .15s }
  tbody tr.tap.open td:nth-child(4)::after { transform: rotate(-135deg); margin-bottom: -1px; border-color: var(--g-mint) }
  tbody tr.tap:not(.open) td.z { display: none }
  tbody tr:not(.cutline) td.z { flex: 0 0 25%; margin-top: 8px; padding: 0 4px; text-align: center; font-size: 12.5px }
  .pl small { font-size: 11px }
  /* Extra space below so the floating Model weights button never covers it. */
  .showall { padding: 12px 12px 72px; text-align: center; border-top: 1px solid var(--g-line) }
  .showall .hbtn { width: 100% }
  /* Weights: a floating button opens the panel as a slide-up sheet. */
  .wfab { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 45; padding: 12px 22px; border-radius: 999px;
    font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .6), 0 0 18px var(--g-glow) }
  .weights.sheet[hidden] { display: none }
  .weights.sheet.open { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; max-height: 88vh; overflow-y: auto;
    overscroll-behavior: contain; border-radius: 16px 16px 0 0; border-bottom: 0; background: var(--g-panel-solid);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .7); animation: sheet-up .2s ease-out }
  .weights.sheet .wclose { margin-left: auto; text-transform: none; letter-spacing: 0 }
  .weights.sheet h3 { position: sticky; top: 0; z-index: 2; background: var(--g-panel-solid) }
  .wbackdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55) }
  body.noscroll { overflow: hidden }
  .wrap { padding-bottom: 96px }
  td.z::before { content: attr(data-label); display: block; font-size: 9.5px; letter-spacing: 1px; color: var(--g-muted); margin-bottom: 2px }
  td.z .bar { margin: 3px auto 0 }
  .cutline, .cutline td { display: block }
  .rk { width: 28px; height: 28px; font-size: 12px }
  .pl { font-size: 14px; line-height: 1.25 }
  .score { font-size: 14px }
  /* Group Picks (D11): no sideways scroll (clip keeps the bar sticky), the
     steps bar at the very top with Regenerate, a bottom-sheet tournament list,
     segmented input tabs, 16px inputs (no iOS zoom), room for the launcher. */
  .gp { overflow-x: clip }
  .wrap.gp { padding-bottom: 110px }
  .gp-bar { top: 0; padding: 9px 10px; gap: 8px; flex-wrap: nowrap; border-radius: 10px }
  .gp-bar .steps-m { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; color: var(--g-silver); font: 11.5px var(--mono) }
  .gp-bar .steps-m .sl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .gp-bar .steps-m b { color: var(--g-mint); font-weight: 700 }
  .gp-bar .dots { display: flex; gap: 4px }
  .gp-bar .dots i { width: 16px; height: 4px; border-radius: 2px; background: var(--g-line) }
  .gp-bar .dots i.on { background: var(--g-mint) }
  .gp-bar .acts { gap: 6px; flex: none }
  .gp-bar .acts .hbtn { padding: 9px 12px }
  .card.tour-row { z-index: auto }
  .tour-row .tpick { padding: 10px 12px; gap: 8px }
  .tour-row .picker { width: 100% }
  .tour-row .pbtn { width: 100%; justify-content: space-between }
  .tour-row .plist { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 66; min-width: 0; max-height: 75vh;
    border-radius: 18px 18px 0 0; padding: 10px 8px 18px }
  .tour-row .popt { padding: 12px }
  .gp .card h3 .h3sub { margin: 6px 0 0; width: 100% }
  .gp-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 12px 0 }
  .gp-tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
  .gp-tablist .hbtn { border-radius: 0; padding: 10px 4px; font-size: 12.5px; text-align: center }
  .gp-tablist .hbtn:first-child { border-radius: 8px 0 0 8px }
  .gp-tablist .hbtn:last-child { border-radius: 0 8px 8px 0 }
  .gp-tablist .hbtn.on { background: var(--g-mint); color: var(--g-mint-ink); border-color: var(--g-mint); font-weight: 700 }
  .gp-tabs .toggle { margin: 12px 0 0 }
  .gp-tabs .gen { width: 100%; margin: 10px 0 0; padding: 12px }
  .gp-err { padding: 8px 12px 0; text-align: left }
  .gp .inbody { padding: 12px }
  .gp-paste { min-height: 170px; font-size: 16px }
  .gp .num-in, .gp .add input, .gp .mfoot input { font-size: 16px }
  .gp .card h3 .r { margin-left: 0; width: 100%; font-size: 12.5px }
  .gp .modelnote { margin: 12px 12px 8px; padding: 7px 10px; font-size: 12px }
  .gp .legend { padding: 0 12px 12px; gap: 8px; font-size: 12px }
  .gp .how > summary { display: list-item; padding: 2px 12px 12px; color: var(--g-mint); font-size: 12.5px; cursor: pointer }
  .gp-addgrp .hbtn { width: 100% }
  .gp-toast { bottom: 84px }
}

/* ---------- Bet Analyzer (#bet-analyzer) ----------
   Ported from the approved mockup; every colour is a :root token (tints via
   color-mix). .ba = the page and the #ba-players panel, .bax = those plus the #ba-tip
   tooltip. #ba-card (My card) is inline in the page. Layers: controls bar 35, desktop
   Players panel 38 (under the header's 40), open tournament row 58, scrim 64, phone
   sheets 66 (the filter sheet opens inside the Players sheet), tooltip 70. */
.bax { --rk: color-mix(in srgb, var(--g-mint) 8%, var(--g-panel-solid)) }
.ba .card { margin-bottom: 18px }
.ba .card h3 { flex-wrap: wrap }
.bax .muted { color: var(--g-muted) }
.ba .phbanner { background: color-mix(in srgb, var(--g-amber) 14%, var(--g-bg)); color: var(--g-amber); border: 1px solid color-mix(in srgb, var(--g-amber) 45%, transparent);
  border-radius: 10px; padding: 9px 18px; margin: 0 0 14px; font-weight: 600; font-size: 13px; text-align: center }
.bax .phnote { margin: 10px 18px; padding: 9px 12px; border-left: 3px solid var(--g-amber); background: color-mix(in srgb, var(--g-amber) 8%, transparent);
  color: var(--g-amber); border-radius: 0 8px 8px 0; font-size: 12.5px }
.ba .howbody .phnote { margin: 0 0 10px }
.ba .tsrc { margin-left: auto; color: var(--g-muted); font-size: 12.5px }
/* Open tournament list above the sticky bar (set by TournamentRow). */
.ba .card.tour-row.listopen { z-index: 58 }
.ba .bamain { scroll-margin-top: var(--hdr-h, 76px) }
.ba .bafoot { color: var(--g-muted); font: 12px/1.8 var(--mono); text-align: center; margin: 30px 0 0 }
.ba .bafoot + .footer { margin-top: 0 }
/* Sticky controls bar, under the site's sticky header (app.jsx sets --hdr-h), like .gp-bar and .weights. */
.ba .ctl { position: sticky; top: var(--hdr-h, 76px); z-index: 35 }
.ba .ctl { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px;
  background: color-mix(in srgb, var(--g-panel-solid) 96%, transparent); border: 1px solid var(--g-line); border-radius: 12px;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--g-shade) 50%, transparent) }
.bax .seg { display: inline-flex; border: 1px solid var(--g-line); border-radius: 8px; overflow: hidden; flex: none }
.bax .seg button { background: transparent; border: 0; border-right: 1px solid var(--g-line); color: var(--g-silver); padding: 7px 12px; cursor: pointer;
  font: 13px var(--sans); white-space: nowrap }
.bax .seg button:last-child { border-right: 0 }
.bax .seg button[aria-pressed=true] { background: var(--g-mint); color: var(--g-mint-ink); font-weight: 700 }
.ba #ba-controls { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0 }
.ba .grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.bax .glab { font: 10.5px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--g-muted) }
.ba .fchip { border-radius: 999px; padding: 5px 11px; font: 12.5px var(--sans); background: transparent; border: 1px solid var(--g-line); color: var(--g-silver);
  cursor: pointer; white-space: nowrap }
.ba .fchip[aria-pressed=true] { background: var(--g-mint); border-color: var(--g-mint); color: var(--g-mint-ink); font-weight: 700 }
.bax select.sel { background: var(--g-panel-solid); color: var(--g-text); border: 1px solid var(--g-line); border-radius: 8px; padding: 6px 8px; font: 13px var(--sans) }
.bax select.sel option { background: var(--g-panel-solid); color: var(--g-text) }
/* Stake and Bet amount boxes: styled like an active lean chip, with a keyboard focus ring. */
.bax input.sel.num { background: var(--g-mint); border: 1px solid var(--g-mint); color: var(--g-mint-ink); border-radius: 999px;
  padding: 5px 11px; font: 700 12.5px var(--sans); accent-color: var(--g-mint-ink); width: 76px }
.bax input.sel.num:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 2px }
.ba .toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--g-silver); cursor: pointer; font-size: 13px; white-space: nowrap; position: relative }
.ba .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px }
.ba .toggle .track { width: 34px; height: 19px; border-radius: 999px; background: var(--rk); border: 1px solid var(--g-line); position: relative; transition: .15s; flex: none }
.ba .toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--g-muted); transition: .15s }
.ba .toggle input:checked + .track { background: var(--g-mint-dim); border-color: var(--g-mint) }
.ba .toggle input:checked + .track::after { left: 17px; background: var(--g-hi) }
.ba .toggle input:focus-visible + .track { outline: 2px solid var(--g-mint); outline-offset: 2px }
.ba .presets { gap: 8px; margin-left: auto }
.ba .preset2 { border-color: var(--g-amber); color: var(--g-amber) }
.ba .bafilt, .ba .sheethead { display: none }
/* Tables (the site's phone card layout is undone for these, below). */
.bax table { width: 100%; border-collapse: collapse }
.bax thead th { font: 600 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--g-muted); text-align: left; padding: 10px 7px;
  border-bottom: 2px solid var(--t-accent); white-space: nowrap; background: var(--g-panel-solid) }
.bax thead th.mk { text-align: center }
.bax tbody td { padding: 7px; border-bottom: 1px solid color-mix(in srgb, var(--g-line) 60%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle }
.bax td.num, .bax th.num { text-align: right; font-family: var(--mono) }
.ba .pl { min-width: 170px }
.ba .pl small { display: block }
.ba .pl small b { color: var(--g-silver); font-family: var(--mono); font-weight: 700 }
/* Market cell: clearance, lean chip, "$S pays $X" and N:1 after fees, value dot. */
.ba .cell { display: grid; grid-template-columns: auto auto; grid-template-areas: "clr clr" "chip chip" "px pf"; gap: 3px 8px; justify-items: center;
  align-items: center; width: 100%; min-width: 0; padding: 5px 6px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: inherit; font: inherit; cursor: help; position: relative }
.ba .cell:hover, .ba .cell:focus-visible, .ba .cell.tipped { border-color: var(--g-mint-dim); background: color-mix(in srgb, var(--g-mint) 6%, transparent) }
.ba .cell .lean { grid-area: chip; font-size: 9.5px; letter-spacing: .2px; padding: 2px 6px }
.ba .cell .clr { grid-area: clr } .ba .cell .px { grid-area: px; justify-self: end } .ba .cell .pf { grid-area: pf; justify-self: start }
.ba .cell.off { opacity: .22 }
/* Players grid (desktop): laid out at the card width so the last market column (Make Cut) is never clipped; # and Player get
   fixed shares, the six markets split the rest; long names, meta lines and "$1 pays $X" wrap instead of widening the table. */
.ba table.bagrid { table-layout: fixed; width: 100% }
.ba .bagrid thead th:first-child { width: 44px }
.ba .bagrid thead th:nth-child(2) { width: 17% }
.ba .bagrid td.pl { min-width: 0; white-space: normal; overflow-wrap: anywhere }
.ba .bagrid thead th.mk { white-space: normal; padding-left: 4px; padding-right: 4px }
.ba .bagrid tbody tr:not(.cutline) td:nth-child(n+3) { padding-left: 4px; padding-right: 4px }
.ba .bagrid .cell { min-width: 0; grid-template-columns: minmax(0, auto) minmax(0, auto) }
.ba .bagrid .cell .px { white-space: normal; text-align: right }
.ba .cell.chipcell { display: inline-flex; min-width: 0; width: auto }
.ba .cell.chipcell .lean { font-size: 10.5px; letter-spacing: .6px; padding: 2px 8px }
.bax .px { font: 11.5px var(--mono); color: var(--g-silver); white-space: nowrap }
.bax .pf { font: 700 12.5px var(--mono) }
.bax .na { color: var(--g-muted); font-weight: 400 }
.ba .vdot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--g-amber); box-shadow: 0 0 6px var(--g-amber) }
.bax .lean { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 8px; font: 700 10.5px var(--mono); letter-spacing: .6px;
  white-space: nowrap; border: 1px solid transparent }
/* Clearance bands: mint when cleared, amber on the line, red dashed when missed. */
.bax .lean.b-vs { background: var(--g-mint); color: var(--g-mint-ink) }
.bax .lean.b-s { background: color-mix(in srgb, var(--g-mint) 62%, var(--g-bg)); color: var(--g-mint-ink) }
.bax .lean.b-m { background: color-mix(in srgb, var(--g-mint) 28%, transparent); color: var(--g-hi) }
.bax .lean.b-w { background: color-mix(in srgb, var(--g-amber) 20%, transparent); color: var(--g-amber); border-color: color-mix(in srgb, var(--g-amber) 50%, transparent) }
.bax .lean.b-vw { border: 1px dashed color-mix(in srgb, var(--g-neg) 50%, transparent); color: var(--g-muted) }
.bax .clr { font: 11.5px var(--mono); color: var(--g-silver); white-space: nowrap }
.bax .clr.out { color: var(--g-muted) }
.bax .odds { font: 800 13px var(--mono); color: var(--g-hi) }
.bax .sbadge { display: inline-block; border-radius: 999px; padding: 1px 8px; font: 700 10.5px var(--mono); letter-spacing: .6px; background: var(--g-amber);
  color: var(--g-amber-ink); white-space: nowrap }
.bax .lbadge { display: inline-block; border-radius: 999px; padding: 1px 8px; font: 700 10.5px var(--mono); letter-spacing: .6px; border: 1px dashed var(--g-amber);
  color: var(--g-amber); white-space: nowrap }
.bax .fbadge { display: inline-block; border-radius: 999px; padding: 1px 8px; font: 700 10.5px var(--mono); letter-spacing: .6px; background: var(--rk);
  color: var(--g-muted); border: 1px solid var(--g-line); white-space: nowrap }
.bax .fbadge.sm { padding: 0 5px; font-size: 9.5px }
.bax .tbadge { display: inline-block; border-radius: 999px; padding: 1px 8px; font: 700 10.5px var(--mono); letter-spacing: .6px; border: 1px dashed var(--g-muted);
  color: var(--g-silver); white-space: nowrap }
.ba .abadge { color: var(--g-muted); font-size: 12px; white-space: nowrap }
.ba .rchip { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; border-radius: 999px; padding: 2px 4px 2px 10px; font: 12px var(--sans);
  text-transform: none; letter-spacing: 0; border: 1px solid var(--g-mint-dim); color: var(--g-hi) }
.ba .rchip button { background: none; border: 0; color: var(--g-silver); cursor: pointer; font-size: 14px; padding: 0 6px }
.ba .addall { padding: 4px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; margin-left: 6px }
.bax .addb { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--g-mint-dim); background: transparent; color: var(--g-mint); cursor: pointer;
  font-weight: 800; flex: none }
.bax .addb:hover { background: var(--g-mint); color: var(--g-mint-ink) }
/* Value grid (clearance x payout), a table with a button per cell. */
.ba table.vgrid { table-layout: fixed; border-collapse: separate; border-spacing: 6px; padding: 6px 8px 10px }
.ba .vgrid thead th { border-bottom: 0; background: none; text-align: center; padding: 4px 6px }
.ba .vgrid thead th:first-child { width: 150px }
.ba .vgrid th.vr { display: flex; align-items: center; gap: 6px; padding: 4px 0; font: 12.5px var(--sans); color: var(--g-silver); text-align: left;
  border: 0; text-transform: none; letter-spacing: 0 }
.ba .vgrid tbody td { padding: 0; border: 0; white-space: normal }
.ba .vcell { --heat: 0; position: relative; display: block; width: 100%; text-align: left; min-height: 92px; padding: 8px 9px; border-radius: 10px; cursor: pointer;
  color: var(--g-text); font: inherit; border: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-mint) calc(var(--heat) * 34%), var(--g-panel-solid)) }
.ba .vcell:hover, .ba .vcell:focus-visible { border-color: var(--g-mint); box-shadow: 0 0 14px var(--g-glow) }
.ba .vcell.sweet { border-color: color-mix(in srgb, var(--g-amber) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-amber) 35%, transparent) }
.ba .vcell.empty { cursor: default; opacity: .45 }
.ba .vcell .vn { display: block; font: 800 18px var(--mono); color: var(--g-hi) }
.ba .vcell .vn small { font: 400 11px var(--sans); color: var(--g-muted) }
.ba .vcell .vt { display: block; font: 11px/1.5 var(--mono); color: var(--g-silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ba .vcell.hot .vn, .ba .vcell.hot .vt, .ba .vcell.hot .vn small { color: var(--g-mint-ink) }
.ba .vnote { padding: 0 14px 14px; color: var(--g-muted); font-size: 12.5px }
.bax .empty { padding: 18px; color: var(--g-muted) }
.bax .lnote { padding: 10px 18px 14px; color: var(--g-muted); font-size: 12.5px; border-top: 1px solid var(--g-line) }
/* Legend + How this works */
.ba .legend { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; padding: 10px 18px; font-size: 12.5px; color: var(--g-muted); border-top: 1px solid var(--g-line) }
.ba .legend .lg { display: inline-flex; gap: 5px; align-items: center; max-width: 100%; min-width: 0 }
.ba .lmore { display: flex; justify-content: center; padding: 10px 18px 14px; border-top: 1px solid var(--g-line) }
.ba .how summary { padding: 14px 18px; cursor: pointer; font: 12px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--g-silver) }
.ba .how summary::marker { color: var(--g-mint) }
.ba .howbody { padding: 0 18px 16px; color: var(--g-silver); font-size: 13px; line-height: 1.6 }
.ba .howbody code { font: 12.5px var(--mono); color: var(--g-mint) }
.ba .howbody table { width: auto; margin: 6px 0 10px }
.ba .howbody td { padding: 4px 14px 4px 0; border: 0; white-space: normal }
.bax .caveat { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--g-amber); background: color-mix(in srgb, var(--g-amber) 7%, transparent);
  border-radius: 0 8px 8px 0; color: var(--g-silver) }
.bax table.cunits { width: auto; margin: 6px 0 10px }
.bax table.cunits th, .bax table.cunits td { padding: 4px 10px; text-align: left }
.bax table.cunits td.num { text-align: right }
@media (max-width: 640px) { .bax table.cunits th, .bax table.cunits td { padding: 4px 6px } }
.bax ul.hrisk { margin: 2px 0 10px; padding-left: 18px }
.bax .role { display: inline-block; border-radius: 6px; padding: 0 6px; font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .6px; border: 1px solid var(--g-line) }
/* Bet type colour (--ty): one token per type, shared by the Type chips and the My card matrix cells (cell colour = bet type). */
.bax .role.core, #ba-card .cc.ty-core { --ty: var(--g-silver) }
.bax .role.favourite, #ba-card .cc.ty-favourite { --ty: var(--g-cyan) }
.bax .role.safe, #ba-card .cc.ty-safe { --ty: var(--g-mint) }
.bax .role.reach, #ba-card .cc.ty-reach { --ty: var(--g-amber) }
.bax .role.favourite { color: var(--ty); border-color: color-mix(in srgb, var(--ty) 55%, transparent) }
.bax .role.safe { color: var(--ty); border-color: var(--g-mint-dim) }
.bax .role.core { color: var(--ty) }
.bax .role.reach { color: var(--ty); border-color: color-mix(in srgb, var(--ty) 50%, transparent) }
/* Tooltip */
#ba-tip { position: fixed; z-index: 70; max-width: 340px; padding: 10px 12px; background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim); border-radius: 10px;
  box-shadow: 0 0 18px var(--g-glow), 0 14px 40px color-mix(in srgb, var(--g-shade) 60%, transparent); font-size: 12.5px; line-height: 1.5; pointer-events: none;
  color: var(--g-text) }
#ba-tip[hidden] { display: none }
#ba-tip.pinned { pointer-events: auto }
#ba-tip h5 { margin: 0 0 4px; font-size: 13px }
#ba-tip .tr { display: flex; justify-content: space-between; gap: 14px }
#ba-tip .tr span:first-child { color: var(--g-muted) }
#ba-tip .tr span:last-child { font-family: var(--mono) }
#ba-tip hr { border: 0; border-top: 1px solid var(--g-line); margin: 6px 0 }
#ba-tip .tpx { font-size: 11px }
#ba-tip .tsrcl { margin-top: 4px; color: var(--g-amber); font-size: 11.5px }
#ba-tip .tsrcl.muted { color: var(--g-muted) }
#ba-tip .tipadd { display: flex; align-items: center; gap: 8px; color: var(--g-silver) }
/* Phone rows + bet cards (rendered instead of the tables at <= 640px) */
.ba .prow { border-bottom: 1px solid color-mix(in srgb, var(--g-line) 60%, transparent) }
.ba .pchip { display: flex !important; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; row-gap: 2px }
.ba .pchip .lean { font-size: 9.5px; letter-spacing: .2px; padding: 1px 6px }
.ba .pmeta { padding: 0 12px 8px 50px; color: var(--g-muted); font-size: 11.5px }
.ba .phead { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 14px; gap: 8px; align-items: center; width: 100%; padding: 9px 12px; background: none;
  border: 0; color: var(--g-text); text-align: left; cursor: pointer; min-height: 52px; font: inherit }
.ba .phead .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700 }
.ba .phead .nm small { display: block; font-weight: 400; color: var(--g-muted); font-size: 11px; white-space: normal }
.ba .phead .bp { font: 700 12px var(--mono); text-align: right; white-space: nowrap }
.ba .phead .bp small { display: block; font-weight: 400; color: var(--g-muted); font-size: 10px }
.ba .phead .chev { width: 7px; height: 7px; border-right: 2px solid var(--g-muted); border-bottom: 2px solid var(--g-muted); transform: rotate(45deg); transition: transform .15s; justify-self: center }
.ba .prow.open { background: color-mix(in srgb, var(--g-mint) 5%, transparent); box-shadow: inset 3px 0 0 var(--g-mint) }
.ba .prow.open .chev { transform: rotate(-135deg); border-color: var(--g-mint) }
.ba .pbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 10px 12px }
.ba .pbody .cell { min-width: 0; grid-template-columns: 1fr; grid-template-areas: "clr" "lab" "chip" "px" "pf"; gap: 2px; border-color: var(--g-line) }
.ba .pbody .cell .clr { justify-self: center; font-size: 10px; white-space: normal; text-align: center; line-height: 1.25 }
.ba .pbody .cell .lab { grid-area: lab; font: 10px var(--mono); letter-spacing: 1px; color: var(--g-muted); text-transform: uppercase }
.ba .pbody .cell .px, .ba .pbody .cell .pf { justify-self: center }
.ba .pbody .cell .px { font-size: 10.5px; white-space: normal; text-align: center }
.ba .pbody .cell .lean { white-space: normal; text-align: center; justify-content: center; line-height: 1.3 }
.ba .bcards { display: flex; flex-direction: column; gap: 8px; padding: 10px }
.ba .bwrap { display: flex; gap: 6px; align-items: center }
.ba .bwrap .bcard { flex: 1 1 auto; min-width: 0 }
.ba .bcard { border: 1px solid var(--g-line); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--g-bg) 60%, transparent); position: relative;
  width: 100%; text-align: left; color: inherit; cursor: pointer }
.ba .bcard.cell { display: block; padding: 10px 12px; border-color: var(--g-line) }
.ba .bcard .l1 { display: flex; gap: 8px; align-items: center; min-width: 0; width: 100%; justify-content: flex-start }
.ba .bcard .l1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ba .bcard .l2 { display: flex; gap: 12px; align-items: center; margin-top: 6px; flex-wrap: wrap; font: 12px var(--mono); color: var(--g-silver) }
.ba .bcard .l2 .pf { margin-left: auto; font-size: 15px }
/* Players panel: a slide-out on the right on desktop (non-modal), a near full-height sheet on phones (modal). */
#ba-players { position: fixed; right: 0; bottom: 0; width: min(760px, 100vw); display: flex; flex-direction: column; background: var(--g-panel-solid);
  color: var(--g-text); border-left: 2px solid var(--g-mint-dim); box-shadow: -14px 0 40px color-mix(in srgb, var(--g-shade) 60%, transparent) }
#ba-players[hidden] { display: none }
@media (min-width: 641px) {
  #ba-players { top: var(--hdr-h, 76px); bottom: 0; z-index: 38 }   /* below .hdr (40) so header dropdowns drop over it; above .ctl (35) */
}
#ba-players .cpbody { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 14px; overscroll-behavior: contain }
#ba-players .ctl { top: 0 }   /* sticks to the top of the panel's own scroll box */
#ba-players .card { margin-bottom: 0 }
/* Six market columns in the panel width: each cell stacks clearance / lean / pays / N:1 in one column and the clearance
   line wraps, so no cell is wider than its column (Make Cut never clipped). */
#ba-players .bagrid .cell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "clr" "chip" "px" "pf"; gap: 2px; padding: 5px 3px }
#ba-players .bagrid .cell .px, #ba-players .bagrid .cell .pf { justify-self: center; text-align: center }
#ba-players .cell .px { color: var(--g-hi) }   /* "$1 wins $X" is the cell's payout (no N:1 in the panel) */
#ba-players .bagrid .clr { white-space: normal; text-align: center; overflow-wrap: anywhere }
/* My card: the page's main view, inline (a .card). */
#ba-card .cphead, #ba-players .cphead, #ba-slip .cphead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--g-line) }
#ba-card .cphead h2, #ba-players .cphead h2, #ba-slip .cphead h2 { margin: 0; font-size: 18px }
#ba-card .cphead .muted, #ba-players .cphead .muted, #ba-slip .cphead .muted { display: block; font-size: 12.5px }
#ba-card .playersbtn { flex: none; border-color: var(--g-mint-dim); color: var(--g-hi); font-weight: 700 }
#ba-card .cpbody, #ba-slip .cpbody { padding: 6px 0 12px }
#ba-card .cpfoot, #ba-slip .cpfoot { padding: 10px 16px; border-top: 1px solid var(--g-line); color: var(--g-muted); font: 11.5px var(--mono); text-align: center }
#ba-card .cprow, #ba-slip .cprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px }
#ba-card .cmx th.cpl { text-align: left; white-space: nowrap; font: 600 13px var(--sans); color: var(--g-text); letter-spacing: 0; text-transform: none;
  vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--g-line) 60%, transparent) }
#ba-card .cmx th.cpl .cnm { display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
#ba-card .cmx th.cpl .cfr { display: inline-block; vertical-align: middle; margin-left: 6px; color: var(--g-muted); font: 11px var(--mono) }
#ba-card .cmx td, #ba-card .cmx th { padding: 4px 3px }
/* Bet Score: the player's best line score at this risk; the grid is sorted by it. */
#ba-card .cmx .cbs { width: 1%; text-align: right; vertical-align: middle; padding: 4px 10px 4px 16px; font: 700 13px var(--mono); color: var(--g-text); white-space: nowrap }
#ba-card .cmx thead th.cbs { font: inherit; color: inherit; cursor: help }
/* Show all: players not on the card are muted until a cell is ticked. */
#ba-card .cmx tr.off th.cpl, #ba-card .cmx tr.off .cbs { color: var(--g-muted); font-weight: 500 }
#ba-card .cmx tr.off .cc label { opacity: .55 }
#ba-card .cmx tr.off .cc label:hover, #ba-card .cmx tr.off .cc label:focus-within { opacity: 1 }
/* Bets slider (how many of the highest-scoring lines the card keeps) with its value beside it. */
#ba-card .cbets { display: inline-flex; align-items: center; gap: 8px }
#ba-card .cbets input { width: 140px; margin: 0; accent-color: var(--g-mint) }
#ba-card .cbets output { min-width: 2ch; text-align: right; font: 700 13px var(--mono); color: var(--g-text) }
#ba-card .cc label { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border-radius: 7px; border: 1px solid var(--g-line);
  cursor: pointer; position: relative; min-width: 58px }
#ba-card .cc input { margin: 0; accent-color: var(--g-mint) }
#ba-card .cc .ccp { font: 11px var(--mono); color: var(--g-muted) }
#ba-card .cc b { font: 700 11.5px var(--mono) }
/* Cell colour = bet type only (--ty above): staked lines solid with a tint, unticked / dropped lines a muted dashed border. */
#ba-card .cc.ty label { border: 1px dashed color-mix(in srgb, var(--ty) 55%, transparent); background: color-mix(in srgb, var(--ty) 5%, transparent) }
#ba-card .cc.ty.st label { border-style: solid; border-color: var(--ty); background: color-mix(in srgb, var(--ty) 14%, transparent) }
#ba-card .cc.ty input { accent-color: var(--ty) }
#ba-card .cc.b-vw label { opacity: .6 }
#ba-card .cc.na { text-align: center; color: var(--g-muted) }
#ba-card .ccs { position: absolute; top: 1px; right: 3px; font-style: normal; color: var(--g-amber); font-size: 10px }
#ba-slip .ccs1 { font-style: normal; color: var(--g-amber); font-size: 11px }
#ba-slip .cstrip { display: flex; align-items: flex-end; gap: 2px; height: 52px; margin: 4px 16px; padding: 2px; border-bottom: 1px solid var(--g-line) }
#ba-slip .cstrip i { flex: 1 1 0; min-width: 2px; max-width: 14px; background: color-mix(in srgb, var(--g-mint) 70%, transparent); border-radius: 2px 2px 0 0 }
#ba-card .cwarn, #ba-slip .cwarn { margin: 8px 16px; padding-left: 18px; color: var(--g-amber); font-size: 12.5px }
#ba-card .cdol { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; color: var(--g-silver) }
#ba-card .cdol .num { width: 84px }
#ba-slip .ch4 { margin: 12px 16px 4px; font: 12px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--g-silver) }
/* Card lines: one table row per line (Player | Market | Odds | Lean | Type | Clearance | Stake | Pays | % of stake | ×). */
#ba-slip .clines th, #ba-slip .clines td { padding: 5px 6px; font-variant-numeric: tabular-nums }
#ba-slip .clines td.llean, #ba-slip .clines td.ltype { text-align: left }
#ba-slip .clines th.num, #ba-slip .clines td.num { text-align: right }
#ba-slip .clines .lrm { width: 1%; text-align: center }
/* Sortable headers: the whole header is a button (Enter / Space); ▲ / ▼ shows the active sort. */
#ba-slip .clines thead th[aria-sort] { padding: 0 }
#ba-slip .clines .lsort { display: block; width: 100%; padding: 5px 6px; border: 0; background: none; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: inherit; white-space: nowrap; cursor: pointer }
#ba-slip .clines .lsort:hover { color: var(--g-hi) }
#ba-slip .clines .lsort:focus-visible { outline: 2px solid var(--g-cyan); outline-offset: -2px }
#ba-slip .clines th[aria-sort="ascending"], #ba-slip .clines th[aria-sort="descending"] { color: var(--g-hi) }
#ba-slip .clines .lsa { display: inline-block; min-width: 1em; margin-left: 2px; font-size: 9px }
#ba-slip .clines .lpl { white-space: nowrap; text-align: left }
#ba-slip .clines tfoot th, #ba-slip .clines tfoot td { border-top: 2px solid var(--g-line); font: 700 12px var(--mono); color: var(--g-hi); text-align: right; white-space: nowrap }
#ba-slip .clines tfoot th { text-align: left; text-transform: uppercase; letter-spacing: 1px; color: var(--g-muted) }
#ba-card .rmix { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 16px 0; font-size: 12.5px; color: var(--g-muted) }
#ba-card .rmix b { font: 700 12.5px var(--mono); color: var(--g-hi) }
#ba-slip .caveat { margin: 8px 16px }
#ba-card .phnote { margin: 10px 16px }
.ba-scrim { position: fixed; inset: 0; z-index: 64; background: color-mix(in srgb, var(--g-shade) 55%, transparent) }
/* Executive summary tiles above the steps (GAIMBets.cardTiles): 3 per row, 2 on phones. */
.wrap > .tiles.basum { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px }
.tiles.basum .tile .v { white-space: nowrap }
.tiles.basum .tile .s { min-width: 0 }
/* Step headings: ">_ 2 · Select Strategy" / ">_ 3 · Export Betting Slip". */
#ba-card .cphead h2 .pfx, #ba-slip .cphead h3 .pfx { color: var(--g-mint) }
#ba-slip .cphead h3 { margin: 0; padding: 0; border: 0; font-size: 18px; font-family: inherit; letter-spacing: 0; text-transform: none; color: inherit }
#ba-slip { margin-top: 18px }
/* Ask GAIM on this page: what it can and can't see. */
.asknote { color: var(--g-muted); font-size: 11px; line-height: 1.35 }
@media (max-width: 640px) {
  .ba { overflow-x: clip }
  /* The header scrolls away on phones, so the bar sticks to the top. */
  .ba .ctl { top: 0; padding: 8px; gap: 8px }
  .ba .bafilt { display: inline-flex; flex: 1 1 0; justify-content: center; padding: 9px 8px }
  /* Filters become a bottom sheet (inside .ctl, so the bar is lifted over the scrim). */
  .ba #ba-controls { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 66; flex-direction: column; align-items: stretch; gap: 14px;
    max-height: 80vh; overflow-y: auto; background: var(--g-panel-solid); border-top: 2px solid var(--g-mint-dim); border-radius: 18px 18px 0 0;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px color-mix(in srgb, var(--g-shade) 60%, transparent) }
  .ba #ba-controls.open { display: flex }
  .ba .ctl.sheetopen { z-index: 65 }
  .ba .sheethead { display: flex; align-items: center; justify-content: space-between }
  .ba .sheethead b { font-size: 16px }
  .ba .grp { gap: 8px }
  .ba .glab { width: 100% }
  .ba .fchip { padding: 9px 13px; font-size: 13.5px }
  .ba .toggle { white-space: normal }
  .bax .seg button { padding: 9px 12px }
  .bax select.sel { width: 100%; padding: 10px; font-size: 16px }
  .bax input.sel.num { padding: 9px 13px; font-size: 16px }   /* 16px so iOS doesn't zoom on focus */
  .ba .preset, .ba .preset2 { margin-left: 0; width: 100%; justify-content: center; padding: 12px }
  .ba .presets { width: 100%; margin-left: 0 }
  .ba .tsrc { margin-left: 0 }
  .ba .phbanner { padding: 9px 12px }
  .ba .legend { padding: 10px 12px; gap: 8px }
  .ba .howbody { padding: 0 12px 14px }
  .ba .how summary { padding: 12px }
  .ba .tile .s { white-space: normal }
  /* The site's phone leaderboard turns every table into cards; these stay tables, scrolling inside their own box. */
  .bax .tblwrap { overflow-x: auto }
  .bax table { display: table }
  .bax thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group }
  .bax tbody { display: table-row-group }
  .bax tbody tr:not(.cutline) { display: table-row; padding: 0; border-bottom: 0 }
  .bax tbody tr:not(.cutline) td, .bax tbody tr:not(.cutline) td:nth-child(n) { display: table-cell; flex: none; padding: 7px; text-align: inherit; white-space: nowrap }
  .ba table.vgrid { border-spacing: 4px; padding: 4px }
  .ba .vgrid thead th { font-size: 9px; letter-spacing: 0; padding: 2px }
  .ba .vgrid thead th:first-child { width: 62px }
  .ba .vgrid th.vr { font-size: 10.5px; line-height: 1.2 }
  .ba .vgrid th.vr .lean { font-size: 9px; padding: 1px 4px; letter-spacing: 0 }
  .ba .vgrid tbody tr:not(.cutline) td:nth-child(n) { padding: 0 }
  .ba .vcell { min-height: 46px; padding: 6px 4px; text-align: center }
  .ba .vcell .vt, .ba .vcell .vn small { display: none }
  .ba .vcell .vn { font-size: 16px }
  #ba-tip { left: 12px !important; right: 12px; max-width: none }
  #ba-players { top: 4vh; left: 0; width: auto; z-index: 66; border-left: 0; border-top: 2px solid var(--g-mint-dim); border-radius: 18px 18px 0 0 }
  #ba-players .cphead { padding: 12px }
  #ba-players .cpbody { padding: 8px 8px calc(14px + env(safe-area-inset-bottom)) }
  #ba-card .cphead, #ba-slip .cphead { padding: 12px; flex-wrap: wrap }
  #ba-card .cprow, #ba-slip .cprow { padding: 8px 12px }
  .wrap > .tiles.basum { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tiles.basum .tile .row { flex-wrap: wrap }
  #ba-card .cc label { min-width: 46px }
  #ba-card .cmx th.mkcut { white-space: normal; line-height: 1.25 }   /* "Make Cut" on two lines keeps the column at the cell width */
  #ba-card .cmx th.cpl .cnm { max-width: 92px }
  #ba-card .cbets { flex: 1 1 100%; min-height: 32px }
  #ba-card .cbets input { flex: 1; width: auto; min-height: 32px }
  #ba-card .cmx tbody tr:not(.cutline) td:nth-child(n) { padding: 4px 3px }
  /* Card lines stay a table, scrolling sideways inside its own box; the Player column stays pinned. */
  #ba-slip .clines tbody tr:not(.cutline) td:nth-child(n) { padding: 5px 6px }
  #ba-slip .clines thead th:first-child, #ba-slip .clines tbody td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--g-panel-solid) }
}

@keyframes sheet-up { from { transform: translateY(100%) } to { transform: none } }

/* Reduced motion: no animations or transitions anywhere (effects.js also
   stops the rain loop and draws one static frame). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}