/* spillway.sh · the posts' stylesheet
   Loaded after site.<hash>.css on blog posts only, and fingerprinted the same way (post.<hash>.css;
   python3 tools/fingerprint.py assets/post.<hash>.css after an edit). It holds what a long post uses and
   the rest of the site doesn't: lists, tables, quote cards, the short answer, video frames, the flow
   strip, the posts' calculators and the closing form. The CSP rules still hold: no script, no style
   attributes, so every interactive state is a radio button read by :has(), as on the front page.
   Video frames are youtube-nocookie iframes, which need frame-src https://www.youtube-nocookie.com in
   this site's CSP (sites-infra, terraform.tfvars); until then each frame's caption carries the link. */

/* prose: lists, small headings, code */
.prose ul,.prose ol{padding-left:22px;margin-top:16px}
.prose li{margin-top:8px;font-size:17px}
.prose li::marker{color:var(--dim)}
.prose h3{margin-top:40px;font-size:23px;line-height:1.3;font-weight:400;letter-spacing:-.01em}
.prose h2+h3{margin-top:28px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;padding:1px 5px;border-radius:5px;background:var(--plate);overflow-wrap:anywhere}
.prose strong,.prose b{font-weight:500}
.label{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.prose p.label{margin-top:0;font-size:12px}

/* the short answer, first thing under the standfirst */
.answer{margin-top:32px;padding:22px 24px;border-radius:14px;background:var(--card);border:1px solid var(--hair);box-shadow:0 1px 2px rgba(30,27,25,.04),0 16px 40px -28px var(--shadow-accent)}
.prose .answer p{margin-top:10px}
.prose .answer p.label{margin-top:0}

/* in this post */
.toc{margin-top:32px;padding-top:18px;border-top:1px solid var(--hair)}
.prose .toc ol{margin-top:10px;padding-left:20px;columns:2;column-gap:32px}
.prose .toc li{margin:0;padding:3px 0;font-size:15px;break-inside:avoid}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose h2[id],.prose h3[id],.prose section[id]{scroll-margin-top:24px}

/* quote cards: X, Hacker News, the podcast */
.q{margin:28px 0 0;padding:18px 22px 18px 20px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--card);box-shadow:0 1px 2px rgba(30,27,25,.04)}
.prose .q p{margin-top:0}
.prose .q p.label{margin-bottom:8px}
.prose .q .q-text{font-size:19px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.prose .q .q-by{margin-top:10px;font-size:14px;color:var(--dim)}
.q-by a{color:var(--ink-2)}
.prose .q .q-text code{white-space:nowrap}

/* videos: a 16:9 frame and a caption that always carries the link */
.embed{margin:32px 0 0}
.embed .frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--fine)}
.embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.embed figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--dim)}
.embed figcaption a{color:var(--ink-2)}

/* tables: they scroll inside their own box on a phone, never the page */
.tbl{margin-top:24px;overflow-x:auto;border:1px solid var(--hair);border-radius:12px;background:var(--card)}
.tbl table{width:100%;min-width:600px;border-collapse:collapse;font-size:15px;line-height:1.45}
.tbl th,.tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th{font-weight:500;font-size:13px;color:var(--dim)}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl td{color:var(--ink-2)}
.tbl .us td{background:var(--soft)}
.tbl .us td:first-child{color:var(--soft-ink)}
.tbl-note{font-size:13px;color:var(--dim)}
.prose p.tbl-note{margin-top:8px;font-size:13px}

