/* =========================================================================
   alerts page — alert-setup wizard
   Reuses the design tokens declared in styles.css (:root). This file only
   adds the wizard-specific components; it never redefines a token.
   ========================================================================= */

/* The scope-echo component (scope-echo.js) is cross-page — the watch card on "My
   watches" mounts the same component — so its styles live in their own file and
   are pulled in here rather than copied. A page adopting the component links
   /scope-echo.css directly; this import is what lets alerts.html pick it up
   without a second <link> in a shared head. */
@import "/scope-echo.css";

.wizard { max-width: 40rem; padding: clamp(1.6rem, 5vw, 3rem) 0 1rem; }

.wizard__head { max-width: 38rem; }
.wizard__head h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 2.9rem); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0.5rem 0 0; color: var(--ink);
}
.wizard__lede {
  font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--ink);
  margin: 1rem 0 0; line-height: 1.6; max-width: 36rem;
}

/* --- a step card --- */
.step {
  margin: 1.4rem 0 0;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--paper-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.step.is-hidden { display: none; }

/* The HTML `hidden` attribute must win over component `display` rules. A class
   like .wz-btn-secondary { display: inline-flex } otherwise overrides the UA
   `[hidden] { display:none }`, so JS toggling `el.hidden = true` had no visual
   effect — the "Try again" retry button stayed visible on a clean park load. */
[hidden] { display: none !important; }

.step__num {
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ember-deep); margin: 0;
}
.step h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.15;
  margin: 0.3rem 0 0.9rem; color: var(--forest-deep);
}

/* --- selects, text + date inputs ---
   .wz-text / .wz-status are now canonical in styles.css (shared with the explore
   SPA — section G / C2). Only .wz-select (alerts-only) is declared here; it matches
   the shared .wz-text look via the same tokens. --- */
.wz-select {
  width: 100%; box-sizing: border-box;
  padding: 0.72rem 0.85rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper-card);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.wz-select:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(44, 90, 67, 0.16);
}

.wz-note {
  margin: 0.5rem 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--sage);
}

/* --- fieldsets / radios / checkboxes --- */
.wz-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }

.wz-radio {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.wz-radio:hover { border-color: var(--forest); }
.wz-radio input[type="radio"] { margin-top: 0.2rem; accent-color: var(--forest); flex: none; }
.wz-radio strong { display: block; color: var(--ink); font-weight: 600; }
.wz-radio-note { display: block; margin-top: 0.15rem; font-size: 0.86rem; color: var(--sage); line-height: 1.45; }
.wz-radio:has(input:checked) { border-color: var(--forest); background: var(--paper-soft); }

.wz-filters { margin: 1rem 0 0; }
.wz-filters.is-hidden { display: none; }

.wz-check-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; margin: 0 0 1rem; }
.wz-check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.95rem; color: var(--ink); }
.wz-check input[type="checkbox"] { accent-color: var(--forest); width: 1.05rem; height: 1.05rem; }
.wz-check:has(input:disabled) { opacity: 0.55; cursor: default; }

/* compact ready-ping opt-in nested under "When booking opens" (opening-alerts-channels) */
.wz-ready {
  margin: -0.1rem 0.1rem 0 1.6rem; padding: 0.6rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--line-strong);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.wz-ready.is-hidden { display: none; }
.wz-ready__lead-label { margin-top: 0.35rem; font-size: 0.84rem; }
/* The lead time + the heads-up's own channel picker, revealed only once the heads-up
   toggle is on (alerts.js syncReadyPingUI) so the screen never shows two channel
   pickers at once. */
.wz-ready__detail { display: flex; flex-direction: column; gap: 0.3rem; }

.wz-prox { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin: 0.3rem 0 0; }
.wz-prox-item { display: flex; flex-direction: column; gap: 0.3rem; }
.wz-prox-item > span { font-size: 0.88rem; font-weight: 600; color: var(--forest-deep); }

