/* Hatio website styles. Generated by build/build.js from the PowrUP design tokens. */
/* ============================================================
   PowrUP · Webfonts
   Space Grotesk — distinctive technical DISPLAY face (headlines,
     large metrics, the wordmark). Shares the engineered, mono-derived
     DNA of Geist Mono so display + body + data read as one family.
   Geist — refined neutral grotesk for UI & body text.
   Geist Mono — data, codes, metrics (tabular figures).
   Noto Sans — brand wordmark face. Substituted in for Gibson
     (commercial, Canada Type — never provided) so the wordmark
     renders correctly with no license to source. All four families
     are now free/OFL — no upload step needed.

   SELF-HOSTING: to load the four OFL faces from assets/fonts/ instead
   of the Google CDN, run assets/fonts/download-fonts.sh, then in
   styles.css replace this file's @import with tokens/fonts.selfhosted.css.
   See assets/fonts/README.md.
   ============================================================ */


/* ---- tokens/reset.css ---- */
/* ============================================================
   Base reset — loaded first by styles.css
   Border-box everywhere so --control-h-* and fixed box sizes are
   the RENDERED size, not the content size. Without this, a bordered
   div (.pu-input, .pu-check__box) is border-width taller than its
   token while a native <select> — border-box in every UA stylesheet —
   is exactly the token, and controls stop lining up.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ---- tokens/colors.css ---- */
/* ============================================================
   PowrUP · Color tokens
   Palette derived from the brand mark's conic gradient:
   teal (#0EC7AB) → sky (#0E7EF7) → electric (#0E25F7) → violet (#8E12D7)
   Light-first. Dark theme via [data-theme="dark"].
   ============================================================ */

/* Light is the default (:root). The [data-theme="light"] selector lets a
   subtree RE-ASSERT light even inside a dark host (e.g. a light demo pane on
   a dark gallery page, or a light island in a dark app) — without it, a
   [data-theme="dark"] ancestor's tokens would inherit into un-themed light
   content. Keep every light token in this block so light is fully reclaimable. */
