/* /signup/ — the membership agreement, set as a document.
 *
 * The page is two documents: a plain explainer, then the agreement the member
 * signs. Only the second half is styled here. overrides/signup.html produces
 * the <div class="agreement"> it all hangs off, by splitting page.content on
 * the `<!--agreement-->` marker in docs/signup.md -- the reasoning, including
 * why the wrapper is not written in the Markdown, is in that template.
 *
 * Loaded from signup.html rather than main.html so no other page fetches it.
 *
 * Two constraints shape what follows.
 *
 * THE DOCUMENT IS WHITE IN EVERY PALETTE. This site has a dark scheme, and the
 * agreement is paper: black on white, in all three of them. So the colours here
 * are literals rather than the --md-* custom properties, which is normally the
 * wrong thing to do in this stylesheet. A white sheet on the dark background
 * reads as a document on a desk, which is the intent.
 *
 * IT HAS TO PRINT ON LETTER. Somebody signing this is likely to print it, and
 * the print rules at the bottom are not decoration: they strip the website, put
 * the agreement on its own sheet, and stop the browser printing the dark
 * scheme's light grey text onto white paper, where it is invisible.
 */

/* --------------------------------------------------------------- the sheet */

.md-typeset .agreement {
  background-color: #fff;
  border: 1px solid #d9d4c9;
  border-radius: 2px;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .14);
  color: #16150f;
  font-family: Georgia, "Times New Roman", Times, serif;
  /* Material's own body size is .8rem, which is a size for screen prose. A
     document wants the reader's default, and the headings below are sized in em
     so they scale from this rather than from the root. */
  font-size: 1rem;
  line-height: 1.65;
  margin: 2rem auto 0;
  max-width: 44rem;
  padding: 2.4rem 2.6rem 2rem;
}

/* The document's own title, and its section headings. The permalinks are
   hidden because a printed contract does not carry ¶ marks, and neither should
   one on screen. */
.md-typeset .agreement h2 {
  border-bottom: 2px solid #16150f;
  color: #16150f;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  margin: 0 0 1.6rem;
  padding-bottom: .8rem;
  text-align: center;
  text-transform: uppercase;
}

.md-typeset .agreement h3 {
  border-bottom: 1px solid #cfc9bc;
  color: #16150f;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.4;
  margin: 1.8rem 0 .7rem;
  padding-bottom: .3rem;
  text-transform: uppercase;
}

.md-typeset .agreement .headerlink {
  display: none;
}

/* Inherited colours are not enough for these: the theme sets its own on
   headings, links and code, and those are custom properties that flip with the
   palette. */
.md-typeset .agreement p {
  margin: 0 0 1rem;
}

.md-typeset .agreement a {
  color: #1a4f8a;
}

.md-typeset .agreement strong {
  color: #16150f;
}

.md-typeset .agreement code {
  background-color: #f2efe8;
  color: #16150f;
}

.md-typeset .agreement :is(ul, ol) {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.md-typeset .agreement li {
  margin: 0 0 .4rem;
}

.md-typeset .agreement li > :is(ul, ol) {
  margin: .4rem 0 0;
}

/* Justified, the way a contract is set, but only once the measure is wide
   enough to justify without rivers. Lists stay ragged: a justified bullet
   looks broken, because the second line is short by definition. */
@media screen and (min-width: 45em) {

  .md-typeset .agreement p {
    hyphens: auto;
    text-align: justify;
  }

}

/* ------------------------------------------------------------- signing it */

.md-typeset .agreement .signatures {
  margin: 2rem 0 1.6rem;
}

.md-typeset .agreement .signatures p {
  border-bottom: 1px solid #16150f;
  margin: 0 0 1.4rem;
  /* Room to actually sign, which a row of underscores does not give. */
  min-height: 2.2rem;
  padding-bottom: .2rem;
}

/* ------------------------------------------------------------------ print */

/* 8.5 x 11 with margins a court would accept. `letter` rather than `A4`
   because the members are in the US and a page box the printer does not
   recognise is silently scaled, which is how a document ends up shrunk into
   the top corner of the sheet. */
@page {
  margin: 18mm 16mm;
  size: letter portrait;
}

@media print {

  /* The document, not the website. */
  .md-header,
  .md-footer,
  .md-sidebar,
  .md-dialog,
  .md-search,
  .md-overlay,
  .md-top,
  .md-progress,
  .md-skip {
    display: none !important;
  }

  .md-container,
  .md-main,
  .md-main__inner,
  .md-content {
    display: block;
    margin: 0;
    max-width: none;
    padding: 0;
  }

  /* The sheet is paper, and paper is already white: the border and the shadow
     would print as a box around every page. */
  .md-typeset .agreement {
    background: none;
    border: 0;
    box-shadow: none;
    font-size: 11pt;
    line-height: 1.45;
    margin: 0;
    max-width: none;
    padding: 0;
  }

  /* The agreement starts on a fresh sheet, so the document never begins halfway
     down a page that also carries the explainer. */
  .md-typeset .agreement h2 {
    break-before: page;
    font-size: 14pt;
  }

  /* Never leave a heading as the last thing on a page, and never break a
     clause across two sheets. */
  .md-typeset .agreement h3 {
    break-after: avoid;
    font-size: 11.5pt;
  }

  .md-typeset .agreement :is(p, li) {
    break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  .md-typeset .agreement a {
    color: #000;
    text-decoration: underline;
  }

  /* Browsers do not print backgrounds, and the dark scheme's text is a light
     grey chosen to sit on a dark page. Printed on white it is nearly invisible,
     so the whole article is forced to black here rather than only the
     agreement. Without this, printing /signup/ from the dark palette produces
     a blank-looking page. */
  .md-typeset,
  .md-typeset :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, blockquote) {
    color: #000 !important;
  }

  .md-typeset a {
    color: #000 !important;
  }

  .md-typeset .agreement {
    color: #000;
  }

}