/**
 * Get Started launcher + dialog — built entirely from existing design
 * tokens (css/tokens.css), no new colors/effects. Structural chrome only;
 * generic form/fieldset/radio/checkbox primitives live in components.css
 * alongside .form-field (they're sitewide-reusable, not feature-specific).
 */

[data-get-started-root]:empty {
  display: contents;
}

/* ---- Toggle ------------------------------------------------------------- */
.get-started-widget__toggle {
  position: fixed;

  /* Stacked directly above the Assistant toggle (24px offset + 56px
     height + 12px gap) — same bottom-right corner, Assistant's own CSS
     untouched. See docs note in this feature's README section for why
     "beneath" (spec wording) was read as "secondary in the stack," not
     literal y-position. */
  inset-block-end: calc(92px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--space-md);
  z-index: var(--z-get-started-widget);
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-ink-900);
  background-color: var(--color-bg-raised);
  color: var(--color-ink-900);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.get-started-widget__toggle:hover {
  background-color: var(--color-vellum-100);
}

.get-started-widget__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.get-started-widget__toggle svg {
  inline-size: 22px;
  block-size: 22px;
}

/* ---- Dialog --------------------------------------------------------------- */

/* A flex column with a capped total height: the header and footer take
   their own natural height (flex-shrink: 0 below), and
   .get-started-widget__scroll-area gets exactly whatever's left via
   flex: 1 + min-block-size: 0 — no magic-number height math anywhere.
   (An earlier version reserved scroll-area height via a hardcoded
   `calc(85vh - 140px)` guess at the header's height; real content was
   taller than that guess, so the footer's Cancel/Send buttons rendered
   past the dialog's own overflow: hidden boundary and were invisible
   with no way to scroll to them — found via real user testing.) */
dialog[data-get-started-dialog] {
  display: flex;
  flex-direction: column;

  /* Chrome's own `dialog:modal` default sets `inset: 0` but NOT
     `margin: auto` (confirmed via getComputedStyle — the dialog
     otherwise renders pinned to the top-left corner of that inset:0
     box, found via real user testing), so centering needs to be
     explicit rather than assumed from the UA stylesheet. */
  margin: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  max-inline-size: min(520px, calc(100vw - 2 * var(--space-md)));
  max-block-size: min(85vh, 720px);
  overflow: hidden;
  color: var(--color-text);
}

/* The browser's own UA stylesheet normally hides a closed <dialog> via
   `dialog:not([open]) { display: none }` — equal specificity to the
   `display: flex` rule above, and author rules win specificity ties, so
   without this override the dialog silently never actually hid once
   `display: flex` was added (found via real user testing: close()/
   Escape/backdrop-click were all firing correctly — dialog.open genuinely
   became false — but the element stayed visually rendered regardless).
   Same root cause class as this file's other [hidden]-vs-author-display
   note below, just on the dialog's own open/closed state instead of a
   child's hidden attribute. */
dialog[data-get-started-dialog]:not([open]) {
  display: none;
}

dialog[data-get-started-dialog]::backdrop {
  background-color: rgba(15, 27, 45, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  dialog[data-get-started-dialog] {
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog[data-get-started-dialog] {
    transition: none;
  }
}

/* Bottom sheet on narrow or short viewports. */
@media (max-width: 640px), (max-height: 480px) {
  dialog[data-get-started-dialog] {
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    max-inline-size: 100%;
    inline-size: 100%;
    max-block-size: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-block-end: env(safe-area-inset-bottom, 0);
  }
}

.get-started-widget__header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-block-end: var(--border-hairline);
}

/* .icon-btn's own default color (--color-text-inverse, a light tone) is
   built for a dark header background, like the Assistant's own close
   button on its navy header — see css/chat-widget.css. This header is
   light/white, so that default renders the × nearly invisible (found via
   real user testing/screenshot review, not caught by axe — low contrast
   on a non-text icon isn't something automated a11y tooling flags the
   same way it flags missing labels). Override to a dark tone plus a
   visible dark-tinted hover instead of the light-background hover
   .icon-btn ships with. */
.get-started-widget__header .icon-btn {
  flex-shrink: 0;
  color: var(--color-ink-900);
}

.get-started-widget__header .icon-btn:hover {
  background-color: var(--color-vellum-100);
}

.get-started-widget__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-900);
}

.get-started-widget__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2xs);
}

/* The <form> element itself — a flex column spanning whatever space the
   header and footer (both flex-shrink: 0) don't take, so it can host an
   internally-scrolling region without knowing either sibling's height in
   advance. min-block-size: 0 is required here: a flex item's default
   min-height is auto (content-based), which would otherwise stop it
   shrinking below its content's natural size and defeat the whole
   scroll-region approach. */
.get-started-widget__body {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.get-started-widget__scroll-area {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.get-started-widget__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-block-start: var(--border-hairline);
}

.get-started-widget__footer .form-status {
  margin: 0;
}

.get-started-widget__path-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Marks the transition from the shared fields above into this path's own
   fields — a hairline rule (matching the site's §10 "blueprint" motif,
   css/tokens.css's --border-hairline, already used for the dialog's own
   border above) rather than a new decorative device. */
.get-started-widget__section-heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-900);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline);
}

/* .get-started-widget__path-fields's own `display: flex` above has equal
   specificity to the UA stylesheet's [hidden] { display: none }, and
   (being an author rule) wins the cascade — this compound selector beats
   both, so the hidden attribute actually hides the section. Same class of
   bug this project has hit before with flex/grid ancestors. */
.get-started-widget__path-fields[hidden] {
  display: none;
}

.get-started-widget__privacy-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.get-started-widget__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}