/* LEXUN — the signature interaction, and the header's first paint.
   ====================================================================
   One small file, loaded first on every page. Two jobs:

   1. THE GLOW. Every interactive element in the top navigation, the menus, the
      command palette and the workspace lights up the instant a pointer touches
      it: the element brightens, a soft halo in the brand accent surrounds it,
      and its surface lifts. One system driven by custom properties — change
      --glow-color or --glow-strength on any ancestor and everything below it
      follows. Keyboard focus (:focus-visible) mirrors hover exactly; touch gets
      the same light through :active; a parent whose menu is open stays lit via
      [aria-expanded="true"]; and under prefers-reduced-motion the highlight is
      applied without animation rather than removed.

   2. THE HEADER'S SHAPE BEFORE JAVASCRIPT. The Search and Menu controls used
      to be built and styled by cmd.js after first paint, which re-laid the
      phone header once the script ran — a 0.32 layout shift on every marketing
      page. Their layout ships here instead; the buttons are in the markup.

   Tokens live in css/lexun.*.css (--acc, --line, --ink, --mut, --dim, the type
   and spacing scales, the breakpoint ladder). This file declares only its own
   six glow properties and reads the rest, so there is one token vocabulary,
   not two. The brand accent is the Rayleigh blue lexun.css names as the site's
   single accent (#5b9dff), which is why the light is blue on a monochrome page:
   the glow is where the accent lives.

   Specificity. The pages carry 663KB of inline CSS with their own hover rules
   (".lxhead .cta:hover{filter:brightness(.92)}" on 23 pages, ID-scoped rules
   on the dashboard, shorthand "transition:" on buttons and cards). The glow
   must win over all of them from this one file without !important, so every
   glow rule is prefixed with html:not(#_):not(#_) — two ID weights that name
   no element — and the target list sits inside :is(). A page can still
   override a single control deliberately by matching that weight.
   ==================================================================== */

:root{
  --glow-color:var(--acc,#5b9dff);  /* any colour value; the brand accent by default */
  --glow-strength:1;                /* 0 = off, 1 = standard, 1.5 = emphasis */
  --glow-in:150ms;--glow-out:250ms;--glow-ease:ease-out;
  --glow-lift:7%;                   /* surface lift; solid (filled) controls set this to 0% */
}

/* ---- the glow: what lights up --------------------------------------------
   The list is the contract, kept in four places below (rest, lit, reduced
   motion, touch). It covers: the marketing header (brand, links, Key, CTA,
   Search, Menu) and its phone sheet; the homepage header and its mobile menu;
   the command palette rows; the LEXUN Key panel; the workspace sidebar, top
   bar, mobile tab bar, step tabs, stage buttons, classification buttons; and
   every button, chip, tab, card action and tile link on the site.

   Rest state. The transition list is deliberately wide: it replaces the
   pages' own "transition:" shorthands (which this rule outranks), so it must
   carry the properties those shorthands animated — colour, background,
   border, transform, opacity — as well as the halo's own box-shadow and filter. */
html:not(#_):not(#_) :is(
  .lxhead .brand,.lxhead nav a,.lxhead .sgn,.lxhead .cta,.lxhead .lxcmd-btn,.lxhead .lxnav-btn,
  .lxnav-top .brand,.lxnav-list a,.lxnav-cta,.lxnav-x,
  header.nav .brand,header.nav .navbtn,header.nav .btn,header.nav .burger,#mmenu a,#mmenu .mclose,
  #lxcmd li.lxcmd-opt,.lxkp .go,.lxkp .x,.lxkp .tabs button,.lxkbtn,
  #sidenav .navlink,#sidenav .sidesearch,#sidenav .sidefoot a,#sidenav .sidefoot button,
  .topbar .sidetoggle,.topbar .tstate,.tabbar button,.keytabs button,.stage,.clsbtn,
  .btn,.pcta,.chip,[role="tab"],.lxtoc-all,.lxnext a,.tcard a,.wf a,#lxstick a,
  .dnav a,a.tile,.rep
){
  transition:box-shadow var(--glow-out) var(--glow-ease),filter var(--glow-out) var(--glow-ease),
             color var(--glow-out) var(--glow-ease),background-color var(--glow-out) var(--glow-ease),
             border-color var(--glow-out) var(--glow-ease),transform var(--glow-out) var(--glow-ease),
             opacity var(--glow-out) var(--glow-ease);
}
/* filled controls keep their fill; the halo does the lighting */
html:not(#_):not(#_) :is(.btn.primary,.btn.solid,.btn-primary,.pcta.solid,.lxhead .cta,.lxnav-cta,#lxstick a,.lxkp .go,
  .keytabs button[aria-selected="true"],.stage.now,[role="tab"][aria-selected="true"]){--glow-lift:0%}

/* Lit state: hover, keyboard focus, touch press, and a parent whose menu is
   open. Four shadow layers: the lift (an inset fill, so no page background
   image is disturbed), a 1px ring, and two halos. Every value scales with
   --glow-strength; the colour is --glow-color. */
html:not(#_):not(#_) :is(
  .lxhead .brand,.lxhead nav a,.lxhead .sgn,.lxhead .cta,.lxhead .lxcmd-btn,.lxhead .lxnav-btn,
  .lxnav-top .brand,.lxnav-list a,.lxnav-cta,.lxnav-x,
  header.nav .brand,header.nav .navbtn,header.nav .btn,header.nav .burger,#mmenu a,#mmenu .mclose,
  #lxcmd li.lxcmd-opt,.lxkp .go,.lxkp .x,.lxkp .tabs button,.lxkbtn,
  #sidenav .navlink,#sidenav .sidesearch,#sidenav .sidefoot a,#sidenav .sidefoot button,
  .topbar .sidetoggle,.topbar .tstate,.tabbar button,.keytabs button,.stage,.clsbtn,
  .btn,.pcta,.chip,[role="tab"],.lxtoc-all,.lxnext a,.tcard a,.wf a,#lxstick a,
  .dnav a,a.tile,.rep
):is(:hover,:focus-visible,:active,[aria-expanded="true"]),
html:not(#_):not(#_) #lxcmd li.lxcmd-opt[aria-selected="true"]{
  transition-duration:var(--glow-in);
  filter:brightness(calc(1 + .15 * var(--glow-strength)));
  box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--glow-color) calc(var(--glow-lift) * var(--glow-strength)),transparent),
             0 0 0 1px color-mix(in srgb,var(--glow-color) calc(45% * var(--glow-strength)),transparent),
             0 0 calc(14px * var(--glow-strength)) color-mix(in srgb,var(--glow-color) calc(30% * var(--glow-strength)),transparent),
             0 0 calc(34px * var(--glow-strength)) color-mix(in srgb,var(--glow-color) calc(12% * var(--glow-strength)),transparent);
}
/* the header links are text with 2px of side padding in the page CSS; the ring
   would hug the letters. A wider box with matching negative margins gives the
   light room without moving a single glyph. */
