/*
 * The Slip Builder (SlipBuilder.js) — the Quick Slip tab's one screen.
 *
 * Its controls are in slip-controls.css, along with the motion scale both
 * sheets share (`--sd-*`). Its colours are the app's semantic tokens — this
 * screen's spec is where the app's palette came from (see tokens.css) — plus
 * the few `--slip-*` values only it has a use for: the odds gradient's amber,
 * the counter's celebration patches, and the `--slip-scale` knob.
 *
 * The frame is 390pt with 20pt page padding; the counter badge is the one
 * thing that leaves it, bleeding off the right edge by exactly that padding.
 * Separation is tonal throughout — page, field, card — and nothing here casts
 * a shadow.
 */

.slip {
  display: flex;
  flex-direction: column;
  /* Major sections sit 28pt apart. */
  gap: calc(28px * var(--slip-scale));
  padding: calc(var(--space-4) * var(--slip-scale)) calc(var(--space-5) * var(--slip-scale)) calc(var(--space-7) * var(--slip-scale));
  background: var(--bg);
  color: var(--text);
  /*
   * No font-family here: the spec's Plus Jakarta Sans is now the app face,
   * set on body in base.css and inherited. The 800 weight it uses is in the
   * font link in index.html for that reason.
   */
  font-size: calc(var(--text-base) * var(--slip-scale));
  line-height: 1.35;
}

/* --- Type ------------------------------------------------------------------ */

/* Several things here set display on a class; `hidden` still has to win. */
.slip [hidden] {
  display: none !important;
}

.slip-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-label {
  color: var(--text);
  font-size: calc(var(--text-md) * var(--slip-scale));
  font-weight: var(--weight-bold);
}

.slip-label__opt {
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
}

.slip-helper {
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
}

.slip-helpers {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) * var(--slip-scale));
}

.slip-empty {
  padding: calc(var(--space-4) * var(--slip-scale)) 0;
  color: var(--text-muted);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-medium);
  text-align: center;
}

/* Amber, with the warning glyph; non-blocking, so no fill and no border. */
.slip-warning {
  display: flex;
  align-items: flex-start;
  gap: calc(6px * var(--slip-scale));
  padding-top: calc(var(--space-3) * var(--slip-scale));
  color: var(--warning);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.slip-warning .icon {
  margin-top: 2px;
}

/* --- Header + counter ------------------------------------------------------- */

/*
 * A white card, the same surface as the manual-games card and the drawer
 * below it. The counter blob sits flush against the card's right edge and
 * carries the card's corner radius on its own right corners (the `rx` on its
 * rect in SlipBuilder.js), so the card needs no clip and the blob's pulse and
 * its "-N games" chip can still reach past the edge.
 */
.slip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-2) * var(--slip-scale));
  padding-left: calc(var(--space-4) * var(--slip-scale));
  border-radius: calc(18px * var(--slip-scale));
  background: var(--surface);
}

.slip-head__text {
  flex: 1;
  min-width: 0;
  padding: calc(var(--space-3) * var(--slip-scale)) 0;
}

.slip-eyebrow {
  color: var(--text-muted);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-semibold);
}

