/* The account world's Mac. Sign-in, the sponsor wall and the 404 page each show
   a screen: the brand wallpaper (assets/desktop/wallpaper.svg, the app icon's
   colours folded like silk), a macOS menu bar, a glass Dock and glass panels in
   the light appearance. Loaded after styles.css and account.css, whose tokens
   it uses. None of it is interactive unless a page says so, and the menu bar
   and Dock are hidden from assistive technology. */

.desktop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: calc(22 * var(--u));
  background: #0c1340 url("/assets/desktop/wallpaper.svg") center / cover no-repeat;
  color: #fff;
  /* A screen, so it keeps the window's soft ambient shadow and a hairline
     bezel that holds its edge on paper. */
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 1px 2px rgb(24 33 38 / 0.08),
    0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-40 * var(--u)) rgb(16 20 70 / 0.45);
}

/* The wallpaper, live (src/client/desk-live.ts): drawn in WebGPU where it
   runs, over the still and under everything the screen holds, into which
   it fades. Under the sponsor wall's Launchpad veil too (sponsors.css,
   z-index -1), which comes first and would otherwise lie beneath it. */
.desk-live {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.desk-live.is-on {
  opacity: 1;
}

/* The menu bar: transparent over the wallpaper, as in macOS 26, with a faint
   shade so white type holds on the brightest folds. */
.desk-menubar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(30 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(14 * var(--u));
  background: linear-gradient(rgb(4 6 30 / 0.22), rgb(4 6 30 / 0));
  color: rgb(255 255 255 / 0.94);
  font:
    400 calc(13 * var(--u)) / 1 -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    var(--body);
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  user-select: none;
}
.desk-menus,
.desk-extras {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  min-width: 0;
  overflow: hidden;
}
.desk-menus b {
  font-weight: 700;
}
/* The menu bar's marks are drawings with their own paint, not the page's line
   glyphs (styles.css strokes every svg), as the header's icon is. */
.desk-menubar svg {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  fill: initial;
  stroke: initial;
  stroke-width: initial;
  stroke-linecap: initial;
  stroke-linejoin: initial;
}
.desk-menubar .desk-apple {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin: calc(-2 * var(--u)) calc(-2 * var(--u)) 0 0;
}
.desk-extras {
  gap: calc(16 * var(--u));
  font-variant-numeric: tabular-nums;
}

/* The Dock: glass with a lit top edge. */
.desk-dock {
  display: flex;
  align-items: flex-end;
  gap: calc(4 * var(--u));
  width: fit-content;
  padding: calc(6 * var(--u)) calc(7 * var(--u)) calc(8 * var(--u));
  border-radius: calc(22 * var(--u));
  background: rgb(255 255 255 / 0.16);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    0 calc(12 * var(--u)) calc(32 * var(--u)) calc(-12 * var(--u)) rgb(2 3 20 / 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
}
.desk-dock-item {
  position: relative;
  display: block;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
}
.desk-dock-item img {
  display: block;
  width: 100%;
  height: 100%;
}
/* A running app keeps a dot under its icon. */
.desk-dock-item.is-running::after {
  content: "";
  position: absolute;
  bottom: calc(-6 * var(--u));
  left: calc(50% - 2 * var(--u));
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 50%;
  background: rgb(255 255 255 / 0.8);
}
.desk-dock-divider {
  align-self: center;
  width: 1px;
  height: calc(38 * var(--u));
  margin: 0 calc(6 * var(--u));
  background: rgb(255 255 255 / 0.28);
}

/* Glass panels (a widget, an alert) in the light appearance: ink type on a
   frosted white, so they read on every fold. */
.desk-glass {
  border-radius: calc(24 * var(--u));
  background: rgb(248 250 255 / 0.76);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.6),
    0 calc(24 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgb(4 6 30 / 0.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.7);
  backdrop-filter: blur(32px) saturate(1.7);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .desk-glass {
    background: rgb(248 250 255 / 0.96);
  }
  .desk-dock {
    background: rgb(40 48 120 / 0.9);
  }
}
@media (forced-colors: active) {
  .desktop {
    border: 1px solid CanvasText;
  }
  .desk-glass,
  .desk-dock {
    border: 1px solid CanvasText;
  }
}