/* Raise the CMS type scale across static markup and JavaScript-rendered views. */
body { font-size: 17px; }
header .app-header-inner { max-width: 1360px; }
[class~="text-[9px]"] { font-size: 12px !important; line-height: 1.4 !important; }
[class~="text-[10px]"] { font-size: 13px !important; line-height: 1.4 !important; }
[class~="text-[11px]"] { font-size: 14px !important; line-height: 1.4 !important; }
[class~="text-xs"] { font-size: 15px !important; line-height: 1.45 !important; }
[class~="text-sm"] { font-size: 16px !important; line-height: 1.45 !important; }
[class~="text-base"] { font-size: 18px !important; line-height: 1.4 !important; }
[class~="text-lg"] { font-size: 21px !important; line-height: 1.3 !important; }
[class~="text-xl"] { font-size: 24px !important; line-height: 1.25 !important; }
[class~="text-2xl"] { font-size: 30px !important; line-height: 1.2 !important; }
[class~="text-3xl"] { font-size: 36px !important; line-height: 1.15 !important; }

.dash-center-value,
.score-gauge-value { font-size: 26px !important; }
#dash-pie svg text:not(.dash-center-value),
#dash-tier svg text:not(.dash-center-value),
.score-gauge svg text:not(.score-gauge-value) { font-size: 11px !important; }

/* Map labels are outside the Tailwind type scale and need their own sizing. */
#canada-map .tac-site-label { max-width: 330px; padding: 6px 9px; line-height: 1.3; }
#canada-map .tac-site-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
#canada-map .tac-site-name { min-width: 0; font-size: 16px; }
#canada-map .tac-site-code {
  flex: 0 0 auto;
  border: 1px solid rgba(134, 239, 172, .5);
  border-radius: 4px;
  padding: 1px 4px;
  color: #bbf7d0;
  font: 700 14px/1.2 ui-monospace, monospace;
  letter-spacing: .04em;
}
#canada-map .tac-site-addr { margin-top: 2px; font-size: 14px; }
#canada-map[data-zoom="8"] .tac-site-name { font-size: 17px; }
#canada-map[data-zoom="9"] .tac-site-name,
#canada-map[data-zoom="10"] .tac-site-name,
#canada-map[data-zoom="11"] .tac-site-name { font-size: 18px; }
#canada-map[data-zoom="9"] .tac-site-addr,
#canada-map[data-zoom="10"] .tac-site-addr,
#canada-map[data-zoom="11"] .tac-site-addr { font-size: 15px; }
.cod-prov-label { font-size: 13px; }
.cod-city-label { font-size: 13px; }
.cod-city-label.rank-2 { font-size: 12px; }
.cod-city-label.rank-3 { font-size: 11px; }
#canada-map[data-zoom="5"] .cod-prov-label { font-size: 15px; }
#canada-map[data-zoom="5"] .cod-city-label { font-size: 14px; }
#canada-map[data-zoom="5"] .cod-city-label.rank-2 { font-size: 13px; }
#canada-map[data-zoom="6"] .cod-prov-label { font-size: 17px; }
#canada-map[data-zoom="6"] .cod-city-label { font-size: 16px; }
#canada-map[data-zoom="6"] .cod-city-label.rank-2 { font-size: 15px; }
#canada-map[data-zoom="6"] .cod-city-label.rank-3 { font-size: 14px; }
#canada-map[data-zoom="7"] .cod-prov-label { font-size: 19px; }
#canada-map[data-zoom="7"] .cod-city-label,
#canada-map[data-zoom="7"] .cod-city-label.rank-2 { font-size: 18px; }
#canada-map[data-zoom="7"] .cod-city-label.rank-3 { font-size: 15px; }
#canada-map[data-zoom="8"] .cod-prov-label,
#canada-map[data-zoom="9"] .cod-prov-label,
#canada-map[data-zoom="10"] .cod-prov-label,
#canada-map[data-zoom="11"] .cod-prov-label { font-size: 22px; }
#canada-map[data-zoom="8"] .cod-city-label,
#canada-map[data-zoom="9"] .cod-city-label,
#canada-map[data-zoom="10"] .cod-city-label,
#canada-map[data-zoom="11"] .cod-city-label,
#canada-map[data-zoom="8"] .cod-city-label.rank-2,
#canada-map[data-zoom="9"] .cod-city-label.rank-2,
#canada-map[data-zoom="10"] .cod-city-label.rank-2,
#canada-map[data-zoom="11"] .cod-city-label.rank-2 { font-size: 18px; }
#canada-map[data-zoom="8"] .cod-city-label.rank-3,
#canada-map[data-zoom="9"] .cod-city-label.rank-3,
#canada-map[data-zoom="10"] .cod-city-label.rank-3,
#canada-map[data-zoom="11"] .cod-city-label.rank-3 { font-size: 16px; }

/* Header buttons have their own compact media-query sizes in the original stylesheet. */
@media (max-width: 1023px) {
  #header-actions button { font-size: 14px !important; }
}
@media (max-width: 1350px) {
  header .app-header-inner > div:first-child p { display: none !important; }
  header .app-header-inner > div:first-child span { display: inline !important; }
}
@media (min-width: 640px) and (max-width: 1350px) {
  #header-actions { max-width: none; gap: 6px; }
  #header-actions > button { width: 40px; min-width: 40px; justify-content: center; padding-left: 0; padding-right: 0; }
  #header-actions > button span:not(#theme-icon) { display: none !important; }
}