/* darwin.css — Darwin product design tokens and the macOS-style app window frame.
   This is product UI (unlike mockup.css, which is only the mockup-browser chrome).
   Every product screen extends mockups/_window.html, which loads this file. */

:root {
  --dw-bg: #0e0e10;          /* window canvas */
  --dw-ink: #f4f2ec;         /* primary text on the canvas */
  --dw-muted: #8a8880;       /* secondary text */
  --dw-desktop: #E6E6E6;     /* light grey "desktop" behind the window, so its shadow reads */
  --dw-radius: 11px;
  --dw-display: "Space Grotesk", "Sora", system-ui, sans-serif;  /* display face (titles, big numbers) */
  --dw-wordmark: "Space Grotesk", "Sora", system-ui, sans-serif;  /* the DRWN wordmark */
}

/* Let the product window own the viewport below the mockup-browser bar.
   Scoped with :has() so the browser meta pages (index, example) are untouched. */
body:has(.win-stage) { display: flex; flex-direction: column; height: 100dvh; }
.mk-page:has(.win-stage) { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; }

/* Stage = the desktop the window floats on and is centred in. */
.win-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vmin, 48px); background: var(--dw-desktop);
}
.win-stage.is-max { padding: 0; }

/* maximised (full screen): hide the mockup-browser bar (the wrapper's topbar) so the window truly
   fills the screen; the window's own traffic lights stay, so it can still be restored. */
body:has(.win-stage.is-max) .mk-bar { display: none; }

/* The window itself. */
.win {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: min(1400px, 100%); height: min(800px, 100%); min-height: 0;
  border-radius: var(--dw-radius); background: var(--dw-bg); color: var(--dw-ink);
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .28),
    0 1px 1px rgba(0, 0, 0, .10),
    0 24px 60px -12px rgba(0, 0, 0, .45);
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: bottom center;
}
.win--max { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.win.is-gone { opacity: 0; transform: scale(.96); pointer-events: none; }
.win.is-min { opacity: 0; transform: translateY(48px) scale(.88); pointer-events: none; }

/* Title bar: transparent strip overlaid on the body (so a sidebar can run up under it);
   the traffic lights live top-left as on macOS. Screens add controls via {% block win_bar %}. */
.win__bar {
  position: absolute; inset: 0 0 auto 0; z-index: 5; height: 34px;   /* above the right panel (z2) */
  display: flex; align-items: center; padding: 0 14px;
  cursor: default; -webkit-user-select: none; user-select: none;
  pointer-events: none;                 /* let clicks fall through the empty bar to the tabs beneath */
}
.win__bar > * { pointer-events: auto; } /* …but the traffic lights and the sidebar/panel toggles stay live */
.win__lights { display: flex; gap: 8px; }
.light {
  width: 13px; height: 13px; padding: 0; border: none; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .22);
}
.light--close { background: #ff5f57; }
.light--min   { background: #febc2e; }
.light--max   { background: #28c840; }
/* SVG icons centre perfectly inside the circle (font glyphs sit at inconsistent heights). */
.light .glyph {
  width: 8px; height: 8px; opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
.ic--stroke { fill: none; stroke: rgba(0, 0, 0, .62); stroke-width: 1.6; stroke-linecap: round; }
.ic--fill { fill: rgba(0, 0, 0, .62); }
.ic--exit { display: none; }
/* Glyphs reveal only while hovering (or keyboard-focusing) the group — like macOS. */
.win__lights:hover .glyph,
.win__lights:focus-within .glyph { opacity: 1; }
.light:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Maximised: only the green light remains, and it becomes the "restore" (inward) icon. */
.win--max .light--close,
.win--max .light--min { display: none; }
.win--max .ic--enter { display: none; }
.win--max .ic--exit { display: block; }

/* Window content area: fills the whole window; the bar overlays its top 34px. */
.win__body { position: relative; flex: 1; min-height: 0; overflow: auto; }

/* Shown when the window is closed or minimised, so the mockup stays usable. */
.win-restore {
  position: absolute; padding: .5rem 1rem; border: none; border-radius: 999px;
  background: #1c1b18; color: #f4f2ec; font: 600 13px/1 var(--font, system-ui);
  cursor: pointer; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .5);
}

/* ---- title screen (mockups/title.html) ------------------------------------
   Rides the active scheme (workspace.css --ws-* tokens, ?border=): the splash takes the scheme's
   paper as its ground and its ink + accent for the wordmark (Lab → cream + black + green). */
.splash {
  height: 100%; display: grid; place-content: center; text-align: center;
  background: var(--ws-main-bg, var(--dw-bg));
}
.splash__mark {
  margin: 0; font-family: var(--dw-wordmark); font-weight: 700;   /* Space Grotesk tops out at 700 */
  font-size: clamp(3.25rem, 15vmin, 9rem); line-height: .9; letter-spacing: -.01em;
  color: var(--ws-ink, var(--dw-ink));                            /* scheme ink — black on Lab */
}
.splash__sub {
  /* wide tracking, nudged right by one letter-space to stay optically centred under DRWN */
  margin: .35rem 0 0 .3em; font-family: var(--dw-wordmark); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3em;
  font-size: clamp(.9rem, 3vmin, 1.6rem); color: var(--ws-accent, var(--dw-muted));   /* scheme accent — green */
}