@layer components {
  /* The legal records: the 特商法 disclosure (/tokushoho) and the terms (/terms).
     Both are label/description documents rather than prose, so they read as a
     <dl>: two columns once there's room, stacked on narrow widths where a label
     column would strand the values beside it. */
  .legal__intro {
    color: var(--color-text-muted);
  }

  .legal__list {
    /* Japanese labels wrap anywhere and stay compact; Spanish and English ones
       are long words that need more room before they break badly. Each page
       sets the width its script needs. */
    --legal-label-width: 11em;

    margin: var(--space-xl, 2.5em) 0 0;
    display: grid;
    gap: var(--space-lg);
  }

  .legal--prose .legal__list {
    --legal-label-width: 14em;
  }

  /* The Label step from DESIGN.md typography: 400 against the page's default
     300, which is what separates the label from the provision it introduces —
     the system conveys hierarchy by size and space, never by heavy weight. */
  .legal__list dt {
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
  }

  .legal__list dd {
    margin: var(--space-sm) 0 0;
  }

  .legal__list dd p {
    margin: 0;
  }

  .legal__list dd ul {
    margin: 0;
    padding-inline-start: 1.25em;
    display: grid;
    gap: var(--space-md);
  }

  .legal__list dd p + ul {
    margin-top: var(--space-md);
  }

  @media (min-width: 34em) {
    .legal__list {
      grid-template-columns: var(--legal-label-width) 1fr;
      column-gap: var(--space-lg);
      align-items: baseline;
    }

    .legal__list dt {
      grid-column: 1;
    }

    .legal__list dd {
      grid-column: 2;
      margin: 0;
    }
  }
}