/* Generic overlay / modal system — reusable across pages.
   Trigger: any element with [data-modal-open="OVERLAY_ID"].
   Close: [data-modal-close], a backdrop click, or the Escape key.
   Behaviour lives in js/modal.js. */

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--ink-veil);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms ease-out, visibility 200ms ease-out;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
body.modal-open { overflow: hidden; }

.modal {
  width: min(440px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: 0 26px 64px var(--ink-shadow-strong);
  transform: translateY(12px) scale(0.98);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.open .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 14px; }
.modal-head h3 { font-size: 1.3rem; }
.modal-close { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; transition: border-color 200ms ease-out; }
.modal-close:hover { border-color: var(--orange); }
.modal-body { padding: 4px 24px 24px; }
.modal-sub { color: var(--text-muted); font-size: 0.92rem; margin: -4px 0 16px; }

/* option rows — e.g. calendar providers */
.modal-option { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--r-media); color: var(--ink); font: 600 0.98rem 'Space Grotesk', sans-serif; letter-spacing: -0.01em; margin-top: 10px; transition: border-color 200ms ease-out, background 200ms ease-out; }
.modal-option:first-child { margin-top: 0; }
.modal-option:hover { border-color: var(--orange); background: var(--cream); }
.modal-option svg { width: 20px; height: 20px; flex: none; }
.modal-option .arrow { margin-left: auto; color: var(--text-muted); transition: transform 200ms ease-out; }
.modal-option:hover .arrow { transform: translateX(4px); }

/* external/partner event click-out warning: the destination host, shown prominently */
.external-event-host { margin: 0 0 4px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--border); border-radius: var(--r-media); font: 600 0.95rem 'Space Grotesk', sans-serif; color: var(--ink); word-break: break-all; }