@layer components {
  /* Plain answers to what someone worries about before they begin. It sits at the foot of the
     screen and opens upward over the empty space, so nothing on the screen moves. */
  .answers {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: var(--size-fill);
    max-inline-size: calc(var(--measure-tight) + 2 * var(--gutter-fluid));
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .answers__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-5);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font: var(--type-button);
    color: var(--color-ink-muted);
  }

  .answers__toggle::-webkit-details-marker {
    display: none;
  }

  .answers__toggle .icon {
    rotate: 180deg;
    transition: rotate var(--dur-fast) var(--ease-calm);
  }

  .answers[open] .answers__toggle .icon {
    rotate: 0deg;
  }

  .answers__box {
    position: absolute;
    inset-block-end: calc(var(--size-fill) + var(--space-3));
    inset-inline: var(--gutter-fluid);
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-block-size: calc(var(--viewport-block-size) - 2 * var(--space-13));
    margin: var(--space-0);
    padding: var(--space-7);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raised);
    box-shadow: var(--elev-3);
  }

  .answers__answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .answers__question {
    font: var(--type-heading);
    color: var(--color-ink);
  }

  .answers__text {
    margin: var(--space-0);
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }
}