/**
 * wizard-home.css — the 7-step homepage funnel.
 *
 * Production. Uses framework palette only — green #00ff88, cyan #00d4ff,
 * white, red #ff4444. JetBrains Mono + Inter, same fonts the rest of
 * zeq.dev ships with. No invented styles, no placeholder colours.
 *
 * Layout: each step is a viewport-tall <section data-zeq-step="N"> with a
 * Next button at the bottom that anchor-links to the next. A sticky
 * progress bar pinned at the very top updates as the user scrolls.
 *
 * Section 1 is the existing hero (untouched). Sections 2–7 live in this
 * stylesheet + wizard-home.js.
 */

/* Progress bar styles preserved for non-homepage embeddings (the homepage
   no longer mounts the bar — see wizard-home.js::mountHeroContinueCue). */
#zeq-wiz-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0, 255, 136, 0.10);
  z-index: 9999;
  pointer-events: none;
}

/* ─── Hero "continue · step 2" pill ──────────────────────────────────
   Lives INSIDE the hero <section> as an absolutely positioned child.
   No fixed/sticky overlays. No imposed background on the hero. Doesn't
   touch the N-body canvas or the existing hero copy. Framework palette
   only — #00ff88 + black-on-translucent. */
#zwh-hero-continue {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 255, 136, 0.35);
  border-radius: 999px;
  color: #e6e6e6;
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.4px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
  z-index: 5;
  animation: zwh-hc-pulse 1554ms ease-in-out infinite; /* 2 Zeqonds */
}
#zwh-hero-continue:hover {
  border-color: rgba(0, 255, 136, 0.85);
  background: rgba(0, 255, 136, 0.10);
  transform: translateX(-50%) translateY(-1px);
}
#zwh-hero-continue .zwh-hc-eb {
  color: rgba(0, 255, 136, 0.80);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-right: 1px solid rgba(0, 255, 136, 0.25);
  padding-right: 12px;
}
#zwh-hero-continue .zwh-hc-label {
  color: #ffffff;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
}
#zwh-hero-continue .zwh-hc-arrow {
  color: #00ff88;
  font-size: 14px;
}
@keyframes zwh-hc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.0); }
  50%      { box-shadow: 0 0 22px 0 rgba(0, 255, 136, 0.18); }
}
#zeq-wiz-progress > .zeq-wiz-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00ff88, #00d4ff);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.55);
  transition: width 776.99ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#zeq-wiz-progress > .zeq-wiz-progress-counter {
  position: absolute;
  top: 8px;
  right: 22px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(0, 255, 136, 0.75);
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 2px;
  pointer-events: auto;
}

section[data-zeq-step] {
  min-height: 100vh;
  padding: clamp(48px, 10vh, 120px) clamp(20px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(ellipse at top, rgba(13,31,31,0.2) 0%, rgba(5,10,8,0.2) 60%, rgba(0,0,0,0.2) 100%);
  color: #e8e8f0;
  /* Body font: Geist — matches zeq.me line 49 verbatim. */
  font-family: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  border-top: 1px solid rgba(0, 255, 136, 0.08);
  position: relative;
}

/* Mobile button compression — user request: "if buttons can be combined
   into the field, make it combined". The Copy / Download row in step 3
   stays side-by-side on mobile (50/50) instead of stacking, so the user
   never has to scroll past two full-width chunks. PIN row inputs already
   use flex-wrap so they collapse cleanly. ----------------------------*/
@media (max-width: 540px) {
  section[data-zeq-step] .copy-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  section[data-zeq-step] .copy-row > .btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.78rem;
    padding: 0.7rem 0.5rem;
  }
  /* Generate & Copy / Create my identity primary buttons take full width
     on mobile so they're easy to tap — desktop keeps the 280-300px min. */
  section[data-zeq-step] #zwh-run-wizard,
  section[data-zeq-step] #zwh-confirm-register {
    width: 100% !important;
    min-width: 0 !important;
  }
}
section[data-zeq-step] .zwh-inner {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
/* ─── Eyebrow + heading + lead — VERBATIM from zeq.me ──────────────
   Source of truth: apps/zeq-me/public/index.html
     • body         → font-family:"Geist", -apple-system, sans-serif (line 49)
     • h2           → "Geist" 700, clamp(28px,3.6vw,44px), letter-spacing -0.02em, line-height 1.1 (lines 57-59)
     • .hero-eyebrow → JetBrains Mono 11px, 0.22em tracking, uppercase,
                       padding 7px 14px, border 1px solid rgba(0,255,136,0.18),
                       border-radius 999px, bg rgba(0,255,136,0.04) (lines 123-131)
     • .hero p.lede → clamp(17px,1.4vw,21px) at var(--text-dim) (line 146)
   No invented values. Every wizard step now uses these tokens. */

section[data-zeq-step] .zwh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #00ff88;
  padding: 7px 14px;
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 999px;
  background: rgba(0, 255, 136, 0.04);
  margin-bottom: 28px;
  width: fit-content;
}
section[data-zeq-step] h2 {
  font-family: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  color: #ffffff;
}
section[data-zeq-step] p.zwh-lead {
  font-family: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: rgba(230, 230, 240, 0.78);
  max-width: 640px;
  margin: 0 0 32px;
}
/* Step-progression pill — every section's bottom anchor uses the same
   shape as step 1's hero pill (#zwh-hero-continue) so the wizard feels
   consistent end to end. Centered at the section bottom, dark
   translucent background, framework green border, JetBrains Mono small
   uppercase, gentle 1.554s box-shadow pulse (2 Zeqonds). */
