/* 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 27 menu bar, a Liquid Glass Dock and
   glass panels in the dark appearance, as the home page's Mac wears them.
   Loaded after styles.css and account.css, whose tokens it uses (the Dock's
   glass is styles.css's). 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: #5E9CF5 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(24 33 38 / 0.4);
}

/* 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 27, in dark ink:
   the Ocean wallpaper is light enough that macOS would draw it dark. */
.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));
  color: rgb(0 0 0 / 0.86);
  filter: drop-shadow(0 calc(0.5 * var(--u)) calc(2.5 * var(--u)) rgb(0 0 0 / 0.38));
  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(20 * 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. They are the
   home page's, cut to each glyph and set at macOS's status-item size. */
.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(12 * var(--u));
  height: calc(14 * var(--u));
  margin: calc(-2 * var(--u)) calc(-4 * var(--u)) 0 calc(4 * var(--u));
}
.desk-menubar .desk-wifi {
  height: calc(11.53 * var(--u));
}
.desk-menubar .desk-spotlight {
  width: calc(13.5 * var(--u));
  height: calc(13.62 * var(--u));
}
.desk-menubar .desk-control {
  width: calc(13.19 * var(--u));
  height: calc(13.29 * var(--u));
}
.desk-extras {
  font-variant-numeric: tabular-nums;
}
.desk-clock {
  display: flex;
  gap: calc(7 * var(--u));
}
/* As macOS shows the date "when space allows": a bar too narrow for every
   menu and status item lets the date go first, then folds the menus to the
   app's name, then lets the app's own status item go. The widest menus
   (sign-in's, 401 units) and every status item with the date need 682 units
   inside the bar's padding. The queries are in pixels at --u's 1px, the only
   scale a bar this narrow has, except sign-in's Mac, which never has room for
   the date (account.css). */
.desk-menubar {
  container: desk-menubar / inline-size;
}
@container desk-menubar (width < 682px) {
  .desk-clock span:first-child {
    display: none;
  }
}
@container desk-menubar (width < 618px) {
  .desk-menus span {
    display: none;
  }
}
@container desk-menubar (width < 362px) {
  .desk-extras > svg:first-child {
    display: none;
  }
}

/* The Dock, laid out as macOS 27 lays it out around its 52-unit tiles (42-unit
   icons inside them): 0.35 of an icon above the icons, 0.39 below, 0.38 at
   the ends, icons 1.41 icons apart, the divider's gap 0.67 of an icon wider,
   and corners concentric with the icons'. Its glass is styles.css's. */
.desk-dock {
  --gu: calc(0.95 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(7.02 * var(--u));
  width: fit-content;
  padding: calc(9.58 * var(--u)) calc(10.84 * var(--u)) calc(11.26 * var(--u));
  border-radius: calc(24.07 * var(--u));
}
.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, 5 units above the glass's lower
   edge. */
.desk-dock-item.is-running::after {
  content: "";
  position: absolute;
  bottom: calc(-8.12 * 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.55);
}
.desk-dock-divider {
  align-self: center;
  width: 1px;
  height: calc(52.4 * var(--u));
  margin: 0 calc(10.01 * var(--u));
  background: rgb(255 255 255 / 0.3);
}

/* Glass panels (a widget, an alert) in the dark appearance: white type on a
   dark glass that holds the wallpaper's colour, its rim lit along the top. */
.desk-glass {
  --desk-soft: rgb(255 255 255 / 0.62);
  --desk-line: rgb(255 255 255 / 0.12);
  border-radius: calc(24 * var(--u));
  background: rgb(30 30 34 / 0.66);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 0 1px rgb(0 0 0 / 0.3),
    0 calc(24 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgb(2 3 20 / 0.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  backdrop-filter: blur(32px) saturate(1.4);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .desk-glass {
    background: rgb(30 30 34 / 0.94);
  }
}
@media (forced-colors: active) {
  .desktop {
    border: 1px solid CanvasText;
  }
  .desk-glass,
  .desk-dock {
    border: 1px solid CanvasText;
  }
}