/* ============================================================
   SHIFT — Claim page (v2)
   Layout + motion. Color/type tokens live in assets/shift-tokens.css.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--surface-app); overflow-x: hidden; }
button, input { font: inherit; color: inherit; }

:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-strong: cubic-bezier(0.16, 1, 0.3, 1); /* strong ease-out for UI interactions (emil) */
  --font-display: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display", "Haas Grot Disp", "Helvetica Neue", "Inter", sans-serif;
}

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--s-gutter);
}

/* ---------- header / footer ---------- */
.top {
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 4px 0;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.045em;
  color: var(--ink-0);
  line-height: 1;
}
.top-label { font: var(--text-label); color: var(--fg-subtle); }

.foot {
  width: 100%;
  max-width: 560px;
  padding: 28px 4px 24px;
  text-align: center;
}
.foot span { font: var(--text-caption); color: var(--fg-subtle); }

/* ---------- stage ---------- */
.stage-wrap {
  width: 100%;
  max-width: 560px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0 8px;
}
.scene { animation: scene-in 400ms var(--ease) both; }
@keyframes scene-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- state 1 — claim ---------- */
.claim-card {
  background: var(--surface-card);
  border-radius: var(--r-card-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 560px) { .claim-card { padding: 40px 40px 32px; } }

/* ---------- laptop / desktop: two-column, fits one screen ---------- */
@media (min-width: 880px) {
  /* widen the claim scene; keep the other states at their original width */
  .stage-wrap { max-width: 920px; padding: 18px 0 8px; }
  .top { max-width: 920px; }
  .confirm, .race { max-width: 560px; margin-left: auto; margin-right: auto; }

  .press { padding: 0 0 16px; }

  /* video to the right, form on the left — both share the card height */
  .claim-card {
    display: grid;
    grid-template-columns: 1fr 336px;
    grid-template-rows: repeat(7, min-content);
    column-gap: 40px;
    row-gap: 12px;
    align-items: start;
    padding: 32px 36px;
  }
  .claim-card > * { grid-column: 1; min-width: 0; }
  .claim-card > .proof {
    grid-column: 2;
    grid-row: 1 / -1;
    height: 100%;
    margin: 0;
  }
  .claim-card > .proof .proof-media {
    flex: 1;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  /* tighten the headline so the left column stays compact */
  .hero { font-size: 40px; line-height: 1.04; }
  .sub { margin-bottom: 2px; max-width: none; }
  .ticker { margin-bottom: 0; }
  .micro { text-align: left; }
}

.stagger > * { animation: scene-in 400ms var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 40ms; }
.stagger > *:nth-child(2) { animation-delay: 100ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 220ms; }
.stagger > *:nth-child(5) { animation-delay: 280ms; }
.stagger > *:nth-child(6) { animation-delay: 340ms; }
.stagger > *:nth-child(7) { animation-delay: 400ms; }
.stagger > *:nth-child(8) { animation-delay: 460ms; }
.scene > .press { animation: scene-in 450ms var(--ease) 140ms both; }

.ticker {
  display: flex;
  align-items: center;
  gap: 7px;
  font: var(--text-label);
  margin-bottom: var(--s-2);
}
.ticker-flame { display: inline-flex; }
.ticker .odo { font-weight: 700; color: var(--ink-0); font-size: 14px; }
.ticker-label { color: var(--fg-muted); }

.hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 9vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink-0);
  text-wrap: balance;
}
.sub {
  font: var(--text-body);
  color: var(--fg-muted);
  max-width: 42ch;
  text-wrap: pretty;
  margin-bottom: var(--s-2);
}

/* z-index lifts the whole field-wrap (and its popover) above the email + CTA.
   Those siblings each become a stacking context because the card's entrance
   animation leaves a lingering transform on them, which would otherwise paint
   them over the popover. */
