/*
 * The public docs: their own layout, on top of `styles.css`'s palette and
 * furniture and nothing else.
 *
 * This document does not load `console.css`. That file is the signed-in
 * console's own grid - a 260px rail, a detail pane, `body.no-rail` and
 * `body.detail-open` for the phone - built for eleven pages that list
 * things and open one of them. A docs site is a different shape: one
 * column of always-visible pages down the side and a column of reading
 * beside it, nothing selected and deselected, nothing that needs a "back"
 * button because there is never a list standing between the sidebar and
 * the page. Reusing the console's grid would mean fighting `body.no-rail`
 * on every page just to get back to something this simple.
 *
 * Sectioned like `styles.css` and `console.css`: banners, read top to
 * bottom, one 860px block at the foot rather than one per rule.
 */

/* --- the shell: titlebar and the two-column grid --- */

/* `.titlebar` itself is `styles.css`'s - the 36px bar, the ground, the
   border. This only adds what is different about the docs' own bar: the
   mark is a link home instead of a static wordmark, there is a label in
   place of the account/sign-out slot the console version has, and it is
   sticky - a reader deep in a long page keeps the way back to the main
   site, and the sidebar under it, in reach without a second "back to top"
   control to build. One rule, not two: a name declared twice in this file
   is a name where the second declaration quietly wins and the first is
   dead weight nobody notices until it is read top to bottom. */
