/* /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: var(--hairline) 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: var(--hairline) solid var(--color-line);
}

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

/* Controls side by side on one line, as a table row or a toolbar sets them. */
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* A strip of the ground, for what is drawn in the ground's inks. */
.sg-ground {
  padding: var(--space-2) var(--space-3);
  background: var(--color-ground);
}

/* A meta line under a specimen, as a row's counts sit under its chip. */
.sg-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-meta);
}

/* A price as a row sets it. */
.sg-price {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

/* Fold's specimens: framed as Items frames a group, so the head reads as it does on the page. */
.sg-fold {
  width: 100%;
  border: var(--hairline) solid var(--color-ink);
  border-left-width: var(--rule-heavy);
}

.sg-fold-body {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-meta);
}

.sg-seg {
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The customer's card as a row (offer-card.css): a list wide enough to be one, which asks about its
   container as the customer's page does, scrolling sideways where the page is narrower. */
.styleguide-offers-wide {
  container: offers / inline-size;
  inline-size: 60rem;
}

.specimen-subject:has(> .styleguide-offers-wide) {
  overflow-x: auto;
}