/* BaseDrawer — shared styles for all slide-in drawer panels.
   Extracted from SidePanel (Phase 38). Loaded globally via index.html. */

.bd-wrapper[aria-hidden="true"] { pointer-events: none; }
.bd-wrapper .bd-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 899; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.bd-wrapper[aria-hidden="false"] .bd-backdrop { opacity: 1; pointer-events: auto; }
.bd-wrapper .bd-drawer { position: fixed; right: 0; top: 0; height: 100vh; max-width: 100vw; transform: translateX(100%); transition: transform 200ms ease; background: var(--surface); border-left: 1px solid var(--border); z-index: 900; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.bd-wrapper[aria-hidden="false"] .bd-drawer { transform: translateX(0); }
.bd-wrapper .bd-close-btn { position: fixed; z-index: 901; top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; padding: 0; margin: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; line-height: 1; opacity: 0; transition: opacity 200ms; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.bd-wrapper[aria-hidden="false"] .bd-close-btn { opacity: 1; pointer-events: auto; }
.bd-wrapper .bd-close-btn:hover { color: var(--text); background: var(--surface-hover); }
@media (max-width: 560px) { .bd-wrapper .bd-close-btn { right: auto !important; left: 8px; } }

/* Header — sticky top bar for high-level actions (save, publish toggle, etc.) */
.bd-wrapper .bd-header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 1.5rem; margin: 0; background: var(--surface); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border); min-height: 48px; }
.bd-wrapper .bd-header:empty { display: none; }

/* Body — scrollable content area */
.bd-wrapper .bd-body { flex: 1; padding: 0; overflow-y: auto; }