@layer styles {
  /*
   * The site's only disclosure, and what it hides is the page's primary
   * action. The summary therefore carries .button and is set apart from the
   * copy above it, rather than reading as another row of text: people arrive
   * at this section from the hero's "Skapa förfrågan" and have to be able to
   * see what to click next.
   */
  .accordion {
    display: grid;
    margin-top: var(--space--medium);
  }

  /* Only the summary shrink-wraps and centres. The details stay stretched —
     the form needs the full measure. */
  .accordion__summary {
    justify-self: center;
    /* .button is inline-block, which would not line the label up with the
       +/-. The transparent border holds the box the same size as the open
       state's outlined one, so the button does not grow when it is opened. */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid transparent;
    cursor: pointer;
    list-style: none;
  }

  .accordion__summary::marker,
  .accordion__summary::-webkit-details-marker {
    display: none;
  }

  /*
   * Open, it has done its job. Left solid, it would be the loudest thing on
   * screen while the form's own submit — the button that actually sends
   * anything — sits in the same colour at the far end of the fields.
   */
  .accordion[open] .accordion__summary {
    border-color: var(--color-wine);
    background: transparent;
    color: var(--color-wine);
  }

  .accordion[open] .accordion__summary:hover {
    background: var(--color-sand-tint);
  }

  .accordion__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1rem;
    font-size: 1.5rem;
    line-height: 1;
  }

  .accordion__icon::after {
    content: '+';
  }

  .accordion[open] .accordion__icon::after {
    content: '\2212';
  }

  .accordion__details {
    padding-block: var(--space);
  }
}