/* The documentation — the application's own design language, applied to reading.
 *
 * Loaded after site.css on the docs layout and nowhere else, and built only from
 * site.css's tokens: the same greys, the same four intents, the same 4px corner,
 * the same elevation. Every class here carries the docs lane's prefix, `d-`, so
 * none of it can reach a page of the application (tests/test_css_namespace.py).
 *
 * Reading is a different task from working, in exactly three ways, and only those
 * three are adjusted: a measure narrow enough to read (72ch), more space between
 * blocks, and an "On this page" column that a long page needs and a table does not.
 */

.d-body .body { background: var(--panel); }
.d-main { padding: var(--s5) var(--s5) var(--s7); }
.d-grid { display: grid; grid-template-columns: minmax(0, 760px) 220px; gap: var(--s6);
          justify-content: start; align-items: start; }
.d-article { min-width: 0; }

.d-side-foot { justify-content: space-between; }
.d-side-foot a { color: var(--ink-2); }

.d-kicker { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
            font-size: var(--t-small); }
.d-title { font-size: var(--t-h1); line-height: 1.15; margin: 0 0 var(--s2); }
.d-article > .lede { margin-bottom: var(--s5); max-width: 72ch; }

/* --- the prose: site.css's `.doc`, widened to what a reference page carries --- */
.d-doc { max-width: 72ch; font-size: var(--t-body); line-height: 1.6; }
.d-doc > :first-child { margin-top: 0; }
/* The page's first paragraph is its lead: what it does for the reader, said once. The
   summary in the front matter goes to search results and link previews instead, so
   the page does not open by saying the same thing twice. */
.d-doc > p:first-child { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2);
                         margin-bottom: var(--s4); }
.d-doc h2 { font-size: var(--t-h2); margin: var(--s6) 0 var(--s2); scroll-margin-top: 70px; }
.d-doc h3 { font-size: var(--t-lead); margin: var(--s5) 0 var(--s1); scroll-margin-top: 70px; }
.d-doc h4 { font-size: var(--t-body); margin: var(--s4) 0 var(--s1); }
.d-doc p { margin: 0 0 var(--s3); }
.d-doc a { text-decoration: underline; text-decoration-color: var(--info-line);
           text-underline-offset: 2px; }
.d-doc a:hover { text-decoration-color: var(--info); }
.d-doc .d-anchor { margin-left: var(--s1); color: var(--ink-3); text-decoration: none;
                   opacity: 0; transition: opacity var(--quick) var(--ease); }
.d-doc h2:hover .d-anchor, .d-doc h3:hover .d-anchor,
.d-doc .d-anchor:focus { opacity: 1; }
.d-doc hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--s5) 0; }

/* Blueprint's HTML table: a hairline under the head and between rows, nothing more. */
.d-doc table { width: 100%; border-collapse: collapse; font-size: var(--t-small);
               margin: var(--s2) 0 var(--s4); display: table; table-layout: auto; }
.d-doc thead th { text-align: left; font-weight: 600; color: var(--ink);
                  border-bottom: 1px solid var(--line); padding: 6px var(--s2) 6px 0; }
.d-doc tbody td { border-bottom: 1px solid var(--line-2); padding: 7px var(--s2) 7px 0;
                  vertical-align: top; color: var(--ink-2); }
.d-doc tbody td:first-child { white-space: nowrap; }
.d-doc td code, .d-doc th code { white-space: nowrap; }
.d-tablewrap { overflow-x: auto; }