html:not(#_):not(#_) .lxhead nav a{padding:6px 8px;margin:0 -6px;border-radius:4px}
/* a lit text control is legible: its ink steps up with the light */
html:not(#_):not(#_) :is(.lxhead nav a,.lxhead .sgn,.lxhead .lxcmd-btn,.lxhead .lxnav-btn,header.nav .navbtn,
  #sidenav .navlink,#sidenav .sidesearch,.topbar .tstate,.dnav a,.tabbar button,.clsbtn,.stage:not(.now)):is(:hover,:focus-visible,[aria-expanded="true"]){color:var(--ink,#f4f4f4)}
/* filled controls keep their ink when lit. premium.css turns every hovered link
   the accent colour (a:not(.btn)…:hover{color:var(--acc)}), which on the white
   header CTA meant blue-on-white at 2.5:1 the moment a pointer touched it. */
html:not(#_):not(#_) :is(.lxhead .cta,.lxnav-cta,#lxstick a):is(:hover,:focus-visible,:active){color:var(--ink-on-acc,#000000)}
/* the keyboard ring stays as well as the glow: a halo alone can be faint on a bright button */
html:not(#_):not(#_) :is(
  .lxhead .brand,.lxhead nav a,.lxhead .sgn,.lxhead .cta,.lxhead .lxcmd-btn,.lxhead .lxnav-btn,
  .lxnav-top .brand,.lxnav-list a,.lxnav-cta,.lxnav-x,
  header.nav .brand,header.nav .navbtn,header.nav .btn,header.nav .burger,#mmenu a,#mmenu .mclose,
  .lxkp .go,.lxkp .x,.lxkp .tabs button,.lxkbtn,
  #sidenav .navlink,#sidenav .sidesearch,#sidenav .sidefoot a,#sidenav .sidefoot button,
  .topbar .sidetoggle,.topbar .tstate,.tabbar button,.keytabs button,.stage,.clsbtn,
  .btn,.pcta,.chip,[role="tab"],.lxtoc-all,.lxnext a,.tcard a,.wf a,#lxstick a,
  .dnav a,a.tile,.rep
):focus-visible{outline:2px solid var(--glow-color);outline-offset:2px}
/* a control that cannot be used does not light */
html:not(#_):not(#_) :is(.btn,.stage,.clsbtn,.chip,.tabbar button,.keytabs button):is(:disabled,[aria-disabled="true"]):is(:hover,:active){
  filter:none;box-shadow:none}

/* no animation, same highlight */
@media (prefers-reduced-motion:reduce){
  html:not(#_):not(#_) :is(
    .lxhead .brand,.lxhead nav a,.lxhead .sgn,.lxhead .cta,.lxhead .lxcmd-btn,.lxhead .lxnav-btn,
    .lxnav-top .brand,.lxnav-list a,.lxnav-cta,.lxnav-x,
    header.nav .brand,header.nav .navbtn,header.nav .btn,header.nav .burger,#mmenu a,#mmenu .mclose,
    #lxcmd li.lxcmd-opt,.lxkp .go,.lxkp .x,.lxkp .tabs button,.lxkbtn,
    #sidenav .navlink,#sidenav .sidesearch,#sidenav .sidefoot a,#sidenav .sidefoot button,
    .topbar .sidetoggle,.topbar .tstate,.tabbar button,.keytabs button,.stage,.clsbtn,
    .btn,.pcta,.chip,[role="tab"],.lxtoc-all,.lxnext a,.tcard a,.wf a,#lxstick a,
    .dnav a,a.tile,.rep
  ){transition:none}
}
/* on a touch screen there is no hover: the tap itself lights the control through
   :active above. A hover state that lingers after the tap is suppressed, so the
   light follows the finger rather than the last thing touched. */
@media (hover:none){
  html:not(#_):not(#_) :is(
    .lxhead .brand,.lxhead nav a,.lxhead .sgn,.lxhead .cta,.lxhead .lxcmd-btn,.lxhead .lxnav-btn,
    .lxnav-top .brand,.lxnav-list a,.lxnav-cta,.lxnav-x,
    header.nav .brand,header.nav .navbtn,header.nav .btn,header.nav .burger,#mmenu a,#mmenu .mclose,
    #lxcmd li.lxcmd-opt,.lxkp .go,.lxkp .x,.lxkp .tabs button,.lxkbtn,
    #sidenav .navlink,#sidenav .sidesearch,#sidenav .sidefoot a,#sidenav .sidefoot button,
    .topbar .sidetoggle,.topbar .tstate,.tabbar button,.keytabs button,.stage,.clsbtn,
    .btn,.pcta,.chip,[role="tab"],.lxtoc-all,.lxnext a,.tcard a,.wf a,#lxstick a,
    .dnav a,a.tile,.rep
  ):hover:not(:active):not(:focus-visible):not([aria-expanded="true"]){filter:none;box-shadow:none}
}

/* ---- header layout without waiting for JavaScript -----------------------
   The Search and Menu buttons are in the markup and cmd.js binds to them.
   Without JavaScript (no html.lxjs) the links stay visible and both buttons
   stay hidden, so nothing depends on the script running. Below 52rem the
   links move into the Menu sheet: measured at 640–830px the four links, the
   Key, Search and the CTA no longer share one row, and "Pricing" wrapped onto
   a line of its own under the brand (v166). Breakpoints are the site's
   ladder: 39.99rem (phone) and 51.99rem (tablet). */
.lxhead .in .lxcmd-btn{margin-left:auto;display:none;align-items:center;gap:8px;background:transparent;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:4px;color:var(--mut,#aeaeae);font:500 13px/1 inherit;padding:0 10px;height:32px;cursor:pointer}
html.lxjs .lxhead .in .lxcmd-btn{display:inline-flex}
.lxhead .in .lxcmd-btn kbd{font:inherit;font-size:12px;color:var(--dim,#919191);border:1px solid var(--line,rgba(255,255,255,.14));border-radius:3px;padding:2px 5px;line-height:1}
/* one auto margin, not two. Every page's header CSS gives both the Key link and
   the CTA margin-left:auto; a second auto on the Search button split the free
   space and left "Your Key" floating mid-header (v166). The first right-hand
   control takes the auto margin; everything after it sits in one cluster. */
.lxhead .in .sgn ~ .lxcmd-btn,.lxhead .in .lxcmd-btn ~ .cta{margin-left:0}
.lxhead .in .sgn ~ .lxcmd-btn{margin-left:12px}
.lxhead .in .lxnav-btn{display:none;align-items:center;gap:8px;order:4;height:44px;padding:0 12px;background:transparent;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:4px;color:var(--mut,#aeaeae);font:500 13px/1 inherit;cursor:pointer}
@media (max-width:51.99rem){
  .lxhead .in .lxcmd-btn kbd{display:none}
  html.lxjs .lxhead .in .lxnav-btn{display:inline-flex}
  html.lxjs .lxhead .in .lxcmd-btn{height:44px;padding:0 12px;order:3}
  html.lxjs .lxhead .in .sgn{order:2;min-height:44px;display:inline-flex;align-items:center}   /* brand first, then the controls (the Key link used to sort before the brand); one 44px touch height across the row */
  html.lxjs .lxhead .in .cta{order:3;min-height:44px;display:inline-flex;align-items:center}
  html.lxjs .lxhead .in{row-gap:0;gap:10px;flex-wrap:nowrap}
  html.lxjs .lxhead .in .brand{order:1}
  html.lxjs .lxhead .in nav{display:none}
}
@media (max-width:39.99rem){
  .lxhead .in .sgn ~ .lxcmd-btn{margin-left:0}
  html.lxjs .lxhead .in .cta{display:none}     /* the page CSS hides the CTA on phones; the tablet rule above must not undo it — the sheet carries it instead */
}