/* PFPS light mode - opt-in via the nav toggle (html[data-theme="light"]).
   The site's palette is dark, defined as ~2,600 hardcoded rgba()/hex values across 156
   pages, so instead of re-mapping every colour this inverts the rendered page and
   rotates hue back 180deg: dark surfaces become light, light text becomes dark, and
   green/red/teal keep their meaning (hue-rotate undoes the inversion's hue flip).
   Anything that must keep its real colours (photos, charts, logos, video, embeds)
   is inverted a second time so it renders unchanged.
   Default stays dark. Choice is remembered per visitor in localStorage. */

html[data-theme="light"] {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}

/* undo the inversion on content that carries its own colours */
html[data-theme="light"] img,
html[data-theme="light"] picture,
html[data-theme="light"] video,
html[data-theme="light"] iframe,
html[data-theme="light"] embed,
html[data-theme="light"] object,
html[data-theme="light"] [style*="background-image"],
html[data-theme="light"] .no-invert,
html[data-theme="light"] .imm-grid {
  filter: invert(1) hue-rotate(180deg);
}
/* do not stack the re-invert on nested media (e.g. an img inside a picture/.no-invert) */
html[data-theme="light"] picture img,
html[data-theme="light"] .no-invert img,
html[data-theme="light"] .no-invert video { filter: none; }
/* canvases are drawn for the dark page, so they invert with it (not re-inverted) */

/* third-party chat bubble: leave it as the vendor designed it */
html[data-theme="light"] #chatbase-bubble-button,
html[data-theme="light"] #chatbase-bubble-window,
html[data-theme="light"] [id^="chatbase"] { filter: invert(1) hue-rotate(180deg); }

/* the grid wallpaper is a faint decoration; keep it subtle on light */
html[data-theme="light"] .imm-grid { opacity: .55; }

/* ---------- toggle button ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin: 0 2px;
  background: transparent; border: 1px solid rgba(236,239,239,.22); border-radius: 999px;
  color: rgba(236,239,239,.85); cursor: pointer; flex: none;
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover { background: rgba(200,214,224,.1); border-color: rgba(236,239,239,.4); color: #fff; }
.theme-toggle:focus-visible { outline: 2px solid #4FA8C4; outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: block; }
html[data-theme="light"] .theme-toggle .ic-moon { display: none; }
/* pages with no nav: small floating toggle, opposite corner from the chat bubble */
.theme-toggle.theme-float {
  position: fixed; left: 16px; bottom: 16px; z-index: 500; width: 40px; height: 40px;
  background: #111314; border-color: rgba(236,239,239,.25);
}
@media print { html[data-theme="light"] { filter: none; } .theme-toggle { display: none; } }

/* auth/simple pages have a block .nav-right; make it a row so the toggle sits inline */
nav .nav-right { display: flex; align-items: center; gap: 10px; }

@media (max-width: 480px) {
  .theme-toggle { width: 32px; height: 32px; margin: 0; }
  .theme-toggle svg { width: 16px; height: 16px; }
  nav .nav-right { gap: 6px; }
  nav .nav-logo { min-width: 0; font-size: .88rem; gap: .5rem; }
  nav .nav-logo img { height: 40px; width: 40px; }
}