/**
 * Section: Text block (prose)
 *
 * Ported from _mockups/privacy.html `.lg-intro` and `.lg-note`, plus
 * _mockups/helper-category.html `.hc-prose` for the 66ch body measure and the
 * larger opening paragraph. `.head` and `.note` are shared components and live
 * in base.css and components.css; neither is redeclared here.
 *
 * CONTRAST, MEASURED. The band is the default page ground, --mist (#f7f4ee).
 *
 *   --ink        #14231f  on --mist  14.83:1   the opening paragraph, strong
 *   --ink-soft   #45524d  on --mist   7.45:1   the body
 *   --ink-faint  #5f6b66  on --mist   5.06:1   the closing note at --text-sm
 *   --gold-deep  #7e622e  on --mist   5.21:1   the eyebrow
 *   --pine       #16564b  on --mist   7.75:1   links
 *   --forest     #0e4038  on --mist  10.57:1   strong inside the body
 *   --gold-deep  on the .ph-badge stripe over --mist (#f1e9da)   4.75:1
 *
 * All clear WCAG AA for normal text, including --ink-faint, which is the
 * tightest of them at 5.06:1 and is why the closing note keeps --text-sm rather
 * than dropping to --text-xs.
 *
 * Tokens only, with two things named rather than hidden. The character measures
 * (62ch, 66ch) are the mock-ups' own: a reading measure is counted in
 * characters by definition and has no colour, size or spacing token it could
 * come from. The blockquote's 2px rule is a hairline width, the same practice
 * components.css follows for its 1px and 1.5px borders; it is not a step on the
 * spacing scale.
 */

/* ---------------------------------------------------------------------------
 * The reading column.
 *
 * `.container-narrow` is 760px; 66ch is the measure inside it, which is what
 * helper-category.html sets and what makes a long policy readable.
 * ------------------------------------------------------------------------ */
.prose-body {
  max-width: 66ch;
  /* Pasted policy text is the most likely place on the site for an unbreakable
     string, a long URL or a reference number. This is what keeps 320px free of
     horizontal overflow. */
  overflow-wrap: break-word;
}

.prose-body p {
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}

.prose-body > :last-child {
  margin-bottom: 0;
}

/* The larger opening paragraph. A structural selector rather than a class from
   the renderer, because the intro field and the body's own first paragraph are
   the same idea: fill the intro and it is the one that grows, leave it empty
   and the body's first paragraph is. No toggle, no second look.

   `:first-child` rather than helper-category.html's `:first-of-type`, which is
   the same thing on the canonical markup and better on a policy: a body that
   opens with a subheading gets no enlarged paragraph at all, where
   `:first-of-type` would have picked a paragraph out of the middle of the
   document and set it larger for no reason a reader could see. */
.prose-body > p:first-child {
  font-size: var(--text-lg);
  color: var(--ink);
}

/* privacy.html's `.lg-intro` is the quieter of the two: it introduces the block
   rather than opening its argument. Three classes so this wins over
   `p:first-child` on specificity rather than on source order, which matters
   because a `prose` instance can legitimately be nothing but a closing note. */
.prose .prose-body .prose-intro {
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: var(--s-5);
}

/* ---------------------------------------------------------------------------
 * Structure inside the rich text.
 *
 * A policy page has subheadings and lists. tokens.css resets every margin to 0,
 * so without these a pasted policy runs together into one block.
 * ------------------------------------------------------------------------ */
.prose-body h2,
.prose-body h3,
.prose-body h4 {
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
}

.prose-body h2 { font-size: var(--text-xl); }
.prose-body h3 { font-size: var(--text-lg); }
.prose-body h4 { font-size: var(--text-base); }

.prose-body > :first-child {
  margin-top: 0;
}

.prose-body ul,
.prose-body ol {
  margin-bottom: var(--s-4);
  padding-inline-start: 1.4em;
  color: var(--ink-soft);
}

.prose-body li + li {
  margin-top: .4em;
}

.prose-body blockquote {
  margin-bottom: var(--s-4);
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--gold);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
 * The closing note.
 *
 * `.note` in components.css supplies --text-sm and --ink-soft; this quietens it
 * one further step to --ink-faint, which is what privacy.html's `.lg-note`
 * does, and holds it to the same measure. Three classes for the same
 * specificity reason as `.prose-intro` above.
 * ------------------------------------------------------------------------ */
.prose .prose-body .prose-note {
  margin-top: var(--s-4);
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
 * The optional head.
 *
 * `.head` carries margin-bottom: var(--s-6), which is right above a grid of
 * cards and too much above a paragraph of policy text.
 * ------------------------------------------------------------------------ */
.prose-head {
  margin-bottom: var(--s-4);
}