/* =====================================================================
   LINEUP SCIENCE — shared brand layer
   DFS Analytics by Good Labs
   ---------------------------------------------------------------------
   Loaded by every page (index, formula, nucleus, reactor) BEFORE the
   page's own <style>. It owns:
     • the brand palette + type tokens
     • the per-tool accent  (set <html data-tool="formula|nucleus|reactor">)
     • the site nav, the tool masthead and the footer  (all .lus-*)
   Tool pages keep their own component CSS and read --accent / --alt.
   ===================================================================== */

:root{
  /* palette — LUS Stylesheet 9/11 */
  --lus-green:#22C55E;  --lus-green-rgb:34,197,94;     /* Science Green  · primary */
  --lus-gold:#FBBF24;   --lus-gold-rgb:251,191,36;     /* Reaction Gold  · The Nucleus */
  --lus-blue:#38BDF8;   --lus-blue-rgb:56,189,248;     /* Reactor Blue   · The Reactor */
  --lus-charcoal:#0B0F14;                              /* background */
  --lus-slate:#1F2937;                                 /* surfaces */
  --lus-steel:#9CA3AF;                                 /* text secondary */
  --lus-white:#F8FAFC;                                 /* text primary */

  /* type — Monument Extended is the brand headline face; Unbounded is the
     closest free web equivalent. Swap the first family here if you license it. */
  --f-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --f-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* per-tool accent. --accent = this tool's colour (buttons, steps, focus);
     --alt = the secondary action colour. Semantic colours (green = good,
     red = bad, gold = warning) are separate and never follow the accent. */
  --accent:var(--lus-green); --accent-rgb:var(--lus-green-rgb); --accent-ink:#052e14;
  --alt:var(--lus-gold);     --alt-rgb:var(--lus-gold-rgb);     --alt-ink:#3a2c02;
  --metal:linear-gradient(180deg,#FFFFFF 0%,#E5E7EB 38%,#A7AEB9 62%,#E9ECF0 100%);
}
html[data-tool="nucleus"]{
  --accent:var(--lus-gold);  --accent-rgb:var(--lus-gold-rgb);  --accent-ink:#3a2c02;
  --alt:var(--lus-green);    --alt-rgb:var(--lus-green-rgb);    --alt-ink:#052e14;
  --metal:linear-gradient(180deg,#FFF6D5 0%,#FDE68A 30%,#F5B81C 58%,#B7791F 80%,#FCD34D 100%);
}
html[data-tool="reactor"]{
  --accent:var(--lus-blue);  --accent-rgb:var(--lus-blue-rgb);  --accent-ink:#04263a;
  --alt:var(--lus-gold);     --alt-rgb:var(--lus-gold-rgb);     --alt-ink:#3a2c02;
}

html{background:var(--lus-charcoal)}
::selection{background:rgba(var(--accent-rgb),.32); color:#fff}

/* ---------------------------------------------------------------- nav */
.lus-nav{position:sticky; top:0; z-index:50;
  background:rgba(11,15,20,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(248,250,252,.08)}
.lus-nav-in{max-width:1280px; margin:0 auto; padding-inline:20px; min-height:60px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.lus-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--lus-white);
  flex:none; padding-block:8px}
.lus-mark{width:30px; height:30px; flex:none; overflow:visible;
  filter:drop-shadow(0 0 6px rgba(var(--lus-green-rgb),.45))}
.lus-mark .glass{fill:none; stroke:#E5E7EB; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round}
.lus-mark .liq{fill:var(--lus-green)}
.lus-mark .ball{fill:#0B0F14; stroke:#E5E7EB; stroke-width:1}
.lus-mark .lace{stroke:#E5E7EB; stroke-width:.9; stroke-linecap:round}
.lus-mark .bub{fill:var(--lus-green)}
.lus-word{font-family:var(--f-display); font-weight:800; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; line-height:1; white-space:nowrap}
.lus-word b{color:var(--lus-green); font-weight:800}

.lus-tools{display:flex; gap:6px; margin-left:auto; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.lus-tools::-webkit-scrollbar{display:none}
.lus-tool{--t:var(--lus-green); --t-rgb:var(--lus-green-rgb);
  display:flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap;
  padding:8px 14px; border-radius:9px; border:1px solid transparent;
  font-family:var(--f-ui); color:var(--lus-steel); transition:color .15s, background .15s, border-color .15s}
.lus-tool[data-t="nucleus"]{--t:var(--lus-gold); --t-rgb:var(--lus-gold-rgb)}
.lus-tool[data-t="reactor"]{--t:var(--lus-blue); --t-rgb:var(--lus-blue-rgb)}
.lus-tool i{width:8px; height:8px; border-radius:50%; background:var(--t); flex:none;
  box-shadow:0 0 8px rgba(var(--t-rgb),.7)}
.lus-tool .n{font-weight:700; font-size:12.5px; letter-spacing:.02em}
.lus-tool .d{font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.lus-tool:hover{color:var(--lus-white); background:rgba(248,250,252,.05)}
.lus-tool[aria-current="page"]{color:var(--lus-white); background:rgba(var(--t-rgb),.12);
  border-color:rgba(var(--t-rgb),.55); box-shadow:0 0 18px rgba(var(--t-rgb),.18) inset}
.lus-tool[aria-current="page"] .d{color:var(--t); opacity:1}
.lus-tool:focus-visible,.lus-brand:focus-visible{outline:2px solid var(--t,var(--lus-green)); outline-offset:2px}

@media (max-width:760px){
  .lus-nav-in{gap:0; padding-inline:16px}
  .lus-brand{padding-block:10px 6px}
  .lus-tools{margin-left:0; width:100%; padding-bottom:10px}
  .lus-tool{flex:1 0 auto; justify-content:center; padding:7px 11px}
  .lus-tool .d{display:none}
}

/* ----------------------------------------------------------- masthead */
.lus-mast{position:relative; overflow:hidden; border-bottom:1px solid rgba(248,250,252,.07);
  background:
    radial-gradient(520px 260px at 12% 55%, rgba(var(--accent-rgb),.20), transparent 70%),
    radial-gradient(700px 300px at 90% 0%, rgba(var(--accent-rgb),.07), transparent 70%),
    linear-gradient(rgba(248,250,252,.028) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(248,250,252,.028) 1px, transparent 1px) 0 0/28px 28px,
    #080B10}
.lus-mast::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.9) 20%, rgba(var(--accent-rgb),.9) 50%, transparent 85%)}
.lus-mast-in{position:relative; max-width:1280px; margin:0 auto; padding:22px 20px 24px;
  display:flex; align-items:center; gap:24px}
.lus-mast-icon{width:132px; height:132px; flex:none; margin:-10px -6px -12px -10px;
  filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),.35))}
.lus-mast-txt{min-width:0}
.lus-kicker{margin:0 0 8px; font-family:var(--f-ui); font-weight:600; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lus-steel)}
.lus-kicker b{color:var(--lus-green); font-weight:700}
.lus-title{margin:0; font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,5.2vw,50px); line-height:.95; letter-spacing:.01em;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(var(--accent-rgb),.28))}
.lus-the{display:block; font-size:.36em; letter-spacing:.34em; margin:0 0 .28em .06em; font-weight:700}
.lus-sub{margin:12px 0 0; font-family:var(--f-ui); font-weight:700; font-size:12px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--lus-white)}
.lus-tagline{margin:6px 0 0; font-family:var(--f-ui); font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.lus-tagline::before{content:''; display:inline-block; width:26px; height:2px; margin-right:10px;
  vertical-align:middle; background:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),.8)}