/* Code: the dark block the application shows the workflow file in. */
.d-doc pre { position: relative; margin: var(--s2) 0 var(--s4); border-radius: var(--r);
             background: #16181c; color: #dfe3e8; font-size: var(--t-small); line-height: 1.6; }
.d-doc pre code { background: none; box-shadow: none; padding: 0; color: inherit;
                  font-size: inherit; white-space: pre; }
.d-copy { position: absolute; top: 6px; right: 6px; min-height: 22px; padding: 0 8px;
          border: 0; border-radius: var(--r); font: 400 var(--t-micro)/1 var(--sans);
          color: #dfe3e8; background: rgba(255, 255, 255, .1); cursor: pointer;
          opacity: 0; transition: opacity var(--quick) var(--ease); }
.d-doc pre:hover .d-copy, .d-copy:focus { opacity: 1; }
.d-copy:hover { background: rgba(255, 255, 255, .2); }

/* Callouts: Blueprint's, one per intent. The title is the intent's word. */
.d-callout { margin: var(--s3) 0 var(--s4); padding: var(--s2) var(--s3); border-radius: var(--r);
             background: var(--muted-bg); }
.d-callout > p { margin: 0 0 var(--s1); color: var(--ink-2); }
.d-callout > p:last-child { margin-bottom: 0; }
.d-callout .d-callout-title { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.d-callout-note, .d-callout-important { background: var(--info-bg); }
.d-callout-note .d-callout-title, .d-callout-important .d-callout-title { color: var(--info); }
.d-callout-tip { background: var(--good-bg); }
.d-callout-tip .d-callout-title { color: var(--good); }
.d-callout-warning { background: var(--warn-bg); }
.d-callout-warning .d-callout-title { color: var(--warn); }
.d-callout-caution { background: var(--bad-bg); }
.d-callout-caution .d-callout-title { color: var(--bad); }

/* --- around the page --- */
.d-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s6);
          padding-top: var(--s3); border-top: 1px solid var(--line-2);
          font-size: var(--t-small); color: var(--ink-3); }
.d-meta code { font-size: var(--t-micro); }

.d-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.d-pager-link { display: flex; flex-direction: column; gap: 2px; padding: var(--s3);
                border-radius: var(--r); box-shadow: var(--e0); background: var(--panel); }
.d-pager-link:hover { text-decoration: none; box-shadow: var(--shadow); }
.d-pager-link b { color: var(--info); font-weight: 600; }
.d-pager-next { text-align: right; align-items: flex-end; }

.d-toc { position: sticky; top: calc(50px + var(--s5)); font-size: var(--t-small);
         max-height: calc(100vh - 110px); overflow-y: auto; }