.slip-h1 {
  margin-top: 2px;
  color: var(--text);
  font-size: calc(27px * var(--slip-scale));
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Flush to the header card's right edge; the card's radius is on the blob. */
.slip-counter {
  position: relative;
  flex: none;
  width: calc(150px * var(--slip-scale));
  height: calc(96px * var(--slip-scale));
  color: var(--accent);
  transition: color var(--sd-fade) var(--se-out);
}

.slip-counter[data-tone="warn"] {
  color: var(--warning);
}

.slip-counter[data-anim="pulse"] {
  animation: slip-pulse var(--sd-pulse) var(--se-out);
}

@keyframes slip-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.slip-counter__blob {
  display: block;
  width: calc(150px * var(--slip-scale));
  height: calc(96px * var(--slip-scale));
  overflow: visible;
}

.slip-counter__solid {
  fill: currentColor;
  transition: fill var(--sd-fade) var(--se-out);
}

/* Three colour patches behind the number, only while celebrating. */
.slip-counter__patches {
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.slip-counter[data-celebrate="true"] .slip-counter__patches {
  opacity: 1;
}

.slip-counter__patch--purple {
  fill: var(--slip-patch-purple);
}

.slip-counter__patch--lime {
  fill: var(--slip-patch-lime);
}

.slip-counter__patch--blue {
  fill: var(--accent);
}

/* The number sits in the blob's right half, over the flat side. */
.slip-counter__value {
  position: absolute;
  inset: 0 calc(6px * var(--slip-scale)) 0 calc(58px * var(--slip-scale));
  display: grid;
  place-items: center;
  color: var(--text-inverse);
  font-size: calc(42px * var(--slip-scale));
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* "-N games", rising 8pt off the lower-left corner and fading. */
.slip-counter__delta {
  position: absolute;
  left: calc(10px * var(--slip-scale));
  bottom: calc(-6px * var(--slip-scale));
  padding: calc(3px * var(--slip-scale)) calc(8px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: rgb(var(--text-rgb) / 0.9);
  color: var(--text-inverse);
  font-size: calc(var(--text-xs) * var(--slip-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  animation: slip-delta 900ms var(--se-out) forwards;
}

@keyframes slip-delta {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(-8px * var(--slip-scale)));
    opacity: 0;
  }
}

/* --- Pills, shared ------------------------------------------------------------ */

/* Fill and border move on the shared fade; the press scale is pressable's. */
.slip-day,
.slip-when,
.slip-sport,
.slip-market,
.slip-venue__seg,
.slip-chip__body {
  transition:
    background-color var(--sd-fade) var(--se-out),
    border-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out),
    box-shadow var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

/* Touch-down darkens the fill a few percent, whatever colour it is. */
.slip-day[data-pressed="true"],
.slip-when[data-pressed="true"],
.slip-market[data-pressed="true"],
.slip-venue__seg[data-pressed="true"],
.slip-strategy[data-pressed="true"],
.slip-advanced[data-pressed="true"],
.slip-add[data-pressed="true"],
.slip-chip__body[data-pressed="true"],
.slip-drawer__teaser[data-pressed="true"],
.slip-oddsbox:active {
  box-shadow: inset 0 0 0 999px rgb(var(--text-rgb) / 0.04);
}

/* --- Day selector -------------------------------------------------------------- */

.slip-days {
  display: flex;
  align-items: center;
}

.slip-day {
  --press-scale: 0.97;

  flex: 1 1 0;
  min-width: 0;
  height: calc(44px * var(--slip-scale));
  padding: 0 calc(var(--space-2) * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slip-day[aria-pressed="true"] {
  background: var(--accent-tint);
  border: 1.5px solid var(--accent);
  color: var(--accent);
}

/* The connector: two 2pt dashes that close into one solid line when both
   sides are on, and recolour to the accent with it. */
.slip-link {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(12px * var(--slip-scale));
  height: 2px;
}

.slip-link__dash {
  width: calc(4px * var(--slip-scale));
  height: 2px;
  border-radius: 1px;
  background: var(--text-disabled);
  transition:
    width var(--sd-chevron) var(--se-out),
    background-color var(--sd-chevron) var(--se-out);
}

.slip-link[data-linked="true"] .slip-link__dash {
  width: calc(6px * var(--slip-scale));
  background: var(--accent);
}

/* --- When ----------------------------------------------------------------------- */

.slip-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-when {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--slip-scale));
  height: calc(44px * var(--slip-scale));
  padding: 0 calc(14px * var(--slip-scale)) 0 calc(12px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-semibold);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.slip-when[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-inverse);
}

/* The 18pt indicator, three kinds. */
.slip-ind {
  flex: none;
  display: block;
  width: calc(18px * var(--slip-scale));
  height: calc(18px * var(--slip-scale));
  border-radius: var(--radius-full);
}

/* Empty ring when idle. */
.slip-ind--radio,
.slip-ind--dot {
  position: relative;
  border: 1.5px solid var(--text-disabled);
  transition:
    border-color var(--sd-fade) var(--se-out),
    background-color var(--sd-fade) var(--se-out);
}

.slip-ind--radio::after,
.slip-ind--dot::after {
  content: "";
  position: absolute;
  inset: calc(4px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--text-inverse);
  transform: scale(0);
  transition: transform var(--sd-pop) var(--se-spring);
}

/* Radio: white ring, solid white centre. */
[aria-pressed="true"] > .slip-ind--radio {
  border-color: var(--text-inverse);
}

[aria-pressed="true"] > .slip-ind--radio::after {
  transform: scale(1);
}

/* Dot: a lighter blue disc inside a white ring — the market pill's mark. */
[aria-pressed="true"] > .slip-ind--dot {
  border-color: var(--text-inverse);
  background: rgb(var(--text-inverse-rgb) / 0.35);
}

/* Check: the ring is drawn; selected it fills white and the tick draws in. */
.slip-ind__ring {
  fill: none;
  stroke: var(--text-disabled);
  stroke-width: 1.5;
  transition:
    fill var(--sd-fade) var(--se-out),
    stroke var(--sd-fade) var(--se-out);
}

.slip-ind__check {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset var(--sd-check) var(--se-out);
}

[aria-pressed="true"] > .slip-ind--check .slip-ind__ring {
  fill: var(--text-inverse);
  stroke: var(--text-inverse);
}

[aria-pressed="true"] > .slip-ind--check .slip-ind__check {
  stroke-dashoffset: 0;
}

/* The press-and-hold time window, above its pill. */
.slip-tip {
  position: absolute;
  bottom: calc(100% + calc(8px * var(--slip-scale)));
  left: 50%;
  z-index: 2;
  padding: calc(5px * var(--slip-scale)) calc(9px * var(--slip-scale));
  border-radius: calc(var(--radius-sm) * var(--slip-scale));
  background: rgb(var(--text-rgb) / 0.92);
  color: var(--text-inverse);
  font-size: calc(var(--text-xs) * var(--slip-scale));
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.slip-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: calc(5px * var(--slip-scale)) solid transparent;
  border-top-color: rgb(var(--text-rgb) / 0.92);
  transform: translateX(-50%);
}

/* --- Sports --------------------------------------------------------------------- */

.slip-sports {
  display: flex;
  align-items: center;
}

.slip-sport {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--slip-scale));
  height: calc(56px * var(--slip-scale));
  padding: 0 calc(var(--space-3) * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-semibold);
  overflow: hidden;
}

.slip-sport[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-inverse);
}

.slip-sport__glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(32px * var(--slip-scale));
  height: calc(32px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: rgb(var(--text-rgb) / 0.05);
  transition: background-color var(--sd-fade) var(--se-out);
}

.slip-sport[aria-pressed="true"] .slip-sport__glyph {
  background: rgb(var(--text-inverse-rgb) / 0.16);
}

.slip-sport__label {
  position: relative;
}

/* Seam lines, white at 8%, oversized and clipped by the pill. */
.slip-sport__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--text-inverse);
  stroke-opacity: 0.08;
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sd-fade) var(--se-out);
}

