/* Button — collapses chrome-btn, design-btn-run, design-btn-validate, theme-toggle */
.btn {
  background: var(--surface);
  color: var(--heading);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-chrome);
  padding: 0.4rem 0.9rem;
  font: 0.9rem var(--font-ui);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { color: var(--link-hover); border-color: var(--link-hover); }

.btn.btn--ghost   { background: none; border: none; padding: 0.4rem 0.6rem; }
.btn.btn--warn    { color: var(--accent-warn); border-color: var(--accent-warn); }
.btn.btn--warn:hover { color: var(--fg); background: var(--c-ochre); }
.btn.btn--active  { color: var(--c-cyan); border-color: var(--c-cyan); }
.btn:disabled     { opacity: 0.5; cursor: not-allowed; }

/* Tag — taxonomy chips */
.tag {
  display: inline-block;
  background: transparent;
  color: var(--meta);
  padding: 0.2rem 0.5rem;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-chrome);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}
.tag:hover { color: var(--link-hover); border-color: var(--link-hover); }

/* Code — dark in both themes */
pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--radius-content);
  font-family: var(--font-mono);
}
:not(pre) > code {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-content);
  font: 0.9em var(--font-mono);
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--blockquote);
  margin: 1.5rem 0;
  padding: 0.5rem 1.5rem;
  color: var(--blockquote);
  font-style: italic;
}

/* Automata canvas — both sites mount this */
.automata-bg, #automata-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--automata-0);
}