/* design.css — design.php page-specific styles
 *
 * Layout (sticky TOC + section list) and section-specific visualizers
 * (token swatches, brand specimen card, type ladders, color chips, code-
 * popover preview). Chrome-level primitives (.demo-btn / .demo-pill /
 * .demo-card / .demo-form-*) live in app.css and are consumed here as-is.
 *
 * All values trace to --demo-* tokens. No magic hex/px in component CSS
 * (the only literal hex is the #0b0f14 panel inside .demo-brand-card__
 * specimen--dark — intentional: shows the dark variant ON the light page).
 */

/* ──────────────────────────────────────────────
 * Page shell
 * ────────────────────────────────────────────── */

.demo-design {
  min-height: calc(100vh - var(--demo-nav-h) - var(--demo-footer-h));
}
.demo-design__inner {
  max-width: var(--demo-content-max);
  margin: 0 auto;
  padding: var(--demo-space-8) var(--demo-space-6) var(--demo-space-9);
}

.demo-design__hero { margin-bottom: var(--demo-space-8); }
.demo-design__title {
  margin: 0 0 var(--demo-space-3);
  font-size: var(--demo-fs-3xl);
  font-weight: var(--demo-fw-display);
  line-height: var(--demo-lh-display);
  letter-spacing: var(--demo-ls-display);
  color: var(--demo-text-strong);
}
.demo-design__lede {
  margin: 0;
  max-width: 70ch;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-regular);
  line-height: var(--demo-lh-tight);
  color: var(--demo-text);
}

.demo-design__shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--demo-space-8);
  align-items: start;
}

/* TOC */

.demo-design__toc {
  position: sticky;
  top: var(--demo-space-6);
  align-self: start;
  padding: var(--demo-space-4) 0;
  border-right: 1px solid var(--demo-border);
}
.demo-design__toc-title {
  margin: 0 0 var(--demo-space-3);
  padding: 0 var(--demo-space-2);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
}
.demo-design__toc-nav { display: flex; flex-direction: column; }
.demo-design__toc-link {
  display: block;
  padding: var(--demo-space-2) var(--demo-space-3);
  border-radius: var(--demo-radius-sm);
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-medium);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.demo-design__toc-link:hover {
  background: var(--demo-bg-elevated);
  color: var(--demo-text-strong);
}
.demo-design__toc-link.is-active {
  background: var(--demo-accent-soft);
  color: var(--demo-accent);
  font-weight: var(--demo-fw-semibold);
}
.demo-design__toc-link:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

/* Section frames */

.demo-design__sections { min-width: 0; }
.demo-design__section {
  padding-top: var(--demo-space-7);
  margin-bottom: var(--demo-space-9);
  scroll-margin-top: var(--demo-space-7);
}
.demo-design__section:first-child { padding-top: 0; }
.demo-design__section-head { margin-bottom: var(--demo-space-6); }
.demo-design__section-title {
  margin: 0 0 var(--demo-space-3);
  font-size: var(--demo-fs-2xl);
  font-weight: var(--demo-fw-bold);
  letter-spacing: var(--demo-ls-heading);
  color: var(--demo-text-strong);
}
.demo-design__section-sub {
  margin: 0;
  max-width: 72ch;
  color: var(--demo-text);
  line-height: var(--demo-lh-body);
}
.demo-design__section-sub .demo-pill { margin-left: var(--demo-space-2); vertical-align: middle; }

.demo-design__subhead {
  margin: var(--demo-space-7) 0 var(--demo-space-4);
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-heading);
  color: var(--demo-text-strong);
}
.demo-design__subhead:first-child { margin-top: 0; }

/* ──────────────────────────────────────────────
 * Brand section
 * ────────────────────────────────────────────── */

.demo-brand-grid { display: grid; gap: var(--demo-space-5); }

