/* ============================================================
   dark.css — low-light / night reading mode
   Activated by html[data-theme="dark"] (set by the early inline
   script in <head> + the toggle in glossary.js, persisted to
   localStorage key "nag-theme").
   Linked AFTER each page's inline <style> so it wins the cascade
   over the new-layout !important chrome rules.

   Strategy: override the design TOKENS at the html level so every
   var()-based rule in styles.css flips automatically; then patch
   the handful of hardcoded hexes + the .nag-scoped --nag-* tokens.
   Warm charcoal, never pure black — calibrated for a calm,
   low-arousal night read (insomnia / hidden-tab use is in the
   audience research).
   ============================================================ */

html[data-theme="dark"]{
  --ink:#ECEAE3;        --slate:#C9CBC4;     --muted:#9AA096;
  --hairline:#343A33;   --paper:#191C1A;     --mist:#21251F;
  --parchment:#262B25;  --white:#232824;
  --sage:#8CA085;       --sage-deep:#A9BBA0; --sage-tint:#2B3329;
  --sage-mid:#6E7E68;
  --link:#A7C0A0;       --link-hover:#C2D4BC;
  color-scheme:dark;
}

/* Headings use a hardcoded near-black in styles.css → re-point to token.
   glossary.css sets `.nag h1..h6 { color:#1A1A1A !important }`, so the
   .nag-scoped override must match its specificity and also be !important. */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4{color:var(--ink);}
html[data-theme="dark"] .nag h1,
html[data-theme="dark"] .nag h2,
html[data-theme="dark"] .nag h3,
html[data-theme="dark"] .nag h4,
html[data-theme="dark"] .nag h5,
html[data-theme="dark"] .nag h6{color:var(--ink) !important;}

/* .nag re-declares its own --nag-* tokens locally; remap them too */
html[data-theme="dark"] .nag{
  --nag-ink:#ECEAE3;    --nag-body:#C9CBC4;  --nag-muted:#9AA096;
  --nag-hairline:#343A33; --nag-paper:#191C1A; --nag-mist:#21251F;
  --nag-cream:#262B25;  --nag-white:#232824;
  --nag-sage:#8CA085;   --nag-sage-deep:#A9BBA0; --nag-sage-tint:#2B3329;
  --nag-link:#A7C0A0;
}
html[data-theme="dark"] .nag .cat-header h1,
html[data-theme="dark"] .nag .cat-card h3,
html[data-theme="dark"] .nag .author-box__name{color:var(--ink) !important;}
html[data-theme="dark"] .nag .nag-xref{color:var(--link);}

