/* ==========================================================================
   rspnew_glass.css — the RSPNEW "Glass · Spatial" design system (light + dark)
   Source of truth for the page-by-page modernization off Bootstrap 3.
   Aesthetic lifted from the "Glass · Spatial" specimen (visionOS / Apple Music):
   frosted translucent panels floating over a vivid gradient, depth via blur.
   Classes are prefixed `rg-` so they never collide with legacy BS3 during the
   transition. Theme = prefers-color-scheme, overridable by html[data-theme].
   ========================================================================== */

:root{
  color-scheme:light dark;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,'Cascadia Mono',Consolas,monospace;
  --nav-h:60px;
  --r-card:16px; --r-ctl:10px; --r-field:11px; --r-pill:999px;
  /* user glass tuning (My Account → Appearance, per-device): opacity/blur multipliers.
     Applied to the GLASS token alphas + backdrop blur below; skins redefine the tokens
     with plain values after these blocks, so graphite/sandstone/classic are unaffected. */
  --glass-op:1; --glass-blur-f:1;
  --blur:calc(20px * var(--glass-blur-f));
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --trans:.2s cubic-bezier(.4,0,.2,1);
  --maxw:1200px;
}

/* Global density pass — desktop-only zoom (fine-pointer + hover gate so touch tablets render
   1:1 — Safari's `zoom` interacts badly with position:fixed + backdrop-filter on iPad).
   .8 → .9 on 7/14: floor feedback was "fonts hard to read / information overload" — at .8 an
   11.5px label rendered ~9px effective. .9 keeps some density without the squint. */
@media (min-width:48em) and (hover:hover) and (pointer:fine){ :root{ zoom:.9; } }

/* ---------------- DARK (default via color-scheme, canonical spec) ---------------- */
:root{
  --mesh:
    radial-gradient(80% 90% at 10% 0%, #3b1e6e 0%, transparent 55%),
    radial-gradient(90% 90% at 100% 20%, #0e5a7a 0%, transparent 50%);
  --bg:#0a0a14;
  --glass:rgba(12,15,28,calc(.32 * var(--glass-op)));
  --glass-2:rgba(12,15,28,calc(.50 * var(--glass-op)));
  --glass-hover:rgba(30,34,54,calc(.48 * var(--glass-op)));
  --glass-3:rgba(20,24,42,calc(.58 * var(--glass-op)));   /* opaque table-header surface (was undefined → hardcoded dark fallback everywhere) */
  --table:rgba(16,19,36,calc(.42 * var(--glass-op)));     /* opaque table body surface so rows stay legible over the photo bg */
  --hair:rgba(255,255,255,.12);
  --hair-strong:rgba(255,255,255,.18);
  --ink:#eef0ff;
  --ink-2:#b7bce0;
  --mut:#a9afdb;
  --faint:#7a80ab;
  /* brand indigo (matches the primary-button gradient); the old cyan endpoint (#8ee9ff) read as a
     washed-out green on active nav / avatars / icon badges / accent-gradient buttons+text. */
  --accent-grad:linear-gradient(120deg,#9ea1ff,#6d6fff);
  --accent:#aab0ff;
  --on-accent:#fff;   /* white text on the indigo accent (was dark text on the old pale-cyan accent) */
  --focus:#8f92ff;
  --shadow:0 12px 40px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  /* status: text · tint · edge */
  --hot:#ffc4b0; --hot-bg:rgba(255,110,80,.18); --hot-edge:rgba(255,110,80,.32);
  --you:#c8ccff; --you-bg:rgba(130,120,255,.20); --you-edge:rgba(130,120,255,.36);
  --warn:#ffdc9a; --warn-bg:rgba(230,180,70,.16); --warn-edge:rgba(230,180,70,.30);
  --ok:#9ff0c0;  --ok-bg:rgba(60,200,130,.16);   --ok-edge:rgba(60,200,130,.30);
  --info:#a9d6ff; --info-bg:rgba(90,160,255,.16); --info-edge:rgba(90,160,255,.30);
  --bad:#ffb0a8;  --bad-bg:rgba(255,90,80,.18);   --bad-edge:rgba(255,90,80,.34);
}
:root[data-theme="dark"]{ color-scheme:dark }

/* ---------------- LIGHT (frosted-light; modeled on the bento light-glass) ---------------- */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --mesh:
      radial-gradient(80% 90% at 8% 0%, #d9ccff 0%, transparent 55%),
      radial-gradient(90% 90% at 100% 15%, #c3e8f6 0%, transparent 52%);
    --bg:#eef1f7;
    --glass:rgba(255,255,255,calc(.70 * var(--glass-op)));
    --glass-2:rgba(255,255,255,calc(.80 * var(--glass-op)));
    --glass-hover:rgba(255,255,255,calc(.88 * var(--glass-op)));
    --glass-3:rgba(255,255,255,calc(.70 * var(--glass-op)));
    --table:rgba(255,255,255,calc(.55 * var(--glass-op)));
    --hair:rgba(20,22,45,.09);
    --hair-strong:rgba(20,22,45,.14);
    --ink:#1a1c2a;
    --ink-2:#45485f;
    --mut:#666a85;
    --faint:#9498b0;
    --accent-grad:linear-gradient(120deg,#5a5cf0,#4338ca);
    --accent:#4f46e5;
    --on-accent:#ffffff;
    --focus:#4f46e5;
    --shadow:0 1px 2px rgba(20,22,45,.05),0 14px 36px rgba(20,22,45,.12);
    --shadow-sm:0 1px 2px rgba(20,22,45,.05),0 4px 14px rgba(20,22,45,.08);
    --hot:#c93a12;  --hot-bg:rgba(255,120,80,.16);  --hot-edge:rgba(201,58,18,.28);
    --you:#4438b8;  --you-bg:rgba(99,91,255,.14);   --you-edge:rgba(79,70,229,.34);
    --warn:#8a6100; --warn-bg:rgba(230,170,40,.18); --warn-edge:rgba(138,97,0,.26);
    --ok:#1f7a49;   --ok-bg:rgba(45,160,95,.15);    --ok-edge:rgba(31,122,73,.28);
    --info:#0b6ea8; --info-bg:rgba(30,150,215,.14); --info-edge:rgba(11,110,168,.28);
    --bad:#c62f2f;  --bad-bg:rgba(230,60,60,.14);   --bad-edge:rgba(198,47,47,.30);
  }
}
/* explicit light override (toggle) */
:root[data-theme="light"]{
  color-scheme:light;
  --mesh:
    radial-gradient(80% 90% at 8% 0%, #d9ccff 0%, transparent 55%),
    radial-gradient(90% 90% at 100% 15%, #c3e8f6 0%, transparent 52%);
  --bg:#eef1f7;
  --glass:rgba(255,255,255,calc(.70 * var(--glass-op))); --glass-2:rgba(255,255,255,calc(.80 * var(--glass-op))); --glass-hover:rgba(255,255,255,calc(.88 * var(--glass-op)));
  --glass-3:rgba(255,255,255,calc(.70 * var(--glass-op))); --table:rgba(255,255,255,calc(.55 * var(--glass-op)));
  --hair:rgba(20,22,45,.09); --hair-strong:rgba(20,22,45,.14);
  --ink:#1a1c2a; --ink-2:#45485f; --mut:#666a85; --faint:#9498b0;
  --accent-grad:linear-gradient(120deg,#5a5cf0,#4338ca); --accent:#4f46e5; --on-accent:#fff; --focus:#4f46e5;
  --shadow:0 1px 2px rgba(20,22,45,.05),0 14px 36px rgba(20,22,45,.12);
  --shadow-sm:0 1px 2px rgba(20,22,45,.05),0 4px 14px rgba(20,22,45,.08);
  --hot:#c93a12;--hot-bg:rgba(255,120,80,.16);--hot-edge:rgba(201,58,18,.28);
  --you:#4438b8;--you-bg:rgba(99,91,255,.14);--you-edge:rgba(79,70,229,.34);
  --warn:#8a6100;--warn-bg:rgba(230,170,40,.18);--warn-edge:rgba(138,97,0,.26);
  --ok:#1f7a49;--ok-bg:rgba(45,160,95,.15);--ok-edge:rgba(31,122,73,.28);
  --info:#0b6ea8;--info-bg:rgba(30,150,215,.14);--info-edge:rgba(11,110,168,.28);
  --bad:#c62f2f;--bad-bg:rgba(230,60,60,.14);--bad-edge:rgba(198,47,47,.30);
}

/* ---------------- RESERVED SEMANTIC TOKENS (added for the GROUND skin, 2026-07-24) --------
   Four roles that the generic status tokens above cannot express, because they are about
   MEANING rather than severity:
     --live   the one live action on a screen ("Next")
     --paid   distance to being cleared for the phones — the only thing that means MONEY
     --done   completed work; deliberately colourless, so colour is spent on what remains
     --retry  a refusal that should be re-attempted; never alarm red
   Defined ONCE here as var() aliases onto the existing contract. Custom properties are
   substituted at computed-value time ON :root, so a skin that re-values --warn/--hot/--mut
   automatically re-values --paid/--retry/--done too — which means graphite, sandstone and
   classic gain the vocabulary with ZERO visual change and no edits to their own blocks.
   Ground overrides these four with literal values (see its block below); that is the whole
   point of the skin. Pages should prefer .rg-paid/.rg-done/.rg-retry/.rg-live (bottom of
   this file) over raw tokens, because those classes colour a span that already carries its
   word — colour never carries meaning alone. */
:root{
  --live:var(--accent);  --live-bg:var(--you-bg);   --live-edge:var(--you-edge);
  --paid:var(--warn);    --paid-bg:var(--warn-bg);  --paid-edge:var(--warn-edge);
  --done:var(--mut);     --done-bg:var(--glass-2);  --done-edge:var(--hair);
  --retry:var(--hot);    --retry-bg:var(--hot-bg);  --retry-edge:var(--hot-edge);
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body.rg{
  min-height:100vh; min-height:100dvh;
  font-family:var(--sans);
  font-size:15.5px; line-height:1.6;
  color:var(--ink);
  background:var(--mesh),var(--bg);   /* mesh kept for standalone (no .rg-bg) pages; attachment:fixed dropped (iOS Safari bug) */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* iOS-safe pinned background: a fixed layer instead of `background-attachment:fixed`
   (which iOS Safari ignores/mis-sizes → the whole page looked broken on iPad).
   Default = theme mesh; the shell overrides `background-image` inline with the photo when set.
   (url() lives in inline style on the element itself — NOT in a custom property, whose relative
   url resolves against the wrong base and 404s.) */
.rg-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-color:var(--bg); background-image:var(--mesh);
  background-size:cover; background-position:center; background-repeat:no-repeat}
/* dynamic-background cross-fade layer (rspnew_dynbg.js): stacked over .rg-bg, faded in
   with the next time-of-day frame, then the base layer adopts it and this one hides */
.rg-bg2{opacity:0;transition:opacity 1.4s ease;background-color:transparent}
.rg-bg2.show{opacity:1}
/* text links only — never repaint button labels (legacy .btn* or system .rg-btn*),
   which carry their own on-accent color. Without the :not(), .rg a (0,1,1) beat
   .btn-primary (0,1,0) and forced --accent onto solid-accent buttons → indigo-on-indigo
   (invisible) in light mode. */
.rg a:not([class*="btn"]){color:var(--accent);text-decoration:none}
.rg a:not([class*="btn"]):hover{text-decoration:underline}
.rg ::selection{background:var(--you-bg);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.rg *{animation:none!important;transition:none!important}}

.rg-shell{max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 24px) 24px 80px}
.rg-h1{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
/* hero icons were set flush against the title text (fact_checkReview Your Deal) */
.rg-h1 .material-icons,.rg-h1 .material-symbols-outlined{margin-right:10px;vertical-align:-3px}
.rg-h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0}
.rg-sub{color:var(--ink-2);margin:0}
.rg-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.rg-mut{color:var(--mut)} .rg-num{font-variant-numeric:tabular-nums}

/* ---------------- glass surfaces ---------------- */
.rg-card,.rg-panel{
  background:var(--glass);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  /* STRONG frost (matches the sidebar .rg-glass): heavy blur + saturation turns the busy photo behind
     the glass into a soft abstract wash, so content reads while the surface stays translucent glass —
     this is the design-correct answer to "washed out", NOT making panels opaque. */
  -webkit-backdrop-filter:blur(calc(var(--blur) + 10px)) saturate(1.6); backdrop-filter:blur(calc(var(--blur) + 10px)) saturate(1.6);
  box-shadow:var(--shadow);
}
.rg-card{padding:var(--space-5)}
.rg-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--space-4)}

/* ---------------- top nav ---------------- */
.rg-nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;
  display:flex;align-items:center;gap:18px;padding:0 24px;
  background:var(--glass-2);border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
}
.rg-nav .rg-brand{font-weight:800;letter-spacing:-.02em;font-size:17px}
.rg-nav a{color:var(--ink-2);font-weight:500;font-size:14px}
.rg-nav a:hover,.rg-nav a.active{color:var(--ink);text-decoration:none}
.rg-nav .rg-spacer{flex:1}

/* ---------------- buttons ---------------- */
.rg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;
  padding:11px 18px;border-radius:var(--r-ctl);border:1px solid var(--hair-strong);
  background:var(--glass-2);color:var(--ink);
  /* PERF: no backdrop-filter on buttons — a 10px blur behind a 38px control is imperceptible,
     but it made EVERY button its own GPU compositing layer, re-blurred on every scroll frame. */
  transition:transform var(--trans),background var(--trans),border-color var(--trans);
}
.rg-btn:hover{background:var(--glass-hover);text-decoration:none;transform:translateY(-1px)}
/* light mode: --glass-hover is near-opaque white, which washed the 14%-alpha hairline
   border out on hover (viewdeal action modal) — hold the edge with a stronger border */
:root[data-theme="light"] .rg-btn:hover{border-color:rgba(20,22,45,.30)}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .rg-btn:hover{border-color:rgba(20,22,45,.30)}
}
.rg-btn:active{transform:translateY(0)}
.rg-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rg-btn-primary{border:0;color:var(--on-accent);background:var(--accent-grad);box-shadow:var(--shadow-sm)}
.rg-btn-primary:hover{filter:brightness(1.05);background:var(--accent-grad)}
.rg-btn-ghost{background:transparent}
.rg-btn-sm{padding:7px 13px;font-size:13.5px}
.rg-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
/* keep glyphs proportional to the button (Material Icons default to 24px otherwise) */
.rg-btn .material-icons,.rg-btn .material-symbols-outlined{font-size:18px;line-height:1}
.rg-btn-sm .material-icons,.rg-btn-sm .material-symbols-outlined{font-size:16px}
/* anchor-based buttons must use the button's text color (not link accent) + never underline */
a.rg-btn,a.rg-btn:hover{color:var(--ink);text-decoration:none}
a.rg-btn-primary,a.rg-btn-primary:hover{color:var(--on-accent)}
a.rg-btn-danger,a.rg-btn-danger:hover{color:#fff}
a.rg-btn-success,a.rg-btn-success:hover{color:#04150d}
a.rg-btn-warning,a.rg-btn-warning:hover{color:#1f1400}
/* whole-card anchor components keep their own text color (not the link accent) */
a.rg-tile,a.ds-room,a.ds-link{color:inherit}
/* dark mode: SOLID glass buttons (were see-through over the photo) + vivid primary (was pale pastel) */
:root[data-theme="dark"] .rg-btn:not(.rg-btn-primary):not(.rg-btn-warning):not(.rg-btn-success):not(.rg-btn-danger){background:rgba(38,42,64,.92);border-color:rgba(255,255,255,.14);color:var(--ink)}
:root[data-theme="dark"] .rg-btn-primary{background:linear-gradient(120deg,#6d6fff,#5646e6);color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rg-btn:not(.rg-btn-primary):not(.rg-btn-warning):not(.rg-btn-success):not(.rg-btn-danger){background:rgba(38,42,64,.92);border-color:rgba(255,255,255,.14);color:var(--ink)}
  :root:not([data-theme="light"]) .rg-btn-primary{background:linear-gradient(120deg,#6d6fff,#5646e6);color:#fff}
}

/* ---------------- fields ---------------- */
.rg-field{margin-bottom:var(--space-4)}
.rg-label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.rg-input,.rg-select,.rg-textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:12px 14px;border-radius:var(--r-field);
  background:var(--glass);border:1px solid var(--hair-strong);
  /* PERF: no backdrop-filter on inputs (myaccount alone had 16 of them). */
  transition:border-color var(--trans),background var(--trans);
}
.rg-input::placeholder,.rg-textarea::placeholder{color:var(--faint)}
.rg-input:focus,.rg-select:focus,.rg-textarea:focus{
  outline:none;border-color:var(--focus);background:var(--glass-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent);
}

/* ---------------- pills / badges ---------------- */
.rg-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid transparent}
.rg-pill.hot{color:var(--hot);background:var(--hot-bg);border-color:var(--hot-edge)}
.rg-pill.you{color:var(--you);background:var(--you-bg);border-color:var(--you-edge)}
.rg-pill.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-edge)}
.rg-pill.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-edge)}
.rg-pill.info{color:var(--info);background:var(--info-bg);border-color:var(--info-edge)}
.rg-pill.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-edge)}

