/* Generated by packages/pwa/scripts/sync-ios-guide.ts from packages/pwa/src/plain. Do not edit; change the package source and re-run the script. */
/*
 * Styles for the framework-free iOS install guide (ios-guide.js), matching IosGuide.svelte.
 * Set the kit tokens (--pwa-surface, --pwa-raised, --pwa-inset, --pwa-ink, --pwa-muted,
 * --pwa-action, --pwa-on-action, --pwa-selected, --pwa-accent) on the guide or an ancestor from the
 * app's own tokens; mix derived colors in oklab. Unset tokens fall back to the kit's defaults.
 */
.pwa-ios-guide {
  --pwa-ios-surface: var(--pwa-surface, light-dark(#ffffff, #22252c));
  --pwa-ios-raised: var(--pwa-raised, light-dark(#ffffff, #30343d));
  --pwa-ios-inset: var(--pwa-inset, light-dark(#f0f2f6, #191c22));
  --pwa-ios-ink: var(--pwa-ink, light-dark(#172033, #f9fafb));
  --pwa-ios-muted: var(--pwa-muted, light-dark(#626e81, #b9c1ce));
  --pwa-ios-action: var(--pwa-action, light-dark(#2f5bf5, #3463f6));
  --pwa-ios-on-action: var(--pwa-on-action, #ffffff);
  --pwa-ios-selected: var(--pwa-selected, light-dark(#e2e9fb, #22385e));
  --pwa-ios-accent: var(--pwa-accent, light-dark(#2450d5, #98bdff));
  display: grid;
  gap: 12px;
  min-inline-size: 0;
  color: var(--pwa-ios-ink);
  text-align: start;
}
.pwa-ios-guide .pwa-ios-guide__stage {
  position: relative;
  margin: 0;
  padding: 0;
  aspect-ratio: 720 / 640;
  border-radius: 22px;
  overflow: hidden;
  background: var(--pwa-ios-inset);
}
.pwa-ios-guide .pwa-ios-guide__video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  pointer-events: none;
}
/* Bottom-left: the demo's taps happen on the right and its toolbar More button sits bottom-right. */
.pwa-ios-guide .pwa-ios-guide__toggle {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-end: 10px;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--pwa-ios-ink);
  background: color-mix(in oklab, var(--pwa-ios-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 55%, transparent),
    0 4px 14px rgb(0 0 0 / 0.14);
}
:root[data-transparency='reduce'] .pwa-ios-guide .pwa-ios-guide__toggle {
  background: var(--pwa-ios-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  .pwa-ios-guide .pwa-ios-guide__toggle {
    background: var(--pwa-ios-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.pwa-ios-guide .pwa-ios-guide__steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pwa-ios-guide .pwa-ios-guide__steps.is-live {
  gap: 4px;
}
.pwa-ios-guide .pwa-ios-guide__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-block-size: 56px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--pwa-ios-raised);
  list-style: none;
}
.pwa-ios-guide .pwa-ios-guide__step::before {
  content: none;
}
.pwa-ios-guide .is-live .pwa-ios-guide__step {
  display: block;
  padding: 0;
  overflow: hidden;
  background: none;
  transition: background-color 0.25s ease;
}
.pwa-ios-guide .is-live .pwa-ios-guide__step.is-active {
  background: var(--pwa-ios-selected);
}
/* The active step fills along the bottom as the demo plays it. */
.pwa-ios-guide .is-live .pwa-ios-guide__step::after {
  content: '';
  position: absolute;
  inset-inline: 14px;
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--pwa-ios-accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
  opacity: 0;
}
.pwa-ios-guide .is-live .pwa-ios-guide__step.is-active::after {
  opacity: 1;
}
.pwa-ios-guide .pwa-ios-guide__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 48px;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 14px;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-transform: none;
}
.pwa-ios-guide .pwa-ios-guide__badge {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--pwa-ios-surface);
  color: var(--pwa-ios-muted);
  font-size: 0.8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pwa-ios-guide .is-live .pwa-ios-guide__badge {
  background: var(--pwa-ios-inset);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.pwa-ios-guide .is-live .is-active .pwa-ios-guide__badge {
  background: var(--pwa-ios-action);
  color: var(--pwa-ios-on-action);
}
.pwa-ios-guide .is-live .is-done .pwa-ios-guide__badge {
  color: var(--pwa-ios-accent);
}
.pwa-ios-guide .pwa-ios-guide__art {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  background: var(--pwa-ios-surface);
  color: var(--pwa-ios-accent);
}
/* The rows clip their overflow, so the focus ring sits inside the control. */
.pwa-ios-guide .pwa-ios-guide__row:focus-visible,
.pwa-ios-guide .pwa-ios-guide__toggle:focus-visible {
  outline: 3px solid var(--pwa-ios-accent);
  outline-offset: -3px;
}
.pwa-ios-guide .pwa-ios-guide__text {
  font-weight: 560;
  line-height: 1.35;
}
.pwa-ios-guide .is-live .pwa-ios-guide__text {
  font-size: 0.9375rem;
  color: var(--pwa-ios-muted);
  transition: color 0.25s ease;
}
.pwa-ios-guide .is-live .is-active .pwa-ios-guide__text,
.pwa-ios-guide .is-live .is-done .pwa-ios-guide__text {
  color: var(--pwa-ios-ink);
}
@media (prefers-reduced-motion: reduce) {
  .pwa-ios-guide .is-live :is(.pwa-ios-guide__step, .pwa-ios-guide__badge, .pwa-ios-guide__text) {
    transition: none;
  }
}
html[data-motion='reduce'] .pwa-ios-guide .is-live :is(.pwa-ios-guide__step, .pwa-ios-guide__badge, .pwa-ios-guide__text) {
  transition: none;
}