/* UX Look core 1.0.0 (2026-10-18): structure of the pull tab and options drawer. Every pack skins these in its own
   CSS (colors, type, borders, glow). Nothing here sets a color except as a last-resort fallback. */

.ux-look-tab { position: fixed; z-index: 2147483000; right: env(safe-area-inset-right, 0px); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 30px; min-height: 92px; padding: 10px 0; cursor: pointer; border: 0; }
.ux-look-tab[hidden] { display: none; }
.ux-look-tab-lbl { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ux-drawer-open .ux-look-tab { right: min(380px, 100vw); }

.ux-look-drawer { position: fixed; z-index: 2147483001; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box; overflow: hidden; background: Canvas; color: CanvasText; }
.ux-look-drawer[hidden] { display: none; }
.ux-look-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; flex: none; }
.ux-look-title { margin: 0; }
.ux-look-close { cursor: pointer; }
.ux-look-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 18px; }
.ux-look-section { display: flex; flex-direction: column; gap: 14px; }
.ux-look-section-title { margin: 6px 0 0; }
.ux-look-group { display: flex; flex-direction: column; gap: 8px; }
.ux-look-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ux-look-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ux-look-card { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; cursor: pointer; padding: 10px; min-width: 0; }
.ux-look-swatches { display: flex; gap: 3px; height: 10px; }
.ux-look-swatches i { flex: 1; display: block; }
.ux-look-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-look-seg-b { cursor: pointer; flex: 1 1 auto; min-height: 34px; padding: 6px 10px; }
.ux-look-range { width: 100%; }
.ux-look-toggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; cursor: pointer; text-align: left; }
.ux-look-hint { margin: 0; }
.ux-look-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 16px; }
.ux-look-reset { cursor: pointer; min-height: 38px; }
.ux-look-report { margin: 0; }
@media (max-width: 520px) { .ux-drawer-open .ux-look-tab { display: none; } }
@media print { .ux-look-tab, .ux-look-drawer { display: none !important; } }

/* ==================================================================================================================
   Neon Rain UX pack 1.0.0 (2026-10-22): cyberpunk. Wandzilak Web Design.
   A city at night in the rain: magenta, cyan and yellow neon on dark, solid panels with cut corners, slanted tags,
   film grain, rain behind everything and a small glitch on the title.

   Everything is keyed to the root classes the Look core writes (.ux-pack-neonrain.ux-on) and reads only the shared
   --ux-* tokens and Neon Rain's own --nr-* tokens from neonrain-pack.js. Contract: CONTRACT.md 1.0.

   Readability rules this file keeps:
   - Body copy and form fields: 16 px (15 px compact), plain light text, letter-spacing 0, no glow, no color split.
     Neon colors go on chrome: edges, tags, headings, labels, the clock, one signal color.
   - Glow (--ux-text-glow, --nr-split) only on display text: the title, h1/h2, the clock, big numbers, signs.
   - Panels, dialogs, toasts, inputs and the drawer are opaque: rain and grain never sit under their text.
   - Rain, grain, glitch, ambient motion and start-up only appear with prefers-reduced-motion: no-preference, and only
     when their option is on. Nothing flashes: the glitch jumps once every 8 s, the hum and pulses are slow fades.
   ================================================================================================================== */

/* ------------------------------------------------------------------------------------------------ root and ground */
.ux-pack-neonrain.ux-on {
  color-scheme: dark;
  min-height: 100%;
  color: var(--ux-text);
  font: 400 16px/1.6 var(--ux-font-body);
  letter-spacing: 0;
  scrollbar-color: var(--nr-edge-b) transparent;
  --nr-skew: -12deg;            /* slanted tags, nav items and buttons */
  --nr-cut: 12px;               /* corner cut on panels, dialogs, toasts */
  --nr-cut-sm: 8px;             /* corner cut on small things (banners) */
  background:
    radial-gradient(ellipse 70% 55% at 16% 0%, var(--nr-haze-a), transparent 72%) fixed,
    radial-gradient(ellipse 70% 60% at 100% 100%, var(--nr-haze-b), transparent 72%) fixed,
    var(--nr-ground);
}
.ux-pack-neonrain.ux-on.ux-edges-cut { --nr-skew: 0deg; }
.ux-pack-neonrain.ux-on.ux-edges-square { --nr-skew: 0deg; --nr-cut: 0px; --nr-cut-sm: 0px; }
.ux-pack-neonrain.ux-on.ux-type-sans { font-weight: 500; }
/* The ground lives on the root; the page body must stay see-through or a host's own body color (an app's white, an
   embedding frame's reset) covers the haze, rain and grain. This selector outranks a plain `body { … }` rule. */
.ux-pack-neonrain.ux-on body { background: transparent; color: var(--ux-text); }
.ux-pack-neonrain.ux-on [class*="ux-"], .ux-pack-neonrain.ux-on [class*="nr-"],
.ux-pack-neonrain.ux-on [class*="ux-"]::before, .ux-pack-neonrain.ux-on [class*="ux-"]::after { box-sizing: border-box; }
.ux-pack-neonrain.ux-on ::selection { background: color-mix(in srgb, var(--ux-accent) 40%, transparent); color: var(--ux-text); }

/* Rain: thin slanted streaks drawn with gradients on a fixed layer behind everything, moved by one transform (no
   script, compositor only). Every tile height divides 720 px, so one 720 px step loops without a seam. */
.ux-pack-neonrain.ux-on::before {
  content: ''; display: none; position: fixed; z-index: -1; pointer-events: none;
  top: -760px; bottom: -25vh; left: -35vw; right: -35vw;
  transform: rotate(7deg);
  background:
    radial-gradient(1px 13px at 17px 30px, var(--nr-rain-1), transparent) 0 0 / 53px 120px,
    radial-gradient(1px 9px at 41px 70px, var(--nr-rain-1), transparent) 0 0 / 71px 144px,
    radial-gradient(1px 16px at 9px 120px, var(--nr-rain-1), transparent) 0 0 / 113px 180px,
    radial-gradient(1px 11px at 60px 20px, var(--nr-rain-2), transparent) 0 0 / 167px 240px,
    radial-gradient(1px 18px at 88px 200px, var(--nr-rain-1), transparent) 0 0 / 139px 360px;
}
.ux-pack-neonrain.ux-on.ux-rain-storm::before {
  background:
    radial-gradient(1px 15px at 17px 30px, var(--nr-rain-1), transparent) 0 0 / 37px 90px,
    radial-gradient(1px 10px at 41px 70px, var(--nr-rain-1), transparent) 0 0 / 53px 120px,
    radial-gradient(1px 18px at 9px 120px, var(--nr-rain-1), transparent) 0 0 / 67px 144px,
    radial-gradient(1px 12px at 30px 40px, var(--nr-rain-2), transparent) 0 0 / 89px 180px,
    radial-gradient(1px 20px at 50px 150px, var(--nr-rain-1), transparent) 0 0 / 101px 240px,
    radial-gradient(1px 9px at 70px 10px, var(--nr-rain-1), transparent) 0 0 / 59px 72px,
    radial-gradient(1px 22px at 21px 300px, var(--nr-rain-2), transparent) 0 0 / 131px 360px;
}
/* Grain: a still SVG noise tile at 6 % on top of the ground and rain, under every panel. (A data: image: a CSP must
   allow img-src data: for it, or the grain simply does not show.) */
