/*
 * My Slips (MySlips.js) — the page behind the account page's row.
 *
 * The account page's shell one tier up (edit-profile.css is the other page
 * at this tier): fixed at z-index 71 so it rises over the account page and
 * sits under everything that page sits under, fading while its sheet
 * lifts, its own scroller under a pinned top row and switch. One more copy
 * of the tool-page shell, and one more vote for a shared `.tool-page`.
 *
 * Below the switch the page is the results screen's ticket, at list size:
 * white cards on the off-white page, a hairline for an edge, the date and
 * a standing chip as the eyebrow, the composition as the headline, and
 * the strip — one cell per game, green for a pick that entered, red for
 * one that did not, grey for one still to play — with the two figures
 * under it. The colours are the app's outcome tokens and nothing else's;
 * the accent is kept for the live chip and the switch. Nothing casts a
 * shadow but the top row's back button, which is the app's.
 */

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

.my-slips {
  --enter-y: 12px;

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

.my-slips[hidden] {
  display: none;
}

.my-slips [hidden] {
  display: none !important;
}

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

  opacity: 1;
}

.my-slips__sheet {
  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 account page under it keeps its place. */
.my-slips__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- Top row and switch ----------------------------------------------------------- */

/* Leave on the left, the page's name centred, and a box the button's size
   on the right so the title sits in the middle of the page rather than of
   what the button leaves. */
.ms-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) 0;
}

.ms-top__title {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-top__spacer {
  flex: none;
  width: 40px;
}

/* The switch is pinned with the top row: a list several screens long is
   swapped without a scroll back up first. */
.ms-switch {
  flex: none;
  padding: var(--space-4) var(--space-4) var(--space-3);
}

/* A page-level switch, a size up from the segmented control's default:
   the row is the page's one control, and its words are the page's two
   sections. */
.ms-switch .segmented__option {
  padding-block: 10px;
  font-size: var(--text-sm);
}

/* --- Panes -------------------------------------------------------------------------- */

.ms-pane {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) var(--space-4) calc(var(--space-8) + var(--safe-bottom));
  transition:
    opacity var(--duration) var(--easing),
    transform var(--duration) var(--easing);
}

/* The bottom nav's fade-through (layout.css's `.tab-pane`): out quickly and
   flat, in with a short rise. */
.ms-pane[data-state="leave"] {
  opacity: 0;
  transition-duration: var(--duration-press);
}

.ms-pane[data-state="enter"] {
  opacity: 0;
  transform: translateY(8px);
}

.ms-list,
.ms-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ms-note {
  padding-top: var(--space-4);
}

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

/*
 * One slip: the ticket's own card material — white, an 18px radius, a
 * hairline — with the ticket's rows at list size. A button, the whole of
 * it, so the press tier below reads on the whole card.
 */
.ms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text);
  text-align: left;
  /* Press scale comes from [data-pressable] in interactions.css. */
  transition:
    background-color var(--duration) var(--easing),
    opacity var(--duration) var(--easing),
    transform var(--spring-duration) var(--spring);
}

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

/* Cards arrive one after another on a first fill (`fill` in MySlips.js). */
.ms-card[data-state="enter"] {
  opacity: 0;
  transform: translateY(10px);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}

/* The eyebrow: the slip's number and date on the left, its standing on the right. */
.ms-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ms-card__when {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-card__number {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.ms-card__dot {
  color: var(--border-strong);
}

/*
 * The standing chip — the risk badge's box (slip-builder.css's `.slip-risk`)
 * in the outcome tokens: won and lost in the two verdict colours, live in
 * the accent with a pulse on its dot, and everything undecided in the
 * sunken grey.
 */
.ms-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

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

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

.ms-chip[data-standing="live"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.ms-chip[data-standing="live"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: ms-live-pulse 1.6s ease-in-out infinite;
}

@keyframes ms-live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* The headline and what shaped the slip, with the teams' crests opposite. */
.ms-card__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

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

.ms-card__title {
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-card__sub {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * The crests, stacked: each overlaps the last by a third, ringed in the
 * card's own white so the overlap reads as a stack and not a smear, and
 * the count disc at the end wears the sunken grey.
 */
.ms-crests {
  flex: none;
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.ms-crest {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  background: var(--surface);
  border: 2px solid var(--surface);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px var(--border);
}

.ms-crest .logo {
  background: none;
}

.ms-crest .logo--monogram {
  background: var(--surface-sunken);
  font-size: 8px;
}

.ms-crest--more {
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* --- The tally ------------------------------------------------------------------------- */

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

/*
 * One cell per game, in kickoff order, the cells sharing the row evenly:
 * the picks that entered in the win colour, the misses in the loss colour,
 * the games still to play in the sunken grey, and a game called off as a
 * hollow. Ten games at most, so the cells never get too thin to read.
 */
.ms-strip {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), 1fr);
  gap: 3px;
  height: 6px;
}

.ms-strip__cell {
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
}

.ms-strip__cell[data-standing="entered"] {
  background: var(--form-win);
}

.ms-strip__cell[data-standing="missed"] {
  background: var(--form-loss);
}

.ms-strip__cell[data-standing="void"] {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}

/* "7 Entered · 2 Missed · 1 To Play" — each figure with its cell's colour on a dot. */
.ms-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.ms-figure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ms-figure__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--surface-pressed);
}

.ms-figure[data-tone="entered"] {
  color: var(--form-win);
}

.ms-figure[data-tone="entered"] .ms-figure__dot {
  background: var(--form-win);
}

.ms-figure[data-tone="missed"] {
  color: var(--form-loss);
}

.ms-figure[data-tone="missed"] .ms-figure__dot {
  background: var(--form-loss);
}

.ms-figure[data-tone="pending"] {
  color: var(--text-muted);
}

.ms-figure[data-tone="void"] {
  color: var(--text-muted);
}

.ms-figure[data-tone="void"] .ms-figure__dot {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}

/* --- The foot --------------------------------------------------------------------------- */

/* Past a hairline: the code the slip was booked with, and the chevron that
   says the card leads somewhere. */
.ms-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 calc(var(--space-4) * -1);
  padding: var(--space-2) var(--space-4) 0;
  border-top: 1px solid var(--border);
}

.ms-card__booking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-card__code-glyph {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}

/* The code itself, set the way the results screen's field sets it: dark,
   bold and spaced, so it can be read off to a friend. */
.ms-card__code {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

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

/* --- The skeleton --------------------------------------------------------------------- */

/* A card's shape in the shared pulse: the eyebrow, the headline, the line
   under it and the strip, each a little narrower than its counterpart. */
.ms-card--skeleton {
  gap: 10px;
  pointer-events: none;
}

.ms-skeleton__line {
  width: var(--w, 100%);
  height: 12px;
  border-radius: var(--radius-full);
}

.ms-skeleton__line--title {
  height: 18px;
}

.ms-skeleton__strip {
  height: 6px;
  margin-top: 4px;
  border-radius: var(--radius-full);
}

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

@media (prefers-reduced-motion: reduce) {
  .my-slips,
  .my-slips__sheet,
  .ms-pane,
  .ms-card {
    transition: none;
  }

  .ms-card[data-state="enter"],
  .ms-pane[data-state="enter"] {
    transform: none;
  }

  .ms-chip[data-standing="live"]::before {
    animation: none;
  }
}