/*
 * The Top Picks page (TopPicks.js, TopPickCard.js) and its way in on the
 * Quick Slip tab (TopPicksDoor).
 *
 * The shell is the tool pages' (account.css has the long form): fixed at
 * z-index 70 over the tab, fading while its sheet lifts, its own scroller.
 * Most of what is on it is borrowed rather than restated — the header card
 * and counter blob, the section labels, the pills in the filter sheet, the
 * sheets and the toasts are the Slip Builder's (slip-builder.css,
 * slip-controls.css, which gives this root the `--sd-*` motion scale); the
 * league cards are the fixture list's own (league-accordion.css); the
 * featured card's Add to slip is the Predictions tab's button; the combo
 * crests are My Slips' stack. What is new is declared here once: the day
 * navigator, the track record, the pick card and its ladder, the live meter,
 * the combo cards and the selection bar.
 *
 * Every card on the page is the house card — white, the hairline, the
 * shallow shadow — so the borrowed league cards and the new ones are one
 * material. Colour follows the tokens' owners: the accent for what is
 * chosen and for progress, the LIVE red for the running clock and nothing
 * else, the status trio for verdicts, always with a word beside it.
 */

/* --- Shell ----------------------------------------------------------------------- */

.top-picks {
  --enter-y: calc(12px * var(--scale));
  --tp-clear: max(var(--safe-bottom), var(--tg-chrome-inset, 0px));

  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  max-width: var(--app-max-width);
  margin-inline: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.top-picks[hidden] {
  display: none;
}

.top-picks [hidden] {
  display: none !important;
}

.top-picks[data-open="true"] {
  --enter-y: 0px;

  opacity: 1;
}

.top-picks__sheet {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--safe-top);
  transform: translateY(var(--enter-y));
  transition: transform var(--duration) var(--easing);
}

/* The page's own scroller, so the tab under it keeps its place. */
.top-picks__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.tp-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-4) calc(var(--space-8) + var(--safe-bottom));
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/*
 * Room under the last card for whatever floats over the foot of the page:
 * the slip tray's pill (the fixture page's own allowance) when nothing is
 * ticked, the selection bar — measured, since its conflict line comes and
 * goes — when something is.
 */
body[data-slip-tray="true"] .top-picks[data-tray="show"] .tp-page {
  padding-bottom: calc(var(--space-6) + var(--nav-height) + var(--space-5) + var(--tp-clear));
}

.top-picks[data-selecting="true"] .tp-page {
  padding-bottom: calc(var(--tp-bar-h, calc(190px * var(--scale))) + var(--space-3) + var(--space-6) + var(--tp-clear));
}

/* The page's toasts float over its foot — there is no nav under it — and
   over the bar or the tray's pill when either is there. */
.top-picks .slip-toasts {
  position: absolute;
  right: 0;
  bottom: calc(var(--space-5) + var(--tp-clear));
  left: 0;
  z-index: 3;
}

.top-picks[data-selecting="true"] .slip-toasts {
  bottom: calc(var(--tp-bar-h, 0px) + var(--space-5) + var(--tp-clear));
}

body[data-slip-tray="true"] .top-picks[data-tray="show"] .slip-toasts {
  bottom: calc(var(--space-5) + var(--nav-height) + var(--space-3) + var(--tp-clear));
}

/* --- Top row and header ----------------------------------------------------------- */

.tp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  /* Pulls the button out to the page's edge, where every other page keeps it. */
  margin-inline: calc(var(--space-1) * -1);
  padding-top: var(--space-4);
}

/* Sample data is unconfirmed data — the warning band's own meaning. */
.tp-sample {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: calc(24px * var(--scale));
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--warning-soft);
  color: var(--warning-strong);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* The Slip Builder's header card, in the page's card material. */