.ux-pack-neonrain.ux-on::after {
  content: ''; display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ------------------------------------------------------------------------------------------------ focus */
.ux-pack-neonrain.ux-on :focus-visible, .ux-pack-neonrain.ux-on .is-focus { outline: 2px solid var(--ux-focus); outline-offset: 3px; }
/* Slanted things draw the ring on their slanted shape. */
.ux-pack-neonrain.ux-on :is(.ux-nav-item, .ux-btn, .ux-look-tab):is(:focus-visible, .is-focus) { outline: none; }
.ux-pack-neonrain.ux-on :is(.ux-nav-item, .ux-btn, .ux-look-tab):is(:focus-visible, .is-focus)::before { outline: 2px solid var(--ux-focus); outline-offset: 3px; }

/* ------------------------------------------------------------------------------------------------ frames (shared) */
/* Panels, stats, dialogs, toasts and nr-frame: the edge is a cut-corner shape on ::before (it carries the glow) and
   the opaque fill is the same shape 1 px inside it on ::after. Built from gradients, not clip-path, so nothing the
   element holds is clipped (focus rings, menus) and the glow can spill outside. */
.ux-pack-neonrain.ux-on :is(.ux-panel, .ux-stat, .nr-frame) { position: relative; }
.ux-pack-neonrain.ux-on :is(.ux-panel, .ux-stat, .ux-dialog, .ux-toast, .nr-frame) {
  --nr-fe: var(--nr-edge); --nr-ff: var(--ux-surface-solid);
  isolation: isolate; background: transparent; border: 0; border-radius: 0;
}
.ux-pack-neonrain.ux-on :is(.ux-panel, .ux-stat, .ux-dialog, .ux-toast, .nr-frame)::before,
.ux-pack-neonrain.ux-on :is(.ux-panel, .ux-stat, .ux-dialog, .ux-toast, .nr-frame)::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
}
.ux-pack-neonrain.ux-on :is(.ux-panel, .ux-stat, .ux-dialog, .ux-toast, .nr-frame)::before {
  inset: 0;
  background:
    linear-gradient(var(--nr-fe) 0 0) top left / 51% 51% no-repeat,
    linear-gradient(225deg, transparent calc(var(--nr-cut) * .7071), var(--nr-fe) 0) top right / 51% 51% no-repeat,
    linear-gradient(var(--nr-fe) 0 0) bottom right / 51% 51% no-repeat,
    linear-gradient(45deg, transparent calc(var(--nr-cut) * .7071), var(--nr-fe) 0) bottom left / 51% 51% no-repeat;
  filter: var(--nr-frame-drop);
}
.ux-pack-neonrain.ux-on :is(.ux-panel, .ux-stat, .ux-dialog, .ux-toast, .nr-frame)::after {
  inset: 1px; --nr-ci: max(0px, calc((var(--nr-cut) - .45px) * .7071));
  background:
    linear-gradient(var(--nr-ff) 0 0) top left / 51% 51% no-repeat,
    linear-gradient(225deg, transparent var(--nr-ci), var(--nr-ff) 0) top right / 51% 51% no-repeat,
    linear-gradient(var(--nr-ff) 0 0) bottom right / 51% 51% no-repeat,
    linear-gradient(45deg, transparent var(--nr-ci), var(--nr-ff) 0) bottom left / 51% 51% no-repeat;
}

/* ------------------------------------------------------------------------------------------------ shell */
/* A wrapping flex frame: header across, nav beside main, footer across. Nav (min 180 px) and main (min 540 px) sit
   side by side while the shell is at least ~760 px wide; below that the nav wraps into a full row above main. */
.ux-pack-neonrain.ux-on .ux-shell {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--ux-gap) calc(var(--ux-gap) + 8px);
  padding: clamp(16px, 2.4vw, 28px);
  color: var(--ux-text); background: transparent;
}
.ux-pack-neonrain.ux-on .ux-header {
  position: relative; flex: 1 1 100%; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-bottom: 14px;
}
.ux-pack-neonrain.ux-on .ux-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--nr-a), var(--nr-b) 55%, transparent);
  box-shadow: var(--ux-glow);
}
.ux-pack-neonrain.ux-on .ux-brand { font: 600 13px/1.2 var(--ux-font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--nr-b-text); }
.ux-pack-neonrain.ux-on .ux-title {
  position: relative; margin: 0; font: 700 clamp(32px, 4.4vw, 46px)/1 var(--ux-font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ux-text); text-shadow: var(--nr-split);
}
.ux-pack-neonrain.ux-on .ux-header-end { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ux-pack-neonrain.ux-on .ux-clock {
  font: 400 24px/1 var(--ux-font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--nr-c-text); text-shadow: var(--nr-c-glow-text);
}

.ux-pack-neonrain.ux-on .ux-nav { flex: 1 1 180px; min-width: 0; container: nr-nav / inline-size; }
.ux-pack-neonrain.ux-on .ux-nav ul { list-style: none; margin: 0; padding: 0 6px; display: flex; flex-direction: column; gap: 8px; }
.ux-pack-neonrain.ux-on .ux-nav li { margin: 0; }
@container nr-nav (min-width: 300px) {
  .ux-pack-neonrain.ux-on .ux-nav ul { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
  .ux-pack-neonrain.ux-on .ux-nav li { flex: 1 1 auto; }
}
/* Nav items: the slanted chip is ::before, so the label stays upright. */
.ux-pack-neonrain.ux-on .ux-nav-item {
  position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; min-height: 42px; padding: 8px 16px; margin: 0;
  font: 600 14px/1.2 var(--ux-font-display); letter-spacing: .12em; text-transform: uppercase; text-align: left; text-decoration: none;
  color: var(--nr-b-text); background: transparent; border: 0; border-radius: 0; cursor: pointer; transition: color .15s;
}
.ux-pack-neonrain.ux-on .ux-nav-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--nr-skew));
  background: var(--nr-nav-fill); border: 1px solid var(--nr-edge-b);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ux-pack-neonrain.ux-on .ux-nav-item:hover { color: var(--ux-text); }
.ux-pack-neonrain.ux-on .ux-nav-item:hover::before { background: linear-gradient(var(--nr-wash) 0 0), var(--nr-nav-fill); border-color: var(--nr-b); box-shadow: var(--nr-glow-b); }
.ux-pack-neonrain.ux-on .ux-nav-item:is([aria-current="page"], .is-active) { color: var(--nr-c-ink); }
.ux-pack-neonrain.ux-on .ux-nav-item:is([aria-current="page"], .is-active)::before { background: var(--nr-c); border-color: var(--nr-c); box-shadow: var(--nr-glow-c); }

.ux-pack-neonrain.ux-on .ux-main { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: var(--ux-gap); container-type: inline-size; }
.ux-pack-neonrain.ux-on .ux-footer {
  position: relative; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  padding-top: 14px; font-size: 14px; color: var(--ux-muted);
}
.ux-pack-neonrain.ux-on .ux-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--nr-edge-b) 0 8px, transparent 8px 13px);
}

/* ------------------------------------------------------------------------------------------------ layout */
.ux-pack-neonrain.ux-on .ux-stack { display: flex; flex-direction: column; gap: var(--ux-gap); min-width: 0; }
.ux-pack-neonrain.ux-on .ux-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; }
.ux-pack-neonrain.ux-on :is(.ux-grid, .ux-grid-2, .ux-grid-3, .ux-grid-4) { display: grid; gap: var(--ux-gap); min-width: 0; }
.ux-pack-neonrain.ux-on .ux-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
/* Fixed counts that collapse without container queries: 4 → 2 → 1, 3 → 1, 2 → 1. */
.ux-pack-neonrain.ux-on .ux-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc((100% - 3 * var(--ux-gap)) / 4 - .1px), min(calc((100% - var(--ux-gap)) / 2 - .1px), calc((680px - 100%) * 999)), calc((330px - 100%) * 999))), 1fr)); }
.ux-pack-neonrain.ux-on .ux-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc((100% - 2 * var(--ux-gap)) / 3 - .1px), calc((600px - 100%) * 999))), 1fr)); }
.ux-pack-neonrain.ux-on .ux-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc((100% - var(--ux-gap)) / 2 - .1px), calc((440px - 100%) * 999))), 1fr)); }
.ux-pack-neonrain.ux-on .ux-span-all { grid-column: 1 / -1; }
@container (min-width: 600px) { .ux-pack-neonrain.ux-on .ux-span-2 { grid-column: span 2; } }

/* ------------------------------------------------------------------------------------------------ panels */
.ux-pack-neonrain.ux-on .ux-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--ux-pad); }
.ux-pack-neonrain.ux-on .ux-panel-head { display: flex; align-items: center; gap: 10px 12px; min-width: 0; flex-wrap: wrap; }
.ux-pack-neonrain.ux-on .ux-panel-head::after {
  content: ''; order: 1; flex: 1 1 24px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--nr-edge-b) 0 6px, transparent 6px 10px);
}
/* The panel title is a slanted neon tag (signal fill, dark ink). */
.ux-pack-neonrain.ux-on .ux-panel-title {
  order: 0; position: relative; isolation: isolate; margin: 0 0 0 5px; padding: 5px 11px;
  font: 700 13px/1.15 var(--ux-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ux-accent-ink);
}
.ux-pack-neonrain.ux-on .ux-panel-title::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--nr-skew)); background: var(--ux-accent); box-shadow: var(--ux-glow); }
.ux-pack-neonrain.ux-on .ux-panel-meta { order: 2; font: 400 14px/1.3 var(--ux-font-mono); color: var(--ux-muted); }
.ux-pack-neonrain.ux-on .ux-panel-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; container-type: inline-size; }

