/* Account and support dialogs share the public page's paper and field rhythm. */
.account-dialog { width:min(600px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); margin:auto; overflow:auto; overscroll-behavior:contain; padding:0; border:1px solid var(--rule); border-radius:var(--radius-large); color:var(--ink); background:var(--paper); box-shadow:var(--shadow); }
.account-dialog::backdrop { background:#26374766; backdrop-filter:blur(3px); }
.account-card { padding:var(--space-10) var(--space-10) var(--space-8); font:16px/1.7 var(--sans); }
.account-card h1 { clear:both; max-width:100%; font:400 clamp(32px,3vw,38px)/1.2 var(--serif); letter-spacing:-.025em; margin:var(--space-6) 0 var(--space-5); overflow-wrap:anywhere; }
.account-card > .eyebrow { min-height:24px; margin:var(--space-2) 76px var(--space-5) 0; }
.account-card p { margin:var(--space-4) 0; overflow-wrap:anywhere; }
.account-card .form-note { font-size:var(--type-small); line-height:1.7; }
.account-card .account-close { float:right; position:sticky; top:0; z-index:1; min-width:64px; margin:-12px -12px 0 var(--space-4); padding-inline:var(--space-3); border-radius:var(--radius); background:var(--paper); color:var(--muted); }
.account-topline { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); background:var(--paper); }
.account-topline .eyebrow { margin:0; }
.account-topline .account-close { float:none; position:static; margin:0; }
.account-card label { display:block; margin:var(--space-6) 0 var(--space-3); font-size:var(--type-label); color:var(--ink); }
.account-card input { display:block; width:100%; font:16px/1.5 var(--sans); }
.account-card input[inputmode=numeric] { font-size:24px; letter-spacing:.22em; text-align:center; font-variant-numeric:tabular-nums; }
.account-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3) var(--space-5); margin:var(--space-6) 0 var(--space-5); }
.account-actions .primary { margin-inline-start:auto; }
.account-message { font-size:var(--type-label); }
.account-message:empty { display:none; }
.account-message:not(:empty) { border-top:1px solid var(--rule); padding-top:var(--space-4); margin-top:var(--space-6); color:var(--ink); }
.account-billing { border-top:1px solid var(--rule); margin:var(--space-8) 0; padding-top:var(--space-6); }
.account-billing h2 { font:400 28px/1.3 var(--serif); letter-spacing:-.025em; margin:0 0 var(--space-4); }
.account-billing p { margin:var(--space-3) 0; }
.account-plan-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-4); margin:var(--space-5) 0; }
.account-plan-actions .button { flex:1 1 140px; padding-inline:var(--space-3); white-space:nowrap; }
.account-card a { color:var(--action-hover); text-decoration-thickness:1px; text-underline-offset:4px; }
.account-card a:hover { color:var(--warm-ink); }
.account-data { border-top:1px solid var(--rule); margin:var(--space-6) 0 var(--space-3); padding-top:var(--space-3); }
.account-data summary { min-height:var(--control-height); padding:var(--space-3) 0; cursor:pointer; font-size:var(--type-label); color:var(--ink); }
.account-data[open] summary { margin-bottom:var(--space-3); }
.account-card [data-account=delete] { color:var(--error); }
.account-card:has(#delete-confirmation) [data-account=delete-confirm] { color:var(--error); border-color:var(--error); background:transparent; }
.account-card:has(#delete-confirmation) [data-account=delete-confirm]:hover { background:var(--paper-deep); }
#support-dialog .account-card p { margin:var(--space-5) 0; }
@media(max-width:650px) {
  .account-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
  .account-card { padding:var(--space-8) var(--space-6) var(--space-6); }
  .account-card h1 { font-size:33px; margin:var(--space-5) 0; }
  .account-billing { margin:var(--space-6) 0; padding-top:var(--space-5); }
  .account-billing h2 { font-size:26px; }
  .account-actions .primary { flex:1; }
  .account-card:has(#delete-confirmation) .account-actions .button { flex-basis:100%; }
}
