/* ─────────────────────────────────────────────────────────────────────
   Dayside — documentation section

   Loads after site.css and inherits its tokens, type scale and nav. Nothing
   here redefines a colour: the docs are the same survey plate as the rest of
   the site, held at reading width and given a rail down each side.

   Generated pages only. Everything this styles comes out of
   site/tools/build_docs.py, so a class that appears here and nowhere in that
   script is dead.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --rail-w: 268px;   /* sidebar */
  --toc-w: 216px;    /* on-this-page */
  --nav-h: 65px;     /* the fixed header, measured */
}

/* The marketing pages fade the nav into a full-bleed hero. Docs pages start
   at the top of a text column, so the header needs an edge of its own. */
.docs-nav {
  background: rgba(11, 10, 8, .92);
  border-bottom: 1px solid var(--hair);
  gap: 20px;
}
.nav-section {
  padding: 3px 7px;
  border: 1px solid var(--sun-line);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--sun);
}
.docs-nav-links { flex: none; }

.docs-body { overflow-x: visible; }

/* ── Shell ────────────────────────────────────────────────────────── */

/* The header is `position: fixed` (site.css), so the shell has to carry its
   height as padding. Without it the sheetline rule at the top of every page
   sits behind the nav and simply never appears. */
.docs-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--toc-w);
  gap: 0 48px;
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--nav-h) var(--gutter) 0;
  align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */

.docs-sidebar {
  position: sticky;
  top: var(--nav-h);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 40px 0 64px;
  border-right: 1px solid var(--hair);
  scrollbar-width: thin;
  scrollbar-color: var(--dimmer) transparent;
}
.docs-sidebar::-webkit-scrollbar { width: 8px; }
.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--dimmer);
  border-radius: 4px;
  border: 2px solid var(--ink);
}

.docs-group { margin-bottom: 30px; }
.docs-group-name {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
.docs-tree ul { list-style: none; margin: 0; padding: 0; }
.docs-tree li { margin: 0; }
.docs-tree li a {
  display: block;
  padding: 6px 14px 6px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--body);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.docs-tree li a:hover { color: var(--paper); border-left-color: var(--hair-hi); }
.docs-tree li.is-current > a {
  color: var(--sun);
  border-left-color: var(--sun);
}

/* ── Article ──────────────────────────────────────────────────────── */

.docs-main { min-width: 0; padding: 0 0 96px; }
.docs-article { max-width: 74ch; padding-top: 40px; }

.docs-sheetline { margin-bottom: 26px; }

.docs-title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--paper);
}
.docs-summary {
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--paper);
  text-wrap: pretty;
}

/* ── Prose ────────────────────────────────────────────────────────── */

.doc-prose { font-size: 16px; line-height: 1.68; color: var(--body); }

.doc-prose h2,
.doc-prose h3,
.doc-prose h4 {
  position: relative;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--paper);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.doc-prose h2 {
  margin: 56px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-size: 30px;
  line-height: 1.14;
}
.doc-prose h3 { margin: 36px 0 10px; font-size: 22px; line-height: 1.2; }
.doc-prose h4 {
  margin: 28px 0 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}
.doc-prose > :first-child { margin-top: 0; }
.doc-prose h2:first-child { border-top: 0; padding-top: 0; }

/* The heading link only exists for people who want to share a deep link, so
   it stays out of the way until the heading is hovered or it takes focus. */
.doc-anchor {
  position: absolute;
  left: -0.85em;
  opacity: 0;
  font-family: var(--mono);
  font-size: .6em;
  color: var(--dim);
  transition: opacity .15s var(--ease);
}
h2:hover > .doc-anchor,
h3:hover > .doc-anchor,
h4:hover > .doc-anchor,
.doc-anchor:focus-visible { opacity: 1; }

.doc-prose p { margin: 0 0 16px; text-wrap: pretty; }
.doc-prose strong { color: var(--paper); font-weight: 600; }
.doc-prose em { font-style: italic; }

