/* =========================================================================
   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.
   ========================================================================= */

.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-select,
.wz-text {
  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,
.wz-text:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(44, 90, 67, 0.16);
}
.wz-text::placeholder { color: #9aa093; }

/* --- status messaging (shares is-ok / is-err with the rest of the site) --- */
.wz-status {
  margin: 0.7rem 0 0; min-height: 1.2em;
  font-size: 0.92rem; line-height: 1.5; color: var(--sage);
}
.wz-status.is-ok  { color: var(--forest-deep); }
.wz-status.is-err { color: #a8392a; }
.wz-status.is-info { color: var(--ink); }

.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);
}
/* A gated radio option (e.g. the SMS channel before A2P/10DLC clears) carries
   `is-hidden` from the HTML and is toggled by alerts.js (SMS_ENABLED). The other
   `is-hidden` rules are per-component (.step / .wz-phone / .wz-email …); without
   this `.wz-radio` variant the SMS channel `<label class="wz-radio is-hidden">`
   had no display:none rule and RENDERED despite the flag being off (the gate
   silently leaked the channel). Display:none here makes the flag actually hide it. */
.wz-radio.is-hidden { display: none; }
.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-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) --- */

/* --- consecutive-nights range slider (cardinality) --- */
.wz-nights { display: flex; align-items: center; gap: 0.8rem; }
.wz-range { flex: 1 1 auto; min-width: 0; accent-color: var(--forest); cursor: pointer; }
.wz-range:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.wz-range-out { flex: none; min-width: 9.5rem; font-size: 0.9rem; font-weight: 600; color: var(--forest-deep); font-variant-numeric: tabular-nums; }

/* --- join-friends (collocation) panel --- */
.wz-friends {
  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-friends.is-hidden { display: none; }
.wz-friends .field-label:first-child { margin-top: 0; }
.wz-friends-together { margin: 0.9rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.wz-friends-together.is-hidden { display: none; }
#friends-count-wrap.is-hidden { display: none; }

/* --- 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; }
.wz-phone-otp { margin: 0.9rem 0 0; }
.wz-phone-otp.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 {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.3rem;
  font: inherit; font-size: 0.98rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--ember), var(--ember-deep));
  border: 0; border-radius: var(--radius); cursor: pointer;
  box-shadow: 0 8px 18px -10px var(--ember-glow);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.wz-btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 26px -12px var(--ember-glow); }
.wz-btn:active { transform: translateY(0); }
.wz-btn:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.wz-btn[disabled] { opacity: 0.65; cursor: progress; transform: none; }

.wz-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  font: inherit; font-size: 0.94rem; font-weight: 600;
  color: var(--forest-deep); text-decoration: none;
  background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.wz-btn-secondary:hover { border-color: var(--ember); color: var(--ember-deep); }
.wz-btn-secondary:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.wz-btn-secondary[disabled] { opacity: 0.65; cursor: progress; }

/* --- 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;
}
.wz-watch-id {
  margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--sage);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.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 .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; }

/* UseDirect rig-length control (hidden for CAMIS via .is-hidden) */
.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); }

/* --- tier banner (retained, now always hidden; the alerts page is the free
       Park Watch sign-up — no paid upsell here, so #tier-banner stays hidden) --- */
.wz-tier {
  margin: 1rem 0 0; padding: clamp(1rem, 3vw, 1.3rem);
  background: linear-gradient(110% 140% at 0% 0%, var(--ember-glow), transparent 55%), var(--paper-card);
  border: 1.5px solid var(--line); border-left: 4px solid var(--ember);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 36px -32px rgba(28, 63, 47, 0.5);
}
.wz-tier.is-hidden { display: none; }
.wz-tier__head { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--forest-deep); }
.wz-tier__body { margin: 0.4rem 0 0; font-size: 0.93rem; color: var(--sage); }
.wz-tier__actions { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.wz-tier__status { margin: 0.6rem 0 0; min-height: 1.2em; font-size: 0.9rem; color: var(--ink); }
.wz-tier__status.is-info { color: var(--ink); }
.wz-tier__status.is-err { color: #a8392a; }
.wz-tier__status.is-ok { color: var(--forest-deep); }