/* ==========================================================================
   UBM: /account/... (members spec 7.5)
   The sign-in, sign-up, confirmation, reset and account pages. Built on the
   contact page's form classes (.field, .input, .checkbox, .btn) from
   base.css; only what those do not provide is here: the form column, the
   alert and the status line, the show-password button, the code input and
   the column beside the form. Tokens and logical properties only, so the
   Arabic pages mirror by themselves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The hero line naming the tool the person is on their way to
   -------------------------------------------------------------------------- */
.account-hero__context {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: var(--sp-3);
}

/* An address, masked or whole, never breaks at its hyphen or dot: it wraps
   as one left-to-right box, inside itself only when it is wider than the
   line (a long address on a phone). In Arabic it stays in one piece. */
.account bdi { display: inline-block; max-inline-size: 100%; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Layout: the form, and the column beside it. On a phone the form comes
   first, because it comes first in the markup.
   -------------------------------------------------------------------------- */
.account-main { display: grid; gap: var(--sp-6); align-content: start; min-inline-size: 0; }
.account-solo { display: grid; gap: var(--sp-6); max-inline-size: 56rem; }

.account-form { display: grid; gap: var(--sp-5); max-inline-size: 32rem; }
.account-form__lead { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); max-inline-size: 60ch; }
.account-form__notice { line-height: var(--lh-body); }
.account-form__pair { gap: var(--sp-5); }

.account-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
}

.account-note { max-inline-size: 32rem; line-height: var(--lh-body); }

/* A new code, and "Wrong address? Start again", side by side. */
.account-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.account-actions form { margin: 0; }
.account-actions__time { font-variant-numeric: tabular-nums; }

/* The bot trap, as on the contact form: out of sight, still in the form. */
.account-form .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------------------
   What went wrong, and what happened
   -------------------------------------------------------------------------- */
.account .form-alert {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 8%, transparent);
  border: var(--bw) solid color-mix(in srgb, var(--c-danger) 35%, transparent);
  border-radius: var(--r-sm);
}
.account .form-alert[hidden] { display: none; }
.account .form-alert:focus { outline: 2px solid var(--c-danger); outline-offset: 3px; }

.form-note {
  max-inline-size: 32rem;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-strong);
  border-inline-start: 2px solid var(--accent);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
}
.form-note--ok { border-inline-start-color: var(--c-success); }

/* --------------------------------------------------------------------------
   Show the password: a quiet button inside the field's end edge, wired by
   account.js. Without JavaScript it stays hidden and the field is plain.
   -------------------------------------------------------------------------- */
.pw { position: relative; }
.pw .input { padding-inline-end: 5.25rem; }
.pw__toggle {
  position: absolute;
  inset-block: var(--sp-1);
  inset-inline-end: var(--sp-1);
  padding-inline: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.pw__toggle:hover { color: var(--accent-text); background: var(--surface-sunken); }
.pw__toggle[hidden] { display: none; }

/* --------------------------------------------------------------------------
   The six-digit code: one input, large figures, always left to right.
   -------------------------------------------------------------------------- */
.code-input {
  max-inline-size: 14rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: .32em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding-block: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Panels: the account page sections, the end of a link's road
   -------------------------------------------------------------------------- */
.account-panel { display: grid; gap: var(--sp-5); justify-items: start; }
.account-panel > * { max-inline-size: 100%; }
.account-panel--quiet {
  padding-block-start: var(--sp-6);
  border-block-start: var(--bw) solid var(--line);
  gap: var(--sp-3);
}
.account-panel .def-rows { inline-size: 100%; }

.account-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 62rem) {
  .account-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.account-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-strong);
}
.account-badge::before {
  content: "";
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: var(--gold);
}

.account-signout { margin: 0; }

/* "I do not know it": the site accordion, at the size of a form. */
.account-forgot { max-inline-size: 32rem; }
.account-forgot .accordion__head { font-size: var(--fs-base); padding-block: var(--sp-4); }

/* --------------------------------------------------------------------------
   The column beside the forms: what an account opens
   -------------------------------------------------------------------------- */
.account-aside {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-6);
  background: var(--surface-sunken);
  border-radius: var(--r-md);
}

.account-tools { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.account-tools__item {
  display: grid;
  gap: var(--sp-1);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-domain-ai);
}
.account-tools__name { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.account-tools__desc { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }
.account-tools__open { justify-self: start; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   The account page itself (members spec 7.8): five sections on a two-column
   grid from a laptop up, one column on a phone; "Your data" spans both, its
   download and delete side by side.
   -------------------------------------------------------------------------- */
.account-home > .account-panel { align-content: start; scroll-margin-block-start: calc(var(--header-h) + var(--sp-5)); }
.account-home .account-form { inline-size: 100%; }
.account-home .t-h4 { font-size: var(--fs-lg); }

/* The address, shown and not editable. */
.account-static {
  padding: .78rem 0;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  border-block-end: var(--bw) dashed var(--line-strong);
}
.account-select { max-inline-size: 16rem; }

/* Email from UBM: one choice per line, the wording is the consent. */
.account-choice { display: grid; gap: var(--sp-4); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.account-choice__opt { line-height: var(--lh-body); color: var(--text); }
.account-choice__opt input:checked + span { color: var(--text-strong); font-weight: 500; }

.account-tools__used { font-size: var(--fs-xs); color: var(--text-faint); }

.account-data { gap: var(--sp-6); }
.account-data__grid { display: grid; gap: var(--sp-8); inline-size: 100%; }
@media (min-width: 62rem) {
  .account-data { grid-column: 1 / -1; }
  .account-data__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.account-delete {
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid color-mix(in srgb, var(--c-danger) 45%, transparent);
}
.account-data__other { max-inline-size: 64ch; }

/* The one button that cannot be undone: outlined in the danger colour. */
.btn--danger { --btn-bg: transparent; --btn-fg: var(--c-danger); --btn-bd: color-mix(in srgb, var(--c-danger) 55%, transparent); }
.btn--danger:hover { --btn-bg: color-mix(in srgb, var(--c-danger) 8%, transparent); --btn-bd: var(--c-danger); box-shadow: none; }