/* ── Artifact base — the house primitives every artifact was rewriting ───────
 *
 * WHY THIS FILE IS SAFE TO ADD TO 588 PUBLISHED PAGES.
 *
 * The build injects this link at the TOP of the document, BEFORE the artifact's
 * own <style>. At equal specificity the later rule wins, so a page that defines
 * its own `.card` keeps it, exactly as today. Nothing here can change a page
 * that already made a decision; it only fills the gaps in pages that did not,
 * and gives new pages a house default so the next one does not invent a
 * seventh `.card`.
 *
 * THE VALUES ARE MEASURED, NOT INVENTED. Across the artifacts that define
 * `.card`, 92% use var(--panel), 81% use a 1px var(--border), and 63% use a
 * 10px radius. Those are the values below. Where agreement was weak the rule
 * is minimal or absent rather than a coin-flip imposed on everyone.
 *
 * `.lede` AND `.lede-box` WERE ONE NAME UNTIL THEY WERE SPLIT. `.lede` meant
 * two different components: on 86 pages a muted intro paragraph, on 44 an
 * accent-bordered highlight box. One house value would have silently restyled
 * half of them into the other thing, so the 44 box pages were renamed to
 * `.lede-box` — definition and markup moved together, so nothing changed
 * visually — and the paragraph keeps the name, because a lede IS an opening
 * paragraph and that is what the word means.
 *
 * TOKENS. Artifacts speak the short palette. Every colour is a fallback chain
 * so a page that omits a token still renders, rather than inheriting
 * `initial` and going transparent-on-transparent.
 */

.card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e4e6eb);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}

.pill {
  display: inline-block;
  white-space: nowrap;
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft, transparent);
  color: var(--accent, inherit);
}

.badge {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid var(--border, #e4e6eb);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}

/* Weak agreement across pages (44% on its most common property, 43 pages), so
   this is the minimum that reads as an aside rather than a full opinion. */
.note {
  color: var(--muted, #5a678c);
}

/* Ten pages, 60% agreement. Enough to write down, not enough to be firm. */
.callout {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e4e6eb);
  border-left: 4px solid var(--accent, #4f46e5);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 14px 0;
}

/* 97% of the 145 pages that define it say exactly this and nothing else. */
.sub {
  color: var(--muted, #5a678c);
}

/* The opening paragraph. Muted and slightly larger than body text; the values
   are the plurality of what the 86 paragraph pages already say. */
.lede {
  color: var(--muted, #5a678c);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.2rem;
  max-width: 68ch;
}

/* The same idea, boxed — the statement a page wants you to read before
   anything else. What 44 pages had been calling `.lede`; 39 of them used
   exactly this accent-soft fill with an accent hairline. */
.lede-box {
  background: var(--accent-soft, transparent);
  border: 1px solid var(--accent, #4f46e5);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 1.2rem;
}