/* wk01 prototype v2, pass 3: Codex design review fixes (2026-11-10). Loads after article.css, before hero-new.css. */
:root{--sp-part:64px;--sp-sub:40px;--sp-head:16px;--sp-p:20px;--measure:70ch}
@media(max-width:760px){:root{--sp-part:48px;--sp-sub:32px;--sp-head:14px}}

/* 1. spacing scale: 64 between parts, 40 between subsections, 16 heading to intro, 20 between paragraphs.
      One rule per level, margins on the section wrapper, none stacked on the headings. site.css forces .news-copy h2, so match its weight. */
.news-copy.art-body h2,.news-copy.art-body h3,.news-copy.art-body h4{margin:0 0 var(--sp-head)}
.news-copy.art-body h2{font-size:28px;padding-top:26px;scroll-margin-top:calc(var(--hdr) + var(--bar) + 18px)}
.news-copy.art-body .part>h2{font-size:32px;padding-top:22px}
.news-copy.art-body h3{font-size:22px;line-height:1.3;padding-top:0;scroll-margin-top:calc(var(--hdr) + var(--bar) + 18px)}
.news-copy.art-body h4{font-size:18px;margin-top:32px;scroll-margin-top:calc(var(--hdr) + var(--bar) + 18px)}
.news-copy.art-body .sec-h2{margin-top:var(--sp-part)}
.news-copy.art-body .sec-h3{margin-top:var(--sp-sub)}
.news-copy.art-body>.sec-h2:first-of-type{margin-top:0}
.news-copy.art-body>.sec-h2:first-of-type>h2{border-top:0;padding-top:0}
.news-copy.art-body .sec-h3>h3{margin-top:0}
.news-copy.art-body .sec-h3.step{margin-top:var(--sp-sub)}
.news-copy.art-body .step>h3{padding-top:0}
.news-copy.art-body .tryit{margin-top:var(--sp-sub);margin-bottom:var(--sp-sub)}
.news-copy.art-body .optional-part{margin-top:var(--sp-part)}
.news-copy.art-body .part>h2,.news-copy.art-body .optional-part>h2{margin-top:0}
.art-body p{margin:0 0 var(--sp-p)}
.art-body .lede-note{font-style:normal;font-size:15px;margin:0 0 var(--sp-p)}
.art-body .lede-note em{font-style:italic}
.news-copy.art-body li{padding-left:5px;margin-bottom:12px}

/* 2. prose measure ~70ch; figures, tables, code and the new blocks keep the full column */
.art-body>p,.art-body .sec>p,.art-body li>p,.art-body li>.li-lead,.art-body .callout-body p,.art-body .prompt blockquote{max-width:var(--measure)}
.art-body li:not(:has(>figure,>.codeblock,>.tablewrap,>.prompt,>aside,>ul,>ol,>.setblock)){max-width:calc(var(--measure) + 2.5em)}
.art-body .callout{max-width:calc(var(--measure) + 48px)}

/* 3. aside: sticky below header + bar; cover card removed (hero carries the top) */
.news-aside{top:calc(var(--hdr) + var(--bar) + 16px)}
.news-aside .news-meta{margin:0}

/* 4. back to top: floating on desktop only; phones get it in the contents menu */
@media(max-width:760px){.to-top{display:none!important}}

