/*
 * Global dark-mode legibility fixes.
 * index.html already links this file; it was previously missing (404).
 */

/* Tailwind preflight pins ::placeholder to gray-400 (#9ca3af), which lands at
 * ~4.1:1 on the dark input surface (slate-700) — under the 4.5:1 AA floor.
 * This value sits between slate-400 and slate-300: ~5.3:1, still clearly
 * secondary to the entered value (slate-200). */
.dark ::placeholder,
.dark ::-webkit-input-placeholder {
    color: #aebbcc;
    opacity: 1;
}

/* ── Chrome autofill ──────────────────────────────────────────────────────
 * Chrome paints its own opaque background (#e8f0fe) over an autofilled field
 * and re-renders the value itself. Author CSS cannot override that background
 * directly — but it is applied as a transition, so an absurd delay means it
 * never actually arrives, which leaves the field's own translucent background
 * intact. -webkit-text-fill-color is the only way to colour the text Chrome
 * draws.
 * This matters more than usual here: the login fields are glass, so the opaque
 * blue does not just look wrong, it hides the pane entirely. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 100000s ease-in-out 0s;
    -webkit-text-fill-color: #111827; /* gray-900 */
    caret-color: #111827;
}

/* ── Autofilled text renders at the wrong size ────────────────────────────
 * Symptom: open the login page with a saved password and the username/password
 * text is small; click into the field and it jumps to its real size.
 *
 * Nothing about the cascade is wrong — measuring the element over CDP reports
 * the correct 21px the whole time, and `.login-field` is confirmed to beat
 * preflight's `input { font-size: 100% }`. The size that is wrong is the one
 * Blink PAINTS the autofilled value at, which is a separate style hook.
 *
 * The transition hack above is what makes this hard to recognise: it suppresses
 * the blue autofill background, so the field gives no sign it is in that state
 * and the whole thing reads as a font bug.
 *
 * Verified against Blink over CDP rather than assumed:
 *   - ::first-line on an <input> resolves independently of the element
 *     (40px/monospace while the element stayed 14px) — a real, separate hook
 *     for input text;
 *   - `inherit` inside ::first-line resolves to the ORIGINATING ELEMENT (21px),
 *     not the block parent (14px), so it hands each field back its own type;
 *   - which of the autofill pseudo-classes an author sheet may use:
 *       :-webkit-autofill               parses / queryable
 *       :autofill                       parses / queryable
 *       :-internal-autofill-selected    parses / queryable
 *       :-internal-autofill-previewed   parses / queryable
 *       :-internal-input-suggested      REJECTED — SyntaxError, rule dropped
 *
 * That last one is what Chromium's own tracker names as the state forcing a
 * smaller font, and it is UA-only by design. So everything reachable is listed
 * below, element AND ::first-line, with !important — the last lever the cascade
 * offers. If the text is still small on load after this, no author CSS can
 * reach it; see the note at the end of this file. */
input:-webkit-autofill,
input:autofill,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    font-family: inherit !important;
}
input:-webkit-autofill::first-line,
input:autofill::first-line,
input:-internal-autofill-selected::first-line,
input:-internal-autofill-previewed::first-line {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    -webkit-text-fill-color: #f1f5f9; /* slate-100 */
    caret-color: #f1f5f9;
}

/* ── Login field size ─────────────────────────────────────────────────────
 * Pinned in this real stylesheet rather than left to a `text-*` utility: this
 * file is a plain <link>, so it is parsed before the first frame, whereas the
 * Play CDN compiles Tailwind in the browser and only emits a class after it
 * has seen it in the DOM.
 *
 * NOT the reason the fields once rendered small — that was autofill/::first-line,
 * handled above. Recorded because two wrong hypotheses (a Play CDN generation
 * race, then autofill's `appearance: menulist-button`) were chased first, and
 * both looked plausible against this rule.
 *
 * 1.5rem at the 14px root = 21px. Worth stating because the project shrinks the
 * root from 16px to 14px, so every Tailwind text-* class lands ~12% smaller
 * than its name suggests — `text-xl` is 17.5px here, not 20px. */
.login-field {
    font-size: 1.5rem;
    line-height: 2rem;
}

/* Belt and braces: the two fields Chrome actually autofills, pinned to a literal
 * value rather than left to `inherit`, in case `inherit` is what fails to
 * resolve inside a UA-forced state. */
.login-field:-webkit-autofill,
.login-field:autofill,
.login-field:-internal-autofill-selected,
.login-field:-internal-autofill-previewed,
.login-field:-webkit-autofill::first-line,
.login-field:autofill::first-line,
.login-field:-internal-autofill-selected::first-line,
.login-field:-internal-autofill-previewed::first-line {
    font-size: 1.5rem !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
}

/* ── If the fields are STILL small on load ────────────────────────────────
 * Then the state is :-internal-input-suggested and no author CSS can reach it
 * (verified: Blink raises SyntaxError on the selector and drops the rule).
 * Chrome fills credential fields on load but leaves them "suggested" — not
 * committed — until the page gets a user gesture, which is why one click
 * anywhere fixes it and why scripts cannot read the value before then.
 * The only remaining lever is preventing the autofill-on-load itself, which
 * costs the password manager, so that is the user's call, not a silent fix. */