/* ============================================================
       DOCS SECTION (/docs — generated by static-site-controls/make-docs.mjs)
       Two columns: the whole docs tree on the left, with the current
       page's headings under it, and the page on the right. The left
       column is sticky and scrolls by itself when it is taller than
       the screen. Below 900px it folds into a list above the page.
       ============================================================ */
    .docs-layout {
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      align-items: start;
    }
    .docs-nav {
      position: sticky;
      top: 0;
      max-height: 100vh;
      overflow-y: auto;
      padding: 56px 8px 40px 32px;
      border-right: 1px solid var(--line);
      font-size: 13px;
      line-height: 1.45;
    }
    .docs-nav-fold > summary { display: none; }
    .docs-nav-h {
      margin: 22px 0 8px 0;
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--graphite);
    }
    .docs-nav-list,
    .docs-nav-sub { list-style: none; margin: 0; padding: 0; }
    .docs-nav-list > li { margin: 0; }
    .docs-nav a {
      display: block;
      padding: 5px 10px;
      margin-left: -10px;
      color: var(--ink);
      text-decoration: none;
      border-left: 2px solid transparent;
    }
    .docs-nav a:hover { color: var(--accent); }
    .docs-nav a[aria-current="page"] {
      font-weight: 600;
      border-left-color: var(--ink);
      background: var(--paper-dark);
    }
    .docs-nav-sub { margin: 2px 0 8px 12px; border-left: 1px solid var(--line); }
    .docs-nav-sub a {
      margin-left: 0;
      padding: 3px 10px;
      font-size: 12px;
      color: var(--graphite);
      border-left: 2px solid transparent;
      margin-left: -1px;
    }
    .docs-nav-sub a.is-active { color: var(--ink); border-left-color: var(--accent); }

    .docs-article { padding-left: 44px; }
    .docs-article h2 { scroll-margin-top: 24px; }
    .docs-article h3 {
      margin: 28px 0 10px 0;
      font-size: 16px;
      scroll-margin-top: 24px;
    }
    .docs-article ul:not(.spec-list),
    .docs-article ol {
      margin: 0 0 22px 0;
      padding-left: 22px;
      max-width: 68ch;
      line-height: 1.7;
    }
    .docs-article li { margin-bottom: 6px; }
    .docs-article .ref-table td:first-child { width: auto; white-space: normal; }
    .docs-article .ref-table code { white-space: nowrap; }
    .docs-source {
      margin-top: 56px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      font-family: var(--mono);
      font-size: 11px;
      color: var(--graphite);
    }

    @media (max-width: 900px) {
      .docs-layout { grid-template-columns: minmax(0, 1fr); }
      .docs-nav {
        position: static;
        max-height: none;
        padding: 20px 24px 0 24px;
        border-right: 0;
      }
      .docs-nav-fold {
        border: 1px solid var(--ink);
        background: #ffffff;
        padding: 0 16px;
      }
      .docs-nav-fold > summary {
        display: block;
        padding: 12px 0;
        font-family: var(--mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        cursor: pointer;
      }
      .docs-nav-fold[open] { padding-bottom: 14px; }
      .docs-article { padding-left: 24px; }
      .docs-article .ref-table code { white-space: normal; }
    }