/* The sign-in layer (auth.js) and the password page (password.html), which is the same card on a
   page of its own. Drawn on the two sheet pages too, which load tokens.css and header.css but never
   base.css — so, like unlock.css, everything it leans on is said here: the type, the heading and
   paragraph reset, the focus ring, text selection. The tokens are tokens.css's.

   The <dialog> itself is see-through: it holds the two cats and the card under them, so the cats
   can sit BEHIND the card's top edge — their chins hidden, peeking over it — and scroll with it on
   a short screen. The card is the Unlock dialog's surface, edge and shadow. */
/* 500px, wider than the Unlock dialog's 440, so each reason's heading AND its line read on one
   line each (asked for 2026-10-21): the longest line, the unlock one, needs 415px of the card's
   434, and "Meow. Excellent choice, hooman!" 365px beside the close button. At 420 both broke —
   the heading before "hooman!" by 2px. The spare room is for fonts that set wider than macOS's
   rounded face. A phone wraps them anyway. */
dialog.auth {
  width: min(500px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto;
  border: 0; background: none; overflow: auto; overscroll-behavior: contain;
  color: var(--text); font-size: 15px; line-height: 1.5; user-select: text; -webkit-user-select: text;
}
dialog.auth::backdrop { background: rgba(12,6,10,.6); backdrop-filter: blur(3px); }
/* The card's shadow is cast by the DIALOG, as a drop-shadow of what it holds: a box-shadow on the
   card was cut off square by the dialog's own overflow (it scrolls on short screens), and showed
   as a hard dark rectangle behind the card's round corners. A filter is not clipped that way. */
dialog.auth { filter: drop-shadow(0 24px 36px rgba(0,0,0,.55)); }
dialog.auth[open] { animation: auth-in 200ms cubic-bezier(.2,.8,.3,1); }
@keyframes auth-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
/* -8px, not more: the card covers only their chins. At -30 it came up to their eyes, and only
   ears and foreheads showed over the edge. */
.auth-cats { position: relative; z-index: 0; display: block; width: 188px; height: auto; margin: 4px auto -8px; pointer-events: none; }
.auth-card {
  position: relative; z-index: 1; display: grid; gap: 16px; padding: 26px 22px 22px;
  border: 1px solid rgba(255,145,191,.22); border-radius: 22px; background: var(--surface);
}
.auth-page .auth-card { box-shadow: 0 30px 80px rgba(0,0,0,.6); }   /* on its own page, nothing clips it */
.auth-card :is(h1, h2, p) { margin: 0; }
.auth-card :is(a, button, input):focus-visible { outline: 3px solid #ffd2e5; outline-offset: 2px; }
.auth-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; }
.auth-card h2, .auth-card h1 {
  font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
}
.auth-card h2 { padding-right: 44px; }   /* the layer's close button; the password page has none */
.auth-card h2 span, .auth-card h1 span { color: var(--accent); }
.auth-line { margin-top: -8px !important; color: var(--muted); font-size: 14.5px; text-wrap: pretty; }
.auth-form { display: grid; gap: 14px; }
.auth-form > .play { width: 100%; margin-top: 4px; }

/* Apple and Google: the brands' own dark buttons — Google's dark theme (#131314, #e3e3e3 ink), with
   Apple's black matched to it — so they are raw hex, not our tokens. No edge: the theme's grey
   #8e918f outline looked off on this card (2026-10-24), and the near-black fill already stands
   apart from the plum surface. Dark, not
   the white variants: on this card two white bars would outshine Sign in, the one pink thing.
   Side by side where both fit, stacked
   on a phone; the same size either way, as Apple asks. */
.auth-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 14px;
  border: 0; border-radius: var(--control-r); background: #131314; cursor: pointer;
  color: #e3e3e3; font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.auth-provider:hover { background: #2a2a2b; }
.auth-provider img { width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* A field: label row, a SUNK input (text fields are sunk, buttons raised — tokens.css), its error. */
.auth-field { display: grid; gap: 6px; }
.auth-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label label { font-size: 13.5px; font-weight: 700; color: var(--control-ink); }
.auth-input { position: relative; }
.auth-input input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--control-r);
  border: 1px solid var(--control-line); background: var(--field-bg); box-shadow: var(--field-shadow);
  color: var(--text); font: inherit; font-size: 16px;   /* 16, not less: iOS zooms on focus under it */
}
.auth-input input[type="password"], .auth-input:has(.auth-eye) input { padding-right: 50px; }
.auth-input input[aria-invalid] { border-color: #ff8fab; }
.auth-eye {
  position: absolute; top: 3px; right: 3px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: none; cursor: pointer;
}
.auth-eye:hover { background: var(--control-hover); }
.auth-eye img { width: 18px; height: 18px; }
.auth-error { color: #ffa8bf; font-size: 13px; font-weight: 700; }
.auth-hint { color: var(--dim); font-size: 12.5px; }

/* Text buttons: Create one, Sign in, Forgot password? — links in look, buttons in kind, since none
   of them goes anywhere. */
.auth-link {
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--accent);
}
.auth-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-label .auth-link { font-size: 13px; }
.auth-error .auth-link { font-size: 13px; }
.auth-switch { text-align: center; font-size: 14px; color: var(--muted); }
.auth-sent { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font-size: 14.5px; }
.auth-sent b { color: var(--text); }
/* The prototype's demo accounts under the form: small and quiet, and it says what it is. */
.auth-demo { margin-top: -4px; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line);
             text-align: center; font-size: 12.5px; color: var(--dim); }
.auth-demo b { color: var(--muted); font-variant-numeric: tabular-nums; }
.auth-demo .auth-link { font-size: 12.5px; }
/* The prototype's stand-in for the inbox: small, and it says what it is. */
.auth-proto { justify-self: start; font-size: 13px; font-weight: 700; color: var(--dim); }
.auth-proto:hover { color: var(--text); }

/* The password page (password.html): the same cats and card, centred on a page of its own. */
.auth-page { max-width: 420px; margin-top: 48px; }

@media (prefers-reduced-motion: reduce) {
  dialog.auth[open] { animation: none; }
}