/* Chrome for the design guide itself. Nothing here is used by the app —
 * it exists so the guide can lay out swatches and specimens without
 * inventing styles that look like app styles. */
@layer components {
  .guide {
    margin-inline: auto;
    max-inline-size: 68rem;
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .guide__lede {
    color: var(--color-ink-medium);
    max-inline-size: 65ch;
  }

  .guide__section {
    border-block-start: var(--border);
    margin-block-start: var(--block-space-double);
    padding-block-start: var(--block-space-double);
  }

  .guide__section > h2 {
    font-size: var(--text-large);
    font-weight: 700;
    margin-block-end: var(--block-space-half);
  }

  .guide__note {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
    margin-block-end: var(--block-space);
    max-inline-size: 65ch;
  }

  /* A specimen sits on the canvas with a hairline so its own edges are legible */
  .guide__specimen {
    border-radius: 0.4em;
    border: var(--border);
    margin-block-end: var(--block-space);
    padding: var(--block-space) var(--inline-space-double);
  }

  .guide__grid {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }

  .guide__swatch {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .guide__chip {
    block-size: 3rem;
    border-radius: 0.3em;
    border: var(--border);
  }

  .guide__name {
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
  }

  .guide__value {
    color: var(--color-ink-medium);
    font-family: var(--font-mono);
    font-size: var(--text-xx-small);
  }

  /* Token tables: name, rendered example, value */
  .guide__table {
    inline-size: 100%;

    th, td {
      border-block-end: var(--border);
      padding-block: var(--block-space-half);
      padding-inline-end: var(--inline-space);
      text-align: start;
      vertical-align: baseline;
    }

    th {
      color: var(--color-ink-medium);
      font-size: var(--text-x-small);
      font-weight: 400;
      text-transform: uppercase;
    }

    code {
      font-family: var(--font-mono);
      font-size: var(--text-x-small);
    }
  }

  .guide__ruler {
    background-color: var(--color-link);
    block-size: 0.75rem;
    border-radius: 2px;
  }

  .guide__rules {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    max-inline-size: 65ch;

    li {
      list-style: disc;
      margin-inline-start: 1.1em;
    }

    strong {
      font-weight: 700;
    }

    code {
      font-family: var(--font-mono);
      font-size: 0.9em;
    }
  }

  .guide__files {
    columns: 3 14rem;
    font-family: var(--font-mono);
    font-size: var(--text-x-small);

    li {
      break-inside: avoid;
      color: var(--color-ink-medium);
    }
  }
}