/* ==========================================================================
   FEI-JOURNEY v1 (2026-09-25) -- shared luxury design system + cinematic
   transitions + journey (XP / streak / badges / constellation) components
   for command.think4ei.com. Owner feedback: "when i click on something and it
   goes to another screen the screen is disjointed ... needs to be redesigned,
   more animated, gamification if possible, have a varying experience as you
   move through."

   PALETTE (governance/THINK4EI_BRAND_PALETTE_20260706.md, owner-confirmed
   "rich and wet"): Sapphire #0F52BA, Crimson #DC143C (true red, used
   generously), Gold #D4AF37, Cream #F5F0E1, Purple #6B21A8 / violet #7C3AED
   (a DISTINCT accent, never blended into crimson), Green #0F8A4A, Royal
   #1D4ED8, Navy #1E3A8A, Black #0B0B12. NO teal, NO magenta/plum/pink --
   including glow and blend results: crimson is never laid translucently over
   blue/violet anywhere in this file (gold or black always separates them),
   and no mix-blend-mode / additive compositing is used.
   ========================================================================== */
:root{
  --fj-sapphire:#0F52BA; --fj-crimson:#DC143C; --fj-gold:#D4AF37; --fj-cream:#F5F0E1;
  --fj-purple:#6B21A8; --fj-violet:#7C3AED; --fj-green:#0F8A4A; --fj-royal:#1D4ED8;
  --fj-navy:#1E3A8A; --fj-black:#0B0B12;
  /* lifted tones for text on black (same hue family, never pinker) */
  --fj-gold-hi:#F3D37A; --fj-crimson-hi:#F0283C; --fj-sapphire-hi:#5B8DEF; --fj-green-hi:#34C77B;
  --fj-violet-hi:#A78BFA;
  --fj-ink:#F5F0E1; --fj-ink-2:rgba(245,240,225,.72); --fj-ink-3:rgba(245,240,225,.48);
  --fj-line:rgba(212,175,55,.28); --fj-line-2:rgba(212,175,55,.14);
  --fj-glass:linear-gradient(155deg,rgba(30,30,42,.78) 0%,rgba(13,13,22,.84) 46%,rgba(11,11,18,.9) 100%);
  --fj-glass-flat:rgba(13,16,34,.66);
  --fj-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 24px 60px -24px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.45);
  /* "wet" = deep saturated body + a specular top highlight + a dark foot */
  --fj-wet-sapphire:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 42%),linear-gradient(160deg,#2D6FE0 0%,#0F52BA 45%,#0A2F75 100%);
  --fj-wet-crimson:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%),linear-gradient(160deg,#F0283C 0%,#DC143C 45%,#7E0A1F 100%);
  --fj-wet-gold:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 45%),linear-gradient(160deg,#F3D37A 0%,#D4AF37 45%,#8A6A12 100%);
  --fj-wet-green:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%),linear-gradient(160deg,#1FA862 0%,#0F8A4A 45%,#064A27 100%);
  --fj-wet-violet:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 42%),linear-gradient(160deg,#8B5CF6 0%,#7C3AED 40%,#4C1D95 100%);
  --fj-serif:'Cinzel','Cormorant Garamond',Georgia,serif;
  --fj-display:'Cormorant Garamond','Cinzel',Georgia,serif;
  --fj-sans:'Libre Franklin','Inter',system-ui,sans-serif;
  --fj-mono:'JetBrains Mono',ui-monospace,monospace;
  --fj-ease:cubic-bezier(.2,.8,.2,1); --fj-ease-in:cubic-bezier(.6,0,.8,.2);
  color-scheme:dark;
}
/* never a white frame between pages */
html{background:#0B0B12}
/* Cross-document @view-transition is deliberately NOT enabled: measured +1.4s
   navigation delay in Chromium with this layer's own covered hand-off, which is
   already seamless (dark veil out -> dark veil in). swap() uses same-document VT. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---------- living ground (aurora + starfield canvas) ---------- */
.fj-ground{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 120%,#0E1433 0%,#0B0B12 55%) , #0B0B12}
.fj-ground canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fj-ground::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* ---------- components ---------- */
.fj-glass{background:var(--fj-glass);border:1px solid var(--fj-line);border-radius:18px;box-shadow:var(--fj-shadow);
  position:relative}
.fj-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 30%)}
.fj-h1{font-family:var(--fj-serif);font-weight:700;letter-spacing:.04em;margin:0;font-size:clamp(24px,3.2vw,38px);
  background:linear-gradient(180deg,#FFF3C4 0%,#F3D37A 30%,#D4AF37 62%,#9C7A1C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(212,175,55,.25))}
.fj-h1 .ei,.fj-ei{color:var(--fj-crimson);-webkit-text-fill-color:var(--fj-crimson)}
.fj-kicker{font-family:var(--fj-mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--fj-gold)}
.fj-muted{color:var(--fj-ink-3)}
.fj-btn{--fj-b:var(--fj-wet-sapphire);font:700 14.5px/1 var(--fj-sans);letter-spacing:.04em;color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:13px 20px;cursor:pointer;background:var(--fj-b);box-shadow:0 10px 24px -10px rgba(15,82,186,.8),0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .18s var(--fj-ease),box-shadow .18s,filter .18s;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.fj-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.fj-btn:active{transform:translateY(0) scale(.98)}
.fj-btn.crimson{--fj-b:var(--fj-wet-crimson);box-shadow:0 10px 24px -10px rgba(220,20,60,.8),0 1px 0 rgba(255,255,255,.25) inset}
.fj-btn.gold{--fj-b:var(--fj-wet-gold);color:#1B1304;text-shadow:none;box-shadow:0 10px 24px -10px rgba(212,175,55,.7),0 1px 0 rgba(255,255,255,.4) inset}
.fj-btn.green{--fj-b:var(--fj-wet-green)}
.fj-btn.ghost{background:rgba(255,255,255,.03);border-color:var(--fj-line);box-shadow:none}
.fj-btn:focus-visible,.fj-tile:focus-visible,.fj-switch:focus-visible{outline:2px solid var(--fj-gold-hi);outline-offset:3px}

.fj-tile{--c:var(--fj-sapphire);display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--fj-ink);text-decoration:none;cursor:pointer;
  padding:18px 18px 16px;border-radius:16px;border:1px solid var(--fj-line-2);background:var(--fj-glass);box-shadow:var(--fj-shadow);position:relative;overflow:hidden;
  transition:transform .28s var(--fj-ease),border-color .28s,box-shadow .28s;font:inherit}
.fj-tile::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);opacity:.95;box-shadow:0 0 18px var(--c)}
.fj-tile:hover{transform:translateY(-4px) scale(1.012);border-color:var(--fj-line);box-shadow:var(--fj-shadow),0 18px 40px -18px var(--c)}
.fj-tile .t{font:700 17px/1.2 var(--fj-serif);letter-spacing:.03em}
.fj-tile .d{font-size:13px;color:var(--fj-ink-3);line-height:1.45}
.fj-tile .k{font:600 10.5px/1 var(--fj-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--c);filter:brightness(1.5)}
.fj-tile .sheen{position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);transform:translateX(-60%);transition:transform .9s var(--fj-ease);pointer-events:none}
.fj-tile:hover .sheen{transform:translateX(60%)}

