/* Shared visual language. Load after each page's layout stylesheet. */
:root {
  color-scheme: dark;
  --bg: #050505;
  --fg: #e5e5e5;
  --ink: #e5e5e5;
  --paper: #050505;
  --white: #0a0a0a;
  --panel: #080808;
  --panel-soft: #101010;
  --accent: #d2d2d2;
  --green: #d2d2d2;
  --line: #252525;
  --muted: #929292;
  --agent-line: #2d2d2d;
  --agent-dim: #929292;
  --console-border: #2d2d2d;
  --console-copy: #a2a2a2;
  --console-blue: #a7b5c8;
  --console-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
body, .resolver-page {
  background: var(--bg);
  color: var(--fg);
  --panel: #080808;
  --panel-soft: #101010;
  --agent-line: #2d2d2d;
  --agent-dim: #929292;
}
.wrap, .board-wrap, .agent-console, .scenario-page .wrap {
  width: min(1280px, 88%);
  margin-inline: auto;
}
.site-header, .board-header, .topbar, .agent-bar, .scenario-page > header {
  min-height: 88px;
  height: auto;
  background: var(--bg);
  border-color: var(--line);
}
.topbar { padding: 16px max(6%, calc((100% - 1280px) / 2)); flex-wrap: wrap; }
.agent-bar { padding: 16px max(6%, calc((100% - 1280px) / 2)); flex-wrap: wrap; }
.scenario-page > header { display: flex; align-items: center; padding-block: 16px; }
.scenario-page .nav { width: min(1280px, 88%); }
nav, .links { flex-wrap: wrap; gap: 14px 22px; font: 12px/1.6 Arial, Helvetica, sans-serif; }
.site-header nav, .board-header nav, .agent-bar nav { gap: 14px 22px; }
.agent-bar nav { font-size: 12px; }
nav a, .topbar nav a, .agent-bar nav a, .links a { padding: 0; color: #9a9a9a; font-weight: 400; }
nav a:hover, .links a:hover, .agent-bar nav a:hover { color: #f0f0f0; }
.wordmark, .agent-brand, .scenario-page .brand { color: var(--fg); font: 750 24px/1.3 Arial, Helvetica, sans-serif; letter-spacing: -1.1px; }
.wordmark span, .scenario-page .brand span { color: var(--accent); }
/* Shared compact ASCII identity for homepage and Guild Board. */
.ascii-wordmark { display: block; flex-shrink: 0; padding-block: 10px; color: var(--fg); text-decoration: none; }
.ascii-wordmark > span { display: block; white-space: pre; font: 400 5px/1.1 var(--console-mono); letter-spacing: 0; word-spacing: 0; font-kerning: none; font-variant-ligatures: none; direction: ltr; }
.ascii-wordmark:hover { color: #fff; }
.network, .eyebrow, .agent-bar-label, .diagram-head { color: var(--muted); font-family: var(--console-mono); }
.network i, .pulse { background: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button, .button, .hero-actions .text-link { border-radius: 0; box-shadow: none; }
.button.primary, .board-heading .button, .query-actions .query-submit, .board-form button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #090909;
}
.button.primary:hover, .board-heading .button:hover, .query-actions .query-submit:hover, .board-form button:hover {
  background: #f0f0f0;
  color: #090909;
}
.query-actions button, .directory-error button, .query-more { border-radius: 0; }
.query-form label { border-radius: 0; background: var(--panel); border-color: var(--console-border); }
.query-form input::placeholder { color: #777; opacity: 1; }
.query-actions button:disabled, .query-more:disabled { opacity: .5; cursor: wait; }
.board-panel, .docs-card, .diagram, .doc pre, .doc .callout, .doc table, .doc blockquote, .docs-note, .note {
  background: var(--panel);
  border-color: var(--console-border);
  border-radius: 6px;
  box-shadow: none;
}
.docs-card { transition: border-color .15s, background-color .15s; }
.docs-card:hover { transform: none; border-color: #858585; background: var(--panel-soft); }
.docs-card p, .docs-lead, .doc h1 + p, .doc p, .doc li, .scenario-page .intro, .scenario-page .note {
  color: var(--console-copy);
}
.doc > .eyebrow, .doc li::marker, .docs-home > .eyebrow, .doc .doc-toc > span { color: var(--muted); }
.doc h1, .docs-home h1, .console-heading h1, .scenario-page h1 {
  font: 500 clamp(28px, 4vw, 40px)/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: -1px;
  color: var(--fg);
}
.doc h2, .docs-home section h2 { color: var(--fg); font-size: 26px; letter-spacing: -.6px; border-color: var(--line); }
.doc h3, .docs-card h3 { color: var(--fg); }
.doc a, .docs-reference a { color: var(--accent); }
.doc a:hover, .docs-reference a:hover { color: #f0f0f0; }
.doc pre, .scenario-page pre {
  font: 12px/1.8 var(--console-mono);
  color: var(--console-blue);
  letter-spacing: 0;
  word-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
}
.doc pre code { color: inherit; background: transparent; border: 0; }
.doc code { font-family: var(--console-mono); }
.doc .callout, .doc blockquote, .docs-note, .scenario-page .note { border-left-color: var(--accent); }
.doc th, .doc td, .doc-toc, .docs-reference, .docs-reference li { border-color: var(--console-border); }
.doc hr { background: var(--line); }
.doc footer, .site-footer, .board-footer, .scenario-page footer { color: var(--muted); background: var(--bg); border-color: var(--line); }
.site-footer { font: 11px/1.8 Arial, Helvetica, sans-serif; }
.doc.docs-home { max-width: 1120px; }
.doc { padding-block: 42px 72px; }
.scenario-page { font: 14px/1.8 Arial, Helvetica, sans-serif; }
.scenario-page main { padding-block: 42px 72px; }
.scenario-page .intro { max-width: 780px; font-size: 14px; }
.scenario-page .diagram-head { font-size: 10px; }
.scenario-page .diagram { overflow: hidden; }
.scenario-page pre { white-space: pre; overflow-x: auto; }
.scenario-page .boundary { border-color: var(--console-border); background: var(--panel); color: var(--console-copy); }
.protocol-endpoints code, .machine-index code, .offer-checkout { color: #bdbdbd; }
.directory-state p, .offer-seller-name, .empty-title { color: var(--fg); }
.offer-checkout { border-color: var(--console-border); }
.directory-boundary { color: var(--muted); }
.offer-actions a:hover { color: #f0f0f0; }
.agent-bar-label { margin-left: 0; }
.agent-console { padding-top: 32px; }
.section-ascii, .zsh-term .section-ascii, .diagram pre { color: var(--console-blue); }
.section-ascii .diagram-node, .diagram .diagram-node { color: #eef0f3; font-family: inherit; font-size: inherit; font-weight: 700; letter-spacing: 0; }
.section-ascii .diagram-edge, .diagram .diagram-edge { font: inherit; color: #8b939f; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .section-ascii .diagram-edge, .diagram .diagram-edge {
    background-image: linear-gradient(110deg, #687180, #a4acb8 50%, #737d8b);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
@media (max-width: 1000px) {
  .wrap, .board-wrap, .agent-console, .scenario-page .wrap, .scenario-page .nav { width: 90%; }
}
@media (max-width: 720px) {
  .ascii-wordmark > span { font-size: 4.5px; }
  .site-header, .board-header, .agent-bar { padding-block: 20px; gap: 16px; }
  .topbar { padding-inline: 5%; gap: 16px; }
  .site-header nav, .board-header nav, .topbar nav, .agent-bar nav { width: 100%; margin-left: 0; gap: 10px 16px; font-size: 11px; }
  .topbar nav a { padding: 0; font-size: 11px; }
  .topbar .network { display: none; }
  .doc { width: 90%; max-width: 90%; padding: 32px 0 56px; }
  .doc h1, .docs-home h1, .console-heading h1, .scenario-page h1 { font-size: 30px; letter-spacing: -.8px; }
  .doc pre, .scenario-page pre { font-size: 11px; padding: 16px; }
  .scenario-page main { padding-block: 32px 56px; }
  .agent-bar-label { width: auto; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .docs-card { transition: none; }
}
@media (forced-colors: active) {
  .section-ascii .diagram-edge, .diagram .diagram-edge { background: none; color: CanvasText; }
}
