/* account/account.css -- page-owned, hand-written, not vendored, not baked.
 *
 * Task 7 reskin (2026-09-19): account.js's markup now follows _design/account.html's classes
 * (ct-hero, ct-section, ct-rows, ct-row, ct-field-inline, ct-segmented, ct-switch, ct-media,
 * dialog.ct-dialog, ...), all of which are styled entirely by assets/ct/design-system.css and
 * assets/ct/shell.css. This file exists only for what neither of those covers, and every rule
 * below is either a bare structural need (no visual value of its own) or built from --ct-*
 * tokens. No raw hex, and no cms.css/tokens.js variable (--font-display, --font-ui, --font-body,
 * --radius, --ink*, --border*) appears anywhere here. Page-only classes are ac- prefixed, per
 * this repo's rule that a page-local class must never shadow a .ct-* design-system name.
 *
 * Dark mode needs nothing extra here: every value below is a --ct-* custom property, and
 * design-system.css already redefines those under html[data-mode="dark"] and, for
 * html[data-mode="system"], under prefers-color-scheme. Removed entirely in this pass: the
 * whole .ac-app/.ac-hero/.ac-button/.ac-segmented/.ac-dialog family the old hand-rolled
 * layout used (including its own --pi-* references and raw hex accents), the dyslexia-friendly
 * font checkbox, and the fake Theme <select>. .ac-row itself came back in a later pass (ticket
 * 21, 2026-09-19) as a single, narrow spacing override -- see its own comment below -- not a
 * revival of the old family.
 */

/* Shown before any script runs (the literal markup in account/index.html) and, briefly, while
 * the real session check and the profile read are still in flight. --ct-* only, so it needs no
 * .pi-member bridge class on <body> to render correctly either before or after that class is
 * added. Also covers the signed-out door and the "could not load" failure state. */
.ac-empty { margin: var(--ct-space-8) auto; max-width: 32rem; text-align: center; color: var(--ct-text-secondary); }
.ac-empty h1 { color: var(--ct-text-primary); }

/* Inline status line under a form or an action button (Save identity, Export, Clear my map
 * data, Delete account). Colour is never the only signal: the text itself always says what
 * happened ("Saving...", "...saved.", "...could not be saved."). */
.ac-status { margin-top: var(--ct-space-3); min-height: 1.2em; font-size: var(--ct-text-sm); color: var(--ct-text-secondary); }
.ac-status.is-error { color: var(--ct-state-danger); }
.ac-status.is-success { color: var(--ct-state-success); }

/* The "type DELETE to confirm" line inside the delete-account dialog: a real, load-bearing
 * safety gate account.js's confirmDelete() already enforced before this reskin, kept exactly
 * (constraint 4) even though _design/account.html's own delete dialog mock has no such field. */
.ac-danger-note { font-weight: var(--ct-weight-semibold); color: var(--ct-state-danger); }

/* account.js's identity editor swaps into #account-app in place of the row view (Codex's own
 * existing edit flow, kept and reskinned rather than replaced -- see account.js's header
 * comment). It needs a little breathing room and a field grid the generic .ct-section
 * spacing does not assume. */
.ac-editor { padding: var(--ct-space-6) 0; max-width: 40rem; }
.ac-editor-grid { display: grid; gap: var(--ct-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--ct-space-5); }

@media (max-width: 42rem) {
  .ac-editor-grid { grid-template-columns: 1fr; }
}

/* Appearance & reading comfort and Privacy & your data have no separate action column, so
 * their .ct-row-body spans the title-adjacent columns instead of sitting in its usual third
 * column -- a class, not an inline style, specifically so the ≤860px override below can win
 * against it. shell.css's own ≤860px rule resets every OTHER row's .ct-row-body to "1 / -1"
 * once .ct-row drops to a 32px-plus-1fr grid, but an inline "grid-column:3 / -1" (the
 * literal style _design/account.html's own mock carries here) cannot be overridden by any
 * stylesheet rule, media query or not, which pinned this content to a column 3 that no
 * longer existed and overlapped the title column instead of dropping under it. */
.ac-row-body--wide { grid-column: 3 / -1; flex-direction: column; gap: var(--ct-space-4); }

@media (max-width: 860px) {
  .ac-row-body--wide { grid-column: 1 / -1; }
}

/* Ticket 21 (2026-09-19, "excessive whitespace between Account sections"): design-system.css's
 * own .ct-row sets padding: var(--ct-space-6) 0 (24px top and bottom) for every row on every
 * ct-row page. Account's own rows read as unusually airy at that value, so this steps the
 * vertical padding down exactly one token, on Account only, via this page-local class rather
 * than touching the shared .ct-row rule other routes (My Map, Dashboard) also use. Tokens
 * only, per this file's own no-raw-values rule: --ct-space-5 (20px), one step below the
 * --ct-space-6 design-system.css actually declares on .ct-row today. */
.ac-row { padding-block: var(--ct-space-5); }

/* The reading-comfort preview. Its width lives here, not inline, so the "narrow" line-length
   rule in personal-interface.css (higher specificity) can still shrink it; an inline style
   beat that rule and made Line length look dead (feedback ticket 24, 2026-09-19). */
.ac-reading-preview { max-width: 720px; }

/* Ticket 52 (2026-09-19, "the top align spacing is inconsistent"): design-system.css zeroes
 * .ct-row-title's own margin (line 750) so a row title sits flush with the top of its grid
 * cell, but nothing does the same for the row BODY's opening paragraph. .ct-body-strong sets
 * font only (design-system.css line 466), so that <p> keeps the user agent's default 1em top
 * margin, and because it sits inside a flex item the margin cannot collapse away. Measured on
 * /account/?preview=1 at 1280px: Privacy & your data, Research mode, and Updates all started
 * their body text 15px below their own row title, while Identity, Membership & sign-in, and
 * Appearance & reading comfort (whose bodies do not open with this paragraph) sat flush.
 *
 * Scoped to the FIRST child of the row body on purpose. These rows stack several blocks in one
 * body (Privacy alone carries the consent switch, a status line, then Export my data), and on
 * every block after the first that same top margin is real separation, not a misalignment.
 * Zeroing .ct-body-strong everywhere would collapse those blocks together. */
.ac-row .ct-row-body > *:first-child p.ct-body-strong:first-child { margin-top: 0; }

/* Optional authenticator controls belong to Membership & sign-in, never onboarding. */
.ac-sign-in-details { display: flex; flex-wrap: wrap; gap: var(--ct-space-5); }
[data-authenticator-settings] { width: 100%; min-width: 0; }
.ac-mfa { max-width: 36rem; }
.ac-mfa .ct-section-title { font-size: var(--ct-text-lg); }
.ac-mfa-qr { display: block; background: white; max-width: 100%; margin-block: var(--ct-space-4); }
.ac-mfa-secret { font-family: monospace; overflow-wrap: anywhere; }
.ac-mfa form { display: grid; gap: var(--ct-space-3); margin-block: var(--ct-space-4); }
.ac-mfa-factors { padding: 0; list-style: none; display: grid; gap: var(--ct-space-3); }
.ac-mfa-factors li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-3); }
.ac-mfa-factors li span { overflow-wrap: anywhere; }
.ac-mfa button:disabled { opacity: .65; cursor: not-allowed; }