/* The edge line: off at rest, light only when the channel changed. While it shows it is a row of bone cells (the mask
   cuts 4px squares with 2px gaps, a cell always on the centre) with one green pixel, the legend's live light, crossing
   the way the switch went; it fades in as it arrives and fades out as it settles. The spectrum's colours never show. */
html body #osedgeline:not(.edge-flowing) { opacity: 0; animation: none; }
html body #osedgeline { pointer-events: none; will-change: width, opacity; transition: opacity .34s var(--os-settle, cubic-bezier(.22, .8, .22, 1)), height .18s var(--os-settle, cubic-bezier(.22, .8, .22, 1)), top .18s var(--os-settle, cubic-bezier(.22, .8, .22, 1)); }
html body #osedgeline::before, html body #osedgeline::after { animation: none; }
html body #osedgeline.edge-flowing {
  opacity: 1; max-width: none; height: 4px; top: 4px; border-radius: 1px;
  background: rgba(255, 250, 248, .62); background-size: auto; box-shadow: none;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px); mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px);
  -webkit-mask-position: var(--edge-cell0, 0px) 0; mask-position: var(--edge-cell0, 0px) 0;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
html body #osedgeline.edge-flowing::before { inset: -1px 0; background: rgba(255, 250, 248, .5); filter: blur(2px); opacity: .45; transform: none; }
/* the green pixel: one cell, on the grid, at --edge-px */
html body #osedgeline.edge-flowing::after {
  inset: 0 auto 0 var(--edge-px, 50%); width: 4px; border-radius: 1px;
  background: #2BB673; background-size: auto; opacity: 1;
  box-shadow: 0 0 8px #2BB673, 0 0 20px rgba(43, 182, 115, .7);
}
body[data-os-scene="feed"] #osedgeline.edge-flowing { top: 2px; }
/* the strip, the shade and the immersive frame keep their own darkness */
body.strip #osedgeline.edge-flowing, body.shade-open #osedgeline.edge-flowing, body.immersive #osedgeline.edge-flowing { opacity: 0; }