/* legacy-fallbacks.css
 *
 * Visibility fallbacks for browsers that predate modern CSS features the rest
 * of the app relies on (Firefox <31, Chrome <49, etc.). Tailwind v4 wraps
 * every generated utility class inside `@layer utilities { ... }`, and CSS
 * cascade layers shipped in Firefox 97 (Feb 2022). Anything older treats
 * `@layer` as an unknown at-rule and silently discards the entire block, so
 * none of the utility classes apply -- buttons end up unstyled (transparent
 * background, no padding) and look invisible.
 *
 * This file restates the most critical "make controls visible" styles in
 * plain, layer-free CSS so old browsers actually parse and apply them. It is
 * loaded via a <link> in app/layout.tsx so it sits outside Tailwind's
 * cascade-layer output.
 *
 *
 * --- HOW THIS AVOIDS BREAKING MODERN BROWSERS ---
 *
 * Because this file is unlayered, every rule here outranks Tailwind's layered
 * utility rules in modern browsers (the cascade considers layer order before
 * specificity). To make sure this doesn't change anything visible:
 *
 *   1. ONLY class selectors -- no element selectors like `button { ... }`.
 *      An element-level rule would apply baseline styling to every <button>
 *      on the site, including icon and ghost variants where it would be
 *      visually wrong. Class selectors only collide with Tailwind utilities
 *      that are actually present on the element.
 *
 *   2. For colors: dual declaration `hex; var()` so old browsers parse the
 *      hex (var() is unparseable to them and the declaration is dropped),
 *      while modern browsers use the var() form -- which produces the exact
 *      same computed value as Tailwind's own utility rule. Each var() also
 *      has an in-function hex fallback in case the custom property is ever
 *      undefined.
 *
 *   3. For sizes: values are written in the same units (rem) and magnitudes
 *      Tailwind v4 uses by default, so when this rule "wins" the cascade in
 *      a modern browser it produces an identical result to the Tailwind rule
 *      it shadowed.
 *
 *   4. For layout (display): dual declaration with the modern value second.
 *
 *
 * --- KNOWN TRADE-OFF ---
 *
 * Hover transitions on the specific utility classes restated here will no
 * longer animate, because the unlayered idle-state rule wins over Tailwind's
 * layered `:hover` rule. The visual delta is a 10% lightness shift on a
 * small set of buttons, accepted in exchange for actually rendering controls
 * on legacy browsers.
 *
 *
 * --- SCOPE ---
 *
 * Targets the signature-validation screen's controls (Button variants and
 * SelectionPill). Extend if other screens need the same treatment.
 */

/* --- Color utilities (dual hex + var() pattern) --------------------------- */

/* Primary action (Submit) */
.bg-primary              { background-color: #0284c7; background-color: var(--primary, #0284c7); }
.text-primary-foreground { color: #ffffff; color: var(--primary-foreground, #ffffff); }

/* Outline / secondary buttons (Punt, Undo, Blank Rest Of Page, Route To Admin) */
.bg-background           { background-color: #ffffff; background-color: var(--background, #ffffff); }
.text-foreground         { color: #09090b; color: var(--foreground, #09090b); }
.border-input            { border-color: #d4d4d8; border-color: var(--input, #d4d4d8); }

/* Destructive variant */
.bg-red-600              { background-color: #dc2626; background-color: var(--color-red-600, #dc2626); }
.text-white              { color: #ffffff; }

/* SelectionPill: idle and selected states */
.text-muted-foreground   { color: #71717a; color: var(--muted-foreground, #71717a); }
.text-red-500            { color: #ef4444; color: var(--color-red-500, #ef4444); }
.border-red-500          { border-color: #ef4444; border-color: var(--color-red-500, #ef4444); }
.bg-red-100              { background-color: #fee2e2; background-color: var(--color-red-100, #fee2e2); }
.text-green-500          { color: #22c55e; color: var(--color-green-500, #22c55e); }
.border-green-500        { border-color: #22c55e; border-color: var(--color-green-500, #22c55e); }
.bg-green-100            { background-color: #dcfce7; background-color: var(--color-green-100, #dcfce7); }

/* Default border color on `border`, `border-t`, etc. */
.border, .border-t, .border-b, .border-l, .border-r {
  border-color: #e4e4e7;
  border-color: var(--border, #e4e4e7);
}

/* --- Layout (dual-display pattern) ---------------------------------------- */

.inline-flex { display: inline-block; display: inline-flex; }
.flex        { display: block; display: flex; }

/* --- Sizing (rem values exactly matching Tailwind v4 defaults) ------------ */

.rounded-full   { border-radius: 9999px; }
.rounded-lg     { border-radius: 0.5rem; }
.rounded-md     { border-radius: 0.375rem; }
.px-4           { padding-left: 1rem; padding-right: 1rem; }
.py-2           { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-3           { padding-left: 0.75rem; padding-right: 0.75rem; }
.h-9            { height: 2.25rem; }
.h-10           { height: 2.5rem; }
.h-8            { height: 2rem; }
.cursor-pointer { cursor: pointer; }