/* First-four opt-in form/dialog contract; native business constraints stay local. */
body[data-flowstack-forms] dialog.fs-action-dialog,
body[data-flowstack-forms] [data-fs-dialog] {
  box-sizing: border-box; width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; padding: 1.5rem;
  border: 1px solid #aabdc1; border-radius: 12px; background: #fff; color: #142a30;
  box-shadow: 0 12px 32px rgb(10 30 35 / 18%); font: 1rem/1.5 system-ui, sans-serif;
}
body[data-flowstack-forms] [data-fs-dialog="wide"] { width: min(45rem, calc(100vw - 2rem)); padding: 0; }
body[data-flowstack-forms] dialog.fs-action-dialog::backdrop { background: rgb(10 30 35 / 55%); }
body[data-flowstack-forms] dialog.fs-action-dialog form {
  display: block; margin: 0; padding: 0; max-width: none; border: 0;
  border-radius: 0; background: transparent; box-shadow: none; color: #142a30;
}
body[data-flowstack-forms] dialog.fs-action-dialog h2 { margin: 0 0 .75rem; font: 700 1.25rem/1.3 system-ui, sans-serif; color: #142a30; }
body[data-flowstack-forms] dialog.fs-action-dialog p { margin: 0 0 1rem; font: inherit; color: #142a30; white-space: pre-wrap; overflow-wrap: anywhere; }
body[data-flowstack-forms] dialog.fs-action-dialog label { display: block; margin: 1rem 0 .4rem; font: 600 1rem/1.5 system-ui, sans-serif; color: #142a30; }
body[data-flowstack-forms] dialog.fs-action-dialog :is(input, select, textarea) {
  box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: .65rem;
  font: 1rem/1.5 system-ui, sans-serif; border: 1px solid #aabdc1; border-radius: 6px; background: #fff; color: #142a30;
}
body[data-flowstack-forms] .fs-action-buttons { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
body[data-flowstack-forms] .fs-action-buttons button {
  width: auto; min-height: 44px; margin: 0; padding: .55rem 1rem;
  font: 600 1rem/1.5 system-ui, sans-serif; cursor: pointer;
  border: 1px solid #587078; border-radius: 6px; background: #fff; color: #142a30;
}
body[data-flowstack-forms] .fs-action-buttons button[type="submit"] { background: #123b42; color: #fff; }
body[data-flowstack-forms] .fs-action-buttons button:disabled { opacity: .6; cursor: wait; }
body[data-flowstack-forms] :is(.fs-action-dialog, [data-fs-dialog]) :focus-visible { outline: 3px solid #187e83; outline-offset: 3px; }
body[data-flowstack-forms] .fs-form-validation { margin: 0 0 1rem; padding: 1rem; border: 1px solid #b83e42; border-left: 4px solid #b83e42; border-radius: 8px; background: #fff5f5; color: #70272a; font: 1rem/1.5 system-ui, sans-serif; }
body[data-flowstack-forms] .fs-form-validation p { margin: 0 0 .5rem; font: inherit; font-weight: 600; }
body[data-flowstack-forms] .fs-form-validation ul { margin: 0; padding-left: 1.5rem; }
body[data-flowstack-forms] .fs-form-validation button { display: inline; width: auto; min-height: 44px; padding: .3rem 0; border: 0; border-radius: 0; background: transparent; color: #70272a; text-align: left; text-decoration: underline; font: inherit; overflow-wrap: anywhere; box-shadow: none; }
body[data-flowstack-forms] [data-fs-form-invalid] { border-color: #b83e42; outline-color: #b83e42; }
body[data-flowstack-forms] [hidden].fs-form-validation,
body[data-flowstack-forms] .fs-action-buttons [hidden] { display: none; }
@media (max-width: 480px) { body[data-flowstack-forms] .fs-action-buttons button { flex: 1 1 8rem; } }