/* ============================================================
   FeeDings: Auto / Light / Dark (prototype)
   theme.js puts .light-mode on <html>. The toggle sits in each page's menu bar.
   - FeeDings (blue) view: the blue header, menu bar and footer stay; light/dark
     changes the content area and its edges.
   - App takeovers (BenchCalc, Influence, pathlaid): fully light or dark, including
     the header, tabs, title banner (light banner images) and menu bar.
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.6rem; border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(0, 0, 0, 0.55);
  color: #000; font-family: inherit; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background 0.2s ease;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.6); }
.theme-label { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.theme-divider { width: 1px; height: 1.5rem; background: rgba(0, 0, 0, 0.3); margin: 0 0.25rem; }
/* Home page: the menu row is rebuilt by script, so the toggle sits beside it */
#submenuBar > .container { display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Legal pages: the toggle ends the tab strip */
.nav-strip .theme-toggle { margin: 0 0.5rem; align-self: center; }

/* Toggle inside dark takeovers */
body.benchcalc-active .theme-toggle, body.influence-active .theme-toggle, body.pathlaid-active .theme-toggle { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: #c9d1d9; }
body.benchcalc-active .theme-divider, body.influence-active .theme-divider, body.pathlaid-active .theme-divider { background: rgba(255,255,255,.2); }

/* ---------- FeeDings (blue) view, light: content area and edges ---------- */
:root.light-mode { color-scheme: light; }
:root.light-mode body:not(.benchcalc-active):not(.influence-active):not(.pathlaid-active) {
  background: #dde8ee !important; color: #10202c;
  --rd-bg-deep: #dde8ee; --rd-bg-card: #ffffff; --rd-bg-card-dim: rgba(255,255,255,.75);
  --rd-text: #10202c; --rd-text-dim: #42535f; --rd-text-faint: #64737e; --rd-border-soft: rgba(0,0,0,.1); --rd-green-play: #12803f;
}
:root.light-mode #mainContent, :root.light-mode #mainContent .rd, :root.light-mode #rssContent, :root.light-mode #rssContent .rd { --rd-accent: #0077b3; --rd-accent-dim: rgba(0,119,179,.12); --rd-accent-border: rgba(0,119,179,.3); --rd-accent-border-hover: rgba(0,119,179,.55); }
/* edges: a crisp line where the blue chrome meets the light content */
:root.light-mode body:not(.benchcalc-active):not(.influence-active):not(.pathlaid-active) #submenuBar, :root.light-mode body:not(.benchcalc-active):not(.influence-active):not(.pathlaid-active) .section-bar { box-shadow: 0 6px 18px -12px rgba(0,60,100,.45); }
:root.light-mode .rd h1, :root.light-mode .rd h2, :root.light-mode .rd h3, :root.light-mode .rd .rd-h1, :root.light-mode .rd .rd-h2, :root.light-mode .rd .rd-h3, :root.light-mode .rd .rd-section-h,
:root.light-mode .rd .rd-fp-subheading, :root.light-mode .rd-panel h3, :root.light-mode .rd-release-section h2, :root.light-mode .rd-release-section h3 { color: #141a22; }
:root.light-mode .rd-trio-benchcalc .rd-trio-title, :root.light-mode .rd-trio-influence .rd-trio-title, :root.light-mode .rd-trio-pathlaid .rd-trio-title { color: #fff; }
:root.light-mode main [style*="color: #fff"], :root.light-mode main [style*="color:#fff"], :root.light-mode section [style*="color: #fff"], :root.light-mode section [style*="color:#fff"], :root.light-mode article [style*="color: #fff"], :root.light-mode article [style*="color:#fff"] { color: #141a22 !important; }
:root.light-mode .rd-store-btn-ios, :root.light-mode .rd-store-btn-ms-live { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.2); color: #141a22; }
:root.light-mode .rd-store-btn-ms { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.14); color: rgba(0,0,0,.5); }
:root.light-mode .rd-store-btn-ms .rd-soon-tag { color: rgba(0,0,0,.4); }
:root.light-mode .rd-release-tag.future, :root.light-mode .rd-tag-imp, :root.light-mode .rd-tag-tip, :root.light-mode .rd-fp-status.dev { color: #a86b00; }
:root.light-mode .rd-tag-fix { color: #b42318; }
:root.light-mode main .text-white, :root.light-mode section .text-white, :root.light-mode article .text-white { color: #10202c; }
:root.light-mode .text-slate-300 { color: #33434f; }
:root.light-mode .text-slate-400 { color: #4a5a66; }
:root.light-mode .text-slate-500 { color: #5f6e79; }
:root.light-mode main .text-blue-400, :root.light-mode section .text-blue-400, :root.light-mode article .text-blue-400 { color: #005fa3; }
:root.light-mode .text-red-400 { color: #b42318; } :root.light-mode .text-green-400 { color: #12803f; } :root.light-mode .text-amber-300 { color: #9a6700; }
:root.light-mode .bg-slate-900\/80 { background-color: rgba(255,255,255,.92); }
:root.light-mode .bg-slate-800\/60 { background-color: rgba(255,255,255,.8); }
:root.light-mode .bg-slate-700\/30, :root.light-mode .bg-slate-700\/40, :root.light-mode .bg-slate-700\/50 { background-color: rgba(0,40,70,.05); }
:root.light-mode .border-slate-600, :root.light-mode .border-slate-700 { border-color: rgba(0,0,0,.14); }
:root.light-mode .bg-green-900\/20 { background-color: rgba(18,128,63,.08); } :root.light-mode .bg-amber-900\/20 { background-color: rgba(180,120,0,.08); }
:root.light-mode .bg-blue-900\/20, :root.light-mode .bg-blue-900\/30 { background-color: rgba(0,95,163,.08); }
:root.light-mode .prose-invert { --tw-prose-body: #33434f; --tw-prose-headings: #141a22; --tw-prose-links: #005fa3; --tw-prose-bold: #141a22; --tw-prose-counters: #5f6e79; --tw-prose-bullets: #8a99a4; --tw-prose-hr: rgba(0,0,0,.12); --tw-prose-th-borders: rgba(0,0,0,.15); --tw-prose-td-borders: rgba(0,0,0,.08); color: #33434f; }
:root.light-mode .prose-invert h1, :root.light-mode .prose-invert h2, :root.light-mode .prose-invert h3, :root.light-mode .prose-invert strong { color: #141a22; }
:root.light-mode .prose-invert a { color: #005fa3; }

/* ---------- benchcalc takeover, light ---------- */
:root.light-mode body.benchcalc-active { background: #f2f5f4 !important; color: #18202b;
  --rd-bg-deep: #f2f5f4; --rd-bg-card: #ffffff; --rd-bg-card-dim: rgba(255,255,255,.75);
  --rd-text: #18202b; --rd-text-dim: #48525f; --rd-text-faint: #6b7480; --rd-border-soft: rgba(0,0,0,.1); --rd-green-play: #12803f; }
:root.light-mode #benchContent, :root.light-mode #benchContent .rd { --rd-accent: #0f766e; --rd-accent-dim: rgba(15,118,110,.12); --rd-accent-border: rgba(15,118,110,.3); --rd-accent-border-hover: rgba(15,118,110,.55); }
:root.light-mode body.benchcalc-active .header-bar, :root.light-mode body.benchcalc-active .nav-bar { background-color: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.benchcalc-active .nav-bar .text-black, :root.light-mode body.benchcalc-active .nav-bar span.text-black, :root.light-mode body.benchcalc-active .nav-util { color: #2a333d !important; }
:root.light-mode body.benchcalc-active .nav-bar [class*="text-black/60"] { color: rgba(42,51,61,.6) !important; }
:root.light-mode body.benchcalc-active .nav-btn-inactive:hover { background: rgba(0,0,0,.05); }
:root.light-mode body.benchcalc-active .nav-strip .nav-divider { background: rgba(0,0,0,.12); }
:root.light-mode body.benchcalc-active .nav-strip .nav-divider-strong { background: rgba(0,0,0,.22); }
:root.light-mode body.benchcalc-active .nav-btn-active { background: rgba(15,118,110,.1); box-shadow: inset 0 -4px 0 0 #0f766e; }
:root.light-mode body.benchcalc-active .nav-btn-active .text-black { color: #0f766e !important; }
:root.light-mode body.benchcalc-active .sticky-submenu { background-color: #f2f5f4 !important; border-color: rgba(0,0,0,.12) !important; box-shadow: 0 6px 18px -14px rgba(0,0,0,.35); }
:root.light-mode body.benchcalc-active .sticky-submenu .sub-btn, :root.light-mode body.benchcalc-active .sticky-submenu a:not(.sub-btn) { color: #2a333d !important; }
:root.light-mode body.benchcalc-active .sticky-submenu a:not(.sub-btn) svg { fill: #2a333d; }
:root.light-mode body.benchcalc-active .sticky-submenu .sub-btn:hover, :root.light-mode body.benchcalc-active .sticky-submenu a:not(.sub-btn):hover { background: rgba(15,118,110,.08) !important; }
:root.light-mode body.benchcalc-active .sticky-submenu .sub-btn-active { background: rgba(15,118,110,.12) !important; border-color: #0f766e !important; color: #0f766e !important; }
:root.light-mode body.benchcalc-active .sticky-submenu [class*="bg-black/10"] { background: rgba(15,118,110,.1) !important; color: #0f766e !important; }
:root.light-mode body.benchcalc-active .sticky-submenu [class*="bg-black/30"] { background-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.benchcalc-active .theme-toggle { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.25); color: #2a333d; }
:root.light-mode body.benchcalc-active .theme-divider { background: rgba(0,0,0,.15); }
:root.light-mode body.benchcalc-active footer { background-color: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.benchcalc-active footer p, :root.light-mode body.benchcalc-active footer a { color: #48525f !important; }
:root.light-mode body.benchcalc-active footer a:hover { color: #0f766e !important; }
:root.light-mode body.benchcalc-active article { background: #ffffff !important; border-color: rgba(0,0,0,.12) !important; color: #33434f; }
:root.light-mode body.benchcalc-active article h1, :root.light-mode body.benchcalc-active article h2, :root.light-mode body.benchcalc-active article h3, :root.light-mode body.benchcalc-active article strong { color: #141a22 !important; }
:root.light-mode body.benchcalc-active article li, :root.light-mode body.benchcalc-active article p { color: #33434f; }
:root.light-mode body.benchcalc-active .info-box { background: rgba(15,118,110,.08) !important; border-left-color: #0f766e !important; }
:root.light-mode body.benchcalc-active .info-box .info-title { color: #0f766e !important; }
:root.light-mode body.benchcalc-active .prose-invert { --tw-prose-links: #0f766e; }

/* ---------- influence takeover, light ---------- */
:root.light-mode body.influence-active { background: #f6f2e7 !important; color: #18202b;
  --rd-bg-deep: #f6f2e7; --rd-bg-card: #ffffff; --rd-bg-card-dim: rgba(255,255,255,.75);
  --rd-text: #18202b; --rd-text-dim: #48525f; --rd-text-faint: #6b7480; --rd-border-soft: rgba(0,0,0,.1); --rd-green-play: #12803f; }
:root.light-mode #influenceContent, :root.light-mode #influenceContent .rd { --rd-accent: #9a6f00; --rd-accent-dim: rgba(154,111,0,.12); --rd-accent-border: rgba(154,111,0,.3); --rd-accent-border-hover: rgba(154,111,0,.55); }
:root.light-mode body.influence-active .header-bar, :root.light-mode body.influence-active .nav-bar { background-color: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.influence-active .nav-bar .text-black, :root.light-mode body.influence-active .nav-bar span.text-black, :root.light-mode body.influence-active .nav-util { color: #2a333d !important; }
:root.light-mode body.influence-active .nav-bar [class*="text-black/60"] { color: rgba(42,51,61,.6) !important; }
:root.light-mode body.influence-active .nav-btn-inactive:hover { background: rgba(0,0,0,.05); }
:root.light-mode body.influence-active .nav-strip .nav-divider { background: rgba(0,0,0,.12); }
:root.light-mode body.influence-active .nav-strip .nav-divider-strong { background: rgba(0,0,0,.22); }
:root.light-mode body.influence-active .nav-btn-active { background: rgba(154,111,0,.1); box-shadow: inset 0 -4px 0 0 #9a6f00; }
:root.light-mode body.influence-active .nav-btn-active .text-black { color: #9a6f00 !important; }
:root.light-mode body.influence-active .sticky-submenu { background-color: #f6f2e7 !important; border-color: rgba(0,0,0,.12) !important; box-shadow: 0 6px 18px -14px rgba(0,0,0,.35); }
:root.light-mode body.influence-active .sticky-submenu .sub-btn, :root.light-mode body.influence-active .sticky-submenu a:not(.sub-btn) { color: #2a333d !important; }
:root.light-mode body.influence-active .sticky-submenu a:not(.sub-btn) svg { fill: #2a333d; }
:root.light-mode body.influence-active .sticky-submenu .sub-btn:hover, :root.light-mode body.influence-active .sticky-submenu a:not(.sub-btn):hover { background: rgba(154,111,0,.08) !important; }
:root.light-mode body.influence-active .sticky-submenu .sub-btn-active { background: rgba(154,111,0,.12) !important; border-color: #9a6f00 !important; color: #9a6f00 !important; }
:root.light-mode body.influence-active .sticky-submenu [class*="bg-black/10"] { background: rgba(154,111,0,.1) !important; color: #9a6f00 !important; }
:root.light-mode body.influence-active .sticky-submenu [class*="bg-black/30"] { background-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.influence-active .theme-toggle { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.25); color: #2a333d; }
:root.light-mode body.influence-active .theme-divider { background: rgba(0,0,0,.15); }
:root.light-mode body.influence-active footer { background-color: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.influence-active footer p, :root.light-mode body.influence-active footer a { color: #48525f !important; }
:root.light-mode body.influence-active footer a:hover { color: #9a6f00 !important; }
:root.light-mode body.influence-active article { background: #ffffff !important; border-color: rgba(0,0,0,.12) !important; color: #33434f; }
:root.light-mode body.influence-active article h1, :root.light-mode body.influence-active article h2, :root.light-mode body.influence-active article h3, :root.light-mode body.influence-active article strong { color: #141a22 !important; }
:root.light-mode body.influence-active article li, :root.light-mode body.influence-active article p { color: #33434f; }
:root.light-mode body.influence-active .info-box { background: rgba(154,111,0,.08) !important; border-left-color: #9a6f00 !important; }
:root.light-mode body.influence-active .info-box .info-title { color: #9a6f00 !important; }
:root.light-mode body.influence-active .prose-invert { --tw-prose-links: #9a6f00; }

/* ---------- pathlaid takeover, light ---------- */
:root.light-mode body.pathlaid-active { background: #f3f4f1 !important; color: #18202b;
  --rd-bg-deep: #f3f4f1; --rd-bg-card: #ffffff; --rd-bg-card-dim: rgba(255,255,255,.75);
  --rd-text: #18202b; --rd-text-dim: #48525f; --rd-text-faint: #6b7480; --rd-border-soft: rgba(0,0,0,.1); --rd-green-play: #12803f; }
:root.light-mode #pathlaidContent, :root.light-mode #pathlaidContent .rd { --rd-accent: #0a7f45; --rd-accent-dim: rgba(10,127,69,.12); --rd-accent-border: rgba(10,127,69,.3); --rd-accent-border-hover: rgba(10,127,69,.55); }
:root.light-mode body.pathlaid-active .header-bar, :root.light-mode body.pathlaid-active .nav-bar { background-color: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.pathlaid-active .nav-bar .text-black, :root.light-mode body.pathlaid-active .nav-bar span.text-black, :root.light-mode body.pathlaid-active .nav-util { color: #2a333d !important; }
:root.light-mode body.pathlaid-active .nav-bar [class*="text-black/60"] { color: rgba(42,51,61,.6) !important; }
:root.light-mode body.pathlaid-active .nav-btn-inactive:hover { background: rgba(0,0,0,.05); }
:root.light-mode body.pathlaid-active .nav-strip .nav-divider { background: rgba(0,0,0,.12); }
:root.light-mode body.pathlaid-active .nav-strip .nav-divider-strong { background: rgba(0,0,0,.22); }
:root.light-mode body.pathlaid-active .nav-btn-active { background: rgba(10,127,69,.1); box-shadow: inset 0 -4px 0 0 #0a7f45; }
:root.light-mode body.pathlaid-active .nav-btn-active .text-black { color: #0a7f45 !important; }
:root.light-mode body.pathlaid-active .sticky-submenu { background-color: #f3f4f1 !important; border-color: rgba(0,0,0,.12) !important; box-shadow: 0 6px 18px -14px rgba(0,0,0,.35); }
:root.light-mode body.pathlaid-active .sticky-submenu .sub-btn, :root.light-mode body.pathlaid-active .sticky-submenu a:not(.sub-btn) { color: #2a333d !important; }
:root.light-mode body.pathlaid-active .sticky-submenu a:not(.sub-btn) svg { fill: #2a333d; }
:root.light-mode body.pathlaid-active .sticky-submenu .sub-btn:hover, :root.light-mode body.pathlaid-active .sticky-submenu a:not(.sub-btn):hover { background: rgba(10,127,69,.08) !important; }
:root.light-mode body.pathlaid-active .sticky-submenu .sub-btn-active { background: rgba(10,127,69,.12) !important; border-color: #0a7f45 !important; color: #0a7f45 !important; }
:root.light-mode body.pathlaid-active .sticky-submenu [class*="bg-black/10"] { background: rgba(10,127,69,.1) !important; color: #0a7f45 !important; }
:root.light-mode body.pathlaid-active .sticky-submenu [class*="bg-black/30"] { background-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.pathlaid-active .theme-toggle { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.25); color: #2a333d; }
:root.light-mode body.pathlaid-active .theme-divider { background: rgba(0,0,0,.15); }
:root.light-mode body.pathlaid-active footer { background-color: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
:root.light-mode body.pathlaid-active footer p, :root.light-mode body.pathlaid-active footer a { color: #48525f !important; }
:root.light-mode body.pathlaid-active footer a:hover { color: #0a7f45 !important; }
:root.light-mode body.pathlaid-active article { background: #ffffff !important; border-color: rgba(0,0,0,.12) !important; color: #33434f; }
:root.light-mode body.pathlaid-active article h1, :root.light-mode body.pathlaid-active article h2, :root.light-mode body.pathlaid-active article h3, :root.light-mode body.pathlaid-active article strong { color: #141a22 !important; }
:root.light-mode body.pathlaid-active article li, :root.light-mode body.pathlaid-active article p { color: #33434f; }
:root.light-mode body.pathlaid-active .info-box { background: rgba(10,127,69,.08) !important; border-left-color: #0a7f45 !important; }
:root.light-mode body.pathlaid-active .info-box .info-title { color: #0a7f45 !important; }
:root.light-mode body.pathlaid-active .prose-invert { --tw-prose-links: #0a7f45; }


/* ============================================================
   Glow-up: softer backgrounds and richer takeover headers (both modes)
   ============================================================ */
/* FeeDings blue view: soft blue glows and a faint dot grid instead of flat colour */
body:not(.benchcalc-active):not(.influence-active):not(.pathlaid-active) {
  background-image: radial-gradient(45% 35% at 15% 20%, rgba(0,186,255,.10), transparent 70%),
                    radial-gradient(40% 35% at 85% 65%, rgba(255,214,10,.06), transparent 70%),
                    linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  background-attachment: fixed !important;
}
:root.light-mode body:not(.benchcalc-active):not(.influence-active):not(.pathlaid-active) {
  background-color: #dde8ee !important;
  background-image: radial-gradient(45% 35% at 15% 20%, rgba(0,186,255,.14), transparent 70%),
                    radial-gradient(40% 35% at 85% 65%, rgba(255,214,10,.10), transparent 70%) !important;
}

/* ---- Takeovers ----
   Dark: exactly as before (the page's own takeover styles; nothing here).
   Light: header and app tabs share one soft app colour so they read as one piece;
   the submenu is a distinct white bar; plain soft page background; footer matches. */
:root.light-mode body.benchcalc-active { background: #f3f8f7 !important; background-image: none !important; }
:root.light-mode body.benchcalc-active .header-bar, :root.light-mode body.benchcalc-active .nav-bar { background-color: #dcf1ec !important; background-image: none !important; box-shadow: none !important; }
:root.light-mode body.benchcalc-active .header-bar { border-color: #dcf1ec !important; }
:root.light-mode body.benchcalc-active .nav-bar { border-color: rgba(15,118,110,.25) !important; }
:root.light-mode body.benchcalc-active .nav-btn-active { background: rgba(255,255,255,.55) !important; box-shadow: inset 0 -4px 0 0 #0f766e !important; }
:root.light-mode body.benchcalc-active .nav-btn-inactive:hover { background: rgba(255,255,255,.35) !important; }
:root.light-mode body.benchcalc-active .nav-strip .nav-divider { background: rgba(15,118,110,.18) !important; }
:root.light-mode body.benchcalc-active .nav-strip .nav-divider-strong { background: rgba(15,118,110,.3) !important; }
:root.light-mode body.benchcalc-active .sticky-submenu { background-color: #ffffff !important; background-image: none !important; border-color: rgba(15,118,110,.2) !important; box-shadow: 0 6px 16px -14px rgba(0,0,0,.35) !important; }
:root.light-mode body.benchcalc-active footer { background-color: #dcf1ec !important; background-image: none !important; border-color: rgba(15,118,110,.25) !important; }
:root.light-mode body.benchcalc-active .rd-hero-phone-screen { background: linear-gradient(160deg, #ffffff, #f2f5f4 60%, #ffffff); }
:root.light-mode body.benchcalc-active .rd-hero-splash-title { color: #141a22; }
:root.light-mode body.benchcalc-active .rd-hero-splash-subtitle { color: rgba(20,26,34,.55); }
:root.light-mode body.benchcalc-active .rd-hero-strip { background: linear-gradient(135deg, #ffffff, #f2f5f4 60%, #ffffff); border-color: rgba(15,118,110,.3); }
:root.light-mode body.benchcalc-active .rd-hero-strip-title { color: #141a22; }

:root.light-mode body.influence-active { background: #faf6ec !important; background-image: none !important; }
:root.light-mode body.influence-active .header-bar, :root.light-mode body.influence-active .nav-bar { background-color: #f4e8cc !important; background-image: none !important; box-shadow: none !important; }
:root.light-mode body.influence-active .header-bar { border-color: #f4e8cc !important; }
:root.light-mode body.influence-active .nav-bar { border-color: rgba(154,111,0,.25) !important; }
:root.light-mode body.influence-active .nav-btn-active { background: rgba(255,255,255,.55) !important; box-shadow: inset 0 -4px 0 0 #9a6f00 !important; }
:root.light-mode body.influence-active .nav-btn-inactive:hover { background: rgba(255,255,255,.35) !important; }
:root.light-mode body.influence-active .nav-strip .nav-divider { background: rgba(154,111,0,.18) !important; }
:root.light-mode body.influence-active .nav-strip .nav-divider-strong { background: rgba(154,111,0,.3) !important; }
:root.light-mode body.influence-active .sticky-submenu { background-color: #ffffff !important; background-image: none !important; border-color: rgba(154,111,0,.2) !important; box-shadow: 0 6px 16px -14px rgba(0,0,0,.35) !important; }
:root.light-mode body.influence-active footer { background-color: #f4e8cc !important; background-image: none !important; border-color: rgba(154,111,0,.25) !important; }
:root.light-mode body.influence-active .rd-hero-phone-screen { background: linear-gradient(160deg, #ffffff, #f6f2e7 60%, #ffffff); }
:root.light-mode body.influence-active .rd-hero-splash-title { color: #141a22; }
:root.light-mode body.influence-active .rd-hero-splash-subtitle { color: rgba(20,26,34,.55); }
:root.light-mode body.influence-active .rd-hero-strip { background: linear-gradient(135deg, #ffffff, #f6f2e7 60%, #ffffff); border-color: rgba(154,111,0,.3); }
:root.light-mode body.influence-active .rd-hero-strip-title { color: #141a22; }

:root.light-mode body.pathlaid-active { background: #f4f8f5 !important; background-image: none !important; }
:root.light-mode body.pathlaid-active .header-bar, :root.light-mode body.pathlaid-active .nav-bar { background-color: #dff2e5 !important; background-image: none !important; box-shadow: none !important; }
:root.light-mode body.pathlaid-active .header-bar { border-color: #dff2e5 !important; }
:root.light-mode body.pathlaid-active .nav-bar { border-color: rgba(10,127,69,.25) !important; }
:root.light-mode body.pathlaid-active .nav-btn-active { background: rgba(255,255,255,.55) !important; box-shadow: inset 0 -4px 0 0 #0a7f45 !important; }
:root.light-mode body.pathlaid-active .nav-btn-inactive:hover { background: rgba(255,255,255,.35) !important; }
:root.light-mode body.pathlaid-active .nav-strip .nav-divider { background: rgba(10,127,69,.18) !important; }
:root.light-mode body.pathlaid-active .nav-strip .nav-divider-strong { background: rgba(10,127,69,.3) !important; }
:root.light-mode body.pathlaid-active .sticky-submenu { background-color: #ffffff !important; background-image: none !important; border-color: rgba(10,127,69,.2) !important; box-shadow: 0 6px 16px -14px rgba(0,0,0,.35) !important; }
:root.light-mode body.pathlaid-active footer { background-color: #dff2e5 !important; background-image: none !important; border-color: rgba(10,127,69,.25) !important; }
:root.light-mode body.pathlaid-active .rd-hero-phone-screen { background: linear-gradient(160deg, #ffffff, #f3f4f1 60%, #ffffff); }
:root.light-mode body.pathlaid-active .rd-hero-splash-title { color: #141a22; }
:root.light-mode body.pathlaid-active .rd-hero-splash-subtitle { color: rgba(20,26,34,.55); }
:root.light-mode body.pathlaid-active .rd-hero-strip { background: linear-gradient(135deg, #ffffff, #f3f4f1 60%, #ffffff); border-color: rgba(10,127,69,.3); }
:root.light-mode body.pathlaid-active .rd-hero-strip-title { color: #141a22; }

/* Influence takeover: its bright gold (inline and the title gradient) darkened for paper */
:root.light-mode #influenceContent [style*="color: #fbbf24"] { color: #9a6f00 !important; }
:root.light-mode #influenceContent [style*="border: 1px solid rgba(251, 191, 36"] { border-color: rgba(154,111,0,.4) !important; background: rgba(154,111,0,.08) !important; }
:root.light-mode #influenceContent .influence-gradient { background: linear-gradient(90deg, #9a6f00, #c08a00) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent; }

/* ---- Takeover content background: the same subtle pattern as each app's own site ---- */
body.benchcalc-active::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(45,212,191,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,191,.05) 1px, transparent 1px); background-size: 28px 28px; }
:root.light-mode body.benchcalc-active::before { background-image: linear-gradient(rgba(15,118,110,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(15,118,110,.075) 1px, transparent 1px); background-size: 28px 28px; }
body.influence-active::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23FFD700' fill-opacity='0.09'%3E%3Cpath d='M40 30l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Cpath d='M190 70l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M120 160l4 11 11 4-11 4-4 11-4-11-11-4 11-4z'/%3E%3Cpath d='M228 210l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M30 220l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 260px; }
:root.light-mode body.influence-active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%239a6f00' fill-opacity='0.11'%3E%3Cpath d='M40 30l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Cpath d='M190 70l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M120 160l4 11 11 4-11 4-4 11-4-11-11-4 11-4z'/%3E%3Cpath d='M228 210l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Cpath d='M30 220l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 260px; }
body.pathlaid-active::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='420'%3E%3Cdefs%3E%3CradialGradient id='o0'%3E%3Cstop offset='0' stop-color='%234dff7a' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%234dff7a' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%234dff7a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o1'%3E%3Cstop offset='0' stop-color='%23c24dff' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%23c24dff' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%23c24dff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o2'%3E%3Cstop offset='0' stop-color='%23ffc233' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%23ffc233' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%23ffc233' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o3'%3E%3Cstop offset='0' stop-color='%232fe0ff' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%232fe0ff' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%232fe0ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o4'%3E%3Cstop offset='0' stop-color='%234dff7a' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%234dff7a' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%234dff7a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o5'%3E%3Cstop offset='0' stop-color='%23ffc233' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%23ffc233' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%23ffc233' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o6'%3E%3Cstop offset='0' stop-color='%232fe0ff' stop-opacity='0.20'/%3E%3Cstop offset='.35' stop-color='%232fe0ff' stop-opacity='0.10'/%3E%3Cstop offset='1' stop-color='%232fe0ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='60' r='12' fill='url(%23o0)'/%3E%3Ccircle cx='50' cy='60' r='2.4' fill='%234dff7a' fill-opacity='0.20'/%3E%3Ccircle cx='330' cy='110' r='13.5' fill='url(%23o1)'/%3E%3Ccircle cx='330' cy='110' r='2.7' fill='%23c24dff' fill-opacity='0.20'/%3E%3Ccircle cx='170' cy='190' r='10.5' fill='url(%23o2)'/%3E%3Ccircle cx='170' cy='190' r='2.1' fill='%23ffc233' fill-opacity='0.20'/%3E%3Ccircle cx='400' cy='300' r='12' fill='url(%23o3)'/%3E%3Ccircle cx='400' cy='300' r='2.4' fill='%232fe0ff' fill-opacity='0.20'/%3E%3Ccircle cx='250' cy='380' r='9' fill='url(%23o4)'/%3E%3Ccircle cx='250' cy='380' r='1.8' fill='%234dff7a' fill-opacity='0.20'/%3E%3Ccircle cx='70' cy='330' r='10.5' fill='url(%23o5)'/%3E%3Ccircle cx='70' cy='330' r='2.1' fill='%23ffc233' fill-opacity='0.20'/%3E%3Ccircle cx='200' cy='40' r='9' fill='url(%23o6)'/%3E%3Ccircle cx='200' cy='40' r='1.8' fill='%232fe0ff' fill-opacity='0.20'/%3E%3C/svg%3E"); background-size: 460px 420px; }
:root.light-mode body.pathlaid-active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='420'%3E%3Cdefs%3E%3CradialGradient id='o0'%3E%3Cstop offset='0' stop-color='%2312a046' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%2312a046' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%2312a046' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o1'%3E%3Cstop offset='0' stop-color='%238c32d2' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%238c32d2' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%238c32d2' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o2'%3E%3Cstop offset='0' stop-color='%23d69600' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%23d69600' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%23d69600' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o3'%3E%3Cstop offset='0' stop-color='%230096c8' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%230096c8' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%230096c8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o4'%3E%3Cstop offset='0' stop-color='%2312a046' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%2312a046' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%2312a046' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o5'%3E%3Cstop offset='0' stop-color='%23d69600' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%23d69600' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%23d69600' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='o6'%3E%3Cstop offset='0' stop-color='%230096c8' stop-opacity='0.22'/%3E%3Cstop offset='.35' stop-color='%230096c8' stop-opacity='0.11'/%3E%3Cstop offset='1' stop-color='%230096c8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='60' r='12' fill='url(%23o0)'/%3E%3Ccircle cx='50' cy='60' r='2.4' fill='%2312a046' fill-opacity='0.22'/%3E%3Ccircle cx='330' cy='110' r='13.5' fill='url(%23o1)'/%3E%3Ccircle cx='330' cy='110' r='2.7' fill='%238c32d2' fill-opacity='0.22'/%3E%3Ccircle cx='170' cy='190' r='10.5' fill='url(%23o2)'/%3E%3Ccircle cx='170' cy='190' r='2.1' fill='%23d69600' fill-opacity='0.22'/%3E%3Ccircle cx='400' cy='300' r='12' fill='url(%23o3)'/%3E%3Ccircle cx='400' cy='300' r='2.4' fill='%230096c8' fill-opacity='0.22'/%3E%3Ccircle cx='250' cy='380' r='9' fill='url(%23o4)'/%3E%3Ccircle cx='250' cy='380' r='1.8' fill='%2312a046' fill-opacity='0.22'/%3E%3Ccircle cx='70' cy='330' r='10.5' fill='url(%23o5)'/%3E%3Ccircle cx='70' cy='330' r='2.1' fill='%23d69600' fill-opacity='0.22'/%3E%3Ccircle cx='200' cy='40' r='9' fill='url(%23o6)'/%3E%3Ccircle cx='200' cy='40' r='1.8' fill='%230096c8' fill-opacity='0.22'/%3E%3C/svg%3E"); background-size: 460px 420px; }

/* ============================================================
   Phones
   ============================================================ */
/* Submenu buttons keep the highlighted button's 2px border space all the time (invisible),
   so moving the highlight changes colours only: no button or bar size jumps */
#submenu > :is(a, button):not(.sub-btn-active),
.section-btn:not(.section-btn-active), .section-btn-top { border: 2px solid transparent; }

/* Home page: the menu buttons and the toggle wrap together as one row */
#submenuBar > .container > #submenu { display: contents; }

@media (max-width: 640px) {
  /* App tabs: icon only, except the active tab which keeps its name */
  .nav-strip .nav-btn-inactive .nav-home-text { display: none; }
  /* Inactive app tabs: icon plus initials, clearer than the faded icon alone */
  .nav-strip .nav-btn-inactive, html body .nav-strip .nav-btn-inactive { opacity: 0.85; gap: 0.2rem; }
  .nav-strip .nav-btn-inactive .nav-title { display: block; font-size: 0; line-height: 1; }
  .nav-strip .nav-btn-inactive .nav-title::after { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; }
  #rssBtn.nav-btn-inactive .nav-title::after, #tabRss.nav-btn-inactive .nav-title::after { content: 'FD'; }
  #benchBtn.nav-btn-inactive .nav-title::after, #tabBench.nav-btn-inactive .nav-title::after { content: 'BC'; }
  #influenceBtn.nav-btn-inactive .nav-title::after, #tabInfluence.nav-btn-inactive .nav-title::after { content: 'IF'; }
  #pathlaidBtn.nav-btn-inactive .nav-title::after, #tabPathlaid.nav-btn-inactive .nav-title::after { content: 'PL'; }
  #tabGeneral.nav-btn-inactive .text-left { display: none; }
  /* Bigger touch targets: taller tabs, larger icons and initials */
  .nav-strip .nav-btn, .nav-strip .nav-util { min-height: 52px; }
  .nav-strip .nav-btn > span:first-child, .nav-strip .nav-util { font-size: 1.2rem; }
  .nav-strip .nav-btn-inactive { padding-left: 0.55rem; padding-right: 0.55rem; }
  .nav-strip .nav-btn-active { padding-left: 0.55rem; padding-right: 0.6rem; }
  .nav-strip .nav-btn-active .nav-home-text { display: inline; }
  .theme-toggle .theme-label { display: none; }
  #submenuBar .theme-toggle, .section-bar .theme-toggle { padding: 0.35rem 0.5rem; }
  #submenuBar .theme-divider, .section-bar .theme-divider { display: none; }
  /* About/contact/share: the toggle joins the short Down | Home row instead of wrapping onto a line of its own */
  .section-bar #sectionNav > .theme-toggle { order: 1; }
  .section-bar #sectionNav > .flex-wrap { order: 2; }
  #submenu > a, #submenu > button { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
  .nav-strip .theme-toggle { padding: 0.3rem 0.4rem; margin: 0 0.2rem; }
  /* If it still overflows on very narrow screens: soft fades show there is more */
  .nav-strip.is-scrollable { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
                             mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
}