/* The .name-col wrapper holds the toggle and the AS pill, and
   claims the flex-grow slot so the four numeric columns on the
   right line up vertically across all nesting depths — every .row
   ends at the same right edge regardless of how deeply nested. */
.name-col {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Numeric columns: fixed width, right-aligned tabular numerals so
   thousands separators align cleanly down each column. */
.col {
    flex: 0 0 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 4px;
}

.col-empty { color: var(--muted); }
.col-accepted { color: var(--accent); }
.col-rejected { color: var(--rejected); }

/* Column-header row above the tree — same right-edge layout as
   each .row so labels line up with values. */
.tree-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 600;
}
.tree-header .col { color: var(--muted); }
.tree-header .name-col { padding-left: 22px; }

.row.is-root {
    background: var(--accent-soft);
    font-weight: 600;
}

.toggle {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--muted);
    font-family: monospace;
    cursor: pointer;
    flex-shrink: 0;
}

.row.is-leaf .toggle { color: transparent; cursor: default; }

.aspill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 4px;
    border-radius: 4px;
    cursor: pointer;
}

.aspill:hover { background: var(--accent-soft); }

.row.is-root .aspill { cursor: default; }
.row.is-root .aspill:hover { background: transparent; }

.asn {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.asname { color: var(--fg); }
.asname.empty { color: var(--muted); font-style: italic; }

/* Org-level holder name (CAIDA) shown to the right of the AS pill.
   Muted + smaller so it reads as supplementary metadata next to the
   technical handle. min-width:0 + ellipsis keeps very long org names
   from pushing the numeric columns out of alignment on narrow rows. */
.asholder {
    color: var(--muted);
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.counts {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.count-pill {
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}

.count-pill.rejected { background: var(--rejected-soft); color: var(--rejected); }
.count-pill.origin { background: var(--origin-soft); color: var(--origin); }

.count-pill.multipath {
    background: var(--multipath-soft);
    color: var(--multipath);
    cursor: pointer;
}

.count-pill.multipath:hover { filter: brightness(0.95); }

.prefix-block {
    margin: 4px 0 8px 22px;
    padding: 8px 12px;
    background: var(--bg);
    border-left: 2px solid var(--origin);
    border-radius: 0 4px 4px 0;
}

.prefix-block h4 {
    margin: 0 0 4px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.prefix-block h4.rejected { color: var(--rejected); }

.prefix-list {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    column-width: 14em;
    column-gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prefix-list li { break-inside: avoid; padding: 1px 0; }
.prefix-list li.rejected { color: var(--rejected); }
.prefix-list .prefix-holder {
    color: var(--muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    margin-left: 0.4em;
}
.prefix-list li.rejected .prefix-holder { color: var(--rejected); opacity: 0.75; }
/* "via X.X.X.X" — the BGP peer interface IP(s) that delivered the
   route. Monospace + slightly muted so it sits next to the holder
   without competing for attention. Multiple IPs are joined with
   middle-dots inline. */
.prefix-list .prefix-peer {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    margin-left: 0.4em;
}
.prefix-list li.rejected .prefix-peer { color: var(--rejected); opacity: 0.75; }