:root,
[data-theme="light"] {
  /* ---- Brand anchors (the four gradient stops) ---- */
  --brand-teal:     #0EC7AB;
  --brand-sky:      #0E7EF7;  /* primary */
  --brand-electric: #0E25F7;
  --brand-violet:   #8E12D7;

  /* ---- Primary ramp (sky blue) ---- */
  --blue-50:  #ECF4FF;
  --blue-100: #D6E7FF;
  --blue-200: #ADCEFF;
  --blue-300: #7DB0FF;
  --blue-400: #4796FF;
  --blue-500: #0E7EF7;
  --blue-600: #0A63D6;
  --blue-700: #0A4FA8;
  --blue-800: #0C417F;
  --blue-900: #0E3463;

  /* ---- Teal ramp (secondary / positive data) ---- */
  --teal-50:  #E6FBF6;
  --teal-100: #C2F4E9;
  --teal-200: #8DE9D6;
  --teal-300: #4FDABF;
  --teal-400: #1FCDAE;
  --teal-500: #0EC7AB;
  --teal-600: #0AA28C;
  --teal-700: #0A7E6E;
  --teal-800: #0B6254;
  --teal-900: #0C4F45;

  /* ---- Violet ramp (accent / categorical) ---- */
  --violet-50:  #F7ECFD;
  --violet-100: #ECD3FB;
  --violet-200: #DBABF6;
  --violet-300: #C77DF0;
  --violet-400: #AE43E6;
  --violet-500: #8E12D7;
  --violet-600: #7610B4;
  --violet-700: #5D0F8E;
  --violet-800: #4A0F70;
  --violet-900: #3B0F58;

  /* ---- Cool slate neutrals ---- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FBFCFE;
  --slate-50:  #F6F8FB;
  --slate-100: #EEF1F6;
  --slate-200: #E2E7EF;
  --slate-300: #CBD3DF;
  --slate-400: #9AA5B7;
  --slate-420: #8A95A9;  /* switch track / disabled control fills */
  --slate-450: #7B859A;  /* control borders — ≥3:1 non-text contrast on white/page */
  --slate-500: #6B7688;
  --slate-550: #5E6878;  /* accessible muted text — clears WCAG AA 4.5:1 everywhere */
  --slate-600: #4D5666;
  --slate-700: #363E4C;
  --slate-800: #222936;
  --slate-900: #141A24;
  --slate-950: #0B0F17;

  /* ---- Status hues ---- */
  --green-50:   #E7F8EF;  --green-500:  #0E9F6E;  --green-600:  #0B8159;  --green-700:  #0A6446;
  --amber-50:   #FEF5E7;  --amber-500:  #F5A524;  --amber-600:  #D9870C;  --amber-700:  #A66708;  --amber-800:  #8A5605;
  --red-50:     #FDECEC;  --red-500:    #F03D3D;  --red-600:    #D32424;  --red-700:    #A81C1C;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* ============================================================
     BRAND HUE STRATEGY
     Blue is the single DOMINANT primary — all real actions, selection,
     links and focus. Sky (blue-500) is the UNIFYING thread that ties the
     palette together: the brand mark, focus ring, gradients and live/active
     indicators all pivot on it. Teal · Electric · Violet are ACCENTS — they
     elevate the visual design (data-viz, highlights, illustration, brand
     moments) but NEVER drive a primary action.
     ============================================================ */

  /* Primary — blue. Fills sit at the 600 step so white text clears AA 4.5:1. */
  --color-primary:           var(--blue-600);   /* 5.57:1 on white */
  --color-primary-hover:     var(--blue-700);
  --color-primary-active:    var(--blue-800);
  --color-primary-subtle:    var(--blue-50);
  --color-primary-subtle-fg: var(--blue-700);
  --color-on-primary:        #FFFFFF;

  /* Sky — the unifying brand blue (vivid 500): brand moments, indicators,
     focus and the gradient pivot. A graphic / large-text color, not a text fill. */
  --color-sky:               var(--blue-500);

  /* Accents — brand elevation only (charts, highlights, tags, art). Not actions. */
  --accent-teal:             var(--teal-500);
  --accent-electric:         var(--brand-electric);
  --accent-violet:           var(--violet-500);
  --color-accent:            var(--violet-500);  /* back-compat alias */
  --color-secondary:         var(--teal-500);    /* back-compat alias */
  --color-secondary-hover:   var(--teal-600);

  /* Accent subtle pairs — categorical chips & badges (Tag, Badge accent) */
  --accent-teal-subtle:      var(--teal-50);
  --accent-teal-fg:          var(--teal-700);   /* 4.62:1 on teal-50 */
  --accent-violet-subtle:    var(--violet-50);
  --accent-violet-fg:        var(--violet-700);

  /* Neutral chip / badge */
  --color-neutral:           var(--slate-600);  /* solid fill — white text 7.40:1 */
  --color-neutral-subtle:    var(--slate-100);
  --color-neutral-fg:        var(--slate-600);

  /* Control surfaces — folded into the slate ramp (≥3:1 non-text contrast). */
  --border-control:          var(--slate-450);   /* inputs, selects */
  --control-track-off:       var(--slate-420);   /* switch off-track */

  /* Text */
  --text-strong:    var(--slate-900);
  --text-body:      var(--slate-700);
  --text-muted:     var(--slate-550);  /* AA 4.5:1+ on all light surfaces */
  --text-subtle:    var(--slate-400);
  --text-on-accent: #FFFFFF;
  --text-link:      var(--blue-600);

  /* Surfaces */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--slate-0);
  --surface-raised:  var(--slate-0);
  --surface-sunken:  var(--slate-100);
  --surface-inverse: var(--slate-900);
  --surface-hover:   var(--slate-50);

  /* Borders / lines */
  --border-subtle:   var(--slate-200);
  --border-default:  var(--slate-300);
  --border-strong:   var(--slate-400);
  --border-focus:    var(--blue-500);
  --border-accent:   var(--blue-200);          /* interactive hover tint */
  --ring-selected:   rgba(14,126,247,0.18);    /* selected-card halo */

  /* Status semantic — solid fills carry white text, so they sit at the 600 step
     (≥4.5:1). Warning keeps its amber and pairs with dark --color-on-warning.
     The -fg tokens are the dark text used on the matching -subtle tints. */
  --color-success:        var(--green-600);
  --color-success-hover:  var(--green-700);
  --color-success-subtle: var(--green-50);
  --color-success-fg:     var(--green-700);
  --color-warning:        var(--amber-500);
  --color-warning-subtle: var(--amber-50);
  --color-warning-fg:     var(--amber-800);   /* 5.69:1 on amber-50 */
  --color-on-warning:     #3A2702;            /* dark text for solid amber fills */
  --color-danger:         var(--red-600);
  --color-danger-hover:   var(--red-700);
  --color-danger-subtle:  var(--red-50);
  --color-danger-fg:      var(--red-700);
  --color-info:           var(--blue-600);
  --color-info-subtle:    var(--blue-50);
  --color-info-fg:        var(--blue-700);

  /* ---- Signature gradients ---- */
  --gradient-brand:   linear-gradient(120deg, var(--brand-teal) 0%, var(--brand-sky) 42%, var(--brand-electric) 68%, var(--brand-violet) 100%);
  --gradient-brand-soft: linear-gradient(120deg, #5FD9C6 0%, #4796FF 50%, #A463F0 100%); /* @kind color */
  /* AA-safe CTA gradient — all stops ≥4.5:1 with white text */
  --gradient-cta: linear-gradient(120deg, var(--blue-600) 0%, var(--brand-electric) 50%, var(--brand-violet) 100%); /* @kind color */
  --gradient-brand-radial: radial-gradient(135% 135% at 100% 100%, var(--brand-violet) 0%, var(--brand-electric) 28%, var(--brand-sky) 58%, var(--brand-teal) 100%); /* @kind color */
  --gradient-conic:   conic-gradient(from 210deg at 50% 50%, var(--brand-sky), var(--brand-violet), var(--brand-electric), var(--brand-teal), var(--brand-sky));
  --gradient-text:    linear-gradient(110deg, var(--brand-sky), var(--brand-violet));

  /* ---- Glass (signature card motif) — three tiers ----
     light:  true glass over imagery — large numerals & short labels ONLY
     default: general glass
     strong: text-heavy glass — body copy stays AA-readable
     Tailwind mapping: bg-glass-light / bg-glass / bg-glass-strong (DEFAULT key). */
  --glass-bg-light:  rgba(255, 255, 255, 0.42);
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.80);
  --glass-border:  rgba(255, 255, 255, 0.70);
  --glass-blur:    16px;
  --glass-blur-light: 20px;
  --glass-tint:    rgba(14, 126, 247, 0.04);

  /* ---- Data-viz categorical sequence ---- */
  --viz-1: var(--blue-500);
  --viz-2: var(--teal-500);
  --viz-3: var(--violet-500);
  --viz-4: var(--amber-500);
  --viz-5: var(--blue-300);
  --viz-6: var(--teal-300);

  /* ---- Focus ring — a 2px surface-colored gap + a solid 2px sky ring (3.93:1 ≥ 3) ---- */
  --focus-ring: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--color-sky);
}

