/* Tokens first: everything that politely uses var() follows for free. */
html[data-theme="dark"] #hc-page,
html[data-theme="dark"] body{
  --body-bg:var(--hc-d-bg);--card-bg:var(--hc-d-card);--card-border:var(--hc-d-line);
  --text-primary:var(--hc-d-ink);--text-secondary:var(--hc-d-ink-2);--text-muted:var(--hc-d-ink-3);
  --g50:#0f141c;--g100:#141a23;--g200:var(--hc-d-line);--g300:#3a4658;
  --g400:var(--hc-d-ink-3);--g500:#8593a8;--g600:var(--hc-d-ink-2);--g700:#c3ccd9;
  --g800:#dbe2ec;--g900:var(--hc-d-ink);
  --shadow-sm:0 1px 3px rgba(0,0,0,.55);
  --shadow-md:0 4px 16px -4px rgba(0,0,0,.6);
  --shadow-lg:0 12px 40px -8px rgba(0,0,0,.7);
}
html[data-theme="dark"] body,html[data-theme="dark"] #hc-page{
  background:var(--hc-d-bg)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page ~ .hc-foot{background:var(--hc-d-bg)!important}

/* ── Cards: the one surface everything sits on ──────────────────────────────── */
html[data-theme="dark"] #hc-page .hc-cat,
html[data-theme="dark"] #hc-page .hc-pop-item,
html[data-theme="dark"] #hc-page .hc-arow,
html[data-theme="dark"] #hc-page .hc-art-card,
html[data-theme="dark"] #hc-page .hc-side-card,
html[data-theme="dark"] #hc-page .hc-empty,
html[data-theme="dark"] #hc-page .hc-home-cat,
html[data-theme="dark"] #hc-page .hc-cats-tint-theme .hc-home-cat{
  background:var(--hc-d-card)!important;
  border-color:var(--hc-d-line)!important;
  color:var(--hc-d-ink)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.35)!important;
}
html[data-theme="dark"] #hc-page .hc-cat:hover,
html[data-theme="dark"] #hc-page .hc-pop-item:hover,
html[data-theme="dark"] #hc-page .hc-arow:hover,
html[data-theme="dark"] #hc-page .hc-home-cat:hover{
  background:var(--hc-d-hover)!important;border-color:rgba(var(--br),.42)!important}

/* ── Wrappers: one step up from the page, one step below a card ─────────────── */
html[data-theme="dark"] #hc-page .hc-kb-sidebar,
html[data-theme="dark"] #hc-page .hc-sidebar .hc-kb-sidebar,
html[data-theme="dark"] #hc-page .hc-page-shell > .hc-kb-sidebar{
  background:transparent!important;border-color:var(--hc-d-line)!important;box-shadow:none!important}
html[data-theme="dark"] #hc-page .hc-kb-cat-link{
  background:var(--hc-d-raised)!important;border-color:var(--hc-d-line)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-kb-cat-link:hover{background:var(--hc-d-hover)!important}
html[data-theme="dark"] #hc-page .hc-kb-cat-link.is-active{
  background:rgba(var(--br),.16)!important;border-color:rgba(var(--br),.40)!important}

/* ── Text ──────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] #hc-page .hc-cat-name,
html[data-theme="dark"] #hc-page .hc-home-cat-name,
html[data-theme="dark"] #hc-page .hc-pop-title,
html[data-theme="dark"] #hc-page .hc-arow-title,
html[data-theme="dark"] #hc-page .hc-art-title,
html[data-theme="dark"] #hc-page .hc-kb-cat-name,
html[data-theme="dark"] #hc-page .hc-cat-pg-title,
html[data-theme="dark"] #hc-page .hc-side-title,
html[data-theme="dark"] #hc-page .hc-body h1,
html[data-theme="dark"] #hc-page .hc-body h2,
html[data-theme="dark"] #hc-page .hc-body h3,
html[data-theme="dark"] #hc-page .hc-body h4{color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-body,
html[data-theme="dark"] #hc-page .hc-cat-desc,
html[data-theme="dark"] #hc-page .hc-home-cat-desc,
html[data-theme="dark"] #hc-page .hc-pop-exc,
html[data-theme="dark"] #hc-page .hc-arow-exc,
html[data-theme="dark"] #hc-page .hc-cat-pg-sub{color:var(--hc-d-ink-2)!important}
html[data-theme="dark"] #hc-page .hc-sec-label,
html[data-theme="dark"] #hc-page .hc-crumb,
html[data-theme="dark"] #hc-page .hc-views,
html[data-theme="dark"] #hc-page .hc-subcats-label{color:var(--hc-d-ink-3)!important}
/* Links + brand accents keep the brand: that is the whole point of keeping it. */
html[data-theme="dark"] #hc-page a{color:var(--brand-ink,var(--brand))}
html[data-theme="dark"] #hc-page .hc-body a{color:var(--brand-ink,var(--brand))!important}