section[data-zeq-step] .zwh-next[data-next-step] {
  /* display:flex (block-level flex container) so margin:auto truly centers
     horizontally — inline-flex would not honour auto-margin centering. */
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px auto 0;
  padding: 10px 18px 10px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 255, 136, 0.35);
  color: #e6e6e6;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.4px;
  cursor: pointer;
  text-decoration: none;
  width: fit-content;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
  animation: zwh-hc-pulse 1554ms ease-in-out infinite;
}
section[data-zeq-step] .zwh-next[data-next-step]:hover {
  border-color: rgba(0, 255, 136, 0.85);
  background: rgba(0, 255, 136, 0.10);
  transform: translateY(-1px);
}
section[data-zeq-step] .zwh-next[data-next-step]:disabled,
section[data-zeq-step] .zwh-next[data-next-step][aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  animation: none;
}
section[data-zeq-step] .zwh-next[data-next-step] .step-num {
  color: rgba(0, 255, 136, 0.80);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-right: 1px solid rgba(0, 255, 136, 0.25);
  padding-right: 12px;
}
section[data-zeq-step] .zwh-next[data-next-step] .step-arrow {
  color: #00ff88;
  font-size: 14px;
}

/* The OTHER `.zwh-next` (the wizard's primary CTAs, e.g. "Run wizard")
   keeps its old chip-style look — it's distinct from the step-progression
   pill. data-next-step selector above is what differentiates them. */
section[data-zeq-step] .zwh-next:not([data-next-step]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  background: rgba(0, 255, 136, 0.18);
  border: 1px solid rgba(0, 255, 136, 0.55);
  color: #00ff88;
  border-radius: 2px;
  padding: 14px 24px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms ease;
}
section[data-zeq-step] .zwh-next:not([data-next-step]):hover {
  background: rgba(0, 255, 136, 0.32);
  color: #ffffff;
}
section[data-zeq-step] .zwh-next:not([data-next-step]):disabled,
section[data-zeq-step] .zwh-next:not([data-next-step])[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Choice cards (step 2) ────────────────────────────────────────── */

section[data-zeq-step] .zwh-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 12px;
}
@media (max-width: 720px) { section[data-zeq-step] .zwh-choice { grid-template-columns: 1fr; } }
/* paas DNA — apps/zeq-me/public/paas/index.html line 273:
   border:1px solid rgba(0,255,136,0.18); background:rgba(0,255,136,0.025);
   border-radius:2px; padding:1.25rem 1.25rem; */
section[data-zeq-step] .zwh-card {
  background: rgba(0, 255, 136, 0.025);
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  padding: 1.5rem 1.5rem;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
  font: inherit; color: inherit;
}
section[data-zeq-step] .zwh-card:hover {
  border-color: rgba(0, 255, 136, 0.55);
  background: rgba(0, 255, 136, 0.05);
  transform: translateY(-1px);
}
section[data-zeq-step] .zwh-card.selected {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.06);
}
section[data-zeq-step] .zwh-card-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 19px;
  font-weight: 600;
  color: #00ff88;
  letter-spacing: 0.4px;
}
section[data-zeq-step] .zwh-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(230, 230, 230, 0.75);
}
section[data-zeq-step] .zwh-card-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: rgba(230, 230, 230, 0.45);
  letter-spacing: 0.4px;
}

/* ─── Inputs — paas DNA ─────────────────────────────────────────────
   Source of truth: apps/zeq-me/public/paas/index.html line 273
     border: 1px solid rgba(0, 255, 136, 0.18);
     background: rgba(0, 255, 136, 0.025);
     border-radius: 2px;
   Inputs need a touch more contrast for readability than pure paas
   boxes, so background bumps to rgba(0,255,136,0.04). Border + radius
   stay paas-exact. */
