/**
 * Section: Statistics card
 *
 * Ported from _mockups/about.html `.card.ab-stats` and _mockups/our-team.html
 * `.card.tm-stats`. The two are identical apart from a `margin-top` that
 * belonged to each page's own stacking (`--s-6` on About, `--s-2` on Our Team)
 * and has no meaning here, where the section owns its own band and `.section`
 * owns the space around it. Dropped rather than picked.
 *
 * WHAT IS DELIBERATELY NOT HERE, because components.css already owns it:
 *
 *   .card          the paper ground, hairline, radius and resting shadow.
 *   .stats         the auto-fit row, `minmax(170px, 1fr)`, gap `--s-4`.
 *   .stat          the centring.
 *   .stat .n       the display-face numeral at --text-3xl in --forest, and its
 *                  `em` in --gold-deep, which is the gold treatment the field
 *                  instruction promises.
 *   .stat .l       the small label under it.
 *   .ph-badge      the "Client to supply" badge in the source slot.
 *
 * `.stat .src` is the only part of the component with a single consumer, so it
 * is the only part that lives here. That split follows the mechanical rule in
 * inventory §0 rather than being tidy: a section stylesheet is not loaded on a
 * page that does not contain that section, and `.stats` is reached by nothing
 * else in the build.
 *
 * ---------------------------------------------------------------------------
 * CONTRAST, MEASURED, NOT ESTIMATED
 *
 * The band is mist and the card is paper, so every value is taken on --paper
 * #ffffff:
 *
 *   --forest      #0e4038   11.61:1   the numeral
 *   --gold-deep   #7e622e    5.72:1   the numeral's `em`
 *   --ink-soft    #45524d    8.18:1   the label
 *   --ink-faint   #5f6b66    5.55:1   the source line, below at --text-xs
 *
 * All four clear WCAG AA for normal text, which is the bar --text-xs has to
 * meet, being under 18.66px. Nothing on this section sits on a dark ground, so
 * hard rule 7 has no surface here.
 * ------------------------------------------------------------------------- */

/* Both mock-ups agree on the card's padding to the character. */
.stats-card .stats-card-panel {
  padding: var(--s-5) var(--s-4);
}

/* THE ONE PLACE THIS FILE OVERRIDES A SHARED RULE, and it is a defect fix
   rather than a preference.

   `components.css` sets `.stats` to `repeat(auto-fit, minmax(170px, 1fr))`. A
   170px floor is too small for a numeral set at --text-3xl, and it only shows
   above three figures, which is why neither mock-up caught it: both use three.
   Measured on "≈340,000", which is the mock-ups' own widest value:

     1440px  numeral 240px wide, track 185px  ->  55px spilling into the next
     1024px  numeral 221px wide, track 200px  ->  21px spilling
      768px  numeral fits

   The page's scroll width is unaffected, so a viewport sweep cannot see it: the
   numerals collide with each other inside the card. Only a screenshot shows it.

   The floor is therefore raised to A THIRD OF THE ROW, keeping 170px as the
   lower bound so narrow screens behave exactly as they do now. That is not a
   magic number: three across IS the design, in both mock-ups and in the field
   instruction, so the rule says the same thing the design does and caps the
   count at three without ever forcing three onto a screen too narrow to hold
   them.

   A fixed pixel floor was tried first and rejected. 240px fixes 1440 and 1024
   but drops the three-figure design from three columns to two at 768, because
   --text-3xl is fluid and the numeral is 190px wide there rather than 240px.
   Expressing the floor against --text-3xl instead was closer but needed a
   measured multiplier with about 1px of headroom at 768, which is a rule that
   breaks the next time anyone touches the type scale.

   Verified at 1440 / 1024 / 860 / 768 / 620 / 375 / 320, with three figures and
   with six: the three-figure design is unchanged at every one of them, and six
   figures now wrap to a second row instead of colliding.

   `.stats` has exactly one consumer, this section, so the honest fix is to
   raise the floor in components.css. That file is not this agent's, so the
   override is scoped at two classes, which beats `.stats` on specificity rather
   than on load order, and the change is reported at source. */
.stats-card .stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(170px, (100% - 2 * var(--s-4)) / 3)), 1fr));
}

/* Last resort, for a value longer than any the design anticipates. Breaking a
   numeral across two lines is ugly; running it through the figure beside it is
   worse, and unlike this it is silent. */
.stats-card .stat .n {
  overflow-wrap: break-word;
}

/* `.n` and `.src` are spans that have to be blocks, and both mock-ups declare
   exactly these two for exactly that reason.

   `.l` is NOT in this list, and that is deliberate rather than an oversight.
   It needs no rule: `.n` above it is a block, so `.l` already forms its own
   line as an anonymous block box. Adding `display: block` to it would activate
   `components.css`'s `.stat .l { margin-top: .2em }`, which is inert on an
   inline box because vertical margins do not apply to one. Measured, that is
   2.96px of gap the signed-off design does not have. */
.stats-card .stat .n,
.stats-card .stat .src {
  display: block;
}

/* The source line, and the reason the section exists. Quieter than the label so
   the figure still leads, and never so quiet that it reads as decoration: this
   is what turns a number into a claim somebody can check. When the client has
   not supplied one it holds the `.ph-badge`, which styles itself. */
.stats-card .stat .src {
  margin-top: .6em;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}