/* Article typography — everything inside [data-article-body], plus the two
 * blocks the shell wraps around it.
 *
 * Wrapped in @layer components, the atlas.css/studio.css treatment — see the
 * "cascade-layer trap" section of docs/DESIGN_SYSTEM.md. Tailwind's utilities
 * live in a later layer, so a utility written in article markup still wins
 * over these rules rather than losing to a bare selector.
 *
 * ── WHY A STYLESHEET AND NOT UTILITIES ─────────────────────────────────────
 * Every <h2> in the two articles carried the identical string
 * `mt-10 font-display text-xl font-semibold text-ink`, copied ten times. That
 * is a per-heading tax on writing an article, and the plan for this section is
 * a dozen more of them. Headings, paragraph rhythm and the versus table are
 * the shape of an article rather than the decoration of one page, so they live
 * here once. A view writes <h2> and gets the house style.
 *
 * Every colour is a semantic token, so `.dark` repaints the whole piece with
 * no second rule and no theme listener.
 */
@layer components {
  /* ── The measured surface ────────────────────────────────────────────────
     Slightly larger than the site's default body copy. This is the one part of
     the site somebody reads for four minutes rather than scans for a number,
     and 15px over 14px is the difference between the two. */
  [data-article-body] {
    font-size: 0.9375rem;
    line-height: 1.75;
  }

  [data-article-body] p {
    margin-block-end: 1rem;
  }

  /* The opening paragraph carries the piece. Set by the view as <p class="lead">
     rather than inferred from :first-child, because an article may legitimately
     open with the versus table instead. */
  [data-article-body] .lead {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-ink);
  }

  /* ── Section headings ────────────────────────────────────────────────────
     The dashed rule is the same device /brew-methods uses over its family
     headings, and it is what gives a 900-word essay a scannable spine. Margin
     is asymmetric on purpose: a heading belongs to the text under it. */
  [data-article-body] h2 {
    margin-block: 2.75rem 0.875rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px dashed var(--color-border);
    font-family: var(--font-display, ui-serif, Georgia, serif);
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-ink);
  }

  /* The first heading follows the versus table or the opening paragraphs, both
     of which already provide separation; a second rule there reads as a stack
     of lines rather than a division. */
  [data-article-body] > h2:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }

  [data-article-body] h3 {
    margin-block: 1.75rem 0.5rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  /* An emphasised run inside body copy is a term being named, not a shout. */
  [data-article-body] strong {
    font-weight: 600;
    color: var(--color-ink);
  }

  [data-article-body] a:not(.no-underline) {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: var(--color-accent-tint-42);
    text-underline-offset: 0.15em;
  }

  [data-article-body] a:not(.no-underline):hover {
    text-decoration-color: var(--color-accent);
  }

  [data-article-body] ul,
  [data-article-body] ol {
    margin-block-end: 1rem;
    padding-inline-start: 1.25rem;
  }

  [data-article-body] li {
    margin-block-end: 0.375rem;
  }

  [data-article-body] ul > li { list-style: disc; }
  [data-article-body] ol > li { list-style: decimal; }

  /* ── The short answer ────────────────────────────────────────────────────
     The registry's own `summary:` for this piece, which until now rendered
     only into /llms.txt and /llms-full.txt — an answer engine got the abstract
     and a human reader did not. It is per-article prose, not shell furniture:
     the only repeated words are the two in the label. */
  .article-summary {
    margin-block-end: 1.75rem;
    border-inline-start: 3px solid var(--color-accent);
    background: var(--color-surface-2);
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
  }

  .article-summary > dt {
    margin-block-end: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-ink-soft);
  }

  .article-summary > dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-ink);
  }

  /* ── The versus table ────────────────────────────────────────────────────
     Was 2px of vertical padding and a hairline between rows, which read as a
     spreadsheet dropped into an essay. The figures are the reason the article
     exists, so they get room and the label column recedes. */
  .versus-table td,
  .versus-table th {
    padding-block: 0.5rem;
  }

  .versus-table tbody tr + tr {
    border-block-start: 1px solid var(--color-border);
  }

  .versus-table tbody td:first-child {
    font-size: 0.8125rem;
    color: var(--color-ink-soft);
  }

  .versus-table tbody td:not(:first-child) {
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
  }

  /* Zebra on the value columns only. It separates two adjacent figures the eye
     is meant to compare, which a full-width stripe does not. */
  .versus-table tbody tr:nth-child(odd) td:not(:first-child) {
    background: var(--color-surface-2);
  }
}