/* Checkout, My pages and sign-in. Uses the phone design tokens; fields and buttons come from builder.css. */
.account {
  width: 100%;
  max-width: 32rem;
  min-height: 70svh;
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.account h1.builder-question { margin-top: var(--space-md); font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1.08; outline: none; overflow-wrap: anywhere; }
.account-h2 { max-width: none; margin-top: var(--space-sm); font-size: var(--text-xl); }

.account-stack { display: flex; flex-direction: column; gap: var(--space-xs); }
.account-muted { color: var(--color-muted); font-size: var(--text-sm); }
.account-note { min-height: 1.25em; color: var(--color-ink-2); font-size: var(--text-sm); }
.account-note:empty { min-height: 0; }

.account-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  overflow-wrap: anywhere;
}
.account-card h2 { max-width: none; font-size: var(--text-xl); }
.account-keepsake { flex-direction: row; align-items: center; gap: var(--space-md); }
.account-keepsake img { width: 96px; height: 96px; flex: none; border-radius: var(--radius-card); object-fit: cover; }
.account-keepsake p { margin: 0; color: var(--color-ink-2); }
.account-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-lg); }
.account-address { color: var(--color-ink-2); }

.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.account-actions > * { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.account-actions-block { display: flex; flex-direction: column; gap: var(--space-2xs); }
.account-actions-block > .btn-quiet { align-self: flex-start; }
.account-link { color: var(--color-accent); font-size: var(--text-sm); overflow-wrap: anywhere; }
.account-list { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.account-list li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.account-signout { align-self: flex-start; margin-top: var(--space-md); }
.account strong { font-weight: 500; }
.account ul:not(.account-list) { margin: 0; padding-left: 1.25rem; }

.account .field select { appearance: auto; }
.account .field [aria-invalid="true"] { border-color: var(--color-error); }
button:disabled, .btn-primary:disabled, .btn-quiet:disabled { cursor: not-allowed; opacity: 0.6; }
a.btn-primary, a.btn-quiet { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Admin page */
.account-counts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.account-count { font-size: var(--text-xl); font-weight: 500; }
.account-orders { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.account-banner { padding: var(--space-xs) var(--space-sm); border-left: 3px solid currentColor; overflow-wrap: anywhere; }
.account-controls { display: flex; flex-direction: column; gap: var(--space-xs); }
.account-flag { align-self: center; color: var(--color-error); font-size: var(--text-sm); }
body:not(.dark-mode) .account-flag { color: oklch(48% 0.18 27); }
.account-danger { background: var(--color-error); }
body:not(.dark-mode) .account-danger { background: oklch(48% 0.18 27); color: oklch(98% 0.01 27); }
.account-danger-quiet { border-color: var(--color-error); }
.account-dialog { width: min(28rem, calc(100vw - 2rem)); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
.account-dialog::backdrop { background: oklch(0% 0 0 / 0.6); }
.account-dialog p { margin: var(--space-xs) 0; overflow-wrap: anywhere; }
.account-dialog .account-actions { margin-top: var(--space-md); }
.account-admin select, .account-admin input[type="text"] { min-height: 48px; }
.account-admin [hidden] { display: none; }

@media (min-width: 768px) {
  .account { max-width: 40rem; padding-top: var(--space-xl); }
  .account-actions > * { flex: 0 1 auto; }
  .account-admin { max-width: 64rem; }
  .account-orders { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .account-counts { max-width: 28rem; }
}