/* ===========================================================================
   Pages that are mostly words.

   The landing page is a sequence of bands, each one composed. These are not
   that: they are read top to bottom, and the job is a comfortable measure and
   a clear hierarchy rather than a composition.

   **They still have to look like Beady.** The thing that stops a written page
   reading as a generic blog is that it borrows the product's own idiom: a
   quoted contract clause is set in Newsreader on honey, exactly as the
   evidence band on the landing page sets it, and a verdict word carries the
   colour the app gives it. Nothing here invents a new visual language.

   Loaded after styles.css, which owns the tokens, the bar, the footer and the
   buttons. This file adds only what a document needs.
   ======================================================================== */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

@media (max-width: 640px) {
  .doc { padding: 40px 20px 64px; }
}

/* ------------------------------------------------------------------ head */

.doc-head { margin-bottom: 48px; }

.doc-kicker {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-ink-muted);
}

.doc-title {
  margin: 0;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--color-ink);
  text-wrap: balance;
}

.doc-lede {
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-body);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ body */

.doc-body > * + * { margin-top: 20px; }

.doc-body h2 {
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-ring);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.014em;
  font-weight: 600;
  color: var(--color-ink);
}

.doc-body h3 {
  margin: 34px 0 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-ink);
}

.doc-body p,
.doc-body li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-ink-body);
  text-wrap: pretty;
}

.doc-body strong { font-weight: 600; color: var(--color-ink); }

.doc-body ul,
.doc-body ol { margin-left: 0; padding-left: 22px; }
.doc-body li + li { margin-top: 9px; }
.doc-body li::marker { color: var(--color-ink-faint); }

/* Inline links are underlined, and that is a correctness fix rather than a
   preference. Ember on body ink is 1.77:1, and WCAG wants 3:1 when colour is
   the only thing distinguishing a link from the text around it. The landing
   page never hit this because its links all sit in navs, on their own, where
   there is no surrounding prose to be confused with. In a paragraph there is.

   The offset and thinner rule keep it from looking like a 1998 hyperlink. */
.doc-body a {
  color: var(--color-ember-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--color-ember-text) 40%, transparent);
  transition: text-decoration-color var(--motion-fast) var(--ease-out-soft),
              color var(--motion-fast) var(--ease-out-soft);
}

.doc-body a:hover {
  color: var(--color-ember-text-hover);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------- the product's idiom

   **Everything here is prefixed `doc-`, and that is not tidiness.** The first
   version of this file called them `.clause` and `.verdict`, which are both
   already taken by styles.css: `.verdict` there is the verdict *card* on the
   landing page, with its own padding, ring and surface fill. This file loads
   second, so it won the properties it declared and silently inherited the
   ones it did not, and an inline verdict word rendered mid-sentence as a
   boxed card. Prefix them and the question cannot come up again.

   A quoted contract clause is set the way the app sets one: Newsreader on the
   honey ground the evidence band uses. This is the single detail that makes a
   page of prose here read as Beady's rather than anybody's. */

.doc-clause {
  margin: 28px 0;
  padding: 20px 24px;
  border-radius: var(--radius-block);
  background-color: var(--color-honey-pale);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink);
}

.doc-clause-from {
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink-muted);
}

/* A verdict word, coloured as the app colours it. The dot carries the colour
   and the word stays ink, which is the rule the app already follows: a
   coloured label on a pale ground fails contrast at this size. */
.doc-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.doc-verdict::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--dot, var(--color-ink-faint));
  transform: translateY(-1px);
}

.doc-verdict-covered { --dot: var(--color-covered); }
.doc-verdict-unsettled { --dot: var(--color-unsettled); }
.doc-verdict-extra { --dot: var(--color-extra); }

/* Something to copy: a template clause, an email to send. Monospace would be
   wrong, this is prose meant for a contract, so it is the sunk block that
   marks it rather than a change of face. */
.take {
  margin: 28px 0;
  padding: 22px 24px;
  border-radius: var(--radius-block);
  background-color: var(--color-sunk);
}

.take p { font-size: 16px; line-height: 1.7; color: var(--color-ink); }
.take p + p { margin-top: 14px; }

.take-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------- release entries */

.release { padding-top: 28px; border-top: 1px solid var(--color-ring); margin-top: 48px; }
.release:first-of-type { margin-top: 36px; }

.release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.release-ver {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}

.release-date { font-size: 14px; color: var(--color-ink-muted); }

.release-now {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-badge);
  background-color: var(--color-honey-pale);
  color: var(--color-ink);
}

/* ------------------------------------------------------------- the close */

.doc-end {
  margin-top: 64px;
  padding: 28px 24px;
  border-radius: var(--radius-block);
  background-color: var(--color-sunk);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.doc-end p { margin: 0; font-size: 16px; color: var(--color-ink-body); }
.doc-end strong { color: var(--color-ink); }