/* IRGF Implementation Documentation — self-contained stylesheet.
   Typography and palette follow the landing page: a monochrome ink palette,
   a serif text face, and monospace reserved for tags, figures and code.
   The only colour anywhere in the documentation is in the two framework
   diagrams (the lifecycle wheel and the module map), which are colour by
   design; every other figure is drawn in ink. */

:root{
  --bg:#ffffff; --bg-alt:#f7f7f5; --bg-sink:#eeeeeb;
  --fg:#101010; --fg-soft:#3c3c3a; --fg-mute:#6c6c69;
  --line:#d7d7d2; --line-soft:#e7e7e2;
  --accent:#101010; --accent-soft:#f0f0ec; --accent-ink:#000000;
  --warn:#3c3c3a; --warn-bg:#f4f4f1; --warn-line:#cecec9;
  --note:#3c3c3a; --note-bg:#eeeeeb;
  --rule:#101010;
  --radius:4px;
  --sidebar:310px;
  /* The text measure. Fixed rather than expressed in ch, because ch resolves
     against each element's own font size and would give headings a wider
     column than the paragraphs beneath them. 36rem is 68 characters of the
     body face at its set size. */
  --measure:36rem;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",Times,serif;
}
html[data-theme="dark"]{
  --bg:#111111; --bg-alt:#191919; --bg-sink:#202020;
  --fg:#f3f3f1; --fg-soft:#c8c8c4; --fg-mute:#98988f;
  --line:#343431; --line-soft:#282826;
  --accent:#f3f3f1; --accent-soft:#242422; --accent-ink:#ffffff;
  --warn:#c8c8c4; --warn-bg:#1e1e1c; --warn-line:#3a3a37;
  --note:#c8c8c4; --note-bg:#202020;
  --rule:#f3f3f1;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--serif); font-size:17px; line-height:1.66;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-kerning:normal;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--bg);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

.shell{display:flex; align-items:flex-start}

/* ---------------- sidebar ---------------- */
.toc{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  height:100vh; position:sticky; top:0; overflow-y:auto;
  background:var(--bg-alt); border-right:1px solid var(--line);
  padding:1.15rem 0 3rem;
}
.sitelink{
  display:block; padding:.1rem 1.15rem .55rem; font-size:.78rem;
  color:var(--fg-mute); letter-spacing:.02em;
}
.sitelink:hover{color:var(--accent); text-decoration:none}
.brand{display:block; padding:0 1.15rem .9rem; text-decoration:none}
.brand:hover{text-decoration:none}
.mark{
  display:inline-block; font-weight:800; letter-spacing:.06em;
  font-size:1.2rem; color:var(--accent-ink);
}
.brandsub{display:block; font-size:.74rem; color:var(--fg-mute); letter-spacing:.03em; margin-top:.1rem}

.searchbox{position:relative; padding:0 1.15rem 1rem}
#q{
  width:100%; padding:.45rem .6rem; font-family:var(--serif); font-size:.88rem;
  color:var(--fg); background:var(--bg); border:1px solid var(--line);
  border-radius:3px;
}
#q:focus{outline:1px solid var(--accent); outline-offset:1px}
#results{
  display:none; position:absolute; left:1.15rem; right:1.15rem; top:2.5rem; z-index:40;
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 8px 26px rgba(0,0,0,.14); max-height:60vh; overflow-y:auto;
}
#results.show{display:block}
#results a{display:block; padding:.55rem .7rem; border-bottom:1px solid var(--line-soft); font-size:.85rem}
#results a:last-child{border-bottom:0}
#results a:hover,#results a.sel{background:var(--accent-soft); text-decoration:none}
#results .rt{font-weight:700; color:var(--fg)}
#results .rx{display:block; color:var(--fg-mute); font-size:.78rem; margin-top:.12rem}
#results mark{background:var(--accent-soft); color:var(--fg); font-weight:700}
#results .none{padding:.6rem .7rem; color:var(--fg-mute); font-size:.85rem}

