/* ---------- Side panel (focused mini-DAG) ---------- */

.panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(820px, 95vw);
    height: 100vh;
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    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); }

/* Drag-handle gutter on the left edge of the panel. Sits fully INSIDE
   the panel (the panel itself has overflow:hidden and would otherwise
   clip it), with z-index:3 so it floats above both the header and the
   scrolling body. A faint default stripe + double chevron glyph make
   it discoverable; hovering or actively dragging brightens it.
   Double-click resets to the default width. */
.panel-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 3;
    background: var(--line);
    transition: background 0.12s, opacity 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panel-resize-handle::before {
    content: "⋮⋮";
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    letter-spacing: -2px;
    pointer-events: none;
}
.panel-resize-handle:hover,
body.panel-resizing .panel-resize-handle {
    background: var(--accent);
}
.panel-resize-handle:hover::before,
body.panel-resizing .panel-resize-handle::before {
    color: #ffffff;
}
/* While a drag is in progress, suppress text selection and force
   the resize cursor everywhere — otherwise dragging fast across
   the page picks up arbitrary text selections. */
body.panel-resizing,
body.panel-resizing * {
    user-select: none !important;
    cursor: ew-resize !important;
}

.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);
}

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

/* 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-close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

#panel-close:hover { color: var(--fg); }

.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;
}