/* ============ SONAR (themes/sonar.js) ============ */
.skin-sonar { --so-bg: #040D15; --so-mint: #6EF5C0; --so-ink: #CFF8E6; --so-dim: #8FCBB4; --so-amber: #FFA82E; --so-bad: #FF6B5E;
  --so-mono: "DejaVu Sans Mono", Menlo, Consolas, monospace;
  background: radial-gradient(ellipse at 24% 50%, #071722 0%, var(--so-bg) 70%); color: var(--so-ink); font-family: var(--so-mono); }
.so-scope { position: absolute; inset: 0; }
.so-scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.skin-sonar.paused .so-grid { opacity: .55; }
.so-labels { position: absolute; inset: 0; pointer-events: none; transition: opacity .4s; }
.so-ct { position: absolute; left: 0; top: 0; padding: 4px 8px 6px 4px; pointer-events: auto; opacity: 0; transition: opacity .25s linear;
  font-size: 14px; line-height: 17px; white-space: nowrap; max-width: 210px; }
.so-ct b { display: block; font-weight: 400; color: #F4E9D6; overflow: hidden; text-overflow: ellipsis; }
.so-ct span { display: block; color: var(--so-amber); }

.so-tag { position: absolute; left: 10px; top: 10px; height: 30px; padding: 0 12px; border-radius: 6px; background: rgba(4, 13, 21, .82);
  display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .04em; color: var(--so-ink); }
.so-tag span { color: var(--so-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }

.so-top { position: absolute; right: 12px; top: 0; height: 60px; display: flex; align-items: center; gap: 14px; z-index: 2; }
.so-allowed { height: 48px; padding: 0 6px; font-size: 16px; color: var(--so-ink); text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
.so-style { height: 48px; padding: 0 2px; display: flex; align-items: center; }
.so-style span { height: 32px; padding: 0 14px; display: flex; align-items: center; border: 1.5px solid var(--so-ink); border-radius: 6px; font-size: 16px; }
.so-style:active span { background: var(--so-ink); color: var(--so-bg); }

.so-col { position: absolute; left: 604px; right: 14px; top: 84px; bottom: 16px; display: flex; flex-direction: column; z-index: 2; min-width: 0; }
.so-state { display: flex; align-items: center; gap: 10px; font-size: 16px; white-space: nowrap; overflow: hidden; height: 26px; --dot: #4E6A62; }
.so-state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); flex: none; }
.so-state.ok { --dot: var(--so-mint); } .so-state.warn { --dot: var(--so-amber); color: var(--so-amber); } .so-state.bad { --dot: var(--so-bad); color: var(--so-bad); }
.so-stat { margin-top: 26px; min-width: 0; }
.so-v { font-size: 30px; line-height: 34px; color: var(--so-ink); white-space: nowrap; overflow: hidden; width: 100%; }
.so-k { font-size: 15px; line-height: 19px; color: var(--so-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-k.alert { color: var(--so-bad); }
.so-pause { margin-top: 30px; align-self: flex-start; height: 48px; padding: 0 18px; border: 1.5px solid var(--so-ink); border-radius: 7px; font-size: 16px; white-space: nowrap; max-width: 100%; }
.so-pause:active { background: var(--so-ink); color: var(--so-bg); }
.so-pause.resume { border-color: var(--so-amber); color: var(--so-bg); background: var(--so-amber); font-weight: 700; }
.so-meta { margin-top: auto; font-size: 12px; color: #5E8E7E; white-space: nowrap; overflow: hidden; }

/* paused: the sweep stops and the countdown surfaces on the scope */
.so-hold { position: absolute; left: 34px; top: 298px; width: 292px; padding: 12px 16px 14px; border: 1.5px solid var(--so-amber); border-radius: 8px;
  background: rgba(4, 13, 21, .9); color: var(--so-amber); z-index: 1; display: none; }
.skin-sonar.paused .so-hold { display: block; }
.so-hk { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-hv { font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.skin-sonar.paused .so-labels { opacity: .35; }