@layer styles {
  /* Opt-in floral skin over Preflight/Simple Form. Global forms keep their defaults. */
  form.simple_form.ui-floral-form {
    --field-font-size: var(--floral-control-text);
    --field-label-size: var(--floral-control-text);
    --field-height: max(44px, var(--floral-control-height));
    --field-padding: var(--space-sm);
    --field-border: 1px solid var(--floral-line);
    --field-border-radius: var(--floral-control-radius);
    --field-bg: var(--floral-paper);
    --field-bg-disabled: var(--floral-disabled);
    --field-value-color: var(--floral-ink);
    --field-value-color-disabled: var(--floral-muted);
    --field-label-color: var(--floral-ink);
    --field-placeholder-color: var(--floral-muted);
    --field-focus-color: var(--floral-ink);
    max-width: min(100%, var(--max-w-form));
    min-width: 0;
    color: var(--floral-ink);
    font-family: var(--floral-sans);
  }

  /* Keep two fields side by side when there is room, but never below a readable
     width. The caller's flex-wrap then stacks them on phones without the preview
     sheet; no flex-grow is set because the form itself is a flex column. */
  form.simple_form.ui-floral-form div.input,
  form.simple_form.ui-floral-form .form-row > div.input {
    min-width: min(100%, 16rem);
  }

  form.simple_form.ui-floral-form label {
    max-width: 100%;
    color: var(--floral-ink);
    font-size: var(--floral-control-text);
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  form.simple_form.ui-floral-form :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: max(44px, var(--floral-control-height));
    height: auto;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--floral-line);
    border-radius: var(--floral-control-radius);
    background-color: var(--floral-paper);
    color: var(--floral-ink);
    font-family: var(--floral-sans);
    font-size: var(--floral-control-text);
    line-height: 1.4;
  }

  form.simple_form.ui-floral-form select {
    padding-right: calc(var(--space-sm) + 1.25rem);
  }

  form.simple_form.ui-floral-form textarea {
    min-height: 6rem;
    padding-block: var(--space-xs);
  }

  form.simple_form.ui-floral-form :is(input:not([type="checkbox"], [type="radio"]), textarea, select):focus-visible {
    outline: 2px solid var(--floral-ink);
    outline-offset: 2px;
    border-color: var(--floral-ink);
  }

  /* Only genuinely editable controls expose a readonly state. Selects and other
     non-editable controls must not look readonly just because they have no readonly attribute. */
  form.simple_form.ui-floral-form :is(input[readonly], textarea[readonly]):not(:disabled) {
    background-color: var(--floral-blush);
    cursor: default;
  }

  form.simple_form.ui-floral-form :is(input:not([type="checkbox"], [type="radio"]), textarea, select):disabled {
    background-color: var(--floral-disabled);
    color: var(--floral-muted);
    border-color: var(--floral-line);
    cursor: not-allowed;
  }

  form.simple_form.ui-floral-form label:has(input[type="checkbox"], input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: max(44px, var(--floral-control-height));
    padding-block: var(--space-2xs);
    font-size: var(--floral-control-text);
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  form.simple_form.ui-floral-form label:has(input[type="checkbox"], input[type="radio"]):has(input:disabled) {
    cursor: not-allowed;
    color: var(--floral-muted);
  }

  form.simple_form.ui-floral-form label:has(input:focus-visible) {
    outline: 2px solid var(--floral-ink);
    outline-offset: 2px;
  }

  form.simple_form.ui-floral-form fieldset {
    min-width: 0;
  }

  form.simple_form.ui-floral-form legend {
    max-width: 100%;
    font-size: var(--floral-control-text);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  form.simple_form.ui-floral-form :is(button, input[type="submit"], input[type="button"], input[type="reset"]) {
    min-height: max(44px, var(--floral-control-height));
    font-family: var(--floral-sans);
    font-size: var(--floral-control-text);
  }

  form.simple_form.ui-floral-form :is(button, input[type="submit"], input[type="button"], input[type="reset"]):focus-visible {
    outline: 2px solid var(--floral-ink);
    outline-offset: 2px;
  }

  /* Override forms.css' negative sample margins so hint and error never overlap
     the control or the following field. The extra element/class specificity is
     intentional: it wins over `form.simple_form div.input span.hint`. */
  form.simple_form.ui-floral-form div.input > span.hint,
  form.simple_form.ui-floral-form div.input > span.error {
    display: block;
    max-width: 100%;
    margin: var(--space-3xs) 0 0;
    font-size: var(--floral-control-text);
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  form.simple_form.ui-floral-form div.input > span.hint { color: var(--floral-muted); }
  form.simple_form.ui-floral-form div.input > span.error { color: var(--floral-danger); }

  form.simple_form.ui-floral-form div.input:has(span.error) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
    border-color: var(--floral-danger);
    color: var(--floral-danger);
  }

  form.simple_form.ui-floral-form div.input:has(span.error) :is(input:not([type="checkbox"], [type="radio"]), textarea, select):focus {
    outline-color: var(--floral-danger);
  }

  form.simple_form.ui-floral-form div.input:has(span.error) label {
    color: var(--floral-danger);
  }

  form.simple_form.ui-floral-form abbr[title="required"] {
    border: 0;
    color: var(--floral-danger);
    text-decoration: none;
  }

  /* Quantity + unit: the unit sits beside the input, never beside the label.
     Simple Form's wrapper participates through display: contents so the unit and
     the control can share the same grid row while label/hint/error span both. */
  form.simple_form.ui-floral-form .ui-floral-quantity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-xs);
    min-width: 0;
    max-width: 100%;
  }

  form.simple_form.ui-floral-form .ui-floral-quantity > div.input {
    display: contents;
  }

  form.simple_form.ui-floral-form .ui-floral-quantity > div.input > label,
  form.simple_form.ui-floral-form .ui-floral-quantity > div.input > span.hint,
  form.simple_form.ui-floral-form .ui-floral-quantity > div.input > span.error {
    grid-column: 1 / -1;
  }

  form.simple_form.ui-floral-form .ui-floral-quantity > div.input > :is(input, select, textarea) {
    grid-column: 1;
  }

  form.simple_form.ui-floral-form .ui-floral-quantity__unit {
    display: inline-flex;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    align-items: center;
    min-height: max(44px, var(--floral-control-height));
    color: var(--floral-muted);
    font-size: var(--floral-control-text);
    line-height: 1.4;
  }

  @media (max-width: 30rem) {
    form.simple_form.ui-floral-form .ui-floral-quantity {
      grid-template-columns: minmax(0, 1fr);
    }

    form.simple_form.ui-floral-form .ui-floral-quantity__unit {
      grid-column: 1;
      grid-row: auto;
      min-height: 0;
    }
  }
}