.d-toc ul { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.d-toc ul ul { margin: 0 0 0 var(--s3); }
.d-toc li { margin: 0; }
.d-toc a { display: block; padding: 3px 0 3px var(--s2); color: var(--ink-3);
           border-left: 2px solid var(--line-2); line-height: 1.35; }
.d-toc a:hover { color: var(--ink); text-decoration: none; }
.d-toc a.is-on { color: var(--info); border-left-color: var(--info-fill); }

.d-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.d-hit { display: flex; flex-direction: column; gap: 2px; padding: var(--s3);
         border-radius: var(--r); box-shadow: var(--e0); }
.d-hit:hover { text-decoration: none; box-shadow: var(--shadow); }
.d-hit b { color: var(--info); }
.d-hit-snip { color: var(--ink-2); font-size: var(--t-small); }

.d-menu { display: none; margin-right: var(--s2); }

@media (max-width: 1100px) {
  .d-grid { grid-template-columns: minmax(0, 1fr); }
  .d-toc { display: none; }
}
@media (max-width: 900px) {
  .d-body .side.d-side { display: none; }
  .d-body .side.d-side.is-open { display: flex; position: fixed; inset: 0 auto 0 0;
                                 z-index: 30; box-shadow: var(--lift); }
  .d-menu { display: inline-flex; }
  .d-body .topsearch { display: block; flex: 1 1 auto; }
  .d-body .crumbs { display: none; }
  .d-main { padding: var(--s4) var(--s3) var(--s6); }
  .d-pager { grid-template-columns: 1fr; }
}

/* --- drawings (docs_diagrams.py) ---------------------------------------------
 *
 * Drawn the way the application draws the ontology: server-side SVG, every colour a
 * token. The vocabulary is the application's own: white cards on the app's grey,
 * blue for the thing in focus, amber where somebody must decide, and grey for what
 * is not ours. A drawing may be wider than the text measure — up to the article's
 * full width — because a picture shrunk to 72 characters is a picture of 9px type.
 */
.d-article { container-type: inline-size; }
.d-fig { margin: var(--s4) 0 var(--s5); width: min(764px, 100cqi); }
.d-fig-frame { background: var(--bg); border-radius: var(--r); padding: var(--s2);
               overflow-x: auto; }
.d-fig-svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.d-fig-cap { margin-top: var(--s2); max-width: 72ch; font-size: var(--t-small);
             line-height: 1.5; color: var(--ink-3); }
.d-fig-cap b { font-weight: 600; color: var(--ink-2); }
.d-fig-error { white-space: pre-wrap; }

.d-fig-node rect { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.d-fig-label { font: 600 13px var(--sans); fill: var(--ink); }
.d-fig-note { font: 400 12px var(--sans); fill: var(--ink-3); }
.d-fig-icon { fill: var(--ink-3); }
.d-fig-node.is-focus rect { fill: var(--info-bg); stroke: var(--info-fill); }
.d-fig-node.is-focus .d-fig-label, .d-fig-node.is-focus .d-fig-icon { fill: var(--info); }
.d-fig-node.is-focus .d-fig-note { fill: var(--ink-2); }
.d-fig-node.is-gate rect { fill: var(--warn-bg); stroke: var(--warn-line); }
.d-fig-node.is-gate .d-fig-label, .d-fig-node.is-gate .d-fig-icon { fill: var(--warn); }
.d-fig-node.is-gate .d-fig-note { fill: var(--ink-2); }
.d-fig-node.is-outside rect { fill: var(--hover); stroke: none; }
.d-fig-node.is-outside .d-fig-label { fill: var(--ink-2); }
.d-fig-node.is-heading .d-fig-label { font-size: 11px; letter-spacing: .06em; fill: var(--ink-3); }
.d-fig-node.is-heading .d-fig-note { fill: var(--ink-2); }

.d-fig-line { fill: none; stroke: color-mix(in oklch, var(--ink-3) 60%, var(--bg));
              stroke-width: 1.25; }
.d-fig-link.is-dashed .d-fig-line { stroke-dasharray: 4 3; }
.d-fig-tip { fill: color-mix(in oklch, var(--ink-3) 75%, var(--bg)); }
.d-fig-linklabel { font: 400 11px var(--sans); fill: var(--ink-2); paint-order: stroke;
                   stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }

.d-fig-group rect { fill: none; stroke: color-mix(in oklch, var(--ink-3) 45%, var(--bg));
                    stroke-dasharray: 3 3; }
.d-fig-grouplabel { font: 600 11px var(--sans); letter-spacing: .06em; fill: var(--ink-3);
                    paint-order: stroke; stroke: var(--bg); stroke-width: 6px; }

@media (max-width: 900px) {
  .d-fig { width: 100%; }
  .d-fig-svg { min-width: 560px; }
}
.d-fig-label.is-code { font: 500 12px var(--mono); }

/* Sequences: a lifeline under each participant, the steps down the page. */
.d-fig-life { fill: none; stroke: color-mix(in oklch, var(--ink-3) 40%, var(--bg));
              stroke-dasharray: 2 3; }
.d-fig-msg { font: 400 12px var(--sans); fill: var(--ink); paint-order: stroke;
             stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.d-fig-msg.is-code, .d-fig-notetext.is-code { font: 400 11.5px var(--mono); }
.d-fig-notebox { fill: var(--panel); stroke: var(--line); }
.d-fig-notetext { font: 400 12px var(--sans); fill: var(--ink-2); }
.d-fig-framebox { fill: none; stroke: color-mix(in oklch, var(--ink-3) 45%, var(--bg)); }
.d-fig-else { fill: none; stroke: color-mix(in oklch, var(--ink-3) 45%, var(--bg));
              stroke-dasharray: 4 3; }
.d-fig-framelabel { font: 400 11px var(--sans); fill: var(--ink-3); paint-order: stroke;
                    stroke: var(--bg); stroke-width: 4px; }
.d-fig-kw { font-weight: 600; letter-spacing: .06em; }