.slip-sport[aria-pressed="true"] .slip-sport__mark {
  opacity: 1;
}

/* --- Cards ---------------------------------------------------------------------- */

.slip-card {
  background: var(--surface);
  border-radius: calc(18px * var(--slip-scale));
}

.slip-card__head {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--slip-scale));
  padding: calc(var(--space-4) * var(--slip-scale));
}

.slip-card__text {
  flex: 1;
  min-width: 0;
}

.slip-card__title {
  color: var(--text);
  font-size: calc(var(--text-md) * var(--slip-scale));
  font-weight: var(--weight-bold);
}

.slip-card__sub {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
}

/* --- Manual games card ---------------------------------------------------------- */

.slip-manual__body[data-shown="true"] > .slip-collapse__inner {
  padding: 0 calc(var(--space-4) * var(--slip-scale)) calc(var(--space-4) * var(--slip-scale));
}

.slip-manual__rows {
  border-top: 1px solid var(--border);
}

.slip-manual__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) * var(--slip-scale));
  padding: calc(var(--space-3) * var(--slip-scale)) 0;
  border-bottom: 1px solid var(--border);
}

.slip-manual__label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--slip-scale));
  color: var(--text-secondary);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.slip-manual__label .icon {
  color: var(--text-muted);
}

/* --- Strategy grid ----------------------------------------------------------------- */

.slip-strategies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-strategy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(var(--space-4) * var(--slip-scale));
  min-height: calc(150px * var(--slip-scale));
  padding: calc(var(--space-4) * var(--slip-scale));
  border-radius: calc(18px * var(--slip-scale));
  background: var(--surface);
  border: 1px solid transparent;
  text-align: left;
  transition:
    border-color var(--sd-chevron) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.slip-strategy[aria-checked="true"] {
  border: 1.5px solid var(--accent);
  /* Lifted 2pt on select; the press composes into the same transform. */
  transform: translateY(-2px) scale(var(--press, 1));
}

