/* /internet/ page — builds on styles.css, economy.css panels and quake.css map bits */
:root { --n-ok: var(--mk-good); --n-warn: #D9901B; --n-bad: var(--live); --n-low: var(--text-mute);
        --n-ping: #2F7FD8; --n-bgp: #8A5CD6; --n-gtr: #D9901B; }
:root[data-theme="dark"] { --n-warn: #F0B04A; --n-ping: #5AA8FF; --n-bgp: #B48CFF; --n-gtr: #F0B04A; }
.st-normal { --nc: var(--n-ok); } .st-disrupted { --nc: var(--n-warn); } .st-shutdown { --nc: var(--n-bad); } .st-unknown { --nc: var(--n-low); }

.nt-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.nt-meter {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow);
  animation: mk-drop .6s cubic-bezier(.2,.8,.2,1) both;
}
.nt-meter::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--nc); }
.nt-gauge { position: relative; width: 220px; max-width: 100%; flex-shrink: 0; }
.nt-gauge svg { display: block; width: 100%; height: auto; }
.nt-gauge path { fill: none; stroke-width: 18; stroke-linecap: round; }
.nt-gauge .g-bg { stroke: var(--inset); }
.nt-gauge .g-val { stroke: var(--nc); transition: stroke-dasharray 1s cubic-bezier(.2,.8,.2,1); }
.nt-gnum { position: absolute; inset-inline: 0; bottom: 0; text-align: center; display: grid; gap: 10px; }
.nt-gnum b { font-size: 2.3rem; font-weight: 800; line-height: 1.1; }
.nt-gnum small { font-size: .7rem; color: var(--text-mute); }
.nt-verdict { flex: 1; min-width: 200px; }
.nt-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-weight: 800; font-size: 1.15rem;
  background: color-mix(in srgb, var(--nc) 14%, transparent); color: var(--nc); border: 1px solid color-mix(in srgb, var(--nc) 40%, transparent); }
.nt-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--nc); animation: nt-blink 2s ease-in-out infinite; }
@keyframes nt-blink { 50% { opacity: .35; } }
.nt-ex { margin: 10px 0 0; font-size: .98rem; font-weight: 600; line-height: 1.8; }
.nt-since { margin: 4px 0 0; font-size: .8rem; color: var(--text-mute); }
.nt-since b { color: var(--text-dim); font-weight: 600; }

