/* ═════════════════════════════════════════════════════════════════════
   overlay.css  ·  The stacking overlay system (router layers 1…N)
   Generalizes the reference's two motion patterns into one stack:
     • .layer.sheet  — bottom sheet, slides UP   (the detail view, L1)
     • .layer.panel  — slides in from the RIGHT  (action panels, L2+)
   The router (js/router.js) owns push/pop and animates .open on/off.
   Each layer carries its own backdrop; stacking is by z-index = base +
   depth so panels sit above the sheet, which sits above the list.

   Body-scroll lock is ref-counted in the router (locked while depth>0),
   replacing the reference's ad-hoc per-component lock that caused the
   "stale handler survived into next modal" class of bug.
   ═════════════════════════════════════════════════════════════════════ */

/* ─── Backdrop (one per layer) ─────────────────────────── */
.layer-backdrop{
  position:fixed; inset:0;
  background: rgba(3,5,10,.78);
  backdrop-filter: blur(6px);
  opacity:0; pointer-events:none;
  transition: opacity .22s ease;
}
.layer-backdrop.open{ opacity:1; pointer-events:auto; }
/* Stacked backdrops shouldn't each darken — only the topmost is fully
 * opaque; lower ones go transparent so we don't get a black-hole stack. */
.layer:not(:last-child) .layer-backdrop{ opacity:0 !important; }

/* ─── Layer shell ──────────────────────────────────────── */
.layer{
  position:fixed; inset:0; z-index:200;
  display:flex; pointer-events:none;
}
/* z-index climbs with depth — set inline by the router as --depth. */
.layer{ z-index: calc(200 + var(--depth, 0) * 2); }

.layer-card{
  background: var(--surface);
  border:1px solid var(--border);
  display:flex; flex-direction:column;
  pointer-events:auto;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.6), 0 0 0 1px var(--accent-glow);
}

/* ── SHEET (bottom sheet — the booking/lead detail, L1) ── */
.layer.sheet{ align-items:center; justify-content:center; }
.layer.sheet .layer-card{
  width:100%; max-width:560px; max-height:90vh;
  border-radius:18px;
  transform: translateY(24px) scale(.98); opacity:0;
  transition: transform .26s cubic-bezier(.2,.9,.3,1), opacity .2s;
}
.layer.sheet.open .layer-card{ transform: translateY(0) scale(1); opacity:1; }

@media (max-width:640px){
  .layer.sheet{ align-items:flex-end; }
  .layer.sheet .layer-card{
    max-width:100%; max-height: calc(100dvh - 80px);
    border-radius:18px 18px 0 0; border-bottom:none;
    transform: translateY(100%); opacity:1;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .layer.sheet.open .layer-card{ transform: translateY(0); }
}

/* ── PANEL (slides from right — action panels, L2+) ────── */
.layer.panel{ align-items:stretch; justify-content:flex-end; }
.layer.panel .layer-card{
  width:100%; max-width:480px; height:100%;
  border-radius:0; border-right:none;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2,.9,.3,1);
}
.layer.panel.open .layer-card{ transform: translateX(0); }
@media (max-width:640px){
  .layer.panel .layer-card{ max-width:100%; }
}

/* ── PAGE (full-screen — Settings hub + its sections) ──── */
/* A full-bleed page that slides in from the right. Sections stack on the
 * hub (Back pops one). No backdrop: the page is opaque and covers the list. */
.layer.page{ align-items:stretch; justify-content:stretch; }
.layer.page .layer-card{
  width:100%; max-width:100%; height:100%;
  border:none; border-radius:0;
  background: var(--bg);
  box-shadow:none;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2,.9,.3,1);
}
.layer.page.open .layer-card{ transform: translateX(0); }
.layer.page .layer-head{ padding-top: max(14px, env(safe-area-inset-top)); }

/* ─── Drag handle (sheet, mobile only) ─────────────────── */
.layer-handle{ display:none; }
@media (max-width:640px){
  .layer.sheet .layer-handle{
    display:block; width:42px; height:4px;
    background: var(--border); border-radius:100px;
    margin:8px auto 0; flex-shrink:0;
  }
}