.doc-list { margin: 0 0 18px; padding-left: 22px; }
.doc-list li { margin: 0 0 8px; text-wrap: pretty; }
.doc-list .doc-list { margin: 8px 0 0; }
ol.doc-list li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
ul.doc-list li::marker { color: var(--dim); }

.doc-prose code {
  padding: 1.5px 5px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(240, 233, 220, .045);
  font-family: var(--mono);
  font-size: .855em;
  color: var(--sun-hi);
  overflow-wrap: break-word;
}

.doc-pre {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-left: 2px solid var(--dimmer);
  border-radius: 2px;
  background: var(--panel);
  overflow-x: auto;
}
.doc-pre code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
}

.doc-rule { margin: 40px 0; border: 0; border-top: 1px solid var(--hair); }

/* Tables carry the parameter reference, which is the densest thing in here.
   They scroll inside their own box so a wide row never widens the page. */
.doc-table {
  margin: 0 0 24px;
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: 2px;
  scrollbar-width: thin;
}
.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.doc-table th,
.doc-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair-lo);
  vertical-align: top;
}
.doc-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table tbody tr:hover { background: rgba(240, 233, 220, .022); }
.doc-table td:first-child { color: var(--paper); }
.doc-table code { white-space: nowrap; }

.doc-note {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-left: 2px solid var(--sun-line);
  background: rgba(240, 180, 95, .045);
  font-size: 15px;
  color: var(--body);
}
.doc-note > :last-child { margin-bottom: 0; }

/* An unresolved question left by whoever drafted the page. It is loud on
   purpose and it is excluded from the search index, so it can only be found
   by reading the page it is on. */
.doc-todo {
  border-left-color: #C2603A;
  background: rgba(194, 96, 58, .08);
}
.doc-todo-tag {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 6px;
  border: 1px solid rgba(194, 96, 58, .5);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: #E08A5C;
  vertical-align: 1px;
}

/* Interface screenshots, captured by `npm run shots:docs`. They are dark UI on
   a dark page, so they need an edge to sit against or they bleed into it. */
.doc-prose img {
  display: block;
  margin: 0 0 22px;
  border: 1px solid var(--hair-hi);
  border-radius: 2px;
  background: var(--panel);
}
.doc-figure { margin: 0 0 26px; }
.doc-figure img { margin-bottom: 8px; }
.doc-figure figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--dim);
  text-transform: uppercase;
}

/* ── Pager ────────────────────────────────────────────────────────── */

.docs-pager {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
}
.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 46%;
  padding: 14px 18px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  transition: border-color .18s var(--ease);
}
.docs-pager-link:hover { border-color: var(--sun-line); }
.docs-pager-link.next { text-align: right; align-items: flex-end; }
.docs-pager-dir {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.docs-pager-title { font-size: 15px; color: var(--paper); }

/* ── On this page ─────────────────────────────────────────────────── */

.docs-toc {
  position: sticky;
  top: var(--nav-h);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 44px 0 64px;
  scrollbar-width: none;
}
.docs-toc::-webkit-scrollbar { display: none; }
.docs-toc-title {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair); }
.docs-toc li a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.docs-toc li.lvl-3 a { padding-left: 26px; font-size: 12.5px; color: var(--dim); }
.docs-toc li a:hover { color: var(--paper); }
.docs-toc li a.is-active { color: var(--sun); border-left-color: var(--sun); }

/* ── Search ───────────────────────────────────────────────────────── */

.docs-search {
  position: relative;
  flex: 1 1 460px;
  max-width: 520px;
}
.docs-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  pointer-events: none;
}
#docsSearch {
  width: 100%;
  padding: 10px 44px 10px 36px;
  border: 1px solid var(--hair-hi);
  border-radius: 2px;
  background: rgba(240, 233, 220, .035);
  color: var(--paper);
  font-size: 14px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
#docsSearch::placeholder { color: var(--dim); }
#docsSearch:focus {
  outline: none;
  border-color: var(--sun-line);
  background: rgba(240, 233, 220, .06);
}
#docsSearch::-webkit-search-cancel-button { -webkit-appearance: none; }