.slip-strategy[data-pressed="true"] {
  transform: translateY(1px) scale(var(--press, 1));
}

/* The reserved icon slot: a ringed field disc idle, a blue disc with a white
   inner ring selected. */
.slip-strategy__ind {
  display: grid;
  place-items: center;
  width: calc(22px * var(--slip-scale));
  height: calc(22px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  border: 1.5px solid var(--text-disabled);
  color: var(--text-muted);
  transition:
    background var(--sd-fade) var(--se-out),
    border-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out);
}

.slip-strategy[aria-checked="true"] .slip-strategy__ind {
  background: radial-gradient(
    circle,
    var(--accent) 0 calc(6px * var(--slip-scale)),
    var(--text-inverse) calc(6.5px * var(--slip-scale)) calc(8px * var(--slip-scale)),
    var(--accent) calc(8.5px * var(--slip-scale))
  );
  border-color: var(--accent);
  color: var(--text-inverse);
}

.slip-strategy[data-anim="select"] .slip-strategy__ind {
  animation: slip-dot-pop var(--sd-pop) var(--se-spring);
}

@keyframes slip-dot-pop {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.slip-strategy__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.slip-strategy__title {
  color: var(--text);
  font-size: calc(var(--text-xl) * var(--slip-scale));
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: color var(--sd-fade) var(--se-out);
}

.slip-strategy__sub {
  color: var(--text-muted);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-medium);
  line-height: 1.3;
  transition: color var(--sd-fade) var(--se-out);
}

.slip-strategy[aria-checked="true"] .slip-strategy__title {
  color: var(--accent);
}

.slip-strategy[aria-checked="true"] .slip-strategy__sub {
  color: rgb(var(--accent-rgb) / 0.7);
}

/* One line under the grid, cross-fading between strategies. */
.slip-preview {
  display: grid;
  min-height: 1.4em;
}

.slip-preview__text {
  grid-area: 1 / 1;
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.slip-preview__text[data-shown="true"] {
  opacity: 1;
}

/* --- Market pills ------------------------------------------------------------------ */

.slip-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-market {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(7px * var(--slip-scale));
  min-width: 0;
  height: calc(44px * var(--slip-scale));
  padding: 0 calc(10px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-semibold);
  text-align: left;
  overflow: hidden;
}

/* "Over/Under Goals" and "All Available Leagues" do not fit one line of a
   half-width pill at 14pt; two tight lines beat an ellipsis on a label that
   is the whole control. */
.slip-market__label {
  position: relative;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.slip-market[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-inverse);
}

/* The fill sweeps in from the left; the label recolours at the midpoint. */
.slip-market::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sd-fade) var(--se-out);
}

.slip-market[aria-pressed="true"]::before {
  transform: scaleX(1);
}

.slip-market > .slip-ind {
  position: relative;
}

.slip-market[aria-pressed="true"] .slip-market__label {
  transition-delay: calc(var(--sd-fade) / 2);
}

/* "Set Advanced Markets" — tinted row under the grid. */
.slip-advanced {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-2) * var(--slip-scale));
  width: 100%;
  height: calc(44px * var(--slip-scale));
  margin-top: calc(var(--space-3) * var(--slip-scale));
  padding: 0 calc(12px * var(--slip-scale)) 0 calc(14px * var(--slip-scale));
  border-radius: calc(14px * var(--slip-scale));
  background: var(--accent-tint);
  color: var(--accent);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-bold);
  transition: transform var(--spring-duration) var(--spring);
}

.slip-advanced__chevron {
  transform: rotate(-90deg);
}

.slip-info {
  display: flex;
  align-items: flex-start;
  gap: calc(6px * var(--slip-scale));
  margin-top: calc(var(--space-3) * var(--slip-scale));
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.slip-info .icon {
  margin-top: 2px;
  color: var(--text-disabled);
}

/* --- League chips ------------------------------------------------------------------- */

/* The keyed container is transparent to the grid: its chips are the cells. */
.slip-chips {
  display: contents;
}

.slip-chip {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: calc(44px * var(--slip-scale));
  border-radius: var(--radius-full);
  transition:
    opacity var(--sd-fade) var(--se-out),
    transform var(--sd-fade) var(--se-spring);
}

/* Enter and leave from `keyed()` in core/transitions.js. */
.slip-chip[data-state="enter"],
.slip-chip[data-state="leave"] {
  opacity: 0;
  transform: scale(0.8);
}

/* Dimmed while the sport is in "all leagues" mode; still tappable. */
.slip-chip[data-dim="true"] {
  opacity: 0.6;
}

.slip-chip__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--slip-scale));
  height: 100%;
  /* Room on the right for the remove control that overlays the pill's end:
     its 44pt box is centred on the last 22pt, plus the X's own radius. */
  padding: 0 calc(22px + 9px * var(--slip-scale)) 0 calc(9px * var(--slip-scale));
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  text-align: left;
  font-size: calc(13px * var(--slip-scale));
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

