/* The docs layout, from pact-web-kit: what a specification page needs on top of kit/styles.css —
 * a sidebar of pages, a column of normative text with a comfortable measure, the contents of the
 * page beside it, section labels and anchors, the version switcher, and the classes a pre-rendered
 * diagram carries. Loaded after styles.css by a docs page only; every colour is a token of
 * styles.css's :root (test/docs.test.mjs holds that), so test/contrast.test.mjs covers it. No
 * inline styles anywhere: the sites' CSP is style-src 'self'. README.md, "The docs layout", is the
 * markup this styles. */

/* ---------------------------------------------------------------- the shell */
/* Three columns on a wide screen; the contents column goes first, then the sidebar folds into a
   <details> above the text. The grid sits on .wrap, which owns the side gutter: block padding only. */
.wrap.docs{max-width:1400px;display:grid;grid-template-columns:15rem minmax(0,1fr) 12.5rem;gap:0 3rem;align-items:start;padding-block:2.5rem 5rem}
.docs>*{min-width:0}
@media (max-width:1100px){.wrap.docs{grid-template-columns:14rem minmax(0,1fr);gap:0 2.5rem}.toc{display:none}}
@media (max-width:900px){.wrap.docs{grid-template-columns:1fr;gap:0;padding-block:1.2rem 4rem}}

/* The sidebar: a <details>. Closed in the HTML, so a phone shows one line; kit/docs.js opens it on
   a wide screen, and without the script the reader does. */
