/* overlay.css */

/* ---- MODAL / TOAST / DRAWER ---- */
.modal-backdrop { background: var(--c-surface-soft); border-radius: var(--r-lg); padding: 60px 40px; display: flex; justify-content: center; align-items: center; min-height: 360px; }
.modal {
  width: 460px;
  background: var(--c-canvas);
  border-radius: var(--r-xl);
  box-shadow: var(--s-elevated);
  padding: 32px;
}
.modal-title { font-size: 20px; font-weight: 600; color: var(--c-ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.modal-body { font-size: 14px; color: var(--c-body); margin: 0 0 24px; line-height: 1.6; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; }

.toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--c-canvas); border-radius: var(--r-lg); box-shadow: var(--s-elevated); border: 1px solid var(--c-hairline); width: 380px; }
.toast-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; font-weight: 700; }
.toast-icon.s { background: var(--c-success-soft); color: var(--c-success); }
.toast-icon.w { background: var(--c-warning-soft); color: var(--c-warning); }
.toast-icon.d { background: var(--c-danger-soft); color: var(--c-danger); }
.toast-icon.i { background: var(--c-info-soft); color: var(--c-info); }
.toast-title { font-size: 14px; font-weight: 600; color: var(--c-ink); margin: 0 0 2px; }
.toast-msg { font-size: 13px; color: var(--c-body); margin: 0; }
.toast-close { margin-left: auto; color: var(--c-muted); cursor: pointer; font-size: 16px; line-height: 1; }

.drawer-frame { background: var(--c-surface-soft); border-radius: var(--r-lg); padding: 24px; display: flex; justify-content: flex-end; min-height: 380px; }
.drawer { width: 380px; background: var(--c-canvas); border-radius: var(--r-lg); box-shadow: var(--s-elevated); padding: 28px; align-self: stretch; }
.drawer-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.drawer-title { font-size: 18px; font-weight: 600; color: var(--c-ink); margin: 0 0 20px; }