@layer components {
  /* A fold

     Something that is either there or not, and travels between the two. What
     it opens to is whatever is inside it — a height nobody has measured and
     nobody should have to — which is why this is a grid going 0fr to 1fr and
     not a height going 0 to a number. That ratio is the one thing a browser
     will interpolate without being told the answer first.

     Three things it has to get right besides the height.

     The child needs min-height: 0, because a grid item refuses by default to
     be shorter than its own content and the fold would close onto nothing.

     Closed has to mean closed to everybody. `hidden` and display: none do that
     and cannot be transitioned, which is exactly why the panel this replaced
     snapped; visibility can be, and still takes the contents out of the tab
     order and off a screen reader. It interpolates as a step held to the end
     of the transition, so the fold is still visible while it is collapsing and
     gone the moment it has.

     And the padding and the rule go with it. A child with a border-top sitting
     in a collapsed fold still draws that border — borders are not clipped by
     the overflow of the box they belong to — so what is left of a closed fold
     is a stray hairline where a panel used to be.

     Opening takes the arrival clock: somebody asked for this and it is worth
     the 220ms that says so. Closing takes the exit clock, because they have
     finished with it. */

  .fold {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--transition-enter),
                opacity var(--transition-enter),
                visibility var(--transition-enter);
  }

  .fold > * {
    min-height: 0;
    overflow: hidden;
    transition: padding-block var(--transition-enter),
                border-color var(--transition-enter);
  }

  .fold--closed {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--transition-exit),
                opacity var(--transition-exit),
                visibility var(--transition-exit);
  }

  .fold--closed > * {
    padding-block: 0;
    border-color: transparent;
    transition: padding-block var(--transition-exit),
                border-color var(--transition-exit);
  }
}