/* ============================================================================
   Shared UI atoms — things that appear on more than one page and must look
   identical on all of them.

   This file exists because they did NOT. The homepage checklist and the
   /pickem pick card both show "you have done this", and each had its own
   square drawn from its own numbers. Two definitions of one mark is how they
   drift, and a reader who sees both in the same session notices.

   Keep this small. It is not a component library — it is the handful of marks
   that are genuinely shared. Page-specific styling stays in the page.
   ========================================================================= */

/* The completion square.
   26px, and square rather than round: a checkbox is the thing being echoed.
   Empty is an outline in --brick, the structural accent; done is filled --red
   with a white check. --red is reserved (BRAND-HANDOFF 1.1.1) for NC State and
   our own model's numbers, and is used here as the single exception the
   homepage already established — a completed action, nowhere else. */
.ppcheck{
  width:26px; height:26px; flex:none; box-sizing:border-box;
  border:1.5px solid var(--brick-lt); border-radius:3px;
  background:transparent;
  display:inline-grid; place-items:center;
  font-family:var(--mono); font-size:13px; font-weight:600; line-height:1;
  color:var(--brick-lt);
}
.ppcheck.is-done{
  background:var(--red); border-color:var(--red); color:#fff;
}
/* The numeral variant, for a step that is not yet a checkbox. */
.ppcheck.is-step{font-size:13px}