/* Case-study pages (greenroom.html, quantmechanix.html). Loaded after styles.css and work.css: the steppers,
   the migration diagram (.vv, .diagram .dg-cols) and screenshot links come from those; everything here is cs-.
   Layer 1 is for everyone (lead, the four steps, each track's sentences, diagram and What's built). Layer 2 is the
   Engineering detail <details> in each track. Diagrams use the hero's line language: hairlines plus one heavy stroke. */

.cs-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Lead ── */
.cs-lead { padding-top: 40px; padding-bottom: 88px; }
.cs-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.cs-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line); }
.cs-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 4px; }
.cs-crumbs a:hover { color: var(--text); text-decoration-color: currentColor; }
.cs-lead-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; margin-top: 28px; }
.cs-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cs-mark a { display: inline-flex; align-items: center; padding: 5px 0; margin: -5px 0; }
.cs-mark img { height: 32px; width: auto; }
.cs-state { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 9px; border: 1px solid var(--text-3); border-radius: 999px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--text); white-space: nowrap; }
.cs-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs-lead h1 { margin-top: 36px; font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.cs-lede { margin-top: 22px; max-width: 30em; font-size: 19px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.cs-role { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--text-3); }
.cs-jump { margin-top: 26px; }
.cs-hero { margin: 0; }
.cs-hero .shot { overflow: hidden; background: #0b0b0b; border: 1px solid var(--line); border-radius: 10px; }
.cs-hero figcaption, .cs-figcap { margin-top: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-3); }
@media (max-width: 900px) {
  .cs-lead { padding-bottom: 64px; }
  .cs-lead-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 16px; }
  .cs-lead h1 { margin-top: 28px; }
  .cs-lede { font-size: 18px; }
}

