/* ───────────────────────────────────────────────────────────────────────────
 * kit.css — the shared "After-hours Studio" onboarding design system.
 *
 * ONE premium dark identity across the whole post-landing funnel:
 *   /signup  →  /welcome  →  /onboarding (wizard)  →  /onboard/swipe
 *
 * Served at /onboarding/kit.css (the existing /onboarding/<asset>.css route).
 * Link it FIRST, then each page adds only its page-specific rules.
 *
 * Canon untouched: the retro Netscape landing page is its own world. This is
 * the focused studio you step into after the arcade — warm near-black, the
 * canon magenta as the hero accent, an acid-lime "machine is learning" accent
 * reserved for the taste meter (the moat, made visible).
 *
 * No build step, no framework. Tokens are the single source of truth; the
 * wizard's onboarding.css and swipe.html consume the same var() API.
 * ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  color-scheme: dark;

  /* ── Surfaces (warm near-black, layered) ── */
  --ob-bg:        #0a0a0c;
  --ob-bg-2:      #08080a;
  --ob-surface:   #141319;
  --ob-surface-2: #1b1a22;
  --ob-surface-3: #232128;
  /* hairlines lifted from ~1.1:1 toward the 3:1 UI-component minimum so inputs/
     cards/toggles/meter-tracks stop reading as borderless */
  --ob-hairline:  rgba(255,255,255,0.20);
  --ob-hairline-2:rgba(255,255,255,0.12);

  /* ── Ink ── */
  --ob-fg:        #f5f4f7;
  --ob-muted:     #b3b2bd;
  /* faint tier lifted from #807f8b (~4.0-4.7:1, fails AA on lighter surfaces) to
     ~5.4:1+ for small readable copy: placeholders, hints, meta, disclosures */
  --ob-faint:     #9b9aa6;

  /* ── Accents ── */
  --ob-pink:      #ff2e93;   /* the hero — canon magenta */
  --ob-pink-2:    #ff66b0;   /* lighter, for glows/hovers */
  --ob-pink-deep: #c8156e;
  --ob-acid:      #ccff4a;   /* the moat: taste / learning / progress */
  --ob-acid-deep: #9fd400;
  --ob-ok:        #5fe39a;
  --ob-warn:      #ffce6a;
  --ob-danger:    #ff7a7a;

  --ob-ring:      rgba(255,46,147,0.32);
  --ob-glow-pink: rgba(255,46,147,0.16);
  --ob-glow-acid: rgba(204,255,74,0.12);

  /* ── Type ── */
  --ob-display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --ob-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ob-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Shape ── */
  --ob-r-sm: 9px;
  --ob-r:    14px;
  --ob-r-lg: 20px;
  --ob-r-pill: 999px;

  /* ── Elevation ── */
  --ob-shadow:    0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -20px rgba(0,0,0,0.8);
  --ob-shadow-lg: 0 1px 0 rgba(255,255,255,0.05) inset, 0 40px 90px -30px rgba(0,0,0,0.9);

  --ob-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ob-bg);
  color: var(--ob-fg);
}

body {
  font: 400 15.5px/1.55 var(--ob-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* ── Atmosphere ──────────────────────────────────────────────────────────────
 * Two faint glows (pink top, acid bottom-corner) + a fine grain overlay + a
 * whisper-quiet retro scanline grid. All fixed, all pointer-events:none.       */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--ob-glow-pink), transparent 55%),
    radial-gradient(90% 70% at 110% 115%, var(--ob-glow-acid), transparent 50%),
    linear-gradient(180deg, var(--ob-bg) 0%, var(--ob-bg-2) 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* A shared, optional scanline veil for hero surfaces (opt-in via .ob-scan). */
.ob-scan { position: relative; }
.ob-scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  opacity: 0.6;
}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.ob-center {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 32px 18px;
  width: 100%;
}
.ob-center > * {
  max-width: calc(100vw - 36px);
  min-width: 0;
}
.ob-stack { display: grid; gap: 14px; }

/* ── Wordmark / brand line ────────────────────────────────────────────────── */
.ob-brand {
  /* flex (not inline-flex) so a following .ob-eyebrow always drops to its own
   * line; width:max-content keeps the click target tight to the wordmark. */
  display: flex; width: max-content; max-width: 100%;
  align-items: center; gap: 8px;
  font-family: var(--ob-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ob-faint);
  text-decoration: none;
}
.ob-brand .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ob-pink);
  box-shadow: 0 0 12px 1px var(--ob-pink);
}
.ob-brand b { color: var(--ob-muted); font-weight: 700; }