.demo-brand-card {
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
  overflow: hidden;
}
.demo-brand-card__head {
  padding: var(--demo-space-5) var(--demo-space-6);
  border-bottom: 1px solid var(--demo-border);
}
.demo-brand-card__title {
  margin: 0 0 var(--demo-space-2);
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text-strong);
}
.demo-brand-card__caption {
  margin: 0;
  color: var(--demo-text-secondary);
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
}

/* Specimen panels are intrinsic: a "light" specimen ALWAYS shows the
 * light-variant logo on a fixed white background, and the "dark"
 * specimen ALWAYS shows the dark-variant logo on a fixed near-black
 * background — independent of the page theme. This is the whole point
 * of a brand specimen card: reviewers must see both variants side by
 * side regardless of which theme they're viewing the page in. */
.demo-brand-card__specimen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: var(--demo-space-7) var(--demo-space-6);
  border-top: 1px solid var(--demo-border);
}
.demo-brand-card__specimen--light { background: #ffffff; }
.demo-brand-card__specimen--dark  { background: #0b0f14; }
.demo-brand-card__specimen img { display: block; height: 96px; width: auto; }

.demo-brand-card__lockup {
  display: flex;
  align-items: center;
  gap: var(--demo-space-3);
  padding: var(--demo-space-5) var(--demo-space-6);
  border-top: 1px solid var(--demo-border);
}
.demo-brand-card__lockup--light { background: #ffffff; }
.demo-brand-card__lockup--dark  { background: #0b0f14; }
.demo-brand-card__lockup img { display: block; height: 32px; width: auto; }
.demo-brand-card__wordmark {
  font-size: var(--demo-fs-lg);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-heading);
}
/* Wordmark colors are intrinsic per specimen, NOT theme-aware (same
 * reasoning as the specimen panels above). */
.demo-brand-card__lockup--light .demo-brand-card__wordmark { color: #000000; }
.demo-brand-card__lockup--dark  .demo-brand-card__wordmark { color: #f2f2f2; }
.demo-brand-card__wordmark-accent--light { color: #24455c; }
.demo-brand-card__wordmark-accent--dark  { color: #41799d; }

/* Scale ladder ships in two rows — one per logo variant — on intrinsic
 * backgrounds, same reasoning as the specimen panels: reviewers must
 * see favicon survival at every size for both variants regardless of
 * page theme. */
.demo-brand-card__scale {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  align-items: end;
  gap: var(--demo-space-6);
  padding: var(--demo-space-5) var(--demo-space-6);
  border-top: 1px solid var(--demo-border);
}
.demo-brand-card__scale--light { background: #ffffff; }
.demo-brand-card__scale--dark  { background: #0b0f14; }
.demo-brand-card__scale-item { display: flex; flex-direction: column; align-items: center; gap: var(--demo-space-2); }
.demo-brand-card__scale-item img { display: block; }
.demo-brand-card__scale-item small {
  font-family: var(--demo-font-mono);
  font-size: 10px;
  letter-spacing: 0;
}
.demo-brand-card__scale--light .demo-brand-card__scale-item small { color: #6b7280; }
.demo-brand-card__scale--dark  .demo-brand-card__scale-item small { color: #9ca3af; }

.demo-brand-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--demo-space-4) var(--demo-space-6);
  padding: var(--demo-space-5) var(--demo-space-6);
  margin: 0;
  border-top: 1px solid var(--demo-border);
}
.demo-brand-card__meta div { margin: 0; }
.demo-brand-card__meta dt {
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
  margin-bottom: var(--demo-space-1);
}
.demo-brand-card__meta dd {
  margin: 0;
  font-size: var(--demo-fs-sm);
  color: var(--demo-text);
  line-height: var(--demo-lh-body);
}

.demo-color-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--demo-space-1);
  vertical-align: -1px;
  background: var(--demo-chip);
  border: 1px solid var(--demo-border);
  border-radius: 3px;
}

.demo-brand-card__rules {
  margin: 0;
  padding: var(--demo-space-5) var(--demo-space-6) var(--demo-space-5) var(--demo-space-9);
  border-top: 1px solid var(--demo-border);
  list-style: disc;
}
.demo-brand-card__rules li {
  margin-bottom: var(--demo-space-2);
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text);
}
.demo-brand-card__rules li:last-child { margin-bottom: 0; }
.demo-brand-card__rules strong {
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-semibold);
}

/* ──────────────────────────────────────────────
 * Tokens section
 * ────────────────────────────────────────────── */

.demo-token-grid {
  display: grid;
  gap: var(--demo-space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.demo-token {
  display: flex;
  flex-direction: column;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  overflow: hidden;
}
.demo-token__swatch {
  height: 56px;
  border-bottom: 1px solid var(--demo-border);
}
.demo-token__label {
  display: flex;
  justify-content: space-between;
  gap: var(--demo-space-2);
  padding: var(--demo-space-2) var(--demo-space-3);
  background: var(--demo-bg);
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-xs);
}
.demo-token__name { color: var(--demo-text-strong); font-weight: var(--demo-fw-semibold); }
.demo-token__value { color: var(--demo-text-muted); }
.demo-token__caption {
  margin: 0;
  padding: var(--demo-space-2) var(--demo-space-3) var(--demo-space-3);
  background: var(--demo-bg);
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-secondary);
  line-height: var(--demo-lh-body);
}

.demo-spec-row {
  display: grid;
  gap: var(--demo-space-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.demo-spec {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-2);
  padding: var(--demo-space-3);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
}
.demo-spec__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-sm);
}
.demo-spec--space .demo-spec__bar {
  display: block;
  height: 12px;
  background: var(--demo-accent);
  border-radius: 2px;
  min-width: 4px;
}
.demo-spec--radius .demo-spec__square {
  display: block;
  width: 36px;
  height: 36px;
  background: var(--demo-accent);
}
.demo-spec--shadow .demo-spec__elevated {
  display: block;
  width: 36px;
  height: 36px;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-sm);
}
.demo-spec__name {
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-semibold);
}
.demo-spec__value {
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-muted);
}
.demo-spec__caption {
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-secondary);
}

