/* Keep every board stage in a screen-sized lane with its own card scroller. */
.board-viewport{
  height:clamp(396px,calc(110dvh - 429px),990px);
  min-height:0;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:10px;
}
.board-viewport>.column{
  display:flex;
  flex-direction:column;
  height:100%;
  max-height:100%;
  min-height:0;
}
.board-viewport .column-head{flex:0 0 auto}
.board-viewport .column-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#b8c9d6 transparent;
}
@media(min-width:761px) and (hover:hover) and (pointer:fine){
  .board-viewport .column-scroll{scrollbar-color:transparent transparent;transition:scrollbar-color .35s ease}
  .board-viewport .column-scroll::-webkit-scrollbar{width:8px}
  .board-viewport .column-scroll::-webkit-scrollbar-thumb{background-color:transparent;border-radius:8px;transition:background-color .35s ease}
  .board-viewport .column:hover .column-scroll{scrollbar-color:#b8c9d6 transparent}
  .board-viewport .column:hover .column-scroll::-webkit-scrollbar-thumb{background-color:#b8c9d6}
}

/* Opportunity details use a centered floating dialog on every screen size. */
#drawer.drawer{
  position:fixed;
  inset:auto;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  width:min(960px,calc(100vw - 48px));
  max-width:none;
  height:auto;
  min-height:0;
  max-height:calc(100dvh - 48px);
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid #dce5ee;
  border-radius:16px;
  padding:28px 32px 34px;
  background:#fbfcfe;
  color:var(--navy);
  box-shadow:0 24px 90px #051a2d38;
}
#drawer::backdrop{background:#102a4366;backdrop-filter:blur(3px)}
@media(max-width:760px){
  .board-stage-shortcuts{top:8px;margin-bottom:16px}
  .board-viewport{
    height:clamp(320px,calc(100dvh - 200px),720px);
    min-height:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:0;
  }
  .board-viewport>.column{padding-bottom:4px}
  .board-position-dots{padding-top:1px}
  .board-viewport .column-scroll{padding:0 2px 0 12px}
  main>footer{display:none}
  #drawer.drawer{
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    padding:22px 18px 28px;
    border-radius:13px;
  }
}
@media(max-width:420px){#drawer.drawer{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:20px 16px 24px}}
@media(max-width:760px) and (hover:none) and (pointer:coarse){
  .board-viewport .column-scroll{padding:0}
  .board-viewport .column-scroll>.card{margin-inline:8px}
}