/* the routing order, as a numbered list in a post */
.prose ol.route-list{list-style:none;padding:0;margin-top:20px;border-top:1px solid var(--hair)}
.prose .route-list li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;margin:0;padding:12px 0;border-bottom:1px solid var(--hair);font-size:16px}
.route-list .n{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.route-list .p{font-size:15px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.route-list li:last-child{border-bottom-style:dashed}

/* the agentic loop, drawn as a strip of steps */
.prose ol.flow{list-style:none;padding:0;margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.prose .flow li{position:relative;margin:0;padding:7px 12px;border-radius:999px;border:1px solid var(--hair);background:var(--card);font-size:14px;white-space:nowrap}
.prose .flow li+li::before{content:"\2192";position:absolute;left:-19px;top:50%;transform:translateY(-50%);color:var(--dim)}
.prose .flow li.hot{border-color:var(--accent);background:var(--soft);color:var(--soft-ink)}
.prose p.flow-note{margin-top:12px;font-size:15px;color:var(--ink-2)}

/* the posts' calculators sit in the front page's panel and card (.panel, .calc, .chips, .calc-r) */
.prose .panel{margin-top:32px}
.prose .calc p{margin-top:0;font-size:15px;color:var(--ink-2)}
.prose .calc .calc-r p+p{margin-top:8px}
.prose .calc .big{font-size:clamp(44px,5.4vw,60px);font-weight:300;line-height:1.05;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.prose .calc .big span{font-size:18px;letter-spacing:0;color:var(--ink-2);font-weight:400;margin-left:6px}
.prose .calc .rank{font-size:18px;color:var(--ink);text-wrap:balance}
.prose .calc .calc-how{margin-top:18px;font-size:13px;color:var(--dim)}
.prose .calc .kept{color:var(--kept)}
.prose .calc b{font-weight:500;color:var(--ink)}
.calc-title{font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.prose .calc p.calc-title{font-size:20px;color:var(--ink)}
.prose .calc p.calc-lede{margin:0 0 18px;font-size:14px;color:var(--dim)}

/* bars inside a calculator: drawn to scale, widths are classes */
.meter{margin-top:16px}
.meter-row,.bar{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) 64px;gap:12px;align-items:center;margin-top:10px;font-size:14px;color:var(--ink-2)}
.meter-row{grid-template-columns:64px minmax(0,1fr)}
.meter-track,.bar-track{position:relative;height:20px;border-radius:5px;background:var(--hair-2)}
.meter-fill,.bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;min-width:3px}
.meter-fill.billed{width:100%;background:var(--meter)}
.meter-fill.ran{background:var(--ink-2)}
.bar-fill.tok{background:repeating-linear-gradient(135deg,var(--meter) 0 5px,transparent 5px 9px);box-shadow:inset 0 0 0 1px var(--meter)}
.bar-fill.gh{background:var(--ink-2)}
.bar-fill.sw{background:var(--accent)}
.bar-amt{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.bar.is-test{color:var(--ink)}
.w-1{width:1%}.w-2{width:2%}.w-5{width:5%}.w-6{width:6%}.w-8{width:8%}.w-10{width:10%}.w-15{width:15%}
.w-20{width:20%}.w-37{width:37%}.w-46{width:46%}.w-51{width:51%}.w-75{width:75%}.w-79{width:79%}
.w-86{width:86%}.w-93{width:93%}
.bars{margin-top:14px}
.prose .calc .bars+p{margin-top:14px}

/* one answer per choice, picked by :has() (the defaults show where :has() isn't known) */
@supports selector(:has(a)){
  .calc:has(#j5:checked) .rj-5,.calc:has(#j12:checked) .rj-12,.calc:has(#j45:checked) .rj-45,
  .calc:has(#j61:checked) .rj-61,.calc:has(#j190:checked) .rj-190,
  .calc:has(#p25:checked):has(#m15:checked) .rs-p25-m15,.calc:has(#p25:checked):has(#m45:checked) .rs-p25-m45,
  .calc:has(#p25:checked):has(#m90:checked) .rs-p25-m90,.calc:has(#p25:checked):has(#m180:checked) .rs-p25-m180,
  .calc:has(#p100:checked):has(#m15:checked) .rs-p100-m15,.calc:has(#p100:checked):has(#m45:checked) .rs-p100-m45,
  .calc:has(#p100:checked):has(#m90:checked) .rs-p100-m90,.calc:has(#p100:checked):has(#m180:checked) .rs-p100-m180,
  .calc:has(#p250:checked):has(#m15:checked) .rs-p250-m15,.calc:has(#p250:checked):has(#m45:checked) .rs-p250-m45,
  .calc:has(#p250:checked):has(#m90:checked) .rs-p250-m90,.calc:has(#p250:checked):has(#m180:checked) .rs-p250-m180,
  .calc:has(#p500:checked):has(#m15:checked) .rs-p500-m15,.calc:has(#p500:checked):has(#m45:checked) .rs-p500-m45,
  .calc:has(#p500:checked):has(#m90:checked) .rs-p500-m90,.calc:has(#p500:checked):has(#m180:checked) .rs-p500-m180,
  .calc:has(#d1:checked):has(#wgh:checked) .rl-d1-gh,.calc:has(#d2:checked):has(#wgh:checked) .rl-d2-gh,
  .calc:has(#d3:checked):has(#wgh:checked) .rl-d3-gh,.calc:has(#d4:checked):has(#wgh:checked) .rl-d4-gh,
  .calc:has(#d5:checked):has(#wgh:checked) .rl-d5-gh,
  .calc:has(#d1:checked):has(#wsw:checked) .rl-d1-sw,.calc:has(#d2:checked):has(#wsw:checked) .rl-d2-sw,
  .calc:has(#d3:checked):has(#wsw:checked) .rl-d3-sw,.calc:has(#d4:checked):has(#wsw:checked) .rl-d4-sw,
  .calc:has(#d5:checked):has(#wsw:checked) .rl-d5-sw{display:block}
}

/* a long headline steps down a size */
.prose h1.h1-long{font-size:clamp(36px,5.2vw,64px);line-height:1.06;max-width:20ch}

/* questions inside a post */
.prose .faq{max-width:none}
.prose .faq details p{margin-top:0;font-size:16px}

/* related reading: the show, the other posts, Spillway's own pages */
.related{margin-top:56px}
.prose .related ul{list-style:none;padding:0;margin-top:14px;border-top:1px solid var(--hair)}
.prose .related li{margin:0;padding:14px 0;border-bottom:1px solid var(--hair);font-size:16px}
.related li .label{margin-bottom:4px}
.related a{color:var(--ink);text-decoration:none}
.related a::after{content:" \2192";color:var(--dim)}
.related a:hover{text-decoration:underline;text-underline-offset:3px}
.prose .related h2{font-size:clamp(26px,3vw,34px)}

/* sources: smaller than the prose, links quiet until hovered */
.prose .sources li{margin-top:6px;font-size:14px;line-height:1.5}
.prose .sources a{color:inherit;text-decoration-color:var(--line-warm);text-underline-offset:3px}
.prose .sources a:hover{color:var(--ink);text-decoration-color:currentColor}

/* who wrote it */
.authors{margin-top:48px;padding:20px 22px;border-radius:12px;background:var(--plate);font-size:15px;color:var(--ink-2)}
.prose .authors p{margin-top:0;font-size:15px}
.prose .authors p+p{margin-top:8px}

/* the closing band: the waitlist form again, under the post */
.post-end{padding:clamp(64px,8vw,104px) 0 clamp(72px,8vw,112px);border-top:1px solid var(--hair);background:var(--plate);text-align:center}
.post-end .h2{margin:0 auto;max-width:16ch}
.post-end .sub{margin:18px auto 0}
.post-end .act{justify-content:center}

/* phones */
@media (max-width:760px){
  .prose .toc ol{columns:1}
  .prose .q .q-text{font-size:17px}
  .bar{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .bar .bar-track{grid-column:1 / -1;grid-row:2}
  .prose .route-list li{grid-template-columns:32px minmax(0,1fr)}
  .route-list .p{grid-column:2;text-align:left}
  .prose .flow li{white-space:normal}
  .prose ol.flow{flex-direction:column;align-items:flex-start;gap:24px}
  .prose .flow li+li::before{content:"\2193";left:16px;top:-21px;transform:none}
  .tbl{overflow:visible}
  .tbl table{min-width:0}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tbl tr{display:block;padding:14px 16px;border-bottom:1px solid var(--hair-2)}
  .tbl tbody tr:last-child{border-bottom:0}
  .tbl tr.us{background:var(--soft);border-radius:0 0 12px 12px}
  .tbl tr.us td{background:transparent}
  .tbl td{display:block;padding:0;border:0}
  .tbl td+td{margin-top:10px}
  .tbl td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
}

/* figures: a row of big numbers, each with what it counts */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.prose .fig{margin:0;padding:18px 18px 16px;border-radius:12px;background:var(--card);border:1px solid var(--hair);font-size:14px;line-height:1.45;color:var(--ink-2)}
.prose .fig b{display:block;margin-bottom:6px;font-size:clamp(30px,3.6vw,40px);font-weight:300;line-height:1.05;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.figs+.tbl-note{margin-top:8px}

/* a timeline: dates down a thin rule, the moments that moved the meter marked in the accent */
.prose ol.timeline{list-style:none;padding:0;margin-top:28px}
.prose .timeline li{position:relative;margin:0;padding:0 0 22px 26px;border-left:1px solid var(--hair)}
.prose .timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--dim)}
.timeline li.hot::before{background:var(--accent);border-color:var(--accent)}
.timeline time{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.timeline li.hot time{color:var(--soft-ink)}
.prose .timeline p{margin-top:4px;font-size:16px;line-height:1.55}

/* who has a stake: one card per group of people */
.stakes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.stake{padding:18px 20px 20px;border-radius:12px;background:var(--card);border:1px solid var(--hair)}
.prose .stake h3{margin-top:0;font-size:19px;line-height:1.3}
.prose .stake p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* quote cards side by side */
.qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.qs .q{margin:0}
.prose .qs .q .q-text{font-size:17px}

/* what we believe: a numbered list with a bold lead on each item */
.prose ol.beliefs li{margin-top:12px}
.prose ol.beliefs li b{color:var(--ink)}

/* the conversation, grouped by where it lives */
.convo{columns:2;column-gap:36px;margin-top:8px}
.convo-g{break-inside:avoid;padding-top:16px}
.prose .convo h3{margin-top:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.prose .convo ul{list-style:none;padding:0;margin-top:8px;border-top:1px solid var(--hair)}
.prose .convo li{margin:0;padding:10px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.convo li a{color:var(--ink);text-decoration:none}
.convo li a:hover{text-decoration:underline;text-underline-offset:3px}
.convo li span{display:block;margin-top:2px;font-size:13px;color:var(--dim)}

@media (max-width:760px){
  .figs,.stakes,.qs{grid-template-columns:minmax(0,1fr)}
  .convo{columns:1}
}