/*
 * Document-page styles, motion, and print, split from legal.css to keep both sheets under the
 * repo's 1000-line cap (the same split that produced legal-report.css). Every page links this
 * sheet IMMEDIATELY AFTER legal.css, so document order across the pair is exactly what it was
 * when these sections were the tail of legal.css: do not reorder the links, and do not move a
 * rule between the sheets without re-checking cascade order. Motion and print apply site-wide,
 * not only to document pages; they live here because they closed the original file.
 *
 * Colour and type resolve through legal.css's token block, whose values are MBNXT's. Nothing here
 * writes a literal. The print block re-tokenises `:root` once, monochrome, which is the mechanism
 * that keeps forty rules from each needing a print override; it is unchanged by the conversion.
 */

/* ── Legal document ───────────────────────────────────────────────────────────────────────── */

/* The title block: which market's document this is, what it is called, and from when it binds.
   Three facts a reader needs before the first clause, set as one unit and closed with a rule. */
.doc-head {
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-lg);
  border-bottom: 2px solid var(--line-soft);
}

/* The kicker over a title block. text-h6 (14/17/800) in the muted ink: a section label in the
   DS's own smallest heading step, not a mono uppercase technical marker. */
.doc-kicker {
  display: block;
  margin: 0 0 var(--sp-sm);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.0625rem;
  color: var(--ink-muted);
}

/* Every property restated rather than inherited from the `h1` rule above: this page's own Tailwind
   bundle loads after this sheet and its preflight resets a bare `h1` to inherited size and weight.
   A class beats an element selector, so the title block holds either way.
   text-h1 32 / 38 / 800 (`preview/type-headings.html:10`), not clamped: the DS ramp is a fixed
   step, and a viewport-scaled title was a property of the display face this replaces. */
.doc-head h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 2rem;
  line-height: 2.375rem;
  margin: 0 0 var(--sp-md);
}

/* The lede under a title block: one size up from body text, and it stops short of the measure so it
   reads as an introduction rather than as the first paragraph of the thing. */
.report-lede {
  max-width: 34em;
  margin: 0 0 var(--sp-xl);
  font-size: 1rem;                 /* text-base 16 / 24 */
  line-height: 1.5;
  color: var(--ink-muted);
}

/* On /report/ the lede IS the rest of the title block, so the block does not close itself with a
   rule first: title, lede, form, one run. */
#report-page .doc-head {
  margin-bottom: var(--sp-lg);
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-effective-date {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

.legal-effective-date time {
  font-size: 0.875rem;             /* text-sm 14 / 20 */
  font-variant-numeric: tabular-nums;
}

/* An imported body carries its own decades-old wrapper: .terms or .privacy. Everything below
   is scoped to it so nothing here can reach the app's own shell. The separator the body used to
   draw for itself now belongs to `.doc-head` above, so this only opens the space. */
#legal-document .terms,
#legal-document .privacy {
  margin-top: 0;
}

/* One green rule per section. Docs differ on whether their sections are h2 or h3, so both
   levels carry it, scaled. */
#legal-document .terms h2::before,
#legal-document .privacy h2::before,
#legal-document .terms h3::before,
#legal-document .privacy h3::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-bottom: var(--sp-xs);
  background: var(--primary);
  border-radius: 2px;
}

#legal-document .terms h3::before,
#legal-document .privacy h3::before {
  width: 1.75rem;
  height: 2px;
}

/* These documents give one heading level for twenty-six sections: CSS cannot invent a hierarchy
   the source does not have, but it can buy separation. At the default h3 gap a numbered clause
   arrived ~35px after a thirty-line all-caps wall and read as its continuation; at this one the
   green rule above it reads as a section break. */
#legal-document .terms h3,
#legal-document .privacy h3 {
  margin-top: var(--sp-2xl);
}

/* Headings are already 800, the heaviest weight in the ramp. <strong> around one, which several
   documents do, must not push the variable face past it. */
#legal-document h1 strong,
#legal-document h2 strong,
#legal-document h3 strong {
  font-weight: inherit;
}

