/* The waitlist dialog, for the pages the new design owns.
 *
 * The design canvas has no modal on any artboard, and the one the legacy site uses is a
 * captured WordPress fragment that arrives with Divi's stylesheets — which RedesignBase
 * deliberately never loads, and which would drag a CMS dependency into a layout that renders
 * without one. So this is drawn from the same tokens as every other redesigned surface
 * rather than ported: the card, radii, shadow and action colours are the ones the product
 * pages already use, so it reads as part of the site and not as a bolted-on overlay.
 *
 * Its ids are `gwl-` prefixed, not the legacy `wl-`, on purpose. The two never appear on the
 * same document — legacy pages render through Base.astro, redesigned ones through
 * RedesignBase — and distinct ids mean that if anyone ever does mount both, neither
 * stylesheet nor either script starts fighting over the same nodes. What the two do share is
 * the trigger contract, `[data-waitlist-trigger]` and the `/signup` path; see waitlist.js.
 */

/* The trigger wears the site's own button classes — `.pp-cta`, `.cp-btn` — and every one of
 * them was written for the `<a>` that carries it everywhere else, so none of them resets what
 * a `<button>` brings of its own: a `2px outset` border, `appearance:auto` and the default
 * cursor. That border is the second outline the waitlist call to action grew, and the reason
 * it sat about a pixel wider than every other button on the page.
 *
 * `:where()` holds the whole rule at zero specificity, so it only fills in what a class does
 * not state for itself: `.cp-btn--ghost`'s deliberate 1px border still wins, as does any
 * background, colour or font. A plain `button[data-waitlist-trigger]` selector would outrank
 * those and quietly flatten the ghost variant the day one is used as a trigger.
 */
:where(button[data-waitlist-trigger]){appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer}

.gwl{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;background:var(--surface-overlay);-webkit-backdrop-filter:var(--blur-scrim);backdrop-filter:var(--blur-scrim)}
.gwl.is-open{display:flex}
.gwl *{box-sizing:border-box}
/* The panel scrolls inside itself, so a short viewport never clips the field or the buttons. */
.gwl-modal{position:relative;width:100%;max-width:456px;max-height:calc(100vh - 48px);overflow-y:auto;padding:32px;border-radius:var(--radius-panel);background:var(--surface-card);box-shadow:var(--shadow-xl);text-align:left}
.gwl-x{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.gwl-x:hover{background:var(--action-ghost-bg-hover);color:var(--text-strong)}
.gwl-state{display:none}
.gwl-state.is-active{display:block}
.gwl-eyebrow{margin:0 0 10px;font:var(--type-label);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-brand)}
.gwl-t{margin:0 0 10px;padding-right:32px;font:var(--type-h4);color:var(--text-strong);text-wrap:pretty}
.gwl-p{margin:0 0 20px;font:var(--type-body-sm);color:var(--text-body);text-wrap:pretty}
.gwl-field{display:block;margin:0 0 12px}
.gwl-label{display:block;margin:0 0 7px;font:var(--type-label);color:var(--text-strong)}
.gwl-input{display:block;width:100%;min-height:48px;padding:0 15px;border:1px solid var(--border-default);border-radius:var(--radius-field);background:var(--surface-card);font:var(--type-body);color:var(--text-strong);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.gwl-input::placeholder{color:var(--text-subtle)}
.gwl-input:focus{outline:0;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
/* Reserved by `hidden`, not by height: an empty row above the buttons reads as a mistake. */
.gwl-err{margin:0 0 12px;font:var(--type-body-sm);color:var(--status-danger-fg)}
.gwl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
/* `appearance` alongside the border reset: Chrome drops the native look once a background and
   border are set, but Safari keeps its own until it is asked not to. */
.gwl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;appearance:none;-webkit-appearance:none;border:0;border-radius:var(--radius-control);font:var(--type-button);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.gwl-btn--go{flex:1 1 auto;background:var(--action-primary-bg);color:var(--action-primary-fg)}
.gwl-btn--go:hover:not(:disabled){background:var(--action-primary-bg-hover);transform:translateY(-1px)}
.gwl-btn--go:disabled{background:var(--action-disabled-bg);color:var(--action-disabled-fg);cursor:default}
.gwl-btn--skip{background:transparent;color:var(--text-muted)}
.gwl-btn--skip:hover{background:var(--action-ghost-bg-hover);color:var(--text-strong)}
/* The field states its own focus with the ring above; adding the outline too drew both. */
.gwl a:focus-visible,.gwl button:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px}
/* One spinner, in the submit button, so the label does not jump when it appears. */
.gwl-spin{width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-pill);animation:gwl-turn .7s linear infinite}
@keyframes gwl-turn{to{transform:rotate(360deg)}}
.gwl-done{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 0 16px;border-radius:var(--radius-pill);background:var(--surface-brand-soft);color:var(--text-brand)}
/* The page behind must not scroll while the dialog owns the screen. */
body.gwl-open{overflow:hidden}

@media (max-width:560px){
  .gwl{padding:16px}
  .gwl-modal{padding:26px 22px}
  .gwl-acts{gap:8px}
  /* `flex-basis`, not `width`: a flex item is still free to shrink back off its width, so
     `width:100%` left the two buttons side by side instead of stacking them. */
  .gwl-btn{flex:1 0 100%}
}
@media (prefers-reduced-motion:reduce){
  .gwl-btn,.gwl-x,.gwl-input{transition:none}
  .gwl-btn--go:hover:not(:disabled){transform:none}
  .gwl-spin{animation-duration:1.6s}
}
