/* site/system/contract.css — page CSS for site/contract.html, and for that page only.
 *
 * 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 is S5 read correctly rather than skipped.
 * One page spends the .contract-* band, S5 promotes at two, and promoting early would claim a
 * producer that does not exist. The same reasoning site/system/recovery.css states for its own
 * override band.
 *
 * #10 ANSWERED THE QUESTION THIS COMMENT USED TO LEAVE OPEN. It named decisions.html as the page
 * that would make the spec grid a second consumer and the ticket where the promotion becomes a real
 * decision rather than a guess. It does not make it one. The compiled page renders .decision-card,
 * .decision-card-title, .decision-card-fields and .dc-field, which components.css already holds as
 * a promoted organism under S5, so the .contract-aspect grid gained no second spender and stays
 * here. site/system/decisions.css adds page rhythm and nothing another page could reuse. Answered
 * rather than carried forward, because a question left standing after the ticket that was supposed
 * to settle it is the same defect as a rule with no producer.
 */

/* The spec and the record share the column the frame already sets, because a specification read at
   full viewport width is a specification nobody finishes. 78ch is handover.css's measure for the
   replay, kept here so the two page types do not disagree about how wide a line is. */
.contract-spec,
.contract-record {
  max-width: 78ch;
}

.contract-spec {
  margin-bottom: var(--spacing-3xl);
}

/* The page declaring its own binding. It reads as the note it is rather than as body copy, because
   a reader who does not care about the gate should be able to skip it in one glance. */
.contract-spec-note {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  max-width: 68ch;
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-2xl);
}

.contract-spec-note code,
.contract-record code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ---- One field, four aspects ----
 * The blocks are separated by a rule rather than by a card, on purpose. A specification is a list
 * of equals: putting each field in its own box makes five claims look like five products, and the
 * card treatment is already spent on the briefing, which is the surface this page describes. */
.contract-field {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.contract-field-title {
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
}

.contract-aspects {
  margin: 0;
  display: grid;
  gap: var(--spacing-md);
}

/* The label/value shape .dc-field established, at the wider measure a four-aspect row needs (A2).
   The <dt> carries the aspect and the <dd> carries the answer, so the pair reads as a pair to a
   screen reader and to an agent alike rather than as two paragraphs that happen to be adjacent. */
.contract-aspect {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--spacing-md);
  align-items: baseline;
}

.contract-aspect dt {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.contract-aspect dd {
  margin: 0;
  line-height: 1.55;
}

.contract-aspect dd p {
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}

.contract-aspect dd p:last-child {
  margin-bottom: 0;
}

/* Fin's own words, in the same register the escalation card gives them: an indent and the
   attribution line under the quote, never a pull-quote. The sentence is evidence, not emphasis. */
.contract-quote {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-md);
}

.contract-quote-text {
  margin: 0;
  line-height: 1.6;
}

.contract-quote-source {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

/* ---- The record ---- */
.contract-record {
  border-top: 3px solid var(--color-border-strong);
  padding-top: var(--spacing-lg);
}

.contract-record p {
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  max-width: 72ch;
}

.contract-record p:last-child {
  margin-bottom: 0;
}

/* The aspect label stacks above its answer once the two-column pair stops being two columns. Same
   breakpoint and same reasoning as .dc-field's, so the two label/value shapes on this site do not
   collapse at two different widths. */
@media (max-width: 520px) {
  .contract-aspect {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
}