/* Generated by scripts/build-case-studies.mts - edit the template there, not here. */
/* Wider than the guides. A case study carries diagrams drawn 1,400px across, and
   the reading column stays at its own measure regardless, so the extra width is
   spent entirely on the figures and the rail. */
.wrap.doc.cs{max-width:1540px}
.cs{--measure:740px}
.cs .doc-main{max-width:none}
/* Everything reads at the measure; figures, tables, code and the debug blocks
   break out to fill the column.
   The :not(.sec) on the first rule is load-bearing and its absence was a real
   bug. (No backticks anywhere in this block - it is a TS template literal and
   one would end the string, which is exactly how this edit failed the first
   time. Same trap as guides.css and the SQL schema in db.ts.)
   a section is itself a direct child of .doc-main, so without it the SECTION got
   capped at the measure and nothing inside could ever exceed it. Every diagram
   rendered at 740px - which for a drawing 1,440px wide means its labels land
   around 8px - and the page carried roughly 370px of dead channel beside every
   paragraph. Both symptoms, one missing selector. */
.cs .doc-main>*:not(.sec):not(.fig-wide):not(.tw):not(.short){max-width:var(--measure)}
.cs .sec>*:not(.fig-wide):not(.tw):not(.dbg):not(.code){max-width:var(--measure)}
/* The heading and the answer stay at the measure even though the section does
   not: a 1,050px line of text is harder to read, not easier. */
.cs .sec>h2,.cs .sec>.answer{max-width:var(--measure)}
.kicker{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.cs h1{font-size:clamp(32px,4.6vw,52px);max-width:18ch;margin-bottom:20px}
.opening p{font-size:19.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 14px}
.opening p:first-child{color:var(--ink)}
.byline{margin:20px 0 0;font-size:14.5px;color:var(--ink-faint);border-top:1px solid var(--hairline);padding-top:14px}
.byline a{color:var(--ink-soft)}
/* THE SUMMARY BLOCK IS SCOPE AND DECISIONS, NOT WINS. It is the passage most
   likely to be lifted whole by an answer engine, which is exactly why it must
   not be the place the outcome numbers live: a number quoted without the
   mechanism that earned it is the thing a technical reader discounts first. */
.short{margin:34px 0 8px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--wash);padding:22px 26px 8px;max-width:920px}
.short h2{margin:0 0 12px;border:0;padding:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.short ul{list-style:none;margin:0;padding:0}
.short li{position:relative;padding-left:22px;margin:0 0 12px;font-size:16.5px;line-height:1.58;color:var(--ink)}
.short li:before{content:"";position:absolute;left:0;top:.66em;width:8px;height:2px;background:var(--accent)}
.sec{margin-top:14px}
.sec h2{display:flex;gap:16px;align-items:baseline;font-size:clamp(22px,2.4vw,28px);margin:46px 0 16px;padding-top:26px}
/* A numeral in the gutter, not a bullet in the flow. It gives the page a spine
   a reader can scan without adding a word to the heading. Hidden from assistive
   tech: "07" read aloud before a heading is noise, not structure. */
.sec-n{flex:none;font:700 13px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-faint);letter-spacing:.06em}
/* The answer, given its own look so it cannot quietly become an introduction. */
.answer{font-size:18.5px;line-height:1.6;color:var(--ink);border-left:3px solid var(--accent);padding-left:18px;margin:0 0 20px}
.sec p,.sec li{font-size:16.5px;line-height:1.7}
.sec h3{font-size:18px;margin:28px 0 8px}
.ticks{list-style:none;margin:0 0 14px;padding:0}
.ticks li{position:relative;padding-left:26px;margin:0 0 10px}
.ticks li:before{content:"";position:absolute;left:4px;top:.66em;width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:.5}
.steps{margin:0 0 14px;padding-left:24px}
.steps li{margin:0 0 10px;padding-left:4px}
/* Problem / tried / worked. The third row is the only one with a fill, because
   it is the only one a skimming reader needs to find. */
