/* Overlay modal system, shared by every modal on the site.

   These rules were duplicated almost verbatim in lost-found.css and
   still-waiting.css — including two separate @keyframes slideUp definitions,
   while index.html referenced the animation and loaded neither file. One copy
   now, with slideUp itself living in base.css beside the other shared
   keyframes, because keyframe names are global to a document.

   Behaviour is in src/components/modal.js. */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: 16px;
  width: 90%;
  max-width: 560px;
  /* dvh tracks the shrinking viewport as mobile browser chrome hides. The vh
     line stays as the fallback for anything that does not know dvh. */
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  /* Without this, scrolling past the end of a modal scrolls the page behind it. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  animation: slideUp .2s ease;
  border: 1px solid var(--light-gray);
}

.modal-header {
  padding: var(--card-pad) var(--card-pad) 24px;
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.modal-header-left { flex: 1; min-width: 0; }
.modal-title { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; }
.modal-subtitle { font-size: var(--step--1); color: var(--gray); font-family: var(--font-soft); margin-top: 6px; }

.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: none;
  cursor: pointer;
  font-size: var(--step-0);
  color: var(--gray);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}

.modal-body { padding: 28px var(--card-pad) var(--card-pad); }
.modal-footer {
  padding: 20px var(--card-pad);
  border-top: 1px solid var(--light-gray);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { background: var(--light-gray); }
}

@media (pointer: coarse), (max-width: 1023px) {
  .modal-close { width: var(--tap); height: var(--tap); }
}

/* ── PHONE: BOTTOM SHEET ──
   A 90%-wide centred card leaves ~265px of usable form width on a 375px phone,
   with dead backdrop down both sides and a form that has nowhere to go. Full
   width, anchored to the bottom edge where a thumb is. */
@media (max-width: 767px) {
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
  .modal-header { padding-bottom: 16px; }
  .modal-body { padding-top: 20px; }
  /* Buttons stack rather than sharing a row that cannot hold them: the submit
     label on lost-found is "Preview poster & submit to Mo-Hi". */
  .modal-footer { flex-direction: column; }
  .modal-footer > * { width: 100%; }
}