does not inherit it, and Safari
                             falls back to its own UI font without this */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* 104, down from 132. The template asks for rows="4", which computes
     to about 114px at --text-base with line-height 1.6. The old floor
     was ABOVE that, so lowering the rows count alone changed nothing:
     min-height simply won and the box stayed 132px. The two have to
     move together or neither does.

Still a floor rather than a fixed height, so the field cannot
     collapse to a single line on a browser that ignores rows. */
  min-height: 104px;
  padding: 11px 13px;
  line-height: 1.6;

/* VERTICAL ONLY. A textarea that can be dragged wider breaks out of
     the 392px column and leaves the field visibly out of line with the
     three above it, with no way back except reloading. Growing
     downwards costs nothing. */
  resize: vertical;
}

/* Sits in the .au-labelrow opposite the label, which is the same slot
   "Forgot password?" occupies on /login. Empty until the message is
   within 500 characters of the ceiling, so it reads as a warning rather
   than as a limit being policed from the first keystroke. */
.auth-v2 .au-counter {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;  /* stops the number jittering as
                                          digits change width */
}

.auth-v2 .au-counter.is-low { color: var(--color-danger); }

/* ── HONEYPOT ─────────────────────────────────────────────────
   The field a bot fills in and a person never sees.

NOT display:none, and not visibility:hidden. Both are the first
   thing a form-filling script checks for, and a field hidden that way
   is skipped, which turns the trap into decoration. Moving it out of
   the viewport leaves it visible to anything reading the DOM and
   invisible to anyone reading the screen.

The <input> keeps tabindex="-1" and the wrapper keeps aria-hidden in
   the markup, so keyboard and screen reader users never reach it
   either. All four parts are load-bearing; see the note in
   templates/pages/contact.php. */
.auth-v2 .au-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══ success screen ═══════════════════════════════════════════ */
/* layout.css owns the checkmark animation. Only the type changes. */
.auth-v2 .success-title {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: var(--weight-semibold);
  letter-spacing: -.025em;
}

.auth-v2 .auth-success .btn { margin-top: 26px; }

/* Registration is finished and the session is live, so the two things
   that offer a way INTO an account both stop making sense: "Sign in"
   in the corner, and the sticky "Create free account" bar. Set by
   showSuccess() in register.js. */
.auth-v2.is-done .au-top-actions { display: none; }
.auth-v2.is-done .au-sticky { display: none; }

/* ═══════════════════════════════════════════════════════════════
   DESKTOP · the split view
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* ── THE PANEL IS AN INSET TILE, THE PAGE IS NOT ─────────────
     Padding on the shell, radius on the panel. The page itself stays
     full bleed and white to all four edges; what floats inside it is
     the gradient.

Two earlier versions were both wrong in the same way. The first
     put a rounded card on a tinted backdrop, so the whole screen read
     as a component. The second took the radius off everything, so the
     gradient ran into the window edge and read as a browser chrome
     accident rather than as a deliberate shape.

This is the version that works: the white is the page, the tile is
     an object on it. box-sizing is border-box globally (base.css), so
     this padding sits INSIDE the 100svh above and does not push the
     shell past the viewport. */
  .auth-v2 .au-shell {
    --au-gutter: 16px;
    /* Not 50/50. An even split gives the form column exactly as much
       room as the panel, which makes a 392px field column look
       stranded in the middle of a very wide empty half. Weighting it
       the other way (panel smaller than form) matches how this layout
       reads everywhere it is used well: the panel is the supporting
       element, the form is the task. */
    grid-template-columns: 0.85fr 1fr;
  }

/* ── THE PANEL IS SIZED TO THE VIEWPORT, NOT TO THE PAGE ─────
     A grid item stretches to the height of its ROW by default, and the
     row is as tall as the taller of the two columns. On /login,
     /contact and both password pages the form is shorter than the
     screen, the row is therefore exactly the 100svh min-height, and the
     panel gets the 16px inset above AND below it that this layout is
     drawn around.

/register is the one page whose form is TALLER than the viewport.
     The row grew to fit it, the panel stretched with it, and the
     bottom inset went below the fold: on first paint the gradient ran
     straight off the bottom edge with a 16px gap still at the top. The
     panel was never wrong, it was just measuring the wrong thing.

Fixing it means giving the panel its own height instead of
     inheriting the row's, and then pinning it so it does not simply
     scroll away and leave the lower half of a tall form beside an
     empty white column.

WHY NOT the alternatives:
       · shrink the register form until it fits. Trades a cosmetic
         problem on one breakpoint for a cramped form on all of them.
       · position:fixed. Takes the panel out of flow, so the grid
         column collapses to zero and the form jumps left.
       · height:100svh with no sticky. Correct on arrival, then the
         panel scrolls off and the column goes blank. */
  .auth-v2 .au-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

