/* Size adaptations. Loaded last: these rules override the files above. Below 720 x 480 px the page stacks and scrolls. */

@media (max-width:719px),(max-height:479px){
  body{overflow:auto}
  #app{height:auto;display:block}
  main>.wrap,.view{height:auto}
  .sum,.focus{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .macro{min-height:400px}
  .trow{display:block}.tgrp{margin-bottom:14px}
  .tg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chipb{min-height:64px}
  .detail{min-height:560px}
  .detail .chart{min-height:300px}
  .detail .chart[data-kind="night"]{min-height:460px}
  .nights{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .strip{flex-wrap:wrap}
  .pfoot .ro{flex-direction:column;gap:3px}.pfoot .ro .rt{margin-left:0}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc{min-height:210px}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .grid{grid-template-columns:1fr}
  .top{gap:14px}
  .crumb{display:none}
  .crumb+.sp{margin-left:auto!important}
  .thm button span{display:none}
  .stats{gap:20px}
  .acts{margin-left:0}
}
@media (max-width:1040px){.stat.opt{display:none}.focus{grid-template-columns:240px minmax(0,1fr)}}
@media (max-height:720px){
  .band{padding:8px 0 10px}.band h1{font-size:24px}.stat b{font-size:25px}.stat b.dt{font-size:18px}.stat span{margin-top:4px}
  .cr{min-height:40px;padding-block:5px}main>.wrap{padding-block:10px}.pfoot .ro{padding:6px 0 7px}
  .ri{min-height:17px}.ri .v{font-size:16px}.rail .dh{margin:5px 16px 2px}.kv{min-height:16px}.kv b{font-size:15px}
}
@media (min-height:480px) and (max-height:640px){.macro .nt,.detail .nights,.cellnote{display:none}}
@media (prefers-reduced-motion:reduce){.pc{transition:none}}