/* Included: the accent fill, white text. */
.slip-chip[data-tone="included"] .slip-chip__body {
  background: var(--accent);
  color: var(--text-inverse);
}

/* Excluded: white, hairline, ink text — the reference's Premier League chip. */
.slip-chip[data-tone="excluded"] .slip-chip__body {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.slip-chip__name {
  flex: 1;
}

/* 18pt (scaled) visual, 44pt hit at any scale, centred on the chip's end. */
.slip-chip__remove {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  transform: translateY(-50%);
}

.slip-chip__x {
  display: grid;
  place-items: center;
  width: calc(18px * var(--slip-scale));
  height: calc(18px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: rgb(var(--text-inverse-rgb) / 0.2);
  color: var(--text-inverse);
  transition:
    background-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.slip-chip[data-tone="excluded"] .slip-chip__x {
  background: var(--error-soft);
  color: var(--error);
}

.slip-chip__remove[data-pressed="true"] .slip-chip__x {
  transform: scale(0.9);
}

/* Placeholder crest: initials on a brand-coloured disc. */
.slip-crest {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(20px * var(--slip-scale));
  height: calc(20px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--crest, var(--text-muted));
  color: var(--text-inverse);
  /* Floored: initials under 7px stop being letters. */
  font-size: max(7px, calc(7.5px * var(--slip-scale)));
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  line-height: 1;
  object-fit: cover;
}

/* "Add Another League", full width under the chips. */
.slip-add {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--slip-scale));
  height: calc(44px * var(--slip-scale));
  padding: 0 calc(12px * var(--slip-scale));
  border-radius: calc(14px * var(--slip-scale));
  background: var(--surface-sunken);
  color: var(--accent);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-bold);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.slip-add__plus {
  display: grid;
  place-items: center;
  width: calc(20px * var(--slip-scale));
  height: calc(20px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse);
}

.slip-add__label {
  flex: 1;
}

.slip-add__chevron {
  color: var(--text-muted);
  transform: rotate(-90deg);
}

/* --- League picker sheet ------------------------------------------------------------- */

.slip-search {
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--slip-scale));
  height: calc(44px * var(--slip-scale));
  margin-bottom: calc(var(--space-3) * var(--slip-scale));
  padding: 0 calc(14px * var(--slip-scale));
  border-radius: calc(14px * var(--slip-scale));
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.slip-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font-size: calc(var(--text-md) * var(--slip-scale));
  font-weight: var(--weight-medium);
}

.slip-search__input::placeholder {
  color: var(--text-muted);
}

.slip-search__input:focus-visible {
  outline: none;
}

.slip-picker {
  display: flex;
  flex-direction: column;
}

.slip-picker__row {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--slip-scale));
  width: 100%;
  min-height: calc(52px * var(--slip-scale));
  padding: calc(var(--space-2) * var(--slip-scale)) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  font-size: calc(var(--text-md) * var(--slip-scale));
  font-weight: var(--weight-semibold);
  transition: transform var(--spring-duration) var(--spring);
}

.slip-picker__row:last-child {
  border-bottom: 0;
}

.slip-picker__name {
  flex: 1;
  min-width: 0;
}

.slip-picker__count {
  color: var(--text-muted);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* --- Add More Values drawer ------------------------------------------------------------ */

.slip-drawer__teaser {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--slip-scale));
  width: 100%;
  padding: calc(var(--space-4) * var(--slip-scale));
  border-radius: calc(18px * var(--slip-scale));
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.slip-drawer__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40px * var(--slip-scale));
  height: calc(40px * var(--slip-scale));
  border-radius: calc(12px * var(--slip-scale));
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.slip-drawer__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slip-drawer__title {
  color: var(--text);
  font-size: calc(var(--text-md) * var(--slip-scale));
  font-weight: var(--weight-bold);
}