.tp-head {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.tp-head__title {
  overflow-wrap: anywhere;
}

.tp-head__sub {
  margin-top: var(--space-05);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* --- The day navigator ---------------------------------------------------------------- */

.tp-date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tp-date .icon-btn:disabled {
  opacity: 0.4;
  box-shadow: none;
  cursor: default;
}

/* The day, as a stadium the day pills' way: the label is also the way back to today. */
.tp-date__label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-05);
  height: var(--control-lg);
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}

.tp-date__label[data-today="true"] {
  cursor: default;
}

.tp-date__label[data-pressed="true"] {
  background: var(--surface-sunken);
}

.tp-date__main {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.tp-date__sub {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.tp-date__when {
  color: var(--text-muted);
}

.tp-date__back {
  color: var(--accent);
}

.tp-date__when:not([hidden]) + .tp-date__back::before {
  content: "·";
  margin-right: var(--space-1);
  color: var(--text-muted);
}

/* --- The track record ------------------------------------------------------------------- */

/* Two stat tiles side by side on one card, the whole card the way into the breakdown. */
.tp-record {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: background-color var(--duration) var(--easing);
}

.tp-record[data-pressed="true"] {
  background: var(--surface-sunken);
}

.tp-record:disabled {
  cursor: default;
}

.tp-record__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-md);
  background: var(--success-soft);
  color: var(--success-strong);
}

/* On a narrow phone the two figures need the room more than the glyph does:
   "Double Chance" is the longest market and has to fit whole. */
@media (max-width: 380px) {
  .tp-record__icon {
    display: none;
  }
}

.tp-stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.tp-stat__label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

