/* consult-base.css — shared styles for the Spectral Consult subdomain pages
   (index.html [router] / how-to-read.html). Sibling of the Brand Spectrometer's
   meter-base.css: SAME structure, layout, nav markup and spectral gradient strip,
   so the two tools read as a matched pair — DIFFERENTIATED only by accent
   (consult = indigo/violet "organize"; meter = sky-blue "measure") and wordmark.
   EDIT HERE, never per page, so the pages can't drift. Each page links this FIRST,
   then its own inline <style> overrides that win by cascade order. */

:root{
  --bg:#0a0b10; --bg2:#11131c; --panel:#141824; --ink:#eef0f6; --mut:#9aa0b4;
  --faint:#5a6273; --line:#262a3a;
  /* shared spectral family (identical to meter — the corpus mark) */
  --grad:linear-gradient(90deg,#e64a3b,#e8842b,#e8c531,#7bc043,#2fb3a8,#3a8dde,#7a5cd0,#c44fa8);
  /* consult accent: indigo/violet (meter's is sky-blue #7fb6f0) — the sibling tell */
  --accent:#8b8ff5; --accent2:#b9acff; --accent-soft:#a99cf5;
  /* the four verdict colours, reused from the floor palette */
  --corroborated:#4ec3a8;        /* resolved teal  */
  --contested:#e8c531;           /* marginal amber */
  --sub-conditional:#7a5cd0;     /* substrate violet */
  --jointly-unresolved:#ff7a6e;  /* below-floor coral */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 700px at 72% -8%,#171426 0%,var(--bg) 55%) fixed;
  color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.spectrum-strip{height:6px;background:var(--grad)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
a{color:var(--accent2);text-decoration:none;border-bottom:1px solid #423a6e}
a:hover{border-color:var(--accent2)}
b{color:var(--ink)}
p{margin:.6em 0}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;color:var(--accent-soft);margin:0 0 14px}
h1{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-size:clamp(34px,6vw,62px);line-height:1.04;margin:0 0 18px;font-weight:650}
h2{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-size:clamp(24px,3.4vw,38px);line-height:1.12;margin:0 0 16px;font-weight:600}
.lead{font-size:clamp(17px,1.9vw,22px);color:#dfe3ee}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}

/* sticky top nav — identical markup to meter: .navtop>.wrap with .brand, .spacer,
   a .nav-toggle (hamburger; mobile only) and a .navlinks row. */
.navtop{position:sticky;top:0;z-index:20;background:rgba(10,11,16,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.navtop .wrap{display:flex;align-items:center;gap:26px;height:3.5rem;position:relative}
.navtop .brand{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:300;font-size:.875rem;text-transform:uppercase;letter-spacing:.12em}
.navtop .brand a{text-decoration:none} .navtop .brand a.grad{color:transparent}
.navtop .brand .home{color:var(--ink)} .navtop .brand .home:hover{color:#fff}
.navtop .spacer{margin-left:auto}
.navtop .navlinks{display:flex;align-items:center;gap:26px}
.navtop .navlinks a{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:300;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);border:0}
.navtop .navlinks a:hover{color:var(--ink)}
.navtop .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;margin:-8px 0 -8px 8px;padding:8px;background:none;border:0;cursor:pointer}
.navtop .nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--mut);transition:transform .22s ease,opacity .18s ease}
.navtop .nav-toggle:hover span{background:var(--ink)}
.navtop .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtop .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtop .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .navtop .nav-toggle{display:flex}
  .navtop .navlinks{position:absolute;top:3.5rem;right:0;left:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,11,16,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:6px 0;display:none}
  .navtop .navlinks.open{display:flex}
  .navtop .navlinks a{padding:13px 24px}
  .navtop .navlinks a:hover{background:rgba(255,255,255,.05)}
}

/* hover tooltip (shared with the visuals) */
.tip{position:fixed;pointer-events:none;background:#020308;border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:12px;color:var(--ink);opacity:0;transition:opacity .12s;z-index:50;max-width:220px}
.foot{color:var(--faint);font-size:12px;padding:30px 0 60px}
svg{display:block;width:100%;height:auto} svg text{font-family:inherit;fill:var(--ink)}