/* Loaded after account.css; the public page keeps its own body theme. */
dialog.auth-modal {
  --account-ink: #29252e;
  --account-teal: #625079;
  --account-teal-hover: #4e3e63;
  --account-muted: #6b6370;
  --account-border: #e4dfe7;
  --account-surface: #fff;
  --account-background: #faf8f5;
  position: fixed;
  inset: 0;
  width: min(600px, calc(100vw - 32px));
  min-width: 0;
  max-width: calc(100vw - 32px);
  height: fit-content;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  border: 1px solid #e4dfe7;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  color: var(--account-ink);
  box-shadow: 0 24px 90px #29252e33, 0 3px 18px #29252e14;
  font: 400 16px/1.6 Arial, Helvetica, sans-serif;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  color-scheme: light;
  isolation: isolate;
  overscroll-behavior: contain;
}

dialog.auth-modal:not([open]) { display: none; }
dialog.auth-modal[open] { display: flex; flex-direction: column; }
dialog.auth-modal::backdrop {
  background: rgb(41 37 46 / 46%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.auth-modal,
.auth-modal *,
.auth-modal *::before,
.auth-modal *::after { box-sizing: border-box; }

.auth-modal :is(button, input, select, textarea) {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

.auth-modal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 92vh;
  max-height: 92dvh;
  overflow: hidden;
  background: #fff;
  color: var(--account-ink);
  font: inherit;
}

.auth-modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4dfe7;
  background: #faf8f5;
}

.auth-modal-context { color: var(--account-ink); font: 600 15px/1.4 Arial, Helvetica, sans-serif; }

.auth-modal-tabs {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 4px;
  max-width: 390px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid #e4dfe7;
  border-radius: 16px;
  background: #f2edf7;
}

.auth-modal-tabs button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #6b6370;
  box-shadow: none;
  font: 600 14px/1.3 Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.auth-modal-tabs button:hover { background: #eae2f3; color: var(--account-teal); }
.auth-modal-tabs button[data-active="true"] {
  border-color: #625079;
  background: #625079;
  color: #fff;
  box-shadow: 0 1px 4px #29252e10;
}
.auth-modal-tabs button:disabled { opacity: .65; cursor: wait; }

.auth-modal-close {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #625079;
  box-shadow: none;
  font: 400 28px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.auth-modal-close:hover { border-color: #d3c9dc; background: #eee7f5; color: #4e3e63; }
.auth-modal-close svg { display: block; width: 20px; height: 20px; pointer-events: none; }
.auth-modal-close > span { line-height: 1; pointer-events: none; }
.auth-modal-header :is(button, a):focus-visible {
  outline: 3px solid #625079;
  outline-offset: 3px;
}

.auth-modal-content {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 26px 30px 30px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #b7a5d8 transparent;
  scroll-padding: 20px;
  background: #fff;
  color: var(--account-ink);
  font: 400 16px/1.6 Arial, Helvetica, sans-serif;
}

.auth-modal .account-page,
.auth-modal .account-page--wide {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--account-ink);
  font: 400 16px/1.6 Arial, Helvetica, sans-serif;
}
.auth-modal .account-heading { margin: 0 0 24px; }
.auth-modal .account-page .account-eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .1em; }
.auth-modal .account-page h1 {
  margin: 0 0 12px;
  color: var(--account-ink);
  font: 600 31px/1.15 "league-spartan-v2", Arial, Helvetica, sans-serif;
  letter-spacing: -.02em;
}
.auth-modal .account-page .account-lead { margin: 0; font-size: 15px; line-height: 1.6; }
.auth-modal .account-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.auth-modal .account-form fieldset { gap: 18px; }
.auth-modal .account-field-row { gap: 16px; }
.auth-modal .account-field :is(input, select) { font-size: 16px; }
.auth-modal .account-page .account-card-footer { margin-top: 20px; padding-top: 20px; }
.auth-modal .account-form fieldset > .account-card-footer { margin-top: 0; }
.auth-modal .account-help { margin-top: 22px; padding: 16px 18px; border-radius: 14px; }
.auth-modal .account-help summary { font-size: 13px; }
.auth-modal .account-help[open] summary { margin-bottom: 14px; }
.auth-modal .account-help > p { font-size: 13px; }
.auth-modal .account-notice { margin-bottom: 18px; }
.auth-modal .account-dashboard { grid-template-columns: 1fr; gap: 28px; }
.auth-modal .account-sidebar { gap: 28px; }
.auth-modal .account-loading { min-height: 86px; }

@media (max-width: 520px) {
  dialog.auth-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    border-radius: 20px;
  }
  .auth-modal-header { gap: 10px; padding: 12px 14px; }
  .auth-modal-tabs { gap: 2px; padding: 3px; }
  .auth-modal-tabs button { min-height: 40px; padding: 8px 9px; font-size: 13px; }
  .auth-modal-content { padding: 23px 20px 26px; }
  .auth-modal .account-heading { margin-bottom: 22px; }
  .auth-modal .account-page h1 { font-size: 29px; }
  .auth-modal .account-page .account-lead { font-size: 14px; }
  .auth-modal .account-field-row { grid-template-columns: 1fr; gap: 18px; }
  .auth-modal .account-help { padding: 15px 14px; }
}

@media (max-height: 540px) {
  dialog.auth-modal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .auth-modal-panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .auth-modal-header { padding-top: 8px; padding-bottom: 8px; }
  .auth-modal-content { padding-top: 18px; padding-bottom: 20px; }
}

@media (forced-colors: active) {
  dialog.auth-modal { border: 1px solid CanvasText; }
  .auth-modal-tabs button[data-active="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
  .auth-modal-close { border-color: ButtonText; }
}