/* Case study page (/case-study). Loaded after site.css. */
/* Case study. Built on site.css: the guide's column and type, the app's lamps for
   state, lavender for TaskWire and a quiet grey for "without". */
.cs { --with: var(--lavender); --without: #6c7079; }
.cs-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 8px 0 0; }
.cs-stat { padding: 22px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-1); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-stat b { font: 400 clamp(32px, 4vw, 44px)/1 var(--display); letter-spacing: -.04em; color: var(--text); }
.cs-stat span { color: var(--muted); font-size: 15px; }
.cs-stat.lead { border-color: rgb(195 202 255 / .35); background: linear-gradient(180deg, rgb(52 70 240 / .16), var(--ink-1)); }
.cs-stat.lead b { color: var(--lavender); }
.cs-body { list-style: none; margin: 72px 0 0; padding: 0; display: flex; flex-direction: column; gap: 72px; }
.cs-body > section h2 { margin: 0 0 14px; font: 400 32px/1.1 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.cs-body p, .cs-body li { color: #c4c8d4; text-wrap: pretty; }
.cs-body p { margin: 0 0 14px; max-width: 680px; }
.cs-body ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.cs-body b { color: var(--text); font-weight: 600; }
.cs-body code { font: 13.5px var(--mono); padding: 2px 6px; border-radius: 5px; background: var(--ink-2); border: 1px solid var(--line); color: #d7dafc; }
.cs .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .95em; }
.cs-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 22px; }
.cs-fig { margin: 0; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-1); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs-fig h3 { margin: 0; font: 600 17px/1.2 var(--display); letter-spacing: -.01em; color: var(--text); }
.cs-fig figcaption { color: var(--dim); font-size: 14px; }
.cs-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 14px; }
.cs-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; background: var(--c); }
.cs-legend .k-with { --c: var(--with); }
.cs-legend .k-without { --c: var(--without); }
.cs td.note { text-align: left; font-family: var(--body); color: var(--muted); }
.cs-method { margin-top: 16px !important; }
.cs-cta { justify-content: flex-start; }
.cs-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.cs-fig svg text { font: 13px var(--body); fill: var(--muted); }
.cs-fig svg .val { font: 500 13px var(--mono); fill: var(--text); }
.cs-fig svg .axis { stroke: var(--line-2); }
.cs-bar:hover, .cs-bar:focus { opacity: .8; outline: none; }
.cs-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-1); }
.cs-fig .cs-table-wrap { border: 0; background: none; }
.cs table { border-collapse: collapse; width: 100%; font-size: 14px; }
.cs .wide table { min-width: 720px; }
.cs th, .cs td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cs th:first-child, .cs td:first-child { text-align: left; }
.cs th { color: var(--dim); font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.cs td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: #d7dafc; }
.cs td:first-child { font-family: var(--body); color: var(--text); }
.cs tr:last-child td { border-bottom: 0; }
.cs tr.with td:first-child::before, .cs tr.without td:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.cs tr.with td:first-child::before { background: var(--with); }
.cs tr.without td:first-child::before { background: var(--without); }
.cs-day { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-1); }
.cs-method { color: var(--dim) !important; font-size: 14px; }
#cs-tip { position: fixed; z-index: 20; pointer-events: none; padding: 7px 10px; border-radius: var(--r-sm); background: var(--text); color: var(--mint-ink); font: 13px/1.4 var(--body); max-width: 260px; }
@media (prefers-reduced-motion: reduce) { .cs * { transition: none !important; } }
.cs .wide th, .cs .wide td { padding: 10px 9px; }
.cs .wide table { font-size: 13.5px; }
.cs-fig th, .cs-fig td { padding: 10px 8px; }