/*
 * Coder:   klp + GitHub Copilot (Claude Sonnet 4.6)
 * Date:    2026-05-05
 * App:     SWCrosbyBombSaga2026-05-01-Stg1
 * File:    bombStg5Styles.css
 * Purpose: Styles for bombStg5.html — Stage 5 of Crosby's Bomb.
 *
 *          ════════════════════════════════════════════════════════════
 *          WHAT IS NEW IN STAGE 5?
 *          ════════════════════════════════════════════════════════════
 *          Nothing here — and that is exactly the point.
 *
 *          Stage 5's upgrade (replacing raw p5 primitives with
 *          SketchWaveJS class instances) is a JavaScript concern,
 *          not a CSS concern.  The browser has no knowledge of
 *          SWDisk, SWLine, SWGrid, or SWTriangle.  From CSS's
 *          perspective, there is still just a <canvas> element
 *          sitting inside a <body>, the same as Stages 1–4.
 *
 *          ════════════════════════════════════════════════════════════
 *          SEPARATION OF CONCERNS — A CONSISTENT PATTERN
 *          ════════════════════════════════════════════════════════════
 *          Across all five stages of this sketch, the CSS file has
 *          remained constant — just the two rules below.  Every stage
 *          upgrade has lived entirely inside the JavaScript sketch:
 *
 *            Stage 1 → Stage 2:  Particle class added (JS)
 *            Stage 2 → Stage 3:  Constants extracted (JS)
 *            Stage 3 → Stage 4:  Color mode switched to HSB (JS)
 *            Stage 4 → Stage 5:  SW class integration (JS)
 *
 *          CSS's job is layout and presentation.  JavaScript's job
 *          is drawing logic.  Keeping them separate makes each easier
 *          to read, debug, and change.
 *
 *          ════════════════════════════════════════════════════════════
 *          LOOKING AHEAD — STAGE 6+
 *          ════════════════════════════════════════════════════════════
 *          Stage 6 will introduce SWCloud as a proper SketchWaveJS
 *          gallery class.  The HTML/CSS layer will likely remain
 *          unchanged — only the JS sketch evolves.
 */


/* ── Page reset ──────────────────────────────────────────────────────────────
   WHY: Browsers apply small default margin and padding to <html> and <body>.
        Zeroing them out ensures the p5.js canvas sits flush in the
        top-left corner with no unexpected whitespace around it.
*/
html, body {
    margin:  0;
    padding: 0;
}


/* ── Canvas display ──────────────────────────────────────────────────────────
   WHY: p5.js creates a <canvas> as an inline element by default.  Inline
        elements get a small gap at the bottom (reserved for text descenders).
        display:block removes that gap so the canvas fills its container with
        no phantom spacing below it.
*/
canvas {
    display: block;
}