/* Case study + index scoped styles. All colors driven from tokens.css so light and dark themes both work. */
.cs-index { display: grid; gap: 1.5rem; margin: 3rem 0; }
.cs-card { display: grid; gap: 0.75rem; }
.cs-card-head { display: flex; align-items: center; gap: 0.75rem; }
.cs-ref { color: var(--orange); letter-spacing: 0.08em; }
.cs-card-title { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.cs-card-title a { color: inherit; text-decoration: none; }
.cs-card-title a:hover { text-decoration: underline; }
.cs-card-dek { color: var(--muted); margin: 0; }
.cs-card-muted { opacity: 0.72; }

/* ---- CSR-002 case study components ---- */
.cs-hero-meta { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; font-size: 0.9rem; }
.cs-hero-meta dt { color: var(--orange); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); font-size: 0.72rem; }
.cs-hero-meta dd { margin: 0.25rem 0 0; font-weight: 600; }
.cs-callout { border-left: 3px solid var(--orange); background: var(--lift); color: var(--fg); padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin: 2rem 0; }
.cs-callout.is-dark { background: var(--fg); color: var(--canvas); border-left-color: var(--orange); }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 2rem 0; }
.cs-stat { border: 1px solid var(--hair); border-radius: 10px; padding: 1.25rem; }
.cs-stat-num { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.cs-stat-num.is-accent { color: var(--orange); }
.cs-stat-num.is-good { color: var(--green); }
.cs-stat-label { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }
.cs-hats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 2rem 0; }
.cs-hat { border: 1px solid var(--hair); border-radius: 10px; padding: 1rem 1.1rem; }
.cs-hat h3 { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.5rem; }
.cs-hat p { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.92rem; }
.cs-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--lift); }
.cs-tag.is-ro { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.cs-bars { margin: 2rem 0; display: grid; gap: 0.75rem; }
.cs-bar { display: grid; grid-template-columns: 1fr 2.4fr auto; gap: 1rem; align-items: center; }
.cs-bar-track { background: var(--lift); border-radius: 6px; height: 1.4rem; overflow: hidden; }
.cs-bar-fill { height: 100%; background: var(--orange); }
.cs-bar-fill.is-mid { background: var(--fg-3); }
.cs-bar-fill.is-good { background: var(--green); }
.cs-table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.cs-table th, .cs-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.cs-table thead th { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.cs-table .is-pending { color: var(--muted); font-style: italic; }
.cs-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.cs-rule { border: 1px solid var(--hair); border-radius: 10px; padding: 1.1rem 1.25rem; margin: 1rem 0; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.cs-rule-num { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--orange); }
.cs-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1.5rem 0; }
.cs-step { font-family: var(--font-mono); font-size: 0.8rem; border: 1px solid var(--hair); border-radius: 6px; padding: 0.4rem 0.7rem; }
.cs-sources { display: grid; gap: 1rem; margin: 1.5rem 0; }
.cs-source { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.cs-source-n { font-family: var(--font-mono); color: var(--orange); }
.cs-source-cite { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 0.25rem; }