/* Paper grain, for any theme (STYLE-GUIDE.md → Paper grain). Two sheets, each with its own strength:
   - the menus' sheet stays still: header, sidebar, ruler, time map and panels (--grain-menu, below);
   - the timeline's sheet moves with the bars: the canvas draws it under them (--grain-time, js/draw/webgl.js).
   One still tile, never a live filter (Safari). A theme sets only --grain-time and --grain-menu (0-1; 0 = no grain, nothing is
   loaded); the sliders in Settings → Theme → Experimental → Paper grain override them. Loaded after the themes: their panels
   set `background` whole, which would wipe an image. */
:root { --grain-url: url(paper-grain.png); --grain-tile: 512px; --grain-menu: 0; --grain-time: 0; }

/* a layer of the sheet: behind the element's content, over its own fill */
:root[data-grain] .app::before, :root[data-grain] .axis::before, :root[data-grain] .overview::before, :root[data-grain] .sheet::before,
:root[data-grain] .settings-pop::after, :root[data-grain] .rmap-panel::after, :root[data-grain] .detail::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain-url) 0 0 / var(--grain-tile); opacity: var(--grain-menu); border-radius: inherit;
}
:root[data-grain] :is(.app, .stage, .settings-pop, .rmap-panel, .detail, .sheet, .mapview, .side) { isolation: isolate; }
:root[data-grain] .sheet { position: relative; }
/* the window's own layer covers only the header's row: the timeline below has its own sheet */
:root[data-grain] .app::before { grid-area: 1 / 1 / 2 / -1; }
/* no canvas (no WebGL2): the rows sit on the still sheet */
:root[data-grain] .viewport:not(.gl-on)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain-url) 0 0 / var(--grain-tile); opacity: var(--grain-time); }

/* the sidebar opens over the rows: pinned to the window, and clipped to the sidebar as it opens */
:root[data-grain] .side { clip-path: inset(0); }
:root[data-grain] .side::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grain-url) 0 0 / var(--grain-tile); opacity: var(--grain-menu); }
@media (max-width: 760px) {   /* a drawer slides as one piece: nothing needs pinning, which keeps the slide light */
  :root[data-grain] .side { clip-path: none; }
  :root[data-grain] .side::before { position: absolute; }
}

/* the search list scrolls, so a layer would scroll away: the image lies in its background, under a veil of its own fill */
:root[data-grain] .gsearch-list {
  background-image: linear-gradient(color-mix(in srgb, var(--surface) calc(100% - var(--grain-menu) * 100%), transparent) 0 0), var(--grain-url);
  background-size: auto, var(--grain-tile);
}