/* Mirror the real hero grid below: paired cards, two per row, so the loading
   skeleton lands on the same layout the rendered cards take (it used to show
   two wide cards over three narrow ones, which then reflowed on data). Scoped
   under [data-network-overview] so it beats the base .skeleton-grid 900px rule
   without depending on stylesheet order. */
[data-network-overview] .skeleton-grid--network-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-network-overview] .card-row {
    grid-template-columns: repeat(2, 1fr);
}

.network-overview__meta {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
}

@media (max-width: 640px) {
    [data-network-overview] .skeleton-grid--network-hero,
    [data-network-overview] .card-row {
        grid-template-columns: 1fr;
    }
}

.chart__line--kit,
.chart__dot--kit {
    stroke: var(--color-accent);
    fill: var(--color-accent);
}

.chart__line--kit {
    fill: none;
}

.chart__line--bitnodes,
.chart__dot--bitnodes {
    stroke: var(--color-success);
    fill: var(--color-success);
}

.chart__line--bitnodes {
    fill: none;
}

.chart__line--bitmex,
.chart__dot--bitmex {
    stroke: var(--color-series-2);
    fill: var(--color-series-2);
}

.chart__line--bitmex {
    fill: none;
}

.chart-legend__swatch--kit {
    background: var(--color-accent);
}

.chart-legend__swatch--bitnodes {
    background: var(--color-success);
}

.chart-legend__swatch--bitmex {
    background: var(--color-series-2);
}

.chart__bar--op1 {
    fill: var(--color-series-1);
}

.chart__bar--op2 {
    fill: var(--color-series-2);
}

.chart__bar--op3 {
    fill: var(--color-series-3);
}

.chart__bar--op4 {
    fill: var(--color-series-4);
}

.chart__bar--op5 {
    fill: var(--color-series-5);
}

.chart__bar--op6 {
    fill: var(--color-series-6);
}

.chart__bar--op7 {
    fill: var(--color-series-7);
}

.chart__bar--op8 {
    fill: var(--color-series-8);
}

.chart__bar--op9 {
    fill: var(--color-series-9);
}

.chart__bar--op10 {
    fill: var(--color-series-10);
}

.chart-legend__swatch--op1 {
    background: var(--color-series-1);
}

.chart-legend__swatch--op2 {
    background: var(--color-series-2);
}

.chart-legend__swatch--op3 {
    background: var(--color-series-3);
}

.chart-legend__swatch--op4 {
    background: var(--color-series-4);
}

.chart-legend__swatch--op5 {
    background: var(--color-series-5);
}

.chart-legend__swatch--op6 {
    background: var(--color-series-6);
}

.chart-legend__swatch--op7 {
    background: var(--color-series-7);
}

.chart-legend__swatch--op8 {
    background: var(--color-series-8);
}

.chart-legend__swatch--op9 {
    background: var(--color-series-9);
}

.chart-legend__swatch--op10 {
    background: var(--color-series-10);
}

.network-quality__note {
    margin-top: var(--space-2);
    line-height: var(--line-normal);
    text-align: justify;
    text-wrap: pretty;
}