/* ═══ GX/E Pro — GradeOS ENTERPRISE design system ════════════════════════════
   The one dark system for the entire logged-in app. Register: CALM, FAMILIAR
   enterprise SaaS (Stripe/Linear/Datadog) — clean sans UI text in sentence
   case, mono reserved for DATA (ids, hashes, timestamps, counts) and 10px
   eyebrow labels; no glows, no scan-lines, no marquee theater in the app.
   Tokens-first: pages consume --e-* variables; components are opt-in classes.
   Spec + copy-paste snippets: docs/GXE-SYSTEM.md.  Include AFTER gradeos-brand
   and gradeos-app-shell:  <link rel="stylesheet" href="/gradeos-enterprise.css?v=1">

   LAW OF LIME: #c8ff00 is status/action semantics ONLY — primary CTA, live
   indicators, selection, the mark. Data is ink. Alarms #ff5a5a · live #6dde8f
   · standby/warn #ffb547. No pure black, no white surfaces anywhere.        */

/* ── 1 · TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* surfaces — 4 levels, canvas → raised */
  --e-bg0:#0a0a0b;            /* canvas          */
  --e-bg1:#101013;            /* panel           */
  --e-bg2:#16161a;            /* card / tile     */
  --e-bg3:#1c1c21;            /* raised / hover  */
  /* hairlines */
  --e-line:#232329;
  --e-line-2:#2e2e36;
  /* ink */
  --e-text:#e8e8ea;
  --e-dim:#9a9aa3;
  --e-faint:#5a5a63;
  /* semantics — the only sanctioned colors */
  --e-accent:#c8ff00;         /* action/status/selection ONLY   */
  --e-accent-ink:#0a0a0b;     /* text on lime                   */
  --e-live:#6dde8f;           /* running / healthy / pass       */
  --e-warn:#ffb547;           /* standby / degraded / pending   */
  --e-alarm:#ff5a5a;          /* fault / block / destructive    */
  /* enterprise density scale (4/8px system, 13px table base) */
  --e-s1:4px; --e-s2:8px; --e-s3:12px; --e-s4:16px; --e-s5:24px; --e-s6:32px;
  --e-fs-table:13px; --e-fs-label:10px; --e-fs-micro:9px;
  --e-r:8px; --e-r-lg:12px;
  --e-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --e-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* ONE easing family + ONE utility curve (systems pass 2026-07-16).
     --e-ease     entrances / movement / reveals  (the .16,1,.3,1 family)
     --e-ease-inout  cyclic sweeps & loops only   (symmetric in-out)
     Anything bouncy (.34,1.56,…) or off-family (.2,.8,…/.22,.61,…) is
     off-register in the app — normalize to these two. */
  --e-ease:cubic-bezier(.16,1,.3,1);
  --e-ease-inout:cubic-bezier(.45,.05,.55,.95);
}
/* dark enforcement: converted pages must never show white canvas */
html.gx-enterprise{background:var(--e-bg0)}
html.gx-enterprise body{background:var(--e-bg0);color:var(--e-text)}

/* ── 2 · PAGE ANATOMY — masthead → context bar → content → drawers ─────── */
/* one-line page purpose, under every title (copy discipline) */
.e-purpose{font-family:var(--e-sans);font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--e-dim);margin-top:var(--e-s2);line-height:1.6}
.e-purpose b{color:var(--e-text);font-weight:600}

/* context bar — filters / search / saved views under the masthead */
.e-contextbar{position:sticky;top:calc(var(--shell-top,56px));z-index:20;
  display:flex;align-items:center;gap:var(--e-s3);flex-wrap:wrap;
  padding:var(--e-s3) var(--e-s4);margin:0 0 var(--e-s5);
  background:color-mix(in srgb,var(--e-bg1) 88%,transparent);
  border:1px solid var(--e-line);border-radius:var(--e-r-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body:not(.gx-shelled) .e-contextbar{top:0}

/* ── 3 · DARK LEDGER TABLE — the data-page standard ─────────────────────
   13px base · 4/8 spacing · tabular numerals · numerics right-aligned.   */
.e-table{width:100%;border-collapse:collapse;font-size:var(--e-fs-table);
  font-family:var(--e-sans)}
.e-table th{font:600 12px var(--e-sans);letter-spacing:.01em;
  text-transform:none;color:var(--e-dim);text-align:left;
  padding:10px var(--e-s3);border-bottom:1px solid var(--e-line-2);
  white-space:nowrap;user-select:none}
.e-table td{padding:10px var(--e-s3);color:var(--e-text);
  border-bottom:1px solid var(--e-line);line-height:1.5;vertical-align:middle}
.e-table td.dim{color:var(--e-dim)}
.e-table td.id{font-family:var(--e-mono);font-size:12px;color:var(--e-dim);letter-spacing:.02em}
.e-table th.num,.e-table td.num{text-align:right;font-family:var(--e-mono);
  font-variant-numeric:tabular-nums;font-size:12.5px}
.e-table tbody tr{transition:background .15s ease}
.e-table tbody tr:hover{background:var(--e-bg2);box-shadow:inset 2px 0 0 var(--e-accent)}
.e-table tbody tr.on{background:var(--e-bg2);box-shadow:inset 2px 0 0 var(--e-accent)}
.e-table tbody tr:last-child td{border-bottom:0}
/* framed variant — the forensic-ledger frame from devices.html */
.e-ledger{border:1px solid var(--e-line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--e-bg1) 78%,transparent),color-mix(in srgb,var(--e-bg0) 62%,transparent))}
/* numerals anywhere */
.e-num{font-family:var(--e-mono);font-variant-numeric:tabular-nums}

