/* EVA Night / Morning: the look of HJ's N2 reference clips on every page (palette, type, surfaces, the orb switch, the ignite).
   Colours of the older stylesheets are remapped by the generated eva-night.css / eva-day.css; this sheet adds the feel.
   Night: warm black, ember glow, orange accent. Morning (HJ, 7 Oct; 10 Oct: black, no green at all): neutral morning white, white glass, black accent,
   black glass orbs (eva-orbs.mjs). Every accent below is var(--e-o) so both themes follow it. */
:root{--e-ease:cubic-bezier(.2,.8,.2,1);--e-sans:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--e-mono:"JetBrains Mono","Cascadia Code",Consolas,monospace}
html[data-theme="night"]{--e-o:#fd5c22;--e-o2:#ff8a4c;--e-o3:#ffd2b8;--e-bg:#100b08;--e-glow:#431d0d;--e-card:#0b0705;--e-card2:#150e0a;--e-line:#ffffff12;--e-line2:#ffffff21;--e-tx:#f3ede6;--e-tx2:#f3ede6b0;--e-tx3:#a39a93;--e-kick:#8a827c;--e-shadow:0 18px 50px #00000080;
 --k1:#ffd9c4;--k2:#ffa06a;--k3:#fe7a3c;--k4:#e65417;--k5:#c2400e;
 --map-bg:#120c08;--map-grid:#3a2416;--map-road:#8a4a26;--map-roof:#5a2a12;--map-wall:#2a160c;--map-edge:#ff8a4c;--map-text:#c9a58c;--map-pin:#fd5c22;--map-pin-edge:#ffd2b8;color-scheme:dark}
/* Morning "Dawn Opal" (HJ, 10 Oct night: the black Morning rejected, "change the full colouring system"; no green): a
   dawn sky (porcelain above, cream below), pearl-white glass cards, deep indigo ink for text and accent, a violet second
   accent, an opal knob; the orbs are opal and indigo glass (eva-orbs-engine.mjs) */
html[data-theme="day"]{--e-o:#2f2a8f;--e-o2:#6b4fe0;--e-o3:#ddd6ff;--e-bg:#f3f1f6;--e-glow:#ffe9e2;--e-card:#fffffff0;--e-card2:#ffffff;--e-line:#2a28700f;--e-line2:#2a28701f;--e-tx:#16173a;--e-tx2:#16173ac2;--e-tx3:#56587c;--e-kick:#7d7c9e;--e-shadow:0 14px 36px #2a28701a,0 2px 6px #2a28700d;
 --k1:#fff6f0;--k2:#ffc4d4;--k3:#b7a3ff;--k4:#6b4fe0;--k5:#2f2a8f;
 --map-bg:#f5f3f9;--map-grid:#e3dff0;--map-road:#bdb6d6;--map-roof:#e8e4f3;--map-wall:#efecf6;--map-edge:#2f2a8f;--map-text:#56587c;--map-pin:#d81e4e;--map-pin-edge:#ffffff;color-scheme:light}
/* (the old core's glows and its dotted star grid were remapped to grey haze and pepper under the orbs) */
html[data-theme="day"].eva-v2 :is(.orb-halo,.core-glow,.star-grid){display:none!important}
html[data-theme="day"] body{background:var(--e-bg)!important}
html[data-theme]{background:var(--e-bg)}
html[data-theme] body{background:var(--e-bg)}
html[data-theme] ::selection{background:color-mix(in srgb,var(--e-o) 33%,transparent);color:inherit}

/* ---------- the orb switch ---------- */
.eva-switch{position:fixed;top:calc(12px + env(safe-area-inset-top));right:16px;z-index:9000;width:74px;height:38px;border-radius:999px;border:1px solid var(--e-line2);padding:0;cursor:pointer;
 background:linear-gradient(180deg,#00000040,#ffffff08),var(--e-card2);box-shadow:inset 0 2px 6px #00000059,inset 0 -1px 0 #ffffff12,0 6px 18px #0000004d;color:var(--e-tx3);transition:background .4s,border-color .4s}
html[data-theme="day"] .eva-switch{background:linear-gradient(180deg,#0000000a,#ffffff80),#e6e6e4;box-shadow:inset 0 2px 5px #00000026,inset 0 -1px 0 #fff,0 6px 16px #0000001f}
.eva-switch.eva-switch-inline{width:50px!important;height:28px!important;min-height:0!important;min-width:0!important;padding:0!important}
.eva-switch.eva-switch-dash{top:auto;right:auto;left:24px;bottom:calc(22px + env(safe-area-inset-bottom));transition:left .3s var(--e-ease),bottom .3s var(--e-ease),background .4s,border-color .4s}
@media (max-width:899px){.eva-switch.eva-switch-dash{left:50%!important;bottom:auto!important;top:calc(14px + env(safe-area-inset-top));translate:-50% 0}}
.eva-switch-inline .eva-sw-knob{width:22px;height:22px;top:2px;left:2px}
html[data-theme="day"] .eva-switch-inline .eva-sw-knob{left:24px}
.eva-switch-inline .eva-sw-i{width:11px;height:11px}.eva-switch-inline .eva-sw-moon{left:7px}.eva-switch-inline .eva-sw-sun{right:7px}
.eva-switch-inline.eva-sw-go .eva-sw-knob{animation-name:evaStretchS}html[data-theme="day"] .eva-switch-inline.eva-sw-go .eva-sw-knob{animation-name:evaStretchSR}
@keyframes evaStretchS{40%{width:32px}}@keyframes evaStretchSR{40%{width:32px;left:14px}}
.eva-switch:focus-visible{outline:2px solid var(--e-o);outline-offset:3px}
.eva-sw-i{position:absolute;top:50%;width:15px;height:15px;transform:translateY(-50%);display:grid;place-items:center;opacity:.75}
.eva-sw-i svg{width:100%;height:100%}
.eva-sw-moon{left:11px}.eva-sw-sun{right:11px}
.eva-sw-knob{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:999px;
 background:radial-gradient(circle at 34% 28%,var(--k1) 0%,var(--k2) 22%,var(--k3) 48%,var(--k4) 78%,var(--k5) 100%);
 box-shadow:0 6px 16px color-mix(in srgb,var(--e-o) 40%,transparent),0 2px 4px #0000004d,inset 0 -3px 6px #0000002e,inset 0 2px 3px #ffffff66;
 transition:left .42s var(--e-ease),width .42s var(--e-ease)}
html[data-theme="night"] .eva-sw-knob{left:3px}
html[data-theme="day"] .eva-sw-knob{left:39px}
.eva-switch.eva-sw-go .eva-sw-knob{animation:evaStretch .42s var(--e-ease)}
@keyframes evaStretch{40%{width:46px}}
html[data-theme="day"] .eva-switch.eva-sw-go .eva-sw-knob{animation-name:evaStretchR}
@keyframes evaStretchR{40%{width:46px;left:23px}}

/* sign-in -> dashboard is one page: the browser keeps the last frame until the dashboard's first (no blank), and the two
   pages show the same tree in the same place, so the swap is invisible (both pages opt in) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
html.eva-v2 #entrySplash{background:transparent!important}
/* while the dashboard loads, the bridge frame (the sign-in page's last picture of the tree) keeps EVA's lub-dub */
/* (10 Oct: EVA's orbs start in a worker at the top of the page; the bridge, a picture of the same field, lies under the
   page (the lock screen's frames come in over it on time) until their first live frame (eva-v2.mjs dropBridge), and fades
   by itself on the compositor after 4 s if that never comes) */
html.eva-v2.entry-framed body::after{z-index:0;animation:evaBridgeDrift 6s cubic-bezier(.4,0,.2,1) both,evaBridgeOut .5s 4s cubic-bezier(.4,0,.2,1) forwards}
/* while it waits it drifts a little, so it never reads as a frozen picture (transform only: an animated filter repainted
   the whole screen every frame and slowed EVA's own start) */
@keyframes evaBridgeDrift{from{transform:scale(1)}to{transform:scale(1.025) translateY(-.4%)}}
@keyframes evaBridgeOut{to{opacity:0}}
@keyframes evaBridge{0%,100%{filter:brightness(1)}3%{filter:brightness(1.09)}10%{filter:brightness(1.01)}16%{filter:brightness(1.05)}26%{filter:brightness(1)}}

/* ---------- type: heavy grotesk headlines, mono kickers with the accent dot ---------- */
html[data-theme] body{font-family:var(--e-sans)}
html[data-theme] :is(h1,h2,.cc-mod-title,.nw-lk-title){letter-spacing:-.025em}
.eva-kicker,html[data-theme] :is(.cc-dock-head>span,.nw-lk h3,.nw-lk-head){font-family:var(--e-mono)!important;text-transform:uppercase;letter-spacing:.24em;font-size:10.5px;color:var(--e-kick)}
.eva-kicker::before,html[data-theme] .cc-dock-head>span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 .7em .08em 0;vertical-align:middle;background:var(--e-o);box-shadow:0 0 10px color-mix(in srgb,var(--e-o) 66%,transparent)}

/* ---------- surfaces: code-card tiles (rounded, near-black / white glass, hairline, soft depth) ---------- */
html[data-theme] :is(.cc-mod,.cc-top,.cc-talk,.cc-ticker,.nw-panel,.nw-bar,dialog){border-radius:16px;border:1px solid var(--e-line2)!important;box-shadow:var(--e-shadow),inset 0 1px 0 #ffffff0d!important}
html[data-theme] :is(.cc-mod,.nw-panel,dialog){background:linear-gradient(180deg,#ffffff06,transparent 30%),var(--e-card)!important;color:var(--e-tx2)}
html[data-theme="day"] :is(.cc-mod,.nw-panel,dialog){background:var(--e-card)!important}
html[data-theme] :is(.cc-mod,.nw-panel,dialog) :is(h1,h2,h3,strong,b){color:var(--e-tx)}
html[data-theme]{--cc-cut:inset(0 round 14px)}
html[data-theme] .cc-mod{padding:0!important}
/* the dock: no outer frame (HJ, 7 Oct) - every module is its own tile floating on the scene */
html[data-theme] .cc-dock{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;clip-path:none!important}
html[data-theme] .cc-dock::before,html[data-theme] .cc-dock::after{display:none!important}
html[data-theme] .cc-dock-head{background:none!important;border:0!important}
html[data-theme] .cc-dock-item{background:color-mix(in srgb,var(--e-card2) 90%,transparent)!important;border:1px solid var(--e-line2)!important;border-radius:12px;clip-path:none!important;color:var(--e-tx)!important;box-shadow:0 6px 18px #00000038}
html[data-theme="day"] .cc-dock-item{box-shadow:0 6px 16px #00000014}
html[data-theme] .cc-dock-list li{margin:5px 0}
html[data-theme] .cc-dock-item::before{opacity:.25}
html[data-theme] .cc-dock-item:hover,html[data-theme] .cc-dock-item:focus-visible{border-color:color-mix(in srgb,var(--e-o) 50%,transparent)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--e-o) 25%,transparent),0 0 24px color-mix(in srgb,var(--e-o) 15%,transparent)}
/* EVA's voice pill */
html[data-theme] .nw-jvoice{background:color-mix(in srgb,var(--e-card) 86%,transparent)!important;border:1px solid var(--e-line2)!important;color:var(--e-tx)!important;border-radius:999px}
html[data-theme] .nw-jvoice .cc-voice{color:var(--e-o)!important;background:color-mix(in srgb,var(--e-o) 12%,transparent)!important;border:1px solid color-mix(in srgb,var(--e-o) 35%,transparent)!important;border-radius:999px}
/* NOW cases round EVA: small tiles with an accent hairline, no scan line */
html[data-theme] .nw-frame{clip-path:inset(0 round 12px)!important;background:color-mix(in srgb,var(--e-card) 86%,transparent)!important;color:var(--e-tx)!important}
html[data-theme] .nw-frame::before{background:linear-gradient(150deg,#ffffff2e,#ffffff08 45%,color-mix(in srgb,var(--e-o) 40%,transparent))!important;border-radius:12px}
html[data-theme="day"] .nw-frame::before{background:linear-gradient(150deg,#00000026,#00000008 45%,color-mix(in srgb,var(--e-o) 45%,transparent))!important}
html[data-theme] .nw-frame::after{display:none}
html[data-theme] .nw-back .nw-frame{filter:none!important;opacity:.55}
html[data-theme] .nw-frame:is(:hover,:focus-visible){filter:drop-shadow(0 0 14px color-mix(in srgb,var(--e-o) 33%,transparent))!important}
html[data-theme] .nw-frame.nw-touched{filter:drop-shadow(0 0 6px var(--e-o3)) drop-shadow(0 0 20px color-mix(in srgb,var(--e-o) 66%,transparent))!important}
/* Location: top left under the header (jarvis-command.js placeLocation); the map follows the --map-* colours */
html[data-theme] .eva-loc{border-radius:14px!important;border:1px solid var(--e-line2)!important;background:color-mix(in srgb,var(--e-card) 92%,transparent)!important;box-shadow:var(--e-shadow)!important}
html[data-theme] .eva-loc header b{color:var(--e-o)!important}
html[data-theme] .eva-loc .map-model-controls button{color:var(--e-o)!important;border-color:color-mix(in srgb,var(--e-o) 35%,transparent)!important;background:color-mix(in srgb,var(--e-o) 8%,transparent)!important}
html[data-theme] .eva-loc-place{color:var(--e-tx)!important}
@media (max-width:899px){html[data-theme] .eva-loc{left:12px!important;right:auto!important;width:180px}}
/* lock frames: tiles on the scene (no backdrop blur: blurring an animated scene costs every frame) */
html[data-theme].eva-v2.nw-locked .nw-lock .nw-lk{border-radius:16px!important;border:1px solid var(--e-line2)!important;background:linear-gradient(180deg,#ffffff0a,transparent 40%),color-mix(in srgb,var(--e-card) 86%,transparent)!important;box-shadow:var(--e-shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* a closed frame fades out at the bottom (there is more inside); no pin-row stripe (the pillars and wires are gone) */
html[data-theme].eva-v2.nw-locked .nw-lock .nw-lk::after{background:linear-gradient(transparent,var(--e-card))!important;animation:none!important}
html[data-theme].eva-v2.nw-locked .nw-lock .nw-lk.eva-open{background:var(--e-card)!important}

/* ---------- ignite: a frame activates (N2 node graph): the outline flares with the accent, then settles ---------- */
@property --eva-sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
.eva-ignite{position:relative;animation:evaIgnite 1.4s var(--e-ease)}
.eva-ignite::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;
 background:conic-gradient(from var(--eva-sweep),transparent 0deg,var(--e-o) 40deg,var(--e-o3) 70deg,var(--e-o) 100deg,transparent 160deg,transparent 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 animation:evaSweep 1.1s linear both,evaFade 1.4s ease-out both}
@keyframes evaIgnite{0%{box-shadow:0 0 0 0 transparent,var(--e-shadow)}25%{box-shadow:0 0 0 1px var(--e-o),0 0 34px 4px color-mix(in srgb,var(--e-o) 45%,transparent),0 0 80px 12px color-mix(in srgb,var(--e-o) 15%,transparent)}100%{box-shadow:0 0 0 0 transparent,var(--e-shadow)}}
@keyframes evaSweep{to{--eva-sweep:360deg}}
@keyframes evaFade{0%,60%{opacity:1}100%{opacity:0}}

/* ---------- motion: frames and text arrive out of a blur (the clip's section changes) ---------- */
html[data-theme] .cc-mod>*{animation:evaRise .7s var(--e-ease) both}
html[data-theme] .cc-mod>*:nth-child(2){animation-delay:.06s}html[data-theme] .cc-mod>*:nth-child(3){animation-delay:.12s}html[data-theme] .cc-mod>*:nth-child(n+4){animation-delay:.18s}
@keyframes evaRise{from{opacity:0;filter:blur(8px);transform:translateY(8px)}}

/* ---------- the wordmark is plain type, never a button (HJ, 9 Oct: "ONE HJ should not be in a frame") ---------- */
html[data-theme] .wordmark{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html[data-theme] .wordmark:focus-visible{outline:2px solid var(--e-o)!important;outline-offset:6px;border-radius:4px}

/* the hidden show/hide-everything button (jarvis-now.js .rx-chest) stays invisible */
html.eva-v2[data-theme] .rx-chest{background:transparent!important;box-shadow:none!important;border:0!important}

/* ---------- Personal / Work: two separate switches, lit when on (HJ, 9 Oct) ---------- */
html[data-theme] .cc-modes{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;gap:8px}
html[data-theme] .cc-modes button{position:relative;height:32px;padding:0 15px 0 28px;border-radius:999px;border:1px solid var(--e-line2)!important;background:linear-gradient(180deg,#ffffff0a,transparent),var(--e-card2)!important;color:var(--e-tx2)!important;box-shadow:0 4px 12px #00000040,inset 0 1px 0 #ffffff12!important;transition:background .25s,color .25s,box-shadow .25s,border-color .25s,transform .15s}
html[data-theme="day"] .cc-modes button{background:#fff!important;box-shadow:0 3px 10px #00000014!important}
/* the LED: dark when off, glowing when on */
html[data-theme] .cc-modes button::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--e-tx3);opacity:.45;transition:background .25s,box-shadow .25s,opacity .25s}
html[data-theme] .cc-modes button:hover{border-color:color-mix(in srgb,var(--e-o) 45%,transparent)!important;color:var(--e-tx)!important}
html[data-theme] .cc-modes button[aria-pressed=true]{color:#1c120c!important;border-color:var(--e-o)!important;background:linear-gradient(180deg,var(--k2),var(--e-o))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--e-o) 40%,transparent),0 0 18px color-mix(in srgb,var(--e-o) 45%,transparent),inset 0 1px 0 #ffffff55!important}
html[data-theme="day"] .cc-modes button[aria-pressed=true]{color:#fff!important}
html[data-theme] .cc-modes button[aria-pressed=true]::before{background:#fff;opacity:1;box-shadow:0 0 8px #fff,0 0 14px var(--e-o)}
html[data-theme] .cc-modes button:active{transform:scale(.96)}

/* ---------- NOW cases: still tiles in a grid; one opened, the others stay and dim ---------- */
html[data-theme] .nw-frame{cursor:pointer;transition:filter .2s,box-shadow .2s,translate .2s var(--e-ease)}
html[data-theme] .nw-frame:is(:hover,:focus-visible){translate:0 -3px}
html.nw-case-open .nw-front .nw-frame{filter:saturate(.6) brightness(.55)!important;pointer-events:none}
html[data-theme] .nw-frame.nw-more{display:flex;align-items:center;justify-content:center;font:600 12px var(--e-mono);letter-spacing:.12em;color:var(--e-o)!important;width:196px;height:46px}
html[data-theme] .nw-frame.nw-more[hidden]{display:none}

/* ---------- EVA's symbol or face: the NOW frames make way ---------- */
html.eva-v2:is(.cc-has-centre,.eva-symbol) .nw-orbit{opacity:0!important;pointer-events:none!important;transition:opacity .5s}

@media (prefers-reduced-motion:reduce){.eva-sw-knob{transition:none}.eva-ignite,.eva-ignite::after,html[data-theme] .cc-mod>*,html.eva-v2.entry-framed body::after{z-index:0;animation:none!important}}

/* ENTER EVA (and every glyph button): its label shimmers through a colour animation in login.css whose cyan keyframes
   the theme sheets cannot remap (HJ, 10 Oct: "in the morning mode ENTER EVA colour to be changed to black, I cannot
   see the light blue"). Night: ember; Morning: black ink with a graphite shimmer. */
html[data-theme="night"] :is(.glyph-edge>span,.glyph-edge>svg){animation-name:evaGlyphNight}
html[data-theme="day"] :is(.glyph-edge>span,.glyph-edge>svg){animation-name:evaGlyphDay}
html[data-theme="day"] :is(.glyph-btn,.security-page .enter){color:#2f2a8f}
@keyframes evaGlyphNight{0%,80%,to{color:#e65417;text-shadow:0 0 3px #fd5c2233}20%{color:#ffd2b8;text-shadow:0 0 6px #ff8a4c73}40%{color:#ff8a4c;text-shadow:0 0 4px #fd5c2242}60%{color:#ffa06a;text-shadow:0 0 5px #ff8a4c57}}
@keyframes evaGlyphDay{0%,80%,to{color:#2f2a8f;text-shadow:none}20%{color:#6b4fe0;text-shadow:0 0 8px #6b4fe033}40%{color:#1f1b6e;text-shadow:none}60%{color:#c2185b;text-shadow:0 0 6px #ff7aa033}}