/*
 * The guide — Dr. Marketo's layman-first components (x-guide.*).
 *
 * Shared furniture for every screen the layman-first rebuild touches: the
 * coach bubble, the plain-term explainer, the smart-default card, the
 * "Advanced (optional)" drawer, the exact-reason card, the phone stepper and
 * the quest progress. See resources/views/components/guide/*.blade.php for
 * how each is used, and Super Admin → UI guide for every one in every state.
 *
 * Its own sheet because there is no CSS build step: a Tailwind class missing
 * from the committed app.css silently does nothing, so everything these
 * components need is written out here, scoped under .gd-*.
 *
 * PALETTE — not invented here. The dark set is the Command Deck's (deck.css)
 * and the Launch Quest's (launch-quest.css) value for value; the light set is
 * the quest's own light set. Which one applies follows the `dark` class
 * layouts/base puts on <html>, exactly as the quest dock does, so the guide
 * reads correctly in the dark panel, the light panel and the super admin.
 *
 * EFFECTS — reused, not new: the bubble pops in like the assistant's nudge
 * (cy-pop), the pose eases in and floats like the launch screens' guide
 * (gl-pose-in, gl-float), progress fills like the quest's XP bar and the
 * celebration rains the quest's confetti. All of it stands still for anyone
 * whose OS asks for reduced motion.
 *
 * PHONES — every rule that changes the layout for a phone sits under
 * max-width:640px (the stepper pages one step at a time below it). Tap
 * targets are 44px. Nothing here is wider than its container, so nothing can
 * scroll sideways at 360px.
 */

/* =============================================================== tokens === */

:root {
  --gd-bubble: #121736;
  --gd-panel: rgba(18, 23, 54, .62);
  --gd-solid: #0d1128;
  --gd-bar: rgba(9, 12, 24, .94);
  --gd-line: rgba(255, 255, 255, .14);
  --gd-line-soft: rgba(76, 111, 255, .3);
  --gd-hi: #ffffff;
  --gd-mid: #aeb6d6;
  --gd-low: #a3acd2;
  --gd-blue: #4c6fff;
  --gd-blue-text: #8fa6ff;
  --gd-green: #3ee896;
  --gd-green-text: #3ee896;
  --gd-gold: #d08136;
  --gd-gold-glow: #ffc27a;
  --gd-gold-text: #ffc27a;
  --gd-red: #ff5c7a;
  --gd-red-text: #ffb3c1;
  --gd-purple: #9b6bff;
  --gd-purple-text: #c9b1ff;
  --gd-wash: rgba(255, 255, 255, .06);
  --gd-track: rgba(255, 255, 255, .12);
  --gd-glow: rgba(76, 111, 255, .5);
  --gd-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  --gd-pop-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  /* The primary action is the quest's gold with dark ink, in both themes. */
  --gd-cta: #ffc27a;
  --gd-cta-ink: #1c1206;
  /* The gold of his cape — the ring around his face, as on the assistant. */
  --gd-cape: #d4a33b;
  --gd-display: 'Baloo 2', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gd-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

html:not(.dark) {
  --gd-bubble: #ffffff;
  --gd-panel: #ffffff;
  --gd-solid: #ffffff;
  --gd-bar: rgba(255, 255, 255, .96);
  --gd-line: rgba(15, 23, 42, .12);
  --gd-line-soft: rgba(76, 111, 255, .22);
  --gd-hi: #0f172a;
  --gd-mid: #475069;
  --gd-low: #5b6480;
  --gd-blue-text: #3148d6;
  --gd-green-text: #0b7a4b;
  --gd-gold-text: #a65a06;
  --gd-red: #e11d48;
  --gd-red-text: #9f1239;
  --gd-purple-text: #6b3fd4;
  --gd-wash: rgba(15, 23, 42, .05);
  --gd-track: rgba(15, 23, 42, .1);
  --gd-glow: rgba(76, 111, 255, .3);
  --gd-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .07);
  --gd-pop-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}

/*
 * `hidden` must win.
 *
 * app.css's [hidden] rule is one attribute selector, so any `.gd-x { display:
 * flex }` below — same weight, later sheet — would quietly show a hidden
 * element again. Every guide element the script hides is listed here.
 */
.gd-coach[hidden], .gd-coach-dismiss[hidden], .gd-pick-control[hidden], .gd-pick-toggle[hidden],
.gd-pick-reset[hidden], .gd-pick-note[hidden], .gd-step[hidden], .gd-stepper-back[hidden],
.gd-stepper-next[hidden], .gd-stepper-hint[hidden], .gd-progress[hidden], .gd-reason[hidden],
.gd-term-pop[hidden] {
  display: none !important;
}

/*
 * Before guide.js has run.
 *
 * x-guide.assets puts `gd-pre` on <html> from a one-line script in <head>,
 * before the first paint and only where scripts run (it comes off again if
 * guide.js never arrives). Until the script has enhanced a component
 * (data-gd-ready), paint it the way the script will leave it: a phone sees
 * only the step it opens on (data-guide-open, marked by the server), and a
 * smart pick is folded behind its Change button. Nothing paints whole and
 * then collapses. With no script at all `gd-pre` is never set, so every
 * step and every control shows.
 */
@media (max-width: 640px) {
  html.gd-pre .gd-stepper[data-phone="on"]:not([data-gd-ready]) .gd-step:not([data-guide-open]) { display: none; }
  html.gd-pre .gd-stepper[data-phone="on"]:not([data-gd-ready]):not([data-open-last]) .gd-stepper-submit { display: none; }
}
html.gd-pre .gd-pick:not([data-gd-ready]):not(.is-open) > .gd-pick-control { display: none; }
html.gd-pre .gd-pick:not([data-gd-ready]) .gd-pick-toggle[hidden] { display: inline-flex !important; }

.gd-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================== buttons === */

.gd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; margin: 0;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--gd-cta); color: var(--gd-cta-ink) !important;
  font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2;
  text-decoration: none !important; text-align: center;
  box-shadow: 0 0 0 1px rgba(255, 194, 122, .5), 0 8px 22px rgba(208, 129, 54, .28);
  transition: transform .15s, filter .15s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.gd-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gd-btn:active { transform: scale(.98); }
.gd-btn:focus-visible { outline: 2px solid var(--gd-hi); outline-offset: 3px; }
.gd-btn[disabled], .gd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.gd-btn svg { flex-shrink: 0; }