/* ---------------- stat tiles ---------------- */
.rg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.rg-stat{background:var(--glass-2);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:16px;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.rg-stat .k{font-size:13px;color:var(--mut);margin-bottom:6px;font-weight:600;letter-spacing:.02em}
.rg-stat .v{font-size:24px;font-weight:700;letter-spacing:-.02em}
.rg-stat .v small{font-size:12.5px;font-weight:600;margin-left:5px;color:var(--ok)}

/* ---------------- table ---------------- */
.rg-table-wrap{background:var(--table);border:1px solid var(--hair);border-radius:var(--r-card);
  overflow:hidden;-webkit-backdrop-filter:blur(calc(var(--blur) + 8px)) saturate(1.5);backdrop-filter:blur(calc(var(--blur) + 8px)) saturate(1.5)}
.rg-table{width:100%;border-collapse:collapse;font-size:14.5px}
.rg-table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mut);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--hair)}
.rg-table td{padding:12px 16px;border-top:1px solid var(--hair);color:var(--ink-2)}
.rg-table tbody tr:hover{background:var(--glass-hover)}
.rg-table tbody tr:first-child td{border-top:0}

/* ---------------- alerts ---------------- */
.rg-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-radius:var(--r-ctl);
  font-size:14px;border:1px solid var(--hair-strong);background:var(--glass-2)}   /* PERF: blur dropped */
.rg-alert.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-edge)}
.rg-alert.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-edge)}
.rg-alert.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-edge)}

/* ---------------- theme toggle button ---------------- */
.rg-theme-btn{width:38px;height:38px;display:inline-grid;place-items:center;cursor:pointer;
  border-radius:var(--r-ctl);border:1px solid var(--hair-strong);background:var(--glass);color:var(--ink);
  font-size:16px;line-height:1}   /* PERF: blur dropped */
.rg-theme-btn:hover{background:var(--glass-hover)}

.rg-hide{display:none!important}
@media (max-width:640px){.rg-shell{padding:calc(var(--nav-h) + 16px) 14px 60px}.rg-stats{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   LIQUID GLASS — real SVG refraction, opt-in via .rg-liquid, PERF-BUDGETED.
   Use ONLY on hero/nav/modal surfaces (never table rows or scroll containers).
   The per-element displacement filter is injected + wired by rspnew_liquid.js:
     · Chromium  → element gets `backdrop-filter: … url(#id)` (refracts LIVE backdrop)
     · Safari/FF → a `.rg-refract` child copies the mesh + `filter:url(#id)` refracts it
   The rim-light + sheen below are pure box-shadow/gradient (GPU-cheap) and give the
   "liquid" read to the MANY non-hero surfaces at zero filter cost.
   ========================================================================== */
.rg-liquid{position:relative;contain:layout paint;background:var(--glass);
  box-shadow:var(--shadow),inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 1px 12px rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.12)}
:root[data-theme="light"] .rg-liquid{box-shadow:var(--shadow),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,22,45,.06)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .rg-liquid{box-shadow:var(--shadow),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,22,45,.06)}}
/* SPECULAR SHINE — top-left hotspot + diagonal gloss + a glint that sweeps on hover */
.rg-liquid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:
    radial-gradient(130% 85% at 12% -15%,rgba(255,255,255,.58),rgba(255,255,255,.14) 20%,transparent 46%),
    linear-gradient(125deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 24%,transparent 40%),
    linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 49%,transparent 57%);
  background-size:auto,auto,260% 100%;background-position:0 0,0 0,115% 0;
  mix-blend-mode:screen;opacity:.92;transition:background-position .6s ease,opacity .3s}
