/* tools-diagram.css — "agent tools" figure on the shared eval-diagram design system.
   Rendered by the {{< agent-tools >}} shortcode, driven by page front matter.
   Palette + fonts match docs/eval-diagrams (orange = tools, mint = agent/model,
   peach fill = the graded signals). Self-contained and responsive: chips stay a
   tight grid, two columns on a phone, more on desktop, and never clip a name. */

/* relative url()s: resolved against this file's /css/ directory, so they
   survive subpath hosting (GitHub Pages serves the site under /art-of-evals/) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Inter-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Inter-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/JetBrainsMono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/JetBrainsMono-500-latin.woff2) format('woff2'); }

.agent-tools {
  /* tokens sampled from docs/eval-diagrams/diagrams.css */
  --at-card: #ffffff;
  --at-card-bd: #e7e3d8;
  --at-ink: #16140f;
  --at-label: #2a2722;
  --at-muted: #73726c;
  --at-muted2: #8f8e88;
  --at-mint-fill: #e9f6f2;
  --at-mint-bd: #cfe9df;
  --at-orange: #f9a72a;
  --at-peach: #f9dfb8;
  --at-peach-bd: #e6a86a;
  --at-wire: #b9b5aa;
  --at-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --at-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  margin: 1.75rem 0;
  padding: clamp(16px, 3.5vw, 28px);
  background: var(--at-card);
  border: 1px solid var(--at-card-bd);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(22, 20, 15, 0.05);
  font-family: var(--at-sans);
  color: var(--at-ink);
}

.agent-tools .at-orch {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 12px 22px;
  background: var(--at-mint-fill);
  border: 1px solid var(--at-mint-bd);
  border-radius: 10px;
  text-align: center;
}
.agent-tools .at-orch-name {
  display: block;
  font-weight: 600;
  font-size: clamp(15px, 3vw, 17px);
  letter-spacing: -0.2px;
  color: var(--at-ink);
}
.agent-tools .at-orch-sub {
  display: block;
  font-size: 13px;
  color: var(--at-muted);
  margin-top: 2px;
}
.agent-tools .at-wire {
  width: 0;
  height: 18px;
  border-left: 2px dotted var(--at-wire);
  margin: 0 auto;
}

.agent-tools .at-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 4px 2px 12px;
  font-size: clamp(12.5px, 2.4vw, 14px);
  color: var(--at-muted);
  letter-spacing: 0.1px;
}

.agent-tools .at-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 9px 10px;
}
.agent-tools .at-chip {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 9px;
  background: transparent;
  border: 1.5px solid var(--at-peach-bd);
  border-radius: 8px;
  font-family: var(--at-mono);
  font-size: clamp(11.5px, 2.4vw, 12.5px);
  line-height: 1.2;
  color: var(--at-label);
  white-space: normal;
  overflow-wrap: anywhere;
  font-feature-settings: "liga" 0, "calt" 0;
}
.agent-tools .at-chip.hl {
  border-color: var(--at-orange);
  background: var(--at-peach);
  color: var(--at-ink);
}

.agent-tools .at-caption {
  margin-top: 14px;
  font-size: clamp(12px, 2.4vw, 13px);
  line-height: 1.5;
  color: var(--at-muted);
}