/* Phase 17.4 clean layer-lane activation */
.phase17-4-lane-active,
.layer-item.phase17-4-lane-active{
  outline: 2px solid rgba(255, 64, 96, .95) !important;
  box-shadow:
    inset 4px 0 0 rgba(255,64,96,.95),
    0 0 0 1px rgba(255,64,96,.35),
    0 0 12px rgba(255,64,96,.18) !important;
}
.phase17-4-lane-active .layer-name{
  color: #ffffff !important;
}

/* Phase 17.4 compact viewport-nested status notifications */
.stage-viewport,
#viewport{
  position:relative;
}
.stage-viewport > .viewport-toast-stack,
#viewport > #toastStack{
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  gap:5px;
  z-index:8;
  pointer-events:none;
  justify-items:end;
  align-content:end;
  width:min(230px, calc(100% - 20px));
  max-width:min(230px, calc(100% - 20px));
}
.stage-viewport > .viewport-toast-stack .toast,
#viewport > #toastStack .toast{
  min-width:160px;
  max-width:230px;
  padding:6px 8px;
  border-left-width:3px;
  border-radius:5px;
  font-size:10px;
  line-height:1.18;
  box-shadow:0 8px 18px rgba(0,0,0,.38);
  background:rgba(33,33,33,.92);
  backdrop-filter:blur(4px);
}
.stage-viewport > .viewport-toast-stack .toast small,
#viewport > #toastStack .toast small{
  margin-top:2px;
  font-size:9px;
  line-height:1.2;
  color:#cfcfcf;
}
@media (max-width: 900px){
  .stage-viewport > .viewport-toast-stack,
  #viewport > #toastStack{
    right:8px;
    bottom:8px;
    width:min(200px, calc(100% - 16px));
    max-width:min(200px, calc(100% - 16px));
  }
  .stage-viewport > .viewport-toast-stack .toast,
  #viewport > #toastStack .toast{
    min-width:140px;
    max-width:200px;
    font-size:9.5px;
    padding:5px 7px;
  }
}