/* The roving x-ray window and its machine housing
   ------------------------------------------------------------ */
.ap{
  position:absolute;pointer-events:none;z-index:5;
  border:1px solid rgba(88,199,224,.5);
  backdrop-filter:brightness(2.55) contrast(1.06) saturate(1.1);
  -webkit-backdrop-filter:brightness(2.55) contrast(1.06) saturate(1.1);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 34px rgba(88,199,224,.14),inset 0 0 22px rgba(88,199,224,.06);
  opacity:0;transition:opacity .18s;
}
.ap.on{opacity:1}
.ap.flat{border-color:rgba(224,87,79,.5);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.ap b{position:absolute;width:9px;height:9px;border:1.5px solid var(--c-source)}
.ap b:nth-of-type(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.ap b:nth-of-type(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.ap b:nth-of-type(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.ap b:nth-of-type(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
.ap.flat b{border-color:var(--energy-low)}

/* machine housing around the roving window */
.ap .rail{
  position:absolute;top:-5px;bottom:-5px;width:6px;
  background:
    repeating-linear-gradient(180deg,rgba(88,199,224,.34) 0 1px,transparent 1px 7px),
    linear-gradient(90deg,#20353d,#132227);
  border:1px solid rgba(88,199,224,.28);
}
.ap .rail.l{left:-11px}
.ap .rail.r{right:-11px}
.ap .plate{
  position:absolute;left:16px;right:16px;top:-8px;height:4px;
  background:repeating-linear-gradient(90deg,rgba(88,199,224,.55) 0 1px,transparent 1px 7px);
}
.ap .tag{
  position:absolute;right:-1px;bottom:-14px;
  font-size:7px;letter-spacing:.22em;color:rgba(88,199,224,.72);
}
.ap .bolt{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:#0a1417;border:1px solid rgba(88,199,224,.45);
}
.ap .bolt.a{left:-11px;top:-11px} .ap .bolt.b{right:-11px;top:-11px}
.ap .bolt.c{left:-11px;bottom:-11px} .ap .bolt.d{right:-11px;bottom:-11px}
.ap.flat .rail,.ap.flat .plate{filter:grayscale(1) brightness(.7)}