/* 4Ei LAYERED LIGHT v1 (2026-09-30) -- the shared "energy" layer for INSIDE a system's workspace.
   Owner 2026-09-30: systems adopt Fiscal's energy with glassmorphism, woken up with light and
   layered features, never blaring. One implementation, adopted natively by each system:
     1. <link rel="stylesheet" href="https://spine.think4ei.com/layered_light.css"> in the head
     2. the light-field markup (below) placed once, behind the system's app shell
     3. a few rules in the system's own stylesheet that map ITS glass surfaces / KPI tiles /
        tile rows onto the tokens here (--fl-glass-shadow, --fl-glass-shadow-lift, --fl-connector-*, --fl-node-o).
   Markup:
     <div class="fl-field" aria-hidden="true">
       <div class="fl-art"></div><div class="fl-rays"></div><div class="fl-bloom"></div>
       <div class="fl-arc fl-arc-outer"></div><div class="fl-arc fl-arc-inner"></div>
       <div class="fl-floor"><div class="fl-grid"></div><div class="fl-horizon"></div><div class="fl-glint"></div></div>
     </div>
   The four layers (back to front), same order as Fiscal v14:
     base field  = the system's own background (untouched here)
     domain art  = .fl-art, painted from --scene-bg-url (the scene resolver, fetchSceneAsset());
                   'none' until an approved scene exists for the system/tenant, so nothing is drawn
     light       = .fl-bloom (radiant bloom), .fl-arc (lit arcs), .fl-rays, .fl-floor (grid +
                   particle floor + horizon line + one slow glint), plus connector light on tiles
     glass       = the system's cards, lit rim + soft edge glow via --fl-glass-shadow
   Colors: tenant registry only (--feic1 lead colour, --feiAccent accent, set by FEI-TENANT-CHROME
   from tenant_brand_palettes.json); no colour is hard-coded to a tenant here.
   Intensity: ONE variable, --fl-k.  html[data-fei-light="gentle"] (default, 1),
   html[data-fei-light="more"] ("a little more", 1.6), html[data-fei-light="off"] (0).
   Motion: one very slow glint on the horizon (transform only); none under reduced motion.
   Glass values are Fiscal's precision glass profile (FEI-LVIS-DRAMATICS v2: inset top highlight,
   inset bottom depth, depth shadow, contextual edge glow), scaled down. Tables, forms and text
   are never lit (dailyAccentPolicy.protectedSlots). */
:root{
  --fl-k:1;
  --fl-primary:var(--feic1,#1D4ED8);
  --fl-accent:var(--feiAccent,#D4AF37);
  --fl-cx:50%;                 /* centre of the content column; a system with a left rail offsets it */
  --fl-rim:color-mix(in srgb,var(--fl-accent) calc(34% * var(--fl-k)),transparent);
  --fl-edge:color-mix(in srgb,var(--fl-accent) calc(14% * var(--fl-k)),transparent);
  --fl-glow:color-mix(in srgb,var(--fl-primary) calc(34% * var(--fl-k)),transparent);
  --fl-glow-lift:color-mix(in srgb,var(--fl-accent) calc(30% * var(--fl-k)),transparent);
  --fl-glass-shadow:inset 0 1px 0 var(--fl-rim),inset 0 0 0 1px var(--fl-edge),
    inset 0 -20px 34px -16px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.30),0 0 26px -6px var(--fl-glow);
  --fl-glass-shadow-lift:inset 0 1px 0 var(--fl-rim),inset 0 0 0 1px var(--fl-edge),
    inset 0 -20px 34px -16px rgba(0,0,0,.55),0 12px 34px rgba(0,0,0,.34),0 0 34px -4px var(--fl-glow-lift);
}
html[data-fei-light="gentle"]{--fl-k:1}
html[data-fei-light="more"]{--fl-k:1.6}
html[data-fei-light="off"]{--fl-k:0}

.fl-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.fl-field>*{position:absolute;pointer-events:none}

/* 2. domain art (far layer) */
.fl-art{inset:0;background:var(--scene-bg-url,none) center/cover no-repeat;opacity:calc(.14 * var(--fl-k));
  filter:saturate(1.1);-webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%)}

/* 3. light: radiant bloom behind the content column */
.fl-bloom{left:calc(var(--fl-cx) - 45vw);top:-30vh;width:90vw;height:80vh;opacity:calc(.26 * var(--fl-k));
  background:radial-gradient(closest-side,var(--fl-accent),transparent 70%),
             radial-gradient(60% 50% at 50% 60%,var(--fl-primary),transparent 80%);
  filter:blur(30px)}

