/* ═════════════════════════════════════════════════════════════════════════
   accid-layers.css — THE LAYER CSS. Read this before moving anything.
   ═════════════════════════════════════════════════════════════════════════
   The one home for everything about LAYERS (the bands a page is built from):
   how the bands stack in one cell, each band's background, the column inside
   a band, which band takes clicks, the cross-band spacers, and the layer
   switcher in the editor.

   HAND-WRITTEN ON PURPOSE (Shawn, 2026-10-06). No setting writes this file
   and none should: layers are structure, they are easy to break, and keeping
   them in their own clearly named file stops quick decisions about them from
   being made somewhere else. Do not fold it into accid_grid.css or anything
   else. New layer CSS goes here; CSS that is not about layers does not.

   Loaded from accid-styles.css (@import), on every page, view and edit.
   ═════════════════════════════════════════════════════════════════════════ */

/* LAYER: layers — set by `@import … layer(layers)` in accid-styles.css,
   not by anything in this file.
   Position 6 of 19 in accid-shared/accid-layers-order.css, which is the
   only file that states the order. Later layers win. This note is here because a
   sheet's NAME says what is in it, not where it sorts — site.css holds the Site
   column's values and sits in `defaults` so project_styles.css can override it,
   and reading the name instead of the layer has cost a day before now. */

/* ── THE --self-* VOCABULARY, REGISTERED ────────────────────────────────────
   inherits:false is NOT a nicety, it is what makes one vocabulary usable at
   five rungs. MEASURED 2026-08-21: with a plain custom property, --self-bg set
   at page level painted the untouched `page` band red — one name shared across
   five stacked bands leaks into every one of them. Registered, the same test
   gives transparent for the band that set nothing and blue for the band that
   did.

   So --self-* means "THIS element's own box", and you reach the rung you mean
   with a SELECTOR — body[data-page="x"] .accid-layer[data-layer="orangesunshine"] — never
   by cascading down. syntax also buys a guard: a bad value is invalid at
   computed-value time and falls to the initial rather than painting something
   wrong. */
@property --self-bg {
    syntax: "*";
    inherits: false;
    initial-value: transparent;
}
@property --self-bg-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

/* ==========================================
   ACCID LAYER SYSTEM CSS (Filter-in-Place)
   ==========================================

   Layers are tags on modules, all in #moduleContainer.
   Switching layers shows/hides modules by their tag.
   No separate DOM containers needed for editing.
*/

/* ==================== PER-LAYER CONTAINERS ==================== */
/* Per LAYER-SYSTEM-FINAL-SPEC.md — each layer is its own DOM container,
   absolutely stacked. Layers don't share a flow; spacers within each
   layer reserve cross-layer space. */

#moduleContainer.accid-page {
    position: relative;
    min-height: 100vh;
    /* Kill the 20px top/horizontal padding that ships in accid_grid.css —
     layers and the .accid-content-wrap need to render flush at top:0.
     Any site-wide padding/centering lives on .accid-content-wrap (set by
     PAGE-scope vars via applySiteStyleVars in page-renderer.js). */
    padding: 0;
    /* ONE CELL, AND EVERY LAYER IS IN IT (Phase 6, 2026-08-21).
       This used to be `display: block` — chosen to KILL accid_grid.css's cell
       grid, which otherwise crammed the old .accid-content-wrap into a 150px
       cell. The answer is not "no grid", it is the RIGHT grid: a single cell
       that every .accid-layer occupies via grid-area:1/1, so the bands overlap
       as depth while staying IN FLOW and the row takes the tallest one.

       ⚠ THIS RULE IS WHY THE FIRST ATTEMPT DID NOTHING. `.accid-stage
       { display:grid }` was added below and lost silently — same layer, but
       #moduleContainer.accid-page is ID+class and beats a bare class. Found with
       CSS.getMatchedStylesForNode over CDP, which reports the winner AND its
       layer; grep could not have found it because both rules are in this file.

       The three overrides are gone. They existed to beat
       accid_grid.css, and the layer order does that now — `grid` sorts before
       `layers` — so they were entrenching a fight that no longer exists. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

/* The wrap is the canonical styling target for PAGE / BODY scopes. Page layer
   (z 100) stays a sibling above it so its BG can span the full viewport. */