.wz-preview {
  margin: 1rem 0 0; min-height: 1.2em;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--forest-deep);
}
.wz-preview.is-err { color: #a8392a; font-family: var(--font-sans); font-size: 0.92rem; }

/* --- dates: calendar component styles are in styles.css (shared with explore) --- */

/* --- alert-speed line (channel step) --- */
.wz-speed {
  margin: 0 0 1rem; padding: 0.7rem 0.9rem;
  font-size: 0.92rem; line-height: 1.5; color: var(--forest-deep);
  background: var(--paper-soft); border-left: 3px solid var(--forest);
  border-radius: var(--radius);
}

/* --- email + phone blocks --- */
.wz-email { margin: 1rem 0 0; }
.wz-email.is-hidden { display: none; }
.wz-phone { margin: 1rem 0 0; }
.wz-phone.is-hidden { display: none; }

/* --- result summary + manage --- */
.wz-result-summary {
  margin: 0.7rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--ink);
}
.wz-manage { margin: 1.1rem 0 0; }
.wz-manage.is-hidden { display: none; }
.wz-manage a { color: var(--ember-deep); font-weight: 600; }

/* --- actions / buttons --- */
.wz-actions { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* .wz-btn / .wz-btn-secondary are now canonical in styles.css (shared with the
   explore SPA — section G / C2). Removed the alerts-local diverging copies so both
   surfaces render identically. */

/* --- result --- */
.wz-result-msg {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  color: var(--forest-deep); margin: 0.4rem 0 0; line-height: 1.45;
}
/* The support reference on the confirmation screen. Quiet by design: a copy action
   plus its status line, at note weight, never a monospace id block — the receipt is
   the highest-trust moment on the site and machine output reads there as a fault.
   The id itself is revealed (still at note weight) only when the clipboard API is
   unavailable, so the user can select it by hand. */
.wz-watch-ref {
  margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--sage);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
}
.wz-watch-ref .wz-note { margin: 0; word-break: break-all; }
.wz-link-btn {
  font: inherit; font-weight: 600; color: var(--forest-deep);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em;
}
.wz-link-btn:hover { color: var(--ember-deep); }
.wz-link-btn:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

.wz-verify { margin: 1.2rem 0 0; }
.wz-verify.is-hidden { display: none; }

.wz-details {
  margin: 0.9rem 0 0; padding: 0.8rem 1rem;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
}
.wz-details summary {
  cursor: pointer; font-weight: 600; color: var(--forest-deep); font-size: 0.92rem;
}
.wz-details summary:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.wz-details .field-label { margin-top: 0.7rem; }

/* --- pre-fill banner (arriving from Explore) --- */
.wz-prefill {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 1.2rem 0 0; padding: 0.8rem 1rem;
  background: var(--paper-card); border: 1.5px solid var(--forest);
  border-left: 4px solid var(--forest); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  font-size: 0.95rem; color: var(--ink);
}
.wz-prefill.is-hidden { display: none; }
.wz-prefill__ic { display: inline-flex; flex: none; }
.wz-prefill #prefill-text { font-weight: 600; }
.wz-prefill__back {
  margin-left: auto; font-size: 0.86rem; font-weight: 700;
  color: var(--ember-deep); text-decoration: none;
}
.wz-prefill__back:hover { text-decoration: underline; }

/* --- differentiated "smarter" targeting block --- */
.wz-smart {
  margin: 1rem 0 0; padding: clamp(1rem, 3vw, 1.3rem);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--paper);
}
.wz-smart.is-hidden { display: none; }
.wz-smart .fp-legend, .fp-legend {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--forest-deep); padding: 0 0.4rem; margin-left: -0.4rem;
}
.wz-smart-item { display: block; margin: 0.9rem 0 0; }
.wz-smart-item:first-of-type { margin-top: 0.6rem; }
.wz-smart-item.is-hidden { display: none; }
.wz-smart-q { display: block; font-weight: 600; color: var(--ink); margin: 0 0 0.4rem; }
.wz-smart-q input[type="checkbox"] { accent-color: var(--forest); width: 1.05rem; height: 1.05rem; vertical-align: -0.15rem; margin-right: 0.3rem; }
.wz-smart-ctl { display: block; max-width: 22rem; }

/* Rig-length control. Its VISIBILITY is decided by whether this park's own sites
   carry a rig length (alerts.js applyDerivedFacets), never by a vendor map. */
.wz-rig { margin: 0 0 1rem; }

/* --- responsive --- */
@media (min-width: 540px) {
  .wz-prox { grid-template-columns: repeat(3, 1fr); }
}

