/* ==================================================================
   LEGAL LIBRARY — the site chrome around the documents in www2026/legal/

   Since September 2026 every document under /legal/ carries the shared
   header and footer (#headerMount / #footerMount, filled by prerender.mjs
   and js/layout.js like any other page), so a reader who opens a policy
   stays inside the site and the Back button returns them. This file is the
   contract that lets a self-contained A4 facsimile and the site's chrome
   share one page without either restyling the other.

   HOW THE CASCADE IS ARRANGED. Each document's <head> declares
   `@layer site, docbase;` and imports Bootstrap, css/style.css,
   css/royce-header.css and css/buttons.css INTO the `site` layer. The
   document's own inline <style> stays unlayered. Layered normal declarations
   always lose to unlayered ones regardless of specificity, so inside the
   document every rule the signed instrument came with wins over anything the
   site stylesheets say — including Bootstrap's element reset — and the chrome,
   which the document's CSS never targets, is styled by the site alone.

   Two leaks remain and are handled here:

   1. Bootstrap's reboot styles elements the document does NOT style itself
      (a <p> that relies on browser defaults, a table's border model, an
      image's vertical-align). The `docbase` layer below sits ABOVE `site`
      and puts the user-agent values back for those elements inside
      .legal-page. Being a layer, it still loses to every unlayered rule the
      document has, so it corrects only what the document left to the
      browser. Values are the UA defaults, not a design.

   2. `!important` inverts the layer order: a layered important declaration
      beats an unlayered one. css/style.css sets the body font with
      !important, so the document's own font, colour and background are set
      on the .legal-page wrapper (a descendant, where a normal declaration
      applies) rather than on body — that is why prerender-time and
      hand-edited documents have `.legal-page{…}` where the executed file
      had `body{…}`, and why the `html{font-size:10pt}` line is gone (no
      document uses rem, and the bar's rem-based tokens must not shrink).

   The wrapper also reserves the fixed header's resting height with --nav-h
   (css/royce-header.css), and print hides the chrome entirely so the
   printed output is still the document alone — nothing here touches @page
   or the documents' own print block.
   ================================================================== */

@layer docbase {
  .legal-page {
    /* the documents are light paper; the site's dark theme must not switch
       the UA palette (scrollbars, LinkText, form controls) underneath them */
    color-scheme: light;
  }

  /* Bootstrap reboot, returned to user-agent values where the document
     says nothing. Every selector is wrapped in :where() so this layer never
     outranks a document rule by specificity either. */
  .legal-page :where(h1) {
    font-size: 2em;
    margin: 0.67em 0;
  }
  .legal-page :where(h2) {
    font-size: 1.5em;
    margin: 0.83em 0;
  }
  .legal-page :where(h3) {
    font-size: 1.17em;
    margin: 1em 0;
  }
  .legal-page :where(h4) {
    font-size: 1em;
    margin: 1.33em 0;
  }
  .legal-page :where(h5) {
    font-size: 0.83em;
    margin: 1.67em 0;
  }
  .legal-page :where(h6) {
    font-size: 0.67em;
    margin: 2.33em 0;
  }
  .legal-page :where(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
    line-height: normal;
    color: inherit;
  }
  .legal-page :where(p, blockquote, figure, dl, ul, ol) {
    margin: 1em 0;
  }
  .legal-page :where(blockquote, figure) {
    margin: 1em 40px;
  }
  .legal-page :where(ul, ol) {
    padding-left: 40px;
  }
  .legal-page :where(dd) {
    margin: 0 0 0 40px;
  }
  .legal-page :where(hr) {
    margin: 0.5em auto;
    border: 1px inset;
    color: gray;
    opacity: 1;
  }
  .legal-page :where(a) {
    color: LinkText;
    text-decoration: underline;
  }
  .legal-page :where(a:hover) {
    color: LinkText;
  }
  .legal-page :where(b, strong) {
    font-weight: bold;
  }
  .legal-page :where(small) {
    font-size: smaller;
  }
  .legal-page :where(sub, sup) {
    position: static;
    font-size: smaller;
    line-height: normal;
  }
  .legal-page :where(sub) {
    vertical-align: sub;
  }
  .legal-page :where(sup) {
    vertical-align: super;
  }
  .legal-page :where(img, svg) {
    vertical-align: baseline;
  }
  .legal-page :where(table) {
    caption-side: top;
    border-collapse: separate;
    border-spacing: 2px;
  }
  .legal-page :where(caption) {
    padding: 0;
    color: inherit;
    text-align: center;
  }
  .legal-page :where(th) {
    text-align: center;
    font-weight: bold;
  }
  .legal-page :where(thead, tbody, tfoot, tr, td, th) {
    border-style: none;
  }
  .legal-page :where(address) {
    margin: 0;
    font-style: italic;
  }
  .legal-page :where(label) {
    display: inline;
  }

  /* Two Bootstrap component classes one document happens to use as plain
     names (negative-balance-protection: .row for a dt/dd grid row, .lead
     for its opening paragraph). Bootstrap's grid margins, gutters and the
     lead type scale must not reach them. */
  .legal-page :where(.row) {
    display: block;
    flex-wrap: nowrap;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  .legal-page :where(.row > *) {
    flex-shrink: 1;
    width: auto;
    max-width: none;
    padding: 0;
    margin-top: 0;
  }
  .legal-page :where(.lead) {
    font-size: inherit;
    font-weight: inherit;
  }
}

/* ---- the fixed header ----
   Unlayered on purpose: it must beat the wrapper's own `margin:0` /
   padding, which is unlayered too and comes from the document. */
@media screen {
  .legal-page {
    padding-top: var(--nav-h);
  }
  /* negative-balance-protection: its sticky contents column and anchor
     targets were set for a page with no bar above them. */
  #rz-nbp .rz-nbp-toc {
    top: calc(var(--nav-h) + 24px);
    max-height: calc(100vh - var(--nav-h) - 48px);
  }
  #rz-nbp [id],
  #rz-nbp .rz-nbp-doc h3 {
    scroll-margin-top: calc(var(--nav-h) + 24px);
  }
}

/* ---- print ----
   The chrome is screen furniture. The documents' own print blocks
   (@page, running heads) stay in charge of the paper. */
@media print {
  #headerMount,
  #footerMount,
  #lang-scrim,
  #lang-panel,
  #lang-modal,
  #rz-drawer {
    display: none !important;
  }
  .legal-page {
    padding-top: 0;
  }
}
