  /* Colour constants live in colors.css (the single source of truth), loaded
     before this file. This stylesheet only references them via var(--...). */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); color: var(--ink); }
  body {
    font-family: var(--serif);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  .mono { font-family: var(--mono); letter-spacing: var(--ls-label); }

  /* This file is now only the shared reset + .mono. The SPA's chrome (stage, views,
     slider, menu, switch, seg, bird-card/atlas, stats, admin, the detail modal and the
     detections roll) was migrated to per-component vanilla-extract modules under
     app/javascript/ealta/components/*.css.ts and its hand-written styles removed from
     here. Do NOT re-add component styles or bare generic id/class rules (.empty,
     .switch, #menu-dd, #detail-modal, …) to this global sheet: an id/class rule here
     outranks a vanilla-extract class and silently clobbers whatever element in the SPA
     happens to share the name — the class of bug that dropped the species modal under
     the masthead. Component CSS belongs in that component's .css.ts. */
