/* iOS system components: navigation-bar progress, action sheets, pull-down
   menus and the boarding confirmation sheet. Colors and geometry come from
   the root tokens in vnext.css. */

/* ---- Navigation-bar progress line ---- */
.nav-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-standard) ease;
}
.nav-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: translateX(-100%);
  transform-origin: left;
}
.nav-progress[data-state="running"] {
  opacity: 1;
}
.nav-progress[data-state="running"] > span {
  animation: nav-progress-run 1.6s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}
.nav-progress[data-state="done"] {
  opacity: 0;
  transition-delay: 0.2s;
}
.nav-progress[data-state="done"] > span {
  transform: none;
  transition: transform 0.2s ease-out;
}
@keyframes nav-progress-run {
  0% {
    transform: translateX(-100%) scaleX(0.35);
  }
  60% {
    transform: translateX(10%) scaleX(0.6);
  }
  100% {
    transform: translateX(100%) scaleX(0.35);
  }
}
html[data-reduce-motion="true"] .nav-progress[data-state="running"] > span {
  animation: none;
  transform: none;
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .nav-progress[data-state="running"] > span {
    animation: none;
    transform: none;
    opacity: 0.6;
  }
}

/* ---- Action sheet ---- */
dialog.action-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: min(100% - 16px, 480px);
  max-width: none;
  margin: 0 auto calc(8px + var(--safe-bottom));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
  animation: action-sheet-in 0.34s cubic-bezier(0.2, 0.9, 0.25, 1);
}
dialog.action-sheet::backdrop {
  background: var(--material-backdrop);
  animation: action-backdrop-in 0.24s ease;
}
dialog.action-sheet[data-closing] {
  animation: action-sheet-out 0.22s ease-in forwards;
}
dialog.action-sheet[data-closing]::backdrop {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.action-sheet-group {
  display: grid;
  overflow: hidden;
  margin-top: 8px;
  border-radius: var(--radius-control);
  background: var(--material-menu);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
}
.action-sheet-header {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  text-align: center;
  color: var(--muted);
  font-size: var(--type-caption);
}
.action-sheet-header b {
  font-weight: 600;
}
.action-sheet-header p {
  margin: 0;
}
.action-sheet-group > * + * {
  border-top: 1px solid var(--separator);
}
.action-sheet-group button {
  min-height: 56px;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-size: 1.25rem;
}
.action-sheet-group button.destructive {
  color: var(--red);
}
.action-sheet-group button.cancel {
  font-weight: 600;
}
.action-sheet-group button:active {
  background: var(--fill-secondary);
}
@keyframes action-sheet-in {
  from {
    transform: translateY(110%);
  }
}
@keyframes action-sheet-out {
  to {
    transform: translateY(110%);
  }
}
@keyframes action-backdrop-in {
  from {
    opacity: 0;
  }
}

/* ---- Pull-down menu ---- */
.pull-down-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 240px;
  max-width: calc(100vw - 16px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control-tight);
  background: var(--material-menu);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  box-shadow: var(--shadow-menu);
  color: var(--text);
  overflow: hidden;
}
.pull-down-menu:popover-open {
  animation: menu-in 0.26s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.pull-down-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--type-body);
  text-align: left;
}
.pull-down-menu button + button {
  border-top: 1px solid var(--separator);
}
.pull-down-menu button:active,
.pull-down-menu button:focus-visible {
  background: var(--fill-secondary);
}
.pull-down-menu svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex: none;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
html[data-reduce-motion="true"] :is(dialog.action-sheet, dialog.action-sheet::backdrop, .pull-down-menu:popover-open) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(dialog.action-sheet, dialog.action-sheet::backdrop, .pull-down-menu:popover-open) {
    animation: none;
  }
}

