/* css/legal/page.css - page-scoped rules for THE legal document page.

   ONE SHEET, because the app has ONE template. `app/templates/legal/page.html` renders
   every legal document (ToA, Privacy, DPA) from `LEGAL_DOCUMENTS`; the Nocturne preview
   models each document as its own static page and therefore carried three copies of this
   block - `legal-toa`, `legal-privacy`, `legal-dpa` - byte-identical apart from the
   comment naming them. The port brought all three across, so two of them sat on disk
   loaded by nothing while a third, named after ONE document, styled all three.

   That is the shape a locked-contract drift starts in: change the responsive rule for the
   privacy page, edit `legal/privacy.css` because the name says so, and nothing happens.
   The sheet is named for its TEMPLATE, not for one of the documents it serves.

   Loaded from `page_styles`, i.e. the same cascade position the preview's inline block
   held, so no winner can flip. */
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .doc-toc { position: static; }
}