/* site/system/recovery.css — page CSS for site/recovery.html, and for that page only.
 *
 * Linked LAST in the head (S2), so a rule here can override a component without raising specificity.
 * The replay, the briefing, the take-over, the frame note, the bet and the replay's measure all live
 * in components.css, because two pages spend each of them (S5). What is left here is the override
 * band alone.
 *
 * THE .override-* BAND LIVES HERE RATHER THAN A LAYER UP, ON PURPOSE. S5 promotes a pattern used on
 * two or more pages. One page mounts the override today, so the honest reading of that rule is that
 * it is page CSS until a second surface mounts it, and promoting it early would claim a producer
 * that does not exist. The system checker's S5 warning on this band is expected and this comment is
 * the answer to it.
 *
 * 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.
 *
 * NO CONTRACT-SLOT REBINDING IN THIS FILE, and it is worth stating rather than assuming. DESIGN.md's
 * "How A1 is counted" excludes page-level rebinding from gate group 8 by name (d-009): a rule like
 * `.override { --color-fg: var(--color-border); }` is measured by nobody, the group keeps reporting
 * the pack's ratio, and the page renders something else. This is the first page CSS written for a
 * component since that gap was published, so it is the first place it could bite. Every slot below is
 * bound at the point of use, and axe on the served page is what stands behind these colours.
 */

/* .page-bet and .replay's 78ch measure moved to components.css on #8, under S5. Both were declared
   byte-identically here and in handover.css, which is the two-page threshold S5 names, and the
   .override-* carve-out above is only honest if the rule it declines is applied where it does fit. */

/* ---- The teaching override (page organism) ---- */
/* It has to read as the CONSEQUENCE of the briefing above it rather than as a third card competing
 * with it. The briefing takes the page ground; this takes the raised surface and a full border, so
 * the eye reads it as a panel that arrived later rather than as another column of the same card.
 *
 * The captured row is the one thing here the build did not write, so its provenance line is set in
 * the body face rather than the citation mono, because "your words" is not a citation. */

.override {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.override-title { margin-bottom: var(--spacing-lg); }

/* A4, and the same rule .composer-input:focus-visible takes, for the same reason. The page moves
   focus here after a send so the panel is not announced into silence, which means a SIGHTED keyboard
   reader has focus land on a heading they did not tab to: the ring is how they see where they went,
   and it is the one thing that must not be quietly removed. No `outline: none`, here or anywhere. */
.override-title:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.override-fields {
  margin: 0;
  display: grid;
  gap: var(--spacing-lg);
}

.override-field {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--spacing-md);
  align-items: baseline;
}
.override-field dt {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.override-field dd { margin: 0; }

/* overflow-wrap IS LOAD-BEARING, not defensive. A grid item's default min-width is auto, so the 1fr
   column cannot shrink below the min-content width of its longest unbreakable run. The visitor types
   this row, so that run is whatever they paste: a 78-character support URL measured 361px min-content
   at 360px, which pushed the whole panel to 579px inside a 312px container and put 243px of every row
   past the viewport, clipped and unreachable because components.css:72 sets overflow-x: clip. Measured
   in the browser, not computed. .replay-text has the identical gap, pre-existing from #6 and left
   alone under the scope rule. */
.override-value {
  line-height: 1.55;
  color: var(--color-fg);
  overflow-wrap: anywhere;
}

/* The citation register, matching .briefing-provenance and .replay-field-source, so a cited row on
   this card reads the same as a cited row on the two above it. */
.override-provenance {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  margin-top: var(--spacing-xs);
}
/* A designed row is telling the truth about itself, which is the point of the card, so it is not set
   dimmer than a citation. Same treatment briefing.mjs's designed marker takes. */
.override-provenance-designed { font-family: var(--font-body); }

/* The visitor's own row. The body face and the label under it are what mark it as theirs, in words
   rather than colour (SC 1.4.1). The .override-field-yours class stays in the markup because gate
   group 16 finds the row by it; it carries no styling of its own. */
.override-provenance-yours {
  font-family: var(--font-body);
  color: var(--color-fg);
}

/* THE SMALL-VIEWPORT COLLAPSE, at the breakpoint .briefing-field and .replay-field already use, so
   the three label/value bands on this page collapse together rather than at three widths. Without it
   the 9.5rem label track stays fixed at 152px and the value column measured 110px on a standard row
   and 91px on the visitor's row, which set a 30-word value in 14 lines. This band shipped as the only
   one in the build with no collapse, because it mounts hidden and no load-state scan at 360 could
   reach it (d-029 records that gap). Driven to a real send in the browser at 360 and measured. */
@media (max-width: 700px) {
  .override-field { grid-template-columns: 1fr; gap: var(--spacing-xs); }
}