/* Telefono (e telefono in orizzontale): 3D a schermo pieno, strumenti in una barra bassa, pannelli che salgono dal basso.
   Tutto dentro la stessa media query: sopra 820 px (e fuori dal caso "orizzontale basso") non cambia nulla. */
#mbar,#mtot,#msheet,.mgrab,.mclose{display:none}
@media (max-width:820px), (max-height:520px) and (orientation:landscape){
  :root{--hh:48px;--mb:62px;--mt:40px}
  html,body{height:100%;overflow:hidden}
  body{display:block;position:fixed;inset:0}
  /* intestazione: una riga, le schede scorrono */
  header.top{height:var(--hh);gap:8px;padding:0 8px;position:fixed;left:0;right:0;top:0;z-index:60}
  header.top .brand,header.top .optmenu{display:none}
  header.top .tabs{margin-left:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  header.top .tabs::-webkit-scrollbar{display:none}
  header.top .tabs button{white-space:nowrap;min-height:38px;padding:0 13px;font-size:13px}
  header.top a.back{display:inline-flex;align-items:center;min-height:38px;padding:0 4px;flex:none}
    /* 3D a schermo pieno tra intestazione e barra bassa */
  main{position:fixed;left:0;right:0;top:var(--hh);bottom:calc(var(--mb) + var(--mt));display:block}
  .stage,.viewer{position:absolute;inset:0;width:auto;height:auto;display:block}
  .viewer>.view{position:absolute;inset:0}
  #dockL,.split{display:none!important}
  /* guida a 4 passi: chiusa di default (si apre da "Vista") */
  #ov3d .steps{display:none}
  body.guida #ov3d .steps{display:flex;flex-wrap:nowrap;overflow-x:auto}
  #ov3d{top:6px;left:6px;right:6px}
  #ov3d .pillbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  #ov3d .pillbar::-webkit-scrollbar{display:none}
  #ov3d .pillbar button{flex:none;min-height:40px;padding:0 14px;white-space:nowrap}
  #ov3d .hint3{max-width:none}
  #rnav{max-width:calc(100% - 20px)}
  #rnav .rn{min-width:0}
  /* pannello a destra = foglio dal basso a tre altezze */
  #panel{position:fixed;left:0;right:0;bottom:calc(var(--mb) + var(--mt));width:auto!important;height:var(--ph,0);max-height:calc(100dvh - var(--hh) - var(--mb) - var(--mt));border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;z-index:40;transition:height .28s cubic-bezier(.2,.8,.2,1);overflow:hidden;box-shadow:0 -12px 40px rgba(0,0,0,.45)}
  #panel.drag{transition:none}
  body.ps0 #panel{display:none}
  body.ps1{--ph:150px}
  body.ps2{--ph:52dvh}
  body.ps3{--ph:82dvh}
  #panel .dockin{padding:6px 12px 22px;overflow:auto;flex:1}
  #totfoot{display:none}
  .mgrab{display:grid;place-items:center;flex:none;height:34px;touch-action:none;cursor:grab}
  .mgrab i{width:44px;height:5px;border-radius:9px;background:var(--c-line2)}
  /* computo e altri moduli in basso = foglio a tutta larghezza */
  #dockB{position:fixed;left:0;right:0;bottom:calc(var(--mb) + var(--mt));height:78dvh!important;max-height:calc(100dvh - var(--hh) - var(--mb) - var(--mt));display:none;border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;z-index:41;box-shadow:0 -12px 40px rgba(0,0,0,.45)}
  body.cb #dockB{display:flex}
  #dockB .dockin{flex-direction:column;padding:46px 10px 20px}
  #dockB .mod{flex:none!important;min-width:0!important;width:100%;max-height:none}
  .mclose{display:grid;place-items:center;position:absolute;right:8px;top:2px;width:44px;height:44px;border:0;background:none;color:var(--c-tx2);font-size:20px;z-index:5;touch-action:manipulation}
  /* tabelle del computo: scorrono dentro il loro riquadro, mai la pagina */
  table.ct,table.mis{min-width:620px}
  .mbody{overflow-x:auto}
  /* barra del totale e barra degli strumenti */
  #mtot{display:flex;position:fixed;left:0;right:0;bottom:var(--mb);height:var(--mt);z-index:55;align-items:center;gap:10px;padding:0 14px;background:rgba(14,16,18,.97);border-top:1px solid var(--line);font-size:13px}
  #mtot b{font:700 20px var(--f-display);color:#fff;font-variant-numeric:tabular-nums}
  #mtot span{color:var(--mute)}
  #mtot .r{margin-left:auto;color:var(--c-tx2);font-weight:600;min-height:44px;display:flex;align-items:center;border:0;background:none}
  #mbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--mb);z-index:56;background:var(--c-s1);border-top:1px solid var(--line2);padding-bottom:env(safe-area-inset-bottom,0)}
  #mbar button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--c-mu);font:700 11px var(--f-sans);min-width:48px;min-height:48px;position:relative}
  #mbar button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #mbar button.on{color:var(--acc)}
  #mbar button.on:before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--ind)}
  #mbar button.pdf .b{background:var(--acc);color:var(--on-acc);border-radius:99px;padding:6px 14px;display:flex;align-items:center;gap:6px;font-size:12px}
  #mbar button.pdf svg{width:18px;height:18px}
  /* foglio "Vista" */
  #msheet{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:none}
  body.vs #msheet{display:block}
  #msheet>div{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;padding:6px 14px calc(var(--mb) + 22px);max-height:84dvh;overflow:auto}
  #msheet h3{font-size:19px;margin:4px 0 10px}
  #msheet .grp{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:800;margin:12px 2px 6px}
  #msheet .row{display:flex;flex-wrap:wrap;gap:8px}
  #msheet .row button{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line2);background:var(--panel2);font:700 14px var(--f-sans);color:var(--c-tx2)}
  #msheet .row button.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
  #msheet .sw{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;border:1px solid var(--line);background:var(--panel2);border-radius:14px;padding:0 14px;font:600 14px var(--f-sans);color:var(--c-tx2);margin-bottom:8px;text-align:left}
  #msheet .sw b{margin-left:auto;color:var(--acc);font-weight:600}
  .hint3{font-size:12.5px}
}
@media (max-height:520px) and (orientation:landscape){
  :root{--hh:42px;--mb:52px;--mt:0px}
  #mtot{display:none}
  #mbar button{flex-direction:row;gap:6px;font-size:12px}
  #mbar button svg{width:22px;height:22px}
  body.ps1{--ph:120px}
  body.ps2{--ph:70dvh}
  body.ps3{--ph:88dvh}
  #panel{left:auto;width:340px!important;right:0;border-radius:16px 0 0 0}
}