/* Kiiwis — reward and promotion wizards on phones (≤768px).
   Shared by automations.html and campaigns.html, loaded after their own CSS.
   - The step bar becomes a thin progress line right under the top bar and "Step 3 of 9"
     between the buttons (kWizProgress in js/reward-catalog.js).
   - Type scale for phones: 20px titles, 15px option names, 16px inputs (iOS zooms
     into any field under 16px), 13–14px secondary text.
   - Denser chrome (2026-10-12): lower top bar, 44px buttons (the smallest comfortable
     tap target), less padding; lighter tips; "Back" as a text link.
   Inline styles set by the renderers are overridden through the wz-* classes. */

/* Elements that only exist for phones */
.wiz-mbar, .wiz-mcount { display: none; }

@media (max-width: 768px) {
  /* ── Chrome ─────────────────────────────────────────────── */
  .wiz-topbar { position: relative; padding: 10px 16px !important; }
  .wiz-topbar-title { font-size: 15px !important; font-weight: 700 !important; }
  .wiz-topbar-title svg { width: 15px; height: 15px; }
  .wiz-steps-nav { display: none !important; }

  .wiz-bottombar { position: relative; padding: 8px 16px !important; padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
  /* Progress line: kWizProgress puts it in the top bar, along its bottom edge */
  .wiz-mbar { display: block; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--line, var(--line)); }
  .wiz-mbar > span { display: block; height: 100%; width: 0; background: var(--k-green, #23812e); border-radius: 0 3px 3px 0; transition: width .25s ease; }
  .wiz-mcount { display: block; position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--text-2, #475569); white-space: nowrap; pointer-events: none; }

  .wiz-btn { min-height: 44px !important; font-size: 15px !important; border-radius: 12px !important; }
  .wiz-btn-primary { padding: 10px 24px !important; }
  /* Back: a text link, so the main action stands out (Airbnb-style) */
  .wiz-btn-back { background: none !important; border: none !important; padding: 10px 4px !important; text-decoration: underline; text-underline-offset: 3px; color: var(--text, #0f172a) !important; font-weight: 600 !important; }

  .wiz-content { padding: 18px 16px 24px !important; scrollbar-width: none; }
  .wiz-content::-webkit-scrollbar { display: none; }

  /* ── Step header ─────────────────────────────────────────── */
  .wiz-step-header { margin-bottom: 14px !important; }
  .wiz-step-header h3 { font-size: 20px !important; line-height: 1.25 !important; letter-spacing: -0.02em; }
  .wiz-step-header p { font-size: 14px !important; line-height: 1.45 !important; margin-top: 4px !important; }

  /* ── Option lists (types, occasions, audiences, titles, messages) ──
     Cards and padding come from .wz-list in wizard-theme.css */
  .wz-opt-t { font-size: 15px !important; line-height: 1.35 !important; }
  .wz-opt-d { font-size: 13px !important; line-height: 1.45 !important; margin-top: 3px !important; }
  .wz-opt-e { font-size: 13px !important; line-height: 1.45 !important; margin-top: 3px !important; }
  .wz-opt-x { font-size: 15px !important; line-height: 1.5 !important; }
  .wz-lbl { font-size: 16px !important; margin-top: 22px !important; margin-bottom: 10px !important; }
  #pDetail > .wz-lbl:first-child, #rAmountBox > .wz-lbl:first-child { margin-top: 0 !important; }

  /* ── Chips and tones ─────────────────────────────────────── */
  .rproduct-examples { gap: 8px !important; margin-top: 10px !important; }
  .rproduct-ex { font-size: 14px !important; padding: 8px 14px !important; min-height: 40px; }
  .tone-pill { font-size: 14px !important; padding: 8px 14px !important; min-height: 40px; }
  #campToneFilter, .tone-pills { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px !important; overflow: visible !important; }
  #campToneFilter .tone-pill, .tone-pills .tone-pill { padding: 8px 4px !important; text-align: center; }
  .sched-dur-pill { font-size: 14px !important; min-height: 40px; }

  /* ── Fields: 16px so iOS doesn't zoom in ──────────────────── */
  .cf-bubble { font-size: 16px !important; padding: 14px 16px !important; }
  .wiz-content .input, .wiz-content select, .wiz-content input[type="number"], .wiz-content input[type="date"] { font-size: 16px !important; min-height: 48px; }

  /* ── Tips: a quiet line instead of an amber box ──────────── */
  .wiz-hint { background: none !important; border: none !important; padding: 0 !important; margin: 0 0 16px !important; gap: 8px !important; }
  .wiz-hint-text { font-size: 14px !important; color: var(--text-2, #475569) !important; line-height: 1.45 !important; }
}

/* ══ Wizard v2 (2026-10-13) ══════════════════════════════
   Scoped to .wiz-v2 on the overlay (rewards and promotions wizards).
   - Suggestions on top, then a plain writing space (no box, no fill) under a hairline.
   - Counters only near the limit (wizV2Counters in automations.html).
   - Titles as chips, messages as a row you swipe.
   - Phones: top bar ‹ · title · 💡 · ✕ with one segment per step; the footer is just
     a full-width "Next", and steps aside only while the keyboard is open (kb-open). */
.wiz-v2 .wz-compose { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--line, var(--line)); position: relative; }
.wiz-overlay.wiz-v2 .wz-compose .cf-bubble,
.wiz-overlay.wiz-v2 .wz-compose .cf-bubble:focus {
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0;
  padding: 0 !important; resize: none; color: var(--text, #0f172a) !important;
  font-size: 20px !important; font-weight: 600; line-height: 1.35 !important; min-height: 120px; caret-color: var(--k-green-ink, #23812e);
}
.wiz-overlay.wiz-v2 .wz-compose-msg .cf-bubble { font-size: 18px !important; font-weight: 500; line-height: 1.45 !important; min-height: 160px; }
.wiz-overlay.wiz-v2 .wz-compose .cf-bubble::placeholder { color: var(--muted-2, #94a3b8); font-weight: 500; }
.wiz-v2 #productChar, .wiz-v2 #rewardNameCount, .wiz-v2 #charCount, .wiz-v2 #offerCharCount { font-size: 12px !important; font-variant-numeric: tabular-nums; }
.wiz-v2 .wz-cnt-hide { visibility: hidden; }
.wiz-overlay.wiz-v2 .wz-cnt-low { color: #b45309 !important; font-weight: 700; }
:root[data-theme="dark"] .wiz-overlay.wiz-v2 .wz-cnt-low { color: #f59e0b !important; }
.wiz-v2 #productExamples { margin-top: 0 !important; }
.wiz-v2 #pTitleSec > .wz-lbl:last-child { display: none; }   /* "Or write it your way": the hairline says it */

/* Titles: chips */
.wiz-v2 #rtitleOptions .wz-list, .wiz-v2 #pTitleSec .wz-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.wiz-v2 #rtitleOptions .wz-list > .wz-opt, .wiz-v2 #pTitleSec .wz-list > .wz-opt { border-radius: 999px !important; padding: 8px 14px !important; min-height: 38px; background: var(--panel-2, #f5f6f5) !important; }
.wiz-v2 #rtitleOptions .wz-list > .wz-opt::after, .wiz-v2 #pTitleSec .wz-list > .wz-opt::after { display: none; }
.wiz-overlay.wiz-v2 #rtitleOptions .wz-opt-x, .wiz-overlay.wiz-v2 #pTitleSec .wz-opt-x { font-size: 14px !important; font-weight: 600; line-height: 1.35 !important; }
.wiz-v2 #rtitleOptions .wz-list > .wz-opt[aria-checked="true"], .wiz-v2 #pTitleSec .wz-list > .wz-opt[aria-checked="true"] { background: var(--wz-sel-bg) !important; }
.wiz-v2 #rtitleOptions .wz-list > .wz-opt[aria-checked="true"] .wz-opt-x, .wiz-v2 #pTitleSec .wz-list > .wz-opt[aria-checked="true"] .wz-opt-x { color: var(--wz-chip-text, var(--k-green-ink, #23812e)) !important; }

/* Messages: a row you swipe */
.wiz-v2 #copyVariants .wz-list { flex-direction: row; gap: 10px; overflow-x: auto !important; scroll-snap-type: x mandatory; padding: 2px 0 6px; scrollbar-width: none; }
.wiz-v2 #copyVariants .wz-list::-webkit-scrollbar { display: none; }
.wiz-v2 #copyVariants .wz-list > :not(.wz-opt) { display: none !important; }
.wiz-v2 #copyVariants .wz-list > .wz-opt { flex: 0 0 78%; scroll-snap-align: start; border-radius: 14px !important; padding: 12px 14px !important; }
.wiz-v2 #copyVariants .wz-list > .wz-opt::after { display: none; }
.wiz-overlay.wiz-v2 #copyVariants .wz-opt-x { font-size: 14px !important; line-height: 1.45 !important; }

/* Top-bar buttons only exist on phones */
.wiz-v2-back, .wiz-v2-tips { display: none; }

@media (max-width: 768px) {
  .wiz-v2 .wiz-topbar { flex-wrap: wrap; padding: 10px 8px 8px !important; padding-top: max(10px, env(safe-area-inset-top)) !important; }
  .wiz-v2 .wiz-topbar-left { flex: 1; min-width: 0; gap: 2px !important; }
  .wiz-v2 .wiz-topbar-title { padding-left: 4px; }
  .wiz-v2 .wiz-v2-back, .wiz-v2 .wiz-v2-tips { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 0; background: none; border-radius: 10px; color: var(--text, #0f172a); cursor: pointer; position: relative; padding: 0; }
  .wiz-v2 .wiz-v2-back:focus-visible, .wiz-v2 .wiz-v2-tips:focus-visible { outline: 2px solid var(--k-green, #23812e); }
  .wiz-v2 .wiz-v2-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--k-green, #23812e); box-shadow: 0 0 0 2px var(--panel, #fff); }
  .wiz-v2 .wiz-close { width: 36px; height: 36px; justify-content: center; }
  .wiz-v2 .wz-tips-link { display: none !important; }
  .wiz-v2.wz-crop .wiz-v2-back { visibility: hidden !important; }

  /* Progress: one segment per step, under the top row */
  .wiz-v2 .wiz-mbar { position: static; flex: 0 0 100%; display: flex; gap: 4px; height: auto; background: none; padding: 8px 8px 0; }
  .wiz-v2 .wiz-mbar > i { flex: 1; height: 3px; border-radius: 3px; background: var(--line, var(--line)); transition: background .25s; }
  .wiz-v2 .wiz-mbar > i.on { background: var(--k-green, #23812e); }

  /* Footer: just the main action, full width */
  .wiz-v2 .wiz-bottombar .wiz-btn-back { display: none !important; }
  .wiz-v2.wz-crop .wiz-bottombar .wiz-btn-back { display: inline-flex !important; }
  .wiz-v2 .wiz-bottombar .wiz-btn-primary { flex: 1; width: 100%; justify-content: center; }
  .wiz-v2 .wiz-mcount { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wiz-v2.kb-open .wiz-bottombar { display: none !important; }

  /* Its own screen: nothing of the page behind can show when the keyboard lets the page scroll
     (html.wiz-screen while a v2 wizard is open; kWizV2 in js/reward-catalog.js) */
  html.wiz-screen .app, html.wiz-screen body > .overlay { display: none !important; }
  html.wiz-screen, html.wiz-screen body { background: var(--bg, var(--panel-2)); overflow: hidden; overscroll-behavior: none; }
  .wiz-v2.wiz-overlay { height: 100%; height: 100dvh; overscroll-behavior: contain; }
  .wiz-v2 .wiz-content { overscroll-behavior: contain; }

  /* Messages bleed to the screen edge */
  .wiz-v2 #copyVariants .wz-list { margin: 0 -16px; padding: 2px 16px 6px; scroll-padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wiz-v2 .wiz-mbar > i { transition: none; }
}