/* ============================================================
   DARK THEME — control-tower / ops-room secondary
   ============================================================ */
[data-theme="dark"] {
  --color-primary-subtle:     rgba(14, 126, 247, 0.16);
  --color-primary-subtle-fg:  var(--blue-300);

  --text-strong:    #F3F6FB;
  --text-body:      #C5CDDC;
  --text-muted:     #8B96A8;
  --text-subtle:    #667082;
  --text-link:      var(--blue-300);

  --surface-page:    var(--slate-950);
  --surface-card:    #131A26;
  --surface-raised:  #1A2231;
  --surface-sunken:  #0E141E;
  --surface-inverse: var(--slate-0);
  --surface-hover:   rgba(255,255,255,0.04);

  --border-subtle:   rgba(255,255,255,0.07);
  --border-default:  rgba(255,255,255,0.12);
  --border-strong:   rgba(255,255,255,0.20);
  --border-accent:   rgba(14,126,247,0.45);
  --ring-selected:   rgba(14,126,247,0.35);

  --color-success-subtle: rgba(14,159,110,0.16);
  --color-success-fg:     #4FD8A3;
  --color-warning-subtle: rgba(245,165,36,0.16);
  --color-warning-fg:     #F5C16A;
  --color-danger-subtle:  rgba(240,61,61,0.16);
  --color-danger-fg:      #FF7B7B;
  --color-info-subtle:    rgba(14,126,247,0.16);
  --color-info-fg:        var(--blue-300);

  --accent-teal-subtle:   rgba(14,199,171,0.16);
  --accent-teal-fg:       var(--teal-300);
  --accent-violet-subtle: rgba(142,18,215,0.22);
  --accent-violet-fg:     var(--violet-300);
  --color-neutral-subtle: rgba(255,255,255,0.08);
  --color-neutral-fg:     var(--text-body);

  --glass-bg-light:  rgba(20, 28, 42, 0.38);
  --glass-bg:        rgba(20, 28, 42, 0.55);
  --glass-bg-strong: rgba(20, 28, 42, 0.80);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-tint:    rgba(14, 126, 247, 0.06);

  --focus-ring: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--blue-400);
}
/* ---- tokens/typography.css ---- */
/* ============================================================
   PowrUP · Typography tokens
   Geist (UI/display) + Geist Mono (data, metrics, codes).
   Loaded via tokens/fonts.css.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --font-display: "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif;
  /* Brand wordmark — Noto Sans (SIL OFL 1.1), substituted for Gibson (commercial, never provided). */
  --font-brand: "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Type scale (tuned for dense ops UI + dramatic display) ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-md:   14px;   /* base UI */
  --text-base: 16px;   /* reading / marketing body */
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.18;
  --leading-snug:    1.32;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;  /* eyebrows / overlines */
  --tracking-display: -0.025em; /* Space Grotesk at large sizes */

  /* ---- Semantic roles ----
     Display & title use Space Grotesk (characterful); heading and below use
     Geist (refined working text); metrics/data use Geist Mono (tabular). */
  --font-display-lg: var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --font-display-md: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --font-title:      var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --font-heading:    var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --font-subheading: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --font-body:       var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);
  --font-body-strong:var(--weight-medium) var(--text-md)/var(--leading-normal) var(--font-sans);
  --font-label:      var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-sans);
  --font-caption:    var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  --font-metric:     var(--weight-semibold) var(--text-4xl)/var(--leading-none) var(--font-mono);
  --font-data:       var(--weight-medium) var(--text-md)/var(--leading-snug) var(--font-mono);
}
/* ---- tokens/spacing.css ---- */
/* ============================================================
   PowrUP · Spacing & layout tokens — strict 4px grid
   ============================================================ */

