/* Account pages v2 - log in, sign up, password reset: docs/design/pages-h/S_Login.html (+_m) and S_Signup.html (+_m), visual system H.
   Depends on tokens.css + components.css (+ theme-velvet.css). One centred card on the page ground, the standard v2 header and
   footer around it. Colours are tokens only; the one value without a token (the error red) is defined below as --acct-err. */

.cg-page-account { --acct-err: #b3122e; }
[data-theme="velvet"] .cg-page-account { --acct-err: #ff8fa3; }

.cg-acct-main { padding-block: 12px 64px; }
.cg-acct-wrap { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; }
.cg-acct-wrap--narrow { max-width: 460px; }
.cg-body a.cg-acct-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: var(--w-strong); color: var(--ink-muted); }
.cg-body a.cg-acct-back:hover { color: var(--ink); }

/* ---- Card ------------------------------------------------------------------------------------------ */
.cg-acct-card { width: 100%; background: var(--surface); border-radius: var(--radius-xxl); padding: 32px 34px 26px; display: flex; flex-direction: column; gap: 16px; }
.cg-acct-head { display: flex; flex-direction: column; gap: 6px; }
.cg-acct-card h1 { font: italic var(--w-regular) 52px/1 var(--font-display); letter-spacing: -.01em; }
.cg-acct-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.cg-acct-switch { margin: 0; padding-top: 8px; border-top: 1px solid var(--surface-divider); font-size: 15px; text-align: center; }
.cg-body .cg-acct-switch a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--w-strong); }

/* ---- Form ------------------------------------------------------------------------------------------ */
.cg-form { display: flex; flex-direction: column; gap: 14px; }
.cg-field { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.cg-lbl { font-size: 14px; font-weight: var(--w-strong); color: var(--ink); }
.cg-lbl span { font-weight: var(--w-regular); color: var(--ink-muted); }
.cg-inp { width: 100%; height: 48px; border-radius: var(--radius-s); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); padding: 0 16px; font: var(--w-regular) 16px var(--font-sans); }
.cg-inp::placeholder { color: var(--ink-caption); }
.cg-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cg-inp[aria-invalid="true"] { border-color: var(--acct-err); }
.cg-inp--pw { letter-spacing: .18em; font-weight: var(--w-strong); }
.cg-inp--pw::placeholder { letter-spacing: 0; font-weight: var(--w-regular); }
.cg-sel { appearance: none; -webkit-appearance: none; padding: 0 34px 0 14px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-caption) 50%), linear-gradient(135deg, var(--ink-caption) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.cg-sel:invalid { color: var(--ink-caption); }
.cg-sel option { color: var(--ink); background: var(--surface); }
.cg-dob { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cg-dob legend { padding: 0; margin-bottom: 6px; }
.cg-dob .cg-err { grid-column: 1 / -1; }
.cg-help { font-size: 13px; color: var(--ink-muted); line-height: 1.45; }
.cg-help.is-error { color: var(--acct-err); font-weight: var(--w-strong); }
.cg-err { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--acct-err); font-weight: var(--w-strong); line-height: 1.45; }
.cg-err svg { flex: none; margin-top: 2px; }
.cg-err[hidden] { display: none; }
.cg-acct-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface); border: 1.5px solid var(--acct-err); color: var(--acct-err); font-size: 14px; font-weight: var(--w-strong); line-height: 1.45; }
.cg-acct-alert svg { flex: none; margin-top: 2px; }
.cg-acct-alert ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cg-acct-alert[hidden] { display: none; }
.cg-acct-note { margin: 0; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface-warm); color: var(--ink); font-size: 14px; line-height: 1.5; }
.cg-acct-row { display: flex; justify-content: flex-end; margin-top: -6px; }
.cg-body .cg-acct-card .cg-linkbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; cursor: pointer; text-decoration: none; }
.cg-check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 4px 0; font-size: 14px; color: var(--ink-muted); line-height: 1.45; cursor: pointer; }
.cg-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cg-check input[aria-invalid="true"] { outline: 2px solid var(--acct-err); outline-offset: 2px; }
.cg-body .cg-check a { font-weight: var(--w-strong); }

