.components-demo { min-height: 100%; background: var(--bg); }
.components-demo__main { width: min(calc(100% - 2rem), 72rem); margin: 0 auto; padding: clamp(1.5rem, 4vw, 4rem) 0; }
.components-demo__header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.components-demo__header h1 { margin: 0; font-size: var(--type-page-title-size); line-height: var(--type-page-title-line); }
.components-demo__header p { max-width: 46rem; margin: var(--space-2) 0 0; color: var(--text-secondary); }
.components-demo__header code { color: var(--link); }
.components-demo__eyebrow { color: var(--lu4-accent) !important; font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.components-demo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.components-demo__card { display: grid; align-content: start; gap: var(--space-4); min-width: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.components-demo__card--wide { grid-column: 1 / -1; }
.components-demo__card h2 { margin: 0; font-size: var(--type-component-title-size); line-height: var(--type-component-title-line); }
.components-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.components-demo__rows { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.components-demo__data-row { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.components-demo__data-row span:first-child { display: grid; min-width: 0; }
.components-demo__data-row strong { color: var(--text); font-size: var(--type-ui-size); line-height: var(--type-ui-line); }
.components-demo__data-row small { color: var(--text-muted); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.components-demo__primitives { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--space-4); }
.components-demo__entity-link, .components-demo__entity-row, .components-demo__disclosure { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--control-bg); }
.components-demo__entity-link { min-height: 3.75rem; padding: var(--space-2) var(--space-3); }
.components-demo__entity-row { --wb-entity-row-height: 3.75rem; --wb-entity-row-padding: var(--space-2) var(--space-3); }
.components-demo__disclosure > summary { display: grid; min-height: 3.75rem; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); color: var(--text-secondary); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: 650; }
.components-demo__disclosure > summary b { color: var(--text-muted); font-size: var(--type-label-size); }
.components-demo__disclosure > summary svg { width: .875rem; height: .875rem; stroke: currentColor; stroke-width: 1.8; }
.components-demo__disclosure > div { padding: 0 var(--space-3) var(--space-3); }
.components-demo__disclosure p { margin: 0; color: var(--text-muted); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.components-demo__setting { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--text-secondary); font-size: var(--type-ui-size); }
.components-demo__sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.components-demo .shell-dialog p { margin: 0; color: var(--text-secondary); }

@media (max-width: 639px) {
  .components-demo__main { width: min(calc(100% - 1.5rem), 72rem); padding-block: var(--space-5); }
  .components-demo__header { align-items: stretch; flex-direction: column; gap: var(--space-4); }
  .components-demo__header > .wb-button { align-self: start; }
  .components-demo__grid { grid-template-columns: minmax(0, 1fr); }
  .components-demo__card--wide { grid-column: auto; }
  .components-demo__card { padding: var(--space-4); }
  .components-demo__data-row { align-items: start; flex-direction: column; gap: var(--space-1); }
  .components-demo__primitives { grid-template-columns: minmax(0, 1fr); }
}