/* The documentation pages. Loaded only by templates/docs.html, in its own file
   because several agents were editing site.css at once and a stylesheet merge
   conflict is a site that renders wrong rather than one that fails loudly.
   Every colour comes from the tokens in site.css, so light and dark follow. */

.docs{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,42rem);
  gap:calc(var(--u) * 7);
  align-items:start;
  padding:calc(var(--u) * 4) 0 calc(var(--u) * 10);
}

/* The rail. Sticky on a wide screen because these documents cross-reference
   each other constantly and a reader deep in one wants the others in view. */
.docs-rail{
  position:sticky; top:calc(var(--u) * 3);
  display:flex; flex-direction:column; gap:calc(var(--u) * 1.5);
  font-family:var(--sans);
  font-size:var(--t-cap);
  letter-spacing:.02em;
  border-left:2px solid var(--hair);
  padding-left:calc(var(--u) * 2);
}
.docs-rail a{ color:var(--grey); text-decoration:none; }
.docs-rail a:hover{ color:var(--ink); }
.docs-rail a[aria-current="page"]{
  color:var(--ink); font-weight:600;
  box-shadow:-10px 0 0 -8px var(--link);   /* a tick on the rule, not a block */
}

.docs-body{ font-family:var(--serif); font-size:var(--t-body); line-height:1.6; }

.docs-body h1{
  font-family:var(--display);
  font-size:clamp(2.4rem, 6vw, 4rem);
  line-height:.95; letter-spacing:-.01em;
  margin:0 0 calc(var(--u) * 3);
}
.docs-body h2{
  font-family:var(--sans);
  font-size:1.35rem; line-height:1.2;
  margin:calc(var(--u) * 6) 0 calc(var(--u) * 2);
  padding-top:calc(var(--u) * 2);
  border-top:1px solid var(--hair);
}
.docs-body h3{
  font-family:var(--sans); font-size:1.05rem;
  margin:calc(var(--u) * 4) 0 calc(var(--u) * 1);
}
.docs-body p{ margin:0 0 calc(var(--u) * 2); }
.docs-body a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.docs-body strong{ font-weight:600; }
.docs-body hr{ border:0; border-top:1px solid var(--hair); margin:calc(var(--u) * 5) 0; }

.docs-body ul, .docs-body ol{ margin:0 0 calc(var(--u) * 2); padding-left:1.3em; }
.docs-body li{ margin-bottom:calc(var(--u) * .75); }

.docs-body code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.86em;
  background:var(--sunk);
  padding:.1em .35em; border-radius:2px;
}
.docs-body pre{
  background:var(--sunk);
  padding:calc(var(--u) * 2);
  overflow-x:auto;                 /* wide diagrams scroll here, not the page */
  margin:0 0 calc(var(--u) * 3);
  font-size:var(--t-cap); line-height:1.5;
}
.docs-body pre code{ background:none; padding:0; font-size:inherit; }

.docs-body blockquote{
  margin:0 0 calc(var(--u) * 3);
  padding-left:calc(var(--u) * 2);
  border-left:3px solid var(--link);
  color:var(--grey); font-style:italic;
}

/* Tables carry most of the measured claims, so they get to be legible rather
   than decorative. They scroll inside themselves on a narrow screen. */
.docs-body table{
  width:100%; border-collapse:collapse;
  font-family:var(--sans); font-size:var(--t-small);
  margin:0 0 calc(var(--u) * 3); display:block; overflow-x:auto;
}
.docs-body th{
  text-align:left; font-weight:600;
  border-bottom:2px solid var(--ink);
  padding:calc(var(--u) * .75) calc(var(--u) * 1.5) calc(var(--u) * .75) 0;
  white-space:nowrap;
}
.docs-body td{
  border-bottom:1px solid var(--hair);
  padding:calc(var(--u) * .75) calc(var(--u) * 1.5) calc(var(--u) * .75) 0;
  vertical-align:top;
}

/* The contents page */
.docs-lede{ font-size:1.15rem; color:var(--grey); margin-bottom:calc(var(--u) * 4); }
.docs-contents{ margin:0; }
.docs-contents dt{
  font-family:var(--sans); font-size:1.05rem; font-weight:600;
  margin-top:calc(var(--u) * 3);
}
.docs-contents dt a{ color:var(--ink); text-decoration:none; }
.docs-contents dt a:hover{ color:var(--link); text-decoration:underline; }
.docs-contents dd{ margin:calc(var(--u) * .5) 0 0; color:var(--grey); }
.docs-note{
  margin-top:calc(var(--u) * 6); padding-top:calc(var(--u) * 2);
  border-top:1px solid var(--hair);
  font-size:var(--t-small); color:var(--grey);
}

/* The broken grid collapses to one deliberate column: the rail stops being
   sticky and becomes a row of links above the text. */
@media (max-width:820px){
  .docs{ grid-template-columns:minmax(0,1fr); gap:calc(var(--u) * 4); }
  .docs-rail{
    position:static; flex-direction:row; flex-wrap:wrap;
    gap:calc(var(--u) * 2);
    border-left:0; padding-left:0;
    border-bottom:1px solid var(--hair);
    padding-bottom:calc(var(--u) * 2);
  }
  .docs-rail a[aria-current="page"]{ box-shadow:0 2px 0 var(--link); }
}