/* /learn/types-of-proxies-explained/ -- one-off styles for the four-lane
   IP-origin decision aid. Everything else on the page comes from the shared
   pxa- article system (templates/proxies/partials/article_assets.html).
   Prefix: topx- (types-of-proxies explained). Site is dark-only; colours are
   CSS variables and SVG geometry is driven by currentColor. */

.topx-figure {
    margin: 28px 0;
}

.topx-diagram-wrap {
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-secondary);
    overflow: hidden;
}

/* Narrow viewports scroll the diagram rather than shrinking it to illegibility. */
.topx-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
}

.topx-svg {
    display: block;
    width: 100%;
    min-width: 860px;
    height: auto;
}

.topx-cap {
    margin: 0;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* --- lane colours: each <g> sets currentColor, children inherit it --- */
.topx-client {
    color: var(--text-primary);
}

.topx-lane--dc {
    color: var(--text-secondary);
}

.topx-lane--isp {
    color: var(--warning);
}

.topx-lane--res {
    color: var(--success);
}

.topx-lane--mob {
    color: var(--primary);
}

/* --- geometry --- */
.topx-client rect,
.topx-box,
.topx-card {
    fill: var(--bg-tertiary);
    stroke: currentColor;
    stroke-width: 1.5;
}

.topx-card {
    fill: var(--bg-secondary);
}

.topx-badge {
    fill: var(--bg-secondary);
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.topx-fork {
    fill: none;
    stroke: var(--border);
    stroke-width: 1.5;
}

.topx-hop {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.85;
}

/* --- type --- */
.topx-svg text {
    fill: currentColor;
    font-family: var(--font-heading), system-ui, sans-serif;
}

.topx-box-t {
    font-size: 13px;
    font-weight: 600;
    text-anchor: middle;
    fill: var(--text-primary);
}

.topx-box-s {
    font-size: 10.5px;
    text-anchor: middle;
    fill: var(--text-secondary);
}

.topx-badge-t {
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
}

.topx-badge-s {
    font-size: 10px;
    text-anchor: middle;
    fill: var(--text-secondary);
}

.topx-card-h {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.topx-k {
    font-size: 11px;
    fill: var(--text-secondary);
}

.topx-v {
    font-size: 11px;
    font-weight: 600;
    text-anchor: end;
    fill: var(--text-primary);
    font-family: var(--font-mono), ui-monospace, monospace;
}

.topx-axis {
    font-size: 11px;
    fill: var(--text-secondary);
    font-style: italic;
}

@media (max-width: 720px) {
    .topx-scroll {
        padding: 12px;
    }

    .topx-cap {
        padding: 10px 12px 12px;
        font-size: 0.82rem;
    }
}