.lus-mast-aside{margin:0 0 0 auto; padding:0 0 0 22px; list-style:none; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  border-left:1px solid rgba(var(--accent-rgb),.22);
  font-family:var(--f-ui); font-weight:600; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(var(--accent-rgb),.62)}
.lus-mast-aside li::before{content:'+ '; color:rgba(248,250,252,.3)}
@media (max-width:900px){ .lus-mast-aside{display:none} }
@media (max-width:560px){
  .lus-mast-in{gap:12px; padding:16px 16px 18px}
  .lus-mast-icon{width:86px; height:86px; margin:-6px -4px -6px -8px}
  .lus-kicker{font-size:9px; letter-spacing:.18em; margin-bottom:6px}
  .lus-kick-x{display:none}
  .lus-sub{font-size:10px; letter-spacing:.18em; margin-top:9px}
  .lus-tagline{font-size:9.5px; letter-spacing:.16em}
  .lus-tagline::before{width:16px; margin-right:7px}
}

/* ------------------------------------------------------------- footer */
.lus-foot{border-top:1px solid rgba(248,250,252,.08); margin-top:28px; background:#080B10}
.lus-foot-in{max-width:1280px; margin:0 auto; padding:28px 20px 18px;
  display:flex; align-items:center; gap:18px 32px; flex-wrap:wrap}
.lus-foot-word{font-family:var(--f-display); font-weight:800; font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--lus-white)}
.lus-foot-word b{color:var(--lus-green); font-weight:800}
.lus-foot-sub{margin-top:5px; font-family:var(--f-ui); font-weight:600; font-size:9.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--lus-steel)}
.lus-foot-links{display:flex; gap:6px 20px; flex-wrap:wrap}
.lus-foot-links a{font-family:var(--f-ui); font-weight:600; font-size:12px; color:var(--lus-steel);
  text-decoration:none}
.lus-foot-links a:hover{color:var(--lus-white)}
.lus-foot-tag{margin-left:auto; font-family:var(--f-ui); font-weight:700; font-size:10.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--lus-green)}
.lus-foot-legal{max-width:1280px; margin:0 auto; padding:0 20px 26px; font-family:var(--f-ui);
  font-size:11px; color:#5b6472}
.lus-foot-disc{max-width:1280px; margin:-14px auto 0; padding:0 20px 26px; font-family:var(--f-ui);
  font-size:10.5px; line-height:1.5; color:#6b7280}
@media (max-width:760px){ .lus-foot-tag{margin-left:0} }