/* ─── Layer header ─────────────────────────────────────── */
.layer-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:14px 18px;
  background: var(--card);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
/* The full-height right-slide panel starts at the very top of the screen,
 * so in the installed PWA its header sits under the status bar/notch and
 * the back button can't be tapped. Push the header content below the safe
 * area. No-op in the browser/desktop (inset is 0 → max() picks 14px), and
 * panel-only because mobile sheets are bottom-anchored. */
.layer.panel .layer-head{ padding-top: max(14px, env(safe-area-inset-top)); }
.layer-title{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.5rem; line-height:1.05; letter-spacing:.025em;
}
.layer-sub{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px 8px; margin-top:6px; font-size:.7rem; color: var(--muted2);
}
.layer-head-btns{ display:flex; gap:6px; flex-shrink:0; }

/* back chevron (panels) + close (sheet) share the icon-button look */
.layer-icon-btn{
  width:36px; height:36px; border-radius:50%;
  background: var(--card2); border:1.5px solid var(--border);
  color: var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: transform .12s, border-color .14s, color .14s, background .14s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.layer-icon-btn:hover{ border-color: var(--accent); color: var(--accent-light); }
.layer-icon-btn:active{ transform: scale(.92); background: var(--accent-glow); }
.layer-icon-btn svg{ width:15px; height:15px; stroke: currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.layer-icon-btn.close:hover{ border-color: var(--red); color: var(--red); }
.layer-icon-btn.close:active{ background: rgba(248,113,113,.12); }

/* ─── Action grid (the Call/Text/Link/Email/Maps row) ─── */
.layer-actions{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap:5px; padding:12px;
  border-bottom:1px solid var(--border); background: var(--bg);
  flex-shrink:0;
}
.l-act{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:11px 4px; border-radius:10px;
  background: var(--card); border:1.5px solid var(--border);
  color: var(--text); text-decoration:none; cursor:pointer;
  font-size:.58rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  transition: all .14s; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; min-height:56px;
}
.l-act:hover{ border-color: var(--accent); color: var(--accent-light); background: var(--accent-glow); }
.l-act:active{ transform: scale(.96); background: var(--accent-glow); }
.l-act svg{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.l-act.disabled{ opacity:.32; pointer-events:none; }

/* ─── Layer body / footer ──────────────────────────────── */
.layer-body{
  flex:1; overflow-y:auto; padding:0 0 24px;
  -webkit-overflow-scrolling: touch;
}
.layer-body::-webkit-scrollbar{ width:5px; }
.layer-body::-webkit-scrollbar-thumb{ background: var(--border); border-radius:5px; }

.layer-foot{
  padding:12px 16px 14px; border-top:1px solid var(--border); background: var(--bg);
  flex-shrink:0; padding-bottom:max(14px, env(safe-area-inset-bottom));
}

/* ─── Primary / ghost buttons used inside panels ───────── */
.l-btn{
  width:100%; padding:13px; border-radius:10px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  -webkit-tap-highlight-color: transparent;
}
.l-btn.primary{ background: var(--accent); color:#07090f; }
.l-btn.primary:hover{ background: var(--accent-light); }
.l-btn.primary:disabled{ background: var(--border); color: var(--muted); cursor:not-allowed; }
.l-btn.ghost{ background: var(--card); color: var(--text); border:1.5px solid var(--border); }
.l-btn.ghost:hover{ border-color: var(--accent); color: var(--accent-light); }
.l-btn.danger{ background: var(--card); color: var(--red); border:1.5px solid var(--border); }
.l-btn.danger:hover{ border-color: var(--red); }
.l-btn:active:not(:disabled){ transform: scale(.98); }
.l-btn + .l-btn{ margin-top:8px; }

/* stub notice — every wired-but-inert action carries this in v1 */
.l-stub{
  margin:0 16px 12px; padding:9px 12px;
  background: var(--accent-glow); border:1px solid var(--accent-glow);
  border-radius:8px; font-size:.68rem; color: var(--accent-light); line-height:1.5;
}