/* ------------------------------------------------------------------------------------------------ type */
.ux-pack-neonrain.ux-on :is(.ux-h1, .ux-h2, .ux-h3) { margin: 0; color: var(--ux-text); font-family: var(--ux-font-display); text-wrap: balance; }
.ux-pack-neonrain.ux-on .ux-h1 { font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; text-shadow: var(--ux-text-glow); }
.ux-pack-neonrain.ux-on .ux-h2 { font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; text-shadow: var(--ux-text-glow); }
.ux-pack-neonrain.ux-on .ux-h3 { font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: .02em; }
.ux-pack-neonrain.ux-on .ux-text { margin: 0; font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--ux-text); }
.ux-pack-neonrain.ux-on .ux-muted { color: var(--ux-muted); }
.ux-pack-neonrain.ux-on .ux-label { font: 600 13px/1.3 var(--ux-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ux-muted); }
.ux-pack-neonrain.ux-on :is(.ux-mono, code, kbd, samp) { font-family: var(--ux-font-mono); font-weight: 400; font-size: 15px; letter-spacing: 0; }
.ux-pack-neonrain.ux-on .ux-kbd {
  display: inline-block; min-width: 1.9em; padding: 1px 7px; font: 400 14px/1.4 var(--ux-font-mono); text-align: center;
  color: var(--ux-text); background: var(--ux-surface-2-solid); border: 1px solid var(--nr-edge-b); border-bottom: 2px solid var(--nr-b); border-radius: 0;
}
.ux-pack-neonrain.ux-on :is(.ux-link, .ux-main a:not([class]), .ux-panel a:not([class]), .ux-dialog a:not([class])) {
  color: var(--ux-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--nr-edge-strong); transition: color .15s, text-decoration-color .15s;
}
.ux-pack-neonrain.ux-on :is(.ux-link, .ux-main a:not([class]), .ux-panel a:not([class]), .ux-dialog a:not([class])):hover { color: var(--ux-text); text-decoration-color: var(--nr-c); }
.ux-pack-neonrain.ux-on .ux-divider { height: 1px; margin: 6px 0; border: 0; background: linear-gradient(90deg, var(--nr-a), var(--nr-b) 50%, transparent); }

/* ------------------------------------------------------------------------------------------------ stats */
.ux-pack-neonrain.ux-on .ux-stat { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 14px; container-type: inline-size; }
.ux-pack-neonrain.ux-on .ux-stat-label { font: 600 12px/1.3 var(--ux-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ux-accent-text); }
.ux-pack-neonrain.ux-on .ux-stat-value {
  font: 400 clamp(26px, 17cqi, 34px)/1.08 var(--ux-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ux-text); overflow: hidden; text-overflow: ellipsis;
}
.ux-pack-neonrain.ux-on .ux-stat-note { font-size: 14px; line-height: 1.4; color: var(--ux-text-2); }
.ux-pack-neonrain.ux-on .ux-stat.is-ok { --nr-fe: var(--ux-ok); --nr-tone-text: var(--ux-ok-text); --nr-tone: var(--ux-ok); }
.ux-pack-neonrain.ux-on .ux-stat.is-warn { --nr-fe: var(--ux-warn); --nr-tone-text: var(--ux-warn-text); --nr-tone: var(--ux-warn); }
.ux-pack-neonrain.ux-on .ux-stat.is-bad { --nr-fe: var(--ux-bad); --nr-tone-text: var(--ux-bad-text); --nr-tone: var(--ux-bad); }
.ux-pack-neonrain.ux-on .ux-stat.is-info { --nr-fe: var(--ux-info); --nr-tone-text: var(--ux-info-text); --nr-tone: var(--ux-info); }
.ux-pack-neonrain.ux-on .ux-stat:is(.is-ok, .is-warn, .is-bad, .is-info) .ux-stat-value {
  color: var(--nr-tone-text); text-shadow: 0 0 calc(var(--nr-light-blur) * 1.4) color-mix(in srgb, var(--nr-tone) 55%, transparent);
}

/* ------------------------------------------------------------------------------------------------ table */
.ux-pack-neonrain.ux-on .ux-table-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.ux-pack-neonrain.ux-on .ux-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; color: var(--ux-text); }
.ux-pack-neonrain.ux-on .ux-table th {
  padding: 8px 14px 8px 0; text-align: left; white-space: nowrap; vertical-align: bottom;
  font: 600 12px/1.3 var(--ux-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ux-muted);
  border-bottom: 1px solid var(--nr-edge-b);
}
.ux-pack-neonrain.ux-on .ux-table td { padding: 8px 14px 8px 0; vertical-align: top; border-bottom: 1px dashed var(--ux-line); }
.ux-pack-neonrain.ux-on .ux-table :is(th, td):last-child { padding-right: 0; }
/* Inside a scroll wrap, text columns keep a usable width so narrow screens scroll instead of crushing words. */
.ux-pack-neonrain.ux-on .ux-table-wrap .ux-table td:not(.ux-num) { min-width: 7em; }
.ux-pack-neonrain.ux-on .ux-table tbody tr { transition: background-color .15s; }
.ux-pack-neonrain.ux-on .ux-table tbody tr:hover { background: var(--nr-wash); }
.ux-pack-neonrain.ux-on .ux-table :is(td, th).ux-num { text-align: right; font-family: var(--ux-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-pack-neonrain.ux-on .ux-table caption { caption-side: top; text-align: left; padding-bottom: 8px; color: var(--ux-muted); font-size: 14px; }

/* ------------------------------------------------------------------------------------------------ badges, lights */
.ux-pack-neonrain.ux-on .ux-badge {
  --nr-bt: var(--ux-accent-text); --nr-bf: var(--nr-a-wash); --nr-bb: var(--nr-edge-strong);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; margin: 0 3px;
  white-space: nowrap; vertical-align: middle; font: 600 12px/1.2 var(--ux-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--nr-bt);
}
.ux-pack-neonrain.ux-on .ux-badge::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--nr-skew)); background: var(--nr-bf); border: 1px solid var(--nr-bb); }
.ux-pack-neonrain.ux-on .ux-badge.is-ok { --nr-bt: var(--ux-ok-text); --nr-bf: var(--ux-ok-bg); --nr-bb: var(--ux-ok); }
.ux-pack-neonrain.ux-on .ux-badge.is-warn { --nr-bt: var(--ux-warn-text); --nr-bf: var(--ux-warn-bg); --nr-bb: var(--ux-warn); }
.ux-pack-neonrain.ux-on .ux-badge.is-bad { --nr-bt: var(--ux-bad-text); --nr-bf: var(--ux-bad-bg); --nr-bb: var(--ux-bad); }
.ux-pack-neonrain.ux-on .ux-badge.is-info { --nr-bt: var(--ux-info-text); --nr-bf: var(--ux-info-bg); --nr-bb: var(--ux-info); }
/* The badge fill is the opaque tinted ground for tones; the default badge (signal wash) sits on a panel. */

.ux-pack-neonrain.ux-on .ux-light {
  --nr-lc: var(--ux-accent);
  display: inline-block; flex: none; width: 10px; height: 10px; vertical-align: middle; transform: skewX(var(--nr-skew));
  background: var(--nr-lc); box-shadow: 0 0 var(--nr-light-blur) var(--nr-lc);
  outline: 1px solid color-mix(in srgb, var(--nr-lc) 45%, transparent); outline-offset: 2px;
}
.ux-pack-neonrain.ux-on .ux-light.is-ok { --nr-lc: var(--ux-ok); }
.ux-pack-neonrain.ux-on .ux-light.is-warn { --nr-lc: var(--ux-warn); }
.ux-pack-neonrain.ux-on .ux-light.is-bad { --nr-lc: var(--ux-bad); }
.ux-pack-neonrain.ux-on .ux-light.is-info { --nr-lc: var(--ux-info); }

/* ------------------------------------------------------------------------------------------------ meter, progress */
/* Segmented neon bars: the fill is cut into 6 px cells by a dark repeating gradient. */
.ux-pack-neonrain.ux-on :is(.ux-meter, .ux-progress) {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; padding: 2px; margin: 0;
  background: var(--nr-ground); border: 1px solid var(--nr-edge-b); border-radius: 0; color: var(--ux-accent);
}
.ux-pack-neonrain.ux-on .ux-progress::-webkit-progress-bar { background: var(--nr-track); }
.ux-pack-neonrain.ux-on .ux-progress::-webkit-progress-value {
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(90deg, var(--nr-a), var(--nr-b));
  box-shadow: 0 0 var(--nr-light-blur) var(--nr-a);
}
.ux-pack-neonrain.ux-on .ux-progress::-moz-progress-bar { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(90deg, var(--nr-a), var(--nr-b)); }
.ux-pack-neonrain.ux-on .ux-progress:indeterminate {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nr-b) 55%, transparent), transparent) 0 0 / 40% 100% no-repeat, var(--nr-track);
  background-clip: content-box;
}
.ux-pack-neonrain.ux-on .ux-progress:indeterminate::-webkit-progress-bar { background: transparent; }
.ux-pack-neonrain.ux-on .ux-progress:indeterminate::-moz-progress-bar { background: transparent; }
.ux-pack-neonrain.ux-on .ux-meter::-webkit-meter-inner-element { display: block; height: 100%; }
.ux-pack-neonrain.ux-on .ux-meter::-webkit-meter-bar { height: 100%; background: var(--nr-track); border: 0; border-radius: 0; }
.ux-pack-neonrain.ux-on .ux-meter::-webkit-meter-optimum-value { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(var(--ux-ok) 0 0); box-shadow: 0 0 var(--nr-light-blur) var(--ux-ok); }
.ux-pack-neonrain.ux-on .ux-meter::-webkit-meter-suboptimum-value { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(var(--ux-warn) 0 0); box-shadow: 0 0 var(--nr-light-blur) var(--ux-warn); }
.ux-pack-neonrain.ux-on .ux-meter::-webkit-meter-even-less-good-value { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(var(--ux-bad) 0 0); box-shadow: 0 0 var(--nr-light-blur) var(--ux-bad); }
.ux-pack-neonrain.ux-on .ux-meter::-moz-meter-bar { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(var(--ux-ok) 0 0); }
.ux-pack-neonrain.ux-on .ux-meter:-moz-meter-sub-optimum::-moz-meter-bar { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(var(--ux-warn) 0 0); }
.ux-pack-neonrain.ux-on .ux-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--nr-ground) 6px 8px), linear-gradient(var(--ux-bad) 0 0); }