/* Proportional figures: a stat tile's value is not a column. */
.tp-stat__value {
  min-width: 0;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-stat__sub {
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.tp-record__rule {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: var(--border);
}

.tp-record__chevron {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

/* A placeholder line in the shared pulse, sized by the caller. */
.tp-skel {
  display: block;
  width: var(--w, 100%);
  height: var(--h, calc(12px * var(--scale)));
  border-radius: var(--radius-full);
}

/* --- The stage ------------------------------------------------------------------------- */

/* One cell, so the day leaving and the day arriving cross-fade in place. */
.tp-stage {
  display: grid;
  margin-top: var(--space-2);
}

.tp-stage > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.tp-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  transition: opacity var(--duration) var(--easing);
}

.tp-day[data-state="enter"],
.tp-day[data-state="leave"] {
  opacity: 0;
}

/* --- Pieces the cards share --------------------------------------------------------------- */

.tp-side {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  min-width: 0;
}

.tp-side__name {
  min-width: 0;
}

/* The status corner: kick-off, the running clock with its score, or FT. */
.tp-status {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-15);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The minute and the score opposite it carry the LIVE red together — the
   fixture row's two marks for one claim. */
.tp-status__live,
.tp-status[data-status="live"] .tp-status__score {
  color: var(--highlight);
  font-weight: var(--weight-bold);
}

.tp-status__ft {
  color: var(--text-muted);
}

.tp-status__score {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* Confidence as a tier and a figure, on the confidence band's own grounds. */
.tp-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: calc(22px * var(--scale));
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.tp-tier__value {
  font-variant-numeric: tabular-nums;
}

.tp-tier[data-tier="banker"] {
  background: var(--confidence-high-soft);
  color: var(--confidence-high);
}

.tp-tier[data-tier="solid"] {
  background: var(--confidence-medium-soft);
  color: var(--confidence-medium);
}

.tp-tier[data-tier="value"] {
  background: var(--confidence-low-soft);
  color: var(--text-secondary);
}

.tp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: calc(22px * var(--scale));
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.tp-chip[data-tone="edge"] {
  background: var(--success-soft);
  color: var(--success-strong);
}

.tp-chip[data-tone="slip"],
.tp-chip[data-tone="line"] {
  background: var(--accent-tint);
  color: var(--accent);
}

/* On a ticked card, whose own ground is the tint, the two accent chips take
   the card's white so they still read as chips. */
.tp-pick[data-selected="true"] .tp-chip[data-tone="slip"],
.tp-pick[data-selected="true"] .tp-chip[data-tone="line"] {
  background: var(--surface);
}

.tp-news {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.tp-news[data-kind="confirmed"] {
  color: var(--success-strong);
}

.tp-news[data-kind="warning"] {
  color: var(--warning-strong);
}

/*
 * The live meter: progress on the pick's own market. The fill carries the
 * verdict and the track is the lighter step of the same colour, so the state
 * reads across the whole bar; the verdict is also a word, never colour alone.
 */
.tp-live {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  width: 100%;
}

.tp-live__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.tp-live__text {
  min-width: 0;
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.tp-verdict {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: calc(20px * var(--scale));
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.tp-verdict__icon {
  display: grid;
  place-items: center;
}

.tp-meter {
  display: block;
  height: calc(6px * var(--scale));
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tp-meter__fill {
  display: block;
  width: var(--share, 0%);
  height: 100%;
  border-radius: var(--radius-full);
  transition:
    width var(--duration-slow) var(--easing),
    background-color var(--duration) var(--easing);
}

.tp-live[data-verdict="on-track"] .tp-verdict {
  background: var(--accent-tint);
  color: var(--accent);
}

.tp-live[data-verdict="on-track"] .tp-meter {
  background: var(--accent-tint);
}

.tp-live[data-verdict="on-track"] .tp-meter__fill {
  background: var(--accent);
}

.tp-live[data-verdict="at-risk"] .tp-verdict {
  background: var(--warning-soft);
  color: var(--warning-strong);
}

.tp-live[data-verdict="at-risk"] .tp-meter {
  background: var(--warning-soft);
}

.tp-live[data-verdict="at-risk"] .tp-meter__fill {
  background: var(--warning);
}

.tp-live[data-verdict="landed"] .tp-verdict {
  background: var(--success-soft);
  color: var(--success-strong);
}

.tp-live[data-verdict="landed"] .tp-meter {
  background: var(--success-soft);
}

.tp-live[data-verdict="landed"] .tp-meter__fill {
  background: var(--success);
}

.tp-live[data-verdict="lost"] .tp-verdict {
  background: var(--error-soft);
  color: var(--error-strong);
}

.tp-live[data-verdict="lost"] .tp-meter {
  background: var(--error-soft);
}

.tp-live[data-verdict="lost"] .tp-meter__fill {
  background: var(--error);
}

/* A settled pick: the verdict, and the figure it was judged on. */
.tp-settled {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tp-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: calc(22px * var(--scale));
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.tp-result[data-result="won"] {
  background: var(--success-soft);
  color: var(--success-strong);
}

.tp-result[data-result="lost"] {
  background: var(--error-soft);
  color: var(--error-strong);
}

.tp-result[data-result="void"] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.tp-final {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* --- Pick of the Day -------------------------------------------------------------------- */

.tp-potd {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tp-potd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* The label as the Slip Builder's tinted chip, the star on an accent disc. */
.tp-potd__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  height: calc(26px * var(--scale));
  padding: 0 var(--space-3) 0 var(--space-05);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.tp-potd__star {
  display: grid;
  place-items: center;
  width: calc(21px * var(--scale));
  height: calc(21px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-text);
}

.tp-potd__fixture {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.tp-potd__vs {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* The call, framed like a stub: sunken, the ring on its own white disc. */
.tp-potd__call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.tp-potd__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.tp-potd__market {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.tp-potd__selection {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.tp-potd__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.tp-potd__odds {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.tp-potd__odds strong {
  color: var(--text);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.tp-potd .chance-ring {
  background: var(--surface);
  border-radius: var(--radius-full);
}

.tp-potd__reason {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.tp-potd__state {
  display: flex;
}

.tp-potd__add {
  height: var(--control-lg);
}

/* --- Ready-made combos ------------------------------------------------------------------- */

/* Room under the rail for the cards' shadow. */
.tp-combos .slip-rail__track {
  padding-bottom: var(--space-1);
}

/*
 * A combo: its name, how many picks, the odds together in the card's one big
 * voice, the model's confidence, the teams, and Add all. The whole card is a
 * button laid under the rest (the picks, in a sheet), and only Add all takes
 * a tap of its own.
 */
.tp-combo {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: calc(212px * var(--scale));
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: background-color var(--duration) var(--easing);
}

.tp-combo:has(.tp-combo__open:active) {
  background: var(--surface-sunken);
}

.tp-combo__open {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tp-combo > :not(.tp-combo__open) {
  position: relative;
  pointer-events: none;
}

.tp-combo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.tp-combo__name {
  min-width: 0;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-combo__count {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.tp-combo__odds {
  margin-top: var(--space-1);
  color: var(--text);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.tp-combo__meta {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tp-combo__meta strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.tp-combo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: calc(30px * var(--scale));
  margin-top: var(--space-2);
}

.tp-combo__add {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: calc(30px * var(--scale));
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  pointer-events: auto;
}

.tp-combo__add[data-pressed="true"] {
  background: var(--accent-pressed);
}

.tp-combo__add[aria-pressed="true"] {
  background: var(--accent-tint);
  color: var(--accent);
}

/* --- Matches ---------------------------------------------------------------------------- */

.tp-matches__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tp-count {
  font-size: var(--text-2xs);
}

/* The filter button, with a dot on its corner while anything is filtered. */
.tp-filter {
  position: relative;
}

.tp-filter[data-active="true"] {
  color: var(--accent);
}

.tp-filter__dot {
  position: absolute;
  top: calc(6px * var(--scale));
  right: calc(6px * var(--scale));
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
  transform: scale(0);
  transition: transform var(--spring-duration) var(--spring);
}

.tp-filter[data-active="true"] .tp-filter__dot {
  transform: scale(1);
}

.tp-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The fixture list's league card, drawn in full: a handful of groups, and
   an open pick card's height changes are measured. */
.tp-league {
  content-visibility: visible;
}

.tp-league__count {
  flex: none;
  display: grid;
  place-items: center;
  min-width: calc(22px * var(--scale));
  height: calc(22px * var(--scale));
  padding: 0 var(--space-15);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.tp-league__picks {
  border-top: 1px solid var(--border);
}

/* --- The pick card ------------------------------------------------------------------------- */

.tp-pick {
  position: relative;
  transition: background-color var(--duration) var(--easing);
}

.tp-pick + .tp-pick {
  border-top: 1px solid var(--border);
}

/* Ticked: the flat accent tint a selected row wears. */
.tp-pick[data-selected="true"] {
  background: var(--accent-tint);
}

/*
 * One button under the whole card opens it — the combo card's arrangement —
 * and the content is drawn over it, letting its taps through, all but the
 * checkbox at the end of the prediction's row. No column is kept for the
 * checkbox: every row runs from the card's own padding.
 */
.tp-pick__summary {
  position: relative;
}

.tp-pick__open {
  /* Its press is a tint, not a scale: scaling an empty box moves nothing the eye sees. */
  --press-scale: 1;

  position: absolute;
  inset: 0;
  width: 100%;
}

.tp-pick__open[data-pressed="true"] {
  background: rgb(var(--text-rgb) / 0.03);
}

/* Drawn inside the card, since the league card clips anything past its edge. */
.tp-pick__open:focus-visible {
  outline-offset: -2px;
  border-radius: 0;
}

.tp-pick__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  padding: var(--space-3);
  pointer-events: none;
}

.tp-pick__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.tp-pick__teams {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  min-width: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.tp-pick__vs {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tp-pick__market {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.tp-pick__chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: transform var(--duration) var(--easing);
}

.tp-pick[data-expanded="true"] .tp-pick__chevron {
  transform: rotate(180deg);
}

/* The chevron rides beside the market's name, off the right edge — where the
   checkbox's reach is — so a tap on the card's own affordance always opens it. */
.tp-pick__line--market {
  justify-content: flex-start;
  gap: var(--space-1);
}

.tp-pick__line--call {
  align-items: baseline;
}

/* Takes the row's free space, so the price and the checkbox pack together at its end. */
.tp-pick__selection {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* The price, in the column every card keeps it in. */
.tp-pick__odds {
  flex: none;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.tp-pick__line--chips {
  flex-wrap: wrap;
  row-gap: var(--space-1);
}

.tp-pick__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.tp-pick__tail {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.tp-pick__news {
  display: flex;
}

.tp-pick__state {
  display: flex;
  margin-top: var(--space-1);
}

/*
 * The checkbox, at the end of the prediction's row after the price: the
 * slip's own ring and tick, filled in the accent once chosen, and a lock in
 * the same place once a pick can no longer go on a slip. The box is the
 * ring's size whichever it holds, so the price keeps one column down every
 * card; its reach (`::before`) is wider than the box — a full tap across, and
 * as much of one down as the short row allows.
 */
.tp-check {
  position: relative;
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: calc(22px * var(--scale));
  height: calc(22px * var(--scale));
  margin-left: var(--space-1);
  color: var(--text-muted);
  pointer-events: auto;
}

.tp-check::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tap-floor);
  height: var(--tap);
  transform: translate(-50%, -50%);
}

.tp-check__mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.tp-check__mark .slip-ind {
  width: calc(19px * var(--scale));
  height: calc(19px * var(--scale));
}

.tp-check .slip-ind__ring {
  stroke: var(--border-strong);
}

.tp-check[aria-pressed="true"] .slip-ind__ring {
  fill: var(--accent);
  stroke: var(--accent);
}

.tp-check[aria-pressed="true"] .slip-ind__check {
  stroke: var(--accent-text);
  stroke-dashoffset: 0;
}

/* Locked: the glyph in the ring's place, quiet — the clock by the teams says why. */
.tp-check[aria-disabled="true"] {
  color: var(--text-muted);
  cursor: default;
}

/* --- The open card: why, and the ladder ------------------------------------------------------ */

.tp-pick__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-3) var(--space-4);
}

/* A market with no lines has no ladder; its empty slot must not hold a gap open. */
.tp-ladder-slot:empty {
  display: none;
}

.tp-detail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.tp-detail__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.tp-detail__title .icon {
  color: var(--text-muted);
}

.tp-detail__hint {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tp-why {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tp-why__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.tp-why__item {
  position: relative;
  padding-left: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.tp-why__item::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: var(--space-1);
  width: calc(5px * var(--scale));
  height: calc(5px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--accent);
}

.tp-ladder {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tp-ladder__rungs {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/*
 * A rung: its mark (a radio, or where the match has decided the line, a tick
 * or a cross), the line, its chance as a bar and a figure, and its price. The
 * chosen rung takes the accent tint and its bar the accent; the rest keep
 * the grey — one bar emphasised, the ladder behind it.
 */
.tp-rung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(calc(48px * var(--scale)), 1fr) calc(34px * var(--scale)) calc(40px * var(--scale));
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  transition:
    background-color var(--duration) var(--easing),
    border-color var(--duration) var(--easing);
}

.tp-rung[aria-checked="true"] {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.tp-rung[aria-disabled="true"] {
  cursor: default;
}

.tp-rung[data-outcome="won"] {
  background: var(--success-soft);
  border-color: transparent;
}

.tp-rung__radio {
  display: grid;
  place-items: center;
  width: calc(16px * var(--scale));
  height: calc(16px * var(--scale));
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  transition: border-color var(--duration) var(--easing);
}

.tp-rung__radio::after {
  content: "";
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--sd-pop) var(--se-spring);
}

.tp-rung[aria-checked="true"] .tp-rung__radio {
  border-color: var(--accent);
}

.tp-rung[aria-checked="true"] .tp-rung__radio::after {
  transform: scale(1);
}

.tp-rung__outcome {
  display: grid;
  place-items: center;
  width: calc(16px * var(--scale));
  height: calc(16px * var(--scale));
  border-radius: var(--radius-full);
  color: var(--accent-text);
}

.tp-rung__outcome[data-outcome="won"] {
  background: var(--success);
}

.tp-rung__outcome[data-outcome="lost"] {
  background: var(--text-disabled);
}

.tp-rung__line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.tp-rung__ours {
  display: grid;
  place-items: center;
  color: var(--accent);
}

.tp-rung__bar {
  display: block;
  height: calc(5px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--surface-pressed);
  overflow: hidden;
}

.tp-rung__fill {
  display: block;
  width: var(--share);
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background-color var(--duration) var(--easing);
}

.tp-rung[aria-checked="true"] .tp-rung__fill {
  background: var(--accent);
}

.tp-rung[aria-checked="true"] .tp-rung__bar {
  background: rgb(var(--accent-rgb) / 0.18);
}

.tp-rung__prob {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tp-rung__odds {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- The selection bar ---------------------------------------------------------------------- */

/*
 * Floating chrome over the foot of the page, in the nav's own material —
 * surface, hairline, floating shadow — rising when the first pick is ticked
 * and leaving with the last. Opaque rather than frosted: a live backdrop
 * behind a moving element is what stutters in Telegram's WebView.
 */
.tp-bar {
  position: absolute;
  right: var(--space-3);
  bottom: calc(var(--space-3) + var(--tp-clear));
  left: var(--space-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  opacity: 0;
  transform: translateY(calc(100% + var(--space-6)));
  transition:
    transform var(--spring-duration) var(--spring),
    opacity var(--duration) var(--easing);
}

.tp-bar[data-shown="true"] {
  opacity: 1;
  transform: none;
}

.tp-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.tp-bar__summary {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-15);
  min-width: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.tp-bar__dot {
  color: var(--text-muted);
}

.tp-bar__odds {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.tp-bar__odds-value {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tp-bar__clear {
  flex: none;
  margin-right: calc(var(--space-1) * -1);
  padding: var(--space-1) var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.tp-stake {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  cursor: text;
}

.tp-stake:focus-within {
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.35);
}

.tp-stake__label {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.tp-stake__input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tp-stake__input:focus-visible {
  outline: none;
}

.tp-bar__return {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.tp-bar__return-label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.tp-bar__return-value {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

/* Two picks on one match: the warning band, and the one-tap way out. */
.tp-conflict {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.tp-conflict__icon {
  flex: none;
  display: grid;
  place-items: center;
}

.tp-conflict__text {
  flex: 1;
  min-width: 0;
}

.tp-conflict__fix {
  flex: none;
  height: calc(28px * var(--scale));
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.tp-bar__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.tp-bar__button {
  justify-content: center;
  min-width: 0;
  height: var(--control-lg);
  font-size: var(--text-sm);
}

.tp-bar__button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Held while a conflict stands: legible, and plainly not the way on yet. */
.tp-bar__button[aria-disabled="true"] {
  background: var(--surface-pressed);
  box-shadow: none;
  color: var(--text-muted);
  cursor: default;
}

/* --- Sheets ---------------------------------------------------------------------------------- */

.tp-sheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
}

.tp-sheet-label {
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.tp-sheet-note {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
}

/* A footer pinned under the sheet's scrolling body. */
.tp-sheet-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) 0;
  border-top: 1px solid var(--border);
}

.tp-sheet-foot__reset {
  flex: none;
  height: var(--control-lg);
  padding: 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.tp-sheet-foot__reset:disabled {
  color: var(--text-disabled);
  cursor: default;
}

.tp-sheet-foot__go {
  flex: 1;
  justify-content: center;
  height: var(--control-lg);
  font-size: var(--text-sm);
}

.tp-sheet-foot__result {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-lg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* The filter sheet: the Slip Builder's "When" pills, with a crest and a count. */
.tp-fgroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tp-fgroup__pills {
  gap: var(--space-15);
}

.tp-fpill {
  padding-right: var(--space-3);
}

.tp-fpill[data-dim="true"] .tp-fpill__label {
  opacity: 0.55;
}

.tp-fpill__crest {
  background: var(--surface);
}

.tp-fpill__count {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.tp-fpill[aria-pressed="true"] .tp-fpill__count {
  color: rgb(var(--text-inverse-rgb) / 0.75);
}

/* The record sheet: three figures, then one bar per market. */
.tp-record-switch {
  padding-bottom: var(--space-3);
}

.tp-record-switch .segmented {
  width: 100%;
}

.tp-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.tp-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.tp-figure__value {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.tp-figure__label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.tp-hits {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The name and the count over the bar, the rate at its end: every figure in words too. */
.tp-hit {
  display: grid;
  grid-template-areas:
    "name count"
    "track rate";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.tp-hit__name {
  grid-area: name;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.tp-hit__best {
  display: inline-flex;
  align-items: center;
  height: calc(18px * var(--scale));
  padding: 0 var(--space-15);
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success-strong);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
}

.tp-hit__count {
  grid-area: count;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tp-hit__track {
  grid-area: track;
  display: block;
  height: calc(8px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  overflow: hidden;
}

.tp-hit__fill {
  display: block;
  width: var(--share);
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.tp-hit__rate {
  grid-area: rate;
  min-width: calc(36px * var(--scale));
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Too few settled to rank: at the foot, in the grey the rest are emphasised against. */
.tp-hit[data-thin="true"] .tp-hit__name,
.tp-hit[data-thin="true"] .tp-hit__rate {
  color: var(--text-muted);
}

.tp-hit[data-thin="true"] .tp-hit__track {
  background: var(--surface-sunken);
}

.tp-hit[data-thin="true"] .tp-hit__fill {
  background: var(--border-strong);
}

/* The combo sheet: its legs, a row each. */
.tp-legs {
  display: flex;
  flex-direction: column;
}

.tp-leg {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.tp-leg:last-child {
  border-bottom: 0;
}

.tp-leg__crests {
  flex: none;
  display: flex;
}

.tp-leg__crests .logo + .logo {
  margin-left: calc(var(--space-15) * -1);
  box-shadow: 0 0 0 2px var(--surface);
}

.tp-leg__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.tp-leg__fixture {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.tp-leg__pick {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.tp-leg__pick strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.tp-leg__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-05);
}

.tp-leg__odds {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* --- Skeletons --------------------------------------------------------------------------------- */

.tp-skel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tp-skel-card--potd {
  min-height: calc(220px * var(--scale));
}

.tp-skel-cta {
  display: block;
  height: var(--control-lg);
  margin-top: auto;
  border-radius: var(--radius-full);
}

.tp-skel-rail {
  display: flex;
  gap: var(--space-2);
  overflow: hidden;
}

.tp-skel-card--combo {
  flex: none;
  width: calc(212px * var(--scale));
}

.tp-skel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.tp-skel-crest {
  flex: none;
  width: var(--mark-lg);
  height: var(--mark-lg);
  border-radius: var(--radius-md);
}

.tp-skel-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.tp-skel-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* --- The door, on the Quick Slip tab ------------------------------------------------------------ */

/* A white card in the Slip Builder's material, the Predictions tab's builder door restated. */
.tp-door {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.tp-door[data-pressed="true"] {
  box-shadow: inset 0 0 0 calc(999px * var(--scale)) rgb(var(--text-rgb) / 0.04);
}

.tp-door__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-text);
}

.tp-door__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.tp-door__title {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.tp-door__meta {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tp-door__count {
  flex: none;
  display: grid;
  place-items: center;
  min-width: calc(24px * var(--scale));
  height: calc(24px * var(--scale));
  padding: 0 var(--space-15);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.tp-door__chevron {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

/* --- Reduced motion ------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .top-picks,
  .top-picks__sheet,
  .tp-day,
  .tp-bar,
  .tp-meter__fill,
  .tp-pick__chevron,
  .tp-filter__dot,
  .tp-rung__radio::after {
    transition: none;
  }

  .tp-bar {
    transform: none;
  }
}