/* SiteTie 245 — cross-device layout guard for iOS, Android, tablets and desktop. */
:root{
  --st-vvh:100dvh;
  --st-safe-top:env(safe-area-inset-top,0px);
  --st-safe-right:env(safe-area-inset-right,0px);
  --st-safe-bottom:env(safe-area-inset-bottom,0px);
  --st-safe-left:env(safe-area-inset-left,0px);
  --st-control-min:44px;
  --st-content-max:1180px;
}
html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-height:100vh;min-height:100dvh;min-height:var(--st-vvh);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
*,*:before,*:after{box-sizing:border-box}
img,video,canvas,svg,iframe{max-width:100%}
button,input,select,textarea{font:inherit}
button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],label[for]{touch-action:manipulation}
button,[role="button"]{min-height:var(--st-control-min)}
input,select,textarea{width:100%;max-width:100%}
textarea{resize:vertical}

/* Prevent iOS Safari from zooming form controls and keep mobile fields finger-safe. */
@media (hover:none),(pointer:coarse){
  :root{--st-control-min:48px}
  input,select,textarea{font-size:16px!important;min-height:48px}
  textarea{min-height:108px}
}

/* Stable application geometry. */
#app{width:100%;min-width:0}
#app main{width:min(100%,var(--st-content-max))!important;margin-inline:auto!important;min-width:0!important}
#app main>.view,.hsi-shell,#hsiProjectDetailBody,#hsiProtocolBody,#hsiMoreBody{min-width:0!important;max-width:100%!important}
#app>header,#netbar{padding-left:max(12px,var(--st-safe-left))!important;padding-right:max(12px,var(--st-safe-right))!important}
#hsiDemoNav{padding-left:max(6px,var(--st-safe-left))!important;padding-right:max(6px,var(--st-safe-right))!important}

/* All modal/overlay families must fit the visual viewport, not the layout viewport. */
.overlay,#st231Overlay,#st240CheckOverlay,#st243CheckOverlay,#stRecovery242,
[id$="Overlay"],[id*="Overlay"]{max-width:100vw}
.sheet,.st231-sheet,.st240-sheet,.st243-sheet,[class$="-sheet"],[class*=" sheet"]{
  max-width:min(100%,900px)!important;
  max-height:calc(var(--st-vvh) - 20px - var(--st-safe-top) - var(--st-safe-bottom))!important;
  overflow:hidden;
}
.sheet>*,.st231-body,.st240-body,.st243-body,[class$="-body"]{min-width:0}

/* Long text and generated document values may never force horizontal overflow. */
.hsi-shell,.card,.sheet,.st231-box,.st231-item,.st240-check,.st243-check,.sp-card,
.hsi-activity-row,.hsi-more-item,.hsi-more-card{overflow-wrap:anywhere;word-break:break-word}
pre,code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}

/* Stable protocol editor on every screen. */
#stableProtocolEditor{width:100%!important;max-width:100%!important;min-width:0!important}
#stableProtocolEditor .sp-card{width:min(100%,980px)!important;max-width:100%!important;margin-inline:auto!important}
#stableProtocolEditor input,#stableProtocolEditor select,#stableProtocolEditor textarea{max-width:100%!important}
#stableProtocolEditor .sp-photo-grid,#stableProtocolEditor .sp-signature-grid{min-width:0!important}
#stableProtocolEditor .sp-signature-pad canvas{width:100%!important;max-width:100%!important;touch-action:none}

/* Phones — portrait and compact Android/iPhone. */
@media (max-width:650px){
  :root{--st-control-min:48px}
  body{padding-bottom:max(0px,var(--st-safe-bottom))}
  #app main{padding-left:12px!important;padding-right:12px!important;padding-bottom:calc(104px + var(--st-safe-bottom))!important}
  #app>header{align-items:center!important;flex-wrap:nowrap!important}
  #app>header>div:first-child{min-width:0!important;flex:1 1 auto!important}
  #app>header small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #app>header .account{flex:0 0 auto!important;min-width:0!important}
  #who{display:none!important}
  #hsiDemoNav{bottom:max(8px,var(--st-safe-bottom))!important;width:calc(100% - 16px)!important;max-width:620px!important}
  #hsiDemoNav button{min-width:0!important;overflow:hidden!important}
  #hsiDemoNav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sheet,.st231-sheet,.st240-sheet,.st243-sheet,[class$="-sheet"]{width:calc(100vw - 12px)!important;margin-inline:6px!important;border-radius:20px!important}
  .grid2,.grid3,.sp-grid,.sp-signature-grid,.user-create-grid,.st231-detail-grid{grid-template-columns:1fr!important}
  .st232-actions,.st244dn-actions,.sp-photo-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #stPasswordTools{align-items:flex-start!important}
}

/* Very narrow handsets / large accessibility text. */
@media (max-width:360px){
  #app main{padding-left:9px!important;padding-right:9px!important}
  #hsiDemoNav{width:calc(100% - 8px)!important;padding-left:4px!important;padding-right:4px!important}
  #hsiDemoNav button span{font-size:9.5px!important}
  .st232-actions,.st244dn-actions,.sp-photo-actions{grid-template-columns:1fr!important}
  #app>header small{max-width:160px!important}
}

/* Tablets — iPad, Galaxy Tab etc. */
@media (min-width:651px) and (max-width:1024px){
  :root{--st-control-min:48px}
  #app main{padding-left:24px!important;padding-right:24px!important;padding-bottom:118px!important}
  #hsiDemoNav{width:min(820px,calc(100% - 40px))!important;bottom:max(12px,var(--st-safe-bottom))!important}
  .sheet,.st231-sheet,.st240-sheet,.st243-sheet,[class$="-sheet"]{width:min(92vw,860px)!important}
  #stableProtocolEditor .sp-card{width:min(100%,900px)!important}
}

/* Desktop / notebook — use available width without stretching forms indefinitely. */
@media (min-width:1025px){
  :root{--st-control-min:44px}
  #app main{padding-left:28px!important;padding-right:28px!important}
  #hsiDemoNav{width:min(760px,calc(100% - 48px))!important;bottom:16px!important}
  .login{width:min(480px,calc(100vw - 48px))!important}
  .sheet,.st231-sheet,.st240-sheet,.st243-sheet,[class$="-sheet"]{width:min(900px,calc(100vw - 64px))!important}
  input,select,textarea{font-size:15px}
}

/* Landscape phones: prioritize working space over decorative spacing. */
@media (orientation:landscape) and (max-height:540px) and (max-width:1000px){
  #app main{padding-top:10px!important;padding-bottom:82px!important}
  #app>header{min-height:58px!important;padding-top:8px!important;padding-bottom:8px!important}
  #netbar{min-height:42px!important}
  #hsiDemoNav{bottom:max(4px,var(--st-safe-bottom))!important}
  .sheet,.st231-sheet,.st240-sheet,.st243-sheet,[class$="-sheet"]{max-height:calc(var(--st-vvh) - 8px)!important;border-radius:16px!important}
}

/* When the software keyboard is open, never let the fixed bottom nav cover the active field. */
body.st-keyboard-open #hsiDemoNav{transform:translateY(140%)!important;pointer-events:none!important}
body.st-keyboard-open #app main{padding-bottom:20px!important}
body.st-keyboard-open .sheet,body.st-keyboard-open [class$="-sheet"]{max-height:calc(var(--st-vvh) - 8px)!important}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}