/* ------------------------------------------------------------------------------------------------ chart */
.ux-pack-neonrain.ux-on .ux-chart { position: relative; min-width: 0; }
.ux-pack-neonrain.ux-on .ux-chart svg { display: block; width: 100%; height: auto; overflow: visible; filter: var(--nr-chart-drop); }
.ux-pack-neonrain.ux-on .ux-chart svg text { fill: var(--ux-text-2); font-family: var(--ux-font-mono); }

/* ------------------------------------------------------------------------------------------------ list, empty */
.ux-pack-neonrain.ux-on .ux-list { list-style: none; margin: 0; padding: 0; }
.ux-pack-neonrain.ux-on .ux-list > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 8px 0 8px 12px; margin: 0;
  border-bottom: 1px dashed var(--ux-line); box-shadow: inset 3px 0 0 transparent; color: var(--ux-text);
}
.ux-pack-neonrain.ux-on .ux-list > li:last-child { border-bottom: 0; }
.ux-pack-neonrain.ux-on .ux-list-time { flex: none; font: 400 14px/1.6 var(--ux-font-mono); font-variant-numeric: tabular-nums; color: var(--nr-b-text); }
.ux-pack-neonrain.ux-on .ux-list-main { flex: 1 1 14em; min-width: 0; }
.ux-pack-neonrain.ux-on .ux-list-end { margin-left: auto; font: 400 14px/1.6 var(--ux-font-mono); color: var(--ux-accent-text); white-space: nowrap; }
.ux-pack-neonrain.ux-on .ux-list > li.is-ok { box-shadow: inset 3px 0 0 var(--ux-ok); }
.ux-pack-neonrain.ux-on .ux-list > li.is-warn { box-shadow: inset 3px 0 0 var(--ux-warn); }
.ux-pack-neonrain.ux-on .ux-list > li.is-bad { box-shadow: inset 3px 0 0 var(--ux-bad); }
.ux-pack-neonrain.ux-on .ux-list > li.is-info { box-shadow: inset 3px 0 0 var(--ux-info); }
.ux-pack-neonrain.ux-on .ux-list > li.is-warn .ux-list-main { color: var(--ux-warn-text); }
.ux-pack-neonrain.ux-on .ux-list > li.is-bad .ux-list-main { color: var(--ux-bad-text); }

.ux-pack-neonrain.ux-on .ux-empty {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 30px 18px 26px; text-align: center;
  color: var(--ux-text-2); border: 1px dashed var(--nr-edge-b); border-radius: 0;
}
/* A dead-signal mark: a slanted frame with a slash through it. */
.ux-pack-neonrain.ux-on .ux-empty::before {
  content: ''; width: 40px; height: 28px; transform: skewX(var(--nr-skew));
  border: 1px solid var(--nr-edge-strong);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--nr-a) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  filter: var(--nr-drop);
}

/* ------------------------------------------------------------------------------------------------ alerts, toast */
/* Alerts: a dark tinted ground with a neon edge, and the title as a slanted tag in the tone's color. Body text stays
   plain light text (7:1 or better on every tinted ground). */
.ux-pack-neonrain.ux-on .ux-alert {
  --nr-tone: var(--ux-info); --nr-tone-ink: var(--ux-info-ink);
  display: grid; justify-items: start; gap: 8px; padding: 12px 16px 12px 18px; margin: 0; color: var(--ux-text);
  background: var(--ux-info-bg); border: 1px solid color-mix(in srgb, var(--nr-tone) 60%, transparent); border-radius: 0;
  box-shadow: inset 4px 0 0 var(--nr-tone), 0 0 var(--nr-light-blur) color-mix(in srgb, var(--nr-tone) 28%, transparent);
}
.ux-pack-neonrain.ux-on .ux-alert > :not(.ux-alert-title) { justify-self: stretch; }
.ux-pack-neonrain.ux-on .ux-alert.is-ok { --nr-tone: var(--ux-ok); --nr-tone-ink: var(--ux-ok-ink); background: var(--ux-ok-bg); }
.ux-pack-neonrain.ux-on .ux-alert.is-warn { --nr-tone: var(--ux-warn); --nr-tone-ink: var(--ux-warn-ink); background: var(--ux-warn-bg); }
.ux-pack-neonrain.ux-on .ux-alert.is-bad { --nr-tone: var(--ux-bad); --nr-tone-ink: var(--ux-bad-ink); background: var(--ux-bad-bg); }
.ux-pack-neonrain.ux-on .ux-alert.is-info { --nr-tone: var(--ux-info); --nr-tone-ink: var(--ux-info-ink); background: var(--ux-info-bg); }
.ux-pack-neonrain.ux-on :is(.ux-alert, .ux-toast) .ux-alert-title {
  position: relative; isolation: isolate; margin: 0 0 0 4px; padding: 3px 10px;
  font: 700 13px/1.2 var(--ux-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--nr-tone-ink);
}
.ux-pack-neonrain.ux-on :is(.ux-alert, .ux-toast) .ux-alert-title::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--nr-skew)); background: var(--nr-tone); }

.ux-pack-neonrain.ux-on .ux-toast {
  --nr-tone: var(--nr-a); --nr-tone-ink: var(--ux-accent-ink); --nr-fe: var(--nr-edge-strong); --nr-ff: var(--ux-surface-2-solid);
  position: fixed; z-index: 2147482000; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid; justify-items: start; gap: 8px; width: max-content; max-width: min(420px, calc(100vw - 32px)); padding: 14px 18px 14px 20px;
  color: var(--ux-text); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.ux-pack-neonrain.ux-on .ux-toast.is-ok { --nr-tone: var(--ux-ok); --nr-tone-ink: var(--ux-ok-ink); --nr-fe: var(--ux-ok); }
.ux-pack-neonrain.ux-on .ux-toast.is-warn { --nr-tone: var(--ux-warn); --nr-tone-ink: var(--ux-warn-ink); --nr-fe: var(--ux-warn); }
.ux-pack-neonrain.ux-on .ux-toast.is-bad { --nr-tone: var(--ux-bad); --nr-tone-ink: var(--ux-bad-ink); --nr-fe: var(--ux-bad); }
.ux-pack-neonrain.ux-on .ux-toast.is-info { --nr-tone: var(--ux-info); --nr-tone-ink: var(--ux-info-ink); --nr-fe: var(--ux-info); }

/* ------------------------------------------------------------------------------------------------ buttons */
/* The slanted body is ::before so the label stays upright; focus draws on the slanted shape. */
.ux-pack-neonrain.ux-on .ux-btn {
  --nr-btn-f: transparent; --nr-btn-b: var(--nr-edge-b); --nr-btn-c: var(--ux-text); --nr-btn-g: 0 0 0 transparent;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 18px; margin: 0 4px;
  font: 600 14px/1.15 var(--ux-font-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--nr-btn-c); background: transparent; border: 0; border-radius: 0; cursor: pointer; transition: color .15s;
}
.ux-pack-neonrain.ux-on .ux-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--nr-skew));
  background: var(--nr-btn-f); border: 1px solid var(--nr-btn-b); box-shadow: var(--nr-btn-g);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ux-pack-neonrain.ux-on .ux-btn:hover { --nr-btn-f: var(--nr-wash); --nr-btn-b: var(--nr-b); --nr-btn-g: var(--nr-glow-b); }