.field-wrap { position: relative; z-index: 20; }
.field-wrap .field { padding-right: 46px; }
.field-chevron {
  position: absolute;
  top: 0; right: 0;
  height: 52px; width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-6);
}
.field-chevron svg { transition: transform 200ms var(--ease); }
.field-wrap.is-open .field-chevron svg { transform: rotate(180deg); }
.field {
  width: 100%;
  height: 52px;
  border: 1px solid var(--ink-9);
  border-radius: var(--r-field);
  background: var(--surface-white);
  padding: 0 var(--s-4);
  font: var(--text-body-md);
  color: var(--ink-0);
  outline: none;
  transition: border-color 150ms var(--ease), box-shadow 200ms var(--ease);
}
.field::placeholder { color: var(--ink-a50); font-weight: 400; }
/* soft focus ring (premium) instead of a hard browser outline */
.field:focus { border-color: var(--shift-orange); box-shadow: 0 0 0 4px rgba(255, 83, 33, 0.16); }

/* desktop: floating popover anchored below the field. It OVERLAYS the form
   rather than reflowing it, so opening the list never grows the card or pushes
   the CTA past the fold — the one-screen layout stays put. Smooth fade + lift. */
.suggest-shell {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 160ms var(--ease), transform 220ms var(--ease-strong);
}
.suggest-shell.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.suggest-clip {
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-white);
  border: 1px solid var(--ink-a05);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.13), 0 3px 10px rgba(0, 0, 0, 0.06);
}
.suggest {
  list-style: none;
  overflow-y: auto;
  max-height: 268px;
  overscroll-behavior: contain;
}
.suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px var(--s-4);
  font: var(--text-body-md);
  cursor: pointer;
  box-shadow: inset 0 0 0 var(--shift-orange);
  transition: background 130ms var(--ease), box-shadow 160ms var(--ease-strong);
}
.suggest-item + .suggest-item { border-top: 1px solid var(--ink-a05); }
.suggest-item:hover, .suggest-item.is-hi { background: var(--shift-orange-soft); }
/* accent bar on the keyboard-highlighted row so it reads as "selected" */
.suggest-item.is-hi { box-shadow: inset 3px 0 0 var(--shift-orange); }
.suggest-item strong { font-weight: 700; }
.suggest-item.is-custom span:first-child { color: var(--shift-orange); font-weight: 600; }

.cta {
  height: 56px;
  border: none;
  border-radius: var(--r-button);
  background: var(--shift-orange-bright);
  color: var(--fg-on-color);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform 150ms var(--ease-strong), box-shadow 200ms var(--ease), background 250ms var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255, 62, 0, 0.42); }
.cta:active:not(:disabled) { transform: scale(0.97); }
.cta:disabled { background: rgb(122, 122, 122) !important; box-shadow: none; cursor: default; }
.cta:focus-visible { outline: 2px solid var(--shift-orange); outline-offset: 2px; }

.spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.micro {
  font: var(--text-caption);
  color: var(--fg-subtle);
  text-align: center;
}

/* ---------- proof media ---------- */
.proof { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-2); }
.proof-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-card-sm);
  background: var(--surface-sunken);
}
.proof-cap { font: var(--text-caption); color: var(--fg-subtle); padding: 0 2px; }

