/* ============================================================================
   Within-page and between-page navigation.

   Two components, both added on 2026-09-11 for the structural pass. The founder's
   diagnosis was that long pages perform in search and fail the reader: "when it
   gets too long, it becomes hard to navigate for the real user". Neither of these
   removes a word. They expose structure that the pages already had and never
   showed.

   .toc     the contents rail. Built from a page's own h2 headings, so a reader
            can see the shape of the argument before reading it and jump into it.
   .xnav    the onward block. Three to five specific links at the foot of a page,
            each with one line saying why a reader would follow it.

   NOT STICKY, and that is a decision rather than an omission. The masthead is
   already sticky at z-index 10 and the sortable table headers at 4. A sticky
   contents rail has to be a column, and a column means rewriting the grid of
   every hand-built page on the site to make room for it. The rail sits under the
   hero instead, where it is the first thing after the lede, is read once, and
   gets out of the way. Revisit when the pages are generated rather than written.
   ========================================================================= */

@layer components {

  /* ----------------------------------------------------------- contents rail */

  .toc {
    grid-column: 1 / -1;
    margin-top: var(--sp-7);
    border-top: 1px solid var(--ink);
    padding-top: var(--sp-4);
  }

  .toc > p {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 19px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
  }

  .toc ol {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3) var(--gutter);
    grid-template-columns: 1fr;
    counter-reset: toc;
  }

  @media (min-width: 640px)  { .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
  @media (min-width: 1024px) { .toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

  .toc li {
    counter-increment: toc;
    display: flex;
    gap: var(--sp-3);
    align-items: baseline;
    border-top: 1px solid var(--rule);
    padding-top: var(--sp-2);
  }

  /* The number is generated, so renumbering after a split is a rebuild and not
     an edit, and a reader copying the heading never copies a stray digit. */
  .toc li::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 19px;
    letter-spacing: 0.10em;
    color: var(--ink-4);
    flex: none;
  }

  .toc a {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.004em;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-1) var(--ease-standard),
                border-color var(--dur-1) var(--ease-standard);
  }

  .toc a:hover { color: var(--ink); border-bottom-color: var(--accent) }
  .toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

  /* A page split off a parent says so here, above its own contents. */
  .toc .toc-up { display: block; margin-top: var(--sp-3) }
  .toc .toc-up a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em;
                   text-transform: uppercase; color: var(--accent) }

  /* ------------------------------------------------------------ onward block */

  .xnav {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--sp-6) var(--gutter);
    grid-template-columns: repeat(auto-fill, minmax(min(240px,100%), 1fr));
    margin-top: var(--sp-7);
  }

  .xcard {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    text-decoration: none;
    color: inherit;
    border-top: 1px solid var(--ink);
    padding-top: var(--sp-4);
  }

  .xcard h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--t-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--tr-h4);
  }

  .xcard p { margin: 0; font-size: 12px; line-height: 20px; color: var(--ink-3) }
  .xcard:hover h3 { color: var(--accent-h, var(--accent)) }
  .xcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px }

  /* The onward block on a parent page, listing the pages split out of it. Same
     component, tighter, because it sits above the argument rather than after it. */
  .xnav-up { margin-top: var(--sp-5) }
  .xnav-up .xcard { border-top-color: var(--rule) }
}