/* ============================================================
   Desktop layout — windows become desktop windows
   ============================================================ */
@media (min-width: 901px) {
  .shelf-open .toasts { right: calc(var(--shelf-w) + 28px); }
  #win-meet {
    position: absolute; top: clamp(60px, calc(50vh - 250px), 24vh);
    left: 50%; margin-left: calc(min(46vw, 690px) / -2);
  }
  .widgets { position: absolute; left: 22px; top: calc(var(--menubar-h) + 22px); }
  #space-1 .etch { left: auto; right: 60px; }
  #win-transcript { position: absolute; left: 8vw; top: 17vh; }
  #win-writeup { position: absolute; right: max(70px, 8vw); top: 24vh; }
  .privacy-strip { position: absolute; left: 50%; transform: translateX(-50%); bottom: 108px; width: max-content; max-width: 90vw; justify-content: center; }
  .space.seen .privacy-strip { transform: translateX(-50%); }
  #win-dmg { position: absolute; left: 8vw; top: 19vh; }
  #win-terminal { position: absolute; left: 14vw; top: 55vh; }
  .install-side { position: absolute; right: max(70px, 7vw); top: 22vh; }
  #win-signup {
    position: absolute; left: 50%; top: max(110px, 22vh);
    margin-left: calc(min(34vw, 420px) / -2);
  }
  .colophon { position: absolute; left: 6.5vw; bottom: 18px; max-width: 25vw; text-align: left; }
  .colophon .colo-links { justify-content: flex-start; }
  .window { cursor: default; }
  .win-bar { cursor: grab; }
  .win-bar:active { cursor: grabbing; }
}

/* ============================================================
   Small screens — desktop becomes a stacked story
   ============================================================ */
@media (max-width: 900px) {
  .spaces { scroll-snap-type: y proximity; }
  .space {
    height: auto; min-height: 100dvh;
    display: flex; flex-direction: column; gap: 22px;
    padding: calc(var(--menubar-h) + 44px) 5vw 90px;
  }
  .etch { top: calc(var(--menubar-h) + 14px); left: 5vw; }
  .widgets { order: -1; grid-template-columns: repeat(2, 140px); margin: 0 auto; }
  .wg-notiva { min-height: 140px; height: auto; }
  .window { width: 100% !important; max-width: 560px; margin: 0 auto; }
  .privacy-strip, .install-side { max-width: 560px; margin: 0 auto; width: 100%; }
  .install-side { align-items: stretch; }
  .install-side .btn { justify-content: center; }
  .colophon { margin: 20px auto 0; }
  .colo-links { flex-wrap: wrap; gap: 12px 18px; }
  .mb-title { display: none; }
  .mb-batt { display: none; }
  .dock { bottom: 8px; gap: 1px; padding: 4px 6px; border-radius: 20px; max-width: 96vw; overflow-x: auto; }
  .di { width: 40px; height: 40px; }
  .di-ghost { width: 36px; height: 36px; margin: 2px; }
  .di-ghost svg { width: 18px; height: 18px; }
  .widgets { justify-content: center; }
  .widget { width: 140px; height: 140px; }
  .widgets .wg-notiva { width: auto; height: auto; min-height: 130px; }
  .shelf { width: min(320px, 87vw); top: calc(var(--menubar-h) + 4px); bottom: 10px; right: 8px; }
  .edge-strip { width: 30px; }
  .edge-glow { width: 4px; right: 2px; }
  .transcript { height: 250px; }
  .writeup { height: 280px; }
  .scroll-cue { bottom: 78px; }
  .dmg-body { gap: 22px; padding: 30px 14px 22px; }
  .app-tile, .folder-tile { width: 70px; height: 70px; }
  .toasts { right: 8px; left: 8px; align-items: flex-end; }
}

@media (max-width: 400px) {
  .di { width: 37px; height: 37px; }
  .mb-clock { display: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .spaces { scroll-behavior: auto; }
  .space .window, .space .hero, .space .privacy-strip, .space .install-side, .space .colophon { opacity: 1; transform: none; }
  .edge-glow { animation: none; opacity: .85; }
  .scroll-cue.show { animation: none; opacity: .85; }
  .scroll-cue.show .sc-chev { animation: none; }
  .boot { display: none; }
}