/* ── 4 · STATUS CHIP VOCABULARY — fleet-wide, one register ──────────────
   <span class="e-status is-live">LIVE</span>
   states: is-live · is-standby · is-offline · is-fault · is-sealed ·
           is-ship · is-block · is-pending (alias of standby)             */
.e-status{display:inline-flex;align-items:center;gap:6px;
  font:600 10px var(--e-sans);letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--e-line-2);
  color:var(--e-dim);background:color-mix(in srgb,var(--e-bg2) 70%,transparent);
  white-space:nowrap}
.e-status::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:currentColor;opacity:.9}
.e-status.is-live{color:var(--e-live);border-color:color-mix(in srgb,var(--e-live) 40%,transparent)}
.e-status.is-live::before{animation:ePulse 2s ease-in-out infinite}
.e-status.is-standby,.e-status.is-pending{color:var(--e-warn);border-color:color-mix(in srgb,var(--e-warn) 38%,transparent)}
.e-status.is-offline{color:var(--e-faint)}
.e-status.is-offline::before{opacity:.5;box-shadow:none}
.e-status.is-fault,.e-status.is-block{color:var(--e-alarm);border-color:color-mix(in srgb,var(--e-alarm) 45%,transparent);
  background:color-mix(in srgb,var(--e-alarm) 8%,transparent)}
.e-status.is-fault::before{animation:ePulse 1.1s ease-in-out infinite}
.e-status.is-sealed,.e-status.is-ship{color:var(--e-accent);border-color:color-mix(in srgb,var(--e-accent) 45%,transparent);
  background:color-mix(in srgb,var(--e-accent) 7%,transparent)}
@keyframes ePulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.e-status::before{animation:none !important}}

/* ── 5 · FORM SYSTEM — dark fields, lime focus hairlines ────────────────── */
.e-field{display:flex;flex-direction:column;gap:var(--e-s1)}
.e-field>label{font:500 12px var(--e-sans);letter-spacing:0;
  text-transform:none;color:var(--e-dim)}
.e-input,.e-field input,.e-field select,.e-field textarea{
  background:var(--e-bg2);border:1px solid var(--e-line-2);border-radius:var(--e-r);
  color:var(--e-text);font-family:var(--e-sans);font-size:13.5px;
  padding:var(--e-s2) var(--e-s3);outline:none;
  transition:border-color .18s,box-shadow .18s}
.e-input:hover{border-color:color-mix(in srgb,var(--e-accent) 22%,var(--e-line-2))}
.e-input:focus,.e-field input:focus,.e-field select:focus,.e-field textarea:focus{
  border-color:color-mix(in srgb,var(--e-accent) 50%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--e-accent) 8%,transparent)}
.e-input::placeholder{color:var(--e-faint)}

/* buttons — one primary (lime) per view; everything else is quiet chrome */
.e-btn{display:inline-flex;align-items:center;gap:var(--e-s2);
  padding:8px 14px;border-radius:var(--e-r);cursor:pointer;text-decoration:none;
  font:600 13px var(--e-sans);letter-spacing:0;text-transform:none;
  background:var(--e-bg2);border:1px solid var(--e-line-2);color:var(--e-text);
  transition:border-color .18s,color .18s,background .18s}