.slip-drawer__sub {
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
  transition: color var(--sd-fade) var(--se-out);
}

/* "N active" while collapsed with anything set. */
.slip-drawer__sub[data-active="true"] {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.slip-drawer__chevron {
  display: grid;
  place-items: center;
  width: calc(24px * var(--slip-scale));
  height: calc(24px * var(--slip-scale));
  color: var(--text-muted);
  transition: transform var(--sd-chevron) var(--se-out);
}

.slip-drawer[data-open="true"] .slip-drawer__chevron {
  transform: rotate(180deg);
}

.slip-drawer__body[data-shown="true"] > .slip-collapse__inner {
  padding: 0 calc(var(--space-4) * var(--slip-scale)) calc(var(--space-4) * var(--slip-scale));
}

.slip-drawer__blocks {
  display: flex;
  flex-direction: column;
  gap: calc(28px * var(--slip-scale));
  padding-top: calc(var(--space-1) * var(--slip-scale));
}

/* Inner sections arrive 40ms apart once the drawer is open. */
.slip-block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) * var(--slip-scale));
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.slip-drawer[data-open="true"] .slip-block {
  opacity: 1;
  transition-delay: calc(60ms + var(--i, 0) * var(--stagger-step));
}

/* 9.1 Odds boxes */

/* minmax(0, 1fr): a bare 1fr's minimum is the content's, and "Maximum Odds:"
   plus a value is wider than half the card — the columns would grow past it. */
.slip-oddsboxes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-oddsbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(3px * var(--slip-scale));
  min-width: 0;
  height: calc(48px * var(--slip-scale));
  padding: 0 calc(8px * var(--slip-scale));
  border-radius: calc(14px * var(--slip-scale));
  background: var(--surface-sunken);
  cursor: text;
}

/* Half a card less its padding is 85pt for "Maximum Odds:" — a shade under
   the helper size fits it on one line, and the label may break to two rather
   than lose letters if a device's metrics run wider. */
.slip-oddsbox__label {
  flex: none;
  color: var(--text-muted);
  font-size: calc(12px * var(--slip-scale));
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The label keeps its line; the value takes whatever is left, which at five
   characters ("13.00") is still enough. */
.slip-oddsbox__input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  /* A step under the spec's 15: "13.00", the widest value the domain allows,
     has to clear the "Maximum Odds:" label in a half-width box. */
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.slip-oddsbox__input:focus-visible {
  outline: none;
}

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

/* 9.2 / 9.3 Toggle groups */

.slip-group {
  border-radius: calc(14px * var(--slip-scale));
  background: var(--surface-sunken);
}

.slip-group__block + .slip-group__block {
  border-top: 1px solid var(--border);
}

.slip-switchrow {
  display: flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--slip-scale));
  padding: calc(12px * var(--slip-scale)) calc(14px * var(--slip-scale));
}

.slip-switchrow__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slip-switchrow__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--space-2) * var(--slip-scale));
  color: var(--text);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-bold);
}

.slip-switchrow__sub {
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

/* The conditional row under a switched-on block. */
.slip-collapse[data-shown="true"] > .slip-collapse__inner > .slip-subrow {
  border-top: 1px solid var(--border);
}

.slip-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) * var(--slip-scale));
  margin: 0 calc(14px * var(--slip-scale));
  padding: calc(12px * var(--slip-scale)) 0;
  border-top: 1px solid var(--border);
}

.slip-subrow--stack {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--space-1) * var(--slip-scale));
}

