/*
 * The Advanced Markets sheet (AdvancedMarkets.js) — the modal the market
 * accordions on the Slip Builder open. A near-full-height card over a scrim,
 * with a second card peeking out above it for the stacked look its reference
 * shows; inside, a header, one tab per market, a swipeable panel per tab and a
 * docked summary bar.
 *
 * Drawn through the same knob as the screen under it: every length is a
 * design-frame value times `--slip-scale` (tokens.css), except hairlines and
 * the 44pt hit areas, which are left at device size for the reasons the note
 * on that token gives. Colours are the app's semantic tokens; the motion
 * scale (`--sd-*`, `--se-*`) is inherited from `.slip`, which this mounts
 * inside, and the few durations that are this sheet's alone are declared on
 * its root below.
 */

.adv {
  position: fixed;
  inset: 0;
  /* The band the screen's other sheet occupies; the two are never open together. */
  z-index: 96;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: var(--app-max-width);
  margin-inline: auto;

  /* The entrance is the app's spring; the exit reverses it at 90% speed. */
  --adv-enter: var(--spring-duration);
  --adv-exit: 355ms;
  /* The stack layer settles this much behind the sheet. */
  --adv-lag: 40ms;
  /* The shared underline and the page track. */
  --adv-tab: 250ms;
  /* A probability bar filling from zero, and the step between rows. */
  --adv-bar: 450ms;
  --adv-bar-step: 60ms;
  /* A row's tint and its radio fill. */
  --adv-tint: 150ms;
}

.adv[hidden] {
  display: none;
}

/* --- Scrim and stack layer --------------------------------------------------- */

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

.adv[data-open="true"] .adv__scrim {
  opacity: 0.55;
}

/*
 * The decorative card behind the sheet: inset 16pt from either edge, its top
 * 12pt above the sheet's, no content. It rides the same offsets as the sheet
 * — the resting one and the drag one — so a drag takes both.
 */
.adv__stack {
  position: absolute;
  right: calc(16px * var(--slip-scale));
  bottom: 0;
  left: calc(16px * var(--slip-scale));
  height: calc(92dvh + 12px * var(--slip-scale));
  border-radius: calc(24px * var(--slip-scale)) calc(24px * var(--slip-scale)) 0 0;
  background: var(--slip-stack);
  transform: translateY(calc(var(--rest-y, 100%) + var(--drag-y, 0px)));
  transition: transform var(--exit-duration, var(--adv-exit)) var(--se-out);
}

.adv[data-open="true"] .adv__stack {
  --rest-y: 0px;

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

/* --- Panel --------------------------------------------------------------------- */

.adv__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 92dvh;
  background: var(--surface);
  border-radius: calc(28px * var(--slip-scale)) calc(28px * var(--slip-scale)) 0 0;
  overflow: hidden;
  /*
   * Entry, drag and exit on one property: the drag writes --drag-y and the
   * resting offset is a variable the open state zeroes, so a dismiss that
   * starts mid-entry adds to the rise rather than fighting it.
   */
  transform: translateY(calc(var(--rest-y, 100%) + var(--drag-y, 0px)));
  /* --exit-duration is written by a committed drag, from the distance left at
     the speed the finger had; unset, the exit is the entrance reversed. */
  transition: transform var(--exit-duration, var(--adv-exit)) var(--se-out);
}