.gd-btn--ghost {
  background: transparent; color: var(--gd-mid) !important;
  border: 1px solid var(--gd-line); box-shadow: none; font-weight: 700;
}
.gd-btn--ghost:hover { color: var(--gd-hi) !important; border-color: var(--gd-line-soft); background: var(--gd-wash); filter: none; }

.gd-btn--link {
  background: none; box-shadow: none; padding: 10px 4px;
  color: var(--gd-blue-text) !important; font-weight: 700;
}
.gd-btn--link:hover { text-decoration: underline !important; transform: none; filter: none; }

/* ================================================================ coach === */

/*
 * Dr. Marketo's bubble.
 *
 * Desktop: the full figure standing beside a speech bubble, the way the launch
 * screens put him beside the work. Phone: his round face beside "Dr. Marketo
 * says", and the words get the whole width — text first.
 */
.gd-coach {
  position: relative;
  display: flex; align-items: flex-end; gap: 6px;
  margin: 0 0 16px;
  color: var(--gd-hi);
  text-align: left;
  animation: gd-pop .32s cubic-bezier(.2, .8, .2, 1) both;
}
.gd-coach.is-leaving { animation: gd-out .18s ease-in forwards; }

.gd-coach-figure { position: relative; flex: none; width: 104px; display: flex; justify-content: center; }
.gd-coach-figure picture { display: contents; }
.gd-coach-figure::before {
  content: ''; position: absolute; bottom: 0; left: 50%;
  width: 92px; height: 18px; border-radius: 50%;
  background: radial-gradient(ellipse, var(--gd-glow), transparent 70%);
  filter: blur(3px); transform: translateX(-50%);
  animation: gd-glow 3s ease-in-out infinite;
}
.gd-coach-figure img {
  position: relative; display: block;
  width: 100%; height: 148px; max-width: none;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45));
  animation: gd-pose-in .45s ease both, gd-float 4.5s ease-in-out .45s infinite;
}

.gd-coach-bubble {
  position: relative; flex: 1 1 auto; min-width: 0;
  margin-bottom: 18px; padding: 14px 18px 16px;
  border-radius: 16px; background: var(--gd-bubble);
  border: 1px solid var(--gd-line); box-shadow: var(--gd-shadow);
}
/* The tail, pointing at him. */
.gd-coach-bubble::before {
  content: ''; position: absolute; left: -8px; bottom: 26px;
  width: 14px; height: 14px; background: var(--gd-bubble);
  border-left: 1px solid var(--gd-line); border-bottom: 1px solid var(--gd-line);
  transform: rotate(45deg);
}
.gd-coach.is-dismissible .gd-coach-bubble { padding-right: 46px; }

.gd-coach-who {
  display: flex; align-items: center; gap: 8px; min-height: 16px; margin: 0 0 6px;
  font-family: var(--gd-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--gd-blue-text);
}
.gd-coach-title {
  margin: 0 0 4px; font-family: var(--gd-display);
  font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--gd-hi);
}
.gd-coach-text { font-size: 14px; line-height: 1.55; color: var(--gd-mid); overflow-wrap: anywhere; }
.gd-coach-text p { margin: 0 0 6px; }
.gd-coach-text p:last-child { margin-bottom: 0; }
.gd-coach-text strong, .gd-coach-text b { color: var(--gd-hi); }
.gd-coach-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

.gd-coach-dismiss {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--gd-low); -webkit-tap-highlight-color: transparent;
}
.gd-coach-dismiss:hover { color: var(--gd-hi); background: var(--gd-wash); }
.gd-coach-dismiss:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: -4px; }

/* Compact: forced by the prop at any width, and every coach on a phone. */
.gd-coach--compact { display: block; }
.gd-coach--compact .gd-coach-figure { position: absolute; top: 12px; left: 14px; z-index: 1; width: 36px; height: 36px; }
.gd-coach--compact .gd-coach-figure::before,
.gd-coach--compact .gd-coach-bubble::before { display: none; }
.gd-coach--compact .gd-coach-figure img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center;
  border: 2px solid var(--gd-cape); background: #111; filter: none;
  animation: gd-pose-in .35s ease both;
}
.gd-coach--compact .gd-coach-bubble { margin: 0; padding: 12px 16px 14px; }
.gd-coach--compact .gd-coach-who { min-height: 36px; padding-left: 46px; margin-bottom: 8px; }
.gd-coach--compact .gd-coach-title { font-size: 16px; }

@media (max-width: 640px) {
  .gd-coach { display: block; }
  .gd-coach-figure { position: absolute; top: 12px; left: 14px; z-index: 1; width: 36px; height: 36px; }
  .gd-coach-figure::before, .gd-coach-bubble::before { display: none; }
  .gd-coach-figure img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center;
    border: 2px solid var(--gd-cape); background: #111; filter: none;
    animation: gd-pose-in .35s ease both;
  }
  .gd-coach-bubble { margin: 0; padding: 12px 16px 14px; }
  .gd-coach.is-dismissible .gd-coach-bubble { padding-right: 16px; }
  .gd-coach-who { min-height: 36px; padding-left: 46px; padding-right: 30px; margin-bottom: 8px; }
  .gd-coach-title { font-size: 16px; }
  .gd-coach-actions > .gd-btn { flex: 1 1 auto; }
}

/* ================================================================= term === */

/*
 * A word with a dotted underline that explains itself.
 *
 * Without the script it still works: hover (a mouse, and a tap on a phone —
 * iOS gives a tapped button :hover but not :focus) or focus (keyboard)
 * shows the meaning, and the button's aria-describedby reads it to a screen
 * reader either way.
 */
.gd-term { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }
.gd-term-btn {
  position: relative; display: inline; margin: 0; padding: 0;
  border: 0; border-radius: 4px; background: none;
  font: inherit; color: inherit; line-height: inherit; text-align: inherit;
  letter-spacing: inherit; text-transform: inherit;
  cursor: help;
  text-decoration-line: underline; text-decoration-style: dotted;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
/* A 44px tap area without moving the line it sits in: a fixed 44px tall,
   centred on the word, and never narrower than 44px, even for a lone "?".
   Fixed, not "the text plus 12px each side" — that depended on the font
   (about 40px in iOS's own font at 13-14px). Where it overhangs a term on
   the next line or a field below, guide.js gives the tap to whatever the
   finger actually touched. */
.gd-term-btn::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(100% + 8px); min-width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.gd-term-btn:hover, .gd-term.is-open .gd-term-btn { text-decoration-style: solid; }
.gd-term-btn:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: 2px; }

