/* RSX portal - shared shell. GENERATED, but edit it by hand from here on.
 *
 * Why this file exists: every rule below was byte-identical on at least 12 of the 23
 * pages that use it. The gold back button alone was copied 19 times - two of those copies
 * carry a comment saying 'copied VERBATIM', so the duplication was known, not accidental.
 *
 * THE CASCADE CONTRACT, and the whole reason this is safe:
 *   every page loads this file with <link> placed BEFORE its own <style> block. Selectors
 *   here use the same specificity as the page copies they replaced, so a page that needs
 *   something different just keeps its own rule and WINS on source order. Nothing here
 *   can silently override a page. If you add a rule, keep that true: no !important that
 *   the pages did not already have, and no raising of specificity.
 *
 * NOT loaded by three pages, on purpose:
 *   iocc/index.html    mixed line endings on purpose (CLAUDE.md rule 5) and its own
 *                      TV-board palette (--surface/--ink-2/--ring). Its back button
 *                      is grey by design and Moe confirmed it stays grey. Would
 *                      need binary patching with region-matched anchors.
 *   ops/index.html     uses no design tokens at all, already carries its own
 *                      <link>, and is the 277 KB page - nothing to gain, most to
 *                      lose
 *   no-access.html     standalone 403 page: hardcoded hex, no tokens, no header, no
 *                      back button, and a flex-centering body unlike every other
 *                      page. Shares nothing.
 *
 * Served from /assets/*, which is anonymous - it is presentation only and carries no
 * data. The URL is versioned (?v=N) because that route is cacheable; BUMP THE VERSION
 * IN EVERY PAGE when you change this file, or browsers keep the old copy.
 */

:root{
  --amber: #f5b942;
  --bg: #0a1020;
  --blue: #7fd1ff;
  --card: #131e36;
  --dim: #5f7099;
  --gold: #c9a35c;
  --gold2: #e8cfa0;
  --green: #3ecf8e;
  --line: #233458;
  --mut: #8fa2c7;
  --red: #ff6b6b;
  --txt: #e9effc;
}

/* Tokens the pages do NOT agree on. The majority value is above; the pages listed
 * below keep a local :root override so this refactor changed nothing visually.
 * These are real inconsistencies to settle, not artefacts of the extraction:
 *   --red: #e6455a on admin, hr/leave, hr/tickets, index.html, portal
 */

*{box-sizing:border-box;margin:0;padding:0}
body{
  background: radial-gradient(1100px 600px at 75% -5%,#141f3a 0%,transparent 60%), linear-gradient(165deg,#0a1020 0%,#0c1428 55%,#0a0f1d 100%);
  min-height:100vh;
  color:var(--txt);
  font:15px/1.55 'Segoe UI',system-ui,sans-serif;
}
header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 36px 16px;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(10,16,32,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,163,92,.3);
}
.logo{
  width:46px;
  height:46px;
  border-radius:50%;
  flex:none;
  border:1px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo img{width:68%;height:auto;display:block}
h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:24px;letter-spacing:.06em}
.sub{color:var(--mut);font-size:13px}
.panel{
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,#16233f,#111b31);
  border:1px solid rgba(201,163,92,.18);
}
table{width:100%;border-collapse:collapse;font-size:13.5px}
tr:last-child td{border-bottom:none}
.code{font-family:Consolas,monospace;color:var(--gold2)}
.load{padding:40px 0;text-align:center;color:var(--mut)}
/* ---- the extravagant gold back button (Moe, 08 Aug 2026) ----
 * One definition now. It was 19 identical copies plus one degraded copy on /exec,
 * which was missing position/overflow, the ::after shine sweep, the bkbreathe
 * animation and the hover glow. /exec now inherits this and matches the rest.
 * /iocc keeps its own smaller grey button - that board has its own palette. */
