/* Day and night reading modes; icons match jonnymiller.co. */
:root { color-scheme: light; }
.theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle svg { transition: transform 180ms ease; }
.theme-toggle:hover svg { transform: rotate(30deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 4px; }
.theme-icon--night { display: none; }
[data-theme="dark"] .theme-icon--day { display: none; }
[data-theme="dark"] .theme-icon--night { display: initial; }
.no-js .theme-toggle { display: none; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0f0f0;
  --cloud: #141414;
  --paper: #1e1e1e;
  --visual-paper: #1e1e1e;
  --mist: #414141;
  --slate: #a5a5aa;
  --blue: #9aa8ff;
  --blue-deep: #b8c1ff;
}
[data-theme="dark"] .site-header { background: rgba(20,20,20,.98); border-color: var(--mist); }
[data-theme="dark"] .wordmark-mark { background: var(--ink); }
[data-theme="dark"] .workshop { background: #2b2925; border-color: #514b40; }
[data-theme="dark"] .form-status { color: #a8ffbc; }
[data-theme="dark"] .form-status.error { color: #ffb1a9; }
[data-theme="dark"] .red-box,
[data-theme="dark"] .theory-detour--anger::before { background: #352422; border-color: #b76e64; }
[data-theme="dark"] .green-box { background: #243027; border-color: #718775; }
[data-theme="dark"] .orange-box { background: #38291e; border-color: #ab805a; }
[data-theme="dark"] .blue-box { background: #222940; border-color: #737eb2; }
[data-theme="dark"] .gray-box { background: #242424; }
[data-theme="dark"] .brown-box { background: #302820; border-color: #9e846c; }
[data-theme="dark"] .theory-detour:not(.theory-detour--anger)::before { background: #302d20; border-color: #81794f; }
[data-theme="dark"] .theory-detour--anger .theory-detour__arrow { color: #efa69b; }
[data-theme="dark"] .theory-detour__body::before { border-color: var(--mist); }
[data-theme="dark"] .theory-detour__meta,
[data-theme="dark"] .essay-audio-preview__track span,
[data-theme="dark"] .essay-audio-preview__time,
[data-theme="dark"] .character-carousel__position,
[data-theme="dark"] .latchpod-preview figcaption { color: var(--slate); }
[data-theme="dark"] .essay-audio-preview,
[data-theme="dark"] .protocol-practice-close,
[data-theme="dark"] .essay-video-play-hint { background: var(--paper); border-color: var(--mist); }
[data-theme="dark"] .essay-highlight { color: #fff3b0; background: rgba(180,145,20,.28); }
/* Keep the original artwork legible, including transparent ink drawings. */
[data-theme="dark"] .character-carousel__image-frame { background: var(--paper); }
[data-theme="dark"] .essay-figure img { mix-blend-mode: normal; }
[data-theme="dark"] .latchpod-dialog { background: var(--paper); border-color: var(--mist); color: var(--ink); }
[data-theme="dark"] .latchpod-dialog__header { border-color: var(--mist); }
@media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: none; } }
[data-theme="dark"] .essay-marginalia,
[data-theme="dark"] .essay-endnotes,
[data-theme="dark"] .callout .callout-label { color: var(--slate); }
[data-theme="dark"] .latchpod-preview__action { background: #111; }
[data-theme="dark"] .latchpod-dialog__toolbar { background: var(--paper); border-color: var(--mist); }

/* Transparent colour artwork should sit directly on the reading surface. */
[data-theme="dark"] .essay-figure--alien img { background: transparent; }
/* Ink illustrations and text captures use light ink; photographs retain their colours. */
[data-theme="dark"] :is(.essay-figure--flowchart, .essay-figure--diagram, .essay-figure--matrix, .essay-figure--artifact) img {
  background: transparent;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
[data-theme="dark"] .essay-figure--nick-tweet img[src^="/images/nick-tweet-transparent.png"] {
  background: transparent;
  filter: invert(1) hue-rotate(180deg) brightness(.94);
}
/* Restore Nick's avatar from the unchanged original, above the light-ink text layer. */
[data-theme="dark"] .essay-figure--nick-tweet a:has(img[src^="/images/nick-tweet-transparent.png"]) {
  position: relative;
  display: block;
}
[data-theme="dark"] .essay-figure--nick-tweet a:has(img[src^="/images/nick-tweet-transparent.png"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/nick-tweet-transparent.png") left top / 100% 100% no-repeat;
  clip-path: inset(0 86% 0 0);
  pointer-events: none;
}
/* Post captures: the page theme, not the OS setting, decides which ink variant shows. */
img.theme-capture--dark, picture.theme-capture--dark { display: none; }
[data-theme="dark"] img.theme-capture--light, [data-theme="dark"] picture.theme-capture--light { display: none; }
[data-theme="dark"] img.theme-capture--dark, [data-theme="dark"] picture.theme-capture--dark { display: block; }
.theme-icon--sunlight { display: none; }
[data-mode="sunlight"] .theme-icon--day { display: none; }
[data-mode="sunlight"] .theme-icon--sunlight { display: initial; }
.daylight-leaves {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
[data-mode="sunlight"] .daylight-leaves { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .daylight-leaves { display: none; transition: none; } }
[data-theme="dark"] .yellow-box {
  background: #302d20;
  border-color: #81794f;
  color: var(--ink);
}
/* Video controls must stay white regardless of the page's paper colour. */
[data-theme="dark"] :is(.youtube-poster-play, .youtube-player-toggle-icon) {
  border-color: #fff;
  background: rgba(17, 17, 17, .86);
}
[data-theme="dark"] :is(.youtube-poster-play, .youtube-player-toggle-icon)::after { border-left-color: #fff; }
.theme-post-capture { position: relative; display: block; }
[data-theme="dark"] .theme-post-capture > img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
[data-theme="dark"] .theme-post-capture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--post-capture) center / 100% 100% no-repeat;
  clip-path: var(--avatar-clip);
  pointer-events: none;
}

[data-theme="dark"] .theory-detour.theory-detour--connection::before {
  background: #243027;
  border-color: #718775;
}
[data-theme="dark"] .theory-detour--connection .theory-detour__arrow { color: #a9ceb1; }