/* The docs section (Andrew, 3 Oct 2026): a side index by subject, and the
   page beside it. Loaded only by templates/docs/_layout.html, after
   borehole.css, whose tokens it uses. */

.screen.docs{max-width:1120px}
.docs-grid{display:grid;grid-template-columns:212px minmax(0,1fr);gap:56px;align-items:start}
.docs-page{min-width:0;max-width:820px}

/* ---- the index ---- */
.docs-side{position:sticky;top:58px;max-height:calc(100vh - 58px);overflow-y:auto;padding:52px 0 32px}
.docs-tree .dt-subject{margin:22px 0 7px;font-family:var(--f-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.docs-tree .dt-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.docs-tree .dt-list a{display:block;margin-left:-1px;padding:5px 0 5px 13px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--ink-2);text-decoration:none}
.docs-tree .dt-list a:hover{color:var(--ink)}
.docs-tree .dt-list a[aria-current]{color:var(--ink);border-left-color:var(--oxide);font-weight:600}
.docs-tree .dt-out::after{content:" ↗";font-family:var(--f-data);font-size:11px;color:var(--ink-3)}

/* On a phone the index folds into a menu above the page. */
.docs-menu{display:none}
@media (max-width:860px){
  .docs-grid{display:block}
  .docs-side{display:none}
  .docs-menu{display:block;margin:18px 0 0;border:1px solid var(--rule);background:var(--paper)}
  .docs-menu summary{padding:11px 14px;cursor:pointer;font-size:15px;list-style-position:inside}
  .docs-menu summary .dm-lbl{font-family:var(--f-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
  .docs-menu[open] summary{border-bottom:1px solid var(--rule-2)}
  .docs-menu .docs-tree{padding:0 14px 14px}
  .docs .prhead{padding-top:28px}
}

/* ---- the overview ---- */
.dov{margin:0 0 8px}
.dov dt{font-size:16.5px;margin-top:12px}
.dov dt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--slate)}
.dov dt a:hover{color:var(--slate)}
.dov dd{margin:3px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ---- keys and tokens ---- */
table.lgtbl.kt th[scope=row]{font-family:var(--f-data);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:10px 12px 10px 0;vertical-align:top;border-bottom:1px solid var(--rule-2);width:22%}

/* ---- sequence diagrams (/docs/architecture) ----
   Lanes are columns with a lifeline down the middle of each; a step is a
   box in one lane or an arrow between two. Readable at phone width by
   scrolling sideways inside the figure, never the page. */
.seq{margin:6px 0 26px;border:1px solid var(--rule);background:var(--paper)}
.seq-scroll{overflow-x:auto}
.seq-scroll:focus-visible{outline:2px solid var(--oxide);outline-offset:-2px}
.seq-grid{--lw:132px;display:grid;grid-template-columns:repeat(var(--lanes),minmax(var(--lw),1fr));
  min-width:calc(var(--lanes) * var(--lw));padding:14px 0 16px;
  background-image:linear-gradient(to right,transparent calc(50% - .5px),var(--rule) calc(50% - .5px),var(--rule) calc(50% + .5px),transparent calc(50% + .5px));
  background-size:calc(100% / var(--lanes)) calc(100% - 92px);background-position:0 78px;background-repeat:repeat-x}
.seq-group{grid-row:1;margin:0 8px 8px;padding:0 0 5px;border-bottom:2px solid var(--ink);text-align:center;
  font-family:var(--f-data);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);align-self:end}
.seq-group.yours{border-bottom-color:var(--sage);color:var(--sage)}
.seq-head{grid-row:2;margin:0 8px 6px;padding:6px 6px;text-align:center;background:var(--paper);border:1px solid var(--ink);line-height:1.25}
.seq-head b{display:block;font-family:var(--f-disp);font-variation-settings:"wdth" 88,"wght" 640;font-size:14px;font-weight:inherit}
.seq-head span{display:block;font-size:12px;color:var(--ink-3)}
.seq-head.yours{border-color:var(--sage);background:var(--sage-soft)}
.seq-head.opt{border-style:dashed}
.seq-box{margin:5px 8px;padding:6px 9px;background:var(--paper);border:1px solid var(--ink-3);font-size:13px;line-height:1.38;color:var(--ink);align-self:center}
.seq-box.src{border:1px solid var(--sage);background:repeating-linear-gradient(135deg,var(--sage-soft),var(--sage-soft) 5px,var(--paper) 5px,var(--paper) 9px);font-style:italic}
.seq-box.del{border-color:var(--oxide)}
.seq-n{font-style:normal;font-family:var(--f-data);font-size:10px;color:var(--oxide);margin-right:5px}
.seq-msg{padding:4px calc(100% / (2 * var(--span))) 6px;align-self:center}
.seq-msg .lbl{display:block;text-align:center;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.seq-msg .lbl>span{background:var(--paper);padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.seq-msg .ln{display:block;position:relative;margin-top:4px;border-top:1.5px solid var(--ink)}
.seq-msg .ln::after{content:"";position:absolute;top:-6px;right:-1px;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent var(--ink)}
.seq-msg.rtl .ln::after{right:auto;left:-1px;border-width:5px 9px 5px 0;border-color:transparent var(--ink) transparent transparent}
.seq-msg.opt .ln{border-top-style:dashed;border-top-color:var(--ink-3)}
.seq-msg.opt .lbl{font-style:italic}
.seq figcaption{padding:8px 14px;border-top:1px solid var(--rule-2);font-size:13px;color:var(--ink-3)}
.legal ol.seq-steps{font-size:15px;gap:8px}
.legal ol.seq-steps li{font-size:15px;line-height:1.55;margin:0}
@media (max-width:860px){
  .seq figcaption::after{content:" Scroll sideways to see every lane.";}
}