/* =========================================================================
   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)); }
/* side: a sheet from the right edge (the site editor's business sections) — above the editor overlay */
.modal-shell.modal-side { left: auto; right: 0; top: 0; bottom: 0; transform: translate3d(100%, 0, 0); width: min(520px, 100vw); max-height: none; border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0; z-index: var(--z-sheet); transition: opacity 0.2s var(--ease), transform var(--motion-sheet-open) var(--ease-ios); }
.modal-shell.modal-side.show { transform: translate3d(0, 0, 0); }
.modal-shell.modal-side .modal-body { flex: 1; min-height: 0; }   /* the footer pins to the bottom of the sheet */
.modal-scrim.modal-scrim--side { z-index: var(--z-scrim); }
/* whatever opens after a side sheet (its section editors, a phone's bottom sheet) stacks above it, not under it */
.modal-shell.modal-side ~ .modal-scrim, .modal-shell.modal-side ~ .modal-shell { z-index: var(--z-sheet-high); }
/* a side sheet's head: the back link (the slide-in's Back) on the left, the title after it */
.modal-head--back { justify-content: flex-start; gap: var(--space-3); }
.modal-back { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 var(--space-2-5) 0 var(--space-1-5); margin-left: -6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.modal-back svg { width: 16px; height: 16px; position: relative; top: 1px; }
@media (hover: hover) and (pointer: fine) { .modal-back:hover { background: var(--gray-100); color: var(--text-strong); } }
.modal-back:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.modal-head--back .modal-title { margin-left: auto; font-size: var(--text-base); }
@media (prefers-reduced-motion: reduce) { .modal-shell.modal-side { transition: opacity 0.2s var(--ease); transform: none; } }
.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);
}
/* (full screen's grow / shrink jumps instead of animating) */
@media (prefers-reduced-motion: reduce) { .modal-shell.modal-note { transition: 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;
}
/* settled in full screen: follow the working area frame by frame (shared/lib/modalFullScreen) */
.modal-shell.modal-note.modal-note-full.modal-note-tracking { transition: opacity 0.2s var(--ease); }
.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 ---- */
/* plain-message body wrapper (modal.js confirm() + feature confirms) */
.confirm-body { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-muted); }
.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); }
.confirm-actions .spacer { flex: 1; }

/* ---- 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; }
  /* sheet header: X disc | centred title | tick disc (see modal.js sheetHead) */
  .modal-shell .modal-head--sheet {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-2);
  }
  .modal-shell .modal-head--sheet .modal-title { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .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); }
    .modal-shell.modal-sheet { transition: opacity var(--motion-overlay) var(--ease); transform: none; }
    .modal-scrim, .modal-scrim.modal-scrim-out { transition: none; }
  }
}

/* ---- 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: var(--z-modal);
  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: spin 0.6s linear infinite;
}
.close-bar { height: 6px; border-radius: var(--radius-full); background: var(--gray-150); overflow: hidden; }
.close-bar-fill {
  height: 100%; width: 0; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
  transition: width 1.5s cubic-bezier(.3, .7, .3, 1);
}

/* Native iOS shell (ios/Magnet/NativeNavigation.swift): the sheet chrome —
   slide, grabber, scrim, pull-down to dismiss — is UIKit's page sheet; the web
   modal just fills it, with no motion of its own. */
@media (max-width: 640px) {
  .modal-shell.modal-native,
  .modal-shell.modal-native.show {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100%; max-width: none;
    height: var(--native-sheet-h, 100%); max-height: none;   /* the sheet's visible height (posted by native) */
    margin: 0; border-radius: 0; box-shadow: none; transform: none; opacity: 1; transition: none;
  }
  .modal-shell.modal-native .modal-head { padding-top: var(--space-4); }
  /* nothing of the page may show through the sheet (sticky stat strips,
     toolbars…): native shows a still of it behind the sheet already */
  body.native-sheet-open #main { visibility: hidden; }
}