/* Distinction box: outlined card on dark surface */
html[data-theme="dark"] .distinction{background:var(--mist);border-color:var(--hairline);}
html[data-theme="dark"] .distinction__cell--not{background:#1E221C;border-color:var(--hairline);}

/* Hub category cards (glossary.css uses --nag-white fallback = #FFFFFF, never remapped) */
html[data-theme="dark"] .nag .cat-card{
  background:#232824 !important;
  border-color:#343A33 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .nag .cat-card:hover{
  background:#2C322B !important;
  border-color:#4A5448 !important;
  box-shadow:0 12px 36px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .nag .cat-card::before{background:linear-gradient(90deg,var(--sage-deep),transparent) !important;}
html[data-theme="dark"] .nag .cat-card__num{color:var(--sage-deep) !important;}
html[data-theme="dark"] .nag .cat-card h3{color:var(--ink) !important;}

/* In-page search trigger button */
html[data-theme="dark"] .nag-search,
html[data-theme="dark"] .nag .nag-search{
  background:#232824 !important;
  border-color:#343A33 !important;
  color:#9AA096 !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .nag-search kbd{
  background:#191C1A !important;
  border-color:#343A33 !important;
  color:#9AA096 !important;
}

/* ---- new-layout chrome (these use hardcoded hexes + !important) ---- */
html[data-theme="dark"] body{background:#121412 !important;}
html[data-theme="dark"] .shell{background:#191C1A !important;}

/* sticky shared header */
html[data-theme="dark"] .pv-header,
html[data-theme="dark"] .site-header{background:#1C201D !important;border-bottom-color:#2C322B !important;}
html[data-theme="dark"] .pv-brand__name,
html[data-theme="dark"] .brand__name{color:#ECEAE3 !important;}
html[data-theme="dark"] .pv-brand__sub,
html[data-theme="dark"] .pv-brand__tag{color:#9AA096 !important;}
html[data-theme="dark"] .pv-nav a{color:#C9CBC4 !important;}
html[data-theme="dark"] .pv-nav a:hover,
html[data-theme="dark"] .pv-nav a.is-on{color:#ECEAE3 !important;}
html[data-theme="dark"] .pv-search{background:#232824 !important;border-color:#343A33 !important;color:#9AA096 !important;}
html[data-theme="dark"] .pv-search kbd{background:#191C1A !important;border-color:#343A33 !important;color:#9AA096 !important;}
html[data-theme="dark"] .pv-iconbtn{color:#9AA096 !important;}

/* band: darken the image + use a warm-charcoal fade so the band melts into the page calmly */
html[data-theme="dark"] .nl-band img{filter:saturate(.55) brightness(.38) !important;}
html[data-theme="dark"] .nl-band::after{
  background:linear-gradient(
    180deg,
    rgba(18,20,18,.30) 0%,
    rgba(18,20,18,.55) 50%,
    rgba(18,20,18,.97) 88%,
    rgba(18,20,18,1)  100%
  ) !important;
}
/* Band text stays readable on the dark gradient */
html[data-theme="dark"] .nl-band__eyebrow{color:#8CA085 !important;text-shadow:none !important;}
html[data-theme="dark"] .nl-band__title{color:#E4E2DB !important;text-shadow:0 2px 12px rgba(0,0,0,.6) !important;}

/* sidebar */
html[data-theme="dark"] .rail__search{background:#232824 !important;border-color:#343A33 !important;color:#9AA096 !important;box-shadow:none !important;}
html[data-theme="dark"] .rail nav{border-top-color:#2C322B !important;}
html[data-theme="dark"] .rail__group{border-bottom-color:#2C322B !important;}
html[data-theme="dark"] .rail__cat__link,
html[data-theme="dark"] .rail__hub,
html[data-theme="dark"] .rail__cat--active .rail__cat__link{color:#E4E2DB !important;}
html[data-theme="dark"] .rail__terms a{color:var(--slate);}
html[data-theme="dark"] .rail__cat:hover,
html[data-theme="dark"] .rail__terms a:hover{background:var(--parchment);}
html[data-theme="dark"] .rail__cta{background:var(--sage-tint);color:var(--sage-deep);}

/* the vertical divider gradient between rail and content */
html[data-theme="dark"] .layout{background:linear-gradient(to right,transparent calc(var(--rail) - 1px),#2C322B calc(var(--rail) - 1px),#2C322B var(--rail),transparent var(--rail)) !important;}
/* Mobile: no rail exists, so kill the divider — otherwise the !important above
   overrides the light-mode `background-image:none` and leaves a stray vertical
   line down the page (reads as a grid against the term dividers). */
@media (max-width:1240px){
  html[data-theme="dark"] .layout{background:none !important;}
}

/* cards & search overlay surfaces (var(--white) already remapped, this is for hardcoded) */
html[data-theme="dark"] .nag-search-ov,
html[data-theme="dark"] .nag-search-ov__panel{background:#1C201D !important;}
html[data-theme="dark"] .nag-search-ov__bar,
html[data-theme="dark"] .search-ov__bar{
  background:#232824 !important;
  border-bottom-color:#343A33 !important;
}
html[data-theme="dark"] .nag-search-ov__bar input{color:#ECEAE3 !important;}
html[data-theme="dark"] .nag-search-ov__bar input::placeholder{color:#9AA096 !important;}
html[data-theme="dark"] .nag-search-ov__close{
  background:#2C322B !important;border-color:#343A33 !important;color:#A9BBA0 !important;
}
html[data-theme="dark"] .nag-search-ov__results{background:#1C201D !important;}
html[data-theme="dark"] .nag-s-hint{color:#9AA096 !important;}
html[data-theme="dark"] .nag-s-hint b{color:#C9CBC4 !important;}
html[data-theme="dark"] .nag-s-cat{color:#8CA085 !important;}
html[data-theme="dark"] .nag-s-item{color:#C9CBC4 !important;}
html[data-theme="dark"] .nag-s-item:hover,
html[data-theme="dark"] .nag-s-item.sel{background:#2B3329 !important;}
html[data-theme="dark"] .nag-s-item__name{color:#ECEAE3 !important;}
html[data-theme="dark"] .nag-s-item__blurb{color:#9AA096 !important;}
html[data-theme="dark"] .nag-s-item__meta{color:#8CA085 !important;}
html[data-theme="dark"] .nag-s-empty{color:#9AA096 !important;}
html[data-theme="dark"] .nag-backtop{background:#232824;color:var(--sage-deep);border:1px solid var(--hairline);}

/* coach CTA: keep its sage identity but darken so it isn't a glaring panel */
html[data-theme="dark"] .coach-cta{background:#2E3A2A !important;}
html[data-theme="dark"] .coach-cta h2{color:#EAF0E5 !important;}
html[data-theme="dark"] .coach-cta p{color:#C5D2BE !important;}
html[data-theme="dark"] .coach-cta .k{color:#A9BBA0 !important;}
html[data-theme="dark"] .coach-cta .fine{color:#9DB096 !important;}
html[data-theme="dark"] .coach-cta .btn{background:#EAF0E5 !important;color:#22311E !important;}

/* author box */
html[data-theme="dark"] .author-box{background:var(--parchment);border-color:var(--hairline);}

/* ---- the theme toggle button (injected by glossary.js) ---- */
/* Icon shows what you'll GET when you click:
   light mode → moon shown (click to go dark)
   dark mode  → sun  shown (click to go light) */
.nag-theme-toggle .sun  { display: none;  }
.nag-theme-toggle .moon { display: block; }
html[data-theme="dark"] .nag-theme-toggle .sun  { display: block; }
html[data-theme="dark"] .nag-theme-toggle .moon { display: none;  }

/* Base button (used for fallback fixed version) */
.nag-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:6px;
  color:#5A6858;border-radius:8px;transition:color .15s,background .15s;
  flex:none;
}
.nag-theme-toggle:hover{color:#1F1F1F;background:rgba(116,133,114,.1);}
html[data-theme="dark"] .nag-theme-toggle{color:#A9BBA0;}
html[data-theme="dark"] .nag-theme-toggle:hover{color:#ECEAE3;background:rgba(255,255,255,.08);}

/* Desktop: sits inside pv-header (styled like the search icon button) */
.nag-theme-toggle--hdr{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--hairline,#E4E0D6) !important;
  background:var(--mist,#F3F4EE) !important;
  color:#5A6858 !important;margin-left:4px;
}
.nag-theme-toggle--hdr:hover{border-color:#748572 !important;background:#fff !important;color:#1F1F1F !important;}
html[data-theme="dark"] .nag-theme-toggle--hdr{
  background:#232824 !important;border-color:#343A33 !important;color:#A9BBA0 !important;
}
html[data-theme="dark"] .nag-theme-toggle--hdr:hover{
  background:#2C322B !important;border-color:#4A5448 !important;color:#ECEAE3 !important;
}

/* Mobile: sits inside .mobile-bar__menu (the dark slate bar) */
.nag-theme-toggle--mob{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14) !important;
  border:none !important;color:#E7EAE6 !important;padding:8px;
  margin-left:auto;
}
.nag-theme-toggle--mob:hover{background:rgba(255,255,255,.24) !important;}
html[data-theme="dark"] .nag-theme-toggle--mob{
  background:rgba(255,255,255,.12) !important;color:#ECEAE3 !important;
}

/* Fallback fixed button (only if header containers not found) */
.nag-theme-toggle:not(.nag-theme-toggle--hdr):not(.nag-theme-toggle--mob){
  position:fixed;right:22px;bottom:76px;z-index:56;
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid #E4E0D6 !important;
  background:#fff !important;color:#5A6858 !important;
  box-shadow:0 4px 16px rgba(42,55,66,.14);
}
html[data-theme="dark"] .nag-theme-toggle:not(.nag-theme-toggle--hdr):not(.nag-theme-toggle--mob){
  background:#232824 !important;border-color:#343A33 !important;color:#A9BBA0 !important;
}

/* ============================================================
   Shared site-header (Direction A) — dark mode
   Component uses hard-coded brand hex (no tokens), so each
   surface gets an explicit warm-charcoal override here.
   ============================================================ */
html[data-theme="dark"] .site-header{background:#1F231E;border-bottom-color:#343A33;}
html[data-theme="dark"] .site-header.is-shrunk{box-shadow:0 6px 22px rgba(0,0,0,.34);}

/* logo: swap light art → cream/lighter-sage art */
html[data-theme="dark"] .site-header .brand__img--light{display:none;}
html[data-theme="dark"] .site-header .brand__img--dark{display:block;}

/* nav links */
html[data-theme="dark"] .site-header .nlink{color:#C9CBC4;}
html[data-theme="dark"] .site-header .nlink:hover,
html[data-theme="dark"] .site-header .nlink:focus-visible,
html[data-theme="dark"] .site-header .nlink.is-on{color:#A9BBA0;}
html[data-theme="dark"] .site-header .nlink.is-on::after{background:#8CA085;}

/* dropdown menus */
html[data-theme="dark"] .site-header .menu{background:#232824;border-color:#343A33;box-shadow:0 14px 40px rgba(0,0,0,.45);}
html[data-theme="dark"] .site-header .menu::before{background:#232824;border-color:#343A33;}
html[data-theme="dark"] .site-header .menu a{color:#ECEAE3;}
html[data-theme="dark"] .site-header .menu a:hover{background:#191C1A;}
html[data-theme="dark"] .site-header .menu .mi-d{color:#9AA096;}

/* action icons */
html[data-theme="dark"] .site-header .iconbtn{color:#9AA096;}
html[data-theme="dark"] .site-header .iconbtn:hover{color:#A9BBA0;background:#191C1A;}

/* burger bars: hardcoded #1A1A1A in the component → near-invisible on the charcoal
   header. Lift to the same light sage as the logo / breadcrumbs / search icon. */
html[data-theme="dark"] .site-header .burger span{background:#A9BBA0;}

/* injected theme toggle, when it lands in the header action cluster */
html[data-theme="dark"] .site-header .nag-theme-toggle--hdr{color:#9AA096 !important;background:none !important;}
html[data-theme="dark"] .site-header .nag-theme-toggle--hdr:hover{color:#A9BBA0 !important;background:#191C1A !important;}

/* CTA stays sage; nudge lighter so it reads as a button on charcoal */
html[data-theme="dark"] .site-header .cta{background:#5A6858;color:#F4F2EC;}
html[data-theme="dark"] .site-header .cta:hover{background:#748572;}

/* mobile drawer (WP use; harmless on glossary) */
html[data-theme="dark"] .site-drawer{background:#191C1A;}
html[data-theme="dark"] .site-drawer__top{border-bottom-color:#343A33;}
html[data-theme="dark"] .site-drawer__top img,
html[data-theme="dark"] .site-drawer__close{color:#ECEAE3;}
html[data-theme="dark"] .site-drawer__search{background:#232824;border-color:#343A33;color:#9AA096;}
html[data-theme="dark"] .site-drawer__nav > a,
html[data-theme="dark"] .site-dacc__btn{color:#ECEAE3;}
html[data-theme="dark"] .site-drawer__nav > a:hover,
html[data-theme="dark"] .site-dacc__btn:hover,
html[data-theme="dark"] .site-dacc__panel a:hover{background:#232824;color:#A9BBA0;}
html[data-theme="dark"] .site-dacc__panel a{color:#C9CBC4;}
html[data-theme="dark"] .site-drawer__foot{border-top-color:#343A33;color:#9AA096;}

/* drawer logo swap (light art → cream art) */
html[data-theme="dark"] .site-drawer__logo-light{display:none;}
html[data-theme="dark"] .site-drawer__logo-dark{display:block;}

/* drawer glossary-browse section */
html[data-theme="dark"] .site-drawer__glossary{border-top-color:#343A33;}
html[data-theme="dark"] .site-drawer__lbl{color:#9AA096;}
html[data-theme="dark"] .site-drawer__hub{color:#ECEAE3;}
html[data-theme="dark"] .site-drawer__hub:hover{background:#232824;color:#A9BBA0;}
html[data-theme="dark"] .site-dcat{border-bottom-color:#2B302A;}
html[data-theme="dark"] .site-dcat__btn{color:#ECEAE3;}
html[data-theme="dark"] .site-dcat__btn:hover{color:#A9BBA0;}
html[data-theme="dark"] .site-dcat__terms a{color:#C9CBC4;}
html[data-theme="dark"] .site-dcat__terms a:hover{background:#232824;color:#A9BBA0;}
html[data-theme="dark"] .site-dcat__terms a.is-on{color:#A9BBA0;}
