/* Study-specific stages; shared scaffold owns the page frame. */
.stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0;padding-top:7px}.drawing{min-width:0}.drawing h2{font-family:inherit;font-size:12px;margin:0 0 12px}.viewport{height:65vh;min-height:350px;position:relative;overflow:hidden;background:#ededed;border:1px solid var(--line)}.paper{position:absolute;background:#fff;line-height:0;pointer-events:none;border:1px solid #aaa}.paper svg{width:100%;height:100%;display:block}.paper .broad-stroke{fill:#bcbcbc;stroke:none}.paper .centreline{stroke:#000;stroke-width:1px;stroke-dasharray:1 4;stroke-linecap:round}.paper .centreline path,.paper .guides path,.paper .ductus path{vector-effect:non-scaling-stroke}.paper .guides{stroke:#ccc;stroke-width:.5px}.paper .ductus{stroke:#000;stroke-width:.7px}.view-controls{display:flex;align-items:center;gap:6px;margin:12px 0}.view-controls output{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}button{font:inherit;font-size:12px;padding:8px 12px;background:var(--panel);color:var(--ink);border:1px solid var(--line);cursor:pointer}.metadata{line-height:1.6}#letters{box-sizing:border-box;width:100%;font:inherit;padding:8px;background:var(--panel);color:var(--ink);border:1px solid var(--line)}#warning{grid-column:1/-1}.study-credit{margin-top:24px}a{text-decoration:underline}@media(max-width:1100px){.stages{grid-template-columns:1fr}}@media(max-width:800px){.stages{padding-top:0}.viewport{height:60vh}}
.calibration-nav{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}.calibration-nav a[aria-current=page]{font-weight:bold}

#approach-detail{background:#fff;border:1px solid var(--line);padding:6px}#approach-detail svg{width:100%;height:92px;display:block}#approach-detail .broad-stroke{fill:#bcbcbc;stroke:none}#approach-detail .centreline{stroke:#000;stroke-width:1px;stroke-dasharray:1 4;stroke-linecap:round}#approach-detail .centreline path,#approach-detail .ductus path{vector-effect:non-scaling-stroke}#approach-detail .ductus{stroke:#000;stroke-width:.7px}

.stages{grid-template-columns:minmax(0,1fr)}

/* Approximate ink deposited by a fixed broad nib, rather than a guide sheet. */
.paper .broad-stroke{fill:#000}.paper .centreline{visibility:hidden}

.stages{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:1100px){.stages{grid-template-columns:1fr}}

.stages{grid-template-columns:minmax(0,1fr)}

/* Composite distinct pen inks inside one isolated white-paper preview. */
.paper svg{isolation:isolate}#ink-stats{overflow-wrap:anywhere}

#controls .ink-choices{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0;padding:12px}#controls .ink-choices label{display:flex;align-items:center;gap:6px;margin:0}#controls .ink-choices input{width:auto;margin:0;accent-color:var(--ink)}

#controls .mirror-ink-control{justify-content:flex-start;align-items:center;gap:8px}#controls .mirror-ink-control input{width:auto;margin:0;accent-color:var(--ink)}

.heading[hidden]{display:none!important}
#controls label:has(#showHeading){display:flex;align-items:center;gap:8px}#controls #showHeading{width:auto;margin:0}

/* Two-column parameter dock; retain the shared type, borders and theme. */
.workspace{grid-template-columns:minmax(440px,1.1fr) minmax(300px,1fr);gap:28px}
#controls>fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:12px}
#controls .control-field{min-width:0}
#controls .control-field label{margin:0 0 3px;justify-content:flex-start;line-height:1.2}
#controls select,#controls input[type=number]{box-sizing:border-box;padding:5px 8px;min-height:28px}
#controls>fieldset>label{justify-content:flex-start;align-items:center;margin:0;min-height:24px}
#controls>fieldset>label input{width:auto;margin:0}
#controls .ink-choices{grid-column:1/-1;margin:0;padding:6px 10px;gap:20px}
#controls .ink-choices label{margin:0}
#controls #reset{grid-column:1/-1;margin:0;padding:6px 8px}
#controls label[title]{cursor:help}
.viewport{height:calc(100vh - 350px);min-height:320px}
.stages{gap:10px}.metadata{margin:6px 0}.view-controls{margin:8px 0}
.heading h1{margin-bottom:8px}.calibration-nav{margin-top:8px;gap:6px 12px}
@media(max-width:900px){.workspace{grid-template-columns:1fr}#controls{position:static}.viewport{height:65vh}}
@media(max-width:480px){#controls>fieldset{grid-template-columns:1fr}.viewport{min-height:300px}}