/* marketing harness · document pages (guide, access) in the instrument language */
:root{
  --bg:#ffffff; --ink:#0a0a0a; --soft:#dcdcdc; --hair:#ececec; --grid:#f1f1f1;
  --muted:#8a8a8a; --accent:#d7261e; --paper:#fafafa;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--mono); font-size:13px; line-height:1.55; padding:14px 20px 40px}
a{color:inherit}
code{background:var(--hair); padding:0 4px}
.wrap{max-width:1180px; margin:0 auto}
#hd{display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px 20px; border-bottom:1px solid var(--ink); padding-bottom:9px; margin-bottom:18px}
#hd .logo{width:30px; height:30px}
#hd h1{font-size:18px; font-weight:700; margin:0; letter-spacing:-.01em}
#hd p{color:var(--muted); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin:2px 0 0}
nav.pages{display:flex}
nav.pages a{border:1px solid var(--ink); padding:5px 10px; text-decoration:none; font-size:12px; letter-spacing:.04em}
nav.pages a + a{border-left:none}
nav.pages a.on,nav.pages a:hover{background:var(--ink); color:var(--bg)}
.lead{font-size:15px; line-height:1.6; max-width:820px; margin:0 0 22px}
.lead b{box-shadow:inset 0 -3px 0 var(--accent); font-weight:700}
.panel{border:1px solid var(--ink); padding:10px 14px 14px; margin:0 0 18px; background:var(--bg)}
.panel > h2{display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-bottom:6px; border-bottom:1px dashed var(--soft); margin:0 0 10px}
.panel > h2 em{font-style:normal; color:var(--ink); letter-spacing:.04em}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; border-top:1px solid var(--ink); border-left:1px solid var(--ink)}
.cols > div{border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:10px 12px}
.cols h3{font-size:12px; margin:0 0 6px; font-weight:700}
.cols p{margin:0 0 6px}
table.t{border-collapse:collapse; width:100%; font-size:12px}
table.t th{font-weight:500; color:var(--muted); text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding:5px 6px}
table.t td{border-bottom:1px dotted var(--soft); padding:6px; vertical-align:top}
table.t td code{white-space:nowrap}
.dot{display:inline-block; width:9px; height:9px; border:1.3px solid var(--ink); border-radius:50%; vertical-align:-1px}
.dot.ok{background:var(--ink)}
.dot.no{border-color:var(--accent)}
.cap{font-size:10.5px; color:var(--muted)}
/* timeline of blocks */
.ph{display:grid; grid-template-columns:120px minmax(0,1fr); gap:0 16px; padding:12px 0; border-bottom:1px dotted var(--soft)}
.ph:last-child{border-bottom:none}
.ph .num{font-size:28px; font-weight:800; letter-spacing:-.04em; line-height:1}
.ph .num small{display:block; font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.ph h3{font-size:15px; margin:0 0 4px}
.ph p{margin:0 0 6px; max-width:860px}
.ph ul{margin:0 0 6px; padding:0; list-style:none}
.ph li{padding:2px 0 2px 16px; position:relative}
.ph li::before{content:"→"; position:absolute; left:0; color:var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.chip{border:1px solid var(--soft); padding:1px 6px; font-size:11px; cursor:pointer; background:var(--bg)}
.chip:hover{border-color:var(--ink)}
.chip.dead{cursor:default; color:var(--muted)}
.go{font-size:11px; text-decoration:none; border-bottom:1px solid var(--accent)}
details.doc{border-top:1px dotted var(--soft); padding:6px 0}
details.doc > summary{cursor:pointer; list-style:none; font-weight:500}
details.doc > summary::before{content:"+ "; color:var(--muted)}
details.doc[open] > summary::before{content:"– "}
/* markdown */
.md{font-size:12.5px; line-height:1.6}
.md h1{font-size:16px; margin:4px 0 8px}
.md h2{font-size:13px; margin:14px 0 6px; border-bottom:1px dashed var(--soft); padding-bottom:3px}
.md h3{font-size:12.5px; margin:10px 0 4px}
.md p{margin:0 0 8px}
.md ul,.md ol{margin:0 0 8px; padding-left:18px}
.md pre{background:var(--paper); border:1px solid var(--hair); padding:6px 8px; overflow:auto; white-space:pre-wrap; margin:0 0 8px}
.md pre code{background:none; padding:0}
.md table{border-collapse:collapse; margin:0 0 10px; font-size:11.5px; width:100%}
.md th,.md td{border:1px solid var(--soft); padding:3px 5px; text-align:left; vertical-align:top}
.md th{font-weight:500; background:var(--paper)}
.md blockquote{border-left:2px solid var(--ink); margin:0 0 8px; padding-left:8px; color:#444}
.md .fm{display:none}
.md a.wl{border-bottom:1px solid var(--accent); cursor:pointer; text-decoration:none}
.md a.wl.miss{border-bottom:1px dashed var(--soft); color:var(--muted); cursor:default}
/* drawer */
#drawer{position:fixed; top:12px; right:12px; bottom:12px; width:min(620px,calc(100vw - 24px)); background:var(--bg); border:1px solid var(--ink); box-shadow:8px 8px 0 rgba(0,0,0,.08); display:flex; flex-direction:column; z-index:5}
#drawer[hidden]{display:none}
#drawer header{display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border-bottom:1px solid var(--ink)}
#drawer header b{display:block}
#drawer header span{color:var(--muted); font-size:10.5px}
#drawer header button{font:inherit; border:1px solid var(--ink); background:var(--bg); cursor:pointer; padding:0 8px; align-self:flex-start}
#drawer .md{padding:10px 14px; overflow:auto; flex:1}
footer{color:var(--muted); font-size:11px; border-top:1px solid var(--ink); padding-top:10px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
@media (max-width:760px){
  body{padding:10px 16px 32px}
  #hd{grid-template-columns:30px minmax(0,1fr)}
  nav.pages{grid-column:1 / -1}
  .ph{grid-template-columns:minmax(0,1fr)}
  .ph .num{margin-bottom:6px}
  table.t{display:block; overflow-x:auto}
  #drawer{left:16px; right:16px; width:auto}
}
pre.md{background:var(--paper); border:1px solid var(--hair); padding:6px 8px; margin:0 0 8px; white-space:pre-wrap; overflow-wrap:anywhere}
pre.md code{background:none; padding:0}
.cols > div{min-width:0}
td code{overflow-wrap:anywhere}
code,kbd,pre{font-family:inherit}
/* shared shell: the same header as the instrument (index.html) */
#hd{grid-template-columns:34px minmax(0,1fr) auto auto}
#hd .logo{width:34px; height:34px; object-fit:contain}
.brand h1{font-size:19px; font-weight:700; letter-spacing:.01em; margin:0}
.brand p{color:var(--muted); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin:2px 0 0}
.navs{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.navs nav{display:flex}
.mlink,.pagelink{border:1px solid var(--ink); padding:5px 10px; text-decoration:none; color:var(--ink); letter-spacing:.04em; font-size:12px; background:var(--bg)}
.mlink + .mlink,.pagelink + .pagelink{border-left:none}
.mlink:hover,.pagelink:hover,.pagelink.on{background:var(--ink); color:var(--bg)}
button.search{font:inherit; font-size:12px; border:1px solid var(--soft); background:var(--bg); color:var(--muted); padding:5px 10px; cursor:pointer; display:flex; gap:8px; align-items:center}
button.search:hover{border-color:var(--ink); color:var(--ink)}
kbd{font-size:10px; border:1px solid var(--soft); padding:0 4px; color:var(--muted); background:var(--paper)}
.clock{display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:190px}
.clock b{font-size:12px}
.clock span{color:var(--muted); font-size:11px}
nav.pages a.on{background:var(--ink); color:var(--bg)}
#search{position:fixed; inset:0; z-index:10; background:rgba(255,255,255,.7); backdrop-filter:blur(2px); display:grid; justify-items:center; align-items:start; padding-top:12vh}
#search[hidden]{display:none}
#search .box{width:min(640px,calc(100vw - 32px)); background:var(--bg); border:1px solid var(--ink); box-shadow:10px 10px 0 rgba(0,0,0,.08); padding:10px 12px}
#q{width:100%; font:inherit; font-size:15px; border:none; border-bottom:1px solid var(--ink); padding:6px 2px 8px; outline:none}
#qres{list-style:none; margin:6px 0; padding:0; max-height:52vh; overflow:auto}
#qres li{display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:8px; padding:5px 6px; cursor:pointer; border-bottom:1px dotted var(--hair)}
#qres li.on{background:var(--ink); color:var(--bg)}
#qres li small{color:var(--muted); font-size:10px}
@media (max-width:760px){ #hd{grid-template-columns:30px minmax(0,1fr)} .navs,.clock{grid-column:1 / -1; justify-content:flex-start; align-items:flex-start} }
/* the header sits where the instrument's does: full width, same paddings and type */
body{padding:10px 12px 40px; letter-spacing:.02em}
#hd{font-size:12px; margin:0 0 18px; padding-bottom:9px}
#hd .brand h1{letter-spacing:.01em}
.wrap{padding:0 8px}
/* one header geometry on every page */
#hd{min-height:58px}
.brand p{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand{min-width:0}
.clock{width:250px; min-width:250px}
.navs button,.navs a{line-height:1.45; font-size:12px; padding:5px 10px}
button.search{letter-spacing:.04em}
/* v7: markdown tables scroll inside themselves on a phone, the page never scrolls sideways */
.md .tw{overflow-x:auto; max-width:100%; margin:0 0 10px}
.md .tw table{margin:0}
html,body{max-width:100%; overflow-x:hidden}
@media (max-width:760px){ .md table td,.md table th{min-width:90px} }

.resource-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0;font-size:12px}.resource-links a{text-underline-offset:4px}.flow-visual{width:100%;display:block;border:1px solid #ddd;margin:16px 0}.public-note{padding:10px 12px;border-left:3px solid #D92027;font-size:12px;background:#fafafa}pre{white-space:pre-wrap;overflow-wrap:anywhere} .t{display:block;overflow:auto}@media(max-width:640px){#hd{grid-template-columns:28px 1fr}#hd nav{grid-column:1/-1}.lead{font-size:14px}.resource-links{gap:12px}body{padding:12px}.cols{grid-template-columns:1fr}}