/* Unexpected R&E Paths Explorer */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #1f2937;
    background: #f8fafc;
}

code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- top bar --- */
.topbar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #063f47;
    color: #f0fdfa;
}
.topbar h1 { font-size: 18px; margin: 0; }
.topbar .subtitle { font-size: 13px; color: #99d5cf; flex: 1 1 auto; }
.home-link { color: #99d5cf; text-decoration: none; font-size: 13px; }
.home-link:hover { color: #fff; }
.run-picker { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.run-picker select { font-size: 13px; padding: 2px 4px; }
.data-sources-btn {
    font-size: 12px;
    background: transparent;
    color: #99d5cf;
    border: 1px solid #2b6e77;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
}
.data-sources-btn:hover { color: #fff; border-color: #99d5cf; }

/* --- layout --- */
.layout { padding: 12px 16px 40px; max-width: 1200px; margin: 0 auto; }
/* --- how-to guide --- */
.howto {
    max-width: 85ch;
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.howto summary {
    cursor: pointer;
    padding: 8px 12px;
    font-weight: 600;
    color: #086b78;
}
.howto summary:hover { text-decoration: underline; }
.howto[open] summary { border-bottom: 1px solid #eef2f7; }
.howto-body { padding: 2px 16px 14px; }
.howto-body h2 { font-size: 14px; margin: 14px 0 6px; color: #1f2937; }
.howto-body p, .howto-body li, .howto-body dd { line-height: 1.5; }
.howto-body p { margin: 6px 0; }
.howto-body ul { margin: 6px 0; padding-left: 20px; }
.howto-body li { margin: 4px 0; }
.howto-cols { margin: 6px 0; }
.howto-cols dt { font-weight: 600; margin-top: 8px; }
.howto-cols dd { margin: 1px 0 0 0; color: #475569; }
.howto-table-wrap { overflow-x: auto; }
.howto-table { border-collapse: collapse; font-size: 12.5px; margin: 8px 0 4px; }
.howto-table th, .howto-table td {
    border-bottom: 1px solid #eef2f7;
    padding: 4px 10px;
    text-align: left;
    vertical-align: top;
}
.howto-table th { color: #64748b; }
.howto-table td:nth-child(2) { white-space: nowrap; text-align: center; color: #94a3b8; }
.howto-table td.counted { color: #b91c1c; font-weight: 600; }

.controls {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 13.5px;
}
.search-label { display: flex; align-items: center; gap: 6px; }
.search-label input { font-size: 13.5px; padding: 4px 8px; width: 300px; max-width: 70vw; }
.filter-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.totals { color: #64748b; margin-left: auto; }
.banner {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 13.5px;
}

/* --- table --- */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
#origins-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#origins-table th, #origins-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
    white-space: nowrap;
}
#origins-table thead th {
    background: #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 1;
}
#origins-table thead button {
    all: unset;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
}
/* Multi-column sort: every active header shows its direction and its
   priority number (1 = primary); the primary is also the aria-sort column. */
#origins-table thead th[data-sort-dir="asc"] button::after { content: " \25B4"; }
#origins-table thead th[data-sort-dir="desc"] button::after { content: " \25BE"; }
#origins-table thead th[data-sort-rank]::after {
    content: attr(data-sort-rank);
    display: inline-block;
    margin-left: 3px;
    min-width: 14px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    vertical-align: middle;
}
#origins-table thead th[data-sort-rank="1"]::after { background: #2563eb; color: #fff; }
.col-name { max-width: 340px; }
.col-name .as-name { font-weight: 600; display: block; }
.col-name .as-holder {
    display: block;
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.col-pct.pct-hot { color: #b91c1c; font-weight: 600; }
.expander {
    all: unset;
    cursor: pointer;
    color: #086b78;
    font-weight: 600;
}
.expander::before { content: "\25B8 "; color: #94a3b8; }
.expander[aria-expanded="true"]::before { content: "\25BE "; }
.expander:hover, .expander:focus-visible { text-decoration: underline; }
.origin-row:hover td { background: #f8fafc; }
.empty-row td { text-align: center; color: #94a3b8; padding: 24px; }

/* --- badges & chips --- */
.badge-re {
    background: #dcfce7;
    color: #166534;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11.5px;
    font-weight: 600;
}
.chip {
    display: inline-block;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 12px;
    background: #eef2f7;
    color: #475569;
    margin: 1px 3px 1px 0;
    white-space: nowrap;
}
.rel-provider { background: #dcfce7; color: #166534; }
.rel-peer { background: #dbeafe; color: #1e40af; }
.rel-customer { background: #fee2e2; color: #b91c1c; }
.family-ipv4 { background: #e0f2fe; color: #075985; }
.family-ipv6 { background: #ede9fe; color: #5b21b6; }
.lpp-chip.lpp-hot { background: #fee2e2; color: #b91c1c; }
.majority-chip { background: #fef3c7; color: #92400e; }
.pct-chip { background: #f1f5f9; font-weight: 600; }

/* --- expanded detail --- */
.detail-row > td { background: #f8fafc; padding: 12px 16px 16px; white-space: normal; }
.detail-box { display: flex; flex-direction: column; gap: 10px; }
.detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.detail-label { color: #64748b; font-size: 12.5px; margin-right: 6px; }
.link-chips {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.graph-link {
    color: #086b78;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
}
.graph-link:hover { text-decoration: underline; }
.detail-note { margin: 0; color: #64748b; font-size: 13px; }
.detail-error { color: #b91c1c; }
.linklike {
    all: unset;
    cursor: pointer;
    color: #086b78;
    text-decoration: underline;
}
.prefix-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
}
.prefix-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prefix-row .prefix { font-size: 13.5px; font-weight: 600; }
.prefix-holder {
    color: #64748b;
    font-size: 12px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.targets-toggle {
    all: unset;
    cursor: pointer;
    color: #086b78;
    font-size: 12.5px;
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}
.targets-toggle:hover { border-color: #086b78; }
.targets-wrap { margin-top: 8px; overflow-x: auto; }
.targets-table { border-collapse: collapse; font-size: 12.5px; min-width: 420px; }
.targets-table th, .targets-table td {
    padding: 3px 10px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
}
.targets-table th { color: #64748b; font-weight: 600; }
.muted { color: #94a3b8; }

.foot { margin-top: 10px; font-size: 12.5px; color: #94a3b8; }

@media (max-width: 720px) {
    .topbar { gap: 8px; }
    .topbar .subtitle { display: none; }
    .search-label input { width: 100%; }
    .totals { margin-left: 0; }
}