/* /account/ (sign in, sign up, passwords, profile). On top of landing.css (forms, buttons, dialogs) and app.css (page
   frame, footer). Tokens only; logical properties so RTL works. */

.acct { max-width: 520px; }
.acct-card { padding: clamp(20px, 5vw, 36px); border: 1px solid var(--border); border-radius: 16px; background: var(--bg-alt); }
.acct-loading { color: var(--muted); font-size: 14px; }
#acct-flash { margin: 0 0 18px; }

.acct-title {
  font-family: var(--font-display);
  font-size: calc(34px * max(var(--title-scale), 0.72));
  font-weight: 600;
  line-height: 1.2;
  color: var(--heading);
  margin-bottom: 8px;
}
.acct-title:focus { outline: none; }
.acct-title-sm { font-size: calc(28px * max(var(--title-scale), 0.72)); text-align: center; }
.acct-sub { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
.acct-sub p + p { margin-top: 8px; }
.acct-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
.acct-h2 { font-size: 16px; font-weight: 600; color: var(--heading); margin-bottom: 4px; }
.acct-notice { margin-bottom: 16px; padding: 10px 12px; border-radius: 8px; background: var(--gold-pale); color: var(--gold-text); font-size: 13px; line-height: 1.6; }
.acct-big { font-size: 40px; text-align: center; margin-bottom: 6px; }
.acct-email { margin: -8px 0 16px; font-weight: 600; color: var(--heading); text-align: center; overflow-wrap: anywhere; }
[data-step="inbox"] .acct-sub, [data-step="sent"] .acct-sub { text-align: center; }

/* Google first (D-22): Google's own button colours (light: white; dark: #131314) with the four-colour G, as its
   branding rules ask, so no theme tokens here. */
.btn-google {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #FFFFFF;
  color: #1F1F1F;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.btn-google:hover { border-color: var(--gold); box-shadow: 0 2px 10px rgba(var(--shadow), 0.12); }
.btn-google svg { width: 20px; height: 20px; flex: none; }
.btn-google:disabled { opacity: 0.6; cursor: wait; }
:root[data-theme="dark"] .btn-google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
/* Google's own button (google-signin.js draws its iframe here, as wide as the card up to Google's 400 px), and the
   redirect under it as "Having trouble? Continue with Google another way". The box is dir="ltr" in the HTML: the button
   Google draws in the page before its frame loads falls apart in RTL (the frame itself follows `locale`). */
.gsi { display: flex; justify-content: center; min-height: 44px; }
.gsi:empty { min-height: 0; }   /* while Google's library loads, the redirect button shows instead (account/main.js) */
.acct .gsi-other { display: block; margin: 6px auto 0; font-size: 13px; font-weight: 500; }   /* after .acct-textbtn's font: inherit */

.acct-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--muted); font-size: 13px; }
.acct-or::before, .acct-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.acct-one { margin: -6px 0 14px; text-align: center; }   /* EC-REG-01: Google and email for one address are one account */
.acct-signed { margin: -6px 0 18px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.acct-signed bdi { color: var(--heading); font-weight: 600; }
/* "(a–z)", "(0–9)", "name@gmail.com" stay whole in RTL lines. */
.acct span[dir="ltr"], #acct-flash span[dir="ltr"] { white-space: nowrap; }

/* Password with a show/hide button inside the field (on the inline end, so RTL works). */
.pw-field { position: relative; }
.pw-field .form-input { padding-inline-end: 50px; }
[dir="rtl"] .pw-field .form-input { padding: 11px 14px 11px 50px; text-align: right; }   /* the field itself is dir="ltr": the button's room on the left */
.pw-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
[dir="rtl"] .pw-toggle { border-radius: 6px 0 0 6px; }
.pw-toggle:hover { color: var(--heading); }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle[aria-pressed="true"] .i-eye, .pw-toggle[aria-pressed="false"] .i-eye-off { display: none; }

/* The password rule (D-22), ticked as it is met. */
.pw-rules { list-style: none; margin-top: 8px; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pw-rules li { display: flex; gap: 6px; }
.pw-rules li::before { content: '○'; width: 1.1em; flex: none; text-align: center; }
.pw-rules li[data-ok="true"] { color: var(--text); }
.pw-rules li[data-ok="true"]::before { content: '✓'; color: var(--sage); font-weight: 700; }

.acct-link { display: inline-block; margin-top: 8px; color: var(--gold-text); font-size: 13px; }
.acct-forgot { padding-block: 4px; }
.acct-switch { margin-top: 20px; text-align: center; font-size: 14px; color: var(--muted); }
.acct-switch a, .acct-sub a { color: var(--gold-text); font-weight: 600; }
#acct-flash a { color: inherit; font-weight: 600; }   /* a link inside a message ("Sign in"): the message's own colour */
.acct-resend { margin-top: 10px; }
.acct-textbtn { border: 0; background: none; padding: 6px; color: var(--gold-text); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
#resend-form { text-align: center; }
#resend-form .ts:not(:empty) { display: flex; justify-content: center; }

.acct-facts { display: grid; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border-radius: 10px; background: var(--tint); }
.acct-facts dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.acct-facts dd { color: var(--heading); overflow-wrap: anywhere; }
[dir="rtl"] .acct-facts dd[dir="ltr"] { text-align: right; }

.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.acct-actions > * { padding: 12px 22px; }
.acct-danger { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.acct-danger .btn-danger { margin-top: 12px; padding: 12px 22px; }
.btn-solid.btn-danger, .btn-solid.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-solid.btn-danger:hover { filter: brightness(1.08); }
.btn-solid:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

#dlg-delete { max-width: 460px; }
#dlg-delete .form-label bdi { padding: 1px 6px; border-radius: 4px; background: var(--danger-bg); color: var(--danger); letter-spacing: 0.08em; }
#dlg-delete .acct-actions > * { flex: 1 1 auto; }
.form-input + .field-error, .pw-field + .field-error { margin-top: 6px; }
.acct .consent + .field-error { margin-block: -8px 12px; }   /* under its own box, not on top of the next (the landing's rule is for its forms only) */

@media (pointer: coarse) { .acct-link, .acct-switch a { padding-block: 6px; } }

/* ── The sign-in dialog on / and /app/ (#dlg-signin, assets/js/signin-dialog.js): /account/'s forms in a landing dialog ── */
#dlg-signin { max-width: 460px; }
#dlg-signin .join-title:focus { outline: none; }
#dlg-signin .acct-title-sm { text-align: center; }
#dlg-signin .acct-notice { margin-bottom: 14px; }
#sd-flash:empty { display: none; }
#sd-flash { margin-bottom: 14px; }
.si-resend { text-align: center; }
.si-resend .ts:not(:empty) { display: flex; justify-content: center; }