:root {
    --bg: #f6f7f9;
    --panel: #ffffff;
    --border: #e2e5ea;
    --text: #1e2230;
    --muted: #6b7280;
    --accent: #086b78;
    --re: #1e88e5;
    --nonre: #e8923c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
}

.topbar {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 22px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.topbar h1 { font-size: 1.25rem; margin: 0; }
.home-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.subtitle { color: var(--muted); font-size: 0.85rem; }
.snapshot-picker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    align-self: center;
    color: var(--muted);
    font-size: 0.8rem;
}
.snapshot-label { font-weight: 600; white-space: nowrap; }
.snapshot-date {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    padding: 4px 8px;
}
.snapshot-date:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(8, 107, 120, 0.14);
}
.snapshot-latest {
    background: #f1f3f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--accent);
}
.snapshot-latest:hover { background: #e1f0f2; }
.data-sources-btn {
    margin-left: 0.6rem;
    align-self: center;
    background: #f1f3f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 14px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--accent);
}
.data-sources-btn:hover { background: #e1f0f2; }

.layout {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    gap: 18px;
    padding: 18px 22px;
    align-items: start;
}

.sidebar {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    position: sticky;
    top: 18px;
}
.sidebar h2 { font-size: 0.95rem; margin: 0 0 10px; }
.prefix-search {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 10px;
}
.prefix-search-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.prefix-search-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    padding: 7px 9px;
}
.prefix-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(8, 107, 120, 0.14);
}
.prefix-search-count {
    min-height: 1em;
    color: var(--muted);
    font-size: 0.72rem;
}
.prefix-search-count:empty { display: none; }

