@layer components {
  /* ——— Accordions ———
     Every fold in the app is a <details> (user, 2026-10-12 — "all of our
     accordions should be css only"): the platform holds the open state,
     answers the keyboard and survives no-JS, so no controller does. This
     owns only what every fold shares — the summary is the whole control,
     without the UA's triangle. What a summary looks like is its family's:
     a board column's head, a help recipe's quiet button, the done fold's
     row, a subtask's title. A plain mail's quoted history is a fold the
     helper draws bare (EmailsHelper#email_body), listed here as labels.css
     lists foreign selectors. */
  .accordion > summary,
  .mail__text summary {
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  /* Words that read the fold's state — "2 completed" shut, "Hide completed"
     open — and a chevron that turns with it, flipped as the nav's is. */
  .accordion[open] .accordion__closed,
  .accordion:not([open]) .accordion__open {
    display: none;
  }

  .accordion[open] > summary .icon--chevron-down {
    scale: 1 -1;
  }

  /* The chevron of a fold's words (shared/_accordion_summary) sits on their
     first line, as a to-do's circle does, however many lines they wrap to. */
  .accordion__summary > .icon {
    margin-block-start: calc((1lh - var(--icon-size, 1em)) / 2);
  }
}