/* The checklist uses interface semantic colours so a later theme can override them. */
.onboarding:empty { display: none; }
.onboarding-card, .onboarding-settings { min-width: 0; }
.onboarding-card h2, .onboarding-settings h2, .onboarding-step h3 { margin: 0; }
.onboarding-card p, .onboarding-settings p { margin: 0; }
.onboarding-heading, .onboarding-step-heading { display: flex; align-items: center; gap: 12px; }
.onboarding-heading { justify-content: space-between; align-items: flex-start; }
.onboarding-heading p, .onboarding-hint { color: var(--muted); font-size: 14px; }
.onboarding-progress { color: var(--blue-dark); font-weight: 700; white-space: nowrap; }
.onboarding-platforms, .onboarding-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.onboarding-platform { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); background: var(--canvas); cursor: pointer; font: inherit; font-weight: 700; }
.onboarding-platform[aria-pressed="true"] { color: #fff; background: var(--blue); border-color: var(--blue); }
.onboarding-steps { list-style: none; padding: 0; margin: 14px 0 0; }
.onboarding-step { padding: 15px 0; border-top: 1px solid var(--line); }
.onboarding-step > div + div { margin: 8px 0 0 36px; }
.onboarding-step p { margin: 0 0 8px; }
.onboarding-number { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; color: var(--blue-dark); background: var(--canvas); font-size: 13px; font-weight: 700; }
.onboarding-step h3 { flex: 1; font-size: 16px; }
.onboarding-status { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.onboarding-status.done { color: var(--green); }
.onboarding-confirm { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; cursor: pointer; }
.onboarding-confirm input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--blue); }
.onboarding-notice { margin-top: 14px; padding: 12px; border-radius: 12px; color: var(--red); background: var(--red-bg); }
.onboarding-notice .button { margin-top: 8px; }
.onboarding-help { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.onboarding-help-text { margin: 10px 0 !important; white-space: pre-line; overflow-wrap: anywhere; }
.onboarding-settings > p { margin-top: 8px; }
@media (max-width: 480px) { .onboarding-step > div + div { margin-left: 0; } .onboarding-actions .button { flex: 1 1 auto; } }
.onboarding-blocked { color: var(--amber); background: var(--amber-bg); border-radius: 10px; padding: 10px 12px; }