/* The policies document, and only that page.
 *
 * Its own sheet since 2026-08-11, when app.css went over the 750 ceiling. It is
 * the cleanest thing in there to lift out: one page owns every rule below, and
 * nothing else on the site draws a document with a contents rail beside it.
 *
 * Linked AFTER pages.css in base.html, and that order is the cascade. Three
 * rules here - `.doc-s .lede`, `.doc-s .foot-note`, `.doc-s .rowlist` - override
 * plain `.lede`, `.foot-note` and `.rowlist` declared there. They win on
 * specificity either way, so the order is belt and braces rather than the thing
 * holding them up.
 *
 * A sheet is a `<link>` in base.html AND a line in `VERSIONED` in
 * crates/web/src/assets.rs. Left out of that list its version never moves and a
 * returning visitor keeps the old copy for a year. */

/* The policies document: a contents list that follows you down the page, and
   the clauses beside it. Two columns and not one, because eighteen sections is
   a length somebody arrives at wanting section eleven, and a page that can only
   be read from the top is a page that gets read from none of it. */
/* The body track is sized to the MEASURE, not to what is left over. `1fr` took
   the whole remaining 920px at 1180 while `.doc-body` capped its text at 68ch,
   so every one of the eighteen sections stopped two thirds of the way across
   and left a 355px gutter running the length of the longest page on the site -
   and the `space-between` rows inside it ended in mid-page too. Sizing the
   track to the measure and centring the pair puts that space on both sides. */
.doc { display: grid; grid-template-columns: 220px minmax(0, 68ch); gap: var(--step-10); align-items: start; justify-content: center; }
.doc-date { margin-top: var(--step-4); color: var(--text-3); font-size: 13px; }
/* Eighteen entries at 44px plus their gaps is about 930px of rail. Pinned at
   `top: 88px` on a 1080p screen the last three or four sections sat permanently
   below the fold with no way to reach them - the rail scrolled with nothing.
   `contain` so reaching its end does not then scroll the document. */
.doc-toc {
  position: sticky; top: 88px;
  max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain;
  /* 4px of room for the focus ring: `2px solid` at `outline-offset: 2px`, and an
     outline is NOT part of scrollable overflow, so all eighteen links had theirs
     shaved. Same pair as `.hits` and `.qcart` in forms.css; the negative margin
     puts the rail back where it was, sticky offset and all. */
  padding: 4px; margin: -4px;
}
.doc-toc ol {
  list-style: none; margin: var(--step-4) 0 0; padding: 0;
  display: grid; gap: var(--step-2); counter-reset: toc;
}
.doc-toc li { counter-increment: toc; }
/* 44px, for the reason the footer nav already carries: an 17.6px target 8px
   from the next one is one target as far as a thumb is concerned, and this is
   the navigation of the longest page on the site. Below 560px the list is a
   single column, so the height costs no width. */
.doc-toc a {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--step-2);
  min-height: 44px; align-items: center;
  font-size: 13px; line-height: 1.35; color: var(--text-3);
}
/* The number comes from the list and not from the words, so a section renamed
   or one withheld from a reader cannot leave the contents counting wrong. */
.doc-toc a::before {
  content: counter(toc); font-family: var(--font-mono); font-size: 11px;
  /* No `opacity` here. The rule above says this number is generated so a
     renamed section cannot leave the contents counting wrong - which makes
     it content, and .6 of --text-3 put content at 2.62:1. */
  color: var(--text-3); padding-top: 2px;
}
.doc-toc a:hover { color: var(--text-1); }
.doc-toc a:hover::before { color: var(--accent); }

.doc-body { display: grid; gap: var(--step-12); max-width: 68ch; }
.doc-s { display: grid; gap: var(--step-4); scroll-margin-top: 96px; }
.doc-s h2 { font-size: 24px; }
/* 16px: this is the longest prose on the site and it sat one step UNDER the
   site's own body size, and under the 16px `.rowlist` rows inside the very same
   section - so the clauses read as captions to their own tables. */
.doc-s p { color: var(--text-2); font-size: 16px; line-height: 1.65; }
/* The three subheads added 2026-08-10 take the UA's 1.17em otherwise, which
   lands them at the paragraph size on the paragraph grid: a level nobody sees. */
.doc-s h3 { font-size: 17px; color: var(--text-1); margin-top: var(--step-2); }
/* `--text-3` is the dimmest step and here it carries the obligations that bind
   us: the five business days, the backup window, the complaint route. */
.doc-s .foot-note { color: var(--text-2); }
.doc-s .lede { color: var(--text-1); }
.doc-s .rowlist { margin: var(--step-2) 0; }

/* One column on a narrow screen, and the contents list becomes a plain block at
   the top instead of a rail that sticks to nothing. The cap and the clip go with
   it: a block that scrolls the page has nothing to scroll inside itself, so all
   the overflow still did here was cut the focus ring off again. */
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; gap: var(--step-8); }
  .doc-toc { position: static; max-height: none; overflow-y: visible; }
  .doc-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* And one column on a phone. Two columns of eighteen short links is two columns
   of wrapped words at this width, which is harder to scan than the list. */
@media (max-width: 560px) {
  .doc-toc ol { grid-template-columns: 1fr; }
}