/* ===== AstroReads theme — dark default, light toggle =========================
   The site already themes via its own vars (style.css :root):
     --dark-color1 #031d2e (page bg) | --dark-color2 #17384e (cards)
     --primary-color #e5f0f5 (text)  | --secondary-color #ff7010 (orange)
   DARK is the default (those values). data-theme="light" flips them below.

   v3: report content authored with inline LIGHT styles is tagged by
   theme-toggle.js (luminance classifier) with .ard-card / .ard-ink / .ard-line,
   and re-colored here in dark mode only. Light mode = author intent, no
   overrides needed. ============================================================ */
:root[data-theme="light"]{
  --dark-color1:  #ffffff;   /* page bg  */
  --dark-color2:  #eef3f8;   /* cards    */
  --primary-color:#17384e;   /* text     */
  --white-color:  #17384e;   /* things that used white as text */
  /* --secondary-color (orange) stays constant */
}

/* ---- header keeps its hardcoded navy (#07273c) in both modes ----
   so its text must stay light even when light mode flips --primary-color */
:root[data-theme="light"] .as_header_wrapper{ color: #e5f0f5; }
:root[data-theme="light"] .as_header_wrapper h1,
:root[data-theme="light"] .as_header_wrapper h2,
:root[data-theme="light"] .as_header_wrapper h3,
:root[data-theme="light"] .as_header_wrapper h4,
:root[data-theme="light"] .as_header_wrapper h5,
:root[data-theme="light"] .as_header_wrapper h6{ color: #e5f0f5; }
/* mega-menu dropdown was designed dark (fixed #ccc links) — keep its panel
   dark in light mode so it matches the always-dark header */
:root[data-theme="light"] .mega-parent > .mega-menu{ background: #17384e; }
/* plain dropdown (e.g. Resources) + header social-icon circles: same — their
   --dark-color2 bg flips light while the header stays navy, so pin them dark */
:root[data-theme="light"] .as_menu > ul > li .as_submenu{ background-color: #17384e; }
:root[data-theme="light"] .as_infobox .as_infoicon{ background-color: #17384e; }
/* mobile slide-out menu: same treatment (its bg var flips white otherwise) */
@media (max-width: 991px){
  :root[data-theme="light"] .as_menu{ background-color: #031d2e; }
}
/* footer copyright band keeps its hardcoded navy (#07273c) — pin text light */
:root[data-theme="light"] .as_copyright_wrapper{ color: #e5f0f5; }
/* calculator/service cards keep their hardcoded navy (#07273c / #031d2e) */
:root[data-theme="light"] .as_service_box,
:root[data-theme="light"] .as_service_box h3,
:root[data-theme="light"] .as_service_box h4,
:root[data-theme="light"] .as_service_box h5,
:root[data-theme="light"] .as_service_box p{ color: #e5f0f5; }
/* homepage hero banner sits on an always-dark starfield (bg1.jpeg) — keep its
   heading + copy light in light mode (dark mode already inherits light) */
:root[data-theme="light"] .as_banner_detail h1,
:root[data-theme="light"] .as_banner_detail h2,
:root[data-theme="light"] .as_banner_detail p{ color: #e5f0f5; }
/* Blog Updates section sits on the always-dark starfield too — keep its heading +
   excerpts light in light mode (card titles stay orange). */
:root[data-theme="light"] .as_blog_wrapper .as_heading,
:root[data-theme="light"] .as_blog_wrapper .as_font14,
:root[data-theme="light"] .as_blog_wrapper p{ color: #e5f0f5 !important; }
/* entry-form panel heading sits on an always-dark navy gradient (both themes) —
   keep its title/eyebrow light even when light mode flips --primary-color dark */
:root[data-theme="light"] .quick-astro .panel-heading h1,
:root[data-theme="light"] .quick-astro .panel-heading h2,
:root[data-theme="light"] .quick-astro .panel-heading h3,
:root[data-theme="light"] .panel.quick-astro .panel-heading .nr-eyebrow{ color: #ffffff; }

/* ---- force the page + main wrappers onto the theme bg ---- */
html, body{
  background-color: var(--dark-color1, #031d2e) !important;
  color: var(--primary-color, #e5f0f5) !important;
}
.as_main_wrapper, .as_content, section, main,
.container, .container-fluid, .tab-content{
  background-color: transparent;
}
h1,h2,h3,h4,h5,h6{ color: var(--primary-color, #e5f0f5); }
hr{ border-color: var(--dark-color2, #3b5772); }

/* ---- dark-mode re-coloring of inline-light report content ----
   Classes are applied by theme-toggle.js. Inline styles win over CSS,
   so these need !important. Scoped to dark (the default = no data-theme). ---- */
:root:not([data-theme="light"]) .ard-card{
  background-color: var(--dark-color2, #17384e) !important;
  background-image: none !important;   /* also drops light gradient callouts the classifier now tags */
}
:root:not([data-theme="light"]) .ard-ink{
  color: var(--primary-color, #e5f0f5) !important;
}
:root:not([data-theme="light"]) .ard-line{
  border-color: rgba(229,240,245,.18) !important;
}

/* ---- main content band (was inline on header.php's <section>/.row) ----
   Light = original look: mandala artwork + white content row + black text.
   Dark  = solid page-color band, artwork off. */
.ar-main-section{
  background-image: url('/online_calcs/images/bg2-new.jpeg');
  background-repeat: repeat; background-size: auto; background-position: center;
  color: #000;
}
.ar-main-row{ background-color: #ffffff; }
:root:not([data-theme="light"]) .ar-main-section{
  background-image: none;
  color: var(--primary-color);
}
:root:not([data-theme="light"]) .ar-main-row{ background-color: transparent; }
/* homepage about band carries the same light mandala (style.css) — off in dark */
:root:not([data-theme="light"]) .as_about_wrapper{ background-image: none; }

/* ---- tab bar: footer.css/tabFrozenScroll.css paint it whitesmoke ----
   Dark mode: solid page color (it turns position:fixed on scroll, so it must
   stay opaque); light mode keeps the original whitesmoke. */
:root:not([data-theme="light"]) .tab-fixed{
  background: var(--dark-color1);
  color: var(--primary-color);
}
:root:not([data-theme="light"]) .nav.nav-tabs{ background: transparent; }
/* inactive report-shell pills are navy-on-light by design — lift them in dark */
:root:not([data-theme="light"]) .nr-shell .nav-tabs > li > a{
  color: var(--nr-muted, #9db3c4) !important;
}
:root:not([data-theme="light"]) .nr-shell .nav-tabs > li > a:hover{
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: var(--nr-border, #3b5772) !important;
}
:root:not([data-theme="light"]) .nr-shell .nav-tabs > li.active > a,
:root:not([data-theme="light"]) .nr-shell .nav-tabs > li.active > a:hover,
:root:not([data-theme="light"]) .nr-shell .nav-tabs > li.active > a:focus,
:root:not([data-theme="light"]) .nav-tabs.tab-fixed > li.active > a,
:root:not([data-theme="light"]) .nav-tabs.tab-fixed > li.active > a:hover,
:root:not([data-theme="light"]) .nav-tabs.tab-fixed > li.active > a:focus{
  /* Active pill must beat the > li > a:hover rule (mobile keeps :hover sticky after a tap,
     which otherwise paints the active tab translucent + dark text = blank). */
  background: var(--nr-accent, #ffa500) !important;
  color: #10334a !important;
}

/* ---- dark-mode overrides for the shared report shell ----
   report-shell.php (used by ~150 report pages) paints .nr-shell .tab-content
   as a light "paper" card with dark text — authored before the dark wheel
   became the default. In dark mode, take the card dark using the shell's own
   --nr-* vars; light mode keeps the shell's original light card untouched.
   (The @media print light rules in report-shell.php still apply when printing.) */
:root:not([data-theme="light"]) .nr-shell .tab-content{
  background: var(--nr-bg-1, #10334a); /* solid — wheel PNGs are tuned to 16,51,74 to match exactly */
  color: var(--nr-text, #eaf2f8);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) .nr-shell .tab-pane,
:root:not([data-theme="light"]) .nr-shell .tab-pane p,
:root:not([data-theme="light"]) .nr-shell .tab-pane li,
:root:not([data-theme="light"]) .nr-shell .tab-pane td,
:root:not([data-theme="light"]) .nr-shell .tab-pane th,
:root:not([data-theme="light"]) .nr-shell .tab-pane div{
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .nr-shell .tab-pane h2,
:root:not([data-theme="light"]) .nr-shell .tab-pane h3,
:root:not([data-theme="light"]) .nr-shell .tab-pane h4{
  color: var(--nr-accent-2, #ffd28a);
}
:root:not([data-theme="light"]) .nr-shell .tab-pane a{ color: var(--nr-cyan, #66ccff); }
:root:not([data-theme="light"]) .nr-shell .tab-pane a:hover{ color: #9adcff; }
:root:not([data-theme="light"]) .nr-shell .tab-pane strong,
:root:not([data-theme="light"]) .nr-shell .tab-pane b{ color: #ffffff; }
/* the shell flips inline-white text dark for its light card — undo that in dark */
:root:not([data-theme="light"]) .nr-shell .tab-pane [style*="color:white"],
:root:not([data-theme="light"]) .nr-shell .tab-pane [style*="color: white"],
:root:not([data-theme="light"]) .nr-shell .tab-pane [style*="color:#fff"],
:root:not([data-theme="light"]) .nr-shell .tab-pane [style*="color: #fff"],
:root:not([data-theme="light"]) .nr-shell .tab-pane font[color="white"],
:root:not([data-theme="light"]) .nr-shell .tab-pane font[color="#ffffff"]{
  color: var(--nr-text, #eaf2f8) !important;
}
/* tables */
:root:not([data-theme="light"]) .nr-shell .tab-pane .table{
  background: transparent;
  color: var(--nr-text, #eaf2f8);
}
/* stripe lives on the tr in Bootstrap 3 and on the td in report-shell — dim both */
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-striped > tbody > tr:nth-of-type(odd){
  background-color: transparent !important;
}
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-striped > tbody > tr:nth-of-type(odd) > td,
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-striped > tbody > tr:nth-of-type(odd) > th{
  background-color: rgba(255,255,255,.045) !important;
}
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-bordered,
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-bordered > tbody > tr > td,
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-bordered > tbody > tr > th,
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-bordered > thead > tr > td,
:root:not([data-theme="light"]) .nr-shell .tab-pane .table-bordered > thead > tr > th{
  border-color: var(--nr-border, #3b5772) !important;
}
/* the shell's own light .well styling (report-shell.php ~345) */
:root:not([data-theme="light"]) .nr-shell .well{
  background: var(--nr-bg-1, #10334a);
  border-color: var(--nr-border, #3b5772);
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .nr-shell .well label,
:root:not([data-theme="light"]) .nr-shell .well .col-form-label,
:root:not([data-theme="light"]) .nr-shell .well p,
:root:not([data-theme="light"]) .nr-shell .well span{
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .nr-shell .well a{ color: var(--nr-cyan, #66ccff); }
/* the shell's plain pill buttons (white on light card) */
:root:not([data-theme="light"]) .nr-shell .tab-pane button:not([class]),
:root:not([data-theme="light"]) .nr-shell .tab-pane button[onclick]:not(.btn){
  color: var(--nr-text, #eaf2f8);
  background: var(--nr-bg-1, #10334a);
  border-color: var(--nr-border, #3b5772);
}

/* ---- forecast tab (per-report <style> block: transits_progressed, natal,
        tertiary_minor, …) — light class-styled cards go dark ---- */
:root:not([data-theme="light"]) .forecast-tab .recs-card,
:root:not([data-theme="light"]) .forecast-tab .election-cta{
  background: var(--nr-bg-1, #10334a);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) .forecast-tab h3{ border-bottom-color: var(--nr-border, #3b5772); }
:root:not([data-theme="light"]) .forecast-tab .score-card .eyebrow{ color: var(--nr-muted, #9db3c4); }

/* ---- Bootstrap 3 light defaults (wells, panels, modals, dropdowns) ---- */
:root:not([data-theme="light"]) .well{
  background-color: var(--nr-bg-1, #10334a);
  border-color: var(--nr-border, #3b5772);
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .panel{
  background-color: var(--nr-bg-1, #10334a);
  border-color: var(--nr-border, #3b5772);
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .panel-default > .panel-heading,
:root:not([data-theme="light"]) .panel-footer{
  background-color: var(--nr-bg-0, #0a1a27);
  color: var(--nr-text, #eaf2f8);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) .jumbotron{
  background-color: var(--nr-bg-1, #10334a);
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .list-group-item{
  background-color: transparent;
  color: var(--nr-text, #eaf2f8);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) .modal-content,
:root:not([data-theme="light"]) .dropdown-menu{
  background-color: var(--nr-bg-1, #10334a);
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .dropdown-menu > li > a{ color: var(--nr-text, #eaf2f8); }
:root:not([data-theme="light"]) .dropdown-menu > li > a:hover{
  background-color: rgba(255,255,255,.08); color: #ffffff;
}
:root:not([data-theme="light"]) .breadcrumb{ background-color: rgba(255,255,255,.06); }
:root:not([data-theme="light"]) .input-group-addon{
  background-color: var(--nr-bg-1, #10334a);
  color: var(--nr-text, #eaf2f8);
  border-color: var(--nr-border, #3b5772);
}
/* electional page cards */
:root:not([data-theme="light"]) .electional-container{
  background: var(--nr-bg-1, #10334a);
  color: var(--nr-text, #eaf2f8);
}
/* horary question assistant (self-contained light widget) */
:root:not([data-theme="light"]) .horary-box{
  background: var(--nr-bg-1, #10334a);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) .horary-box h3{ color: var(--nr-accent-2, #ffd28a); }
:root:not([data-theme="light"]) .horary-box label{ color: var(--nr-text, #eaf2f8); }
:root:not([data-theme="light"]) .horary-box select{
  background: var(--nr-bg-0, #0a1a27);
  color: var(--nr-text, #eaf2f8);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) #horaryResult{ color: var(--nr-text, #eaf2f8); }
:root:not([data-theme="light"]) .dignity-table-wrapper tr{
  background: rgba(255,255,255,.04);
  border-color: var(--nr-border, #3b5772);
}

/* ---- recurring per-report <style> families (class-styled light components
        the classifier can't see). Valence tints keep their hue, darkened. ---- */
/* zebra tables (solar_return, lunar_return, …) */
:root:not([data-theme="light"]) .zebra-table tbody tr,
:root:not([data-theme="light"]) .zebra-table tbody tr.row-odd{ background: transparent; }
:root:not([data-theme="light"]) .zebra-table tbody tr.row-even{ background: rgba(255,255,255,.045); }
:root:not([data-theme="light"]) .zebra-table tbody tr.now{ background: rgba(255,210,138,.16) !important; }
/* Timing-report CARD VIEW (.zebra-table interpretation cards: ZR, Solar Return, etc.).
   Their bespoke <style> blocks set dark card text (#222/#333) + light borders (#eee/#fafafa)
   authored for a light card — faded/low-contrast in dark. Lift text + darken borders/cards.
   Sign glyphs keep their inline colors (inline on the <span> wins over inherited td color). */
:root:not([data-theme="light"]) .zebra-table td,
:root:not([data-theme="light"]) .zebra-table th,
:root:not([data-theme="light"]) .zebra-table .col-interpretation,
:root:not([data-theme="light"]) .zebra-table .col-combo{
  color: var(--nr-text, #eaf2f8) !important;
}
:root:not([data-theme="light"]) .zebra-table,
:root:not([data-theme="light"]) .zebra-table th,
:root:not([data-theme="light"]) .zebra-table td,
:root:not([data-theme="light"]) .zebra-table tr,
:root:not([data-theme="light"]) .zebra-table tr.lvl3-row.zr-shown{
  border-color: var(--nr-border, #3b5772) !important;
}
:root:not([data-theme="light"]) .zebra-table tr.lvl3-row.zr-shown,
:root:not([data-theme="light"]) .zebra-table tr.lvl3-row.zr-shown > td{
  background: rgba(255,255,255,.05) !important;
}
/* L2 period CARDS (mobile card view) set background:#fff !important + light #ddd border +
   box-shadow = a white card in dark mode. High specificity to beat the report's !important. */
:root:not([data-theme="light"]) .zebra-table.has-interpretation > tbody > tr.l2row,
:root:not([data-theme="light"]) .zebra-table.has-interpretation > tbody > tr[id^="l2row-"]{
  background: var(--nr-bg-1, #10334a) !important;
  border-color: var(--nr-border, #3b5772) !important;
  box-shadow: none !important;
}
/* card date/age header (#1976d2 blue) -> readable light-blue on dark */
:root:not([data-theme="light"]) .zebra-table .l2-date-line{ color: var(--nr-cyan, #66ccff) !important; }

/* ---- transits_period.php list/card view (same white-card pattern) ---- */
:root:not([data-theme="light"]) #all_events td,
:root:not([data-theme="light"]) #eclipse td,
:root:not([data-theme="light"]) table[id^="signs_"] td,
:root:not([data-theme="light"]) table[id^="houses_"] td,
:root:not([data-theme="light"]) table[id^="retro_"] td,
:root:not([data-theme="light"]) table[id^="aspects_"] td,
:root:not([data-theme="light"]) table[id^="returns_"] td{ color: var(--nr-text, #eaf2f8) !important; }
:root:not([data-theme="light"]) #all_events td:first-child,
:root:not([data-theme="light"]) #eclipse td:first-child,
:root:not([data-theme="light"]) table[id^="signs_"] td:first-child,
:root:not([data-theme="light"]) table[id^="houses_"] td:first-child,
:root:not([data-theme="light"]) table[id^="retro_"] td:first-child,
:root:not([data-theme="light"]) table[id^="aspects_"] td:first-child,
:root:not([data-theme="light"]) table[id^="returns_"] td:first-child{ color: var(--nr-cyan, #66ccff) !important; }
:root:not([data-theme="light"]) .planet-info{ background: rgba(255,255,255,.05) !important; }
:root:not([data-theme="light"]) .planet-info strong{ color: var(--nr-accent-2, #ffd28a) !important; }
:root:not([data-theme="light"]) .event-filter-bar{ background: rgba(255,255,255,.05) !important; border-color: var(--nr-border, #3b5772) !important; }

/* Personality-dimension sliders (natal): track #e5e7eb + fill #c7d2fe are light, so the JS
   classifier darkens them to navy = invisible. Pin visible colors in dark (dot keeps its color). */
:root:not([data-theme="light"]) .mbti-track{ background: rgba(255,255,255,.16) !important; }
:root:not([data-theme="light"]) .mbti-fill{ background: rgba(165,180,252,.55) !important; }

/* Podium medal blocks: fixed gold/silver/bronze via inline style. The classifier can tag light
   blocks .ard-card and darken them; these !important rules (higher specificity) keep the medal
   colours and the dark number labels no matter what the classifier does. */
.ard-podium .ard-medal{ background: var(--ard-medal, inherit); }
:root .ard-podium .ard-medal[style*="#ffcf40"]{ background:#ffcf40 !important; }
:root .ard-podium .ard-medal[style*="#c0c0c0"]{ background:#c0c0c0 !important; }
:root .ard-podium .ard-medal[style*="#cd7f32"]{ background:#cd7f32 !important; }
:root .ard-podium .ard-medal-num{ color:#1a1a1a !important; }

/* Dignity map / triplicity: server renders BOTH palettes (SVG can't read the client theme).
   The dm-light copy is inline display:none by default, so ONLY the dark copy shows even if this
   CSS fails to load (prevents 2 maps). In light theme, hide dark + reveal light. */
:root[data-theme="light"] .dm-theme.dm-dark{ display:none !important; }
:root[data-theme="light"] .dm-theme.dm-light{ display:inline !important; }



/* ---- time_lords.php (firdaria / decennials / bounds / profections card view) ---- */
:root:not([data-theme="light"]) #firdaria-l2 td,
:root:not([data-theme="light"]) #decennials-l2 td,
:root:not([data-theme="light"]) #bounds-table td,
:root:not([data-theme="light"]) #profection-table-v2 td,
:root:not([data-theme="light"]) #profection-table-v2 .profection-sign{ color: var(--nr-text, #eaf2f8) !important; }
:root:not([data-theme="light"]) #firdaria-l2 > tbody > tr[id^="l2row-"],
:root:not([data-theme="light"]) #decennials-l2 > tbody > tr[id^="l2row-"],
:root:not([data-theme="light"]) #bounds-table tr{
  background: var(--nr-bg-1, #10334a) !important;
  border-color: var(--nr-border, #3b5772) !important;
  box-shadow: none !important;
}
@media (max-width: 768px){
  :root:not([data-theme="light"]) #all_events > tbody > tr,
  :root:not([data-theme="light"]) #eclipse > tbody > tr,
  :root:not([data-theme="light"]) table[id^="signs_"] > tbody > tr,
  :root:not([data-theme="light"]) table[id^="houses_"] > tbody > tr,
  :root:not([data-theme="light"]) table[id^="retro_"] > tbody > tr,
  :root:not([data-theme="light"]) table[id^="aspects_"] > tbody > tr,
  :root:not([data-theme="light"]) table[id^="returns_"] > tbody > tr{
    background: var(--nr-bg-1, #10334a) !important;
    border-color: var(--nr-border, #3b5772) !important;
    box-shadow: none !important;
  }
}
/* electional calendar valence */
:root:not([data-theme="light"]) .cal-good{ background: rgba(16,185,129,.22); }
:root:not([data-theme="light"]) .cal-ok{ background: rgba(245,158,11,.20); }
:root:not([data-theme="light"]) .cal-weak{ background: rgba(239,68,68,.22); }
:root:not([data-theme="light"]) .cal-empty{ background: rgba(255,255,255,.04); }
:root:not([data-theme="light"]) .cal-score,
:root:not([data-theme="light"]) .cal-legend{ color: var(--nr-muted, #9db3c4); }
/* condition / valence chips */
:root:not([data-theme="light"]) .chip-pos,
:root:not([data-theme="light"]) .cond-boost{ background: rgba(96,180,60,.25); color: #b7e2a0; }
:root:not([data-theme="light"]) .chip-neg,
:root:not([data-theme="light"]) .cond-comp{ background: rgba(214,106,77,.25); color: #f0b9a6; }
:root:not([data-theme="light"]) .chip-zero{ background: rgba(255,255,255,.10); color: #b9c6d0; }
/* ACG UI bar + buttons */
:root:not([data-theme="light"]) .acg-topbar{ background: var(--nr-bg-1, #10334a); }
:root:not([data-theme="light"]) .acg-btn{
  background: var(--nr-bg-1, #10334a);
  color: var(--nr-text, #eaf2f8);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) .nr-shell .acg-app,
:root:not([data-theme="light"]) .nr-shell .acg-app label,
:root:not([data-theme="light"]) .nr-shell .acg-app p,
:root:not([data-theme="light"]) .nr-shell .acg-app span,
:root:not([data-theme="light"]) .nr-shell .acg-app a,
:root:not([data-theme="light"]) .nr-shell .acg-app .acg-explain,
:root:not([data-theme="light"]) .nr-shell .acg-app .acg-explain *{ color: var(--nr-text, #eaf2f8); }
:root:not([data-theme="light"]) .nr-shell .acg-app .acg-small,
:root:not([data-theme="light"]) .nr-shell .acg-app .acg-legend{ color: var(--nr-muted, #9db3c4); }
/* acg/local-space buttons — force visible (Go/Close/Fetch/Clear) */
:root:not([data-theme="light"]) .acg-btn,
:root:not([data-theme="light"]) .acg-btn-small{
  background: var(--nr-bg-1, #10334a) !important;
  color: var(--nr-text, #eaf2f8) !important;
  border-color: var(--nr-border, #3b5772) !important;
}
/* Relocation Suitability score bars: dark track, accent fill (classifier can't
   see the dark #111827 fill; it darkened the light track and hid the bar) */
:root:not([data-theme="light"]) .acg-suit-track{ background: rgba(255,255,255,.12) !important; }
:root:not([data-theme="light"]) .acg-suit-fill{ background: var(--nr-accent, #ffa500) !important; }
/* ---- standalone tool/guide pages (mercury-retrograde, moon-phases, guide,
   glossary, FAQ blocks) ship their own hardcoded LIGHT cards. They are not
   report shells, and the JS classifier isn't reliably re-coloring them, so theme
   the structural cards directly here. Semantic colored badges keep their hue. */
:root:not([data-theme="light"]) .mr-yearcard,
:root:not([data-theme="light"]) .mr-card,
:root:not([data-theme="light"]) .g-jumpnav,
:root:not([data-theme="light"]) .g-ref-table,
:root:not([data-theme="light"]) .gl-rpt,
:root:not([data-theme="light"]) .faq-question,
:root:not([data-theme="light"]) .faq-answer{
  background: var(--dark-color2, #17384e) !important;
  background-image: none !important;
  color: var(--primary-color, #e5f0f5) !important;
  border-color: var(--nr-border, #3b5772) !important;
}
:root:not([data-theme="light"]) .mr-yearcard .mr-d,
:root:not([data-theme="light"]) .mp-yearcard .mp-d{ color: var(--nr-muted, #9db3c4) !important; }
/* year numbers are a dark purple (#5a4fcf / #2b2b6f) — unreadable on dark; lift to bright lavender */
:root:not([data-theme="light"]) .mr-yearcard .mr-y,
:root:not([data-theme="light"]) .mp-yearcard .mp-y{ color:#b9a7ff !important; }
/* moon-phase cards keep their semantic blue/gold left border — darken the fill only */
:root:not([data-theme="light"]) .mp-new{ background:#16203c !important; }
:root:not([data-theme="light"]) .mp-full{ background:#2b2410 !important; }
/* guide "Not sure where to start" callout: light-blue box, dark text */
:root:not([data-theme="light"]) .g-callout{
  background: var(--dark-color2, #17384e) !important;
  border-color: var(--nr-border, #3b5772) !important;
  color: var(--primary-color, #e5f0f5) !important;
}
:root:not([data-theme="light"]) .g-callout strong{ color: var(--primary-color, #e5f0f5) !important; }
:root:not([data-theme="light"]) .g-callout a{ color: var(--nr-cyan, #66ccff) !important; }
/* "Quick Access to Other Reports" buttons (footer.css .report-link, lives OUTSIDE
   .nr-shell so it stays white on dark) — dark pill, keep the orange label */
:root:not([data-theme="light"]) .report-link,
:root:not([data-theme="light"]) .report-links .report-link{
  background: var(--dark-color2, #17384e) !important;
  border-color: var(--nr-border, #3b5772) !important;
}
/* GRADIENT / light cards the JS classifier can't parse (parseColor returns null
   for linear-gradient) — local-space callout + cards */
:root:not([data-theme="light"]) .ls-room-callout,
:root:not([data-theme="light"]) .ls-card,
:root:not([data-theme="light"]) .ls-card-narrow{
  background: var(--nr-bg-1, #10334a) !important;
  border-color: var(--nr-border, #3b5772) !important;
  color: var(--nr-text, #eaf2f8) !important;
}
:root:not([data-theme="light"]) .ls-room-callout h3,
:root:not([data-theme="light"]) .ls-card-title{ color: var(--nr-accent-2, #ffd28a) !important; }
:root:not([data-theme="light"]) .ls-room-callout p,
:root:not([data-theme="light"]) .ls-card p{ color: var(--nr-text, #eaf2f8) !important; }
/* form-control dropdowns in report content (aspect type, All planets, floorplan…)
   — the classifier skips SELECT/INPUT to avoid breaking controls, so theme here */
:root:not([data-theme="light"]) .nr-shell select,
:root:not([data-theme="light"]) .acg-app select,
:root:not([data-theme="light"]) .intro-section select,
:root:not([data-theme="light"]) .ls-floorplan-select{
  background: var(--nr-bg-0, #0a1a27) !important;
  color: var(--nr-text, #eaf2f8) !important;
  border-color: var(--nr-border, #3b5772) !important;
}
:root:not([data-theme="light"]) .nr-shell select option,
:root:not([data-theme="light"]) .acg-app select option{
  background: var(--nr-bg-0, #0a1a27); color: var(--nr-text, #eaf2f8);
}
/* Text/date/search inputs (acg date + city search, etc.) — the classifier skips
   INPUT (native pickers are fragile), so theme them here. color-scheme:dark makes
   the native date-picker calendar icon + popup render dark too. */
:root:not([data-theme="light"]) .nr-shell input[type="text"],
:root:not([data-theme="light"]) .nr-shell input[type="date"],
:root:not([data-theme="light"]) .nr-shell input[type="search"],
:root:not([data-theme="light"]) .nr-shell input[type="number"],
:root:not([data-theme="light"]) .acg-app input[type="text"],
:root:not([data-theme="light"]) .acg-app input[type="date"],
:root:not([data-theme="light"]) .acg-app input[type="search"],
:root:not([data-theme="light"]) .intro-section input[type="text"],
:root:not([data-theme="light"]) .intro-section input[type="date"]{
  background: var(--nr-bg-0, #0a1a27) !important;
  color: var(--nr-text, #eaf2f8) !important;
  border-color: var(--nr-border, #3b5772) !important;
  color-scheme: dark;
}
:root:not([data-theme="light"]) .nr-shell input::placeholder,
:root:not([data-theme="light"]) .acg-app input::placeholder{ color: var(--nr-muted, #9db3c4) !important; }
/* Transit-calendar valence swatches + day cells: the light pastels (#a7e8b8…
   #fcd9d9) vanish on dark and the JS classifier flattens them all to one navy,
   killing the colour code. Pin distinct dark tints (two-class specificity beats
   the classifier's single-class .ard-* !important) — dark enough for the white
   score text, still readable as green→amber→red. */
:root:not([data-theme="light"]) .cal-vstrong{ background:#1f8a52 !important; }  /* Ideal */
:root:not([data-theme="light"]) .cal-strong { background:#2a6e49 !important; }  /* Positive */
:root:not([data-theme="light"]) .cal-pos    { background:#345f4a !important; }  /* Reasonable */
:root:not([data-theme="light"]) .cal-mixed  { background:#7a5f22 !important; }  /* Cautious */
:root:not([data-theme="light"]) .cal-hard   { background:#833c3c !important; }  /* Challenging */
/* Fixed-stars table cells hard-pin color:#1e293b via INLINE !important (no CSS can
   beat inline !important) — so the value is routed through this var instead. Light
   keeps the #1e293b fallback; dark resolves to the light body text. */
:root:not([data-theme="light"]){ --fs-cell: var(--nr-text, #eaf2f8); }
/* Bootstrap progress bars (esoteric Ray Conditioning, archetype scoring, etc.):
   the light track + pale fill wash out on dark. Dark track + accent fill. */
:root:not([data-theme="light"]) .progress{ background: rgba(255,255,255,.12) !important; }
:root:not([data-theme="light"]) .progress-bar{ background-color: var(--nr-accent, #ffa500) !important; color:#1a1200 !important; }
/* Light utility/reveal buttons (Show insights, Show interpretations, Explain, etc.):
   the classifier tags them .ard-card, but a bordered pill reads better as a button.
   Covers any tagged <button> plus the named reveal buttons directly. */
:root:not([data-theme="light"]) button.ard-card,
:root:not([data-theme="light"]) .toggle-details,
:root:not([data-theme="light"]) .toggle-interpretations,
:root:not([data-theme="light"]) .show-interpretations{
  background: var(--nr-bg-1, #10334a) !important;
  color: var(--nr-text, #eaf2f8) !important;
  border: 1px solid var(--nr-border, #3b5772) !important;
}
/* Vocation career-family bars: fill is a dark navy (#22324a) that disappears once
   the track is darkened — subtle dark track + accent fill so the bar reads. */
:root:not([data-theme="light"]) .subbar-track{
  background: rgba(255,255,255,.12) !important; border-color: var(--nr-border, #3b5772) !important;
}
:root:not([data-theme="light"]) .subbar-fill{ background: var(--nr-accent, #ffa500) !important; opacity:1 !important; }
:root:not([data-theme="light"]) .subbar-pct{ color: var(--nr-accent-2, #ffd28a) !important; }
/* Best-locations (top_locations.php) per-city score bars: own classes, dark #111827
   fill on a light track — same treatment as the other score bars. */
:root:not([data-theme="light"]) .t50-bar-track{ background: rgba(255,255,255,.12) !important; }
:root:not([data-theme="light"]) .t50-bar-fill{ background: var(--nr-accent, #ffa500) !important; }
/* misc report tables + cards */
:root:not([data-theme="light"]) .v8-signals-table th,
:root:not([data-theme="light"]) .bdTable thead th{ background: var(--nr-bg-1, #10334a); }
:root:not([data-theme="light"]) .v8-signals-table tbody tr:hover,
:root:not([data-theme="light"]) .bdTable tbody tr:hover{ background: rgba(255,255,255,.05); }
:root:not([data-theme="light"]) .v8-notes,
:root:not([data-theme="light"]) .theme-card,
:root:not([data-theme="light"]) .t50-card{ background: var(--nr-bg-1, #10334a); }
:root:not([data-theme="light"]) .t50-chip,
:root:not([data-theme="light"]) .t50-score-badge,
:root:not([data-theme="light"]) .sort{ background: rgba(255,255,255,.08); }
:root:not([data-theme="light"]) .t50-filter button{
  background: var(--nr-bg-1, #10334a);
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .t50-bar-track{ background: rgba(255,255,255,.12); }
:root:not([data-theme="light"]) .g-jumpnav a:hover,
:root:not([data-theme="light"]) .g-cta a:hover,
:root:not([data-theme="light"]) .pt-view-toggle a:hover{ background: rgba(255,255,255,.08); }
/* My Charts page */
:root:not([data-theme="light"]) .mycharts-wrap h1{ color: var(--nr-accent-2, #ffd28a) !important; }
:root:not([data-theme="light"]) .mycharts-privacy,
:root:not([data-theme="light"]) .mycharts-empty{ color: var(--nr-muted, #9db3c4) !important; }
:root:not([data-theme="light"]) .mycharts-btn.sort{
  background: rgba(255,255,255,.10) !important;
  color: #e5f0f5 !important;
}

/* ---- dark-mode overrides for landing-page.css (entry pages) ----
   Same light-paper-card language as report-shell: .intro-section SEO block,
   FAQ accordions, gallery captions on data_entry.php + all *-entry.php pages.
   Light mode keeps the authored light card. */
:root:not([data-theme="light"]) .intro-section.intro-section{
  background: var(--nr-bg-1, #10334a); /* solid: no artwork bleed-through on pages without --nr-* vars */
  color: var(--nr-text, #eaf2f8);
  border-color: var(--nr-border, #3b5772) !important;
}
:root:not([data-theme="light"]) .intro-section h1{ color: var(--nr-accent-2, #ffd28a); }
:root:not([data-theme="light"]) .intro-section h2,
:root:not([data-theme="light"]) .intro-section h3{
  color: var(--nr-accent-2, #ffd28a);
  background: var(--nr-bg-1, #10334a);
}
:root:not([data-theme="light"]) .intro-section h4{ color: var(--nr-accent-2, #ffd28a); }
:root:not([data-theme="light"]) .intro-section h1 + p,
:root:not([data-theme="light"]) .intro-section p,
:root:not([data-theme="light"]) .intro-section li{ color: var(--nr-text, #eaf2f8); }
:root:not([data-theme="light"]) .intro-section strong{ color: #ffffff; }
:root:not([data-theme="light"]) .intro-section p:has(> strong:first-child),
:root:not([data-theme="light"]) .intro-section li,
:root:not([data-theme="light"]) .intro-section ol li{
  background: rgba(255,255,255,.04);
  border-color: var(--nr-border, #3b5772);
}
:root:not([data-theme="light"]) .intro-section a{ color: var(--nr-cyan, #66ccff); }
:root:not([data-theme="light"]) .intro-section a:hover{ color: #9adcff; }
:root:not([data-theme="light"]) .faq-question{
  background: rgba(255,255,255,.05);
  border-color: var(--nr-border, #3b5772);
  color: var(--nr-text, #eaf2f8);
}
:root:not([data-theme="light"]) .faq-question:hover{ background: rgba(255,255,255,.09); }
:root:not([data-theme="light"]) .faq-answer{ color: var(--nr-text, #eaf2f8); }
:root:not([data-theme="light"]) .gallery-title,
:root:not([data-theme="light"]) .gallery-caption{ color: var(--nr-accent-2, #ffd28a); }

/* ---- theme toggle pill (injected by theme-toggle.js) — bottom-LEFT so it
        never collides with the scroll-to-top button (bottom-right) ---- */
.ar-theme-bar{
  position: fixed; left: 16px; bottom: 76px; z-index: 1050;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--dark-color2); color: var(--primary-color);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  font: 13px/1 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer; user-select: none;
}
.ar-theme-bar:hover{ border-color: var(--secondary-color); }
.ar-theme-bar .ar-theme-ico{ font-size: 15px; color: var(--secondary-color); }
.ar-theme-bar .ar-theme-label{ opacity:.9; }
:root[data-theme="light"] .ar-theme-bar{ border-color: rgba(0,0,0,.12); box-shadow:0 4px 16px rgba(20,30,60,.15); }
@media (max-width: 480px){ .ar-theme-bar{ left: 10px; bottom: 76px; padding: 6px 11px; } }


/* Secondary chart images in report tabs get a white photo-frame (footer.php:
   #my-tab-content img { white bg + 10px pad + 2px #ddd border + shadow }) — fine on the
   light page, a thick white box in dark. Charts are navy now, so slim it to a thin subtle
   border, no white bg/padding/shadow. Specificity beats the base rule but stays BELOW the
   #chart override (2 IDs) so the main wheel keeps no border. */
:root:not([data-theme="light"]) #my-tab-content img,
:root:not([data-theme="light"]) .entry-content img{
  background-color: transparent;
  border: 1px solid var(--nr-border, #3b5772);
  padding: 0;
  box-shadow: none;
}