/* Recognitions — hand-authored additions.

   pages/recognitions.css is GENERATED from the design handoff by scripts/extract_page_css.py
   and must never be hand-edited; additions live here (CLAUDE.md house style).

   Everything below replaces an inline `style=` attribute in the mock. No colour literals —
   TIER 2 semantic tokens only. */

/* The eligibility / jury pair. The mock overrode `.two-col` inline with an auto-fit grid,
   which is a different layout from the `.two-col` in pages/partner.css — hence its own name
   rather than quietly redefining a class another page relies on. */
.rec-cols {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.rec-panel {
  padding: var(--sp-5);
}

.rec-panel h3 {
  margin: 0 0 var(--sp-2);
}

.rec-panel .deliverables {
  gap: 8px;
}

.rec-panel p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-text-secondary);
}

/* The nomination form is narrower than a full-bleed grid — long single-column reading. */
.rec-form {
  max-width: 820px;
}

/* Submit row: button and its SLA note sit on one line, wrapping on small screens. */
.rec-submit {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

/* A completed timeline step reads back rather than forward. */
.rec-step--done b {
  color: var(--c-text-muted);
}