@layer styles {
  /*
   * Förfrågningsformuläret, plus the site's only button style.
   *
   * Ported from bjorkbackskyrkan.se, which carries three rules worth keeping
   * for reasons that are not visible from the markup — each is commented
   * where it sits.
   */
  .enquiry__title {
    margin-bottom: var(--space--small);
  }

  .enquiry__intro {
    margin-bottom: var(--space);
    white-space: pre-line;
  }

  .form__intro {
    margin-bottom: var(--space);
    font-size: var(--font-size--small);
    opacity: var(--muted-opacity);
  }

  /* The inputs are drawn as an underline rather than a box, so a field has no
     bottom edge of its own to separate it from the next one. */
  .form__field {
    margin-bottom: var(--space);
  }

  .form__label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
  }

  /* Between label and input, referenced by aria-describedby — never inside the
     label, where a screen reader would read it as part of the field's name. */
  .form__hint {
    margin-bottom: 0.35rem;
    font-size: var(--font-size--small);
    line-height: 1.45;
    opacity: var(--muted-opacity);
  }

  .form__required {
    color: var(--color-wine);
  }

  .form__input {
    /* Controls do not inherit the page font. Without this a textarea renders
       monospace and the inputs render in the browser's default sans. */
    font: inherit;
    display: block;
    width: 100%;
    padding: 0.5rem 0.1rem;
    border: 0;
    border-bottom: 2px solid var(--color-rule-strong);
    border-radius: 0;
    background: transparent;
    color: inherit;
  }

  .form__input:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
  }

  .form__input--short {
    max-width: 12rem;
  }

  /* Worked out for you, not typed in. Drawn without the underline so it does
     not invite an edit that would be thrown away on the next keystroke. */
  .form__input--readonly {
    border-bottom-color: transparent;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  textarea.form__input {
    border: 2px solid var(--color-rule-strong);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    resize: vertical;
  }

  .form__option {
    display: flex;
    align-items: start;
    gap: 0.6rem;
    line-height: 1.45;
  }

  /* A checkbox is centred on its own box, which leaves it sitting above the
     first line of the text it belongs to. */
  .form__option input {
    margin-top: 0.15rem;
    flex-shrink: 0;
  }

  .form__cake {
    margin-bottom: var(--space);
    padding: var(--space--small);
    border-left: 3px solid var(--color-sand);
  }

  .form__cake-text {
    font-variant-numeric: tabular-nums;
  }

  .form__cake-clear {
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--font-size--small);
    text-decoration: underline;
    cursor: pointer;
  }

  .form__cake-clear:hover {
    color: var(--color-wine);
  }

  .form__status {
    margin: var(--space) 0;
    line-height: 1.5;
  }

  /*
   * Buttons. The site had none before this form, so this is the whole set.
   */
  .button {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-wine);
    color: var(--color-surface);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .button:hover {
    background: var(--color-wine-deep);
  }

  /* For an action that is not the point of the page, like asking a feed for
     more of itself. */
  .button--quiet {
    border: 1px solid var(--color-wine);
    background: transparent;
    color: var(--color-wine);
  }

  .button--quiet:hover {
    background: var(--color-sand-tint);
  }

  .button:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
  }

  /* Dimmed while something is still missing, but never disabled: a disabled
     button cannot be focused and announces nothing, so there would be no way
     to find out what is wrong. Left clickable, it runs the browser's own
     validation, which names the first field that still needs an answer. */
  .form__submit--incomplete {
    opacity: 0.45;
  }

  .form__again {
    margin-top: var(--space--small);
  }
}