/* Account, sign-in, register, onboarding, password reset, edit-name.
 *
 * Ported from redesign/v1 static/redesign/css/account.css. Shared
 * vocabulary: .narrow container, .page-eyebrow/.page-title/.page-lead,
 * .sect section, .field-row for account data, .chips for preferences,
 * .danger-sect for destructive actions.
 */

/* ---------- Narrow single-column page ---------- */
.narrow { max-width: 640px; margin: 0 auto; padding: 40px 32px 96px; }

.page-eyebrow {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--amber);
    margin: 28px 0 14px;
}
.page-title {
    font-family: var(--font-serif); font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.05; letter-spacing: -0.02em;
    margin: 0 0 16px;
}
.page-lead {
    font-family: var(--font-serif); font-style: italic;
    font-variation-settings: "opsz" 24, "SOFT" 65;
    font-size: 19px; line-height: 1.45;
    color: var(--muted); margin: 0 0 36px;
}

/* ---------- Combined auth page ---------- */
.auth-wrap {
    max-width: 420px; margin: 60px auto 60px;
    text-align: center; padding: 0 32px;
}
.auth-tabs {
    display: flex; gap: 0;
    background: var(--bg-2);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 28px;
}
.auth-tab {
    flex: 1; padding: 9px 12px;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--muted); border-radius: calc(var(--radius-md) - 2px);
    transition: background .15s, color .15s;
}
.auth-tab.active,
.auth-tab[aria-selected="true"] {
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.auth-tab:hover:not(.active) { color: var(--text); }

/* Panels — only the active one is shown */
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* ---------- Sign-in / register ---------- */
.signin-wrap {
    max-width: 420px; margin: 80px auto 40px;
    text-align: center; padding: 0 32px;
}
.signin-lion { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin-bottom: 28px; }
.signin-title {
    font-family: var(--font-serif); font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: 44px; line-height: 1; letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.signin-sub {
    font-family: var(--font-serif); font-style: italic;
    font-variation-settings: "opsz" 24, "SOFT" 65;
    color: var(--muted); font-size: 16px;
    margin: 0 0 32px; line-height: 1.5;
}
.sso-stack { display: flex; flex-direction: column; gap: 10px; }
.sso-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 24px;
    font: inherit; font-weight: 500; font-size: 15px;
    border-radius: var(--radius-md);
    text-decoration: none; border-bottom: none;
    border: 1px solid transparent;
    transition: transform .05s, background .15s;
}
.sso-btn:active { transform: translateY(1px); }
.sso-btn.apple { background: #000; color: #fff; border-color: #000; }
.sso-btn.apple:hover { background: #1a1a1a; }
.sso-btn.google { background: #fff; color: #1a1a1a; border: 1px solid #d2d2d2; }
.sso-btn.google:hover { background: #f5f5f5; }

.signin-fine {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: .04em;
    margin-top: 20px; line-height: 1.5;
}
.signin-fine a { color: var(--muted); }
.signin-back {
    display: block; margin-top: 24px;
    font-family: var(--font-serif); font-style: italic;
    color: var(--muted); font-size: 14px; border-bottom: none;
}
.signin-back:hover { color: var(--amber); }

/* Divider for "— or —" between SSO and email */
.or-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0;
    color: var(--muted);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
}
.or-divider::before,
.or-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* ---------- Form fields ---------- */
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label {
    display: block;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: .14em;
    text-transform: uppercase; margin: 0 0 6px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    background-color: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    font: inherit; font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--muted);
    opacity: .6;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: 0;
    border-color: var(--amber);
}
.form-help {
    font-size: 12px; color: var(--muted);
    margin-top: 4px;
}
.form-help a,
.form-help a:link,
.form-help a:visited {
    color: var(--muted);
    border-bottom: 1px dotted var(--rule-2);
}
.form-help a:hover { color: var(--amber-2); border-bottom-color: currentColor; }
[data-theme="dark"] .form-help a:hover { color: var(--amber); }
.form-error {
    color: var(--brand-danger, #9E4A3E);
    font-size: 13px; margin-top: 4px;
}
.form-actions {
    margin-top: 24px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* ---------- Account sections ---------- */
.sect { padding: 36px 0; border-top: 1px solid var(--rule); }
.sect:first-of-type { border-top: none; }
.sect h2 {
    font-family: var(--font-serif); font-weight: 500;
    font-variation-settings: "opsz" 72, "SOFT" 50;
    font-size: 24px; line-height: 1.2;
    letter-spacing: -0.012em; margin: 0 0 10px;
}
.sect .sub {
    font-family: var(--font-serif); font-style: italic;
    font-variation-settings: "opsz" 14, "SOFT" 65;
    color: var(--muted); font-size: 15px;
    margin: 0 0 20px;
}

.field-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.field-row:last-child { border-bottom: none; }
.field-label {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: .14em;
    text-transform: uppercase; font-weight: 500;
    display: block; margin-bottom: 4px;
}
.field-value {
    font-family: var(--font-serif); font-size: 17px;
}
.field-action {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); border-bottom: none;
    letter-spacing: .06em; text-transform: uppercase;
}
.field-action:hover { color: var(--amber); }

/* ---------- Chips (preferences / languages) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chips .chip {
    padding: 8px 14px; border-radius: 999px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--rule-2));
    color: var(--amber);
    font-size: 13px;
}
.inline-link {
    display: inline-block; margin-top: 8px;
    font-family: var(--font-sans); font-size: 14px;
    color: var(--amber); border-bottom: 1px dotted currentColor;
}

/* ---------- Onboarding: tiles grid ---------- */
.onboarding-step { padding: 48px 0 32px; }
.onboarding-step h2 {
    font-family: var(--font-serif); font-weight: 400;
    font-variation-settings: "opsz" 96, "SOFT" 40;
    font-size: 32px; text-align: center;
    margin: 0 auto 12px; max-width: 18ch;
}
.onboarding-step .step-sub {
    text-align: center; max-width: 48ch; margin: 0 auto 32px;
    color: var(--muted); font-size: 16px;
}

.tiles {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.tile {
    position: relative;
    padding: 24px 22px;
    border: 1px solid var(--rule-2); border-radius: var(--radius-lg);
    background: var(--bg-2);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    text-align: left;
    display: block;
}
.tile:hover { border-color: var(--amber); transform: translateY(-1px); }
.tile input[type="checkbox"],
.tile input[type="radio"] {
    position: absolute; top: 14px; right: 14px;
    accent-color: var(--amber);
    width: 18px; height: 18px;
}
.tile-label {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-weight: 500; font-size: 22px; line-height: 1.1;
    letter-spacing: -0.01em; margin-bottom: 8px;
    display: block;
}
.tile-desc { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.5; max-width: 34ch; }

.levels {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.level-tile {
    padding: 20px 18px; text-align: center;
    border: 1px solid var(--rule-2); border-radius: var(--radius-md);
    background: var(--bg-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-weight: 500; font-size: 18px;
}
.level-tile:hover { border-color: var(--amber); color: var(--amber); }
.level-tile input[type="radio"] { accent-color: var(--amber); margin-right: 8px; }

.step-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 36px; flex-wrap: wrap; gap: 12px;
}
.step-actions .skip {
    color: var(--muted); border-bottom: none; font-size: 13px;
}
.step-actions .skip:hover { color: var(--amber); }

/* ---------- Danger zone ---------- */
.danger-sect { padding: 36px 0; border-top: 1px solid var(--rule); }
.danger-sect h2 { color: var(--brand-danger, #9E4A3E); }
.danger-sect .sub { max-width: 60ch; }
.danger-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn--danger-ghost {
    background: transparent;
    color: var(--brand-danger, #9E4A3E);
    border: 1px solid var(--brand-danger, #9E4A3E);
    padding: 10px 18px; border-radius: var(--radius-md);
    cursor: pointer; font: inherit; font-size: 14px;
    text-decoration: none; border-bottom: 1px solid var(--brand-danger, #9E4A3E);
}
.btn--danger-ghost:hover { background: color-mix(in srgb, var(--brand-danger, #9E4A3E) 10%, transparent); }

@media (max-width: 600px) {
    .field-row { grid-template-columns: 1fr; }
    .field-action { text-align: left; padding-top: 4px; }
    .tiles { grid-template-columns: 1fr; }
    .levels { grid-template-columns: repeat(3, 1fr); }
}