/**
 * root Design System - documentation styles: page layout
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. The three-column viewport grid, the
 * content scroller, and the article-level sizing every page shares - the content-width
 * setting, the draft notice's spacing, the scroll-margin a heading lands under. Same
 * constraints as the rest of the shell: zero CSS classes - element, `[data-part]` and
 * attribute selectors only - zero inline styles, and every value a root foundation token.
 */

/* Exactly one viewport tall, and it never scrolls: the footer is the `auto` row and is
   therefore always on screen, without `position: fixed` and without anything having to
   know its height. The three columns share the `1fr` row above it and each carries its
   own scrollport, so the wheel over the content moves the content and the wheel over a
   side column moves that column. */
body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100svh;
  overflow: hidden;
  margin: 0;
  /* No type here. The foundations' own `body` rule declares the family, the base step and
     the base leading from the same tokens this was repeating (ADR-043).
     The two paint declarations stay, and they are not repetition: the foundations publish
     `--root-c--color` and `--root-c--background-color` and paint nothing with them, so
     without these the page falls back to the user agent's `canvas` pair - which follows
     `color-scheme` but is pure black and white, not this palette's near-black. */
  color: var(--docs-text);
  background: var(--docs-bg);
}

main {
  min-height: 0;
  padding: var(--root-s--3xl);
  overflow-y: auto;
  /* The toc's links are in-page anchors and `main` is the scroller they move, so the
     animation belongs here. Turned off under `prefers-reduced-motion` below. */
  scroll-behavior: smooth;
}

article[data-page] {
  max-width: var(--docs-content-w);
  margin: 0 auto;
}

/* A heading landed on by a toc link stops under the top edge of the scroller, not
   flush against it. */
article :is(h2, h3) {
  scroll-margin-block-start: var(--root-s--xl);
}

/* The other reading of every page, chosen once in the sidebar and stored: the content
   takes the whole column instead of a measured one. The reading measure is for prose, and
   Iconography - a lookup table 201 rows long, where every rem taken off is a column of
   glyphs to scroll to instead - used to be the one page with this hard-coded. It follows
   the setting now, like the other sixty-five. */
[data-content-width="full"] article[data-page] {
  max-width: none;
}

/* Tried and reverted: reclaiming the toc's column here (hiding `[data-part="toc"]`
   under `[data-content-width="full"]`) made the toggle register at a normal window,
   but the toc is the page's own table of contents and has to stay where a reader left
   it regardless of which reading width they picked - the two settings are independent,
   not a trade against each other. So below ~1728px (measured: at 1280-1512px `main`'s
   `1fr` track already renders narrower than the 880px cap this lifts), the setting
   genuinely has nothing to grow into and the row of numbers before and after a click
   looks the same. That is the toggle correctly reporting there is no room, not a
   defect - the sidebar and the toc are both fixed-width for the same reason, and
   narrowing either was never asked for. */

article[hidden] {
  display: none;
}

/* The notice is a `root-alert` now, and it is the first thing on the page: it keeps the
   alert's own paint and only takes the spacing that separates it from the title. */
[data-part="draft-notice"] {
  margin-block-end: var(--root-s--lg);
}

@media (prefers-reduced-motion: reduce) {
  main {
    scroll-behavior: auto;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  /* One column, and the page scrolls as a document: a viewport-locked grid with three
     stacked scrollports inside it would give a phone four scrollbars. The footer stops
     being always-on-screen here and simply ends the page. */
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  main {
    min-height: auto;
    padding: var(--root-s--xl);
    overflow-y: visible;
  }
}

/* ── Anchors that lay themselves out ────────────────────────────────────── */
/* The foundations give every inline anchor a small padding and an equal negative margin,
   so a link in a sentence draws the same rounded, offset focus ring every other control
   does (`_focus.css`). An anchor that already has a box of its own does not want it: it
   draws the ring in the right shape from its own padding and radius, and a second inset
   on top both grows it and shifts it - measured on the sidebar's rows, 6.5px taller and
   6.5px to the left, because a shell rule setting `padding-inline` overrides only two of
   the four sides the foundations set.

   Every one of them is listed here rather than the rule being narrowed upstream: which
   anchors are laid out is this site's business, not the design system's. */
:is(
  a[data-nav],
  [data-part="heading-anchor"],
  [data-part="brand-name"],
  [data-part="skip-link"],
  [data-part="cta"],
  [data-part="footer-brand"] a,
  [data-part="toc"] a
) {
  --root-f--ring-inset: 0;
}