/* Нэвтрэх / Бүртгүүлэх (/login, /signup): the welcome and the mascot team
   beside the form; on a phone, above it. */
@layer page {
  .au { display: grid; gap: var(--sp-6); align-items: center; max-width: 1040px; margin: 0 auto; }
  @media (min-width: 900px) {
    .au { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: var(--sp-8); padding-block: var(--sp-6); }
  }

  /* The welcome. */
  .au-side { display: grid; gap: var(--sp-4); max-width: 34rem; }
  .au-title { margin: 0; font-size: var(--fs-36); text-wrap: balance; }
  .au-lede { margin: 0; color: var(--muted); font-size: var(--fs-18); }
  .au-team { display: flex; align-items: flex-end; gap: 2px; max-width: 420px; min-height: 56px; }
  .au-mascot {
    flex: 1 1 0;
    aspect-ratio: 1;
    animation: au-bob 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -560ms);
  }
  .au-mascot svg { display: block; width: 100%; height: 100%; }
  @keyframes au-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .au-facts { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; color: var(--muted); font-weight: var(--fw-bold); }
  .au-facts li { display: flex; align-items: center; gap: var(--sp-3); }
  .au-facts .i { flex: none; color: var(--primary); }

  /* The card. */
  .au-card { display: grid; gap: var(--sp-4); }
  .au-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
  }
  .au-tab {
    min-height: var(--control-h);
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: var(--fw-bold);
    cursor: pointer;
  }
  .au-tab[aria-selected='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .au-form { display: grid; gap: var(--sp-4); }
  .au-form i { color: var(--muted); font-style: normal; font-weight: var(--fw-body); }
  .au-pass { position: relative; display: block; }
  .au-pass .input { padding-right: calc(var(--control-h) + var(--sp-1)); }
  .au-eye { position: absolute; top: 0; right: 0; border-color: transparent; background: transparent; color: var(--muted); }
  .au-eye:hover, .au-eye[aria-pressed='true'] { background: transparent; color: var(--text); }

  /* Kid or adult: two doors, one radio group. */
  .au-account { min-width: 0; margin: 0; padding: 0; border: 0; }
  .au-account legend { margin-bottom: var(--sp-2); padding: 0; font-size: var(--fs-13); font-weight: var(--fw-bold); }
  .au-account-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .au-opt { position: relative; display: block; cursor: pointer; }
  .au-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .au-opt > span {
    display: grid;
    justify-items: center;
    gap: 2px;
    height: 100%;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: center;
  }
  .au-opt b { font-size: var(--fs-15); }
  .au-opt small, .au-opt em { color: var(--muted); font-size: var(--fs-12); font-style: normal; }
  .au-opt input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
  .au-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
  .au-avatar { display: block; width: 52px; height: 52px; margin-bottom: var(--sp-1); }
  .au-avatar svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

  .au-submit.is-busy { cursor: progress; animation: au-pulse 1.2s ease-in-out infinite; }
  @keyframes au-pulse { 50% { opacity: 0.35; } }

  .au-switch { margin: 0; color: var(--muted); font-weight: var(--fw-bold); text-align: center; }
  .au-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h);
    padding: 0 var(--sp-1);
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-weight: var(--fw-heavy);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .au-note { margin: 0; color: var(--muted); font-size: var(--fs-13); text-align: center; }

  @media (max-width: 899.98px) {
    .au-side { justify-items: center; margin-inline: auto; text-align: center; }
    .au-title { font-size: var(--fs-30); }
    .au-team { width: 100%; max-width: 340px; }
    .au-facts { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .au-mascot, .au-submit.is-busy { animation: none; }
  }
  .au-as { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-bold); }
}