/* SiteTie 173 — mobile viewport, deterministic navigation and protocol-editor geometry. */
:root{--st-nav-lane:104px}
@media(max-width:760px){
  body.st-authenticated:not(.st-auth-mode):not(.st-protocol-open):not(.sitetie-contractor-open){overflow:hidden!important}
  body.st-authenticated:not(.st-protocol-open):not(.sitetie-contractor-open) #app{height:calc(100dvh - 54px)!important;min-height:0!important;overflow:hidden!important}
  body.st-authenticated:not(.st-protocol-open):not(.sitetie-contractor-open) #app>header{position:relative!important;top:auto!important;height:82px!important;min-height:82px!important;flex:0 0 82px!important}
  body.st-authenticated:not(.st-protocol-open):not(.sitetie-contractor-open) #app main{height:calc(100dvh - 54px - 82px - var(--st-nav-lane) - env(safe-area-inset-bottom,0px))!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;padding-top:18px!important;padding-bottom:24px!important;scroll-padding-bottom:28px!important}
  #hsiDemoNav{bottom:max(8px,env(safe-area-inset-bottom,0px))!important}
}

/* Navigation visibility follows REAL open UI, not stale body flags. */
body.st-authenticated:not(.st-auth-mode):not(:has(#stableProtocolEditor.active)):not(:has(#hsiCreateProjectV44.open)):not(:has(#st66ProtocolChooser.open)):not(:has(#contractorEditor.open)):not(:has(.sitetie-user-edit-modal)):not(:has(.hsi-task-modal)):not(:has(.hsi-supplier-modal.open)):not(:has(#hsiExpressOverlay.open)) #hsiDemoNav{
  display:grid!important;visibility:visible!important;pointer-events:auto!important;opacity:1!important
}
body.st-authenticated:has(#stableProtocolEditor.active) #hsiDemoNav,
body.st-authenticated:has(#hsiCreateProjectV44.open) #hsiDemoNav,
body.st-authenticated:has(#st66ProtocolChooser.open) #hsiDemoNav,
body.st-authenticated:has(#contractorEditor.open) #hsiDemoNav,
body.st-authenticated:has(.sitetie-user-edit-modal) #hsiDemoNav,
body.st-authenticated:has(.hsi-task-modal) #hsiDemoNav,
body.st-authenticated:has(.hsi-supplier-modal.open) #hsiDemoNav,
body.st-authenticated:has(#hsiExpressOverlay.open) #hsiDemoNav{
  display:none!important;visibility:hidden!important;pointer-events:none!important
}

/* Protocol editor is a self-contained app surface. */
body.st-protocol-open,body:has(#stableProtocolEditor.active){overflow:hidden!important;overscroll-behavior:none!important;background:#f6f8fc!important}
body.st-protocol-open #netbar,body.st-protocol-open #app>header,body.st-protocol-open #hsiDemoNav,
body:has(#stableProtocolEditor.active) #netbar,body:has(#stableProtocolEditor.active) #app>header,body:has(#stableProtocolEditor.active) #hsiDemoNav{display:none!important;visibility:hidden!important;pointer-events:none!important}
body.st-protocol-open #app,body:has(#stableProtocolEditor.active) #app{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;background:#f6f8fc!important}
body.st-protocol-open #app main,body:has(#stableProtocolEditor.active) #app main{width:100%!important;height:100dvh!important;min-height:100dvh!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden!important}
#stableProtocolEditor.active{position:fixed!important;inset:0!important;z-index:85000!important;display:block!important;width:100%!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:calc(68px + env(safe-area-inset-top,0px)) 0 calc(18px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;scroll-padding-top:calc(78px + env(safe-area-inset-top,0px))!important;scroll-padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,#f8f9fc 0%,#f4f6fb 100%)!important}
#stableProtocolEditor .st-protocol-topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:85020!important;display:flex!important;align-items:flex-end!important;gap:10px!important;height:calc(58px + env(safe-area-inset-top,0px))!important;padding:env(safe-area-inset-top,0px) 14px 8px!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid #dbe2ed!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
#stableProtocolEditor .st-protocol-back{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:42px!important;margin:0!important;padding:0 14px!important;border:1px solid #dbe2ed!important;border-radius:13px!important;background:#fff!important;color:#111a35!important;font-size:14px!important;font-weight:850!important;box-shadow:none!important}
#stableProtocolEditor .st-protocol-top-title{min-width:0!important;font-size:14px!important;font-weight:800!important;color:#6f7a91!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#stableProtocolEditor .card{width:min(760px,calc(100% - 28px))!important;max-width:760px!important;min-width:0!important;margin:0 auto!important;padding:22px!important;border:1px solid #dbe2ed!important;border-radius:24px!important;background:#fff!important;color:#111a35!important;box-shadow:0 12px 34px rgba(28,40,75,.08)!important}
#stableProtocolEditor .card>h2{margin:0 0 16px!important;font-size:32px!important;line-height:1.08!important;letter-spacing:-.025em!important;color:#111a35!important}
#stableProtocolEditor .notice{margin:0 0 20px!important;padding:14px 15px!important;border:1px solid #d8e7fb!important;border-radius:16px!important;background:#f3f8ff!important;color:#35577e!important;font-size:14px!important;line-height:1.45!important}
#stableProtocolEditor h3{margin:24px 0 13px!important;font-size:21px!important;line-height:1.16!important;color:#111a35!important}
#stableProtocolEditor label{display:block!important;margin:0 0 14px!important;color:#111a35!important;font-size:14px!important;font-weight:800!important}
#stableProtocolEditor input,#stableProtocolEditor select,#stableProtocolEditor textarea{display:block!important;width:100%!important;min-width:0!important;margin-top:7px!important;padding:11px 13px!important;border:1px solid #ccd5e4!important;border-radius:14px!important;background:#fff!important;color:#111a35!important;font-size:16px!important;line-height:1.35!important;box-shadow:none!important}
#stableProtocolEditor input,#stableProtocolEditor select{min-height:52px!important}
#stableProtocolEditor textarea{min-height:112px!important;resize:vertical!important}
#stableProtocolEditor input:focus,#stableProtocolEditor select:focus,#stableProtocolEditor textarea:focus{outline:none!important;border-color:#8168ff!important;box-shadow:0 0 0 4px rgba(99,60,255,.10)!important}
#stableProtocolEditor .sp-voice{display:grid!important;grid-template-columns:minmax(0,1fr) 52px!important;gap:8px!important;align-items:start!important}
#stableProtocolEditor .sp-voice .sp-mic{width:52px!important;min-width:52px!important;height:52px!important;min-height:52px!important;margin-top:7px!important;border:1px solid #dbe2ed!important;border-radius:14px!important;background:#f5f7fb!important;color:#111a35!important;font-size:19px!important}
#stableProtocolEditor .sp-photo-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:12px 0 16px!important}
#stableProtocolEditor .sp-photo-btn{min-height:52px!important;border:1px solid #dbe2ed!important;border-radius:14px!important;background:#f7f8fc!important;color:#111a35!important}
#stableProtocolEditor .sp-actions{display:grid!important;gap:10px!important;margin-top:20px!important;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
#stableProtocolEditor .sp-actions button{min-height:52px!important;border-radius:14px!important;font-weight:850!important}
@media(max-width:650px){
  #stableProtocolEditor.active{padding-top:calc(64px + env(safe-area-inset-top,0px))!important;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
  #stableProtocolEditor .card{width:100%!important;max-width:none!important;min-height:calc(100dvh - 64px - env(safe-area-inset-top,0px))!important;margin:0!important;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px))!important;border-left:0!important;border-right:0!important;border-bottom:0!important;border-radius:22px 22px 0 0!important;box-shadow:none!important}
  #stableProtocolEditor .card>h2{font-size:28px!important}
  #stableProtocolEditor .grid2,#stableProtocolEditor .sp-signature-grid{grid-template-columns:1fr!important;gap:0!important}
  #stableProtocolEditor .sp-photo-grid{grid-template-columns:1fr!important}
}