/* Small-screen layout: one pane at a time. The Tools button switches between the page and the side panel. */
#btnTools{display:none}
@media screen and (max-width:900px){
  #app{display:flex;flex-direction:column;height:100vh;height:100dvh}
  .topbar{flex:none;overflow-x:auto;gap:6px;padding:0 10px;scrollbar-width:none}
  .topbar::-webkit-scrollbar{display:none}
  .topbar>*{flex:none}
  .topbar .grow{display:none}
  .brand b{display:none}
  .brand{margin-right:2px}
  #btnTools{display:inline-flex;align-items:center;gap:6px}
  .menu-pop{position:fixed;right:10px;top:60px}
  .left{display:none;width:auto;max-height:none;flex:1;min-height:0;border-right:0}
  .stage{flex:1;min-height:0;padding:12px 8px}
  #app.m-tools .left{display:flex}
  #app.m-tools .stage{display:none}
  .pane{padding:14px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .tools{right:auto;left:0;flex-wrap:wrap;max-width:94vw}
  .item-x{right:0}
  .wiz-bar{padding:0 10px;gap:8px}
  .wiz-bar .brand b,.wiz-bar #wizSkip{display:none}
  .steps{margin-left:0}
  .steps li{padding:5px 10px 5px 6px;font-size:13px}
  .wiz-form{padding:20px 14px 50px}
  .wiz-foot{padding:0 12px;height:auto;min-height:64px;flex-wrap:wrap;gap:8px}
  .prog{width:110px}
  .extra-row{grid-template-columns:1fr 34px}
  .extra-row .k{grid-column:1/-1;padding-top:0}
  .lang-row{grid-template-columns:1fr 1fr 34px}
  .gal-grid,.gx-sec .gal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 14px}
  .gx-head h1,.wiz-form h1{font-size:24px}
  .gx-main{padding:18px 12px 60px}
}
@media screen and (max-width:520px){
  .g2{grid-template-columns:1fr}
  .g-photo{grid-template-columns:1fr}
  .btn.lg{padding:10px 16px}
}