/*
 * Form-control defaults.
 *
 * Tailwind's Preflight resets every form control to zero padding
 * (`button,input,optgroup,select,textarea{margin:0;padding:0}`) and this
 * project does not load @tailwindcss/forms, so any field that does not spell
 * out its own px-/py- utilities renders with its text jammed against the
 * border. That was ~790 of ~1400 fields, plus the `pl-7` currency inputs,
 * which state a left padding and so had no vertical padding at all.
 *
 * Specificity is the whole trick here:
 *   `html input` / `html textarea` / `html select`  ->  (0,0,2)
 *   Preflight's `input,textarea,select`             ->  (0,0,1)  loses
 *   any single utility class, e.g. `.px-3`          ->  (0,1,0)  wins
 * so this beats the reset no matter which order the two stylesheets land in
 * -- which matters, because DEBUG serves Tailwind from the Play CDN, and that
 * injects its styles at runtime rather than at this file's link position.
 * Every field that already states its own padding keeps it. `:where()` adds
 * no specificity, so the type exclusions below are free.
 *
 * Preflight also sets `box-sizing: border-box` globally, so fields with a
 * fixed `h-*` do not change size; only auto-height fields grow.
 *
 * Linked by every root template. Keep it after the Tailwind include.
 */
html input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"])),
html textarea,
html select {
    padding: 0.375rem 0.625rem;
}

/* ── x-cloak, app-wide ────────────────────────────────────────────────────────
 *
 * Alpine's `x-cloak` attribute does nothing on its own — it is only a hook, and
 * without a rule like this one it is inert. Roughly two dozen templates each
 * declare their own copy in a local <style> block, which works for them and
 * leaves every other page uncovered.
 *
 * That gap became load-bearing with the app-wide hotkey layer in
 * core/templates/core/partials/_hotkey_layer.html: its palette, cheatsheet and
 * three modals are `x-show` divs styled `fixed inset-0`, so between HTML parse
 * and Alpine booting — a *deferred CDN* script, which on a slow shop connection
 * is not instant — they have no display:none and cover the page. Declaring the
 * rule here, in the stylesheet every root template links, covers the layer and
 * every page that forgot to declare it locally. The local copies are harmless
 * duplicates of the same rule; they are left alone.
 */
[x-cloak] {
    display: none !important;
}