/* Onboard page — externalised from onboard.html for strict CSP
   (audit #3 + #34).
   Q-2: onboard now shares the login's branded gradient + centred card so
   the two auth screens feel like one product. The expired-token path
   gets a designed empty-state with recovery CTAs, not a bare red line. */

body { margin: 0; padding: 0; }
.onb-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  background: var(--brand-primary);
  background: linear-gradient(160deg, var(--brand-gradient-start) 0%, var(--brand-primary) 50%, var(--brand-gradient-end) 100%);
}
.onb-box {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 40px 28px 32px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.onb-box h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.onb-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: 24px;
  line-height: var(--leading-normal);
}
.onb-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.onb-icon--error {
  background: var(--status-rejected-bg);
  color: var(--status-rejected);
}
.onb-icon svg { width: 28px; height: 28px; }
.onb-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onb-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-surface-alt);
  font-size: 16px; /* iOS zoom-proof */
  font-family: var(--font-sans);
  color: var(--text-primary);
  transition: border-color 150ms;
  box-sizing: border-box;
}
.onb-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  background: var(--bg-surface);
}
.onb-error {
  color: var(--status-rejected);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  display: none;
}
.onb-error.is-shown { display: block; }
.onb-btn {
  min-height: 48px;
  font-size: 17px;
  font-weight: var(--weight-semibold);
}
.onb-secondary-cta {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.onb-secondary-cta a { color: var(--brand-primary); text-decoration: none; }
.onb-secondary-cta a:hover { text-decoration: underline; }
.onb-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}