.docs-side{position:sticky;top:5.5rem;align-self:start;max-height:calc(100vh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:.9rem;padding-right:.5rem}
.docs-side summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem .7rem;border-radius:8px;font-weight:600;color:var(--ink)}
.docs-side summary::-webkit-details-marker{display:none}
.docs-side summary::after{content:"+";font-weight:400;font-size:1.3rem;line-height:1;color:var(--faint);transition:transform .2s}
.docs-side[open] summary::after{transform:rotate(45deg)}
.docs-side summary:hover{background:var(--bg-2)}
.docs-side h5{margin:1.3rem 0 .35rem;padding-left:.7rem;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.docs-side summary+nav h5:first-child{margin-top:.6rem}
.docs-side ul{list-style:none;margin:0;padding:0}
.docs-side a{display:block;padding:.34rem .7rem;border-radius:8px;color:var(--text);line-height:1.35}
.docs-side a:hover{background:var(--bg-2);color:var(--ink);text-decoration:none}
.docs-side a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
@media (max-width:900px){
  .docs-side{position:static;max-height:none;overflow:visible;padding:0;margin-bottom:1.6rem;border:1px solid var(--line-2);border-radius:var(--r);background:#fff}
  .docs-side summary{padding:.75rem 1rem}
  .docs-side nav{padding:0 .5rem .6rem;border-top:1px solid var(--line)}
}

/* The contents of the page: kit/docs.js builds it from the body's h2 and h3 (a page may pre-render
   the same list) and marks the entry whose heading is in view. Empty, it takes no room. */
.toc{position:sticky;top:5.5rem;align-self:start;max-height:calc(100vh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:.84rem;border-left:1px solid var(--line);padding-left:1rem}
.toc:empty{display:none}
.toc h5{margin:0 0 .6rem;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:.26rem 0 .26rem .85rem;margin-left:calc(-1rem - 1px);border-left:2px solid transparent;color:var(--muted);line-height:1.4;transition:color .15s,border-color .15s}
.toc ol ol a{padding-left:1.7rem;font-size:.8rem}
.toc a:hover{color:var(--ink);text-decoration:none}
.toc a[aria-current]{color:var(--ink);border-left-color:var(--ink);font-weight:500}
.toc .sn{margin-right:.35em}

/* ---------------------------------------------------------------- the head */
/* The meta line and the version switcher on one row, the title and its lede beneath. */
.docs-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.9rem 1.5rem;margin-bottom:2rem}
.docs-head>h1,.docs-head>.lede{grid-column:1/-1;margin:0}
.docs-head>.lede{max-width:40rem}
.docs-head .meta-row{margin:0}
.docs-body h1{font-size:clamp(2rem,4vw,2.8rem);margin:0 0 1rem;max-width:20ch}

/* The version switcher: a <details> whose list is plain links, so it works as a menu without a
   script; kit/docs.js closes it on Escape and on a click elsewhere. The version shown is marked
   aria-current, and the summary repeats it. */
.versions{position:relative;display:inline-block;vertical-align:middle;z-index:5;font-size:.88rem}
.versions summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .8rem .42rem .95rem;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm);white-space:nowrap;transition:border-color .15s,background .15s}
.versions summary::-webkit-details-marker{display:none}
.versions summary::after{content:"";width:.45em;height:.45em;border:solid var(--faint);border-width:0 1.5px 1.5px 0;transform:translateY(-.12em) rotate(45deg);transition:transform .2s}
.versions[open] summary::after{transform:translateY(.12em) rotate(-135deg)}
.versions summary:hover{border-color:var(--faint);background:var(--bg-2)}
.versions ul{position:absolute;left:0;top:calc(100% + .4rem);min-width:15rem;margin:0;padding:.35rem;list-style:none;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow)}
.docs-head .versions ul{left:auto;right:0}
.versions ul a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.55rem .75rem;border-radius:8px;color:var(--ink);font-weight:500;white-space:nowrap;text-decoration:none}
.versions ul a:hover{background:var(--bg-2)}
.versions a[aria-current]{background:var(--accent-soft);color:var(--accent-ink)}
.versions span{font-size:.74rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.versions a[aria-current] span,.versions summary span{color:inherit;opacity:.8}
@media (max-width:900px){.docs-head{grid-template-columns:1fr}.docs-head .versions ul{right:auto;left:0}}

/* ---------------------------------------------------------------- the text */
.docs-body{max-width:46rem}
.docs-body h2{font-size:1.55rem;letter-spacing:-.025em;line-height:1.2;margin:3rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.docs-body h3{font-size:1.2rem;margin:2.2rem 0 .6rem}
.docs-body h4{font-size:1rem;margin:1.7rem 0 .5rem}
.docs-body h1+h2,.docs-head+h2{margin-top:1.5rem}
.docs-body h2,.docs-body h3,.docs-body h4{scroll-margin-top:5.5rem;text-wrap:pretty}
.docs-body p,.docs-body li,.docs-body dd{line-height:1.68;text-wrap:pretty}
.docs-body ul,.docs-body ol{padding-left:1.4rem;margin:0 0 1rem}
.docs-body li{margin-bottom:.4rem}
.docs-body li>ul,.docs-body li>ol{margin:.4rem 0 0}
.docs-body a{text-decoration:underline;text-decoration-color:rgb(var(--accent-rgb) / .45);text-underline-offset:3px;text-decoration-thickness:1px}
.docs-body a:hover{text-decoration-color:currentColor}
.docs-body hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.docs-body img,.docs-body svg{max-width:100%;height:auto}
.docs-body blockquote{margin:1.2rem 0;padding:.8rem 1.1rem;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0;color:var(--ink)}
.docs-body blockquote p:last-child{margin-bottom:0}
@media (max-width:1100px){.docs-body{max-width:none}}

/* The section label in a heading (the page writes its text: "§ 5.3", "Appendix B") and the link
   that copies the heading's address (kit/docs.js; without it, the link is a link). */
.sn{font-family:var(--mono);font-weight:500;font-size:.72em;letter-spacing:0;color:var(--accent-ink);margin-right:.5em;vertical-align:.1em}
.hl{position:relative;display:inline-block;width:.8em;height:.8em;margin-left:.45em;vertical-align:-.02em;opacity:.35;transition:opacity .15s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 9.5a3 3 0 0 0 4.2 0l2-2a3 3 0 0 0-4.2-4.2l-1 1M9.5 6.5a3 3 0 0 0-4.2 0l-2 2a3 3 0 0 0 4.2 4.2l1-1' fill='none' stroke='%23696C73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
h2:hover .hl,h3:hover .hl,h4:hover .hl,.hl:focus-visible{opacity:1}
.hl[data-copied]::after{content:"Copied";position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:.5rem;font:500 .74rem var(--sans);letter-spacing:0;color:var(--accent-ink);white-space:nowrap}

/* The keywords of RFC 2119: MUST and MUST NOT in the accent, SHOULD and MAY in ink. */
.must{font-weight:600;font-size:.94em;letter-spacing:.03em;color:var(--accent-ink)}
.should{font-weight:600;font-size:.94em;letter-spacing:.03em;color:var(--ink)}

/* A notice above the text; .superseded for a version every current implementation refuses. */
.notice{display:flex;align-items:flex-start;gap:.9rem;margin:0 0 1.6rem;padding:.9rem 1.1rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);font-size:.95rem;line-height:1.55;color:var(--text)}
.notice>b{flex:0 0 auto;padding-top:.2em;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.notice p{margin:0}
.notice.superseded{background:var(--amber-soft);border-color:rgb(122 90 0 / .3);color:var(--amber)}
.notice.superseded>b,.notice.superseded a{color:var(--amber)}
.notice.superseded a{text-decoration:underline;text-underline-offset:3px}

/* Code: a block wears its language (data-lang), and an inline code span in a table stays on one line. */
.docs-body pre{margin:1.2rem 0;padding:1rem 1.15rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;font-family:var(--mono);font-size:.84rem;line-height:1.6;color:var(--ink);tab-size:2}
.docs-body pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.code-block{position:relative}
.code-block pre{padding-top:1.5rem}
.code-block[data-lang]::before{content:attr(data-lang);position:absolute;top:.5rem;right:.8rem;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* Tables: the head in small capitals, rows ruled, a wide one scrolling inside its wrapper. */
.table-wrap{margin:1.2rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.table-wrap table{margin:0;border:0}
.docs-body table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.2rem 0}
.docs-body th,.docs-body td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.docs-body thead th{background:var(--bg-2);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.docs-body tbody tr:last-child td,.docs-body tbody tr:last-child th{border-bottom:0}
.docs-body td code,.docs-body th code{white-space:nowrap}

/* Definitions and footnotes. */
.docs-body dl{margin:1rem 0}
.docs-body dt{font-weight:600;color:var(--ink);margin-top:.9rem}
.docs-body dd{margin:.25rem 0 0 1.4rem}
.docs-body dfn{font-style:normal;font-weight:600;color:var(--ink);text-decoration:underline dotted var(--faint);text-underline-offset:3px}
.fn{font-size:.72em;line-height:0;vertical-align:.5em}
.fn a{font-family:var(--mono);text-decoration:none;padding:0 .15em}
.footnotes{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.footnotes ol{padding-left:1.4rem}
.footnotes li:target{background:var(--accent-soft);border-radius:6px}
.footnotes li:target,.docs-body :is(h2,h3,h4):target .sn{color:var(--accent-ink)}

/* Previous and next, at the foot of the text. */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pn a{display:flex;flex-direction:column;gap:.2rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font-weight:600;text-decoration:none;line-height:1.35;transition:border-color .15s,background .15s}
.pn a:hover{border-color:var(--faint);background:var(--bg-2);text-decoration:none}
.pn small{font-size:.74rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pn .next{grid-column:2;text-align:right}
@media (max-width:560px){.pn{grid-template-columns:1fr}.pn .next{grid-column:1;text-align:left}}

/* ---------------------------------------------------------------- diagrams */
/* A pre-rendered diagram: an <svg class="dg dg-<kind>"> inside <figure class="diagram">, its
   parts carrying the classes of kit/diagram-classes.json (the contract, the one copy: what
   pact-protocol's renderer emits) and nothing else — no <style>, no style="" (the CSP refuses
   both). A class is a part, then a role, then modifiers; a line carries its part alone, which
   is why the rules for lines name the tag. Text is SVG <text>, drawn at the size and weight the
   contract's "text" says it was laid out at, so what the renderer measured is what is drawn;
   the viewBox scales the whole to the column. Line weights do not scale with it.
   test/docs.test.mjs holds this file to the contract both ways, and these sizes to its "text". */
.diagram{margin:1.8rem 0 2.2rem;text-align:center}
.diagram figcaption{margin-top:.8rem;font-size:.86rem;color:var(--muted);text-wrap:pretty}
.dg{display:block;max-width:100%;height:auto;margin:0 auto;font-family:var(--sans);overflow:visible}
.dg :is(path,line,rect,circle,ellipse,polygon,polyline){vector-effect:non-scaling-stroke}
/* Labels. */
.dg-label{font-size:16px;font-weight:400;fill:var(--ink)}
.dg-actor.dg-label{font-weight:500}
.dg-cluster.dg-label,.dg-edge.dg-label{fill:var(--muted)}
.dg-number.dg-label{font-size:12px;fill:#fff}
/* Boxes. */
.dg-node.dg-shape,.dg-actor.dg-shape{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.dg-node.dg-shape.dg-terminal,.dg-number.dg-shape{fill:var(--ink);stroke:var(--ink)}
.dg-cluster.dg-shape{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1;stroke-dasharray:4 4}
.dg-note.dg-shape{fill:var(--accent-soft);stroke:rgb(var(--accent-rgb) / .45);stroke-width:1}
.dg-frame.dg-shape{fill:var(--bg-3);stroke:var(--line-2);stroke-width:1}
.dg-edge.dg-bg{fill:var(--bg);stroke:none}
/* Lines. */
path.dg-edge,line.dg-edge{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dg-edge.dg-dashed{stroke-dasharray:5 5}
.dg-arrow.dg-shape{fill:var(--ink-2);stroke:none}
line.dg-lifeline,line.dg-frame{fill:none;stroke:var(--line-2);stroke-width:1}
.dg-frame.dg-dashed{stroke-dasharray:4 4}
line.dg-number{stroke:none}

/* On ink (.on-ink on the band or the figure, as the waitlist does): panels for boxes, the
   filled marks invert to white, and every label keeps its contrast. */
.on-ink .dg-label{fill:var(--dark-text)}
.on-ink .dg-cluster.dg-label,.on-ink .dg-edge.dg-label{fill:var(--dark-muted)}
.on-ink .dg-number.dg-label{fill:var(--ink)}
.on-ink .dg-node.dg-shape,.on-ink .dg-actor.dg-shape{fill:var(--dark-panel);stroke:var(--dark-muted)}
.on-ink .dg-node.dg-shape.dg-terminal,.on-ink .dg-number.dg-shape{fill:#fff;stroke:#fff}
.on-ink .dg-cluster.dg-shape{fill:rgb(255 255 255 / .04);stroke:rgb(255 255 255 / .2)}
.on-ink .dg-note.dg-shape{fill:var(--dark-panel);stroke:rgb(var(--glow-rgb) / .5)}
.on-ink .dg-frame.dg-shape{fill:rgb(255 255 255 / .08);stroke:rgb(255 255 255 / .2)}
.on-ink .dg-edge.dg-bg{fill:var(--ink)}
.on-ink path.dg-edge,.on-ink line.dg-edge{stroke:var(--dark-muted)}
.on-ink .dg-arrow.dg-shape{fill:var(--dark-muted)}
.on-ink line.dg-lifeline,.on-ink line.dg-frame{stroke:rgb(255 255 255 / .2)}
.on-ink .diagram figcaption{color:var(--dark-muted)}
.on-ink .must{color:var(--accent-2)}
.on-ink .should{color:#fff}
.on-ink .versions summary{background:var(--dark-panel);border-color:rgb(255 255 255 / .14);color:#fff;box-shadow:none}
.on-ink .versions summary:hover{background:var(--ink-2);border-color:rgb(255 255 255 / .28)}
.on-ink .versions summary::after{border-color:var(--dark-muted)}
.on-ink .versions ul{background:var(--dark-panel);border-color:rgb(255 255 255 / .14)}
.on-ink .versions a{color:var(--dark-text)}
.on-ink .versions a:hover{background:var(--ink-2)}
.on-ink .versions a[aria-current]{background:var(--ink);color:var(--accent-2)}
.on-ink .versions span{color:var(--dark-muted)}