/* ============================================================
   .uk-tool-result — proposed canonical tool-result subsystem (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the legacy `_results.blade.php` partial's CSS surface across
   `public/css/style.css`:

     .tool-results-preview        -> .uk-tool-result
     .tool-placeholder            -> .uk-tool-result-placeholder
       -title / -subtitle / -features / li / li svg / li strong
                                  -> .uk-tool-result-placeholder-{title,subtitle,features}
     .results-summary-bar         -> .uk-tool-result-summary
     .summary-status              -> .uk-tool-result-summary-status
     .summary-dot[.success/.warning/.unreachable/.error/.loading]
                                  -> composes with .uk-dot from badges.css
     .summary-count               -> .uk-tool-result-summary-count
     .summary-metrics             -> .uk-tool-result-summary-metrics
     .results-header              -> .uk-tool-result-header
     .results-grid                -> .uk-tool-result-grid
     .result-card[.success/.warning/.unreachable/.error/.loading]
                                  -> .uk-tool-result-card[--success/--warning/--unreachable/--error/--loading]
     .result-card-label           -> .uk-tool-result-card-label
     .result-location             -> .uk-tool-result-card-location
     .result-status               -> .uk-tool-result-card-status
     .result-time                 -> .uk-tool-result-card-time
     .result-dns / .result-dns-text + ::before / ::after tooltip
                                  -> .uk-tool-result-card-dns + .uk-tool-result-card-dns-text
     .skeleton-bar / -label / -location / -status / -time
                                  -> .uk-tool-result-skeleton-bar + width modifiers
     .whois-output + pre          -> .uk-tool-result-whois + pre
     .ssl-output                  -> .uk-tool-result-ssl
     .ssl-summary-card            -> .uk-tool-result-ssl-card
     .ssl-summary-header          -> .uk-tool-result-ssl-header
     .ssl-status-pill / .ssl-expiry-chip + tone classes
                                  -> composes with .uk-badge from badges.css
                                     (--success/--warning/--error/--maintenance, --pill, --uppercase, --bordered)
     .ssl-summary-fields / .ssl-field / dt / dd
                                  -> .uk-tool-result-ssl-fields / -field
     .ssl-badges / .ssl-badge / -pass / -fail
                                  -> composes with .uk-badge (--pill, --success / --error)
                                     OR uses native .uk-tool-result-ssl-badges container
     .ssl-error                   -> .uk-tool-result-ssl-error

   All raw rgba() colour values from the legacy SSL pills (random green/yellow/orange/red
   hex triplets that did not match the brand palette) collapse onto brand tokens
   (var(--color-success-rgb), --color-warning-rgb, --color-error-rgb,
   --color-maintenance-rgb). Single source of truth.

   Composes with: .uk-dot (Badges section, summary status dot), .uk-badge
   (Badges section, ssl pills + badges).

   No radial-gradient. No JS. The legacy `main.js` writes inner HTML / toggles
   visibility on these IDs as it does today; only class names will change at
   migration time (Phase 3).
   ============================================================ */

/* ============================================
   Root — outer card wrap for the whole results area
   ============================================ */
.uk-tool-result {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
}

/* ============================================
   Placeholder — empty state shown before any check is run
   ============================================ */
.uk-tool-result-placeholder {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.uk-tool-result-placeholder-title {
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    font-size: var(--font-xl);
    font-weight: 600;
    line-height: var(--line-snug);
}

.uk-tool-result-placeholder-subtitle {
    margin: 0 0 var(--space-xl);
    color: var(--color-text-muted);
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
}

.uk-tool-result-placeholder-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.uk-tool-result-placeholder-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-normal);
}

.uk-tool-result-placeholder-features li svg {
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
    margin-top: 1px;
    stroke: var(--color-primary);
    opacity: 0.7;
}

.uk-tool-result-placeholder-features li strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ============================================
   Summary bar — status + count + metrics row above the grid
   ============================================
   Status dot composes with .uk-dot from badges.css; consumer picks
   tone via .uk-dot--success / --warning / --error / --muted, plus
   --glow for the soft halo and --pulse for the loading state.
   ============================================ */
.uk-tool-result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.uk-tool-result-summary-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    font-size: var(--font-md);
}

.uk-tool-result-summary-count {
    color: var(--color-text);
}

.uk-tool-result-summary-metrics {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Header — title + "View full results" action
   ============================================ */
.uk-tool-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    color: var(--color-text);
    font-weight: 500;
    font-size: var(--font-md);
}

/* ============================================
   Grid — auto-fit cards (one card per monitoring location)
   ============================================
   Tighter floor than .uk-grid-cards--compact (220) because each card here
   is intentionally chip-density (location label + RTT + dns).
   ============================================ */
