/* docs.css — chrome for the documentation pages only (not part of the shipped system). */
.ds-docs { background: var(--color-bg-canvas); }
.ds-docs__header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
}
.ds-docs__header > :last-child { margin-inline-start: auto; }
.ds-docs__main {
  max-width: var(--size-container-xl);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  display: grid; gap: var(--space-10);
}
.ds-docs__main > section { display: grid; gap: var(--space-4); }
.ds-docs__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* A demo frame: renders the example, labelled with its data-demo marker. */
.ds-demo {
  display: grid; gap: var(--space-2);
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.ds-demo__label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-mono); }
.ds-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ds-demos { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }

.ds-code {
  overflow-x: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.ds-table th, .ds-table td {
  text-align: start; padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.ds-index { list-style: none; padding: 0; display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.ds-index__item {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.ds-index__item a { flex: 1; }
.ds-index__tier, .ds-index__status { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ds-index__item[data-done="false"] { border-style: dashed; }
.ds-index__item[data-done="true"] .ds-index__status { color: var(--color-feedback-success-icon); }

/* Do / don't pairs */
.ds-dodont { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ds-do, .ds-dont { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); border: var(--border-width-thin) solid var(--color-border-default); border-block-start-width: 4px; }
.ds-do { border-block-start-color: var(--color-feedback-success-icon); }
.ds-dont { border-block-start-color: var(--color-feedback-danger-icon); }
.ds-do figcaption, .ds-dont figcaption { margin-block-start: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Status badges in the index */
.ds-status { font-size: var(--font-size-xs); padding: 0 var(--space-1-5); border-radius: var(--radius-full); border: var(--border-width-thin) solid var(--color-border-default); }
.ds-status[data-status="stable"] { color: var(--color-feedback-success-fg); background: var(--color-feedback-success-bg); }
.ds-status[data-status="beta"] { color: var(--color-feedback-info-fg); background: var(--color-feedback-info-bg); }
.ds-status[data-status="experimental"] { color: var(--color-feedback-warning-fg); background: var(--color-feedback-warning-bg); }
.ds-status[data-status="deprecated"] { color: var(--color-feedback-danger-fg); background: var(--color-feedback-danger-bg); }