/* ---------- press marquee ---------- */
.press {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2px 0 22px;
}
.press-label {
  font: var(--text-caption);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.press-mask {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.press-track { display: flex; width: max-content; animation: press-scroll 26s linear infinite; }
.press-mask:hover .press-track { animation-play-state: paused; }
.press-row { display: flex; align-items: center; }
.press-logo {
  font-size: 17px;
  line-height: 1;
  color: var(--ink-8);
  white-space: nowrap;
  padding: 0 22px;
}
@keyframes press-scroll { to { transform: translateX(-50%); } }

/* ---------- odometer ---------- */
.odo {
  display: inline-flex;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}
.odo-col { display: block; height: 1em; overflow: hidden; }
.odo-strip { display: block; transition: transform 600ms var(--ease); }
.odo-cell { display: block; height: 1em; line-height: 1; }
.odo-sep { display: block; height: 1em; line-height: 1; }

/* ---------- state 2 — confirmation ---------- */
.confirm {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding: clamp(40px, 6vw, 60px) clamp(24px, 4vw, 44px);
  /* give the celebration weight — a card instead of a badge floating in void */
  background: var(--surface-card);
  border-radius: var(--r-card-lg);
  box-shadow: var(--shadow-card);
}
.confetti {
  position: absolute;
  inset: -40px 0;
  width: 100%; height: calc(100% + 80px);
  pointer-events: none;
}
.ck-circle {
  stroke: currentColor;
  stroke-dasharray: 271;
  stroke-dashoffset: 271;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: ck-draw 500ms var(--ease) 80ms forwards;
}
.ck-path {
  stroke: currentColor;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: ck-draw 350ms var(--ease) 480ms forwards;
}
@keyframes ck-draw { to { stroke-dashoffset: 0; } }

/* v2 badge choreography: arc sweep → disc pop → check draw → ticks bloom */
.ckb { overflow: visible; display: block; }
.ckb-arc {
  stroke-dasharray: 277;
  stroke-dashoffset: 277;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: arc-sweep 520ms cubic-bezier(0.65, 0, 0.35, 1) 60ms forwards,
             arc-fade 200ms var(--ease) 640ms forwards;
}
@keyframes arc-sweep { to { stroke-dashoffset: 0; } }
@keyframes arc-fade { to { opacity: 0; } }
.ckb-disc {
  transform: scale(0);
  transform-origin: center;
  animation: disc-pop 520ms cubic-bezier(0.16, 1, 0.3, 1) 500ms forwards;
}
@keyframes disc-pop {
  0% { transform: scale(0); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.ckb-check {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: ck-draw 400ms cubic-bezier(0.16, 1, 0.3, 1) 720ms forwards;
}
.ckb-ticks {
  opacity: 0;
  transform: rotate(-32deg) scale(0.92);
  transform-origin: center;
  animation: ticks-bloom 900ms cubic-bezier(0.16, 1, 0.3, 1) 680ms forwards;
}
.ckb-ticks line { opacity: 0.4; }
@keyframes ticks-bloom { to { opacity: 1; transform: rotate(0deg) scale(1); } }

.confirm-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-0);
  text-wrap: balance;
  animation: scene-in 400ms var(--ease) 350ms both;
}
.confirm-pos {
  font: var(--text-h4);
  font-weight: 500;
  color: var(--fg-muted);
  animation: scene-in 400ms var(--ease) 1150ms both;
}
.confirm-pos strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.confirm-note {
  font: var(--text-meta);
  color: var(--fg-subtle);
  max-width: 34ch;
  text-wrap: pretty;
  animation: scene-in 400ms var(--ease) 1600ms both;
}

/* ---------- state 3 — the race ---------- */
.race { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: 36px; }

.race-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid;
  border-radius: var(--r-chip);
  padding: 6px 14px 6px 10px;
  font: var(--text-label);
  color: var(--ink-0);
  background: var(--surface-card);
}
.race-chip-dot { width: 8px; height: 8px; border-radius: 50%; }

.race-note { font: var(--text-meta); color: var(--fg-muted); margin-top: -6px; }

.race-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 7.5vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink-0);
  text-wrap: balance;
  margin-bottom: var(--s-2);
}

.board { position: relative; }
.row {
  position: absolute;
  left: 0; right: 0;
  background: var(--surface-card);
  border-radius: var(--r-card-sm);
  box-shadow: var(--shadow-card);
  padding: 12px var(--s-4) 14px;
  transition: transform 500ms var(--ease);
  will-change: transform;
}
.row.is-user { animation: row-pulse 900ms var(--ease) 900ms 1; }
@keyframes row-pulse {
  0% { scale: 1; }
  40% { box-shadow: var(--shadow-pop); }
  50% { scale: 1.015; }
  100% { scale: 1; }
}

.row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 9px;
}
.row-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: var(--text-title);
  color: var(--ink-0);
}
.row-you {
  color: #fff;
  font: var(--text-caption);
  font-weight: 600;
  border-radius: var(--r-chip);
  padding: 1px 8px 2px;
}
.row-count { font: var(--text-label); color: var(--fg-muted); font-size: 14px; }

.bar-track {
  height: 4px;
  border-radius: var(--r-chip);
  background: var(--surface-sunken);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: var(--r-chip);
  transition: width 700ms var(--ease), background 250ms var(--ease);
}

.race-foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.race-foot-line { font: var(--text-meta); color: var(--fg-muted); text-align: center; }
.race-foot .cta { padding: 0 18px; }

/* top-5 / expand control */
.board-expand {
  align-self: center;
  background: none;
  border: none;
  color: var(--fg-muted);
  font: var(--text-meta);
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-chip);
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
.board-expand:hover { color: var(--ink-0); background: var(--ink-a05); }
/* "···" break shown above the pinned user row when it's below the top 5 */
.board-skip {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-8);
  pointer-events: none;
}

