/* For AI: a compact resource directory with details on demand. */
.ai-head { padding-bottom: 70px; }
.ai-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ai-resource { min-width: 0; padding: 28px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.ai-resource h2 { font-size: 1.65rem; margin-bottom: 14px; }
.ai-resource > p { color: var(--muted); min-height: 5em; }
.ai-resource > a { display: inline-block; font-size: 0.9375rem; }
.ai-resource details { border-top: 1px solid var(--rule); margin-top: 24px; }
.ai-resource summary, .ai-reading summary, .ai-tool summary { cursor: pointer; color: var(--ink); font-weight: 600; padding: 18px 0; }
.ai-resource details p, .ai-resource li { color: var(--muted); font-size: 0.9375rem; }
.ai-resource ul { padding-left: 20px; }
.ai-resource li { margin-bottom: 12px; }
.ai-scope { margin-top: 28px; color: var(--muted); font-size: 0.9375rem; max-width: 90ch; }
.ai-reading { max-width: 90ch; }
.ai-reading p { color: var(--muted); }
.ai-directory { max-width: 920px; }
.ai-directory > p { color: var(--muted); max-width: 75ch; margin-bottom: 30px; }
.ai-tool { border-top: 1px solid var(--rule); scroll-margin-top: 110px; }
.ai-tool:last-child { border-bottom: 1px solid var(--rule); }
.ai-tool summary { padding: 24px 0; font-size: 1.125rem; }
.ai-detail { padding-bottom: 24px; color: var(--muted); }
.ai-detail pre { padding: 20px; border: 1px solid var(--rule); background: var(--white); border-radius: 8px; overflow-x: auto; font: 0.875rem/1.6 var(--mono); }
.ai-detail code, .ai-method { font-family: var(--mono); font-size: 0.875rem; overflow-wrap: anywhere; color: var(--ink); }
.ai-resource summary:focus-visible, .ai-reading summary:focus-visible, .ai-tool summary:focus-visible, .ai-detail pre:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
@media (max-width: 1000px) { .ai-resource-grid { grid-template-columns: 1fr; } .ai-resource > p { min-height: 0; } }
@media (max-width: 600px) { .ai-resource { padding: 24px; } .ai-detail pre { padding: 14px; } }