/* ──────────────────────────────────────────────
 * Typography section
 * ────────────────────────────────────────────── */

.demo-design__type-meta {
  margin-bottom: var(--demo-space-7);
  padding: var(--demo-space-5);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
}
.demo-design__type-meta dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--demo-space-4) var(--demo-space-6);
  margin: 0;
}
.demo-design__type-meta div { margin: 0; }
.demo-design__type-meta dt {
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
  margin-bottom: var(--demo-space-1);
}
.demo-design__type-meta dd {
  margin: 0;
  font-size: var(--demo-fs-sm);
  color: var(--demo-text);
}

.demo-type-scale {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-4);
}
.demo-type-scale__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--demo-space-4);
  padding-bottom: var(--demo-space-3);
  border-bottom: 1px solid var(--demo-border);
}
.demo-type-scale__row:last-child { border-bottom: 0; padding-bottom: 0; }
.demo-type-scale__sample {
  margin: 0;
  color: var(--demo-text-strong);
  /* Heading weights inherit from app.css base h1..h6 rules */
}
.demo-type-scale__caption {
  margin: 0;
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-muted);
  font-family: var(--demo-font-mono);
  white-space: nowrap;
}

.demo-type-body p {
  margin: 0 0 var(--demo-space-3);
  max-width: 64ch;
  color: var(--demo-text);
  line-height: var(--demo-lh-body);
}
.demo-type-body p:last-child { margin-bottom: 0; }

.demo-type-weights { display: grid; gap: var(--demo-space-3); }
.demo-type-weight {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--demo-space-3);
  padding: var(--demo-space-3) var(--demo-space-4);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
}
.demo-type-weight__sample {
  font-size: var(--demo-fs-md);
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-heading);
  /* font-weight is inline */
}
.demo-type-weight__token {
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-semibold);
}
.demo-type-weight__caption {
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-secondary);
}

