/* ============================================================================
   LEXUN HUD — deep-space console skin (pass 9)
   One reviewable layer over the token sheet, for / and /platform only.
   Order: tokens → base atmosphere → layout chrome → components → utilities.
   Pure presentation: no markup, copy or behaviour changes.
   ============================================================================ */

/* ─────────────────────────── 1 · TOKENS ─────────────────────────── */
:root{
  --bg:#040404; --bg2:#070707;
  /* Glass rather than a flat fill: a 60%-opaque near-black is what the
     backdrop blur on the panels actually has something to work through. */
  --panel:rgba(20,20,22,.6); --surface:rgba(20,20,22,.6); --surface2:rgba(33,33,35,.62);
  --line:rgba(255,255,255,.16); --line2:rgba(255,255,255,.34);
  /* --ink/--mut/--dim, --acc/--acc2, --good/--warn/--bad and the whole radius
     scale used to be restated here. hud.css loads AFTER css/lexun.css, so
     those copies silently outranked the token layer — they were the reason
     /platform still drew 4px cards and a white accent long after the palette
     had been given a blue one and a 12px panel radius. Whatever the token
     layer owns is now inherited rather than repeated; what stays below is
     genuinely specific to the deep-space chrome and exists nowhere else.
     --acc3 is one of those: lexun.css does not define it, and three gradient
     stops here need a second accent reference, so it points at the first. */
  --acc3:var(--acc);
  --dur:var(--fast,180ms);
  --hud-grad:linear-gradient(92deg,var(--acc),var(--acc2));
  /* Was a two-stop white bloom. aaru glows nothing; the standing brief says
     remove glowing gradients. Kept as a token rather than deleted so the three
     `box-shadow:...,var(--hud-glow)` sites stay valid declarations. */
  --hud-glow:0 0 0 rgba(0,0,0,0);
  --hud-solid:#121212; /* no-backdrop-filter fallback surface */
}
/* light variant — same structure, light surfaces, darker accents (bug 6).
   This block loads AFTER every other token declaration, so the Settings
   toggle works again: html[data-theme="light"] now genuinely wins. */
html[data-theme="light"]{
  --bg:#f3f3f3; --bg2:#ececec;
  --panel:rgba(255,255,255,.72); --surface:rgba(255,255,255,.72); --surface2:rgba(245,245,245,.85);
  --line:rgba(78,78,78,.18); --line2:rgba(255,255,255,.28);
  --ink:#161616; --mut:#525252; --dim:#666666;
  --acc:#595959; --acc2:#ffffff; --acc3:#8d2b51;
  --good:#2a8564; --warn:#8a662d; --bad:#9d3d54;
  --ink-on-acc:#f9f9f9;
  --hud-grad:linear-gradient(92deg,#595959,#ffffff);
  --hud-glow:0 0 0 rgba(0,0,0,0);
  --hud-solid:#ffffff;
}

/* ─────────────────────── 2 · BASE ATMOSPHERE ───────────────────────
   Aurora (animated conic, blurred) under a 64px HUD grid + scanlines,
   both radially masked so they fade instead of tiling to the edges.
   Fixed-position pseudo-layers: zero layout impact, GPU-composited. */
body{background:var(--bg)}
body::before{
  content:"";position:fixed;inset:-30vmax;z-index:-2;pointer-events:none;
  background:conic-gradient(from 40deg at 60% 38%,
    transparent 0deg, rgba(255,255,255,.10) 70deg, transparent 140deg,
    rgba(255,255,255,.12) 210deg, transparent 275deg, rgba(255,255,255,.05) 320deg, transparent 360deg);
  filter:blur(70px);
  animation:none;display:none;
}
/* The page-wide grid mesh and scanlines are gone: a network mesh is the single
   most recognisable piece of stock AI-product styling, and the reference this
   was rebuilt against paints a plain black canvas and lets photography and type
   carry the page. */
body::after{
  content:none;position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%);
}
html[data-theme="light"] body::before{opacity:.5}
html[data-theme="light"] body::after{opacity:.55}
@keyframes hudAurora{to{transform:rotate(360deg)}}
::selection{background:rgba(255,255,255,.32);color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* gradient scrollbar on near-black track */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--acc),var(--acc2));border-radius:6px;border:2px solid var(--bg2)}