.part{
  padding:1rem 1.15rem .3rem; font-size:.68rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--fg-mute);
}
.toc ul{list-style:none; margin:0; padding:0}
.toc li a{
  display:block; padding:.28rem 1.15rem .28rem 1.4rem; font-size:.875rem;
  color:var(--fg-soft); border-left:2px solid transparent; line-height:1.42;
}
.toc li a:hover{color:var(--fg); background:var(--bg-sink); text-decoration:none}
.toc li a.on{color:var(--fg); font-weight:700; border-left-color:var(--rule); background:var(--accent-soft)}

/* ---------------- main ---------------- */
/* The column takes whatever width is left beside the sidebar. */
main{flex:1 1 auto; min-width:0; padding:0 3.4rem 4rem; max-width:none}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding:1rem 0 .7rem; border-bottom:1px solid var(--line-soft); margin-bottom:1.7rem;
}
.crumb{font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-mute); font-weight:700}
.themetoggle{
  border:1px solid var(--line); background:var(--bg-alt); color:var(--fg-soft);
  border-radius:3px; width:2rem; height:2rem; cursor:pointer; font-size:.9rem; line-height:1;
}
.themetoggle:hover{border-color:var(--accent); color:var(--accent)}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:inline}

/* ---------------- prose ----------------
   The main column runs to the full width of the window beside the sidebar,
   and so does everything in it. To bring back a reading measure for running
   text, set the width below to var(--measure) — tables, figures and cards
   keep the full width either way. */
.prose{max-width:none}
.prose > *{max-width:none}
.prose > figure.svgfig, .prose > figure.fig, .prose > .twofig{max-width:none}
.prose h1{
  font-size:2.1rem; line-height:1.16; margin:.3rem 0 1.1rem; letter-spacing:.012em;
  font-weight:700; color:var(--fg);
}
.prose h2{
  font-size:1.4rem; margin:2.5rem 0 .7rem; padding-top:.6rem; font-weight:700;
  border-top:1px solid var(--line-soft); line-height:1.3;
}
.prose h3{font-size:1.1rem; margin:1.8rem 0 .5rem; font-weight:700}
.prose h4{font-size:1rem; margin:1.4rem 0 .35rem; font-weight:700; font-style:italic; color:var(--fg-soft)}
.prose p{margin:.9rem 0}
.prose ul,.prose ol{margin:.85rem 0; padding-left:1.4rem}
.prose li{margin:.34rem 0}
.prose strong{font-weight:700}
.prose em{color:inherit}
.prose hr{border:0; border-top:1px solid var(--line); margin:1.6rem 0}
.prose code{
  font-family:var(--mono); font-size:.82em; background:var(--bg-sink);
  padding:.1em .35em; border-radius:2px;
}

/* Colour no longer separates a link from body text, so running-text links
   carry a rule the way they would in a set page. Chrome — the sidebar,
   cards, page navigation — stays undecorated and relies on position. */
.prose p a, .prose li a, .prose td a, .prose th a, .prose figcaption a,
.prose dd a, .prose blockquote a, .foot a{
  text-decoration:underline; text-decoration-thickness:.055em;
  text-underline-offset:.17em; text-decoration-color:var(--line);
}
.prose p a:hover, .prose li a:hover, .prose td a:hover, .prose th a:hover,
.prose figcaption a:hover, .prose dd a:hover, .prose blockquote a:hover, .foot a:hover{
  text-decoration-color:currentColor;
}
.prose .cards a, .prose .xlinks a, .prose .paths a{text-decoration:none}

/* opening italic chapter note — a standfirst, not a tinted box */
.prose > p:first-of-type > em:only-child{
  display:block; font-style:italic; color:var(--fg-soft);
  border-left:2px solid var(--line); background:none;
  padding:.15rem 0 .15rem 1.05rem; border-radius:0; font-size:1.02rem; line-height:1.55;
}

blockquote{
  margin:1.2rem 0; padding:.2rem 0 .2rem 1.15rem; background:none;
  border:0; border-left:2px solid var(--line);
  border-radius:0; font-size:.96rem; color:var(--fg-soft);
}
blockquote p{margin:.35rem 0}