.gd-term-pop {
  display: none; position: absolute; z-index: 1000;
  top: calc(100% + 8px); left: 0;
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 12px;
  background: var(--gd-solid); border: 1px solid var(--gd-line-soft);
  box-shadow: var(--gd-pop-shadow);
  color: var(--gd-hi); font-family: inherit; font-size: 13px; font-weight: 400;
  font-style: normal; line-height: 1.5; letter-spacing: normal;
  text-align: left; text-transform: none; white-space: normal; overflow-wrap: anywhere;
  pointer-events: auto;
}
.gd-term-pop-label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--gd-gold-text); }
.gd-term-pop-text { display: block; color: var(--gd-hi); }

/* No script: CSS alone. Hover is not limited to mice on purpose — on an
   iPhone a tapped button is never focused, but it does get :hover, so this
   is what shows the meaning there. */
html:not(.gd-js) .gd-term:focus-within .gd-term-pop,
html:not(.gd-js) .gd-term:hover .gd-term-pop { display: block; }

/* With the script: it decides, and places the box inside the screen. The
   pop-in starts only once the box is placed (.is-shown), so the measuring
   is never thrown off by the animation's own transform. */
.gd-js .gd-term-pop { position: fixed; top: 0; left: 0; }
.gd-term.is-open .gd-term-pop { display: block; }
.gd-term.is-shown .gd-term-pop { animation: gd-pop .16s ease-out both; }

/* ========================================================== smart pick === */

/*
 * "Dr. Marketo picked ₹500 a day because …" — with Change.
 *
 * The real control is the component's slot and never leaves the form. With
 * the script it folds away behind Change; without it, it simply sits under
 * the card and works as it always did.
 */
.gd-pick { margin: 0 0 16px; }
.gd-pick-card {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--gd-panel); border: 1px solid var(--gd-line);
  border-left: 3px solid var(--gd-gold-glow);
}
.gd-pick.is-changed .gd-pick-card { border-left-color: var(--gd-blue); }
.gd-pick-face {
  flex: none; width: 36px; height: 36px; max-width: none; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--gd-cape); background: #111;
}
/* The words share the row with his face and take what is left; under 160px
   left, Change drops to its own row instead of squeezing them — so a pick
   in a narrow sidebar lays itself out like a phone, with no media query. */
.gd-pick-body { flex: 1 1 0; min-width: 160px; }
.gd-pick-label {
  margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gd-low);
}
.gd-pick-line { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gd-mid); overflow-wrap: anywhere; }
.gd-pick-line strong { color: var(--gd-hi); font-weight: 800; }
.gd-pick-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--gd-low); }
.gd-pick-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: auto; }
.gd-pick-toggle[aria-expanded="true"] .gd-pick-chev { transform: rotate(180deg); }
.gd-pick-chev { transition: transform .15s; }
.gd-pick-control { margin-top: 10px; min-width: 0; }
.gd-pick-control > :first-child { margin-top: 0; }

@media (max-width: 640px) {
  .gd-pick-side { width: 100%; margin-left: 0; }
  .gd-pick-side .gd-pick-toggle { flex: 1 1 auto; }
}

/* ============================================================= advanced === */

.gd-adv {
  margin: 0 0 16px; border: 1px solid var(--gd-line); border-radius: 14px;
  background: var(--gd-panel); color: var(--gd-hi);
}
.gd-adv-summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 14px;
  list-style: none; cursor: pointer; border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.gd-adv-summary::-webkit-details-marker { display: none; }
.gd-adv-summary::marker { content: ''; }
.gd-adv-summary:hover { background: var(--gd-wash); }
.gd-adv-summary:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: 2px; }
.gd-adv-icon {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gd-wash); color: var(--gd-mid);
}
.gd-adv-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gd-adv-label { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--gd-hi); }
.gd-adv-hint { font-size: 12.5px; line-height: 1.4; color: var(--gd-low); overflow-wrap: anywhere; }
.gd-adv-chev { flex: none; color: var(--gd-low); transition: transform .15s; }
.gd-adv[open] > .gd-adv-summary .gd-adv-chev { transform: rotate(180deg); }
.gd-adv[open] > .gd-adv-summary { border-radius: 14px 14px 0 0; }
.gd-adv-body { padding: 14px; border-top: 1px solid var(--gd-line); min-width: 0; }

/* =============================================================== reason === */

/*
 * What happened, exactly why, and the one tap that fixes it.
 */
.gd-reason {
  --gd-tone-text: var(--gd-blue-text);
  --gd-tone-bg: rgba(76, 111, 255, .1);
  --gd-tone-line: rgba(76, 111, 255, .4);
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--gd-tone-bg); border: 1px solid var(--gd-tone-line);
  color: var(--gd-hi); text-align: left;
}
.gd-reason--warning { --gd-tone-text: var(--gd-gold-text); --gd-tone-bg: rgba(208, 129, 54, .12); --gd-tone-line: rgba(255, 194, 122, .5); }
.gd-reason--error   { --gd-tone-text: var(--gd-red-text);  --gd-tone-bg: rgba(255, 92, 122, .1);  --gd-tone-line: rgba(255, 92, 122, .45); }
.gd-reason--limit   { --gd-tone-text: var(--gd-purple-text); --gd-tone-bg: rgba(155, 107, 255, .11); --gd-tone-line: rgba(155, 107, 255, .45); }
/* W0-03 · "On our side": the launch screens' cyan — calm, not a red alarm.
   Nothing here is the customer's to fix; the card says what still works. */
