/* A long read in the logged-out frame: a page of prose a visitor reads
   through before, or without, ever having an Account, such as /bot
   (bot-identity.md B-10 — The link in the identity explains who we are).

   Decisions:
   - Reading width, not form width. The frame's content card is sized for a
     login form; this shape widens it from application.css, beside the
     signup's own widening, since the card is the frame's and not the page's.
   - Left-aligned prose with the frame's own type scale. Headings step down
     h1 > h2 > h3 so a reader scanning for the one section they came for
     finds it.
   - Copyable text (robots.txt lines, firewall expressions) sits in <pre>,
     wrapped rather than scrolled, so a phone shows all of it (mobile.md). */

.long-read {
  text-align: left;
  line-height: 1.55;
}

/* The gap goes on the section, not its heading: a heading opens its section,
   so application.css's :first-child reset zeroes any margin it carries. */
.long-read section {
  margin-top: 2rem;
}

.long-read h2 {
  font-size: 1.2rem;
}

.long-read h3 {
  margin-top: 1.25rem;
  font-size: 1rem;
}

.long-read-lede {
  font-size: 1.1rem;
}

.long-read ul,
.long-read ol {
  padding-left: 1.25rem;
}

.long-read li + li {
  margin-top: 0.4rem;
}

.long-read pre {
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: var(--color-bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.long-read-pairs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
}

.long-read-pairs dd {
  margin: 0;
}