.prefix-list { display: flex; flex-direction: column; gap: 4px; }
.prefix-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 7px 8px;
    color: var(--text);
}
.prefix-item:hover { background: #eef2f5; }
.prefix-item.selected { background: #e1f0f2; border-color: var(--accent); }
.prefix-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.prefix-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.prefix-cidr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9rem; }
.prefix-count { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.prefix-name {
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prefix-whois {
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Shared whois-line internals (prefix list + detail header). */
.whois-holder { color: var(--text); }
.whois-net::before { content: " · "; color: var(--muted); }
.prefix-medians {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--muted);
}
.med { display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-re { background: var(--re); }
.dot-nonre { background: var(--nonre); }
/* Comparison glyphs: red ">" when R&E is slower, green "<" when faster. */
.pk-gt { color: #d64545; font-weight: 700; }
.pk-lt { color: #2e9e5b; font-weight: 700; }
.pk-eq { color: var(--muted); font-weight: 600; }

/* Picker key (top of the sidebar): dot legend + comparison-glyph meaning. */
.picker-key {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 10px;
    font-size: 0.72rem;
    color: var(--muted);
}
.picker-key .pk-row { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.picker-key .dot { margin-left: 2px; }
.pk-hint { margin-left: 4px; font-style: italic; }
.content {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    min-height: 540px;
    /* Let the 1fr grid track shrink below its content's min-content width so a
       wide AS-paths SVG scrolls inside .as-graph (overflow:auto) instead of
       inflating the track and pushing the header controls off the right edge. */
    min-width: 0;
}
.plot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.plot-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.plot-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.plot-whois {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    color: var(--muted);
}
.title-dns {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
}

.plot-caption {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 0 0 10px;
    line-height: 1.4;
}
.prefix-compact-panels {
    display: none;
    gap: 10px;
    align-items: stretch;
    margin: 0 0 10px;
}
.prefix-compact-panels.has-history,
.prefix-compact-panels.has-cdf {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.prefix-compact-panels.has-history.has-cdf {
    grid-template-columns: minmax(320px, 0.95fr) minmax(300px, 1.05fr);
}
.prefix-history-detail {
    margin: 0;
    padding: 10px 12px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    min-width: 0;
}
.phd-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.phd-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}
.phd-meta {
    color: var(--muted);
    font-size: 0.72rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.phd-chart {
    position: relative;
    min-width: 0;
}
.phd-chart svg {
    display: block;
    width: 100%;
    height: auto;
}
.phd-axis {
    stroke: #aeb6c2;
    stroke-width: 1.2;
}
.phd-grid {
    stroke: #e7ebf0;
    stroke-width: 1;
}
.phd-grid-base { stroke: #cfd6df; }
.phd-axis-title,
.phd-y-label,
.phd-x-label {
    fill: var(--muted);
    font-size: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.phd-y-label {
    text-anchor: end;
    dominant-baseline: middle;
}
.phd-x-label { dominant-baseline: hanging; }
.phd-x-label-end { text-anchor: end; }
.phd-tick {
    stroke: #aeb6c2;
    stroke-width: 1;
}
.phd-line {
    fill: none;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.phd-line-re { stroke: var(--re); }
.phd-line-nonre { stroke: var(--nonre); }
.phd-selected-line {
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-dasharray: 4 3;
    opacity: 0.9;
}
.phd-dot {
    stroke: var(--panel);
    stroke-width: 1.2;
}
.phd-dot-re { fill: var(--re); }
.phd-dot-nonre { fill: var(--nonre); }
.phd-hit {
    position: absolute;
    top: 22px;
    bottom: 28px;
    width: 24px;
    transform: translateX(-50%);
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.phd-hit:hover,
.phd-hit:focus-visible {
    background: rgba(8, 107, 120, 0.08);
    border-color: rgba(8, 107, 120, 0.24);
    outline: none;
}
.phd-hit.selected {
    background: rgba(8, 107, 120, 0.12);
    border-color: var(--accent);
}
.phd-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}
.phd-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.phd-legend-item::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: #9aa4b1;
}
.phd-legend-re::before { background: var(--re); }
.phd-legend-nonre::before { background: var(--nonre); }
.phd-legend-floor::before {
    height: 1px;
    background: #cfd6df;
}
.graph-rtt-summary {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(160px, 0.85fr);
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.78rem;
    min-width: 0;
}
.grs-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.grs-title {
    font-weight: 700;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.2;
}
.grs-intro {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.25;
}
.grs-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.grs-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    padding: 1px 8px;
    background: var(--panel);
    color: var(--text);
    line-height: 1.35;
}
.grs-stat strong { color: var(--accent); }
.grs-chart { min-width: 0; }
.grs-chart svg {
    display: block;
    width: 100%;
    height: auto;
}
.grs-axis {
    stroke: #aeb6c2;
    stroke-width: 1.2;
}
.grs-grid {
    stroke: #eceff3;
    stroke-width: 1;
}
.grs-grid-base { stroke-width: 1.2; }
.grs-cdf-line {
    fill: none;
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.grs-cdf-re { stroke: var(--re); }
.grs-cdf-nonre { stroke: var(--nonre); }
.grs-median-line {
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    opacity: 0.9;
    pointer-events: none;
}
.grs-median-re { stroke: var(--re); }
.grs-median-nonre { stroke: var(--nonre); }
.grs-median-label {
    font-size: 9.5px;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.grs-median-label-re { fill: var(--re); }
.grs-median-label-nonre { fill: var(--nonre); }
.grs-chart-label {
    fill: var(--muted);
    font-size: 10px;
    font-weight: 600;
}
.grs-legend-label {
    fill: var(--muted);
    font-size: 10px;
}
.grs-legend-swatch.grs-legend-re { fill: var(--re); }
.grs-legend-swatch.grs-legend-nonre { fill: var(--nonre); }
.grs-tick {
    stroke: #aeb6c2;
    stroke-width: 1;
}
.grs-tick-label {
    fill: var(--muted);
    font-size: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.grs-y-label {
    fill: var(--muted);
    font-size: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

@media (max-width: 760px) {
    .prefix-compact-panels.has-history.has-cdf {
        grid-template-columns: 1fr;
    }
    .graph-rtt-summary {
        grid-template-columns: 1fr;
    }
}

/* Scatter speed-of-light scaler. */
.scatter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--text);
    flex-wrap: wrap;
}
.sc-label { color: var(--muted); white-space: nowrap; }
.sc-label #speed-factor { color: var(--text); font-weight: 600; }
.sc-slider { flex: 1 1 180px; max-width: 320px; }
.sc-auto {
    background: #f1f3f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--accent);
}
.sc-auto:hover { background: #e1f0f2; }

.legend { display: flex; gap: 8px; }
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f3f6;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text);
    user-select: none;
}
.legend-item.off { opacity: 0.4; text-decoration: line-through; }
.swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.swatch-re { background: var(--re); }
.swatch-nonre { background: var(--nonre); }

.plot { width: 100%; height: 460px; }
.plot svg { width: 100%; height: 100%; display: block; }
/* The landing "about" panel reuses #summary but sizes to its prose. */
#summary { height: auto; }

.about-body { max-width: 760px; color: var(--text); line-height: 1.6; }
.about-body h2 { margin: 0 0 12px; font-size: 1.3rem; }
.about-body h3 {
    margin: 20px 0 6px;
    font-size: 1rem;
    color: var(--accent);
}
.about-body p { margin: 0 0 12px; }
.about-body ul { margin: 0 0 12px; padding-left: 20px; }
.about-body li { margin: 0 0 6px; }
.rtt-object-summary {
    margin: 16px 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}
.rtt-object-summary h3 {
    margin: 0 0 8px;
    color: var(--text);
}
.rtt-object-summary p { margin: 0 0 6px; }
.rtt-object-summary ul { margin-bottom: 0; }
.rtt-object-summary strong {
    color: var(--accent);
    font-size: 1.05rem;
}

.axis-line { stroke: #9aa3af; stroke-width: 1; }
.grid-line { stroke: #eceff3; stroke-width: 1; }
.tick-label { fill: var(--muted); font-size: 11px; }
.axis-title { fill: var(--text); font-size: 12px; font-weight: 600; }
.pt { cursor: pointer; stroke-width: 1.5; }
.median-line { stroke-width: 2; stroke-dasharray: 6 4; opacity: 0.85; pointer-events: none; }
.median-label { font-size: 10px; font-weight: 600; }
.diagonal-line { stroke: #b6bdc8; stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }

.plot-note { color: var(--muted); font-size: 0.82rem; margin: 8px 0 0; min-height: 1.1em; }

.tooltip {
    position: fixed;
    display: none;
    pointer-events: none;
    background: rgba(30, 34, 48, 0.95);
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.4;
    z-index: 50;
    max-width: 240px;
}
.tooltip .tip-key { color: #b8c0cc; }

.header-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.view-toggle { display: flex; gap: 4px; }
.view-btn {
    background: #f1f3f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text);
}
.view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.export-group { display: flex; align-items: center; gap: 6px; }
.export-btn {
    background: #f1f3f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--accent);
}
.export-btn:hover { background: #e1f0f2; }
.export-btn:disabled { opacity: 0.55; cursor: wait; }
.copy-qr-status {
    min-width: 72px;
    color: var(--muted);
    font-size: 0.76rem;
}
.copy-qr-status:empty { display: none; }
.copy-qr-status.is-error { color: #b91c1c; }

/* "Graph settings" button — opens the display-settings dialog. */
.settings-btn {
    background: #f1f3f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--accent);
}
.settings-btn:hover { background: #e1f0f2; }
.settings-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Graph settings — inline panel near the top of the content (not a modal),
   so the graph stays visible while it's open. */
.gs-panel-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 22px;
    margin: 0 0 10px;
    padding: 10px 36px 10px 14px;   /* room for the close × at top-right */
    background: #f7f9fb;
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
}
.gs-field { display: flex; flex-direction: column; gap: 5px; }
.gs-label { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.gs-val {
    font-weight: 400;
    color: var(--muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.74rem;
}
.gs-seg {
    display: inline-flex;
    width: fit-content;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.gs-seg-btn {
    background: #f1f3f6;
    border: none;
    border-right: 1px solid var(--border);
    padding: 4px 13px;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    color: var(--accent);
}
.gs-seg-btn:last-child { border-right: none; }
.gs-seg-btn:hover { background: #e1f0f2; }
.gs-seg-btn.active { background: var(--accent); color: #fff; }
.gs-slider { width: 150px; accent-color: var(--accent); }
.gs-link {
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: underline;
    text-align: left;
}
.gs-link:hover { color: var(--text); }
.gs-close-inline {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}
.gs-close-inline:hover { color: var(--text); }

/* "How to read this" help modal — prose explanation of the AS-path graph. */
.help-panel { max-width: 860px; }
.help-body { color: var(--text); font-size: 0.9rem; line-height: 1.55; }
.help-body h2 { margin: 0 0 10px; font-size: 1.2rem; }
.help-body h3 {
    font-size: 0.95rem;
    margin: 18px 0 6px;
    color: var(--accent);
}
.help-body p { margin: 0 0 10px; }
.help-body ul { margin: 0 0 10px; padding-left: 20px; }
.help-body li { margin: 0 0 5px; }

/* Data sources panel — provenance and age of the datasets. */
.ds-panel { max-width: 600px; }
.ds-body { color: var(--text); font-size: 0.9rem; line-height: 1.55; }
.ds-body h2 { margin: 0 0 12px; font-size: 1.2rem; }
.ds-primary {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f7f9fb;
    padding: 10px 14px;
    margin: 0 0 14px;
}
.ds-primary h3 { margin: 0 0 4px; font-size: 0.95rem; color: var(--accent); }
.ds-primary p { margin: 0; }
.ds-intro { margin: 0 0 8px; color: var(--muted); }
.ds-list { margin: 0; padding-left: 20px; }
.ds-list li { margin: 0 0 7px; }


.as-graph {
    width: 100%;
    height: clamp(560px, 72vh, 860px);
    position: relative;
    overflow: auto;
}
.as-graph svg { display: block; }
.ask-ribbon {
    fill: none;
    opacity: 0.72;
    transition: opacity 0.12s;
    stroke-linecap: butt;
}
/* Ribbon stroke is set inline (RTT-inflation colour) — no CSS stroke here, or
   it would override the presentation attribute. */
.ask-ribbon.ask-dimmed { opacity: 0.06; }
.ask-ribbon.ask-path-muted { opacity: 0.08; }
.ask-ribbon.ask-path-selected {
    opacity: 0.98;
    filter: drop-shadow(0 0 3px rgba(8, 107, 120, 0.45));
}
.ask-collapse-label {
    fill: var(--muted);
    font-size: 9px;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--panel);
    stroke-width: 3px;
    stroke-linejoin: round;
}
/* Node fill is set inline (R&E membership colour); the origin keeps its CSS
   colour. Base rule omits fill so the inline attribute wins. */
.ask-node rect { stroke: #fff; stroke-width: 1; cursor: pointer; }
.ask-node.origin rect { fill: var(--accent); stroke: #0a4a52; stroke-width: 1.5; }
.ask-node.vp rect { stroke: #2b3240; stroke-width: 1.5; }
.ask-label { font-size: 10px; fill: var(--text); pointer-events: none; }
.ask-empty { color: var(--muted); font-size: 0.85rem; padding: 16px; }

/* Sankey legend: RTT-inflation gradient (ribbons) + node-colour key. */
.ask-legend {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding: 6px 2px 10px;
    background: var(--panel);
    font-size: 0.74rem;
    color: var(--muted);
}
.ask-legend-block { display: inline-flex; align-items: center; gap: 8px; }
.ask-legend-title { font-weight: 600; color: var(--text); }
.ask-legend-end { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ask-legend-bar {
    width: 120px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(to right,
        rgb(46, 158, 91), rgb(230, 184, 0), rgb(214, 69, 69));
}
.ask-legend-node { display: inline-flex; align-items: center; gap: 4px; }
.ask-legend-swatch {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
}
.ask-sw-re { background: var(--re); }
.ask-sw-nonre { background: var(--nonre); }
.ask-sw-origin { background: var(--accent); }

/* Internet2 path and route context under the prefix title. */
.route-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin: -2px 0 12px;
    font-size: 0.8rem;
    color: var(--muted);
}
.rm-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rm-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    color: var(--muted);
}
.rm-asn {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--text);
}
.rm-origin { font-weight: 700; color: var(--accent); }
/* MOAS origin announced in BGP but not seen in any traceroute. */
.rm-origin-unseen {
    color: var(--muted);
    font-weight: 400;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
}
.rm-arrow { color: var(--muted); }
.rm-sep { color: var(--border); }
.rm-loc { color: var(--text); }

/* BGP community badges: coloured palette pill + raw value. */
.rm-comm { display: inline-flex; align-items: center; gap: 5px; }
.rm-comm-pill {
    padding: 0 6px;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #1e1e2e;
    line-height: 1.5;
}
.rm-comm-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--text);
}
/* IANA well-known community: neutral keyword pill, distinct from the coloured
   curated-palette pills. */
.rm-comm-wk {
    background: #f1f3f6;
    color: var(--text);
    border: 1px solid var(--border);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
}

/* Named AS table beneath the compact Internet2-path arrow line. */
.rm-table { border-collapse: collapse; font-size: 0.76rem; margin: 1px 0 2px; }
.rm-table td { padding: 1px 10px 1px 0; vertical-align: baseline; }
.rm-table-asn {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--text);
    white-space: nowrap;
}
.rm-table-name { color: var(--muted); }
@media (max-width: 760px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; max-height: 320px; }
    .snapshot-picker {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }
}

.m-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
}
.m-panel {
    background: var(--panel); border-radius: 10px;
    width: 92%; max-width: 640px; max-height: 84vh; overflow: auto;
    padding: 20px 22px; position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.m-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: none; font-size: 1.6rem; line-height: 1;
    cursor: pointer; color: var(--muted);
}
.m-title {
    margin: 0 4px 6px 0; font-size: 1.1rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.m-chips { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.m-chip { font-size: 0.74rem; padding: 2px 9px; border-radius: 999px; }
.m-chip-re { background: var(--re); color: #fff; }
.m-chip-nonre { background: var(--nonre); color: #fff; }
.m-chip-reached { background: #a6e3a1; color: #1e1e2e; }
.m-chip-unreached { background: #f38ba8; color: #1e1e2e; }
.m-summary { color: var(--text); font-size: 0.9rem; margin-bottom: 14px; }
.m-summary .m-k { color: var(--muted); }
table.m-trace { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.m-trace th, .m-trace td {
    text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.m-trace th { color: var(--muted); font-weight: 600; }
.m-trace td.m-ip { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.m-trace td.m-host {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--muted);
    word-break: break-all;
}
.m-masked { color: var(--muted); font-style: italic; }

/* Footer crediting the external data sources. */
.credits {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.76rem;
    color: var(--muted);
}
.credits a { color: var(--accent); text-decoration: none; }
.credits a:hover { text-decoration: underline; }

/* Ribbon-click popover listing the VP traceroutes crossing an edge. */
.ask-tracelist {
    position: fixed;
    z-index: 60;
    min-width: 200px;
    max-width: 260px;
    max-height: 320px;
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 6px;
}
.atl-head {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text);
    padding: 4px 6px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.atl-none { font-size: 0.76rem; color: var(--muted); padding: 6px; }
.atl-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 5px;
    padding: 5px 6px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--text);
}
.atl-item:hover { background: #eef2f5; }
.atl-rtt { color: var(--muted); font-variant-numeric: tabular-nums; }