.term-sub-head {
  font-size: 1.25rem;              /* text-h3 20 / 26 / 800 */
  line-height: 1.625rem;
  font-weight: 800;
  margin: 0 0 var(--sp-lg);
}

/* In-document tables of contents. */
.terms-table-contents,
.privacy-table-contents {
  margin: var(--sp-lg) 0 var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--paper-deep);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  list-style: none;
  font-size: 0.9375rem;
}

/* Padding, not margin, and specific enough to beat `#legal-document li` below (1,1,1 vs 1,0,1).
   A top MARGIN is truncated at a column break, so in the two-column layout only column 1 paid it
   and column 2 started 6px higher than its neighbour. Padding is not truncated. */
#legal-document .terms-table-contents li,
#legal-document .privacy-table-contents li {
  margin: 0;
  padding: 0.375rem 0;
}

@media (min-width: 48em) {
  .terms-table-contents,
  .privacy-table-contents {
    columns: 14rem 2;
    column-gap: var(--sp-xl);
  }

  .terms-table-contents li,
  .privacy-table-contents li {
    break-inside: avoid;
  }
}

/* The closing footnote block: prior-version link, last-updated line. */
.terms-after-main,
.privacy-after-main {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-muted);
}

/* A single 2009 document carries Bootstrap-2 column classes (row/span3/span8) with no grid
   behind them. They stack: at this reading measure a 16rem sidebar would leave the content
   pane at roughly 22em, which is worse than one column. .span3 is already the contents box
   through its .privacy-table-contents class; .span8 needs nothing. */
#legal-document .row {
  margin: var(--sp-lg) 0;
}

#legal-document .no-list {
  list-style: none;
  padding-left: 0;
}

#legal-document .no-list > li {
  margin-bottom: var(--sp-lg);
}

#legal-document .alpha-list {
  list-style: lower-alpha;
}

#legal-document .inner-list {
  list-style: disc;
}

#legal-document ol,
#legal-document ul {
  padding-left: 1.35rem;
}

#legal-document li {
  margin: 0.375rem 0;
}

/* Numbered clauses want quiet, aligned markers: the number is a label for the text, not part of it. */
#legal-document li::marker {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

#legal-document li > ul,
#legal-document li > ol {
  margin-top: 0.375rem;
}

/* ── Motion ───────────────────────────────────────────────────────────────────────────────── */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print. Legal documents get printed and filed; this is a real reading mode. ───────────── */

@media print {
  @page {
    margin: 18mm 16mm;
  }

  /* Re-tokenise once, monochrome, instead of overriding forty rules one colour at a time. Every
     wash, rule and accent below then resolves to ink on white without knowing it is printing —
     including the archived banner, which keeps its border and its glyph and simply loses its
     amber. Printers drop backgrounds by default anyway; this makes that outcome the design. */
  :root {
    color-scheme: light;

    --primary: #000000;
    --primary-dark: #000000;
    --paper: #ffffff;
    --paper-deep: #ffffff;
    --surface: #ffffff;
    --ink: #000000;
    --ink-muted: #444444;
    --line: #999999;
    --line-soft: #cccccc;
    --field-border: #666666;
    --link: #000000;
    --focus: #000000;
    --brand-bar: #ffffff;
    --on-brand: #000000;
    --on-brand-cta-ink: #000000;
    --ink-subtle: #444444;
    --line-strong: #999999;

    --warn-bg: #ffffff;
    --warn-line: #000000;
    --warn-ink: #000000;
    --danger: #000000;
    --danger-ink: #000000;
    --danger-bg: #ffffff;
    --ok-bg: #ffffff;
    --ok-line: #999999;

    --shadow-card: none;
  }

  body {
    display: block;
    background: #ffffff !important;
    color: #000000;
    font-size: 11pt;
    line-height: 1.5;
  }

  main,
  main:has(> nav[aria-label]),
  .legal-index section,
  .legal-index ul {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* Screen chrome, all of it: a filed copy carries the document, not the site around it. */
  .masthead,
  .crumb,
  .site-footer {
    display: none;
  }

  a {
    text-decoration: underline;
  }

  /* On paper a link is only useful if its address is on the page. Legal bodies carry both kinds:
     the prior-version link and the notice address a reader is meant to write to. */
  #legal-document a[href^="http"]::after,
  #legal-document a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: var(--ink-muted);
    word-break: break-all;
  }

  .terms-table-contents,
  .privacy-table-contents {
    columns: auto;
    break-inside: avoid;
  }

  h1,
  h2,
  h3,
  h4 {
    break-after: avoid-page;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

}

/* ── The document page's two columns ──────────────────────────────────────────────────────────
   The text, and beside it where to ask a question and what else applies in this market. One
   column below 64em, where the reader wants the terms first and the help card after them.

   The page widens from the 40rem reading column to 66rem, not to the whole frame: 66rem seats a
   20rem sidebar and still leaves the clauses a ~43rem measure, which is what a legal text should
   be read at. The value is set on `--sheet` rather than as a max-width on the grid, because the
   BREADCRUMB above resolves its own width through the same token, and capping only the grid would
   leave the trail hanging at the frame's edge while the title moved inward. */

body:has(#legal-document) {
  --sheet: 66rem;
}

#legal-document {
  display: grid;
  gap: var(--sp-2xl);
  align-items: start;
}

