/* Desktop, taskbar and tray. Taskbar geometry is measured from a native Windows 7 capture
   (notes/aero-reference.md, "Taskbar"); bitmaps come from aero.msstyles and explorer.exe. */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background: #1c5a8c;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- wallpaper ---------- */

.wallpaper {
  position: fixed;
  inset: 0;
  background: center / cover no-repeat;
  transition: opacity var(--fade, 2.5s) ease;
}
.wallpaper.hidden { opacity: 0; }

/* ---------- desktop icons ---------- */

/* Cells follow the list view's default spacing for 48 px icons (75 - 32 + 48 = 91 px each
   way); the highlight box is the cell less 8 px a side. Not yet checked against a capture. */
.desk-icons {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 40px;
  width: 100%;
  z-index: 1;
}
.desk-item {
  position: absolute;
  width: 75px;
  padding: 3px 0 3px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: center;
  outline: none;
}
.desk-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.desk-item:hover::before { border-image: url("../aero/listitem-hot.png") 3 fill / 3px stretch; }
.desk-item.selected::before { border-image: url("../aero/listitem-selected-nofocus.png") 3 fill / 3px stretch; }
.desk-icons.focused .desk-item.selected::before { border-image-source: url("../aero/listitem-selected.png"); }
.desk-icons.focused .desk-item.selected:hover::before { border-image-source: url("../aero/listitem-hot-selected.png"); }
.desk-item img {
  display: block;
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto 4px;
}
/* The shortcut arrow is a full 48 px canvas with the arrow in its corner, laid over the icon. */
.desk-item .overlay {
  position: absolute;
  left: 13.5px;
  top: 3px;
  margin: 0;
}
.desk-item span {
  display: -webkit-box;
  position: relative;
  padding: 0 2px;
  line-height: 15px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.55);
}
.desk-item.selected span { -webkit-line-clamp: unset; }

