/*
 * The slip tray (SlipTray.js): the reader's own slip while it is being
 * built — a pill docked above the bottom nav, and the sheet it opens.
 *
 * One fixed root, sized to the shell, that passes every tap through except
 * on the pill and the sheet. It sits at the player page's level and later
 * in the document, so it floats over the two screens picks are collected
 * from and under search, the stories, onboarding and the gate — the pill is a
 * tool of browsing, not of any one screen — a circle in the nav's own row
 * on the fixtures tab, a pill on the fixture page, one box morphing between
 * the two, hidden everywhere else. The sheet is the slip results
 * screen's bookie picker chrome (scrim, stack layer, tall panel, circular X
 * and a title pill) with a pinned footer under a scrolling body.
 */

.slip-tray {

  position: fixed;
  inset: 0;
  z-index: 98;
  max-width: var(--app-max-width);
  margin-inline: auto;
  pointer-events: none;
}

/* --- The pill ------------------------------------------------------------------------- */

/*
 * One box, placed outright: SlipTray.js measures the nav's slip seat and
 * writes --x / --y / --w / --h for wherever the placement says the control
 * goes — over the seat as a circle on the fixtures tab, centred at the
 * seat's height as a pill on the fixture page — and the four transition, so
 * a change of placement is the box travelling and stretching between the
 * two. Stadium-round throughout, so a circle is only the pill at its
 * shortest.
 */
.slip-tray__dock {
  position: absolute;
  top: var(--y, 0px);
  left: var(--x, 0px);
  width: var(--w, var(--nav-height));
  height: var(--h, var(--nav-height));
  opacity: 0;
  transform: scale(0.9);
  transition:
    top var(--spring-duration) var(--spring),
    left var(--spring-duration) var(--spring),
    width var(--spring-duration) var(--spring),
    height var(--spring-duration) var(--spring),
    transform var(--spring-duration) var(--spring),
    opacity var(--duration) var(--easing);
}

.slip-tray[data-shown="true"] .slip-tray__dock:not([data-placement="hidden"]) {
  opacity: 1;
  transform: scale(1);
}

/* The nav's scroll-away, mirrored — the same travel the row makes. */
.slip-tray[data-shown="true"] .slip-tray__dock[data-placement="list"][data-retracted="true"] {
  opacity: 0;
  transform: translateY(calc(100% + var(--space-6))) scale(0.94);
  pointer-events: none;
}

/*
 * The nav's own frosted chrome (bottom-nav.css): surface, hairline, floating
 * shadow, and the blur only once the box has settled — compositing a live
 * backdrop against a moving element is what stutters in Telegram's WebView.
 */
.slip-tray__pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding-inline: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: auto;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .slip-tray__pill {
    background: rgb(var(--surface-rgb) / 0.72);
  }

  .slip-tray__dock--blurred .slip-tray__pill {
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
  }
}

/* The measuring twin: laid out at its natural width, seen by nobody. */
.slip-tray__pill--ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: var(--nav-height);
  visibility: hidden;
  pointer-events: none;
}

.slip-tray[data-shown="false"] .slip-tray__pill,
.slip-tray__dock[data-placement="hidden"] .slip-tray__pill {
  pointer-events: none;
}

.slip-tray__pill[data-anim="bump"] {
  animation: slip-tray-bump 260ms var(--spring);
}

@keyframes slip-tray-bump {
  0% {
    transform: scale(calc(1 * var(--press, 1)));
  }
  40% {
    transform: scale(calc(1.06 * var(--press, 1)));
  }
  100% {
    transform: scale(calc(1 * var(--press, 1)));
  }
}

/* As a circle the icon sits centred; the words are folded away. */
.slip-tray__dock:not([data-placement="detail"]) .slip-tray__pill {
  justify-content: center;
  padding-inline: 0;
}

/* The nav's own icon box, so the badge (`.nav-item__badge`, bottom-nav.css)
   lands on the same corner it does on Catch-Up. */
.slip-tray__glyph {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(22px * var(--scale));
  height: calc(22px * var(--scale));
  color: var(--text);
}

/*
 * The words: present in the pill, folded to nothing in the circle. Width
 * and opacity go together so the box shrinks around what is left rather
 * than clipping the label mid-word.
 */
.slip-tray__label,
.slip-tray__chevron {
  max-width: calc(120px * var(--scale));
  opacity: 1;
  overflow: hidden;
  transition:
    max-width var(--spring-duration) var(--spring),
    opacity var(--duration) var(--easing);
}

.slip-tray__chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transform: rotate(180deg);
}

.slip-tray__dock:not([data-placement="detail"]) .slip-tray__label,
.slip-tray__dock:not([data-placement="detail"]) .slip-tray__chevron {
  max-width: 0;
  opacity: 0;
  margin-left: calc(var(--space-2) * -1);
}

/* The tray's toasts — a pick replaced, a full slip — stack over the pill,
   inside this fixed root so they float over whatever page is open. */
.slip-tray .slip-toasts {
  position: absolute;
  bottom: calc(var(--space-5) + max(var(--safe-bottom), var(--tg-chrome-inset, 0px)) + var(--nav-height) + var(--space-3));
  z-index: 1;
}


/* --- The sheet ------------------------------------------------------------------------- */

/*
 * The slip results screen's bookie picker chrome, restated (`.sr-platforms`
 * in slip-results.css — itself the Advanced Markets / Code Converter
 * sheet): a darker scrim, the stack layer peeking above the panel, a tall
 * panel with a large top radius, and a head with a circular X on the left
 * and the title as a pill in the centre.
 */
.slip-tray__sheet {
  --st-enter: var(--spring-duration);
  --st-exit: 320ms;
  --st-lag: 40ms;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: auto;
}

.slip-tray__sheet[hidden] {
  display: none;
}