@media (max-width: 640px) {
  .demo-type-weight {
    grid-template-columns: 1fr;
    gap: var(--demo-space-1);
  }
  .demo-type-weight__caption { color: var(--demo-text-muted); }
}

.demo-type-inline {
  margin: 0;
  padding: var(--demo-space-5);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  color: var(--demo-text);
  line-height: var(--demo-lh-body);
}
.demo-type-inline kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--demo-font-mono);
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--demo-text-strong);
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-bottom-width: 2px;
  border-radius: var(--demo-radius-sm);
}

.demo-type-tabular {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.demo-type-tabular__caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--demo-space-2);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
}
.demo-type-tabular th,
.demo-type-tabular td {
  padding: var(--demo-space-2) var(--demo-space-3);
  text-align: left;
  border-bottom: 1px solid var(--demo-border);
  font-size: var(--demo-fs-sm);
}
.demo-type-tabular th {
  background: var(--demo-bg-elevated);
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-semibold);
}
.demo-type-tabular td {
  color: var(--demo-text);
  font-weight: var(--demo-fw-regular);
}
.demo-type-tabular td:first-child {
  font-family: var(--demo-font-mono);
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-semibold);
}
.demo-type-tabular tr:last-child td { border-bottom: 0; }

/* ──────────────────────────────────────────────
 * Components section
 * ────────────────────────────────────────────── */

.demo-comp-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--demo-space-3);
  padding: var(--demo-space-5);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
}
.demo-comp-row--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.demo-comp-row__caption {
  margin: var(--demo-space-3) 0 0;
  max-width: 70ch;
  font-size: var(--demo-fs-sm);
  color: var(--demo-text-secondary);
  line-height: var(--demo-lh-body);
}

.demo-comp-form {
  display: grid;
  gap: var(--demo-space-4);
  max-width: 480px;
  padding: var(--demo-space-5);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
}

.demo-popover-preview {
  max-width: 640px;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
  box-shadow: var(--demo-shadow-md);
  overflow: hidden;
}
.demo-popover-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--demo-space-3);
  padding: var(--demo-space-3) var(--demo-space-4);
  border-bottom: 1px solid var(--demo-border);
  background: var(--demo-bg);
}
.demo-popover-preview__title {
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-2);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text-strong);
}
.demo-popover-preview__title .material-symbols-outlined {
  font-size: 18px;
  color: var(--demo-accent);
}
.demo-popover-preview__pre {
  margin: 0;
  padding: var(--demo-space-4) var(--demo-space-5);
  background: var(--demo-bg);
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text);
  overflow-x: auto;
}
.demo-popover-preview__pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.demo-popover-preview__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--demo-space-2) var(--demo-space-4);
  border-top: 1px solid var(--demo-border);
  background: var(--demo-bg);
}

/* ──────────────────────────────────────────────
 * Code-highlight section (W6.F.A.0)
 *
 * Two intrinsic-pair patterns: the palette renders both light + dark
 * twin swatch grids side-by-side, and each language sample renders the
 * same code in both palettes side-by-side. The dark side uses
 * .demo-code-popover's pinned-dark tokens (default, no override). The
 * light side wraps in `.design-code-highlight__pair--light` so the
 * matching block in code-highlight.css forces the light twin tokens
 * within that scope only — independent of page [data-theme].
 * ────────────────────────────────────────────── */

.design-code-highlight__lede {
  margin: 0 0 var(--demo-space-5);
  max-width: 72ch;
  color: var(--demo-text);
  line-height: var(--demo-lh-body);
  font-size: var(--demo-fs-sm);
}
.design-code-highlight__lede em {
  font-style: italic;
  color: var(--demo-text-strong);
  font-weight: var(--demo-fw-medium);
}
.design-code-highlight__lede code {
  font-family: var(--demo-font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-sm);
  color: var(--demo-text-strong);
}