:root {
  /* ---- 4px base spacing scale ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* ---- Component sizing (4px aligned) ---- */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --tap-target:   44px;   /* minimum touch hit area */

  /* ---- Layout chrome ---- */
  --sidebar-w:           264px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:            64px;
  --content-max:         1440px;
  --drawer-w:            420px;

  /* ---- Dashboard grid (user-customizable widget grid) ---- */
  --grid-gutter:    16px;
  --grid-col-min:   280px;
  --widget-unit:    4px;   /* widgets snap to 4px / grid units */

  /* ---- Responsive breakpoints (reference values) ---- */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1440px;
}

/* ============================================================
   PowrUP · Radius tokens
   ============================================================ */
:root {
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);   /* default card */
}

/* ============================================================
   PowrUP · Elevation / shadow tokens
   Soft, cool-tinted shadows. Glass surfaces use --shadow-glass.
   ============================================================ */
:root {
  /* Natural top-lit elevation: a crisp contact layer + a soft ambient layer with
     NEGATIVE spread so the shadow tucks under the element (light from above) instead
     of bleeding outward. */
  --shadow-xs:   0 1px 1.5px rgba(15, 23, 42, 0.06);
  --shadow-sm:   0 1px 1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.07);
  --shadow-md:   0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 10px -3px rgba(15, 23, 42, 0.09);
  --shadow-lg:   0 2px 4px -1px rgba(15, 23, 42, 0.05), 0 12px 20px -6px rgba(15, 23, 42, 0.12);
  --shadow-xl:   0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 24px 40px -12px rgba(15, 23, 42, 0.16);
  --shadow-glass:0 8px 24px -6px rgba(14, 52, 99, 0.16), inset 0 1px 0 rgba(255,255,255,0.40);
  --shadow-glow: 0 6px 20px -4px rgba(14, 126, 247, 0.40);
  --shadow-focus: var(--focus-ring);
}

