/* ============================================================
   Caila Dev — Onboarding wizard
   ============================================================ */

.ob-body { background: var(--bg-0); min-height: 100vh; }
.ob-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% -5%, rgba(123,140,255,.12), transparent 60%),
    linear-gradient(var(--border-0) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-0) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent 75%);
  opacity: .6;
}

.ob-shell { position: relative; z-index: 1; max-width: 880px; margin-inline: auto; padding: 28px 24px 80px; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- top bar: logo + step count ---- */
.ob-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.ob-step-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); }
.ob-step-count b { color: var(--text-1); font-weight: 500; }
.ob-exit { font-size: 13px; color: var(--text-3); }
.ob-exit:hover { color: var(--text-1); }

/* ---- progress mono dots ---- */
.ob-progress { display: flex; align-items: center; gap: 0; margin-bottom: 40px; }
.ob-dot-wrap { display: flex; align-items: center; flex: 1; }
.ob-dot-wrap:last-child { flex: 0; }
.ob-dot {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  transition: color var(--dur-2);
}
.ob-dot .d {
  width: 9px; height: 9px; border-radius: 3px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-1); transition: all var(--dur-2);
}
.ob-dot.done .d { background: var(--jay-gradient); box-shadow: none; }
.ob-dot.active .d { background: var(--jay-gradient); box-shadow: 0 0 0 4px rgba(123,140,255,.18); }
.ob-dot.active { color: var(--text-0); }
.ob-dot.done { color: var(--text-2); }
.ob-line { flex: 1; height: 1px; background: var(--border-1); margin-inline: 12px; position: relative; overflow: hidden; }
.ob-line::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--jay-gradient); transition: width var(--dur-3) var(--ease-out); }
.ob-line.filled::after { width: 100%; }

/* ---- step content ---- */
.ob-main { flex: 1; }
/* NOTE: do NOT animate transform on .ob-step — it would become a containing block
   for the position:fixed drawer (and a paused/throttled animation traps it). */
.ob-step { }
.ob-h { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.03em; margin-bottom: 10px; }
.ob-sub { font-size: 15px; color: var(--text-2); margin-bottom: 32px; max-width: 56ch; }

/* ---- footer nav ---- */
.ob-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-0); }
.ob-nav .right { display: flex; gap: 10px; align-items: center; }
.ob-skip { font-size: 13px; color: var(--text-3); }
.ob-skip:hover { color: var(--text-1); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---- STEP 1 tiles ---- */
.ob-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ob-tile {
  position: relative; text-align: left; padding: 22px; border-radius: var(--r-card);
  background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--border-0);
  transition: all var(--dur-2); display: flex; flex-direction: column; gap: 12px; cursor: pointer;
}
.ob-tile:hover { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); transform: translateY(-2px); }
.ob-tile.sel { background: var(--surface-1); box-shadow: inset 0 0 0 1.5px var(--jay-from), 0 12px 40px -16px rgba(123,140,255,.5); }
.ob-tile .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-1); display: grid; place-items: center; color: var(--jay-from); }
.ob-tile.sel .ic { background: var(--jay-gradient); color: #0A0B12; box-shadow: none; }
.ob-tile .tt { font-size: 16px; font-weight: 600; color: var(--text-0); }
.ob-tile .td { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.ob-tile .tk { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: auto; }
.ob-tile .check { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--jay-gradient); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: all var(--dur-2); }
.ob-tile.sel .check { opacity: 1; transform: none; }

/* ---- STEP 2 checklist ---- */
.ob-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-check {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: var(--r-card);
  background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--border-0); cursor: pointer;
  transition: all var(--dur-2); text-align: left;
}
.ob-check:hover { background: var(--surface-1); }
.ob-check.sel { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-glow); }
.ob-box { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-1); display: grid; place-items: center; color: transparent; transition: all var(--dur-2); }
.ob-check.sel .ob-box { background: var(--jay-gradient); box-shadow: none; color: #0A0B12; }
.ob-check .cl { font-size: 14.5px; color: var(--text-1); }
.ob-check.sel .cl { color: var(--text-0); }

/* ---- STEP 3 model picker ---- */
.ob-filters { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.ob-filter {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); padding: 7px 13px;
  border-radius: var(--r-pill); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-0);
  transition: all var(--dur-2);
}
.ob-filter.on { color: var(--text-0); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-glow); }
.ob-pin-count { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; }
.ob-pin-count b { color: var(--jay-from); font-weight: 600; }
.ob-models { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 380px; overflow-y: auto; padding-right: 6px; }
.ob-models::-webkit-scrollbar { width: 8px; }
.ob-models::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; }
.ob-model {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center;
  padding: 13px 14px; border-radius: var(--r-card); background: var(--surface-0);
  box-shadow: inset 0 0 0 1px var(--border-0); transition: all var(--dur-2);
}
.ob-model.pinned { box-shadow: inset 0 0 0 1px var(--border-glow); background: var(--surface-1); }
.ob-model .prov-logo { width: 32px; height: 32px; border-radius: 8px; font-size: 12px; }
.ob-model .mid { font-family: var(--font-mono); font-size: 13px; color: var(--text-0); }
.ob-model .mprice { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 3px; }
.ob-star { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-0); transition: all var(--dur-1); }
.ob-star:hover { color: var(--text-1); }
.ob-star.on { color: var(--warm); background: var(--warm-soft); box-shadow: inset 0 0 0 1px rgba(255,182,114,.3); }