/* .accid-content-wrap RETIRED 2026-08-21 (Phase 6 step 1b). It was the ONE
   shared measured column holding templates/content/ui while page/body sat
   outside it — three layers measured, two not, which is the asymmetry the
   "every layer identical" test forbids. Worse, the injected rule gave it
   z-index:250, so it created a stacking context and the 400/500/600 on the
   three layers inside only ordered each other: the five-band depth stack the
   numbers advertised never existed.

   The measure did not go away, it multiplied — every layer carries its own
   .accid-layer-wrap (defined above), which is what this element was. */

/* ── PHASE 6: A LAYER IS <body>, FIVE TIMES ─────────────────────────────────
   Three elements, identical for every layer, and nothing here may ever name a
   layer. Shawn's test: change the name and you have the next layer, with
   nothing else to figure out.

   THE BAND is a positioning context only. It no longer paints and no longer
   lays out — those were the two jobs that made it special-case-able. */
/* ── THE STACK IS A GRID, ONE CELL (Phase 6, 2026-08-21) ────────────────────
   Every layer occupies the SAME grid cell, so they overlap exactly as they did
   when absolutely positioned — but they are IN FLOW, so the grid row takes the
   height of the tallest band and the page gets its height the way a document
   normally does.

   WHAT THIS REPLACES: `position: absolute; top:0; left:0`. Absolute layers
   contribute no height to anything, which is why the page's height came from
   scrollable overflow leaking out of them, why .accid-content-wrap needed
   min-height:100vh as a floor, and — the expensive one — why header and footer
   positions had to be SIMULATED by measuring the other layer every frame. On
   md-test that cost a 6,441px empty spacer.

   MEASURED before/after on a live page: document 6691 = 6691, every band height
   identical, wrap 1240 = 1240, module left/width 20/1240 unchanged, no page
   errors — and the stage went 900 -> 6691, which is the whole point: real height
   from flow instead of overflow.

   z-index STILL WORKS. Grid items are z-orderable even at position:static —
   verified: a z500 item first in DOM painted above a z200 item last in DOM.
   position:relative is kept anyway, because absolutely-positioned DESCENDANTS
   resolve against their layer today and would otherwise jump to the stage
   (verified: abs child moved 10 -> 110 when its grid item became positioned).

   BANDS STRETCH, and that is deliberate — it is grid's default and I was wrong
   to override it. Measured both ways on md-test: document, stage, header top and
   module left/width are IDENTICAL either way. The only difference is that each
   band, and its .accid-layer-bg, fills the full row instead of stopping at its
   own content.

   That is the model (a band is <body>'s capability, five times over — <body>
   does not stop painting where its content ends), AND it fixes a live bug: with
   align-self:start the `page` backdrop was 900px tall, so a page-level
   background stopped at the first viewport and everything below it was bare.

   It is also what makes a footer pinnable. A band that fills the row has a
   BOTTOM to pin to, so `margin-top:auto` on a last child puts it at the end of
   the page at any content height — no measuring, no spacer. With start there is
   no bottom and the offset has to be simulated, which is the machinery this
   phase exists to delete. */
.accid-layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
}

.accid-stage {
    display: grid;
    /* The page's floor: at least one screen tall. page-renderer.js used to
       write this into the Site style tag on every load (and so it was copied
       into site.css on Save); it is structure, not a setting (SPI-642). */
    min-height: 100vh;
}

/* ── THE PAINT ──────────────────────────────────────────────────────────────
   Its own element, not `background:` on the band, so it can hold a <video>,
   take its own opacity, and be the thing a backdrop-filter filters. All three
   are already offered by the BG panel and none was implementable while the
   paint lived on the band. pointer-events:none so a painted layer never eats a
   click meant for the content above it. */
.accid-layer-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* NO background here. It is painted by `background @ <band>`, written as
       declarations onto [data-accid-target~="<band>"] at whichever rung sets it
       (global, look, page …), every one of which sorts after layer(layers). A
       default here would be harmless to them and would still be a second
       painter for the same element, so there is none. */
    opacity: var(--self-bg-opacity, 1);
    z-index: 0;
}

/* ── THE MEASURE ────────────────────────────────────────────────────────────
   What every site builds inside <body> and <body> never provides. The band's
   old flex-column moved HERE, because layout is the wrap's job: the band holds
   the wrap, the wrap holds the content. */