/* ── Body content furniture ─────────────────────────────────────────────────── */
html[data-theme="dark"] #hc-page .hc-body pre,
html[data-theme="dark"] #hc-page .hc-body code{
  background:#0d1219!important;border:1px solid var(--hc-d-line)!important;color:#dbe6f5!important}
html[data-theme="dark"] #hc-page .hc-body blockquote{
  background:var(--hc-d-raised)!important;border-left-color:rgba(var(--br),.5)!important}
html[data-theme="dark"] #hc-page .hc-body table th{background:var(--hc-d-raised)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-body table td,
html[data-theme="dark"] #hc-page .hc-body table th{border-color:var(--hc-d-line)!important}
html[data-theme="dark"] #hc-page .hc-body hr{border-color:var(--hc-d-line)!important}
html[data-theme="dark"] #hc-page .hc-tag,
html[data-theme="dark"] #hc-page .hca-count{
  background:var(--hc-d-raised)!important;border-color:var(--hc-d-line)!important;color:var(--hc-d-ink-2)!important}

/* ── The "Was this article helpful?" block ─────────────────────────────────────
   Its wrapper is `.hc-feedback`, a TRANSLUCENT WHITE (rgba(255,255,255,.52)) —
   over a dark page that renders as a grey slab, which is exactly how it looked.
   Translucency has to be killed outright, not darkened. */
html[data-theme="dark"] #hc-page .hc-feedback{
  background:var(--hc-d-card)!important;border-color:var(--hc-d-line)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.35)!important}
html[data-theme="dark"] #hc-page .hc-fb-q{color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-fb-counts,
html[data-theme="dark"] #hc-page .hc-fb-count-up,
html[data-theme="dark"] #hc-page .hc-fb-count-down{color:var(--hc-d-ink-2)!important}
html[data-theme="dark"] #hc-page .hc-fb-counts strong{color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-contact-prompt{color:var(--hc-d-ink-2)!important}

/* ── Buttons: brand stays; neutral buttons become raised, not white ─────────── */
html[data-theme="dark"] #hc-page .hc-fb-btn,
html[data-theme="dark"] #hc-page .hc-cats-more,
html[data-theme="dark"] #hc-page .hc-kb-more{
  background:var(--hc-d-raised)!important;border-color:var(--hc-d-line)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-fb-btn:hover,
html[data-theme="dark"] #hc-page .hc-cats-more:hover,
html[data-theme="dark"] #hc-page .hc-kb-more:hover{
  background:var(--hc-d-hover)!important;border-color:rgba(var(--br),.45)!important}

/* ── Hero: neutralised to the dark page with a breath of brand, so 20 loud
      gradients do not fight one dark palette. ─────────────────────────────── */
html[data-theme="dark"] #hc-page .hc-hero,
html[data-theme="dark"] #hc-page #hc-hero{
  background:linear-gradient(160deg,#0e141d 0%,var(--hc-d-bg) 55%,rgba(var(--br),.16) 140%)!important;
  border-bottom:1px solid var(--hc-d-line)!important}
