/* ─────────────────────────────────────────────────────────────
   InsightFuse · /agents — API & MCP page
   Loads after editorial.css and page.css; uses their tokens only.
   ───────────────────────────────────────────────────────────── */

.agx { padding-top: clamp(3rem, 6vw, 5rem); }
.agx + .agx { border-top: 1px solid var(--rule); }

.agx__intro { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.agx__h2 {
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin-top: 1.1rem;
  text-wrap: balance;
}
.agx__lede { margin-top: 1rem; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.agx__lede a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.agx__rows { display: grid; gap: 0; }
.agx__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.agx__copy p { font-size: var(--t-body); line-height: 1.62; color: var(--ink-2); }
.agx__copy p + p { margin-top: 0.9rem; }
.agx__copy code, .agx__fine code, .prose code, .spec code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  background: var(--paper-3);
  padding: 0.08em 0.35em;
  border-radius: 4px;
  color: var(--ink);
}
.agx__num {
  font-family: var(--f-mono);
  font-size: var(--t-label) !important;
  letter-spacing: var(--track-label);
  color: var(--violet) !important;
}
.agx__h3 {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0.5rem 0 0.9rem;
}
.agx__tool { margin-top: 1.1rem !important; font-size: var(--t-small) !important; color: var(--muted) !important; }

.agx__code {
  margin: 0;
  background: var(--ink);
  color: var(--dk-ink-2);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  padding: 1.25rem 1.35rem;
  border-radius: 10px;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
}
.agx__code:focus-visible { outline: 2px solid var(--violet-lift); outline-offset: 2px; }
.agx__code .c { color: var(--dk-muted); }
.agx__code .k { color: var(--violet-lift); }
.agx__code .s { color: var(--acid); }

.agx__clients {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.agx__client { min-width: 0; border-top: 2px solid var(--ink); padding-top: 1rem; }
.agx__client .agx__h3 { font-size: 1.15rem; }
.agx__client p { font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); margin-bottom: 0.8rem; }
.agx__client .agx__code + p { margin-top: 0.8rem; }
.agx__fine { color: var(--muted) !important; }

.agx__spec { margin-top: clamp(2.5rem, 5vw, 3.5rem); overflow-x: auto; }
.agx__spec td:first-child { white-space: nowrap; }

@media (max-width: 900px) {
  .agx__row { grid-template-columns: minmax(0, 1fr); }
  .agx__clients { grid-template-columns: minmax(0, 1fr); }
}