/* ---------- v2 motion layer ---------- */

/* masked word-by-word headline reveal */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; margin-right: 0.24em; padding-bottom: 0.06em; }
.w:last-child { margin-right: 0; }
.wi { display: inline-block; transform: translateY(115%); animation: word-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.wi-accent {
  color: var(--shift-orange);
}
@keyframes word-up { to { transform: translateY(0); } }

@media (max-width: 559px) {
  .hero {
    font-size: clamp(34px, 8.5vw, 46px);
    line-height: 1.03;
    letter-spacing: -0.025em;
  }
  .w { margin-right: 0.18em; }
}

/* scene exit — content settles up and away */
.scene-exit { animation: scene-out 380ms var(--ease) forwards; pointer-events: none; }
@keyframes scene-out {
  to { opacity: 0; transform: translateY(-18px) scale(0.985); }
}

/* CTA → circle morph while claiming */
.cta { align-self: stretch; }
.claim-card .cta { transition: transform 150ms var(--ease-strong), box-shadow 200ms var(--ease), background 250ms var(--ease), width 380ms cubic-bezier(0.7, 0, 0.25, 1), border-radius 380ms cubic-bezier(0.7, 0, 0.25, 1); }
.cta.is-loading { width: 56px; border-radius: var(--r-chip); margin-inline: auto; padding: 0; box-shadow: var(--shadow-cta); }

/* live "+n" floaters */
.bump-wrap { position: relative; display: inline-block; width: 0; height: 1em; overflow: visible; }
.bump {
  position: absolute; left: 6px; bottom: 0;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--shift-orange);
  animation: bump-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  white-space: nowrap; pointer-events: none;
}
@keyframes bump-rise {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* ticker flame pulse on tick */
.flame-tick { animation: flame-pulse 500ms var(--ease); transform-origin: 50% 80%; }
@keyframes flame-pulse { 35% { scale: 1.25; } 100% { scale: 1; } }
.ticker-flame { display: inline-flex; transition: scale 200ms var(--ease); }

/* confirmation ripple rings behind the check */
.ck-stack { position: relative; display: grid; place-items: center; }
.ck-stack > * { grid-area: 1 / 1; }
/* soft orange glow halo behind the medallion — gives it presence in the card */
.ck-stack::before {
  content: '';
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 83, 33, 0.24), rgba(255, 83, 33, 0) 68%);
  opacity: 1;
  animation: ck-glow 900ms var(--ease) 520ms both;
  pointer-events: none;
}
@keyframes ck-glow { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
/* gradient medallion: depth shadow, domed gloss, lingering outer ring */
.ckb-disc { filter: drop-shadow(0 10px 26px rgba(229, 67, 13, 0.42)); }
.ckb-gloss { animation: ck-gloss 500ms var(--ease) 760ms both; }
@keyframes ck-gloss { from { opacity: 0; } to { opacity: 0.18; } }
.ckb-halo { opacity: 0.18; transform-origin: center; animation: ck-halo 1000ms var(--ease) 820ms both; }
@keyframes ck-halo { 0% { opacity: 0; transform: scale(0.85); } 45% { opacity: 0.3; } 100% { opacity: 0.18; transform: scale(1); } }
.ripple {
  width: 112px; height: 112px; border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: ripple-out 1100ms cubic-bezier(0.16, 1, 0.3, 1) 520ms forwards;
  pointer-events: none;
}
.ripple.r2 { animation-delay: 700ms; }
@keyframes ripple-out {
  0% { transform: scale(0.7); opacity: 0; }
  25% { opacity: 0.45; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ck { transform: scale(0.8); animation: ck-settle 600ms cubic-bezier(0.16, 1, 0.3, 1) 60ms forwards; }
@keyframes ck-settle { to { transform: scale(1); } }
.confirm-pos strong { display: inline-block; animation: pos-settle 450ms cubic-bezier(0.16, 1, 0.3, 1) 1450ms both; }
@keyframes pos-settle { 0% { scale: 1; } 45% { scale: 1.12; } 100% { scale: 1; } }

/* race rows — staggered entrance inside the translated shell */
.row { overflow: hidden; }
.row-in { animation: row-enter 550ms cubic-bezier(0.16, 1, 0.3, 1) both; display: flex; align-items: center; gap: 12px; }
.row-thumb {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface-sunken);
  overflow: hidden;
  flex-shrink: 0;
}
.row-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 450ms var(--ease);
  filter: saturate(0.88);
}
.row-thumb img.is-in { opacity: 1; }
.row-body { flex: 1; min-width: 0; }
.board-credit { color: var(--ink-8); }
@keyframes row-enter {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.row-glow {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; pointer-events: none;
  animation: glow-fade 900ms var(--ease) forwards;
}
@keyframes glow-fade { 0% { opacity: 0.16; } 100% { opacity: 0; } }

.race.stagger > * { animation: scene-in 450ms var(--ease) both; }
.race.stagger > .board { animation: none; }

/* ---------- mobile: bottom-sheet city picker ---------- */
/* Hidden by default; only the inline expander shows on desktop (≥560px). */
.city-scrim, .city-sheet { display: none; }

@media (max-width: 559px) {
  /* on phones the in-card inline list is replaced by the sheet */
  .field-wrap .suggest-shell { display: none; }
  .field-wrap .field { cursor: pointer; }

  .city-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--ease);
    z-index: 40;
  }
  .city-scrim.is-open { opacity: 1; pointer-events: auto; }

  .city-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0;
    bottom: var(--kb, 0px);              /* lifts above the soft keyboard */
    z-index: 50;
    max-height: min(86vh, calc(100vh - var(--kb, 0px) - 16px));
    background: var(--surface-card);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 44px rgba(0, 0, 0, 0.20);
    padding: 0 16px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(101%);
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
                bottom 220ms cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .city-sheet.is-open { transform: translateY(0); }

  /* grip + header are the drag handle — touch-action:none so a downward drag
     dismisses the sheet instead of scrolling the list */
  .sheet-drag {
    touch-action: none;
    cursor: grab;
    user-select: none; -webkit-user-select: none;
    padding-top: 4px;
  }
  .sheet-drag:active { cursor: grabbing; }
  .sheet-grip {
    width: 40px; height: 5px;
    border-radius: 100px;
    background: var(--ink-8);
    margin: 10px auto 4px;
  }
  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 12px;
  }
  .sheet-title { font: var(--text-h4); color: var(--ink-0); }
  .sheet-done {
    background: none; border: none;
    color: var(--shift-orange);
    font-weight: 600; font-size: 16px;
    padding: 6px 4px; cursor: pointer;
  }

  .sheet-search { margin-bottom: 6px; }
  .sheet-input {
    width: 100%; height: 50px;
    border: 1px solid var(--ink-9);
    border-radius: var(--r-field);
    background: var(--surface-app);
    padding: 0 16px;
    font: var(--text-body-md);
    color: var(--ink-0);
    outline: none;
    transition: border-color 150ms var(--ease);
  }
  .sheet-input::placeholder { color: var(--ink-a50); font-weight: 400; }
  .sheet-input:focus { border-color: var(--shift-orange); }

  .sheet-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    flex: 1;
    min-height: 0;
  }
  .sheet-list .suggest-item {
    padding: 16px 6px;
    min-height: 56px;
    border-radius: 0;
    border-top: 1px solid var(--ink-a05);
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms var(--ease);
  }
  .sheet-list .suggest-item:first-child { border-top: none; }
  .sheet-list .suggest-item.is-hi,
  .sheet-list .suggest-item:active { background: var(--surface-app); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .city-sheet, .city-scrim { transition-duration: 1ms !important; }
  .scene, .stagger > *, .confirm-h, .confirm-pos, .suggest { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .confirm-note { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .ck-circle, .ck-path, .wi, .row-in, .ck, .confirm-pos strong, .scene-exit { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .ckb-arc, .ckb-disc, .ckb-check, .ckb-ticks { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .ripple, .bump, .row-glow, .flame-tick { animation: none !important; }
  .ck-stack::before, .ckb-halo, .ckb-gloss { animation: none !important; }
  .press-track { animation: none !important; }
  .odo-strip, .row, .bar-fill, .claim-card .cta, .suggest-shell, .suggest { transition-duration: 1ms !important; }
  .row.is-user { animation: none; }
}