.gd-reason--ours    { --gd-tone-text: #7fdcf2; --gd-tone-bg: rgba(56, 198, 232, .1); --gd-tone-line: rgba(56, 198, 232, .42); }
html:not(.dark) .gd-reason--ours { --gd-tone-text: #0e7490; --gd-tone-bg: rgba(56, 198, 232, .1); --gd-tone-line: rgba(14, 116, 144, .35); }

.gd-reason-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gd-wash); color: var(--gd-tone-text);
}
.gd-reason-face {
  flex: none; width: 36px; height: 36px; max-width: none; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--gd-cape); background: #111;
}
.gd-reason-body { flex: 1 1 auto; min-width: 0; }
.gd-reason-kicker {
  margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gd-tone-text);
}
.gd-reason-title {
  margin: 0 0 4px; font-family: var(--gd-display);
  font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--gd-hi);
}
.gd-reason-why { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gd-mid); overflow-wrap: anywhere; }
.gd-reason--untitled .gd-reason-why { color: var(--gd-hi); font-weight: 600; }
.gd-reason-detail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 8px 0 0; font-size: 12px; color: var(--gd-low);
}
.gd-reason-detail code {
  font-family: var(--gd-mono); font-size: 12px; padding: 2px 6px; border-radius: 6px;
  background: var(--gd-wash); color: var(--gd-mid); overflow-wrap: anywhere; white-space: normal;
}
.gd-reason-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; min-width: 44px; padding: 0 8px; margin: -12px 0;
  border: 0; background: none; cursor: pointer; color: var(--gd-low); font: inherit; font-size: 12px;
}
.gd-reason-copy:hover { color: var(--gd-hi); }
.gd-reason-copy .hidden { display: none; }
.gd-reason-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--gd-low); }
.gd-reason-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.gd-reason-actions form { display: inline-flex; margin: 0; }

@media (max-width: 640px) {
  .gd-reason { padding: 12px 14px; }
  .gd-reason-actions > .gd-btn, .gd-reason-actions form, .gd-reason-actions form .gd-btn { flex: 1 1 auto; }
}

/* ============================================================== stepper === */

/*
 * Desktop: every step, numbered, one under the other.
 * Phone (guide.js, ≤640px): one step at a time with Back / Next, dots and an
 * action bar pinned above the tab bar. No script: every step, like desktop.
 */
.gd-stepper { counter-reset: gd-step; margin: 0 0 16px; min-width: 0; }
.gd-step {
  counter-increment: gd-step; position: relative; min-width: 0;
  margin: 0 0 14px; padding: 18px; border-radius: 16px;
  background: var(--gd-panel); border: 1px solid var(--gd-line);
  /* Clear the sticky app header when a step is scrolled into view. */
  scroll-margin-top: 72px;
}
.gd-step-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.gd-step-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gd-line); color: var(--gd-low);
  font-size: 14px; font-weight: 800;
}
/* The number: the server's (data-n, Guide::prepareSteps — guide.js keeps it
   right too), and a CSS counter where there is none. The counter alone was
   wrong on a phone: steps not displayed are not counted, so every badge
   read "1". */
.gd-step-num::before { content: counter(gd-step); }
.gd-step-num[data-n]::before { content: attr(data-n); }
.gd-step.is-current .gd-step-num { border: 0; background: var(--gd-gold-glow); color: #1c1206; }
.gd-step.is-done .gd-step-num { border: 0; background: var(--gd-green); color: #04210f; }
.gd-step.is-done .gd-step-num::before { content: '\2713'; }
.gd-step-heading { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.gd-step-title {
  margin: 0; font-family: var(--gd-display);
  font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--gd-hi);
}
.gd-step-title:focus { outline: none; }
.gd-step-optional { margin-left: 6px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--gd-low); }
.gd-step-hint { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--gd-mid); }
.gd-step-body { min-width: 0; }

