/* Picker source-state and suite handoff polish. */
#clearSourceButton[hidden],
.live-sample-badge[hidden]{display:none!important}

#descriptors{
  overflow:hidden;
  color:var(--picker-muted);
  font-size:.74rem;
  text-overflow:ellipsis;
  white-space:nowrap
}

.capture-panel .stage[data-source-active="true"]{cursor:crosshair}
.live-sample-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:10;
  display:flex;
  max-width:calc(100% - 24px);
  min-height:34px;
  align-items:center;
  gap:8px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:10px;
  background:rgba(16,24,40,.82);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  font-size:.68rem;
  line-height:1;
  pointer-events:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px)
}
.live-sample-dot{
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:6px;
  background:var(--picker-picked,#1b8e2d)
}
.live-sample-badge strong{
  overflow:hidden;
  font:800 .7rem/1 'Space Mono',monospace;
  text-overflow:ellipsis;
  white-space:nowrap
}
.live-sample-badge span:last-child{
  flex:0 0 auto;
  padding-left:8px;
  border-left:1px solid rgba(255,255,255,.22);
  color:#d0d5dd;
  font-size:.6rem;
  font-weight:800;
  white-space:nowrap
}

#gradientButton{grid-column:1/-1}

@media(max-width:680px){
  .live-sample-badge{top:9px;left:9px;max-width:calc(100% - 18px)}
}

@media(max-width:430px){
  #gradientButton{grid-column:auto}
}