section[data-zeq-step] .zwh-input {
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  padding: 14px 16px;
  font: 16px/1.45 "Inter", ui-sans-serif, system-ui, sans-serif;
  color: #ffffff;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
  width: 100%;
  resize: vertical;
}
section[data-zeq-step] .zwh-input:focus {
  border-color: rgba(0, 255, 136, 0.55);
  background: rgba(0, 255, 136, 0.06);
}
section[data-zeq-step] .zwh-input::placeholder {
  color: rgba(230, 230, 230, 0.40);
}
section[data-zeq-step] .zwh-label {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: rgba(0, 255, 136, 0.78);
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
  text-transform: uppercase;
}

/* ─── Query chips (step 3) — paas DNA, pill-shape kept ──────────────
   Chips are a navigation affordance not a content box, so they stay
   pill-shaped (border-radius:999px), but the colour tokens come from
   paas: framework-green border + 0.025 background. */
section[data-zeq-step] .zwh-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
section[data-zeq-step] .zwh-chip {
  background: rgba(0, 255, 136, 0.025);
  border: 1px solid rgba(0, 255, 136, 0.18);
  color: rgba(230, 230, 230, 0.85);
  border-radius: 999px;
  padding: 8px 14px;
  font: 13px/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: all 200ms ease;
}
section[data-zeq-step] .zwh-chip:hover {
  border-color: rgba(0, 255, 136, 0.55);
  color: #ffffff;
  background: rgba(0, 255, 136, 0.06);
}

/* ─── Step 3 review card — verbatim from /auth/index.html so the
   homepage wizard's step 3 has the framework's exact DNA: square
   buttons, framework green #00ff88, JetBrains Mono equation, gradient
   primary CTA, rgba(0,0,0,0.4) equation background. Class names
   matched to /auth/ so auth-v3 tooling can re-use them. */

section[data-zeq-step] .equation-display {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  color: #00ff88;
  /* paas DNA: green-tinted very-transparent wash, framework-green border,
     2px square corners. Slightly darker than 0.025 so the green text
     stays readable on top — 0.06 mirrors paas line 6 callouts. */
  background: rgba(0, 255, 136, 0.06);
  padding: 1.25rem 1.25rem;
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  word-break: break-all;
  user-select: all;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}
section[data-zeq-step] .copy-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
section[data-zeq-step] .copy-row .btn { flex: 1; margin-top: 0; }