.cg-body .cg-acct-card .cg-btn--primary { width: 100%; height: 52px; font-size: 16px; }
.cg-body .cg-acct-card .cg-btn--primary[disabled] { opacity: .65; cursor: progress; }
.cg-body .cg-acct-card .cg-btn--outline { width: 100%; height: 48px; border-color: var(--ink-caption); font-size: 16px; font-weight: var(--w-strong); }
.cg-body .cg-acct-card .cg-btn--outline:hover { border-color: var(--ink); }
body:not(.cg-js) .cg-needjs { display: none; }

/* ---- Forgot-password panel (inline, no modal) ------------------------------------------------------- */
.cg-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-m); background: var(--surface-warm); }
.cg-panel[hidden] { display: none; }
.cg-panel h2 { font: italic var(--w-regular) 28px/1.05 var(--font-display); }
.cg-panel p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.cg-panel .cg-help b { color: var(--ink); }
.cg-panel .cg-linkbtn { align-self: center; }

/* ---- City type-ahead -------------------------------------------------------------------------------- */
.cg-city { position: relative; }
.cg-listbox { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto;
  border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-map); border: 1px solid var(--border); }
.cg-listbox[hidden] { display: none; }
.cg-listbox li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-s); font-size: 15px; color: var(--ink); cursor: pointer; }
.cg-listbox li[aria-selected="true"] { background: var(--surface-soft); }
.cg-listbox mark { background: none; color: inherit; font-weight: var(--w-strong); }

/* ---- Done / link problem ---------------------------------------------------------------------------- */
.cg-acct-done { display: flex; flex-direction: column; gap: 14px; }
.cg-acct-done .cg-btn { text-decoration: none; }

/* ---- Delete my account (DeleteAccountV2.cshtml, DeletionScheduledV2.cshtml) --------------------------- */
[data-cg-delete-account] .cg-acct-card h1, [data-cg-deletion] .cg-acct-card h1 { font-size: 44px; line-height: 1.04; }
.cg-acct-facts { display: flex; flex-direction: column; gap: 8px; }
.cg-acct-facts h2 { font-size: 16px; font-weight: var(--w-strong); color: var(--ink); margin-top: 4px; }
.cg-acct-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.cg-acct-list li { position: relative; padding-left: 22px; }
.cg-acct-list li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--acct-err); }
.cg-acct-list--kept li::before { background: var(--on-live); }
.cg-acct-facts .cg-acct-note { margin-top: 6px; }
.cg-body .cg-acct-card .cg-btn--danger { width: 100%; height: 52px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--acct-err); color: var(--ground); font-size: 16px; cursor: pointer; }
.cg-body .cg-acct-card .cg-btn--danger:hover { filter: brightness(1.08); color: var(--ground); }
.cg-body .cg-acct-card .cg-btn--danger:focus-visible { outline: 3px solid var(--accent-tint); outline-offset: 2px; }
.cg-acct-card a.cg-btn { text-decoration: none; }

[data-theme="velvet"] .cg-acct-card h1, [data-theme="velvet"] .cg-panel h2 { color: var(--heading); }

@media (max-width: 720px) {
  .cg-acct-main { padding-block: 4px 40px; }
  .cg-acct-card { padding: 26px 20px 22px; border-radius: var(--radius-xl); }
  .cg-acct-card h1 { font-size: 46px; }
  [data-cg-delete-account] .cg-acct-card h1, [data-cg-deletion] .cg-acct-card h1 { font-size: 36px; }
  .cg-acct-lead { font-size: 15px; }
  /* 16px text keeps iOS from zooming the page when a field is focused */
  .cg-inp { font-size: 16px; }
}