/* tw-extras.css — the utilities `tailwind.css` is missing. Load it AFTER tailwind.css.
 *
 * WHY THIS FILE EXISTS
 * `assets/tailwind.css` is a frozen, minified JIT build: Tailwind emitted only the classes that literally
 * appeared in the markup on the day it was compiled, and this repo has no toolchain to regenerate it (no
 * tailwind.config, no package.json, no CLI). So a class that nobody had used yet simply does not exist — and
 * a missing utility class fails SILENTLY. It doesn't warn; the element just renders unstyled, which is easy
 * to miss in review and looks like a layout bug later.
 *
 * A scan of every class="" in web/ against the compiled build found 15 utilities that were in use and doing
 * nothing (see the first block). Those were live, shipped bugs. The rest are the documented traps and the
 * positioning set, none of which was ever compiled.
 *
 * ADDING ONE
 * Check first — the browser is the authority, not memory:
 *     getComputedStyle(document.body.appendChild(
 *       Object.assign(document.createElement("div"), { className: "pt-9" }))).paddingTop
 * "0px" means it doesn't exist. Add it below using Tailwind's own value (spacing unit = 0.25rem, so
 * pt-9 = 2.25rem) and keep these grouped/commented so this stays readable rather than becoming a dumping
 * ground. If this ever grows past ~40 rules, that's the signal to restore a real build step instead.
 */

/* ---- IN USE ACROSS THE SITE BUT NEVER COMPILED (were silently dead until 2026-07-16) ---- */
/* padding */
.p-2\.5  { padding: 0.625rem; }         /* admin_packages: the panel/mappings notes */
.pt-5    { padding-top: 1.25rem; }
.pt-7    { padding-top: 1.75rem; }      /* results.html: "Your reports" heading spacing */
.pb-2    { padding-bottom: 0.5rem; }    /* report-core basic table, affiliate */
.pl-2    { padding-left: 0.5rem; }
.pr-1\.5 { padding-right: 0.375rem; }

/* width / max-width */
.w-12      { width: 3rem; }             /* admin_import column sizing */
.w-16      { width: 4rem; }
.w-20      { width: 5rem; }
.max-w-2xl { max-width: 42rem; }        /* admin_reprocess shell */

/* opacity */
.opacity-0  { opacity: 0; }
.opacity-90 { opacity: 0.9; }
/* MUST ship with .opacity-0 above, never without it: the one place using opacity-0 (admin_packages' "edit"
   hint) pairs it with group-hover:opacity-100, and that variant wasn't compiled either. Enabling only the
   opacity-0 half would hide the hint permanently instead of revealing it on hover. */
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* gap / spacing between siblings */
.gap-y-1\.5 { row-gap: 0.375rem; }      /* results.js trend list */
/* space-y needs Tailwind's sibling selector, not a plain gap — the --tw-space-y-reverse var it reads is
   already declared on * by tailwind.css, so this composes exactly like a compiled one would. */
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

/* Drops the divider above the first row of a border-t list (admin_packages' marker rows). Uncompiled, so
   those lists have been rendering a stray line above their first row. */
.first\:border-t-0:first-child { border-top-width: 0; }

/* ---- THE DOCUMENTED TRAPS (CLAUDE.md §6) ---- */
/* NB: that note also lists gap-1.5 and py-1.5 as missing — they are NOT, both are in tailwind.css and work.
   Only these three were genuinely absent. */
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.appearance-none { -webkit-appearance: none; appearance: none; }
.active\:opacity-80:active { opacity: 0.8; }

/* ---- POSITIONING ---- */
/* tailwind.css compiled NO inset utilities and NO transform utilities at all, so the standard
   "absolutely centre a control inside a field" pattern was impossible without inline styles. */
.top-0    { top: 0; }
.top-1\/2 { top: 50%; }
.right-2  { right: 0.5rem; }
.pr-16    { padding-right: 4rem; }
/* Hairline inset — used to stretch a control to its parent's full inner height (e.g. the members
   show/hide-password button), which keeps the tap target at the field's height instead of the text's. */
.inset-y-px { top: 1px; bottom: 1px; }
.right-px   { right: 1px; }

/* Tailwind's transform var-chain. tailwind.css already declares --tw-translate-x/-y, --tw-rotate, --tw-skew-*
   and --tw-scale-* on *, so setting one var and rebuilding the chain matches a compiled utility exactly. */
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}