/* tables, set the way a journal sets them: horizontal rules only */
.prose table{
  width:100%; border-collapse:collapse; margin:.7rem 0 1.7rem; font-size:.9rem;
  display:block; overflow-x:auto; border-top:1.5px solid var(--rule);
}
.prose thead th{
  text-align:left; font-weight:700; color:var(--fg); background:none;
  border-bottom:1px solid var(--fg-mute); padding:.45rem .6rem .4rem; vertical-align:bottom;
  line-height:1.35;
}
.prose tbody td{
  border-bottom:1px solid var(--line-soft); padding:.45rem .6rem; vertical-align:top;
  line-height:1.5;
}
.prose tbody tr:last-child td{border-bottom:1.5px solid var(--rule)}
.prose tbody tr:hover td{background:var(--bg-alt)}

/* figures. The lifecycle wheel and the module map are the two colour plates
   in the documentation; everything else is drawn in ink. */
figure.fig{margin:1.7rem 0; text-align:center}
figure.fig img{
  max-width:100%; height:auto; border:1px solid var(--line);
  border-radius:2px; background:#fff; padding:.5rem;
}
figure.fig figcaption{
  margin-top:.6rem; font-size:.85rem; color:var(--fg-mute); text-align:left; line-height:1.55;
  max-width:var(--measure);
}
figure.fig figcaption b, figure.fig figcaption strong{color:var(--fg-soft)}

/* Click a plate to read it at full size. Diagram labels are set small in the
   source images, so the viewer is what makes them legible. */
.zoombtn{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; font:inherit; color:inherit;
}
.zoombtn:focus-visible{outline:2px solid var(--fg); outline-offset:3px}
.zoombtn img{display:block}
.figzoom{
  display:block; margin-top:.35rem; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mute);
}

.lbox{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; background:var(--bg)}
.lbox[hidden]{display:none}
.lbox-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:1.2rem;
  padding:.7rem 1.1rem; border-bottom:1px solid var(--line);
}
.lbox-cap{
  margin:0; flex:1 1 auto; min-width:0; font-size:.82rem; color:var(--fg-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lbox-tools{flex:0 0 auto; display:flex; align-items:center; gap:.35rem}
.lbox-b{
  font-family:var(--serif); font-size:.9rem; line-height:1; color:var(--fg);
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  min-width:2rem; height:2rem; padding:0 .5rem; cursor:pointer;
}
.lbox-b:hover{border-color:var(--fg-mute); background:var(--bg-alt)}
.lbox-b:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.lbox-b[disabled]{opacity:.4; cursor:default}
.lbox-b.lbox-t{font-size:.78rem; letter-spacing:.04em}
.lbox-b.lbox-x{font-size:1.15rem; margin-left:.45rem}
.lbox-pct{font-family:var(--mono); font-size:.72rem; color:var(--fg-soft); min-width:3.4rem; text-align:center}
.lbox-stage{flex:1 1 auto; position:relative; overflow:hidden; touch-action:none}
.lbox-img{
  position:absolute; left:50%; top:50%; max-width:100%; max-height:100%;
  background:#fff; transform-origin:center center; will-change:transform;
  -webkit-user-select:none; user-select:none;
}
.lbox-hint{
  flex:0 0 auto; margin:0; padding:.55rem 1.1rem .7rem; text-align:center;
  font-size:.74rem; color:var(--fg-mute); border-top:1px solid var(--line-soft);
}
.hint-coarse{display:none}
@media (hover:none) and (pointer:coarse){
  .hint-fine{display:none}
  .hint-coarse{display:inline}
}
@media (max-width:640px){
  .lbox-cap{display:none}
  .lbox-hint{font-size:.7rem}
  .lbox-bar{gap:.5rem; justify-content:flex-end}
}

/* callouts, driven by the leading bold run pandoc emits. Without colour the
   two kinds are separated by weight of rule and depth of fill. */
.callout{
  margin:1.2rem 0; padding:.85rem 1.05rem; border-radius:2px;
  border:1px solid var(--line); border-left:2px solid var(--fg-mute);
  background:var(--bg-alt); font-size:.96rem;
}
.callout.rec{border-color:var(--line); border-left:2px solid var(--fg-mute); background:var(--warn-bg)}
.callout.warn{border-color:var(--line); border-left:4px solid var(--rule); background:var(--note-bg)}
.callout p:first-child{margin-top:0}
.callout p:last-child{margin-bottom:0}

/* prev / next */
.pagenav{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:3rem 0 1.5rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.pn{
  display:block; padding:.7rem .9rem; border:1px solid var(--line);
  border-radius:3px; font-size:.9rem; font-weight:700; color:var(--fg);
}
.pn:hover{border-color:var(--accent); text-decoration:none; background:var(--bg-alt)}
.pn span{display:block; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:700; margin-bottom:.2rem}
.pn.next{text-align:right}

.foot{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--fg-soft)}
.foot .muted{color:var(--fg-mute); font-size:.8rem}

/* ---------------- landing page ---------------- */
.hero{padding:1rem 0 .5rem}
.hero h1{font-size:2.5rem; margin:.2rem 0 .55rem; letter-spacing:.01em; line-height:1.1}
.hero .lede{font-size:1.06rem; color:var(--fg-soft); max-width:none}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1rem; margin:1.8rem 0}
.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem;
  background:var(--bg-alt); display:block; color:var(--fg);
}
.card:hover{border-color:var(--accent); text-decoration:none}
.card h3{margin:0 0 .3rem; font-size:1rem; color:var(--fg)}
.card p{margin:0; font-size:.88rem; color:var(--fg-soft); line-height:1.5}