.docs-titlebar {
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.docs-logo {
  text-decoration: none;
  color: var(--text);
}

.docs-logo:hover {
  color: var(--accent);
}

.docs-titlebar-label {
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.docs-shell {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

/* --- the sidebar: the way home, then every page, always --- */

.docs-sidebar {
  position: sticky;
  top: 36px;
  height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 16px 14px 24px;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}

.docs-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.docs-nav-home {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.docs-nav-home:hover {
  color: var(--accent);
}

/* The `<details>` that lets the list collapse below 860px - see docs.js
   `renderSidebar` for why a native disclosure rather than a strip that
   scrolls sideways, which this stylesheet does not otherwise allow. Above
   the break there is nothing to disclose: the summary is hidden (below)
   and `open` is set every render, so the list simply always shows. */
.docs-nav-details {
  display: contents;
}

.docs-nav-summary {
  display: none;
}

.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-nav-heading {
  margin: 14px 0 2px;
  padding: 0 8px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docs-nav-heading:first-child {
  margin-top: 0;
}

.docs-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.docs-nav-item {
  display: block;
}

.docs-nav-link {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
}

.docs-nav-link:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* Where you are - the same outlined-chip rule the console's own rail uses
   (`.sidebar-link.active` in console.css): a box, not only a colour, so
   finding your place does not mean reading every line down the list. */
.docs-nav-link.current {
  background: var(--bg-inset);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-weight: 650;
}

/* "On this page" - nested under the current entry only (docs.js
   `onThisPage`), so it reads as a detail of where you are rather than a
   second list beside the first. */
.docs-toc {
  margin: 2px 0 4px 8px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.docs-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.docs-toc-link {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}

.docs-toc-link:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* --- the main column --- */

.docs-main {
  min-width: 0;
  padding: 40px 40px 0;
}

.docs-article,
.docs-notfound {
  /* The reading measure. A line that ran the full width of a wide monitor
     loses the reader on the way back to the left edge - the number
     everybody who has ever set this quotes is 45-75 characters, and 70ch
     sits in the middle of it while still leaving room for a code block or
     a table to earn its `docs-table-scroll` exception by actually being
     wider than the prose around it. */
  max-width: 70ch;
  /* Left-aligned against the sidebar, not centred in what is left over.
     Centring a 70ch column in the 1680px beside a 240px sidebar put about
     600px of nothing between the navigation and the first word, and the
     eye has to cross all of it on every glance back to the list. The empty
     half is better spent on the right, where a docs site's contents rail
     conventionally sits - and where this one may yet put the "on this
     page" list if the sidebar gets crowded. */
  margin: 0 auto 0 0;
  padding-bottom: 64px;
}

.docs-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.docs-summary {
  margin: 0 0 28px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.5;
}

.docs-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- the content vocabulary: every class docs-dom.js emits --- */

.docs-h2 {
  margin: 28px 0 4px;
  padding-top: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  /* The address a sidebar "on this page" link and a same-page anchor both
     land on; without this the heading sits flush under the sticky titlebar
     with nothing above it to read. */
  scroll-margin-top: 48px;
}

.docs-content > .docs-h2:first-child {
  margin-top: 0;
}

.docs-h3 {
  margin: 18px 0 2px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  scroll-margin-top: 48px;
}

.docs-p {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
}

/* The opening line of a page: the answer, ahead of the explanation, so it
   reads a size up from the paragraphs that back it. */
.docs-lead {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
}

.docs-ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.docs-li {
  font-size: 14.5px;
  line-height: 1.6;
}

/* A quickstart's steps: large numbers and a block each, because this is the
   one list on a docs page somebody follows with their hands on the
   keyboard rather than just reading. */
.docs-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: docs-step;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.docs-step {
  counter-increment: docs-step;
  position: relative;
  padding: 2px 0 2px 38px;
  font-size: 14.5px;
  line-height: 1.6;
}

.docs-step::before {
  content: counter(docs-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12.5px;
  font-weight: 700;
}

/* An aside: something true that would break the sentence it belongs to.
   One shape, coloured by the edge only (the brief's own rule) so a page of
   several notes reads as text with an occasional flag in the margin, not
   as a row of loud boxes competing for the eye. */
.docs-note {
  margin: 4px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--bg-raised);
}

.docs-note-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.docs-note-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-note-body .docs-p {
  font-size: 14px;
}

.docs-note-note {
  border-left-color: var(--border-strong);
}

.docs-note-warn {
  border-left-color: var(--warn-border);
  background: var(--warn-bg);
}

.docs-note-warn .docs-note-title {
  color: var(--warn-text);
}

/* Ahead of what is built: the edge carries `--attention`, the one colour
   this site uses for "true, but not the whole of the promise yet" - the
   same reasoning `--attention` was picked for on the front door, never for
   a ground, never a claim of enforcement, just a flag on a sentence. */
.docs-note-ahead {
  border-left-color: var(--attention);
}

.docs-note-ahead .docs-note-title {
  color: var(--attention);
}

.docs-term {
  font-weight: 650;
}

.docs-code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.docs-codeblock {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-inset);
}

.docs-codeblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

.docs-codeblock-lang {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.docs-codeblock-caption {
  color: var(--text-faint);
  font-size: 12px;
}

.docs-pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}

/* The one thing on a docs page allowed to scroll sideways - a table can be
   wider than the 70ch column around it, and the alternative (shrinking it
   to fit, or letting it push the page wide) is worse on a phone than a
   contained scroller with an edge you can feel under a thumb. */
.docs-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.docs-table th,
.docs-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.docs-table thead th {
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.docs-table tbody tr:last-child td {
  border-bottom: none;
}

/* Where a drawing goes - filled by docs.js after the page is in the
   document (docs-figures.js). Framed even empty, mid-fill, so a page does
   not flash from no border to a border the instant the script catches up. */
.docs-figure {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: 4px;
  overflow: hidden;
}

/* Above the breakpoint a figure is allowed out of the reading measure, and
   has to be. 70ch is about 570px, and three of the five figures are
   diagrams with labelled boxes: at that width the scoping figure's boxes
   collided with each other and two others clipped their own text. The
   measure is a rule about prose, where it is what makes a line readable; a
   diagram has no such argument for being narrow, and the room is there to
   the right because the article is left-aligned. Capped at 880px so it
   does not become a different kind of object on a wide monitor.

   Scoped to `min-width` rather than written as a `vw` expression the phone
   block undoes: the technique this repo uses to check phone layout lifts
   the 860px rules and applies them at a narrow body width, and `vw` does
   not follow that - so a `vw` rule here would be one nobody could check at
   the width it matters. */
@media (min-width: 861px) {
  .docs-figure {
    /* `max-width: none` matters: the parent article is 70ch, so a
       `max-width: 100%` here would cap the figure back at the measure it
       is trying to escape - which is exactly what it did on the first
       attempt, silently, because 880px and "100% of 573px" both look
       reasonable in a stylesheet. The `vw` term is what keeps it from
       running off a 900px-wide laptop; it is safe to use here where a
       phone never applies this block. */
    width: min(880px, calc(100vw - 340px));
    max-width: none;
  }
}

.docs-figure-caption {
  margin: 8px 2px 0;
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
}

.docs-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

.docs-link:hover {
  text-decoration-color: var(--accent);
}

/* `.docs-link-out` (`docs-dom.js`'s `out()`) draws the same as `.docs-link`
   today - it exists as its own class so an outbound link can be told apart
   from an in-site one the day it needs to look different, without every
   content module going back to add a class it did not have before. */

/* --- previous / next --- */

.docs-pagenav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.docs-pagenav-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
}

.docs-pagenav-link {
  color: var(--text);
  text-decoration: none;
}

.docs-pagenav-link:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.docs-pagenav-next {
  text-align: right;
  align-items: flex-end;
}

.docs-pagenav-dir {
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 600;
}

.docs-pagenav-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-pagenav-empty {
  border-color: transparent;
}

/* --- "no such page" --- */

.docs-notfound .docs-title {
  margin-bottom: 12px;
}

/* --- the foot: console-footer.js's siteFooter(), reused --- */

/* `.site-footer` and its children are console.css's classes, and this
   document loads no console.css - so they need a definition here or the
   foot of every docs page is unstyled black-on-white text sitting where a
   dark strip belongs. Copied rather than imported as CSS (there is no such
   thing): the same rules that make it read as the sky's own strip
   everywhere else it appears - `docs.html`'s job is to reuse the function
   that builds the markup, `docs.css`'s is to reuse the rules that make it
   look right, and the two together are still one implementation of what
   the footer is, split the only way CSS and JS can be. */
.site-footer {
  margin-top: 48px;
  background: var(--sky);
  color: var(--sky-text-dim);
  border-top: 1px solid var(--sky-line);
  border-radius: 8px;
}

.site-footer-inner {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
}

.site-footer-mark {
  color: var(--sky-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-footer-links {
  display: flex;
  gap: 2px;
  margin-right: -10px;
}

.site-footer-link {
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--sky-text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}

.site-footer-link:hover {
  color: var(--sky-text);
  background: var(--sky-glass);
}

.site-footer-link:focus-visible {
  outline: 2px solid var(--sky-line-strong);
  outline-offset: 1px;
}

/* --- the one 860px block --- */

@media (max-width: 860px) {
  .docs-shell {
    display: block;
  }

  .docs-titlebar-label {
    display: none;
  }

  /* No longer a column beside the reading: a strip above it that a reader
     scrolls past once and does not see again until they scroll back up.
     `position: sticky` only inside the two-column grid, where "beside" was
     the point of it - here it would pin a whole page list over a phone's
     limited height for the entire read. */
  .docs-sidebar {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
  }

  /* Below the break the disclosure is real: the summary is the button that
     opens and closes the list, so it has to be shown and given room for a
     thumb. */
  .docs-nav-details {
    display: block;
  }

  .docs-nav-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 4px;
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
  }

  .docs-nav-summary::-webkit-details-marker {
    display: none;
  }

  .docs-nav-summary::after {
    content: "\25be";
    color: var(--text-faint);
  }

  .docs-nav-details[open] > .docs-nav-summary::after {
    content: "\25b4";
  }

  .docs-nav {
    padding-top: 4px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .docs-main {
    padding: 20px 16px 0;
  }

  .docs-article,
  .docs-notfound {
    max-width: none;
  }

  .docs-title {
    font-size: 22px;
  }

  .docs-summary {
    font-size: 15px;
  }

  .docs-pagenav {
    grid-template-columns: 1fr;
  }

  .docs-pagenav-next {
    text-align: left;
    align-items: flex-start;
  }

  .site-footer-inner {
    padding: 14px 16px;
  }

  .site-footer-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}