/* FO20: only the NONN photo-based event scene uses these rules. */
#nonn-process-loop[data-renderer="photo-fo20"] canvas{aspect-ratio:1600/580}
#nonn-process-loop[data-renderer="photo-fo20"] .npl-equipment-links a{border-radius:6px}
#nonn-process-loop[data-renderer="photo-fo20"] .npl-equipment-links a[data-equipment="distribution"]>span{font-size:10px}
@container process-flow (max-width:600px){
 #nonn-process-loop[data-renderer="photo-fo20"] .npl-state{font-size:11px}
 #nonn-process-loop[data-renderer="photo-fo20"] h2{font-size:19px}
}

/* FO22: the distribution remainder has its own readout. */
#nonn-process-loop[data-renderer="photo-fo20"] .npl-readings{grid-template-columns:repeat(4,minmax(0,1fr))}
@container process-flow (max-width:900px){
 #nonn-process-loop[data-renderer="photo-fo20"] .npl-readings{grid-template-columns:repeat(2,minmax(0,1fr))}
 #nonn-process-loop[data-renderer="photo-fo20"] .npl-readings>div:last-child{grid-column:auto;display:block;border-left:1px solid #285268}
 #nonn-process-loop[data-renderer="photo-fo20"] .npl-readings>div:nth-child(n+3){border-top:1px solid #285268}
 #nonn-process-loop[data-renderer="photo-fo20"] .npl-readings>div:nth-child(odd){border-left:0}
}