.accid-layer-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* ⚠ THE GAP BETWEEN MODULES — STATIC, AND DELIBERATELY NOT A SETTING
       (2026-09-26). page-renderer used to generate `gap: var(--site-gap)` here
       from a site-level control. --site-gap was killed: it was one name for two
       jobs (this, and a container's gap between its own columns), and a custom
       property inherits, so a container writing it poisoned every descendant
       that read it — measured, two of three navs on the styleguide took their
       link spacing from the container around them instead of the site.
       4px is what tomakeseed's ss.gap of .25rem computed to, so this changes
       nothing that renders. Shawn, ruling it out: "every single time we try
       this it screws us over — I doubt much more than 2% of users would even
       care or notice." If it ever needs to vary again it needs its OWN
       non-inheriting name, not a shared one. */
    gap: 4px;
}

/* ═══ SITE CONTENT AREA (not layers) ═══════════════════════════════════════
   The content container, the column inside the Site (Shawn, 2026-10-13). Its
   starting look (centred, 24px sides shrinking on a narrow screen) is in
   our-choices.css; the Site's and a Page's content_area settings are written
   as real properties on .accid-layer-wrap.site-content-area and
   [data-page="X"] .accid-layer-wrap, and beat it. */

/* ── DEPTH COMES FROM THE BAND'S POSITION, NOT FROM A RULE PER LAYER ───────
   page-renderer stamps data-layer-index (the band's index in ACCID_LAYERS) and
   the depth is (index + 1) * 100, written here by position, never by name, so
   reordering ACCID_LAYERS reorders the stack and no layer is named. Moved out
   of an inline --layer-z (2026-10-14). */
.accid-layer[data-layer-index="0"] { z-index: 100; }
.accid-layer[data-layer-index="1"] { z-index: 200; }
.accid-layer[data-layer-index="2"] { z-index: 300; }
.accid-layer[data-layer-index="3"] { z-index: 400; }
.accid-layer[data-layer-index="4"] { z-index: 500; }
.accid-layer[data-layer-index="5"] { z-index: 600; }
.accid-layer[data-layer-index="6"] { z-index: 700; }
.accid-layer[data-layer-index="7"] { z-index: 800; }

/* The editor's plane across the bands (accid-edit-layer.js). It holds nothing
   and takes no part in sizing the stage. Moved out of an inline cssText. */
#accid-edit-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Dropdown escape — templates sits BELOW content (400 < 500), so an open nav
   dropdown extending down into the content band paints behind content modules
   and loses :hover to them (the dropdown snaps shut mid-list). While anything
   in the templates layer is hovered — the dropdown is a layer descendant, so
   :hover holds the whole time it's open — promote the layer just past content
   (still under ui 600). View mode only; creator-mode has its own active-layer
   promotion above. */

/* ...but the promotion above must not make the WHOLE templates layer a click
   shield. The layer is position:absolute/width:100%, so its box spans the
   content band even when it only paints a header at the top — and once
   promoted to 550 it sits above content (500) and swallows every click on
   the content below. Same pointer-events split the content layer uses at
   :105-113: the layer itself is transparent to the pointer, its real modules
   are not. The dropdown escape still works, because :hover matches the layer
   via the hovered nav descendant, which keeps pointer-events: auto. */
/* (the templates-specific copy of this lived here until 2026-08-21 — it is now
   one generic rule for EVERY layer, further down) */

/* Edit-mode layer isolation — inactive layers DIM (opacity only — NO grayscale, so
   the real bg colors stay) and don't intercept pointer events: you can see which
   layer is live, and clicks fall through to it. */
/* ── THE INACTIVE-BAND DIM IS GONE, 2026-08-21 ─────────────────────────────
   It was:
       body.creator-mode .accid-layer:not(.accid-layer--active) {
           pointer-events: none;  opacity: 0.4;
       }

   and it was right while each band held its own content: dim what you are not
   editing, let clicks fall through to the band you are.

   PHASE 6 ENDED THAT. Every module — page content AND template parts — now
   renders in the CONTENT band. So on a template page, which opens with
   activeLayer='templates' so new modules file correctly, the band holding
   EVERYTHING was inactive: 0.4 opacity and pointer-events:none across the whole
   document. Shawn: "they are still dimmed and I still can't get to the buttons
   on the modules." Dimmed AND inert, on the one page where those parts are the
   subject.

   Nothing replaces it here. Recession is now decided by OWNERSHIP, in
   accid-layers.css just below (a templates-sourced part dims on a PAGE, not on
   its own template) and by the two chrome rules in creator.css. Those ask "is
   this mine to edit", which is the question this rule was trying to answer with
   the wrong instrument.

   The band is a paint surface now, not a permission boundary. */