/* ---- Boarding confirmation sheet (non-modal, rises from the tab bar) ---- */
dialog.boarding-sheet {
  position: fixed;
  inset: auto 0 calc(92px + var(--safe-bottom)) 0;
  z-index: 60;
  width: min(100% - 16px, 480px);
  max-width: none;
  max-height: calc(100dvh - 140px);
  margin: 0 auto;
  padding: 8px 18px 16px;
  overflow-y: auto;
  border: 0;
  border-radius: var(--radius-sheet);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  box-shadow: var(--shadow-lift);
  color: var(--text);
  touch-action: none;
  transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1.1);
  animation: boarding-rise 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.12);
}
dialog.boarding-sheet[data-dragging] {
  transition: none;
}
dialog.boarding-sheet[data-state="closing"] {
  animation: boarding-fall 0.24s ease-in forwards;
}
dialog.boarding-sheet[data-state="confirming"] {
  animation: boarding-lift 0.32s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
.boarding-grabber {
  width: 36px;
  height: 5px;
  margin: 2px auto 10px;
  border-radius: var(--radius-capsule);
  background: var(--fill-secondary);
}
.boarding-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--live);
  font-size: var(--type-caption);
  font-weight: 700;
}
.boarding-pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: currentColor;
  box-shadow: var(--shadow-live-ring);
  animation: boarding-pulse 1.6s ease-in-out infinite;
}
dialog.boarding-sheet h2 {
  margin: 4px 0 12px;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.boarding-primary {
  --mode: var(--color-subway);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-group);
  background: var(--surface-primary);
}
.boarding-primary[data-operator="kintetsu"] { --mode: var(--color-kintetsu); }
.boarding-primary[data-operator="through"] { --mode: var(--color-through); }
.boarding-primary[data-operator="citybus"] { --mode: var(--color-citybus); }
.boarding-primary[data-operator="kyotobus"] { --mode: var(--color-kyotobus); }
.boarding-primary[data-line] { --mode: var(--line-color); }
.boarding-primary[data-line] .boarding-mode { color: var(--color-on-line); }
.boarding-mode {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-row);
  background: var(--mode);
  color: var(--color-on-transport);
}
.boarding-mode svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.boarding-primary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.boarding-primary b {
  font-size: var(--type-caption);
  color: var(--muted);
  font-weight: 600;
}
.boarding-primary strong {
  font-size: 1.25rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.boarding-primary small {
  font-size: var(--type-secondary);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.boarding-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.boarding-evidence li {
  padding: 3px 10px;
  border-radius: var(--radius-capsule);
  background: var(--fill-tertiary);
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 600;
}
.boarding-alternatives {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.boarding-alternatives button {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-row);
  background: var(--fill-tertiary);
  color: var(--text);
  text-align: left;
}
.boarding-alternatives small {
  color: var(--muted);
  font-size: var(--type-caption);
}
.boarding-swipe {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 600;
  opacity: calc(1 - var(--swipe-progress, 0) * 0.6);
}
.boarding-chevron {
  color: var(--color-accent);
  animation: boarding-nudge 1.4s ease-in-out infinite;
  transform: translateY(calc(var(--swipe-progress, 0) * -10px));
}
.boarding-chevron svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.boarding-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.boarding-confirm {
  grid-column: 1 / -1;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--type-body);
  font-weight: 600;
}
.boarding-secondary {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--fill-tertiary);
  color: var(--text);
  font-size: var(--type-secondary);
  font-weight: 600;
}
@keyframes boarding-rise {
  from {
    transform: translateY(calc(100% + 120px));
  }
}
@keyframes boarding-fall {
  to {
    transform: translateY(calc(100% + 120px));
  }
}
@keyframes boarding-lift {
  to {
    transform: translateY(-60px) scale(0.96);
    opacity: 0;
  }
}
@keyframes boarding-pulse {
  50% {
    opacity: 0.4;
  }
}
@keyframes boarding-nudge {
  50% {
    transform: translateY(-5px);
  }
}
html[data-reduce-motion="true"] :is(dialog.boarding-sheet, .boarding-pulse, .boarding-chevron) {
  animation: none !important;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(dialog.boarding-sheet, .boarding-pulse, .boarding-chevron) {
    animation: none !important;
    transition: none;
  }
}

/* Ride chooser: a plain inset list inside the sheet (no card in a card). */
.ride-chooser.section-block {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.ride-choice-list.native-list {
  border: 0;
  border-radius: var(--radius-group);
  background: var(--surface-primary);
  box-shadow: none;
  overflow: hidden;
}
.ride-choice-row {
  min-height: 64px;
  text-align: left;
}
.ride-choice-row b {
  font-size: var(--type-body);
}
.ride-choice-row small {
  color: var(--muted);
}
.ride-chooser .source-caption {
  margin: 10px 16px 0;
}