/* Sign-in / sign-up / password-reset pages (templates/account/*.html,
   templates/socialaccount/*.html) and the account menu partial
   (book/templates/book/account_menu.html, included from both editor.html
   and projects_home.html).

   This file is loaded on three different surfaces (the standalone auth
   pages, the editor, and the projects page), so every rule below is scoped
   under an .acc-* class -- never a bare element selector (*, html, body) --
   so nothing here can leak into the editor canvas/print pipeline or the
   projects page's own layout. */

:root {
  --acc-ink: #18181B;
  --acc-grey: #71717A;
  --acc-border: #E4E4E7;
  --acc-accent: #4F46E5;
  --acc-error: #B91C1C;
  --acc-ok: #047857;
  --acc-warn: #B45309;
  /* The brief asked for "the editor's font family, IBM Plex Sans" -- the
     editor's own chrome (editor.css's html/body rule) actually renders in
     "Andika" (book/static/fonts/Andika-*.ttf, the printed-book content
     font); IBM Plex Sans is what static/css/projects.css's --font-stack
     already declares for the projects page's chrome. Since the two host
     pages disagree, this reuses projects.css's existing stack verbatim
     (no new font added) for the standalone auth pages below, and leaves
     the account-menu component (further down) with no font-family of its
     own so it simply inherits whichever chrome font its host page (editor
     or projects) already uses. */
  --acc-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Page shell (standalone auth pages) -------------------------------- */

.acc-page {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #EEF2FF, #FFF7ED);
  color: var(--acc-ink);
  font-family: var(--acc-font);
  font-size: 13.5px;
  line-height: 1.5;
}

.acc-page *, .acc-page *::before, .acc-page *::after { box-sizing: border-box; }

.acc-shell { width: 100%; display: flex; justify-content: center; }

.acc-card {
  width: 400px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #D4D4D8;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
  padding: 26px;
}

.acc-brand {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc-accent);
}

.acc-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--acc-ink); }
.acc-subtitle { margin: 6px 0 18px; font-size: 13px; color: var(--acc-grey); line-height: 1.4; }
.acc-subtitle:last-child { margin-bottom: 0; }

.acc-icon-mail {
  width: 40px;
  height: 40px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #EEF2FF;
  color: var(--acc-accent);
}
.acc-icon-mail svg { width: 20px; height: 20px; }

/* ---- Google button ------------------------------------------------------ */

.acc-google-form { margin: 0 0 14px; }

.acc-google-btn {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #D4D4D8;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--acc-ink);
  cursor: pointer;
}
.acc-google-btn:hover { border-color: #A1A1AA; background: #FAFAFA; }
.acc-google-btn:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 1px; }
.acc-google-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.acc-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--acc-grey);
  font-size: 12px;
}
.acc-divider::before, .acc-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--acc-border); }

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

.acc-field { margin: 0 0 14px; }
.acc-field:last-of-type { margin-bottom: 0; }

.acc-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.acc-label { font-size: 12.5px; font-weight: 600; color: var(--acc-ink); }
.acc-label-link { font-size: 12px; font-weight: 600; color: var(--acc-accent); text-decoration: none; }
.acc-label-link:hover { text-decoration: underline; }

.acc-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #D4D4D8;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--acc-ink);
  background: #fff;
}
.acc-input::placeholder { color: #A1A1AA; }
.acc-input:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 1px; }
.acc-input.is-invalid { border-color: #F87171; }

.acc-field-error { margin: 4px 0 0; font-size: 12px; color: var(--acc-error); }
.acc-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--acc-grey); line-height: 1.4; }

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

.acc-btn {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.acc-btn-primary { background: var(--acc-accent); border-color: var(--acc-accent); color: #fff; }
.acc-btn-primary:hover { background: #4338CA; border-color: #4338CA; }
.acc-btn-primary:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 2px; }

.acc-btn-secondary { background: #fff; border-color: #D4D4D8; color: var(--acc-ink); }
.acc-btn-secondary:hover { border-color: #A1A1AA; background: #FAFAFA; }

/* An <a> wearing .acc-btn classes (signup_closed.html's "Sign in" link,
   email_confirm.html's issue-a-new-link link) needs these to actually look
   like the buttons above instead of inline text. */
.acc-btn-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }

.acc-btn-ghost {
  display: block;
  width: 100%;
  height: auto;
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--acc-accent);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.acc-btn-ghost:hover { text-decoration: underline; }

.acc-actions { display: flex; flex-direction: column; gap: 10px; }
.acc-actions-row { display: flex; gap: 10px; }
.acc-actions-row .acc-btn { flex: 1 1 auto; }

/* ---- Banners -------------------------------------------------------------- */

.acc-banner { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
.acc-banner:last-child { margin-bottom: 0; }
.acc-banner-error { background: #FEF2F2; border: 1px solid #FECACA; color: var(--acc-error); }
.acc-banner-ok { background: #ECFDF5; border: 1px solid #A7F3D0; color: var(--acc-ok); }
.acc-banner-info { background: #EEF2FF; border: 1px solid #C7D2FE; color: #4338CA; }

/* ---- Footer links -------------------------------------------------------- */

.acc-footer { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--acc-grey); }
.acc-footer a { color: var(--acc-accent); font-weight: 600; text-decoration: none; }
.acc-footer a:hover { text-decoration: underline; }
.acc-footer-note { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: var(--acc-grey); line-height: 1.4; }

@media (max-width: 400px) {
  .acc-page { padding: 16px; }
  .acc-card { padding: 20px; }
}

/* ========================================================================
   Account menu (avatar + dropdown): embedded in book/templates/book/
   editor.html's top bar and book/templates/book/projects_home.html's
   header via book/templates/book/account_menu.html. No font-family here
   on purpose -- see the note on --acc-font above. */

.acc-menu { position: relative; flex: 0 0 auto; }

.acc-menu-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.acc-menu-btn:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 2px; }

.acc-avatar-0 { background: #4F46E5; }
.acc-avatar-1 { background: #F59324; }
.acc-avatar-2 { background: #14857F; }
.acc-avatar-3 { background: #DB2777; }
.acc-avatar-4 { background: #7C3AED; }

.acc-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 250px;
  background: #fff;
  border: 1px solid #D4D4D8;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
  padding: 8px;
}
.acc-menu-dropdown[hidden] { display: none; }

.acc-menu-header { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }

.acc-avatar-lg { width: 36px; height: 36px; font-size: 13px; flex: 0 0 auto; }

.acc-menu-id { min-width: 0; overflow: hidden; }
.acc-menu-name { font-size: 13px; font-weight: 700; color: #18181B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-menu-email { font-size: 11.5px; color: #71717A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acc-menu-divider { height: 1px; margin: 4px 4px; background: #E4E4E7; }

.acc-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: #18181B;
  text-decoration: none;
  cursor: pointer;
}
.acc-menu-item:hover, .acc-menu-item:focus-visible { background: #F4F4F5; outline: none; }
.acc-menu-item-danger { color: #B91C1C; }
.acc-menu-signout { margin: 0; }