.e-btn:hover{border-color:color-mix(in srgb,var(--e-accent) 45%,transparent);color:var(--e-text)}
.e-btn.primary{background:var(--e-accent);border-color:var(--e-accent);color:var(--e-accent-ink)}
.e-btn.primary:hover{background:#d6ff33;color:var(--e-accent-ink)}
.e-btn.danger{color:var(--e-alarm);border-color:color-mix(in srgb,var(--e-alarm) 40%,transparent)}
.e-btn.danger:hover{background:color-mix(in srgb,var(--e-alarm) 10%,transparent)}
.e-btn[disabled]{opacity:.45;cursor:default;pointer-events:none}

/* filter chip (context bar) — selection = lime (sanctioned) */
.e-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font:500 12.5px var(--e-sans);letter-spacing:0;text-transform:none;
  background:var(--e-bg2);border:1px solid var(--e-line-2);color:var(--e-dim);
  padding:6px 13px;border-radius:999px;transition:all .18s}
.e-chip:hover{color:var(--e-text);border-color:color-mix(in srgb,var(--e-accent) 35%,transparent)}
.e-chip.on{background:var(--e-accent);border-color:var(--e-accent);color:var(--e-accent-ink)}
.e-chip .n{opacity:.6;margin-left:2px}

/* ── 6 · DETAIL DRAWER — row detail never page-jumps ────────────────────── */
.e-drawer-backdrop{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.e-drawer-backdrop.open{opacity:1;pointer-events:auto}
.e-drawer{position:fixed;top:0;right:0;bottom:0;z-index:9610;width:min(560px,94vw);
  background:var(--e-bg1);border-left:1px solid var(--e-line-2);
  box-shadow:-28px 0 70px rgba(0,0,0,.55);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.e-drawer.open{transform:translateX(0)}
.e-drawer-head{display:flex;align-items:center;gap:var(--e-s3);
  padding:var(--e-s4) var(--e-s5);border-bottom:1px solid var(--e-line);flex:none}
.e-drawer-title{font:700 15px var(--e-sans);letter-spacing:-.01em;color:var(--e-text);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.e-drawer-close{flex:none;width:32px;height:32px;border-radius:var(--e-r);
  border:1px solid var(--e-line-2);background:transparent;color:var(--e-dim);
  cursor:pointer;font-size:14px;line-height:1;transition:all .15s}
.e-drawer-close:hover{color:var(--e-text);border-color:var(--e-accent)}
.e-drawer-body{flex:1;overflow-y:auto;padding:var(--e-s4) var(--e-s5) var(--e-s6)}
/* key/value ledger rows inside drawers */
.e-kv{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:0}
.e-kv>dt{font:500 12px var(--e-sans);letter-spacing:0;text-transform:none;
  color:var(--e-dim);padding:var(--e-s2) 0;border-bottom:1px solid var(--e-line)}
.e-kv>dd{margin:0;font-size:12.5px;color:var(--e-text);padding:var(--e-s2) 0;
  border-bottom:1px solid var(--e-line);font-family:var(--e-mono);overflow-wrap:anywhere}

/* ── 7 · MODAL / CONFIRM — one pattern (GXShell.confirm builds this) ────── */
.e-modal-backdrop{position:fixed;inset:0;z-index:9700;background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s}
.e-modal-backdrop.open{opacity:1;pointer-events:auto}
.e-modal{width:min(440px,94vw);background:var(--e-bg1);border:1px solid var(--e-line-2);
  border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6);overflow:hidden;
  transform:translateY(10px) scale(.98);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.e-modal-backdrop.open .e-modal{transform:none}
.e-modal-head{padding:var(--e-s4) var(--e-s5) 0;
  font:700 15px var(--e-sans);color:var(--e-text)}
.e-modal-body{padding:var(--e-s2) var(--e-s5) var(--e-s4);font-size:13px;
  color:var(--e-dim);line-height:1.6}
.e-modal-foot{display:flex;justify-content:flex-end;gap:var(--e-s2);
  padding:var(--e-s3) var(--e-s5);border-top:1px solid var(--e-line);background:var(--e-bg0)}

/* ── 8 · TOAST — one system (GXShell.toast) ─────────────────────────────── */
#eToastHost{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:9800;display:flex;flex-direction:column;gap:var(--e-s2);align-items:center;
  pointer-events:none}
.e-toast{display:inline-flex;align-items:center;gap:10px;max-width:min(520px,92vw);
  background:var(--e-bg1);border:1px solid var(--e-line-2);border-radius:10px;
  padding:10px 16px;color:var(--e-text);font:500 13px var(--e-sans);
  box-shadow:0 14px 44px rgba(0,0,0,.55);
  opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.e-toast.on{opacity:1;transform:none}
.e-toast::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--e-accent);box-shadow:0 0 8px var(--e-accent)}
.e-toast.ok::before{background:var(--e-live);box-shadow:0 0 8px var(--e-live)}
.e-toast.warn::before{background:var(--e-warn);box-shadow:0 0 8px var(--e-warn)}
.e-toast.err{border-color:color-mix(in srgb,var(--e-alarm) 45%,transparent)}
.e-toast.err::before{background:var(--e-alarm);box-shadow:0 0 8px var(--e-alarm)}
.e-toast .e-ref{margin-left:4px}

/* ── 9 · SKELETON / EMPTY / ERROR — one honest-state language ───────────── */
.e-skel{position:relative;overflow:hidden;border-radius:6px;color:transparent !important;
  background:linear-gradient(90deg,var(--e-bg2) 0%,var(--e-bg3) 50%,var(--e-bg2) 100%);
  background-size:200% 100%;animation:eShimmer 1.35s ease-in-out infinite;pointer-events:none}
@keyframes eShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.e-skel{animation:none}}
.e-skel-row{display:flex;gap:var(--e-s3);align-items:center;
  padding:var(--e-s2) var(--e-s3);border-bottom:1px solid var(--e-line)}