/* ─── Token palette (2-col light + dark twins) ─── */

.design-code-highlight__palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--demo-space-5);
  margin-bottom: var(--demo-space-7);
}
.design-code-highlight__palette-col {
  /* Intrinsic light background — independent of page [data-theme]. */
  padding: var(--demo-space-5);
  background: #fafbfc;
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
}
.design-code-highlight__palette-col--dark {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.10);
}
.design-code-highlight__palette-title {
  margin: 0 0 var(--demo-space-4);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: #6b7280;
}
.design-code-highlight__palette-col--dark .design-code-highlight__palette-title {
  color: #9ca3af;
}
.design-code-highlight__swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--demo-space-2);
}
.design-code-highlight__swatch {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--demo-space-3);
  padding: var(--demo-space-2) 0;
}
.design-code-highlight__chip {
  display: block;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.design-code-highlight__palette-col--dark .design-code-highlight__chip {
  border-color: rgba(255, 255, 255, 0.18);
}
.design-code-highlight__token-name {
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  color: #383a42;
  background: transparent;
  padding: 0;
  border: 0;
}
.design-code-highlight__palette-col--dark .design-code-highlight__token-name {
  color: #e8ecef;
}
.design-code-highlight__token-hex {
  justify-self: end;
  font-family: var(--demo-font-mono);
  font-size: 11px;
  color: #6b7280;
  background: transparent;
  padding: 0;
  border: 0;
}
.design-code-highlight__palette-col--dark .design-code-highlight__token-hex {
  color: #9ca3af;
}
.design-code-highlight__token-caption {
  grid-column: 2 / span 2;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}
.design-code-highlight__palette-col--dark .design-code-highlight__token-caption {
  color: #9ca3af;
}

/* ─── Language samples (each pair renders light over dark) ─── */

.design-code-highlight__samples {
  display: grid;
  gap: var(--demo-space-7);
  margin-bottom: var(--demo-space-7);
}
.design-code-highlight__sample {
  display: grid;
  gap: var(--demo-space-3);
}
.design-code-highlight__sample-title {
  margin: 0;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-heading);
  color: var(--demo-text-strong);
}
.design-code-highlight__pair {
  position: relative;
  /* The light pair forces the light twin tokens via code-highlight.css.
   * The dark pair just inherits the .demo-code-popover pin (no override
   * needed). */
}
.design-code-highlight__pair-tag {
  display: inline-block;
  margin-bottom: var(--demo-space-2);
  padding: 2px 10px;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-pill);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-secondary);
}
.design-code-highlight__overflow-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--demo-space-5);
}

.design-code-highlight__inline-demo {
  margin: var(--demo-space-5) 0 0;
  max-width: 72ch;
  color: var(--demo-text);
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
}
.design-code-highlight__inline-demo code {
  font-family: var(--demo-font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-sm);
  color: var(--demo-text-strong);
}

@media (max-width: 980px) {
  /* Below tablet: stack the palette + sample pairs vertically so the
   * 16-row swatch list and the long-line pair don't squeeze. */
  .design-code-highlight__palette,
  .design-code-highlight__overflow-pair {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────
 * Responsive — collapse TOC below tablet
 * ────────────────────────────────────────────── */

@media (max-width: 880px) {
  .demo-design__shell { grid-template-columns: 1fr; gap: var(--demo-space-6); }
  .demo-design__toc {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--demo-border);
    padding-bottom: var(--demo-space-4);
  }
  .demo-design__toc-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--demo-space-1);
  }
}

@media (max-width: 480px) {
  .demo-design__inner { padding: var(--demo-space-6) var(--demo-space-4) var(--demo-space-7); }
  .demo-design__title { font-size: var(--demo-fs-2xl); }
  .demo-brand-card__scale { grid-template-columns: repeat(2, auto); gap: var(--demo-space-4); }
  .demo-design__type-meta dl { grid-template-columns: 1fr; }
}