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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: var(--tnum);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app { min-height: 100vh; }

/* v07s — Smooth project-switch transition (Hugo: less dark, longer).
   ────────────────────────────────────────────────────────────────────
   v07r had two problems: `saturate(0.85)` desaturated colours which
   read as "going dark" before fading back, and 180/220ms felt
   abrupt. Fixed by:
   1. Dropping the saturate filter — only a tiny opacity drop (v07s also
      had a light blur, removed 17 Sep 2026). The colours stay vibrant, so
      the fade reads as "softening" rather than "darkening".
   2. Bumping the transition to 480ms for a noticeably smoother feel.
   Sidebar and project header are intentionally not included so the
   user can still see which project they switched to.
   17 Sep 2026 — the blur is gone (Hugo: "its pretty slow and buggy switching project"). A
   1.5px blur on every panel re-rendered all of them on the GPU for the whole switch (a 128 ms
   GPU task, frames 40-60% slower), and it broke the glass panels' backdrop blur underneath.
   The dim and the click block stay: the old rows are faded and unclickable until the new
   project's rows replace them, and App.jsx now clears the flag in that same commit (no hold).
   Durations, easing and the dim level are tokens (tokens.css, --switch-dim-*). */
.app-shell .main-content > * {
  transition: opacity var(--switch-dim-dur) var(--switch-dim-ease);
}
.app-shell[data-project-switching="true"] .main-content > *:not(.project-header) {
  opacity: var(--switch-dim-opacity);
  pointer-events: none;
}