/* ── The story in four steps: a ruled strip; the rail and each step's heavy stroke draw once on entry ── */
.cs-story { padding: 88px 0 96px; border-top: 1px solid var(--line); }
.cs-story h2 { max-width: 20em; }
.cs-steps-wrap { position: relative; margin-top: 44px; }
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; counter-reset: cs-step; }
.cs-steps-rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); pointer-events: none; }
.cs-steps-rail span { position: absolute; inset: 0; background: var(--text); transform-origin: left center; }
.cs-step { position: relative; counter-increment: cs-step; padding-top: 30px; }
.cs-step::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; box-sizing: border-box; border: 1px solid var(--text-2); border-radius: 50%; background: var(--bg); }
.cs-step .n { display: block; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.cs-step .n::before { content: counter(cs-step, decimal-leading-zero); }
.cs-ico { display: block; width: 88px; height: 54px; margin-top: 18px; overflow: visible; }
.cs-step p { margin-top: 20px; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
@media (max-width: 1000px) and (min-width: 641px) {
  .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; }
  .cs-steps-rail { display: none; }
  .cs-step { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .cs-story { padding: 64px 0 72px; }
  .cs-steps-wrap { margin-top: 32px; }
  .cs-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cs-steps-rail { left: 4px; right: auto; top: 4px; bottom: 28px; width: 1px; height: auto; }
  .cs-steps-rail span { transform-origin: center top; }
  .cs-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 0 14px; padding: 0 0 32px 28px; }
  .cs-step:last-child { padding-bottom: 0; }
  .cs-step::before { top: 0; }
  .cs-step .n { grid-column: 1 / -1; line-height: 9px; }
  .cs-ico { width: 64px; height: 40px; margin-top: 14px; }
  .cs-step p { margin-top: 12px; font-size: 20px; }
}

/* Line language, shared by the step icons and the track diagrams */
.cs-ico .hl, .cs-dg .hl { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.cs-ico .hl2, .cs-dg .hl2 { fill: none; stroke: var(--line); stroke-width: 1; }
.cs-ico .ink, .cs-dg .ink { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-ico .dot, .cs-dg .dot { fill: var(--text); }
.cs-ico .ring, .cs-dg .ring { fill: var(--bg); stroke: var(--text-3); stroke-width: 1; }
.cs-dg .post { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; }
.cs-dg .box { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.cs-dg .dash { stroke-dasharray: 4 4; }
.cs-dg text { font-family: var(--mono); font-size: 13px; fill: var(--text-2); }
.cs-dg .t1 { fill: var(--text); }
.cs-dg .t3 { fill: var(--text-3); }
.cs-dg--tall text { font-size: 13.2px; }

/* Drawing once: the heavy strokes start undrawn while JavaScript is on and motion is allowed, and draw when
   case.js marks their block as seen. Without JavaScript, with reduced motion and in print they are simply drawn. */
.cs-ico .ink, .cs-dg .ink { stroke-dasharray: 1.2 1.2; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-draw]:not(.is-drawn) .ink { stroke-dashoffset: 1.2; }
  .js [data-draw]:not(.is-drawn) .cs-steps-rail span { transform: scaleX(0); }
  .js [data-draw] .ink { transition: stroke-dashoffset 900ms cubic-bezier(0.65, 0, 0.35, 1); }
  .js [data-draw] .cs-steps-rail span { transition: transform 1300ms cubic-bezier(0.65, 0, 0.35, 1); }
  .js .cs-steps .cs-step:nth-of-type(1) .ink { transition-delay: 120ms; }
  .js .cs-steps .cs-step:nth-of-type(2) .ink { transition-delay: 420ms; }
  .js .cs-steps .cs-step:nth-of-type(3) .ink { transition-delay: 720ms; }
  .js .cs-steps .cs-step:nth-of-type(4) .ink { transition-delay: 1020ms; }
  .js .cs-dg .ink { transition-duration: 1400ms; transition-delay: 150ms; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .js [data-draw]:not(.is-drawn) .cs-steps-rail span { transform: scaleY(0); }
}
@media print {
  .js [data-draw] .ink { stroke-dashoffset: 0 !important; transition: none !important; }
  .js [data-draw] .cs-steps-rail span { transform: none !important; }
}

/* ── Contents row and the status key ── */
.cs-contents { padding-top: 8px; padding-bottom: 8px; }
.cs-toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.cs-toc a { display: flex; align-items: baseline; gap: 12px; min-height: 52px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: 500; text-decoration: none; transition: border-color 160ms var(--ease); }
.cs-toc a span { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--text-3); }
.cs-toc a:hover { border-top-color: var(--text); }
.cs-key { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.cs-key .cs-chip { margin: 0 2px; vertical-align: 1px; }
@media (max-width: 900px) { .cs-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cs-toc { grid-template-columns: minmax(0, 1fr); } }

/* ── Tracks ── */
.cs-track { padding: 104px 0 96px; border-top: 1px solid var(--line); scroll-margin-top: 76px; }
.cs-contents + .cs-track { border-top: 0; padding-top: 72px; }
.cs-track-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 48px; align-items: start; }
.cs-track-head h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.03em; }
.cs-plain p { max-width: 36em; font-size: 19px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.cs-plain p + p { margin-top: 14px; }
.cs-plain .cs-honest { font-size: 16px; color: var(--text-2); }
@media (max-width: 900px) {
  .cs-track { padding: 72px 0 80px; }
  .cs-contents + .cs-track { padding-top: 56px; }
  .cs-track-head { grid-template-columns: minmax(0, 1fr); }
  .cs-plain p { font-size: 18px; }
}
.cs-track .diagram--pipe { margin-top: 48px; }

/* Track diagrams: one wide drawing for desktop, one tall drawing for narrower screens */
.cs-dg { margin: 48px 0 0; padding: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.cs-dg svg { display: block; width: 100%; height: auto; overflow: visible; }
.cs-dg .cs-dg--tall { display: none; max-width: 380px; }
.cs-dg figcaption { margin-top: 22px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-3); }
@media (max-width: 1099px) {
  .cs-dg .cs-dg--wide { display: none; }
  .cs-dg .cs-dg--tall { display: block; }
}
@media (max-width: 760px) { .cs-dg { padding: 22px 20px; } }
@media (max-width: 360px) { .cs-dg { padding: 20px 14px; } }

/* What's built: one ruled row per item, its status first */
.cs-built-head { margin-top: 56px; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.cs-built { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.cs-built li { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 8px 24px; align-items: start; padding: 15px 0 16px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.cs-built li > span:last-child { max-width: 46em; text-wrap: pretty; }
.cs-chip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 2px 10px 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-2); white-space: nowrap; }
.cs-chip::before { content: ""; flex: none; width: 7px; height: 7px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%; }
.cs-chip[data-status="live"] { color: var(--text); border-color: var(--text-3); }
.cs-chip[data-status="live"]::before { background: currentColor; }
.cs-chip[data-status="progress"] { color: var(--text-3); border-style: dashed; }
.cs-chip[data-status="progress"]::before { width: 8px; height: 0; border: 0; border-top: 1.5px solid currentColor; border-radius: 0; }
.cs-built li .cs-chip { margin-top: 1px; }
.cs-limits { max-width: 46em; margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 640px) {
  .cs-built li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0 18px; }
}

/* A part inside a track (GreenRoom's move from version 1) */
.cs-part { margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--line); }
.cs-part h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.cs-part .vv { margin-top: 28px; }
.cs-part .cs-stand { max-width: 40em; margin-top: 24px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.cs-part .diagram { margin-top: 32px; }
.cs-part .diagram figcaption { margin-top: 20px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-3); }
@media (max-width: 900px) { .cs-part { margin-top: 64px; } }

/* ── Engineering detail: a native <details>, so it opens without JavaScript and prints open ── */
.cs-detail { margin-top: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cs-detail > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; min-height: 64px; padding: 18px 24px; list-style: none; cursor: pointer; border-radius: 10px; transition: background-color 160ms var(--ease); }
.cs-detail > summary::-webkit-details-marker { display: none; }
.cs-detail > summary:hover { background: var(--surface-2); }
.cs-detail > summary:focus-visible { outline-offset: -2px; }
.cs-sum-t { font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; }
.cs-sum-s { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.cs-sum-i { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text-2); transition: border-color 160ms var(--ease), color 160ms var(--ease); }
.cs-sum-i svg { width: 12px; height: 12px; }
.cs-sum-i .v { transition: transform 200ms var(--ease); transform-origin: center; }
.cs-detail[open] .cs-sum-i .v { transform: scaleY(0); }
.cs-detail > summary:hover .cs-sum-i { border-color: var(--text-3); color: var(--text); }
.cs-detail[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.cs-detail-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 56px; padding: 32px 24px 36px; }
.cs-detail-body h3 { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.3; }
.cs-detail-body section + section { margin-top: 36px; }
.cs-detail-body ol, .cs-detail-body ul { margin: 12px 0 0; padding: 0; list-style: none; }
.cs-detail-body li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.cs-detail-body li:first-child { border-top: 0; padding-top: 0; }
.cs-detail-body li strong { color: var(--text); font-weight: 500; }
.cs-design { counter-reset: cs-d; }
.cs-design li { position: relative; padding-left: 34px; counter-increment: cs-d; }
.cs-design li::before { content: counter(cs-d, decimal-leading-zero); position: absolute; left: 0; font-family: var(--mono); font-size: 12px; line-height: 25px; color: var(--text-3); }
.cs-design li:first-child::before { top: 0; }
/* ── Stack row: the tools of a track as a row of logos (owner, 2026-10-01) ──
   Markup contract:
     <ul class="cs-stack" aria-label="Stack">
       <li style="--brand: #3776AB">
         <a class="cs-tool" href="https://www.python.org/">
           <svg class="cs-tool-mark" viewBox="0 0 24 24" aria-hidden="true"><path d="…"/></svg>
           <span class="cs-tool-name">Python</span>
         </a>
       </li>
       <li><span class="cs-tool"><span class="cs-tool-name">schwab-py</span></span></li>
     </ul>
   - li > (a|span).cs-tool holds one tool. A tool with a logo carries an inline <svg class="cs-tool-mark"> (Simple
     Icons paths, assets/logos/stack/*.svg, filled with currentColor) or an <img class="cs-tool-mark">, then
     <span class="cs-tool-name"> with the tool's name as text. A tool with no logo file is the name alone.
   - --brand on the li (or the .cs-tool) is the hex from assets/logos/stack/brands.json. Marks rest in --text-3
     (greyscale) and take --brand on hover or focus; with no --brand they take bone. For a black or near-black brand
     (Next.js, Resend, Cal.com) set --brand to var(--text), as Bloomberg stays white on the home page.
   - The name is accessible text: visually hidden beside a mark, shown beside it on ul.cs-stack--named, and always
     shown for a tool with no mark. No tooltips, no title attributes.
   - An <img> mark cannot be refilled, so it rests greyscale through a filter and keeps that look on hover; prefer
     the inline <svg>. Marks are 22px tall (20 to 24 allowed), every tool is a 44px target, the row wraps, and
     nothing changes size on hover, so there is no layout shift. Reduced motion drops the colour transition. */
.cs-stack { list-style: none; margin: var(--gap-label) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; max-width: var(--measure); }
.cs-stack > li { display: flex; }
.cs-tool { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; color: var(--text-3); font-family: var(--sans); font-size: 15px; line-height: 1.6; letter-spacing: 0; text-decoration: none; transition: color 160ms var(--ease); }
.cs-tool:is(:hover, :focus-visible) { color: var(--brand, var(--text)); }
a.cs-tool:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; border-radius: 2px; }
.cs-tool-mark { flex: none; display: block; width: 22px; height: 22px; fill: currentColor; }
img.cs-tool-mark { width: auto; filter: invert(1) opacity(0.55); }
.cs-tool-name { color: var(--text-2); }
.cs-tool:has(.cs-tool-mark) .cs-tool-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-stack--named .cs-tool-name { font-size: 14px; color: var(--text-3); }
.cs-stack--named .cs-tool:has(.cs-tool-mark) .cs-tool-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.cs-stack--named .cs-tool:is(:hover, :focus-visible) .cs-tool-name { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .cs-tool { transition: none; } }
.cs-nums li { display: grid; grid-template-columns: 4.2ch minmax(0, 1fr); gap: 14px; align-items: baseline; }
.cs-num { font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.cs-detail-body .diagram { margin-top: 12px; }
@media (max-width: 900px) {
  .cs-detail-body { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 26px 20px 30px; }
  .cs-detail > summary { padding: 16px 18px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-detail > summary, .cs-sum-i, .cs-sum-i .v, .cs-toc a { transition: none; }
}
/* Print: every detail open (case.js opens them before printing; this covers browsers that print without it) */
@media print {
  .cs-detail::details-content { content-visibility: visible; display: contents; }
  .cs-sum-i { display: none; }
  .cs-detail, .cs-dg { break-inside: avoid-page; }
  .cs-track, .cs-story { padding-top: 48px; padding-bottom: 48px; }
}

/* ── QuantMechanix page (quantmechanix.html): its lockup in the lead, three tracks in the contents row, and
   screenshots inside a track. Additive: nothing above changes. ── */
.cs-qm { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; }
.cs-mark .cs-qm .qm-icon { width: 40px; height: 40px; }
.cs-qm .qm-lockup { font-size: 16px; }
.cs-toc--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cs-toc--3 { grid-template-columns: minmax(0, 1fr); } }
.cs-shots { margin-top: 32px; }
.cs-shot { margin: 0; }
.cs-shot + .cs-shot { margin-top: 20px; }
.cs-shot .shot { overflow: hidden; background: #0b0b0b; border: 1px solid var(--line); border-radius: 10px; }
.cs-shot figcaption { margin-top: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* ── What this means for your system ── */
.cs-fit { padding: 104px 0; border-top: 1px solid var(--line); }
.cs-fit-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 48px; align-items: start; }
.cs-fit p { max-width: 38em; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.cs-fit p + p { margin-top: 14px; }
.cs-fit .textlink { margin-top: 10px; }
@media (max-width: 900px) {
  .cs-fit { padding: 72px 0; }
  .cs-fit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Path maps (case-map.js): one interactive figure per track ──
   A ruled row of choices, the drawing, then one caption line. The lit path is the hero's heavy bone stroke (2px);
   every other path drops to a hairline at 0.28. Choosing by pointer or tap draws the path once (case-map.js, 800ms,
   ease-out); a keyboard choice lights at once. Labels follow spec V7: Geist 14px in --text-2, the lit ones in bone,
   monospace only for the rung numbers; nodes are 7px. Without .pm-ready (no JavaScript, or the script failed) the choices
   are hidden, every path shows at medium weight and the captions are listed. */
.pm { --pm-ease: cubic-bezier(0.22, 1, 0.36, 1); margin: 48px 0 0; }
.pm-choices { display: flex; flex-wrap: wrap; gap: 0 40px; border-top: 1px solid var(--line); }
.pm-choices button {
  position: relative; min-height: 48px; padding: 15px 0 12px; margin: 0;
  font: 500 15px/1.3 var(--sans); letter-spacing: 0; color: var(--text-3); text-align: left;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  transition: color 160ms var(--pm-ease), transform 100ms ease-out;
}
.pm-choices button::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1.6px; background: var(--text);
  transform: scaleX(0); transform-origin: left center; transition: transform 160ms var(--pm-ease);
}
.pm-choices button[aria-selected="true"] { color: var(--text); }
.pm-choices button[aria-selected="true"]::before { transform: none; }
.pm-choices button:active { transform: scale(0.98); }
.pm-choices button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .pm-choices button:not([aria-selected="true"]):hover { color: var(--text-2); } }
.pm:not(.pm-ready) .pm-choices { display: none; }

.pm-draw { margin-top: 28px; }
.pm-draw svg { display: block; width: 100%; height: auto; overflow: visible; }
.pm-draw .pm-tall { display: none; max-width: 400px; }
@media (max-width: 1059px) {
  .pm-draw .pm-wide { display: none; }
  .pm-draw .pm-tall { display: block; }
}

/* Line language: hairlines, one heavy bone stroke, small round nodes, Geist labels (V7) */
.pm svg text { font-family: var(--sans); font-size: 14px; font-weight: 400; fill: var(--text-2); }
.pm svg .pm-h { fill: var(--text-3); }
.pm svg .pm-n { font-family: var(--mono); font-size: 13px; fill: var(--text-3); }
/* A post: a gate that some paths pass through (checks, sign-in, the launch hold), structure in use */
.pm .pm-post { fill: none; stroke: var(--text-2); stroke-width: 1.25; stroke-linecap: round; opacity: 0.6; }
.pm .pm-rail { fill: none; stroke: var(--text); stroke-width: 1; opacity: 0.2; stroke-linecap: round; }
.pm .pm-ln { fill: none; stroke: var(--text); stroke-width: 1; opacity: 0.28; stroke-linecap: round; stroke-linejoin: round; transition: opacity 160ms var(--pm-ease), stroke-width 160ms var(--pm-ease); }
.pm .dash { stroke-dasharray: 3 5; }
.pm .pm-ln.is-lit { opacity: 1; stroke-width: 2; transition: none; }
.pm circle { fill: var(--bg); stroke: var(--text-3); stroke-width: 1; transition: fill 160ms var(--pm-ease), stroke 160ms var(--pm-ease); }
.pm text { transition: fill 160ms var(--pm-ease); }
.pm .pm-hit { fill: transparent; stroke: none; pointer-events: all; }
.pm .pm-src { cursor: pointer; }
.pm-ready .pm-st:not(.is-lit) text, .pm-ready .pm-src:not(.is-lit) text { fill: var(--text-2); }
/* Layers no path lands in sit quietly in the graph: a grey label on the graph's rail */
.pm .pm-q text, .pm-ready .pm-q:not(.is-lit) text { fill: var(--text-3); }
.pm .pm-q circle { stroke: var(--text-3); }
.pm .is-lit > text:not(.pm-pre) { fill: var(--text); transition: none; }
.pm .is-lit > text.pm-n:not(.pm-pre) { fill: var(--text-2); }
.pm .is-lit > circle:not(.pm-pre) { fill: var(--text); stroke: var(--text); transition: none; }
.pm .pm-pre { transition: none !important; }
.pm-ready .is-lit > text.pm-pre { fill: var(--text-3); }
/* No JavaScript: every path at medium weight */
.pm:not(.pm-ready) .pm-ln { opacity: 1; stroke: var(--text-2); stroke-width: 1.2; }

/* The caption: one line at desktop, the lit path's sentence or the note of the station pointed at */
.pm figcaption { margin-top: 28px; }
.pm-cap { max-width: 52em; min-height: 1.5em; font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.pm-cap .pm-k { font-weight: 500; }
.pm-cap .pm-note { display: none; }
.pm-ready .pm-cap span[data-for] { display: none; }
.pm-ready .pm-cap span[data-for].is-on { display: inline; }
.pm-ready .pm-cap.is-note span[data-for].is-on { display: none; }
.pm-ready .pm-cap.is-note .pm-note { display: inline; }
.pm-ready .pm-cap .pm-k { display: none; }
.pm:not(.pm-ready) .pm-cap span[data-for] { display: block; padding: 10px 0; border-top: 1px solid var(--line); }
.pm:not(.pm-ready) .pm-cap span[data-for]:first-child { border-top: 0; padding-top: 0; }
.pm-foot { margin-top: 8px; font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.5; color: var(--text-3); }
/* Maps whose choices are the drawing's own source rows (AI, Data, Platform): the rows are the visible choices, so
   the tab row is kept for keyboards and screen readers only, and a focused tab rings its row in the drawing. */
.pm { position: relative; }
.pm-ready.pm--drawn .pm-choices { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pm .pm-src.is-focus .pm-hit { stroke: var(--text); stroke-width: 1.5; rx: 4px; vector-effect: non-scaling-stroke; }
@media (hover: hover) and (pointer: fine) { .pm-ready .pm-src:not(.is-lit):hover text { fill: var(--text); } }
.cs-v2 .pm--drawn .pm-draw { margin-top: 0; }
@media (max-width: 760px) {
  /* On phones the caption sits right under the choices, above the drawing, so the sentence that answers a tap is
     on screen; case-map.js reserves the longest sentence's height so the drawing never jumps. The line under the
     map stays under the drawing. The bar fixed to the bottom of the window never covers the map. */
  .pm { display: flex; flex-direction: column; scroll-margin-bottom: 88px; }
  .pm figcaption { display: contents; }
  .pm-choices { order: 0; }
  .pm-cap { order: 1; margin-top: 20px; }
  .pm--drawn .pm-cap { margin-top: 0; }
  /* the sentence sits on the drawing; spare reserved height goes above it */
  .pm-ready .pm-cap { display: flex; flex-direction: column; justify-content: flex-end; }
  .pm-draw, .cs-v2 .pm-draw { order: 2; margin-top: 24px; }
  .cs-v2 .pm--drawn .pm-draw { margin-top: 24px; }
  .pm-foot { order: 3; margin-top: 16px; }
  .pm-choices { display: grid; grid-template-columns: repeat(var(--pm-cols, 2), minmax(0, 1fr)); gap: 0 20px; border-top: 0; }
  .pm-choices button { border-bottom: 1px solid var(--line); }
  .pm-choices button::before { top: auto; bottom: -1px; }
  /* Long choices (whole questions) stack one per row, 40px each, so the drawing starts sooner */
  .pm--list .pm-choices button { min-height: 40px; padding: 10px 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm *, .pm *::before { transition: none !important; }
}
@media print {
  .pm-choices { display: none; }
}

/* ── Version 2 anatomy (main.cs-v2): every track is the same five parts, in this order: the discipline's name
   with its glyph, its one-line definition, one sentence on what it did here, the path map, a ruled row of at most
   three numbers, then a closed Engineering detail (stack, decisions, What's built). Nothing is boxed: parts sit on
   the page, separated by space and hairlines. Scoped to .cs-v2 so a page not yet moved keeps its old look. ── */
.cs-v2 .cs-story { padding: var(--band) 0; }
.cs-v2 .cs-steps-wrap { margin-top: 36px; }
.cs-steps--plain .cs-step { padding-top: 28px; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
@media (max-width: 640px) {
  .cs-steps--plain .cs-step { display: block; padding: 0 0 26px 28px; font-size: 20px; line-height: 1.25; }
  .cs-steps--plain .cs-step::before { top: 6px; }
  .cs-v2 .cs-steps-rail { top: 10px; bottom: 36px; }
}

.cs-v2 .cs-track { padding: var(--band) 0; border-top: 1px solid var(--line); }
.cs-v2 .cs-head h2 { display: block; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.025em; }
.cs-v2 .cs-def { margin-top: var(--gap-sf); max-width: var(--measure-lede); font-family: var(--sans); font-size: var(--fs-lede); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--text-2); text-wrap: pretty; }
.cs-v2 .cs-what { margin-top: 8px; max-width: var(--measure); font-size: 16px; line-height: 1.6; color: var(--text-2); }
.cs-head h2 { display: flex; align-items: center; gap: 16px; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
.cs-glyph { flex: none; width: 0.74em; height: 0.74em; fill: currentColor; color: var(--text-2); }
.cs-def { margin-top: 18px; max-width: 32em; font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 25px); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.cs-what { margin-top: 12px; max-width: 33em; font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.cs-v2 .pm { margin: var(--gap-figure) 0 0; }
.cs-v2 .pm-draw { margin-top: 24px; }
/* same note-then-caption spacing as a .cf figure: drawing, 32 to the note, --gap-block to the caption */
.cs-v2 .pm figcaption { margin-top: 32px; }
.cs-v2 .pm-foot { margin-top: var(--gap-block); }

/* At most three numbers, one ruled row: a mono figure, then its label */
.cs-figs { list-style: none; margin: var(--gap-figure) 0 0; padding: var(--pad-row) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-list) var(--cols-gap); }
.cs-figs li { font-size: var(--fs-meta); line-height: 1.5; color: var(--text-2); }
.cs-fig { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: var(--fs-figure); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }

/* Engineering detail as a ruled disclosure, not a card */
.cs-v2 .cs-detail { margin-top: 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.cs-v2 .cs-figs + .cs-detail { margin-top: var(--gap-block); }
.cs-v2 .cs-detail > summary { min-height: 56px; padding: var(--gap-sf) 0; border-radius: 0; grid-template-columns: minmax(0, 1fr) auto; }
.cs-v2 .cs-sum-t { font-size: var(--fs-h4); line-height: 1.4; }
.cs-v2 .cs-detail > summary:hover { background: none; }
.cs-v2 .cs-detail > summary:focus-visible { outline-offset: 2px; }
.cs-v2 .cs-detail[open] > summary { border-bottom: 0; border-radius: 0; }
.cs-v2 .cs-sum-i { grid-row: 1; width: 32px; height: 32px; }
.cs-v2 .cs-detail-body { display: block; padding: 4px 0 40px; }
.cs-v2 .cs-detail-body li { padding: 0; border-top: 0; }
.cs-dsec + .cs-dsec { margin-top: 32px; }
.cs-dsec h3 { font-family: var(--sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.cs-stackline { margin-top: var(--gap-label); max-width: var(--measure); font-family: var(--sans); font-size: 15px; line-height: 1.6; letter-spacing: 0; color: var(--text-2); }
.cs-v2 .cs-dec, .cs-v2 .cs-items { margin: var(--gap-label) 0 0; padding: var(--gap-sf) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-list) var(--split-gap); }
.cs-v2 .cs-dsec .cf-built-key { margin-top: var(--gap-label); }
.cs-v2 .cs-detail-body ul.cf-built { margin: var(--gap-label) 0 0; padding: var(--gap-sf) 0 0; border-top: 1px solid var(--line); gap: var(--gap-list) var(--split-gap); }
.cs-v2 .cs-detail-body ul.cf-built > li { padding: 0; border-top: 0; color: var(--text-2); }
.cs-v2 .cs-dec li { font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.cs-v2 .cs-items li { display: flex; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text); }
.cs-legend { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-3); }
.cs-legend span { display: inline-flex; align-items: center; gap: 8px; }
/* The status dot: filled, running today; ring, built and not yet switched on; dashed ring, in progress */
.cs-dot { flex: none; display: inline-block; width: 9px; height: 9px; box-sizing: border-box; border: 1.2px solid var(--text-2); border-radius: 50%; }
.cs-items .cs-dot { position: relative; top: -1px; }
.cs-dot[data-status="live"] { background: var(--text); border-color: var(--text); }
.cs-dot[data-status="progress"] { width: 10px; height: 10px; border-style: dashed; border-color: var(--text-3); }
.cs-v2 .cs-limits { margin-top: 18px; max-width: 46em; font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 760px) {
  .cs-v2 .cs-dec, .cs-v2 .cs-items { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* stacked like work's .results: a hairline and a row's padding between stats */
  .cs-figs { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .cs-figs li + li { margin-top: var(--pad-row); padding-top: var(--pad-row); border-top: 1px solid var(--line); }
}

/* What this means: heading, then text under it */
.cs-v2 .cs-fit { padding: var(--band) 0; }
.cs-v2 .cs-fit h2 { max-width: 20em; }
.cs-v2 .cs-fit h2 + p { margin-top: var(--gap-sf); }
.cs-v2 .cs-fit p { max-width: var(--measure); font-size: 16px; line-height: 1.6; }
.cs-v2 .cs-fit p + p { margin-top: var(--gap-list); }
.cs-v2 .cs-fit .textlink { margin-top: var(--gap-foot); }

/* The lead's screenshot is cropped to the question, the answer and the first card, so the lead stays one screen. */
.cs-v2 .cs-lead { padding-bottom: var(--band); }
.cs-v2 .cs-lead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--split-gap); }
@media (max-width: 760px) { .cs-v2 .cs-lead-grid { grid-template-columns: minmax(0, 1fr); } }
.cs-v2 .cs-lead h1 { font-size: var(--fs-h1); line-height: 1.05; }
.cs-v2 .cs-lede { margin-top: var(--gap-lede); max-width: var(--measure-lede); font-size: var(--fs-lede); line-height: 1.6; }
.cs-v2 .cs-role { margin-top: var(--gap-sf); max-width: var(--measure-lede); }
.cs-v2 .cs-mark { min-height: 40px; }
.cs-v2 .cs-mark a img { height: 34px; }
.cs-v2 .cs-state { gap: 8px; padding: 0; border: 0; border-radius: 0; font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.4; color: var(--text-2); }
.cs-v2 .cs-state::before { width: 6px; height: 6px; background: var(--text-2); }
.cs-v2 .cs-crumbs ol { font-family: var(--sans); font-size: var(--fs-meta); }
.cs-v2 .cs-hero .shot { border-radius: var(--radius); }
/* V7: a sentence is never set in monospace */
.cs-v2 .cs-hero figcaption { font-family: var(--sans); font-size: var(--fs-meta); line-height: 1.5; }
.cs-v2 .cs-hero .shot img { width: 100%; aspect-ratio: 1568 / 1040; object-fit: cover; object-position: top; }
@media (max-width: 760px) { .cs-v2 .cs-hero .shot img { aspect-ratio: 1120 / 900; } }
/* The plus turns to a minus: the vertical bar folds and fades, so its round caps leave no dots behind. */
.cs-v2 .cs-sum-i .v { transition: transform 200ms var(--ease), opacity 120ms ease-out; }
.cs-v2 .cs-detail[open] .cs-sum-i .v { opacity: 0; }

/* Tablets (761 to 1059px): the tall drawing keeps its readable size (400px at most) and the caption sits beside
   it, so the map still fills the container width instead of leaving the right half empty. */
@media (min-width: 761px) and (max-width: 1059px) {
  .pm { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .pm-choices { grid-column: 1 / -1; }
  .pm-draw { grid-column: 1; }
  .pm figcaption, .cs-v2 .pm figcaption { grid-column: 2; grid-row: 2; margin-top: 24px; }
  .pm--drawn .pm-draw, .cs-v2 .pm--drawn figcaption { grid-row: 1; }
  .cs-v2 .pm--drawn figcaption { margin-top: 0; }
}