/* 5. prototype marker in normal flow */
.proto-flow{display:flex;justify-content:center;padding:6px 14px;background:#2a1a10;color:#ffc9a8;font-size:12px;border-bottom:1px solid #5a3820;text-align:center}

/* 6. skip to setup, quick facts, author line, hero share */
.skip-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:22px 0 0!important;max-width:none!important}
.skip-setup{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 20px;border-radius:9px;background:var(--orange);color:#1a0d05;font-weight:750;font-size:15px;text-decoration:none;box-shadow:0 6px 18px -8px #ff813eaa}
.skip-setup:hover{background:#ff9459;color:#1a0d05;transform:translateY(-1px)}
.skip-setup:focus-visible{outline:3px solid #fff;outline-offset:3px}
.skip-facts{font-size:14px;color:#b4c6d8;line-height:1.4}
.hero-by{display:none;margin:14px 0 0!important;font-size:13.5px!important;color:#9fb3c7!important;max-width:none!important}
@media(max-width:760px){.hero-by{display:block}.news-byline{display:none!important}}
.tba-copy .share-top{margin-top:16px}

/* 7. menu paths as their own component */
.mpath{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 1px;padding:1px 8px;border-radius:7px;background:#0e2034;border:1px solid #23405d;color:#eaf4ff;font-weight:600;font-size:.94em;line-height:1.55;vertical-align:baseline}
.mpath.long{margin:2px 0;padding:2px 10px}
.mp-sep{color:var(--orange);padding:0 5px;font-weight:700}
.art-body .mpath{color:#eaf4ff}

/* 8. Step 8 settings block: setting, value, reason */
.setblock{margin:26px 0 30px;border:1px solid #2b5276;border-radius:12px;background:#0d1d31;overflow:hidden}
.sb-title{margin:0!important;padding:12px 18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;background:#12304d;border-bottom:1px solid #2b5276;color:#fff!important;font-weight:700;font-size:15px}
.sb-sub{font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.sb{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.sb thead th{text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8ea4ba;font-weight:700;padding:10px 18px 6px}
.sb tbody th,.sb td{padding:14px 18px;border-top:1px solid #1e3550;vertical-align:top;text-align:left}
.sb tbody th{color:#fff;font-weight:650;width:30%}
.sb tbody th small{display:block;font-weight:500;color:#8ea4ba;font-size:13px}
.sb td:nth-child(2){width:22%;white-space:nowrap}
.val{display:inline-block;padding:3px 12px;border-radius:99px;font-weight:750;font-size:14px;line-height:1.5}
.val.block{background:#3a1d10;color:#ffb488;border:1px solid #ff813e88}
.val.ask{background:#0e2f4a;color:#9bdcff;border:1px solid #2b7bb0}
.sb code{font-size:.85em}
@media(max-width:700px){
 .sb thead{display:none}.sb,.sb tbody,.sb tr,.sb th,.sb td{display:block;width:auto!important}
 .sb tbody tr{padding:12px 18px;border-top:1px solid #1e3550}.sb tbody tr:first-child{border-top:0}
 .sb tbody th,.sb td{padding:0;border:0}.sb tbody th{margin-bottom:6px}.sb td{margin-bottom:6px}.sb td:nth-child(2){white-space:normal}
 .sb td[data-label="Reason"]{color:#c1d0df}
}

/* 9. Try it: four visible criteria */
.marks{margin:22px 0}
.marks-lead{margin:0 0 12px!important;font-weight:700;color:#fff!important}
.marks-list{list-style:none;padding:0!important;margin:0!important;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.marks-list li{display:flex;gap:12px;margin:0!important;padding:14px 16px!important;background:#0b1a2b;border:1px solid #23405d;border-radius:12px;max-width:none!important}
.mk-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,129,62,.14);border:1px solid rgba(255,129,62,.5);color:#ffb488;font-weight:800;font-size:14px}
.mk-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.mk-body b{color:#fff;font-size:15.5px}
.mk-txt{font-size:14.5px;line-height:1.55;color:#c1d0df}
@media(max-width:700px){.marks-list{grid-template-columns:1fr}}

/* 10. mobile panels: one inset (the page margin), prompt without an inner box, copy button on its own row */
@media(max-width:700px){
 .news-copy.art-body .tryit,.news-copy.art-body .optional-part{margin-inline:-20px;border-radius:0;border-inline:0;padding-inline:20px}
 .news-copy.art-body .tryit::before{left:20px;right:20px}
 .news-copy.art-body .optional-part .tryit{margin-inline:-20px}
 .art-body .tryit,.art-body .optional-part{padding-top:6px;padding-bottom:20px}
 .prompt{display:flex;flex-direction:column;background:none;border:0;border-top:1px solid #23405d;border-radius:0}
 .prompt-label{padding:12px 0 0}
 .prompt blockquote{padding:6px 0 12px}
 .prompt .copy-btn{position:static;width:100%;min-height:44px}
 .art-body ul,.art-body ol{padding-left:20px}
 .callout{padding-inline:16px}
}

/* 11. 44px touch targets */
@media(pointer:coarse),(max-width:760px){
 .copy-btn{min-height:44px;min-width:44px;padding-inline:14px;font-size:13px}
 .copy-btn.inline{min-height:28px;min-width:0;position:relative;padding:0 8px}
 .copy-btn.inline::after{content:"";position:absolute;inset:-8px -4px}
 .codeblock .copy-btn{top:6px;right:6px}
 .lb-close{min-height:44px;min-width:44px}
 .fig-anim .zoom-btn,.fig-anim .vid-toggle{min-height:44px;padding-inline:16px}
 .task label{min-height:44px;align-items:flex-start}
 .task .box{margin-top:calc(.5lh - 10px)}
 .skip-setup{min-height:48px}
}
@media(max-width:760px){.codeblock pre{padding-right:18px;padding-bottom:58px}.codeblock .copy-btn{top:auto;bottom:8px}}

/* heading + copy-link on one row where it fits */
.art-body .hd .hd-text{flex:1 1 8ch}
.art-body .hd .anchor{margin-left:auto;flex:none}
@media(min-width:761px){.art-body .hd .hd-text{flex:0 1 auto}.art-body .hd .anchor{margin-left:4px}}

/* scroll offset: one source only (html scroll-padding clears header + bar; headings add a small breathing gap) */
html{scroll-padding-top:calc(var(--hdr) + var(--bar))}
.news-copy.art-body h2,.news-copy.art-body h3,.news-copy.art-body h4{scroll-margin-top:16px}