/* ==========================================================================
   base.css — reset, design tokens, dither patterns, boot screen.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  overflow: hidden;
  background: #ffffff;
}

body {
  font-family: var(--ui-font);
  font-size: 12px;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  touch-action: manipulation;
  /* Crisp, unsmoothed type is most of the 1990s look. */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-synthesis: none;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: default; }
img { -webkit-user-drag: none; user-drag: none; }
::selection { background: #ffffff; color: #113ac5; }

/* SVG hit-testing is per-painted-geometry, so a click landing in a transparent
   gap inside an icon would fall through to whatever is behind it. Every icon
   here is decoration inside a clickable box, so let the box take the hit. */
svg { pointer-events: none; }

.hidden { display: none !important; }
.invisible { visibility: hidden !important; }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Geneva ships with macOS and is the closest most machines have to the
     period bitmap faces; the rest are fallbacks. */
  --ui-font: "ChicagoFLF", "Chicago", Geneva, "Lucida Grande", Verdana, Tahoma, sans-serif;

  --ink: #ffffff;
  --paper: #113ac5;

  /* Intermediate tones are dither patterns, not colours. */
  --d25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23113ac5'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --d50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23113ac5'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --d75: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23113ac5'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23113ac5'/%3E%3C/svg%3E");

  /* The coarse 2x2 checkerboard the desktop is tiled with, in light blue
     rather than the interface white. Kept separate from --d50 so the boot
     screen can match the wallpaper without also recolouring the chrome, which
     stays on the fine white 1x1 weave.
     Must track WALL_INK / WALL_PAPER in js/core/store.js. */
  --wall-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23113ac5'/%3E%3Crect width='2' height='2' fill='%239aaeec'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%239aaeec'/%3E%3C/svg%3E");

  /* Selection is a straight exchange of the two colours — no accent colour. */
  --hi: #ffffff;
  --hi-text: #113ac5;

  --menubar-h: 20px;
  --title-h: 19px;

  /* Floating surfaces cast a hard shadow down and to the right. Solid rather
     than blurred or translucent, to match the hard-edged chrome, and darker
     than the window body so it still reads where one window overlaps another
     rather than only against the desktop. */
  --shadow-tone: #0a2170;
  --drop:    3px 3px 0 var(--shadow-tone);
  --drop-sm: 2px 2px 0 var(--shadow-tone);
}

/* --------------------------------------------------------------------------
   Studio mark
   --------------------------------------------------------------------------
   Two versions of the same disc:

     disc_white_small.svg   1 KB, true vector, flat white
     disc_light.svg       785 KB, a 1080x503 raster with a silver gradient

   The flat vector is used by default. It is not just lighter — below roughly
   120px it is visibly crisper than the raster, and it costs one kilobyte on
   the always-loaded path (menu bar and boot screen). Only the largest
   placement adds `.detail` to pull in the gradient artwork, so the heavy file
   is never fetched until that window is opened.

   Both files put the disc in the middle of a square 1080x1080 canvas, so most
   of each file is transparent padding. Scaling the background to the element's
   full width makes it 1:1 — taller than the element — and centring it crops
   that padding away, leaving the artwork flush to the box. Each site therefore
   only sets a width; the aspect ratio supplies the height.
   -------------------------------------------------------------------------- */
.brand-mark, .boot-mark {
  aspect-ratio: 1080 / 502;                             /* vector art box */
  background-image: url("../assets/disc_white_small.svg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
}

/* Full-detail variant for the one place the mark is shown large. */
.brand-mark.detail {
  aspect-ratio: 1080 / 503;                             /* raster art box */
  background-image: url("../assets/disc_light.svg");
}

/* Every dithered surface must stay pixel-crisp when scaled. */
.dither, .dither-25, .dither-75 { image-rendering: pixelated; }
.dither    { background-image: var(--d50); background-size: 2px 2px; }
.dither-25 { background-image: var(--d25); background-size: 4px 4px; }
.dither-75 { background-image: var(--d75); background-size: 4px 4px; }

/* --------------------------------------------------------------------------
   Screen + desktop pattern
   -------------------------------------------------------------------------- */
#screen {
  position: fixed; inset: 0;
  overflow: hidden;
  background: #5574d8;
  contain: strict;
}

#wallpaper {
  position: absolute; inset: 0;
  image-rendering: pixelated;
  background-repeat: repeat;
}

#desktop { position: absolute; inset: var(--menubar-h) 0 0 0; }

/* --------------------------------------------------------------------------
   Layer stack (window z-indexes live in 100–999; see wm.js)
   -------------------------------------------------------------------------- */
/* The window layer spans the whole screen, so it must not swallow clicks aimed
   at the desktop behind it — only the windows themselves are interactive. */
#windows { position: absolute; inset: 0; pointer-events: none; }
#windows > .window { pointer-events: auto; }
#expose  { z-index: 1000; }
#sheet-layer, #menu-layer, #notifications, #drag-layer {
  position: absolute; inset: 0; pointer-events: none;
}
#menubar         { z-index: 2100; }
#sheet-layer     { z-index: 3000; }
#switcher        { z-index: 5000; }
#spotlight-panel { z-index: 5200; }
#menu-layer      { z-index: 6000; }
#notifications   { z-index: 6500; }
#drag-layer      { z-index: 7000; }
#menu-layer > *, #sheet-layer > *, #notifications > *, #drag-layer > * { pointer-events: auto; }

.fullscreen-layer {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   Boot
   -------------------------------------------------------------------------- */
#boot-screen {
  background: #5574d8;
  background-image: var(--wall-grey);   /* matches the desktop it fades into */
  background-size: 4px 4px;
  image-rendering: pixelated;
  z-index: 9500;
}
body.booting #boot-screen { display: flex; }

.boot-inner {
  background: #113ac5;
  border: 2px solid #ffffff;
  box-shadow: 2px 2px 0 #ffffff;
  padding: 20px 34px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 300px;
}
.boot-mark { width: 104px; }
.boot-welcome { font-size: 15px; letter-spacing: 2.5px; }
.boot-status { font-size: 11px; min-height: 15px; }

/* A dithered fill inside a hard-edged box. */
.boot-bar {
  width: 220px; height: 12px;
  border: 1px solid #ffffff;
  background: #113ac5;
  padding: 1px;
}
.boot-bar > i {
  display: block; height: 100%; width: 0;
  background-image: var(--d75); background-size: 4px 4px;
  image-rendering: pixelated;
  transition: width .18s linear;
}

/* --------------------------------------------------------------------------
   Sleep / shutdown / screen saver
   -------------------------------------------------------------------------- */
#sleep-layer { background: #ffffff; z-index: 9600; transition: opacity .5s linear; }
#shutdown-layer { background: #ffffff; color: #113ac5; z-index: 9700; flex-direction: column; }
.shutdown-msg {
  font-size: 12px;
  background: #113ac5; color: #ffffff;
  border: 2px solid #ffffff;
  padding: 18px 26px;
}
.shutdown-msg:empty { display: none; }
#screensaver { background: #ffffff; z-index: 9300; }
#screensaver canvas { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   Helpers
   -------------------------------------------------------------------------- */
.fade-out { animation: fadeOut .28s steps(4) forwards; }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}