/* TESS-CSP-DYNAMIC-FINAL TESS-Observatory CSS block 49 */
/* TESS-OBSERVATORY-MOBILE-FRIENDLY v1
   Mobile layout only: keep safety/button IDs and backend contracts unchanged. */
@media (max-width: 820px){
  html,body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-text-size-adjust:100%!important;
    touch-action:manipulation!important;
  }
  :root{--topbar-h:auto!important;--tess-viewer-left-clearance:0px!important;--tess-viewer-right-clearance:0px!important;}
  .observatory-shell{
    position:relative!important;
    display:block!important;
    min-height:100vh!important;
    height:auto!important;
    overflow:visible!important;
    padding-bottom:18px!important;
  }
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:100000!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    gap:7px!important;
    padding:8px 8px 10px!important;
  }
  .topbar>a,.topbar>a.topbar-user-manual-link,.topbar .status a,
  .topbar #mountModeAsiairButton.topbar-asiair-mode-button,
  .topbar #mountModeTessButton.topbar-tess-direct-mode-button{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:92px!important;
    max-width:calc(50vw - 14px)!important;
    height:auto!important;
    min-height:34px!important;
    padding:8px 9px!important;
    font-size:.62rem!important;
    line-height:1.12!important;
    white-space:normal!important;
    text-align:center!important;
    overflow:visible!important;
    text-overflow:clip!important;
    order:initial!important;
  }
  .topbar .status{
    order:20!important;
    display:flex!important;
    flex:1 1 100%!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    overflow:visible!important;
  }
  .topbar .status a{display:inline-flex!important;}
  .topbar-title{display:none!important;}
  #mountModeAsiairButton,#mountModeTessButton{display:inline-flex!important;}
  #observatoryViewer.viewer{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    padding:10px 8px 18px!important;
  }
  #observatoryViewer.viewer::after{display:none!important;}
  #observatoryViewer.viewer #tessObservatoryNoVncFrame{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    order:10!important;
    width:100%!important;
    max-width:100%!important;
    height:58vh!important;
    min-height:330px!important;
    max-height:620px!important;
    border:1px solid rgba(255,0,0,.55)!important;
    border-radius:14px!important;
    z-index:10!important;
    display:block!important;
  }
  #observatoryPasswordGate.password-gate{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    min-height:360px!important;
    width:100%!important;
    display:flex!important;
    padding:10px!important;
    z-index:50!important;
  }
  #observatoryPasswordGate .password-card{
    width:100%!important;
    max-width:420px!important;
    margin:0 auto!important;
    padding:16px 14px!important;
  }
  .viewer.connected.vnc-frame-active #observatoryPasswordGate.password-gate{display:none!important;}
  #observatoryViewer .observatory-status-panel,
  #observatoryViewer .observatory-goto-panel,
  #observatoryViewer .roof-camera-panel,
  #observatoryViewer .sky-camera-panel,
  #observatoryViewer #tessObsReadonlyPanel.tess-obs-readonly-panel,
  #observatoryViewer #tessObsReadonlyPanel.tess-obs-readonly-panel.collapsed,
  #observatoryViewer #tessObsReadonlyPanel.tess-obs-readonly-panel:not(.collapsed){
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    order:20!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    z-index:20!important;
    overflow:visible!important;
  }
  #observatoryViewer .observatory-status-panel{order:2!important;}
  #observatoryViewer .roof-camera-panel{order:3!important;}
  #observatoryViewer #tessObsReadonlyPanel.tess-obs-readonly-panel{order:4!important;}
  #observatoryViewer .observatory-goto-panel{order:5!important;}
  #observatoryViewer .sky-camera-panel{order:6!important;}
  .roof-camera-frame,.sky-camera-frame{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    min-height:190px!important;
  }
  .roof-camera-frame img,.roof-camera-frame iframe,.sky-camera-frame img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .observatory-status-grid,.tess-obs-readonly-grid,.telescope-position-grid,.roof-stow-live-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .observatory-goto-grid,.roof-command-grid,.direct-indi-grid,.asiair-command-console .roof-row,.asiair-command-console .direct-indi-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .observatory-goto-panel button,.asiair-command-console button,.roof-stow-assist-button,.observatory-roof-button,.observatory-goto-button,.observatory-park-button{
    min-height:42px!important;
    width:100%!important;
    min-width:0!important;
    font-size:.62rem!important;
    line-height:1.12!important;
    white-space:normal!important;
    padding:8px 6px!important;
  }
  .observatory-goto-field{grid-column:1/-1!important;}
  .observatory-goto-field input{font-size:.82rem!important;min-height:38px!important;}
  .observatory-goto-note,.observatory-status-note,.roof-camera-meta,.sky-camera-meta{font-size:.62rem!important;line-height:1.25!important;}
}
@media (max-width: 430px){
  .topbar>a,.topbar>a.topbar-user-manual-link,.topbar .status a,
  .topbar #mountModeAsiairButton.topbar-asiair-mode-button,
  .topbar #mountModeTessButton.topbar-tess-direct-mode-button{min-width:calc(50% - 8px)!important;font-size:.56rem!important;padding:7px 6px!important;}
  .observatory-status-grid,.tess-obs-readonly-grid,.telescope-position-grid,.roof-stow-live-grid,
  .observatory-goto-grid,.roof-command-grid,.direct-indi-grid,.asiair-command-console .roof-row,.asiair-command-console .direct-indi-row{grid-template-columns:1fr!important;}
  #observatoryViewer.viewer #tessObservatoryNoVncFrame{height:52vh!important;min-height:300px!important;}
}