/* ─────────────────────────── 3 · LAYOUT CHROME ─────────────────────────── */
/* Marketing nav: translucent blur bar, gradient hairline base */
header.nav,header.lxhead{
  background:rgba(7,7,7,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.4),rgba(255,255,255,.4),transparent) 1;
}
@supports not (backdrop-filter:blur(1px)){header.nav,header.lxhead{background:var(--hud-solid)}}
html[data-theme="light"] header.nav{background:rgba(255,255,255,.7)}
.brand .u,.lxhead .brand .u{color:var(--ink)}
/* animated underline on nav links */
nav.links .navbtn,.lxhead nav a{position:relative}
nav.links .navbtn::after,.lxhead nav a::after{
  content:"";position:absolute;left:10%;right:90%;bottom:2px;height:2px;border-radius:2px;
  background:currentColor;opacity:0;transition:right var(--dur),opacity var(--dur);
}
@media (hover:hover){
  nav.links .navbtn:hover::after,.lxhead nav a:hover::after{right:10%;opacity:1}
}
/* dropdown menu — its own near-opaque gradient, never see-through (bug 2) */
.menu{
  background:linear-gradient(180deg,rgba(16,16,16,.97),rgba(10,10,10,.97));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line2);border-radius:var(--r-l);z-index:1200;
  box-shadow:0 24px 60px rgba(0,0,0,.55),var(--hud-glow);
}
html[data-theme="light"] .menu{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,245,245,.98))}
/* platform sidebar: gradient hairline edge + light-bar nav items */
nav.side{
  background:linear-gradient(180deg,rgba(16,16,16,.75),rgba(8,8,8,.8));
  border-right:1px solid transparent;
  border-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.3),transparent) 1;
}
html[data-theme="light"] nav.side{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,245,245,.92))}
.navlink{position:relative;transition:transform var(--dur),background var(--dur),color var(--dur)}
.navlink::before{
  content:"";position:absolute;left:0;top:50%;height:0;width:2px;border-radius:2px;
  background:var(--hud-grad);transform:translateY(-50%);transition:height var(--dur);
  box-shadow:0 0 8px rgba(255,255,255,.6);
}
@media (hover:hover){
  .navlink:hover{transform:translateX(3px)}
  .navlink:hover::before{height:60%}
}
.navlink[aria-current="page"]{
  background:linear-gradient(92deg,rgba(255,255,255,.14),rgba(255,255,255,.10));
  box-shadow:inset 0 0 18px rgba(255,255,255,.08);color:var(--ink)
}
.navlink[aria-current="page"]::before{height:70%}
/* footer + mobile chrome */
/* A FOOTER'S COLOUR MUST NOT DEPEND ON WHAT IS BEHIND IT.
   This was rgba(4,4,4,.7) -- 70% black over whatever the body happened to be.
   On every page but one the body is black, so the difference was invisible and
   the transparency bought nothing. On the homepage the body turns paper while
   the public-record chapter owns the viewport, and the footer composited to
   #4b4a49: a mid grey carrying #aeaeae links at 3.98:1 and #818181 headings at
   2.26:1, both below AA, on a short viewport where the two are on screen
   together. The colour is now stated rather than mixed. */
footer.lxfoot{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.4),rgba(255,255,255,.4),transparent) 1;background:#040404}
html[data-theme="light"] footer.lxfoot{background:#ffffff}
#mmenu,nav.tabbar{
  background:rgba(10,10,10,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
@supports not (backdrop-filter:blur(1px)){#mmenu,nav.tabbar{background:var(--hud-solid)}}
html[data-theme="light"] nav.tabbar{background:rgba(255,255,255,.94)}

/* ─────────────────────────── 4 · COMPONENTS ─────────────────────────── */
/* Headings: flat ink.

   These used to be gradient-clipped with a 22px bloom. Two things were wrong
   with that. It is the house style of every AI product launched since 2023, so
   it made the page look like everyone else's; and because the gradient is a
   background rather than a colour, the type could not follow the token set —
   on the light chapter the headline painted white-on-white and vanished.
   A headline that inherits `--ink` is legible in any chapter, in print, in
   forced-colours mode, and under a text selection. */
h1,.hero h1,h2,.sechead h2,.viewtitle{
  color:var(--ink);text-wrap:balance;letter-spacing:-.02em;
}
h1 em,h1 span,h2 em,h2 span,.viewtitle em{color:inherit;-webkit-text-fill-color:currentColor}
/* Eyebrows & chapter markers: pulsing dot + fading gradient rule */
.chmark,.kicker{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;color:var(--acc);
  display:flex;align-items:center;gap:10px;
}
.chmark::before,.kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--acc);box-shadow:none;
  animation:none;
}
.chmark::after{background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.3),transparent);height:1px}
@keyframes hudPulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Glass panels + corner tick. Scoped to real panels only — bare copy such as
   p.priv and .lead is explicitly untouched (bug 4). */
