/* ==========================================================================
   Wallpapers – one place for every desktop / home-screen background.
   Sources: scripts/wallpapers/ (procedural canvas → headless Chrome → WebP).
   Loaded after all theme CSS and before overhaul.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Texora Retro (desktop): flat VGA teal with the wordmark as a centred
   16-colour bitmap – exactly how a 1995 "Center" wallpaper sat on the desktop.
   -------------------------------------------------------------------------- */
html[data-device=desktop][data-theme=retro] .windows-os { background:#008080; }
html[data-device=desktop][data-theme=retro] .os-desktop { background:#008080; }
html[data-device=desktop][data-theme=retro] .wallpaper-brand {
  inset:0 0 6vh 0; margin:auto; width:330px; height:max-content;
  text-align:center; color:#fff;
}
html[data-device=desktop][data-theme=retro] .wallpaper-brand :is(img,.brand-lens) { display:none; }
html[data-device=desktop][data-theme=retro] .wallpaper-brand::before {
  content:''; display:block; width:330px; height:66px; margin:0 auto;
  background:url('wallpapers/retro-logo.png') center/100% 100% no-repeat;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
html[data-device=desktop][data-theme=retro] .wallpaper-brand span {
  margin-top:18px; color:#fff; font:20px/1.25 var(--pixel); letter-spacing:.14em;
  text-shadow:1px 1px 0 #000;
}
html[data-device=desktop][data-theme=retro] .desktop-hint { color:#e6f6f6; text-shadow:1px 1px 0 #00404080; }
@media (min-width:1800px) and (min-height:1000px) {
  html[data-device=desktop][data-theme=retro] .wallpaper-brand { width:495px; }
  html[data-device=desktop][data-theme=retro] .wallpaper-brand::before { width:495px; height:99px; }
  html[data-device=desktop][data-theme=retro] .wallpaper-brand span { font-size:24px; margin-top:22px; }
}

/* --------------------------------------------------------------------------
   Texora OS (macOS personality): layered satin light – pearl upper left,
   sculpted sheets fanning into brand blue towards the lower right.
   -------------------------------------------------------------------------- */
html[data-device][data-theme=macos] body.windows-os,
html[data-device=desktop][data-theme=macos] body.windows-os,
html[data-device=phone][data-theme=macos] body.windows-os {
  background:#e9e7f2 url('wallpapers/os-desktop.webp') center/cover fixed no-repeat;
}
@media (orientation:portrait) {
  html[data-device=phone][data-theme=macos] body.windows-os {
    background-image:url('wallpapers/os-phone.webp');
    background-position:center bottom;
  }
}
/* The brand rests on the deep blue sheets: a white wordmark, no plate. */
/* texora-blue.png carries wide transparent margins (content box 197..1584 × 298..558 of 1774×887):
   crop them so wordmark and tagline read as one lock-up. */
html[data-device=desktop]:is([data-theme=macos],[data-theme=modern]) .wallpaper-brand img {
  aspect-ratio:1774/360; object-fit:cover; object-position:50% 49%;
}
html[data-device=desktop][data-theme=macos] body .wallpaper-brand { right:60px; bottom:44px; width:260px; }
html[data-device=desktop][data-theme=macos] body .wallpaper-brand img {
  background:transparent; border:0; box-shadow:none;
  filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgb(12 28 86 / .35));
}
html[data-device=desktop][data-theme=macos] body.windows-os .wallpaper-brand span {
  color:#f4f7ff; text-shadow:0 1px 3px rgb(14 30 88 / .55); margin-top:6px;
}
html[data-device=desktop][data-theme=macos] body.windows-os .desktop-hint {
  color:#2a2c36; text-shadow:0 1px 2px rgb(255 255 255 / .55);
}

/* Settings / setup previews show the real wallpapers. */
html[data-device=desktop] .preview-macos { background:#e9e7f2 url('wallpapers/os-desktop.webp') center/cover no-repeat; }
html[data-device=desktop] .preview-modern { background:#0b1834 url('wallpapers/dos-desktop.webp') 62% 50%/cover no-repeat; }

/* --------------------------------------------------------------------------
   Texora DOS (desktop): a luminous glass bloom on deep navy.
   -------------------------------------------------------------------------- */
html[data-device=desktop][data-theme=modern] .windows-os { background:#0a1531; }
html[data-device=desktop][data-theme=modern] .os-desktop {
  background:#0b1834 url('wallpapers/dos-desktop.webp') 62% 50%/cover no-repeat;
}
/* Brand: a quiet white wordmark in the calm lower left, the hint below it. */
html[data-device=desktop][data-theme=modern] .wallpaper-brand {
  left:150px; right:auto; bottom:84px; width:230px; text-align:left; filter:none;
}
html[data-device=desktop][data-theme=modern] .wallpaper-brand img {
  background:transparent; border:0; border-radius:0; box-shadow:none;
  margin-left:-11.1%; /* optical left edge of the wordmark */
  filter:brightness(0) invert(1) opacity(.94);
}
html[data-device=desktop][data-theme=modern] .wallpaper-brand span {
  margin-top:10px; color:#c9d6ea; font-size:11px; letter-spacing:.16em; text-shadow:none;
}
html[data-device=desktop][data-theme=modern] .desktop-hint { left:150px; bottom:34px; color:#9fb0c9; text-shadow:none; }
html[data-device=desktop][data-theme=modern] .desktop-icon { text-shadow:0 1px 2px #050c1ccc, 0 0 8px #050c1c80; }

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  /* Texora Droid: soft Material-You forms in sage, moss and oat. */
  html[data-device=phone][data-theme=modern] body.windows-os {
    background:#e9ecdc url('wallpapers/droid-phone.webp') center bottom/cover no-repeat;
  }
  html[data-device=phone][data-theme=modern] .wallpaper-brand img {
    background:rgb(255 253 242 / .74);
    -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1);
    box-shadow:0 10px 30px rgb(46 66 48 / .10), inset 0 1px 0 rgb(255 255 255 / .7);
  }

  /* Retro 95 Mobile: a reflective monochrome LCD with a visible dot matrix. */
  html[data-device=phone][data-theme=retro] .os-desktop {
    background-color:var(--handset-lcd, #d0dcb2);
    background-image:
      linear-gradient(rgb(41 53 35 / .055) 1px, transparent 1px),
      linear-gradient(90deg, rgb(41 53 35 / .055) 1px, transparent 1px),
      radial-gradient(120% 70% at 20% 0%, rgb(250 255 232 / .45), transparent 60%),
      linear-gradient(180deg, rgb(41 53 35 / 0) 55%, rgb(41 53 35 / .09));
    background-size:3px 3px, 3px 3px, 100% 100%, 100% 100%;
  }
  /* The wordmark printed in LCD ink, with the faint ghosting of a passive-matrix panel. */
  html[data-device=phone][data-theme=retro] .wallpaper-brand img {
    background:transparent;
    filter:brightness(0) opacity(.82) drop-shadow(1px 1px 0 rgb(41 53 35 / .2));
  }
}
@media (forced-colors:active) {
  html[data-device] .wallpaper-brand img { filter:none; }
}