/* ============================================================== autofill
   Chrome paints autofilled inputs with its own near-white background and
   ignores `background` entirely — on a dark app that turns a filled username
   box into a white slab with dark text. The only reliable override is a huge
   inset box-shadow, which paints over Chrome's layer, plus
   -webkit-text-fill-color for the text itself (`color` is ignored too).

   The transition is the standard trick for the yellow/blue flash: the colour
   change is deferred far beyond any session, so it never animates in.

   --autofill-bg is set per surface so the fill matches the field it sits in.
   -------------------------------------------------------------------- */

:root { --autofill-bg: #1b231c; --autofill-ink: #eef3ee; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--autofill-ink);
  caret-color: var(--autofill-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset;
  box-shadow: 0 0 0 1000px var(--autofill-bg) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* Firefox has its own, much milder, autofill tint */
input:autofill, select:autofill, textarea:autofill {
  background-color: var(--autofill-bg);
  color: var(--autofill-ink);
}

/* The sign-in fields are translucent over the glass card. This solid value is
   the composite of the card and field layers over the page background, so the
   painted-over autofill is indistinguishable from an empty field. */
.auth { --autofill-bg: #181f1b; --autofill-ink: #ffffff; }
.auth .auth-field:focus-within { --autofill-bg: #19241d; }

/* Chrome also shows a key icon on password fields; it sits oddly next to the
   reveal button, so give the reveal button room and keep both reachable. */
.auth-field input::-webkit-credentials-auto-fill-button,
.auth-field input::-webkit-strong-password-auto-fill-button {
  margin-right: 4px;
}