/* site/system/decisions.css — page CSS for site/decisions.html, and for that page only.
 *
 * THE PAGE IS GENERATED AND THIS FILE IS NOT. site/decisions.html is compiled from
 * docs/decisions.template.html and docs/decisions/fin.md by tooling/gen-decisions.mjs, and is
 * read-only under S4. This stylesheet is hand-authored like every other page CSS file, and the
 * class names it targets are the ones the renderer emits.
 *
 * Linked LAST in the head (S2), so a rule here can override a component without raising specificity.
 *
 * S1, and gate group 6 treats this file as a consumer exactly as it treats components.css: contract
 * tokens only, no colour literal, no pack primitive, no bare px on padding, margin, gap,
 * border-radius or font-size. No @import either, since an @import is invisible to the S2 order check.
 *
 * NOTHING HERE IS PROMOTED TO components.css, AND THAT ANSWERS THE QUESTION contract.css ASKS BY
 * NAME. Its header says this page is the one that would make the .contract-aspect spec grid a
 * second consumer. It does not. The compiled cards use .decision-card, .decision-card-title,
 * .decision-card-fields and .dc-field, all four of which components.css already holds under S5, so
 * the spec grid gains no second consumer and stays where it is. What this file adds is page rhythm
 * and nothing a second page could spend.
 */

/* The measure. 78ch is the column handover.css set for the replay and contract.css kept for the
   spec, held here so the three page types do not disagree about how wide a line is. The card list
   is deliberately NOT capped: a card is a label and value grid, and squeezing the value column to
   prose width is what .dc-field's own 520px collapse exists to avoid. */
.page-frame,
.decisions-prose {
  max-width: 78ch;
}

/* Every authored section above the record gets the same rhythm, so the reader arrives at the
   compiled block having read four short arguments rather than one wall. components.css zeroes the
   margin on p and on the heading classes, so a page that sets no rhythm renders its prose in one
   unbroken block: proposal.css supplies its own for the same reason and this follows it. */
main > section {
  margin-top: var(--spacing-3xl);
}

main > section > h2 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

main > section > p {
  max-width: 78ch;
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

main > section > p:last-of-type {
  margin-bottom: 0;
}

/* The two prototype group headings the renderer emits. They sit above a run of cards, so they need
   more air above them than a heading that opens a paragraph. */
.h2[id^="group-"] {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* The run of cards itself. gap rather than per-card margin, so the first and last carry no stray
   edge against the headings above and below them. */
.decision-list {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

/* The date and reject count under each card's fields. It is provenance, not content: it reads as
   the quiet line it is so the four fields stay the thing the eye lands on. */
.dc-meta {
  margin: var(--spacing-md) 0 0;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* An identifier set in the record's own backticks, promoted to <code> by the renderer. Matches the
   treatment contract.css gives inline code, at a ratio to the inherited size rather than a scale
   step, which is the carve-out "How S1 is counted" names for relative units on font-size. */
.decision-card code,
.decisions-prose code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* A card reached by its own fragment from one of the five pages beside the glass. Without this the
   reader lands on a page of 42 identical cards with nothing saying which one they asked for. */
.decision-card:target {
  border-color: var(--color-accent-secondary);
  box-shadow: var(--shadow-md);
}