/* lb_counts_html — the "To Be Labelled Counts" card's own rules.
 *
 * Every rule is scoped :where(.lb-counts), the private class this form's root
 * carries beside the shared .lb-section. :where() adds no specificity. There is
 * NO root rule: the card look comes from the .lb-section-* rules in the
 * section's shared labelling_performance.css.
 *
 * No order ties. Every selector here is private (.lb-counts-*).
 *
 * The one thing hidden until JavaScript runs is the error div.
 *
 * The @media copy keeps the same selector weight as its base rule, so their
 * order in this file decides which wins.
 */

:where(.lb-counts) .lb-counts-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0;
}

:where(.lb-counts) .lb-counts-stat {
  text-align: center;
}

:where(.lb-counts) .lb-counts-value {
  font-family: var(--px-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--px-text-primary);
  line-height: 1.2;
}

:where(.lb-counts) .lb-counts-value.accent {
  color: var(--accent);
}

:where(.lb-counts) .lb-counts-label {
  font-size: 0.7rem;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

:where(.lb-counts) .lb-counts-error {
  color: var(--lb-accent-amber);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

/* The module writes this element's inline display on every update, which
   beats this rule whichever way the cascade falls. */
:where(.lb-counts) .lb-counts-error {
  display: none;
}

@media (max-width: 480px) {
  :where(.lb-counts) .lb-counts-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
  :where(.lb-counts) .lb-counts-value {
    font-size: 1.5rem;
  }
}