.uk-tool-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md);
}

/* ============================================
   Card — single-location result tile
   ============================================ */
.uk-tool-result-card {
    padding: var(--space-md);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-border);
    text-align: center;
}

.uk-tool-result-card--success     { border-left-color: var(--color-success); }
.uk-tool-result-card--warning     { border-left-color: var(--color-warning); }
.uk-tool-result-card--unreachable { border-left-color: var(--color-text-muted); }
.uk-tool-result-card--error       { border-left-color: var(--color-error); }

.uk-tool-result-card-label {
    margin-bottom: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.uk-tool-result-card--success     .uk-tool-result-card-label { color: var(--color-primary); }
.uk-tool-result-card--warning     .uk-tool-result-card-label { color: var(--color-warning); }
.uk-tool-result-card--unreachable .uk-tool-result-card-label { color: var(--color-text-muted); }
.uk-tool-result-card--error       .uk-tool-result-card-label { color: var(--color-error); }

.uk-tool-result-card-location {
    margin-bottom: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-xs);
}

.uk-tool-result-card-status {
    margin-bottom: var(--space-xs);
    color: var(--color-success);
    font-size: var(--font-md);
    font-weight: 600;
}

.uk-tool-result-card--warning     .uk-tool-result-card-status { color: var(--color-warning); }
.uk-tool-result-card--unreachable .uk-tool-result-card-status { color: var(--color-text-muted); }
.uk-tool-result-card--error       .uk-tool-result-card-status { color: var(--color-error); }

.uk-tool-result-card-time {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-variant-numeric: tabular-nums;
}

/* DNS hostname row with hover tooltip showing full host */
.uk-tool-result-card-dns {
    position: relative;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    cursor: default;
}

.uk-tool-result-card-dns-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline dotted;
    text-decoration-color: rgba(var(--color-primary-rgb), 0.4);
    text-underline-offset: 2px;
}

.uk-tool-result-card-dns::after {
    content: attr(data-full);
    position: absolute;
    bottom: calc(100% + var(--space-sm));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-xs) var(--space-sm);
    max-width: 260px;
    width: max-content;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    white-space: normal;
    word-break: break-all;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 10;
}

.uk-tool-result-card-dns::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-bg-elevated);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 10;
}

.uk-tool-result-card:has(.uk-tool-result-card-dns:hover) {
    position: relative;
    z-index: 10;
}

.uk-tool-result-card-dns:hover::before,
.uk-tool-result-card-dns:hover::after {
    opacity: 1;
}

/* ============================================
   Loading state — skeleton-bar shimmer
   ============================================ */
.uk-tool-result-card--loading {
    border-left-color: var(--color-border);
    animation: uk-tool-result-pulse 1.5s ease-in-out infinite;
}

@keyframes uk-tool-result-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

.uk-tool-result-skeleton-bar {
    background: var(--color-border);
    border-radius: var(--radius-sm);
}

.uk-tool-result-skeleton-bar--label    { width: 50%; height: var(--font-xs);  margin: 0 auto var(--space-xs); }
.uk-tool-result-skeleton-bar--location { width: 70%; height: var(--font-xs);  margin: 0 auto var(--space-xs); }
.uk-tool-result-skeleton-bar--status   { width: 45%; height: var(--font-md);  margin: 0 auto var(--space-xs); }
.uk-tool-result-skeleton-bar--time     { width: 35%; height: var(--font-sm);  margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .uk-tool-result-card--loading { animation: none; }
}

/* ============================================
   WHOIS output — mono pre block
   ============================================ */
.uk-tool-result-whois {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    overflow-x: auto;
}

.uk-tool-result-whois pre {
    margin: 0;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    line-height: var(--line-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================
   SSL output — certificate summary card
   ============================================
   Status pills and badges compose with .uk-badge from badges.css.
   This file owns only the layout (card, header row, fields grid, error
   slot). Tone colour comes from .uk-badge tone modifiers — single
   source of truth for status colours.
   ============================================ */
.uk-tool-result-ssl {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.uk-tool-result-ssl-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.uk-tool-result-ssl-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Fields — dl grid */
.uk-tool-result-ssl-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm) var(--space-md);
    margin: 0;
}

.uk-tool-result-ssl-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.uk-tool-result-ssl-field dt {
    color: var(--color-text-secondary);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.uk-tool-result-ssl-field dd {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Badges row inside SSL card — container only; chips are .uk-badge */
.uk-tool-result-ssl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

/* Error slot — danger-tinted callout */
.uk-tool-result-ssl-error {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(var(--color-error-rgb), 0.1);
    border: 1px solid rgba(var(--color-error-rgb), 0.3);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--font-md);
}