/* ============================================================================ CHAPTER HUB — shared editorial-chapter mechanics ---------------------------------------------------------------------------- Shared across every 7-chapter hub (acoustic-panels, acoustic-foam, and any future tool). Deliberately tool-agnostic: color comes from --color-accent so each hub can override the token at :root or on . Most of the visual vocabulary lives elsewhere: • treatment-hub.css shell chrome (reader chips, state directive, sticky chapter rail, chapter heading, copy-link button, chapter-commercial-row, verify checklist, myth grid, .treatment-shell + .treatment-content scaffolding, .for-reader-state reveal). • category-hub.css editorial content cards (stage-entry, decision-module, decision-prompt, spec-grid, spec-card, quantity-stack, quantity-read, quantity-calc-frame, acoustic-calc-*, placement-stack, planner-cta, room-grid, room-card, picks-stack, pick-row, install-grid, install-row, library, shape-list, shape-card). This file adds the mechanics those two don't cover: -1. Directive PATH — progressive 4-step reveal inside the hero, gated on an explicit in-session chip click. Pure-CSS visibility via data-revealed + nth-child(-n+N). 0. Vertical rhythm — tighter inter-chapter gap than the default shared by hub pages (overrides baseline from treatment-hub.css). 1. Install-block wrapper — group heading above the install-grid in Ch 7, since install is one of three sub-blocks sharing the chapter with verify + myths. 2. Priority reorder — when a reader-state chip is active, the matching stage-entry, room-card, and pick-row float to the top of their list and carry a "Start here for …" pill so the page visibly adapts. 3. Priority badge pill — shared pill styling for the three surfaces above; uses the site accent token. 4. Next-topics breathing — space-6 padding-block on cards so content doesn't touch the horizontal dividers. 5. Local polish — how the legacy cards breathe inside the .chapter container (was .page-section before). Per-hub color identity is provided by an adjacent foam-hub.css / whatever, which overrides --color-accent at the :root-level scope of that page. ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ -1. DIRECTIVE PATH — progressive 4-step reveal in the hero --------------------------------------------------------------------------- When a reader-state chip is active, the directive banner shows a 4-step "path" of concrete actions, ordered by first-principles priority. Step 1 is visible on reveal; clicking "Show step N of 4" progressively reveals the rest via the data-revealed attribute on .directive-path__steps. Reveal is pure CSS (no height transitions in JS). The JS inside the