.gd-stepper-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.gd-stepper-bar:empty { display: none; }
.gd-stepper-nav, .gd-stepper-dots { display: none; }
.gd-stepper-hint {
  flex: 1 1 100%; order: -1; margin: 0;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--gd-red-text);
}
.gd-stepper-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- paging (phones) ---- */
.gd-stepper.is-stepping .gd-step { margin-bottom: 12px; animation: gd-step-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.gd-stepper.is-stepping.is-back .gd-step { animation-name: gd-step-back; }
.gd-stepper.is-stepping .gd-stepper-nav { display: inline-flex; }
.gd-stepper.is-stepping .gd-stepper-dots { display: flex; }
.gd-stepper.is-stepping:not(.is-last) .gd-stepper-submit { display: none; }

/* Pinned above the tab bar. Low weight on purpose: inside the app shell
   mobile-app.css's .m-sticky-actions (added by guide.js while paging) sets
   the offset that clears the tab bar; anywhere else it sits at the bottom. */
:where(.gd-stepper.is-stepping) .gd-stepper-bar {
  position: sticky; bottom: 0; z-index: 5;
  justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px; background: var(--gd-bar);
  border: 1px solid var(--gd-line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
html:has(.m-tabbar) :where(.gd-stepper.is-stepping) .gd-stepper-bar { padding-bottom: 10px; }
.gd-stepper.is-stepping .gd-stepper-bar.is-shaking { animation: gd-shake .32s ease; }

/* Back, the dots and Next share ONE row at any step count: the dots take
   what is left (from a zero basis, so they never push Next onto a row of
   its own) and shrink — a 9- or 12-step form still fits at 360px. */
.gd-stepper-dots { flex: 1 1 0; min-width: 0; overflow: hidden; justify-content: center; align-items: center; gap: 6px; }
.gd-stepper-dots.is-many { gap: 4px; }
.gd-stepper-dots span { flex: 0 1 8px; width: 8px; min-width: 3px; height: 8px; border-radius: 999px; background: var(--gd-track); transition: width .2s, flex-basis .2s, background .2s; }
.gd-stepper-dots span.is-done { background: var(--gd-green); }
.gd-stepper-dots span.is-current { flex-basis: 22px; width: 22px; min-width: 12px; background: var(--gd-gold-glow); }
.gd-stepper-back, .gd-stepper-next { flex: none; }
.gd-stepper-next { margin-left: auto; }
.gd-stepper-back { padding-left: 12px; padding-right: 14px; }
/* The last step: Back and the real submit; the dots step aside for it. */
.gd-stepper.is-stepping.is-last .gd-stepper-dots { display: none; }

@media (max-width: 640px) {
  .gd-step { padding: 16px 14px; }
  .gd-step-title { font-size: 16px; }
  .gd-stepper-submit, .gd-stepper-submit > * { flex: 1 1 auto; }
  /* The last step: Back and the real submit on one row, the way the launch
     builders' phone nav does it (google-ads-launch.css, .gl-paged) — the
     submit takes what is left and a long label wraps inside its button
     instead of pushing it onto a row of its own. */
  .gd-stepper.is-stepping .gd-stepper-bar .gd-btn { padding-left: 14px; padding-right: 14px; }
  .gd-stepper.is-stepping.is-last .gd-stepper-submit { flex: 1 1 0; min-width: 0; }
  .gd-stepper.is-stepping.is-last .gd-stepper-submit > * { flex: 1 1 auto; min-width: 0; white-space: normal; }
}

/* ============================================================= progress === */

/*
 * The quest dock's look (partials/launch-quest-dock): gold edge, the figure,
 * "2 of 4 done", one bar per step and what comes next.
 */
.gd-progress {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px; padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(208, 129, 54, .18), var(--gd-solid) 62%);
  border: 1px solid var(--gd-gold-glow);
  color: var(--gd-hi);
}
html:not(.dark) .gd-progress { background: linear-gradient(90deg, rgba(255, 194, 122, .28), #ffffff 62%); border-color: #e9a55a; }
.gd-progress-figure {
  flex: none; width: 44px; height: 56px; max-width: none;
  object-fit: contain; object-position: bottom;
}
.gd-progress-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gd-progress-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gd-progress-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-gold-text); }
.gd-progress-count {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--gd-wash); color: var(--gd-hi);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gd-progress-count.gd-bump { animation: gd-medal .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.gd-progress-current { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--gd-hi); overflow-wrap: anywhere; }
.gd-progress-current:empty { display: none; }

.gd-progress-meter { display: flex; gap: 6px; }
.gd-progress-meter > span { flex: 1 1 0; min-width: 0; max-width: 90px; height: 6px; border-radius: 999px; background: var(--gd-track); transition: background .3s; }
.gd-progress-meter > span.is-done { background: var(--gd-green); }
.gd-progress-meter > span.is-next { background: rgba(255, 194, 122, .55); }
/* Many steps: one bar that fills, like the quest's XP bar. */
.gd-progress-meter.is-bar { display: block; height: 10px; border-radius: 999px; background: var(--gd-track); overflow: hidden; }
.gd-progress-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gd-gold), var(--gd-gold-glow));
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
.gd-progress.is-complete,
html:not(.dark) .gd-progress.is-complete { border-color: var(--gd-green); }
.gd-progress.is-complete .gd-progress-eyebrow { color: var(--gd-green-text); }
.gd-progress.is-complete .gd-progress-fill { background: linear-gradient(90deg, #1fbf75, var(--gd-green)); }

/* The celebration: the quest's confetti, in the card that just moved. */
.gd-celebrate-host { position: relative; }
.gd-confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.gd-confetti span {
  position: absolute; top: -14px; width: 6px; height: 12px; border-radius: 2px; opacity: .95;
  animation: gd-fall linear forwards;
}

@media (max-width: 640px) {
  .gd-progress { padding: 12px 14px; gap: 10px; }
  .gd-progress-figure { width: 36px; height: 46px; }
  .gd-progress-current { font-size: 14px; }
}

/* ============================================================ keyframes === */

@keyframes gd-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gd-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes gd-pose-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gd-glow { 0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }
@keyframes gd-step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes gd-step-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes gd-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes gd-medal { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gd-fall { to { transform: translateY(260px) rotate(540deg); opacity: 0; } }

/* ======================================================= reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .gd-coach, .gd-coach *, .gd-coach *::before,
  .gd-term-pop,
  .gd-pick *, .gd-adv *,
  .gd-stepper *, .gd-progress, .gd-progress *,
  .gd-btn {
    animation: none !important;
    transition: none !important;
  }
  .gd-btn:hover, .gd-btn:active { transform: none !important; }
  .gd-confetti { display: none !important; }
}

/* ======================================================================
 * W0-A core (8 Oct): the card that stays on screen (x-guide.flash), the
 * confirm sheet (partials/confirm-sheet), tap-to-explain for switched-off
 * controls ([data-guide-why]) and the phone kit for the existing JS wizards
 * (.gd-stage-compact, .gd-sticky-bar, .gd-preview-chip, GuideUI.sheet).
 * ==================================================================== */

/* `hidden` must win here too (see the top of this sheet). */
.gd-flash[hidden], .gd-flash-close[hidden], .gd-confirm-text[hidden], .gd-why-fix[hidden],
.gd-stage-why[hidden], [data-guide-sheet][hidden] {
  display: none !important;
}

/* The red button: the confirm sheet's "Yes", named for what it does. */
.gd-btn--danger {
  background: #e11d48; color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255, 92, 122, .55), 0 8px 22px rgba(225, 29, 72, .28);
}

/* ================================================================ flash === */

/*
 * A refusal, limit or result flashed with Guide::flash(): a reason card at
 * the top of the page (layouts.app), above the page's own header, until it
 * is closed. Lined up with the page gutters: 12px on a phone, 16px, 24px on
 * a desktop.
 */
.gd-flash {
  position: relative; max-width: 80rem; margin: 0 auto 16px; padding: 0 16px;
  animation: gd-pop .32s cubic-bezier(.2, .8, .2, 1) both;
}
.gd-flash.is-leaving { animation: gd-out .18s ease-in forwards; }
.gd-flash > .gd-reason { margin: 0; padding-right: 56px; box-shadow: var(--gd-shadow); }
.gd-flash--success > .gd-reason {
  --gd-tone-text: var(--gd-green-text); --gd-tone-bg: rgba(62, 232, 150, .1); --gd-tone-line: rgba(62, 232, 150, .45);
}
.gd-flash-close {
  position: absolute; top: 0; right: 16px; z-index: 2;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--gd-low); -webkit-tap-highlight-color: transparent;
}
.gd-flash-close:hover { color: var(--gd-hi); background: var(--gd-wash); }
.gd-flash-close:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: -4px; }

@media (min-width: 1024px) {
  .gd-flash { padding: 0 24px; }
  .gd-flash-close { right: 24px; }
}
@media (max-width: 640px) {
  .gd-flash { padding: 0 12px; margin-bottom: 12px; }
  .gd-flash-close { right: 12px; }
  .gd-flash > .gd-reason { padding-right: 52px; }
}

/* ======================================================== confirm sheet === */

/*
 * What every data-confirm opens (pure.js). A small dialog on a desktop; on a
 * phone mobile-app.css makes it a bottom sheet (every
 * [data-modal-backdrop] > div is one), with its grab handle and slide-up.
 */
.gd-confirm-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(4, 6, 15, .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.gd-confirm {
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  border-radius: 18px; background: var(--gd-solid); border: 1px solid var(--gd-line-soft);
  box-shadow: var(--gd-pop-shadow); color: var(--gd-hi); text-align: left;
  animation: gd-pop .22s cubic-bezier(.2, .8, .2, 1) both;
}
.gd-confirm-inner { padding: 18px 20px 20px; }
.gd-confirm-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.gd-confirm-face {
  flex: none; width: 40px; height: 40px; max-width: none; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--gd-cape); background: #111;
}
.gd-confirm-who {
  margin: 0; font-family: var(--gd-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--gd-blue-text);
}
.gd-confirm-title {
  margin: 0 0 6px; font-family: var(--gd-display); font-size: 18px; font-weight: 800;
  line-height: 1.3; color: var(--gd-hi); overflow-wrap: anywhere;
}
.gd-confirm-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gd-mid); overflow-wrap: anywhere; white-space: pre-line; }
.gd-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.gd-confirm-actions .gd-btn { flex: 0 1 auto; white-space: normal; }

