/* Web browser chrome can leave a very short landscape visual viewport.
   Keep text metrics stable without disabling pinch zoom or user scaling. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Status strings and numeric reels each own their clipping box. */
html[data-theme] body #islandToggle .island-copy { overflow:hidden; }
html[data-theme] body #islandToggle .island-copy :is(b,small) {
 display:block; min-width:0; max-width:100%; overflow:hidden;
 white-space:nowrap; text-overflow:ellipsis;
}
html[data-theme] body .eval-heading { min-width:0; }
html[data-theme] body #evalHeading { overflow:hidden; text-overflow:ellipsis; }
html[data-theme] body :is(.stats,#evalScore) .flap-number {
 -webkit-text-size-adjust:100%; text-size-adjust:100%;
 isolation:isolate; overflow:hidden;
}
html[data-theme] body :is(.stats,#evalScore) .flap-visual { overflow:hidden; }

@media (orientation:landscape) {
 /* Cards retain their content height; the whole side column scrolls instead
    of silently hiding the second/third candidate inside a squeezed card. */
 html[data-window=compact] body #sidebarPanels {
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin;
 }
 html[data-window=compact] body #sidebarPanels>.panel { flex-shrink:0; }
 html[data-window=compact] body #sidebarPanels #analysisPanel:not([hidden]) {
  flex:0 0 auto; height:auto; min-height:min-content;
 }
 html[data-window=compact] body #sidebarPanels #analysisLines {
  flex:none; height:auto; min-height:96px; overflow:visible;
 }
 html[data-window=compact] body #sidebarPanels #analysisLines .candidate {
  flex-shrink:0;
 }
 html[data-window=compact] body #sidebarPanels .stats>div {
  container-type:inline-size;
 }
 html[data-window=compact] body #sidebarPanels .search-panel .stats b {
  /* Six reserved slots must fit their actual column, including the suffix. */
  font-size:min(21px,24cqw);
 }
}
@media (orientation:landscape) and (max-height:600px) {
 /* A narrow island cannot reliably fit a Chinese label plus score side by
    side. Stack them above the meter inside the existing 48px button. */
 html[data-theme] body #islandEvaluation { gap:2px; }
 html[data-theme] body .eval-heading {
  display:flex; flex-direction:column; align-items:center; gap:0;
 }
 html[data-theme] body #evalHeading {
  flex:none; width:100%; text-align:center; font-size:9px; line-height:1.2;
 }
 html[data-theme] body #evalScore {
  flex:none; max-width:100%; line-height:1.3; font-size:12px;
 }
 html[data-theme] body #evalMeter { height:4px; }
}