/* The docs pages: only what the manual's layout adds. The frame, the nav, the
   labels and number boxes, the terminal window and the footer are site.css's
   own and are not repeated here. Generated pages live at /docs/<slug>.html. */

/* The active nav item */
.nav li a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Two columns: the contents list, then the article */
.docs-grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 3rem;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
  align-items: start;
}
.contents {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  font: 400 0.8125rem/1.5 var(--mono);
}
.contents summary { display: none; }
.contents .top { margin: 1.25rem 0 0.5rem; font-weight: 600; }
.contents .label { display: block; color: var(--muted); margin: 1rem 0 0.35rem; }
.contents ul { margin: 0 0 0.25rem; }
.contents li a {
  display: block;
  padding: 0.15rem 0 0.15rem 0.75rem;
  border-left: 1px solid var(--rule-soft);
}
.contents li a:hover, .contents li a:focus-visible { border-left-color: var(--accent); }
.contents li a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  border-left: 2px solid var(--accent);
  padding-left: calc(0.75rem - 1px);
}

/* Search: a box, and the results as hairline rows under it */
.search { margin: 0; }
.search label { display: block; color: var(--muted); margin-bottom: 0.35rem; }
.search input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 0.8125rem/1.25 var(--mono);
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.results { margin: 0; padding: 0; list-style: none; }
.results:not(:empty) {
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--bg);
  box-shadow: 6px 6px 0 0 var(--shadow);
}
.results li { border-top: 1px solid var(--rule-soft); }
.results li:first-child { border-top: 0; }
.results a { display: block; padding: 0.5rem 0.6rem; }
.results a:hover, .results a:focus-visible { background: var(--panel); color: var(--fg); }
.results .where {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.results .heading { display: block; font-weight: 600; }
.results .line {
  display: block;
  color: var(--muted);
  font: 400 0.75rem/1.4 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.results b { color: var(--fg); font-weight: 600; }
.results .none { padding: 0.5rem 0.6rem; color: var(--muted); }

/* The article */
article { min-width: 0; max-width: 42rem; }
article .display.small { margin-bottom: 1.25rem; }
article .intro { color: var(--muted); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); }
article p, article li { max-width: 40rem; }
article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule-soft);
}
article a:hover, article a:focus-visible { text-decoration-color: currentColor; }
article h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 2.75rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 1.375rem;
}
article h2 .num {
  flex: none;
  color: var(--muted);
  font: 500 0.75rem/1rem var(--mono);
  letter-spacing: 1px;
}
article h3 { margin: 2rem 0 0.75rem; font-size: 1.125rem; }
article h4 { margin: 1.5rem 0 0.5rem; font-size: 1rem; font-weight: 600; }
article ul, article ol { margin: 0 0 1rem; padding-left: 1.25rem; }
article ul { list-style: disc; }
article ol { list-style: decimal; }
article li { margin-bottom: 0.35rem; }
article li p { margin-bottom: 0.5rem; }
article strong { font-weight: 600; }
article code {
  font-size: 0.875em;
  background: var(--panel);
  padding: 0.05em 0.3em;
  overflow-wrap: anywhere;
}
article .window { margin: 1.25rem 0 1.5rem; }
/* A manual's command lines run past the article's width: wrap them at every
   width, where the homepage's one short example scrolls inside its window */
article .window pre { white-space: pre-wrap; overflow-wrap: break-word; }

/* On this page: the page's own headings, one line */
.onpage {
  margin: 0 0 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  font: 400 0.8125rem/1.5 var(--mono);
}
.onpage .label { display: block; color: var(--muted); margin-bottom: 0.35rem; }
.onpage ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.onpage li { margin: 0; }
.onpage a { color: inherit; text-decoration: none; }
.onpage a:hover, .onpage a:focus-visible { color: var(--accent); }

/* Tables: hairline rows, mono identifiers, mono uppercase column heads */
.table { margin: 1.25rem 0 1.5rem; }
article table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
article th {
  text-align: left;
  color: var(--muted);
  font: 500 0.75rem/1rem var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
article td {
  vertical-align: top;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
article td:first-child code { white-space: nowrap; }

/* Screenshots at the article's width, with their captions */
article figure { margin: 1.5rem 0 2rem; }
article figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  box-shadow: 6px 6px 0 0 var(--shadow);
}
article figcaption { margin-top: 1rem; color: var(--muted); font: 400 0.8125rem/1.5 var(--mono); }

/* Previous and next */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font: 500 0.9375rem/1.3 var(--sans);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 45%;
  color: inherit;
  text-decoration: none;
}
.pager a .label { color: var(--muted); }
.pager a[rel="next"] { text-align: right; margin-left: auto; }
.pager a:hover, .pager a:focus-visible { color: var(--accent); }

/* The docs index: a search box, then a numbered section per part of the manual */
.docs-index .docs-head .wrap { padding-top: 2.5rem; padding-bottom: 2rem; }
.docs-index .docs-head .search { max-width: 30rem; }
.docs-index .docs-head { border-bottom: 1px solid var(--rule); }
.pages { border-top: 1px solid var(--rule-soft); }
.page-row {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: inherit;
}
.page-row .title { font-weight: 500; }
.page-row .desc { color: var(--muted); max-width: 38rem; }
.page-row:hover .title, .page-row:focus-visible .title {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 900px) {
  .docs-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; }
  .contents {
    position: static;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--rule);
    padding: 0.75rem 1rem;
  }
  .contents summary { display: list-item; cursor: pointer; margin: 0; }
  .contents[open] summary { margin-bottom: 0.75rem; }
  .page-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}
@media (max-width: 640px) {
  article table, article tbody, article tr, article td { display: block; }
  article thead { display: none; }
  article tr { padding: 0.6rem 0; border-bottom: 1px solid var(--rule-soft); }
  article td { border: 0; padding: 0.15rem 0; }
  article td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font: 500 0.6875rem/1rem var(--mono);
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  article td:first-child code { white-space: normal; }
  article figure img { box-shadow: 4px 4px 0 0 var(--shadow); }
  .results:not(:empty) { box-shadow: 4px 4px 0 0 var(--shadow); }
  .pager { flex-direction: column; }
  .pager a { max-width: none; }
  .pager a[rel="next"] { text-align: left; margin-left: 0; }
}
@media print {
  .contents, .pager, .search { display: none; }
  .docs-grid { display: block; }
  article figure img { box-shadow: none; }
}