/* THE CASE STUDY VOCABULARY — `.cs-*`, for /case-studies and its tenant pages.
 *
 * Linked after landing.css, whose tokens it uses (--wf-*, --io-*, --ui). Like
 * products.css it defines no tokens and no colour literals (ADR 0007); the
 * swatches' colours are the tenant's own data, set inline by the page.
 *
 * The feed is a masonry of CSS columns: cards keep their natural height (a
 * 2,700px screenshot beside a three-line variable), and `break-inside: avoid`
 * keeps each card whole. */

.cs-page{padding:36px 0 96px}
.cs-crumb{display:flex;gap:8px;font:500 10px/1 var(--io-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-fg-subtle)}
.cs-crumb a{color:var(--wf-fg-muted);text-decoration:none}
.cs-crumb a:hover{color:var(--io-accent)}

.cs-hero{margin-top:28px;max-width:80ch}
.cs-eyebrow{font:700 9px/1 var(--io-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--io-accent);margin:0 0 12px}
.cs-h1{font:500 44px/1.05 var(--io-display);letter-spacing:-.03em;color:var(--wf-fg);margin:0}
.cs-lead{font:400 17px/1.55 var(--ui);color:var(--wf-fg-muted);margin:14px 0 0}
.cs-sum{font:400 14px/1.65 var(--ui);color:var(--wf-fg-subtle);margin:12px 0 0}
.cs-stats{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cs-stats li{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border:1px solid var(--wf-border);border-radius:10px;background:var(--wf-surface);min-width:120px}
.cs-stats b{font:600 24px/1 var(--io-display);color:var(--wf-fg)}
.cs-stats span{font:500 9px/1 var(--io-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-fg-subtle)}
.cs-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.cs-btn{display:inline-flex;align-items:center;padding:10px 16px;border-radius:8px;font:600 13px/1 var(--ui);
  text-decoration:none;background:var(--io-accent);color:var(--wf-bg)}
.cs-btn-ghost{background:transparent;color:var(--wf-fg);border:1px solid var(--wf-border)}
.cs-btn:hover{filter:brightness(1.08)}

.cs-facts{margin-top:34px;padding:18px 20px;border:1px solid var(--wf-border);border-radius:12px;background:var(--wf-surface)}
.cs-facts h2{font:700 9px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--io-accent);margin:0 0 12px}
.cs-facts ul{margin:0;padding-left:18px;columns:2 320px;column-gap:32px}
.cs-facts li{font:400 13.5px/1.6 var(--ui);color:var(--wf-fg-muted);break-inside:avoid;margin-bottom:6px}

/* ── the filter: radio chips, no script ─────────────────────────────────── */
.cs-filter{position:sticky;top:calc(var(--nav-h, 50px) + 6px);z-index:5;display:flex;flex-wrap:wrap;gap:8px;
  margin:34px 0 18px;padding:10px 0;background:var(--wf-bg)}
.cs-chip input{position:absolute;opacity:0;pointer-events:none}
.cs-chip label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:8px 13px;border-radius:999px;
  font:500 12.5px/1 var(--ui);color:var(--wf-fg-muted);border:1px solid var(--wf-border);background:var(--wf-surface)}
.cs-chip small{font:500 10px/1 var(--io-mono);color:var(--wf-fg-subtle)}
.cs-chip input:checked + label{color:var(--wf-bg);background:var(--io-accent);border-color:var(--io-accent)}
.cs-chip input:checked + label small{color:var(--wf-bg)}
.cs-chip input:focus-visible + label{outline:2px solid var(--io-accent);outline-offset:2px}
.cs-page:has(#cs-f-frontend:checked) .cs-card:not([data-cat="frontend"]),
.cs-page:has(#cs-f-backend:checked) .cs-card:not([data-cat="backend"]),
.cs-page:has(#cs-f-workflows:checked) .cs-card:not([data-cat="workflows"]),
.cs-page:has(#cs-f-brand:checked) .cs-card:not([data-cat="brand"]),
.cs-page:has(#cs-f-libraries:checked) .cs-card:not([data-cat="libraries"]),
.cs-page:has(#cs-f-variables:checked) .cs-card:not([data-cat="variables"]){display:none}

/* ── the feed ───────────────────────────────────────────────────────────── */
.cs-feed{columns:4 300px;column-gap:14px}
.cs-card{break-inside:avoid;margin:0 0 14px;display:flex;flex-direction:column;gap:8px;padding:12px;
  border:1px solid var(--wf-border);border-radius:12px;background:var(--wf-surface);overflow:hidden}
.cs-card img{display:block;width:100%;height:auto;border-radius:8px;background:var(--wf-bg-sunken)}
.cs-card figcaption{display:flex;flex-direction:column;gap:4px}
.cs-card b{font:600 14px/1.3 var(--io-display);color:var(--wf-fg)}
.cs-card code{font:500 10.5px/1.4 var(--io-mono);color:var(--wf-fg-subtle);word-break:break-all}
.cs-k{font:700 8.5px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--io-accent)}
.cs-shot a{display:block}
.cs-shot a:hover img{outline:2px solid var(--io-accent);outline-offset:-2px}

.cs-swatch{height:96px;border-radius:8px;border:1px solid var(--wf-border)}
.cs-scale{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;height:22px}
.cs-scale span{border-radius:3px}
.cs-font{margin:0;display:flex;flex-direction:column;gap:4px;font:500 22px/1.2 var(--ui);color:var(--wf-fg)}
.cs-font small{font:500 9px/1 var(--io-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-fg-subtle)}
.cs-mark img{background:var(--wf-fg);padding:18px;object-fit:contain;max-height:180px}

.cs-lib p{margin:0;font:400 13px/1.55 var(--ui);color:var(--wf-fg-muted)}
.cs-lib-name{font-size:17px!important}
.cs-meta{font:500 10px/1 var(--io-mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--wf-fg-subtle)!important}
.cs-prompts{margin:0;padding-left:20px;font:400 12.5px/1.6 var(--ui);color:var(--wf-fg-muted)}
.cs-link{font:600 12.5px/1 var(--ui);color:var(--io-accent);text-decoration:none}

.cs-vars dl{margin:0;display:flex;flex-direction:column;gap:10px}
.cs-vars dt code{color:var(--io-accent)}
.cs-vars dd{margin:3px 0 0;font:400 12.5px/1.55 var(--ui);color:var(--wf-fg-muted)}

.cs-note{margin-top:30px;font:400 12.5px/1.6 var(--ui);color:var(--wf-fg-subtle);max-width:80ch}

/* ── the index ──────────────────────────────────────────────────────────── */
.cs-index{margin-top:34px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cs-tile{display:flex;flex-direction:column;border:1px solid var(--wf-border);border-radius:12px;overflow:hidden;
  background:var(--wf-surface);text-decoration:none;transition:border-color .16s,transform .16s}
.cs-tile:hover{border-color:var(--io-accent);transform:translateY(-3px)}
.cs-tile img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--wf-bg-sunken)}
.cs-tile-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.cs-tile-body b{font:600 17px/1.2 var(--io-display);color:var(--wf-fg)}
.cs-tile-body span{font:400 13px/1.5 var(--ui);color:var(--wf-fg-muted)}
.cs-tile-body small{font:500 10px/1 var(--io-mono);letter-spacing:.08em;color:var(--wf-fg-subtle)}

@media (max-width:640px){
  .cs-h1{font-size:32px}
  .cs-feed{columns:1}
}