.guide-launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.productionstudio-spotlight-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  background: var(--color-scrim);
  opacity: 0;
  transition: opacity var(--motion-duration-short) var(--motion-easing-standard);
}
.productionstudio-spotlight-backdrop.is-active { opacity: 1; }
/* Brand 1.0: the page is dimmed once, by this backdrop, the brand's scrim. The dialog's native
   backdrop stays clear, or it would dim the spotlighted target too. */
.productionstudio-spotlight-dialog::backdrop { background: transparent; }
/* Scoped under the wizard-active body class so the highlight outranks every component rule
   (cards, focused fields, selected tabs) by specificity instead of !important. The target rises
   above the scrim with the brand's level 3. */
body.productionstudio-wizard-active .productionstudio-spotlight-target {
  position: relative;
  z-index: var(--z-spotlight);
  isolation: isolate;
  border-radius: var(--radius-md);
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--space-1-5);
  box-shadow: var(--shadow-lg);
}
/* The project panel rises above the scrim as a whole with a target in it, so the target's own
   shadow is the scrim for the rest of the panel; the panel's scroll box clips it, so nothing on
   the page is dimmed twice. */
body.productionstudio-wizard-active .productionstudio-context .productionstudio-spotlight-target { box-shadow: var(--shadow-spotlight); }
.productionstudio-spotlight-dialog {
  position: fixed;
  z-index: var(--z-modal);
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-overlay);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.productionstudio-spotlight-dialog[hidden] { display: none; }
.productionstudio-spotlight-dialog[data-placement="center"] {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.productionstudio-spotlight-dialog[data-placement="bottom-right"] {
  right: var(--space-5);
  bottom: var(--space-5);
}
.productionstudio-spotlight-kicker {
  margin: 0 0 var(--space-1-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.productionstudio-spotlight-title { margin: 0; }
.productionstudio-spotlight-body { margin: var(--space-2-5) 0 0; color: var(--color-text-muted); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }
.productionstudio-spotlight-missing {
  margin: var(--space-2-5) 0 0;
  padding: var(--space-2) var(--space-2-5);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  font-size: var(--font-size-xs);
}
.productionstudio-spotlight-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.productionstudio-spotlight-actions > div { display: flex; gap: var(--space-2); }
body.productionstudio-wizard-active { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  .productionstudio-spotlight-backdrop { transition: none; }
}