/* Hero infographics (apps/web/src/components/Hero.astro, lib/herosvg.ts). Colours come from the site tokens, so light and dark themes both work. */
.hero-fig{margin:18px 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.hero-cap{margin:0 0 8px;font-size:1.05rem;line-height:1.35}
.hero-art svg{display:block;width:100%;height:auto;max-width:980px}
.hero-data{margin:10px 0 4px}.hero-data summary{cursor:pointer;font-size:.9rem}
.hero-src{margin:8px 0 0}.hero-dl{margin-left:.6rem;white-space:nowrap}
.mini{display:block;width:100%;height:64px;background:var(--band);border-radius:6px}
@media(max-width:560px){.hero-fig{padding:12px}}
@media print{.hero-dl,.hero-data summary{display:none}}
.rx-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.rx-chip{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:.28rem .8rem;border-radius:999px;font:inherit;font-size:.88rem}.rx-chip:hover,.rx-chip:focus-visible{border-color:var(--c1)}
.rx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:12px 0}
.rx-card{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.rx-card.draft{border-style:dashed}
.rx-card h3{margin:0;font-size:1.02rem;line-height:1.3}.rx-card p{margin:0;font-size:.92rem}.rx-mini{margin-bottom:4px}
.hero-lazy img{display:block;width:100%;height:auto;max-width:760px;border-radius:6px;background:#fff}
.hero-lazy .hero-dl{display:inline-block;margin:6px 0 0}
.hero-lazy{padding:8px 14px}.hero-lazy summary{cursor:pointer;font-size:.92rem}.hero-lazy[open] img{margin-top:8px}