/* secondary pages: /agents and /docs (share tokens and top bar with style.css) */
html:has(body.page) { overflow: auto; height: auto; }
body.page { overflow: visible; height: auto; min-height: 100%; padding-top: var(--top); }
a { color: var(--amber2); }
.btn { display: inline-block; border: 1px solid var(--line2); padding: 6px 12px; font-size: 9.5px; letter-spacing: .16em; color: var(--text); text-decoration: none; background: none; }
.btn:hover { border-color: var(--amber); color: var(--amber2); }
.btn.primary { background: var(--amber); color: #15120c; border-color: var(--amber); font-weight: 700; }
.btn.primary:hover { background: var(--amber2); color: #15120c; }

/* ---------- agents ---------- */
main.agents { display: grid; grid-template-columns: 360px 1fr; min-height: calc(100vh - var(--top)); }
.alist-col { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.alist-col .tabs { display: flex; border-bottom: 1px solid var(--line); }
.alist-col .tabs button { flex: 1; padding: 10px 0; font-size: 9.5px; letter-spacing: .16em; color: var(--dim); border-right: 1px solid var(--line); }
.alist-col .tabs button:last-child { border-right: 0; }
.alist-col .tabs button.on { color: var(--amber); box-shadow: inset 0 -2px 0 var(--amber); }
.pad { padding: 10px 12px; }
.rows { flex: 1; overflow-y: auto; }
.arow { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.arow:hover { background: var(--panel2); }
.arow.on { background: #19160f; box-shadow: inset 2px 0 0 var(--amber); }
.arow canvas { width: 42px; height: 27px; image-rendering: pixelated; background: #24211d; }
.arow b { display: block; font-size: 10.5px; letter-spacing: .06em; }
.arow em { display: block; font-style: normal; color: var(--dim); font-size: 9.5px; }
.arow .num { text-align: right; font-variant-numeric: tabular-nums; }
.arow.mine .nm b { color: #9fe08f; }
.detail { padding: 24px 28px 40px; max-width: 1000px; }
.empty { padding: 80px 0; color: var(--dim); }
.empty .big { color: var(--text); letter-spacing: .1em; font-size: 22px; margin-bottom: 8px; }
.dhead { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.stage { height: 132px; background: #24211d linear-gradient(transparent 0 70%, #2f2a24 70%); border: 1px solid var(--line2); display: grid; place-items: center; }
.stage canvas { width: 168px; height: 108px; image-rendering: pixelated; }
.kicker { font-size: 9.5px; letter-spacing: .2em; }
.dt h1 { margin: 2px 0 6px; font-size: 28px; font-weight: 500; letter-spacing: .04em; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .14em; color: var(--dim); }
.status i { width: 6px; height: 6px; background: var(--faint); }
.status.live { color: var(--ok); } .status.live i { background: var(--ok); animation: blink 1.4s steps(2) infinite; }
.dt .task { color: var(--amber2); margin: 8px 0 12px; }
.dt .acts { display: flex; gap: 6px; margin-top: 10px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin-top: 20px; }
.card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 14px; }
.card span { font-size: 8.5px; letter-spacing: .16em; color: var(--dim); }
.card b { display: block; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.card em { font-style: normal; color: var(--dim); font-size: 9.5px; }
.sec2 { margin-top: 24px; }
.sec2 h3 { font-size: 9px; font-weight: 500; letter-spacing: .18em; color: var(--dim); margin: 0 0 10px; }
.wb { display: grid; grid-template-columns: 140px 70px 1fr; gap: 10px; align-items: center; padding: 3px 0; }
.wb span { color: var(--dim); } .wb b { text-align: right; font-variant-numeric: tabular-nums; }
.wb i { height: 4px; background: var(--line); display: block; } .wb i em { display: block; height: 100%; }

/* ---------- docs ---------- */
main.docs { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; padding: 32px 28px 80px; }
.toc { position: sticky; top: calc(var(--top) + 24px); align-self: start; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.toc .tl { font-size: 9px; letter-spacing: .2em; color: var(--dim); padding: 0 0 8px 12px; }
.toc a { color: var(--dim); text-decoration: none; padding: 4px 12px; font-size: 10.5px; margin-left: -1px; border-left: 1px solid transparent; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--amber); border-left-color: var(--amber); }
article section { padding: 6px 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 26px; scroll-margin-top: calc(var(--top) + 20px); }
article .kicker { color: var(--amber); }
article h2 { font-size: 22px; font-weight: 500; margin: 2px 0 12px; letter-spacing: .02em; }
article h4 { margin: 16px 0 4px; font-weight: 500; }
article p, article li { color: #c3beb1; line-height: 1.7; font-size: 11.5px; }
article ol, article ul { padding-left: 18px; }
article code { background: var(--panel2); border: 1px solid var(--line2); padding: 0 4px; color: var(--amber2); }
article table.t { margin: 12px 0; table-layout: auto; }
article table.t td, article table.t th { white-space: normal; padding: 6px 8px 6px 0; vertical-align: top; }
.callout { border: 1px solid var(--line2); border-left: 2px solid var(--teal); padding: 10px 14px; margin: 14px 0; color: #c3beb1; background: var(--panel); line-height: 1.6; }
.callout.warn { border-left-color: var(--amber); }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: 12px 0; }
.ccard { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px; }
.ccard b { letter-spacing: .12em; font-size: 10.5px; } .ccard p { margin: 6px 0; font-size: 10.5px; } .ccard em { font-style: normal; color: var(--dim); font-size: 9.5px; }

@media (max-width: 900px) {
  main.agents { grid-template-columns: 1fr; } .alist-col { max-height: 45vh; }
  .grid { grid-template-columns: 1fr 1fr; } .dhead { grid-template-columns: 1fr; }
  main.docs { grid-template-columns: 1fr; } .toc { display: none; }
}