/* Shared frame and controls for demo islands (see /js/demos/loader.js). Uses the site tokens. */

.demo {
  --demo-gap: 1rem;
  margin-block: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 1.25rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.5;
  max-width: none;
  overflow: hidden;
}
/* Demos may be wider than the prose column on large screens. */
@media (min-width: 1280px) { .prose-edward .demo { margin-inline: 0 -12rem; } }

.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: var(--demo-gap); }
.demo-kicker { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.demo-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; margin: 0.15rem 0 0; }
.demo-meta { font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); letter-spacing: 0.04em; }
.demo-note { font-size: 0.875rem; color: var(--muted); margin-top: var(--demo-gap); }
.demo-note strong { color: var(--fg); font-weight: 600; }

/* Fallback content (shown without JS, and on error) */
.demo-fallback { font-size: 1rem; }
.demo-fallback table { font-size: 0.875rem; }
.demo[data-state="loading"] .demo-fallback { opacity: 0.6; }
.demo[data-state="error"]::after {
  content: "The interactive version did not load. The summary above is the same data.";
  display: block; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted);
}

/* Controls */
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.demo-btn, .demo-select, .demo-input {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--fg);
}
.demo-btn { cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.demo-btn:hover { border-color: var(--accent); }
.demo-btn[aria-pressed="true"], .demo-btn.is-primary { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }
.demo-input { min-width: 0; }
.demo-label { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
@media (pointer: coarse) { .demo-btn, .demo-select, .demo-input { min-height: 2.75rem; } }

/* Tabs */
.demo-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--demo-gap); }
.demo-tabs [role="tab"][aria-selected="true"] { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }

/* Status marks */
.demo-ok { color: #2f7d4f; }
.demo-bad { color: #b3261e; }
.dark .demo-ok { color: #6fcf97; }
.dark .demo-bad { color: #ff8a80; }

/* Panels */
.demo-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.9rem 1rem; }
.demo-grid { display: grid; gap: var(--demo-gap); }
@media (min-width: 860px) { .demo-grid.two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.demo table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.demo th, .demo td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
.demo th { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }
.demo code, .demo pre { font-family: var(--font-mono); font-size: 0.8125rem; }
.demo pre { white-space: pre-wrap; word-break: break-word; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.6rem 0.75rem; margin: 0.4rem 0 0; }

@media (prefers-reduced-motion: reduce) { .demo * { transition: none !important; animation: none !important; } }