/* Meter panels are fixed displays, not scroll containers. In particular the
   decorative Dark Bronze rim must never create a scrollbar or shift readings.
   Detail dialogs and the log retain their own independent scrolling. */
#radio .meter-bezel,
#radio .digital-meter,
#radio .bronze-meter,
#radio .b112,
#radio .bronze-news-meter,
#radio .radio-ticker-viewport,
body.compact-radio.compact-meter-open #radio .meter-section {
  overflow: hidden;
  overflow: clip;
}

/* The expanded compact meter must fit even with browser chrome visible. */
body.compact-radio.compact-meter-open #radio .bronze-meter {
  grid-template-rows: minmax(16px, 1fr) minmax(16px, 1fr) 29px 10px 7px;
  gap: 2px;
  padding: 2px 6px;
}
body.compact-radio.compact-meter-open #radio .bronze-signal {
  grid-template-rows: 10px minmax(4px, 1fr);
  gap: 1px;
}
body.compact-radio.compact-meter-open #radio .bronze-forecast,
body.compact-radio.compact-meter-open #radio .bronze-source { font-size: 7px; }

body.compact-radio:not(.compact-meter-open) #radio .horizontal-meter-face { padding: 1px 4px; gap: 1px; }
body.compact-radio:not(.compact-meter-open) #radio .line-meter-heading strong,
body.compact-radio:not(.compact-meter-open) #radio .line-meter-scale { font-size: 8px; }
body.compact-radio:not(.compact-meter-open) #radio .line-meter-row { gap: 0; }
body.compact-radio:not(.compact-meter-open) #radio .line-meter-track { height: 3px; }
body.compact-radio:not(.compact-meter-open) #radio .b112[data-micro="true"] {
  grid-template-rows: minmax(13px, 1fr) minmax(12px, 1fr);
  padding-block: 1px;
  row-gap: 1px;
}
body.compact-radio:not(.compact-meter-open) #radio .b112[data-micro="true"] .b112-alert > span:last-child { font-size: 11px; }

/* Bronze Nieuws has an extra heading in its enlarged compact view. */
body.compact-radio.compact-meter-open #radio[data-meter="bronze-news"] .meter-section {
  grid-template-rows: 28px minmax(0, 1fr) 12px;
  padding: 0 8px 4px;
}
body.compact-radio #radio[data-meter="bronze-news"] #compactMeterButton { bottom: 0; }
body.compact-radio #radio[data-meter="bronze-news"] .bronze-news-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(27px, 1fr) 10px 20px 18px;
  gap: 1px 5px;
  padding: 1px 3px;
  border-width: 1px;
}
body.compact-radio #radio[data-meter="bronze-news"] .local-info-top {
  grid-column: 1 / -1;
  height: 100%; min-height: 27px; padding: 0;
}
body.compact-radio #radio[data-meter="bronze-news"] .local-info-gauge {
  grid-row: 2; padding: 0; gap: 3px;
  grid-template-columns: 24px minmax(0, 1fr) 36px; font-size: 7px;
}
body.compact-radio #radio[data-meter="bronze-news"] .local-info-gauge:not(.local-info-mod) { grid-column: 1; }
body.compact-radio #radio[data-meter="bronze-news"] .local-info-mod { grid-column: 2; }
body.compact-radio #radio[data-meter="bronze-news"] .local-info-bars { height: 5px; }
body.compact-radio #radio[data-meter="bronze-news"] .local-info-actions {
  grid-column: 2; grid-row: 3; margin: 0; padding: 0; border: 0;
}
body.compact-radio #radio[data-meter="bronze-news"] .local-info-actions button { min-height: 0; padding: 0; gap: 0; }
body.compact-radio #radio[data-meter="bronze-news"] .local-info-actions button > span { font-size: 11px; }
body.compact-radio #radio[data-meter="bronze-news"] .local-info-actions button small,
body.compact-radio #radio[data-meter="bronze-news"] .local-info-location { display: none; }
body.compact-radio #radio[data-meter="bronze-news"] .local-radio-station {
  grid-column: 1; grid-row: 3; min-height: 0; margin: 0; padding: 0 2px; gap: 3px;
}
body.compact-radio #radio[data-meter="bronze-news"] .local-radio-station > img,
body.compact-radio #radio[data-meter="bronze-news"] #bronzeNewsStationFallback { width: 16px; height: 16px; flex-basis: 16px; }
body.compact-radio #radio[data-meter="bronze-news"] .local-radio-rds { font-size: 7px; }
body.compact-radio #radio[data-meter="bronze-news"] .radio-ticker { grid-column: 1 / -1; grid-row: 4; }

@media (orientation: landscape) and (min-width: 561px) and (max-width: 720px) and (max-height: 400px) and (pointer: coarse) {
  #radio[data-meter="bronze-news"] .bronze-news-meter { border-width: 2px; padding: 2px; gap: 0; }
  #radio[data-meter="bronze-news"] .local-info-location { display: none; }
  #radio[data-meter="bronze-news"] .local-info-actions { margin-top: 0; padding-top: 0; border-top: 0; }
  #radio[data-meter="bronze-news"] .local-info-actions button { min-height: 20px; padding: 0; gap: 0; }
  #radio[data-meter="bronze-news"] .local-info-actions button > span { font-size: 10px; }
  #radio[data-meter="bronze-news"] .local-info-actions button small { font-size: 6px; line-height: 1; }
}