/* ============================================================
   Account page (account.html) — sign in with the account the app created,
   change the password, delete the account. Loaded after styles.css, which
   owns the tokens, nav, buttons and footer. Behaviour: account.js.
   ============================================================ */

.acc { padding: 56px 0 96px; }
/* account.js toggles `hidden`; the flex rules below must not override it */
.acc [hidden] { display: none !important; }
.acc-shell { max-width: 560px; margin: 0 auto; }
.acc-title { font: 600 clamp(30px, 4.6vw, 44px)/1.08 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; outline: none; }
.acc-lede { margin-top: 14px; max-width: 46ch; font-size: 17px; color: var(--body); }
.acc-lede a, .acc-muted a { color: var(--accent-text); }

.acc-card { margin-top: 24px; padding: 28px; border: 1px solid var(--rule); border-radius: 20px; background: var(--card); box-shadow: var(--shadow-sm); }
.acc-card h2 { margin-bottom: 16px; font: 600 22px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.acc-card h3 { margin-bottom: 12px; font: 600 18px/1.25 var(--display); color: var(--ink); }

.acc-form { display: flex; flex-direction: column; gap: 16px; }
.acc-form.busy { opacity: .7; }
.acc-field { display: flex; flex-direction: column; gap: 7px; font: 600 13px/1.2 var(--sans); color: var(--ink); }
/* a tone lighter than the card, so the fields sit with the white sign-in buttons
   above them instead of reading as holes */
.acc-field input { height: 50px; padding: 0 16px; border: 1px solid var(--field-rule); border-radius: 12px; background: var(--field); font: 400 16px/1 var(--sans); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.acc-field input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px rgba(42,122,148,.18); }
.acc-field small { font: 400 13px/1.4 var(--sans); color: var(--meta); }
.acc-submit { width: 100%; justify-content: center; margin-top: 4px; }

.acc-error, .acc-note { padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.acc-error { color: var(--danger); background: var(--danger-soft); }
.acc-note { color: var(--accent-text); background: var(--accent-wash); }

.acc-link { display: inline-block; margin-top: 18px; font: 600 14px/1.3 var(--sans); color: var(--accent-text); text-decoration: none; }
.acc-link:hover { text-decoration: underline; }
.acc-foot { margin-top: 20px; font-size: 14px; color: var(--meta); }

/* Google draws its own button inside the box; Apple's follows its guidelines —
   white on a dark background. Both share one column: Google's button is at most
   400 px wide and 40 px tall (size large), so the column stops at 400 and the
   Apple button takes the same height. The Google box says color-scheme light:
   its iframe is a light document, and a cross-origin iframe whose scheme
   differs from the dark page gets an opaque white backdrop — the square frame
   around the personalised "Continue as …" chip. */
.acc-social { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 400px; margin-inline: auto; }
.acc-google { display: flex; justify-content: center; min-height: 40px; color-scheme: light; }
.acc-google iframe { color-scheme: light; }
/* The sign-in card is as wide as that column (400 + its 28 px padding), so the
   fields line up with the buttons above them. */
.acc-card:has(> .acc-social) { max-width: 458px; }
.acc-apple { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 40px; border: 1px solid #DADCE0; border-radius: 99px; background: #fff; color: #1F1F1F; font: 500 14px/1 var(--sans); cursor: pointer; }
.acc-apple svg { width: 17px; height: 17px; fill: currentColor; }
.acc-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.acc-who { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.acc-who dl { display: grid; gap: 14px; min-width: 0; }
.acc-who dt { margin-bottom: 5px; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.acc-who dd { font: 500 16px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.acc-textbtn { padding: 8px 0; border: 0; background: none; font: 600 14px/1 var(--sans); color: var(--accent-text); white-space: nowrap; cursor: pointer; }
.acc-textbtn:hover { text-decoration: underline; }
.acc-muted { font-size: 14px; line-height: 1.5; color: var(--meta); }
p.acc-card.acc-muted { font-size: 15px; }

.acc-danger > p { font-size: 15px; color: var(--body); }
.acc-danger .acc-muted { margin-top: 10px; }
.acc-list { margin: 12px 0 14px 18px; font-size: 15px; line-height: 1.6; color: var(--body); }
.acc-btn-danger { justify-content: center; margin-top: 18px; border: 1.5px solid rgba(190,35,35,.4); background: transparent; color: var(--danger); }
.acc-btn-danger:hover { background: var(--danger-soft); }
.acc-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); }
.acc-panel .acc-btn-danger { margin-top: 0; border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.acc-btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.acc-loading { color: var(--meta); }
/* for password managers: the account's email beside a password field */
.acc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
  .acc { padding: 36px 0 72px; }
  .acc-card { padding: 22px 18px; border-radius: 16px; }
  .acc-who { flex-direction: column; gap: 6px; }
}