/* Specimen chrome — for the cards only.

   The annotation layer the specimen cards are drawn with: captions, swatch
   grids, the small notes under an example. Deliberately NOT imported by
   styles.css, because a design built with this system must not inherit it — a
   rendered design gets the token and component layers only.

   One definition each, under one prefix, so nothing here collides with
   `sds-` or means one thing on a card and another in the system. */

html, body { margin: 0; }

body {
  font-family: var(--font-sans);
  background: var(--surface-canvas);
  color: var(--text-primary);
}

/* A specimen that shows a finished artefact — a diagram, an exported image —
   puts it on the sunken plane so the artefact's own canvas reads as a figure
   with clear space around it, instead of dissolving into the card. Without
   this a diagram drawn at --surface-canvas sits on exactly its own colour
   and loses every boundary. */
.spec-sunken { background: var(--surface-sunken); }

/* The standard card scaffold: the padded, stacked column every specimen
   lays its examples out in. --spec-gap tunes the stack per card. */
.spec {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--spec-gap, 16px);
}

/* Every stack here states its own step, so what it holds gives up the one the
   element layer gives it — the same trade `components.css` makes, restated
   because these classes are outside that closure. A component's own block sits
   under a `display: contents` host, which is the second selector. */
:is(.spec, .spec-col, .spec-row, .spec-box, .spec-pane, .spec-sw) > *,
:is(.spec, .spec-col, .spec-row, .spec-box, .spec-pane, .spec-sw)
  > * > [class*="sds-"] {
  margin-block: 0;
}
/* And the last block of any box a specimen builds by hand, however deep it
   wrapped it: a step under the last one is air at the bottom of a card, which
   is the one place nothing follows. */
:is(.spec, .spec-col, .spec-row, .spec-box, .spec-pane, .spec-sw) [class*="sds-"]:last-child {
  margin-block-end: 0;
}

/* Just the card's padding, no layout opinion — for specimens that lay
   themselves out (a grid of type samples, a row of state chips). */
.spec-pad { padding: 20px 22px; }

.spec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* The uppercase mono caption that names what an example is showing.
   This is annotation, never product text. */
.spec-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Paints a hover state for a card. A specimen cannot be pointed at, so a state
   that exists only under the pointer is drawn here, in the annotation layer,
   rather than by giving the component a property no product would use.
   Mirrors `.sds-link:hover`; if that changes, this has to follow. */
.spec-hover .sds-link { color: var(--text-link-hover); text-decoration: underline; }

/* Prose under an example. */
.spec-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.spec-note b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* A rule being stated, slightly larger than a note. */
.spec-rule {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.spec-rule b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* A section heading inside a specimen. */
.spec-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The tracked-out label used over a group of swatches or samples. */
.spec-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A thing you must not do. */
.spec-no {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--status-error);
}

/* Swatch grid: a row of columns, each a colour chip over its name and
   value. */
.spec-pane {
  padding: 14px 20px;
  display: flex;
  gap: 12px;
  background: var(--surface-canvas);
  align-items: flex-start;
}
.spec-sw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.spec-chip { height: 40px; }
.spec-chip--sm { height: 34px; }
.spec-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
}
.spec-hex {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* A bordered box holding one worked specimen. */
.spec-box {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Diagram specimens render the shipped SVG at full card width. */
.spec-figure { display: block; width: 100%; height: auto; }
.spec-figure--framed {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}