.e-skel-row .e-skel{height:13px}

.e-empty{text-align:center;padding:72px 24px;border:1px dashed var(--e-line-2);
  border-radius:14px;color:var(--e-dim)}
.e-empty .dia{color:var(--e-accent);font-size:22px;display:block;margin-bottom:var(--e-s4)}
.e-empty .t{font:700 18px var(--e-sans);letter-spacing:-.01em;color:var(--e-text);
  margin-bottom:var(--e-s2)}
.e-empty .d{font:400 13px var(--e-sans);letter-spacing:0;text-transform:none;
  color:var(--e-dim);margin-bottom:var(--e-s5);line-height:1.6}
.e-empty .e-btn{margin:0 auto}

.e-error{text-align:center;padding:56px 24px;border:1px solid color-mix(in srgb,var(--e-alarm) 30%,transparent);
  border-radius:14px;background:color-mix(in srgb,var(--e-alarm) 4%,transparent);color:var(--e-dim)}
.e-error .t{font:700 16px var(--e-sans);color:var(--e-text);margin-bottom:var(--e-s2)}
.e-error .d{font:400 13px var(--e-sans);color:var(--e-dim);margin-bottom:var(--e-s3);line-height:1.6}
/* request-id chip — surfaced on every error state ("ref 87d2da37") */
.e-ref{display:inline-flex;align-items:center;gap:5px;
  font:600 var(--e-fs-micro) var(--e-mono);letter-spacing:.1em;color:var(--e-faint);
  border:1px solid var(--e-line-2);border-radius:5px;padding:2px 7px;user-select:all}
.e-ref::before{content:"ref";color:var(--e-faint);opacity:.7}

/* ── 10 · INSTRUMENT TILES — the console KPI pattern, normalized ────────── */
.e-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--e-s3)}
.e-tile{background:var(--e-bg2);border:1px solid var(--e-line);border-radius:var(--e-r-lg);
  padding:var(--e-s4);transition:border-color .18s}
.e-tile:hover{border-color:var(--e-line-2)}
.e-tile .k{font:500 12px var(--e-sans);letter-spacing:0;
  text-transform:none;color:var(--e-dim);margin-bottom:var(--e-s2)}
.e-tile .v{font:700 26px var(--e-sans);letter-spacing:-.02em;color:var(--e-text);
  font-variant-numeric:tabular-nums;line-height:1.1}
.e-tile .v small{font:500 12px var(--e-mono);color:var(--e-dim);margin-left:4px}
.e-tile .sub{font:400 11.5px var(--e-sans);letter-spacing:0;
  color:var(--e-faint);margin-top:var(--e-s1)}

/* ── 11 · SHELL FOOTER STATUS STRIP (healthz-backed; injected by shell) ─── */
.gxs-sys{display:flex;align-items:center;gap:8px;padding:8px 10px 2px;
  font:600 8.5px var(--e-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--e-faint)}
.gxs-sys .d{width:6px;height:6px;border-radius:50%;background:var(--e-faint);flex:none}
.gxs-sys.ok{color:var(--e-live)}
.gxs-sys.ok .d{background:var(--e-live);box-shadow:0 0 6px var(--e-live)}
.gxs-sys.warn{color:var(--e-warn)}
.gxs-sys.warn .d{background:var(--e-warn);box-shadow:0 0 6px var(--e-warn)}
.gxs-sys.err{color:var(--e-alarm)}
.gxs-sys.err .d{background:var(--e-alarm);box-shadow:0 0 6px var(--e-alarm)}