/* --- multi-site-watch: match-mode step (Step 2 alt) ------------------------ */
.wz-mode-summary { margin: 0 0 1rem; font-size: 0.95rem; color: var(--sage); }

.wz-mode-any {
  padding: 0.9rem 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper-soft);
}
.wz-mode-any.is-hidden { display: none; }
.wz-mode-line { margin: 0; font-size: 1rem; color: var(--ink); }
.wz-mode-line strong { color: var(--forest-deep); }
.wz-mode-link {
  margin: 0.6rem 0 0; font: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--forest-deep); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.wz-mode-link:hover { color: var(--ember-deep); }

.wz-mode-and {
  padding: clamp(1rem, 3vw, 1.3rem);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--paper);
}
.wz-mode-and.is-hidden { display: none; }
.wz-mode-lead { margin: 0 0 0.8rem; font-size: 0.98rem; color: var(--forest-deep); line-height: 1.5; }
.wz-mode-n-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.98rem; color: var(--ink); }
.wz-mode-n-row select { width: auto; min-width: 6rem; }
.wz-mode-caveat { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--sage); line-height: 1.5; }

/* --- multi-site-watch: optional party-size + group-site nudge (Step 5) ----- */
.wz-party { margin: 0 0 1rem; }
.wz-party.is-hidden { display: none; }
.wz-text--short { width: auto; max-width: 8rem; }

.wz-nudge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0 0 1rem; padding: 0.75rem 0.9rem;
  background: var(--avail-soon-bg); border: 1.5px solid var(--ember); border-radius: var(--radius);
  font-size: 0.9rem; color: var(--ink);
}
.wz-nudge.is-hidden { display: none; }
.wz-nudge__text { margin: 0; flex: 1 1 14rem; }
.wz-nudge__link { font-weight: 700; color: var(--ember-deep); white-space: nowrap; }
.wz-nudge__dismiss {
  margin-left: auto; font: inherit; font-size: 1.1rem; line-height: 1; color: var(--sage);
  background: none; border: 0; cursor: pointer; padding: 0.1rem 0.3rem;
}
.wz-nudge__dismiss:hover { color: var(--ember-deep); }

/* ===== Flexible dates (Scope A) — wizard Step-3 container =====================
   The mode toggle + nights stepper controls themselves live in flex-dates.css;
   these rules only own the wizard-local container. The `.is-hidden` toggles below
   are redundant duplicates of the global `.is-hidden` utility in
   styles.css, which already hides any element on any page. */
.wz-flex-controls { margin: 0 0 0.6rem; }
.wz-flex-controls.is-hidden { display: none; }
.fd-validation.is-hidden { display: none; }

/* ===== Inline watch date/nights editor (Scope C) =============================
   Rendered on the account watch-manager (/watch). Uses the shared .wl-btn--save /
   .wl-link-btn from styles.css and the .fd-* controls from flex-dates.css. */
.wl-edit { margin-top: 0.7rem; }
.wl-edit__toggle {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-weight: 600; color: var(--forest-deep);
  cursor: pointer; padding: 0.2rem 0;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.wl-edit__toggle:hover { text-decoration: underline; }
.wl-edit__toggle:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.wl-edit__chev { transition: transform 0.15s ease; }
.wl-edit__toggle.is-open .wl-edit__chev { transform: rotate(90deg); }
.wl-edit__panel { margin-top: 0.7rem; }
.wl-edit__panel.is-hidden { display: none; }
.wl-edit__flex.is-hidden { display: none; }
.wl-edit__dates { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.6rem 0; }
.wl-edit__date-lbl {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.85rem; color: var(--sage);
}
.wl-edit__date {
  font: inherit; padding: 0.4rem 0.5rem;
  border: 1.5px solid var(--line-strong, #cdd3cd); border-radius: var(--radius, 8px);
  background: var(--paper-card, #fff); color: var(--ink);
}
.wl-edit__date:focus-visible { outline: 3px solid var(--forest); outline-offset: 1px; }
.wl-edit__save-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.5rem; }
.wl-edit__saved-msg { font-size: 0.84rem; min-height: 1.1rem; }
.wl-edit__saved-msg.is-ok { color: var(--forest-deep); font-weight: 600; }
.wl-edit__saved-msg.is-err { color: var(--ember-deep, #8a3d15); font-weight: 600; }
.wl-edit__saved-msg.is-info { color: var(--sage); }
.wl-edit__search { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--sage); }
.wl-edit__search-note { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--sage); }

/* =========================================================================
   Progressive wizard chrome (soft-launch-qa WIZ-1 / WIZ-2)
   ========================================================================= */

/* Progress over the steps ACTUALLY rendered for this user. There is no absolute
   numbering: a hand-off that already answers the park and the dates renders two
   fewer entries here, so the indicator can never show a gap. */
.wz-progress { margin: 1.2rem 0 0; }
.wz-progress.is-hidden { display: none; }

.wz-progress__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
}

.wz-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sage);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-card);
  padding: 0.22rem 0.7rem;
}

