/* WritePlainly v2 — Auth + Onboarding
   Design: docs/designs/redesign-v2/project/redesign/wp-auth.jsx.
   Centered column on a white canvas; system type; ink accent. Tokens only.
   base_v2 does not load css/styles.css, so the password-strength meter styles
   it needs are included here. */

/* ── Frame ── */
.wp-auth { min-height: 100vh; display: flex; flex-direction: column; }
.wp-auth-header { height: 56px; display: flex; align-items: center; padding: 0 20px; gap: 10px; }
.wp-auth-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.wp-auth-logo-word { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.wp-auth-header-spacer { flex: 1; }
.wp-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px 72px; }
.wp-auth-col { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.wp-auth-col.wp-wide { width: 560px; }

/* ── Headings ── */
.wp-auth-title { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; text-align: center; color: var(--ink); }
.wp-auth-sub { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.6; text-align: center; }

/* ── Banners (flash + inline) ── */
.wp-auth-banner { font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: var(--radius-s); }
.wp-auth-banner.wp-risk { background: var(--risk-bg); color: var(--risk); }
.wp-auth-banner.wp-good { background: var(--good-bg); color: var(--good); }
.wp-auth-banner.wp-info { background: var(--bg-subtle); color: var(--ink-2); }

/* ── Form ── */
.wp-auth-form { display: flex; flex-direction: column; gap: 16px; }
.wp-auth-google { width: 100%; justify-content: center; height: 38px; }
.wp-auth-sep { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 11.5px; }
.wp-auth-sep::before, .wp-auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--hairline-soft); }

.wp-auth-field { display: flex; flex-direction: column; gap: 6px; }
.wp-auth-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }

.wp-input {
  height: 38px; border-radius: var(--radius-s); border: 1px solid var(--hairline);
  padding: 0 12px; font-size: 13.5px; font-family: var(--font-ui); color: var(--ink);
  outline: none; background: var(--bg); width: 100%;
  transition: border-color 0.15s var(--ease);
}
.wp-input:focus { border-color: var(--ink); }
.wp-input.cp-error, .wp-input[aria-invalid="true"] { border-color: var(--risk); }
.wp-input-wrap { position: relative; display: flex; align-items: center; }
.wp-has-trail { padding-right: 64px; }
.wp-input-trail {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 4px 8px; border-radius: var(--radius-s);
}
.wp-input-trail:hover { background: var(--bg-hover); color: var(--ink); }
.wp-textarea { height: auto; min-height: 78px; padding: 10px 12px; line-height: 1.5; resize: vertical; }

.wp-btn-full { width: 100%; justify-content: center; height: 38px; }

.wp-auth-link { font-size: 12px; color: var(--ink-2); text-align: center; text-decoration: none; }
.wp-auth-link:hover { color: var(--ink); text-decoration: underline; }
.wp-auth-switch { font-size: 12.5px; color: var(--ink-2); text-align: center; }
.wp-auth-switch a { color: var(--ink); font-weight: 600; text-decoration: none; }
.wp-auth-switch a:hover { text-decoration: underline; }
.wp-auth-trust { font-size: 11px; color: var(--ink-3); text-align: center; font-family: var(--font-mono); }
.wp-auth-help { font-size: 11.5px; color: var(--ink-3); }

.wp-field-err { font-size: 11.5px; color: var(--risk); line-height: 1.5; }
.wp-field-err-link { color: var(--ink); font-weight: 600; margin-left: 4px; }

/* ── Centered states (verify / success) ── */
.wp-auth-center { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.wp-success-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--good-bg);
  display: inline-flex; align-items: center; justify-content: center; color: var(--good);
}
.wp-auth-strong { color: var(--ink); font-weight: 600; }
.wp-auth-resend { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.wp-auth-resend strong { font-family: var(--font-mono); color: var(--ink); }

/* ── Password strength meter (cp-strength; needed since styles.css isn't loaded) ── */
.cp-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cp-strength-bars { display: flex; gap: 4px; flex: 1; }
.cp-strength-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--hairline); transition: background 0.15s var(--ease); }
.cp-strength-bar.on { background: var(--good); }
.cp-strength-bar.on.weak { background: var(--risk); }
.cp-strength-label { font-size: 11px; color: var(--ink-3); min-width: 48px; }

/* ── Onboarding ── */
.wp-ob-col { gap: 18px; }
.wp-ob-head { text-align: center; }
.wp-ob-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin: 10px 0 6px; color: var(--ink); }
.wp-ob-form { display: flex; flex-direction: column; gap: 18px; }
.wp-ob-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp-ob-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.wp-gap-12 { gap: 12px; }
.wp-ob-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wp-ob-stack { display: flex; flex-direction: column; gap: 8px; }
.wp-ob-actions { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.wp-ob-skip { border: 0; color: var(--ink-3); }

/* Step dots (ADots) */
.wp-ob-dots { display: flex; gap: 6px; justify-content: center; }
.wp-ob-dots > span { width: 6px; height: 6px; border-radius: 999px; background: var(--hairline); transition: all 0.25s var(--ease); }
.wp-ob-dots > span.wp-on { background: var(--ink); }
.wp-ob-dots > span.wp-current { width: 18px; }

/* Selectable cards (ACard) */
.wp-card-opt {
  appearance: none; cursor: pointer; text-align: left; background: var(--bg); font-family: var(--font-ui);
  border: 1px solid var(--hairline); padding: 14px 16px; border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.wp-card-opt:hover { border-color: var(--ink-3); }
.wp-card-opt.wp-selected { border: 1.5px solid var(--ink); padding: 13.5px 15.5px; box-shadow: 0 4px 14px rgba(17, 17, 20, 0.07); }
.wp-card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.wp-card-sub { font-size: 12px; color: var(--ink-2); }

/* Radio rows (fallback list + language rows) */
.wp-radio-opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--hairline); padding: 12px 16px; border-radius: var(--radius);
  transition: border-color 0.15s var(--ease);
}
.wp-radio-opt:hover { border-color: var(--ink-3); }
.wp-radio-opt input { accent-color: var(--ink); }
.wp-radio-opt.wp-selected { border: 1.5px solid var(--ink); }
.wp-radio-lang-code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; width: 20px; }
.wp-radio-lang-body { flex: 1; display: flex; flex-direction: column; }
.wp-radio-lang input { margin-left: auto; order: 3; }

/* Toggle row (also-enable-other-languages) */
.wp-ob-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.wp-ob-toggle input { accent-color: var(--ink); width: 16px; height: 16px; }

.wp-ob-success-actions { display: flex; gap: 8px; margin-top: 8px; }
.wp-ob-success-actions form { margin: 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .wp-ob-grid2, .wp-ob-grid3 { grid-template-columns: 1fr; }
  .wp-auth-col.wp-wide { width: 360px; }
}