.nt-sigs { display: grid; gap: 10px; }
.nt-sig { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 2px 6px; }
.nt-sig-name { font-weight: 700; font-size: .88rem; }
.nt-sig > b { font-size: 1.25rem; font-weight: 800; }
.nt-sig > small { color: var(--text-mute); font-size: .7rem; }
.nt-bar { grid-column: 1 / -1; height: 6px; background: var(--inset); border-radius: 99px; overflow: hidden; margin: 4px 0 2px; }
.nt-bar i { display: block; height: 100%; border-radius: 99px; background: var(--mk-flat); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.nt-sig.tone-good .nt-bar i { background: var(--n-ok); } .nt-sig.tone-bad .nt-bar i { background: var(--n-warn); }
.nt-sig.tone-bad > b { color: var(--n-warn); }
.nt-sig-d { grid-column: 1 / -1; color: var(--text-mute); font-size: .72rem; line-height: 1.6; }
.nt-sig-at { grid-column: 1 / -1; color: var(--text-mute); font-size: .68rem; }

/* chart */
.nt-keys { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 4px; padding: 0; font-size: .78rem; color: var(--text-dim); font-weight: 600; }
.nt-keys li { display: flex; align-items: center; gap: 6px; }
.nt-keys i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.k-ping i { background: var(--n-ping); } .k-bgp i { background: var(--n-bgp); } .k-gtr i { background: var(--n-gtr); }
.nt-chart svg { height: 240px; }
.nt-chart .l-ping { stroke: var(--n-ping); } .nt-chart .l-bgp { stroke: var(--n-bgp); } .nt-chart .l-gtr { stroke: var(--n-gtr); stroke-dasharray: 5 4; }
.nt-chart .nl { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.nt-chart .th { stroke: var(--n-warn); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .8; }
.nt-chart .bad-zone { fill: var(--n-bad); opacity: .035; }
.nt-ylab { position: absolute; inset-block: 0; inset-inline-start: 4px; height: 240px; pointer-events: none; }
.nt-ylab span { position: absolute; inset-inline-start: 0; transform: translateY(-110%); font-size: .64rem; color: var(--text-mute); font-weight: 600; }
@media (max-width: 760px) { .nt-ylab { height: 200px; } }
.nt-chart .day { stroke: var(--border-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nt-chart .ylab { font-size: 10px; fill: var(--text-mute); }
.nt-days { display: flex; justify-content: space-between; font-size: .68rem; color: var(--text-mute); margin-top: 4px; direction: ltr; }
.nt-chart .ec-tip { width: 170px; }

/* provinces */
.nm-prov path { stroke: var(--surface); stroke-width: 1.5; transition: fill .4s; cursor: pointer; }
.nm-prov path.s-normal { fill: color-mix(in srgb, var(--n-ok) 55%, var(--q-prov)); }
.nm-prov path.s-disrupted { fill: color-mix(in srgb, var(--n-warn) 75%, var(--q-prov)); }
.nm-prov path.s-shutdown { fill: var(--n-bad); }
.nm-prov path.s-low { fill: var(--q-prov); }
.nm-prov path:hover, .nm-prov path.hl { stroke: var(--text); stroke-width: 3; }
.nt-legend i { border: 0 !important; border-radius: 3px !important; }
.nt-legend .s-normal { background: color-mix(in srgb, var(--n-ok) 55%, var(--q-prov)); }
.nt-legend .s-disrupted { background: color-mix(in srgb, var(--n-warn) 75%, var(--q-prov)); }
.nt-legend .s-shutdown { background: var(--n-bad); }
.nt-legend .s-low { background: var(--q-prov); outline: 1px solid var(--border); }
.nt-plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; max-height: 640px; overflow-y: auto; }
.nt-plist li { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; border-radius: 6px; }
.nt-plist li:hover, .nt-plist li.hl { background: var(--inset); }
.nt-pname { flex: 1; font-size: .84rem; font-weight: 600; min-width: 0; }
.nt-plist b { font-size: .84rem; font-weight: 800; min-width: 42px; text-align: end; }
.nt-plist .s-normal b { color: var(--n-ok); } .nt-plist .s-disrupted b { color: var(--n-warn); } .nt-plist .s-shutdown b { color: var(--n-bad); }
.nt-plist .s-low b { color: var(--text-mute); font-weight: 600; font-size: .72rem; }
.nt-spark { width: 64px; height: 20px; flex-shrink: 0; }
.nt-spark path { fill: none; stroke: var(--text-mute); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.nt-plist .s-normal .nt-spark path { stroke: var(--n-ok); } .nt-plist .s-disrupted .nt-spark path { stroke: var(--n-warn); } .nt-plist .s-shutdown .nt-spark path { stroke: var(--n-bad); }

/* events */
.nt-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nt-events li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 12px; border-radius: var(--r-sm); background: var(--inset); font-size: .84rem; }
.nt-events time { font-weight: 700; }
.nt-ds { font-size: .7rem; font-weight: 700; border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; color: var(--text-dim); }
.nt-events b { color: var(--n-warn); }
.nt-how { margin-top: 6px; }
#ntWatch.on { background: var(--surface); color: var(--text); border: 1px solid var(--green); }

@media (max-width: 960px) {
  .nt-top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nt-meter { padding: 16px; justify-content: center; text-align: center; }
  .nt-gauge { width: 200px; }
  .nt-verdict { min-width: 100%; }
  .nt-plist { grid-template-columns: 1fr; max-height: none; }
  .nt-chart svg { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .nt-meter, .nt-pill i { animation: none !important; } }