@scope (tour-ui) {
  :where(:scope) {
    --tour-scrim:             var(--a-scrim-dialog);
    --tour-spotlight-padding: var(--a-space-2);
    --tour-spotlight-radius:  var(--a-radius-md);
  }

  :scope {
    /* Behavioral wrapper — no chrome. Tour-step children are hidden;
       the orchestrator clones their content into the popover surface. */
    display: contents;
  }

  :scope > tour-step-ui {
    display: none;
  }
}

/* The spotlight + popover surfaces are NOT scoped to tour-ui — they're
   appended to document.body (top-layer via Popover API), outside the
   @scope (tour-ui) boundary. Mirror the menu-ui / context-menu-ui
   pattern: chrome lives in the global scope keyed off a data-attribute. */

/* ── Spotlight ──
   A position:fixed transparent rectangle with a huge box-shadow that
   produces the dimmed scrim everywhere outside its bounds. Single
   element, no clip-path / SVG mask. Animated via top/left/width/height
   transitions when the step changes. */
[data-tour-spotlight] {
  position: fixed;
  inset: 0 auto auto 0;            /* anchor at viewport top-left; top/left set imperatively */
  width: 0;
  height: 0;
  pointer-events: none;
  border-radius: var(--tour-spotlight-radius, var(--a-radius-md));
  background: transparent;
  box-shadow: 0 0 0 9999px var(--tour-scrim, var(--a-scrim-dialog));
  z-index: 1000;
  transition:
    top var(--a-duration) var(--a-easing-out),
    left var(--a-duration) var(--a-easing-out),
    width var(--a-duration) var(--a-easing-out),
    height var(--a-duration) var(--a-easing-out);
}

[data-tour-spotlight][data-tour-no-target] {
  /* No target match — fall back to a non-cutout full-viewport scrim */
  inset: 0;
  width: 100vw;
  height: 100vh;
  box-shadow: none;
  background: var(--tour-scrim, var(--a-scrim-dialog));
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-tour-spotlight] { transition: none; }
}

/* ── Step popover ── */
[data-tour-popover] {
  margin: 0;
  padding: var(--a-space-4);
  border: 1px solid var(--tour-popover-border, var(--a-border-subtle));
  border-radius: var(--tour-popover-radius, var(--a-radius-lg));
  background: var(--tour-popover-bg, var(--a-bg-subtle));
  box-shadow: var(--tour-popover-shadow, var(--a-shadow-lg));
  min-width: var(--tour-popover-min-width, 18rem);
  max-width: var(--tour-popover-max-width, 22rem);
  font-family: var(--tour-font-family, var(--a-font-family-ui));
  font-size: var(--a-ui-size);
  color: var(--a-fg);
  /* Above the spotlight (1000) so the user can read + click it */
  z-index: 1001;
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--a-duration-fast) var(--a-easing-out),
    translate var(--a-duration-fast) var(--a-easing-out);
}

[data-tour-popover]:popover-open {
  @starting-style {
    opacity: 0;
    translate: 0 -4px;
  }
}

[data-tour-popover]:not(:popover-open) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-tour-popover] { transition: none; }
}

/* Layout of the popover internal content (set by the orchestrator). */
[data-tour-popover] [data-tour-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-3);
  margin-block-end: var(--a-space-2);
}

[data-tour-popover] [data-tour-indicator] {
  font-size: var(--a-ui-sm);
  color: var(--a-fg-muted);
  font-variant-numeric: tabular-nums;
}

[data-tour-popover] [data-tour-title] {
  margin: 0;
  font-size: var(--a-text-lg);
  font-weight: 600;
}

[data-tour-popover] [data-tour-body] {
  margin: 0 0 var(--a-space-4);
  font-size: var(--a-ui-size);
  color: var(--a-fg);
  line-height: 1.5;
}

[data-tour-popover] [data-tour-footer] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-2);
}

[data-tour-popover] [data-tour-nav] {
  display: flex;
  gap: var(--a-space-2);
}
