/* The one surface every page of this site shares: the header is glass, not a
   lid. Matt's rule of 2026-09-17: whatever universe a page lives in, the
   site's own dark shell or an application's own light world, its sticky bar
   is this same progressive blur. The colour is the page's; the glass is not.

   Usage: the bar is `position: sticky; isolation: isolate`, its children sit
   above the glass, and the glass is one element carrying four:

     <i class="glass-fade" aria-hidden="true"><i></i><i></i><i></i><i></i></i>

   A page tints it with `--glass` on the bar (the shell's ground by default,
   the paper of a light page). validate.py refuses a page without it.

   Why it is built this way, from the shell's history:
   The header used to be 95% opaque, which meant the application icons
   scrolling up the home page were swallowed a header's height before the top
   of the screen. At 8% tint they stay visible all the way up, softened and
   darkened by the blur but never cut off. The tint cannot go to zero: the
   navigation text has to stay legible over whatever passes beneath, and a
   pure blur over a bright icon reads as a smear rather than as a surface.
   The layer spans the bar plus 18px and fades out across those last 18, so
   content is never cut by a hard edge. The blur is four stacked backdrop
   layers whose masks retreat at different rates, which is what makes the
   softening gradual instead of stepped, and what makes this read as one piece
   of glass rather than as a translucent rectangle. The tail was 50px when the
   header was 63 tall; at 50 tall it was as deep as the header, so every stop
   below is that 50 scaled to 18 (Matt, 2026-09-10).
   No specular edge, deliberately: a hairline of light only says "glass" when
   the surface above it is lighter than what is below, and at an 8% tint it is
   not. The bar ends by fading, and that is the whole of it. */
.glass-fade { --glass: #202225; position: absolute; z-index: 0; inset: 0 0 -18px; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--glass) 8%, transparent) 0%,
    color-mix(in srgb, var(--glass) 8%, transparent) calc(100% - 18px),
    color-mix(in srgb, var(--glass) 6%, transparent) calc(100% - 12px),
    color-mix(in srgb, var(--glass) 3%, transparent) calc(100% - 6px),
    transparent 100%); }
.glass-fade i { position: absolute; inset: 0; }
.glass-fade i:nth-child(1) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent calc(100% - 12px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent calc(100% - 12px)); }
.glass-fade i:nth-child(2) { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 15px), transparent calc(100% - 8px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 15px), transparent calc(100% - 8px)); }
.glass-fade i:nth-child(3) { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 11px), transparent calc(100% - 3px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 11px), transparent calc(100% - 3px)); }
.glass-fade i:nth-child(4) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6px), transparent calc(100% - 0px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 6px), transparent calc(100% - 0px)); }
/* Without backdrop-filter the tint has to carry legibility on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-fade { background: linear-gradient(to bottom,
    color-mix(in srgb, var(--glass) 90%, transparent) 0%,
    color-mix(in srgb, var(--glass) 90%, transparent) calc(100% - 18px),
    transparent 100%); }
}