/* lb_prediction_html — the "Predicted Month End Count" card's own rules.
 *
 * Every rule is scoped :where(.lb-prediction), 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-prediction-*).
 *
 * Nothing in this form is hidden until JavaScript runs.
 *
 * The .locked and .na rules follow the base .lb-prediction-value rule, so the
 * compound class wins on specificity and order.
 */

:where(.lb-prediction) .lb-prediction-value {
  font-family: var(--px-mono);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--lb-accent-emerald);
  text-align: center;
  line-height: 1.2;
  padding: 1rem 0 0.5rem;
}

:where(.lb-prediction) .lb-prediction-value.locked {
  color: var(--px-text-muted);
  font-size: 1.5rem;
}

:where(.lb-prediction) .lb-prediction-value.na {
  color: var(--px-text-muted);
}

:where(.lb-prediction) .lb-prediction-subtitle {
  font-size: 0.75rem;
  color: var(--px-text-muted);
  text-align: center;
  padding-bottom: 0.5rem;
}