/* =========================================================================
   Modal — shared shell + destructive confirmation dialog (scripts/modal.js).
   Tokens-driven; reused everywhere a modal or delete-confirm appears.
   ========================================================================= */

.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-popover);
  background: rgba(20, 20, 28, 0.42);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.modal-scrim.show { opacity: 1; }

.modal-shell {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(0.98);
  z-index: var(--z-popover);
  width: min(440px, calc(100vw - 32px));
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.modal-shell.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal-shell:focus { outline: none; }
.modal-shell.modal-md { width: min(560px, calc(100vw - 32px)); }
.modal-shell.modal-lg { width: min(720px, calc(100vw - 32px)); }
.modal-shell.modal-xl { width: min(920px, calc(100vw - 32px)); }
.modal-shell.modal-note {
  width: min(880px, calc(100vw - 48px));
  height: min(720px, calc(100vh - 64px));
  max-height: calc(100vh - 64px);
  transition: left 0.28s var(--ease), top 0.28s var(--ease),
              width 0.28s var(--ease), height 0.28s var(--ease),
              transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.modal-shell.modal-note .modal-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-shell.modal-note.modal-note-full {
  max-height: none;
  transform: none;
  border-radius: 0;
}
.modal-scrim.modal-scrim-out { opacity: 0; pointer-events: none; transition: opacity 0.26s var(--ease); }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.modal-close {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--text-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { background: var(--nav-hover-bg); color: var(--text-strong); }
}
.modal-close svg { width: 17px; height: 17px; }

.modal-body { overflow-y: auto; overflow-x: hidden; padding: var(--space-5); }
.modal-foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface);
}
.modal-foot[hidden] { display: none; }

/* ---- destructive confirmation dialog ---- */
.confirm-desc { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-muted); }
.confirm-item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--gray-50);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong);
  max-width: 100%;
}
.confirm-item svg { width: 15px; height: 15px; color: var(--danger-600); flex-shrink: 0; }
.confirm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-warning {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin-top: var(--space-3); padding: 10px 12px;
  border-radius: var(--radius-md); background: var(--danger-bg);
  font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--danger-600);
}
.confirm-warning svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.confirm-actions { display: flex; align-items: center; gap: var(--space-3); }

/* loading spinner on confirm */
.modal-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  display: inline-block; animation: modalspin 0.6s linear infinite;
}
@keyframes modalspin { to { transform: rotate(360deg); } }

/* ---- mobile: the note editor opens as a bottom sheet -------------------- */
@media (max-width: 640px) {
  /* generic opt-in sheet variant (Modal.open({ sheet: true })) — any small
     form modal renders as a bottom sheet on mobile, same dress as the rest:
     bottom-anchored, full width, top radius, slide-up, head-drag dismiss */
  .modal-shell.modal-sheet {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; max-width: 100%;
    max-height: min(90dvh, calc(100dvh - var(--safe-top) - 14px));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    transform: translate3d(0, 100%, 0);
    transition: transform var(--motion-sheet-open) var(--ease-enter), opacity var(--motion-overlay) var(--ease);
    padding-bottom: var(--safe-bottom);
  }
  .modal-shell.modal-sheet.show { transform: translate3d(0, 0, 0); }
  .modal-shell.modal-sheet .modal-head { touch-action: none; }

  .modal-shell.modal-note {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; max-width: 100%;
    /* stop short of the top so the iPhone notch keeps clearance (matches the
       other bottom sheets): at most 90dvh, never closer than safe-top + 14px. */
    height: min(90dvh, calc(100dvh - var(--safe-top) - 14px));
    max-height: min(90dvh, calc(100dvh - var(--safe-top) - 14px));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    transform: translate3d(0, 100%, 0);
    transition: transform var(--motion-sheet-open) var(--ease-enter), opacity var(--motion-overlay) var(--ease);
    /* the top chrome (grab handle + .ne-bar) drags to dismiss; only the editor
       body scrolls — touch-action lets the browser tell the gestures apart. */
    touch-action: none;
  }
  .modal-shell.modal-note.show { transform: translate3d(0, 0, 0); }
  .modal-shell.modal-note .ne-scroll { touch-action: pan-y; }
  /* grab handle */
  .modal-shell.modal-note::before {
    content: ""; flex-shrink: 0;
    width: 40px; height: 4px; margin: 8px auto 0;
    border-radius: var(--radius-full); background: var(--border-strong);
  }
  /* full-screen toggle → cover the whole viewport */
  .modal-shell.modal-note.modal-note-full {
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; transform: translateY(0);
  }
  .modal-shell.modal-note.modal-note-full::before { display: none; }
  /* clean sheet header: circular X (left) · centered title · blue Done (right);
     all the secondary controls are hidden on mobile. */
  .modal-note .ne-bar { position: relative; padding: 10px 12px; gap: 8px; }
  .modal-note .ne-bar-id,
  .modal-note [data-ne-copy],
  .modal-note [data-ne-full],
  .modal-note [data-ne-more] { display: none; }
  .modal-note .ne-bar-spacer { flex: 1; }
  .modal-note .ne-bar-title {
    display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); pointer-events: none;
  }
  .modal-note .ne-bar-close {
    order: -1; width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--surface-field); color: var(--text-strong);
  }
  .modal-note .ne-bar-close svg { width: 18px; height: 18px; }
  .modal-note .ne-bar-done {
    display: inline-flex; order: 9; width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--primary-600); color: var(--on-primary);
  }
  @media (hover: hover) and (pointer: fine) {
    .modal-note .ne-bar-done:hover { background: var(--primary-600); }
  }
  .modal-note .ne-bar-done svg { width: 19px; height: 19px; }
  /* hide the meta chips (Link a meeting / client) for a focused editor */
  .modal-note .ne-meta { display: none; }
  /* zoom the page (#main) back behind the sheet as it rises, like iOS */
  #main.note-zoom {
    transform: scale(0.93); transform-origin: top center;
    border-radius: var(--radius-xl); overflow: hidden;
  }
  /* canvas base + a uniform scrim over the whole frame: the page and the
     revealed theme-canvas edges dim together so the sheet's shadow reads
     consistently across the entire backdrop (never the old harsh black). */
  .app-frame:has(.modal-shell.modal-note) { background: var(--canvas); }
  @media (prefers-reduced-motion: reduce) {
    .modal-shell.modal-note { transition: opacity 0.2s var(--ease); transform: translateY(0); }
  }
}

/* ---- lead-closed success choreography ---- */
.modal-shell.show.modal-celebrate { transform: translate(-50%, -50%) scale(0.965); }
.confetti-piece {
  position: fixed; width: 8px; height: 11px; z-index: 90;
  pointer-events: none; will-change: transform, opacity;
}
.close-progress { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; }
.close-progress-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); color: var(--text); }
.close-spinner {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--gray-200); border-top-color: var(--primary-600);
  animation: modalspin 0.6s linear infinite;
}
.close-bar { height: 6px; border-radius: 999px; background: var(--gray-150, var(--gray-100)); overflow: hidden; }
.close-bar-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
  transition: width 1.5s cubic-bezier(.3, .7, .3, 1);
}