/* ── 12 · MOTION DEFAULTS — fewer, shorter, state-meaningful only ───────── */
@media (prefers-reduced-motion:reduce){
  .e-drawer,.e-modal,.e-toast,.e-contextbar{transition:none !important}
}

/* ═══ 13 · GX/E PRO — app-register enforcement (html.gx-enterprise only) ═══
   The calm bar: UI text is clean sans in sentence case; mono is DATA ONLY
   (ids, hashes, timestamps, counts) + 10px eyebrows; no glows, scan-lines,
   engineering-grid backdrops, or marquee theater inside the app. One easing
   family (.12s ease). Public/marketing pages are untouched.               */

/* buttons — brand.css pins its mono tracked-caps pill with !important;
   the app registers wins with scope + later order. Sentence case, 13px sans,
   consistent 34px control height. */
html.gx-enterprise body .btn,
html.gx-enterprise body .gos-btn,
html.gx-enterprise body button.btn,
html.gx-enterprise body a.btn,
html.gx-enterprise body .btn-export,
html.gx-enterprise body .btn-hdr,
html.gx-enterprise body .tile-btn{
  font-family:var(--e-sans) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  border-radius:8px !important;
  padding:0 14px !important;
  height:34px !important;
  line-height:32px !important;
  box-shadow:none !important;
  transition:background .12s ease,border-color .12s ease,color .12s ease !important;
}
/* calm hover acknowledgment — buttons never jump or lift in the app */
html.gx-enterprise body .btn:hover,    html.gx-enterprise body .btn:active,
html.gx-enterprise body .gos-btn:hover,html.gx-enterprise body .gos-btn:active,
html.gx-enterprise body .btn-export:hover,html.gx-enterprise body .btn-export:active,
html.gx-enterprise body .btn-hdr:hover,html.gx-enterprise body .btn-hdr:active,
html.gx-enterprise body .tile-btn:hover{transform:none !important}
html.gx-enterprise .tile-btn.danger{width:34px !important;padding:0 !important;
  font-size:15px !important;line-height:1 !important}

/* theater off — decorative sweeps, sheens, rings, splash walls, grid floors */
html.gx-enterprise .gx-sheen,
html.gx-enterprise .gx-ring,
html.gx-enterprise .gx-scanline,
html.gx-enterprise .gx-ig-light,
html.gx-enterprise #gxQuoteWall,
html.gx-enterprise .gx-ecg,
html.gx-enterprise #gxMonoSurge{display:none !important}
html.gx-enterprise .page::before{display:none !important}   /* engineering grid */

/* machined/holo lettering → flat, readable ink (no clipped gradients/glow) */
html.gx-enterprise .gx-machined,
html.gx-enterprise .kpi-value{
  background:none !important;-webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;animation:none !important}

/* eyebrow section heads survive at 10px with restrained tracking */
html.gx-enterprise .gx-sec-head{font-size:10px;letter-spacing:.08em;color:var(--e-faint)}
html.gx-enterprise .gx-sec-head .gx-idx{letter-spacing:.04em}
html.gx-enterprise .gx-sec-aside{letter-spacing:.06em}

/* masthead sub / purpose lines — sans, sentence case (content permitting) */
html.gx-enterprise .sub{font-family:var(--e-sans) !important;font-size:13px !important;
  letter-spacing:0 !important;text-transform:none !important;color:var(--e-dim) !important}

/* status words on tiles / pills — small, calm, still uppercase (status only) */
html.gx-enterprise .gos-status{font-size:10px;letter-spacing:.06em}
html.gx-enterprise .pill{font-family:var(--e-sans);font-size:11px;letter-spacing:.02em;
  text-transform:none;border-radius:999px}

/* focus that looks designed — one ring, everywhere */
html.gx-enterprise :focus-visible{
  outline:2px solid color-mix(in srgb,var(--e-accent) 60%,transparent);
  outline-offset:2px;border-radius:6px}

/* shared ⌘K dock — sentence case inside the app (dock markup says "Command") */
html.gx-enterprise .gxc-kbtn{font-family:var(--e-sans) !important;font-size:12px !important;
  letter-spacing:0 !important;text-transform:none !important}
html.gx-enterprise .gxc-kbtn:hover{transform:none !important;box-shadow:none !important}