/* ═══════════════════════════════════════════════════════════════
   primitives.slide_over — AUTO-GENERATED by render-design-tokens.py
   DO NOT EDIT BY HAND
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom properties ── */
:root {
  --slide-over-width: 420px;       /* overridable per-consumer */
  --slide-over-duration: 240ms;
  --slide-over-easing: var(--motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
  --slide-over-z: 400;
  --slide-over-backdrop: rgba(0, 0, 0, 0.4);
}

/* ── Panel element — prefers <dialog>; .slide-over-panel class = polyfill target ── */
dialog.slide-over,
.slide-over-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--slide-over-width);
  max-width: 100vw;
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border: none;
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-3, 0 4px 16px rgba(0,0,0,0.12));
  z-index: var(--slide-over-z);
  padding: var(--space-6);
  /* enter state */
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform var(--slide-over-duration) var(--slide-over-easing),
    opacity   var(--slide-over-duration) var(--slide-over-easing);
}

/* open state — toggled by JS adding [open] attribute or .is-open class */
dialog.slide-over[open],
.slide-over-panel.is-open {
  transform: translateX(0);
  opacity: 1;
}

/* Backdrop via native ::backdrop (dialog) */
dialog.slide-over::backdrop {
  background: var(--slide-over-backdrop);
}

/* Polyfill backdrop (div.slide-over-backdrop, inserted by slide-over.js) */
.slide-over-backdrop {
  position: fixed;
  inset: 0;
  background: var(--slide-over-backdrop);
  z-index: calc(var(--slide-over-z) - 1);
  opacity: 0;
  transition: opacity var(--slide-over-duration) var(--slide-over-easing);
}
.slide-over-backdrop.is-visible { opacity: 1; }

/* ── prefers-reduced-motion — zero transition ── */
@media (prefers-reduced-motion: reduce) {
  dialog.slide-over,
  .slide-over-panel,
  .slide-over-backdrop {
    transition: none;
  }
}

/* ── Close button ── */
.slide-over-close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.slide-over-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}