/* ============================================================================
   DESIGN SYSTEM REFERENCE PAGE, layout only
   Used by design-system.html and nothing else. Kept out of components.css so
   the component library carries no documentation-only styles.
   ========================================================================== */

/* Matched to .page on every other page. space-6 put the title under the fixed
   controls, which is the one bit of clearance the header no longer provides
   itself now that it is out of flow. */
.ds { padding-block: var(--space-10) var(--space-10); }
.ds > * + * { margin-top: var(--space-9); }

.ds-section > * + * { margin-top: var(--space-5); }

.ds-h {
  font-family: var(--family-display);
  font-size: var(--size-700);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: var(--stroke-thin) solid var(--color-line);
}

/* No accent rail. A coloured bar down the left of a callout is decoration
   standing in for hierarchy: the text is already distinguishable by colour
   and measure. */
.ds-note {
  font-size: var(--size-300);
  color: var(--color-text-muted);
  max-width: var(--width-text);
}
.ds-note strong { color: var(--color-text); }

.ds-sub { font-size: var(--size-500); color: var(--color-text); }

/* --- swatches ------------------------------------------------------------- */

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-3);
}

.ds-swatch {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border: var(--stroke-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.ds-swatch__chip {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-sm);
  border: var(--stroke-thin) solid var(--color-line-interactive);
  flex-shrink: 0;
}
.ds-swatch__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-swatch__name {
  font-family: var(--family-mono);
  font-size: var(--size-200);
  color: var(--color-text);
  word-break: break-all;
}
.ds-swatch__val {
  font-family: var(--family-mono);
  font-size: var(--size-100);
  color: var(--color-text-muted);
}
.ds-swatch__note { font-size: var(--size-200); color: var(--color-text-dim); line-height: var(--leading-snug); }

.ds-ratio {
  font-family: var(--family-mono);
  font-size: var(--size-100);
  color: var(--color-text-muted);
  border: var(--stroke-thin) solid var(--color-line);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  align-self: flex-start;
}

/* --- spec rows: a rendered thing beside its class name -------------------- */

.ds-rows { border: var(--stroke-thin) solid var(--color-line); border-radius: var(--radius-md); }
.ds-row {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  align-items: center;
}
@media (min-width: 52rem) { .ds-row { grid-template-columns: minmax(0,1fr) 18rem; } }
.ds-row + .ds-row { border-top: var(--stroke-thin) solid var(--color-line); }
.ds-row__demo { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; min-width: 0; }
.ds-row__spec { display: flex; flex-direction: column; gap: 2px; }
.ds-row__name { font-size: var(--size-300); color: var(--color-text); }
.ds-code {
  font-family: var(--family-mono);
  font-size: var(--size-100);
  color: var(--color-link);
  word-break: break-all;
}
.ds-row__use { font-size: var(--size-200); color: var(--color-text-muted); }

/* --- type scale ----------------------------------------------------------- */

.ds-type { display: flex; flex-direction: column; }
.ds-type__row {
  display: flex; gap: var(--space-5); align-items: baseline; flex-wrap: wrap;
  padding-block: var(--space-4);
}
.ds-type__row + .ds-type__row { border-top: var(--stroke-thin) solid var(--color-line); }
.ds-type__sample { flex: 1; min-width: 0; color: var(--color-text); }
.ds-type__spec { font-family: var(--family-mono); font-size: var(--size-100); color: var(--color-text-muted); white-space: nowrap; }

/* --- space scale ---------------------------------------------------------- */

.ds-space__row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.ds-space__bar { background: var(--color-accent); height: 12px; border-radius: 2px; }
.ds-space__spec { font-family: var(--family-mono); font-size: var(--size-100); color: var(--color-text-muted); white-space: nowrap; }

/* --- shape samples -------------------------------------------------------- */

.ds-shapes { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ds-shape { text-align: center; display: flex; flex-direction: column; gap: var(--space-2); }
.ds-shape__box {
  width: 4.5rem; height: 4.5rem;
  background: var(--color-surface);
  border: var(--stroke-thin) solid var(--color-line-interactive);
}

/* --- table ---------------------------------------------------------------- */

.ds-table-wrap { overflow-x: auto; }
.ds-table { border-collapse: collapse; width: 100%; font-size: var(--size-300); }
.ds-table th, .ds-table td {
  text-align: left; padding: var(--space-2) var(--space-3);
  border-bottom: var(--stroke-thin) solid var(--color-line);
  vertical-align: top;
}
.ds-table th {
  font-size: var(--size-200); color: var(--color-text-muted); font-weight: var(--weight-medium);
}
.ds-table td { color: var(--color-text-body); }
.ds-table code { font-family: var(--family-mono); font-size: var(--size-200); color: var(--color-link); }

/* --- misc ----------------------------------------------------------------- */

.ds-stage { background: var(--color-page); border: var(--stroke-thin) solid var(--color-line);
            border-radius: var(--radius-md); padding: var(--space-5); }
.ds-grid2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(18rem,100%),1fr)); }