/* CEEC-owned vector worlds. Existing preference keys remain compatible. */
.desktop.wallpaper-blue { --ceec-world-art: url("/ceec-identity/wallpapers/tidal.svg"); }
.desktop.wallpaper-purple { --ceec-world-art: url("/ceec-identity/wallpapers/prism.svg"); }
.desktop.wallpaper-green { --ceec-world-art: url("/ceec-identity/wallpapers/canopy.svg"); }
.desktop.wallpaper-night { --ceec-world-art: url("/ceec-identity/wallpapers/obsidian.svg"); }

/* Blur the chosen world, not the user's open windows and documents. */
.desktop .panel-overlay.panel-launchpad {
  isolation: isolate;
  background: #17202b !important;
}
.desktop .panel-overlay.panel-launchpad::before {
  content: "";
  position: absolute;
  inset: -64px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#0d121f5c, #0d121f80), var(--ceec-world-art) center / cover;
  filter: blur(48px) saturate(.76) brightness(.72);
}

.desktop .app-window-settings .window-body:has(.sys-wallpaper-options) {
  container: ceec-appearance / inline-size;
}
.desktop .sys-settings-main:has(.sys-wallpaper-options) {
  container-type: inline-size;
  container-name: ceec-wallpapers;
}
.desktop .sys-current-wallpaper {
  position: relative;
  height: clamp(140px, 26cqw, 240px);
  margin: 12px 0 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #182536 var(--ceec-world-art) center / cover;
  filter: none !important;
  box-shadow: 0 5px 18px #00000014, inset 0 0 0 1px #ffffff1a;
}
.desktop .sys-current-wallpaper::after {
  content: attr(aria-label);
  position: absolute;
  left: 16px;
  bottom: 12px;
  max-width: calc(100% - 32px);
  padding: 5px 9px;
  border-radius: 6px;
  color: #fff;
  background: #101827b8;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.4;
}
.desktop .sys-wallpaper-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.desktop .sys-wallpaper-options > button {
  text-align: left;
  padding: 0 0 5px;
  border-radius: 9px;
  color: var(--text);
  background: none;
}
.desktop .sys-wallpaper-options > button > span {
  aspect-ratio: 1.6;
  background: #182536 var(--ceec-choice-art) center / cover;
  filter: none !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px #0000000a;
}
.desktop .sys-wallpaper-options > button > small {
  margin-top: 9px;
  padding: 0 1px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 550;
  white-space: normal;
}
.desktop .sys-wallpaper-options > button:focus-visible {
  outline: 3px solid var(--ceec-gold-deep);
  outline-offset: 5px;
}
.desktop .sys-wallpaper-options > button:hover > span {
  outline: 1px solid color-mix(in srgb, var(--ceec-gold) 70%, transparent);
  outline-offset: 3px;
}
.desktop .sys-wallpaper-options > button.chosen > span {
  outline: 2px solid var(--ceec-gold-deep);
  outline-offset: 3px;
}
.desktop [data-ceec-wallpaper="gold"] { --ceec-choice-art: url("/ceec-identity/ceec-field.jpg"); }
.desktop [data-ceec-wallpaper="blue"] { --ceec-choice-art: url("/ceec-identity/wallpapers/tidal.svg"); }
.desktop [data-ceec-wallpaper="purple"] { --ceec-choice-art: url("/ceec-identity/wallpapers/prism.svg"); }
.desktop [data-ceec-wallpaper="green"] { --ceec-choice-art: url("/ceec-identity/wallpapers/canopy.svg"); }
.desktop [data-ceec-wallpaper="night"] { --ceec-choice-art: url("/ceec-identity/wallpapers/obsidian.svg"); }

/* App windows can remain narrow after the surrounding desktop grows. */
@container ceec-appearance (max-width: 520px) {
  .desktop .sys-settings-sidebar { width: 128px; min-width: 128px; padding: 9px 5px; }
  .desktop .sys-settings-sidebar button { gap: 5px; padding: 6px; font-size: 10px; }
  .desktop .sys-settings-sidebar label { padding-left: 6px; font-size: 10px; }
  .desktop .sys-settings-main { padding: 19px 12px; }
  .desktop .sys-settings-main h1 { font-size: 20px; }
  .desktop .sys-setting-row { padding: 12px; }
}
@container ceec-wallpapers (min-width: 850px) {
  .desktop .sys-wallpaper-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container ceec-wallpapers (max-width: 330px) {
  .desktop .sys-wallpaper-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop .sys-setting-row { flex-wrap: wrap; gap: 10px; }
  .desktop .sys-setting-control { max-width: 100%; margin-left: auto; }
  .desktop .sys-range { max-width: 100%; min-width: 0; }
}
/* Keep every existing Dock item reachable between phone and desktop layouts. */
@media (min-width: 701px) and (max-width: 850px) {
  .desktop .dock { gap: 4px; padding-inline: 9px; }
  .desktop .dock .native-app-icon {
    width: clamp(32px, 5vw, 38px) !important;
    height: clamp(32px, 5vw, 38px) !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .desktop .panel-overlay.panel-launchpad { background: #252a30 !important; }
  .desktop .panel-overlay.panel-launchpad::before { display: none; }
}
@media (forced-colors: active) {
  .desktop .sys-wallpaper-options > button { border: 1px solid ButtonText; }
  .desktop .sys-wallpaper-options > button.chosen { outline: 2px solid Highlight; }
}