/* Tabular figures for columns that must align (tables, dates, IPs). */
.tabular { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .35); border-radius: 4px; }

/* Fallback independent of Tailwind: view/tab show-hide must work even if
   the Tailwind CDN fails to load. */
.hidden { display: none !important; }

/* Payoff line under the logo — Space Grotesk, bolder/more characterful
   than the system sans used everywhere else. */
.payoff-font { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.02em; }

/* Original brand colors from assets/brand/logo.svg, unconditional — the
   site is dark-mode only, so the near-white (#F5F6F8) elements never need
   a light-surface swap. */
.brand-ink { fill: #F5F6F8; }
.brand-ink-stroke { stroke: #F5F6F8; }

/* Result view tabs (WHOIS / DNS) — segmented control. */
.tab-btn {
  padding: 0.6rem 1.5rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #8b8f99;
  transition: all .15s;
}
.tab-btn:hover { color: #fff; }
.tab-btn.active { background: #FFD200; color: #1c2434; }

/* ---- Radar ping decorative background ---- */
.ping-source { position: absolute; width: 0; height: 0; }
.ping-dot {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 9999px; background: #3987e5; box-shadow: 0 0 9px 1px rgba(57, 135, 229, .55);
}
.ping-ring {
  position: absolute; left: -1px; top: -1px; width: 2px; height: 2px;
  border-radius: 9999px; border: 1.5px solid #3987e5; opacity: 0;
  animation: pingExpand 3s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes pingExpand {
  0%   { width: 2px;   height: 2px;   left: -1px;  top: -1px;  opacity: .5; }
  100% { width: 140px; height: 140px; left: -70px; top: -70px; opacity: 0; }
}
/* Smaller/fainter variant so not every ping source reads at the same
   size — gives the field a sense of depth. */
.ping-dot.sm { width: 6px; height: 6px; left: -3px; top: -3px; }
.ping-ring.sm { animation-name: pingExpandSmall; border-color: #6ba3e8; }
@keyframes pingExpandSmall {
  0%   { width: 2px;  height: 2px;  left: -1px;  top: -1px;  opacity: .4; }
  100% { width: 80px; height: 80px; left: -40px; top: -40px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ping-ring { animation: none !important; }
}