/* /agents: the Agent DJ docs page. Loaded only by that page, on top of site.css (same tokens, same hairlines, same mono). */
body.agents .page-main, body.agents .page-foot { max-width: 980px; }
.agents .page-main h3 { margin: clamp(34px, 5vh, 52px) 0 0; font: 400 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.agents .page-main h3 code { font-size: inherit; letter-spacing: .04em; text-transform: none; }
.agents .page-main h2 + p, .agents .page-main h3 + p { margin-top: 14px; }
.agents .essay-wide p, .agents .page-main p { max-width: 680px; }
.agents code { font: 400 12px/1.5 var(--mono); color: var(--ink); background: rgba(236, 231, 223, .07); border: 1px solid var(--line); padding: 0 5px; border-radius: 3px; overflow-wrap: anywhere; }
.agents pre.code { position: relative; margin: 18px 0 0; padding: 16px 18px; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); background: rgba(5, 5, 7, .82); }
.agents pre.code code { display: block; padding: 0; border: 0; background: none; border-radius: 0; font-size: 12px; line-height: 1.65; white-space: pre; color: var(--ink); overflow-wrap: normal; }
.agents pre.code:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.agents .copy { display: flex; align-items: center; margin: 14px 0 -6px auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 5, 7, .85); color: var(--mute); font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; }
.agents .copy:hover, .agents .copy:focus-visible { color: var(--ink); border-color: var(--ink); }
.agents .rules { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.agents .rules li { padding: 12px 0 13px; border-bottom: 1px solid var(--line); max-width: 680px; }
.agents .rules strong { font-weight: 400; color: var(--ink); }

.agents table.spec { width: 100%; margin: 20px 0 0; border-collapse: collapse; table-layout: auto; font-size: 12px; line-height: 1.6; }
.agents table.spec th { text-align: left; padding: 0 14px 10px 0; font: 400 10px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); }
.agents table.spec td { vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); color: var(--mute); overflow-wrap: break-word; }
.agents table.spec td:first-child { white-space: nowrap; }
.agents table.spec .vals { margin-left: 4px; color: var(--faint); font-size: 11px; }
.agents table.spec .none { color: var(--faint); }
.agents table.spec td code { white-space: nowrap; }
.agents table.spec td:nth-child(2) code + code { margin-left: 2px; }

@media (max-width: 760px) {
  .agents table.spec, .agents table.spec tbody, .agents table.spec tr, .agents table.spec td { display: block; }
  .agents table.spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .agents table.spec tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .agents table.spec td { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 0 12px; padding: 3px 0; border: 0; }
  .agents table.spec td::before { content: attr(data-label); font: 400 9.5px/1.9 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
  .agents table.spec td:first-child { white-space: normal; }
  .agents table.spec td:nth-child(2) code { white-space: normal; }
}