/* Agentics Universal Onramp — wizard shell styles (Part C §2).
   Shared by /onboarding/wizard.html and every /onboarding/wizard/step-N-*.html.
   Mirrors the existing /onboarding/ split-panel look. */

:root {
  --primary:#6366f1; --primary-dark:#4f46e5; --accent:#8b5cf6;
  --ink:#0f172a; --gray-7:#334155; --gray:#64748b; --gray-l:#94a3b8;
  --bg:#f5f5f0; --warm:#faf9f6; --white:#fff; --border:#e4e4dc; --border-l:#eeeee8;
  --green:#10b981; --amber:#f59e0b; --red:#ef4444;
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6);

  /* Tokens consumed by the <agentics-*> shared components (pierce shadow DOM). */
  --ag-font:'Inter',system-ui,-apple-system,sans-serif;
  --ag-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ag-accent:#6366f1; --ag-accent-dark:#4f46e5; --ag-accent-soft:#eef2ff;
  --ag-surface:#fff; --ag-surface-2:#f4f4ef; --ag-border:#e4e4dc;
  --ag-ink:#0f172a; --ag-muted:#64748b; --ag-radius:12px;
  --ag-ok:#10b981; --ag-warn:#f59e0b; --ag-bad:#ef4444;
  --ag-code-bg:#0f1222; --ag-code-ink:#e8e8f0;
}
html[data-theme="dark"] {
  --ink:#e8e8f0; --gray-7:#9a9ab0; --gray:#9a9ab0; --gray-l:#9a9ab0;
  --bg:#0e0e1a; --warm:#1f1f38; --white:#171728;
  --border:rgba(255,255,255,.10); --border-l:rgba(255,255,255,.08);
  --ag-surface:#171728; --ag-surface-2:#1f1f38; --ag-border:rgba(255,255,255,.12);
  --ag-ink:#e8e8f0; --ag-muted:#9a9ab0; --ag-accent-soft:#272746;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--ag-font); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; }
.mono { font-family:var(--ag-mono); }
a { color:var(--primary-dark); }

.agw-shell { display:flex; min-height:100vh; }

/* ── BRAND PANEL ───────────────────────────────────────────── */
.agw-panel {
  width:340px; flex-shrink:0; color:#fff; padding:40px 34px;
  background:linear-gradient(170deg,#1e1b4b 0%,#312e81 48%,#4f46e5 100%);
  display:flex; flex-direction:column;
}
.agw-logo { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800;
  color:#fff; text-decoration:none; }
.agw-logo .mk { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; font-weight:900; }
.agw-pitch { margin-top:38px; }
.agw-pitch .eyebrow { font-size:11px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:#a5b4fc; }
.agw-pitch h1 { font-size:25px; font-weight:900; line-height:1.22; letter-spacing:-.02em;
  margin-top:8px; }
.agw-pitch p { margin-top:11px; font-size:13.5px; color:#c7d2fe; line-height:1.6; }
.agw-rail { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:28px; }
.agw-rail-item { display:flex; align-items:center; gap:12px; padding:9px 10px;
  border-radius:10px; font-size:13px; color:rgba(255,255,255,.5); }
.agw-rail-item.active { background:rgba(255,255,255,.10); color:#fff; font-weight:700; }
.agw-rail-item.done { color:#a7f3d0; }
.agw-rail-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; font-size:11px;
  font-weight:800; display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.22); }
.agw-rail-item.active .agw-rail-dot { background:#fff; color:var(--primary-dark);
  border-color:#fff; }
.agw-rail-item.done .agw-rail-dot { background:#10b981; color:#fff; border-color:#10b981; }
.agw-panel-foot { margin-top:20px; font-size:11.5px; color:#a5b4fc; }
.agw-panel-foot a { color:#fff; }

/* ── MAIN / CARD ───────────────────────────────────────────── */
.agw-main { flex:1; display:flex; align-items:flex-start; justify-content:center;
  padding:56px 40px; }
.agw-card { width:100%; max-width:600px; }
.agw-progress { display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.agw-progress-bar { flex:1; height:5px; border-radius:99px; background:var(--border); overflow:hidden; }
.agw-progress-bar i { display:block; height:100%; background:var(--grad); border-radius:99px;
  transition:width .4s ease; }
.agw-progress-label { font-size:11.5px; font-weight:700; color:var(--gray); white-space:nowrap; }
.agw-step-no { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary-dark); }
.agw-card h2 { font-size:26px; font-weight:850; letter-spacing:-.02em; line-height:1.2;
  margin:6px 0 8px; }
.agw-card .agw-sub { font-size:14.5px; color:var(--gray); line-height:1.6; margin-bottom:24px; }

/* ── FORM ──────────────────────────────────────────────────── */
.agw-field { margin-bottom:18px; }
.agw-label { display:block; font-size:13px; font-weight:700; color:var(--gray-7);
  margin-bottom:7px; }
.agw-input { width:100%; padding:12px 14px; border:1.5px solid var(--border);
  border-radius:10px; font-size:14px; font-family:inherit; background:var(--white);
  color:var(--ink); outline:none; transition:border-color .14s,box-shadow .14s; }
.agw-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.agw-input.mono { font-family:var(--ag-mono); }
.agw-hint { font-size:12px; color:var(--gray-l); margin-top:6px; line-height:1.5; }
.agw-err { font-size:12.5px; color:var(--red); margin-top:7px; font-weight:600; display:none; }
.agw-err.show { display:block; }

/* ── OPTION CARDS (radio / type select) ───────────────────── */
.agw-opts { display:flex; flex-direction:column; gap:10px; }
.agw-opts.cols { display:grid; grid-template-columns:repeat(3,1fr); }
.agw-opt { display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  border:1.5px solid var(--border); border-radius:14px; padding:16px;
  background:var(--white); transition:border-color .14s,background .14s; }
.agw-opt:hover { border-color:var(--primary); }
.agw-opt:focus-within { box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.agw-opt.sel { border-color:var(--primary); background:var(--ag-accent-soft); }
.agw-opts.cols .agw-opt { flex-direction:column; align-items:center; text-align:center; }
.agw-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.agw-opt-glyph { width:42px; height:42px; flex:none; border-radius:11px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; }
.agw-opt-tx { flex:1; }
.agw-opt-title { font-size:14.5px; font-weight:800; color:var(--ink); }
.agw-opt-desc { font-size:12.5px; color:var(--gray); margin-top:3px; line-height:1.5; }
.agw-radio { width:20px; height:20px; flex:none; border-radius:50%;
  border:2px solid var(--border); margin-top:1px; display:flex; align-items:center;
  justify-content:center; }
.agw-opt.sel .agw-radio { border-color:var(--primary); }
.agw-opt.sel .agw-radio::after { content:""; width:10px; height:10px; border-radius:50%;
  background:var(--primary); }

/* ── BUTTONS / NAV ─────────────────────────────────────────── */
.agw-nav { display:flex; align-items:center; gap:12px; margin-top:28px; }
.agw-btn { appearance:none; cursor:pointer; font:800 14.5px var(--ag-font);
  border-radius:11px; padding:13px 22px; border:1.5px solid transparent;
  transition:transform .14s,box-shadow .14s,border-color .14s; }
.agw-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.agw-btn-primary { background:var(--grad); color:#fff; }
.agw-btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(99,102,241,.32); }
.agw-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.agw-btn-ghost { background:var(--white); border-color:var(--border); color:var(--gray-7); }
.agw-btn-ghost:hover { border-color:var(--primary); color:var(--primary-dark); }
.agw-next { margin-left:auto; }
.agw-back { appearance:none; background:none; border:none; cursor:pointer;
  font:700 13.5px var(--ag-font); color:var(--gray); padding:8px 4px; }
.agw-back:hover { color:var(--primary-dark); }
.agw-back:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
.agw-skip { appearance:none; background:none; border:none; cursor:pointer;
  font:700 13px var(--ag-font); color:var(--gray-l); padding:8px; }
.agw-skip:hover { color:var(--gray-7); }

/* ── MISC BLOCKS ───────────────────────────────────────────── */
.agw-note { display:flex; gap:11px; padding:14px 16px; border-radius:12px;
  font-size:13px; line-height:1.55; }
.agw-note.warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.agw-note.info { background:var(--ag-accent-soft); border:1px solid #c7d2fe; color:#3730a3; }
.agw-note.ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.agw-note b { font-weight:800; }
html[data-theme="dark"] .agw-note.warn { background:#2a230f; border-color:#5a4a1f; color:#fbbf24; }
html[data-theme="dark"] .agw-note.info { background:#1f1f38; border-color:rgba(255,255,255,.12); color:#c7d2fe; }
html[data-theme="dark"] .agw-note.ok { background:#0f2a20; border-color:#1f5a44; color:#34d399; }
.agw-block { margin-bottom:18px; }
.agw-block-h { font-size:13px; font-weight:800; color:var(--ink); margin-bottom:9px;
  display:flex; align-items:center; gap:8px; }
.agw-block-h .n { width:20px; height:20px; border-radius:50%; background:var(--ag-accent-soft);
  color:var(--primary-dark); font-size:11px; font-weight:800; display:flex;
  align-items:center; justify-content:center; }
.agw-spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(99,102,241,.25);
  border-top-color:var(--primary); display:inline-block; vertical-align:-3px;
  animation:agw-spin .7s linear infinite; }
@keyframes agw-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .agw-spinner { animation:none; } }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:860px) {
  .agw-shell { flex-direction:column; }
  .agw-panel { width:100%; padding:22px 22px 18px; }
  .agw-pitch { margin-top:18px; }
  .agw-pitch h1 { font-size:21px; }
  .agw-rail { flex-direction:row; flex-wrap:wrap; gap:6px; margin-top:18px; padding-top:0; }
  .agw-rail-item { padding:5px 8px; font-size:0; gap:0; }
  .agw-rail-item.active { font-size:13px; gap:8px; }
  .agw-panel-foot { display:none; }
  .agw-main { padding:32px 20px 48px; }
  .agw-opts.cols { grid-template-columns:1fr; }
}