/* ---------- transition stage ---------- */
.fj-stage{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden;contain:strict}
.fj-stage.block{pointer-events:auto}
.fj-veil{position:absolute;inset:0;background:#0B0B12;opacity:0}
.fj-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.fj-morph{position:absolute;border-radius:16px;border:1px solid rgba(212,175,55,.55);background:var(--fj-glass);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 30px 80px rgba(0,0,0,.6);
  will-change:left,top,width,height,border-radius,opacity}
.fj-caption{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;width:min(88vw,720px)}
.fj-caption .k{font:600 11px/1 var(--fj-mono);letter-spacing:.42em;text-transform:uppercase;color:var(--fj-gold);margin-bottom:12px}
.fj-caption .t{font:700 clamp(26px,4.4vw,52px)/1.08 var(--fj-serif);letter-spacing:.05em;
  background:linear-gradient(180deg,#FFF3C4,#D4AF37 65%,#9C7A1C);-webkit-background-clip:text;background-clip:text;color:transparent}
.fj-door{position:absolute;top:0;bottom:0;width:50.5%;background:
  linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0) 18%),linear-gradient(160deg,#1A2A5E 0%,#0E1330 45%,#0B0B12 75%);
  box-shadow:0 0 60px rgba(0,0,0,.7),inset 0 60px 90px -40px rgba(255,255,255,.06),inset 0 -60px 90px -40px rgba(0,0,0,.4)}
.fj-door::before{content:"";position:absolute;top:9%;bottom:9%;left:9%;right:9%;border:1px solid rgba(212,175,55,.22);
  border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 30px rgba(0,0,0,.35)}
.fj-door.l{left:0;border-right:2px solid var(--fj-gold);transform:translateX(-101%)}
.fj-door.r{right:0;border-left:2px solid var(--fj-gold);transform:translateX(101%)}
.fj-door .handle{position:absolute;top:50%;width:6px;height:110px;margin-top:-55px;border-radius:4px;background:var(--fj-wet-gold);box-shadow:0 0 18px rgba(212,175,55,.6)}
.fj-door.l .handle{right:18px}.fj-door.r .handle{left:18px}
.fj-door-seam{position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,241,196,.95),transparent);
  box-shadow:0 0 60px 20px rgba(255,224,140,.55),0 0 140px 60px rgba(255,224,140,.22)}