.ux-pack-neonrain.ux-on .ux-btn:active { --nr-btn-f: var(--nr-a-wash); }
.ux-pack-neonrain.ux-on .ux-btn.is-primary { --nr-btn-f: var(--ux-accent); --nr-btn-b: var(--ux-accent); --nr-btn-c: var(--ux-accent-ink); --nr-btn-g: var(--ux-glow); font-weight: 700; }
.ux-pack-neonrain.ux-on .ux-btn.is-primary:hover { --nr-btn-f: var(--nr-c); --nr-btn-b: var(--nr-c); --nr-btn-c: var(--nr-c-ink); --nr-btn-g: var(--nr-glow-c); }
.ux-pack-neonrain.ux-on .ux-btn.is-danger { --nr-btn-f: var(--ux-bad-bg); --nr-btn-b: var(--ux-bad); --nr-btn-c: var(--ux-bad-text); }
.ux-pack-neonrain.ux-on .ux-btn.is-danger:hover { --nr-btn-f: var(--ux-bad); --nr-btn-c: var(--ux-bad-ink); --nr-btn-g: 0 0 var(--nr-light-blur) var(--ux-bad); }
.ux-pack-neonrain.ux-on .ux-btn.is-quiet { --nr-btn-b: transparent; --nr-btn-c: var(--ux-text-2); }
.ux-pack-neonrain.ux-on .ux-btn.is-quiet:hover { --nr-btn-f: var(--nr-wash); --nr-btn-b: var(--nr-edge-b); --nr-btn-c: var(--ux-text); --nr-btn-g: 0 0 0 transparent; }
.ux-pack-neonrain.ux-on .ux-btn:is(:disabled, [aria-disabled="true"]), .ux-pack-neonrain.ux-on .ux-btn:is(:disabled, [aria-disabled="true"]):hover {
  --nr-btn-f: transparent; --nr-btn-b: var(--ux-line-strong); --nr-btn-c: var(--ux-muted); --nr-btn-g: 0 0 0 transparent; cursor: not-allowed;
}
.ux-pack-neonrain.ux-on .ux-btn:is(:disabled, [aria-disabled="true"])::before { border-style: dashed; }

/* ------------------------------------------------------------------------------------------------ fields */
/* Inputs are straight, opaque and plain: body font, letter-spacing 0, a 3:1 border, a neon edge only on focus. */
.ux-pack-neonrain.ux-on .ux-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ux-pack-neonrain.ux-on .ux-field > label, .ux-pack-neonrain.ux-on .ux-field > .ux-label { font: 600 13px/1.3 var(--ux-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ux-muted); }
.ux-pack-neonrain.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search) {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 42px; padding: 8px 12px; margin: 0;
  font: inherit; font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--ux-text);
  background-color: var(--nr-ground); border: 1px solid var(--nr-ctl); border-radius: 0;
  box-shadow: inset 3px 0 0 transparent; transition: border-color .15s, box-shadow .15s;
}
.ux-pack-neonrain.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search)::placeholder { color: var(--ux-muted); opacity: 1; }
.ux-pack-neonrain.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search):hover { border-color: var(--nr-b); }
.ux-pack-neonrain.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search):focus { border-color: var(--nr-c); box-shadow: inset 3px 0 0 var(--nr-c); }
.ux-pack-neonrain.ux-on .ux-textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.ux-pack-neonrain.ux-on .ux-select {
  padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--nr-b-text) 50%), linear-gradient(135deg, var(--nr-b-text) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.ux-pack-neonrain.ux-on .ux-select option { color: var(--ux-text); background: var(--ux-surface-2-solid); }
.ux-pack-neonrain.ux-on .ux-search {
  padding-left: 38px;
  background-image:
    radial-gradient(circle at 17px 50%, transparent 5.2px, var(--nr-b-text) 5.6px 6.8px, transparent 7.2px),
    linear-gradient(45deg, transparent calc(50% - 1px), var(--nr-b-text) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: 0 0, 21px calc(50% + 6px); background-size: 100% 100%, 7px 7px; background-repeat: no-repeat;
}
.ux-pack-neonrain.ux-on .ux-search::-webkit-search-cancel-button { cursor: pointer; }
.ux-pack-neonrain.ux-on :is(.ux-input, .ux-select, .ux-textarea, .ux-search):disabled {
  color: var(--ux-muted); background-color: transparent; border-style: dashed; border-color: var(--ux-line-strong); cursor: not-allowed;
}
.ux-pack-neonrain.ux-on :is(.ux-field.is-invalid :is(.ux-input, .ux-select, .ux-textarea, .ux-search), :is(.ux-input, .ux-select, .ux-textarea, .ux-search)[aria-invalid="true"]) {
  border-color: var(--ux-bad); box-shadow: inset 3px 0 0 var(--ux-bad), 0 0 var(--nr-light-blur) color-mix(in srgb, var(--ux-bad) 40%, transparent);
}
.ux-pack-neonrain.ux-on .ux-hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ux-text-2); }
.ux-pack-neonrain.ux-on .ux-error { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ux-bad-text); }
.ux-pack-neonrain.ux-on .ux-error::before { content: '!'; display: inline-block; margin-right: 8px; padding: 0 6px; font: 700 12px/1.4 var(--ux-font-display); color: var(--ux-bad-ink); background: var(--ux-bad); transform: skewX(var(--nr-skew)); }

.ux-pack-neonrain.ux-on .ux-check { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; color: var(--ux-text); font-size: 16px; line-height: 1.3; }
.ux-pack-neonrain.ux-on .ux-check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  background: var(--nr-ground) no-repeat center; border: 1px solid var(--nr-ctl); border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ux-pack-neonrain.ux-on .ux-check input[type="radio"] { border-radius: 50%; }
.ux-pack-neonrain.ux-on .ux-check:hover input { border-color: var(--nr-b); }
.ux-pack-neonrain.ux-on .ux-check input:checked { border-color: var(--ux-accent); box-shadow: var(--ux-glow); }
.ux-pack-neonrain.ux-on .ux-check input[type="checkbox"]:checked { background-image: linear-gradient(var(--ux-accent) 0 0); background-size: 10px 10px; }
.ux-pack-neonrain.ux-on .ux-check input[type="checkbox"]:indeterminate { border-color: var(--ux-accent); background-image: linear-gradient(var(--ux-accent) 0 0); background-size: 10px 2px; }
.ux-pack-neonrain.ux-on .ux-check input[type="radio"]:checked { background-image: radial-gradient(circle closest-side, var(--ux-accent) 0 52%, transparent 58%); }
.ux-pack-neonrain.ux-on .ux-check:has(input:disabled) { color: var(--ux-muted); cursor: not-allowed; }
.ux-pack-neonrain.ux-on .ux-check input:disabled { border-style: dashed; border-color: var(--ux-line-strong); cursor: not-allowed; box-shadow: none; }
.ux-pack-neonrain.ux-on .ux-check input:disabled:checked { background-image: linear-gradient(var(--ux-muted) 0 0); }
.ux-pack-neonrain.ux-on .ux-check input[type="radio"]:disabled:checked { background-image: radial-gradient(circle closest-side, var(--ux-muted) 0 52%, transparent 58%); }

/* Switch: a 36 px tall hit area; the visible 24 px track is drawn inside a transparent 6 px border, the thumb is a
   square block that slides and lights up. */
.ux-pack-neonrain.ux-on .ux-switch {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-block; vertical-align: middle;
  width: 60px; height: 36px; margin: 0; cursor: pointer; border: 6px solid transparent; border-radius: 0;
  background: linear-gradient(var(--ux-muted) 0 0) no-repeat 3px 50% / 16px 16px, var(--nr-ground);
  background-clip: padding-box; background-origin: padding-box;
  box-shadow: inset 0 0 0 1px var(--nr-ctl);
  transition: background-position .2s ease, box-shadow .2s;
}
.ux-pack-neonrain.ux-on .ux-switch:checked {
  background: linear-gradient(var(--ux-accent) 0 0) no-repeat calc(100% - 3px) 50% / 16px 16px, linear-gradient(var(--nr-a-wash) 0 0), var(--nr-ground);
  background-clip: padding-box; background-origin: padding-box;
  box-shadow: inset 0 0 0 1px var(--ux-accent), var(--ux-glow);
}
.ux-pack-neonrain.ux-on .ux-switch:disabled { cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--ux-line-strong); opacity: 1; }
.ux-pack-neonrain.ux-on .ux-switch:disabled:checked { background: linear-gradient(var(--ux-muted) 0 0) no-repeat calc(100% - 3px) 50% / 16px 16px, var(--nr-ground); background-clip: padding-box; background-origin: padding-box; }

