/* =============================================================================
   modal.css — generic modal overlay
   Backdrop used by all modal components (bottom sheets, dialogs, etc.).
   Consumed alongside a component-specific CSS file (e.g. scale-sheet.css).

   Component ownership:
     .modal-overlay  — full-viewport semi-transparent backdrop
                       transitions: opacity 200ms ease
                       .is-open activates visibility + pointer events
   ============================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;                       /* above fixed header (z: 100) */
  background: rgba(0, 0, 0, 0.6);

  /* Hidden by default — no pointer events so taps pass through */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}