/* ── Eyebrow (the "terminal label" voice) ─────────────────────────────────── */
.ob-eyebrow {
  /* 11px uppercase --ob-pink was ~4.6:1 (fails AA small); pink-2 lifts to ~6:1 */
  font-family: var(--ob-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ob-pink-2);
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
}
.ob-eyebrow::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.ob-title {
  font-family: var(--ob-display); font-weight: 800;
  font-size: clamp(26px, 4.6vw, 38px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0; color: var(--ob-fg);
}
.ob-title .hi { color: var(--ob-pink); }
.ob-title .hi-acid { color: var(--ob-acid); }
.ob-h2 {
  font-family: var(--ob-display); font-weight: 700;
  font-size: 19px; letter-spacing: -0.015em; margin: 0 0 6px;
}
.ob-lede { color: var(--ob-muted); font-size: 14.5px; margin: 0; max-width: 46ch; }
.ob-lede b { color: var(--ob-fg); font-weight: 600; }
.ob-lede em { color: var(--ob-acid); font-style: normal; font-weight: 500; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ob-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), transparent 38%),
    var(--ob-surface);
  border: 1px solid var(--ob-hairline);
  border-radius: var(--ob-r-lg);
  box-shadow: var(--ob-shadow);
  max-width: 100%;
  min-width: 0;
  padding: 30px;
}
.ob-card-lg { box-shadow: var(--ob-shadow-lg); }

@media (max-width: 520px) {
  .ob-center { place-items: center start; }
}