.card,.tile,.mod,.verdict,.rescard,.panel,.aud .a,.caps .c,.priv-grid .p,.workedex .rescard,.obcard,details,.hairbox{
  /* Flat surface, not a bevelled one. The 155deg gradient plus the inset white
     top edge was simulating a pane of glass lit from above — a physical
     metaphor that belongs to an operating system, not to a document. A single
     hairline and a 2.8% wash separate the panel from the page, and that is the
     entire job. */
  background:rgba(255,255,255,.028);
  border:1px solid var(--line);border-radius:var(--r-l);
  position:relative;overflow:hidden;
  box-shadow:none;
  transition:transform var(--dur),border-color var(--dur),box-shadow var(--dur);
}
html[data-theme="light"] .card,html[data-theme="light"] .tile,html[data-theme="light"] .mod,html[data-theme="light"] .verdict,html[data-theme="light"] .rescard,html[data-theme="light"] .panel,html[data-theme="light"] details,html[data-theme="light"] .obcard{
  background:linear-gradient(155deg,rgba(255,255,255,.85),rgba(245,245,245,.75));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
/* The glowing L-tick in every panel's top-right corner is removed. It was a
   targeting reticle drawn on a paragraph: it marked nothing, it meant nothing,
   and it appeared on every card on the page simultaneously, so it could not
   even function as emphasis. It is also the single most recognisable piece of
   sci-fi-dashboard styling, which is the look this site is explicitly not. */
.card::after,.tile::after,.verdict::after,.rescard::after,.panel::after,.obcard::after{
  content:none;
}
/* hover: lift, brighten, sheen sweep */
@media (hover:hover){
  .card:hover,.tile:hover,.mod:hover,.rescard:hover,.aud .a:hover,.caps .c:hover,.priv-grid .p:hover{
    transform:translateY(-2px);border-color:var(--line2);
    background:rgba(255,255,255,.05);
    box-shadow:none;
  }
  .card:hover::before,.tile:hover::before,.rescard:hover::before{
    content:none;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(233,233,233,.07) 46%,transparent 60%);
    animation:hudSheen .9s var(--dur) 1;
  }
}
@keyframes hudSheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
/* card heading links stay ink; prose links stay accent (bug 5) */
.card h2 a,.card h3 a,.tile a.title{color:var(--ink);text-decoration:none}
@media (hover:hover){.card h2 a:hover,.card h3 a:hover{color:var(--acc)}}
.card p a,details a{color:var(--acc)}
/* Buttons */
.btn.primary,.btn-primary,.pcta.solid{
  background:var(--acc);
  color:var(--ink-on-acc);border:1px solid transparent;
  border-radius:var(--r);position:relative;overflow:hidden;
  box-shadow:none;
  transition:transform var(--dur),box-shadow var(--dur),filter var(--dur);
}
/* The shimmer that swept across every primary button every 3.4s is removed.
   It read as a smear rather than a highlight once the accent became flat white,
   and a button that animates forever with nothing happening is decoration
   pretending to be feedback. */
