/*
 * sd-inline-form — a lead form that opens inside the page (Session 4.1b; Blueprint 5.30: "the form should appear
 * within the same page experience")
 * Used below a CTA panel: the panel's primary action and other links to the panel's id open it.
 * Progressive enhancement: without JS the panel is visible and the actions are in-page links to it.
 * With JS (shared/components.js) the panel starts closed; opening shows it, moves focus to its heading
 * (tabindex="-1"), and it stays open. The opening fade is opacity/transform only; none with reduced motion.
 * Contents: sd-form (reference field set, Blueprint 5.30.1) and the success notice (sd-notice--panel).
 */

.sd-inline-form {
  margin-top: var(--sd-space-6);
  padding: var(--sd-space-6) var(--sd-space-5);
  border: var(--sd-border-width) solid var(--sd-color-border-subtle);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-surface);
}

@media (min-width: 1024px) {
  .sd-inline-form { padding: var(--sd-space-7); }
}

.sd-inline-form__head {
  display: grid;
  gap: var(--sd-space-2);
  max-width: 48rem;
  margin-bottom: var(--sd-space-6);
}

@media (prefers-reduced-motion: no-preference) {
  .sd-inline-form[data-state="opening"] { opacity: 0; transform: translateY(0.5rem); }
  .sd-inline-form[data-state="open"] {
    opacity: 1;
    transform: none;
    transition: opacity var(--sd-duration-calm) var(--sd-ease-out), transform var(--sd-duration-calm) var(--sd-ease-out);
  }
}