/* Account pages: sign-in, password reset, invite, two-factor (TOTP, passkeys), recovery codes,
   re-authentication. Loaded only by jimco/templates/allauth/layouts/base.html, which every
   allauth page and our account/*.html templates extend, so the rules may target the plain
   markup of allauth's "elements" (no classes) inside <main>. Colours are base.css tokens only
   (tests/unit/test_design_tokens.py). No inline styles anywhere (CSP). */

/* ---------------------------------------------------------------- the card */
main {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: min(100% - 2rem, 36rem);
  margin: 2rem auto auto;           /* auto bottom: the footer bar stays at the bottom */
  padding: 1.5rem 1.75rem 1.75rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-top: 6px solid var(--rule-brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-menu);
}
main + .site-footer, main ~ .site-footer { margin-top: 2rem; }
main > h1:first-of-type { margin-top: 0; }
main p { margin: 0.5rem 0 0.75rem; }
main > :last-child { margin-bottom: 0; }
main .notice { margin: 0 0 1rem; }

/* ---------------------------------------------------------------- forms
   Our templates use .form-stack; allauth's field element renders
   <p><label/><input/><span>help</span></p> and form.as_p the same shape. */
main .form-stack { max-width: none; }
main form:not(.form-stack):not([hidden]) { display: grid; gap: 0.85rem; margin: 0.5rem 0 1rem; }
main form p, main p:has(> label) { display: grid; gap: 0.25rem; margin: 0 0 0.85rem; }
main form:not(.form-stack) > p { margin: 0; }
main p:has(> input[type="checkbox"]),
main p:has(> input[type="radio"]) { display: flex; align-items: center; gap: 0.5rem; }
main form label, main p > label { font-weight: var(--fw-semibold); color: var(--text); }
main p:has(> input[type="checkbox"]) label { font-weight: var(--fw-regular); }
main :is(form, p) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { width: 100%; }
main form p > span, main p:has(> label) > span, main .helptext { color: var(--text-muted); font-size: var(--fs-sm); }
main form .errorlist { margin: 0; }

/* The main action of a form is primary; a button that submits another form (Cancel on the
   two-factor step signs out through a separate form) stays secondary. */
main form button[type="submit"]:not([form]),
main .form-stack button[type="submit"] {
  justify-self: start;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}
main form button[type="submit"]:not([form]):hover:not(:disabled),
main .form-stack button[type="submit"]:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}
main form button[type="submit"]:not([form]):disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  border-color: var(--btn-disabled-border);
}

/* allauth renders its link-buttons as bare <a> (in panels and at the top level of a page). */
main > a[href],
main section > ul > li > a[href] {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  box-sizing: border-box;
  padding: 0.4rem 0.9rem;
  margin: 0 0.5rem 0.5rem 0;
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
main > a[href]:hover,
main section > ul > li > a[href]:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-fg); }
/* A button group (the passkey alternatives on the two-factor step). */
main div:has(> button + button) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }

/* ---------------------------------------------------------------- two-factor overview panels */
main section {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--rule-brand);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
main section > h2 { margin: 0 0 0.35rem; font-size: var(--fs-md); }
main section > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; }
main section > ul > li > a[href] { margin: 0; }

/* ---------------------------------------------------------------- TOTP setup and recovery codes */
/* The QR code is an SVG data: URI (img-src 'self' data:): white quiet zone, never scaled up. */
main form img {
  display: block;
  width: 12rem;
  max-width: 100%;
  height: auto;
  padding: 0.5rem;
  background: var(--jimco-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#authenticator_secret { font-family: var(--font-mono); color: var(--text); letter-spacing: 0.05em; }
#recovery_codes, main textarea[readonly] {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--surface-sunken);
  resize: none;
}

/* ---------------------------------------------------------------- sessions and passkey lists (allauth table element)
   templates/allauth/elements/table.html wraps every allauth table in .table-scroll (base.css):
   a table wider than the card (a phone, enlarged text) scrolls inside it, never the page
   (WCAG 1.4.10). Long values (the browser's user-agent string) wrap between words.
   allauth's sessions table has a last column ("Current") without a header cell: an empty
   generated cell closes the header row, so the blue header bar spans every column. */
main .table-scroll { margin: 0.5rem 0 1rem; }
main table { border-collapse: collapse; width: 100%; margin: 0; }
main table thead { background: var(--bar-bg); }
main table thead tr::after { content: ""; display: table-cell; background: var(--bar-bg); }
main table thead th {
  background: var(--bar-bg);
  color: var(--bar-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
  padding: 0.4rem 0.5rem;
}
main table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--text-data); overflow-wrap: break-word; }
main table tbody tr:nth-child(even) { background: var(--surface-alt); }

@media (max-width: 30rem) {
  /* Auto bottom margin kept: the footer bar stays at the bottom of a short phone page too.
     The card is flush under the header here: the tab bar's 3px rule closes the header, so the
     card has no top rule of its own (no 9px band); without a tab bar (sign-in, the two-factor
     step) a 3px rule stands in for it. */
  main { width: auto; margin: 0 0 auto; border: 0; border-radius: 0; box-shadow: none; padding: 1rem; }
  .site-header:not(:has(.tabbar)) + main { border-top: 3px solid var(--rule-brand); }
}

@media print {
  main { border: 0; box-shadow: none; width: auto; margin: 0; padding: 0; }
}