.backbtn{
  display:inline-block;
  padding:9px 22px;
  border:1px solid var(--gold);
  color:var(--gold2) !important;
  background:rgba(201,163,92,.06);
  font-size:11px;
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:3px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  font-family:Georgia,'Times New Roman',serif;
  white-space:nowrap;
  transition:background .35s,color .35s,box-shadow .35s;
  animation:bkbreathe 4.5s ease-in-out 2s infinite;
}
.backbtn::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  left:-60px;
  background:linear-gradient(100deg,transparent,rgba(255,240,205,.4),transparent);
  transform:skewX(-20deg);
  animation:bksweep 6s ease-in-out 3s infinite;
}
.backbtn:hover{background:var(--gold);color:#141414 !important;box-shadow:0 0 34px rgba(201,163,92,.55)}

@keyframes bkbreathe{0%,100%{box-shadow:0 0 10px rgba(201,163,92,.14)} 50%{box-shadow:0 0 26px rgba(201,163,92,.38)}}
@keyframes bksweep{0%,74%{left:-60px}90%,100%{left:130%}}

/* ---------------------------------------------------------------------------------------
 * STAT CHIPS - the figure-and-label tiles every dashboard page draws (v=2, 27 Sep 2026).
 * Moe, from a reference screenshot: "I like this style of 3d chip", "inward not outward",
 * "more indent", then "do it on the whole portal". Ten pages carried their own near-identical
 * .kpi / .stat rule; this is the one copy, and the pages' copies are gone.
 *
 * The shape: a POCKET pressed into a raised surface panel. Light comes from the top-left, so
 * the shadow falls INSIDE the pocket along its top and left walls, and the bottom-right lip of
 * the opening catches the light. The face is darker than the panel. On this palette the lip
 * has to be LIGHTER than the surround or the depth vanishes. Never an outward drop shadow or a
 * tilt on these - that is the raised look he rejected.
 *
 * Markup is unchanged on every page: .cards/.kpis/.stats is the panel + grid, .kpi/.stat the
 * pocket, the figure is .n or a direct <b>, the label .l or a direct <span>; the label is moved
 * ABOVE the figure with flex order only. State colours (bad/warn/ok/good/neutral/zero) keep
 * their names from the pages. A page's own @media rule on the figure size still wins on source
 * order, as the cascade contract promises.
 * ------------------------------------------------------------------------------------- */
.cards,.kpis,.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;margin-top:16px;
  padding:22px;border-radius:24px;
  background:linear-gradient(160deg,#1d2e4f,#162443);border:1px solid rgba(201,163,92,.2);
  box-shadow:0 14px 40px rgba(3,6,14,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.kpi,.stat{
  display:flex;flex-direction:column;padding:18px 20px 16px;border-radius:18px;
  background:linear-gradient(150deg,#070c1a 0%,#0c1527 40%,#152342 100%);
  box-shadow:inset 16px 20px 34px rgba(0,0,0,.82),inset 7px 9px 12px rgba(0,0,0,.75),
             inset 2px 3px 3px rgba(0,0,0,.85),
             inset -6px -8px 16px rgba(150,180,240,.16),inset -2px -3px 3px rgba(190,210,250,.16),
             1px 1px 0 rgba(215,228,255,.34),2px 2px 0 rgba(215,228,255,.30),3px 3px 0 rgba(215,228,255,.24),
             4px 4px 0 rgba(215,228,255,.17),5px 5px 0 rgba(215,228,255,.11),6px 6px 0 rgba(215,228,255,.06),
             7px 7px 0 rgba(215,228,255,.03),
             -1px -1px 0 rgba(0,0,0,.75),-2px -2px 0 rgba(0,0,0,.5),-3px -3px 0 rgba(0,0,0,.25)}
.kpi .n,.kpi>b,.stat>b{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:30px;
  line-height:1.1;color:var(--gold2);margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .n small{font-size:14px;color:var(--mut)}
.kpi .l,.kpi>span,.stat>span{order:-1;display:block;color:var(--mut);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.kpi>small{display:block;margin-top:8px;color:var(--dim);font-size:12px}
.kpi.bad .n,.kpi.bad>b,.stat.bad>b{color:var(--red)}
.kpi.warn .n,.kpi.warn>b,.stat.warn>b{color:var(--amber)}
.kpi.ok .n,.kpi.ok>b,.kpi.good>b,.stat.good>b{color:var(--green)}
.kpi.neutral .n,.kpi.neutral>b{color:var(--gold2)}
.stat.zero>b{color:var(--dim)}