/*
 * Shared MacroPresence theme — CSS custom properties and base styles.
 *
 * This file is the SINGLE SOURCE for the theme. Both index.html (the main app) and
 * apps/events-standalone/index.html <link> it, so a token changed here reaches both.
 * It previously lived inline in index.html; that copy is gone. Do not reintroduce one.
 */

      /* Theme tokens — values are space-separated RGB triplets (for rgb()/<alpha-value>). */
      :root {
        /* Light theme defaults */
        --c-bg-dark: 252 250 255;
        --c-bg-card: 250 247 255;
        --c-bg-card-hover: 243 237 255;
        --c-primary: 23 8 50;
        --c-secondary: 103 93 122;
        --c-accent: 124 60 255;
        --c-surface: 103 73 148;
        --c-border: 73 39 120;
        --c-dash-bg: 252 250 255;
        --c-dash-card: 255 255 255;
        --c-dash-el: 243 237 255;
        --c-dash-bd: 73 39 120;
        --c-dash-accent: 124 60 255;
        --c-dash-accent2: 109 49 255;
        --c-dash-t1: 23 8 50;
        --c-dash-t2: 103 93 122;
        --c-dash-t3: 113 100 131;
        --c-dash-grn: 15 204 119;
        --c-dash-amb: 245 158 11;
        --c-dash-red: 244 63 94;
        --c-dash-pur: 124 60 255;
        /* Text-only variants of the four tones above, tuned for AA (>=4.5:1, verified
           >=5:1 with margin) as text on their own bg-{tone}/10 pill against every real
           composited background it renders on (dashBg, dashCard, dashEl/30-over-dashBg):
           worst-case light-mode measured 5.05-5.62:1. Same hue family, darkened only
           enough to clear AA on white — mirrors --c-pur-text's own light/dark split. */
        --c-dash-grn-text: 8 114 67;    /* #087243 */
        --c-dash-amb-text: 137 88 6;    /* #895806 */
        --c-dash-red-text: 193 11 42;   /* #c10b2a */
        --c-dash-pur-text: 99 37 237;
        /* Purple accent family — light variants tuned for readability on white */
        --c-pur-fill: 124 60 255;   /* #7c3cff */
        --c-pur-bd:   109 49 255;   /* #6d31ff */
        --c-pur-text: 99 37 237;   /* #6325ed — readable on tinted badges as well as white */
        --c-pur-surf: 243 237 255;  /* #f3edff */
        --c-pur-surf2: 232 220 255; /* #e8dcff */

        /* One surface family, derived from the talent card's four gradient stops. */
        --mp-gradient-stops: #f3edff 0%, #faf7ff 30%, #fcfaff 70%, #ffffff 100%;
        --mp-glow-top: rgba(157, 77, 255, 0.05);
        --mp-glow-bottom: rgba(91, 25, 255, 0.03);
        --mp-glow-center: rgba(184, 108, 255, 0.02);
        --mp-surface-stops: #f3edff 0%, #faf7ff 35%, #ffffff 100%;
        --mp-control-stops: #faf7ff 0%, #ffffff 100%;
        --mp-button-stops: #edcfff 0%, #fce9ff 100%;
        --mp-button-secondary-stops: #e2d0f7 0%, #efe5ff 100%;
        --mp-button-ink: #26143e;
        --mp-table-bg: #ffffff;
        --c-ln-border: 222 209 243;
        --c-ln-border-hover: 184 153 225;
        --mp-line: rgba(109, 49, 255, 0.18);
        --mp-line-hover: rgba(109, 49, 255, 0.42);
        --mp-selected-bg: rgba(124, 60, 255, 0.12);
        --mp-hover-bg: rgba(124, 60, 255, 0.06);
        --mp-shadow: 0 18px 54px rgba(23, 8, 50, 0.12);
        --mp-control-shadow: 0 2px 8px rgba(23, 8, 50, 0.04);
        --mp-overlay: rgba(7, 2, 15, 0.48);

        /* Non-token surface vars used in CSS below */
        --glass-bg: rgba(250, 247, 255, 0.92);
        --glass-bd: var(--mp-line);
        --glass-hover-bg: rgb(var(--c-bg-card-hover));
        --glass-hover-bd: var(--mp-line-hover);
        --scrollbar-track: #fcfaff;
        --scrollbar-thumb: #c5b3df;
        --scrollbar-thumb-hover: #9674c1;
        --leaflet-bg: #faf7ff;
        --leaflet-bd: var(--mp-line);
        --leaflet-fg: #170832;
        --body-bg: #fcfaff;
        --body-fg: #170832;
        --selection-bg: #6d31ff;
        --selection-fg: #ffffff;
        --text-gradient-from: #170832;
        --text-gradient-to: #6d31ff;
        color-scheme: light;
      }

      :root.dark {
        /* Black foundation; purple is reserved for small accents and actions. */
        --c-bg-dark: 3 3 3;
        --c-bg-card: 12 12 14;
        --c-bg-card-hover: 21 20 24;
        --c-primary: 255 255 255;
        --c-secondary: 181 178 187;
        --c-accent: 124 60 255;
        --c-surface: 142 133 155;
        --c-border: 142 133 155;
        --c-dash-bg: 3 3 3;
        --c-dash-card: 12 12 14;
        --c-dash-el: 21 20 24;
        --c-dash-bd: 142 133 155;
        --c-dash-accent: 124 60 255;
        --c-dash-accent2: 196 160 255;
        --c-dash-t1: 245 245 247;
        --c-dash-t2: 181 178 187;
        --c-dash-t3: 153 148 162;
        --c-dash-grn: 15 204 119;
        --c-dash-amb: 245 158 11;
        --c-dash-red: 244 63 94;
        --c-dash-pur: 124 60 255;
        /* Text-only variants of the four tones above. In dark mode dashGrn/dashAmb
           already clear AA as text (7.3-8:1) but dashRed (4.54:1) and especially
           dashPur (4.14:1 on the Gateway-inspector card, 4.30:1 on the expanded-row
           overlay) do not, on the real composited badge backgrounds. Lightened only
           enough to clear AA with margin: worst-case dark-mode measured 5.06-5.7:1
           across dashBg/dashCard/dashEl-over-dashBg. */
        --c-dash-grn-text: 13 171 100;  /* #0dab64 */
        --c-dash-amb-text: 206 132 8;   /* #ce8408 */
        --c-dash-red-text: 245 86 113;  /* #f55671 */
        --c-dash-pur-text: 196 160 255;
        /* Purple accent family — light labels over black surfaces. */
        --c-pur-fill: 124 60 255;   /* #7c3cff */
        --c-pur-bd:   109 49 255;   /* #6d31ff */
        --c-pur-text: 196 160 255;  /* #c4a0ff */
        --c-pur-surf: 23 21 28;    /* #17151c */
        --c-pur-surf2: 36 29 46;   /* #241d2e */

        --mp-gradient-stops: #100e14 0%, #0b0a0d 30%, #070707 70%, #030303 100%;
        --mp-glow-top: rgba(157, 77, 255, 0.06);
        --mp-glow-bottom: rgba(91, 25, 255, 0.04);
        --mp-glow-center: rgba(184, 108, 255, 0.02);
        --mp-surface-stops: #111014 0%, #0c0c0e 35%, #090909 100%;
        --mp-control-stops: #151318 0%, #0c0c0e 100%;
        --mp-button-stops: #5b3a85 0%, #3f275b 100%;
        --mp-button-secondary-stops: #2b2436 0%, #1c1822 100%;
        --mp-button-ink: #f5efff;
        --mp-table-bg: #0c0c0e;
        --c-ln-border: 41 37 47;
        --c-ln-border-hover: 71 57 88;
        --mp-line: rgba(166, 141, 199, 0.16);
        --mp-line-hover: rgba(166, 123, 224, 0.38);
        --mp-selected-bg: rgba(144, 100, 202, 0.12);
        --mp-hover-bg: rgba(166, 141, 199, 0.06);
        --mp-shadow: 0 18px 54px rgba(0, 0, 0, 0.46);
        --mp-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
        --mp-overlay: rgba(0, 0, 0, 0.76);

        --glass-bg: rgba(12, 12, 14, 0.94);
        --glass-bd: var(--mp-line);
        --glass-hover-bg: rgb(var(--c-bg-card-hover));
        --glass-hover-bd: var(--mp-line-hover);
        --scrollbar-track: #030303;
        --scrollbar-thumb: #302b38;
        --scrollbar-thumb-hover: #574769;
        --leaflet-bg: #0c0c0e;
        --leaflet-bd: var(--mp-line);
        --leaflet-fg: #ffffff;
        --body-bg: #030303;
        --body-fg: #ffffff;
        --selection-bg: #6d31ff;
        --selection-fg: #ffffff;
        --text-gradient-from: #ffffff;
        --text-gradient-to: #c4a0ff;
        color-scheme: dark;
      }

      body {
        font-family: 'Inter', sans-serif;
        background-color: var(--body-bg);
        color: var(--body-fg);
      }

      /* Preserve the signature card gradient without tinting the app shell. */
      :root.dark .hire-talent-card {
        --mp-gradient-stops: #170832 0%, #0e0524 30%, #07020f 70%, #03000a 100%;
        --mp-glow-top: rgba(157, 77, 255, 0.28);
        --mp-glow-bottom: rgba(91, 25, 255, 0.22);
        --mp-glow-center: rgba(184, 108, 255, 0.08);
      }

      /* Resolve inherited stops on each surface so card overrides stay local. */
      :root, .mp-surface-feature {
        --mp-feature-gradient:
          radial-gradient(circle at 50% 50%, var(--mp-glow-center) 0%, transparent 60%),
          radial-gradient(circle at 85% 90%, var(--mp-glow-bottom) 0%, transparent 55%),
          radial-gradient(circle at 20% 10%, var(--mp-glow-top) 0%, transparent 50%),
          linear-gradient(155deg, var(--mp-gradient-stops));
      }
      :root {
        --mp-surface-gradient: linear-gradient(155deg, var(--mp-surface-stops));
        --mp-control-gradient: linear-gradient(155deg, var(--mp-control-stops));
        --mp-button-gradient: linear-gradient(155deg, var(--mp-button-stops));
        --mp-button-hover: linear-gradient(var(--mp-hover-bg), var(--mp-hover-bg)), var(--mp-button-gradient);
        --mp-button-secondary-gradient: linear-gradient(155deg, var(--mp-button-secondary-stops));
        --mp-button-secondary-hover: linear-gradient(var(--mp-hover-bg), var(--mp-hover-bg)), var(--mp-button-secondary-gradient);
        --mp-action-gradient: linear-gradient(100deg, rgb(var(--c-pur-bd)), rgb(var(--c-pur-fill)));
      }

      /* Existing neutral card tokens share a quiet version of the signature surface.
         Feature surfaces are explicit, so a table body never inherits a bright glow. */
      :root :is(.bg-bgCard, .bg-dashCard, .bg-lnPanel, .mp-surface) {
        background-image: var(--mp-surface-gradient);
      }
      :root .mp-surface-feature {
        background: var(--mp-feature-gradient);
        border-color: var(--mp-line);
        box-shadow: var(--mp-shadow);
      }
      :root .mp-surface-menu {
        background: var(--mp-surface-gradient);
        border-color: var(--mp-line);
        box-shadow: var(--mp-shadow);
      }
      :root .mp-overlay { background: var(--mp-overlay); }

      /* Action roles are explicit so labels, menus, and status fills keep their meaning. */
      :root .mp-button-primary {
        background: var(--mp-button-gradient);
        color: var(--mp-button-ink);
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--mp-line), var(--mp-control-shadow);
      }
      :root .mp-button-primary:hover:not(:disabled) {
        background: var(--mp-button-hover);
        box-shadow: inset 0 0 0 1px var(--mp-line-hover), var(--mp-control-shadow);
      }
      :root .mp-button-secondary {
        background: var(--mp-button-secondary-gradient);
        color: var(--mp-button-ink);
        border-color: transparent;
        box-shadow: inset 0 0 0 1px var(--mp-line), var(--mp-control-shadow);
      }
      :root .mp-button-secondary:hover:not(:disabled) {
        background: var(--mp-button-secondary-hover);
        box-shadow: inset 0 0 0 1px var(--mp-line-hover), var(--mp-control-shadow);
      }
      :root :is(.mp-button-ghost, .mp-choice) {
        background: transparent;
        color: rgb(var(--c-secondary));
        border-color: transparent;
        box-shadow: none;
      }
      :root :is(.mp-button-ghost, .mp-choice):hover:not(:disabled) {
        background: var(--mp-hover-bg);
        color: rgb(var(--c-primary));
      }
      :root .mp-choice.border { border-color: var(--mp-line); }
      :root :is(.mp-choice-active, .mp-choice[aria-pressed="true"], .mp-choice[aria-selected="true"]) {
        background: var(--mp-button-secondary-gradient);
        color: var(--mp-button-ink);
        border-color: var(--mp-line-hover);
        box-shadow: inset 0 0 0 1px var(--mp-line);
      }
      :root :is(.mp-choice-active, .mp-choice[aria-pressed="true"], .mp-choice[aria-selected="true"]):hover:not(:disabled) {
        background: var(--mp-button-secondary-hover);
        color: var(--mp-button-ink);
      }
      :root .mp-interactive-surface {
        background: var(--mp-surface-gradient);
        color: rgb(var(--c-primary));
        border-color: var(--mp-line);
      }
      :root .mp-interactive-surface:hover:not(:disabled) {
        background: var(--mp-control-gradient);
        border-color: var(--mp-line-hover);
      }
      :root .mp-interactive-surface.mp-choice-active {
        background: var(--mp-button-secondary-gradient);
        border-color: var(--mp-line-hover);
      }
      :root .mp-calendar-range { background: var(--mp-selected-bg); color: rgb(var(--c-primary)); }
      :root .mp-calendar-today { color: rgb(var(--c-pur-text)); box-shadow: inset 0 0 0 1px var(--mp-line-hover); }
      :root .mp-choice:disabled { opacity: 0.4; cursor: not-allowed; }
      :root .mp-switch { background: var(--mp-control-gradient); box-shadow: inset 0 0 0 1px var(--mp-line); }
      :root .mp-switch-on { background: var(--mp-button-gradient); }
      :root .mp-switch-thumb { background: var(--mp-button-ink); }
      :root .mp-signature-canvas { background: #100821; border-color: var(--mp-line); }
      :root .mp-loader-glow { filter: drop-shadow(0 0 18px rgb(var(--c-pur-fill) / 0.2)); }
      :root .mp-loader-start { stop-color: rgb(var(--c-pur-text)); }
      :root .mp-loader-middle { stop-color: rgb(var(--c-pur-fill)); }
      :root .mp-loader-end { stop-color: rgb(var(--c-pur-bd)); }
      :root .mp-control {
        background: var(--mp-control-gradient);
        color: rgb(var(--c-primary));
        border-color: var(--mp-line);
        box-shadow: var(--mp-control-shadow);
      }
      :root .mp-control:hover:not(:disabled):not([aria-invalid="true"]):not([class*="border-red-"]) {
        border-color: var(--mp-line-hover);
      }
      :root .mp-control[aria-expanded="true"] {
        border-color: rgb(var(--c-pur-text));
        box-shadow: 0 0 0 3px rgb(var(--c-pur-fill) / 0.12);
      }
      :root .mp-menu-option {
        color: rgb(var(--c-secondary));
        border-color: transparent;
        background: transparent;
      }
      :root .mp-menu-option:hover {
        background: var(--mp-hover-bg);
        color: rgb(var(--c-primary));
      }
      :root .mp-menu-option[aria-pressed="true"] {
        background: var(--mp-selected-bg);
        border-color: var(--mp-line);
        color: rgb(var(--c-primary));
      }
      :root .mp-table {
        background: var(--mp-table-bg);
        border-color: var(--mp-line);
        box-shadow: var(--mp-control-shadow);
      }
      :root .mp-table thead { background: var(--mp-surface-gradient); }
      :root .mp-table tbody > tr { border-color: var(--mp-line); }
      :root .mp-table tbody > tr:hover { background: var(--mp-hover-bg); }
      :root .mp-table tbody > tr[aria-selected="true"] { background: var(--mp-selected-bg); }
      :root .mp-table input[type="checkbox"] { accent-color: rgb(var(--c-pur-fill)); }
      :root .text-dashAccent { color: rgb(var(--c-pur-text)); }

      ::selection {
        background: var(--selection-bg);
        color: var(--selection-fg);
      }

      html { scroll-behavior: smooth; }

      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
      ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

      .scrollbar-hide::-webkit-scrollbar { display: none; }
      .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

      .text-gradient {
        background: linear-gradient(to right, var(--text-gradient-from), var(--text-gradient-to));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .glass {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-bd);
      }

      .glass-hover:hover {
        background: var(--glass-hover-bg);
        border-color: var(--glass-hover-bd);
      }

      .nav-logo { height: 32px; width: auto; }
      @media (min-width: 768px) { .nav-logo { height: 40px; } }

      /* Logos ship as pure white SVG — invert on light theme for visibility */
      :root:not(.dark) img[src*="/logos/macropresence"] {
        filter: invert(1);
      }

      /*
       * Light-theme contrast boost for low-alpha primary utilities.
       *
       * In dark mode, `text-primary/30` = rgba(255,255,255,0.3) — readable on near-black.
       * In light mode, the same class = rgba(0,0,0,0.3) — fails WCAG on white.
       * These overrides bump the effective alpha and use a slate tint for surfaces/borders
       * so subtle card boundaries remain visible. Higher specificity than the Tailwind utility.
       */
      :root:not(.dark) .text-primary\/20 { color: rgba(0,0,0,0.45); }
      :root:not(.dark) .text-primary\/25 { color: rgba(0,0,0,0.50); }
      :root:not(.dark) .text-primary\/30 { color: rgba(0,0,0,0.55); }
      :root:not(.dark) .text-primary\/35 { color: rgba(0,0,0,0.58); }
      :root:not(.dark) .text-primary\/40 { color: rgba(0,0,0,0.60); }
      :root:not(.dark) .text-primary\/42 { color: rgba(0,0,0,0.62); }
      :root:not(.dark) .text-primary\/45 { color: rgba(0,0,0,0.62); }
      :root:not(.dark) .text-primary\/50 { color: rgba(0,0,0,0.65); }
      :root:not(.dark) .text-primary\/55 { color: rgba(0,0,0,0.68); }

      :root:not(.dark) .bg-primary\/5            { background-color: rgba(73,39,120,0.05); }
      :root:not(.dark) .bg-primary\/10           { background-color: rgba(73,39,120,0.08); }
      :root:not(.dark) .bg-primary\/15           { background-color: rgba(73,39,120,0.12); }
      :root:not(.dark) .bg-primary\/20           { background-color: rgba(73,39,120,0.16); }
      :root:not(.dark) .bg-primary\/25           { background-color: rgba(73,39,120,0.20); }
      :root:not(.dark) .bg-primary\/\[0\.02\]    { background-color: rgba(73,39,120,0.03); }
      :root:not(.dark) .bg-primary\/\[0\.03\]    { background-color: rgba(73,39,120,0.04); }
      :root:not(.dark) .bg-primary\/\[0\.035\]   { background-color: rgba(73,39,120,0.045); }
      :root:not(.dark) .bg-primary\/\[0\.04\]    { background-color: rgba(73,39,120,0.05); }
      :root:not(.dark) .bg-primary\/\[0\.045\]   { background-color: rgba(73,39,120,0.055); }
      :root:not(.dark) .bg-primary\/\[0\.05\]    { background-color: rgba(73,39,120,0.06); }
      :root:not(.dark) .bg-primary\/\[0\.06\]    { background-color: rgba(73,39,120,0.07); }
      :root:not(.dark) .bg-primary\/\[0\.065\]   { background-color: rgba(73,39,120,0.07); }
      :root:not(.dark) .bg-primary\/\[0\.07\]    { background-color: rgba(73,39,120,0.075); }
      :root:not(.dark) .bg-primary\/\[0\.08\]    { background-color: rgba(73,39,120,0.085); }
      :root:not(.dark) .bg-primary\/\[0\.10\]    { background-color: rgba(73,39,120,0.10); }
      :root:not(.dark) .bg-primary\/\[0\.12\]    { background-color: rgba(73,39,120,0.12); }

      :root:not(.dark) .border-primary\/5         { border-color: rgba(73,39,120,0.10); }
      :root:not(.dark) .border-primary\/10        { border-color: rgba(73,39,120,0.14); }
      :root:not(.dark) .border-primary\/15        { border-color: rgba(73,39,120,0.18); }
      :root:not(.dark) .border-primary\/20        { border-color: rgba(73,39,120,0.22); }
      :root:not(.dark) .border-primary\/25        { border-color: rgba(73,39,120,0.25); }
      :root:not(.dark) .border-primary\/28        { border-color: rgba(73,39,120,0.28); }
      :root:not(.dark) .border-primary\/30        { border-color: rgba(73,39,120,0.30); }
      :root:not(.dark) .border-primary\/35        { border-color: rgba(73,39,120,0.32); }
      :root:not(.dark) .border-primary\/40        { border-color: rgba(73,39,120,0.36); }
      :root:not(.dark) .border-primary\/45        { border-color: rgba(73,39,120,0.40); }
      :root:not(.dark) .border-primary\/\[0\.05\] { border-color: rgba(73,39,120,0.10); }
      :root:not(.dark) .border-primary\/\[0\.06\] { border-color: rgba(73,39,120,0.12); }
      :root:not(.dark) .border-primary\/\[0\.08\] { border-color: rgba(73,39,120,0.14); }
      :root:not(.dark) .border-primary\/\[0\.09\] { border-color: rgba(73,39,120,0.15); }
      :root:not(.dark) .border-primary\/\[0\.1\]  { border-color: rgba(73,39,120,0.16); }
      :root:not(.dark) .border-primary\/\[0\.10\] { border-color: rgba(73,39,120,0.16); }
      :root:not(.dark) .border-primary\/\[0\.12\] { border-color: rgba(73,39,120,0.18); }
      :root:not(.dark) .border-primary\/\[0\.15\] { border-color: rgba(73,39,120,0.22); }

      /*
       * Light-theme contrast fix for fixed-brightness status/semantic text.
       *
       * The dark-first palette uses `text-{red,green,amber,emerald,slate,blue,yellow}-400`
       * (and -300) for status text, stat metrics, muted/empty-state copy, and "Sign Out".
       * Those shades are tuned for the near-black canvas and fail WCAG AA on white
       * (green-400 1.6:1, red-400 2.8:1, slate-400 2.6:1, etc.). No component uses a
       * `dark:` variant, so they never adapt. Remap each to a 600/700 shade that meets AA
       * on white — light mode only; dark mode (the Tailwind default) is untouched. Higher
       * specificity than the base utility, so no !important needed.
       */
      :root:not(.dark) .text-red-400,
      :root:not(.dark) .text-red-300      { color: #b91c1c; }  /* red-700, including tinted badges */
      :root:not(.dark) .text-green-400,
      :root:not(.dark) .text-green-300    { color: #166534; }  /* green-800, including tinted badges */
      :root:not(.dark) .text-emerald-400,
      :root:not(.dark) .text-emerald-300  { color: #047857; }  /* emerald-700 ~5.0:1 */
      :root:not(.dark) .text-amber-400,
      :root:not(.dark) .text-amber-300    { color: #92400e; }  /* amber-800, including tinted badges */
      :root:not(.dark) .text-yellow-400,
      :root:not(.dark) .text-yellow-300   { color: #a16207; }  /* yellow-700 ~4.7:1 */
      :root:not(.dark) .text-orange-400 { color: #9a3412; }
      /*
       * Touch-target sizing (WCAG 2.5.5 / Apple HIG 44px). Scoped to coarse
       * pointers, so the compact desktop density stays pixel-for-pixel identical
       * and only real touch devices get the larger hit areas. Icon-only buttons
       * (the 21x28 / 32x32 offenders) get a full 44x44 box; every button/control
       * gets a 44px min height.
       */
      @media (pointer: coarse) {
        button,
        [role="button"],
        input,
        select,
        textarea { min-height: 44px; }
        /* Icon-only buttons → widen the hit box to 44px. CAUTION: `:only-child`
           ignores text nodes, so `<button><i/>Label</button>` ALSO matches (the <i>
           is the only ELEMENT child). So set ONLY min-width here — a no-op on
           full-width / auto-width buttons — and never override justify-content or
           display, which wrongly centered icon+text nav items on touch. Real
           icon-only buttons center their glyph via their own flex utilities. */
        button:has(> i:only-child),
        [role="button"]:has(> i:only-child) {
          min-width: 44px;
        }
      }

      /* Kill the 300ms mobile tap delay on all interactive elements. */
      button, [role="button"], a, input, select, textarea, label,
      summary, [tabindex] { touch-action: manipulation; }

      /*
       * Placeholder legibility. Components hard-code `placeholder-white/30`
       * (theme-unaware) → ~1:1 on the near-white light-mode field fill. Force a
       * theme-aware placeholder tone that meets AA in both modes. Higher
       * specificity than the utility, so no !important.
       */
      :root input::placeholder,
      :root textarea::placeholder { color: rgb(var(--c-secondary)); opacity: 0.85; }

      /*
       * Reduced motion (WCAG 2.3.3, mandatory). The app defines infinite CSS
       * keyframes (float / pulseSlow / glow) with no guard. Collapse all looping
       * CSS animation + transitions under an explicit OS preference. NOTE: this
       * cannot stop JS requestAnimationFrame loops — the three.js hero and the two
       * auto-scroll marquees are gated in their components via matchMedia.
       */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto !important;
        }
      }

      .leaflet-popup-content-wrapper {
        background: var(--leaflet-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--leaflet-bd);
        color: var(--leaflet-fg);
        border-radius: 12px;
      }
      .leaflet-popup-tip { background: var(--leaflet-bg); }

      /* Native pickers follow theme via color-scheme on :root */
      input[type="date"],
      input[type="datetime-local"],
      input[type="time"] {
        color-scheme: inherit;
      }

      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type="number"] { -moz-appearance: textfield; }

      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      button:focus-visible {
        outline: 2px solid rgb(var(--c-pur-text));
        outline-offset: 2px;
      }

/* Shared element states. Geometry stays with the component. */
:root :is(.text-lnAccent, .text-lnAccentHover, .text-dashPur) { color: rgb(var(--c-pur-text)); }
:root .mp-control:focus-visible { border-color: rgb(var(--c-pur-text)); outline: 2px solid rgb(var(--c-pur-text)); outline-offset: 2px; }
:root .mp-control::placeholder { color: rgb(var(--c-secondary)); opacity: 0.8; }
:root .mp-control:disabled { opacity: 0.55; cursor: not-allowed; }
:root .mp-control:is([aria-invalid="true"], [class*="border-red-"]) { border-color: rgb(var(--c-dash-red-text)); }
:root .mp-control:is([aria-invalid="true"], [class*="border-red-"]):focus-visible { outline-color: rgb(var(--c-dash-red-text)); }
:root :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: rgb(var(--c-pur-fill)); }
:root select option { background: rgb(var(--c-bg-card)); color: rgb(var(--c-primary)); }
:root input:-webkit-autofill { -webkit-text-fill-color: rgb(var(--c-primary)); box-shadow: 0 0 0 1000px rgb(var(--c-bg-card)) inset; caret-color: rgb(var(--c-primary)); }
:root .mp-data-table { background: var(--mp-table-bg); color: rgb(var(--c-primary)); border-color: var(--mp-line); }
:root .mp-data-table thead { background: var(--mp-surface-gradient); color: rgb(var(--c-secondary)); }
:root .mp-data-table :is(th, td, tr) { border-color: var(--mp-line); }
:root .mp-data-table tbody > tr:hover { background-color: var(--mp-hover-bg); }
:root .mp-data-table tbody > tr[aria-selected="true"] { background-color: var(--mp-selected-bg); }
:root .mp-media-surface { --c-primary: 255 255 255; --c-secondary: 224 213 238; }
/* Neutral surfaces using older utility combinations share the quiet gradient.
   Explicit feature/menu/control roles retain their own surface treatment. */
:root :where(div, article, section, form, aside)[class*="bg-primary/"][class*="rounded"][class*="border"]:not(:where(.mp-surface-feature, .mp-surface-menu, .mp-control)) {
  background-image: var(--mp-surface-gradient);
  border-color: var(--mp-line);
}

:root .mp-media-surface [class*="text-primary/"] { color: rgb(var(--c-primary) / 0.85); }

:root :is(.border-border, .border-dashBd) { border-color: var(--mp-line); }
/* Decorative saturated fills keep white ink; buttons use their theme-aware ink. */
:root :is(.bg-purFill, .bg-lnAccent, .from-purBd.to-purFill):not(.bg-clip-text):not(:where(button, a, .mp-button-primary)) { color: #fff; }