/* Setup assistant: progress bar with green check marks, one card per step.
   Steps slide in, the card grows and shrinks with its content, done steps
   are clickable. Same language as the dashboard (column, soft cards,
   amber accent, green for done). Uses the dashboard's fixed background
   layers (.dbg/.dgrain) and its keyframes. */

.setup2 { position: relative; min-height: calc(100vh - var(--topH)); display: flex; flex-direction: column; gap: clamp(14px, 2vh, 22px); padding-block: clamp(12px, 1.8vh, 20px) clamp(16px, 2.4vh, 30px); --col: min(100%, 1100px); --gap: 16px; }
.setup2 > *:not(.dbg):not(.dgrain) { position: relative; z-index: 1; animation: riseIn .55s var(--ease) both; }
.setup2 > *:nth-child(4) { animation-delay: .06s; }
.setup2 > *:nth-child(5) { animation-delay: .12s; }
.setup2 > *:nth-child(6) { animation-delay: .18s; }

/* ─── Head ──────────────────────────────────────────────────── */
.sp-head { width: var(--col); margin-inline: auto; display: flex; align-items: center; gap: 14px; }
.sp-head .count { font-family: var(--mono); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sp-head .spacer { flex: 1; }

/* ─── Progress ──────────────────────────────────────────────── */
/* the bar runs from the first node's center to the last one's, so its tip sits right above the current node */
.sp-progress { width: var(--col); margin-inline: auto; display: grid; gap: 9px; }
.sp-bar { position: relative; height: 4px; margin-inline: calc(50% / var(--n, 6)); border-radius: 2px; background: rgba(255,255,255,.08); }
.sp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--ok), var(--accent)); box-shadow: 0 0 12px rgba(251,191,36,.35); transition: width .7s var(--ease); }
.sp-bar i::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 2.2s ease-in-out infinite; }
.sp-steps { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.sp-step { display: grid; justify-items: center; gap: 8px; padding: 0; background: none; color: var(--text-3); cursor: default; transition: color .3s; }
.sp-step:disabled { cursor: default; }
.sp-step.done { cursor: pointer; color: var(--text-2); }
.sp-step.done:hover { color: var(--text); }
.sp-step.current { color: var(--text); }
.sp-node { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.16); display: grid; place-items: center; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text-3); background: rgba(16,16,19,.9); transition: border-color .3s, background .3s, color .3s; }
.sp-node b { font-weight: 600; transition: opacity .2s; }
.sp-node svg { position: absolute; width: 14px; height: 14px; stroke: #0b1a0f; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.sp-step.current .sp-node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(251,191,36,.12), 0 0 16px rgba(251,191,36,.25); animation: nodePulse 2.2s ease-in-out infinite; }
.sp-step.done .sp-node { border-color: var(--ok); background: var(--ok); color: #0b1a0f; box-shadow: 0 0 12px rgba(34,197,94,.35); animation: nodePop .5s var(--spring-soft); }
.sp-step.done .sp-node b { opacity: 0; }
.sp-step.done .sp-node svg { animation: draw .45s .12s var(--ease) forwards; }
.sp-step span { font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes nodePop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes nodePulse { 50% { box-shadow: 0 0 0 7px rgba(251,191,36,.06), 0 0 22px rgba(251,191,36,.35); } }

/* ─── Card ──────────────────────────────────────────────────── */
/* the card sits under the progress and keeps a landscape shape; it only grows
   downward with its content, so nothing above it ever moves */
.sp-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.sp-card { width: var(--col); flex: 0 1 auto; min-height: clamp(500px, 62vh, 700px); display: flex; flex-direction: column; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 30px 36px 22px; transition: height .42s var(--ease); }
.sp-card.animating { overflow: hidden; }
.sp-body { flex: 1; display: grid; gap: var(--gap); align-content: center; }
/* content that folds open and closed without a jump */
.sp-fold { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: calc(-1 * var(--gap)); --fold-ease: cubic-bezier(.4, 0, .2, 1); transition: grid-template-rows .5s var(--fold-ease), opacity .35s, margin-top .5s var(--fold-ease); }
.sp-fold.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.sp-fold-in { min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }
.sp-body.enter-fwd { animation: stepFwd .45s var(--ease) both; }
.sp-body.enter-back { animation: stepBack .45s var(--ease) both; }
@keyframes stepFwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.sp-body h2 { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.sp-body > p { color: var(--text-2); font-size: 13.5px; line-height: 1.6; max-width: 64ch; margin-top: -6px; }
.sp-body .note { line-height: 1.6; }

/* ─── Foot ──────────────────────────────────────────────────── */
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); }
.sp-foot .r { display: flex; gap: 10px; }
.sp-foot .btn.primary { min-width: 140px; }

/* ─── Choice cards ──────────────────────────────────────────── */
.setup2 .choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.setup2 .choice button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 12px; align-items: start; text-align: left; padding: 14px 40px 14px 14px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: var(--text); transition: border-color .2s, background .2s, transform .25s var(--spring-soft); }
.setup2 .choice button:hover { border-color: rgba(255,255,255,.16); transform: translateY(-2px); }
.setup2 .choice button.active { border-color: var(--accent-line); background: var(--accent-soft); }
.setup2 .choice button.pop { animation: prePop .5s var(--spring-soft); }
.setup2 .choice .ch-ico { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--text-2); transition: color .2s, background .2s; }
.setup2 .choice .ch-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setup2 .choice button.active .ch-ico { color: var(--accent); background: rgba(251,191,36,.14); }
.setup2 .choice .ch-ico .pbadge { width: 36px; height: 36px; border-radius: 9px; font-size: 12px; }
.setup2 .choice .ch-ico.brand i { display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.setup2 .choice .ch-ico.obsstudio { --logo: url(../assets/brands/obsstudio.svg); }
.setup2 .choice .ch-ico.streamlabs { --logo: url(../assets/brands/streamlabs.svg); }
.setup2 .choice b { font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; padding-top: 1px; }
.setup2 .choice button.active b { color: var(--text); }
.setup2 .choice small { color: var(--text-3); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.setup2 .choice .ch-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(34,197,94,.4); display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .35s var(--spring-soft); }
.setup2 .choice .ch-check svg { width: 11px; height: 11px; stroke: #0b1a0f; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.setup2 .choice button.active .ch-check { opacity: 1; transform: none; }
/* the three workflow cards are the first thing you see: bigger, icon on top */
.setup2 .choice.big { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.setup2 .choice.big button { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 10px 0; justify-items: start; padding: 22px 22px 20px; min-height: 170px; }
.setup2 .choice.big .ch-ico { grid-row: auto; width: 44px; height: 44px; border-radius: 11px; }
.setup2 .choice.big .ch-ico svg, .setup2 .choice.big .ch-ico.brand i { width: 24px; height: 24px; }
.setup2 .choice.big b { font-size: 15.5px; padding-top: 4px; }
.setup2 .choice.big small { font-size: 12.5px; }

/* ─── Checklist (OBS assistant) ─────────────────────────────── */
.setup2 .check { display: grid; gap: 6px; }
.setup2 .check div { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; font-size: 13px; animation: riseIn .4s var(--ease) both; }
.setup2 .check div:nth-child(2) { animation-delay: .04s; }
.setup2 .check div:nth-child(3) { animation-delay: .08s; }
.setup2 .check div:nth-child(4) { animation-delay: .12s; }
.setup2 .check div:nth-child(5) { animation-delay: .16s; }
.setup2 .check div:nth-child(6) { animation-delay: .2s; }
.setup2 .check div:nth-child(7) { animation-delay: .24s; }
.setup2 .check i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.16); background: none; display: grid; place-items: center; flex: none; box-shadow: none; transition: background .3s, border-color .3s; }
.setup2 .check .ok i { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 10px rgba(34,197,94,.4); }
.setup2 .check .ok i::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #0b1a0f; border-bottom: 2px solid #0b1a0f; transform: translateY(-1px) rotate(-45deg); }
.setup2 .check .bad i { border-color: #ef4444; background: rgba(239,68,68,.25); }
.setup2 .check .warn i { border-color: var(--accent); background: rgba(251,191,36,.2); }
.setup2 .check span { flex: 1; }
.setup2 .check small { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

/* ─── Lists, results, fields ────────────────────────────────── */
.setup2 .ingests { gap: 6px; }
.setup2 .ingest { padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.028); border-color: rgba(255,255,255,.07); transition: border-color .2s, background .2s; }
.setup2 .ingest:hover { border-color: rgba(255,255,255,.16); }
.setup2 .ingest.active { border-color: var(--accent-line); background: var(--accent-soft); }
.setup2 .result { border-radius: 10px; animation: riseIn .4s var(--ease) both; }
.setup2 .result.wait { border: 1px dashed rgba(255,255,255,.18); color: var(--text-2); }
.setup2 .result .spinner { flex: none; width: 18px; min-width: 0; }
.setup2 .inspector { border-radius: 12px; background: rgba(255,255,255,.028); }
.setup2 .ctl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup2 .sp-big .copyf code { font-size: 14px; padding: 12px 14px; }
.setup2 .field .txt { height: 40px; }

@media (max-width: 720px) {
  .sp-step span { display: none; }
  .sp-card { padding: 20px; }
}