/* Texture (22 Oct, Nabira): a pattern laid semi-transparently over the grounds, under the content, on every page.
   The pattern is a mask (img/pattern-*.svg, black shapes from tools/make_patterns.js) over a flat colour, so one
   tile serves white, teal, pink or gold; the doodle tile (img/doodle.svg) is a drawn image instead (--tx-img).
   Painted by .textured::after under each section's content and by body::before on the scan and report pages;
   js/ui.js sets --tx-y per section so the pattern runs on through the page, and reads ?tx=<pattern or doodle or 0>,
   ?color=<white|teal|dteal|pink|dpink|gold>, ?op=<0 to 100> for previews. Static: nothing repaints on scroll.
   A url() put into a custom property from a script must be root-relative (/img/...): Chrome resolves it against
   this stylesheet otherwise, and a mask that fails to load hides the layer. */
:root {
  --tx-mask: url(../img/pattern-topo.svg);
  --tx-img: none;
  --tx-color: #ffffff;
  --tx-size: 320px 320px;
  --tx-opacity: .48;   /* her call, 22 Oct: contour lines in white, "a tad" under a half */
}
.textured { position: relative; isolation: isolate; }
.textured::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tx-color) var(--tx-img) 0 var(--tx-y, 0px) / var(--tx-size) repeat;
  -webkit-mask: var(--tx-mask) 0 var(--tx-y, 0px) / var(--tx-size) repeat;
  mask: var(--tx-mask) 0 var(--tx-y, 0px) / var(--tx-size) repeat;
  opacity: var(--tx-opacity);
}
/* the scan and report pages: the body carries the grounds, so one layer covers the whole page */
body.scan-page, body.report-page { position: relative; isolation: isolate; }
body.scan-page::before, body.report-page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tx-color) var(--tx-img) 0 0 / var(--tx-size) repeat;
  -webkit-mask: var(--tx-mask) 0 0 / var(--tx-size) repeat;
  mask: var(--tx-mask) 0 0 / var(--tx-size) repeat;
  opacity: var(--tx-opacity);
}
@media (prefers-reduced-transparency: reduce) { .textured::after, body.scan-page::before, body.report-page::before { display: none; } }
@media print { .textured::after, body.scan-page::before, body.report-page::before { display: none; } }