/* Stable layout for mandatory first-login diagnostic.
   Keep the diagnostic as a normal scroll document: no sticky layers over questions. */
.diag-backdrop{
  overflow:hidden;
  padding:28px;
  padding-top:max(28px,env(safe-area-inset-top));
  padding-bottom:max(28px,env(safe-area-inset-bottom));
}
.diag-modal{
  width:min(940px,100%);
  max-height:calc(100dvh - 56px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scroll-padding-top:18px;
}
/* The previous sticky header could cover the first questions while the modal scrolled. */
.diag-head{
  position:relative!important;
  top:auto!important;
  padding-top:0!important;
  z-index:auto!important;
}
/* Do not let the footer overlap the last visible question either. */
.diag-actions{
  position:relative!important;
  bottom:auto!important;
  padding-bottom:0!important;
}
.diag-list{
  position:relative;
  z-index:1;
}
.diag-q{
  min-width:0;
  scroll-margin-top:18px;
  overflow:visible;
}
.diag-q-title{
  align-items:flex-start!important;
  min-width:0;
}
.diag-q-title>span{
  flex:0 0 30px;
}
.diag-q-title b{
  display:block;
  min-width:0;
  line-height:1.42;
  overflow-wrap:anywhere;
  word-break:normal;
}
.diag-options{
  min-width:0;
}
.diag-options label{
  display:block;
  min-width:0;
}
.diag-options span{
  min-height:44px;
  line-height:1.4;
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
}

/* Integrity preflight is a separate screen, not an overlay over already visible questions. */
.integrity-diagnostic-dialog.integrity-preflight-active{
  overflow-y:auto!important;
}
.integrity-diagnostic-dialog.integrity-preflight-active>.diagnostic-integrity-gate{
  position:relative!important;
  inset:auto!important;
  min-height:100%;
  width:100%;
  z-index:20;
  background:#fff;
}
.integrity-diagnostic-dialog.integrity-preflight-active>.diag-head,
.integrity-diagnostic-dialog.integrity-preflight-active>#diagForm{
  display:none!important;
}

@supports not (height:100dvh){
  .diag-modal{max-height:calc(100vh - 56px)}
}
@media(max-width:820px){
  .diag-backdrop{
    padding:14px;
    padding-top:max(14px,env(safe-area-inset-top));
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
  .diag-modal{
    max-height:calc(100dvh - 28px);
    padding:22px;
  }
  .diag-head{
    gap:12px;
  }
  .diag-head>div:first-child{
    min-width:0;
  }
  .diag-head p{
    line-height:1.45;
  }
  .integrity-diagnostic-dialog.integrity-preflight-active>.diagnostic-integrity-gate{
    min-height:calc(100dvh - 28px - 44px);
  }
}
@media(max-width:560px){
  .diag-backdrop{
    padding:0;
  }
  .diag-modal{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom));
  }
  .diag-head{
    padding-bottom:16px!important;
    flex-direction:column;
  }
  .diag-count{
    align-self:flex-start;
  }
  .diag-q{
    padding:16px 14px;
  }
  .diag-q-title{
    margin-bottom:12px;
  }
  .diag-options span{
    padding:12px;
    font-size:14px;
  }
  .diag-actions{
    margin-top:18px;
    padding-top:16px!important;
  }
  .integrity-diagnostic-dialog.integrity-preflight-active{
    padding:0!important;
    overflow-y:auto!important;
  }
  .integrity-diagnostic-dialog.integrity-preflight-active>.diagnostic-integrity-gate{
    min-height:100dvh;
    padding:calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
  }
}
@supports not (height:100dvh){
  @media(max-width:560px){
    .diag-modal{height:100vh;max-height:100vh}
    .integrity-diagnostic-dialog.integrity-preflight-active>.diagnostic-integrity-gate{min-height:100vh}
  }
}