.adv[data-open="true"] .adv__panel {
  --rest-y: 0px;

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

/* Under a finger nothing eases; released short of the line, it springs home. */
.adv[data-dragging="true"] .adv__panel,
.adv[data-dragging="true"] .adv__stack {
  transition: none;
}

.adv[data-dragging="released"] .adv__panel,
.adv[data-dragging="released"] .adv__stack {
  transition: transform var(--spring-duration) var(--spring);
}

/* --- Header ---------------------------------------------------------------------- */

.adv__head {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(88px * var(--slip-scale));
  padding: 0 calc(20px * var(--slip-scale));
  border-bottom: 1px solid var(--border);
  /* The head is the dismiss handle; the browser gets none of its touches. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 56pt visual, 44pt hit whatever the scale: the pseudo-element pads the
   target out without growing the circle the eye sees. */
.adv__close {
  --press-scale: 0.94;

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

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

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

.adv__title {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: calc(48px * var(--slip-scale));
  margin-inline: auto;
  padding: 0 calc(22px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: calc(16px * var(--slip-scale));
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

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

/* --- Tab bar -------------------------------------------------------------------- */

.adv-tabs {
  position: relative;
  flex: none;
  display: flex;
  height: calc(52px * var(--slip-scale));
  border-bottom: 1px solid var(--border);
}

.adv-tab {
  --press-scale: 1;

  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0 calc(var(--space-1) * var(--slip-scale));
  color: var(--text);
  font-size: calc(15px * var(--slip-scale));
  font-weight: var(--weight-bold);
  transition: color 150ms var(--se-out);
}

.adv-tab[aria-selected="true"] {
  color: var(--accent);
}

.adv-tab[data-pressed="true"] {
  opacity: 0.7;
}

.adv-tab__content {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/*
 * The count badge: an 18pt accent disc, 6pt before the label, only while its
 * market holds a drafted pick. It scales in on the spring and out on the fade,
 * and its width and gap travel with it so the label slides rather than jumps.
 */
.adv-tab__badge {
  display: grid;
  place-items: center;
  width: calc(18px * var(--slip-scale));
  height: calc(18px * var(--slip-scale));
  margin-right: calc(6px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: calc(11px * var(--slip-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow: hidden;
  transform: scale(1);
  transition:
    transform var(--sd-pop) var(--se-spring),
    width var(--sd-pop) var(--se-out),
    margin-right var(--sd-pop) var(--se-out);
}

.adv-tab__badge[data-shown="false"] {
  width: 0;
  margin-right: 0;
  transform: scale(0);
  transition:
    transform var(--sd-fade) var(--se-out),
    width var(--sd-fade) var(--se-out),
    margin-right var(--sd-fade) var(--se-out);
}

.adv-tab__badge[data-anim="pop"] {
  animation: adv-pop var(--sd-pop) var(--se-spring);
}

/* One underline, shared: it slides between tabs, and rides a swipe live. */
.adv-tabs__line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--w, 0px);
  height: max(2px, calc(2.5px * var(--slip-scale)));
  border-radius: var(--radius-full);
  background: var(--accent);
  transform: translateX(var(--x, 0px));
  transition:
    transform var(--adv-tab) var(--spring),
    width var(--adv-tab) var(--spring);
}

.adv[data-paging="true"] .adv-tabs__line,
.adv-tabs[data-settled="false"] .adv-tabs__line {
  transition: none;
}

/* --- Pages ----------------------------------------------------------------------- */

.adv-pages {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* Vertical pans are the page's own scroll; horizontal ones page the tabs. */
  touch-action: pan-y;
}

.adv-pages__track {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--page, 0) * -100% + var(--drag-x, 0px)));
  transition: transform var(--adv-tab) var(--se-out);
  will-change: transform;
}

.adv[data-paging="true"] .adv-pages__track {
  transition: none;
}

.adv-page {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- Title block ------------------------------------------------------------------- */

.adv-title {
  position: relative;
  padding: calc(24px * var(--slip-scale)) calc(20px * var(--slip-scale)) calc(20px * var(--slip-scale));
  overflow: hidden;
}

/* Three hairlines at roughly 75°, oversized and cut by the block's edges. */
.adv-title__mark {
  position: absolute;
  top: -20%;
  right: 0;
  width: 60%;
  height: 140%;
  pointer-events: none;
}

.adv-title__mark line {
  stroke: var(--border);
  stroke-opacity: 0.6;
  stroke-width: 1;
}

.adv-title__name {
  position: relative;
  color: var(--text);
  font-size: calc(42px * var(--slip-scale));
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.05;
}

.adv-title__help {
  position: relative;
  max-width: 34ch;
  margin-top: calc(8px * var(--slip-scale));
  color: var(--text-muted);
  font-size: calc(16px * var(--slip-scale));
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

/* --- Option rows ------------------------------------------------------------------- */

.adv-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

/* Full-bleed: the tint runs edge to edge, the padding is inside. The press
   dips the ground rather than scaling — the row is the whole width. */
.adv-row {
  --press-scale: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--slip-scale));
  width: 100%;
  min-height: calc(84px * var(--slip-scale));
  padding: 0 calc(20px * var(--slip-scale));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: background-color var(--adv-tint) var(--se-out);
}

.adv-row[data-tag="true"] {
  min-height: calc(96px * var(--slip-scale));
}

.adv-row[aria-checked="true"] {
  background: var(--accent-tint);
}

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

.adv-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6px * var(--slip-scale));
}

.adv-row__label {
  font-size: calc(23px * var(--slip-scale));
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* "Very Likely" — outlined, accent, only from 90 up. */
.adv-row__tag {
  display: inline-flex;
  align-items: center;
  height: calc(24px * var(--slip-scale));
  padding: 0 calc(10px * var(--slip-scale));
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  color: var(--accent);
  font-size: calc(12px * var(--slip-scale));
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.adv-row__side {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(14px * var(--slip-scale));
}

/* The probability bar: a sunken rail, a fill the width of the figure, its
   colour by band — green from 60, amber from 40, red below. */
.adv-bar {
  position: relative;
  width: calc(120px * var(--slip-scale));
  height: calc(6px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}

/* Fills from zero once per mount, each row 60ms after the one above it. */
.adv-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 1%);
  border-radius: var(--radius-full);
  background: var(--success);
  transition: width var(--adv-bar) var(--se-out) calc(var(--i, 0) * var(--adv-bar-step));
}

.adv-bar[data-band="warn"] .adv-bar__fill {
  background: var(--warning);
}

.adv-bar[data-band="bad"] .adv-bar__fill {
  background: var(--error);
}

.adv-page[data-mounted="false"] .adv-bar__fill {
  width: 0;
  transition: none;
}

.adv-row__pct {
  min-width: calc(48px * var(--slip-scale));
  font-size: calc(17px * var(--slip-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Sunken disc idle; solid accent selected, no glyph. */
.adv-row__radio {
  width: calc(20px * var(--slip-scale));
  height: calc(20px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  transition: background-color var(--adv-tint) var(--se-out);
}

.adv-row[aria-checked="true"] .adv-row__radio {
  background: var(--accent);
}

.adv-row__radio[data-anim="pop"] {
  animation: adv-pop var(--sd-pop) var(--se-spring);
}

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

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

.adv-foot {
  flex: none;
  padding: calc(8px * var(--slip-scale)) calc(20px * var(--slip-scale)) calc(12px * var(--slip-scale) + var(--safe-bottom));
  background: var(--surface);
}

.adv-foot__bar {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--slip-scale));
  height: calc(72px * var(--slip-scale));
  padding: calc(8px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
}

/* 20pt from the container's edge: its 8pt padding plus this. */
.adv-foot__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-left: calc(12px * var(--slip-scale));
}

.adv-foot__count {
  display: flex;
  align-items: baseline;
  gap: calc(8px * var(--slip-scale));
  color: var(--accent);
  font-size: calc(28px * var(--slip-scale));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.adv-foot__options {
  font-size: calc(18px * var(--slip-scale));
  font-weight: var(--weight-bold);
}

.adv-foot__sub {
  margin-top: calc(3px * var(--slip-scale));
  color: var(--text-muted);
  font-size: calc(13px * var(--slip-scale));
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Both buttons: 56pt visual, 44pt hit at any scale, as the close button. */
.adv-foot__clear,
.adv-foot__apply {
  position: relative;
  flex: none;
  height: calc(56px * var(--slip-scale));
  border-radius: var(--radius-full);
  font-size: calc(16px * var(--slip-scale));
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.adv-foot__clear::before,
.adv-foot__apply::before {
  content: "";
  position: absolute;
  inset: min(0px, calc((56px * var(--slip-scale) - 44px) / 2)) 0;
  border-radius: inherit;
}

/* Always styled as live — at zero it simply does nothing. */
.adv-foot__clear {
  padding: 0 calc(22px * var(--slip-scale));
  background: var(--error-soft);
  color: var(--error);
}

.adv-foot__clear[data-pressed="true"] {
  box-shadow: inset 0 0 0 999px rgb(var(--text-rgb) / 0.04);
}

.adv-foot__apply {
  --press-scale: 0.98;

  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--slip-scale));
  padding: 0 calc(20px * var(--slip-scale)) 0 calc(14px * var(--slip-scale));
  background: var(--accent);
  color: var(--text-inverse);
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

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

/* The live count inside Apply — the same number as the block on the left. */
.adv-foot__num {
  display: grid;
  place-items: center;
  width: calc(24px * var(--slip-scale));
  height: calc(24px * var(--slip-scale));
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--accent);
  font-size: calc(13px * var(--slip-scale));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.adv-foot__num[data-anim="bounce"] {
  animation: slip-bounce 200ms var(--se-spring);
}

/* --- Reduced motion and high contrast ------------------------------------------------ */

/*
 * The sheet fades rather than slides, the underline jumps, the bars are drawn
 * at their value, the counts snap (the odometer's own rule) and nothing pops.
 * The decorative lines go too, along with under high contrast: they are
 * texture, and texture is the first thing either setting asks to lose.
 */
@media (prefers-reduced-motion: reduce) {
  .adv {
    --adv-enter: 0ms;
    --adv-exit: 0ms;
    --adv-lag: 0ms;
    --adv-tab: 0ms;
    --adv-bar: 0ms;
    --adv-bar-step: 0ms;
    --adv-tint: 100ms;
  }

  .adv__panel,
  .adv__stack {
    transform: none !important;
    transition: opacity 100ms ease-out !important;
  }

  .adv[data-open="false"] .adv__panel,
  .adv[data-open="false"] .adv__stack {
    opacity: 0;
  }

  .adv [data-anim] {
    animation: none !important;
  }

  .adv-tab__badge,
  .adv-tab__badge[data-shown="false"] {
    transition: none;
  }

  .adv-title__mark {
    display: none;
  }
}

@media (prefers-contrast: more) {
  .adv-title__mark {
    display: none;
  }
}