/* =========================================================================
   WhyReboot portal shell — CHARCOAL skin.
   Loaded LAST (after each page's inline <style>) on every admin/partner shell
   page so the whole site reads as a clean, even, NEUTRAL dark charcoal.
   Deliberately NOT warm: earlier warm-brown values (bg, header, taupe text)
   read as a sickly yellow on wide surfaces — the palette here is hue-neutral
   (R≈G≈B) dark grey with NO blue/violet and NO orange glow. The orange stays
   ONLY as the deliberate accent (buttons, active nav, links).

   Keyed on the shared selectors every shell page uses (body / header / .bar /
   .sidenav / :root / .toast). Palette lives here ONCE — tweak in one place.
   ========================================================================= */

:root{
  --ink:#f4f4f6;      /* near-white, neutral (was warm cream) */
  --gray:#c9cace;     /* muted text — neutral light grey (warm taupe read yellow) */
  --faint:#9ea0a5;    /* faint labels — neutral grey */
  --glass:rgba(255,255,255,.055);   /* neutral glass (was warm-white) */
  --glass-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.11);   /* neutral hairline (was warm) */
  --stroke-2:rgba(255,255,255,.17);
}

/* Body: even NEUTRAL charcoal — no cool navy, no warm brown, no radial glow. */
body{
  background:linear-gradient(160deg,#111112 0%,#0d0d0d 50%,#090909 100%);
  background-attachment:fixed;
}

/* Chrome surfaces the pages hardcode cool — re-tint NEUTRAL charcoal.
   Drop the inline `saturate(140%)` on the translucent bars: it amplified the
   background's warmth into a yellow cast (the header especially). */
header{background:rgba(17,17,18,.62);border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.sidenav{background:rgba(13,13,14,.72);border-right:1px solid var(--stroke);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.toast{background:rgba(20,20,22,.96)}
select option{background:#141416}

/* Several tool pages (cw-tickets, vpn, downloads, switch-sheets, …) carry their
   OWN dark background under `.embed body` — a cool-navy base with an orange +
   violet glow — which outranks the plain `body` rule above, so it survived only
   when a tool was shown embedded in the shell (most visible on the sparse Chatbot
   page). Flatten it to the same neutral charcoal. Higher specificity than
   `.embed body`, so it wins. */
html.embed body{background:linear-gradient(160deg,#111112 0%,#0d0d0d 50%,#090909 100%);background-attachment:fixed}

/* =========================================================================
   "Crystal" glass — the same faceted panel material used across Bibliotek,
   extended site-wide to the shell pages' cards/tiles/panels. Diagonal glass
   fill + hard bevel + a soft top-left corner sheen (::before). Visual-only:
   uses isolation + z-index:-1 (no overflow:hidden, no per-child z-index) so it
   never clips dropdowns or breaks a page's layout; page-specific modifier
   classes (.card.warn etc.) keep winning by specificity. No orange glow.
   ========================================================================= */
/* FLAT, SOLID, no bevel, no blur, no corner sheen (Bjorn, 4 Nov 2026): what Predictive Models actually shows on screen.
   test/one-look.test.mjs fails if the bevel recipe comes back anywhere.
   Covers every tool page's content panel whatever class it uses: .card (Access Mgmt,
   Feedback, Switch Sheets, VPN), .tile (Home, Console), .panel (VPN, chatbot),
   the chatbot .console, and the Downloads .drow/.infobox. PLAIN selectors (0,1,0)
   so page state modifiers (.card.alert, .tile.k-acc, .tile.soon — all 0,2,0) still
   win; wr-shell loads AFTER each page's inline <style>, so the base look wins by order.
   */
.card,.tile,.panel,.console,.drow,.infobox{position:relative;isolation:isolate;
  border:1px solid var(--stroke);
  background:var(--card,#14161b);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none}

/* Brand font on technical/monospace values across the shell pages too. */
.mono{font-family:Roboto,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* =========================================================================
   LIGHT MODE — the light twin of the Predictive Models look (Bjørn, 27 Sep 2026: light/dark on every module, one
   switch left of the e-mail). html[data-theme="light"] is set by /ell/wr-theme.js from localStorage 'qt.theme'.
   Same palette as Quotes' light theme (public/quotes/app.css --pm-* tokens), so the whole of Elektra matches.
   Pod/row/tile rules use :where() so they keep the dark rules' specificity (0,1,0): a page's own modifiers
   (.card.warn, .tile.k-acc …) still win, exactly as they do in dark. Page-specific colors are each page's job.
   ========================================================================= */
html[data-theme="light"]{
  --ink:#1f2125; --gray:#4b5563; --faint:#6b7280;
  --glass:rgba(0,0,0,.035); --glass-2:rgba(0,0,0,.07);
  --stroke:rgba(0,0,0,.10); --stroke-2:rgba(0,0,0,.17);
  --card:#ffffff; --panel-solid:#ffffff; --panel-solid-2:#f1f2f4;
  color-scheme:light;
}
html[data-theme="light"] body,
html[data-theme="light"].embed body{background:linear-gradient(160deg,#f6f6f7 0%,#f1f1f2 50%,#ebebec 100%);background-attachment:fixed;color:#1f2125}
html[data-theme="light"] header{background:rgba(255,255,255,.88);border-bottom-color:rgba(0,0,0,.10)}
html[data-theme="light"] .sidenav{background:rgba(255,255,255,.88);border-right-color:rgba(0,0,0,.10)}
html[data-theme="light"] .toast{background:#ffffff;color:#1f2125;box-shadow:0 12px 34px rgba(0,0,0,.18)}
html[data-theme="light"] select option{background:#ffffff;color:#1f2125}
:where(html[data-theme="light"]) .card,:where(html[data-theme="light"]) .tile,:where(html[data-theme="light"]) .panel,
:where(html[data-theme="light"]) .console,:where(html[data-theme="light"]) .drow,:where(html[data-theme="light"]) .infobox{
  border:1px solid rgba(0,0,0,.10);background:#fcfcfd;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none}