/* acevoz.com's account pages (#3203): sign in, sign up, the password and
   email pages, My Account, the avatar creator and the student landing
   page. The canvas draws none of them, so they take the Contact and
   Notify me pages' card and fields (contact.css, notify-me.css). Tokens
   and fonts come from site-brand.css (#3006); every selector starts with
   .account-page, which accounts/test_account_page_style.py enforces.

   Who loads it: the two main-site layouts,
   templates/allauth/layouts/main_site_base.html and
   templates/account/layouts/main_site_base.html, and the student landing
   page. The teacher-site layouts never do, so a teacher domain renders
   these pages exactly as before.

   Why it can restyle markup it does not own: the page templates and
   allauth/elements/ are shared with teacher domains, so they keep their
   Tailwind classes, and this sheet restyles what they emit -- by element
   (h1, label, input, a...) and by the Tailwind color, border, radius and
   shadow utilities they carry. Tailwind puts every rule it writes in a
   cascade layer, and this sheet is unlayered, so its rules beat
   Tailwind's utilities whatever their specificity (the opposite of
   teachersites/dictionary-main-site.css, which imports the hub's sheets
   into a layer so that Tailwind's utilities win).

   That cuts both ways, so two rules hold:

   - No rule sets `display` on markup the shared templates emit, apart
     from allauth's provider link. The avatar scripts and the site
     switcher hide and show elements with Tailwind's .hidden and the
     hidden attribute, and an unlayered display would beat .hidden and
     leave them showing (site-brand.css met this with the phone menu).
     The student landing page's own al- classes are the other exception;
     nothing toggles them.
   - A Tailwind hover: or focus: utility loses to an unlayered base rule
     for the same property, so every state this sheet colors gets its own
     :hover and :focus rule here. */

/* ---- Ground and type ------------------------------------------------ */

.account-page {
  /* Fill base.html's flex-1 wrapper, so the cream reaches the footer on
     a short page. */
  min-height: 100%;
  box-sizing: border-box;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  padding: 40px 16px 72px;
}

.account-page h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.account-page h2,
.account-page h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text);
}

.account-page a { color: var(--color-secondary-strong); }

/* The (i) dialog opens inside a section heading; it reads as body text. */
.account-page .info-modal {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: normal;
  border-radius: var(--radius);
}

/* ---- Tailwind's grays and indigo, mapped to the tokens -------------- */

.account-page .text-gray-900 { color: var(--color-text); }
.account-page .text-gray-700 { color: var(--color-text-lede); }
.account-page .text-gray-600 { color: var(--color-text-secondary); }
.account-page .text-gray-500 { color: var(--color-text-muted); }
.account-page .text-indigo-600,
.account-page .text-indigo-700 { color: var(--color-secondary-strong); }
.account-page .text-red-600,
.account-page .text-red-700 { color: var(--color-error-strong); }

.account-page .border-gray-200,
.account-page hr { border-color: var(--color-line); }
.account-page .border-gray-300 { border-color: var(--color-line-strong); }

.account-page .rounded-md,
.account-page .rounded-lg,
.account-page .rounded-xl { border-radius: var(--radius); }

.account-page .shadow-sm { box-shadow: none; }

.account-page .bg-gray-50 { background: var(--color-inset); }
.account-page .bg-indigo-50 { background: var(--color-secondary-soft); }
.account-page .border-indigo-200 { border-color: var(--color-secondary-soft); }
.account-page .bg-indigo-100 { background: var(--color-secondary-soft); }

/* Google Calendar's outcome lines. */
.account-page .bg-green-50 { background: var(--color-success-soft); }
.account-page .text-green-800 { color: var(--color-success-strong); }
.account-page .bg-red-50 { background: var(--color-accent-soft); }
.account-page .text-red-800 { color: var(--color-error-strong); }
.account-page .text-amber-700 { color: var(--color-warm-strong); }

/* ---- Fields ---------------------------------------------------------- */

.account-page label {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}

/* A checkbox or radio row reads as an option, not a field's name. */
.account-page label:has(input[type="checkbox"], input[type="radio"]) {
  font-weight: 500;
  font-size: 15px;
}

.account-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
.account-page select,
.account-page textarea {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-line-strong);
  border-radius: 12px;
  background-color: var(--color-bg);
  color: var(--color-text);
  box-shadow: none;
  max-width: 100%;
  box-sizing: border-box;
}

.account-page select { padding-right: 36px; }

.account-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
.account-page select:focus,
.account-page textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.account-page input[type="checkbox"],
.account-page input[type="radio"],
.account-page input[type="range"] { accent-color: var(--color-button); }

.account-page input[type="checkbox"]:focus-visible,
.account-page input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Buttons --------------------------------------------------------- */