html[data-theme="dark"] #hc-page .hc-hero:before,
html[data-theme="dark"] #hc-page .hc-hero:after{opacity:.30!important}
html[data-theme="dark"] #hc-page .hc-hero h1{color:var(--hc-d-ink)!important;-webkit-text-fill-color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-hero-sub,
html[data-theme="dark"] #hc-page .hc-hero-stats,
html[data-theme="dark"] #hc-page .hc-hero-stats strong{color:var(--hc-d-ink-2)!important}
/* PHASE_HC_SUBHERO_DARK_2026-08-15 — THE PAGE-HEADER BAND IN DARK MODE.
   The two rules that used to live here targeted `.hc-subhero`, and help.php:3772
   deliberately STOPPED emitting that class — the band renders as
   `.hcsh .hcsh-h-* .hcsk-<layout> .hcsh-on{light,dark}`. So this was the band's ONLY
   dark treatment and it had matched nothing since: every category and article page
   opened with a near-white pastel band across the top of a #0b0f16 page.

   ONLY THE LIGHT SKINS ARE TOUCHED. help.php:3775 marks six of the twenty skins
   light (aurora, minimal, classic, zenith, ledger, sanctuary) and tags the band
   `hcsh-onlight`; the other fourteen already paint a dark fill and are correct as
   they are. Re-skinning all twenty would flatten obsidian, nebula, atlas and
   editorial into one grey surface for no reason.

   The band paints from TOKENS (`--hcsh-fill` / `--hcsh-on`, hc-sheet-1.css:271), so
   this redefines those rather than overriding `background` with !important. A light
   band in dark mode simply becomes a dark-toned one — the same four tone tokens
   `.hcsh-ondark` already sets. */
html[data-theme="dark"] #hc-page .hcsh.hcsh-onlight{
  --hcsh-fill:var(--hc-d-raised);
  --hcsh-on:var(--hc-d-ink);
  --hcsh-field:color-mix(in srgb,#fff 16%,transparent);
  --hcsh-field-ink:var(--hc-d-ink);
  --hcsh-field-bd:color-mix(in srgb,#fff 30%,transparent);
  border-bottom:1px solid var(--hc-d-line)}
/* The texture overlays are drawn in dark ink for a light field (hc-sheet-1.css:328).
   On the dark fill above they would be invisible, so restore the base white pattern
   the dark-toned bands already use. */
html[data-theme="dark"] #hc-page .hcsh.hcsh-onlight:before{
  background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 34%,rgba(255,255,255,.03) 70%,transparent)}
html[data-theme="dark"] #hc-page .hcsh.hcsh-onlight:after{
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)}

/* ── Search ────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] #hc-page .hc-search-form,
html[data-theme="dark"] #hc-page .hc-srch-glass,
html[data-theme="dark"] #hc-page .hc-search-terminal-wrap{
  background:var(--hc-d-card)!important;border:1px solid var(--hc-d-line)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-theme="dark"] #hc-page .hc-search-form input{color:var(--hc-d-ink)!important;background:transparent!important}
html[data-theme="dark"] #hc-page .hc-search-form input::placeholder{color:var(--hc-d-ink-3)!important}
html[data-theme="dark"] #hc-page .hc-suggest{
  background:var(--hc-d-card)!important;border-color:var(--hc-d-line)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-suggest-item:hover{background:var(--hc-d-hover)!important}

/* ── Nav + footer (they live OUTSIDE #hc-page, so no #hc-page in these) ────── */
html[data-theme="dark"] .hc-hdr{
  background:rgba(11,15,22,.86)!important;border-bottom:1px solid var(--hc-d-line)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.45)!important}
html[data-theme="dark"] .hc-logo{color:var(--hc-d-ink)!important}

/* The nav items are pills in light mode. On a dark page a row of raised chips reads
   as a toolbar of buttons rather than navigation, so dark strips them back to plain
   links and lets hover do the work. */
html[data-theme="dark"] .hc-nav-links>a,
html[data-theme="dark"] .hc-nav-drop>button{
  background:none!important;border-color:transparent!important;box-shadow:none!important;
  color:var(--hc-d-ink-2)!important}
html[data-theme="dark"] .hc-nav-links>a:hover,
html[data-theme="dark"] .hc-nav-drop>button:hover{
  background:rgba(var(--br),.14)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] .hc-hdr-home{
  background:var(--hc-d-raised)!important;border-color:var(--hc-d-line)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] .hc-nav-burger span{background:var(--hc-d-ink)!important}
html[data-theme="dark"] .hc-nav-collapse{background:var(--hc-d-card)!important;border-color:var(--hc-d-line)!important}

/* The dropdown / mega menu. Its surface is `.hc-nav-menu` — hardcoded #fff. */
html[data-theme="dark"] .hc-nav-menu{
  background:var(--hc-d-card)!important;border-color:var(--hc-d-line)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.55)!important;color:var(--hc-d-ink)!important}
