/* ============================================================
   Inner pages in the Night shift look (27 Oct 2026): /dataset, /guides/*,
   /build-a-deck/* and the deck calculators the guide generator writes.
   Loads after home-night.css on <body class="night"> (guides: "guidePage night").
   /pro keeps its own pro-night.css.
   The trick: styles.css, guide.css, mobile.css and buildguide.css color
   everything from a few tokens (--page, --card, --ink, --blue...). This file
   points those tokens at the Night shift palette, so every old component
   (cards, tables, FAQs, the state map, the drill-down) follows without its
   markup or its script changing. Then it restyles the few things with
   hard-coded colors: the page head, the quick bar, the boxes.
   ============================================================ */
body.night{
  --page:#04070F; --card:rgba(255,255,255,.045); --panel:#0B1220; --panel-2:#101A2E;
  --edge:rgba(160,220,255,.16); --line:rgba(160,220,255,.14); --line-2:rgba(160,220,255,.22);
  --ink:#EAF2FF; --ink-2:#C9D7EE; --ink-3:#8EA0BE;
  --blue:#3BE8FF; --blue-lit:#7DF3FF; --blue-deep:#22C9F0; --blue-ink:#BFF6FF; --glow:rgba(59,232,255,.5);
  --nodata:#1C2740;
  font-family:Inter,Figtree,system-ui,sans-serif;
}
html[data-mode="light"] body.night{
  --page:#F1F6FB; --card:#FFFFFF; --panel:#FFFFFF; --panel-2:#F2F8FC;
  --edge:rgba(10,165,200,.24); --line:rgba(15,23,42,.10); --line-2:rgba(10,165,200,.22);
  --ink:#0B1324; --ink-2:#24324B; --ink-3:#55647D;
  --blue:#0AA5C8; --blue-lit:#07809E; --blue-deep:#07809E; --blue-ink:#07809E; --glow:rgba(10,165,200,.4);
  --nodata:#D3DEEA;
}
body.night :is(h1,h2,h3,h4,.big){font-family:Sora,Outfit,sans-serif;letter-spacing:-.03em}
body.night .kicker,body.night .cLab,body.night .deN,body.night .pager span{font-family:"JetBrains Mono","IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
body.night .kicker{font-size:12px;font-weight:700;color:var(--n-cT)}
body.night :is(.mono,.statBox b,.areaBtn .rt,.rule .n,.stLbl,.mapTip .r){font-family:"JetBrains Mono","IBM Plex Mono",monospace}
body.night section.band{background:transparent;border-color:var(--n-line)}
body.night .sub{color:var(--n-mut)}

/* ---------- the page head: always night, a lit grid and a cyan glow ---------- */
body.night .pageHead{background:#04070F;border-bottom:1px solid rgba(160,220,255,.12);padding:84px 28px 72px;
  --n-ink:#EAF2FF;--n-cT:#7DF3FF;--n-mut:#9DB0CE;--ink:#EAF2FF;--ink-2:#C9D7EE;--ink-3:#9DB0CE}
body.night .pageHead::before{width:auto;height:auto;left:0;right:0;top:0;bottom:0;transform:none;border-radius:0;
  background:radial-gradient(60% 90% at 78% 0%,rgba(59,232,255,.20),transparent 60%),radial-gradient(40% 70% at 12% 100%,rgba(79,139,255,.14),transparent 70%),
    linear-gradient(rgba(125,243,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(125,243,255,.07) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
body.night .pageHead .inner{max-width:1240px;margin:0 auto}
body.night .pageHead h1{font-size:clamp(36px,4.4vw,58px);line-height:1.04;color:#fff;max-width:20ch}
body.night .pageHead p{color:#B7C6DE;font-size:18.5px}
body.night .pageHead .kicker{color:#7DF3FF}
@media (max-width:640px){body.night .pageHead{padding:44px 16px 36px}}

/* ---------- the quick bar under the nav ---------- */
body.night .quickBar{background:rgba(7,12,24,.82);border-bottom:1px solid rgba(160,220,255,.14)}
html[data-mode="light"] body.night .quickBar{background:rgba(255,255,255,.88);border-bottom-color:rgba(10,165,200,.25)}
body.night .quickBar b{font-family:Inter,sans-serif}

/* ---------- buttons, as on the homepage ---------- */
body.night .btn.gloss{background:linear-gradient(180deg,#7DF3FF,#22C9F0);color:#03121A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 10px 30px -10px rgba(59,232,255,.7)}
body.night .btn.gloss::before{display:none}
body.night .btn.gloss-dark{background:var(--n-glass2);color:var(--n-ink);box-shadow:inset 0 0 0 1px var(--n-line)}

/* ---------- glass boxes: every card the old pages use ---------- */
body.night :is(.guideCard,.rule,.dataExplain article,.usmap,.drill,.pager a,.ctaBox,.calcCard,.gsBox,.phase,.stepCard,.dcCalc,.dcOut){
  background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2));border:1px solid var(--n-line);border-radius:18px;box-shadow:var(--n-shadow)}
body.night :is(.guideCard,.pager a):hover{border-color:rgba(59,232,255,.5);box-shadow:var(--n-shadow),0 0 30px -10px rgba(59,232,255,.55)}
body.night .ctaBox{background:linear-gradient(160deg,rgba(59,232,255,.12),rgba(79,139,255,.06));border-color:rgba(59,232,255,.35)}
body.night .ctaBox h3{color:var(--n-ink)}
body.night .quickBox{background:rgba(59,232,255,.07);border:1px solid rgba(59,232,255,.3);border-radius:16px}
body.night .warnBox{border-radius:16px}
body.night .gTag{font-family:"JetBrains Mono",monospace;letter-spacing:.06em}
body.night .gBody a{color:var(--n-cT)}
body.night .gBody th{font-family:"JetBrains Mono",monospace;letter-spacing:.04em}
body.night .crumb:hover{color:var(--n-cT)}
body.night footer{margin-top:0}

/* ---------- /dataset ---------- */
body.night .sampleBanner{background:rgba(255,181,71,.09);border-color:rgba(255,181,71,.42);border-radius:16px}
body.night .dataExplain .deN{color:var(--n-cT);font-size:11px}
body.night .dataExplain article:nth-child(3) .deN{color:var(--n-amT)}
body.night .dataExplain article h3{font-size:19px}
body.night .rule .n{color:var(--n-cT)}
body.night .rule h4{font-family:Sora,sans-serif}
body.night #rules{background:transparent!important}
body.night .usmap{padding:18px}
body.night .st{stroke:#04070F}
html[data-mode="light"] body.night .st{stroke:#FFFFFF}
body.night .st[aria-pressed="true"],body.night .st:focus-visible{stroke:#7DF3FF;filter:drop-shadow(0 0 6px rgba(59,232,255,.8))}
html[data-mode="light"] body.night .st[aria-pressed="true"],html[data-mode="light"] body.night .st:focus-visible{stroke:#07809E}
body.night .mapTip{background:rgba(4,10,20,.94);border-color:rgba(59,232,255,.4);border-radius:12px}
body.night .mapTip .r{color:#7DF3FF}
body.night .statBox{background:rgba(59,232,255,.06);border-color:rgba(59,232,255,.26);border-radius:13px}
body.night .areaBtn{background:var(--n-glass2);border-color:var(--n-line);border-radius:12px}
body.night .areaBtn:hover{border-color:rgba(59,232,255,.55);box-shadow:0 0 22px -10px rgba(59,232,255,.7)}
body.night .thinNote{background:rgba(59,232,255,.06);border-color:rgba(59,232,255,.26)}
body.night .thinNote b{color:var(--n-cT)}
body.night .crumbs button{color:var(--n-cT)}

/* ---------- light mode: the homepage's grid, glow and trace on the boxes ---------- */
html[data-mode="light"] body.night .pageHead + section.band,html[data-mode="light"] body.night .guideWrap,html[data-mode="light"] body.night .bgWrap{background:transparent}
html[data-mode="light"] body.night :is(.guideCard,.rule,.dataExplain article,.usmap,.drill,.ctaBox,.quickBox,.pager a){position:relative;border-color:rgba(10,165,200,.28)}
html[data-mode="light"] body.night :is(.guideCard,.rule,.dataExplain article,.usmap,.drill,.ctaBox,.quickBox).n-lit::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--tr),rgba(59,232,255,.22) 0 55%,rgba(59,232,255,.5) 70%,#3BE8FF 84%,#fff 87%,#3BE8FF 90%,rgba(59,232,255,.22) 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:nTrace 6s linear infinite,nLit .6s ease-out}   /* one box at a time, .n-lit: see home-night.css */
html[data-mode="light"] body.night :is(.usmap,.drill,.ctaBox).n-lit::after{inset:-2px;padding:3px;filter:drop-shadow(0 0 6px #3BE8FF)}
html[data-mode="light"] body.night :is(.big,.gBody h2,.guideWrap h1){text-shadow:0 0 26px rgba(59,232,255,.18)}
@media (prefers-reduced-motion:reduce){html[data-mode="light"] body.night :is(.guideCard,.rule,.dataExplain article,.usmap,.drill,.ctaBox,.quickBox).n-lit::after{animation:none}}