.slip-subrow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-subrow__label {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.slip-subrow .slip-range {
  padding-inline: 0;
  margin-inline: calc(11px * var(--slip-scale));
}

/* "Tuned by Banker-Led" */
.slip-tuned {
  display: inline-flex;
  align-items: center;
  height: calc(20px * var(--slip-scale));
  padding: 0 calc(8px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: calc(var(--text-2xs) * var(--slip-scale));
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* "N%" beside a confidence slider. */
.slip-pct {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: calc(24px * var(--slip-scale));
  padding: 0 calc(10px * var(--slip-scale));
  border-radius: var(--radius-full);
  font-size: calc(var(--text-xs) * var(--slip-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out);
}

.slip-pct[data-tone="good"] {
  background: var(--success-soft);
  color: var(--success);
}

.slip-pct[data-tone="low"] {
  background: var(--warning-soft);
  color: var(--warning);
}

/* 9.4 Venue */

.slip-venue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-venue__seg {
  height: calc(44px * var(--slip-scale));
  padding: 0 calc(var(--space-2) * var(--slip-scale));
  border-radius: calc(14px * var(--slip-scale));
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: calc(14px * var(--slip-scale));
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition-duration: 150ms;
}

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

/* 9.5 Confidence header */

.slip-confhead {
  display: flex;
  align-items: baseline;
  gap: calc(var(--space-2) * var(--slip-scale));
}

.slip-confhead__end {
  color: var(--text);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.slip-confhead__end--right {
  margin-left: auto;
}

.slip-confhead__mid {
  color: var(--text-muted);
  font-size: calc(12.5px * var(--slip-scale));
  font-weight: var(--weight-medium);
}

/* --- How Many Matches ------------------------------------------------------------------ */

.slip-matches {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) * var(--slip-scale));
}

.slip-readout {
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: calc(46px * var(--slip-scale));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.slip-readout__dash {
  white-space: pre;
}

.slip-risk {
  display: inline-flex;
  align-items: center;
  height: calc(24px * var(--slip-scale));
  padding: 0 calc(10px * var(--slip-scale));
  border-radius: var(--radius-full);
  font-size: calc(var(--text-xs) * var(--slip-scale));
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition:
    background-color var(--sd-chevron) var(--se-out),
    color var(--sd-chevron) var(--se-out);
}

.slip-risk[data-band="low"] {
  background: var(--success-soft);
  color: var(--success);
}

.slip-risk[data-band="medium"] {
  background: var(--warning-soft);
  color: var(--warning);
}

.slip-risk[data-band="high"] {
  background: var(--error-soft);
  color: var(--error);
}

/* Cross-fade with a 4pt rise on each band change. */
.slip-risk[data-anim="swap"] .slip-risk__text {
  animation: slip-risk-swap var(--sd-chevron) var(--se-out);
}

@keyframes slip-risk-swap {
  0% {
    transform: translateY(calc(4px * var(--slip-scale)));
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Ten slots; the span's cells tint by band and the endpoints wear rings. */
.slip-dial {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  padding: calc(var(--space-2) * var(--slip-scale)) 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.slip-dial__slot {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(44px * var(--slip-scale));
  border-radius: calc(var(--radius-sm) * var(--slip-scale));
  color: var(--text-muted);
  font-size: calc(var(--text-2xs) * var(--slip-scale));
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  cursor: grab;
  transition: color var(--sd-fade) var(--se-out);
}

.slip-dial[data-dragging] .slip-dial__slot {
  cursor: grabbing;
}

.slip-dial__slot[data-in="true"] {
  color: var(--text);
}

/* The tinted cell behind an in-span number. */
.slip-dial__cell {
  position: absolute;
  inset: calc(6px * var(--slip-scale)) 2px;
  border-radius: calc(var(--radius-sm) * var(--slip-scale));
  background: var(--cell, var(--slip-band-tint));
  opacity: 0;
  transition:
    opacity 150ms var(--se-out),
    background-color 150ms var(--se-out);
}

.slip-dial__slot[data-in="true"] .slip-dial__cell {
  opacity: 1;
}

.slip-dial[data-band="low"] {
  --slip-band-tint: var(--success-soft);
  --slip-ring-lo: var(--success);
  --slip-ring-hi: var(--success);
}

.slip-dial[data-band="medium"] {
  --slip-band-tint: var(--warning-soft);
  --slip-ring-lo: var(--warning);
  --slip-ring-hi: var(--warning);
}

.slip-dial[data-band="high"] {
  --slip-band-tint: var(--warning-soft);
  --slip-ring-lo: var(--slip-ring-gold);
  --slip-ring-hi: var(--error);
}

/* The 26pt endpoint ring — also the thumb. */
.slip-dial__slot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(26px * var(--slip-scale));
  height: calc(26px * var(--slip-scale));
  border-radius: var(--radius-full);
  border: 2px solid var(--slip-ring-lo);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--sd-pop) var(--se-spring),
    opacity var(--sd-fade) var(--se-out),
    border-color var(--sd-fade) var(--se-out);
}

.slip-dial__slot[data-end="lo"]::after,
.slip-dial__slot[data-end="hi"]::after,
.slip-dial__slot[data-end="both"]::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.slip-dial__slot[data-end="hi"]::after,
.slip-dial__slot[data-end="both"]::after {
  border-color: var(--slip-ring-hi);
}

.slip-dial__num {
  position: relative;
}

/* --- Build Slip CTA --------------------------------------------------------------------- */

.slip-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-2) * var(--slip-scale));
  width: 100%;
  height: calc(56px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: calc(var(--text-base) * var(--slip-scale));
  font-weight: var(--weight-bold);
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

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

.slip-cta[data-disabled="true"] {
  background: var(--text-disabled);
}

.slip-cta__label {
  transition: opacity var(--sd-fade) var(--se-out);
}

/* Loading: the label and glyph give way to a three-dot pulse. */
.slip-cta__dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--slip-scale));
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.slip-cta__dots i {
  width: calc(8px * var(--slip-scale));
  height: calc(8px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--text-inverse);
  animation: slip-dots 900ms ease-in-out infinite;
  animation-play-state: paused;
}

.slip-cta__dots i:nth-child(2) {
  animation-delay: 150ms;
}

.slip-cta__dots i:nth-child(3) {
  animation-delay: 300ms;
}

.slip-cta[data-loading="true"] .slip-cta__label,
.slip-cta[data-loading="true"] .slip-cta__glyph {
  opacity: 0;
}

.slip-cta[data-loading="true"] .slip-cta__dots {
  opacity: 1;
}

.slip-cta[data-loading="true"] .slip-cta__dots i {
  animation-play-state: running;
}

@keyframes slip-dots {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(calc(-3px * var(--slip-scale)));
  }
}

/* --- Toasts ------------------------------------------------------------------------- */

.slip-toasts {
  position: fixed;
  right: 0;
  /* Just above the floating nav's footprint — its height plus .app__nav's padding. */
  bottom: calc(var(--nav-height) + var(--space-2) + var(--space-5) + 12px + max(var(--safe-bottom), var(--tg-chrome-inset, 0px)));
  left: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-2) * var(--slip-scale));
  pointer-events: none;
}

