/* ==========================================
   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 !important;
  /* Kill the grid layout from accid_grid.css too — we use stacked layers
     here, not a grid of cells. Without this override the .accid-content-wrap
     gets crammed into a 150px grid cell. */
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
}

/* 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 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.accid-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 6-layer z-stack — back → front (see accid-layers.js for full spec). */
.accid-layer[data-layer="page"]       { z-index: 100; }  /* site-wide BG */
.accid-layer[data-layer="body"]       { z-index: 200; }  /* per-page BG (was 'background') */
.accid-layer[data-layer="guides"]     { z-index: 300; }  /* RESERVED — task #9 */
.accid-layer[data-layer="templates"]  { z-index: 400; }
.accid-layer[data-layer="content"]    { z-index: 500; }
.accid-layer[data-layer="ui"]         { z-index: 600; }

/* 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. */
body:not(.creator-mode) .accid-layer[data-layer="templates"]:hover {
  z-index: 550;
}

/* ...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. */
body:not(.creator-mode) .accid-layer[data-layer="templates"] {
  pointer-events: none;
}
body:not(.creator-mode) .accid-layer[data-layer="templates"] > .module-wrapper-v2 {
  pointer-events: auto;
}
body:not(.creator-mode) .accid-layer[data-layer="templates"] > .module-wrapper-v2[data-module-type="spacer"] {
  pointer-events: none;
}

/* 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. */
body.creator-mode .accid-layer:not(.accid-layer--active) {
  pointer-events: none;
  opacity: .4;
}
body.creator-mode .accid-layer--active {
  opacity: 1;
  pointer-events: auto;
  /* Promote the active layer above the other layers (max z is 600 for `ui`)
     so its modules paint on top and receive pointer events. */
  z-index: 2000;
}

/* Spacer cells reserve vertical space — height comes from inline style. */
.module-wrapper-v2[data-module-type="spacer"] {
  width: 100%;
  flex-shrink: 0;
}
body.creator-mode .module-wrapper-v2[data-module-type="spacer"] {
  background: rgba(156, 163, 175, 0.12);
  border: 1px dashed rgba(156, 163, 175, 0.35);
}
/* 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-module-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. */
body:not(.creator-mode) .accid-layer[data-layer="content"] {
  pointer-events: none;
}
body:not(.creator-mode) .accid-layer[data-layer="content"] > .module-wrapper-v2 {
  pointer-events: auto;
}
body:not(.creator-mode) .accid-layer[data-layer="content"] > .module-wrapper-v2[data-module-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. */
.accid-layer-spacer {
  position: absolute;             /* overlay marker — takes ZERO layout height, so it
                                     no longer pushes each layer's content down and
                                     shoves the template header behind the content. */
  top: 0; left: 0;
  z-index: 6;
  display: inline-flex;            /* content-width corner tab, not a full bar */
  align-items: center;
  gap: 5px;
  min-height: 13px;
  padding: 1px 7px;
  border-radius: 0 0 6px 0;        /* tucked into the layer's top-left corner */
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #4E7A33;            /* default · Content */
  opacity: .9;
  pointer-events: none;           /* never intercept a drag — passes through to the layer */
  user-select: none;
}
.accid-layer-spacer::before {    /* dot echoing the switcher's per-layer dot */
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .65;
}
.accid-layer-spacer[data-layer="ui"]        { background:#E7B23E; color:#241B04; }
.accid-layer-spacer[data-layer="content"]   { background:#4E7A33; }
.accid-layer-spacer[data-layer="body"]      { background:#0066FF; }
.accid-layer-spacer[data-layer="page"]      { background:#6600FF; }
.accid-layer-spacer[data-layer="templates"] { background:#FF6600; }
.accid-layer-spacer[data-layer="guides"]    { background:#94A3B8; color:#1a1a1a; }

/* [tmpl] badge — flags top-level modules living on the Templates layer so you
   can tell template parts (nav, footer) from page content at a glance. Rendered
   as the toolbar's first item (before the EDIT button). Container CHILDREN use
   .container-child-toolbar, so only the top-level template part gets the badge. */
.accid-layer[data-layer="templates"] .module-toolbar::before {
  content: "TMPL";
  align-self: center;
  margin-right: 2px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #FF6600;
  color: #fff;
  font: 700 9px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
}


/* ==================== BACKGROUND MODULE TYPES ==================== */

.module-background {
  width: 100%;
  height: 100%;
  min-height: 180px;
}


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

.layer-switcher {
  display: flex;
  flex-direction: row;
  gap: 4px;
  background: rgba(0, 0, 0, 0.85);
  padding: 0;
  border-radius: 12px 0 0 0;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100000;
  box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  overflow: visible;
}

/* Closed: hide layer buttons, only tab visible */
.layer-switcher .layer-btn {
  display: none;
}

/* Open: show layer buttons with padding */
.layer-switcher--open {
  padding: 8px;
}

.layer-switcher--open .layer-btn {
  display: flex;
}

.layer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  color: #888;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
}

.layer-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.layer-btn.active {
  color: white;
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.25);
}

.layer-btn .layer-icon {
  font-size: 20px;
  line-height: 1;
}

.layer-btn .layer-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Layer indicator dot */
.layer-btn::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  margin-top: 4px;
}

.layer-btn.active::after {
  opacity: 1;
  background: #3b82f6;
}

.layer-btn.has-content::after {
  background: #10b981;
  opacity: 0.8;
}


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

.layer-switcher-tab {
  position: absolute;
  top: -32px;
  right: 0;
  width: 48px;
  height: 32px;
  background: rgba(0, 0, 0, 0.85);
  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 rgba(0, 0, 0, 0.2);
  transition: background 0.2s;
}

.layer-switcher-tab:hover {
  background: rgba(59, 130, 246, 0.5);
}


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

/* Small badge showing which layer a module belongs to (edit mode) */
.layer-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 5;
  pointer-events: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


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

@media (max-width: 768px) {
  .layer-btn {
    padding: 8px 10px;
    min-width: 50px;
  }
  .layer-btn .layer-icon {
    font-size: 18px;
  }
  .layer-btn .layer-label {
    font-size: 8px;
  }
}


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

@media print {
  .layer-switcher {
    display: none;
  }
}

/* ==================== 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. If position:fixed centers against a
   transformed ancestor instead of the true viewport, that's acceptable —
   confirmed, don't spend time fixing it. */
.layer-empty-add {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(10);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 50;
}
body[data-active-layer="content"] .layer-empty-add[data-layer="content"],
body[data-active-layer="ui"]      .layer-empty-add[data-layer="ui"],
body[data-active-layer="body"]    .layer-empty-add[data-layer="body"],
body[data-active-layer="page"]    .layer-empty-add[data-layer="page"] {
  opacity: 1;
  pointer-events: auto;
}

/* Blank-layer "+" wears its layer's colour — same palette as the spacer
   bars above, so the big + doubles as a "you are on THIS layer" cue. */
.layer-empty-add[data-layer="ui"]      { background:#E7B23E; color:#241B04; }
.layer-empty-add[data-layer="content"] { background:#4E7A33; color:#fff; }
.layer-empty-add[data-layer="body"]    { background:#0066FF; color:#fff; }
.layer-empty-add[data-layer="page"]    { background:#6600FF; color:#fff; }
.layer-empty-add[data-layer="ui"]:hover      { background:#D9A32F; }
.layer-empty-add[data-layer="content"]:hover { background:#5C8F3D; }
.layer-empty-add[data-layer="body"]:hover    { background:#1F79FF; }
.layer-empty-add[data-layer="page"]:hover    { background:#7A1FFF; }