/* ==========================================================================
   DOCUMENTATION LAYOUT — Learn and Open questions.

   Route-scoped: this file is only linked by the two routes that use it, so the
   other 129 pay nothing for it.

   Three columns on a wide screen: index, text, apparatus. The middle one is the
   existing `.leaf` grid untouched — the index is added beside it rather than
   the page being rebuilt around a new system.
   ========================================================================== */

.docs {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 0 var(--s7);
  align-items: start;
}

/* --- the index ----------------------------------------------------------- */

.docnav {
  position: sticky;
  /* The masthead is not sticky, so this only has to clear the top of the
     viewport rather than a fixed bar. s5 keeps it off the edge. */
  top: var(--s5);
  /* Eleven sections fit; 142-item pages do not, so the index scrolls inside
     itself rather than growing past the fold. */
  max-height: calc(100vh - var(--s6));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block-end: var(--s4);
}

.docnav__head {
  font: 500 var(--t-xs)/var(--lh-tight) var(--ui);
  color: var(--ink-3);
  margin: 0 0 var(--s3);
  padding-inline-start: calc(var(--s3) + 2px);
  /* On a wide screen the index is always open and the marker is noise. */
  list-style: none;
}
.docnav__head::-webkit-details-marker { display: none; }

.docnav__list { list-style: none; margin: 0; padding: 0; }

.docnav__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 32px;
  padding: var(--s1) var(--s3);
  border-inline-start: 2px solid transparent;
  font: 400 var(--t-sm)/1.45 var(--ui);
  color: var(--ink-2);
  text-decoration: none;
}
.docnav__list a:hover,
.docnav__list a:focus-visible {
  color: var(--brand);
  background: var(--brand-wash);
  border-inline-start-color: var(--brand-edge);
}

/* WHERE YOU ARE. The same fill and leading edge the navigation dropdown uses
   for its hovered row — one vocabulary for "this one", not a second invention.
   Applied by docs.js; without it the index is a plain working list. */
.docnav__list a[aria-current="true"] {
  color: var(--brand);
  background: var(--brand-wash);
  border-inline-start-color: var(--brand);
}

/* The figure is the point on Open questions, so it is not greyed into nothing;
   it is the same size as the label and simply not the brand colour. */
.docnav__n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.docnav__list a[aria-current="true"] .docnav__n { color: var(--brand); }

/* --- the text column ----------------------------------------------------- */

/* An anchored heading must not land flush against the top of the viewport. */
.docs__main :is(h1, h2, h3)[id] { scroll-margin-top: var(--s6); }

/* The first leaf on a docs route has no rule above it, same as anywhere else,
   but it now sits beside a sticky index and the extra top padding read as a
   misalignment against the index's first row. */
.docs__main > .leaf:first-of-type { padding-block-start: 0; }

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 64rem) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: var(--s5) 0; }
  .docnav {
    position: static; max-height: none; overflow: visible;
    padding-block-end: 0; margin-block-end: var(--s4);
  }
  .docnav__disc[open] { padding-block-end: var(--s4); }
  /* Closed by default here: open would push the first heading off a phone
     screen. `open` is removed by docs.js, which is the one thing markup alone
     cannot express — a `<details open>` cannot be conditionally closed by
     media query. With JS absent it stays open and the page still works, it is
     just longer. */
  .docnav__head {
    cursor: pointer;
    display: flex; align-items: center; gap: var(--s2);
    min-height: 44px; margin: 0; padding-inline: 0;
    border-block-end: 1px solid var(--rule);
  }
  /* THE MARKER IS DRAWN, NOT INHERITED. Giving a <summary> `display: flex`
     removes the native disclosure triangle in WebKit and Blink, and no
     `list-style` value brings it back — which left a closed index on a phone
     looking like a stray label with nothing under it. This chevron is part of
     the rule that made it disappear, so the two cannot drift apart. */
  .docnav__head::-webkit-details-marker { display: none; }
  .docnav__head::after {
    content: ""; margin-inline-start: auto;
    width: 7px; height: 7px; margin-block-start: -3px;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform .18s ease;
  }
  .docnav__disc[open] > .docnav__head::after { transform: rotate(-135deg); margin-block-start: 2px; }
  @media (prefers-reduced-motion: reduce) { .docnav__head::after { transition: none; } }
  .docnav__list { columns: 2; column-gap: var(--s5); margin-block-start: var(--s3); }
  .docnav__list li { break-inside: avoid; }
  .docnav__list a { padding-inline-start: var(--s2); }
}

@media (max-width: 34rem) {
  .docnav__list { columns: 1; }
}