@media (max-width: 640px) {
  .gd-confirm-inner { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .gd-confirm-title { font-size: 17px; }
  /* Side by side, the same size; a long label wraps inside its button. */
  .gd-confirm-actions .gd-btn { flex: 1 1 0; min-width: 0; }
}

/* ================================================================== why === */

/*
 * A control switched off on purpose, that says why on a tap (W0-10):
 * aria-disabled, focusable, greyed — and a help cursor, not a dead one.
 */
[data-guide-why][aria-disabled="true"] { cursor: help; opacity: .55; }
[data-guide-why][aria-disabled="true"]:hover,
[data-guide-why][aria-disabled="true"]:focus-visible { opacity: .75; }
[data-guide-why][aria-disabled="true"]:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: 2px; }

/* The bubble: the term explainer's look (.gd-term-pop), one for the page. */
.gd-why-pop { z-index: 1200; }
.gd-why-pop.is-open { display: block; }
.gd-why-pop.is-shown { animation: gd-pop .16s ease-out both; }
.gd-why-fix {
  display: inline-flex; align-items: center; min-height: 44px; margin: 2px 0 -10px;
  font-size: 13px; font-weight: 700; color: var(--gd-blue-text) !important;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ===================================================== phone kit (W0-17) === */

/*
 * .gd-stage-compact (GuideUI.compactStage): an existing wizard's stage — his
 * big figure, the speech, a long paragraph — folds on a phone into his face
 * at 48px and one line of what he is saying, with the rest behind "Why this
 * step? ▾". Desktop shows the stage exactly as it was.
 */
.gd-stage-row, .gd-stage-why { display: none; }

@media (max-width: 640px) {
  .gd-stage-compact [data-gd-stage-hide] { display: none !important; }
  .gd-stage-compact:not(.is-why-open) [data-gd-stage-more] { display: none !important; }

  .gd-stage-compact .gd-stage-row { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; min-width: 0; }
  .gd-stage-face {
    flex: none; width: 48px; height: 48px; max-width: none; border-radius: 50%;
    object-fit: cover; object-position: top center;
    border: 2px solid var(--gd-cape); background: #111;
  }
  /* The bubble's top and bottom room is a transparent border, not padding:
     overflow clips at the padding box, so a third line can't peek into it
     (at 390px it did). The 1px outline is a ring for the same reason. */
  .gd-stage-line {
    flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 12px; border-radius: 14px;
    border: 8px solid transparent; border-left-width: 0; border-right-width: 0;
    background: var(--gd-bubble); box-shadow: 0 0 0 1px var(--gd-line); color: var(--gd-hi);
    font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .gd-stage-compact.is-why-open .gd-stage-line { display: block; -webkit-line-clamp: unset; }

  .gd-stage-compact .gd-stage-why {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 6px; padding: 0 4px;
    border: 0; background: none; cursor: pointer; color: var(--gd-blue-text);
    font: inherit; font-size: 13px; font-weight: 700; -webkit-tap-highlight-color: transparent;
  }
  .gd-stage-why .gd-stage-chev { transition: transform .15s; }
  .gd-stage-compact.is-why-open .gd-stage-why .gd-stage-chev { transform: rotate(180deg); }
}

/*
 * .gd-sticky-bar: a wizard's own Next bar, pinned above the tab bar on a
 * phone with the shell's offsets (guide.js also gives it .m-sticky-actions,
 * so the assistant's bubble moves up out of its way). Inside .app-scroll a
 * sticky inset counts from the scroller's tab-bar padding, so -10px sits
 * the bar just above the 58px tab bar.
 */
@media (max-width: 767px) {
  .gd-sticky-bar {
    position: sticky; bottom: 0; z-index: 5;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px; background: var(--gd-bar); border: 1px solid var(--gd-line);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
    -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  }
  html:has(.m-tabbar) .gd-sticky-bar { bottom: -10px; padding-bottom: 10px; }
  .gd-sticky-bar button, .gd-sticky-bar a, .gd-sticky-bar .gd-btn { min-height: 44px; }
}

/* "Preview": opens a wizard's live preview as a bottom sheet (phones). */
.gd-preview-chip { display: none; }
@media (max-width: 767px) {
  .gd-preview-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--gd-line-soft); background: var(--gd-bubble); color: var(--gd-hi);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--gd-shadow);
    -webkit-tap-highlight-color: transparent;
  }
  .gd-preview-chip:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: 2px; }
}

/*
 * GuideUI.sheet(el): any part of the page shown in a sheet — the live
 * preview, a long list. A dialog on a desktop; a bottom sheet on a phone
 * (mobile-app.css, as for every [data-modal-backdrop] > div).
 */
.gd-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(4, 6, 15, .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.gd-sheet {
  width: 100%; max-width: 560px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: var(--gd-solid); border: 1px solid var(--gd-line-soft);
  box-shadow: var(--gd-pop-shadow); color: var(--gd-hi);
  animation: gd-pop .22s cubic-bezier(.2, .8, .2, 1) both;
}
.gd-sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-bottom: 1px solid var(--gd-line); }
.gd-sheet-title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--gd-display); font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--gd-hi); }
.gd-sheet-close {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: none; cursor: pointer; color: var(--gd-low);
}
.gd-sheet-close:hover { color: var(--gd-hi); background: var(--gd-wash); }
.gd-sheet-close:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: -4px; }
.gd-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

