/* Account: one quiet column. The brand and headline sit above the form; settings and the handle step reuse the same card.
   Fields, buttons and focus come from base.css; this file only lays the page out. */
body { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-6); }
.account-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: min(480px, 100%); margin: auto; border: 1px solid var(--line2); border-radius: var(--r-4); overflow: hidden; background: var(--panel); box-shadow: var(--sh-2); }
.account-layout[data-view="settings"] { width: min(760px, 100%); }
.account-intro { display: flex; flex-direction: column; min-width: 0; padding: var(--sp-6) var(--sp-6) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--bg); }
.account-brand { display: inline-flex; align-items: center; gap: var(--sp-3); align-self: flex-start; min-height: var(--tap); color: var(--text); text-decoration: none; font: var(--fw-heavy) var(--fs-28)/1 var(--font-display); letter-spacing: var(--ls-display); }
.account-intro h1 { font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: var(--ls-display); margin: var(--sp-2) 0 0; overflow-wrap: anywhere; }
.account-intro h1 em { color: inherit; font-weight: inherit; }
.account-layout[data-view="settings"] .account-intro { padding-block: var(--sp-3); }
.account-layout[data-view="settings"] .account-intro h1 { display: none; }
.account-workspace { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-5); }
.account-views { display: flex; flex-direction: column; gap: var(--sp-1); }
.account-views button { min-height: 44px; padding: var(--sp-2) var(--sp-3); text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--muted); }
.account-views button[aria-selected=true] { box-shadow: inset 3px 0 var(--text); background: var(--panel2); color: var(--text); font-weight: var(--fw-bold); }
.account-view-panels { min-width: 0; }
.account-view-panels > section { outline-offset: var(--sp-1); }
.account-view-panels > section[hidden] { display: none; }
.account-card .account-view-panels form { margin-top: 0; }
.account-card .account-view-panels :is(.account-fine-print,.account-security,.notification-settings) { margin: 0; padding: 0; border: 0; }
.account-card .account-view-panels :is(.account-fine-print,.account-security) > summary { display: none; }
.account-card .account-view-panels .account-data { display: grid; margin-top: 0; }
.account-card .account-view-panels .notification-settings { margin-top: var(--sp-6); }
.account-card .account-view-panels .password-change form { margin-top: var(--sp-3); }

/* Close: always reachable, so the page is never a dead end. */
.account-close { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: var(--z-row); width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; font-size: var(--fs-28); line-height: 1; background: var(--panel); }
.account-close[hidden] { display: none; }
body.account-page { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
.account-page .account-layout { flex: none; width: min(480px, calc(100% - var(--sp-8))); min-height: 0; margin: var(--sp-6) auto; }
.account-page .account-layout[data-view="settings"] { width: min(760px, calc(100% - var(--sp-8))); }
.account-page .account-intro { display: none; }
.account-page .public-bar .account-close { position: static; flex: none; border: 1px solid var(--line2); border-radius: var(--r-2); color: var(--text); text-decoration: none; }

.account-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: var(--sp-6); background: var(--panel); }
.account-card h2 { font-size: var(--fs-28); line-height: var(--lh-snug); margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.account-card p { font-size: var(--fs-13); line-height: var(--lh-body); color: var(--muted); overflow-wrap: anywhere; }
.account-card form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.account-card label { display: grid; gap: var(--sp-2); margin: 0; font-size: var(--fs-13); color: var(--text2); }
.account-card input { margin: 0; }
.account-card label small { color: var(--muted); font-size: var(--fs-12); font-weight: var(--fw-regular); }
.account-card .primary { width: 100%; min-height: var(--tap); margin: var(--sp-1) 0 0; }
.account-card button:disabled { opacity: .6; cursor: wait; }
.account-card .account-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-3); }
.account-card .account-links button { min-height: var(--control-sm); padding: var(--sp-1) 0; background: none; border: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--gold); font-size: var(--fs-13); }
.account-card .account-links > a { display: inline-flex; align-items: center; min-height: var(--control-sm); color: var(--gold); font-size: var(--fs-13); text-underline-offset: 3px; }
.account-card .account-links + p { margin-top: var(--sp-3); }
.account-card .feedback { margin: 0; font-size: var(--fs-13); }
.account-card .feedback:not(:empty) { margin-top: var(--sp-4); }
.account-card .feedback.error { color: var(--danger); }
.account-card .feedback.success { color: var(--green2); }