/* ------------------------------------------------------------------------------------------------ tabs */
.ux-pack-neonrain.ux-on .ux-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--nr-edge-b); }
.ux-pack-neonrain.ux-on .ux-tabs::-webkit-scrollbar { display: none; }
.ux-pack-neonrain.ux-on .ux-tab {
  flex: none; min-height: 42px; padding: 8px 16px; margin: 0 0 -1px; cursor: pointer; white-space: nowrap;
  font: 600 14px/1.2 var(--ux-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ux-text-2); background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  transition: color .15s, border-color .15s, background-color .15s;
}
.ux-pack-neonrain.ux-on .ux-tab:hover { color: var(--ux-text); background: var(--nr-wash); }
.ux-pack-neonrain.ux-on .ux-tab[aria-selected="true"] { color: var(--nr-c-text); border-bottom-color: var(--nr-c); background: linear-gradient(to top, var(--nr-c-wash), transparent 85%); }
.ux-pack-neonrain.ux-on .ux-tab:disabled { color: var(--ux-muted); cursor: not-allowed; background: transparent; }
.ux-pack-neonrain.ux-on [role="tabpanel"] { padding-top: 14px; }

/* ------------------------------------------------------------------------------------------------ dialog */
.ux-pack-neonrain.ux-on .ux-dialog {
  --nr-fe: var(--nr-edge-strong); --nr-ff: var(--ux-surface-2-solid);
  padding: 0; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px);
  color: var(--ux-text); overflow: visible;
}
.ux-pack-neonrain.ux-on .ux-dialog::backdrop { background: rgba(2, 2, 4, .78); background: var(--nr-backdrop, rgba(2, 2, 4, .78)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ux-pack-neonrain.ux-on .ux-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--ux-pad, 16px) 12px; border-bottom: 1px dashed var(--nr-edge-b); }
.ux-pack-neonrain.ux-on .ux-dialog-head :is(h1, h2, h3) { margin: 0; font: 700 22px/1.2 var(--ux-font-display); letter-spacing: .06em; text-transform: uppercase; text-shadow: var(--nr-split); }
.ux-pack-neonrain.ux-on .ux-dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 16px var(--ux-pad, 16px); max-height: calc(100dvh - 220px); overflow-y: auto; container-type: inline-size; }
.ux-pack-neonrain.ux-on .ux-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px var(--ux-pad, 16px) 16px; border-top: 1px dashed var(--nr-edge-b); }

/* ================================================================================================== pack extras */
/* nr-tag: a slanted neon label. Default = signal fill; .is-b line fill; .is-c highlight fill; .is-outline outline;
   tones fill with the status color. Dark or white ink is computed for each fill (4.5:1 or better). */
.ux-pack-neonrain.ux-on .nr-tag {
  --nr-tf: var(--ux-accent); --nr-tc: var(--ux-accent-ink); --nr-tb: var(--ux-accent);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 24px; padding: 3px 11px; margin: 0 4px;
  font: 700 12px/1.2 var(--ux-font-display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--nr-tc);
}
.ux-pack-neonrain.ux-on .nr-tag::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--nr-skew)); background: var(--nr-tf); border: 1px solid var(--nr-tb); }
.ux-pack-neonrain.ux-on .nr-tag.is-b { --nr-tf: var(--nr-b); --nr-tb: var(--nr-b); --nr-tc: var(--nr-b-ink); }
.ux-pack-neonrain.ux-on .nr-tag.is-c { --nr-tf: var(--nr-c); --nr-tb: var(--nr-c); --nr-tc: var(--nr-c-ink); }
.ux-pack-neonrain.ux-on .nr-tag.is-ok { --nr-tf: var(--ux-ok); --nr-tb: var(--ux-ok); --nr-tc: var(--ux-ok-ink); }
.ux-pack-neonrain.ux-on .nr-tag.is-warn { --nr-tf: var(--ux-warn); --nr-tb: var(--ux-warn); --nr-tc: var(--ux-warn-ink); }
.ux-pack-neonrain.ux-on .nr-tag.is-bad { --nr-tf: var(--ux-bad); --nr-tb: var(--ux-bad); --nr-tc: var(--ux-bad-ink); }
.ux-pack-neonrain.ux-on .nr-tag.is-info { --nr-tf: var(--ux-info); --nr-tb: var(--ux-info); --nr-tc: var(--ux-info-ink); }
.ux-pack-neonrain.ux-on .nr-tag.is-outline { --nr-tf: transparent; --nr-tb: var(--nr-edge-strong); --nr-tc: var(--ux-accent-text); }

/* nr-banner: a full-width neon strip (highlight fill, dark ink) with slanted ends, for one short line that must be
   seen: an overdue patch, a site-wide notice. Optional .nr-banner-tag inside is the inverted label. Tones recolor. */
.ux-pack-neonrain.ux-on .nr-banner {
  --nr-nf: var(--nr-c); --nr-nc: var(--nr-c-ink);
  position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 22px; margin: 0;
  font: 600 15px/1.35 var(--ux-font-display); letter-spacing: .02em; color: var(--nr-nc);
}
.ux-pack-neonrain.ux-on .nr-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--nr-nf); box-shadow: 0 0 var(--nr-light-blur) color-mix(in srgb, var(--nr-nf) 45%, transparent);
  clip-path: polygon(var(--nr-cut-sm) 0, 100% 0, calc(100% - var(--nr-cut-sm)) 100%, 0 100%);
}
.ux-pack-neonrain.ux-on .nr-banner-tag { padding: 2px 9px; font: 700 12px/1.3 var(--ux-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--nr-nf); background: var(--nr-nc); }
.ux-pack-neonrain.ux-on .nr-banner.is-a { --nr-nf: var(--ux-accent); --nr-nc: var(--ux-accent-ink); }
.ux-pack-neonrain.ux-on .nr-banner.is-ok { --nr-nf: var(--ux-ok); --nr-nc: var(--ux-ok-ink); }
.ux-pack-neonrain.ux-on .nr-banner.is-warn { --nr-nf: var(--ux-warn); --nr-nc: var(--ux-warn-ink); }
.ux-pack-neonrain.ux-on .nr-banner.is-bad { --nr-nf: var(--ux-bad); --nr-nc: var(--ux-bad-ink); }
.ux-pack-neonrain.ux-on .nr-banner.is-info { --nr-nf: var(--ux-info); --nr-nc: var(--ux-info-ink); }
/* A button inside a banner: dark ink outline on the fill. */
.ux-pack-neonrain.ux-on .nr-banner .ux-btn { --nr-btn-c: var(--nr-nc); --nr-btn-b: var(--nr-nc); --nr-btn-f: transparent; margin-left: auto; }
.ux-pack-neonrain.ux-on .nr-banner .ux-btn:hover { --nr-btn-f: var(--nr-nc); --nr-btn-c: var(--nr-nf); --nr-btn-g: 0 0 0 transparent; }
.ux-pack-neonrain.ux-on .nr-banner :focus-visible::before, .ux-pack-neonrain.ux-on .nr-banner .is-focus::before { outline-color: var(--nr-nc); }

/* nr-sign: a lit neon word for display (24 px and up). .is-b / .is-c change the tube color. */
.ux-pack-neonrain.ux-on .nr-sign {
  --nr-sc: var(--ux-accent-text); --nr-sg: var(--nr-a);
  display: inline-block; padding: 4px 12px; font: 700 28px/1.1 var(--ux-font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--nr-sc); border: 2px solid var(--nr-sg); border-radius: 0;
  text-shadow: 0 0 calc(var(--nr-light-blur) * .8) var(--nr-sg), 0 0 calc(var(--nr-light-blur) * 2) var(--nr-sg);
  box-shadow: 0 0 var(--nr-light-blur) var(--nr-sg), inset 0 0 var(--nr-light-blur) color-mix(in srgb, var(--nr-sg) 50%, transparent);
}
.ux-pack-neonrain.ux-on .nr-sign.is-b { --nr-sc: var(--nr-b-text); --nr-sg: var(--nr-b); }
.ux-pack-neonrain.ux-on .nr-sign.is-c { --nr-sc: var(--nr-c-text); --nr-sg: var(--nr-c); }
.ux-pack-neonrain.ux-on .nr-sign.is-sm { font-size: 20px; padding: 3px 10px; }

/* nr-glitch: the title's color split on any display text, and its 8-second jump when Title glitch is on. */
.ux-pack-neonrain.ux-on .nr-glitch { display: inline-block; text-shadow: var(--nr-split); }

/* nr-stripe: a diagonal hazard stripe (use on <hr> or an aria-hidden <div>). Highlight by default; tones recolor. */
.ux-pack-neonrain.ux-on .nr-stripe {
  --nr-sp: var(--nr-c);
  display: block; height: 10px; margin: 0; padding: 0; border: 0;
  background: repeating-linear-gradient(-45deg, var(--nr-sp) 0 10px, var(--nr-stripe-dark) 10px 20px);
  box-shadow: 0 0 var(--nr-light-blur) color-mix(in srgb, var(--nr-sp) 30%, transparent);
}
.ux-pack-neonrain.ux-on .nr-stripe.is-a { --nr-sp: var(--nr-a); }
.ux-pack-neonrain.ux-on .nr-stripe.is-warn { --nr-sp: var(--ux-warn); }
.ux-pack-neonrain.ux-on .nr-stripe.is-bad { --nr-sp: var(--ux-bad); }
.ux-pack-neonrain.ux-on .nr-stripe.is-thin { height: 6px; }

