/* DARK MODE (2026-10-14, people asked for it).

   HOW. The light skins (figma-skin, tva-skin, tva-light, codex-skin, match-*)
   hard-code their colours behind :root:root:root chains and !important, so a
   token swap does not reach them. This file does not fight that. It inverts the
   rendered page once, at the root, and turns the things that must keep their
   own pixels (images, video, frames) back the right way up.

   html[data-mode="dark"] is set before first paint by the inline script in
   index.html, from localStorage "mm-mode". Absent or anything else = light, so
   nothing changes for anyone who does not press the toggle.

   KNOWN EDGES, all of them cost of the filter approach:
   - A full-page filter repaints on every live tick. Fine on a laptop, worth a
     look on a low-end phone.
   - A new image or video that must keep its colours needs no change (img and
     video are covered). A CSS background-image photo needs data-nodark on it.
   - Palette is the light palette flipped, not a designed dark palette. A
     hand-tuned token layer would look better and takes much longer. */

html[data-mode="dark"] {
  filter: invert(1) hue-rotate(180deg) brightness(.94);
  background: #efefed;            /* inverts to ~#101012, not pure black */
}
html[data-mode="dark"] body { background-color: #efefed; }

/* undo the flip for anything that carries its own colours */
html[data-mode="dark"] img,
html[data-mode="dark"] video,
html[data-mode="dark"] picture,
html[data-mode="dark"] iframe,
html[data-mode="dark"] [data-nodark] {
  filter: invert(1) hue-rotate(180deg);
}

/* the loading mark is a CSS background on a pseudo-element, so the img rule
   above does not reach it */
html[data-mode="dark"] :is(.pm-wait, .pf-wait, .ivc-note, .mn-ch-empty.wait)::before {
  filter: invert(1) hue-rotate(180deg);
}

/* native controls and scrollbars follow the flipped page */
html[data-mode="dark"] { color-scheme: light; }

/* A dark drop shadow inverts into a light glow. The big floating surfaces get
   a white shadow colour here so the filter turns it back into a dark one.
   Hairline shadows (alpha under .1) are left alone, they read as a faint rim. */
html[data-mode="dark"]:root:root:root:root:root:root:root:root:root:root body :is(
  .ob-card, .tw-pop, #cmd-pop, .tc-share, .tw-host, .py-box.py-zen, .cs-pop,
  #cov-card, #cw-pop, .mm-card, .trs-toast, #tools-card, .tk-pop, .tw-ts,
  #sc-pop, .mm-toast, .mm-modal.panel
) {
  box-shadow: 0 10px 40px rgba(255, 255, 255, .3) !important;
}

/* the toggle */
html:root:root:root:root body .mm-mode {
  display: inline-grid !important; place-items: center;
  /* the same 36px box as the wallet button beside it, centred on the same line (.topright stretches its children) */
  width: 36px; height: 36px; padding: 0; margin: 0 8px 0 0; align-self: center;
  background: transparent !important; color: #1a1410 !important;
  border: 1px solid rgba(26, 20, 16, .22) !important; border-radius: 0 !important;
  cursor: pointer; font: 0/0 sans-serif;
}
html:root:root:root:root body .mm-mode:hover { border-color: #e07a2e !important; }
html:root:root:root:root body .mm-mode:focus-visible { outline: 2px solid #e07a2e; outline-offset: 2px; }
html:root:root:root:root body .mm-mode svg { width: 15px; height: 15px; grid-area: 1 / 1; }
html:root:root:root:root body .mm-mode .mm-sun { display: none; }
html[data-mode="dark"]:root:root:root:root body .mm-mode .mm-sun { display: block; }
html[data-mode="dark"]:root:root:root:root body .mm-mode .mm-moon { display: none; }
@media (max-width: 640px) {
  html:root:root:root:root body .mm-mode { width: 28px; height: 28px; margin-right: 6px; }
}