/* Provider sign-in keeps each provider's own colours. */
.account-card :is(.google-button,.apple-button) { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); width: 100%; min-height: var(--tap); margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--google-border); border-radius: var(--r-2); background: var(--google-bg); color: var(--google-text); font: var(--fw-medium) var(--fs-14) var(--font-ui); }
.account-card :is(.google-button,.apple-button):hover { background: var(--google-hover); }
.account-card .apple-button { background: var(--apple-bg); color: var(--apple-text); border-color: var(--apple-bg); }
.account-card .apple-button:hover { background: var(--apple-hover); }
.account-card form > :is(.google-button,.apple-button), .account-card form > .account-divider { margin-top: 0; }
.account-card .account-divider { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); color: var(--muted); font-size: var(--fs-12); }
.account-divider::before, .account-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.account-card .signin-methods { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.account-card .signin-methods h3 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-medium); }

/* Handle step and account settings */
.account-layout[data-view="welcome"] .account-card h2 { margin-bottom: var(--sp-1); }
.account-card .handle-row { display: flex; gap: var(--sp-2); }
.account-card .handle-input { position: relative; display: block; flex: 1; min-width: 0; }
.account-card .handle-input input { padding-inline-end: var(--tap); }
.account-card .handle-status { position: absolute; inset-inline-end: var(--sp-3); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; pointer-events: none; color: var(--muted); }
.account-card .handle-status[data-state="available"] { color: var(--green2); }
.account-card .handle-status:is([data-state="unavailable"],[data-state="invalid"]) { color: var(--danger); }
.account-card .handle-status[data-state="checking"]::before { content: ''; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: var(--r-round); animation: handle-checking .8s linear infinite; }
.account-card .handle-status[data-state="unknown"]::before { content: '?'; font-size: var(--fs-16); font-weight: var(--fw-bold); }
@keyframes handle-checking { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .account-card .handle-status[data-state="checking"]::before { animation: none; } }
.account-card .dice { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; min-height: var(--control-h); padding: 0 var(--sp-3); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.account-card .account-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.account-card .account-head .avatar { flex: none; width: 52px; height: 52px; font-size: var(--fs-24); }
.account-card .account-head > div { min-width: 0; }
.account-card .account-head h2 { margin: 0; font-size: var(--fs-28); }
.account-card .account-head p { margin: var(--sp-0) 0 0; }
.account-card form[data-pristine] .primary { display: none; }
.account-card .methods { display: grid; gap: var(--sp-1); margin: var(--sp-2h) 0 0; padding: 0; list-style: none; }
.account-card .methods li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); border-bottom: 1px solid var(--line); font-size: var(--fs-14); color: var(--text); }
.account-card .method-name { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; overflow-wrap: anywhere; }
.account-card .chip { padding: var(--sp-0) var(--sp-2h); border-radius: var(--r-pill); background: var(--gold-a08); color: var(--gold); font-size: var(--fs-12); font-weight: var(--fw-medium); }
.account-card .method-connect { min-height: var(--control-h); padding: 0 var(--sp-3); font-size: var(--fs-13); }
.account-card .password-change { margin-top: var(--sp-1); }
.account-card .password-change summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: var(--fs-14); color: var(--text); }
.account-card .account-data { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
/* Actions are buttons; only navigation is underlined text. */
.account-card .account-data button, .account-card [data-delete-cancel], .account-card [data-deletion-check], .account-card form > [data-export], .account-card > [data-export], .account-card .account-links [data-logout] { min-height: var(--control-h); padding: 0 var(--sp-4); border: 1px solid var(--line2); border-radius: var(--r-2); background: var(--panel); color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-medium); text-decoration: none; }
.account-card .account-data button:hover, .account-card .account-links [data-logout]:hover { background: var(--panel3); }
.account-card .account-data .delete-account { color: var(--danger); border-color: var(--danger-a30); }
.account-card .account-data .delete-account:hover { background: var(--danger-a08); }
.account-card form[data-action="delete"] .primary { color: var(--danger); background: var(--panel); border: 1px solid var(--danger); }