section[data-zeq-step] .meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.85rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  margin-top: 0.85rem;
}
section[data-zeq-step] .meta-grid .k { color: rgba(255, 255, 255, 0.35); }
section[data-zeq-step] .meta-grid .v { color: #00ff88; word-break: break-all; }

section[data-zeq-step] .warning-text { color: #ff8844 !important; font-weight: 600 !important; }

/* Framework square-button DNA, mirrored from /auth/index.html lines 320-356.
   The homepage's existing /style.css redefines `.btn` and `.btn-secondary`
   with --radius-sm (4px) and other tokens. Use !important on radius +
   high-specificity selectors so the framework auth DNA wins on these
   wizard surfaces ONLY, without affecting any other btn on the page. */
section[data-zeq-step] .copy-row .btn,
/* ─── Buttons inside any wizard step ───────────────────────────────────
   Same selectors used by auth-v3.js — we keep the selector broad so the
   "Generate & Copy Equation" trigger (which lives OUTSIDE #zwh-review)
   gets the same gradient pill treatment as the in-review actions. */
section[data-zeq-step] .btn {
  padding: 0.85rem 1rem !important;
  border: none;
  border-radius: 2px !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
section[data-zeq-step] #zwh-review .btn { width: 100%; margin-top: 0.5rem; }
section[data-zeq-step] .btn:active { transform: scale(0.98); }
section[data-zeq-step] .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── .app-about disclosure — full-width prose, no inner boxes.
   Same `<details>/<summary>` chevron pattern Vault/Mail/HITE/ZSP use,
   but the body fills the section width and is laid out as prose with
   subheadings — long-form education, no bombarding cards. ───────── */
section[data-zeq-step] .app-about {
  max-width: none;
  width: 100%;
  margin: 32px 0 0;
}
section[data-zeq-step] .app-about details {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.3);
}
section[data-zeq-step] .app-about summary {
  cursor: pointer;
  padding: 0.95rem 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color .15s;
  user-select: none;
}
section[data-zeq-step] .app-about summary::-webkit-details-marker { display: none; }
section[data-zeq-step] .app-about summary::before {
  content: '\25B6';
  font-size: 0.6rem;
  color: #00ff88;
  transition: transform .2s;
}
section[data-zeq-step] .app-about details[open] summary::before {
  transform: rotate(90deg);
}
section[data-zeq-step] .app-about summary:hover { color: #fff; }

section[data-zeq-step] .app-about .about-body {
  padding: 0.5rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(0, 255, 136, 0.08);
}
section[data-zeq-step] .app-about .about-body h3 {
  font-family: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 1.5rem 0 0.5rem;
}
section[data-zeq-step] .app-about .about-body h3:first-child { margin-top: 1rem; }
section[data-zeq-step] .app-about .about-body h4 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00ff88;
  margin: 1.4rem 0 0.4rem;
}
section[data-zeq-step] .app-about .about-body p {
  font-family: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  color: rgba(230, 230, 240, 0.78);
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 72ch;
}
section[data-zeq-step] .app-about .about-body p:last-child { margin-bottom: 0; }
section[data-zeq-step] .app-about .about-body strong { color: #ffffff; font-weight: 600; }
section[data-zeq-step] .app-about .about-body em { color: rgba(0, 255, 136, 0.92); font-style: normal; }
section[data-zeq-step] .app-about .about-body code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.86em;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.06);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
section[data-zeq-step] .app-about .about-body a {
  color: #00ff88;
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 136, 0.4);
  text-underline-offset: 3px;
}
section[data-zeq-step] .app-about .about-body a:hover { text-decoration-color: #00ff88; }

/* ─── Step 4 gateway — list of apps your machine unlocks. No borders,
   no boxes; each row hover-lifts and underlines like a real link.
   Opens in a new tab. -------------------------------------------- */
section[data-zeq-step] .zwh-gateway {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid rgba(0, 255, 136, 0.10);
}
@media (max-width: 720px) {
  section[data-zeq-step] .zwh-gateway { grid-template-columns: 1fr; }
}
section[data-zeq-step] .zwh-gateway-app {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 255, 136, 0.08);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  transition: color 160ms ease, transform 160ms ease;
  cursor: pointer;
}
section[data-zeq-step] .zwh-gateway-app:hover {
  color: #ffffff;
  transform: translateX(2px);
}
section[data-zeq-step] .zwh-gateway-app:hover .zwh-gateway-name { color: #00ff88; }
section[data-zeq-step] .zwh-gateway-app:hover .zwh-gateway-arrow {
  color: #00ff88;
  transform: translate(2px, -2px);
}
section[data-zeq-step] .zwh-gateway-app:nth-child(odd) { padding-right: 1.25rem; }
section[data-zeq-step] .zwh-gateway-app:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid rgba(0, 255, 136, 0.06); }
@media (max-width: 720px) {
  section[data-zeq-step] .zwh-gateway-app:nth-child(odd),
  section[data-zeq-step] .zwh-gateway-app:nth-child(even) {
    padding-left: 0; padding-right: 0; border-left: none;
  }
}
section[data-zeq-step] .zwh-gateway-name {
  font-family: "Geist", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}
section[data-zeq-step] .zwh-gateway-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 255, 136, 0.78);
  white-space: nowrap;
}
section[data-zeq-step] .zwh-gateway-desc {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(230, 230, 240, 0.62);
  margin-top: 0.25rem;
}
section[data-zeq-step] .zwh-gateway-arrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.4);
  transition: color 160ms ease, transform 160ms ease;
  display: inline-block;
}

section[data-zeq-step] .btn-primary-action {
  background: linear-gradient(135deg, #00ff88, #06b6d4) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.2) !important;
}
section[data-zeq-step] .btn-primary-action:hover {
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.35) !important;
  filter: brightness(1.05);
}
section[data-zeq-step] .btn-secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
section[data-zeq-step] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(0, 255, 136, 0.25) !important;
  color: #fff !important;
}

/* Hide-helper, mirrors auth-v3.js's expectation. */
section[data-zeq-step] .hidden { display: none !important; }
section[data-zeq-step] .hint { font-size: 0.72rem; color: rgba(255, 255, 255, 0.35); margin-top: 0.35rem; }

