/* The document reader (/docs/...): a quiet reading page in the site's colours. Every paragraph and clause carries its
   reference on the left and can be linked to; the one a link points at is highlighted. */
body.doc{padding-bottom:64px}
.skip-doc{position:absolute;left:16px;top:-80px;z-index:90;padding:12px 16px;border-radius:var(--pill);background:var(--focus);color:var(--on-hi)}
.skip-doc:focus{top:12px}
.doc-bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:var(--paper);border-bottom:1px solid var(--line)}
.doc-back{font:650 16px/1 var(--text);color:var(--ink);text-decoration:none;white-space:nowrap}
.doc-back:hover{color:var(--accent)}
.doc-nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto;padding:4px;border-radius:var(--pill);background:var(--tint-1)}
.doc-nav a{padding:8px 13px;border-radius:var(--pill);font:550 14.5px/1 var(--text);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.doc-nav a:hover{color:var(--ink)}
.doc-nav a[aria-current="page"]{background:var(--tab-on);box-shadow:var(--tab-on-sh);color:var(--ink);font-weight:650}
.doc-main{width:100%;max-width:860px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px)) 0 max(20px,env(safe-area-inset-right,0px))}
.doc-head{display:grid;gap:14px;padding:clamp(32px,6vw,64px) 0 28px}
.doc-kind{font:650 15px/1.2 var(--text);color:var(--accent)}
.doc-title{font:400 clamp(32px,4.2vw,50px)/1.08 var(--disp);letter-spacing:-.01em;color:var(--head);text-wrap:balance}
.doc-note{max-width:64ch;padding:14px 18px;border-radius:var(--r);background:var(--amber-t);font-size:16px;line-height:1.5;color:var(--ink)}
.doc-actions{display:flex;flex-wrap:wrap;gap:10px}
.doc-toc{margin:0 0 28px;border-radius:var(--r-lg);background:var(--surface)}
.doc-toc summary{list-style:none;cursor:pointer;padding:16px 20px;font:650 17px/1.2 var(--text)}
.doc-toc summary::-webkit-details-marker{display:none}
.doc-toc summary::after{content:" +";color:var(--accent)}
.doc-toc[open] summary::after{content:" \2212"}
.doc-toc ol{display:grid;gap:4px;padding:0 20px 18px 40px;list-style:decimal;columns:2 260px}
.doc-toc li{font-size:15.5px;line-height:1.4;break-inside:avoid;padding:3px 0}
.doc-body{display:grid}
.doc-h2{margin:48px 0 14px;font:400 clamp(24px,2.6vw,32px)/1.2 var(--disp);color:var(--head);scroll-margin-top:76px}
.doc-h3{margin:26px 0 8px;font:650 19px/1.3 var(--text);color:var(--ink);scroll-margin-top:76px}
.u{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;padding:10px 12px;margin:0 -12px;border-radius:0;scroll-margin-top:84px;transition:background-color .6s}
.u-ref{font:600 13.5px/1.6 var(--text);color:var(--ink-3);text-decoration:none;overflow-wrap:anywhere;padding-top:2px}
.u-ref:hover{color:var(--accent)}
.u-text p{font-size:17px;line-height:1.7;color:var(--ink);max-width:68ch}
.u-text p + p{margin-top:10px}
.u:target{background:var(--accent-t)}
.u:target .u-ref{color:var(--accent);font-weight:700}
@media (max-width: 640px){
  .u{grid-template-columns:minmax(0,1fr);gap:2px}
  .doc-nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .doc-toc ol{columns:1}
}