/* The thick-spans page (thick-spans.html): statement boxes, page map, figures, the puncture widget
   and the questions. Sizes come from the type scale in style.css; no new font sizes here. */
.t-def{background:var(--def-bg);color:var(--def)}
.lede{margin:6px 0 0;max-width:76ch;color:var(--muted)}
.paper-link{margin:14px 0 0}

/* Page map: one box per section, coloured by claim label, arrows meaning "is used by". */
.roadmap{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:18px 0 4px}
.roadmap li{position:relative}
.roadmap li+li::before{content:"→";position:absolute;left:-20px;top:50%;transform:translateY(-50%);color:var(--muted);font-family:var(--sans)}
.roadmap a{display:block;padding:6px 11px;border:1px solid var(--rule);border-left:4px solid var(--rm);border-radius:0 7px 7px 0;background:var(--surface);color:var(--ink);text-decoration:none;font:var(--small)/1.4 var(--sans)}
.roadmap a:hover{border-color:var(--accent);border-left-color:var(--rm)}
.rm-kind{display:block;color:var(--rm);font-weight:600}
.rm-def{--rm:var(--def)}.rm-lemma{--rm:var(--here)}.rm-prop{--rm:var(--prov)}.rm-cons{--rm:var(--heur)}

/* Statement boxes: Definition, Lemma, Proposition. spans.js writes the numbers. */
.stmt{--stmt:var(--def);--stmt-bg:var(--def-bg);margin:18px 0;padding:8px 16px 10px;border-left:4px solid var(--stmt);background:var(--stmt-bg);border-radius:0 8px 8px 0}
.stmt[data-kind="lemma"]{--stmt:var(--here);--stmt-bg:var(--here-bg)}
.stmt[data-kind="prop"]{--stmt:var(--prov);--stmt-bg:var(--prov-bg)}
.stmt-head{margin:2px 0 6px;font:var(--small)/1.5 var(--sans)}
.stmt-label{font-weight:700;color:var(--stmt)}
.stmt-head .tag{margin-left:6px}
.stmt ol[type="a"],.stmt ul{padding-left:22px}
.stmt ol[type="a"]>li{margin:8px 0}
.key-eq{margin:10px 0 4px;padding:0 12px;border:1px solid var(--prov);border-radius:8px;background:var(--surface)}
details.proof{margin:6px 0 2px}
details.proof>summary{color:var(--muted);font-weight:600;padding:4px 0}
details.proof[open]>summary{margin-bottom:2px}
.spans .argument-steps>li>strong:first-child{font-family:var(--sans);font-size:var(--small)}
.answer{margin:18px 0 4px;padding:8px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0}
.answer p{margin:4px 0}

/* Figures. */
.spans figure{margin:20px 0}
.spans figcaption{margin-top:8px;font:var(--small)/1.5 var(--sans);color:var(--muted)}
.spans figcaption strong{color:var(--ink)}
.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px}
.panels>div{text-align:center;font:var(--small)/1.5 var(--sans)}
.panels svg,.widget svg{display:block;width:100%;height:auto}
.plane{fill:var(--surface);stroke:var(--rule);stroke-width:1.5}
.plane.filled{fill:var(--accent-fill);stroke:var(--accent)}
.plane-tag{fill:var(--muted);font:var(--small) var(--sans)}
.pt{fill:var(--accent-ink)}
.pt-label{fill:var(--ink);font:var(--small) var(--sans)}

/* Figure 2: the puncture widget. */
.widget{max-width:760px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
.widget-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:var(--small)/1.4 var(--sans);margin-bottom:8px}
.widget-controls input{flex:1 1 180px}
.widget .plane{fill:var(--accent-soft)}
.hole{fill:var(--bg);stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 2}
.live{fill:var(--accent-ink)}
.probe-ring{fill:none;stroke:var(--open);stroke-width:2.5}
.pick{cursor:pointer}
.pick:focus-visible{outline:none}
.pick:focus-visible .probe-hit{stroke:var(--accent);stroke-width:2}
.probe-hit{fill:transparent}
.readout{margin:6px 0 0;font:var(--small)/1.5 var(--sans)}
.readout p{margin:6px 0}
.readout .katex{font-size:1.1em}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0;font:var(--small)/1.4 var(--sans);color:var(--muted)}
.legend svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}

/* Questions: feedback appears only after a choice. */
.quiz{margin:16px 0;padding:10px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
.quiz>p:first-child{margin-top:2px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices button.right{background:var(--prov-bg);border-color:var(--prov)}
.choices button.wrong{background:var(--open-bg);border-color:var(--open)}
.feedback{margin-top:8px}
.feedback p{margin:6px 0}

/* Closing reference sections. */
.closing>details{border-top:1px solid var(--rule);padding:4px 0}
.closing>details:last-child{border-bottom:1px solid var(--rule)}
.closing>details>summary{font-weight:600;padding:8px 0}
.closing td,.closing th{font-size:var(--small)}
.ref-list{padding-left:20px}
.ref-list li{margin:10px 0;font-size:var(--small)}
.unverified{color:var(--open);font-weight:600}

@media(max-width:640px){
  .panels{grid-template-columns:1fr;max-width:300px;margin:auto}
  .roadmap{gap:8px}
  .roadmap li+li::before{display:none}
  .stmt{padding:8px 11px}
}