/* nr-frame: the panel frame (cut corners, neon edge, opaque fill) on any element, without panel layout. Tones and
   .is-b recolor the edge. Uses ::before and ::after. */
.ux-pack-neonrain.ux-on .nr-frame { display: block; padding: var(--ux-pad); }
.ux-pack-neonrain.ux-on .nr-frame.is-b { --nr-fe: var(--nr-edge-b); }
.ux-pack-neonrain.ux-on .nr-frame.is-ok { --nr-fe: var(--ux-ok); }
.ux-pack-neonrain.ux-on .nr-frame.is-warn { --nr-fe: var(--ux-warn); }
.ux-pack-neonrain.ux-on .nr-frame.is-bad { --nr-fe: var(--ux-bad); }
.ux-pack-neonrain.ux-on .nr-frame.is-info { --nr-fe: var(--ux-info); }

/* nr-readout: a big terminal number with its unit. */
.ux-pack-neonrain.ux-on .nr-readout { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ux-pack-neonrain.ux-on .nr-readout-value { font: 400 56px/1 var(--ux-font-mono); font-variant-numeric: tabular-nums; color: var(--ux-text); text-shadow: var(--nr-split); }
.ux-pack-neonrain.ux-on .nr-readout-unit { font: 600 13px/1.2 var(--ux-font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--ux-accent-text); }
.ux-pack-neonrain.ux-on .nr-readout.is-sm .nr-readout-value { font-size: 36px; }
.ux-pack-neonrain.ux-on .nr-readout:is(.is-ok, .is-warn, .is-bad, .is-info) .nr-readout-value { text-shadow: 0 0 var(--nr-light-blur) currentColor; }
.ux-pack-neonrain.ux-on .nr-readout.is-ok .nr-readout-value { color: var(--ux-ok-text); }
.ux-pack-neonrain.ux-on .nr-readout.is-warn .nr-readout-value { color: var(--ux-warn-text); }
.ux-pack-neonrain.ux-on .nr-readout.is-bad .nr-readout-value { color: var(--ux-bad-text); }
.ux-pack-neonrain.ux-on .nr-readout.is-info .nr-readout-value { color: var(--ux-info-text); }

/* ================================================================================================== Look drawer skin */
/* The pull tab is a small vertical neon sign; the drawer is an opaque raised panel with a lit signal edge. */
.ux-pack-neonrain.ux-on .ux-look-tab {
  isolation: isolate; color: var(--ux-accent-text); background: transparent; border: 0;
  font: 700 12px/1 var(--ux-font-display); letter-spacing: .3em; text-transform: uppercase;
  transition: color .15s, right .2s ease;
}
.ux-pack-neonrain.ux-on .ux-look-tab::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ux-surface-2-solid); border: 1px solid var(--nr-edge-strong); border-right: 0; box-shadow: var(--ux-glow);
}
.ux-pack-neonrain.ux-on .ux-look-tab:hover { color: var(--ux-text); }
.ux-pack-neonrain.ux-on .ux-look-tab:hover::before { border-color: var(--nr-c); box-shadow: var(--nr-glow-c); }
.ux-pack-neonrain.ux-on .ux-look-tab[aria-expanded="true"] { color: var(--nr-c-ink); }
.ux-pack-neonrain.ux-on .ux-look-tab[aria-expanded="true"]::before { background: var(--nr-c); border-color: var(--nr-c); }
.ux-pack-neonrain.ux-on .ux-look-drawer {
  color: var(--ux-text); font: 400 15px/1.45 var(--ux-font-body); letter-spacing: 0;
  background: linear-gradient(180deg, var(--nr-a-wash), transparent 140px), var(--ux-surface-2-solid);
  border-left: 2px solid var(--ux-accent); box-shadow: -8px 0 var(--nr-light-blur) color-mix(in srgb, var(--ux-accent) 22%, transparent), -24px 0 60px rgba(0, 0, 0, .6);
}
.ux-pack-neonrain.ux-on .ux-look-head { border-bottom: 1px dashed var(--nr-edge-b); }
.ux-pack-neonrain.ux-on .ux-look-title { font: 700 21px/1.1 var(--ux-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ux-text); text-shadow: var(--nr-split); }
.ux-pack-neonrain.ux-on :is(.ux-look-close, .ux-look-reset) {
  min-height: 38px; padding: 6px 14px; font: 600 13px/1.1 var(--ux-font-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ux-text-2); background: var(--nr-ground); border: 1px solid var(--nr-edge-b); border-radius: 0;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.ux-pack-neonrain.ux-on :is(.ux-look-close, .ux-look-reset):hover { color: var(--ux-text); border-color: var(--nr-b); box-shadow: var(--nr-glow-b); }
.ux-pack-neonrain.ux-on .ux-look-body { scrollbar-width: thin; scrollbar-color: var(--nr-edge-b) transparent; }
.ux-pack-neonrain.ux-on .ux-look-section-title {
  display: flex; align-items: center; gap: 10px; font: 700 13px/1.2 var(--ux-font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--nr-b-text);
}
.ux-pack-neonrain.ux-on .ux-look-section-title::after { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--nr-edge-b) 0 6px, transparent 6px 10px); }
.ux-pack-neonrain.ux-on .ux-look-label { font: 600 13px/1.3 var(--ux-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ux-muted); }
.ux-pack-neonrain.ux-on :is(.ux-look-card, .ux-look-seg-b, .ux-look-toggle) {
  color: var(--ux-text); background: var(--nr-ground); border: 1px solid var(--ux-line-strong); border-radius: 0;
  font-family: var(--ux-font-body); transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.ux-pack-neonrain.ux-on :is(.ux-look-card, .ux-look-seg-b, .ux-look-toggle):hover { border-color: var(--nr-b); background: linear-gradient(var(--nr-wash) 0 0), var(--nr-ground); }
.ux-pack-neonrain.ux-on :is(.ux-look-card, .ux-look-seg-b)[aria-pressed="true"] { border-color: var(--nr-c); background: linear-gradient(var(--nr-c-wash) 0 0), var(--nr-ground); box-shadow: inset 3px 0 0 var(--nr-c), var(--nr-glow-c); }
.ux-pack-neonrain.ux-on .ux-look-swatches { height: 8px; gap: 2px; }
.ux-pack-neonrain.ux-on .ux-look-swatches i { transform: skewX(var(--nr-skew)); }
.ux-pack-neonrain.ux-on .ux-look-card-name { font: 700 14px/1.2 var(--ux-font-display); letter-spacing: .1em; text-transform: uppercase; }
.ux-pack-neonrain.ux-on .ux-look-card-desc { font-size: 14px; line-height: 1.3; color: var(--ux-text-2); }
.ux-pack-neonrain.ux-on .ux-look-seg-b { min-height: 36px; font: 600 13px/1.1 var(--ux-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ux-text-2); }
.ux-pack-neonrain.ux-on .ux-look-seg-b[aria-pressed="true"] { color: var(--nr-c-text); }
.ux-pack-neonrain.ux-on .ux-look-value { font: 400 14px/1 var(--ux-font-mono); color: var(--nr-c-text); }
.ux-pack-neonrain.ux-on .ux-look-range { -webkit-appearance: none; appearance: none; height: 36px; margin: 0; background: transparent; cursor: pointer; }
.ux-pack-neonrain.ux-on .ux-look-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--nr-a), var(--nr-b)); }
.ux-pack-neonrain.ux-on .ux-look-range::-moz-range-track { height: 4px; background: var(--nr-edge-b); }
.ux-pack-neonrain.ux-on .ux-look-range::-moz-range-progress { height: 4px; background: var(--nr-a); }
.ux-pack-neonrain.ux-on .ux-look-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 22px; margin-top: -9px; border-radius: 0; transform: skewX(var(--nr-skew));
  background: var(--nr-c); border: 1px solid var(--nr-c-ink); box-shadow: var(--nr-glow-c);
}
.ux-pack-neonrain.ux-on .ux-look-range::-moz-range-thumb { width: 12px; height: 20px; border-radius: 0; background: var(--nr-c); border: 1px solid var(--nr-c-ink); box-shadow: var(--nr-glow-c); }
.ux-pack-neonrain.ux-on .ux-look-range:focus-visible { outline-offset: 0; }
.ux-pack-neonrain.ux-on .ux-look-toggle-name { font-size: 15px; }
.ux-pack-neonrain.ux-on .ux-look-toggle-state { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--ux-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ux-muted); }
.ux-pack-neonrain.ux-on .ux-look-toggle-state::before { content: ''; width: 10px; height: 10px; transform: skewX(var(--nr-skew)); border: 1px solid var(--ux-muted); }
.ux-pack-neonrain.ux-on .ux-look-toggle[aria-pressed="true"] { border-color: var(--nr-edge-strong); }
.ux-pack-neonrain.ux-on .ux-look-toggle[aria-pressed="true"] .ux-look-toggle-state { color: var(--nr-c-text); }
.ux-pack-neonrain.ux-on .ux-look-toggle[aria-pressed="true"] .ux-look-toggle-state::before { border-color: var(--nr-c); background: var(--nr-c); box-shadow: var(--nr-glow-c); }
.ux-pack-neonrain.ux-on .ux-look-hint { font-size: 14px; line-height: 1.45; color: var(--ux-text-2); }
.ux-pack-neonrain.ux-on .ux-look-foot { border-top: 1px dashed var(--nr-edge-b); }
.ux-pack-neonrain.ux-on .ux-look-report { font: 400 14px/1.4 var(--ux-font-mono); color: var(--ux-muted); }