/* ── ONLY THE ACTIVE LAYER WEARS CHROME (Shawn, 2026-08-21) ─────────────────
   "Really only the ACTIVE layer of anything needs the edit chrome on it."

   Right, and it is not only visual noise — CHROME TAKES UP SPACE.
   .module-toolbar is `display:flex; min-height:28px` in NORMAL FLOW
   (accid_grid.css:712), so in edit mode every module is ~28px taller than it
   will publish, every layer is taller by 28px x its module count, and the
   auto-spacers MEASURE those inflated heights. The number a header produces in
   the editor is not the number the same header produces when published.

   ONE ATTRIBUTE, NOT A LIST OF CLASSES. Chrome roots are stamped
   data-accid-chrome where they are created (page-renderer.js x5,
   container-module.js x3). The first version of this rule named six classes,
   which meant the SEVENTH piece of chrome would silently keep taking up space —
   and Shawn immediately named three I had missed (EDIT/STYLE, the + at the
   bottom). Everything inside a chrome root goes with it, so the mt-*, ctb-* and
   container-child-* families need no mention.

   display:none, deliberately — NOT visibility or opacity. Only display:none
   takes it OUT OF FLOW, and being out of flow is the entire point. Hidden but
   still occupying would fix the noise and leave every measurement wrong.

   So an inactive layer renders exactly as it will publish: everything you are
   NOT editing is WYSIWYG, and a spacer measuring another layer's header gets the
   real header. Switch to that layer and its chrome appears, which is honest —
   you are editing it now.

   Names no layer, per the acceptance test. */
/* The chrome-VISIBILITY rules moved to css/accid-editor-chrome.css on
   2026-08-21. They were here inside `@layer editor`, but this file is @imported
   as layer(layers), so that nested to `layers.editor` — a SUB-layer — and rules
   sitting plainly in `layers` (like .accid-layer-spacer's own display) beat it.
   A LINKED file's @layer is top-level; an IMPORTED file's nests. */
/* ── AN AUTO-SPACER IS NOT AUTHORED CONTENT, so it wears no chrome — on ANY
   layer, including the active one (Shawn, 2026-08-21).

   Seen in the editor: the active content layer's first child is
   spacer-auto-content-top, presenting a full SPACER / EDIT / STYLE / ZAPP / X /
   + toolbar. Every one of those is a lie. The spacer is generated at render
   from a measurement of another layer, its height is written to the DOM and
   never persisted (verified: zero spacer modules in md-test.json), and it is
   rebuilt on the next render — so Edit changes nothing, Delete is undone
   immediately, and ZAPP has nothing to act on. A control that cannot do what it
   says is this project's recurring subject; here there were six of them stacked
   on one element.

   The dashed outline and tint from the spacer rules stay: SEEING the reserved
   space is genuinely useful. Only the controls go.

   Keyed on data-auto, which sync-auto-spacers already sets — so a hand-placed
   spacer, which IS authored content, keeps its chrome and stays editable. */

/* ── THE ACTIVE-BAND PROMOTION — z RESTORED 2026-08-28, THE OTHER TWO STAY DEAD
   The whole rule was deleted 2026-08-21. It was:

       body.creator-mode .accid-layer--active {
           opacity: 1;  pointer-events: auto;  z-index: 2000;
       }

   WHY IT WAS RIGHT TO DELETE, and this half of the reasoning still stands: the
   active band is a STRETCHED grid item covering the whole page, so
   `pointer-events: auto` on it made a transparent sheet over the document that
   ate every click. Hit-tested at the time: 22 of 22 buttons blocked, blocker
   reported as `accid-layer`.

   ⚠ DO NOT RESTORE THE OTHER TWO DECLARATIONS. `pointer-events: auto` here is
   (0,2,0) and would out-specify `.accid-layer { pointer-events: none }` (0,1,0)
   further down — the rule Shawn stated plainly as "the layers should have no
   pointer events, it's the modules that should have them". Restoring it brings
   the sheet straight back. `opacity: 1` belongs to the inactive-band dim, which
   is also gone and should stay gone.

   WHY THE z HALF COMES BACK. It was never what ate the clicks, and a band
   cannot eat one now: `.accid-layer { pointer-events: none }` is unconditional
   in both modes, and so are the wrap and the bg. Only content that opts back in
   is hittable.

   WHAT IT FIXES. The blank-layer "+" is `position: fixed` INSIDE its own band,
   so the band's z decides whether you can see or click it. With the bands at
   100/200/300/400 and the template's parts sitting in the default band (300),
   the + on monterey purple and blue cheer was drawn at opacity 1 and
   pointer-events auto and painted over by template cards. Only orange sunshine
   (400) was in front of them, which is why it alone appeared to work.

   MEASURED BOTH DIRECTIONS, 2026-08-28, before and after, on a blank article
   and on template-default:
     · reachability — purple false→true, blue false→true, orange true→true
       (elementFromPoint at the button's own centre returns the button)
     · the failure that caused the deletion — blockedByBand = 0 in all four
       runs, across 30 and 31 visible chrome elements. The promoted band never
       becomes the hit target.

   A band is still a paint surface, not a permission boundary. This is the one
   thing it legitimately does that document order cannot: lift what you are
   editing without reparenting it. */

