/* Shared modal geometry and interaction surface. */
dialog,
.ops-sheet,
.sheet {
  box-sizing: border-box;
  max-inline-size: min(560px, calc(100vw - 24px));
  max-block-size: min(90dvh, calc(100svh - 24px));
  overflow: auto;
}

.shared-confirm-dialog {
  inline-size: min(420px, calc(100vw - 32px));
  padding: 24px;
}
.shared-confirm-dialog form { display: grid; gap: 16px; margin: 0; }
.shared-confirm-dialog p { margin: 0; }
.shared-confirm-error { min-block-size: 1.4em; color: #9b1c1c; }
.shared-confirm-actions { display: flex; gap: 10px; }
.shared-confirm-actions button { flex: 1 1 0; min-block-size: 48px; }
@media (max-width: 767px) {
  .shared-confirm-dialog {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  }
}

dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 16px;
  padding: 20px;
}

dialog::backdrop,
.ops-sheet-backdrop,
.sheet-backdrop {
  background: rgb(0 0 0 / 0.56);
}

dialog:not([open]) { display: none; }

.ops-sheet,
.sheet {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) !important;
  inline-size: min(560px, calc(100vw - 24px));
  max-block-size: min(90dvh, calc(100svh - 24px));
  overflow: auto;
  border-radius: 16px;
}

@media (max-width: 700px) {
  dialog,
  .ops-sheet,
  .sheet {
    max-inline-size: calc(100vw - 24px);
    max-block-size: min(90dvh, calc(100svh - 24px));
    padding-block-end: max(16px, env(safe-area-inset-bottom));
  }
}

@supports not (height: 1dvh) {
  dialog,
  .ops-sheet,
  .sheet { max-block-size: calc(100vh - 24px); }
}

/* Touch layouts use a native-style bottom sheet. Desktop keeps the centered
   dialog rules above. */
@media (max-width: 767px) {
  dialog,
  .ops-sheet,
  body.admin-body .sheet {
    inset: auto 0 0 !important;
    inset-inline: 0 !important;
    inset-block-start: auto !important;
    inset-block-end: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    max-block-size: min(92dvh, 100dvh) !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(104%) !important;
    transition: transform 220ms ease, visibility 220ms ease !important;
  }
  dialog[open],
  .ops-sheet.is-open,
  body.admin-body .sheet.is-open { transform: translateY(0) !important; }
}

/* Component styles may provide a bottom sheet animation. The shared modal
   contract keeps every overlay centered ON DESKTOP; touch widths (≤767px)
   keep the native-style bottom sheet above — the centered geometry below
   used to fight it with !important and broke the mobile sheet's width. */
dialog.captain-cancel-dialog,
dialog.ops-confirm-dialog,
dialog.admin-confirm-dialog,
dialog.captain-edit-dialog {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  inline-size: min(560px, calc(100vw - 24px)) !important;
  max-inline-size: calc(100vw - 24px) !important;
  max-block-size: min(90dvh, calc(100svh - 24px)) !important;
  overflow: auto !important;
}
@media (min-width: 768px) {
  .ops-sheet,
  .sheet {
    inset: 50% auto auto 50% !important;
    inset-inline: auto !important;
    inset-block-end: auto !important;
    transform: translate(-50%, -50%) !important;
    max-block-size: min(90dvh, calc(100svh - 24px)) !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ops-sheet,
  .sheet { inline-size: min(640px, calc(100vw - 24px)) !important; }
}
@media (min-width: 1024px) {
  .ops-sheet { inline-size: min(640px, calc(100vw - 64px)) !important; }
  .sheet { inline-size: min(1000px, calc(100vw - 64px)) !important; }
}