/* ---- STEP 4 key ---- */
.ob-keyscope { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 20px; }
.ob-keyscope .ob-ks-field:first-child { grid-column: 1 / -1; }
.ob-ks-field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.ob-ks-input { display: flex; align-items: center; border-radius: var(--r-ctrl); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); overflow: hidden; }
.ob-ks-input .ks-pre { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); padding: 11px 0 11px 13px; }
.ob-ks-input input { flex: 1; background: none; border: none; outline: none; font-family: var(--font-mono); font-size: 13px; color: var(--text-0); padding: 11px 13px 11px 2px; }
.ob-ks-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.ob-ks-seg button { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); padding: 9px 14px; border-radius: var(--r-ctrl); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-0); transition: all var(--dur-2); }
.ob-ks-seg button:hover { color: var(--text-0); }
.ob-ks-seg button.on { color: var(--text-0); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-glow); }
.ob-keybox { background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); border-radius: var(--r-hero); padding: 28px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; margin-bottom: 24px; }
.ob-keybox .glow { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 120% at 50% -20%, rgba(123,140,255,.18), transparent 60%); pointer-events: none; }
.ob-key-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ob-key-label .kt { font-size: 13px; color: var(--text-2); }
.ob-keyfield {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-card);
  background: var(--bg-0); box-shadow: inset 0 0 0 1px var(--border-glow);
  font-family: var(--font-mono); font-size: 16px; color: var(--text-0); position: relative;
}
.ob-keyfield .kv { letter-spacing: .04em; flex: 1; transition: filter var(--dur-3); }
.ob-keyfield.hidden .kv { filter: blur(7px); user-select: none; }
.ob-keyfield .kbtns { display: flex; gap: 6px; }
.ob-kbtn { height: 34px; padding-inline: 12px; border-radius: var(--r-ctrl); font-size: 12.5px; font-family: var(--font-mono); color: var(--text-1); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-1); display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-1); }
.ob-kbtn:hover { background: var(--surface-3); color: var(--text-0); }
.ob-kbtn.done { color: var(--success); }
.ob-integ-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ob-ipick {
  padding: 16px 14px; border-radius: var(--r-card); background: var(--surface-0);
  box-shadow: inset 0 0 0 1px var(--border-0); cursor: pointer; transition: all var(--dur-2);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left;
}
.ob-ipick:hover { background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); transform: translateY(-2px); }
.ob-ipick .il { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-1); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-1); }
.ob-ipick .in { font-size: 13.5px; font-weight: 500; color: var(--text-0); }
.ob-ipick .iarrow { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* drawer */
.ob-drawer-back { position: fixed; inset: 0; z-index: 90; background: rgba(8,9,14,.6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--dur-2); }
.ob-drawer-back.open { opacity: 1; pointer-events: auto; }
.ob-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(520px, 92vw);
  background: var(--surface-0); box-shadow: -24px 0 64px -24px rgba(0,0,0,.7);
  border-left: 1px solid var(--border-1); transform: translateX(100%); visibility: hidden;
  display: flex; flex-direction: column; padding: 26px;
}
/* Open state is reachable WITHOUT any transition (some embedded envs freeze
   transitions at their start frame, which would trap the drawer off-screen).
   Instant open/close — reliable everywhere. */
