/* ---------- Full-window focused view (focused mini-DAG) ---------- */
/*
   Selecting an AS takes over the whole viewport with the Sankey graph;
   a back arrow in the header returns to the AS list. It slides in from
   the right (translateX) so the list-to-graph transition reads as
   forward navigation. */

.panel {
    position: fixed;
    inset: 0;
    background: var(--panel);
    transform: translateX(100%);
    transition: transform 0.18s ease-out;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel.is-open { transform: translateX(0); }

.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--accent-soft);
}

.panel-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    min-width: 0;
}

.panel-title .meta {
    color: var(--muted);
    font-weight: 400;
    font-size: 13px;
    margin-left: 8px;
}

/* Tier-1 / private-ASN pills after the focused AS's name in the
   panel title. */
.panel-title .panel-t1-badge {
    background: rgba(109, 40, 217, 0.12);
    border-radius: 999px;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    text-transform: uppercase;
    vertical-align: 2px;
}
.panel-title .panel-private-badge {
    background: rgba(190, 24, 93, 0.12);
    border-radius: 999px;
    color: #be185d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* Filtered-view panel title — emphasises that the panel reflects
   a regex over every route in the topology, not a single AS. */
.panel-title .panel-filter-badge {
    background: var(--accent-soft);
    border-radius: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    text-transform: uppercase;
}
.panel-title .panel-filter-pattern {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--fg);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
    padding: 1px 6px;
}

.panel-title .meta.multipath {
    color: var(--multipath);
    font-weight: 600;
}

#panel-help {
    background: transparent;
    border: 1px solid var(--border, #c8d0dc);
    border-radius: 4px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#panel-help:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}
#panel-help:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.panel-share-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    min-width: 0;
}
.panel-share-actions .copy-qr-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    white-space: nowrap;
}
.panel-share-actions .copy-qr-btn:hover:not(:disabled) {
    opacity: 0.85;
}
.panel-share-actions .copy-qr-btn:disabled {
    background: var(--panel);
    border-color: var(--line);
    color: var(--muted);
    cursor: wait;
}
.panel-share-actions .copy-qr-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.panel-share-actions .copy-qr-status {
    color: var(--muted);
    font-size: 12px;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panel-share-actions .copy-qr-status:empty { display: none; }
.panel-share-actions .copy-qr-status.is-error { color: #b91c1c; }

/* Back arrow — returns to the AS list. Sits first in the header so it
   reads as a "back" affordance at the top-left of the full-window view. */
#panel-close {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border, #c8d0dc);
    border-radius: 4px;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    line-height: 1;
    padding: 5px 11px 5px 9px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
#panel-close .panel-back-arrow {
    font-size: 17px;
    line-height: 1;
    transform: translateY(-0.5px);
}
#panel-close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}
#panel-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.panel-body {
    flex: 1;
    overflow: auto;
    padding: 12px 18px 32px;
}

.panel-loading { color: var(--muted); font-style: italic; padding: 8px 0; }

.dag-wrap {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 12px;
}

.cy-container {
    width: 100%;
    min-height: 220px;
    background: var(--bg);
}

.sankey-container {
    width: 100%;
    min-height: 240px;
    overflow: auto;
    background: var(--bg);
}

svg.sankey {
    display: block;
    user-select: none;
}
/* Browsers default to sub-pixel-positioned text for the canvas,
   which renders the AS / AS-name labels with a soft edge —
   noticeable next to the crisp ribbons. text-rendering:
   geometricPrecision tells the browser to lay glyphs out on the
   true geometric grid (matching what a standalone SVG viewer does
   when you download the file). The font-smoothing pair removes
   the legacy macOS subpixel-AA bleed that further softens text on
   light backgrounds. */
svg.sankey text {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

svg.sankey .sankey-node {
    fill: var(--accent);
    stroke: #0d3a6e;
    stroke-width: 1;
}

svg.sankey .sankey-node.is-root {
    fill: var(--accent);
    stroke: #0d3a6e;
}

svg.sankey .sankey-node.is-focus {
    fill: var(--origin);
    stroke: #b35a04;
}

svg.sankey .sankey-link {
    fill: var(--accent);
    fill-opacity: 0.32;
    stroke: none;
    transition: fill-opacity 0.12s;
}

svg.sankey .sankey-link.rejected {
    fill: var(--rejected);
    fill-opacity: 0.42;
}

svg.sankey .sankey-link:hover { fill-opacity: 0.7; }

svg.sankey .sankey-label {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    fill: var(--accent);
    font-weight: 600;
    pointer-events: none;
}

svg.sankey .sankey-label.is-focus { fill: var(--origin); }
svg.sankey .sankey-label.is-root { fill: var(--accent); }

/* Direction-of-flow indicator below the Sankey: a label on the left
   ("Routes flow this direction") and a long arrow on the right
   spanning the rest of the diagram width. The whole bar's width is
   set inline by the renderer to match the SVG so it lines up
   visually with the chart above it. */
.sankey-flowbar {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    user-select: none;
}
.sankey-flowbar-label {
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.sankey-flowbar-track {
    flex: 1;
    position: relative;
    height: 14px;
    display: flex;
    align-items: center;
}
.sankey-flowbar-line {
    position: absolute;
    left: 0;
    right: 14px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}
.sankey-flowbar-arrow {
    margin-left: auto;
    color: var(--accent);
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

.sankey-legend {
    margin-top: 8px;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    background: var(--panel);
    border-radius: 0 0 6px 6px;
}

.sankey-legend .legend-title {
    font-weight: 600;
    color: var(--fg);
    margin-right: 6px;
}

.sankey-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fg);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    margin-right: 18px;
    margin-bottom: 4px;
}

.sankey-legend .legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15);
    display: inline-block;
}

.sankey-legend .legend-split-bar {
    display: inline-flex;
    flex-direction: column;
    width: 14px;
    height: 18px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-right: 4px;
    vertical-align: middle;
}

.sankey-legend .legend-split-acc {
    flex: 0 0 60%;
    background: var(--accent);
}

.sankey-legend .legend-split-rej {
    flex: 0 0 40%;
    background: var(--rejected);
}

/* ---------- Network page ---------- */

.controls {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.controls button {
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--fg);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.controls button:hover { border-color: var(--accent); color: var(--accent); }

.controls .back-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 8px;
}

.controls .back-link:hover { text-decoration: underline; }

.controls #status { margin-left: auto; }

main.network-main {
    padding: 0;
    height: calc(100vh - 170px);
    min-height: 480px;
}

#graph {
    width: 100%;
    height: 100%;
    background: var(--bg);
    border-top: 1px solid var(--line);
}

.network-main .edge-tip { white-space: normal; max-width: 280px; }

.edge-tip {
    position: fixed;
    background: #222;
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 200;
    white-space: nowrap;
    display: none;
}

.path-list {
    margin: 0 0 12px 0;
    padding: 0;
    list-style: none;
}

.path-list li {
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--muted);
}

.path-list li:last-child { border-bottom: none; }

.path-list .pseg {
    color: var(--fg);
    padding: 1px 3px;
    border-radius: 3px;
}

.path-list .pseg.is-focus {
    background: var(--origin-soft);
    color: var(--origin);
    font-weight: 600;
}

.path-transit-tag {
    color: var(--muted);
    font-style: italic;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
}

.panel-section-h {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 12px 0 6px 0;
}