/* Primary: allauth's button element and My Account's indigo buttons,
   drawn as .brand-button. Width and layout stay with their own classes,
   so the sign-in button is still full width. */
.account-page button.bg-indigo-600,
.account-page a.bg-indigo-600 {
  background: var(--color-button);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 12px 22px;
  min-height: 44px;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

.account-page button.bg-indigo-600:hover,
.account-page a.bg-indigo-600:hover { background: var(--color-button-hover); color: #FFFFFF; }

/* Secondary: allauth's outline button, My Account's white buttons
   (Change Password, Sign Out, Disconnect, Try another), the switcher's
   no-script Show button, and the sign-in page's provider link. */
.account-page button.border-indigo-600.bg-white,
.account-page a.border-indigo-600.bg-white,
.account-page button.border-gray-300.bg-white,
.account-page a.border-gray-300.bg-white,
.account-page .hub-site-switch-go,
.account-page .account-card li > a[title] {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 11px 20px;
  min-height: 44px;
  box-sizing: border-box;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

.account-page button.border-indigo-600.bg-white:hover,
.account-page a.border-indigo-600.bg-white:hover,
.account-page button.border-gray-300.bg-white:hover,
.account-page a.border-gray-300.bg-white:hover,
.account-page .hub-site-switch-go:hover,
.account-page .account-card li > a[title]:hover { background: var(--color-inset); }

/* Sign Out and Disconnect keep their warning color. */
.account-page button.bg-white.text-red-600 { color: var(--color-error-strong); }

.account-page button.bg-indigo-600:focus-visible,
.account-page a.bg-indigo-600:focus-visible,
.account-page button.bg-white:focus-visible,
.account-page a.bg-white:focus-visible,
.account-page .hub-site-switch-go:focus-visible,
.account-page .account-card li > a[title]:focus-visible,
.account-page a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Sign in, sign up, password and email pages ---------------------- */

.account-page .account-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-sizing: border-box;
}

.account-page .account-card h1 {
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.1;
  margin-bottom: 24px;
}

.account-page .account-card h2 {
  font-size: 18px;
  margin: 0 0 16px;
}

.account-page .account-card p { font-size: 15px; line-height: 1.55; }

.account-page .account-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { width: 100%; }

/* The provider list (allauth's provider_list element): one full-width
   secondary button per provider, its label as allauth writes it. */
.account-page .account-card ul:has(> li > a[title]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-page .account-card li > a[title] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ---- My Account and the avatar creator ------------------------------- */

.account-page .account-inner {
  max-width: 720px;
  margin: 0 auto;
}

.account-page.account-settings h1 { font-weight: 600; }

.account-page.account-settings h2 { font-size: clamp(20px, 2.4vw, 24px); }
.account-page.account-settings h3 { font-size: 18px; }
.account-page.account-settings .info-modal h2 { font-size: 18px; }

/* The tab bar sits on the ground; the active tab is underlined in pink. */
.account-page [data-tab-button] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  background: none;
  cursor: pointer;
}

.account-page [data-tab-button].text-indigo-600 { color: var(--color-text); }
.account-page [data-tab-button].border-indigo-500 { border-color: var(--color-button); }
.account-page [data-tab-button].text-gray-500:hover { color: var(--color-text); }
.account-page [data-tab-button]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Each tab's section is a card. */
.account-page [data-tab-panel] {
  margin-top: 24px;
  padding: 28px 20px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

/* The avatar creator's form and preview are cards too. */
.account-page [data-avatar-generator] {
  background: var(--color-bg-alt);
  border-color: var(--color-line);
  border-radius: var(--radius);
}

@media (min-width: 640px) {
  .account-page { padding-top: 64px; }
  .account-page .account-card { padding: 40px; }
  .account-page [data-tab-panel] { padding: 36px 40px; }
}

/* ---- Student landing ------------------------------------------------- */

.account-page .al-inner {
  max-width: 760px;
  margin: 0 auto;
}

.account-page .al-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-lede);
  margin: 20px 0 0;
}

.account-page .al-section { margin-top: 40px; }

.account-page .al-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.account-page .al-teachers {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.account-page .al-teacher {
  display: block;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--color-text);
  text-decoration: none;
}

.account-page .al-teacher--link:hover { border-color: var(--color-secondary); }
.account-page .al-teacher--link:hover .al-teacher-link { text-decoration: underline; }

.account-page .al-teacher-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
}

.account-page .al-teacher-link {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-secondary-strong);
}

.account-page .al-note {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

.account-page .al-teach {
  margin-top: 40px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.account-page .al-teach h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 0; }

.account-page .al-teach p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-lede);
  margin: 12px 0 0;
}

.account-page .al-teach .brand-button { margin-top: 20px; }

/* .account-page a would otherwise win on specificity and turn it purple. */
.account-page .brand-button,
.account-page .brand-button:hover { color: #FFFFFF; }