/*
  THE PUBLIC SITE CARRIES THE WIN THE WEEK IDENTITY, NOT THE APP'S SCREEN
  CHROME. `theme.css` is still loaded (see affiliate.html) but ONLY for its
  structural [hidden] fix, shared by every page that toggles the attribute —
  see hidden-attribute.test.ts. Its `:root` palette and blue accent are the
  in-app product's own colour, unrelated to the racecourse identity this brand
  is built to be recognised by (`docs/BRAND.md`) — a stranger landing on this
  domain has never opened the app and has nothing to match it against — so
  every token and rule below is deliberately redeclared to override it. The
  tokens are that identity's palette and type stack, ported as CSS rather
  than restated by eye, so a change to the source stays the one place this
  ever needs to be corrected from.

  This is a "ledger" surface in that identity's own terms: a scannable list of
  prices, read carefully, same family as the race card. Paper body, turf
  masthead, gold for anything live or actionable — never decorative.
*/

:root {
  --turf: #0a3a28;
  --paper: #efe3c8;
  --paper-alt: #e8dabb;
  --rule: #d3bf95;
  --gold: #c8a24a;
  --ink: #171310;
  --ink-soft: #6b5e48;
  --claret: #8e2434;
  --muted-on-turf: #8fa79a;
}

* {
  box-sizing: border-box;
}

/*
  OSWALD IS A LABEL FACE, NOT A READING FACE — the brand's own type table
  (§4) never lists it for paragraph copy, only for names, prices, headlines
  and column heads. The first cut set it as the page's default font, which
  put every sentence of prose on the site into a condensed display face:
  legible on a card's short lines, hard going on desktop where a paragraph
  is read at length. The system stack is the reading face; Oswald is opted
  into explicitly, only where the brand table actually asks for it.
*/
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* The slip bar is fixed, so the last row of every list needs somewhere to go. */
  padding-bottom: 96px;
}

