/* density.css - Tightened type scale aligned with hittine.org / csoacademymm.org.
   Loaded after tailwind.css (and admin.css) so utility + semantic class sizes
   get a final pass. Reductions roughly one Tailwind step down where the prior
   design felt oversized on mobile.

   Reference: hittine.org body settles around 14px, paragraph emphasis 16px,
   subheads 18px, section titles 22px, hero 26-30px. */

/* ── Tailwind utility scale (staff portal) ──────────────────────────────── */
.text-xl   { font-size: 18px !important; line-height: 1.35 !important; }
.text-lg   { font-size: 16px !important; line-height: 1.4  !important; }
.text-base { font-size: 14px !important; line-height: 1.5  !important; }
.text-sm   { font-size: 13px !important; line-height: 1.5  !important; }
.text-xs   { font-size: 12px !important; line-height: 1.45 !important; }

/* Arbitrary pixel utilities the staff pages embed inline */
.text-\[17px\] { font-size: 15px !important; }
.text-\[19px\] { font-size: 16px !important; }
.text-\[22px\] { font-size: 18px !important; }
.text-\[15px\] { font-size: 13px !important; }
.text-\[13px\] { font-size: 12px !important; }

/* Shared form-input class (staff card + admin modal) */
.form-input {
  font-size: 14px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* ── Admin dashboard semantic classes ──────────────────────────────────── */
.section-title { font-size: 18px !important; }
.section-sub   { font-size: 13px !important; }
.modal-title   { font-size: 18px !important; }
.kpi-value     { font-size: 22px; }
.kpi-label     { font-size: 12px !important; }
.form-label    { font-size: 13px !important; }
.btn-sm        { font-size: 12px !important; }
.btn-add,
.btn-modal-save,
.btn-modal-cancel { font-size: 13px !important; }
.td-empty,
.td-muted,
.td-rank { font-size: 13px !important; }

/* Tables - denser rows */
table thead th { font-size: 12px !important; }
table tbody td { font-size: 13px !important; }