.wz-progress__step.is-done {
  color: var(--forest-deep);
  border-color: var(--forest);
  background: var(--paper-soft);
}

.wz-progress__step.is-current {
  color: var(--ember-deep);
  border-color: var(--ember);
}

.wz-progress__tick { font-size: 0.9em; }

/* A value the entry URL already carried: an answered question with an Edit, never
   an open one. */
.wz-confirmed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  border: 1px solid var(--forest);
  border-radius: 12px;
  background: var(--paper-soft);
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.4rem;
}
.wz-confirmed.is-hidden { display: none; }

.wz-confirmed__value { margin: 0; font-weight: 600; color: var(--ink); }

.wz-confirmed__edit {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ember-deep);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}
.wz-confirmed__edit:hover { color: var(--forest-deep); }
.wz-confirmed__edit:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

#park-picker.is-hidden, #dates-editor.is-hidden { display: none; }

/* The booking operator for the park in view — "operator", never "jurisdiction". */
.wz-operator {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  color: var(--sage);
}

/* =========================================================================
   Section picker (WIZ-4 — sections-first, filters-optional)
   ========================================================================= */

.wz-sections { margin: 0 0 1.1rem; }
.wz-sections.is-hidden { display: none; }

.wz-section-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  margin: 0.5rem 0 0;
}

.wz-section {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-card);
  padding: 0.3rem 0.75rem;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}
.wz-section:hover { border-color: var(--forest); }
.wz-section:has(input:checked) { border-color: var(--forest); background: var(--paper-soft); }
.wz-section input[type="checkbox"] { accent-color: var(--forest); }
.wz-section__count { color: var(--sage); font-size: 0.82rem; }

/* =========================================================================
   Demand — "how many do I need open at once?" (WIZ-10)
   ========================================================================= */

.wz-demand {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-soft);
}
.wz-demand.is-hidden { display: none; }

.wz-demand__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--ink);
}

/* Per-section minimums (WIZ-10). Collapsed by default — a power-user rule that
   must not compete with the single minimum above it on first read. */
.wz-compose {
  margin: 0.75rem 0 0;
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}
.wz-compose.is-hidden { display: none; }
.wz-compose > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-soft, var(--ink));
}
.wz-compose .wz-demand__row { margin-top: 0.4rem; }

/* =========================================================================
   Channel picker (channel-picker.js — WIZ-6 / WIZ-7)
   ========================================================================= */

/* The channel picker's own rules live in `/channel-picker.css`, loaded beside
   `/channel-picker.js` on every page that mounts the component — the alerts wizard
   and the Roam purchase flow. Styling a shared control from one page's stylesheet
   leaves it unstyled on the other. */

.wz-inert-note {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  color: var(--ember-deep);
}

/* =========================================================================
   Signed-in contact affordance (WIZ-8) + review panel (WIZ-1/WIZ-3)
   ========================================================================= */

.wz-session {
  margin: 0 0 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--forest);
  border-radius: 10px;
  background: var(--paper-soft);
}
.wz-session.is-hidden { display: none; }

.wz-signin-hint { margin-top: 0.4rem; }
.wz-signin-hint.is-hidden { display: none; }
.wz-signin-hint a { color: var(--ember-deep); font-weight: 600; }

.wz-review { margin: 0 0 1.1rem; }
.wz-review.is-hidden { display: none; }

/* The two-month calendar's layout and its range legend are styled in styles.css
   beside the WzCal grid primitives, shared with the explore park-page control —
   one definition is what makes a boundary-crossing range read the same on both
   surfaces. Nothing wizard-specific to add here. */