@media (max-width: 767px) {
  .gd-sheet-body { padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .gd-flash, .gd-flash.is-leaving, .gd-confirm, .gd-sheet, .gd-why-pop.is-shown,
  .gd-stage-why .gd-stage-chev {
    animation: none !important;
    transition: none !important;
  }
}

/* ======================================================================
 * W0-C (8 Oct): the suggestion ribbon (x-guide.suggest), the setup
 * checklist (x-guide.checklist + x-guide.task) and the big celebration for
 * a first (x-guide.celebrate, GuideUI.celebrate({big: true})).
 * ==================================================================== */

/* `hidden` must win here too (see the top of this sheet). */
.gd-checklist[hidden], .gd-checklist-dismiss[hidden], .gd-celebrate[hidden], .gd-celebrate-close[hidden] {
  display: none !important;
}

/* ============================================================== suggest === */

/*
 * "Dr. Marketo suggests" on a choice that stays unticked: a gold ribbon with
 * his face, and the reason beside it. It wraps at any width; nothing here is
 * wider than its card.
 */
.gd-suggest { position: relative; min-width: 0; }
.gd-suggest--card { min-height: 44px; }
.gd-suggest-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  min-width: 0; margin: 0 0 8px;
}
.gd-suggest-ribbon {
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%;
  padding: 2px 10px 2px 2px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 194, 122, .26), rgba(255, 194, 122, .08));
  border: 1px solid rgba(255, 194, 122, .6);
  color: var(--gd-gold-text); font-size: 12px; font-weight: 800; line-height: 1.3;
}
.gd-suggest-face {
  flex: none; width: 22px; height: 22px; max-width: none; border-radius: 50%;
  object-fit: cover; border: 1.5px solid var(--gd-cape); background: #111;
}
.gd-suggest-label { min-width: 0; overflow-wrap: anywhere; }
.gd-suggest-why { flex: 1 1 12rem; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--gd-mid); overflow-wrap: anywhere; }
.gd-suggest-card { min-width: 0; }

/* ============================================================ checklist === */

/*
 * "Get set up": the quest-dock progress card on top, the tasks under it in
 * one panel — a tick for each one done, one gold 44px button for each one
 * still to do. Stacked on phones, the button under the words.
 */
.gd-checklist { position: relative; margin: 0 0 16px; min-width: 0; }
.gd-checklist > .gd-progress { margin-bottom: 0; border-radius: 16px 16px 0 0; }
.gd-checklist.is-dismissible > .gd-progress { padding-right: 52px; }
.gd-checklist-dismiss {
  position: absolute; top: 4px; right: 4px; z-index: 4;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: none; cursor: pointer;
  color: var(--gd-low); -webkit-tap-highlight-color: transparent;
}
.gd-checklist-dismiss:hover { color: var(--gd-hi); background: var(--gd-wash); }
.gd-checklist-dismiss:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: -4px; }
.gd-checklist.is-leaving { animation: gd-out .18s ease-in forwards; }

.gd-tasks {
  list-style: none; margin: 0; padding: 2px 16px;
  border: 1px solid var(--gd-gold-glow); border-top: 0; border-radius: 0 0 16px 16px;
  background: var(--gd-panel);
}
html:not(.dark) .gd-tasks { border-color: #e9a55a; }
.gd-checklist.is-complete .gd-tasks { border-color: var(--gd-green); }

.gd-task { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--gd-line); }
.gd-task:first-child { border-top: 0; }
.gd-task-check {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gd-line); color: var(--gd-low); font-size: 14px; font-weight: 800;
}
.gd-task.is-done .gd-task-check { border: 0; background: var(--gd-green); color: #04210f; }
.gd-task-body { flex: 1 1 auto; min-width: 0; }
.gd-task-title { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--gd-hi); overflow-wrap: anywhere; }
.gd-task.is-done .gd-task-title { color: var(--gd-mid); }
.gd-task-why { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--gd-mid); overflow-wrap: anywhere; }
.gd-task-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--gd-low); }
.gd-task-side { flex: none; }
.gd-task-side .gd-btn { white-space: nowrap; }

@media (max-width: 640px) {
  .gd-tasks { padding: 2px 12px; }
  .gd-task { flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
  .gd-task-body { flex: 1 1 calc(100% - 40px); }
  .gd-task-side { flex: 1 1 100%; padding-left: 40px; }
  .gd-task-side .gd-btn { width: 100%; white-space: normal; }
}

/* ============================================================ celebrate === */

/*
 * A first: Dr. Marketo cheering at the top of the page, and the Launch
 * Quest's confetti over the whole screen — on a fixed layer that catches no
 * taps, stops above the phone's tab bar and is gone after 3.6 s.
 */
.gd-celebrate { position: relative; max-width: 1180px; margin: 0 auto 16px; padding: 0 16px; min-width: 0; }
/* layouts/app gives every direct child of .app-scroll min-height:100%. */
.app-scroll > .gd-celebrate { min-height: 0; }
.gd-celebrate > .gd-coach { margin-bottom: 0; }
.gd-celebrate .gd-coach-who { color: var(--gd-green-text); }
.gd-celebrate .gd-coach-bubble { border-color: rgba(62, 232, 150, .45); }
.gd-celebrate.is-leaving { animation: gd-out .18s ease-in forwards; }

.gd-confetti-layer { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
.gd-confetti-layer span {
  position: absolute; top: -20px; width: 7px; height: 13px; border-radius: 2px; opacity: .95;
  animation: gd-rain linear forwards;
}
@keyframes gd-rain { to { transform: translateY(110vh) rotate(540deg); opacity: 0; } }

@media (max-width: 767px) {
  .gd-celebrate { padding: 0 12px; }
  html:has(.m-tabbar) .gd-confetti-layer { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .gd-confetti-layer { display: none !important; }
  .gd-suggest *, .gd-checklist, .gd-checklist *, .gd-celebrate, .gd-celebrate * {
    animation: none !important;
    transition: none !important;
  }
}

/* ======================================================================
 * W0-B helpers (8 Oct): ask the owner (x-guide.ask-owner), quota meters
 * (x-guide.quota), status chips (x-guide.status), number tiles
 * (x-guide.stat + .gd-stats), Dr. Marketo's read in print
 * (x-guide.insight plain) and the friendly error pages (errors/*).
 * "On our side" (.gd-reason--ours) sits with the reason card above.
 * ==================================================================== */

/* `hidden` must win here too (see the top of this sheet). */
.gd-ask-note[hidden] { display: none !important; }

/* ============================================================ ask owner === */

.gd-ask { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; min-width: 0; }
.gd-ask-form { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; max-width: 100%; }
.gd-ask-form .gd-btn { white-space: normal; }
.gd-ask-note { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--gd-red-text); overflow-wrap: anywhere; }
.gd-ask-sent {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(62, 232, 150, .12); border: 1px solid rgba(62, 232, 150, .45);
  color: var(--gd-green-text); font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .gd-ask, .gd-ask-form, .gd-ask-form .gd-btn, .gd-ask-sent { width: 100%; }
}

/* ================================================================ quota === */

/*
 * "8 of 10 posts left for @acme this month · resets 1 Nov" — one wrapping
 * line and a 6px bar. Gold from 80% used; at 100% the component shows the
 * limit card (x-guide.reason) instead.
 */
.gd-quota { margin: 0 0 12px; min-width: 0; color: var(--gd-mid); }
.gd-quota-line { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--gd-mid); overflow-wrap: anywhere; }
.gd-quota-bar { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--gd-track); overflow: hidden; }
.gd-quota-fill { display: block; height: 100%; max-width: 100%; border-radius: 999px; background: var(--gd-green); transition: width .4s ease; }
.gd-quota.is-low .gd-quota-fill { background: var(--gd-gold-glow); }
.gd-quota.is-low .gd-quota-line { color: var(--gd-gold-text); }
.gd-quota-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--gd-low); }
.gd-quota--compact { margin-bottom: 8px; }
.gd-quota--unlimited .gd-quota-line { color: var(--gd-green-text); }