.btn.primary::after,.btn-primary::after{
  content:none;position:absolute;top:-40%;bottom:-40%;width:36%;left:-60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:hudShimmer 3.4s ease-in-out infinite;
}
@keyframes hudShimmer{0%,64%{left:-60%}100%{left:140%}}
@media (hover:hover){
  .btn.primary:hover,.btn-primary:hover{transform:translateY(-1px);filter:brightness(.92);box-shadow:none}
}
.btn.ghost,.btn-ghost,.pcta{
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r);transition:border-color var(--dur),background var(--dur),box-shadow var(--dur);
}
@media (hover:hover){
  .btn.ghost:hover,.btn-ghost:hover{border-color:var(--acc);background:rgba(255,255,255,.12);box-shadow:0 0 16px rgba(255,255,255,.25)}
  .btn.primary:hover .ar,.btn-ghost:hover .ar{transform:translateX(5px)}
}
.btn .ar{display:inline-block;transition:transform var(--dur)}
/* Chips, tabs, steppers, classify buttons */
.chip,.badge,.stage,.clsbtn,[role="tab"]{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;
  border-radius:999px;border:1px solid var(--line);
  background:rgba(33,33,33,.4);color:var(--mut);
  transition:color var(--dur),border-color var(--dur),background var(--dur),transform var(--dur);
}
@media (hover:hover){
  .chip:hover,[role="tab"]:hover,.clsbtn:hover,.stage:hover{color:var(--acc);border-color:var(--acc);transform:translateY(-2px)}
}
[role="tab"][aria-selected="true"],.clsbtn[aria-pressed="true"],.chip[aria-pressed="true"],.stage.now{
  background:var(--acc);color:var(--ink-on-acc);border-color:transparent;
}
.stage.done{color:var(--good);border-color:rgba(98,239,185,.4)}
/* hide styled chrome on empty placeholder nodes (bug 3) */
.badge:empty,.clsbtn:empty,.chip:empty,.stage:empty{display:none}
/* Data display — a figure is the most important thing on the page, so it is
   set in plain ink at full contrast rather than faded into a gradient. */
.num,.bignum .v,.tv,.pstat .v,.big{
  font-variant-numeric:tabular-nums;color:var(--ink);
}
/* progress fills: gradient + inner highlight + glow + travelling specular.
   Scoped to the <i> fill ONLY — .bars/.brow/.track containers stay chromeless (bug 1). */
.track i,.bar i,.sbars .sb .tr i,.meterbar i,#hMeter{
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 12px rgba(255,255,255,.35);
  position:relative;overflow:hidden;border-radius:3px;
}
.track i::after,.bar i::after,.sbars .sb .tr i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  width:34%;animation:none;display:none;
}
@keyframes hudSweep{from{transform:translateX(-120%)}to{transform:translateX(340%)}}
.bars,.brow,.bars .brow{background:none;border:0;border-radius:0;overflow:visible}
/* Tables */
table th{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--dim)}
@media (hover:hover){tbody tr:hover td{background:rgba(255,255,255,.05)}}
/* Forms */
input,select,textarea{
  background:rgba(16,16,16,.6);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  transition:border-color var(--dur),box-shadow var(--dur);
}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:rgba(255,255,255,.85)}
input:focus,select:focus,textarea:focus{
  border-color:var(--acc);outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.18),0 0 18px rgba(255,255,255,.22);
}
label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
/* Final CTA band: dark mesh gradient, drifting masked grid, glowing top hairline */
.final{
  background:
    radial-gradient(60% 90% at 20% 10%,rgba(255,255,255,.16),transparent 60%),
    radial-gradient(55% 80% at 85% 90%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(40% 60% at 70% 20%,rgba(255,255,255,.07),transparent 60%),
    var(--bg2);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.6),rgba(255,255,255,.6),transparent) 1;
  position:relative;overflow:hidden;
}
.final::before{
  content:none;position:absolute;inset:-64px;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 64px);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 30%,transparent 80%);
  mask-image:radial-gradient(80% 80% at 50% 50%,#000 30%,transparent 80%);
  animation:hudDrift 32s linear infinite;
}
@keyframes hudDrift{to{transform:translate(64px,64px)}}
.final h2{color:var(--ink)}
.final p,.final .brandline{color:var(--mut)}
.final .btn.primary{background:var(--acc);color:var(--ink-on-acc)}
.final .btn.ghost{border-color:var(--line2);color:var(--ink)}

/* ─────────────────────────── 5 · UTILITIES ─────────────────────────── */
@media (max-width:56.99rem){
  body::after{background-size:auto;opacity:.7}
  .card,.tile,.verdict{border-radius:var(--r)}
}
/* keep glow away from body copy legibility */
p,li,.help,.lead{filter:none}
/* reduced motion: every HUD animation off */
@media (prefers-reduced-motion:reduce){
  body::before,body::after,.final::before,
  .btn.primary::after,.btn-primary::after,
  .chmark::before,.kicker::before,
  .track i::after,.bar i::after,.sbars .sb .tr i::after{animation:none}
  .card,.tile,.mod,.rescard,.navlink,.btn.primary,.btn-primary,.chip,[role="tab"]{transition:none}
}