@media (min-width: 64em) {
  #legal-document {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--sp-3xl);
  }
}

/* The clauses fill their track: the track itself is what holds the measure (see above). */
.doc-body {
  min-width: 0;
}

.doc-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  min-width: 0;
}

/* The help card. The one tinted panel on this site: it is an offer, not part of the document, and
   the tint is what says so. */
.doc-help {
  padding: var(--sp-lg);
  border-radius: var(--radius-sheet);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}

.doc-help-art {
  display: block;
  width: 78%;
  max-width: 15rem;
  height: auto;
  margin: 0 auto var(--sp-md);
}

.doc-help h2 {
  margin: 0 0 var(--sp-sm);
  font-size: 1.375rem;             /* text-h3 22 / 26 / 800 */
  font-weight: 800;
  line-height: 1.625rem;
  text-wrap: balance;
}

.doc-help p {
  margin: 0 0 var(--sp-lg);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Outlined rather than filled: the filled green pill is the masthead's Report content, the site's
   one primary action, and two filled greens on one screen compete for it. */
.doc-help-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--primary-dark);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.doc-help-cta:hover {
  background: var(--primary-dark);
  color: var(--on-brand);
}

.doc-help-arrow {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.doc-help-cta:hover .doc-help-arrow {
  transform: translateX(1.75px);
}

/* The related documents: the landing page's row group, in a card with a heading, because here the
   list needs to say what it is. */
.doc-related {
  padding: var(--sp-lg) var(--sp-md) var(--sp-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  background: var(--surface);
}

.doc-related h2 {
  margin: 0 0 var(--sp-sm);
  padding: 0 4px;
  font-size: 1.0625rem;            /* text-h4-ish: a card heading, not a page one */
  font-weight: 800;
  line-height: 1.3125rem;
}

.doc-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-related li + li {
  border-top: 1px solid var(--line);
}

.doc-related li a {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 0.75rem 4px;
  color: var(--ink);
  text-decoration: none;
}

.doc-related li a:hover .doc-related-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc-related-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* The same chevron the landing rows carry, drawn as a mask so the row needs no extra markup. */
.doc-related li a::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  background-color: #8a8e98;       /* MBNXT neutral-400 */
  -webkit-mask-image: var(--chevron);
  mask-image: var(--chevron);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* A clause block: its heading, its text, and a hairline between one and the next. The rule sits
   BETWEEN blocks rather than under each, so the last clause does not close with a line that has
   nothing under it. */
#legal-document .doc-body h2 {
  margin: 0;
  padding-top: var(--sp-lg);
  font-size: 1.25rem;              /* text-h4 20 / 24 / 800 */
  font-weight: 800;
  line-height: 1.5rem;
}

#legal-document .doc-body h2 + * {
  margin-top: var(--sp-sm);
}

#legal-document .doc-body h2:not(:first-of-type) {
  margin-top: var(--sp-lg);
  border-top: 1px solid var(--line-soft);
}

/* The aside is not part of the document a reader prints. */
@media print {
  .doc-aside {
    display: none;
  }
}