/* /styleguide only: the two-column rule that puts the name of a state beside the component in
   it. Nothing here styles a component — if a rule on this page ever has to, the component is
   missing a state and the fix belongs in ativv-ui. */
.specimen {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.specimen-state {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.specimen-subject {
  min-width: 0;
}

.specimen-subject > :last-child {
  margin-bottom: 0;
}

@media (max-width: 44rem) {
  .specimen {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

/* The customer's site is drawn for a phone and stops at a measure a sentence reads at
   (frame-adapt.css), and this page is not the customer's: it takes the wide measure HQ's pages
   have, so a state and its specimen can sit side by side. */
.frame-adapt:has(.styleguide) {
  max-width: var(--measure-wide);
}

/* A specimen at a phone's column width (the customer's frame, less its gutters), for the states a
   component has only when it is narrow. */
.specimen-narrow {
  max-width: 22rem;
}

/* A piece of ground to show what is drawn on it (the top line's mark), as the frame puts it. */
.specimen-ground {
  display: flex;
  align-items: center;
  min-height: var(--nav-height);
  padding: 0 var(--space-4);
  background: var(--color-ground);
}

/* A card's width in a grid of three on a wide page, for the rail and the card. */
.specimen-card {
  max-width: 19rem;
}

/* A stand-in for a picture: two garments drawn as hatched shapes, as the Spec's cards are. */
.specimen-picture {
  width: 3.25rem;
  height: 5.4rem;
  border: 1.5px solid var(--color-ink);
  border-radius: 6px 6px 10px 10px;
  background: repeating-linear-gradient(45deg, var(--color-ink) 0 1px, transparent 1px 5px);
}

/* The pieces together: a shell's worth of page, the tray at its foot. */
.specimen-together {
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-line);
}

.specimen-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}