.slip-tray__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.slip-tray__sheet[data-open="true"] .slip-tray__scrim {
  opacity: 0.55;
}

.slip-tray__stack {
  position: absolute;
  right: calc(14px * var(--scale));
  bottom: 0;
  left: calc(14px * var(--scale));
  height: calc(84dvh + calc(10px * var(--scale)));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--slip-stack);
  transform: translateY(var(--rest-y, 100%));
  transition: transform var(--st-exit) var(--se-out);
}

.slip-tray__sheet[data-open="true"] .slip-tray__stack {
  --rest-y: 0px;

  transition: transform var(--st-enter) var(--spring) var(--st-lag);
}

.slip-tray__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 84dvh;
  background: var(--surface);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
  transform: translateY(var(--rest-y, 100%));
  transition: transform var(--st-exit) var(--se-out);
}

.slip-tray__sheet[data-open="true"] .slip-tray__panel {
  --rest-y: 0px;

  transition: transform var(--st-enter) var(--spring);
}

/* --- Head ----------------------------------------------------------------------------- */

.slip-tray__head {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(68px * var(--scale));
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* 56pt visual, 44pt hit whatever the scale — the picker's close. */
.slip-tray__close {
  --press-scale: 0.94;

  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-lg);
  height: var(--control-lg);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.slip-tray__close::before {
  content: "";
  position: absolute;
  inset: min(0px, calc((calc(48px * var(--scale)) - calc(37px * var(--scale))) / 2));
  border-radius: inherit;
}

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

.slip-tray__title {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--control-md);
  margin-inline: auto;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* Balances the close button so the title pill sits centred. */
.slip-tray__spacer {
  flex: none;
  width: calc(48px * var(--scale));
}

/* The count and the rules on the left, Clear on the right — the body's first row. */
.slip-tray__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-xs);
}

.slip-tray__subtitle {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.slip-tray__clear {
  height: var(--control-xs);
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.slip-tray__clear[hidden] {
  display: none;
}

/* --- Body ------------------------------------------------------------------------------ */

.slip-tray__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-3) var(--space-4) var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.slip-tray__full {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  padding: var(--space-15) var(--space-2);
  background: var(--warning-soft);
  border-radius: var(--radius-md);
  color: var(--warning-strong);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.slip-tray__full[hidden],
.slip-tray__empty[hidden] {
  display: none;
}

.slip-tray__empty {
  padding: var(--space-7) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.slip-tray__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

/* One pick: the crests, the words, the remove — the picker's row, with the
   crests where its logo disc sits. Enters and leaves through the keyed
   states, so a removed row folds away rather than vanishing. */
.slip-tray__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition:
    opacity var(--duration) var(--easing),
    transform var(--duration) var(--easing),
    background-color var(--duration) var(--easing);
}

/* The way to the fixture's page: a button stretched over the whole row,
   under the remove (which stacks above it), so the crests and the words
   need no handling of their own. Its press sinks the row rather than
   scaling it — the row is the thing being pressed. */
.slip-tray__open {
  --press-scale: 1;

  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.slip-tray__row:has(.slip-tray__open[data-pressed="true"]) {
  background: var(--surface-sunken);
}

.slip-tray__row[data-state="enter"] {
  opacity: 0;
  transform: translateY(calc(6px * var(--scale)));
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}

.slip-tray__row[data-state="leave"] {
  opacity: 0;
  transform: translateX(calc(-8px * var(--scale)));
}

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

.slip-tray__crests .logo + .logo {
  margin-left: calc(-1 * var(--space-15));
}

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

.slip-tray__fixture {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slip-tray__pick {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.slip-tray__market {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.slip-tray__meta {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  margin-top: var(--space-05);
}

.slip-tray__when {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The remove: the close button's ring, smaller, the error tone on press. */
.slip-tray__remove {
  --press-scale: 0.94;

  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition:
    color var(--duration) var(--easing),
    background-color var(--duration) var(--easing),
    border-color var(--duration) var(--easing);
}

.slip-tray__remove[data-pressed="true"] {
  background: var(--error-soft);
  border-color: transparent;
  color: var(--error-strong);
}

/* --- Footer ---------------------------------------------------------------------------- */

.slip-tray__footer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  padding: var(--space-2) var(--space-4) calc(var(--space-5) + var(--safe-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* The results screen's Generate pill, restated: the one action, full width. */
.slip-tray__book {
  width: 100%;
  height: calc(51px * var(--scale));
  justify-content: center;
  gap: var(--space-15);
  border-radius: var(--radius-full);
  font-size: var(--text-md);
}

.slip-tray__book:disabled {
  opacity: 0.55;
}

.slip-tray__book[data-busy="true"]:disabled {
  opacity: 1;
}

.slip-tray__book-glyph,
.slip-tray__spinner {
  display: grid;
  place-items: center;
}

.slip-tray__spinner {
  display: none;
  width: calc(14px * var(--scale));
  height: calc(14px * var(--scale));
  border: 2px solid rgb(var(--text-inverse-rgb) / 0.35);
  border-top-color: var(--text-inverse);
  border-radius: var(--radius-full);
  animation: ci-spin 700ms linear infinite;
}

.slip-tray__book[data-busy="true"] .slip-tray__spinner {
  display: block;
}

.slip-tray__book[data-busy="true"] .slip-tray__book-glyph {
  display: none;
}

.slip-tray__hint {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  text-align: center;
}

/* The Predictions tab's confidence pill, brought into this frame. */
.slip-tray .pred-confidence {
  padding: var(--space-05) var(--space-15);
  font-size: var(--text-2xs);
}

/* A Trend Finder pick's counts, in the confidence pill's place and neutral ground. */
.slip-tray__note {
  font-variant-numeric: tabular-nums;
}