/* ---------- taskbar ---------- */

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  display: flex;
  z-index: 10000;
  color: #fff;
}
.taskbar > .glass {
  position: absolute;
  inset: 0;
  backdrop-filter: url(#aero-glass);
  pointer-events: none;
}
@supports not (backdrop-filter: url(#x)) {
  .taskbar > .glass {
    backdrop-filter: blur(6px) saturate(0.55) brightness(1.02);
    background: rgba(116, 184, 252, 0.28);
  }
}

/* TaskBar2Composited's background: black 60% line, white 40% line, then black 22.7%.
   It covers the Start area and the tray; the button band draws its own version whose fill
   fades out 39 px in from each end, and Show desktop sits on bare glass. */
.tb-start,
.tray {
  position: relative;
  flex: none;
  border-image: url("../aero/taskbar-bg.png") 2 0 0 0 fill / 2px 0 0 0 stretch;
}
.tb-start { width: 56px; }
.band {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  padding-left: 3px;
  border-image: url("../aero/taskband-bg.png") 2 39 0 39 fill / 2px 39px 0 39px stretch;
}

/* The orb is its own 54 px sprite (normal, hot, pressed), centred on the bar, so it spills
   7 px above it. The hover glow fades in; Windows 7 takes about a quarter second. */
.orb {
  position: absolute;
  left: 0;
  top: -7px;
  width: 54px;
  height: 54px;
  border: 0;
  padding: 0;
  background: url("../aero/orb.png") 0 0 / 54px 162px no-repeat;
  z-index: 2;
}
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../aero/orb.png") 0 -54px / 54px 162px no-repeat;
  opacity: 0;
  transition: opacity 0.25s;
}
.orb:hover::after { opacity: 1; }
.orb:active::after,
.orb.open::after { background-position: 0 -108px; opacity: 1; transition: none; }

/* Buttons are 60 px on a 62 px pitch, icons 32 px at (14, 4). TASKITEM states: 1 running,
   2 hot, 3 pressed, 4 active, 5 active hot, 6 active pressed, 7 flashing, 9 and 10 hot and
   pressed for a pinned program that is not running. Idle, such a button draws nothing (the
   capture shows bare glass there, not state 8's edge lines). */
.tb-btn {
  position: relative;
  flex: none;
  width: 60px;
  height: 40px;
  margin-right: 2px;
  border: 0;
  padding: 0;
  background: url("../aero/taskitem.png") 0 40px / 60px 400px no-repeat;
}
.tb-btn:hover { background-position-y: -320px; }
.tb-btn:active { background-position-y: -360px; }
.tb-btn.running { background-position-y: 0; }
.tb-btn.running:hover { background-position-y: -40px; }
.tb-btn.running:active { background-position-y: -80px; }
.tb-btn.active { background-position-y: -120px; }
.tb-btn.active:hover { background-position-y: -160px; }
.tb-btn.active:active { background-position-y: -200px; }
.tb-btn.flash { background-position-y: -240px; }
.tb-btn img {
  position: absolute;
  left: 14px;
  top: 4px;
  width: 32px;
  height: 32px;
  pointer-events: none;
}
/* Colour hot-track: explorer tints the hovered button with the icon's dominant colour and
   follows the pointer. Drawn by code, not the theme, so this is an approximation. */
.tb-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 3px;
  background: radial-gradient(circle 34px at var(--mx, 50%) 100%, rgb(var(--hot, 51 194 255) / 0.75), rgb(var(--hot, 51 194 255) / 0) 100%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.tb-btn:hover::before { opacity: 1; }
/* Copy progress (TaskBand2 PROGRESSITEM), filling the button from the left. */
.tb-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-image: url("../aero/progress.png") 2 3 2 2 fill / 2px 3px 2px 2px stretch;
  transition: width 0.2s;
  pointer-events: none;
}

/* ---------- notification area ---------- */

.tray { display: flex; }
.tray-chevron {
  flex: none;
  width: 21px;
  height: 40px;
  border: 0;
  padding: 0;
  background: url("../aero/tray-chevron-1.png") 0 11px no-repeat;
}
.tray-chevron:hover { background-image: url("../aero/tray-chevron-2.png"); }
.tray-chevron:active { background-image: url("../aero/tray-chevron-3.png"); }
.tray-chevron.open { background-image: url("../aero/tray-chevron-open-1.png"); }
.tray-chevron.open:hover { background-image: url("../aero/tray-chevron-open-2.png"); }
.tray-chevron.open:active { background-image: url("../aero/tray-chevron-open-3.png"); }
/* Hidden icons flyout: a small glass panel over the chevron with 40 px cells, by eye. */
.tray-flyout {
  position: fixed;
  z-index: 15000;
  padding: 7px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 12px rgba(0, 0, 0, 0.45);
}
.tray-flyout[hidden] { display: none; }
.tray-flyout > .glass { position: absolute; inset: 0; border-radius: 5px; backdrop-filter: url(#aero-glass); pointer-events: none; }
@supports not (backdrop-filter: url(#x)) {
  .tray-flyout > .glass { backdrop-filter: blur(6px) saturate(0.55) brightness(1.02); background: rgba(116, 184, 252, 0.28); }
}
.tray-hidden { position: relative; display: flex; flex-wrap: wrap; max-width: 160px; }
.tray-hidden .tray-icon { width: 40px; height: 40px; }
.tray-hidden .tray-icon img { left: 12px; top: 12px; }
.tray-icons {
  display: flex;
  padding-left: 2px;
}
.tray-icon {
  position: relative;
  width: 24px;
  height: 40px;
  border: 0;
  padding: 0;
  background: none;
}
.tray-icon:hover { border-image: url("../aero/tray-button-2.png") 14 2 fill / 14px 2px stretch; }
.tray-icon:active { border-image: url("../aero/tray-button-3.png") 14 2 fill / 14px 2px stretch; }
.tray-icon img {
  position: absolute;
  left: 4px;
  top: 13px;
  width: 16px;
  height: 16px;
}
.clock {
  box-sizing: border-box;
  height: 40px;
  margin: 0 1px 0 5px;
  padding: 2px 5px 0;
  border: 0;
  background: none;
  color: #fff;
  font: 12px/17px var(--aero);
  text-align: center;
  white-space: nowrap;
}
.clock:hover { border-image: url("../aero/tray-clock-2.png") 14 2 fill / 14px 2px stretch; }
.clock:active { border-image: url("../aero/tray-clock-3.png") 14 2 fill / 14px 2px stretch; }
.clock span { display: block; }

/* 15 px, squeezed from the 17 px bitmap by its 2 px sizing margins. */
.showdesk {
  flex: none;
  position: relative;
  width: 15px;
  height: 40px;
  border: 0;
  padding: 0;
  background: none;
  border-image: url("../aero/showdesktop-1.png") 15 2 2 2 fill / 15px 2px 2px 2px stretch;
}
.showdesk:hover { border-image-source: url("../aero/showdesktop-2.png"); }
.showdesk:active { border-image-source: url("../aero/showdesktop-3.png"); }

.taskbar button:focus { outline: none; }

/* ---------- windows on the desktop ---------- */

.windows { position: fixed; inset: 0 0 40px 0; z-index: 10; pointer-events: none; }
.windows > .win { pointer-events: auto; }
.win.minimized { display: none; }

/* Aero Peek: every window becomes a sheet of glass with its outline. */
.windows.peek > .win > :not(.glass):not(.frame) { opacity: 0; }
.windows > .win > * { transition: opacity 0.2s; }

/* Maximised: the frame sits off screen and the caption shows 22 px. */
.win.maximized > .caption { top: 8px; height: 22px; left: 16px; }
.win.maximized > .buttons { top: 8px; right: 10px; }
.win.maximized .cbtn.max { --glyph: url("../aero/glyph-restore-1.png"); }

/* Window contents, Segoe UI 9 pt with the guidelines' colours. */
.win .body { margin: 0; padding: 11px 12px; }
.win .instruction { margin: 0 0 6px; color: #003399; font-size: 16px; }
.win ul.links { list-style: none; margin: 8px 0 0; padding: 0; }
.win ul.links li { margin: 0 0 6px; }
.win a { color: #0066cc; text-decoration: none; }
.win a:hover { color: #3399ff; text-decoration: underline; }
.win ul.links img { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }

/* Windows that extend glass into the client area (Explorer, Control Panel) hide the title. */
.win.bare > .caption { display: none; }

/* ---------- popup menus (Menu class: POPUPBORDERS, POPUPGUTTER, POPUPITEM, POPUPSEPARATOR) ---------- */

.popup {
  position: fixed;
  z-index: 20000;
  min-width: 140px;
  padding: 2px;
  border: 1px solid #979797;
  background: #f0f0f0 url("../aero/menu-gutter.png") 26px 0 / 3px 100% repeat-y;
  box-shadow: inset 0 0 0 1px #f5f5f5, 2px 2px 3px rgba(0, 0, 0, 0.25);
  font: 12px var(--aero);
  color: #000;
}
.popup-item {
  position: relative;
  height: 22px;
  padding: 0 24px 0 33px;
  line-height: 22px;
  white-space: nowrap;
}
.popup-item:hover { border-image: url("../aero/menu-item-2.png") 3 fill / 3px stretch; }
.popup-item.disabled { color: #6d6d6d; }
.popup-item.disabled:hover { border-image-source: url("../aero/menu-item-4.png"); }
.popup-item.bold { font-weight: bold; }
.popup-icon { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; }
.popup-item.checked::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url("../aero/menu-check-1.png") no-repeat;
}
.popup-item.sub::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: url("../aero/menu-submenu-1.png") no-repeat;
}
.popup-sep {
  height: 6px;
  margin-left: 28px;
  background: url("../aero/menu-sep.png") 0 0 / 100% 6px;
}

/* ---------- tooltips (TTP_STANDARD) ---------- */

.tooltip {
  position: fixed;
  z-index: 30000;
  max-width: 320px;
  padding: 3px 7px 4px;
  border-image: url("../aero/tooltip.png") 4 fill / 4px stretch;
  color: #575757;
  font: 12px/15px var(--aero);
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.18));
}
.tooltip.shown { opacity: 1; }