/* hdtp.io's own layer over hdtp-web-kit: the open/closed network pictures, the comparison
 * matrix and the battery beside the protocol's refusals. Orange means "allowed" and nothing else. */

.nets{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.net{margin:0;border:1px solid var(--line);border-radius:18px;padding:1.3rem;background:#fff}
.net svg{width:100%;height:auto;max-height:13rem;display:block;margin-bottom:1rem}
.net h3{font-size:1.15rem;margin-bottom:.35rem}
.net p{margin:0;color:var(--muted);font-size:.95rem}
.n-hub{fill:var(--bg-3);stroke:var(--line-2)}
.n-hub-t{font:600 11px var(--sans);fill:var(--muted)}
.n-spokes path{stroke:var(--line-2);stroke-width:1.5}
.n-dot circle{fill:#8A8D94}
.n-end{fill:var(--ink)}
.n-end-t{font:600 15px var(--display);fill:#fff}
.n-line{stroke:var(--accent);stroke-width:3}
.n-gate{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.n-tick{stroke:var(--accent-ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.n-strangers circle{fill:#B8BBC1}
.n-block{stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 4}
@media (max-width:760px){.nets{grid-template-columns:1fr}}

.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:.93rem}
.cmp th,.cmp td{padding:.75rem .8rem;border-bottom:1px solid var(--line);text-align:center}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font-family:var(--display);font-weight:600;color:var(--ink);background:var(--bg-2)}
.cmp tbody th{text-align:left;font-weight:500;color:var(--ink)}
.cmp .hdtp{background:var(--accent-soft)}
.cmp thead .hdtp{color:var(--accent-ink)}
.m{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.85rem;font-weight:700;line-height:1}
.m .mi{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.m .mi-fill{fill:currentColor;stroke:none}
.m.y{background:var(--ink);color:#fff}
.m.p{background:var(--bg-3);color:var(--ink);border:1px solid var(--line-2)}
.m.n{background:#fff;color:#8A8D94;border:1px solid var(--line-2)}
.m.d{background:#fff;color:var(--accent-ink);border:1px dashed var(--accent-ink)}
.m.a{color:var(--faint)}
@media (max-width:720px){
  .cmp{min-width:600px;font-size:.84rem}
  .cmp th,.cmp td{padding:.6rem .5rem}
  .cmp tbody th{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line);min-width:9rem;max-width:10rem}
  .cmp thead th:first-child{position:sticky;left:0;z-index:1;background:var(--bg-2)}
}
.cmp-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0 1.4rem;font-size:.88rem;color:var(--muted)}
.cmp-legend span{display:inline-flex;align-items:center;gap:.45rem}
.cmp-notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,3rem);margin-bottom:1rem}
.cmp-notes p{margin:0;color:var(--text);max-width:36rem}
@media (max-width:760px){.cmp-notes{grid-template-columns:1fr}}

.two-col-p{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.two-col-p>*{min-width:0}
.two-col-p p.muted{max-width:38rem}
.two-col-p .battery{margin:0}
@media (max-width:900px){.two-col-p{grid-template-columns:1fr}}
.two-col-p .ticks+p{margin-top:1.2rem}

/* Motion (the kit's site.js adds .rv/.in as blocks scroll in; reduced motion stops all of it).
   The hero enters once, from CSS; the diagrams show what they mean: strangers call a directory,
   a message crosses the consent gate while a stranger is turned back, the table fills column by
   column. Travelling dots are transparent outside their keyframes, so a still page shows none. */

.in .n-spokes path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s var(--ease-out) forwards}
.n-spokes path:nth-child(2){animation-delay:.06s}.n-spokes path:nth-child(3){animation-delay:.12s}.n-spokes path:nth-child(4){animation-delay:.18s}
.n-spokes path:nth-child(5){animation-delay:.24s}.n-spokes path:nth-child(6){animation-delay:.3s}.n-spokes path:nth-child(7){animation-delay:.36s}
.n-dot circle,.n-tick,.n-gate{transform-box:fill-box;transform-origin:center}
.in .n-dot circle{animation:pop .4s cubic-bezier(.3,1.3,.5,1) both;animation-delay:.5s}
.n-call{fill:var(--accent);opacity:0}
.in .n-call{animation:call-in 2.8s ease-in-out infinite}
.in .n-call.c1{--dx:112px;--dy:54px;animation-delay:1s}
.in .n-call.c2{--dx:-118px;--dy:-30px;animation-delay:1.9s}
.in .n-call.c3{--dx:76px;--dy:-84px;animation-delay:2.8s}
@keyframes call-in{0%{opacity:0;transform:none}12%{opacity:1}55%{opacity:1;transform:translate(var(--dx),var(--dy))}62%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}

.in .n-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s var(--ease-out) .15s forwards}
.in .n-gate{animation:pop .45s cubic-bezier(.3,1.3,.5,1) .5s both}
.in .n-tick{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .35s var(--ease-out) .85s forwards}
.n-msg{fill:var(--ink);opacity:0}
.in .n-msg{animation:cross 3.2s ease-in-out 1.4s infinite}
@keyframes cross{0%{opacity:0;transform:none}10%{opacity:1}80%{opacity:1;transform:translateX(84px)}90%,100%{opacity:0;transform:translateX(84px)}}
.n-probe{fill:#8A8D94;opacity:0}
.in .n-probe{animation:turned-back 3.2s ease-in-out 2.2s infinite}
@keyframes turned-back{0%{opacity:0;transform:none}12%{opacity:1}42%{opacity:1;transform:translateY(34px)}62%{opacity:.8;transform:translateY(8px)}75%,100%{opacity:0;transform:none}}

.in .cmp .m{animation:pop .35s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(.2s + var(--c,0) * 110ms + var(--r,0) * 22ms)}
.cmp td:nth-child(3){--c:1}.cmp td:nth-child(4){--c:2}.cmp td:nth-child(5){--c:3}.cmp td:nth-child(6){--c:4}.cmp td:nth-child(7){--c:5}
.cmp tr:nth-child(2){--r:1}.cmp tr:nth-child(3){--r:2}.cmp tr:nth-child(4){--r:3}.cmp tr:nth-child(5){--r:4}
.cmp tr:nth-child(6){--r:5}.cmp tr:nth-child(7){--r:6}.cmp tr:nth-child(8){--r:7}.cmp tr:nth-child(9){--r:8}.cmp tr:nth-child(10){--r:9}

/* ------------------------------------------------------------------ the hero: HDTP at a glance */
.hero-p{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:clip}
.hero-p::before{content:"";position:absolute;inset:0 0 auto;height:620px;z-index:-1;pointer-events:none;background:radial-gradient(60rem 26rem at 78% -10%,rgb(var(--accent-rgb) / .12),transparent 70%)}
.hero-p-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-p-grid>*{min-width:0}
.hero-p .ver{margin:0 0 1rem;font-size:.9rem;color:var(--muted)}
.hero-p h1{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:700;letter-spacing:-.04em;line-height:.98;margin:0 0 1.3rem;max-width:13ch}
.hero-p .lede{max-width:36rem;margin-bottom:1.6rem}
.hero-p .hero-actions{margin:0}
.glance{margin:0}
.glance svg{width:100%;height:auto;display:block}
.g-wallet{fill:var(--ink)}
.g-host{fill:#fff;stroke:var(--ink);stroke-width:2}
.g-t{font:600 17px var(--display);fill:var(--ink)}
.g-t.light{fill:#fff}
.g-s{font:500 12.5px var(--sans);fill:var(--muted)}
.g-s.light{fill:var(--dark-muted)}
.g-issue{stroke:var(--ink);stroke-width:2;stroke-dasharray:4 5;fill:none}
.g-link{stroke:var(--accent);stroke-width:3;fill:none}
.g-ok circle{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.g-ok path{fill:none;stroke:var(--accent-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.g-okt{fill:var(--accent-ink);font-weight:600}
.g-env{opacity:0}
.g-env rect{fill:var(--ink)}
.g-env path{fill:none;stroke:#fff;stroke-width:1.6}
.g-call{font-weight:600;fill:var(--ink)}
.g-none rect{fill:#fff;stroke:var(--line-2);stroke-dasharray:4 4}
.g-none text{font:500 13px var(--sans);fill:var(--faint);text-decoration:line-through}
@media (max-width:900px){.hero-p-grid{grid-template-columns:1fr}.hero-p h1{max-width:15ch}.glance{max-width:34rem;margin-inline:auto;width:100%}}

/* ------------------------------------------------------------------ the sequence */
.seq{list-style:none;margin:0;padding:1.2rem 0 .6rem;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:.3rem;
  background:
    linear-gradient(var(--line-2),var(--line-2)) 12.5% 0/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 37.5% 0/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 62.5% 0/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 87.5% 0/1px 100% no-repeat}
.seq .lanes{grid-column:1/5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:.8rem}
.seq .lanes span{justify-self:center;background:var(--ink);color:#fff;font:600 .9rem var(--display);padding:.5rem 1rem;border-radius:10px;white-space:nowrap}
.seq .lanes span:nth-child(n+2):nth-child(-n+3){background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.sm{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:3.9rem;padding-bottom:.35rem;margin-inline:calc(100% / (2 * var(--k)))}
.sm .who{display:none}
.sm .lb{align-self:center;text-align:center;font-size:.9rem;color:var(--text);padding:.1rem .6rem;margin-bottom:.35rem;line-height:1.35;background:var(--bg-2);border-radius:6px;max-width:100%}
.sm .lb code{font-size:.85em}
.sm .ln{position:relative;height:2px;background:var(--ink);transform-origin:left center}
.sm .ln::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:9px solid var(--ink);border-right:0}
.sm.l .ln{transform-origin:right center}
.sm.l .ln::after{right:auto;left:-1px;border-left:0;border-right:9px solid var(--ink)}
.sm.sealed .ln{background:var(--accent);height:3px}.sm.sealed .ln::after{border-left-color:var(--accent)}.sm.sealed.l .ln::after{border-right-color:var(--accent)}
.sm.s14{grid-column:1/5;--k:4}.sm.s23{grid-column:2/4;--k:2}.sm.s34{grid-column:3/5;--k:2}.sm.s12{grid-column:1/3;--k:2}
.sm.n3{grid-column:2/5;--k:1;margin-inline:0;align-items:center}
.sm.n3 .lb{background:var(--accent-soft);border:1px solid rgb(var(--accent-rgb) / .35);border-radius:10px;padding:.55rem .8rem;color:var(--accent-ink);max-width:24rem}
@media (max-width:760px){
  .seq{display:block;background:none;padding:0}
  .seq .lanes{display:none}
  .sm{margin:0 0 .6rem;min-height:0;padding:.8rem 1rem;background:#fff;border:1px solid var(--line);border-radius:12px;display:block}
  .sm .who{display:block;font:600 .8rem var(--sans);color:var(--accent-ink);margin-bottom:.25rem}
  .sm .lb{text-align:left;padding:0}
  .sm .ln{display:none}
  .sm.n3 .lb{background:none;border:0;padding:0}
}

/* ------------------------------------------------------------------ the tier funnel */
.funnel{display:grid;justify-items:center;gap:0}
.fn-step,.fn-q{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:.8rem 1.2rem;border-radius:14px;min-width:min(22rem,100%)}
.fn-step{background:var(--ink);color:#fff}
.fn-step span{color:var(--dark-muted);font-size:.88rem}
.fn-q{background:#fff;border:1.5px solid var(--ink);margin-top:2.2rem}
.fn-q::before,.fn-tiers::before{content:"";position:absolute;left:50%;top:-2.2rem;height:2.2rem;width:2px;background:var(--ink);transform-origin:top}
.fn-no{font-size:.85rem;color:var(--muted)}
.fn-tiers{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%;margin-top:2.2rem}
.tr{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:1.1rem 1.2rem}
.tr.on{border-color:var(--accent-ui);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .12)}
.tr h3{margin:0 0 .3rem;font-size:1.15rem}
.tr p{margin:0 0 .7rem;color:var(--muted);font-size:.9rem}
.tr .lim{margin:.7rem 0 0;font-size:.82rem;color:var(--faint)}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.tl li{font:500 .78rem var(--mono);padding:.3rem .5rem;border-radius:7px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink)}
.tr.on .tl li{background:var(--accent-soft);border-color:rgb(var(--accent-rgb) / .35);color:var(--accent-ink)}
.tr.on .tl li.off{background:#fff;border-style:dashed;border-color:var(--line-2);color:var(--faint);text-decoration:line-through}
@media (max-width:820px){.fn-tiers{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ root and leaves */
.idc{margin:0;display:block}
.id-root{background:var(--ink);color:#fff;border-radius:16px;padding:1rem 1.2rem;display:grid;gap:.15rem}
.id-root b{font:600 1.1rem var(--display)}
.id-root span{color:var(--dark-muted);font-size:.88rem}
.id-root code{background:none;border:0;padding:0;color:var(--accent-2);font-size:.85rem}
.id-arrow{height:1.6rem;width:2px;margin-left:2rem;background:repeating-linear-gradient(var(--ink) 0 4px,transparent 4px 8px)}
.leaf{background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:.85rem 1.1rem;margin-bottom:.7rem}
.leaf code{background:none;border:0;padding:0;font-size:.85rem;color:var(--text)}
.lf-h{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.lf-h b{font-size:.98rem}
.leaf .tag{font-size:.75rem;padding:.2rem .5rem;border-radius:999px;background:var(--bg-3);color:var(--muted)}
.leaf .tag.now{background:var(--accent-soft);color:var(--accent-ink)}
.leaf .bar{height:6px;border-radius:6px;background:var(--bg-3);margin:.6rem 0 .35rem;overflow:hidden}
.leaf .bar i{display:block;height:100%;width:100%;background:var(--accent);border-radius:6px;transform-origin:left}
.leaf.la{border-color:var(--line-2);background:var(--bg-2)}
.leaf.la b,.leaf.la code{color:var(--muted)}
.leaf.la .bar i{background:#B8BBC1}
.lf-d{font-size:.8rem;color:var(--faint)}

/* ------------------------------------------------------------------ motion for the new visuals
   The hero plays once on load, from CSS: roots, leaves issued, both approvals, the link, then a
   sealed call crosses back and forth. Below the fold each visual plays when it arrives (.in). */
@media (prefers-reduced-motion:no-preference){
  .hero-p .ver,.hero-p h1,.hero-p .lede,.hero-p .hero-actions{animation:rise .7s var(--ease-out) both}
  .hero-p h1{animation-delay:.07s}.hero-p .lede{animation-delay:.14s}.hero-p .hero-actions{animation-delay:.21s}
  .g-wallet,.g-host{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.3,1.3,.5,1) both}
  .g-r .g-wallet{animation-delay:.12s}.g-l .g-host{animation-delay:.55s}.g-r .g-host{animation-delay:.67s}
  .g-side text{animation:rise .5s var(--ease-out) both;animation-delay:.3s}
  .g-issue{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s var(--ease-out) .35s forwards}
  .g-link{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s var(--ease-out) 1.1s forwards}
  .g-ok{transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.3,.5,1) both}
  .g-ok1{animation-delay:1.6s}.g-ok2{animation-delay:1.85s}
  .g-okt,.g-call{animation:rise .5s var(--ease-out) 2.1s both}
  .g-env{animation:g-cross 4.4s ease-in-out 2.6s infinite}
  .g-none rect,.g-none text{animation:rise .5s var(--ease-out) 2.3s both}
}
@keyframes g-cross{0%{opacity:0;transform:translate(214px,176px)}8%{opacity:1}42%{opacity:1;transform:translate(306px,176px)}50%{opacity:0;transform:translate(306px,176px)}58%{opacity:1;transform:translate(306px,176px)}92%{opacity:1;transform:translate(214px,176px)}100%{opacity:0;transform:translate(214px,176px)}}
.in.sm .ln,.in .sm .ln{animation:grow-x .5s var(--ease-out) both;animation-delay:calc(.15s + var(--r,0) * 110ms)}
.in.sm .lb,.in .sm .lb{animation:rise .45s var(--ease-out) both;animation-delay:calc(.25s + var(--r,0) * 110ms)}
.fn-q.in::before,.fn-tiers.in::before{animation:fn-drop .45s var(--ease-out) both}
@keyframes fn-drop{from{transform:scaleY(0)}to{transform:none}}
.in .tr.on .tl li{animation:pop .35s cubic-bezier(.3,1.3,.5,1) both}
.tr.on .tl li:nth-child(2){animation-delay:.06s}.tr.on .tl li:nth-child(3){animation-delay:.12s}.tr.on .tl li:nth-child(4){animation-delay:.18s}.tr.on .tl li:nth-child(5){animation-delay:.24s}.tr.on .tl li:nth-child(6){animation-delay:.3s}
.in .tr.on .tl li.off{animation:pop .35s cubic-bezier(.3,1.3,.5,1) .24s both,sw-strike .4s ease-out 1.4s both}
@keyframes sw-strike{from{background:var(--accent-soft);color:var(--accent-ink);text-decoration-color:transparent}to{background:#fff;color:var(--faint)}}
.in.idc .leaf.la .bar i,.in .leaf.la .bar i{animation:grow-x 1.4s var(--ease-out) .3s both}
.in.idc .leaf.la{animation:la-fade .5s ease-out 2.4s both}
@keyframes la-fade{from{border-color:var(--ink);background:#fff}to{border-color:var(--line-2);background:var(--bg-2)}}
.in.idc .leaf.lb{animation:rise .6s var(--ease-out) 1.8s both}
.in.idc .leaf.lb .bar i{animation:grow-x 1.2s var(--ease-out) 2.3s both}
.in.idc .leaf .tag{animation:pop .4s cubic-bezier(.3,1.3,.5,1) 2.6s both}
.seq .sm:nth-child(3){--r:1}.seq .sm:nth-child(4){--r:2}.seq .sm:nth-child(5){--r:3}.seq .sm:nth-child(6){--r:4}.seq .sm:nth-child(7){--r:5}.seq .sm:nth-child(8){--r:6}.seq .sm:nth-child(9){--r:7}

/* Phones: the diagrams' secondary labels would render under 9px, so they give way and the rest grows. */
@media (max-width:560px){
  .g-t{font-size:21px}.g-s{font-size:16px}.g-s.light,.g-sub{display:none}.g-okt{font-size:16px}
  .g-none text{font-size:15px}
}
.scroll-hint{display:none;margin:.6rem 0 0;font-size:.85rem;color:var(--muted)}
.scroll-hint::after{content:" →"}
@media (max-width:720px){.scroll-hint{display:block}}

/* ------------------------------------------------------------------ the chapter map
   The specification's chapters grouped by the question each answers, on one spine; each stage
   lights as it arrives. Section numbers are SPEC.md's. */
.chmap{margin:1.6rem 0 0}
.chmap figcaption{font-weight:600;color:var(--ink);margin-bottom:.9rem}
.ch-stages{list-style:none;margin:0;padding:0 0 0 1.4rem;position:relative}
.ch-stages::before{content:"";position:absolute;left:.35rem;top:.4rem;bottom:.6rem;width:2px;background:var(--line-2);transform-origin:top}
.ch-stage{position:relative;padding-bottom:1rem}
.ch-stage::before{content:"";position:absolute;left:-1.35rem;top:.3rem;width:.8rem;height:.8rem;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.ch-stage h3{margin:0 0 .4rem;font-size:.98rem}
.ch-stage ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.ch-stage ul li{font-size:.82rem;padding:.3rem .55rem;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--text)}
.ch-n{font:600 .74rem var(--mono);color:var(--accent-ink);margin-right:.35rem}
.chmap.in .ch-stages::before,.in .chmap .ch-stages::before{animation:fn-drop 1.4s var(--ease-out) both}
.chmap.in .ch-stage::before,.in .chmap .ch-stage::before{animation:ch-dot .4s ease-out both;animation-delay:calc(.2s + var(--s,0) * 220ms)}
@keyframes ch-dot{from{background:#fff}to{background:var(--accent)}}
.ch-stage:nth-child(2){--s:1}.ch-stage:nth-child(3){--s:2}.ch-stage:nth-child(4){--s:3}.ch-stage:nth-child(5){--s:4}.ch-stage:nth-child(6){--s:5}
.ch-stage::before{background:var(--accent)}

/* ---- The specification and Learn pages (kit/docs.css is the layout; these are the site's own) ---- */
/* The sidebar lists a text's sections under its entry, indented and quieter than the pages. */
.docs-side ul ul{margin:.1rem 0 .5rem}
.docs-side ul ul a{padding:.24rem .7rem .24rem 1.5rem;font-size:.82rem;color:var(--muted)}
.docs-side ul ul a:hover{color:var(--ink)}
.docs-side ul ul .sn{margin-right:.35em}
/* The Learn overview: the topics in reading order, numbered. */
.topics{list-style:none;padding:0;margin:0 0 1.5rem;counter-reset:topic}
.topics li{position:relative;padding:.9rem 0 .9rem 3rem;border-bottom:1px solid var(--line);counter-increment:topic;margin:0}
.topics li::before{content:counter(topic,decimal-leading-zero);position:absolute;left:0;top:1rem;font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--accent-ink)}
.topics li a{font-weight:600;color:var(--ink);text-decoration:none}
.topics li a:hover{text-decoration:underline}
.topics li p{margin:.25rem 0 0;color:var(--muted);font-size:.95rem}

/* ---- The docs pages' presentation (scripts/present.mjs, public/docs-view.js). These belong in
   hdtp-web-kit's docs.css; they live here until the kit takes them. ---- */
/* A section label is the number alone, followed by a real space: no extra margin on top of it. */
.sn,.toc .sn,.docs-side ul ul .sn{margin-right:.1em}
/* A heading's link shows on hover or focus; a touch screen, which has no hover, keeps it faint. */
.hl{opacity:0}
h2:hover .hl,h3:hover .hl,h4:hover .hl,.hl:focus-visible,.hl[data-copied]{opacity:1}
@media (hover:none){.hl{opacity:.35}}
/* The sidebar's section list repeats "On this page" beside it; where that column shows, it goes. */
@media (min-width:1101px){.docs-side ul ul{display:none}}
/* A section already opens with a rule (its h2's border); the text's own <hr> before it drew a second. */
.docs-body hr:has(+h2){display:none}
/* A block of plain text needs no "TEXT" badge; JSON and mermaid keep theirs. */
.code-block[data-lang="text"]::before{content:none}
.code-block[data-lang="text"] pre{padding-top:1rem}
/* JSON: keys in ink, strings in the accent, numbers and literals in amber, punctuation muted. */
.language-json{color:var(--muted)}
.j-k{color:var(--ink);font-weight:500}
.j-s{color:var(--accent-ink)}
.j-n,.j-l{color:var(--amber)}
/* A long identifier or hash in prose breaks rather than widening a phone's page past its screen. */
.docs-body :is(p,li,dd,h2,h3,.fine) code,.docs-body .fine{overflow-wrap:anywhere}
/* A drawing's viewer (public/docs-view.js; without it the figure is the drawing and its source). */
.diagram .dg-view{position:relative;overflow:hidden;border-radius:var(--r);touch-action:pan-y}
.diagram .dg-view.zoomed{cursor:grab;touch-action:none;background:var(--bg-2);outline:1px solid var(--line)}
.diagram .dg-view.panning{cursor:grabbing}
.dg-bar{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.3rem;margin:0 0 .5rem}
.dg-bar button{font:500 .78rem var(--sans);color:var(--muted);background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:.3rem .6rem;min-width:2rem;cursor:pointer;line-height:1.2}
.dg-bar button:hover{color:var(--ink);border-color:var(--faint)}
.dg-bar button[aria-pressed="true"]{color:var(--accent-ink);border-color:rgb(var(--accent-rgb) / .45);background:var(--accent-soft)}
.dg-bar button:disabled{opacity:.45;cursor:default}
.dg-src{margin:.6rem 0 0;text-align:left}
.dg-src summary{cursor:pointer;font-size:.84rem;color:var(--muted);width:max-content}
.dg-src summary:hover{color:var(--ink)}
.dg-src .code-block{margin:.5rem 0 0}
.dg-src pre{margin:0;max-height:24rem;overflow:auto}
.dg-js .dg-src summary{display:none}
.dg-copy{position:absolute;top:.45rem;left:.6rem;font:500 .74rem var(--sans);color:var(--muted);background:#fff;border:1px solid var(--line-2);border-radius:7px;padding:.2rem .5rem;cursor:pointer}
.dg-copy:hover{color:var(--ink)}
.dg-src pre{padding-top:2.1rem}
/* Full screen: the figure over the page, the drawing as large as the window allows. */
.diagram.dg-full{position:fixed;inset:0;z-index:70;margin:0;padding:1rem;background:var(--bg);display:flex;flex-direction:column}
.dg-full .dg-view{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--bg-2)}
.dg-full .dg{width:100%;height:100%;max-height:100%}
.dg-full .dg-src{max-height:40vh;overflow:auto}
.dg-full figcaption{display:none}
html.dg-lock{overflow:hidden}

/* The nav: this site has six tabs, and between the kit's phone layout (820px) and the width where
   all six and the button fit, the button was pushed off the right edge and every page scrolled
   sideways. There, the tabs scroll inside their row instead, as they do on a phone. (hdtp-web-kit's
   nav should own this.) */
@media (min-width:821px) and (max-width:1060px){
  .nav-in{gap:1rem}
  .nav-sp{display:none}
  .nav-links{flex:1 1 auto;min-width:0;margin-left:.25rem;gap:1.1rem;overflow-x:auto;scrollbar-width:none;padding-block:.6rem;padding-right:1.5rem;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),transparent)}
  .nav-links::-webkit-scrollbar{display:none}
}
/* The whitepaper block's grid column may shrink below its longest line, so its meta row wraps on a
   320px phone instead of pushing the page 22px past the screen. */
.wp>*{min-width:0}
/* The privacy page's table fits a 320px phone: tighter cells and a word allowed to break there. */
@media (max-width:380px){.prose th,.prose td{padding:.5rem .3rem;overflow-wrap:anywhere}}

/* The specification's licence, worded by hdtp-spec's site/licence.mjs (spec/licence.json): the
 * text's last block on the spec page, the note under the whitepaper's cover, the footer's line. The
 * attribution line carries two long addresses, so it may break anywhere. */
.docs-body .licence{margin:2.5rem 0 1.25rem;padding-top:1rem;border-top:1px solid var(--line);overflow-wrap:anywhere}
.docs-body .licence p{font-size:.84rem;line-height:1.6;color:var(--muted);margin:0}
.docs-body .licence a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.licence-note{margin-top:1.1rem;max-width:34rem;overflow-wrap:anywhere}
.licence-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-b [data-licence] a{color:inherit;text-decoration:underline;text-underline-offset:3px}