/* AI100WEB — /agents + /agents/demo (2026-10-30). Scoped to .ag; uses the site palette variables only (no separate dark variant). */
[data-l][hidden]{display:none!important}
.ag{--ag-glass:color-mix(in srgb,var(--card) 70%,transparent);--ag-edge:color-mix(in srgb,var(--line) 75%,transparent);--ag-ease:var(--ux-ease,cubic-bezier(.22,1,.36,1))}
.ag .hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
.ag .cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ag-sync,.ag-live{margin:6px 0 0}
.ag-sync::before,.ag-live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:8px;vertical-align:middle;transition:background-color .2s var(--ag-ease)}
.ag-sync[data-state="ok"]::before,.ag-live[data-state="ok"]::before{background:var(--pine)}
.ag-sync[data-state="warn"]::before,.ag-live[data-state="warn"]::before{background:var(--copper)}
/* joined glass grid: one panel, 1px hairline dividers */
.ag-grid{display:grid;gap:1px;background:var(--ag-edge);border:1px solid var(--ag-edge);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(28,25,21,.04),0 14px 36px -18px rgba(28,25,21,.24)}
.ag-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.ag-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.ag-cell{background:color-mix(in srgb,var(--card) 92%,var(--paper));padding:clamp(20px,.9rem + 1.4vw,32px);min-width:0;transition:background-color .2s var(--ag-ease)}
@media (hover:hover){.ag-cell:hover{background:color-mix(in srgb,var(--card) 86%,var(--pine-soft))}}
.ag-cell h3{margin:0 0 6px;font-size:1.08rem;line-height:1.25}
.ag-cell>p{margin:.4em 0}
.ag-id{color:var(--muted);margin:0 0 8px!important;word-break:break-all}
.ag-pricebox{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ag-price{font:700 1.05rem var(--f-head);color:var(--ink)}
.ag-price.paid{color:var(--copper-ink)}
.ag-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px!important}
.ag-tag{font:500 .72rem var(--f-mono);color:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:2px 8px}
.ag-addr{font-size:.92rem;word-break:break-all;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.ag .kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:10px 0 0}
.ag .kv dt{color:var(--muted)}
.ag .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
@media (max-width:600px){.ag .kv{grid-template-columns:1fr;gap:0}.ag .kv dt{margin-top:8px}}
/* icons on the protocol cells (existing line icons) */
.ag-ico>h3{display:flex;align-items:center;gap:12px}
.ag-ico>h3::before{content:"";width:32px;height:32px;flex:none;background:var(--link);-webkit-mask:url(/icons/a2a.svg) center/contain no-repeat;mask:url(/icons/a2a.svg) center/contain no-repeat}
.ag-ico-mcp>h3::before{-webkit-mask-image:url(/icons/mcp.svg);mask-image:url(/icons/mcp.svg)}
.ag-ico-pay>h3::before{-webkit-mask-image:url(/icons/payment.svg);mask-image:url(/icons/payment.svg)}
/* glass cards */
.ag-glass{background:var(--ag-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--ag-edge)}
.ag pre{max-width:100%}
.ag-ev{font-size:.8rem;max-height:360px;margin-top:12px}
.ag-raw{margin-top:12px}
.ag-raw>summary{cursor:pointer;font-weight:600;font-size:.9rem;min-height:44px;display:flex;align-items:center;color:var(--link);transition:color .2s var(--ag-ease)}
.ag-raw>summary:hover{color:var(--ink)}
.ag-raw>summary:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:4px}
.ag-stephead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:0 0 4px}
.ag-sim{display:inline-flex;align-items:center;gap:6px;font:600 .74rem var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--copper-ink);border:1px solid currentColor;border-radius:99px;padding:3px 10px}
.ag-banner strong{text-transform:uppercase;letter-spacing:.04em}
.ag-k{font:600 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-ink);margin:0 0 10px!important}
.ag-flow .ag-cell{position:relative}
.ag-checks{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ag-checks li{overflow-wrap:anywhere}
.ag-ok{display:inline-block;min-width:3.4em;font:700 .72rem var(--f-mono);color:var(--pine)}
@media (prefers-reduced-motion:reduce){.ag-cell,.ag-raw>summary,.ag-sync::before,.ag-live::before{transition:none}}