/* Optional device alerts share the account settings card. */
.account-card .notification-settings { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.account-card .notification-settings h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-18); }
.account-card .notification-settings label { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); cursor: pointer; }
.account-card .notification-settings input[type=checkbox] { flex: none; width: 22px; height: 22px; min-height: 22px; padding: 0; accent-color: var(--gold); }

/* Exporting and deleting are rare and weighty: collapsed, last, plain text, nothing to tap by accident. */
.account-card .account-fine-print { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-13); }
.account-card .account-fine-print > summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; width: max-content; }
.account-card .account-fine-print .native-actions, .account-card .account-fine-print .account-data { margin-top: var(--sp-3); }

/* Phone: a page, not a framed card. The form is on the first screen. */
@media (max-width: 560px) {
  body { display: block; padding: 0; }
  .account-layout, .account-layout[data-view="settings"] { width: 100%; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; grid-template-rows: auto 1fr; }
  .account-intro { padding: var(--sp-3) var(--sp-4) var(--sp-3); }
  .account-brand { font-size: var(--fs-24); }
  .account-intro h1 { font-size: var(--fs-18); }
  .account-card { justify-content: flex-start; padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  .account-card h2 { font-size: var(--fs-24); margin-bottom: var(--sp-1); }
  .account-card form { gap: var(--sp-3); margin-top: var(--sp-3); }
  .account-card label { gap: var(--sp-1h); }
  .account-card :is(.google-button,.apple-button) { margin-top: var(--sp-3); }
  .account-card .account-divider { margin-top: var(--sp-3); }
  .account-card .account-links { margin-top: var(--sp-4); }
  .account-page .account-layout, .account-page .account-layout[data-view="settings"] { width: 100%; margin: 0 auto; }
  .account-workspace { grid-template-columns: minmax(0,1fr); gap: var(--sp-5); }
  .account-views { flex-direction: row; border-bottom: 1px solid var(--line); }
  .account-views button { flex: 1; text-align: center; }
  .account-views button[aria-selected=true] { box-shadow: inset 0 -3px var(--text); background: transparent; }
}

:root[data-scheme=dark] .account-card .apple-button { background: var(--fx-white); color: var(--apple-bg); border-color: var(--fx-white); }
:root[data-scheme=dark] .account-card .apple-button:hover { background: color-mix(in srgb, var(--fx-white) 88%, var(--apple-bg)); }

/* Account access is a task choice, separate from legal/footer navigation. */
.account-card .account-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin:var(--sp-4) 0}
.account-card .account-modes button{min-height:44px;padding:var(--sp-2);font-size:var(--fs-14)}
.account-card .account-modes [aria-pressed=true]{background:var(--panel3);border-color:var(--text);color:var(--text)}
.account-card .account-entry-switch{display:grid;gap:var(--sp-2);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.account-card .account-entry-switch p{margin:0;color:var(--text);font-size:var(--fs-14)}
.account-card .account-entry-switch button{width:100%;min-height:48px;font-size:var(--fs-16);font-weight:var(--fw-semibold);color:var(--text)}
.account-card .account-entry-help{margin-top:var(--sp-2)}
.account-card .account-entry-help button{min-height:44px;padding:var(--sp-2) 0;border:0;background:none;color:var(--gold);text-decoration:underline;text-underline-offset:3px}