/* ============================================================
   LEXUN design system — single source of truth (pass 6)
   Dark-instrument identity: hairline grid, weight-flat type,
   hierarchy from size + tracking + colour only.
   ============================================================ */
:root{
  /* colour */
  --bg:#05070d; --bg2:#070b14; --panel:#0b1120; --surface:#0b1120; --surface2:#101830;
  --line:rgba(126,168,255,.14); --line2:rgba(126,168,255,.22);
  --ink:#eef4ff; --mut:#9fb0cd; --dim:#8093b5; --ink-on-acc:#05070d;
  --acc:#4d8dff; --acc2:#38bdf8; --cy:#38bdf8; --g:#4d8dff;
  --good:#2fd08c; --warn:#f0a63a; --bad:#f26d7e;
  /* type families (faces load from /fonts/fonts.css) */
  --sans:'Inter Tight','Inter Tight Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,Menlo,Consolas,monospace;
  /* modular type scale — fluid, endpoints land ON the scale */
  --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:17px;
  --t-lg:clamp(17px,1vw + 9px,20px);
  --t-xl:clamp(20px,1.4vw + 10px,26px);
  --t-2xl:clamp(26px,2vw + 12px,34px);
  --t-3xl:clamp(34px,2.6vw + 16px,44px);
  --t-4xl:clamp(40px,3.4vw + 18px,58px);
  /* line-height ratios */
  --lh-display:1.12; --lh-heading:1.2; --lh-body:1.5; --lh-label:1.35;
  /* optical tracking by size */
  --ls-4xl:-1.6px; --ls-3xl:-1.1px; --ls-2xl:-0.7px; --ls-xl:-0.4px; --ls-lg:-0.2px; --ls-caps:0.9px;
  /* spacing — 4px grid + section scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:80px; --s8:120px; --s9:176px;
  /* radius: exactly two */
  --r:4px; --r-full:999px;
  --r-s:4px; --r-l:4px; /* legacy aliases resolve to the one panel radius */
  /* motion: two durations, one easing */
  --fast:150ms; --base:200ms; --ease:cubic-bezier(.4,0,.2,1);
  --tap:44px;
}
/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:400}
h1{font-size:var(--t-4xl);line-height:var(--lh-display);letter-spacing:var(--ls-4xl);max-width:24ch}
h2{font-size:var(--t-2xl);line-height:var(--lh-heading);letter-spacing:var(--ls-2xl);max-width:26ch}
h3{font-size:var(--t-lg);line-height:var(--lh-heading);letter-spacing:var(--ls-lg)}
p{max-width:68ch}
.eyebrow,.kicker{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--acc2)}
/* ---------- container ---------- */
.lx-wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,2.8vw,32px)}
/* ---------- chapter markers (01–05 on a hairline) ---------- */
.chmark{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--dim)}
.chmark::after{content:"";flex:1;height:.8px;background:var(--line)}
/* ---------- buttons: exactly three ---------- */
.btn-primary,.btn-ghost,.btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:40px;padding:0 16px;border-radius:var(--r);font-family:var(--sans);
  font-size:var(--t-sm);font-weight:500;letter-spacing:.3px;text-decoration:none;cursor:pointer;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.btn-primary{background:var(--acc);color:var(--ink-on-acc);border:0}
.btn-ghost{background:transparent;color:var(--ink);border:.8px solid var(--line2)}
.btn-quiet{background:transparent;color:var(--mut);border:0;padding:0 4px}
@media (hover:hover){
  .btn-primary:hover{background:#6ba1ff}
  .btn-ghost:hover{border-color:var(--acc)}
  .btn-quiet:hover{color:var(--ink);text-decoration:underline}
}
.btn-primary:active,.btn-ghost:active{transform:translateY(1px)}
.btn-primary:disabled,.btn-ghost:disabled,[aria-busy="true"]{opacity:.55;cursor:progress;pointer-events:none}
/* status chips — the ONLY permitted pill */
.chip-status{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-full);border:.8px solid var(--line2);padding:4px 12px;font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mut)}
/* ---------- forms ---------- */
.lx-input,input.lx,select.lx,textarea.lx{font-family:var(--sans);font-size:var(--t-base);color:var(--ink);background:var(--surface2);border:.8px solid var(--line);border-radius:var(--r);padding:10px 12px;min-height:var(--tap);width:100%}
label{font-weight:500}
/* ---------- tables ---------- */
table{border-collapse:collapse}
caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--dim);padding-bottom:var(--s2)}
th{font-weight:500}
/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
/* ---------- open-box hairline sections ---------- */
.hairbox{border-top:.8px solid var(--line);border-left:.8px solid var(--line);padding:var(--s5)}
.hairbox+.hairbox{border-top:0}
/* ---------- motion discipline ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ---------- print: decision records must print ---------- */
@media print{
  body{background:#fff!important;color:#000!important;font-size:12pt}
  nav,header.lxhead,footer.lxfoot,.lx-skip,.tabbar,nav.side,#cnote,#lexunCookie,#lxTop,button{display:none!important}
  a{color:#000;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .card,.verdict,details{border:1px solid #bbb!important;background:#fff!important;color:#000!important;break-inside:avoid}
  details{display:block}details>*{display:block}
  table{width:100%}th,td{border-bottom:1px solid #ccc;color:#000}
  h1,h2,h3,p,td,th,li,span,div{color:#000!important}
}
/* mobile: tables scroll, never overflow the viewport */
@media(max-width:680px){
  table{display:block;overflow-x:auto;max-width:100%}
  caption{display:block}
}