/* AI agents gallery: the "AI agents" tab on /ai/blueprint/.
   Cards in the testingbuddy style (image, icon tile, status badge, title, one line,
   three check-mark bullets, footer), then one detail section per agent.
   Theme tokens only (--surface, --border, --ink, --muted, --accent...), so light and
   dark mode both work. Tool colours are mixed with the tokens, never used raw for text. */

/* --ag-hue defaults to the accent here and is overridden per card by an .ag-t-<tool> class */
.ag-gallery { --ag-hue:var(--accent); container: agal / inline-size; scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* ---------- Header ---------- */
.ag-head { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:4px 0 18px; }
.ag-head h2 { margin:0; font-size:clamp(1.55rem,3.2vw,2.15rem); line-height:1.12; letter-spacing:-0.02em; color:var(--ink); font-weight:700; text-wrap:balance; }
.ag-head h2 em { font-style:italic; color:var(--accent); font-weight:600; }
.ag-head p { margin:0; max-width:72ch; color:var(--muted); font-size:0.98rem; line-height:1.65; }
.ag-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:2px 0 0; padding:0; list-style:none; font-size:0.8rem; color:var(--muted); }
.ag-legend li { display:inline-flex; align-items:center; gap:7px; }

/* ---------- Toolbar: chips + search ---------- */
.ag-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 10px; }
.ag-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ag-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--ink-soft); font:inherit; font-size:0.84rem; font-weight:600; cursor:pointer; transition:background 0.14s ease, border-color 0.14s ease, color 0.14s ease; }
.ag-chip:hover { border-color:var(--accent); color:var(--accent-strong); }
.ag-chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.ag-chip-count { min-width:20px; padding:0 6px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:0.72rem; line-height:18px; text-align:center; font-variant-numeric:tabular-nums; }
.ag-chip[aria-pressed="true"] .ag-chip-count { background:color-mix(in srgb, var(--bg) 24%, transparent); color:var(--bg); }
.ag-search { position:relative; display:flex; align-items:center; flex:0 1 320px; min-width:min(100%, 220px); }
.ag-search svg { position:absolute; left:11px; width:16px; height:16px; color:var(--muted); pointer-events:none; }
.ag-search input { width:100%; padding:9px 12px 9px 34px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:0.9rem; }
.ag-search input::placeholder { color:var(--muted-2); }
.ag-chip:focus-visible, .ag-search input:focus-visible, .ag-view:focus-visible, .ag-detail-links a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ag-status { margin:0 0 14px; min-height:1.3em; font-size:0.84rem; color:var(--muted); }

