/* 1.76.397: Control Center op de homepage. Vlak, haarlijnen, data in mono, paars als merk, roze en amber als datakleur. */
.nsl-ctl { padding: 56px 0 24px; position: relative; }
.nsl-ctl__panel { position: relative; overflow: hidden; border: 1px solid #222; background: #0d0d0e; }
.nsl-ctl__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #7643c8; opacity: 0; pointer-events: none; z-index: 2; }
.nsl-ctl.is-in .nsl-ctl__scan { animation: nslCtlScan 1.6s cubic-bezier(.6, 0, .2, 1) .2s 1 both; }
@keyframes nslCtlScan { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { transform: translateX(var(--ctl-w, 1200px)); opacity: 0; } }
.nsl-ctl__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #1d1d1f; flex-wrap: wrap; }
.nsl-ctl__title { margin: 0; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 15px; }
.nsl-ctl__title span { color: #8a8a8a; font-weight: 400; font-size: 13px; }
.nsl-ctl__live { width: 8px; height: 8px; background: #2ee59d; animation: nslCtlBlink 2.4s steps(1) infinite; }
@keyframes nslCtlBlink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
.nsl-ctl__nodes { margin: 0; display: flex; align-items: center; gap: 18px; font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; color: #a1a1a1; }
.nsl-ctl__node { display: inline-flex; align-items: center; gap: 7px; }
.nsl-ctl__node i { width: 6px; height: 6px; background: #2ee59d; }
.nsl-ctl__node.is-deg i { background: #ffb86b; }
.nsl-ctl__upd { color: #6d6d6d; }
.nsl-ctl__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #1d1d1f; }
.nsl-ctl__kpi { display: grid; gap: 8px; padding: 22px 24px; border-right: 1px solid #1d1d1f; min-width: 0; }
.nsl-ctl__kpi:last-child { border-right: 0; }
.nsl-ctl__kpi span { font-size: 13px; color: #a1a1a1; }
.nsl-ctl__kpi b { font: 600 clamp(26px, 3vw, 38px)/1 'IBM Plex Mono', ui-monospace, monospace; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nsl-ctl__kpi b em { font-style: normal; font-size: .5em; color: #8a8a8a; margin-left: 4px; letter-spacing: 0; }
.nsl-ctl__kpi.is-atk b { color: #ff5c7a; }
.nsl-ctl__kpi small { font-size: 12px; color: #6d6d6d; }
.nsl-ctl__body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.nsl-ctl__chart { margin: 0; padding: 20px 24px 16px; border-right: 1px solid #1d1d1f; min-width: 0; }
.nsl-ctl__chart figcaption { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: #8a8a8a; margin-bottom: 14px; }
.nsl-ctl__chart figcaption i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px; }
.nsl-ctl__chart figcaption i.is-req { background: #3a3a3d; height: 8px; }
.nsl-ctl__chart figcaption i.is-blk { background: #ff5c7a; height: 8px; }
.nsl-ctl__chart figcaption i.is-ms { background: #ffb86b; }
.nsl-ctl__bars { position: relative; height: 180px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; align-items: end; border-bottom: 1px solid #262628; background: repeating-linear-gradient(to top, transparent 0 44px, #19191b 44px 45px); }
.nsl-ctl__bars > i { position: relative; height: var(--r); background: #2b2b2e; transform-origin: bottom; transform: scaleY(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(var(--n) * 28ms), background .2s; }
.nsl-ctl__bars > i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--b) / var(--r) * 100%); background: #ff5c7a; }
.nsl-ctl__bars > i:hover { background: #3a3a3d; }
.nsl-ctl.is-in .nsl-ctl__bars > i { transform: scaleY(1); }
.nsl-ctl__bars svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nsl-ctl__bars polyline { fill: none; stroke: #ffb86b; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease .5s; }
.nsl-ctl.is-in .nsl-ctl__bars polyline { stroke-dashoffset: 0; }
.nsl-ctl__axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11.5px/1 'IBM Plex Mono', ui-monospace, monospace; color: #6d6d6d; }
.nsl-ctl__log { list-style: none; margin: 0; padding: 14px 0; font: 500 12.5px/1.2 'IBM Plex Mono', ui-monospace, monospace; color: #8a8a8a; min-width: 0; }
.nsl-ctl__log li { display: grid; grid-template-columns: 52px repeat(2, minmax(0, 1fr)) 52px; column-gap: 14px; padding: 9px 24px; border-bottom: 1px solid #161618; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; transition-delay: calc(.9s + var(--i, 0) * 90ms); white-space: nowrap; }
.nsl-ctl.is-in .nsl-ctl__log li { opacity: 1; transform: none; }
.nsl-ctl__log li.is-hd { color: #6d6d6d; font-size: 11.5px; padding-top: 4px; padding-bottom: 8px; opacity: 1; transform: none; }
.nsl-ctl__log li.is-hd time { color: #6d6d6d; }
.nsl-ctl__log li:nth-child(2) span:not(.is-blk):not(.is-ms) b { color: #fff; }
.nsl-ctl__log time { color: #7643c8; }
.nsl-ctl__log b { color: #e6e6e6; font-weight: 500; }
.nsl-ctl__log .is-blk b { color: #ff5c7a; }
.nsl-ctl__log span { overflow: hidden; text-overflow: ellipsis; }
.nsl-ctl__log .is-ms { text-align: right; }
.nsl-ctl__log .is-ms b { color: #ffb86b; }
.nsl-ctl__src { margin: 0; padding: 12px 24px; border-top: 1px solid #1d1d1f; font-size: 12.5px; color: #6d6d6d; }
.nsl-ctl__src a { color: #a1a1a1; text-underline-offset: 3px; }
.nsl-ctl__src a:hover { color: #fff; }
@media (max-width: 1100px) { .nsl-ctl__body { grid-template-columns: 1fr; } .nsl-ctl__chart { border-right: 0; border-bottom: 1px solid #1d1d1f; } }
@media (max-width: 760px) {
	.nsl-ctl { padding: 32px 0 12px; }
	.nsl-ctl__head { padding: 14px 16px; }
	.nsl-ctl__title span { display: none; }
	.nsl-ctl__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nsl-ctl__kpi { padding: 16px; }
	.nsl-ctl__kpi:nth-child(2) { border-right: 0; }
	.nsl-ctl__kpi:nth-child(-n+2) { border-bottom: 1px solid #1d1d1f; }
	.nsl-ctl__chart { padding: 16px; }
	.nsl-ctl__bars { height: 130px; gap: 2px; }
	.nsl-ctl__log li { padding: 8px 16px; grid-template-columns: 42px repeat(2, minmax(0, 1fr)) 44px; column-gap: 10px; }
	.nsl-ctl__src { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .nsl-ctl__bars > i { transform: none; transition: none; } .nsl-ctl__bars polyline { stroke-dashoffset: 0; transition: none; } .nsl-ctl__log li { opacity: 1; transform: none; } .nsl-ctl.is-in .nsl-ctl__scan, .nsl-ctl__live { animation: none; } }
/* Contact: bereikbaarheid, live */
.nsl-cstat { padding: 28px 0 0; }
.nsl-cstat__row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border: 1px solid #222; background: #0d0d0e; }
.nsl-cstat__c { display: grid; gap: 6px; padding: 18px 22px; border-right: 1px solid #1d1d1f; min-width: 0; align-content: start; }
.nsl-cstat__c:last-child { border-right: 0; }
.nsl-cstat__c span { font-size: 12.5px; color: #8a8a8a; }
.nsl-cstat__c b { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 600; }
.nsl-cstat__c b.is-num { font: 600 24px/1.1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: -.02em; }
.nsl-cstat__c b i { width: 8px; height: 8px; flex: none; background: #6d6d6d; }
.nsl-cstat__c.is-on b i, .nsl-cstat__c.is-ok b i { background: #2ee59d; animation: nslCtlBlink 2.4s steps(1) infinite; }
.nsl-cstat__c.is-partial b i, .nsl-cstat__c.is-maint b i { background: #ffb86b; }
.nsl-cstat__c.is-down b i { background: #ff5c7a; }
.nsl-cstat__c small { font-size: 12.5px; color: #6d6d6d; line-height: 1.45; }
.nsl-cstat__c small a { color: #8a8a8a; text-underline-offset: 3px; }
.nsl-cstat__c small a:hover { color: #fff; }
@media (max-width: 760px) { .nsl-cstat__row { grid-template-columns: 1fr; } .nsl-cstat__c { border-right: 0; border-bottom: 1px solid #1d1d1f; padding: 14px 16px; } .nsl-cstat__c:last-child { border-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .nsl-cstat__c b i { animation: none !important; } }
/* Contact: versleuteld verzonden */
.nsl-seal { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; gap: 6px; background: rgba(10, 10, 11, .94); font: 500 13px/1.6 'IBM Plex Mono', ui-monospace, monospace; color: #8a8a8a; padding: 24px; }
.nsl-seal p { margin: 0; opacity: 0; transform: translateY(3px); animation: nslSealIn .3s ease forwards; animation-delay: calc(var(--i) * 140ms); }
.nsl-seal p b { color: #7643c8; font-weight: 500; margin-right: 8px; }
.nsl-seal p:last-child { color: #fff; }
@keyframes nslSealIn { to { opacity: 1; transform: none; } }