/* MCPL v7: text readability (>= 12 px) + cinematic login sequence on phones.
   Presentation only. Wording, order, hierarchy and behaviour unchanged. */

/* ---------- 1. Small text -> 12 px ---------- */
th{font-size:12px!important;letter-spacing:.3px}
td small{font-size:12px!important}
/* only the original small sizes are raised (desktop KPI labels stay 14 px) */
@media(max-width:390px){#dashboardPage .kpis .kpi .kpi-label{font-size:12px!important}}
@media(max-width:700px){#dashboardPage #kpis .kpi .kpi-percent{font-size:12px!important}}
.head small{font-size:12px}
.member-cohort-breakdown,.member-cohort-breakdown span{font-size:12px!important}
.member-cohort-breakdown b{font-size:12px!important}
.chart-sub{font-size:12px!important}
.side .brand small{font-size:12px!important;letter-spacing:.6px}
@media(max-width:800px){.who,.who small,#who small{font-size:12px!important}}
#who small{font-size:max(12px,1em)}
#overdueAlert small{font-size:12px!important}
#assignedTrainerBox small{font-size:12px!important}
#drawer .follow-step{font-size:12px!important}
#loginHelp{font-size:12px!important}
.mobile button{font-size:12px!important}

/* ---------- 2. Login: cinematic sequence on phones / small tablets ----------
   The four feature rows and the footer line (same order, same shared 2 s cycle)
   are shown in a compact block between the title lines and the login card:
   2 x 2 grid + footer, never wider than the title column (no horizontal overflow),
   never on top of the card. */
@media(max-width:800px){
 #login .mcplh-stage{
  /* --fu: one artwork px for the feature grid (two 252 px rows side by side + 10 px gap)
     --ftu: one artwork px for the 422 px footer line */
  --fu:calc((367 * var(--u) - 10px) / 504);
  --ftu:min(calc(var(--u) * .86), calc(367 * var(--u) / 422));
  --fy:calc(158 * var(--u) + 6px);
  height:calc(158 * var(--u) + 6px + 192 * var(--fu) + 12px + 48 * var(--ftu))!important;
 }
 #login .mcplh-stage .mcplh-feature{display:block!important}
 #login .mcplh-stage>.mcplh-feature{width:calc(252 * var(--fu));height:calc(96 * var(--fu))}
 #login .mcplh-stage>.mcplh-feature:nth-child(4){left:0;top:var(--fy)}
 #login .mcplh-stage>.mcplh-feature:nth-child(5){left:calc(252 * var(--fu) + 10px);top:var(--fy)}
 #login .mcplh-stage>.mcplh-feature:nth-child(6){left:0;top:calc(var(--fy) + 96 * var(--fu) + 6px)}
 #login .mcplh-stage>.mcplh-feature:nth-child(7){left:calc(252 * var(--fu) + 10px);top:calc(var(--fy) + 96 * var(--fu) + 6px)}
 #login .mcplh-stage>.mcplh-feature:nth-child(8){
  width:calc(422 * var(--ftu));height:calc(48 * var(--ftu));
  left:calc((367 * var(--u) - 422 * var(--ftu)) / 2);top:calc(var(--fy) + 192 * var(--fu) + 12px);
 }
}