@layer styles {
  /* The container keeps the section's width and left edge, so the form lines
     up with the text around it; only what is inside is held to a measure. */
  .letter-form > *,
  .newsletter-form > * {
    max-width: 35rem;
  }

  /* A custom element is inline unless told otherwise, and max-width has no
     effect on an inline box. */
  bokbageriet-form {
    display: block;
  }

  .letter-form__intro,
  .newsletter-form__intro {
    margin-bottom: var(--space);
    line-height: 1.5;
  }

  .form__intro {
    margin-bottom: var(--space);
  }

  .form__field {
    margin-bottom: var(--space);
  }

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

  /* A text field is named by its placeholder. The label stays, hidden, because
     a placeholder alone is not a reliable accessible name and is gone once the
     field has an answer. */
  .form__field > label.form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space--small);
  }

  .form__row--postal {
    grid-template-columns: 9rem 1fr;
  }

  @media (max-width: 30rem) {
    .form__row,
    .form__row--postal {
      grid-template-columns: 1fr;
    }
  }

  .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;
    font-size: 1rem;
    display: block;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color--text);
    border-radius: var(--border-radius);
    background: transparent;
    color: inherit;
  }

  /* The browser's own placeholder grey is picked for a white field and can
     vanish against the page colours. */
  .form__input::placeholder {
    color: inherit;
    opacity: 0.6;
  }

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

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

  .form__choices {
    border: 0;
    padding: 0;
    margin-inline: 0;
  }

  .form__choices .form__option + .form__option {
    margin-top: 0.4rem;
  }

  /* 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.35rem;
    flex-shrink: 0;
    accent-color: var(--color--text);
  }

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

  /* 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);
  }

  .form__payment {
    margin: var(--space) 0;
  }

  .form__payment-heading {
    font-size: 1.5rem;
    margin-bottom: var(--space--small);
  }

  /* Focused by script after sending so the instructions are read next; it is
     not a control, and a ring around it looks like one. */
  .form__payment-heading:focus {
    outline: none;
  }

  .form__payment-instructions {
    line-height: 1.5;
    margin-bottom: var(--space--small);
  }

  .form__payment-app {
    margin-bottom: var(--space);
  }

  /* On a computer the link lands on Swish's download page rather than the app,
     and the QR code is the way to pay. */
  @media (hover: hover) and (pointer: fine) {
    .form__payment-app {
      display: none;
    }
  }

  /* The SVG carries its own white ground and quiet zone, which a scanner
     needs whatever the page colours are. */
  .form__payment-qr svg {
    display: block;
    width: min(16rem, 100%);
    height: auto;
  }
}