.dbg{margin:24px 0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;max-width:920px}
.dbg-r{padding:15px 20px;border-bottom:1px solid var(--hairline);background:var(--paper)}
.dbg-r:last-child{border-bottom:0}
.dbg-k{margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.dbg-r p:last-child{margin:0;font-size:16px;line-height:1.62;color:var(--ink-soft)}
.dbg-win{background:var(--wash)}
.dbg-win .dbg-k{color:var(--ok)}
.dbg-win p:last-child{color:var(--ink)}
.callout{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);padding:16px 20px;margin:24px 0}
.callout h4{margin:0 0 6px;font-size:16px;color:var(--warn-ink)}
.callout p{margin:0;font-size:15.5px;color:var(--warn-ink)}
blockquote{margin:24px 0;padding:14px 20px;border-left:3px solid var(--hairline);background:var(--wash);border-radius:0 var(--radius) var(--radius) 0;font-size:16.5px;color:var(--ink-soft)}
blockquote cite{display:block;margin-top:8px;font-size:13.5px;font-style:normal;color:var(--ink-faint)}
.code{margin:24px 0;border-radius:var(--radius);overflow:hidden;background:#12151b;max-width:920px}
.code figcaption{padding:9px 16px;font:700 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;color:#8d95a3;border-bottom:1px solid #232833}
.code pre{margin:0;padding:16px 18px;overflow-x:auto}
.code code{font:400 13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e7eaf0;background:none;border:0;padding:0}
code{background:var(--wash);border:1px solid var(--hairline);border-radius:6px;padding:1px 5px;font:400 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.tw{margin:26px 0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.tw figcaption{padding:11px 16px;font-size:13px;color:var(--ink-faint);background:var(--wash);border-bottom:1px solid var(--hairline)}
/* A wide table scrolls inside its own box. The page body must never scroll. */
.tw-scroll{overflow-x:auto}
.tw table{border-collapse:collapse;width:100%;font-size:15px}
.tw th,.tw td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--hairline);vertical-align:top}
.tw thead th{background:var(--wash);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.tw tbody th{font-weight:700;color:var(--ink)}
.tw tbody tr:last-child th,.tw tbody tr:last-child td{border-bottom:0}
/* THE DIAGRAMS GET MORE WIDTH THAN THE PROSE and they have to. These are drawn
   1,400px across with labels sized to survive the scale down; at the 740px
   reading measure their smallest text would land around 8px. The prose keeps its
   measure and the figure fills the column. */
.fig{margin:30px 0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.fig>a{display:block;line-height:0;cursor:zoom-in}
.fig img{display:block;width:100%;height:auto;background:#fff}
.fig figcaption{display:flex;gap:18px;align-items:baseline;justify-content:space-between;font-size:13.5px;line-height:1.55;color:var(--ink-faint);padding:12px 16px;border-top:1px solid var(--hairline)}
.fig figcaption a{white-space:nowrap;font-weight:700;text-decoration:none;border-bottom:1px solid var(--hairline)}
.fig figcaption a:after{content:" \2197"}
.faq dl{margin:0;max-width:var(--measure)}
.faq dt{margin:0}
.faq dt h3{margin:22px 0 6px;font-size:17.5px}
.faq dd{margin:0;padding-bottom:16px;border-bottom:1px solid var(--hairline);font-size:16px;line-height:1.68;color:var(--ink-soft)}
.rel{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rel li{border:1px solid var(--hairline);border-radius:var(--radius);padding:15px 18px}
.rel li a{font-weight:700;font-size:16.5px;text-decoration:none;color:var(--ink)}
.rel li a:hover{color:var(--accent-ink)}
.rel li p{margin:5px 0 0;font-size:15px;color:var(--ink-soft)}
.deps{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.deps span{font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--wash);border:1px solid var(--hairline);border-radius:999px;padding:3px 9px}
.border-note{border-top:1px solid var(--hairline);padding-top:14px;margin-top:22px}
.rail .fine{font-size:14px;line-height:1.5}
/* Index */
.cs-index .lead{max-width:760px;font-size:19px}
.cs-cards{display:grid;gap:20px;margin:34px 0 0}
.cs-card{display:flex;gap:22px;border:1px solid var(--hairline);border-radius:var(--radius);padding:26px 28px;background:var(--paper)}
.cs-n{flex:none;margin:6px 0 0;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-faint);letter-spacing:.06em}
.cs-card>div{min-width:0}
.cs-card h2{margin:0 0 12px;border:0;padding:0;font-size:clamp(22px,2.5vw,30px);line-height:1.2}
.cs-card h2 a{color:var(--ink);text-decoration:none}
.cs-card h2 a:hover{color:var(--accent-ink)}
.cs-sum{font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0 0 10px;max-width:66ch}
.cs-meta{font-size:14px;color:var(--ink-faint);margin:0 0 14px}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.cs-tags span{font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--wash);border:1px solid var(--hairline);border-radius:999px;padding:3px 9px}
.col-go{margin:0}
.go{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:15.5px;padding:11px 20px;border-radius:999px}
.go:hover{background:#000}
.who{margin-top:44px}
.who p{max-width:760px;font-size:16.5px;line-height:1.7;color:var(--ink-soft)}
@media(min-width:1000px){.cs .doc{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:719px){
  .cs-card{flex-direction:column;gap:10px;padding:22px 20px}
  .sec h2{gap:12px}
  .short{padding:18px 20px 6px}
}