/* pages/account.css — Account (family-layer builder). Owned by the page's builder; the
 * shared design system lives in the webkit (kit.css). Layout only; colours via tokens. */

.page-head { margin-bottom: var(--gap); }
.page-head h1 { margin: 0 0 4px; }
.page-head p { margin: 0; max-width: 70ch; }

/* ---- profile ---- */
.acct-profile { display: flex; align-items: center; gap: 14px; }
.acct-avatar { width: 48px; height: 48px; flex: none; font-size: 1rem; }
.acct-id { min-width: 0; }
.acct-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.acct-email, .acct-region { font-size: 0.86rem; }

/* ---- status (approval + premium) ---- */
.acct-status h2 { margin-bottom: 12px; }
.acct-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.acct-row:first-of-type { border-top: none; padding-top: 0; }
.acct-row-main { min-width: 0; }
.acct-row-t { font-weight: 650; margin-bottom: 2px; }
.acct-row .chip { flex: none; margin-top: 2px; }
.acct-feats { margin-top: 12px; }
.acct-feats-t { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.acct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-expiry { margin: 10px 0 0; font-size: 0.85rem; }

/* ---- timezone (schedules) ---- */
.acct-tz-current { margin-bottom: 14px; }
.acct-tz-select { width: 100%; max-width: 340px; }
.acct-tz-detected { margin: 0 0 10px; }
.acct-tz .actions > * { flex: 0 0 auto; }

/* ---- security note ---- */
.acct-security p { margin: 0; max-width: 70ch; }

/* ---- danger zone: delete ---- */
.acct-danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.acct-danger-zone h2 { color: var(--danger); margin-bottom: 6px; }
.acct-danger-zone > p { margin: 0 0 12px; max-width: 70ch; }
.acct-del-err:empty { display: none; }
.acct-del-actions { margin-top: 12px; }
.acct-del-actions > * { flex: 0 0 auto; }
/* Stage 11f: the "make a co-parent the primary first" handover note. */
.acct-del-handover:empty { display: none; }
.acct-del-handover { margin: 0 0 12px; }
.acct-handover-link { font-weight: 650; }

/* ---- sign out ---- */
.acct-signout { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.acct-signout h2 { margin: 0 0 4px; }
.acct-signout p { margin: 0; }
.acct-signout .btn { flex: none; }

@media (max-width: 560px) {
  .acct-signout .btn { width: 100%; }
}

/* Protection alerts preference (stage 10b): shares the weekly-email panel layout. */
.account .acct-alerts p { margin-bottom: 4px; }