/* Welcome preview: auth and first run share the same quiet, framed surface.
   Hidden label/title hooks retain the original layout with the preview off. */
.kairos-redesign .onboarding-overlay {
  box-sizing: border-box; flex-direction: column; justify-content: flex-start;
  gap: 18px; padding: 64px 24px 32px; overflow-y: auto; isolation: isolate;
  font-family: var(--rd-font-ui); color: var(--rd-ink);
  background: var(--rd-ground);
}
.kairos-redesign .onboarding-overlay::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(var(--wash-rgb), .65), rgba(var(--wash-rgb), .8)),
    url('../img/home-figure.webp') 70% 40% / cover no-repeat;
}
.kairos-redesign[data-halftone='off'] .onboarding-overlay::before,
.kairos-redesign[data-halftone='none'] .onboarding-overlay::before { display: none; }
.kairos-redesign .onboarding-overlay::after {
  content: 'KAIROS'; order: -1; flex-shrink: 0; font-size: 15px; letter-spacing: .42em;
  line-height: 24px; text-shadow: 0 0 12px var(--rd-ground);
}
.kairos-redesign .onboarding-card {
  flex-shrink: 0; box-sizing: border-box; width: 420px; max-width: 100%; max-height: none;
  overflow: visible; padding: 28px 30px; border-radius: 22px;
  background: color-mix(in srgb, var(--rd-surface-solid) 96%, transparent);
  border: 1px solid var(--rd-line-strong); box-shadow: 0 24px 70px rgba(var(--shade-rgb), .18);
}
.kairos-redesign .onboarding-card h2 {
  margin: 0 0 14px; font-family: var(--rd-font-title); font-style: italic;
  font-weight: 500; font-size: 36px; line-height: 1.08; letter-spacing: 0; color: var(--rd-ink);
}
.kairos-redesign .welcome-auth-card:has(.welcome-preview-title) .welcome-original-title { display: none; }
.kairos-redesign .welcome-preview-title[hidden] { display: inline; }
.kairos-redesign .welcome-auth-card[data-instance]::before {
  content: attr(data-instance); display: block; margin-bottom: 14px;
  color: var(--rd-ink-dim); font-size: 12px; letter-spacing: .04em;
}
.kairos-redesign .onboarding-card .sub { font-size: 14px; line-height: 1.5; margin-bottom: 14px; color: var(--rd-ink-dim); }
.kairos-redesign .welcome-field-label[hidden] {
  display: block; font-size: 12px; line-height: 1.5; color: var(--rd-ink-dim); margin: 12px 0 4px;
}
.kairos-redesign .welcome-field-label:has(+ input[style*='display:none']) { display: none; }
.kairos-redesign .onboarding-card input:not([type='checkbox']),
.kairos-redesign .onboarding-card textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--rd-line-strong); border-radius: 10px;
  background: var(--rd-ground); font: 14px var(--rd-font-ui); color: var(--rd-ink);
}
.kairos-redesign .welcome-auth-card input::placeholder { color: transparent; }
.kairos-redesign .onboarding-card .meta { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.kairos-redesign .welcome-auth-card .meta:empty { display: none; }
.kairos-redesign .onboarding-card .onboarding-actions { gap: 8px; margin-top: 20px; }
.kairos-redesign .onboarding-card .btn { min-height: 44px; padding: 10px 18px; white-space: normal; font-size: 14px; }
.kairos-redesign .onboarding-card .onboarding-actions > .btn:nth-last-child(1 of .btn) {
  background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent;
}
.kairos-redesign .onboarding-card .onboarding-actions > .btn:nth-last-child(1 of .btn):hover { background: var(--rd-primary-hover); }
.kairos-redesign .welcome-auth-card .onboarding-actions > div:empty { display: none; }
.kairos-redesign .welcome-auth-card .onboarding-actions > .btn { width: 100%; }
.kairos-redesign .welcome-back-link {
  text-align: left !important; text-decoration: none !important; margin: 8px 0 0 !important;
  display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--rd-ink-dim);
}
.kairos-redesign .welcome-back-link:hover { color: var(--rd-ink); text-decoration: underline !important; }
.kairos-redesign .onboarding-card :is(input, textarea, button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--rd-focus); outline-offset: 3px;
}
.kairos-redesign .welcome-wizard-card,
.kairos-redesign .welcome-wizard-card.onboarding-model-card { width: 680px; }
.kairos-redesign .onboarding-steps { justify-content: center; align-items: center; gap: 8px; margin-bottom: 22px; }
.kairos-redesign .onboarding-steps .dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: rgba(var(--ink-rgb), .2); }
.kairos-redesign .onboarding-steps .dot.active { width: 22px; background: var(--rd-ink); }
.kairos-redesign .welcome-wizard-card h2 { font-size: 34px; }
.kairos-redesign .welcome-wizard-card:is([data-step='welcome'], [data-step='finish']) h2 { text-align: center; font-size: 44px; }
.kairos-redesign .welcome-wizard-card:is([data-step='welcome'], [data-step='finish']) .sub { text-align: center; font-size: 15px; }
.kairos-redesign .welcome-wizard-card[data-step='vault'] .meta { padding: 10px 12px; border-radius: 12px; background: var(--rd-ground); }
.kairos-redesign .welcome-wizard-card[data-step='vault'] div:has(> .btn):not(.onboarding-actions) { flex-wrap: wrap; }
.kairos-redesign .welcome-wizard-card[data-step='vault'] label { font-size: 13px; color: var(--rd-ink-dim); min-height: 30px; }
.kairos-redesign .welcome-wizard-card[data-step='remote'] .meta { padding: 12px 14px; background: var(--rd-ground); border-radius: 12px; }
.kairos-redesign .welcome-wizard-card[data-step='discord'] input { margin: 0 !important; }
@media (max-width: 600px) {
  .kairos-redesign .onboarding-overlay { padding: 30px 16px 24px; gap: 16px; }
  .kairos-redesign .onboarding-card,
  .kairos-redesign .welcome-wizard-card.onboarding-model-card { padding: 24px 20px; }
  .kairos-redesign .onboarding-card h2 { font-size: 32px; }
  .kairos-redesign .welcome-wizard-card:is([data-step='welcome'], [data-step='finish']) h2 { font-size: 38px; }
  .kairos-redesign .onboarding-actions { flex-wrap: wrap; }
  .kairos-redesign .onboarding-card .onboarding-actions .btn { padding-inline: 14px; }
}