/*
 * Desk backdrop component (glass idiom)
 *
 * The fixed layer every page rests on: desk colour, hand-drawn braid
 * doodle, hand-ruled grid, and an edge vignette. The doodle and grid
 * background images are generated and attached by js/desk.js (inline SVG
 * data URIs — no image assets); this file owns the layer's static styles.
 *
 * The layer is viewport-fixed by decision (status.md, glass direction):
 * content scrolls over it, so the frosted panels always have the doodle
 * behind them at any scroll depth.
 *
 * The body also carries a plain desk background so the pre-JS paint (and
 * no-JS visitors) get a flat desk rather than a flash of the wrong tone.
 */

body {
    background: var(--color-desk);
}

.desk-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--color-desk);
}

.desk-pattern,
.desk-grid {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
}

.desk-grid {
    background-repeat: repeat;
    background-position: 0 0;
}

/* Edge vignette, over both pattern layers. */
.desk-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(125% 105% at 50% -5%,
        transparent 55%, rgba(0, 0, 0, var(--desk-vignette)));
}