/* ============================================================
   Mythox — reusable guided step-by-step pop-up (walkthrough foundational #2)
   ------------------------------------------------------------
   The app-wide standard: every multi-field tool becomes a BUTTON that opens
   this onboarding-style flow — one part at a time, a progress bar, Back/Next.
   Driven by assets/guided.js (CreatorGuided.open). All ids/classes are .cg-*
   so nothing collides with modules or the first-run onboarding (.onb-*).
   Reuses the Brand OS tokens from brand.css (palette/font flow automatically).
   ============================================================ */
.cg-lock{overflow:hidden}

.cg-overlay{
  position:fixed; inset:0; z-index:130;
  display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(1100px 620px at 50% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s var(--ease);
}
.cg-overlay.show{opacity:1}
.cg-overlay[hidden]{display:none!important}

.cg-card{
  width:100%; max-width:600px; max-height:92vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface), var(--surface-grad-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 40px 110px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.985); transition:transform .35s var(--ease);
  overflow:hidden;
}
.cg-overlay.show .cg-card{transform:none}

/* header */
.cg-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px clamp(20px,4vw,30px) 0}
.cg-title{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ivory); display:flex; align-items:center; gap:9px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cg-title .bars{font-size:15px; flex-shrink:0}
.cg-head-r{display:flex; align-items:center; gap:12px; flex-shrink:0}
.cg-count{font-family:var(--font-body); font-size:11px; letter-spacing:.04em; color:var(--dim)}
.cg-x{width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.16s var(--ease)}
.cg-x:hover{background:var(--surface-3); color:var(--ivory)}

/* progress bar */
.cg-prog{height:4px; margin:15px clamp(20px,4vw,30px) 0; border-radius:999px; background:var(--surface-3); overflow:hidden}
.cg-prog > i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow:0 0 12px -2px var(--glow); transition:width .35s var(--ease)}

/* body (the scroll area — fixes the mobile-overflow problem the old tour had) */
.cg-body{padding:20px clamp(20px,4vw,30px) 6px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto}
.cg-step{animation:cgIn .4s var(--ease) both}
@keyframes cgIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.cg-kicker{font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px}
.cg-step h3.cg-h{font-family:var(--font-display); font-weight:700; font-size:clamp(19px,3vw,23px); margin:0 0 6px; line-height:1.15; letter-spacing:-.01em}
.cg-sub{color:var(--muted); font-size:14px; line-height:1.55; margin:0 0 16px}
.cg-err{color:var(--bad); font-size:12.5px; min-height:16px; margin-top:6px}

/* a consistent field block for steps that use the eye/Ask-Midas helpers */
.cg-field{margin-bottom:16px}
.cg-field > .cg-field-h{display:flex; align-items:center; gap:7px; margin-bottom:6px}
.cg-field > .cg-field-h > span.cg-field-lbl{font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.03em}

/* footer */
.cg-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px clamp(20px,4vw,30px) 20px; border-top:1px solid var(--line)}
.cg-foot > span{flex:0 0 auto}

@media (max-width:560px){ .cg-card{max-height:94vh} }
@media (prefers-reduced-motion:reduce){ .cg-overlay,.cg-card,.cg-step,.cg-prog>i{transition:none; animation:none} }