/* ── backgrounds ──
 * The wallpaper layers behind the note surface and the home screen.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Backgrounds behind the note and the home screen ─────────────────────────
   Same three-layer recipe as #sidebar: artwork, scrim, then content on top. The
   filters live on the artwork layer alone, so no amount of blur ever touches the
   text you are reading.

   Deliberately on #main-col and not #document-container: that one scrolls, and an
   absolutely-positioned layer inside a scrolling box scrolls with the content —
   the image would slide out of view as you wrote. #tabline sits above with its own
   opaque background, so it covers the layer rather than floating on it. */
/* Two independent surfaces: the note area reads --nb-*, the home screen --hb-*.
   Filters live on the artwork layer alone, so no amount of blur touches the text. */
#main-col::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--nb-img, none);
  background-size: cover; background-position: var(--nb-pos, center);
  opacity: var(--nb-opacity, 0);
  filter: blur(var(--nb-blur, 3px)) brightness(var(--nb-bright, 0.65)) saturate(var(--nb-sat, 1));
}
#main-col::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-page), transparent 42%, var(--bg-page));
  opacity: var(--nb-scrim, 0);
}
#empty-state::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--hb-img, none);
  background-size: cover; background-position: var(--hb-pos, center);
  opacity: var(--hb-opacity, 0);
  filter: blur(var(--hb-blur, 2px)) brightness(var(--hb-bright, 0.85)) saturate(var(--hb-sat, 1));
}
#empty-state::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-page), transparent 42%, var(--bg-page));
  opacity: var(--hb-scrim, 0);
}
#main-col > *, #empty-state > * { position: relative; }
/* #document-container is a flex child again (of #main-col, under the tabline), so
   its flex:1 is live once more — unlike when it sat directly in the grid. */