/* The page background: one static layer, painted once, never touched again.

   A grid, and only in the top third. It went through two wrong versions first:
   a 72px grid over the whole page, which read as a sheet of graph paper behind
   the interface, and then two corner washes with no grid at all, which looked
   like light leaking in from the edges of the screen. What is left is the thing
   a grid is actually good at — giving the top of the page a surface — while the
   part of the page you read on sits on flat colour.

   The cells are small enough to read as texture rather than as squares, the
   lines are thin enough to disappear when you look at the text instead, and the
   whole layer is gone by the time the page is two thirds down.

   Cost while the tab sits open: nothing. No canvas, no script, no animation, no
   filter, no will-change — a single composited layer the compositor paints and
   forgets. Colours come from tokens.css like everywhere else. */

html {
  background: none;
}

body::before {
  /* Two numbers decide how this looks, so they are named rather than repeated
     into six gradient stops: how far the wash reaches before it is gone, and
     how big one cell of the grid is. */
  --wash-reach: 90%;
  --cell: 28px;

  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    /* One faint wash so the very top is not a flat wall of --bg. */
    radial-gradient(64rem 30rem at 50% -14%, var(--wash-accent), transparent var(--wash-reach)),
    repeating-linear-gradient(to right, var(--backdrop-grid) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(to bottom, var(--backdrop-grid) 0 1px, transparent 1px var(--cell));
  background-repeat: no-repeat, repeat, repeat;

  /* The fade is a mask rather than a wall of --bg painted over the grid: a
     panel with its own background would otherwise sit on a rectangle of page
     colour and the seam would show. Fully opaque for the first third, gone by
     two thirds, and nothing below that. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 33%, transparent 66%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 33%, transparent 66%);
}

/* A phone is not a smaller desktop here: the same cell size would be six lines
   across the screen and would read as stripes, and the wash has less room to
   fall away in. */
@media (max-width: 640px) {
  body::before {
    --wash-reach: 50%;
    --cell: 18px;

    background:
      radial-gradient(40rem 22rem at 50% -16%, var(--wash-accent), transparent var(--wash-reach)),
      repeating-linear-gradient(to right, var(--backdrop-grid) 0 1px, transparent 1px var(--cell)),
      repeating-linear-gradient(to bottom, var(--backdrop-grid) 0 1px, transparent 1px var(--cell));
    background-repeat: no-repeat, repeat, repeat;
  }
}

/* Decoration only: no reason to ask a high-contrast display, a forced-colours
   mode or a printer to carry it. */
@media (prefers-contrast: more), (forced-colors: active), print {
  body::before { display: none; }
}