/* 4.12 light / dark mode: toggle button and the few things the colour variables cannot fix on their own */
html { background: rgb(var(--bg)); }

.mode-btn { flex: none; width: 42px; height: 42px; margin-left: 8px; border-radius: 50%; border: 1px solid rgb(var(--fg) / 0.14); background: rgb(var(--fg) / 0.06);
  color: rgb(var(--fg)); display: grid; place-items: center; font-size: 1.15rem; cursor: pointer; transition: background-color .2s, transform .2s; }
.mode-btn:hover { background: rgb(var(--fg) / 0.12); transform: translateY(-1px); }
.mode-btn:focus-visible { outline: 2px solid rgb(var(--ach)); outline-offset: 3px; }
.mode-btn .ph-sun { display: none; }
html[data-mode="dark"] .mode-btn .ph-sun { display: block; }
html[data-mode="dark"] .mode-btn .ph-moon { display: none; }
@media (max-width: 900px) { .nav .mode-btn { margin-left: auto; } .nav .mode-btn + #navWorkBtn + .nav-toggle, .nav .nav-toggle { margin-left: 8px; } }

/* the star background is drawn in white: flip it on the white page */
html[data-mode="light"] #axvBg { filter: invert(1) hue-rotate(180deg); opacity: 0.5; }

/* the featured plan sits on the accent colour */
.plan-featured { color: rgb(var(--onac)) !important; }
.plan-featured h3, .plan-featured p, .plan-featured li, .plan-featured li i, .plan-featured .plan-reels b, .plan-featured .plan-reels span {
  color: rgb(var(--onac)) !important; -webkit-text-fill-color: rgb(var(--onac)); background-image: none !important; }

/* motion videos: the bars behind the last heading are on white in light mode, so darken instead of lighten */
.axv-motion { background: rgb(var(--bg)); }
html[data-mode="light"] .closer-inner > .axv-closer-bg { mix-blend-mode: multiply; opacity: 0.45; }