/* ================================================================================================== compact */
.ux-pack-neonrain.ux-on.ux-compact { font-size: 15px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-shell { padding: clamp(12px, 2vw, 20px); }
.ux-pack-neonrain.ux-on.ux-compact .ux-header { padding-bottom: 10px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-title { font-size: clamp(28px, 3.6vw, 38px); }
.ux-pack-neonrain.ux-on.ux-compact .ux-clock { font-size: 21px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-nav ul { gap: 6px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-nav-item { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-panel { gap: 10px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-stat { padding: 10px 12px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-stat-value { font-size: clamp(24px, 15cqi, 30px); }
.ux-pack-neonrain.ux-on.ux-compact .ux-table td { padding-top: 6px; padding-bottom: 6px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-list > li { padding-top: 6px; padding-bottom: 6px; }
.ux-pack-neonrain.ux-on.ux-compact :is(.ux-btn, .ux-tab) { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.ux-pack-neonrain.ux-on.ux-compact :is(.ux-input, .ux-select, .ux-search) { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
.ux-pack-neonrain.ux-on.ux-compact :is(.ux-text, .ux-textarea, .ux-check) { font-size: 15px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-h1 { font-size: 30px; }
.ux-pack-neonrain.ux-on.ux-compact .ux-h2 { font-size: 22px; }
.ux-pack-neonrain.ux-on.ux-compact .nr-readout-value { font-size: 46px; }

/* ================================================================================================== motion */
/* Everything that moves lives here, behind prefers-reduced-motion: no-preference AND its own option. With reduced
   motion the page is the same finished look, still: no rain, no grain, no glitch, no hum, no start-up. */
@media (prefers-reduced-motion: no-preference) {
  /* Rain: Drizzle is slower and fainter than Storm. 720 px per loop (every tile height divides it). */
  .ux-pack-neonrain.ux-on:is(.ux-rain-drizzle, .ux-rain-storm)::before { display: block; will-change: transform; animation: nr-rain 2.6s linear infinite; opacity: .5; }
  .ux-pack-neonrain.ux-on.ux-rain-storm::before { animation-duration: 1.25s; opacity: .85; }
  /* Grain is still; it is grouped here because every effect is off when the system asks for reduced motion. */
  .ux-pack-neonrain.ux-on.ux-grain::after { display: block; }

  /* Title glitch: one jump every 8 s (two changes, 0.2 s apart). Never more than 3 changes a second. */
  .ux-pack-neonrain.ux-on.ux-glitch :is(.ux-title, .nr-glitch) { animation: nr-glitch 8s steps(1, end) infinite; }
  /* Ambient motion: a slow neon hum (5 s fade) on the title and the current nav item, a slow pulse on bad lights,
     the indeterminate progress sweep. */
  .ux-pack-neonrain.ux-on.ux-motion .ux-title { animation: nr-hum 5s ease-in-out infinite; }
  .ux-pack-neonrain.ux-on.ux-motion.ux-glitch .ux-title { animation: nr-glitch 8s steps(1, end) infinite, nr-hum 5s ease-in-out infinite; }
  .ux-pack-neonrain.ux-on.ux-motion .ux-nav-item:is([aria-current="page"], .is-active)::before { animation: nr-hum 5s ease-in-out infinite; }
  .ux-pack-neonrain.ux-on.ux-motion .ux-light.is-bad { animation: nr-pulse 2s ease-in-out infinite; }
  .ux-pack-neonrain.ux-on.ux-motion .ux-progress:indeterminate { animation: nr-indet 1.6s ease-in-out infinite; }

  /* Start-up: the neon powers on. Only while the core's .ux-boot class is on (~1.6 s, once per visit). Each piece
     fades in once; nothing blinks. Nothing is hidden at rest. */
  .ux-pack-neonrain.ux-on.ux-boot .ux-header::after { animation: nr-draw .8s cubic-bezier(.2, .7, .2, 1) both; }
  .ux-pack-neonrain.ux-on.ux-boot.ux-boot .ux-title { animation: nr-converge 1s .1s cubic-bezier(.2, .7, .2, 1) both; }   /* outranks glitch + hum */
  .ux-pack-neonrain.ux-on.ux-boot :is(.ux-brand, .ux-clock) { animation: nr-fade .6s .2s both; }
  .ux-pack-neonrain.ux-on.ux-boot .ux-nav li { animation: nr-light .5s calc(.25s + var(--nr-i, 0) * 90ms) both; }
  .ux-pack-neonrain.ux-on.ux-boot :is(.ux-panel, .ux-stat, .ux-alert, .nr-banner, .ux-empty) { animation: nr-slide .6s calc(.3s + var(--nr-i, 0) * 70ms) cubic-bezier(.2, .7, .2, 1) both; }
  .ux-pack-neonrain.ux-on.ux-boot :is(.ux-nav ul, .ux-main, .ux-stack, .ux-grid, .ux-grid-2, .ux-grid-3, .ux-grid-4, .ux-row) > :nth-child(2) { --nr-i: 1; }
  .ux-pack-neonrain.ux-on.ux-boot :is(.ux-nav ul, .ux-main, .ux-stack, .ux-grid, .ux-grid-2, .ux-grid-3, .ux-grid-4, .ux-row) > :nth-child(3) { --nr-i: 2; }
  .ux-pack-neonrain.ux-on.ux-boot :is(.ux-nav ul, .ux-main, .ux-stack, .ux-grid, .ux-grid-2, .ux-grid-3, .ux-grid-4, .ux-row) > :nth-child(4) { --nr-i: 3; }
  .ux-pack-neonrain.ux-on.ux-boot :is(.ux-nav ul, .ux-main, .ux-stack, .ux-grid, .ux-grid-2, .ux-grid-3, .ux-grid-4, .ux-row) > :nth-child(5) { --nr-i: 4; }
  .ux-pack-neonrain.ux-on.ux-boot :is(.ux-nav ul, .ux-main, .ux-stack, .ux-grid, .ux-grid-2, .ux-grid-3, .ux-grid-4, .ux-row) > :nth-child(n+6) { --nr-i: 5; }

  .ux-pack-neonrain.ux-on .ux-toast { animation: nr-slide .35s cubic-bezier(.2, .7, .2, 1) both; }
  .ux-pack-neonrain.ux-on .ux-dialog[open] { animation: nr-slide .3s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .ux-pack-neonrain.ux-on :is(.ux-switch, .ux-look-tab, .ux-btn, .ux-nav-item, .ux-tab) { transition: none; }
  .ux-pack-neonrain.ux-on :is(.ux-btn, .ux-nav-item)::before { transition: none; }
}

@keyframes nr-rain { from { transform: rotate(7deg) translate3d(0, 0, 0); } to { transform: rotate(7deg) translate3d(0, 720px, 0); } }
@keyframes nr-glitch {
  0% { transform: none; text-shadow: var(--nr-split); }
  95% { transform: translate(3px, -1px) skewX(-8deg); text-shadow: 5px 0 0 var(--nr-a), -4px 0 0 var(--nr-b); }
  97.5%, 100% { transform: none; text-shadow: var(--nr-split); }
}
@keyframes nr-hum { 0%, 100% { filter: none; } 50% { filter: brightness(1.18) saturate(1.15); } }
@keyframes nr-pulse { 50% { opacity: .55; } }
@keyframes nr-indet { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } }
@keyframes nr-draw { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes nr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nr-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes nr-converge {
  from { opacity: 0; letter-spacing: .14em; text-shadow: 16px 0 0 var(--nr-a), -16px 0 0 var(--nr-b); }
  40% { opacity: 1; }
  to { opacity: 1; letter-spacing: .06em; text-shadow: var(--nr-split); }
}
@keyframes nr-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media print {
  .ux-pack-neonrain.ux-on { background: #fff; color: #000; }
  .ux-pack-neonrain.ux-on::before, .ux-pack-neonrain.ux-on::after { display: none; }
}