[data-theme="dark"] {
  --shadow-xs:   0 1px 1.5px rgba(0,0,0,0.35);
  --shadow-sm:   0 1px 1px rgba(0,0,0,0.40), 0 2px 4px -1px rgba(0,0,0,0.45);
  --shadow-md:   0 1px 2px rgba(0,0,0,0.40), 0 6px 12px -3px rgba(0,0,0,0.55);
  --shadow-lg:   0 2px 4px -1px rgba(0,0,0,0.40), 0 14px 24px -6px rgba(0,0,0,0.60);
  --shadow-xl:   0 4px 8px -2px rgba(0,0,0,0.45), 0 28px 48px -12px rgba(0,0,0,0.68);
  --shadow-glass:0 8px 24px -6px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-glow: 0 6px 22px -4px rgba(14, 126, 247, 0.55);
}
/* ---- tokens/motion.css ---- */
/* ============================================================
   PowrUP · Motion tokens
   Snappy, confident micro-interactions. No bounce on data.
   Buttons get a subtle press-scale; cards/drawers ease smoothly.
   ============================================================ */

:root {
  /* ---- Durations ---- */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    340ms; /* @kind other */
  --dur-slower:  520ms; /* @kind other */

  /* ---- Easing ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);       /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);       /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */

  /* ---- Composed transitions ---- */
  --transition-colors: color var(--dur-fast) var(--ease-standard),
                       background-color var(--dur-fast) var(--ease-standard),
                       border-color var(--dur-fast) var(--ease-standard),
                       box-shadow var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-transform: transform var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-layout: width var(--dur-base) var(--ease-standard),
                       transform var(--dur-base) var(--ease-standard),
                       opacity var(--dur-base) var(--ease-standard); /* @kind other */

  /* ---- Interaction tokens ---- */
  --press-scale: 0.97;   /* @kind other */
  --hover-lift: -2px;    /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms;    /* @kind other */
    --dur-base: 0ms;    /* @kind other */
    --dur-slow: 0ms;    /* @kind other */
    --dur-slower: 0ms;  /* @kind other */
    --press-scale: 1;   /* @kind other */
    --hover-lift: 0px;  /* @kind other */
  }
}

/* ---- Components (PowrUP Design System) ---- */
/* ---- Button ---- */
.pu-btn{
  --_h: var(--control-h-md); --_px: 16px; --_fs: var(--text-md);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--_h); padding:0 var(--_px); font-size:var(--_fs);
  font-family:var(--font-sans); font-weight:var(--weight-medium);
  line-height:1; white-space:nowrap; border:1px solid transparent;
  border-radius:var(--radius-md); cursor:pointer; user-select:none;
  text-decoration:none; box-sizing:border-box;
  transition:var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.pu-btn:active:not(:disabled){ transform:scale(var(--press-scale)); }
.pu-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.pu-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.pu-btn svg{ width:1.15em; height:1.15em; flex:none; }
.pu-btn--sm{ --_h:var(--control-h-sm); --_px:12px; --_fs:var(--text-sm); border-radius:var(--radius-sm); }
.pu-btn--lg{ --_h:var(--control-h-lg); --_px:22px; --_fs:var(--text-base); }
.pu-btn--block{ display:flex; width:100%; }