/* ---------------- responsive ---------------- */
.navtoggle{display:none}
.scrim{display:none}
@media (max-width:1020px){
  main{padding:0 1.4rem 3rem}
  .toc{position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%);
       transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.nav-open .toc{transform:translateX(0)}
  .navtoggle{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    position:fixed; top:.7rem; left:.7rem; z-index:60; width:2.4rem; height:2.4rem;
    background:var(--bg); border:1px solid var(--line); border-radius:3px; cursor:pointer;
    align-items:center;
  }
  .navtoggle span{display:block; width:15px; height:2px; background:var(--fg)}
  .topbar{padding-left:3rem}
  body.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:45}
}
@media (max-width:640px){
  .pagenav{grid-template-columns:1fr}
  .prose h1{font-size:1.7rem}
  body{font-size:16.5px}
}

/* ---------------- print ---------------- */
@media print{
  .toc,.topbar,.pagenav,.navtoggle,.searchbox,.scrim,.themetoggle,.lbox,.figzoom{display:none !important}
  main{padding:0; max-width:none}
  body{font-size:10.5pt; color:#000; background:#fff}
  .prose{max-width:none}
  .prose h1{page-break-before:always}
  .prose h2,.prose h3{page-break-after:avoid}
  .prose table,figure.fig{page-break-inside:avoid}
  .prose table{border-top:1.5px solid #000}
  .prose tbody tr:last-child td{border-bottom:1.5px solid #000}
  a{color:#000; text-decoration:none}
  .foot{border-top:1px solid #999}
}

/* ================================================================
   Practical Guide — overlays, templates, guidelines, checklists.
   Diagrams here are drawn in ink: tiers are separated by depth of
   fill and weight of rule, never by hue, so they read the same in
   print, in dark mode and in monochrome.
   ================================================================ */

:root{
  --t1-bg:#fbfbfa; --t1-ln:#c4c4be;
  --t2-bg:#f2f2ee; --t2-ln:#adada6;
  --t3-bg:#e7e7e1; --t3-ln:#8d8d86;
  --t4-bg:#d9d9d2; --t4-ln:#5f5f59;
}
html[data-theme="dark"]{
  --t1-bg:#1a1a19; --t1-ln:#3d3d3a;
  --t2-bg:#222220; --t2-ln:#4e4e4a;
  --t3-bg:#2c2c29; --t3-ln:#646460;
  --t4-bg:#383834; --t4-ln:#8a8a83;
}

/* ---------------- inline SVG diagrams ----------------
   The drawing is 720 coordinate units wide and is given the full column
   rather than the text measure, so one unit renders at roughly one pixel
   and the labels keep the size they were set at. */
figure.svgfig{margin:1.9rem 0}
figure.svgfig svg{
  display:block; width:100%; max-width:1400px; height:auto;
  border:1px solid var(--line); border-radius:2px;
  background:var(--bg); padding:.6rem;
}
figure.svgfig figcaption{max-width:none}
svg text{text-rendering:geometricPrecision}
svg .s-box{fill:var(--bg); stroke:var(--line); stroke-width:1}
svg .s-box-a{fill:var(--accent-soft); stroke:var(--fg-mute); stroke-width:1.4}
svg .s-t1{fill:var(--t1-bg); stroke:var(--t1-ln); stroke-width:1}
svg .s-t2{fill:var(--t2-bg); stroke:var(--t2-ln); stroke-width:1.2}
svg .s-t3{fill:var(--t3-bg); stroke:var(--t3-ln); stroke-width:1.5}
svg .s-t4{fill:var(--t4-bg); stroke:var(--t4-ln); stroke-width:2}
svg .s-t{fill:var(--fg); font-family:var(--serif); font-size:13.5px; font-weight:700}
svg .s-tm{fill:var(--fg-soft); font-family:var(--serif); font-size:12.5px}
svg .s-h{fill:var(--fg-soft); font-family:var(--serif); font-size:12.5px; font-style:italic}
svg .s-badge{fill:var(--fg); font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.05em}
svg .s-ln{stroke:var(--fg-mute); fill:none; stroke-width:1.3}
svg .s-fillln{fill:var(--fg-mute); stroke:none}

/* ---------------- key-facts strip ---------------- */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.1rem 1.6rem; margin:1.4rem 0 1.7rem; padding:.9rem 0;
  border-top:1.5px solid var(--rule); border-bottom:1.5px solid var(--rule);
  background:none;
}
.facts > div{padding:.35rem 0}
.facts dt{font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:700}
.facts dd{margin:.15rem 0 0; font-size:.89rem; color:var(--fg); line-height:1.45}

/* ---------------- cross-reference strip ---------------- */
.xlinks{
  display:flex; flex-wrap:wrap; gap:.45rem; align-items:center;
  margin:2.5rem 0 .5rem; padding-top:1.1rem; border-top:1px solid var(--line-soft);
}
.xlinks .xl{font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:700; margin-right:.2rem}
.xlinks a{
  font-size:.85rem; padding:.28rem .6rem; border:1px solid var(--line);
  border-radius:2px; color:var(--fg-soft); background:var(--bg-alt);
}
.xlinks a:hover{border-color:var(--accent); color:var(--fg); text-decoration:none}

/* ---------------- templates ---------------- */
.tmpl{
  border:0; border-top:1.5px solid var(--rule); border-radius:0;
  padding:.9rem 0 .2rem; margin:2rem 0; background:none;
}
.tmpl > .tmplhead h3{margin:.1rem 0 .2rem; font-size:1.12rem; color:var(--fg)}
.tmpl .facts{margin:.7rem 0 1rem; border-top:0; border-bottom:1px solid var(--line);
  padding-top:.2rem}
.tmpl table{font-size:.86rem}
.tnote{font-size:.9rem; color:var(--fg-soft); border-left:2px solid var(--line);
  padding-left:.95rem; margin:1.1rem 0}
.example{
  border:1px solid var(--line); border-left:2px solid var(--fg-mute);
  background:var(--bg-alt); border-radius:0 2px 2px 0;
  padding:.75rem 1rem; margin:1.1rem 0; font-size:.89rem;
}
.example h4{margin:0 0 .3rem; font-size:.66rem; letter-spacing:.15em; font-style:normal;
  text-transform:uppercase; color:var(--fg-mute); font-weight:700}
.example p{margin:.3rem 0}
.mdblock{margin:1.1rem 0 1.3rem; border:1px solid var(--line); border-radius:2px;
  background:var(--bg-alt)}
.mdblock summary{
  cursor:pointer; padding:.5rem .9rem; font-size:.86rem; font-weight:700;
  color:var(--fg-soft); display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.mdblock[open] summary{border-bottom:1px solid var(--line)}
.mdblock pre, .codewrap pre{
  margin:0; padding:.85rem .9rem; overflow-x:auto; background:var(--bg);
  border-radius:0 0 2px 2px;
}
.codewrap{border:1px solid var(--line); border-radius:2px; margin:1.1rem 0;
  background:var(--bg)}
.codewrap pre{border-radius:2px}
.mdblock code, .codewrap code{
  font-family:var(--mono); font-size:.76rem; line-height:1.6;
  background:transparent; padding:0; white-space:pre; color:var(--fg-soft);
}
.copybtn{
  border:1px solid var(--line); background:var(--bg); color:var(--fg-soft);
  border-radius:2px; font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.22rem .6rem; cursor:pointer;
  flex:0 0 auto;
}
.copybtn:hover{border-color:var(--accent); color:var(--fg)}

/* ---------------- checklists ---------------- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin:1.5rem 0 .6rem; padding:.7rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:none;
}
.tb{
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  border-radius:3px; font-family:var(--serif); font-size:.85rem; font-weight:700;
  padding:.3rem .75rem; cursor:pointer;
}
.tb:hover{border-color:var(--accent); background:var(--bg-alt)}
.tbnote{font-size:.8rem; color:var(--fg-mute); flex:1 1 220px; line-height:1.45}
.cnote{font-size:.85rem; color:var(--fg-mute); margin:.4rem 0 1.3rem}

.checkset{
  border:0; border-top:1.5px solid var(--rule); border-radius:0;
  padding:.85rem 0 .4rem; margin:1.5rem 0; background:none;
}
.checkset.done{border-top-color:var(--fg-mute); opacity:.72}
.checkhead{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.checkhead h3{margin:.1rem 0 .45rem; font-size:1.05rem; color:var(--fg)}
.prog{font-family:var(--mono); font-size:.72rem; color:var(--fg-mute); font-weight:700;
  letter-spacing:.04em; white-space:nowrap; font-variant-numeric:tabular-nums}
.checks{list-style:none; margin:.4rem 0 .3rem; padding:0}
.checks li{margin:0; padding:.32rem 0; border-bottom:1px solid var(--line-soft); font-size:.92rem}
.checks li:last-child{border-bottom:0}
.checks li.ck{display:flex; align-items:flex-start; gap:.65rem}
.checks input[type="checkbox"]{
  margin:.36rem 0 0; width:.95rem; height:.95rem; flex:0 0 auto;
  accent-color:var(--fg); cursor:pointer;
}
.checks label{cursor:pointer; line-height:1.5; color:var(--fg)}
.checks li.on label{color:var(--fg-mute); text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:var(--line)}
.who{
  display:inline-block; margin-left:.4rem; font-family:var(--mono); font-size:.64rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-soft);
  background:var(--accent-soft); border-radius:2px; padding:.06rem .4rem;
  white-space:nowrap; vertical-align:1px;
}
.checks li.on .who{opacity:.55}

@media (max-width:640px){
  .facts{grid-template-columns:1fr}
  .checkset{padding:.8rem 0 .4rem}
}

/* narrow screens: let a diagram scroll rather than shrink its labels away */
@media (max-width:860px){
  figure.svgfig{overflow-x:auto; -webkit-overflow-scrolling:touch}
  figure.svgfig svg{min-width:680px}
  figure.svgfig figcaption{position:sticky; left:0; max-width:none}
}

/* ---------------- print, for the new components ---------------- */
@media print{
  .toolbar,.copybtn,.xlinks{display:none !important}
  .facts{break-inside:avoid; background:none; border-top:1.5px solid #000; border-bottom:1.5px solid #000}
  .checkset{break-inside:avoid; border-top:1.5px solid #000; background:none; opacity:1}
  .checks li.on label{text-decoration:none}
  .checks input[type="checkbox"]{-webkit-appearance:none; appearance:none;
    border:1px solid #333; border-radius:2px; width:.85rem; height:.85rem}
  .checks li.on input[type="checkbox"]{background:#333}
  .tmpl{border-top:1.5px solid #000}
  .tmpl,figure.svgfig{break-inside:avoid}
  .mdblock{display:none}
  figure.svgfig svg{background:none; border:1px solid #999}
  .prose h1{page-break-before:auto}
}

/* ---------------- download rows ---------------- */
.dlrow{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:1rem 0 1.2rem}
.dlrow .dl{font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:700; margin-right:.2rem}
.dlrow a{
  font-size:.84rem; padding:.3rem .65rem; border:1px solid var(--line);
  border-radius:2px; color:var(--fg); background:var(--bg-alt); text-decoration:none;
}
.dlrow a:hover{border-color:var(--accent); background:var(--bg); text-decoration:none}
.dlrow a .fmt{font-family:var(--mono); font-size:.68rem; color:var(--fg-mute); margin-left:.4rem;
  letter-spacing:.04em}
@media print{ .dlrow{display:none} }