/* 3. light: faint rays falling from above the column */
.fl-rays{left:calc(var(--fl-cx) - 70vw);top:-40vh;width:140vw;height:140vh;opacity:calc(.07 * var(--fl-k));
  background:repeating-conic-gradient(from 150deg at 50% 0%,var(--fl-accent) 0deg .5deg,transparent .5deg 7deg);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(60% 55% at 50% 0%,#000,transparent 75%)}

/* 3. light: two lit arcs around the content column (rings, masked so only the side arcs show) */
.fl-arc{left:var(--fl-cx);top:46%;border-radius:50%;transform:translate(-50%,-50%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 16%,transparent 34%,transparent 66%,#000 84%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 16%,transparent 34%,transparent 66%,#000 84%,#000 100%)}
.fl-arc-outer{width:max(118vh,86vw);height:max(118vh,86vw);border:1px solid var(--fl-accent);
  box-shadow:0 0 22px var(--fl-accent),inset 0 0 22px var(--fl-accent);opacity:calc(.34 * var(--fl-k))}
.fl-arc-inner{width:max(96vh,70vw);height:max(96vh,70vw);border:1px solid var(--fl-primary);
  box-shadow:0 0 30px var(--fl-primary),inset 0 0 30px var(--fl-primary);opacity:calc(.40 * var(--fl-k))}

/* 3. light: luminous grid + particle floor, horizon line, one slow glint */
.fl-floor{left:0;right:0;bottom:0;height:26vh;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 100%);
  mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 100%)}
.fl-floor>*{position:absolute}
.fl-grid{left:-50%;width:200%;bottom:0;height:100%;transform-origin:50% 100%;
  transform:perspective(520px) rotateX(62deg);opacity:calc(.26 * var(--fl-k));
  background:
    radial-gradient(circle,var(--fl-accent) 0 1px,transparent 1.6px) 0 0/24px 24px,
    repeating-linear-gradient(90deg,var(--fl-primary) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,var(--fl-primary) 0 1px,transparent 1px 72px)}
.fl-horizon{left:6%;right:6%;top:0;height:1px;opacity:calc(.55 * var(--fl-k));
  background:linear-gradient(90deg,transparent,var(--fl-accent) 30%,var(--fl-accent) 70%,transparent);
  box-shadow:0 0 14px 1px var(--fl-accent)}
.fl-glint{top:-40px;left:0;width:38vw;height:80px;opacity:calc(.40 * var(--fl-k));
  background:radial-gradient(closest-side,var(--fl-accent),transparent);filter:blur(14px);
  animation:flGlint 36s ease-in-out infinite alternate;will-change:transform}
@keyframes flGlint{from{transform:translateX(-10vw)}to{transform:translateX(72vw)}}

/* 3. light: connector line through a row of tiles + a lit node on each tile's left edge.
   A system either puts class="fl-tiles" / "fl-tile" in its own markup, or maps its existing
   tile-row / tile selectors onto the same tokens in its own stylesheet (see Procurement). */
:root{
  --fl-connector-bg:linear-gradient(90deg,transparent,var(--fl-accent) 12%,var(--fl-primary) 50%,var(--fl-accent) 88%,transparent);
  --fl-connector-glow:0 0 8px var(--fl-accent);
  --fl-connector-o:calc(.5 * var(--fl-k));
  --fl-node-o:calc(.8 * var(--fl-k));
}
.fl-tiles{position:relative}
.fl-tiles::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;pointer-events:none;
  background:var(--fl-connector-bg);box-shadow:var(--fl-connector-glow);opacity:var(--fl-connector-o)}
.fl-tile{position:relative}
.fl-tile::before{content:'';position:absolute;left:-3px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;
  pointer-events:none;background:var(--fl-accent);box-shadow:0 0 8px var(--fl-accent);opacity:var(--fl-node-o)}

@media (max-width:860px){
  .fl-rays{display:none}
  .fl-floor{height:18vh}
  .fl-arc-outer{width:150vw;height:150vw}.fl-arc-inner{width:122vw;height:122vw}
}
@media (prefers-reduced-motion:reduce){.fl-glint{animation:none;display:none}}
@media (forced-colors:active){.fl-field{display:none}}
@media print{.fl-field{display:none}}