/* =============================================================== status === */

/*
 * A chip: words and an icon beside them (✓ ! ✕ •), never colour alone. A
 * failed state with a reason is a button that opens the term bubble.
 */
.gd-status {
  --gd-st-text: var(--gd-mid); --gd-st-bg: var(--gd-wash); --gd-st-line: var(--gd-line);
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 10px; border-radius: 999px; vertical-align: middle;
  background: var(--gd-st-bg); border: 1px solid var(--gd-st-line); color: var(--gd-st-text);
  font-size: 12px; font-weight: 700; line-height: 1.45; text-align: left;
  white-space: normal; overflow-wrap: anywhere;
}
.gd-status--good { --gd-st-text: var(--gd-green-text); --gd-st-bg: rgba(62, 232, 150, .12); --gd-st-line: rgba(62, 232, 150, .4); }
.gd-status--wait { --gd-st-text: var(--gd-blue-text); --gd-st-bg: rgba(76, 111, 255, .12); --gd-st-line: rgba(76, 111, 255, .38); }
.gd-status--warn { --gd-st-text: var(--gd-gold-text); --gd-st-bg: rgba(208, 129, 54, .13); --gd-st-line: rgba(255, 194, 122, .45); }
.gd-status--bad  { --gd-st-text: var(--gd-red-text); --gd-st-bg: rgba(255, 92, 122, .12); --gd-st-line: rgba(255, 92, 122, .42); }
.gd-status-icon { flex: none; font-size: 11px; line-height: 1; }
.gd-status-text { min-width: 0; }
/* As a term: the chip is the wrapper, the button fills it. */
.gd-term.gd-status { display: inline-flex; position: relative; }
.gd-status-btn {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; line-height: inherit; text-align: inherit;
  text-decoration-line: underline; text-decoration-style: dotted;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
/* 44px to tap, without making the chip taller. */
.gd-status-btn::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(100% + 16px); min-width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.gd-status-btn:hover, .gd-status.is-open .gd-status-btn { text-decoration-style: solid; }
.gd-status-btn:focus-visible { outline: 2px solid var(--gd-gold-glow); outline-offset: 4px; border-radius: 999px; }

/* ================================================================= stat === */

/*
 * One tile per number: the plain name (with its explainer), the value or "—"
 * and why, the change chip in words, and "vs … before". Two to a row on a
 * phone, four on a desktop.
 */
.gd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; min-width: 0; }
@media (min-width: 900px) { .gd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

.gd-stat {
  min-width: 0; padding: 14px 16px; border-radius: 14px;
  background: var(--gd-panel); border: 1px solid var(--gd-line); color: var(--gd-hi);
}
.gd-stat-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--gd-mid); overflow-wrap: anywhere; }
.gd-stat-value {
  display: block; margin: 0; font-family: var(--gd-display); font-size: 26px; font-weight: 800;
  line-height: 1.15; color: var(--gd-hi); font-variant-numeric: tabular-nums;
  text-decoration: none; overflow-wrap: anywhere;
}
a.gd-stat-value:hover { color: var(--gd-gold-text); }
.gd-stat.is-empty .gd-stat-value { color: var(--gd-low); }
.gd-stat-why { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--gd-low); overflow-wrap: anywhere; }
.gd-stat-change {
  display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5; background: var(--gd-wash); color: var(--gd-mid);
}
.gd-stat-change--up { color: var(--gd-green-text); background: rgba(62, 232, 150, .12); }
.gd-stat-change--down { color: var(--gd-red-text); background: rgba(255, 92, 122, .1); }
.gd-stat-change--new { color: var(--gd-blue-text); background: rgba(76, 111, 255, .12); }
.gd-stat-arrow { font-size: 10px; line-height: 1; }
.gd-stat-vs { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--gd-low); overflow-wrap: anywhere; }
.gd-stat-more {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 2px 0 -10px;
  font-size: 12.5px; font-weight: 700; color: var(--gd-blue-text); text-decoration: none;
}
.gd-stat-more:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .gd-stat { padding: 12px; }
  .gd-stat-value { font-size: 20px; }
}

/* ======================================================= insight, plain === */

/* A printed or white-labelled report: the read without the mascot. */
.gd-insight-plain { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gd-line); border-left: 4px solid var(--gd-blue); background: var(--gd-panel); }
.gd-insight-plain-label { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gd-low); }
.gd-insight-plain-line { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gd-hi); overflow-wrap: anywhere; }

/* =========================================================== error pages === */

/* errors/* and the maintenance card: the coach, centred, never wider than the screen. */
.gd-errorpage { width: 100%; }
.gd-errorpage .gd-coach { margin-bottom: 0; }
.gd-errorpage .gd-coach-actions > .gd-ask { flex: 0 1 auto; }

@media (max-width: 640px) {
  .gd-errorpage .gd-coach-actions > .gd-btn, .gd-errorpage .gd-coach-actions > .gd-ask { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-quota-fill, .gd-status *, .gd-stat * {
    animation: none !important;
    transition: none !important;
  }
}