/* SPACER RULES READ data-accid-type (2026-08-19). They were wrapper-qualified
   on data-module-type, which is being dropped from the wrapper; accid-type is
   on that same element, so this is the identical element set. Without the swap
   these five rules stop matching and spacers lose their width/flex-shrink,
   their creator-mode dashed outline, and their view-mode pointer-events:none —
   which would make them start eating clicks meant for other layers.

   Spacer cells reserve vertical space — height comes from inline style. */
.module-wrapper-v2[data-accid-type="spacer"] {
    width: 100%;
    flex-shrink: 0;
}
/* In view mode, spacers are pure layout reservations — they shouldn't
   eat hover/click on anything overlapping them from other layers. */
body:not(.creator-mode) .module-wrapper-v2[data-accid-type="spacer"] {
    pointer-events: none;
}

/* Same trick for the content layer overall: the layer's empty space
   (between modules) is click-through so anything underneath (template
   header sticking down into the content zone, BG video, etc.) stays
   reachable. Real modules inside the layer re-enable pointer-events
   so links/buttons/forms still work. Spacer rule above wins on
   specificity, so spacers remain click-through too. */
/* ── CLICK-THROUGH, ONE RULE FOR EVERY LAYER (2026-08-21) ──────────────────
   A layer's empty space is transparent to the pointer so whatever is beneath it
   stays reachable; its real modules re-enable pointer events so links, buttons
   and forms work.

   THIS WAS WRITTEN TWICE — once naming `templates`, once naming `content` — and
   not at all for page, body or ui. That is why an EMPTY body layer (z200) was
   swallowing every click that missed a module: it had no such rule, so it kept
   pointer-events:auto and sat above page. Measured on md-test: elementsFromPoint
   at the middle of the page returned layer:body, with content/templates/ui not
   in the stack at all.

   ⚠ DESCENDANT, NOT CHILD. It was `.accid-layer > .module-wrapper-v2`. Phase 6
   moved every module into .accid-layer-wrap, so the child combinator stopped
   matching and NOTHING re-enabled pointer events — every module in view mode
   computed pointer-events:none and no link on a published page was clickable.
   A selector that silently matches nothing is the recurring failure here; this
   one was introduced by the restructure and caught by hit-testing a real page,
   not by any test.

   The spacer exception is restated at higher specificity because the generic
   rule above ties with the standalone spacer rule and would win on source
   order. */
/* ⚠ BOTH MODES, not just view. Shawn stated the rule plainly: "the layers
   should have no pointer events, it's the modules that should have them."

   It was view-mode only, and creator mode got away with it because bands were
   position:absolute and only as tall as their own content. Phase 6 made every
   band a STRETCHED grid item covering the whole page, so an EMPTY band with a
   higher z-index now sits over everything: ui is z600, above content at z500,
   6626px tall and completely transparent — and it swallowed every click meant
   for a module underneath.

   That was masked until b699df4 by `pointer-events:none` on inactive bands.
   Removing that rule (it was dimming templates into unreachability) exposed
   this one. Shawn: "not dimmed, but can't get to the buttons."

   A band is a PAINT SURFACE. It should never be a hit target in either mode —
   only its modules should.

   The declaration that says so moved into POINTER EVENTS BY BAND below, where
   it reads `var(--clicks, none)` and has an origin-band counterpart. Two
   `.accid-layer { pointer-events }` rules in one file is one too many: they
   are the same claim, and the second silently decided it. */
