:root {
    --fg: #1c1f26;
    --muted: #5b6472;
    --bg: #fafbfc;
    --panel: #ffffff;
    --line: #e3e6eb;
    --accent: #1a4f8b;
    --accent-soft: #e7eef8;
    --rejected: #c0392b;
    --rejected-soft: #fbe9e7;
    --origin: #d97706;
    --origin-soft: #fef3c7;
    --multipath: #5e35b1;
    --multipath-soft: #ede7f6;
    /* Zebra-stripe tint for tree rows. Slightly darker than --bg so
       it reads as alternation against the page background but stays
       quiet enough not to fight with bar/pill colors. */
    --zebra: #eef1f5;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background: var(--bg);
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
}

header {
    padding: 20px 28px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

header h1 {
    margin: 0 0 4px 0;
    font-size: 20px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Inline rootbeer-mug SVG icon — sits next to the page title and
   the About modal heading so the report is visually identifiable
   as part of the ROOTBEER suite even without external assets.
   The SVG itself is inlined into the HTML so no extra logo URL has
   to resolve. */
.rootbeer-mug {
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.rootbeer-mug-large {
    width: 1.2em;
    height: 1.2em;
    margin-right: 8px;
    vertical-align: -0.18em;
}

.subtitle {
    margin: 0;
    color: var(--muted);
    max-width: 920px;
}

/* Call-to-action inviting other network operators to contribute
   their pre-policy BGP route data. Styled like the action buttons
   elsewhere on the page so it reads as an actionable affordance,
   not a static label. */
.participate-cta {
    margin: 10px 0 0;
}
.participate-cta-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: #ffffff;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    text-decoration: none;
    transition: opacity 0.12s, background 0.12s;
}
.participate-cta-btn:hover,
.participate-cta-btn:focus-visible {
    opacity: 0.85;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    text-decoration: none;
}
.participate-cta-btn::after {
    content: " ↗";
    font-size: 0.9em;
}

.legend-rejected { color: var(--rejected); font-weight: 600; }
.legend-multipath { color: var(--multipath); font-weight: 600; }
.legend-toggle { color: var(--accent); font-weight: 600; }

.legend-paths-low {
    background: #e7eef8;
    color: #1c1f26;
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid var(--line);
}
.legend-paths-high {
    background: #062041;
    color: #ffffff;
    padding: 0 4px;
    border-radius: 3px;
}

.legend-multipath-edge {
    color: #5e35b1;
    font-weight: 600;
}

.status {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
}
/* Highlight the BGP-route freshness phrase so the at-a-glance "when
   was this collected?" answer reads cleanly inside the otherwise-
   muted status line. */
.status .status-fresh {
    color: var(--fg);
    font-weight: 600;
}