/*
 * /styleguide's own arrangement: the sections, the token swatches, the type
 * scale table, and the frames the first-screen compositions are drawn in.
 * Everything it demonstrates is styled by components/, not here.
 */
@layer pages {
  /* One column that never grows past the viewport: a wide child (the laptop
     composition, a table) scrolls inside its own box instead. */
  .styleguide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4xl);
    max-inline-size: 75rem;
    padding-block-end: var(--space-4xl);
  }

  .styleguide__intro {
    max-inline-size: var(--measure);
    color: var(--color-ink-soft);
    font-size: var(--text-lead);
    line-height: var(--leading-lead);

    & code {
      font-size: 0.9em;
    }
  }

  .styleguide__section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    scroll-margin-block-start: calc(var(--navbar-height) + var(--space-md));
  }

  .styleguide__note {
    max-inline-size: var(--measure);
    color: var(--color-ink-muted);
    font-size: var(--text-ui);
    line-height: 1.55;
  }

  .styleguide__label {
    color: var(--color-ink-muted);
    font-size: var(--text-table-head);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .styleguide__specimens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-lg);
    align-items: start;
  }

  .styleguide__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
  }

  /* A dark ground to show the inverse variants on. */
  .styleguide__inverse {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background-color: var(--color-accent-strong);
  }

  /* Colour tokens. */
  .swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-sm);
  }

  .swatch {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--space-2xs) var(--space-sm);
    align-items: center;
    font-size: var(--text-meta);
    line-height: var(--leading-meta);
  }

  .swatch__chip {
    grid-row: span 3;
    block-size: 2.75rem;
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    background-color: var(--swatch);
  }

  .swatch__name {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
  }

  .swatch__value,
  .swatch__note {
    color: var(--color-ink-muted);
  }

  /* The type scale. */
  .type-scale td {
    vertical-align: baseline;
    white-space: normal;
  }

  .type-scale__sample {
    font-size: var(--size);
    line-height: var(--leading);
    text-align: start;
  }

  .type-scale__sample--prose {
    font-family: var(--font-prose);
  }

  .type-scale__sample--heading {
    font-family: var(--font-prose);
    font-weight: var(--weight-semibold);
  }

  .type-scale__sample--caps {
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .type-family {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  .type-family--prose {
    font-family: var(--font-prose);
  }

  .type-family--ui {
    font-family: var(--font-ui);
  }

  /* The first-screen compositions: a phone and a laptop viewport side by
     side, each an iframe so it gets its own media queries. The laptop is
     drawn at 1280px and scaled to fit. */
  .compositions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xl);
    overflow-x: auto;
  }

  .composition {
    display: grid;
    gap: var(--space-xs);
  }

  .composition__viewport {
    overflow: hidden;
    inline-size: calc(var(--width) * var(--scale, 1));
    block-size: calc(var(--height) * var(--scale, 1));
    border: var(--rule-width) solid var(--color-rule-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .composition__frame {
    display: block;
    inline-size: var(--width);
    block-size: var(--height);
    border: 0;
    transform: scale(var(--scale, 1));
    transform-origin: 0 0;
  }
}