/* ============================================================
   style-layout-v2.css — beachzoom "screen areas" consumer styles
   ------------------------------------------------------------
   PHASE 1: the band layer + the feathered dark gradient backdrops.
   Loaded only by index_test.html (Deploy Test Mode).

   z-index landscape on the live screens:
     #home-map / #beach-map ......... 1
     .vignette / .map-intro-veil .... 2
     panels (logo, val-stack, nav,
       cat-stack, cluster, …) ....... 18
   The band layer sits at 5 — above the map + vignette, comfortably
   below every interactive panel — so the gradient darkens the map
   without ever covering an icon. pointer-events:none lets map
   drag / zoom pass straight through.
   ============================================================ */

.bz-area-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

/* width / height / top / bottom / left / transform are all set
   inline by layout-v2.js from the saved %-band definition. */
.bz-area {
  position: absolute;
}

/* ── Feathered dark gradient ──────────────────────────────────
   Darkest at the screen edge, fading to fully transparent toward
   the centre of the screen. --bz-grad-op (0–1) is set inline per
   band so visibility is tunable from the editor. */
.bz-area-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bz-area-grad--top {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--bz-grad-op, 0.55)) 0%,
    rgba(0, 0, 0, calc(var(--bz-grad-op, 0.55) * 0.55)) 38%,
    rgba(0, 0, 0, 0) 100%
  );
}
.bz-area-grad--bottom {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--bz-grad-op, 0.55)) 0%,
    rgba(0, 0, 0, calc(var(--bz-grad-op, 0.55) * 0.55)) 38%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ── ?bzAreas debug overlay ───────────────────────────────────
   Dashed band outlines + labels so the three areas are visible
   while we tweak. In debug mode the whole layer lifts above the
   panels (dev-only) so nothing hides the outlines. Without
   ?bzAreas the layer stays at z-index:5 and the gradients sit
   correctly behind the icons. */
.bz-area-layer.is-debug {
  z-index: 9000;
}
.bz-area-layer.is-debug .bz-area {
  outline: 1px dashed rgba(255, 211, 0, 0.9);   /* bzYellow */
  outline-offset: -1px;
}
.bz-area-layer.is-debug .bz-area--top    { background: rgba(255, 211, 0, 0.06); }
.bz-area-layer.is-debug .bz-area--middle { background: rgba(0, 174, 255, 0.05); }
.bz-area-layer.is-debug .bz-area--bottom { background: rgba(255, 211, 0, 0.06); }

.bz-area-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  font: 600 10px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: rgba(255, 211, 0, 0.92);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.bz-area--bottom .bz-area-tag {
  top: auto;
  bottom: 4px;
}

/* ── Legacy media-query defeat ────────────────────────────────
   The legacy style.css hides .val-stack on viewports < 1400px:
     @media (max-width: 1399px) { .val-stack { display: none; } }
   That rule predates Layout-v2, which now lets the admin position
   val-stack on every device. The v2 consumer (layout-v2.js) sets
   inline `top`/`left` correctly, but `el.style.display = ''` can't
   beat a stylesheet `display: none` — the inline value is just
   "use the cascade". The ID selector below has higher specificity
   than the legacy class rule (1,0,0 vs 0,1,0), so it overrides
   the media-query hide. If the user toggles val-stack's eye off
   in the Layout admin, v2 sets `el.style.display = 'none'` inline,
   which still beats this rule (inline > stylesheet, no !important
   needed). */
#val-stack { display: flex; }