/* Display controls shared only by the live and daily observation maps. */
.current-readability-test .current-map-options,
.national-observation-page .national-map-options { flex-wrap:wrap; gap:8px; align-items:center; }
.map-units-toggle {
  display:inline-flex; align-items:center; justify-content:center; min-height:37px;
  padding:9px 12px; border:1px solid #ffad72; border-radius:7px;
  color:#24160e; background:#f47b35; font-family:inherit; font-size:13px;
  font-weight:700; line-height:1.3; cursor:pointer;
}
.map-units-toggle:hover { background:#ff944f; }
.map-units-toggle[aria-pressed="false"] { background:#10272d; color:#ffad72; }
.map-units-toggle:focus-visible { outline:2px solid #ffab70; outline-offset:3px; }
.current-readability-test .current-observation-value-icon span {
  color:color-mix(in srgb,var(--value-color) 65%,#102a36);
  border-bottom-width:4px;
}
.current-readability-test .national-observation-legend { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; max-width:280px; }
.current-readability-test .national-observation-legend > p,
.current-readability-test .national-observation-legend > small { grid-column:1/-1; }
.current-readability-test .national-observation-legend > div { grid-template-columns:14px 1fr; font-size:11px; }
.current-readability-test .national-observation-legend i { width:14px; height:14px; box-shadow:none; }
#nationalMapStage.is-fullscreen .national-map-options { position:static; margin:0 0 8px; }
#currentMapStage.is-fullscreen .current-map-options { display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100% - 24px); }
@media (max-width:700px) {
  .map-units-toggle { font-size:12px; padding:8px; }
  #currentMapStage.is-fullscreen .current-map-options label { padding:8px; font-size:12px; }
  #currentMapStage.is-fullscreen .current-observation-map-head { top:150px; }
  .current-readability-test .national-observation-legend { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; }
}