.pu-btn--primary{ background:var(--color-primary,#0A63D6); color:var(--color-on-primary); }
.pu-btn--primary:hover:not(:disabled){ background:var(--color-primary-hover,#0A4FA8); }
.pu-btn--primary:active:not(:disabled){ background:var(--color-primary-active,#0C417F); }

/* Gradient CTA: uses --gradient-cta (all stops ≥4.5:1 w/ white text). Glow lifts on hover. */
.pu-btn--gradient{ background:var(--gradient-cta,linear-gradient(120deg,#0A63D6,#0E25F7,#8E12D7)); color:var(--text-on-accent); box-shadow:var(--shadow-sm); }
.pu-btn--gradient:hover:not(:disabled){ box-shadow:var(--shadow-glow); filter:brightness(1.06); }

.pu-btn--secondary{ background:var(--surface-card); color:var(--text-strong); border-color:var(--border-control); box-shadow:var(--shadow-xs); }
.pu-btn--secondary:hover:not(:disabled){ background:var(--surface-hover); border-color:var(--border-strong); }

.pu-btn--ghost{ background:transparent; color:var(--text-body); }
.pu-btn--ghost:hover:not(:disabled){ background:var(--surface-hover); color:var(--text-strong); }

.pu-btn--link{ background:transparent; color:var(--text-link); height:auto; padding:0 2px; border-radius:var(--radius-xs); }
.pu-btn--link:hover:not(:disabled){ color:var(--color-primary-hover); text-decoration:underline; text-underline-offset:3px; }
.pu-btn--link:active:not(:disabled){ transform:none; }

.pu-btn--danger{ background:var(--color-danger,#D32424); color:var(--text-on-accent); }
.pu-btn--danger:hover:not(:disabled){ background:var(--color-danger-hover,#A81C1C); }

.pu-btn__spin{ width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:pu-spin .6s linear infinite; }
@keyframes pu-spin{ to{ transform:rotate(360deg); } }

/* ---- Card ---- */
.pu-card{
  display:flex; flex-direction:column;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  box-sizing:border-box;
}
.pu-card--pad-sm{ padding:16px; }
.pu-card--pad-md{ padding:20px; }
.pu-card--pad-lg{ padding:24px; }
.pu-card--interactive{ cursor:pointer; }
.pu-card--interactive:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border-accent); }
.pu-card--interactive:active{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.pu-card--selected{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--ring-selected), var(--shadow-sm); }

.pu-card__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.pu-card__titles{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pu-card__eyebrow{ font:var(--font-caption); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-muted); }
.pu-card__title{ font:var(--font-heading); color:var(--text-strong); }
.pu-card__action{ flex:none; }

/* ---- Tag ---- */
.pu-tag{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 8px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:11px; font-weight:var(--weight-medium);
  letter-spacing:.02em; text-transform:uppercase; line-height:1; white-space:nowrap;
  background:var(--color-neutral-subtle); color:var(--color-neutral-fg);
}
.pu-tag--blue{ background:var(--color-info-subtle); color:var(--color-info-fg); }
.pu-tag--teal{ background:var(--accent-teal-subtle); color:var(--accent-teal-fg); } /* 4.62:1 */
.pu-tag--violet{ background:var(--accent-violet-subtle); color:var(--accent-violet-fg); }
.pu-tag--amber{ background:var(--color-warning-subtle); color:var(--color-warning-fg); } /* 5.69:1 (amber-700 = 4.26 FAIL) */
.pu-tag--red{ background:var(--color-danger-subtle); color:var(--color-danger-fg); }
.pu-tag--dark{ background:var(--surface-inverse); color:var(--surface-card); } /* flips with theme */
.pu-tag__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-right:-2px; border:none; padding:0;
  background:transparent; color:currentColor; cursor:pointer; opacity:.6; border-radius:3px;
}
.pu-tag__close:hover{ opacity:1; background:rgba(0,0,0,.08); }
.pu-tag__close svg{ width:11px; height:11px; }

/* ---- Input ---- */
.pu-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.pu-field__label{ font:var(--font-label); color:var(--text-strong); }
.pu-field__req{ color:var(--color-danger); margin-left:2px; }
.pu-field__hint{ font:var(--font-caption); color:var(--text-muted); }
.pu-field__hint--error{ color:var(--color-danger-fg); }

.pu-input{
  display:flex; align-items:center; gap:8px;
  height:var(--control-h-md); padding:0 12px;
  background:var(--surface-card); border:1.5px solid var(--border-control,#7B859A); /* 3.71:1 UI min */
  border-radius:var(--radius-md); transition:var(--transition-colors);
}
.pu-input:hover{ border-color:var(--border-strong); }
.pu-input:focus-within{ border-color:var(--border-focus); box-shadow:var(--focus-ring); }
.pu-input__el{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:var(--font-sans); font-size:var(--text-md); color:var(--text-strong);
}
.pu-input__el::placeholder{ color:var(--text-subtle); }
.pu-input__icon{ display:inline-flex; color:var(--text-muted); flex:none; }
.pu-input__icon svg{ width:18px; height:18px; }
.pu-input--sm{ height:var(--control-h-sm); border-radius:var(--radius-sm); }
.pu-input--invalid{ border-color:var(--color-danger); }
.pu-input--invalid:focus-within{ box-shadow:0 0 0 3px var(--color-danger-subtle); }
.pu-input--disabled{ background:var(--surface-sunken); opacity:.7; pointer-events:none; }

/* ---- Select ---- */
.pu-select-wrap{ position:relative; display:flex; align-items:center; }
.pu-select{
  appearance:none; -webkit-appearance:none;
  width:100%; height:var(--control-h-md); padding:0 38px 0 12px;
  background:var(--surface-card); border:1.5px solid var(--border-control,#7B859A);
  border-radius:var(--radius-md); color:var(--text-strong);
  font-family:var(--font-sans); font-size:var(--text-md); cursor:pointer;
  transition:var(--transition-colors);
}
.pu-select:hover{ border-color:var(--border-strong); }
.pu-select:focus{ outline:none; border-color:var(--border-focus); box-shadow:var(--focus-ring); }
.pu-select:disabled{ background:var(--surface-sunken); opacity:.7; cursor:not-allowed; }
.pu-select--sm{ height:var(--control-h-sm); border-radius:var(--radius-sm); }
.pu-select--invalid{ border-color:var(--color-danger); }
.pu-select--invalid:focus{ border-color:var(--color-danger); box-shadow:0 0 0 3px var(--color-danger-subtle); }
.pu-select-wrap__chev{
  position:absolute; right:12px; pointer-events:none; color:var(--text-muted);
  display:inline-flex;
}
.pu-select-wrap__chev svg{ width:18px; height:18px; }

/* ---- Checkbox ---- */
.pu-check{ display:flex; align-items:flex-start; gap:8px; font-family:var(--font-sans); cursor:pointer; }
.pu-check__main{ display:flex; align-items:center; gap:8px; }
.pu-check__col{ display:flex; flex-direction:column; gap:2px; }
.pu-check--disabled{ opacity:.6; cursor:not-allowed; pointer-events:none; }
.pu-check__native{ position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; }
.pu-check__box{
  flex:none; width:18px; height:18px;
  display:grid; place-items:center;
  background:var(--surface-card); border:1.5px solid var(--border-control,#7B859A);
  border-radius:var(--radius-sm); transition:var(--transition-colors); color:var(--color-on-primary);
}
.pu-check__box svg{ grid-area:1 / 1; width:12px; height:12px; opacity:0; transform:scale(.6); transition:transform .15s var(--ease-spring,ease), opacity .12s ease; }
.pu-check:hover .pu-check__box{ border-color:var(--border-strong); }
.pu-check__native:checked + .pu-check__box{ background:var(--color-primary); border-color:var(--color-primary); }
.pu-check__native:checked + .pu-check__box .pu-check__glyph{ opacity:1; transform:scale(1); }
.pu-check__native:indeterminate + .pu-check__box{ background:var(--color-primary); border-color:var(--color-primary); }
.pu-check__native:indeterminate + .pu-check__box .pu-check__glyph{ opacity:0; transform:scale(.6); }
.pu-check__native:indeterminate + .pu-check__box .pu-check__dash{ opacity:1; transform:scale(1); }
.pu-check__native:focus-visible + .pu-check__box{ border-color:var(--border-focus); box-shadow:var(--focus-ring); }
.pu-check--invalid .pu-check__box{ border-color:var(--color-danger); }
.pu-check--invalid .pu-check__native:focus-visible + .pu-check__box{ box-shadow:0 0 0 3px var(--color-danger-subtle); }
.pu-check__label{ font:var(--font-body); color:var(--text-body); display:flex; align-items:center; min-height:18px; }
.pu-check__label--error{ color:var(--color-danger-fg); }
.pu-check__msg{ font:var(--font-caption); color:var(--color-danger-fg); padding-left:26px; }


/* ---- Site ---- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
[hidden] { display: none !important; }
.nav-trigger:hover, .nav-link:hover { background: var(--surface-sunken); }
.nav-mobile-toggle { display: none !important; }
@media (max-width: 959px) {
  .nav-desktop { display: none !important; }
  .nav-mobile-toggle { display: inline-flex !important; margin-left: auto; }
}
@media (min-width: 960px) { #mobile-menu { display: none !important; } }
@keyframes hx-travel { 0% { left: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---- Hover / focus states ---- */
.u1:hover{color:var(--color-primary) !important}
.u2:hover{border-color:var(--blue-200) !important}
.u3:hover{background:var(--surface-hover) !important}
.u4:focus{border-color:var(--border-focus) !important;box-shadow:var(--focus-ring) !important}