/* Modal visual contract: single owner of surface, header and close appearance. */
:root {
  --fp-modal-surface: linear-gradient(145deg, var(--fp-color-surface), var(--fp-color-blue-soft));
  --fp-modal-header: linear-gradient(115deg, var(--fp-color-surface-soft), var(--fp-color-surface) 55%, var(--fp-color-blue-soft));
  --fp-modal-border: var(--fp-color-border);
  --fp-modal-radius: var(--fp-radius-xl);
  --fp-modal-shadow: var(--fp-shadow-lg);
  --fp-modal-action: var(--fp-color-blue);
}
.fp-modal-ui__surface {
  --fp-color-primary: var(--fp-color-blue);
  --fp-color-primary-600: color-mix(in srgb, var(--fp-color-blue) 85%, black);
  background: var(--fp-modal-surface);
  color: var(--fp-color-text);
  border: 1px solid var(--fp-modal-border);
  border-radius: var(--fp-modal-radius);
  box-shadow: var(--fp-modal-shadow);
  font-family: var(--fp-font-sans);
  max-width: 100%;
}
.fp-modal-ui .fp-modal-ui__header {
  background: var(--fp-modal-header);
  color: var(--fp-color-heading);
  border-bottom: 1px solid var(--fp-modal-border);
  box-shadow: none;
  flex-shrink: 0;
}
.fp-modal-ui .fp-modal-ui__title { color: var(--fp-color-heading); font-family: var(--fp-font-sans); }
.fp-modal-ui .fp-modal-ui__header :where(p,small) { color: var(--fp-color-muted); }
.fp-modal-ui__footer { flex-shrink: 0; }
.fp-modal-ui .fp-modal-ui__close {
  background-color: var(--fp-color-surface);
  color: var(--fp-color-muted);
  border: 1px solid var(--fp-modal-border);
  border-radius: var(--fp-radius-md);
  box-shadow: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.fp-modal-ui .fp-modal-ui__close:hover { background-color: var(--fp-color-blue-soft); color: var(--fp-color-blue); }
.fp-modal-ui :where(input,select,textarea,button,a):focus-visible {
  outline: 2px solid var(--fp-modal-action);
  outline-offset: 2px;
}
/* New dialogs use this structure; migrated modules retain their proven scrolling layout. */
.fp-modal-ui__layout { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 32px); }
.fp-modal-ui__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--fp-space-5); }
.fp-modal-ui__layout > .fp-modal-ui__header,
.fp-modal-ui__layout > .fp-modal-ui__footer { padding: var(--fp-space-4) var(--fp-space-5); }
.fp-modal-ui__layout > .fp-modal-ui__footer { display:flex; justify-content:flex-end; gap:var(--fp-space-3); border-top:1px solid var(--fp-modal-border); }
.fp-modal-ui__primary { background:var(--fp-modal-action); color:var(--fp-color-surface); border:0; border-radius:var(--fp-radius-md); min-height:var(--fp-control-height); padding:var(--fp-space-2) var(--fp-space-5); }
.fp-modal-ui__secondary { background:var(--fp-color-surface); color:var(--fp-color-heading); border:1px solid var(--fp-modal-border); border-radius:var(--fp-radius-md); min-height:var(--fp-control-height); padding:var(--fp-space-2) var(--fp-space-5); }
[data-fp-modal-size="compact"] > .modal-dialog { max-width: min(520px, calc(100vw - 24px)); }
[data-fp-modal-size="form"] > .modal-dialog { max-width: min(800px, calc(100vw - 24px)); }
[data-fp-modal-size="wide"] > .modal-dialog { max-width: min(1180px, calc(100vw - 24px)); }
@media (max-width:767.98px) {
  .fp-modal-ui__layout { max-height:calc(100dvh - 24px); }
  .fp-modal-ui__body { padding:var(--fp-space-3); }
  .fp-modal-ui__layout > .fp-modal-ui__header,
  .fp-modal-ui__layout > .fp-modal-ui__footer { padding:var(--fp-space-3); }
}
@media (prefers-reduced-motion:reduce) { .fp-modal-ui__close { transition:none; } }