/* Onboarding overlay — liquid glass, accent-tinted (matches command palette
   + paywall + share-modal vocabulary), mandatory flow (no Skip / no X). */

.onboard {
  position: fixed; inset: 0;
  z-index: 9100;
  background: radial-gradient(120% 80% at 50% 20%,
    color-mix(in oklch, var(--accent) 12%, rgba(0,0,0,0.72)),
    rgba(0,0,0,0.78));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: grid;
  place-items: center;
  padding: 32px 16px;
  animation: obFade .2s ease-out;
}
@keyframes obFade { from { opacity: 0; } to { opacity: 1; } }

.onboard__card {
  width: min(540px, calc(100vw - 32px));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 40%, rgba(255,255,255,0.03)),
    rgba(20, 18, 22, 0.55);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 32px 32px 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 32px 100px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  color: var(--text, #ece9f2);
  position: relative;
  animation: obSlide .26s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
@keyframes obSlide {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.onboard__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in oklch, var(--accent) 30%, transparent),
      color-mix(in oklch, var(--accent) 12%, transparent)),
    rgba(255,255,255,0.04);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, rgba(255,255,255,0.08));
  display: grid; place-items: center;
  color: oklch(0.92 0.05 var(--accent-hue));
  margin-bottom: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 24px color-mix(in oklch, var(--accent) 25%, transparent);
}
.onboard__icon svg { width: 26px; height: 26px; }

.onboard__title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: #fff;
  text-wrap: pretty;
}
.onboard__body {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  text-wrap: pretty;
}

/* feature checklist under body */
.onboard__details {
  list-style: none;
  margin: -4px 0 22px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onboard__details li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
}
.onboard__details li svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: oklch(0.78 0.16 var(--accent-hue));
  stroke-width: 2.5;
}

/* "Two-factor enabled" success row, replaces details after 2FA flow */
.onboard__success {
  display: flex; align-items: center; gap: 10px;
  margin: -4px 0 22px;
  padding: 12px 14px;
  background: color-mix(in oklch, var(--accent) 12%, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in oklch, var(--accent) 35%, rgba(255,255,255,0.08));
  border-radius: 14px;
  font-size: 14px;
  color: #fff;
}
.onboard__success svg {
  width: 16px; height: 16px;
  color: oklch(0.85 0.16 var(--accent-hue));
  stroke-width: 2.5;
  flex-shrink: 0;
}

.onboard__dots {
  display: flex; gap: 6px;
  margin-bottom: 20px;
}
.onboard__dot {
  width: 24px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.14);
  transition: background .12s, width .18s;
}
.onboard__dot.is-done {
  background: color-mix(in oklch, var(--accent) 55%, rgba(255,255,255,0.2));
}
.onboard__dot.is-active {
  background: linear-gradient(90deg,
    oklch(0.7 0.18 var(--accent-hue)),
    oklch(0.85 0.12 var(--accent-hue)));
  width: 36px;
}

.onboard__actions {
  display: flex; gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}
.onboard__actions-spacer { flex: 1; }
.onboard__btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #ece9f2;
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s, filter .12s;
}
.onboard__btn:active { transform: translateY(1px); }
.onboard__btn--ghost {
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.onboard__btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}
.onboard__btn--primary {
  background: linear-gradient(135deg,
    oklch(0.62 0.20 var(--accent-hue)) 0%,
    oklch(0.52 0.22 var(--accent-hue)) 100%);
  color: #fff;
  font-weight: 600;
  border-color: color-mix(in oklch, var(--accent) 50%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 20px color-mix(in oklch, var(--accent) 35%, transparent);
}
.onboard__btn--primary:hover { filter: brightness(1.08); }

.onboard__progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
  margin: 0 -32px;
}
.onboard__progress-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg,
    oklch(0.62 0.20 var(--accent-hue)),
    oklch(0.78 0.16 var(--accent-hue)));
  transition: width .25s ease;
}

/* Light-theme tuning */
:root[data-theme="light"] .onboard {
  background: radial-gradient(120% 80% at 50% 20%,
    color-mix(in oklch, var(--accent) 8%, rgba(48,40,28,0.45)),
    rgba(28,24,20,0.55));
}
:root[data-theme="light"] .onboard__card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.4)),
    rgba(246, 244, 239, 0.7);
  border-color: rgba(28,26,22,0.10);
  color: var(--text);
}
:root[data-theme="light"] .onboard__title { color: var(--text); }
:root[data-theme="light"] .onboard__body { color: rgba(28,26,22,0.78); }
:root[data-theme="light"] .onboard__details {
  background: rgba(28,26,22,0.04);
  border-color: rgba(28,26,22,0.08);
}
:root[data-theme="light"] .onboard__details li { color: rgba(28,26,22,0.82); }
:root[data-theme="light"] .onboard__btn--ghost {
  border-color: rgba(28,26,22,0.14);
  color: rgba(28,26,22,0.78);
  background: rgba(255,255,255,0.4);
}
:root[data-theme="light"] .onboard__btn--ghost:hover {
  background: rgba(255,255,255,0.7);
  color: var(--text);
}
:root[data-theme="light"] .onboard__progress { background: rgba(28,26,22,0.08); }