/* ── POINTER EVENTS BY BAND (ruled 2026-09-21 22:41) ───────────────────────
   This replaces four amendments made in one evening — an interactive-element
   list, a .module-content opt-in, `:not(:empty)`, and an empty-module collapse
   — with the rule they were all circling:

     the content band   everything on it is live. Text selects, links click,
                        empty boxes are boxes. Nothing needs an opt-in.
     every other band   inert by default, wrapper AND contents. Visual until
                        someone says otherwise.

   pointer-events INHERITS, so one declaration on the band reaches everything
   inside it. That is what deletes the opt-in list: there is nothing to
   enumerate, so there is nothing to leave out — and leaving something out is
   how <area> nearly went inert and how selection actually did.

   ⚠ THE CONTENT BAND IS SELECTED BY A FLAG, NOT BY ITS NAME. This file may
   never name a layer (see PHASE 6 above): rename one and nothing here may
   need an edit. page-renderer stamps data-layer-origin from `origin: true`,
   the same fact ACCID_DEFAULT_LAYER already derives from.

   ⚠ `--clicks` IS GONE (SPI-625, 2026-10-02). It was the override at any rung,
   and it did nothing on a module on a published page — nothing read it there.
   A module's `clicks` setting is now written by the emitter as the real
   property, `pointer-events: inherit | auto | none`, straight onto the module.
   These four rules keep their literal values and stay as STRUCTURE: they say
   what a band is, not what a user chose. */
.accid-layer {
    pointer-events: none;
}
.accid-layer[data-layer-origin] {
    pointer-events: auto;
}
/* ⚠ THE OVERRIDE LANDS ON THE WRAP, BECAUSE THAT IS THE SURFACE THAT EXISTS.
   The band element itself carries no data-accid-target: `<name>` targets
   .accid-layer-bg (a SIBLING of the wrap, so a value there reaches no module)
   and `<name>-wrap` targets .accid-layer-wrap, which is the modules' ancestor.
   So the wrap has to be a link in the chain rather than a passive div:
   `inherit` means "whatever the band said", and a module that wants otherwise
   now says so with its own emitted pointer-events. */
.accid-layer-wrap {
    pointer-events: inherit;
}
/* Edit mode needs the wrapper live on EVERY band, because module chrome
   (EDIT / STYLE / handles) hangs off it. The active-band rule below then
   decides which band is reachable; editor chrome opts in regardless. */

/* ── ONLY THE ACTIVE BAND IS REACHABLE (Shawn, 2026-09-09) ──────────────────
   The LAYERS switcher is the ONLY way to reach a band. The z half already
   works (`--active` gets 2000, above every base z); this is the other half —
   the active band's modules stay hittable, everyone else's stop. It is what
   makes stacked bands editable at all.

   Targets the WRAPPERS, not the band. Specificity beats the creator-mode rule
   above it without, which would reverse layer order
   (creator.css:2649).

   ⚠ I DELETED THIS BY ACCIDENT AND active-band-reach CAUGHT IT. The 22:41
   simplification removed three superseded rules in one block and took this
   with them — it sat between two of them. The 22:41 ruling keeps it
   explicitly ("Edit mode: the active-band rule still decides"), and the suite
   named it in one run. Three of the four rules that block removed were meant
   to go; this was the fourth, and a rule set diff of before-vs-after is what
   separated them. */

body:not(.creator-mode) .accid-layer .module-wrapper-v2[data-accid-type="spacer"] {
    pointer-events: none;
}

/* Legacy .layer-hidden — pre-refactor filter-in-place class. Kept as a
   no-op so any code still applying it during transition doesn't break. */
.layer-hidden {
    opacity: 1;
}

/* ==================== PER-LAYER MARKER / DROP-SPACER ==================== */
/* Edit-only labelled bar at the top of every layer (added by page-renderer's
   makeLayerEl when isEditMode). Colour-coded to the layer — same palette as the
   chrome colorway — so you always know where you are, AND a real element so an
   otherwise-empty layer still offers a target to drop modules onto. Every layer
   gets one, so all layers shift down equally and stay aligned with each other.
   Never rendered in view mode, so it can't reach the published page. */
/* The layer label bar wears its layer's colour — one rule, read from the band.
   --layer-swatch is INHERITED from .accid-layer, so this needs no selector of
   its own beyond the class. */

/* ==================== EDITOR: LAYER SWITCHER ==================== */