.ob-drawer.open { transform: none; visibility: visible; }
.ob-drawer .code { min-width: 0; max-width: 100%; width: 100%; }
.ob-drawer .code pre { max-width: 100%; }
.ob-drawer .code-bar { justify-content: space-between; }
.ob-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ob-drawer-head h3 { font-size: 19px; }
.ob-drawer .ob-sub { margin-bottom: 20px; font-size: 13.5px; }
.ob-drawer .code { margin-bottom: 14px; }
.ob-drawer-path { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.ob-close { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-0); }
.ob-close:hover { color: var(--text-0); background: var(--surface-2); }

/* ---- STEP 5 first request ---- */
.ob-run { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ob-run-card { background: var(--surface-0); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--border-0); overflow: hidden; }
.ob-run-bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border-0); }
.ob-run-bar .rl { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.ob-run-bar .rl b { color: var(--text-0); font-weight: 500; }
.ob-run-body { padding: 18px 16px; font-family: var(--font-mono); font-size: 13px; color: var(--text-1); line-height: 1.6; min-height: 70px; }
.ob-run-body .prompt { color: var(--text-3); }
.ob-typing { display: inline-block; width: 7px; height: 15px; background: var(--jay-from); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.ob-metrics { display: flex; gap: 0; border-top: 1px solid var(--border-0); }
.ob-metric { flex: 1; padding: 13px 16px; border-right: 1px solid var(--border-0); }
.ob-metric:last-child { border-right: 0; }
.ob-metric .ml { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.ob-metric .mv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; color: var(--text-0); }
.ob-metric .mv.warm { color: var(--warm); }

.ob-gift { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-card); background: linear-gradient(135deg, var(--warm-soft), transparent); box-shadow: inset 0 0 0 1px rgba(255,182,114,.25); margin-top: 4px; }
/* step 5 — vs direct provider comparison */
.ob-compare { background: var(--surface-0); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--border-0); padding: 16px 18px; }
.ob-compare-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.ob-compare-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.ob-compare-row + .ob-compare-row { border-top: 1px solid var(--border-0); }
.ob-compare-row .oc-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; }
.ob-compare-row.good .oc-ic { background: rgba(78,201,161,.14); color: var(--success); }
.ob-compare-row.bad .oc-ic { background: rgba(226,107,107,.12); color: var(--error); }
.ob-compare-row .oc-who { font-size: 13.5px; color: var(--text-0); font-weight: 500; min-width: 200px; }
.ob-compare-row .oc-stat { margin-left: auto; font-size: 12.5px; color: var(--text-2); text-align: right; }
.ob-compare-row.bad .oc-stat { color: var(--text-3); }
.ob-gift .gv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; color: var(--warm); animation: warmpulse 2.4s var(--ease-in-out) infinite; }
@keyframes warmpulse { 0%,100% { text-shadow: 0 0 0 rgba(255,182,114,0); } 50% { text-shadow: 0 0 22px rgba(255,182,114,.6); } }
.ob-gift .gt { font-size: 13.5px; color: var(--text-1); }
.ob-gift .gt b { color: var(--text-0); }

.ob-jay { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-card); background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--border-0); margin-top: 14px; }
.ob-jay.hot { box-shadow: inset 0 0 0 1px var(--border-glow); background: linear-gradient(135deg, rgba(91,184,255,.08), rgba(139,91,255,.05)); }
.ob-jay .ji { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; flex: 0 0 auto; color: var(--jay-from); }
.ob-jay.hot .ji { background: var(--jay-gradient); color: #0A0B12; }
.ob-jay .jt { flex: 1; }
.ob-jay .jt b { color: var(--text-0); font-weight: 600; font-size: 14px; }
.ob-jay .jt span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }

.ob-final-ctas { display: flex; gap: 10px; margin-top: 20px; }

/* success check icon */
.ob-success-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--jay-gradient); display: grid; place-items: center; margin-bottom: 20px; box-shadow: 0 12px 40px -12px rgba(123,140,255,.6); }

@media (max-width: 720px) {
  .ob-tiles, .ob-checks, .ob-models, .ob-integ-pick { grid-template-columns: 1fr; }
  .ob-progress .ob-dot span { display: none; }
}