/* ============================================================================
   setup-2026.css — the shared 2026 SETUP-PAGE kit (".sg-" = Sage)
   ----------------------------------------------------------------------------
   One source of truth for the 2026 landing-style setup/preview screens, so the
   converted apps can't drift apart. Spec + component list live in
   docs/app-build-standards.md → "2026 landing-style APP PAGES".

   RULES
   • Loaded ONLY by app pages converted to the 2026 style. Every class is
     namespaced .sg- so untouched apps are unaffected.
   • Apps keep their genuine personality bits (blessed CTA colours, game
     screens) in their own file — this kit is the setup/preview chrome only.
   • Any change here: bump ?v= on EVERY page that loads it, then redeploy.
   • Pages must load Space Grotesk (500,700) + Space Mono (700) from Google
     Fonts themselves.

   TOKENS  ink #191510 · paper #FBF6EC · green(selected) #6FD060 ·
           yellow(CTA) #FFCE45 · muted text #5f584c · mono-label #8a7f6d
   ========================================================================== */

/* ── The column (NO frame — Rob tried one 2026-07-12 and preferred without) ──
   Cards align flush with the title (the Word Search width Rob picked);
   step chips HANG in the left margin outside the column, they never indent it. */
.sg-setup{width:100%;max-width:908px;margin:0 auto;padding:clamp(3rem,8vw,7rem) clamp(0.9rem,4vw,1.5rem) 3rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:18px;font-family:'Space Grotesk',sans-serif;color:#191510;}
.sg-setup *,.sg-setup *::before,.sg-setup *::after{box-sizing:border-box;}

/* ── Page header ── */
.sg-eyebrow{font-family:'Space Mono',monospace;font-weight:700;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.16em;color:#8a7f6d;margin:0 0 0.5rem;}
.sg-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.3rem,7vw,3.9rem);letter-spacing:-0.03em;line-height:1.02;margin:0;color:#191510;}
.sg-desc{font-weight:500;font-size:0.98rem;color:#5f584c;line-height:1.55;margin:0.6rem 0 0;}
.sg-help{display:inline-flex;align-items:center;gap:0.5rem;background:none;border:none;cursor:pointer;padding:0;margin-top:0.9rem;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.9rem;color:#191510;}
.sg-help .q{display:inline-flex;align-items:center;justify-content:center;width:1.45rem;height:1.45rem;border-radius:50%;background:#fff;border:2.5px solid #191510;box-shadow:2px 2px 0 #191510;font-weight:700;font-size:0.95rem;}

/* ── Numbered steps (chip fills green when the step is done) ──
   The chip is absolutely positioned in the left margin so the card stays
   flush with the title. Hidden when the viewport is too narrow to fit it. */
.sg-step{position:relative;display:block;}
.sg-step>.sg-card{width:100%;}
.sg-stepn{position:absolute;left:-46px;top:16px;width:32px;height:32px;border:2.5px solid #191510;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:0.85rem;color:#191510;transition:background .2s;}
.sg-stepn.done{background:#6FD060;}
@media(max-width:1010px){.sg-stepn{display:none;}}
/* Step-reveal: a NEWLY unlocked step fades up into place (same move as the landing's
   card reveal). Apply .sg-reveal only to steps revealed by the user's last action —
   never to already-visible rows, or every re-render replays the animation. */
.sg-reveal{animation:sgReveal .38s cubic-bezier(.22,.9,.35,1) both;}
@keyframes sgReveal{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
/* Arriving on a PREVIEW screen: its blocks cascade in with the same move, quick.
   Put .sg-reveal-seq on the .sg-setup wrapper ONLY on first arrival — never on the
   in-place re-renders that editing triggers, or every edit replays the entrance. */
.sg-reveal-seq>*{animation:sgReveal .3s cubic-bezier(.22,.9,.35,1) both;}
.sg-reveal-seq>*:nth-child(2){animation-delay:.06s;}
.sg-reveal-seq>*:nth-child(3){animation-delay:.12s;}
.sg-reveal-seq>*:nth-child(4){animation-delay:.18s;}
.sg-reveal-seq>*:nth-child(n+5){animation-delay:.24s;}
@media (prefers-reduced-motion:reduce){.sg-reveal{animation:none;}.sg-reveal-seq>*{animation:none;}}

/* ── Cards + labels (sized to Word Search — the scale Rob picked) ── */
.sg-card{background:#fff;border:3px solid #191510;border-radius:16px;box-shadow:5px 5px 0 #191510;padding:20px 24px;width:100%;}
.sg-lbl{font-family:'Space Mono',monospace;font-weight:700;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.16em;color:#8a7f6d;margin-bottom:10px;}
.sg-row{display:flex;gap:8px;flex-wrap:wrap;}
.sg-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── Controls (44px+ tap targets; inputs never under 1rem — iOS zoom trap) ── */
.sg-pill{min-height:44px;padding:11px 18px;border:2.5px solid #191510;border-radius:12px;background:#fff;color:#191510;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-0.01em;cursor:pointer;box-shadow:2px 2px 0 #191510;}
.sg-pill.on{background:#6FD060;color:#191510;}
.sg-tab{flex:1 1 30%;min-width:140px;min-height:44px;padding:14px 12px;border:2.5px solid #191510;border-radius:12px;background:#fff;color:#191510;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;cursor:pointer;box-shadow:3px 3px 0 #191510;text-align:center;line-height:1.2;}
.sg-tab.on{background:#6FD060;color:#191510;}
.sg-input{width:100%;padding:12px 14px;border:2.5px solid #191510;border-radius:12px;background:#fff;color:#191510;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:1rem;box-shadow:3px 3px 0 #191510;outline:none;}
textarea.sg-input{resize:vertical;min-height:120px;line-height:1.5;}
.sg-go{width:100%;min-height:52px;padding:16px;border:3px solid #191510;border-radius:16px;background:#FFCE45;color:#191510;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-0.01em;cursor:pointer;box-shadow:5px 5px 0 #191510;}
.sg-hint{font-weight:500;font-size:0.8rem;color:#8a7f6d;margin-top:6px;}
.sg-status{font-weight:500;font-size:0.85rem;color:#8a7f6d;min-height:1.2rem;}

/* ── How-to modal ── */
.sg-modal{position:fixed;inset:0;background:rgba(25,21,16,0.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1.2rem;}
.sg-modal-card{position:relative;background:#fff;border:3px solid #191510;border-radius:16px;box-shadow:8px 8px 0 #191510;max-width:460px;width:100%;padding:1.8rem;font-family:'Space Grotesk',sans-serif;color:#191510;}
.sg-modal-card h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:-0.02em;margin:0 0 0.8rem;}
.sg-modal-card p{font-weight:500;font-size:0.95rem;color:#3d382f;line-height:1.55;margin:0 0 0.7rem;}
.sg-modal-x{position:absolute;top:0.7rem;right:0.9rem;width:32px;height:32px;border-radius:50%;background:#fff;border:2.5px solid #191510;box-shadow:2px 2px 0 #191510;cursor:pointer;font-weight:700;color:#191510;font-size:1.1rem;line-height:1;padding:0;}
.sg-gotit{margin-top:0.6rem;width:100%;padding:0.85rem;border:3px solid #191510;border-radius:12px;background:#FFCE45;color:#191510;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;cursor:pointer;box-shadow:4px 4px 0 #191510;}

/* ── Mobile (design check at 390px; nothing may break at 360px) ── */
@media(max-width:560px){
  .sg-two{grid-template-columns:1fr;}
}