/* elmts.dev/install: the onboarding stepper. Shared tokens and components (btn, cmd, seg, kbd) are in site.css. */
.inst { max-width: 688px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s9); }
.inst-hd h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 600; margin: var(--s4) 0 0; }
.inst-hd .lede { margin: var(--s3) 0 0; font-size: 17px; color: var(--ink-2); max-width: 52ch; letter-spacing: -0.01em; }

/* ───────── steps ───────── */
.steps { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.step { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: transparent; transition: background var(--fast), box-shadow var(--fast); }
.step.open, .step.done { background: var(--surface); box-shadow: var(--e1); }
.step.open { box-shadow: var(--e2); }

.step-hd { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; width: 100%; min-height: 58px; padding: 16px 18px 16px 54px; border-radius: var(--r-lg); }
.step-hd:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.step .ttl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--muted); transition: color var(--fast); }
.step.open .ttl, .step.done .ttl, .step-hd:hover .ttl { color: var(--ink); }
.ttl .opt { font: 500 11px var(--mono); color: var(--muted); }
.ttl .sum { display: none; font: 400 12px var(--mono); color: var(--muted); letter-spacing: 0; }
.step.done:not(.open) .ttl .sum { display: inline; }

.num { position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 500 12px var(--mono); color: var(--muted); border: 1px solid var(--line-strong); background: var(--surface); transition: background var(--fast), color var(--fast), border-color var(--fast); }
.num svg { width: 13px; height: 13px; display: none; }
.step.open .num, .step.done .num { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.step.done .num > span { display: none; }
.step.done .num svg { display: block; }

.step-body { padding: 0 18px 18px 54px; display: flex; flex-direction: column; gap: 12px; margin-top: -4px; }
.step-body p { margin: 0; color: var(--ink-2); font-size: 15px; }
.step-body p.small, .donecard .small { font-size: 13px; color: var(--muted); }
.step-body .small code, .step-body p code { font: 12.5px var(--mono); color: var(--ink-2); }
.step-body .small .link code { color: var(--ink); white-space: nowrap; }
.step-body kbd, .donecard kbd { height: 20px; min-width: 20px; padding: 0 5px; font-size: 11.5px; vertical-align: 1px; }
.step-body .cmd { background: var(--sunken); box-shadow: none; }
.step-body .cmd .copy:hover { background: var(--surface); }
.acts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: 4px; }
.acts .btn { --h: 36px; font-size: 14px; }

/* agent tabs */
.agents { flex-wrap: wrap; border-radius: 14px; }
.agents button { height: 30px; padding: 0 11px; border-radius: 11px; }
.agents svg.lg { width: 14px; height: 14px; flex: none; color: currentColor; }
.agents button[aria-selected="true"] svg.lg { color: var(--ink); }
.pane { display: flex; flex-direction: column; gap: 10px; }

/* ───────── try it ───────── */
.try-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg) radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0 / 16px 16px; }
.try-card { width: min(280px, 100%); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--e2); text-align: left; }
.tc-img { height: 120px; display: grid; place-items: center; background: linear-gradient(160deg, var(--sunken), var(--line-strong)); }
.tc-loaf { width: 120px; height: 64px; border-radius: 60px 60px 22px 22px; background: linear-gradient(170deg, var(--n-400), var(--n-600)); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.tc-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.tc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tc-row h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tc-price { font: 600 15px var(--font); color: var(--ink); }
.step-body .tc-body p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tc-meta { display: flex; align-items: center; gap: 8px; font: 11.5px var(--mono); color: var(--muted); }
.tc-tag { padding: 1px 7px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); }
.tc-btn { all: unset; box-sizing: border-box; margin-top: 2px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--primary-grad); color: var(--primary-ink); font: 600 13px var(--font); cursor: default; }
.try-hint { max-width: 40ch; text-align: center; font-size: 12.5px; color: var(--muted); }

.donecard { margin-top: 10px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e2); }
.donecard h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.keys .k { display: inline-flex; align-items: center; gap: 6px; font: 12.5px var(--mono); color: var(--muted); }
.donecard .small { margin: 14px 0 0; }
.donecard .acts { margin-top: 16px; }

@media (max-width: 560px) {
  .inst { padding: var(--s7) var(--s4) var(--s8); }
  .step-hd { padding: 15px 14px 15px 48px; min-height: 56px; }
  .num { left: 12px; top: 15px; }
  .step-body { padding: 0 14px 16px 48px; }
  .step-body .cmd { height: auto; min-height: 44px; padding: 6px 6px 6px 12px; align-items: center; }
  .step-body .cmd code { white-space: normal; overflow-wrap: anywhere; }
  .agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .agents button { justify-content: center; padding: 0 4px; gap: 5px; font-size: 12.5px; white-space: nowrap; }
  .donecard { padding: 18px 16px; }
}

/* ───────── paths + the prompt to paste ───────── */
.paths { display: inline-flex; margin-top: var(--s6); }
.paths + .steps { margin-top: var(--s4); }
.prompt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 8px 12px 14px; border-radius: var(--r-md); background: var(--sunken); }
.step-body .prompt p { flex: 1; margin: 0; font: 13px/1.6 var(--mono); color: var(--ink); }
.step-body .prompt code { font: inherit; color: inherit; padding: 1px 5px; border-radius: 5px; background: var(--surface); }
.prompt .copy { flex: none; }
.prompt .copy:hover { background: var(--surface); }

/* live status from the extension */
.live { display: flex; align-items: center; gap: 8px; margin: var(--s4) 0 0; font: 12.5px var(--mono); color: var(--muted); }
.live .d { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--warn); animation: live-pulse 1.4s ease-in-out infinite; }
.live.ok { color: var(--ink); } .live.ok .d { background: var(--ok); animation: none; }
.paths + .live + .steps { margin-top: var(--s3); }
@keyframes live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live .d { animation: none; } }
.try-keys { font-size: 14px; }
.try-keys em { color: var(--ink); }

.phone { margin-top: var(--s6); padding: 20px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e2); display: flex; flex-direction: column; gap: 12px; }
.phone h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.phone p { margin: 0; font-size: 15px; color: var(--ink-2); }
.phone p.small { font-size: 13px; color: var(--muted); }
.phone p.small:empty { display: none; }
.phone-link { display: block; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); font: 13px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.inst.on-phone:not(.steps-shown) :is(.paths, .live, .steps, .donecard) { display: none; }