/* Static artwork, one space per dock tab. Crops and the slate glass treatment
   began with the Fable 5.1 baseline; wallpaper.js owns the live opacity blend. */
.wallpaper { pointer-events:none; isolation:isolate; }
.section-wallpaper {
  position:absolute; inset:0; opacity:1;
  background-repeat:no-repeat; background-size:cover; background-position:center;
}
.section-wallpaper[hidden] { display:none; }
/* Keep the approved Home artwork and geometry exactly as selected. */
.desktop-wallpaper {
  background: #287ce9 url('../assets/wallpapers/window-light-blue-yellow-v1.webp') center / cover no-repeat;
}
.section-wallpaper[data-section-wallpaper="work"] {
  background-color:#0a0a0b;
  background-image:linear-gradient(145deg,#0c1014,#2a383e 65%,#101316);
  background-position:50% 50%;
}
.section-wallpaper[data-section-wallpaper="personal"] {
  background-color:#bfc3bd;
  background-image:linear-gradient(140deg,#d9ddd4,#a7b2a0 60%,#bba18b);
  background-position:50% 60%;
}
.section-wallpaper[data-section-wallpaper="journal"] {
  background-color:#efe4cf;
  background-image:linear-gradient(140deg,#faf4e8,#e9ddc7 65%,#cfb890);
}
.section-wallpaper[data-section-wallpaper="about"] {
  background:#739fae linear-gradient(#90b7cf,#bfd0c2 48%,#334e46);
}
.section-wallpaper[data-wallpaper-failed="true"] .kyiv-scene { display:none; }
:root[data-theme="dark"] .section-wallpaper:not([data-section-wallpaper="about"]) { filter:brightness(.65) saturate(.88); }

/* Sample the wallpaper in the narrow chrome, not across a full-screen app.
   Reading bodies remain opaque, and existing About transparency is retained. */
.win { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.win-titlebar { backdrop-filter:blur(14px) saturate(1.12); -webkit-backdrop-filter:blur(14px) saturate(1.12); }
@media(max-width:760px) {
  .sheet { background:transparent; }
  .sheet-body { background:var(--paper); }
}

/* The existing optical lens and traveling selection stay intact. Contrast
   follows the PAINTED wallpaper mix, including an interrupted transition. */
body[data-wallpapers] #dock,body[data-wallpapers] #mBar {
  background:linear-gradient(160deg,#ffffff54,#ffffff12 48%,#ffffff30),var(--section-dock-shade,transparent);
  --dock-selection-fill:var(--section-selection-fill,rgba(255,255,255,.34));
}
body[data-wallpapers] #dock .dock-icon,
body[data-wallpapers] #dock .dock-label,
body[data-wallpapers] #mBar .m-tab { color:var(--section-dock-ink,#254c74); }
:root[data-theme="dark"] body[data-wallpapers] #dock,
:root[data-theme="dark"] body[data-wallpapers] #mBar { background:rgba(27,40,53,.85); --dock-selection-fill:rgba(255,255,255,.14); }
:root[data-theme="dark"] body[data-wallpapers] #dock .dock-icon,
:root[data-theme="dark"] body[data-wallpapers] #dock .dock-label,
:root[data-theme="dark"] body[data-wallpapers] #mBar .m-tab { color:#e3edf7; }

/* Preserve the existing introduction placement within the blue field. */
@media (min-width:761px) { .desktop-grid { padding-top:clamp(36px,7vh,88px); } }
@media (min-width:761px) and (max-height:650px) { .desktop-grid { padding-top:24px; } }
/* Keep the lower-left window projection in view without stretching it. */
@media (max-width:760px) { .desktop-wallpaper { background-position:24% center; } }
@media (orientation:portrait) {
  .section-wallpaper[data-section-wallpaper="work"] { background-position:34% 50%; }
  .section-wallpaper[data-section-wallpaper="personal"] { background-position:74% 50%; }
  .section-wallpaper[data-section-wallpaper="journal"] { background-position:38% 50%; }
}
:root[data-transparency="reduced"] body[data-wallpapers] #dock,
:root[data-transparency="reduced"] body[data-wallpapers] #mBar { background:var(--paper); --dock-selection-fill:var(--blue-100); }
:root[data-transparency="reduced"] body[data-wallpapers] #dock .dock-icon,
:root[data-transparency="reduced"] body[data-wallpapers] #dock .dock-label,
:root[data-transparency="reduced"] body[data-wallpapers] #mBar .m-tab { color:var(--ink); }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  body[data-wallpapers] #dock,body[data-wallpapers] #mBar { background:var(--paper)!important; --dock-selection-fill:var(--blue-100); }
  body[data-wallpapers] #dock .dock-icon,body[data-wallpapers] #dock .dock-label,body[data-wallpapers] #mBar .m-tab { color:var(--ink)!important; }
}
@media(forced-colors:active) {
  body[data-wallpapers] #dock,body[data-wallpapers] #mBar { background:Canvas!important; }
  body[data-wallpapers] #dock .dock-icon,body[data-wallpapers] #dock .dock-label,body[data-wallpapers] #mBar .m-tab { color:CanvasText!important; }
}