/* demo.css — opt-in shell, controls, metrics, and SVG theming for #143.
 *
 * Import this stylesheet only on pages that use the demo substrate. It relies
 * exclusively on tokens.css and never mounts an island or chooses a domain
 * model for the consumer.
 */

.demo-frame {
  --demo-accent: var(--color-link);
  --demo-positive: var(--warm-green);
  --demo-warning: var(--warm-rose);
  --demo-surface: var(--color-bg-subtle);
  --demo-ink: var(--color-text);
  --demo-ink-muted: var(--color-text-muted);

  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-6);
  margin-inline: 0;
  padding: var(--space-5);
  color: var(--demo-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.demo-frame__header,
.demo-frame__body {
  display: grid;
  gap: var(--space-3);
}

.demo-frame__title,
.demo-frame__description,
.demo-frame__caption,
.demo-slider__description,
.demo-stat-card__label,
.demo-stat-card__value,
.demo-stat-card__detail {
  margin: 0;
}

.demo-frame__title {
  color: var(--color-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.demo-frame__description,
.demo-frame__caption,
.demo-slider__description,
.demo-stat-card__detail {
  color: var(--demo-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.demo-frame__caption {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.demo-frame__visual {
  max-width: 100%;
  overflow-x: auto;
}

.demo-frame__visual > svg,
.demo-frame svg[data-demo-visual] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Attribute helpers let inline SVGs follow semantic page tokens without a
 * JS redraw. Canvas and JS-computed colors should use useThemeColors(). */
.demo-frame [data-demo-fill='accent'] { fill: var(--demo-accent); }
.demo-frame [data-demo-fill='positive'] { fill: var(--demo-positive); }
.demo-frame [data-demo-fill='warning'] { fill: var(--demo-warning); }
.demo-frame [data-demo-fill='ink'] { fill: var(--demo-ink); }
.demo-frame [data-demo-fill='muted'] { fill: var(--demo-ink-muted); }
.demo-frame [data-demo-fill='surface'] { fill: var(--demo-surface); }
.demo-frame [data-demo-stroke='accent'] { stroke: var(--demo-accent); }
.demo-frame [data-demo-stroke='positive'] { stroke: var(--demo-positive); }
.demo-frame [data-demo-stroke='warning'] { stroke: var(--demo-warning); }
.demo-frame [data-demo-stroke='ink'] { stroke: var(--demo-ink); }
.demo-frame [data-demo-stroke='muted'] { stroke: var(--demo-ink-muted); }

.demo-slider {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.demo-slider[data-disabled='true'] {
  opacity: 0.65;
}

.demo-slider__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.demo-slider__label {
  color: var(--demo-ink);
  font-weight: 600;
}

.demo-slider__value {
  color: var(--demo-accent);
  font-family: var(--font-code);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.demo-slider__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  accent-color: var(--demo-accent);
  cursor: pointer;
}

.demo-slider__input:disabled {
  cursor: not-allowed;
}

.demo-slider__input:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

.demo-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-3);
  margin: 0;
}

.demo-stat-card {
  --demo-card-accent: var(--color-border);

  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--demo-surface);
  border: 1px solid var(--color-border);
  border-left: var(--border-bar) solid var(--demo-card-accent);
  border-radius: var(--radius-md);
}

.demo-stat-card[data-tone='accent'] { --demo-card-accent: var(--demo-accent); }
.demo-stat-card[data-tone='positive'] { --demo-card-accent: var(--demo-positive); }
.demo-stat-card[data-tone='warning'] { --demo-card-accent: var(--demo-warning); }

.demo-stat-card__label {
  color: var(--demo-ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--leading-normal);
  text-transform: uppercase;
}

.demo-stat-card__value {
  margin-top: var(--space-1);
  color: var(--demo-ink);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: var(--leading-tight);
}

.demo-stat-card__unit {
  margin-left: var(--space-1);
  color: var(--demo-ink-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.demo-stat-card__detail {
  margin-top: var(--space-1);
}

@media (max-width: 36rem) {
  .demo-frame {
    padding: var(--space-4);
  }
}

/* Consumer animation can live anywhere inside the shell. Honor the platform
 * preference even when that consumer forgot to add a local guard. */
@media (prefers-reduced-motion: reduce) {
  .demo-frame,
  .demo-frame *,
  .demo-frame *::before,
  .demo-frame *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}