/* sticky, not relative. Still a positioned ancestor, so .au-mesh
       and .au-grain (both inset:0 absolute) are unaffected. */
    position: sticky;
    top: var(--au-gutter);

/* align-self is what makes the two lines above do anything at all.
       Without it the item still stretches to the full row, a sticky box
       with no room to travel inside its containing block behaves
       exactly like a relative one, and nothing changes. Starting the
       item and giving it an explicit height turns the rest of the grid
       area into its runway. */
    align-self: start;

/* vh first as the fallback for anything that does not know svh. On
       desktop the two are the same number; the pair is kept for
       consistency with .au-shell above. */
    height: calc(100vh - var(--au-gutter) * 2);
    height: calc(100svh - var(--au-gutter) * 2);

overflow: hidden;
    border-radius: 24px;
    padding: 40px;
    isolation: isolate;
  }

/* NOT .au-aside > *. That would also catch .au-mesh and .au-grain and
     knock both out of position:absolute, which drops the gradient into
     the flow as a zero-height box. */
  .auth-v2 .au-aside-top,
  .auth-v2 .au-aside-foot { position: relative; z-index: 2; }

.auth-v2 .au-main { padding: 28px 40px 32px; }
  .auth-v2 .au-main .au-lockup { display: none; }
  .auth-v2 .au-main .au-top-actions { margin-left: auto; }
  .auth-v2 .au-body { padding: 32px 0 8px; }
}

@media (min-width: 1280px) {
  .auth-v2 .au-shell { --au-gutter: 20px; }
  .auth-v2 .au-aside { padding: 52px; }
  .auth-v2 .au-main { padding: 32px 56px 36px; }
}

@media (min-width: 1600px) {
  .auth-v2 .au-shell {
    --au-gutter: 24px;
    /* Stop the panel eating the screen on an ultrawide. Past this width
       the form column is the thing that should grow. */
    grid-template-columns: minmax(0, 780px) 1fr;
  }
  .auth-v2 .au-aside { padding: 64px; }
}

/* Aside internals. Only ever rendered at >= 900px. */
.auth-v2 .au-aside-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.auth-v2 .au-aside .au-lockup { display: inline-flex; }
.auth-v2 .au-aside .au-mark { background: var(--au-panel-ink); color: #FBFAFF; }
[data-theme="dark"] .auth-v2 .au-aside .au-mark { background: rgba(255,255,255,.92); color: #0C0A13; }
.auth-v2 .au-aside .au-wordmark { color: var(--au-panel-ink); }
.auth-v2 .au-aside-foot { max-width: 30ch; }

.auth-v2 .au-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--au-panel-ink-2);
}

.auth-v2 .au-aside-h {
  font-family: var(--font-display);
  margin: 11px 0 0;
  font-size: clamp(28px, 2.6vw, 34px);
  line-height: 1.1;
  font-weight: var(--weight-semibold);
  letter-spacing: -.03em;
  color: var(--au-panel-ink);
}

/* ═══════════════════════════════════════════════════════════════
   PHONE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* ── THE BUG THIS FIXES ──────────────────────────────────────
     .au-body used to be flex:none here, so it took only its natural
     height. .au-main is a full-height column, which meant every pixel
     of leftover space piled up in one lump BELOW the legal footer.
     On a short phone that was invisible; on a 956pt iPhone 16 Pro Max
     it was a couple of hundred pixels of nothing under the footer
     while the header looked crammed against the top edge.

flex:1 gives that space back to the body, so the footer settles at
     the bottom of the screen and the slack goes around the form via
     the auto margins instead of collecting in one place. The taller
     the phone, the more the form breathes, which is the opposite of
     what it did before. */
  .auth-v2 .au-main {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(16px + env(safe-area-inset-bottom, 0px));
  }

.auth-v2 .au-col { max-width: 440px; }

/* Bottom padding larger than the base: it is the minimum gap to the
     footer once the auto margins have run out on a small screen. */
  .auth-v2 .au-body { padding: 26px 0 20px; }

.auth-v2 .auth-legal-footer { margin-top: 20px; }
  .auth-v2 .au-sticky { display: block; }
}

/* Below 360px the two name fields stop fitting side by side. */
@media (max-width: 359px) {
  .auth-v2 .au-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-v2 *,
  .auth-v2 *::before,
  .auth-v2 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}