/* ── Chip / pill ──────────────────────────────────────────────────────────── */
.ob-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ob-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ob-muted);
  border: 1px solid var(--ob-hairline); border-radius: var(--ob-r-pill);
  padding: 5px 12px; background: var(--ob-surface-2);
}
.ob-chip b { color: var(--ob-fg); font-weight: 700; }
.ob-chip .glyph { color: var(--ob-acid); }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.ob-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ob-muted); margin: 16px 0 7px;
}
.ob-label .opt { color: var(--ob-faint); font-weight: 400; }
.ob-input, input.ob-input, textarea.ob-input {
  width: 100%; padding: 12px 14px;
  background: var(--ob-surface-2); color: var(--ob-fg);
  /* form fields get a clearly-visible edge (~3:1), not the soft card hairline */
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--ob-r-sm);
  font: 400 15px/1.5 var(--ob-body); outline: none;
  transition: border-color .18s var(--ob-ease), box-shadow .18s var(--ob-ease), background .18s var(--ob-ease);
}
.ob-input::placeholder { color: var(--ob-faint); }
.ob-input:focus {
  /* a hard solid pink ring (was a ~1.5:1 soft glow that failed the 3:1 floor) */
  border-color: var(--ob-pink);
  box-shadow: 0 0 0 2px var(--ob-bg), 0 0 0 4px var(--ob-pink);
  background: var(--ob-surface-3);
}
textarea.ob-input { resize: vertical; font: 400 13.5px/1.6 var(--ob-mono); }
.ob-hint { color: var(--ob-faint); font-size: 12px; margin: 7px 0 0; }
.ob-hint code, .ob-lede code {
  font-family: var(--ob-mono); font-size: 11.5px;
  background: var(--ob-surface-2); border: 1px solid var(--ob-hairline);
  padding: 1px 6px; border-radius: 5px; color: var(--ob-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ob-btn {
  --_bg: var(--ob-surface-2); --_fg: var(--ob-fg); --_bd: var(--ob-hairline);
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: var(--ob-r-sm);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  font: 600 14.5px/1 var(--ob-body); letter-spacing: 0.005em;
  transition: transform .12s var(--ob-ease), box-shadow .2s var(--ob-ease),
              background .2s var(--ob-ease), border-color .2s var(--ob-ease), opacity .2s;
}
.ob-btn:hover { transform: translateY(-1px); }
.ob-btn:active { transform: translateY(0); }
.ob-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.ob-btn-block { width: 100%; }

.ob-btn-primary {
  --_bg: var(--ob-pink); --_fg: #14040c; --_bd: transparent;
  font-weight: 700;
  box-shadow: 0 8px 24px -10px var(--ob-pink), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.ob-btn-primary:hover {
  --_bg: var(--ob-pink-2);
  box-shadow: 0 12px 34px -10px var(--ob-pink), 0 1px 0 rgba(255,255,255,0.3) inset;
}
.ob-btn-acid {
  --_bg: var(--ob-acid); --_fg: #16210a; --_bd: transparent; font-weight: 700;
  box-shadow: 0 8px 24px -12px var(--ob-acid-deep);
}
.ob-btn-acid:hover { --_bg: #d8ff6e; }
.ob-btn-ghost { --_bg: transparent; --_fg: var(--ob-muted); --_bd: var(--ob-hairline); }
.ob-btn-ghost:hover { --_fg: var(--ob-fg); --_bd: rgba(255,255,255,0.18); background: var(--ob-surface); }
.ob-btn-secondary { --_bg: var(--ob-surface-2); --_fg: var(--ob-pink); --_bd: rgba(255,46,147,0.3); }
.ob-btn-secondary:hover { background: rgba(255,46,147,0.08); --_bd: var(--ob-pink); }

/* ── Status message ───────────────────────────────────────────────────────── */
.ob-msg { font-size: 13.5px; min-height: 19px; margin: 14px 0 0; color: var(--ob-muted); }
.ob-msg[data-kind="error"] { color: var(--ob-danger); }
.ob-msg[data-kind="ok"]    { color: var(--ob-ok); }
.ob-msg[data-kind="busy"]  { color: var(--ob-pink-2); }

/* ── Footnote / link ──────────────────────────────────────────────────────── */
.ob-foot { margin: 18px 0 0; font-size: 12.5px; color: var(--ob-faint); }
.ob-foot a { color: var(--ob-muted); text-decoration: none; border-bottom: 1px solid var(--ob-hairline); }
.ob-foot a:hover { color: var(--ob-fg); border-color: var(--ob-pink); }

/* ── Numbered steps list (welcome path) ───────────────────────────────────── */
.ob-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ob-path li {
  display: flex; gap: 13px; align-items: flex-start; padding: 13px 4px;
  color: var(--ob-muted); font-size: 14px; border-bottom: 1px solid var(--ob-hairline-2);
}
.ob-path li:last-child { border-bottom: 0; }
.ob-path li b { color: var(--ob-fg); font-weight: 600; }
.ob-path .n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--ob-mono);
  background: var(--ob-surface-2); border: 1px solid var(--ob-hairline); color: var(--ob-fg);
}
.ob-path li:first-child .n { border-color: var(--ob-pink); color: var(--ob-pink); }

/* ── Taste meter (the moat, made visible — acid) ──────────────────────────── */
.ob-meter {
  background: var(--ob-surface-2); border: 1px solid var(--ob-hairline);
  border-radius: var(--ob-r); padding: 16px;
}
.ob-meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; }
.ob-meter-tier { font: 700 13px/1 var(--ob-body); color: var(--ob-fg); }
.ob-meter-sub { font-family: var(--ob-mono); font-size: 11px; color: var(--ob-faint); letter-spacing: 0.04em; }
.ob-meter-bar {
  height: 8px; border-radius: var(--ob-r-pill); overflow: hidden;
  background: var(--ob-bg); border: 1px solid var(--ob-hairline);
}
.ob-meter-bar > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ob-acid-deep), var(--ob-acid));
  box-shadow: 0 0 12px 0 var(--ob-glow-acid);
  transition: width .55s var(--ob-ease);
}
.ob-meter-note { color: var(--ob-faint); font-size: 11.5px; margin: 11px 0 0; }
.ob-meter-note b { color: var(--ob-acid); font-weight: 600; }

/* ── Success burst (welcome) ──────────────────────────────────────────────── */
.ob-burst {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(95,227,154,0.22), rgba(95,227,154,0.05));
  border: 1px solid rgba(95,227,154,0.35); color: var(--ob-ok); font-size: 26px;
  box-shadow: 0 0 30px -6px rgba(95,227,154,0.4);
}

/* ── Motion: one orchestrated, staggered page-load reveal ─────────────────── */
@keyframes ob-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ob-glow-in { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
.ob-reveal { opacity: 0; animation: ob-rise .7s var(--ob-ease) forwards; animation-delay: var(--d, 0s); }
.ob-pop { opacity: 0; animation: ob-glow-in .6s var(--ob-ease) forwards; animation-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .ob-reveal, .ob-pop { animation: none; opacity: 1; transform: none; }
  .ob-meter-bar > span { transition: none; }
}