/* ==========================================
   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; }

/* 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;
  }
}