/* Closed: hide layer buttons, only tab visible */

/* ── A LAYER BUTTON IS A SWATCH AND A NAME, SIDE BY SIDE ───────────────────
   Was a column: a 20px emoji stacked over a 9px UPPERCASE label, 60px wide. The
   emoji carried the identity and the text was too small to read at a glance —
   which mattered less when the labels were "+1" and "-2" and matters a lot now
   that they are "orange sunshine" and "monterey purple".

   Row instead, swatch first. The COLOUR is the fast cue and the name confirms
   it; stacking made them compete for the same glance. The label keeps its own
   casing (the array already spells them the way they should read) rather than
   being shouted in uppercase. */


/* ACTIVE: the layer's own colour, not a generic highlight. --layer-tint comes
   from the same lookup as the swatch, so the button and the band it selects can
   never disagree about what colour that layer is. */


/* Only the layout-guides button still carries an emoji; every layer button
   renders a .layer-swatch instead (see the swatch block near the end of this
   file). Kept small so it sits on the same line as a swatch. */


/* Layer indicator dot */



/* ==================== LAYER SWITCHER TOGGLE TAB ==================== */

.layer-switcher-tab {
    position: absolute;
    top: -32px;
    right: 0;
    width: 48px;
    height: 32px;
    background: var(--c6-a80);
    border: none;
    border-radius: 8px 0 0 0;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: -2px -4px 10px var(--c6-a20);
    transition: background 0.2s;
}

.layer-switcher-tab:hover {
    background: var(--c5-a50);
}

/* ==================== LAYER BADGE ON MODULES ==================== */

/* Small badge showing which layer a module belongs to (edit mode) */

/* ==================== RESPONSIVE ==================== */

/* ==================== PRINT ==================== */

/* ==================== BLANK-LAYER "+" (SPI-526 final) ====================
   Big centered add button, rendered by page-renderer's makeLayerEl for
   content/ui/body/page when that layer has zero modules (JS gate). Visible
   only when its own layer is active — reuses setActiveLayer()'s
   data-active-layer stamp on <body>, same mechanism as chrome dimming.
   Never more than one visible at once.

   ⚠ IT WAS position:fixed, AND THAT IS WHY YOU COULD NOT CLICK THE PAGE.
   Fixed centres it on the VIEWPORT, not on the band it belongs to — so an
   empty active band put a 200x200 button with pointer-events:auto in the
   middle of the screen whatever the band's real position, and it swallowed
   every click landing there. Shawn, 2026-09-21, having moved orangesunshine
   over the nav to test: "even when I override [.module-wrapper-v2] with none,
   still I can't get past the orange layer to get to the nav." Overriding the
   wrapper could not help: the + is not a wrapper, and it is the only element
   in a band that opts back into pointer events.

   The old note here said the mis-centring was "acceptable, don't spend time
   fixing it" — true while it was only cosmetic, and it stopped being only
   cosmetic the moment it was also a hit target.

   absolute against .accid-layer-wrap (position:relative, and the element's own
   parent), so it centres in ITS band and can never cover another one. */
/* ── VISIBLE ONLY ON THE ACTIVE BAND, AND IT NAMES NO LAYER ────────────────
   Was four selector pairs matching body[data-active-layer="X"] against
   .layer-empty-add[data-layer="X"] — CSS cannot compare two attributes to each
   other, so every layer needed its own pair spelled out.

   The + lives INSIDE its own band's wrap, and setActiveLayer already toggles
   .accid-layer--active on exactly one band (filterModulesByLayer). So
   containment answers the question the attribute-matching was faking, and one
   rule covers every layer that will ever exist. */