section[data-zeq-step] .zwh-banner {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 2px;
  margin-top: 16px;
}
section[data-zeq-step] .zwh-banner.ok {
  border: 1px solid rgba(0, 255, 136, 0.35);
  background: rgba(0, 255, 136, 0.06);
  color: #00ff88;
}
section[data-zeq-step] .zwh-banner.err {
  border: 1px solid rgba(255, 102, 119, 0.35);
  background: rgba(255, 102, 119, 0.06);
  color: #ff8a99;
}
section[data-zeq-step] .zwh-banner-action {
  margin-left: 10px;
  padding: 6px 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Step 3 success — uses the canonical .meta-grid pattern that already
   ships with the framework (auth/index.html lines 401-414). The render
   function in wizard-home.js outputs .meta-grid + a single ZID flex-row
   with inline styles copied verbatim from auth/index.html lines 586-590.
   No invented success classes — that's what the user asked for. */

/* ─── Build log + iframe preview (step 6 / 7) ──────────────────────── */

section[data-zeq-step] .zwh-build {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  min-height: 460px;
}
@media (max-width: 920px) {
  section[data-zeq-step] .zwh-build { grid-template-columns: 1fr; }
}
section[data-zeq-step] .zwh-build-log {
  background: #000;
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  padding: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(0, 255, 136, 0.78);
  overflow-y: auto;
  max-height: 540px;
  white-space: pre-wrap;
}
section[data-zeq-step] .zwh-preview {
  width: 100%;
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  background: #000;
  min-height: 460px;
}

/* ─── Spinner (used during auth + build) ───────────────────────────── */

.zwh-spin {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 8px;
  border: 2px solid rgba(0, 255, 136, 0.25);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: zwh-spin 776.99ms linear infinite;
  vertical-align: middle;
}
@keyframes zwh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────────────
   Phase 8.5 · architect-together surfaces.
   Chat thread bounds, bubble polish, cost-pill rhythm, and a confidence
   pulse on the Build button the moment a plan unlocks it.
   IDs (set inline-styled in index.html, sized here):
     #zwh-architect-thread, #zwh-refine-thread → bounded, scrollable
     #zwh-build-from-plan                       → pulses when enabled
     #zwh-architect-cost, #zwh-refine-cost      → monospace pill rhythm
   ────────────────────────────────────────────────────────────────────── */

#zwh-architect-thread,
#zwh-refine-thread {
  max-height: 380px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 4px 4px 4px 0;
  /* Subtle inner fade-in on the top edge so long threads don't look
     decapitated when they scroll past their bound. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 100%);
}

/* Loading-bubble shimmer — used by the inline "orb is thinking…" /
   "orb is patching the page…" placeholders the JS pushes while the
   request is in flight. The JS sets the text + color; this rule adds
   the gentle 1.287-Hz pulse so the visitor knows we're alive. */
#zwh-architect-thread > div:last-child:not([style*="align-self"]),
#zwh-refine-thread > div:last-child:not([style*="align-self"]) {
  animation: zwh-architect-thinking 1.287s ease-in-out infinite;
}
@keyframes zwh-architect-thinking {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Confidence-pulse on the Build button once a plan has rendered.
   The wireBuildFromPlan JS removes the disabled attribute + bumps
   opacity to 1; this rule layers a soft 1.287-Hz glow so the eye
   tracks to it. The animation pauses while disabled (opacity 0.5). */
#zwh-build-from-plan:not(:disabled) {
  position: relative;
  animation: zwh-build-confidence 1.287s ease-in-out infinite;
}
@keyframes zwh-build-confidence {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(0, 255, 170, 0); }
}
#zwh-build-from-plan:disabled {
  animation: none;
}

/* Cost-tracker pills — small monospace counters that sit next to the
   composer's Send button. The JS updates them on every turn. Aligns
   right on wide viewports, falls under the button on narrow ones. */
#zwh-architect-cost,
#zwh-refine-cost {
  padding: 4px 8px;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.14);
  border-radius: 2px;
  white-space: nowrap;
}

/* Architect / refine composer textareas — pickup the same square-corner,
   mono-feel as every other zwh-input but bump the inline-paste affordance
   so multi-line replies don't feel cramped. */
#zwh-architect-input,
#zwh-refine-input {
  resize: vertical;
  min-height: 64px;
}

/* Spec + plan cards — already inline-styled (border-left mint hairline,
   tinted background, square corners). The only thing missing from the
   shared design DNA was the "card-tag" mini-label rhythm. Both cards
   render the tag inline so we only need a hover refinement here:
   on mouse-over, the card brightens to indicate it's a live artefact
   that will be cited in the page footer once the build lands. */
#zwh-spec-card,
#zwh-plan-card {
  transition: background 0.2s ease;
}
#zwh-spec-card:hover {
  background: rgba(0, 255, 136, 0.07);
}
#zwh-plan-card:hover {
  background: rgba(0, 255, 170, 0.08);
}