/* ════════════════════════════════════════════════════════════════════════
   DS Drawer primitive (DS sub-step 2 — primitive 8)
   New namespace: .ds-drawer + .ds-drawer-overlay. Consolidates 2 existing
   drawer implementations (.lc-drawer in base.html, .settings-panel in
   social/index) — each migrates template-by-template in the combined
   migration sub-phase. Consumes tokens.css. Pairs with ds-drawer.js
   (dsDrawer.open/close/setBusy controller, mirrors dsModal API).

   Variants:
     side:      .ds-drawer--right (default) · .ds-drawer--left
     size:      .ds-drawer--sm (320) · md (420 default) · .ds-drawer--lg (560)

   Backdrop policy (via data-backdrop attribute on overlay — same vocabulary
   as Modal):
     "dismiss"  — Esc + overlay click both close
     "guarded"  — Esc/overlay only close when not busy (default for async)
     "static"   — never close via Esc/overlay (explicit [data-ds-close] only)

   Mobile: full-width drop at <=600px (matches existing settings-panel
   pattern). Reduced-motion: tokens.css global rule disables transitions.
   ════════════════════════════════════════════════════════════════════════ */

.ds-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--cf-scrim);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}
.ds-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.ds-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 420px;                          /* md default */
  max-width: 95vw;
  z-index: calc(var(--z-drawer) + 1);
  background: var(--card);
  box-shadow: -4px 0 32px rgba(31,31,31,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Closed drawers must leave the tab order + accessibility tree (mirrors the
     ds-modal visibility:hidden pattern). The visibility flip is DELAYED on
     close so the slide-out animation stays visible, and instant on open. */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease),
              visibility 0s linear var(--dur-slow);
}
.ds-drawer.open {
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease),
              visibility 0s;
}

/* ── Sides ──────────────────────────────────────────────── */
.ds-drawer--right {
  right: 0;
  transform: translateX(110%);
}
.ds-drawer--right.open { transform: translateX(0); }

.ds-drawer--left {
  left: 0;
  box-shadow: 4px 0 32px rgba(31,31,31,.18);  /* shadow flips */
  transform: translateX(-110%);
}
.ds-drawer--left.open { transform: translateX(0); }

/* ── Sizes ──────────────────────────────────────────────── */
.ds-drawer--sm { width: 320px; }
.ds-drawer--md { width: 420px; }    /* default */
.ds-drawer--lg { width: 560px; }

/* ── Structure (header / body / footer) ────────────────── */
.ds-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  /* Reserve the iOS status-bar strip: the drawer is position:fixed;top:0, so in a standalone PWA
     its header would paint under the clock (K's "Lead details" screenshot). env()=0 off-device. */
  padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ds-drawer-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.ds-drawer-close {
  width: 44px;                          /* 44×44 tap target (was 28×28) */
  height: 44px;
  margin: -8px -8px -8px 0;             /* negative margin preserves visual alignment (matches .ds-modal-close pattern) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ds-drawer-close:hover { background: var(--gray-100); color: var(--text); }
.ds-drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ds-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;          /* no rubber-band bleed to the locked page (iOS) */
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5);
}
/* Footerless drawers (e.g. Lead details): the body is the bottom element, so keep its last content
   clear of the iOS home indicator. env()=0 off-device. */
.ds-drawer-body:last-child { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }

.ds-drawer-footer {
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── Mobile: full-width drawer ──────────────────────────── */
@media (max-width: 600px) {
  .ds-drawer { width: 100%; max-width: 100%; }
}