/*
 * Styleguide — scaffolding for the design-system reference page at
 * /styleguide. Page-only chrome (header, sections, demo wells, swatch +
 * icon grids); every actual component shown is the real app class.
 */

@layer components {
  .styleguide {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-8) clamp(1rem, 3vw, 2.5rem) var(--space-12);
  }

  .styleguide__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-9);
  }

  .styleguide__lede {
    color: var(--color-text-body);
    margin: var(--space-1) 0 0;
  }

  .styleguide__section {
    margin-bottom: var(--space-12);
  }

  .styleguide__section-title {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-1);
  }

  .styleguide__section-note {
    color: var(--color-text-body);
    margin: 0 0 var(--space-5);
  }

  .styleguide__sub {
    font-size: var(--text-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-body);
    margin: var(--space-6) 0 var(--space-3);
  }

  /* Demo well — neutral frame around a set of live components. */
  .styleguide__demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
  }

  .styleguide__demo--column {
    flex-direction: column;
    align-items: stretch;
  }

  .styleguide__demo--quiet {
    background: var(--color-slate-50);
  }

  /* Color swatches — chip color is set inline with the token var (the
     one place inline style is right: a class per palette rung would be
     200 dead classes). */
  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--space-3);
  }

  .swatch {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .swatch__chip {
    height: 3rem;
  }

  .swatch__label {
    display: flex;
    flex-direction: column;
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-11);
  }

  .swatch__name {
    font-weight: 600;
    color: var(--color-text-heading);
  }

  .swatch__val {
    color: var(--color-text-body);
  }

  /* Icon gallery. */
  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--space-2);
  }

  .icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .icon-cell svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-heading);
  }

  .icon-cell__name {
    font-size: var(--text-11);
    color: var(--color-text-body);
    word-break: break-word;
  }

  /* Page-layout ratio demo — placeholder blocks so the columns read. */
  .ratio-demo {
    margin-bottom: var(--space-3);
  }

  .ratio-demo > * {
    background: var(--color-indigo-50);
    border: 1px dashed var(--color-indigo-300);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--color-indigo-700);
  }
}