.slip-toast {
  padding: calc(8px * var(--slip-scale)) calc(14px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: rgb(var(--text-rgb) / 0.9);
  color: var(--text-inverse);
  font-size: calc(var(--text-sm) * var(--slip-scale));
  font-weight: var(--weight-semibold);
  transform: translateY(calc(8px * var(--slip-scale)));
  opacity: 0;
  transition:
    transform var(--sd-chevron) var(--se-out),
    opacity var(--sd-chevron) var(--se-out);
}

.slip-toast[data-shown="true"] {
  transform: translateY(0);
  opacity: 1;
}

/* A toast with something to do on it takes taps again — its container opts
   every toast out, so the nav underneath stays reachable. */
.slip-toast[data-action="true"] {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-3) * var(--slip-scale));
  padding-right: calc(6px * var(--slip-scale));
  pointer-events: auto;
}

.slip-toast__action {
  height: calc(26px * var(--slip-scale));
  padding: 0 calc(10px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: rgb(var(--text-inverse-rgb) / 0.16);
  color: var(--text-inverse);
  font-size: calc(var(--text-xs) * var(--slip-scale));
  font-weight: var(--weight-bold);
  transition: transform var(--spring-duration) var(--spring);
}

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

/*
 * Movement becomes a short fade. The odometer, the pulse, the pops and the
 * shakes stop entirely; heights and fills still change, they just do not
 * travel. Nothing here runs longer than 120ms.
 */
@media (prefers-reduced-motion: reduce) {
  .slip {
    --sd-fade: 100ms;
    --sd-chevron: 100ms;
    --sd-check: 0ms;
    --sd-odo: 0ms;
    --sd-roll: 0ms;
    --sd-pop: 0ms;
    --sd-pulse: 0ms;
    --sd-spring: 0ms;
    --sd-thumb: 0ms;
    --se-spring: ease-out;
  }

  .slip [data-anim],
  .slip .slip-counter__delta,
  .slip .slip-cta__dots i,
  .slip .slip-risk__text {
    animation: none !important;
  }

  .slip-strategy[aria-checked="true"],
  .slip-strategy[data-pressed="true"] {
    transform: none;
  }

  .slip-toast,
  .slip-sheet__panel {
    transform: none !important;
    transition: opacity 100ms ease-out !important;
  }

  .slip-sheet[data-open="false"] .slip-sheet__panel {
    opacity: 0;
  }

  .slip-sheet[data-open="true"] .slip-sheet__panel {
    opacity: 1;
  }
}