/* Agent setup: one stage at a time, in the same rows and buttons as the agent list. */
.onboarding-card { max-width:640px; }
.onboarding-card .cp-section-heading { margin-bottom:6px; }
.onboarding-lead { margin:0 0 16px; font-size:13px; line-height:1.6; color:var(--cp-muted); }
.onboarding-permissions { border-top:1px solid var(--cp-border); margin-bottom:16px; }
.onboarding-permission { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:60px; padding:10px; border-bottom:1px solid #e9ebe6; }
.onboarding-permission[data-connected='false'] .cp-agent-meta { color:var(--cp-amber); }
.onboarding-permission[data-connected='null'] .cp-agent-meta { color:var(--cp-red); }
.onboarding-done { display:inline-flex; align-items:center; gap:6px; color:var(--cp-green); font:450 13px var(--font-display); }
.onboarding-done svg { width:16px; height:16px; }
.onboarding-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; }
.onboarding-actions .cp-inline { align-self:center; }
.onboarding-result { padding:24px; border:1px solid var(--cp-border); border-radius:4px; background:var(--cp-soft); }
.onboarding-result-icon { color:var(--cp-green); margin-bottom:8px; }
.onboarding-result-icon svg { width:28px; height:28px; }
.onboarding-result h5 { margin:0 0 6px; font:500 15px var(--font-display); }
.onboarding-result p { margin:0 0 16px; font-size:13px; line-height:1.6; color:var(--cp-muted); }
.onboarding-result .onboarding-actions { justify-content:flex-start; }
.onboarding-note { margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--cp-muted); overflow-wrap:anywhere; }
.onboarding-note[data-error='true'] { color:var(--cp-red); }
/* Vertical stepper: every stage stays visible, a line connects the markers. */
.onboarding-steps { list-style:none; margin:8px 0 0; padding:0; }
.onboarding-step { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:16px; padding-bottom:24px; }
.onboarding-step:not(:last-child)::before { content:''; position:absolute; left:13px; top:30px; bottom:2px; width:1px; background:var(--cp-border); }
.onboarding-step[data-state='done']:not(:last-child)::before { background:var(--cp-green); opacity:.45; }
.onboarding-marker { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:500 12px var(--font-display); border:1px solid var(--cp-border); background:#fff; color:var(--cp-muted); }
.onboarding-marker svg { width:15px; height:15px; }
.onboarding-step[data-state='done'] .onboarding-marker { background:var(--cp-green); border-color:var(--cp-green); color:#fff; }
.onboarding-step[data-state='current'] .onboarding-marker { border-color:var(--cp-ink, #1f2a24); color:var(--cp-ink, #1f2a24); box-shadow:0 0 0 4px rgba(31,42,36,.07); }
.onboarding-step-body { min-width:0; padding-top:4px; }
.onboarding-step-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.onboarding-step-title { font:500 14px var(--font-display); }
.onboarding-step[data-state='todo'] .onboarding-step-title { color:var(--cp-muted); }
.onboarding-step-state { font:450 11px var(--font-display); letter-spacing:.04em; text-transform:uppercase; color:var(--cp-muted); }
.onboarding-step[data-state='done'] .onboarding-step-state { color:var(--cp-green); }
.onboarding-step-summary { margin:4px 0 12px; font-size:13px; line-height:1.6; color:var(--cp-muted); }
.onboarding-step .onboarding-actions { justify-content:flex-start; }
.onboarding-step .onboarding-permissions { margin:4px 0 12px; }
.onboarding-step[data-state='done'] .onboarding-permission { min-height:48px; padding:6px 10px; }
.onboarding-update { display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; padding:12px 14px; border:1px solid var(--cp-border); border-left:3px solid var(--cp-green); border-radius:4px; background:var(--cp-soft); font-size:13px; line-height:1.5; }
.onboarding-update svg { width:16px; height:16px; flex:none; margin-top:2px; color:var(--cp-green); }
.onboarding-logo { background:#fff; }
.onboarding-wait { display:grid; gap:12px; }
.onboarding-progress { height:4px; border-radius:2px; background:var(--cp-border); overflow:hidden; }
.onboarding-progress span { display:block; height:100%; background:var(--cp-green); transition:width 1s linear; }
.onboarding-logo img { width:22px; height:22px; object-fit:contain; display:block; }
@media(max-width:700px) {
  .onboarding-permission { grid-template-columns:32px minmax(0,1fr); }
  .onboarding-permission > :last-child { grid-column:2; justify-self:start; }
}
.onboarding-connect { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 0 12px; padding:12px 14px; border:1px solid var(--cp-border); border-radius:6px; background:var(--cp-soft); }
.onboarding-services { display:flex; gap:10px; flex-wrap:wrap; }
.onboarding-service { display:flex; flex-direction:column; align-items:center; gap:4px; width:64px; }
.onboarding-service .onboarding-logo { position:relative; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--cp-border); border-radius:8px; }
.onboarding-service[data-connected='false'] .onboarding-logo, .onboarding-service[data-connected='null'] .onboarding-logo { opacity:.55; filter:grayscale(.6); }
.onboarding-service-name { font-size:11px; line-height:1.2; text-align:center; color:var(--cp-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:64px; }
.onboarding-tick { position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--cp-green); color:#fff; border:2px solid #fff; }
.onboarding-tick svg { width:10px; height:10px; }
.onboarding-connect-all { background:#1f2937 !important; color:#fff !important; border-color:#1f2937 !important; border-radius:6px; }
.onboarding-connect-all:hover:not(:disabled) { background:#111827 !important; }
.onboarding-progress-busy span { width:35%; animation:onboarding-busy 1.6s ease-in-out infinite; }
@keyframes onboarding-busy { 0% { transform:translateX(-100%); } 100% { transform:translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .onboarding-progress-busy span { animation:none; width:100%; opacity:.5; } }
.onboarding-progress-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--cp-muted); font-variant-numeric:tabular-nums; }
/* A soft shine runs over the filled part, so the bar always shows that something is happening. */
.onboarding-progress-live span { position:relative; overflow:hidden; }
.onboarding-progress-live span::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-100%); animation:onboarding-shine 1.4s ease-in-out infinite; }
@keyframes onboarding-shine { to { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .onboarding-progress-live span::after { animation:none; } }

/* Service tiles in the setup lift slightly on hover, like the agent icons. */
.onboarding-service .onboarding-logo { transition:transform .18s ease, box-shadow .18s ease; }
.onboarding-service:hover .onboarding-logo { transform:translateY(-1px) scale(1.08); box-shadow:0 2px 6px rgba(28,44,36,.12); }
@media(prefers-reduced-motion:reduce) {
  .onboarding-service .onboarding-logo { transition:none; }
  .onboarding-service:hover .onboarding-logo { transform:none; }
}