html[data-theme="dark"] .hc-nav-mi{color:var(--hc-d-ink)!important}
html[data-theme="dark"] .hc-nav-mi:hover{background:var(--hc-d-hover)!important}
html[data-theme="dark"] .hc-nav-mi-t{color:var(--hc-d-ink)!important}
html[data-theme="dark"] .hc-nav-mi-d,
html[data-theme="dark"] .hc-nav-feat-d,
html[data-theme="dark"] .hc-nav-overview{color:var(--hc-d-ink-3)!important}
html[data-theme="dark"] .hc-nav-mi-ic,
html[data-theme="dark"] .hc-nav-feat-ic{
  background:rgba(var(--br),.16)!important;border-color:var(--hc-d-line)!important;color:var(--brand-ink,var(--brand))!important}
html[data-theme="dark"] .hc-nav-feat{
  background:var(--hc-d-raised)!important;border-color:var(--hc-d-line)!important}
html[data-theme="dark"] .hc-nav-feat-t{color:var(--hc-d-ink)!important}
html[data-theme="dark"] .hc-nav-drop-label{color:var(--hc-d-ink-3)!important}
html[data-theme="dark"] .hc-foot{background:#080c12!important;border-top:1px solid var(--hc-d-line)!important}
html[data-theme="dark"] .hc-foot,html[data-theme="dark"] .hc-foot a{color:var(--hc-d-ink-2)!important}

/* ── The per-layout search boxes + hero furniture ─────────────────────────────
   Found by sweeping the stylesheet for every class painted #fff or
   rgba(255,255,255,…) rather than waiting to trip over each theme. Each layout
   ships its own search surface; a translucent white one turns into a grey slab on
   a dark page, so they are neutralised as a group. */
html[data-theme="dark"] #hc-page .hc-search-atlas,
html[data-theme="dark"] #hc-page .hc-search-dock,
html[data-theme="dark"] #hc-page .hc-search-gallery,
html[data-theme="dark"] #hc-page .hc-search-ledger,
html[data-theme="dark"] #hc-page .hc-search-mosaic,
html[data-theme="dark"] #hc-page .hc-search-prism,
html[data-theme="dark"] #hc-page .hc-search-sanctuary,
html[data-theme="dark"] #hc-page .hc-search-zenith,
html[data-theme="dark"] #hc-page .hc-aurora-search-card,
html[data-theme="dark"] #hc-page .hc-classic-search-box,
html[data-theme="dark"] #hc-page .hc-atlas-index,
html[data-theme="dark"] #hc-page .hc-route-loader-card{
  background:var(--hc-d-card)!important;border-color:var(--hc-d-line)!important;
  color:var(--hc-d-ink)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Hero furniture: small chips + rules that sit ON the hero, not cards. */
html[data-theme="dark"] #hc-page .hc-hero-inner{
  background:rgba(21,27,37,.55)!important;border-color:var(--hc-d-line)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-theme="dark"] #hc-page .hc-hero-pill,
html[data-theme="dark"] #hc-page .hc-cat-badge{
  background:rgba(255,255,255,.10)!important;border-color:var(--hc-d-line)!important;
  color:var(--hc-d-ink)!important}
html[data-theme="dark"] #hc-page .hc-hero-dot,
html[data-theme="dark"] #hc-page .hc-stat-sep,
html[data-theme="dark"] #hc-page .hc-editorial-rule{
  background:rgba(255,255,255,.22)!important}
html[data-theme="dark"] #hc-page .hc-atlas-pin{
  background:var(--hc-d-raised)!important;border-color:var(--hc-d-line)!important;color:var(--hc-d-ink)!important}
/* Decorative grids read as scratches on a dark hero; ease them right back. */
html[data-theme="dark"] #hc-page .hc-nebula-grid{opacity:.12!important}
/* .hc-cats is a plain grid in most layouts but ONE renders it as a table with a
   white background. Transparent (not card-coloured) is the only safe answer: it
   kills the white slab there without painting a panel behind every other layout's
   tile grid. The tiles themselves already carry the card colour. */
html[data-theme="dark"] #hc-page .hc-cats{background:transparent!important;border-color:var(--hc-d-line)!important}
html[data-theme="dark"] #hc-page .hc-cats td,
html[data-theme="dark"] #hc-page .hc-cats th{border-color:var(--hc-d-line)!important}
html[data-theme="dark"] .hc-nav-solid{background:rgba(11,15,22,.92)!important}