.fj-wipe{position:absolute;inset:-20% -30%;background:linear-gradient(105deg,rgba(11,11,18,0) 0%,rgba(11,11,18,.97) 18%,#0B0B12 50%);transform:translateX(110%)}
.fj-wipe::before{content:"";position:absolute;top:0;bottom:0;left:14%;width:3px;background:linear-gradient(180deg,transparent,var(--fj-gold-hi),var(--fj-gold),transparent);box-shadow:0 0 24px 6px rgba(212,175,55,.45)}
.fj-rocket{position:absolute;width:min(26vw,240px);aspect-ratio:408/533;background:url(rocket.png) center/contain no-repeat;filter:drop-shadow(0 0 22px rgba(212,175,55,.35));will-change:transform}
.fj-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid var(--c,var(--fj-gold));box-shadow:0 0 40px var(--c,var(--fj-gold)),0 0 0 1px rgba(255,255,255,.1) inset;transform:translate(-50%,-50%)}

/* arrival: page is born covered (set synchronously in <head> by fei-journey.js) */
html.fj-arriving body{opacity:0;animation:fjFailsafe 0s linear 5.5s forwards} /* CSS-only failsafe: page shows even if JS never runs */
@keyframes fjFailsafe{to{opacity:1}}
html.fj-arriving .fj-stage{opacity:1}

/* ---------- journey HUD (rendered INLINE into a host the page provides) ---------- */
.fj-hud{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;max-width:100%;font-family:var(--fj-sans);color:var(--fj-ink)}
.fj-hud[hidden]{display:none}
.fj-ring-svg{width:54px;height:54px;flex:none;filter:drop-shadow(0 0 8px rgba(212,175,55,.35))}
.fj-ring-svg .trk{stroke:rgba(212,175,55,.16)}
.fj-ring-svg .val{stroke:url(#fjGoldGrad);stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--fj-ease)}
.fj-ring-svg text{font:700 17px var(--fj-serif);fill:var(--fj-gold-hi)}
.fj-hud .lv{display:flex;flex-direction:column;gap:3px;min-width:0}
.fj-hud .lv b{font:700 14px/1 var(--fj-serif);letter-spacing:.06em;color:var(--fj-gold-hi)}
.fj-hud .lv span{font:500 11.5px/1 var(--fj-mono);letter-spacing:.08em;color:var(--fj-ink-3);white-space:nowrap}
.fj-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;border:1px solid var(--fj-line-2);background:rgba(11,11,18,.55);font:600 12.5px/1 var(--fj-sans);white-space:nowrap}
.fj-pill .flame{width:10px;height:14px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 75%,#F3D37A 0,#F0283C 55%,#7E0A1F 100%);box-shadow:0 0 10px rgba(240,40,60,.7);animation:fjFlick 1.6s ease-in-out infinite}
.fj-pill .star{width:9px;height:9px;transform:rotate(45deg);background:var(--fj-wet-gold);box-shadow:0 0 8px rgba(212,175,55,.8)}
@keyframes fjFlick{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.18) translateY(-1px)}}
.fj-toast{margin-top:10px;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid rgba(212,175,55,.5);background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(11,11,18,.85));animation:fjToast .7s var(--fj-ease)}
@keyframes fjToast{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}

