/* ═══════════════════════════════════════════════════════════════════════
   Desktop.css — wallpaper, menu bar, desktop icons, disclaimer.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠️ absolute, NOT fixed. The desktop used to be pinned to the viewport back
   when the page was a single non-scrolling screen. It now fills .Hero, which
   is a normal 100vh section in document flow, so it scrolls away like any
   other content.

   Consequence to remember: this element now MOVES relative to the viewport.
   The dock's magnification caches icon positions, and Main.js converts them
   through the dock's live rect because of exactly this change. */
.Desktop{
  position: absolute;
  inset: 0;
  overflow: hidden;                 /* also what makes the radius below clip */

  /* The recede. --hero-scale is driven per-frame by Main.js on scroll.
     ⚠️ transform and border-radius are the ONLY safe properties here.
     `opacity`, `filter`, `mask-image` and `mix-blend-mode` each create a
     backdrop root, which would instantly kill all 13 backdrop-filter surfaces
     inside the hero. If the recede ever needs reinforcing, reach for a
     box-shadow here — never opacity/filter on this element or any ancestor. */
  transform: scale(var(--hero-scale, 1));
  transform-origin: center center;
  /* Divided by the scale so the corner keeps a constant on-screen radius —
     scaling an element scales its rendered radius too. */
  border-radius: calc(var(--hero-radius, 0px) / var(--hero-scale, 1));
  will-change: transform;
}

/* ── Wallpaper ──────────────────────────────────────────────────────────
   The classic Aqua wallpaper, 2560×1600 JPEG (~190 KB). Source is a 4080px
   1.4 MB original at ~/Desktop/macBackground.jpg — re-export from that if a
   larger size is ever needed rather than upscaling this one.

   ⚠️ The gradient below the image is a real fallback, not leftovers. If the
   JPEG is slow or fails, the desktop still reads as a blue desktop instead
   of flashing white. Multiple backgrounds paint first-to-last, so the image
   sits on top and the gradient only shows through when it isn't there.
   ───────────────────────────────────────────────────────────────────── */
.Wallpaper{
  position: absolute;
  inset: 0;
  z-index: var(--z-wallpaper);
  background-color: #2E6FC4;
  background-image:
    url('/Assets/Images/Wallpaper.jpg'),
    linear-gradient(168deg, #A9D2F5 0%, #5C9BDD 26%, #2E6FC4 58%, #14418E 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ── Menu bar ───────────────────────────────────────────────────────────
   Fluid full width, like the real thing — only the windows scale.
   ───────────────────────────────────────────────────────────────────── */
.Menubar{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  z-index: var(--z-menubar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Nudges the contents down off the screen edge. Note only HALF of this
     shows up as movement — the items are centred in whatever height is left,
     so each 2px of padding buys 1px of drop.

     It's padding rather than extra height on purpose: the 26px is
     load-bearing — `.Stage`'s top inset and MARGIN_Y in Main.js are both
     derived from it, so growing the bar would silently drop the windows too. */
  padding: 8px 14px 0;
  color: #fff;
  font-size: 13px;
  /* Fully transparent — the bar sits directly on the wallpaper. Eddy's call:
     he judged the wallpaper dark enough at the top to carry white text on its
     own, and prefers the cleaner look.

     Note for anyone re-measuring later: this is ~2.3:1, which is below WCAG
     AA. It's a deliberate design choice on decorative chrome, not an oversight
     — don't silently "fix" it. The tint, blur, and hairline were all removed
     together; a blur with no tint leaves a visible strip across the wallpaper,
     which is worse than either option. */
  background: transparent;
}

.Menubar-left,
.Menubar-right{
  display: flex;
  align-items: center;
  gap: 17px;
}
.Menubar-right{ gap: 14px; }

.Menubar-logo{
  display: flex;
  align-items: center;
  margin-right: 2px;
}
.Menubar-logo svg{
  height: 15px;
  width: auto;
  color: #fff;
}

.Menubar-item{
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.Menubar-item--app{ font-weight: 600; }

.Menubar-glyph{
  color: #fff;
  display: block;
}
/* Sized off each symbol's own aspect ratio, not a shared box — `wifi` is wide
   and short, the other two are square. Heights are matched instead so the
   three read as one row. */
.Menubar-glyph--wifi  { width: 17.5px;  height: 12.6px; }
.Menubar-glyph--search{ width: 14.1px;  height: 14.2px; }
.Menubar-glyph--cc    { width: 14.3px;  height: 14.2px; }

.Menubar-clock{
  font-size: 13px;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Desktop icons ──────────────────────────────────────────────────── */
.DesktopIcons{
  position: absolute;
  top: 48px; right: 34px;
  z-index: var(--z-desktop-icons);
}

.DesktopIcon{
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: default;
}
.DesktopIcon img{
  width: 64px; height: 64px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}
.DesktopIcon-label{
  font-size: 12px;
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}