/* ---------- Tool colours ---------- */
.ag-t-n8n { --ag-hue:#e0436b; }
.ag-t-langflow { --ag-hue:#7c4dff; }
.ag-t-langchain { --ag-hue:#0f8f7e; }
.ag-t-langgraph { --ag-hue:#2563eb; }
.ag-t-crewai { --ag-hue:#e8590c; }
.ag-t-mcp { --ag-hue:#0e7490; }
.ag-t-rag { --ag-hue:#b7791f; }
.ag-t-app { --ag-hue:#15803d; }
.ag-t-skill { --ag-hue:#64748b; }
[data-theme="dark"] .ag-t-n8n { --ag-hue:#ff7d9c; }
[data-theme="dark"] .ag-t-langflow { --ag-hue:#a98bff; }
[data-theme="dark"] .ag-t-langchain { --ag-hue:#3cc8b4; }
[data-theme="dark"] .ag-t-langgraph { --ag-hue:#6f9bff; }
[data-theme="dark"] .ag-t-crewai { --ag-hue:#ff9a5c; }
[data-theme="dark"] .ag-t-mcp { --ag-hue:#4fc3dc; }
[data-theme="dark"] .ag-t-rag { --ag-hue:#e6b45a; }
[data-theme="dark"] .ag-t-app { --ag-hue:#5ccf86; }
[data-theme="dark"] .ag-t-skill { --ag-hue:#a3b1c6; }

/* ---------- Card grid: 3 columns, 2 on tablets, 1 on phones ---------- */
.ag-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap:18px; }
.ag-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.ag-card:hover { border-color:color-mix(in srgb, var(--ag-hue) 55%, var(--border)); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ag-card[hidden] { display:none !important; }
.ag-thumb { margin:12px 12px 0; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.ag-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.ag-ph { width:100%; height:100%; display:grid; place-items:center; color:color-mix(in srgb, var(--ag-hue) 80%, var(--ink));
  background:radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--ag-hue) 24%, transparent), transparent 58%),
             linear-gradient(135deg, color-mix(in srgb, var(--ag-hue) 12%, var(--surface)), var(--surface-2)); }
.ag-ph svg { width:54px; height:54px; opacity:0.9; }
.ag-card-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:14px 16px 4px; }
.ag-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ag-icon { display:inline-grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:11px; border:1px solid color-mix(in srgb, var(--ag-hue) 26%, transparent); background:color-mix(in srgb, var(--ag-hue) 13%, var(--surface)); color:color-mix(in srgb, var(--ag-hue) 82%, var(--ink)); }
.ag-icon svg { width:20px; height:20px; }
.ag-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:0.68rem; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; white-space:nowrap; }
.ag-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ag-badge.is-ready { background:#dcfce7; color:#166534; }
.ag-badge.is-spec { background:#fef3c7; color:#92400e; }
[data-theme="dark"] .ag-badge.is-ready { background:rgba(34,197,94,0.18); color:#86efac; }
[data-theme="dark"] .ag-badge.is-spec { background:rgba(245,158,11,0.18); color:#fcd34d; }
.ag-card-title { margin:2px 0 0; font-size:1.05rem; line-height:1.3; color:var(--ink); letter-spacing:-0.005em; }
.ag-card-line { margin:0; font-size:0.88rem; line-height:1.55; color:var(--ink-soft); }
.ag-checks { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:7px; }
.ag-checks li { position:relative; padding-left:25px; font-size:0.84rem; line-height:1.45; color:var(--ink-soft); }
.ag-checks li::before { content:""; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; background:color-mix(in srgb, var(--accent) 17%, transparent); }
.ag-checks li::after { content:""; position:absolute; left:6px; top:4px; width:4px; height:8px; border:solid var(--accent-strong); border-width:0 2px 2px 0; transform:rotate(45deg); }
.ag-card-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding:12px 16px 14px; border-top:1px solid var(--border); }
.ag-tool { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--ag-hue) 28%, transparent); background:color-mix(in srgb, var(--ag-hue) 12%, var(--surface)); color:color-mix(in srgb, var(--ag-hue) 75%, var(--ink)); font-size:0.74rem; font-weight:700; white-space:nowrap; }
.ag-ch { font-size:0.78rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.ag-view { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:0.85rem; font-weight:700; color:var(--accent-strong); text-decoration:none; white-space:nowrap; }
.ag-view svg { width:15px; height:15px; transition:transform 0.15s ease; }
.ag-view:hover { text-decoration:underline; }
.ag-view:hover svg { transform:translateX(2px); }
.ag-empty { margin:6px 0 0; padding:22px; border:1px dashed var(--border-strong); border-radius:14px; text-align:center; color:var(--muted); }
.ag-empty[hidden] { display:none; }
.ag-empty p { margin:0 0 10px; }

/* ---------- Detail sections ---------- */
.ag-details-head { margin:44px 0 14px; display:flex; flex-direction:column; gap:4px; }
.ag-details-head h2 { margin:0; font-size:1.35rem; color:var(--ink); letter-spacing:-0.01em; }
.ag-details-head p { margin:0; font-size:0.92rem; color:var(--muted); }
.ag-detail { margin:0 0 22px; padding:20px; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--topbar-h) + 16px); }
.ag-detail:target { border-color:var(--ag-hue); box-shadow:0 0 0 3px color-mix(in srgb, var(--ag-hue) 22%, transparent); }
.ag-detail-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; }
@container agal (min-width: 900px) {
  .ag-detail-grid { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start; }
}
.ag-detail-media { display:flex; flex-direction:column; gap:14px; min-width:0; }
.ag-figure { margin:0; aspect-ratio:16 / 9; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; }
.ag-figure img { display:block; width:100%; height:100%; object-fit:cover; }
.ag-figure .ag-ph svg { width:72px; height:72px; }
.ag-detail-media .learn-diagram { margin:0; padding:10px; }
.ag-detail-media .learn-diagram .mermaid { padding:6px; }
.ag-detail-body { min-width:0; }
.ag-detail-num { font-family:"JetBrains Mono", ui-monospace, monospace; font-size:0.74rem; letter-spacing:0.08em; color:var(--muted); }
.ag-detail-body h3 { margin:2px 0 10px; font-size:1.35rem; line-height:1.25; color:var(--ink); letter-spacing:-0.01em; }
.ag-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:4px; }
.ag-meta-chip { display:inline-flex; align-items:center; padding:3px 9px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--ink-soft); font-size:0.74rem; font-weight:600; }
.ag-detail-body h4 { margin:18px 0 6px; font-size:0.76rem; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); }
.ag-detail-body p { margin:6px 0; color:var(--ink-soft); font-size:0.93rem; line-height:1.7; }
.ag-detail-body p code, .ag-steps code, .ag-detail-body td code, .ag-note code { background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:0.84rem; }
/* long identifiers and URLs in running text may break on narrow screens; code panels scroll instead */
.ag-detail-body :not(pre) > code { overflow-wrap:anywhere; }
.ag-result { padding:10px 12px; border-left:3px solid var(--ag-hue); border-radius:0 10px 10px 0; background:var(--surface-2); }
.ag-steps { list-style:none; margin:6px 0; padding:0; display:grid; gap:8px; counter-reset:agstep; }
.ag-steps li { counter-increment:agstep; position:relative; padding-left:34px; color:var(--ink-soft); font-size:0.92rem; line-height:1.6; }
.ag-steps li::before { content:counter(agstep); position:absolute; left:0; top:1px; width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb, var(--ag-hue) 14%, var(--surface)); color:color-mix(in srgb, var(--ag-hue) 75%, var(--ink)); font-family:"JetBrains Mono", ui-monospace, monospace; font-size:0.76rem; font-weight:800; }
.ag-note { margin:6px 0; padding:10px 12px; border:1px dashed var(--border-strong); border-radius:10px; color:var(--ink-soft); font-size:0.9rem; line-height:1.65; }
.ag-detail-body .compare-table { font-size:0.84rem; }
.ag-detail-body .compare-table th, .ag-detail-body .compare-table td { padding:8px 10px; }
.ag-detail-body .compare-table td code { overflow-wrap:anywhere; }
.ag-detail-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:14px; border-top:1px dashed var(--border-strong); }
.ag-detail-links .tta-button { height:36px; padding:0 14px; font-size:0.86rem; }

@media (max-width: 640px) {
  .ag-detail { padding:14px; }
  .ag-search { flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-card, .ag-view svg { transition:none; }
  .ag-card:hover { transform:none; }
}