.docs-search-key {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 7px;
  border: 1px solid var(--hair-hi);
  border-radius: 3px;
  background: rgba(240, 233, 220, .05);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  pointer-events: none;
}
.docs-search.is-open .docs-search-key,
#docsSearch:focus ~ .docs-search-key { opacity: 0; }

.docs-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: min(66vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--hair-hi);
  border-radius: 2px;
  background: #100E0B;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  scrollbar-width: thin;
}
.docs-results[hidden] { display: none; }

.docs-result {
  display: block;
  padding: 10px 12px;
  border-radius: 2px;
  border-left: 2px solid transparent;
}
.docs-result:hover,
.docs-result.is-active {
  background: rgba(240, 233, 220, .05);
  border-left-color: var(--sun);
}
.docs-result-crumb {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.docs-result-title {
  display: block;
  font-size: 14.5px;
  color: var(--paper);
  line-height: 1.35;
}
.docs-result-snippet {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.docs-result mark { background: none; color: var(--sun); font-weight: 600; }

.docs-results-empty,
.docs-results-foot {
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.docs-results-foot {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--hair-lo);
  padding-top: 10px;
  margin-top: 4px;
}
.docs-results-foot kbd {
  padding: 1px 5px;
  border: 1px solid var(--hair-hi);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

/* ── Landing page ─────────────────────────────────────────────────── */

/* The landing page shares the article shell, so these sit inside .doc-prose
   and have to out-specify its `p` and `h2` rules rather than merely follow
   them in the file. */

.doc-prose .docs-index-lede {
  margin: 0 0 48px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
}
.docs-index-group { margin-bottom: 52px; }
.doc-prose .docs-index-heading {
  margin: 0 0 18px;
  padding: 0 0 10px;
  border-top: 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.docs-index-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.docs-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--panel);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.docs-card:hover { border-color: var(--sun-line); background: #16130E; }
.docs-card-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  color: var(--paper);
}
.docs-card-summary { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ── Menu button, small screens only ──────────────────────────────── */

.docs-menu-btn {
  display: none;
  padding: 8px 12px;
  border: 1px solid var(--hair-hi);
  border-radius: 2px;
  background: none;
  color: var(--paper);
  font-size: 15px;
  cursor: pointer;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1360px) {
  .docs-shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 0 40px; }
  .docs-toc { display: none; }
}

@media (max-width: 1120px) {
  .docs-search { flex-basis: 320px; }
}

@media (max-width: 900px) {
  /* The search box takes a row of its own rather than fighting the wordmark
     for a 420px header, so the nav is two rows tall here and everything
     measured against --nav-h has to follow it: the shell's top padding, the
     sticky offsets, and the drawer's top edge. */
  :root { --nav-h: 122px; }

  .docs-nav { flex-wrap: wrap; row-gap: 14px; }
  .docs-shell { grid-template-columns: minmax(0, 1fr); }
  .docs-menu-btn { display: block; flex: none; order: 2; }
  .docs-nav-links { display: none; }
  .docs-search { order: 3; flex: 1 1 100%; max-width: none; }

  /* Off-canvas: the rail becomes a drawer the menu button opens. */
  .docs-sidebar {
    position: fixed;
    inset: var(--nav-h) auto 0 0;
    z-index: 70;
    width: min(320px, 86vw);
    max-height: none;
    padding: 28px 24px 64px;
    background: #100E0B;
    border-right: 1px solid var(--hair-hi);
    transform: translateX(-102%);
    transition: transform .22s var(--ease);
  }
  .docs-sidebar.is-open { transform: none; }

  .docs-article { padding-top: 28px; max-width: none; }
  .doc-prose h2 { font-size: 26px; margin-top: 44px; }
  .docs-pager { flex-direction: column; }
  .docs-pager-link { max-width: none; }
  .docs-pager-link.next { text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-sidebar { transition: none; }
}