/* ---- Masthead — the wordmark, always Bitter ExtraBold, gold on turf. ---- */
.masthead {
  background: var(--turf);
  padding: 22px 16px 16px;
  text-align: center;
}
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.brand {
  font-family: Bitter, serif;
  font-weight: 800;
  font-size: clamp(24px, 6vw, 32px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.tag {
  margin-top: 4px;
  color: var(--muted-on-turf);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

.card {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}
.card h1,
.card h2 {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.card h1 {
  font-size: 21px;
  margin: 0 0 8px;
}
.card h2 {
  font-size: 17px;
  margin: 0 0 8px;
}
.card p {
  margin: 0 0 12px;
}
.card p:last-child {
  margin-bottom: 0;
}

/* Turf-bodied — a statement, not a ledger: one call to action, read at a
   glance. Same distinction §6 of the brand doc draws between card families. */
.card-turf {
  background: var(--turf);
  border-color: var(--turf);
  color: var(--paper);
}
.card-turf h2 {
  color: var(--gold);
}
.card-turf p {
  color: var(--muted-on-turf);
}
/* THE REAL NUMBER, gold — "live value" is the one meaning that colour
   carries (§3), never decorative. Everything else in this card is the pitch;
   this is the fact. */
/* ---- The coupon: one market down the card, prices in gold panels. ---- */
.coupon-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.coupon-controls select {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.crow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.crow:last-child {
  border-bottom: none;
}
.crow-who {
  min-width: 0;
}
.crow-name {
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.crow-sub {
  color: var(--ink-soft);
  font-size: 12px;
}
.cpicks {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/*
  THE LABEL SITS ABOVE THE PANEL, NOT INSIDE IT — the in-app coupon's own
  layout, taken rather than re-decided, and the reason is the same on both
  surfaces. A club name inside the panel makes every panel a different width,
  so ten fixtures down a phone line up nowhere; with only the price inside,
  every panel is four characters wide and the column is a column. It also
  keeps gold meaning what §3 says it means: the panel holds a PRICE.
*/
.cpick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 50px;
}
.cpick-label {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
  font-family: Oswald, sans-serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/*
  THE FIELD, on turf — a race card's own layout: rank, runner, price. The
  price is gold because gold means live value (§3) and is the only thing on
  this card that colour is spent on.
*/
.wtw-league {
  margin-top: 14px;
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}
.card-turf h3 {
  margin: 14px 0 6px;
  color: var(--paper);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.runners {
  list-style: none;
  margin: 0;
  padding: 0;
}
.runner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-on-turf) 25%, transparent);
  color: var(--paper);
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.runner:last-child {
  border-bottom: none;
}
/* The claret edge bar (§5) — it marks the one row that matters, which here
   is the visitor's own. */
.runner.you {
  border-left: 4px solid var(--claret);
  padding-left: 8px;
  margin-left: -12px;
  font-weight: 700;
}
.runner-rank {
  width: 22px;
  flex-shrink: 0;
  color: var(--muted-on-turf);
  font-variant-numeric: tabular-nums;
}
.runner-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.runner-price {
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   THE ENTRANT EXPAND — the name is a control, and it looks like one on a PHONE.

   `:hover` was the whole affordance on the Telegram version of this and it is
   NOTHING on a touch screen, so thirteen tappable names read as plain text and
   the owner missed the feature entirely. The name carries a chevron AND the
   gold the card already uses for something you can act on, both of which a
   phone renders.
   --------------------------------------------------------------------------- */
.runner-open {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.runner-open .runner-name {
  border-bottom: 1px dotted color-mix(in srgb, var(--paper) 55%, transparent);
}
.runner-open .chev {
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
}
/* The sentence that says the feature EXISTS. An affordance says which thing is
   tappable; only this says that anything is. */
.tap-hint {
  margin: 4px 0 0;
  color: var(--muted-on-turf);
  font-size: 13px;
}
.sledge {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--muted-on-turf) 35%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 8%, transparent);
}
/* FPL'S OWN COUNTRY AND CLUB TABLES, set apart from the rooms: they carry no
   price and never will. */
.sledge .runner.sys {
  opacity: 0.7;
}
.sledge h3 {
  margin: 0 0 2px;
}
.sledge-sub {
  margin: 0 0 8px;
  color: var(--muted-on-turf);
  font-size: 13px;
}
.sledge .ghost {
  float: right;
  background: none;
  border: 1px solid color-mix(in srgb, var(--muted-on-turf) 45%, transparent);
  border-radius: 4px;
  color: var(--muted-on-turf);
  padding: 2px 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sledge-share {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--gold);
  color: var(--turf);
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
}

.muted {
  color: var(--ink-soft);
}
.small {
  font-size: 13px;
}

#search input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
}
#search input::placeholder {
  color: var(--ink-soft);
}

#results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
#results li {
  margin-bottom: 6px;
}
#results button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
#results button:hover {
  border-color: var(--gold);
}
/* A NAME, per the brand's own type table (§4) — Oswald Bold, same face the
   team header and every offer's subject use. */
.result-team {
  font-family: Oswald, sans-serif;
  font-weight: 700;
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.team-name {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

#offers {
  list-style: none;
  margin: 0;
  padding: 0;
}
#offers li {
  margin-bottom: 8px;
}
/*
  THE PRICE PANEL — the most reused component in the identity (§5): a filled
  gold rectangle, rx=4, holding a price. Gold is the meaning "live value", so
  this is the one place on the page that colour appears — the offer row
  itself stays paper, the tap-out stays gold.
*/
.offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.offer:hover {
  border-color: var(--gold);
}
.offer-label {
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.offer-cta {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--ink);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 15px;
}

/* A secondary action — outline, not filled, per the status-chip rule (§5):
   filled marks something LIVE, outline marks something PENDING/secondary. */
.share-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: 1px solid var(--gold);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 4px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.share-btn:hover {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

#rg {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}
#rg a {
  color: var(--ink);
}

/* ---- This week's bets: a ledger row, the price in its own gold panel. ---- */
#bets,
.bets-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bet {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.bet:last-child {
  border-bottom: none;
}
/**
 * A GROUP HEADING IN THE BETS LIST — quiet, not a section break. The two
 * groups are one continuous list a thumb scrolls through, so the heading marks
 * where it changes rather than splitting the page in two.
 */
.bet-head {
  padding: 18px 0 6px;
  border-bottom: 1px solid var(--rule);
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.bet-body {
  min-width: 0;
}
/* THE MATCH, ONCE, ABOVE ITS LEGS — a bet builder is one thing, so it reads
   as one thing. See the note on `betRow`. */
.bet-fixture {
  color: var(--ink-soft);
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.bet-leg {
  line-height: 1.35;
}
.bet-leg-name {
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.bet-leg-sub {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
}

/* =====================================================================
   THE SLIP BAR — pinned, because a coupon is built over ten taps and the
   header's own chip scrolls away by the third. Same reasoning as the in-app
   coupon's running total.
   ===================================================================== */
.slip-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--turf);
  border-top: 2px solid var(--gold);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.slip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.slip-toggle {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.slip-clear {
  background: none;
  border: none;
  padding: 0 4px;
  color: var(--muted-on-turf);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.slip-place {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}
/* The price sits with the count, in the same gold — one line reading
   "4 selections · 12.40" rather than a number somewhere else on the bar. */
.slip-price {
  font-variant-numeric: tabular-nums;
}
.slip-panel {
  max-width: 480px;
  margin: 0 auto 10px;
  max-height: 40vh;
  overflow-y: auto;
}
.slip-panel .muted {
  color: var(--muted-on-turf);
}
.slip-legs {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.slip-leg {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-on-turf) 25%, transparent);
  color: var(--paper);
  font-family: Oswald, sans-serif;
  font-size: 14px;
}
.slip-leg:last-child {
  border-bottom: none;
}
.slip-x {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted-on-turf);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* A TAPPABLE PRICE, and one that is not.
   `.px-off` is a span rather than a disabled button — there is no listener at
   all rather than one that refuses — and it keeps full contrast, because
   finding the odds is not betting. */
.px {
  display: block;
  width: 100%;
  text-align: center;
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.px-off {
  cursor: default;
}
.px.picked {
  background: var(--claret);
  color: var(--paper);
}
.bet .px {
  width: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 15px;
}

/* =====================================================================
   TABS — four rooms, one at a time (owner, 2026-09-19).

   STICKY, because the tab bar is the only way between them and a page of a
   hundred and eighty bets would otherwise leave it a long way above. It sits
   ABOVE the slip bar in the z-order for the same reason the slip bar is
   pinned: the thumb reaches for the slip last.
   ===================================================================== */
.tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 4px;
  margin-top: 16px;
  padding: 8px 0;
  background: var(--paper);
  /* The page scrolls under it, so the rule is what stops the rows appearing
     to float out of the bar. */
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  /* A scrollbar under four tabs is noise on a desktop and nothing on a
     phone. */
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab,
.ltab {
  flex: 1 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-alt);
  color: var(--ink-soft);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
/* Turf on the chosen one — the masthead's own colour, so the tab bar reads as
   part of the page's furniture rather than as a control strip. */
.tab.on,
.ltab.on {
  background: var(--turf);
  border-color: var(--turf);
  color: var(--paper);
  font-weight: 700;
}

/* =====================================================================
   MOVES — one row per manager, the league's week rather than your own.
   ===================================================================== */
.moves {
  list-style: none;
  margin: 0;
  padding: 0;
}
.move {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.move:last-child {
  border-bottom: none;
}
/* The claret edge bar (§5) marks the one row that matters — here the
   visitor's own, kept rather than removed because it is the line the others
   are measured against. */
.move.you {
  border-left: 4px solid var(--claret);
  padding-left: 8px;
  margin-left: -12px;
}
.move-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.move-rank {
  width: 22px;
  flex-shrink: 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.move-name {
  font-weight: 700;
}
.move-team {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 13px;
}
.move-body {
  margin-top: 3px;
  padding-left: 30px;
  color: var(--ink-soft);
  font-size: 14px;
}
.move.you .move-body {
  padding-left: 30px;
}

/* THE FRONT DOOR — the one way into the bot, on every tab.
   Owner, 2026-09-19: bets are placed in Telegram and nowhere else, and the
   site is "worth getting traffic to". A site that points nowhere cannot do
   that job. Quiet rather than a call to action: the prices are the reason
   somebody is here. */
.tg-door {
  display: inline-block;
  background: none;
  cursor: pointer;
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   THE BET BUILDER — one fixture, many markets.

   A sheet rather than a page, because the coupon underneath is what it came
   from and a punter closing it should be exactly where they left off. It
   stops short of the slip bar so the bet being built stays readable while
   its legs are chosen — the same reason the slip opens expanded.
   ───────────────────────────────────────────────────────────────────────── */
.bb {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 30;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bb-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--turf);
  color: var(--paper);
}
.bb-title {
  font-family: Oswald, sans-serif;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.bb-sub {
  font-size: 13px;
  color: var(--muted-on-turf);
  margin-top: 2px;
}
.bb-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.bb-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 96px;
}
.bb-mkt {
  border-bottom: 1px solid var(--rule);
}
.bb-mh {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  padding: 14px 0;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.bb-c {
  color: var(--ink-soft);
  font-size: 13px;
}
.bb-picks {
  padding-bottom: 8px;
}
.bb-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.bb-l {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
/* WHAT THIS OPTION WOULD MAKE THE BET — quiet, because it is not the price
   of anything yet: it is the price of the bet plus this leg. */
.bb-f {
  color: var(--ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bb-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--turf);
  border-top: 2px solid var(--gold);
  color: var(--gold);
  font-family: Oswald, sans-serif;
}
.bb-odds {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
/* The door on a coupon row. A row that does something must look like it
   does — the lesson the entrant chevron cost on this same site. */
.crow-build {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   THE LEAGUE PAGE — every manager, their price here, and indented beneath,
   their price in each of their other leagues. The indent is the hierarchy:
   the league on screen first, the rest of their week under it.
   --------------------------------------------------------------------------- */
.lrows {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.lrow {
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-on-turf) 25%, transparent);
  color: var(--paper);
}
.lrow:last-child {
  border-bottom: none;
}
.lrow.you {
  border-left: 4px solid var(--claret);
  padding-left: 8px;
  margin-left: -12px;
}
.lrow-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: Oswald, sans-serif;
  font-size: 16px;
}
.lrow-who {
  flex: 1;
  min-width: 0;
}
.lrow-name {
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrow-team {
  display: block;
  color: var(--muted-on-turf);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrow-others {
  list-style: none;
  margin: 6px 0 0 32px;
  padding: 0;
}
.lrow-others li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: color-mix(in srgb, var(--paper) 85%, transparent);
}
.lrow-others .other-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrow-others .other-place {
  flex-shrink: 0;
  color: var(--muted-on-turf);
  font-size: 12px;
}
.lrow-others .other-price {
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}
/* Two classes deep, because `.card p` would otherwise take the indent away. */
.lrow .lrow-more {
  margin: 2px 0 0 32px;
  color: var(--muted-on-turf);
  font-size: 12px;
}
.me-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.you-chip {
  flex-shrink: 0;
  background: var(--claret);
  color: var(--paper);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.share-btn.on-turf {
  color: var(--paper);
}

/* ---- Your week: every league, your price — on the paper team card. ---- */
#my-week {
  margin-top: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.my-week-head {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.my-week {
  list-style: none;
  margin: 0;
  padding: 0;
}
.my-week a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  color: var(--ink);
  text-decoration: none;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.my-week li:last-child a {
  border-bottom: none;
}
.my-week .wk-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-week .wk-place {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-size: 12px;
}
.my-week .wk-price {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--ink);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}

/* ---- Drill-down rows: a league you can open, on turf. ---- */
a.drill {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.runner a.drill .runner-name {
  border-bottom: 1px dotted color-mix(in srgb, var(--paper) 55%, transparent);
}
.drill-place {
  flex-shrink: 0;
  color: var(--muted-on-turf);
  font-size: 12px;
}
a.drill .chev {
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
}
.lrow-others li a.drill {
  gap: 8px;
}

/* ---- The league page's buttons sit above its table. ---- */
.league-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}
.league-actions .share-btn {
  margin: 0;
}
.league-actions .tap-hint {
  flex-basis: 100%;
  margin: 0;
}
#league-mine {
  background: var(--gold);
  color: var(--ink);
}

/* ---- Moves by email: one field, on the team card and the league page. ---- */
.email-slot:empty {
  display: none;
}
.email-slot {
  flex-basis: 100%;
  margin-top: 12px;
}
.email-box {
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 12px;
}
.email-head {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.email-sub,
.email-note,
.email-done {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.email-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.email-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.email-form button {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 14px;
  border: 0;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
}
.email-slot.on-turf .email-box,
.email-slot.on-turf .email-done {
  color: var(--paper);
}
.email-slot.on-turf .link-btn {
  color: var(--gold);
}
.em-back {
  display: block;
  text-align: center;
  text-decoration: none;
}
.email-slot.on-turf .email-head {
  color: var(--gold);
}

/* The league tabs sit straight under the league's card. */
.league-tabs {
  margin-top: 4px;
}

/* LAST WEEK'S WINNER — the banner above a league's prices.
   `pre` because the card is built as text, once, for Telegram and the web
   alike: re-laying it out in HTML here would be a second wording to keep in
   step with the first. `pre-wrap` so a long league name still wraps on a
   phone. */
.winner-card {
  margin: 0 0 0.75rem;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* FUN ONLY — outside the betting countries, when that gate is on (owner,
   2026-10-29: "outside target markets for betting the iwintheweek site is fun
   only"). The prices stay, at full contrast, because finding the odds is not
   betting; every way into the bot goes. The page starts this way and the class
   comes off when the api says this visitor may bet. */
body.fun-only #tg-door,
body.fun-only #slip-bar,
body.fun-only .bet-only {
  display: none !important;
}
body.fun-only button.px {
  cursor: default;
  pointer-events: none;
}
body.fun-only .px.picked {
  background: var(--gold);
  color: var(--ink);
}

/* THE MANAGER SHEET — any name on the site opens it, over the page, from the
   bottom where the thumb is. Above the slip bar, so the share is never under it. */
.who-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  max-height: 88vh;
  overflow-y: auto;
  margin: 0;
  border-radius: 12px 12px 0 0;
  border: 0;
  border-top: 2px solid var(--gold);
  background: var(--turf);
  color: var(--paper);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgb(0 0 0 / 35%);
}
@media (min-width: 640px) {
  .who-sheet {
    left: 50%;
    width: 600px;
    transform: translateX(-50%);
  }
}
.who-treble {
  margin-top: 14px;
  padding: 12px;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.who-treble h4 {
  margin: 0 0 8px;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.who-treble ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.who-treble li {
  padding: 4px 0 4px 10px;
  border-left: 4px solid transparent;
  font-family: Oswald, sans-serif;
}
.who-treble li.diff {
  border-left-color: var(--claret);
}
.who-treble .leg-match {
  display: block;
  font-size: 12px;
  opacity: 0.7;
}
.who-treble .leg-diff {
  float: right;
  color: var(--claret);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.who-treble .treble-note {
  margin: 6px 0 0;
  color: var(--claret);
  font-size: 13px;
}
.who-treble .treble-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--gold);
  font-family: Oswald, sans-serif;
  font-weight: 700;
}
.who-treble .treble-price b {
  font-size: 22px;
}

/* A NAME ON THE LEAGUE PAGE IS A DOOR to that manager's sheet. */
button.lrow-open {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lrow-open .lrow-name {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent);
  text-underline-offset: 3px;
}

/* WHILE EVERYONE'S OTHER LEAGUES ARE BEING PRICED the rows hold still: the
   sub-lists are shown together once they are all in. Owner, 2026-10-29: "It
   might be better to price them all first then show them at once." */
#league-rows.filling .lrow-others,
#league-rows.filling .lrow-more {
  display: none;
}