/* Phone layout: keep the map available and contain long explanations. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:600px){
  html,body{height:100%;height:100dvh;overscroll-behavior:none}
  #map,:fullscreen #map{width:100%;height:100%;height:100dvh;touch-action:none}
  #atlas-reader{display:block;left:8px;right:8px;bottom:22px;max-height:38vh;max-height:38dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;pointer-events:auto;padding:32px 8px 8px;touch-action:pan-y}
  #atlas-reader .reader-description p{font-size:17px;line-height:1.4;margin:8px 0}
  #atlas-reader .reader-key>strong{font-size:19px}
  #atlas-reader .reader-key{width:auto;min-width:0}
  #reader-scale{max-width:100%;font-size:13px}
  #atlas-reader #hide-description{top:0;right:0;width:44px;height:44px;line-height:44px;font-size:26px}
  #atlas-reader #reader-details{min-height:44px;font-size:15px;white-space:normal}
  #layers-toggle,:fullscreen #layers-toggle{left:8px;top:8px;min-height:48px;min-width:112px}
  .layer-buttons,:fullscreen .layer-buttons{left:8px;top:64px;width:min(280px,calc(100vw - 24px));touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .layer-buttons button{min-height:44px;font-size:17px}
  #fullscreen,:fullscreen #fullscreen{display:none}
  .leaflet-control-zoom{margin-top:8px!important;margin-right:8px!important}
  .leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important}
  #show-description{left:12px;bottom:24px;min-height:44px}
  #energy-type-control{flex-wrap:wrap}
  #atlas-reader #energy-type-control button{min-height:44px}
  dialog{width:calc(100vw - 20px);max-height:85dvh;padding:16px}
}

/* Persistent transparent layer list, with a separate area for explanations. */
#layers-toggle,:fullscreen #layers-toggle{display:none!important}
.layer-buttons,:fullscreen .layer-buttons{top:16px;left:12px;width:238px;max-height:calc(100dvh - 42px);padding-right:8px}
#atlas-reader{left:260px;padding-left:12px}
#show-description{left:272px}
.interval-scale{font-size:14px;line-height:1.35;text-align:left}
.scale-unit{font-weight:650;margin-bottom:5px}
.scale-interval{display:flex;gap:7px;align-items:center;margin:3px 0}
.scale-chip{display:inline-block;flex:0 0 26px;width:26px;height:14px;border:1px solid #61717a;vertical-align:middle}
.interval-scale small{display:block;font-size:12px;line-height:1.35;margin-top:6px;max-width:290px}
.scale-special{font-size:13px;line-height:1.4;margin-top:6px}
#reader-scale .interval-scale{color:#000}
@media(max-width:600px){
 .layer-buttons,:fullscreen .layer-buttons{top:8px;left:6px;width:min(148px,40vw);max-width:40vw;max-height:calc(100dvh - 42px)}
 .layer-buttons button{font-size:14px;line-height:1.25;padding:7px 3px;min-height:40px}
 #atlas-reader{left:calc(min(148px,40vw) + 12px);right:4px;padding-left:4px;max-height:42dvh}
 #atlas-reader .reader-description p{font-size:16px}
 #reader-details{font-size:13px!important}
 #show-description{left:162px;font-size:14px;max-width:calc(100vw - 170px)}
 .interval-scale{font-size:12px}.interval-scale small{font-size:11px}
 #comparison-header #comparison-mode{font-size:14px}
 .comparison-row{grid-template-columns:1fr 25px 30px;padding:6px 0;gap:2px}
 .comparison-row>span,.comparison-opacity-label{font-size:12px}
}

.continuous-ramp{height:16px;width:100%;border:1px solid #61717a;margin:6px 0;background-repeat:no-repeat}

#railway-type-control[hidden]{display:none!important}#railway-type-control{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;pointer-events:auto}#atlas-reader #railway-type-control button{font-size:17px;padding:4px 0;color:#000;min-height:44px}#railway-type-control button[aria-pressed=true]{font-weight:800;text-decoration:underline;text-underline-offset:4px}