.rg-liquid:hover::after{background-position:0 0,0 0,-30% 0;opacity:1}
/* Safari/FF refraction copy-layer (JS injects the div + sets its filter) */
.rg-liquid>.rg-refract{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:var(--mesh),var(--ground);background-size:cover;background-position:center}

/* cheap universal "liquid" lift on ordinary glass — no filter cost */
.rg-card,.rg-stat,.rg-nav{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.26)}
.rg-sheen{position:relative;overflow:hidden}
.rg-sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.16),transparent 44%);mix-blend-mode:screen}

/* ---- accessibility / fallback ladder ---- */
@media (prefers-reduced-motion:reduce){.rg-liquid{--rg-scale:0}}
@media (prefers-reduced-transparency:reduce){
  .rg-card,.rg-stat,.rg-nav,.rg-liquid{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--glass-2)!important}
  .rg-liquid::after,.rg-liquid>.rg-refract,.rg-sheen::after{display:none!important}
}
@media (prefers-contrast:more){
  .rg-card,.rg-stat,.rg-nav,.rg-liquid{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--glass-2)!important;border-color:var(--hair2)!important}
}
@media (forced-colors:active){
  .rg-card,.rg-stat,.rg-nav,.rg-liquid{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important;forced-color-adjust:none}
  .rg-liquid::after,.rg-liquid>.rg-refract,.rg-sheen::after{display:none!important}
}
/* engines with NO backdrop-filter at all → solid tinted panel */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rg-card,.rg-stat,.rg-nav,.rg-liquid{background:var(--glass-2)}
}

/* ============ RESPONSIVE + TOUCH (research-backed: WCAG 2.5.5, iOS zoom, safe-area) ============ */
.rg input,.rg select,.rg textarea,.rg-input,.rg-select,.rg-textarea{font-size:16px}  /* >=16px: no iOS zoom-on-focus */
@media (pointer:coarse){
  .rg-btn,.rg-btn-sm,.rg-nav a,.rg input,.rg select,.rg textarea,.rg-theme-btn{min-height:44px}
}
/* PERF: phones pay ~DPR² per blurred pixel (DPR 3 ≈ 9× a 1× desktop) and client GPU is already
   the fleet bottleneck — cut the blur radius on small touch screens (cost falls ~quadratically).
   Perf-lite/'full' overrides and the non-glass skins (which zero blur themselves) are untouched. */
@media (pointer:coarse) and (max-width:820px){ :root{ --glass-blur-f:.4 } }
/* one unwrapped DataTable must never hijack the page's horizontal scroll */
.dataTables_wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* phones: a sticky first column pins an opaque strip over much of the viewport while the user
   pans a wide table — release it there (the cheap, useful sticky THEAD stays) */
@media (max-width:520px){
  .rg-table td:first-child,.rg-table th:first-child{position:static;background:none}
}
/* horizontal-scroll table region: preserves <table> semantics + sticky header/first column */
.rg-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.rg-table-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* PERF: sticky header is OPAQUE, never blurred. A backdrop-filter on a position:sticky element
   over an overflow:auto container forces a backdrop re-snapshot + re-blur on EVERY scroll frame
   and can't be promoted to a static layer — this was the "scrolling is molasses" cause. */
