/* Project pages as macOS windows over the home page's desktop (shared/windows.js).
   Tahoe metrics: 12px corners, a 30px title bar in the menu bar's place, 12px
   traffic lights 8px apart, and the window shadow that tells key from inactive. */

.dw-layer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 45; }
.dw-layer.dw-top { z-index: 95; }

.dw {
  --dw-ease: cubic-bezier(.2, .9, .24, 1);
  --dw-tint: rgba(246, 246, 246, 0.8);
  --dw-ink: rgba(0, 0, 0, 0.85);
  --dw-line: rgba(0, 0, 0, 0.1);
  --dw-bg: #fff;
  position: fixed; left: 0; top: 0;
  transform-origin: 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  line-height: 1;
}
.dw *, .dw *::before, .dw *::after { box-sizing: border-box; margin: 0; padding: 0; }
.dw.pending, .dw.min { visibility: hidden; pointer-events: none; }
.dw.moving { pointer-events: none; }

.dw-body {
  position: absolute; inset: 0;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: var(--dw-bg);
  /* inactive: lighter and closer, like a window behind the key one */
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 8px 22px rgba(0, 0, 0, 0.12), 0 18px 44px rgba(0, 0, 0, 0.12);
  transition: box-shadow .16s ease;
}
.dw.key .dw-body {
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.1), 0 22px 70px 4px rgba(0, 0, 0, 0.4);
}
/* the hairline inside the edge: a light rim on dark pages, a dark one on light */
.dw-body::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.dw[data-tone="dark"] .dw-body::after { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }

.dw-frame {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  border: 0;
  background: var(--dw-bg);
  opacity: 0;
  transition: opacity .14s linear;
}
.dw.ready .dw-frame { opacity: 1; }
.dw-layer.dw-busy .dw-frame { pointer-events: none; }

/* ---------- title bar: tinted glass the page scrolls under ---------- */
.dw-bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--dw-ink);
  background: var(--dw-tint);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0.5px 0 var(--dw-line);
  cursor: default;
  -webkit-user-select: none; user-select: none;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, opacity .2s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dw-bar { background: var(--dw-solid, var(--dw-tint)); }
}
.dw-title {
  max-width: calc(100% - 160px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 30px;
  transition: opacity .16s ease;
}
.dw:not(.key) .dw-title { opacity: .5; }

/* ---------- traffic lights ---------- */
.dw-lights {
  position: absolute; left: 9px; top: 9px;
  display: flex; gap: 8px;
}
.dw-light {
  --c: #ff5f57; --b: #e2463f;
  position: relative;
  width: 12px; height: 12px; border-radius: 50%;
  border: 0; padding: 0;
  font: inherit; color: rgba(0, 0, 0, 0.5);
  background: var(--c);
  box-shadow: inset 0 0 0 0.5px var(--b);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.dw-light.dw-min { --c: #febc2e; --b: #e1a116; }
.dw-light.dw-zoom { --c: #28c840; --b: #12ac28; }
.dw-light svg {
  position: absolute; inset: 0; width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round;
  opacity: 0;
}
.dw-light.dw-zoom svg { fill: currentColor; stroke: none; }
.dw-lights:hover svg, .dw-light:focus-visible svg { opacity: 1; }
.dw-light:active { filter: brightness(.82); }
.dw-light:focus-visible { box-shadow: inset 0 0 0 0.5px var(--b), 0 0 0 2px rgba(10, 132, 255, 0.6); }

/* an inactive window's lights go grey until the pointer reaches them */
.dw:not(.key) .dw-lights:not(:hover) .dw-light { background: #dcdcdc; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.dw[data-tone="dark"]:not(.key) .dw-lights:not(:hover) .dw-light { background: rgba(255, 255, 255, 0.2); box-shadow: none; }

/* ---------- resize handles: 6px edges straddling the border, 14px corners ---------- */
.dw-rz { position: absolute; z-index: 4; }
.dw-rz[data-e="n"] { top: -3px; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.dw-rz[data-e="s"] { bottom: -3px; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.dw-rz[data-e="w"] { left: -3px; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.dw-rz[data-e="e"] { right: -3px; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.dw-rz[data-e="nw"] { left: -4px; top: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.dw-rz[data-e="se"] { right: -4px; bottom: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.dw-rz[data-e="ne"] { right: -4px; top: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.dw-rz[data-e="sw"] { left: -4px; bottom: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.dw.expanding .dw-rz { display: none; }

/* while a window is dragged or resized nothing selects and the cursor holds */
html.dw-grab, html.dw-grab * { -webkit-user-select: none !important; user-select: none !important; }

/* ---------- green: the window becomes the page ---------- */
.dw.expanding .dw-body {
  border-radius: 0; box-shadow: none;
  transition: border-radius .42s var(--dw-ease), box-shadow .3s ease;
}
.dw.expanding .dw-body::after { opacity: 0; }
.dw.expanding .dw-bar { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .dw-body, .dw-bar, .dw-title, .dw.expanding .dw-body { transition-duration: .01s; }
}