/* The documentation portal's own rules.
 *
 * Three columns on a wide screen - sidebar, page, contents - collapsing to
 * one on anything narrow. The prose rules are here too, because the
 * Markdown renderer emits plain tags and this is what dresses them.
 */

.docsshell{
  width:100%;max-width:92rem;margin:0 auto;padding:0 var(--s5);
  display:grid;gap:var(--s7);align-items:start;
  grid-template-columns:16rem minmax(0,1fr) 14rem;
}

/* ---- sidebar ----------------------------------------------------------- */
.docsside{
  position:sticky;top:5.25rem;max-height:calc(100vh - 7rem);
  overflow-y:auto;padding:var(--s6) 0 var(--s6);
}
/* On a wide screen the sidebar is simply a sidebar: the <details> that
   folds it away on a phone has no summary and never closes. */
.docsnavwrap > summary{display:none}

.docsside h2{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:var(--s5) 0 var(--s2);font-weight:700;
}
.docsside h2:first-of-type{margin-top:0}
.docsside nav ul{list-style:none;margin:0 0 var(--s2);padding:0}
.docsside nav li{margin:0}
.docsside nav a{
  display:block;padding:.3rem var(--s3);margin-left:-var(--s3);
  color:var(--muted);font-size:.93rem;border-radius:var(--r-sm);
  border-left:2px solid transparent;
}
.docsside nav a:hover{background:var(--base);color:var(--accent);
  text-decoration:none}
.docsside nav a.on{
  color:var(--accent);font-weight:600;background:var(--base);
  border-left-color:var(--highlight);
}

/* ---- search ------------------------------------------------------------ */
.docssearch{position:relative;margin-bottom:var(--s5)}
.docssearch input{
  width:100%;padding:.55rem .8rem;font:inherit;font-size:.93rem;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--paper);color:var(--ink);
}
.docssearch input:hover{border-color:var(--muted)}
.searchresults{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:40;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  max-height:24rem;overflow-y:auto;
}
.searchresults ul{list-style:none;margin:0;padding:var(--s2)}
.searchresults li{margin:0}
.searchresults a{
  display:block;padding:var(--s3);border-radius:var(--r-sm);color:var(--ink);
}
.searchresults a:hover{background:var(--base);text-decoration:none}
.rtitle{display:block;font-weight:600;font-size:.95rem}
.rsection{display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);margin:.1rem 0}
.rsummary{display:block;font-size:.85rem;color:var(--muted);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.searchnone{margin:0;padding:var(--s4);color:var(--muted);font-size:.9rem}

/* ---- the page ---------------------------------------------------------- */
.docsbody{padding:var(--s6) 0 var(--s8);min-width:0}
.crumbs{
  font-size:.82rem;color:var(--faint);margin-bottom:var(--s4);
  display:flex;gap:var(--s2);align-items:center;
}
.crumbs a{color:var(--muted)}

.docsbody h1{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:var(--s5)}
.docsbody h2{
  font-size:1.5rem;margin-top:var(--s7);padding-top:var(--s2);
  border-top:1px solid var(--line);
}
.docsbody h3{font-size:1.12rem;margin-top:var(--s6)}
.docsbody h4{font-size:1rem;margin-top:var(--s5)}
.docsbody p,.docsbody li{color:var(--ink)}
.docsbody p{max-width:44rem}
.docsbody ul,.docsbody ol{max-width:44rem}
.docsbody img{
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);margin:var(--s5) 0;
}

/* The link on a heading, which appears when the heading is hovered or
   when it has focus - present for anybody who wants it, not clutter for
   everybody who does not. */
.anchor{
  margin-left:var(--s2);color:var(--faint);opacity:0;
  font-weight:400;text-decoration:none;transition:opacity .15s ease;
}
h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,.anchor:focus{opacity:1}

.docsbody pre{
  background:var(--accent-dark);color:#E8EEF8;
  padding:var(--s4) var(--s5);border-radius:var(--r-md);
  overflow-x:auto;font-size:.88rem;line-height:1.55;margin:0 0 var(--s5);
}
.docsbody pre code{font-family:var(--mono);color:inherit}
.docsbody :not(pre) > code{
  background:var(--sunken);border:1px solid var(--line);
  padding:.08em .35em;border-radius:var(--r-sm);font-size:.88em;
  color:var(--accent-dark);
}

.tablewrap{overflow-x:auto;margin:0 0 var(--s5)}
.docsbody table{border-collapse:collapse;width:100%;font-size:.93rem}
.docsbody th,.docsbody td{
  padding:.55rem .75rem;border-bottom:1px solid var(--line);
  vertical-align:top;
}
.docsbody th{
  background:var(--base);font-weight:650;
  border-bottom:2px solid var(--line-strong);
}
.docsbody tbody tr:hover{background:var(--base)}

.docsfoot{
  margin-top:var(--s8);padding-top:var(--s4);
  border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);
}

/* ---- on this page ------------------------------------------------------ */
.docstoc{
  position:sticky;top:5.25rem;padding:var(--s6) 0;
  max-height:calc(100vh - 7rem);overflow-y:auto;
}
.docstoc h2{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 var(--s3);font-weight:700;
}
.docstoc ul{list-style:none;margin:0;padding:0}
.docstoc li{margin:.15rem 0}
.docstoc li.lvl3{padding-left:var(--s4)}
.docstoc a{color:var(--muted);font-size:.86rem;display:block;padding:.15rem 0}
.docstoc a:hover{color:var(--accent)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:78rem){
  .docsshell{grid-template-columns:15rem minmax(0,1fr)}
  .docstoc{display:none}
}
@media (max-width:58rem){
  .docsshell{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .docsside{
    position:static;max-height:none;overflow:visible;
    padding:var(--s5) 0 0;border-bottom:1px solid var(--line);
  }
  /* Folded away by default here, so the page somebody came for is the
     first thing under the search box rather than the fifteenth link. */
  .docsnavwrap > summary{
    display:flex;align-items:center;gap:var(--s3);
    padding:.6rem var(--s4);margin-bottom:var(--s4);cursor:pointer;
    border:1px solid var(--line-strong);border-radius:var(--r-md);
    font-weight:600;font-size:.93rem;list-style:none;
  }
  .docsnavwrap > summary::-webkit-details-marker{display:none}
  .docsnavwrap > summary::after{
    content:'';margin-left:auto;width:.5rem;height:.5rem;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .docsnavwrap[open] > summary::after{transform:rotate(-135deg)}
  .docsnavwrap > summary:hover{border-color:var(--accent)}

  /* Opened, the lists go side by side rather than one long column. */
  .docsside nav{
    display:grid;gap:var(--s4) var(--s5);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  }
  .docsside nav h2{grid-column:1/-1}
  .docsbody{padding-top:var(--s5)}
}