/* ── AND THE BAND MUST HAVE AN AREA FOR IT TO SIT IN ───────────────────────
   ⚠ WITHOUT THIS, EMPTYING A LAYER MAKES IT IMPOSSIBLE TO REFILL. Measured on
   the styleguide 2026-09-26 after Shawn emptied orangesunshine: the + rendered
   at top **-84px** — 200px tall, centred at `top: 50%` of a wrap only 32px
   high, so half of it sat above the document and no part of it was clickable.
   Shawn: "I deleted the stuff in the other layers and now it won't let me add
   them back in."

   THE WRAP COLLAPSES BECAUSE NOTHING IN AN EMPTY BAND TAKES HEIGHT. The only
   other child is .accid-layer-spacer, which is `position: absolute` (zero
   layout height, :522) AND `display: none` in creator mode
   (accid-editor-chrome.css:72). Both were deliberate and neither is wrong on
   its own; together they left the + centred in nothing. page-renderer's own
   comment at the spacer promises the opposite — "so empty layers accept
   modules and you always know which layer you're on" — and that promise has
   been unkept since the label bar was hidden.

   HEIGHT ON THE WRAP, NOT THE BUTTON. Shrinking the + or pinning it to `top:0`
   would make it reachable and still leave the band with no area, and a band
   with no area is nowhere to DROP a module either — which is the other half of
   what the spacer used to provide. 280 clears the 200px button: top:50% of 280
   is 140, less half the button, leaves it 40px from the band's top edge.

   IT CANNOT MOVE ANY OTHER BAND. Every .accid-layer is `grid-area: 1 / 1`
   (:143) inside `.accid-stage { display: grid }` (:149) — one cell, all four
   stacked — so the row is already as tall as the tallest band and a 280px
   minimum on an empty one is absorbed.

   EDIT MODE ONLY, WITHOUT SAYING SO. `.layer-empty-add` is built inside
   page-renderer's `if (isEditMode)` gate, so the `:has()` can only match in the
   editor. Scoped to `--active` to pair exactly with the visibility rule above:
   the area exists for the + you can actually press. */
.accid-layer--active .accid-layer-wrap:has(> .layer-empty-add) {
    min-height: 280px;
}

/* Colour from the band it sits in — the + doubles as a "you are on THIS layer"
   cue, which is what the four hand-written pairs were reaching for. Two of them
   had already drifted: orangesunshine was #e7b23e and whitelightning #4e7a33,
   both leftovers from the pre-rename palette, neither matching its own swatch in
   the switcher. They agree now. */

/* ==================== LAYER SWITCHER — INLINE (bottom bar tab strip) ========
   2026-08-18 (Shawn): "get the layers up and out of the bottom." The switcher
   moved from a fixed bottom-right float into #bbPermLayers, the permanent tab
   strip that sticks up from the bar's left edge beside ⚙ Config. Always
   expanded — accid-layers.js does not build the 🧅 toggle when it has a host.

   Everything here is an override of the floating rules above; that build still
   runs wherever #bbPermLayers is absent, so neither shape is a special case of
   the other. Sizing matches .bb-perm-tab so it reads as a sibling tab.
   ========================================================================== */

/* ── VERTICAL, ON LIGHT, ABOVE THE BAR ─────────────────────────────────────
   Shawn, 2026-08-25: "I DO want the layer nav to be vertical and on a light bg."

   A horizontal strip inside the bottom bar fought the content twice over: the
   names are two words each, so four of them plus a caption filled the bar and
   left nothing for anything else; and dark-on-dark meant the swatches were the
   only thing carrying identity. Stacked on light, the colour and the name sit
   together on one line and the list reads top-to-bottom as front-to-back —
   which is what the stack IS.

   It rises out of the bar rather than growing it: absolutely positioned against
   the host, so opening it costs the canvas nothing. */




/* Open: show layer buttons with padding */





/* Tighter than the floating build: the strip sits ABOVE the bar, so its height
   is height the canvas loses. Icon and label both come down a step. */
/* On light: dark text, full-width rows. Overrides the dark-panel colours from
   the floating variant, which is still used wherever there is no bottom bar. */
/* The caption becomes a heading for the stack rather than a label beside it. */



/* The indicator dot is decoration at this size — it doubles the button height. */

/* ── LAYER SWATCHES ────────────────────────────────────────────────────────
   The colour comes in on --layer-swatch / --layer-tint, set inline by
   accid-layers.js from its own lookup. NOTHING HERE NAMES A LAYER, which is the
   point: rename a layer and this file needs no edit and cannot go stale.

   Shawn, 2026-08-25: "act like they are derived from the layer name, not part of
   the layer name." One lookup, in the switcher, which is the only thing that
   needs to know a layer has a colour at all. */

/* ── NOT LAYERS, SO NOT HERE (2026-10-06, Shawn) ───────────────────────────
   The template-part and piece marks (the [TMPL] badge and hatching, the
   template name chip, the piece overlay) are EDITOR marks about templates and
   pieces, not layers: they moved to the end of accid-editor.css, which loads
   in edit mode only. The background module's box (.module-background) moved
   to modules-styles.css. */