/* Media in the dark theme. pages/media_tone.py reads every picture, clip and drawing at build time and tags it
   data-tone (see the list there); this file gives each tone its look on a dark page. The light theme is untouched and
   no file is changed.
   - line, plan, ink: the paper turns dark (the site's soft panel) and the ink light; hue-rotate puts every colour
     back on its own hue, so red, cyan and magenta layers still read as themselves. Plans lift saturation a little.
   - screen: a lit app screen on a dark mat with a hairline edge and rounded corners, dimmed slightly so it does not
     glare (the same look as the film window, pages/css/film.css).
   - photo, dark, clear: left as they are.
   The rules are kept weak (two attributes), so a page that styles one of its own pictures in dark wins; a component
   that tones itself carries data-tone="self" (the film window) and is never touched here. A drawing a script builds
   after the build can opt in with the same attribute (svg.dataset.tone = 'line'). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --mt-line:invert(.92) hue-rotate(180deg);
  --mt-plan:invert(.92) hue-rotate(180deg) saturate(1.35);
  --mt-screen:brightness(.86);
  --mt-r:clamp(8px,.9vw,14px);--mt-mat:clamp(5px,.55vw,9px);--mt-matc:color-mix(in srgb,var(--soft) 80%,#000);--mt-edge:rgba(255,255,255,.08)}}
:root[data-theme="dark"]{
  --mt-line:invert(.92) hue-rotate(180deg);
  --mt-plan:invert(.92) hue-rotate(180deg) saturate(1.35);
  --mt-screen:brightness(.86);
  --mt-r:clamp(8px,.9vw,14px);--mt-mat:clamp(5px,.55vw,9px);--mt-matc:color-mix(in srgb,var(--soft) 80%,#000);--mt-edge:rgba(255,255,255,.08)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :where(img,video,svg,canvas):where([data-tone="line"],[data-tone="ink"]){filter:var(--mt-line)}
  :root:not([data-theme="light"]) :where(img,video,svg,canvas):where([data-tone="plan"]){filter:var(--mt-plan)}
  :root:not([data-theme="light"]) :where(img,video,svg,canvas):where([data-tone="line"],[data-tone="plan"]){border-radius:var(--mt-r)}
  :root:not([data-theme="light"]) :where(img,video,canvas):where([data-tone="screen"]){filter:var(--mt-screen);padding:var(--mt-mat);background:var(--mt-matc);
    border-radius:var(--mt-r);box-shadow:inset 0 0 0 1px var(--mt-edge),0 0 0 1px var(--mt-edge)}
  :root:not([data-theme="light"]) :where(svg):where([data-tone="screen"]){filter:var(--mt-screen);border-radius:var(--mt-r)}}
:root[data-theme="dark"] :where(img,video,svg,canvas):where([data-tone="line"],[data-tone="ink"]){filter:var(--mt-line)}
:root[data-theme="dark"] :where(img,video,svg,canvas):where([data-tone="plan"]){filter:var(--mt-plan)}
:root[data-theme="dark"] :where(img,video,svg,canvas):where([data-tone="line"],[data-tone="plan"]){border-radius:var(--mt-r)}
:root[data-theme="dark"] :where(img,video,canvas):where([data-tone="screen"]){filter:var(--mt-screen);padding:var(--mt-mat);background:var(--mt-matc);
  border-radius:var(--mt-r);box-shadow:inset 0 0 0 1px var(--mt-edge),0 0 0 1px var(--mt-edge)}
:root[data-theme="dark"] :where(svg):where([data-tone="screen"]){filter:var(--mt-screen);border-radius:var(--mt-r)}

/* a frame the page paints white round a changed picture (media_tone.py marks it data-tone-frame): the soft panel
   instead, and the picture is no longer blended into it */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-tone-frame]{background:var(--soft)}
  :root:not([data-theme="light"]) [data-tone-frame] > [data-tone]{mix-blend-mode:normal}}
:root[data-theme="dark"] [data-tone-frame]{background:var(--soft)}
:root[data-theme="dark"] [data-tone-frame] > [data-tone]{mix-blend-mode:normal}

/* drawings a script draws after the build, so they carry no tag: the reading machine (pages/js/reader.js, on the home
   page and Import). Its clean plan takes the dark paper and light ink; the source being read (a photo, a scan, a PDF,
   a CAD file) stays itself, dimmed like a lit screen, and so do the source thumbnails. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rd:has(.rd-bed){--rd-paper:var(--soft);--rd-ink:#ebe8f4;--rd-ink2:#a1a1a8}
  :root:not([data-theme="light"]) :is(.rd-svg > rect:not(.rd-paper),.rd-svg > .rd-src,.rd-feed .th){filter:var(--mt-screen)}}
:root[data-theme="dark"] .rd:has(.rd-bed){--rd-paper:var(--soft);--rd-ink:#ebe8f4;--rd-ink2:#a1a1a8}
:root[data-theme="dark"] :is(.rd-svg > rect:not(.rd-paper),.rd-svg > .rd-src,.rd-feed .th){filter:var(--mt-screen)}