/* medallion badges */
.fj-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
.fj-badge{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px 8px 12px;border-radius:16px;border:1px solid var(--fj-line-2);background:rgba(11,11,18,.4)}
.fj-medal{width:62px;height:62px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 32%),conic-gradient(from 210deg,#8A6A12,#F3D37A,#D4AF37,#8A6A12,#F3D37A,#8A6A12);
  box-shadow:0 0 0 3px rgba(11,11,18,.9),0 0 0 4px rgba(212,175,55,.6),0 8px 22px -6px rgba(212,175,55,.6)}
.fj-medal::after{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.3),rgba(255,255,255,0) 40%),var(--m,var(--fj-wet-sapphire));box-shadow:0 2px 6px rgba(0,0,0,.5) inset}
.fj-medal i{position:relative;z-index:1;font:700 17px/1 var(--fj-serif);color:#FFF6D8;text-shadow:0 1px 2px rgba(0,0,0,.6);font-style:normal}
.fj-badge.locked .fj-medal{filter:grayscale(1) brightness(.45);box-shadow:0 0 0 3px rgba(11,11,18,.9),0 0 0 4px rgba(255,255,255,.12)}
.fj-badge b{font:700 13px/1.15 var(--fj-serif);letter-spacing:.04em;color:var(--fj-gold-hi)}
.fj-badge.locked b{color:var(--fj-ink-3)}
.fj-badge small{font-size:11.5px;line-height:1.35;color:var(--fj-ink-3)}
.fj-bar{width:80%;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.fj-bar>span{display:block;height:100%;background:var(--fj-wet-gold)}
.fj-badge.new .fj-medal{animation:fjMint 1.4s var(--fj-ease)}
@keyframes fjMint{0%{transform:scale(.3) rotate(-120deg);opacity:0}60%{transform:scale(1.12) rotate(8deg);opacity:1}100%{transform:none}}

/* constellation */
.fj-constellation{width:100%;height:auto;display:block}
.fj-constellation .s{fill:rgba(245,240,225,.18);transition:fill .6s,r .6s}
.fj-constellation .s.on{fill:#F3D37A;filter:drop-shadow(0 0 4px rgba(243,211,122,.95))}
.fj-constellation .ln{stroke:rgba(212,175,55,.35);stroke-width:.6}
.fj-constellation .gl{font:600 8.5px var(--fj-mono);letter-spacing:.14em;fill:var(--fj-ink-3);text-transform:uppercase}
.fj-constellation .s.fresh{animation:fjIgnite 1.6s var(--fj-ease)}
@keyframes fjIgnite{0%{r:0}50%{r:5}100%{}}

.fj-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;color:var(--fj-ink-2);font:500 13px var(--fj-sans);padding:4px}
.fj-switch .knob{width:40px;height:22px;border-radius:12px;background:rgba(255,255,255,.12);position:relative;transition:background .25s}
.fj-switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#F5F0E1;transition:transform .25s var(--fj-ease)}
.fj-switch[aria-checked="true"] .knob{background:var(--fj-wet-green)}
.fj-switch[aria-checked="true"] .knob::after{transform:translateX(18px)}

/* ==========================================================================
   LEGACY SKIN -- adopt on any existing Command Center admin page by adding
   class="fj-lux" to <body> (+ the css/js links). Restyles the shared
   .wrap/.top/.card/.btn/.field/.chip vocabulary those pages already use;
   never touches their markup or scripts, so function is unchanged.
   ========================================================================== */
body.fj-lux{background:transparent!important;font-family:var(--fj-sans);
  --gold:#D4AF37;--g2:#D4AF37;--g3:#F3D37A;--sapphire:#0F52BA;--crimson:#DC143C;--green:#34C77B;--red:#F0283C;--amber:#E0A93A;
  --line:rgba(212,175,55,.26);--glass:rgba(13,16,34,.62);--cr1:#F5F0E1;--cr5:rgba(245,240,225,.62);--cr6:rgba(245,240,225,.38)}
body.fj-lux #bg,body.fj-lux .aur{display:none!important}
body.fj-lux .wrap{position:relative;z-index:2}
body.fj-lux .top{border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(212,175,55,0),rgba(212,175,55,.6),rgba(212,175,55,0)) 1;align-items:center}
body.fj-lux h1{font-family:var(--fj-serif);background:linear-gradient(180deg,#FFF3C4 0%,#F3D37A 30%,#D4AF37 62%,#9C7A1C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgba(212,175,55,.25))}
body.fj-lux h1 span{-webkit-text-fill-color:var(--fj-crimson-hi);color:var(--fj-crimson-hi)}
body.fj-lux .sub{color:var(--fj-gold)}
body.fj-lux .card{background:var(--fj-glass);border:1px solid var(--fj-line-2);border-radius:18px;box-shadow:var(--fj-shadow);position:relative;
  animation:fjRise .7s var(--fj-ease) both}
body.fj-lux .card:nth-of-type(2){animation-delay:.06s}body.fj-lux .card:nth-of-type(3){animation-delay:.12s}body.fj-lux .card:nth-of-type(4){animation-delay:.18s}body.fj-lux .card:nth-of-type(n+5){animation-delay:.24s}
body.fj-lux .card,body.fj-lux .fj-glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.fj-lux .card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(243,211,122,.55),transparent)}
body.fj-lux .card h2{font-family:var(--fj-serif);letter-spacing:.05em;color:var(--fj-gold-hi)}
body.fj-lux .btn{background:var(--fj-wet-sapphire);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 10px 24px -12px rgba(15,82,186,.9),0 1px 0 rgba(255,255,255,.22) inset}
body.fj-lux .btn.gold{background:var(--fj-wet-gold);color:#1B1304}
body.fj-lux .btn.ghost{background:rgba(255,255,255,.03);border-color:var(--fj-line);box-shadow:none}
body.fj-lux .btn.danger{background:transparent;border-color:rgba(240,40,60,.5);color:var(--fj-crimson-hi);box-shadow:none}
body.fj-lux .field input,body.fj-lux .field select,body.fj-lux .field textarea{background:rgba(11,11,18,.62);border-color:rgba(212,175,55,.22);border-radius:10px;transition:border-color .2s,box-shadow .2s}
body.fj-lux .field input:focus,body.fj-lux .field select:focus,body.fj-lux .field textarea:focus{outline:none;border-color:var(--fj-gold);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
body.fj-lux .chip{border-color:rgba(212,175,55,.2);background:rgba(11,11,18,.5);transition:transform .15s,border-color .2s}
body.fj-lux .chip:hover{transform:translateY(-1px);border-color:var(--fj-gold)}
body.fj-lux .chip.on{background:rgba(15,138,74,.2);border-color:rgba(52,199,123,.6);color:var(--fj-green-hi)}
body.fj-lux .crumb a{color:var(--fj-ink-2)}
body.fj-lux .crumb a:hover{color:var(--fj-gold-hi)}
body.fj-lux .fj-hudslot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@keyframes fjRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .fj-hud{gap:8px}.fj-ring-svg{width:44px;height:44px}.fj-pill{font-size:11.5px;padding:6px 9px}
  .fj-badges{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  body.fj-lux .card,.fj-badge.new .fj-medal,.fj-pill .flame,.fj-constellation .s.fresh{animation:none!important}
  .fj-tile,.fj-tile .sheen{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
}