.rg-table thead th{position:sticky;top:0;z-index:2;
  /* OPAQUE: --glass-3 is translucent in the glass skin (rgba ~.58), so without the blur the rows
     would scroll through the header. Compositing it over --bg makes it solid AND theme-aware. */
  background:linear-gradient(var(--glass-3),var(--glass-3)),var(--bg);
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* The sticky FIRST COLUMN must be opaque for the same reason (it scrolls horizontally over the rows),
   and note `th:first-child` (0,2,1) out-specifies `thead th` (0,1,2) — so the corner cell takes its
   background from HERE, not from the rule above. Both must therefore be composited opaque. */
.rg-table td:first-child,.rg-table th:first-child{position:sticky;left:0;z-index:1;
  background:linear-gradient(var(--glass-3),var(--glass-3)),var(--bg)}
.rg-table thead th:first-child{z-index:3}   /* corner cell sits above both sticky axes */

/* ---- Shared opaque table surface for DataTables pages (theme-aware; fixes light-mode washout).
   The table element gets an opaque --table bg so per-page `tbody tr{background:transparent}` rows
   still read cleanly over the busy photo background, in BOTH light and dark. ---- */
table.dataTable,.rg-main table.dataTable{background:var(--table)}
.rg-main table.dataTable thead th,table.dataTable thead th{background:var(--glass-3)}
/* Kill DataTables sort-arrow sprites + ::before/::after unicode indicators globally (they render as
   broken/purple triangle artifacts on the dark glass headers — first killed per-page on payroll). */
table.dataTable thead th.sorting,table.dataTable thead th.sorting_asc,table.dataTable thead th.sorting_desc{background-image:none !important}
table.dataTable thead th.sorting::before,table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,table.dataTable thead th.sorting_desc::after{display:none !important;content:"" !important}
/* DataTables chrome contrast baseline (info/length/pagination were faint on the dark glass) */
.dataTables_info,.dataTables_length,.dataTables_length label,.dataTables_filter,.dataTables_filter label{color:var(--ink-2)}
.dataTables_paginate .paginate_button{color:var(--ink-2) !important}
.dataTables_paginate .paginate_button.current,.dataTables_paginate .paginate_button.current:hover{color:var(--on-accent) !important;background:var(--accent-grad) !important;border:0 !important;border-radius:8px}
.dataTables_paginate .paginate_button.disabled,.dataTables_paginate .paginate_button.disabled:hover{color:var(--faint) !important}
.rg-table thead th:first-child{z-index:3}
/* safe-area insets for notches / home indicator (requires viewport-fit=cover) */
@supports (padding:max(0px)){
  .rg-shell{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(80px,env(safe-area-inset-bottom))}
  .rg-nav{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

/* ==========================================================================
   SKINS — selectable theme families beyond the default Glass (2026-07).
   Two-axis model (Slack/GitHub pattern): html[data-skin] picks the FAMILY,
   html[data-theme] (or prefers-color-scheme when absent) picks light/dark.
   Glass = NO data-skin attribute — the picker/JS never set data-skin="glass",
   so `[data-skin]` below always means "a non-glass skin".
   Every skin only re-values the same token contract defined at the top of this
   file; components are untouched except the flat-surface overrides at the end.
   Cascade: these blocks sit AFTER the glass blocks and carry one extra
   attribute of specificity, so skin values always win; within a skin the
   explicit [data-theme] block wins over the prefers-color-scheme block.
   Per-user persistence: lgusers.theme (shell emits data-skin server-side);
   localStorage 'rg_skin' is the client cache (see rspnew_theme.js).
   ========================================================================== */

/* ---------------- SKIN: GRAPHITE — neutral flat workhorse (GitHub-Dimmed lineage).
   Research: "dim" dark + off-white light are the proven long-session dashboard pair. */
:root[data-skin="graphite"]{
  --r-card:12px; --r-ctl:8px; --r-field:8px;
  --mesh:none;
  --bg:#1c2128;
  --glass:#22272e; --glass-2:#2d333b; --glass-hover:#323942; --glass-3:#2d333b; --table:#22272e;
  --hair:#373e47; --hair-strong:#444c56;
  --ink:#cdd9e5; --ink-2:#adbac7; --mut:#768390; --faint:#545d68;
  --accent-grad:linear-gradient(120deg,#539bf5,#316dca); --accent:#539bf5; --on-accent:#fff; --focus:#539bf5;
  --shadow:0 8px 24px rgba(1,4,9,.45); --shadow-sm:0 1px 3px rgba(1,4,9,.4);
  --hot:#e0823d;  --hot-bg:rgba(224,130,61,.14);  --hot-edge:rgba(224,130,61,.40);
  --you:#b083f0;  --you-bg:rgba(176,131,240,.14); --you-edge:rgba(176,131,240,.40);
  --warn:#daaa3f; --warn-bg:rgba(198,144,38,.14); --warn-edge:rgba(198,144,38,.40);
  --ok:#57ab5a;   --ok-bg:rgba(87,171,90,.14);    --ok-edge:rgba(87,171,90,.40);
  --info:#6cb6ff; --info-bg:rgba(108,182,255,.14);--info-edge:rgba(108,182,255,.40);
  --bad:#e5534b;  --bad-bg:rgba(229,83,75,.15);   --bad-edge:rgba(229,83,75,.40);
}
@media (prefers-color-scheme:light){
  :root[data-skin="graphite"]:not([data-theme="dark"]){
    --mesh:none; --bg:#f6f8fa;
    --glass:#ffffff; --glass-2:#ffffff; --glass-hover:#f3f4f6; --glass-3:#f6f8fa; --table:#ffffff;
    --hair:#d8dee4; --hair-strong:#afb8c1;
    --ink:#1f2328; --ink-2:#424a53; --mut:#57606a; --faint:#8c959f;
    --accent-grad:linear-gradient(120deg,#218bff,#0969da); --accent:#0969da; --on-accent:#fff; --focus:#0969da;
    --shadow:0 1px 3px rgba(31,35,40,.08),0 8px 24px rgba(66,74,83,.12); --shadow-sm:0 1px 2px rgba(31,35,40,.10);
    --hot:#bc4c00;  --hot-bg:rgba(188,76,0,.10);    --hot-edge:rgba(188,76,0,.35);
    --you:#8250df;  --you-bg:rgba(130,80,223,.10);  --you-edge:rgba(130,80,223,.35);
    --warn:#9a6700; --warn-bg:rgba(154,103,0,.12);  --warn-edge:rgba(154,103,0,.35);
    --ok:#1a7f37;   --ok-bg:rgba(26,127,55,.12);    --ok-edge:rgba(26,127,55,.35);
    --info:#0969da; --info-bg:rgba(9,105,218,.10);  --info-edge:rgba(9,105,218,.35);
    --bad:#cf222e;  --bad-bg:rgba(207,34,46,.10);   --bad-edge:rgba(207,34,46,.35);
  }
}
:root[data-skin="graphite"][data-theme="light"]{
  --mesh:none; --bg:#f6f8fa;
  --glass:#ffffff; --glass-2:#ffffff; --glass-hover:#f3f4f6; --glass-3:#f6f8fa; --table:#ffffff;
  --hair:#d8dee4; --hair-strong:#afb8c1;
  --ink:#1f2328; --ink-2:#424a53; --mut:#57606a; --faint:#8c959f;
  --accent-grad:linear-gradient(120deg,#218bff,#0969da); --accent:#0969da; --on-accent:#fff; --focus:#0969da;
  --shadow:0 1px 3px rgba(31,35,40,.08),0 8px 24px rgba(66,74,83,.12); --shadow-sm:0 1px 2px rgba(31,35,40,.10);
  --hot:#bc4c00;  --hot-bg:rgba(188,76,0,.10);    --hot-edge:rgba(188,76,0,.35);
  --you:#8250df;  --you-bg:rgba(130,80,223,.10);  --you-edge:rgba(130,80,223,.35);
  --warn:#9a6700; --warn-bg:rgba(154,103,0,.12);  --warn-edge:rgba(154,103,0,.35);
  --ok:#1a7f37;   --ok-bg:rgba(26,127,55,.12);    --ok-edge:rgba(26,127,55,.35);
  --info:#0969da; --info-bg:rgba(9,105,218,.10);  --info-edge:rgba(9,105,218,.35);
  --bad:#cf222e;  --bad-bg:rgba(207,34,46,.10);   --bad-edge:rgba(207,34,46,.35);
}

/* ---------------- SKIN: SANDSTONE — warm low-blue comfort (Solarized-inspired).
   Warm paper light / warm charcoal dark; symmetric perceived contrast so
   mode-switching is frictionless. Pitched for late shifts + light-sensitive reps. */
:root[data-skin="sandstone"]{
  --mesh:radial-gradient(90% 80% at 12% 0%, #32291c 0%, transparent 55%);
  --bg:#211d18;
  --glass:#2a251e; --glass-2:#332d25; --glass-hover:#3b342a; --glass-3:#332d25; --table:#2a251e;
  --hair:rgba(228,220,203,.12); --hair-strong:rgba(228,220,203,.22);
  --ink:#e9e1d0; --ink-2:#c8bfab; --mut:#9c917d; --faint:#716853;
  --accent-grad:linear-gradient(120deg,#5cbcac,#2d8a7c); --accent:#5cbcac; --on-accent:#fff; --focus:#5cbcac;
  --shadow:0 10px 30px rgba(12,9,4,.45); --shadow-sm:0 2px 8px rgba(12,9,4,.35);
  --hot:#e8926a;  --hot-bg:rgba(232,146,106,.14); --hot-edge:rgba(232,146,106,.38);
  --you:#b0a3d8;  --you-bg:rgba(176,163,216,.14); --you-edge:rgba(176,163,216,.38);
  --warn:#d4a72c; --warn-bg:rgba(212,167,44,.14); --warn-edge:rgba(212,167,44,.38);
  --ok:#8fbf76;   --ok-bg:rgba(143,191,118,.14);  --ok-edge:rgba(143,191,118,.38);
  --info:#6db8cd; --info-bg:rgba(109,184,205,.14);--info-edge:rgba(109,184,205,.38);
  --bad:#d9776f;  --bad-bg:rgba(217,119,111,.16); --bad-edge:rgba(217,119,111,.38);
}
@media (prefers-color-scheme:light){
  :root[data-skin="sandstone"]:not([data-theme="dark"]){
    --mesh:radial-gradient(80% 90% at 10% 0%, #efe4cb 0%, transparent 55%),radial-gradient(90% 90% at 100% 15%, #e9dfc9 0%, transparent 50%);
    --bg:#f5efe4;
    --glass:#fcf8ef; --glass-2:#fffdf6; --glass-hover:#f3ecdd; --glass-3:#f7f1e4; --table:#fcf8ef;
    --hair:rgba(75,62,42,.13); --hair-strong:rgba(75,62,42,.24);
    --ink:#3b3226; --ink-2:#5c5245; --mut:#7d7260; --faint:#a89d87;
    --accent-grad:linear-gradient(120deg,#12968b,#0f766e); --accent:#0f766e; --on-accent:#fff; --focus:#0f766e;
    --shadow:0 1px 2px rgba(75,62,42,.06),0 12px 30px rgba(75,62,42,.13); --shadow-sm:0 1px 2px rgba(75,62,42,.06),0 4px 12px rgba(75,62,42,.09);
    --hot:#c2410c;  --hot-bg:rgba(194,65,12,.10);   --hot-edge:rgba(194,65,12,.32);
    --you:#6d5cb0;  --you-bg:rgba(109,92,176,.11);  --you-edge:rgba(109,92,176,.32);
    --warn:#a16207; --warn-bg:rgba(161,98,7,.12);   --warn-edge:rgba(161,98,7,.32);
    --ok:#3f7d45;   --ok-bg:rgba(63,125,69,.12);    --ok-edge:rgba(63,125,69,.32);
    --info:#0e7490; --info-bg:rgba(14,116,144,.11); --info-edge:rgba(14,116,144,.32);
    --bad:#b3403a;  --bad-bg:rgba(179,64,58,.11);   --bad-edge:rgba(179,64,58,.32);
  }
}
:root[data-skin="sandstone"][data-theme="light"]{
  --mesh:radial-gradient(80% 90% at 10% 0%, #efe4cb 0%, transparent 55%),radial-gradient(90% 90% at 100% 15%, #e9dfc9 0%, transparent 50%);
  --bg:#f5efe4;
  --glass:#fcf8ef; --glass-2:#fffdf6; --glass-hover:#f3ecdd; --glass-3:#f7f1e4; --table:#fcf8ef;
  --hair:rgba(75,62,42,.13); --hair-strong:rgba(75,62,42,.24);
  --ink:#3b3226; --ink-2:#5c5245; --mut:#7d7260; --faint:#a89d87;
  --accent-grad:linear-gradient(120deg,#12968b,#0f766e); --accent:#0f766e; --on-accent:#fff; --focus:#0f766e;
  --shadow:0 1px 2px rgba(75,62,42,.06),0 12px 30px rgba(75,62,42,.13); --shadow-sm:0 1px 2px rgba(75,62,42,.06),0 4px 12px rgba(75,62,42,.09);
  --hot:#c2410c;  --hot-bg:rgba(194,65,12,.10);   --hot-edge:rgba(194,65,12,.32);
  --you:#6d5cb0;  --you-bg:rgba(109,92,176,.11);  --you-edge:rgba(109,92,176,.32);
  --warn:#a16207; --warn-bg:rgba(161,98,7,.12);   --warn-edge:rgba(161,98,7,.32);
  --ok:#3f7d45;   --ok-bg:rgba(63,125,69,.12);    --ok-edge:rgba(63,125,69,.32);
  --info:#0e7490; --info-bg:rgba(14,116,144,.11); --info-edge:rgba(14,116,144,.32);
  --bad:#b3403a;  --bad-bg:rgba(179,64,58,.11);   --bad-edge:rgba(179,64,58,.32);
}

/* ---------------- SKIN: CLASSIC — the original RSPNEW "elegant" look, rebuilt from the
   deleted reference template pages/examplepage.php (recovered from git, b11b7b8^):
   soft blue-gray gradient page bg (#f5f7fa→#c3cfe2, NO photo), white 16px cards with the
   big soft 0-10-35 shadow + hover lift, Stripe-slate ink #32325d, and the signature
   indigo gradient #6B73FF→#000DFF on primary buttons / table headers / banners.
   Light = faithful to the reference; dark = the same language on indigo-tinted charcoal. */
:root[data-skin="classic"]{
  --r-ctl:8px; --r-field:8px;   /* cards stay 16px — matches the reference */
  --mesh:linear-gradient(135deg,#23263a 0%,#141628 100%);
  --bg:#171928;
  --glass:#212436; --glass-2:#262a40; --glass-hover:#2c3048; --glass-3:#262a40; --table:#212436;
  --hair:rgba(255,255,255,.10); --hair-strong:rgba(255,255,255,.17);
  --ink:#e4e6f5; --ink-2:#b8bdd9; --mut:#9aa2c8; --faint:#5d6488;
  --accent-grad:linear-gradient(135deg,#6B73FF 0%,#2633e0 100%); --accent:#8b91ff; --on-accent:#fff; --focus:#8b91ff;
  --shadow:0 10px 35px rgba(0,0,0,.5); --shadow-sm:0 4px 15px rgba(0,0,0,.35);
  --hot:#ffb77d;  --hot-bg:rgba(251,140,0,.15);   --hot-edge:rgba(251,140,0,.38);
  --you:#a5aaff;  --you-bg:rgba(107,115,255,.20); --you-edge:rgba(107,115,255,.42);
  --warn:#ffcb6b; --warn-bg:rgba(255,167,38,.15); --warn-edge:rgba(255,167,38,.38);
  --ok:#81c995;   --ok-bg:rgba(102,187,106,.16);  --ok-edge:rgba(102,187,106,.38);
  --info:#7fd3f7; --info-bg:rgba(41,182,246,.15); --info-edge:rgba(41,182,246,.38);
  --bad:#f28b82;  --bad-bg:rgba(239,83,80,.16);   --bad-edge:rgba(239,83,80,.38);
}
@media (prefers-color-scheme:light){
  :root[data-skin="classic"]:not([data-theme="dark"]){
    --mesh:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);  /* verbatim reference body bg */
    --bg:#f5f7fa;
    --glass:#ffffff; --glass-2:#ffffff; --glass-hover:#f8f9fa; --glass-3:#f8f9fa; --table:#ffffff;
    --hair:#e9ecef; --hair-strong:#d5dbe4;
    --ink:#32325d; --ink-2:#525f7f; --mut:#6b7c93; --faint:#aab7c4;
    --accent-grad:linear-gradient(135deg,#6B73FF 0%,#000DFF 100%); --accent:#5b63f5; --on-accent:#fff; --focus:#6B73FF;
    --shadow:0 10px 35px rgba(0,0,0,.08);                    /* verbatim reference card shadow */
    --shadow-sm:0 4px 15px rgba(107,115,255,.18);            /* the reference button glow */
    --hot:#d35400;  --hot-bg:rgba(251,140,0,.14);   --hot-edge:rgba(251,140,0,.40);
    --you:#4750d8;  --you-bg:rgba(107,115,255,.14); --you-edge:rgba(107,115,255,.42);
    --warn:#856404; --warn-bg:rgba(255,193,7,.18);  --warn-edge:rgba(255,193,7,.45);
    --ok:#1e7e34;   --ok-bg:rgba(40,167,69,.14);    --ok-edge:rgba(40,167,69,.38);
    --info:#117a8b; --info-bg:rgba(23,162,184,.14); --info-edge:rgba(23,162,184,.40);
    --bad:#b02a37;  --bad-bg:rgba(220,53,69,.12);   --bad-edge:rgba(220,53,69,.38);
  }
}
:root[data-skin="classic"][data-theme="light"]{
  --mesh:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  --bg:#f5f7fa;
  --glass:#ffffff; --glass-2:#ffffff; --glass-hover:#f8f9fa; --glass-3:#f8f9fa; --table:#ffffff;
  --hair:#e9ecef; --hair-strong:#d5dbe4;
  --ink:#32325d; --ink-2:#525f7f; --mut:#6b7c93; --faint:#aab7c4;
  --accent-grad:linear-gradient(135deg,#6B73FF 0%,#000DFF 100%); --accent:#5b63f5; --on-accent:#fff; --focus:#6B73FF;
  --shadow:0 10px 35px rgba(0,0,0,.08);
  --shadow-sm:0 4px 15px rgba(107,115,255,.18);
  --hot:#d35400;  --hot-bg:rgba(251,140,0,.14);   --hot-edge:rgba(251,140,0,.40);
  --you:#4750d8;  --you-bg:rgba(107,115,255,.14); --you-edge:rgba(107,115,255,.42);
  --warn:#856404; --warn-bg:rgba(255,193,7,.18);  --warn-edge:rgba(255,193,7,.45);
  --ok:#1e7e34;   --ok-bg:rgba(40,167,69,.14);    --ok-edge:rgba(40,167,69,.38);
  --info:#117a8b; --info-bg:rgba(23,162,184,.14); --info-edge:rgba(23,162,184,.40);
  --bad:#b02a37;  --bad-bg:rgba(220,53,69,.12);   --bad-edge:rgba(220,53,69,.38);
}

/* ---------------- SKIN: GROUND — a doctrine, not a palette (2026-07-24).
   Built for the rep working a shift alone at 3am. Every colour here is a RULE, and the
   rules are enforced by the token values themselves rather than by asking pages to behave:

     GROUND  #0d1017  blue-biased near-black. Dark is what greets you unasked (see the
                      deliberate absence of a prefers-color-scheme block below). Light is
                      fully built and equally considered — it is simply not the default.
     NEXT    #8b93ff  the one live action. --accent-grad is a FLAT gradient on purpose: a
                      real gradient reads as decoration, and decoration competes with the
                      only thing on the screen that is supposed to be asking for a click.
     PAID    #f0b357  distance to being cleared for the phones. RESERVED — the component
                      block below is what makes "used nowhere else, ever" literally true.
     DONE    #7f8798  completed work goes grey (GOV.UK task-list pattern). It is allowed to
                      sit at ~4.9:1 rather than AAA: receding IS the message.
     RETRY   #d9a273  clay. Failure never gets alarm red — over a third of feedback
                      interventions make performance worse, most reliably when they point at
                      the person rather than the task, and a red screen at 3am with nobody
                      awake is where someone closes the tab.
     TEXT             AAA (7:1) in BOTH modes, measured against the WORST surface each token
                      lands on (raised cards dark, the page wash light) — not the best one.

   RESERVED HUE: --warn/--hot/--info/--you all collapse onto the neutral grey ramp. That is
   what leaves the amber unique; without it "used nowhere else" is only an aspiration. States
   are told apart by their WORD plus a tint, never by hue alone. */
:root[data-skin="ground"]{
  color-scheme:dark;
  --r-card:12px; --r-ctl:8px; --r-field:8px;
  --mesh:none;
  --bg:#0d1017;
  --glass:#141926; --glass-2:#1a2030; --glass-hover:#212839; --glass-3:#1a2030; --table:#141926;
  --hair:rgba(232,235,244,.10); --hair-strong:rgba(232,235,244,.18);
  --ink:#e8ebf4; --ink-2:#c3c9da; --mut:#a6adc0; --faint:#6b7385;   /* 15.97 · 11.50 · 7.37 on ground */
  --accent-grad:linear-gradient(120deg,#8b93ff,#8b93ff); --accent:#8b93ff; --on-accent:#141827; --focus:#8b93ff;
  --shadow:0 8px 24px rgba(0,0,0,.55); --shadow-sm:0 1px 3px rgba(0,0,0,.40);
  /* the four reserved roles, as literals — this is the skin */
  --live:#8b93ff;  --live-bg:rgba(139,147,255,.16); --live-edge:rgba(139,147,255,.42);
  --paid:#f0b357;  --paid-bg:rgba(240,179,87,.16);  --paid-edge:rgba(240,179,87,.42);
  --done:#7f8798;  --done-bg:rgba(127,135,152,.14); --done-edge:rgba(127,135,152,.34);
  --retry:#d9a273; --retry-bg:rgba(217,162,115,.15);--retry-edge:rgba(217,162,115,.38);
  /* generic status tokens re-pointed at the doctrine so all ~54 existing pages inherit it
     without being edited: success = done (grey), danger = retry (clay), the rest = grey */
  --ok:#7f8798;   --ok-bg:rgba(127,135,152,.14);  --ok-edge:rgba(127,135,152,.34);
  --bad:#d9a273;  --bad-bg:rgba(217,162,115,.15); --bad-edge:rgba(217,162,115,.38);
  --warn:#c3c9da; --warn-bg:rgba(195,201,218,.12);--warn-edge:rgba(195,201,218,.28);
  --info:#a6adc0; --info-bg:rgba(166,173,192,.12);--info-edge:rgba(166,173,192,.28);
  --hot:#c3c9da;  --hot-bg:rgba(195,201,218,.12); --hot-edge:rgba(195,201,218,.28);
  --you:#a8afd8;  --you-bg:rgba(168,175,216,.16); --you-edge:rgba(168,175,216,.36);
}
/* ⚠ THERE IS DELIBERATELY NO `@media (prefers-color-scheme:light)` BLOCK FOR GROUND.
   Every other skin has one, and its absence here is the entire "dark by default" behaviour:
   with no explicit data-theme the dark block above simply stands, so a rep on a light-
   defaulted Windows box still gets the low-emission ground unasked. Light is one click away
   and fully built — it just has to be ASKED for. Do not "fix" this by adding the block.
   (The Pit and schedule.php always emit data-theme, so they carry the same rule in JS.) */
:root[data-skin="ground"][data-theme="light"]{
  color-scheme:light;
  --mesh:none;
  --bg:#eef1f6;
  --glass:#ffffff; --glass-2:#ffffff; --glass-hover:#f5f7fa; --glass-3:#f7f9fc; --table:#ffffff;
  --hair:rgba(20,24,39,.10); --hair-strong:rgba(20,24,39,.18);
  --ink:#141827; --ink-2:#3a4054; --mut:#454c5d; --faint:#767d8e;   /* 15.59 · 9.09 · 7.59 on the page wash */
  --accent-grad:linear-gradient(120deg,#4147b8,#4147b8); --accent:#4147b8; --on-accent:#ffffff; --focus:#4147b8;
  --shadow:0 1px 2px rgba(20,24,39,.05),0 8px 24px rgba(20,24,39,.10); --shadow-sm:0 1px 2px rgba(20,24,39,.06);
  /* light-mode siblings: the dark hues are unreadable as ink on white (#8b93ff = 2.72:1,
     #f0b357 = 1.86:1), so TEXT darkens to stay AAA while the tint + edge keep the identity —
     the same split the other skins already use for --warn. The amber is still the amber. */
  --live:#4147b8;  --live-bg:rgba(65,71,184,.10);   --live-edge:rgba(65,71,184,.34);
  --paid:#70480e;  --paid-bg:rgba(240,179,87,.18);  --paid-edge:rgba(240,179,87,.55);
  --done:#4c5260;  --done-bg:rgba(76,82,96,.08);    --done-edge:rgba(76,82,96,.26);
  --retry:#7d4922; --retry-bg:rgba(217,162,115,.20);--retry-edge:rgba(160,105,55,.42);
  --ok:#4c5260;   --ok-bg:rgba(76,82,96,.08);     --ok-edge:rgba(76,82,96,.26);
  --bad:#7d4922;  --bad-bg:rgba(217,162,115,.20); --bad-edge:rgba(160,105,55,.42);
  --warn:#3a4054; --warn-bg:rgba(58,64,84,.08);   --warn-edge:rgba(58,64,84,.24);
  --info:#454c5d; --info-bg:rgba(69,76,93,.08);   --info-edge:rgba(69,76,93,.24);
  --hot:#3a4054;  --hot-bg:rgba(58,64,84,.08);    --hot-edge:rgba(58,64,84,.24);
  --you:#4a4f96;  --you-bg:rgba(74,79,150,.10);   --you-edge:rgba(74,79,150,.32);
}

/* ---------------- Classic = "Retro" material-dashboard sidebar (2026-07-14) ----------------
   USER: make the retro (Classic) theme's sidebar reuse the legacy material-dashboard
   look (the dark icon-rail in the deal wizard's menu.php). The glass shell's desktop
   sidebar is ALREADY a hover-expand icon rail (--side-mini 76px → --side-w 250px on
   :hover, labels hidden when collapsed — see rspnew_shell.css), so this is a pure
   RE-SKIN, not a re-layout: solid #191919 rail + rose (#e91e63) active state, no glass
   frost. Applies site-wide to every rg_shell page whenever the user picks Classic, in
   BOTH light and dark modes (a dark sidebar over light content is the material-dashboard
   signature). Scoped to [data-skin="classic"] so no other skin is touched. */
:root[data-skin="classic"] .rg-side,
:root[data-skin="classic"] .rg-side.rg-glass,
:root[data-skin="classic"] .rg-side.rg-liquid{
  /* the legacy menu.php sidebar carried data-image="/assets/img/sidebar-1.jpg" —
     the photo lives INSIDE the rail, under a heavy dark overlay (material-dashboard
     signature). Overlay strength matches the old data-background-color=black (~.8),
     lifted slightly so nav text keeps AA contrast over the brightest photo areas. */
  background:linear-gradient(rgba(15,15,15,.82),rgba(15,15,15,.82)),
             #191919 url(../img/sidebar-1.jpg) center/cover no-repeat !important;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:2px 0 22px rgba(0,0,0,.45);
}
:root[data-skin="classic"] .rg-sidehead,
:root[data-skin="classic"] .rg-sidehead .brand-doppler,
:root[data-skin="classic"] .rg-user .nm{color:#fff}
:root[data-skin="classic"] .rg-user,
:root[data-skin="classic"] .rg-sidefoot{border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
:root[data-skin="classic"] .rg-user .lv,
:root[data-skin="classic"] .rg-foot-lbl{color:rgba(255,255,255,.55)}
:root[data-skin="classic"] .rg-navsep{background:rgba(255,255,255,.10)}
/* nav links: muted white; icons dimmer; rose on active (material-dashboard 'rose') */
:root[data-skin="classic"] .rg-sidenav a,
:root[data-skin="classic"] .rg-grouphd{color:rgba(255,255,255,.86);transition:transform .25s ease,background .2s ease,color .2s ease}
:root[data-skin="classic"] .rg-sidenav a .material-symbols-outlined,
:root[data-skin="classic"] .rg-grouphd .material-symbols-outlined{color:rgba(255,255,255,.70)}
:root[data-skin="classic"] .rg-sidenav a:hover,
:root[data-skin="classic"] .rg-grouphd:hover{background:rgba(255,255,255,.10);color:#fff}
:root[data-skin="classic"] .rg-sidenav a:hover .material-symbols-outlined,
:root[data-skin="classic"] .rg-grouphd:hover .material-symbols-outlined{color:#fff;transform:scale(1.12)}
:root[data-skin="classic"] .rg-sidenav a.active{
  background:#e91e63 !important;color:#fff !important;
  box-shadow:0 4px 12px rgba(233,30,99,.45) !important;
}
:root[data-skin="classic"] .rg-sidenav a.active .material-symbols-outlined{color:#fff}
:root[data-skin="classic"] .rg-navsub a{color:rgba(255,255,255,.72)}
:root[data-skin="classic"] .rg-navsub a:hover{color:#fff}
/* topbar/burger (mobile chrome) matches the dark rail */
:root[data-skin="classic"] .rg-topbar,
:root[data-skin="classic"] .rg-topbar.rg-glass{background:#191919;border-bottom:1px solid rgba(255,255,255,.06)}
:root[data-skin="classic"] .rg-topbar .brand-doppler{color:#fff}
/* burger + theme toggle sit ON the black bar: their var(--glass) surface is WHITE in classic
   light — white boxes on a black bar (and a white icon on a white box). Dark chrome, both modes. */
:root[data-skin="classic"] .rg-burger,
:root[data-skin="classic"] .rg-topbar .rg-theme-btn{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.17);color:#fff}
:root[data-skin="classic"] .rg-burger:hover,
:root[data-skin="classic"] .rg-topbar .rg-theme-btn:hover{background:rgba(255,255,255,.16)}

/* ---------------- skin component overrides: every non-glass skin is FLAT ----------------
   Surfaces are opaque (the --glass tokens above hold solid colors), so the frost
   pipeline is disabled: no backdrop-filter, no specular sheens, no inset rim-light. */
:root[data-skin] .rg-card,:root[data-skin] .rg-panel,:root[data-skin] .rg-nav,:root[data-skin] .rg-stat,
:root[data-skin] .rg-table-wrap,:root[data-skin] .rg-btn,:root[data-skin] .rg-input,:root[data-skin] .rg-select,
:root[data-skin] .rg-textarea,:root[data-skin] .rg-alert,:root[data-skin] .rg-theme-btn,:root[data-skin] .rg-burger,
:root[data-skin] .rg-table thead th,:root[data-skin] .rg-glass,:root[data-skin] .rg-liquid{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
:root[data-skin] .rg-card,:root[data-skin] .rg-stat,:root[data-skin] .rg-nav{box-shadow:var(--shadow)}
:root[data-skin] .rg-glass{background:var(--glass-2);box-shadow:var(--shadow)}
:root[data-skin] .rg-liquid{background:var(--glass);box-shadow:var(--shadow)}
:root[data-skin] .rg-liquid::after,:root[data-skin] .rg-liquid>.rg-refract,:root[data-skin] .rg-sheen::after{display:none!important}
/* BACKGROUND TOGGLE — html[data-bg] ("photo" | "flat"; absent = the skin's default,
   persisted per user in lgusers.theme_bg / localStorage rg_bg, see rspnew_theme.js).
   Skin defaults: glass + classic = scenic PHOTO; graphite + sandstone = flat theme bg.
   Flat = paint the skin's own --mesh over the shell's inline photo (!important beats the
   inline background-image on .rg-bg); the dark scrim only makes sense over a photo, so it
   goes transparent exactly when the photo is off. */
:root[data-skin="graphite"]:not([data-bg="photo"]) .rg-bg,
:root[data-skin="sandstone"]:not([data-bg="photo"]) .rg-bg,
:root[data-skin="ground"] .rg-bg,
:root[data-bg="flat"] .rg-bg{background-image:var(--mesh)!important}
:root[data-skin="graphite"]:not([data-bg="photo"]) .rg-scrim,
:root[data-skin="sandstone"]:not([data-bg="photo"]) .rg-scrim,
:root[data-skin="ground"] .rg-scrim,
:root[data-bg="flat"] .rg-scrim{background:transparent}
/* ⚠ GROUND is listed WITHOUT the :not([data-bg="photo"]) guard the other flat skins carry —
   it is flat unconditionally, and an explicit photo preference cannot override it. A scenic
   photo defeats both the low-emission ground and the accent discipline (a busy photo puts
   colour everywhere, so "exactly one thing glows" stops being true). My Account hides the
   Background and Photo rows while Ground is selected, and rgGetBg() reports 'flat' for it. */
/* the dark-mode "solid glass button" fixups earlier in this file are glass-flavored
   (hardcoded indigo); re-ground them on the skin's own tokens. The extra [data-skin]
   attribute outranks them at equal rule shape. */
:root[data-skin][data-theme="dark"] .rg-btn:not(.rg-btn-primary):not(.rg-btn-warning):not(.rg-btn-success):not(.rg-btn-danger){background:var(--glass-2);border-color:var(--hair-strong);color:var(--ink)}
:root[data-skin][data-theme="dark"] .rg-btn-primary{background:var(--accent-grad);color:var(--on-accent)}
@media (prefers-color-scheme:dark){
  :root[data-skin]:not([data-theme="light"]) .rg-btn:not(.rg-btn-primary):not(.rg-btn-warning):not(.rg-btn-success):not(.rg-btn-danger){background:var(--glass-2);border-color:var(--hair-strong);color:var(--ink)}
  :root[data-skin]:not([data-theme="light"]) .rg-btn-primary{background:var(--accent-grad);color:var(--on-accent)}
}
/* classic signatures, verbatim from the reference template:
   · cards lift on hover (translateY(-5px) + deeper shadow)
   · table headers wear the indigo gradient with white uppercase text
     (scoped to thead th ONLY — the sticky first COLUMN keeps the neutral --glass-3) */
:root[data-skin="classic"] .rg-card{transition:transform .3s ease,box-shadow .3s ease}
:root[data-skin="classic"] .rg-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,.12)}
:root[data-skin="classic"][data-theme="dark"] .rg-card:hover{box-shadow:0 15px 40px rgba(0,0,0,.55)}
/* Header gradient must be VERTICAL: a 135deg gradient restarts in every th (sticky headers
   need per-cell backgrounds — see the opacity note above), which rendered as stacked faded
   boxes. Same signature indigo pair, top-to-bottom, so the row reads as one smooth band. */
:root[data-skin="classic"] .rg-table thead th,
:root[data-skin="classic"] table.dataTable thead th{background:linear-gradient(180deg,#6B73FF,#3D47EC);color:rgba(255,255,255,.95)}
:root[data-skin="classic"] .rg-table thead th:first-child{background:linear-gradient(180deg,#6B73FF,#3D47EC)}
/* classic sidebar = the old BLACK menu chrome, in BOTH modes: re-scope the surface/ink
   tokens on .rg-side so every descendant (nav links, group heads, user info, toggle)
   inherits the dark palette without per-element overrides. */
:root[data-skin="classic"] .rg-side{
  --glass:#232637; --glass-2:#232637; --glass-hover:rgba(255,255,255,.08); --glass-3:#232637;
  --hair:rgba(255,255,255,.10); --hair-strong:rgba(255,255,255,.17);
  --ink:#eef0fa; --ink-2:#c3c8e4; --mut:#8890b5; --faint:#5d6488;
  background:#232637;
}

/* ---------------- CLASSIC personality layer — full-fidelity port of the reference
   template pages/classicexample.php (plan: abstract-dancing-kahn). Values are the
   reference's own unless a documented deviation says otherwise.
   (prefers-reduced-motion is already honored globally — `.rg *{animation:none}`.) */
@keyframes rgc-fadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rgc-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rgc-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* card entrance — staggered like the reference's nth-child delays */
:root[data-skin="classic"] .rg-card,:root[data-skin="classic"] .rg-stat{animation:rgc-fadein .6s ease-out both}
:root[data-skin="classic"] .rg-stat:nth-child(1){animation-delay:.05s}
:root[data-skin="classic"] .rg-stat:nth-child(2){animation-delay:.1s}
:root[data-skin="classic"] .rg-stat:nth-child(3){animation-delay:.2s}
:root[data-skin="classic"] .rg-stat:nth-child(4){animation-delay:.3s}
/* cards: reference body padding (32px css ≈ the reference's 40px at its own 0.7 page zoom);
   borderless like every reference card — the 0-10-35 shadow carries the separation */
:root[data-skin="classic"] .rg-card{padding:32px;border:0}
/* STAT TILES — centered, value ABOVE label. DOM order varies across pages (people.php emits
   .v first) so ordering rides on flex `order`, never on document position. */
:root[data-skin="classic"] .rg-stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:24px;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;
}
:root[data-skin="classic"] .rg-stat>*{order:3}  /* page-local extras (sparklines…) sink below */
:root[data-skin="classic"] .rg-stat .v{order:1;font-size:32px;font-weight:700;margin-bottom:10px}
:root[data-skin="classic"] .rg-stat .k{order:2;font-size:14px;font-weight:500;color:var(--mut);text-transform:none;letter-spacing:0;margin-bottom:0}
:root[data-skin="classic"] .rg-stat:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(0,0,0,.12)}
/* the reference's sweep-shine that crosses the tile on hover */
:root[data-skin="classic"] .rg-stat::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .7s;pointer-events:none}
:root[data-skin="classic"] .rg-stat:hover::before{left:100%}
:root[data-skin="classic"] .rg-stats{gap:20px}
/* gradient HERO banner: any page-title block (.rg-card-head holding the .rg-h1) becomes
   the reference's header-gradient — white text over indigo with the 20s rotating sheen */
:root[data-skin="classic"] .rg-card-head:has(.rg-h1){
  background:var(--accent-grad);border-radius:var(--r-card);padding:40px;
  position:relative;overflow:hidden;box-shadow:var(--shadow);
}
:root[data-skin="classic"] .rg-card-head:has(.rg-h1)::after{
  content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);
  animation:rgc-rotate 20s linear infinite;
}
/* every direct child rides above the rotating sheen (buttons/controls included) */
:root[data-skin="classic"] .rg-card-head:has(.rg-h1)>*{position:relative}
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-h1{color:#fff;font-size:32px;font-weight:700;margin:0}
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-sub{color:rgba(255,255,255,.9);font-size:18px;margin:15px 0 0}
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-kicker{color:rgba(255,255,255,.75)}
/* inline-colored icons inside the hero h1 (recordingsel/user_log hardcode color:var(--accent))
   must read white on the gradient — inline style needs the !important */
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-h1 :is(i,span){color:#fff!important}
/* controls that sit ON the gradient: frosted white; primary inverts (white bg, indigo text) */
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-btn:not(.rg-btn-primary){
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) a.rg-btn:not(.rg-btn-primary){color:#fff}
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-btn-primary{background:#fff;color:#3f48cc;box-shadow:0 4px 15px rgba(0,0,0,.15)}
/* RETRO CARD HEADERS (7/14, floor feedback "make it look like old rspnew"): the old
   dashboard (pages/old_dashboard.php, user-supplied reference) led EVERY card with a
   centered, uppercase, white-on-indigo gradient strip (.card-header-unified). Recreate it:
   a card whose first element is its .rg-h2 title wears the strip, full-bleed to the card
   edges (negative margins beat the pages' inline margin variants — hence !important). */
:root[data-skin="classic"] .rg-card>:is(.rg-h2,h2,h3):first-child{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:-32px -32px 20px!important;padding:15px 20px;
  background:var(--accent-grad);background-clip:border-box;-webkit-background-clip:border-box;
  color:#fff;-webkit-text-fill-color:#fff;
  border-radius:var(--r-card) var(--r-card) 0 0;
  font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;text-align:center;
}
:root[data-skin="classic"] .rg-card>:is(.rg-h2,h2,h3,h1):first-child :is(i,span,.material-icons,.material-symbols-outlined){color:#fff;-webkit-text-fill-color:#fff}
/* h1-led page cards (agent_coach, trainingcourse, role_journeys): same strip, page-title scale */
:root[data-skin="classic"] .rg-card>h1:first-child{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:-32px -32px 20px!important;padding:18px 24px;
  background:var(--accent-grad);background-clip:border-box;-webkit-background-clip:border-box;
  color:#fff;-webkit-text-fill-color:#fff;
  border-radius:var(--r-card) var(--r-card) 0 0;
  font-size:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-align:center;
}
/* card titles that DON'T lead the card (icon tiles like whatsnew, badge cards): a contained
   gradient band — no edge bleed, so page-local card padding can never cause overflow */
:root[data-skin="classic"] .rg-card>:is(.rg-h2,h2,h3):not(:first-child){
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:12px 0 14px!important;padding:11px 16px;border-radius:10px;
  background:var(--accent-grad);background-clip:border-box;-webkit-background-clip:border-box;
  color:#fff;-webkit-text-fill-color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;text-align:center;
}
:root[data-skin="classic"] .rg-card>:is(.rg-h2,h2,h3):not(:first-child) :is(i,span,.material-icons,.material-symbols-outlined){color:#fff;-webkit-text-fill-color:#fff}
/* the payroll auth-gate card keeps its own centered look (documented page-local deviation) */
:root[data-skin="classic"] .rg-login-card>:is(h1,h2,h3){
  all:unset;display:block;margin:0 0 10px!important;color:var(--ink);-webkit-text-fill-color:var(--ink);
  font-size:22px;font-weight:700;text-align:center;background:none;text-transform:none;letter-spacing:0;font-family:inherit}
/* standalone section-header bars (.rg-card-head holding an .rg-h2 — table heads, "My
   performance") get the same strip; controls on the gradient go frosted like the hero */
:root[data-skin="classic"] .rg-card-head:has(.rg-h2){
  background:var(--accent-grad);border-radius:var(--r-card);padding:14px 20px;box-shadow:var(--shadow)}
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) .rg-h2{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#fff;-webkit-text-fill-color:#fff;font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) .rg-sub{color:rgba(255,255,255,.85)}
/* the ledger-freshness line (.ds-asof) rides IN the table/section header strip (per PG) —
   its token color is dark slate in light mode, invisible on the indigo gradient */
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) .ds-asof,
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .ds-asof{color:rgba(255,255,255,.85)}
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) .rg-btn:not(.rg-btn-primary){
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) .rg-btn-primary{background:#fff;color:#3f48cc}
/* muted subtext + pills that sit ON a gradient strip keep their white-surface token colors
   (light-mode --mut/--info are DARK values) and drown on the indigo — treat them like the
   buttons above: white text, frosted-white chip (save_desk queue heads surfaced this) */
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-mut,
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) .rg-mut{color:rgba(255,255,255,.78)}
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-pill,
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) .rg-pill{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#fff}
/* a head strip sitting directly ON a table (.rg-table-wrap>.rg-card-head — the ds-thead
   search tables on dashboard/users/user_log/processingold) must FUSE with the thead below,
   not float: top corners only, no shadow, no hair line, and the strip's gradient ENDS on
   the thead gradient's start color (#6B73FF) so title + search + column row read as ONE
   continuous header block instead of two mismatched bands with white notches between. */
:root[data-skin="classic"] .rg-table-wrap>.rg-card-head:has(.rg-h2){
  background:linear-gradient(180deg,#7B82FF,#6B73FF);
  border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:none;border-bottom:0;margin:0}
/* search inputs ON a gradient strip: frosted like the hero buttons, never the white
   --glass pill (classic light --glass is solid white — a stark box on the indigo) */
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) :is(.ds-search,input[type="search"]),
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) :is(.ds-search,input[type="search"]){
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) :is(.ds-search,input[type="search"])::placeholder,
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) :is(.ds-search,input[type="search"])::placeholder{color:rgba(255,255,255,.75)}
:root[data-skin="classic"] .rg-card-head:has(.rg-h2) :is(.ds-search,input[type="search"]):focus,
:root[data-skin="classic"] .rg-card-head:has(.rg-h1) :is(.ds-search,input[type="search"]):focus{border-color:#fff}
/* section titles = gradient text (the reference's .text-gradient); nested icons/pills/links
   must NOT inherit the transparent fill or they vanish */
:root[data-skin="classic"] .rg-h2{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:700;font-size:20px;
}
:root[data-skin="classic"] .rg-h2 :is(i,span,a,.material-icons,.material-symbols-outlined,.rg-pill){-webkit-text-fill-color:currentColor}
/* dark mode: the #000DFF gradient end is mud on dark cards — lift the TEXT gradient only */
:root[data-skin="classic"][data-theme="dark"] .rg-h2{background:linear-gradient(135deg,#9ea1ff,#6B73FF);-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:dark){
  :root[data-skin="classic"]:not([data-theme="light"]) .rg-h2{background:linear-gradient(135deg,#9ea1ff,#6B73FF);-webkit-background-clip:text;background-clip:text}
}
/* BUTTONS — reference .btn-elegant scale; :not(.rg-btn-sm) so small buttons stay small */
:root[data-skin="classic"] .rg-btn:not(.rg-btn-sm){padding:12px 24px;font-size:15px;gap:10px}
:root[data-skin="classic"] .rg-btn:not(.rg-btn-sm) .material-icons,
:root[data-skin="classic"] .rg-btn:not(.rg-btn-sm) .material-symbols-outlined{font-size:20px}
:root[data-skin="classic"] .rg-btn-sm{padding:7px 13px;font-size:13.5px}
:root[data-skin="classic"] .rg-btn-primary{box-shadow:0 4px 15px rgba(107,115,255,.3)}
:root[data-skin="classic"] .rg-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(107,115,255,.4)}
/* gradient status variants — BOTH families (legacy Bootstrap .btn-* dominates real pages:
   54/15/14/13/13). Legacy set gets color-level styling only (layout stays whatever the
   page gave it). White text always. */
:root[data-skin="classic"] .rg-btn-success,:root[data-skin="classic"] .btn-success{background:linear-gradient(135deg,#66bb6a 0%,#43a047 100%);border:0;color:#fff}
:root[data-skin="classic"] .rg-btn-danger,:root[data-skin="classic"] .btn-danger{background:linear-gradient(135deg,#ef5350 0%,#e53935 100%);border:0;color:#fff}
:root[data-skin="classic"] .rg-btn-warning,:root[data-skin="classic"] .btn-warning{background:linear-gradient(135deg,#ffa726 0%,#fb8c00 100%);border:0;color:#fff}
:root[data-skin="classic"] .btn-info{background:linear-gradient(135deg,#29b6f6 0%,#039be5 100%);border:0;color:#fff}
:root[data-skin="classic"] .btn-primary{background:var(--accent-grad);border:0;color:#fff}
:root[data-skin="classic"] a.rg-btn-success,:root[data-skin="classic"] a.rg-btn-danger,:root[data-skin="classic"] a.rg-btn-warning{color:#fff}
/* badges: flat (no border), reference size */
:root[data-skin="classic"] .rg-pill{text-transform:uppercase;letter-spacing:.5px;font-size:12px;padding:6px 12px;border-color:transparent}
/* alerts: flat tinted, borderless, reference padding/gap; icons 24px; flex-start kept
   deliberately (real alerts run 3 lines — centered icons read wrong) */
:root[data-skin="classic"] .rg-alert{border:0;border-radius:12px;padding:20px;gap:15px}
:root[data-skin="classic"] .rg-alert>.material-icons,:root[data-skin="classic"] .rg-alert>.material-symbols-outlined{font-size:24px}
/* forms: reference label + field treatment */
:root[data-skin="classic"] .rg-label{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
:root[data-skin="classic"] .rg-label .rg-mut{text-transform:none;letter-spacing:normal}
:root[data-skin="classic"] .rg-input,:root[data-skin="classic"] .rg-select,:root[data-skin="classic"] .rg-textarea{border-width:2px;border-color:var(--hair);padding:12px 20px}
:root[data-skin="classic"] .rg-input:focus,:root[data-skin="classic"] .rg-select:focus,:root[data-skin="classic"] .rg-textarea:focus{
  border-color:var(--focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 10%,transparent);
}
/* tables: floating white card (no border), prominent gradient header, plain sticky column */
:root[data-skin="classic"] .rg-table-wrap{border:0;box-shadow:var(--shadow)}
:root[data-skin="classic"] .rg-table td:first-child{background:var(--table)}
:root[data-skin="classic"] .rg-table th{font-size:14px;letter-spacing:.5px;padding:20px}
:root[data-skin="classic"] .rg-table td{padding:15px 20px}
/* progress bars — shared families in real pages (Bootstrap .progress/.progress-bar +
   the template's own .progress-elegant/-bar-elegant): inset track, gradient bar, shimmer */
:root[data-skin="classic"] .progress,:root[data-skin="classic"] .progress-elegant{
  height:10px;background:#e9ecef;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}
:root[data-skin="classic"] .progress-bar,:root[data-skin="classic"] .progress-bar-elegant{
  height:100%;background:linear-gradient(90deg,#6B73FF 0%,#000DFF 100%);box-shadow:0 2px 4px rgba(107,115,255,.3);
  position:relative;overflow:hidden;transition:width .6s ease}
:root[data-skin="classic"] .progress-bar::after,:root[data-skin="classic"] .progress-bar-elegant::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:rgc-shimmer 2s infinite}
:root[data-skin="classic"] .progress-bar-success{background:linear-gradient(90deg,#66bb6a 0%,#43a047 100%)}
:root[data-skin="classic"] .progress-bar-warning{background:linear-gradient(90deg,#ffa726 0%,#fb8c00 100%)}
:root[data-skin="classic"] .progress-bar-danger{background:linear-gradient(90deg,#ef5350 0%,#e53935 100%)}
/* chrome: reference navbar shadow on the mobile topbar */
:root[data-skin="classic"] .rg-topbar{box-shadow:0 2px 15px rgba(0,0,0,.08)}
/* reference's own responsive drops */
@media (max-width:768px){
  :root[data-skin="classic"] .rg-card{padding:20px}
  :root[data-skin="classic"] .rg-card>:is(.rg-h2,h2,h3):first-child{margin:-20px -20px 16px!important;font-size:13.5px}
  :root[data-skin="classic"] .rg-card>h1:first-child{margin:-20px -20px 16px!important;font-size:15px}
  :root[data-skin="classic"] .rg-card-head:has(.rg-h1){padding:24px}
  :root[data-skin="classic"] .rg-card-head:has(.rg-h1) .rg-h1{font-size:24px}
  :root[data-skin="classic"] .rg-stat .v{font-size:28px}
}

/* ==========================================================================
   GROUND — component discipline (2026-07-24)
   The token block above already re-points --ok/--bad/--warn/--hot/--info at the doctrine,
   which is what makes "done goes grey" and "never red" true across all ~54 shell pages with
   no page edits: .rg-pill.ok / .rg-alert.bad / etc. all read those tokens already.
   What tokens CANNOT fix is how many things claim the accent. Every rule below exists to
   take the accent away from something that is not the one live action, so that the accent
   still means something when a primary button uses it. Scoped to [data-skin="ground"].
   ========================================================================== */

/* THE ONE LIVE ACTION. Flat fill, no gradient, no lift, no glow — a primary button here is
   loud because it is the ONLY coloured thing, not because it is decorated. */
:root[data-skin="ground"] .rg-btn-primary,
:root[data-skin="ground"][data-theme="dark"] .rg-btn-primary,
:root[data-skin="ground"] .btn-primary{
  background:var(--live);color:var(--on-accent);border:0;box-shadow:none}
:root[data-skin="ground"] .rg-btn-primary:hover{filter:none;background:var(--live);transform:none;opacity:.9}

/* Every other button is neutral. .rg-btn already defaults to --glass-2/--ink, so this is
   aimed at the legacy Bootstrap-3 families that hardcode green/amber/red and still dominate
   the older pages (.btn-success ~54 uses, .btn-danger ~15). Danger becomes CLAY, not red;
   success becomes the grey of completed work; info/warning go neutral. */
:root[data-skin="ground"] :is(.rg-btn-success,.btn-success,.rg-btn-warning,.btn-warning,.btn-info){
  background:var(--glass-2)!important;border:1px solid var(--hair-strong)!important;color:var(--ink)!important;
  background-image:none!important;box-shadow:none!important;text-shadow:none}
:root[data-skin="ground"] :is(.rg-btn-danger,.btn-danger){
  background:var(--retry-bg)!important;border:1px solid var(--retry-edge)!important;color:var(--retry)!important;
  background-image:none!important;box-shadow:none!important;text-shadow:none}
:root[data-skin="ground"] :is(a.rg-btn-success,a.btn-success,a.rg-btn-warning,a.btn-warning,a.btn-info){color:var(--ink)!important}
:root[data-skin="ground"] :is(a.rg-btn-danger,a.btn-danger){color:var(--retry)!important}

/* BODY LINKS carry their meaning as a word + an underline, not as a colour. If every link in
   a table glows periwinkle then the primary button is just one more blue thing on the page. */
:root[data-skin="ground"] .rg a:not([class*="btn"]):not(.rg-pill){
  color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--hair-strong)}
:root[data-skin="ground"] .rg a:not([class*="btn"]):not(.rg-pill):hover{
  color:var(--live);text-decoration-color:var(--live)}

/* CHROME never competes with the page. The active nav item is a left rule + ink, not an
   accent slab; the avatar and the DataTables current page go neutral. */
:root[data-skin="ground"] .rg-sidenav a.active{
  background:var(--glass-hover);color:var(--ink);box-shadow:none;
  border-left:3px solid var(--live)}
:root[data-skin="ground"] .rg-avatar-init{background:var(--glass-hover);color:var(--ink)}
/* the brand wordmark ships as a purple gradient with a 16px glow — on Ground that is a
   second glowing thing in the corner of every page, which is exactly what the doctrine
   forbids. Solid ink, no gradient, no drop-shadow. Identity survives in the typography. */
:root[data-skin="ground"] :is(.brand-doppler,.brand-mini){
  background:none!important;-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important;
  filter:none!important}
:root[data-skin="ground"] .dataTables_paginate .paginate_button.current,
:root[data-skin="ground"] .dataTables_paginate .paginate_button.current:hover{
  background:var(--glass-hover)!important;color:var(--ink)!important;border:1px solid var(--hair-strong)!important}

/* DONE IS COLOURLESS — and that includes the tick. A success pill/alert keeps its word and
   its grey tint; the icon inherits the same grey rather than staying green. */
:root[data-skin="ground"] :is(.rg-pill,.rg-alert).ok :is(i,.material-icons,.material-symbols-outlined){color:inherit}

/* The focus ring KEEPS the accent on purpose. It is not decoration and it is never on screen
   at the same time as a competing highlight — taking colour off it would cost keyboard users
   the single clearest signal on the page. */

/* ---- The reserved-role utility classes ----
   Use these instead of raw tokens. Each colours a span that already contains its word, which
   is how "colour never carries meaning alone" is enforced at the component level rather than
   left to reviewers: <span class="rg-paid">4 of 6 cleared</span>, not a bare amber dot. */
.rg-live,.rg-paid,.rg-done,.rg-retry{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid transparent}
.rg-live {color:var(--live); background:var(--live-bg); border-color:var(--live-edge)}
.rg-paid {color:var(--paid); background:var(--paid-bg); border-color:var(--paid-edge)}
.rg-done {color:var(--done); background:var(--done-bg); border-color:var(--done-edge)}
.rg-retry{color:var(--retry);background:var(--retry-bg);border-color:var(--retry-edge)}
/* text-only variants for inline prose (a table cell, a sentence) */
.rg-live-t{color:var(--live)}  .rg-paid-t{color:var(--paid)}
.rg-done-t{color:var(--done)}  .rg-retry-t{color:var(--retry)}

/* ---- GROUND: the one-live-action gate (paired with rgGroundGate() in rspnew_theme.js) ----
   .rg-gated is applied by JS to every accent-carrying element AFTER the first visible one in
   document order. A demoted button keeps its size, its label and its behaviour — it simply
   stops claiming to be the action. Ground only; the class is stripped on any other skin. */
:root[data-skin="ground"] :is(.rg-btn-primary,.btn-primary,.btn--primary).rg-gated{
  background:var(--glass-2)!important;background-image:none!important;
  color:var(--ink)!important;border:1px solid var(--hair-strong)!important;box-shadow:none!important}
/* ?groundaudit=1 — make the gate's decision visible instead of silent, so a page author can
   see WHICH single action document order happened to pick and move it if that is wrong. */
:root[data-skin="ground"] [data-rg-audit="kept"]{outline:2px solid var(--live);outline-offset:3px}
:root[data-skin="ground"] [data-rg-audit="demoted"]{outline:2px dashed var(--retry);outline-offset:3px}
:root[data-skin="ground"] [data-rg-audit]::after{
  content:attr(data-rg-audit);position:absolute;transform:translate(6px,-22px);
  font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--bg);background:var(--ink);padding:1px 5px;border-radius:3px;pointer-events:none}