/**
 * Engagement-plus — five ADDITIVE North Sea elements. Nothing existing is
 * restyled; every selector here is new. Reuses the site's own tokens
 * (--ns-gold, --ns-panel, --ns-line, --ns-muted) so it reads as native.
 *
 * 1 live speed badge · 2 terminal analyze header · 3 sonar coverage map
 * 4 count-up stats (behavior only, no CSS) · 5 terminal FAQ accordion
 */

:root{
  --nsx-mono: ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --nsx-gold: var(--ns-gold,#c9a45c);
  --nsx-line: var(--ns-line,#22344a);
  --nsx-panel: var(--ns-panel,#111e2e);
  --nsx-muted: var(--ns-muted,#8497a9);
  --nsx-good:#5db98b;
}

/* 1 · live speed badge (footer placeholder, JS fills the number) */
.ns-speedbadge-wrap{display:flex;flex-direction:column;align-items:center;padding:14px 16px 4px}
.ns-speedbadge{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--nsx-mono);font-size:12.5px;line-height:1;
  color:var(--ns-heading,#eaf1f8);background:rgba(0,0,0,.28);border:1px solid color-mix(in srgb,var(--nsx-gold) 34%,transparent);
  border-radius:999px;padding:8px 14px;opacity:0;transition:opacity .5s ease;
}
.ns-speedbadge[hidden]{display:none}
.ns-speedbadge.is-in{opacity:1}
.ns-speedbadge b{color:var(--nsx-gold);font-weight:600}
.ns-speedbadge .nsx-sep{color:var(--nsx-muted)}
.ns-speedbadge .nsx-dot{width:7px;height:7px;border-radius:50%;background:var(--nsx-good);box-shadow:0 0 0 0 rgba(93,185,139,.6);animation:nsx-pulse 2.6s infinite}
@keyframes nsx-pulse{0%{box-shadow:0 0 0 0 rgba(93,185,139,.5)}70%{box-shadow:0 0 0 7px rgba(93,185,139,0)}100%{box-shadow:0 0 0 0 rgba(93,185,139,0)}}

/* 2 · terminal analyze header (top of local posts) */
.ns-analyze{
  font-family:var(--nsx-mono);font-size:13px;color:var(--nsx-muted);
  background:rgba(0,0,0,.24);border:1px solid var(--nsx-line);border-left:2px solid var(--nsx-gold);
  border-radius:8px;padding:11px 14px;margin:0 0 26px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.ns-analyze .nsx-p{color:var(--nsx-gold)}
.ns-analyze .nsx-flag{color:#7fb3c4}
.ns-analyze .nsx-cur{display:inline-block;width:7px;height:14px;background:var(--nsx-gold);vertical-align:-2px;margin-left:2px;animation:nsx-blink 1.1s steps(1) infinite}
@keyframes nsx-blink{50%{opacity:0}}

/* 3 · sonar coverage map — compact band paired with the coverage copy */
.ns-sonar{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--nsx-line);border-radius:var(--ns-radius,14px);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);padding:18px 24px}
.ns-sonar canvas{width:150px;height:150px;max-width:44vw;flex:none}
.ns-sonar__copy{flex:1;min-width:220px}
.ns-sonar__eyebrow{font-family:var(--nsx-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--nsx-gold);display:flex;align-items:center;gap:8px}
.ns-sonar__eyebrow::before{content:"";width:22px;height:1px;background:var(--nsx-gold)}
.ns-sonar__lead{color:var(--nsx-muted);font-size:14px;margin:8px 0 0;max-width:52ch}
.ns-sonar__legend{font-family:var(--nsx-mono);font-size:12px;color:var(--nsx-muted);display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.ns-sonar__legend .nsx-live{color:var(--nsx-gold)}
.ns-sonar__legend .nsx-row{display:flex;align-items:center;gap:8px}
.ns-sonar__legend .nsx-pip{width:7px;height:7px;border-radius:50%;background:var(--nsx-gold)}
@media(max-width:640px){.ns-sonar{justify-content:center;text-align:center}.ns-sonar__legend{justify-content:center}.ns-sonar__eyebrow{justify-content:center}}

/* 5 · terminal FAQ accordion (enhances the existing .ns-faq block) */
.ns-faq.is-enh .ns-faq__q{
  cursor:pointer;position:relative;padding:16px 40px 16px 30px;margin:0;border:1px solid var(--nsx-line);
  border-radius:12px;background:rgba(0,0,0,.16);font-size:16px;transition:border-color .2s ease,background .2s ease;
}
.ns-faq.is-enh .ns-faq__q + .ns-faq__a{margin:0;max-height:0;overflow:hidden;transition:max-height .34s ease,padding .34s ease;padding:0 30px;color:var(--nsx-muted)}
.ns-faq.is-enh .ns-faq__q.is-open + .ns-faq__a{padding:2px 30px 18px}
.ns-faq.is-enh .ns-faq__q::before{content:"›";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--nsx-gold);font-family:var(--nsx-mono);transition:transform .3s ease}
.ns-faq.is-enh .ns-faq__q.is-open{border-color:color-mix(in srgb,var(--nsx-gold) 40%,transparent)}
.ns-faq.is-enh .ns-faq__q.is-open::before{transform:translateY(-50%) rotate(90deg)}
.ns-faq.is-enh .ns-faq__q:focus-visible{outline:2px solid var(--nsx-gold);outline-offset:2px}
.ns-faq.is-enh{display:flex;flex-direction:column;gap:10px}

/* shared status colors */
.nsx-good b,.nsx-good>span:last-child{color:var(--nsx-good)}
.nsx-warn b,.nsx-warn>span:last-child{color:var(--nsx-gold)}
.nsx-bad b,.nsx-bad>span:last-child{color:#d47d6b}

/* 6 · vitals drawer */
.nsx-vitals{font-family:var(--nsx-mono);font-size:12px;margin-top:10px;background:rgba(0,0,0,.3);border:1px solid var(--nsx-line);border-radius:10px;padding:10px 12px;min-width:220px;max-width:280px}
.nsx-vitals__hd{color:var(--nsx-muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px;margin-bottom:8px}
.nsx-vitals__row{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid var(--nsx-line);color:var(--nsx-muted)}
.nsx-vitals__row:first-of-type{border-top:0}
.nsx-vitals__row b{font-weight:600;color:var(--ns-heading,#eaf1f8)}
.nsx-vitals__row.nsx-na b{color:var(--nsx-muted)}

/* 7 · depth gauge */
.nsx-depth{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.nsx-depth.is-deep{opacity:.85}
.nsx-depth__track{width:4px;height:150px;background:var(--nsx-line);border-radius:2px;overflow:hidden;position:relative}
.nsx-depth__fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--nsx-gold),color-mix(in srgb,var(--nsx-gold) 30%,transparent))}
.nsx-depth__num{font-family:var(--nsx-mono);font-size:10px;color:var(--nsx-gold);letter-spacing:.05em}
@media(max-width:900px){.nsx-depth{display:none}}

/* 2b · speed race */
.nsx-race{font-family:var(--nsx-mono);max-width:640px;margin:0 auto}
.nsx-race__lane{display:grid;grid-template-columns:1fr 3fr auto;gap:12px;align-items:center;margin:12px 0;font-size:13px;color:var(--nsx-muted)}
.nsx-race__name{white-space:nowrap}
.nsx-race__bar{height:14px;background:rgba(0,0,0,.28);border:1px solid var(--nsx-line);border-radius:7px;overflow:hidden}
.nsx-race__bar i{display:block;height:100%;width:0;border-radius:7px;transition:width .05s linear}
.nsx-race__lane--slow .nsx-race__bar i{background:#6b7a8c}
.nsx-race__lane--fast .nsx-race__bar i{background:var(--nsx-gold)}
.nsx-race__t{color:var(--ns-heading,#eaf1f8);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}
.nsx-race__lane--fast.nsx-race__lane--fast .nsx-race__t,.nsx-race.fast-done .nsx-race__lane--fast .nsx-race__t{color:var(--nsx-good)}
.nsx-race__scrub{width:100%;accent-color:var(--nsx-gold);margin-top:6px}
.nsx-race__hint{font-size:12px;color:var(--nsx-muted);margin-top:8px;text-align:center}

/* 1 · instant audit */
.nsx-audit{max-width:680px;margin:0 auto;font-family:var(--ns-body,inherit)}
.nsx-audit__label{display:block;font-family:var(--nsx-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--nsx-gold);margin-bottom:8px}
.nsx-audit__row{display:flex;gap:10px;flex-wrap:wrap}
.nsx-audit__url{flex:1;min-width:200px;background:rgba(0,0,0,.3);border:1px solid var(--nsx-line);border-radius:10px;padding:14px 16px;color:var(--ns-heading,#eaf1f8);font-size:16px;font-family:var(--nsx-mono)}
.nsx-audit__url:focus{outline:2px solid var(--nsx-gold);outline-offset:1px}
.nsx-audit__note{font-size:12.5px;color:var(--nsx-muted);margin:10px 0 0}
.nsx-audit__stage{margin-top:20px}
.nsx-audit__term{background:rgba(0,0,0,.42);border:1px solid var(--nsx-line);border-radius:12px;overflow:hidden;font-family:var(--nsx-mono);font-size:13px}
.nsx-audit__bar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--nsx-line)}
.nsx-audit__bar i{width:10px;height:10px;border-radius:50%;background:#2a3b4f}
.nsx-audit__bar span{margin-left:8px;color:var(--nsx-muted);font-size:11px}
.nsx-audit__log{padding:14px 16px;max-height:200px;overflow:auto;line-height:1.9;color:var(--nsx-muted)}
.nsx-audit__log .nsx-p{color:var(--nsx-gold)}
.nsx-audit__msg{font-family:var(--nsx-mono);padding:12px 0;color:var(--nsx-muted)}
.nsx-audit__result{border:1px solid var(--nsx-line);border-radius:14px;background:var(--nsx-panel);overflow:hidden}
.nsx-audit__head{display:flex;align-items:center;gap:18px;padding:22px;border-bottom:1px solid var(--nsx-line)}
.nsx-audit__score{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;flex:none}
.nsx-audit__score span{width:58px;height:58px;border-radius:50%;background:var(--nsx-panel);display:grid;place-items:center;font-family:var(--ns-head,sans-serif);font-weight:700;font-size:24px;color:var(--ns-heading,#eaf1f8)}
.nsx-audit__grade{font-family:var(--ns-head,sans-serif);font-weight:700;font-size:20px;color:var(--ns-heading,#eaf1f8)}
.nsx-audit__rurl{font-family:var(--nsx-mono);font-size:12px;color:var(--nsx-muted);word-break:break-all}
.nsx-audit a.ns-btn--gold,.ns-prose .nsx-audit a.ns-btn--gold{color:#10151d;text-decoration:none}
.nsx-audit__disc{font-family:var(--nsx-mono);font-size:11.5px;line-height:1.6;color:var(--nsx-muted);padding:2px 22px 0}
.nsx-audit__checks{padding:8px 22px}
.nsx-audit__check{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--nsx-line)}
.nsx-audit__check:first-child{border-top:0}
.nsx-audit__check b{color:var(--ns-heading,#eaf1f8);font-size:14px}
.nsx-audit__check p{margin:3px 0 0;color:var(--nsx-muted);font-size:13px;line-height:1.5}
.nsx-audit__mk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--nsx-mono);font-size:12px;font-weight:700}
.nsx-audit__check.nsx-good .nsx-audit__mk{background:color-mix(in srgb,var(--nsx-good) 20%,transparent);color:var(--nsx-good)}
.nsx-audit__check.nsx-warn .nsx-audit__mk{background:var(--nsx-gold-soft,rgba(201,164,92,.14));color:var(--nsx-gold)}
.nsx-audit__check.nsx-bad .nsx-audit__mk{background:rgba(212,125,107,.18);color:#d47d6b}
.nsx-audit__cta{padding:20px 22px;border-top:1px solid var(--nsx-line);background:rgba(0,0,0,.14)}
.nsx-audit__cta p{margin:0 0 12px;color:var(--nsx-muted);font-size:14px}

/* 8 · telemetry strip */
.nsx-telemetry{font-family:var(--nsx-mono);font-size:11px;letter-spacing:.03em;color:var(--nsx-muted);text-align:center;padding:14px 16px;opacity:.7;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nsx-telemetry b{color:var(--nsx-gold);font-weight:600}
.nsx-telemetry__k{color:var(--nsx-gold)}
.nsx-telemetry__dot{color:var(--nsx-line)}

@media (prefers-reduced-motion:reduce){
  .ns-speedbadge,.ns-analyze .nsx-cur,.ns-speedbadge .nsx-dot,.nsx-race__bar i,
  .ns-faq.is-enh .ns-faq__q,.ns-faq.is-enh .ns-faq__q + .ns-faq__a,.nsx-depth{transition:none;animation:none}
}
