/* ============================================================
   .uk-ip-latency — unified canonical IP latency widget (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the legacy declaration in tools.css:
     .ip-latency-section + -header + -progress + -intro + -message
     .ip-latency-legend + -legend--good/-ok/-bad     (lifted to .uk-badge)
     .ip-latency-table-wrapper + .ip-latency-table   (lifted to .uk-table chassis)
     .ip-latency-row + cells                         (chassis handles tbody hover)
     .ip-latency-status + .ip-latency-status-dot     (lifted to .uk-dot)
        + dot--pending/--good/--ok/--bad             (-> .uk-dot tones + --pulse)
     .ip-latency-rtt + --good/--ok/--bad/--none      (kept — tone-coded RTT text)
     .ip-latency-row--loading + .ip-latency-loading + .ip-latency-spinner
                                                     (kept — placeholder spinner state)

   Specialised data table — composes with .uk-table chassis (header, hover,
   wrap chrome). Status dots come from .uk-dot (Badges section). Legend pills
   come from .uk-badge (Badges section). Only the IP-latency-specific bits
   live in this file: section wrapper, header + progress, RTT tone-coded text
   and loading spinner.

   Slots:
     .uk-ip-latency-section          max-width centered wrapper
       .uk-ip-latency-header         flex header: title + progress
         h3                            title (consumer text, with optional SVG)
         .uk-ip-latency-progress     mono progress chip "12 of 20"
       .uk-ip-latency-intro          short body text
       .uk-ip-latency-message        warning callout (optional)
       .uk-table-wrap                (chassis from tables.css)
         <table class="uk-table uk-ip-latency">  (chassis + this file's column widths)

     Inside row:
       .uk-ip-latency-status         status row (dot + label)
         .uk-dot.uk-dot--{tone}    (Badges canonical)
       .uk-ip-latency-rtt            RTT mono numeric text
         + --good / --ok / --bad / --none tone modifiers
       .uk-ip-latency-row--loading + .uk-ip-latency-loading + -spinner
                                       placeholder spinner state
   ============================================================ */

/* ---------- Section wrapper ---------- */
.uk-ip-latency-section {
    max-width: 960px;
    margin: var(--space-xl) auto 0;
    width: 100%;
    text-align: left;
}

/* Header — title row carrying icon + label + progress chip. */
.uk-ip-latency-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.uk-ip-latency-header h3 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--line-snug);
    letter-spacing: -0.01em;
    margin: 0;
}

.uk-ip-latency-header h3 svg {
    color: var(--color-primary-light);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.uk-ip-latency-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-primary-light);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.uk-ip-latency-intro {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
    margin-bottom: var(--space-md);
}

/* Legend — its own row of uk-badge pills, sits between intro and table.
   Has a dim "Legend" label up front so the chips read as reference, not
   as inline asides hanging off the intro paragraph. */
.uk-ip-latency-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.uk-ip-latency-legend-label {
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: var(--space-xs);
}

.uk-ip-latency-message {
    font-size: var(--font-sm);
    color: var(--color-warning);
    background: rgba(var(--color-warning-rgb), 0.08);
    border: 1px solid rgba(var(--color-warning-rgb), 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

/* ---------- Status row (dot + label) ---------- */
.uk-ip-latency-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
}

/* ---------- RTT tone-coded text ---------- */
.uk-ip-latency-rtt {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.uk-ip-latency-rtt--good { color: var(--color-success); }
.uk-ip-latency-rtt--ok   { color: var(--color-warning); }
.uk-ip-latency-rtt--bad  { color: var(--color-error); }
.uk-ip-latency-rtt--none { color: var(--color-text-muted); }

/* ---------- Loading row + spinner ---------- */
.uk-ip-latency-row--loading td {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-lg);
}

.uk-ip-latency-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-md);
}

.uk-ip-latency-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--color-primary-rgb), 0.15);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ipLatencyNextSpin 0.8s linear infinite;
}

@keyframes ipLatencyNextSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .uk-ip-latency-spinner { animation: none; }
}