/* demo-2026 diagrams — shares the site's theme tokens so light/dark match. */

:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --fg: #1a1c1f;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --accent: #4f46e5;
  --accent-fg: #ffffff;
  --danger: #b91c1c;
}

:root[data-theme="dark"] {
  --bg: #0f1115;
  --fg: #e7e9ee;
  --muted: #9aa1ad;
  --card: #171a21;
  --border: #262b34;
  --accent: #8b8cf7;
  --accent-fg: #0f1115;
  --danger: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --fg: #e7e9ee;
    --muted: #9aa1ad;
    --card: #171a21;
    --border: #262b34;
    --accent: #8b8cf7;
    --accent-fg: #0f1115;
    --danger: #f87171;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Wider than the other demos: this page holds two editor panels side by side. */
.card {
  width: 100%;
  max-width: 960px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.4);
}

.eyebrow {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--muted);
}

h1 {
  margin: 0 0 12px;
  font-size: 40px;
  letter-spacing: -0.02em;
}

.lede { margin: 0 0 20px; color: var(--muted); }

/* Diagram-type switcher: a native radio group styled as a segmented control. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.field-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
}

.switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.seg {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.15s ease, background 0.15s ease;
}

/* The radio itself is visually hidden; the label is the clickable pill. */
.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seg:has(input:checked) {
  background: var(--accent);
  color: var(--accent-fg);
}

.seg:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Per-engine graph-layout controls: two groups (one per engine) share a toolbar
   row, and only the active engine's group is shown — main.js toggles [hidden]
   from the type switcher. Each group is a wrapping flex row so its label and
   switchers reuse the segmented-control styling of the toolbar above. */
.layout-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.layout-group[hidden] { display: none; }

/* Template gallery: labelled groups of chip buttons that each load a ready-made
   diagram into the editor. Secondary styling (not the accent fill) so the
   palette reads as a set of choices rather than a row of primary actions. */
.gallery { margin: 0 0 16px; }

.gallery-hint {
  margin: 6px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.gallery-group + .gallery-group { margin-top: 14px; }

.gallery-group-label {
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--muted);
}

.gallery-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.gallery-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 13px;
  text-align: left;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.gallery-btn:hover {
  filter: none;
  border-color: var(--accent);
  color: var(--accent);
}

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

/* Two panels side by side on wide screens, stacked on narrow ones. */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.panel-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
}

/* The editor is the bordered box; it holds the line-number gutter and the
   textarea side by side and carries the frame that used to live on .source, so
   the two read as one control. It is what the user resizes vertically. */
.editor {
  display: flex;
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  resize: vertical;
}

.editor:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Permanent line-number gutter. Same type metrics as the textarea so each
   number sits on its own line; right-aligned and not selectable so it never
   ends up in a copy. It has no scrollbar of its own — main.js locks its
   scrollTop to the textarea's, and sets each number's height so a soft-wrapped
   line keeps its number on the first visual row. */
.gutter {
  flex: 0 0 auto;
  box-sizing: content-box;
  padding: 12px 8px 12px 12px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  text-align: right;
  color: var(--muted);
  font: 14px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  user-select: none;
  -webkit-user-select: none;
}

/* The textarea fills the rest of the box and drops the frame it used to draw
   itself (now on .editor). pre-wrap + break-word are stated so the off-screen
   mirror main.js measures with wraps exactly the same way. */
.source {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 260px;
  border: 0;
  border-radius: 0;
  padding: 12px 14px;
  background: transparent;
  color: var(--fg);
  font: 14px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  outline: none;
}

.preview {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
}

.preview {
  display: grid;
  place-items: center;
  overflow: auto;
  color: var(--muted);
  text-align: center;
}

.preview-hint { margin: 0; }

/* A rendered diagram fills the panel's width and scrolls if it is taller than
   the panel. Top-align it (instead of the hint's centering) so tall diagrams
   are not clipped at the top when the panel scrolls. */
.preview:has(svg) { place-items: start center; }

.preview svg {
  max-width: 100%;
  height: auto;
}

/* Validation errors from the renderer. Monospace with preserved whitespace so
   a parser's line/column caret lines up under the offending text. */
.error {
  margin: 16px 0 0;
  min-height: 1.25em;
  max-height: 12em;
  overflow: auto;
  color: var(--danger);
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
}

@media (max-width: 700px) {
  .card { padding: 24px; }
  .panels { grid-template-columns: 1fr; }
  .editor,
  .source,
  .preview { min-height: 200px; }
  .gallery-buttons {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--accent);
  color: var(--accent-fg);
  padding: 8px 16px;
  border-radius: 10px;
  transition: transform 0.08s ease, filter 0.15s ease;
}

button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}

footer button {
  background: transparent;
  color: var(--fg);
  padding: 6px 12px;
}