/* The Canon — statistics.css. The dashboard layer over tokens.css and the
   shared chrome in shell.css: a sticky glass TOC, glass "island" sections each
   holding one hue, a two-column charts grid, and the D3 network chrome.

   Every colour is a token, a color-mix() over a token, or an accent-tinted
   rgba() glow. Eight sections need eight region hues and tokens.css binds four
   accents (gold is reserved for stars and tier chrome, which this page has
   none of), so the four extras are bound here, drawn from the same candy
   register and from the chart palette in components/ColorSchemes.js, so a
   region hue is always a hue the charts inside it can also use. */

.stats-page {
    /* Region hues beyond the four project accents. Each clears 7:1 on the
       canvas, so each is safe as heading text. */
    --region-violet: #A98BFF;
    --region-teal: #46E8D0;
    --region-lime: #C3F53D;
    --region-coral: #FF6B6B;
}

/* ── Layout shell ─────────────────────────────────────────────────────────── */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4) var(--space-8);
    min-height: 100vh;
}

/* ── Sticky chrome over live charts ───────────────────────────────────────── */
/* Full-bleed saturated charts scroll under both sticky bars on this page (the
   genre treemap is a wall of candy at full width), and at the shared glass fill
   alone the nav and TOC labels lost contrast against a bright tile passing
   behind them. Both bars therefore sit on a fill that composites to a dark
   ground whatever is underneath, and keep the glass reading through the blur,
   the hairline and the inset top edge. Scoped to this page: no other page
   scrolls anything bright under its bar, so shell.css stays as it is. */
.stats-page .top-bar {
    background: linear-gradient(rgba(10, 10, 11, 0.88), rgba(10, 10, 11, 0.82)),
        var(--panel-fill-raised);
}

.stats-toc {
    position: sticky;
    top: 84px;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: center;
    margin-bottom: var(--space-6);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(rgba(10, 10, 11, 0.86), rgba(10, 10, 11, 0.80)),
        var(--panel-fill-raised);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--panel-lift), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.toc-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    border: var(--border) solid var(--panel-border);
    background: rgba(10, 10, 11, 0.55);
    white-space: nowrap;
    transition: transform var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard),
        color var(--motion-hover) var(--ease-standard);
}

.toc-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--panel-lift-high);
    border-color: var(--panel-border-bright);
    color: var(--text-primary);
}

.toc-link:active {
    transform: translateY(0) scale(0.97);
}

.toc-link.active {
    color: var(--text-on-accent);
    border-color: transparent;
}

/* ── Sections: glass islands, one hue each ────────────────────────────────── */
/* Every section sets --region once; the heading colour, the top-edge
   highlight, the panel hover glow and that section's TOC pill all read it, so
   changing a section's colour is one line. */
.stats-category {
    --region: var(--accent-tertiary);
    margin-bottom: var(--space-6);
    background: var(--panel-fill);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--panel-lift), inset 0 1px 0 color-mix(in srgb, var(--region) 30%, transparent);
    padding: var(--space-4);
    scroll-margin-top: 160px;
}

#highlights          { --region: var(--accent-tertiary); }
#medium-analysis     { --region: var(--accent-primary); }
#age-analysis        { --region: var(--region-violet); }
#genre-analysis      { --region: var(--accent-secondary); }
#timeline-analysis   { --region: var(--region-teal); }
#complexity-analysis { --region: var(--accent-quaternary); }
#title-analysis      { --region: var(--region-lime); }
#network-analysis    { --region: var(--region-coral); }

.toc-link[href="#highlights"].active          { background: var(--accent-tertiary); }
.toc-link[href="#medium-analysis"].active     { background: var(--accent-primary); }
.toc-link[href="#age-analysis"].active        { background: var(--region-violet); }
.toc-link[href="#genre-analysis"].active      { background: var(--accent-secondary); }
.toc-link[href="#timeline-analysis"].active   { background: var(--region-teal); }
.toc-link[href="#complexity-analysis"].active { background: var(--accent-quaternary); }
.toc-link[href="#title-analysis"].active      { background: var(--region-lime); }
.toc-link[href="#network-analysis"].active    { background: var(--region-coral); }

/* Section heading: crafted colour icon, then the region-coloured title. */
.stats-category h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--region);
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
    font-weight: 700;
}

.stats-category h2 .icon {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}

/* One line under each section heading saying what the section is for. The
   sections are dense enough that a title alone leaves the reader guessing. */
.section-intro {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 78ch;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: var(--border) solid var(--panel-border);
}

/* ── Charts grid ──────────────────────────────────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 1100px) {
    .charts-grid {
        grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    }
}

.chart-container {
    background: var(--panel-fill);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--panel-lift);
    padding: var(--space-3);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    transition: transform var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard);
}

/* The hover payload is the section's own colour, so bringing the cursor to a
   panel says which region it belongs to rather than only acknowledging the
   pointer. Shown unconditionally on touch, where there is no hover. */
.chart-container:hover {
    transform: translateY(-3px);
    background: var(--panel-fill-raised);
    border-color: color-mix(in srgb, var(--region) 50%, var(--panel-border));
    box-shadow: var(--panel-lift-high), 0 0 30px color-mix(in srgb, var(--region) 16%, transparent);
}

@media (hover: none) {
    .chart-container {
        border-color: color-mix(in srgb, var(--region) 32%, var(--panel-border));
    }
}

/* A panel holding the large chart variant spans both columns, as does one
   holding a network. */
.chart-container:has(.chart.large),
.chart-container:has(.network) {
    grid-column: 1 / -1;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: var(--border) solid var(--panel-border);
}

.chart-header h3 {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Scope notice ─────────────────────────────────────────────────────────── */
/* `themes` and `together` come from the film and anime sites only; the books
   site never carried either, so every chart built on them covers the films and
   anime alone. Any such chart states its real population here, above the
   canvas, rather than letting the reader take it for a claim about the whole
   canon. Tangerine because this is a caution and not a region: it reads the
   same wherever it appears. */
.chart-scope {
    margin-bottom: var(--space-2);
    padding: 10px var(--space-2);
    background: var(--panel-fill-sunken);
    border: var(--border) solid color-mix(in srgb, var(--accent-secondary) 34%, var(--panel-border));
    border-left: 3px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.chart-scope strong {
    color: var(--accent-secondary);
    font-weight: 700;
    white-space: nowrap;
}

/* ── Chart canvas holder: recessed glass, cut into its panel ───────────────── */
/* The canvas sits inside this rather than being it. Chart.js with
   responsive:true sizes a canvas to its parent, so a bare canvas in the panel
   grew to the grid row height and was clamped only by max-height, rendering
   every chart around twice its declared height. Giving it a parent with a real
   height fixes the measurement at the source. */
.chart {
    position: relative;
    height: 400px;
    padding: var(--space-2);
    background: var(--panel-fill-sunken);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.chart.large {
    height: 520px;
}

.chart > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#title-wordcloud {
    cursor: pointer;
}

.chart-description {
    margin: var(--space-2) auto 0;
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.92rem;
    max-width: 68ch;
}

/* ── Highlight cards ──────────────────────────────────────────────────────── */
/* Fixed column counts rather than auto-fit: there are eight cards, and auto-fit
   lands on six-then-two at common widths, which leaves a third of a row empty. */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

@media (max-width: 1100px) {
    .stat-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--panel-fill);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--panel-lift);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    transition: transform var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard);
}

.stat-card:hover {
    transform: translateY(-3px);
    background: var(--panel-fill-raised);
    box-shadow: var(--panel-lift-high), 0 0 26px rgba(79, 195, 255, 0.20);
    border-color: color-mix(in srgb, var(--accent-tertiary) 55%, var(--panel-border));
}

.stat-value {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--accent-tertiary);
    line-height: 1.05;
    margin-bottom: var(--space-1);
    text-shadow: 0 0 24px rgba(79, 195, 255, 0.35);
}

/* A name rather than a number: it has to fit, so it drops a size and wraps. */
.stat-value--text {
    font-size: 1.25rem;
    line-height: 1.2;
}

/* The three medium counts, each in its own medium colour, so the card reads as
   the same three colours the doughnut and the browse badges use. */
.stat-value--mix {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-size: 1.6rem;
}

.stat-mix-film  { color: var(--medium-film); }
.stat-mix-anime { color: var(--medium-anime); }
.stat-mix-book  { color: var(--medium-book); }

.stat-mix-sep {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 1.1rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.stat-sublabel {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 6px;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Zoom controls ────────────────────────────────────────────────────────── */
.zoom-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-fill-sunken);
    color: var(--region, var(--accent-primary));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard),
        color var(--motion-hover) var(--ease-standard);
}

.zoom-reset-btn:hover {
    background: var(--region, var(--accent-primary));
    color: var(--text-on-accent);
    border-color: var(--region, var(--accent-primary));
    transform: translateY(-2px);
    box-shadow: var(--panel-lift-high);
}

.zoom-reset-btn:active {
    transform: translateY(0) scale(0.97);
}

.zoom-hint {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    text-align: right;
    margin-top: var(--space-1);
    user-select: none;
}

/* ── Chord diagram sizing (canvas-based Chart.js plugin, not SVG) ──────────── */
/* Taller than the other large charts: the ring needs room for a radial label
   at top and bottom as well as left and right (see the radius calculation in
   charts/GenreAnalysisChart.js). */
.chord-diagram {
    height: 80vh;
    min-height: 640px;
    padding: var(--space-1);
}

/* ── Page footer strip ────────────────────────────────────────────────────── */
.stats-footnote {
    text-align: center;
    padding: var(--space-3);
    margin-top: var(--space-4);
    background: var(--panel-fill);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ── Connection networks (D3, SVG) ────────────────────────────────────────── */
/* Three D3 force graphs on the same base the film, anime and books sites use.
   The resting image is deliberately quiet and the detail is bought by zooming,
   hovering or pinning a node.

   Class contract with the network modules:
     .network--focusing   on the container while a node is hovered or tapped
     .network--zoomed     on the container once the zoom passes the label threshold
     .network--ego        Focus view; .network--matrix the adjacency grid
     .network-node--focus   the hovered node
     .network-node--linked  its neighbours
     .network-link--linked  the edges between them
     .network-label--linked labels of the above
     .network-label--major  labels of the top-degree nodes (shown at rest on touch) */
.network {
    position: relative;
    width: 100%;
    height: clamp(420px, 60vh, 720px);
    background: var(--panel-fill-sunken);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.network:active {
    cursor: grabbing;
}

.network > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The graph takes a moment to compute and settle; say so rather than showing a
   blank recess. Matches only while the container is still empty. */
.network:empty::after {
    content: 'Building the graph\2026';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Controls: a recessed glass bar above the graph. The thresholds are exposed
   because the graph is only legible when filtered. */
.network-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--panel-fill-sunken);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.network-control {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.network-control label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.network-control select {
    min-width: 84px;
    background: var(--panel-fill-sunken);
    color: var(--text-primary);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
}

.network-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-left: auto;
}

.network-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.network-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    border: var(--border) solid rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
}

/* A light halo stroke rather than a drop shadow: the shadow was the single
   most expensive thing on the page and at small dots bought no depth anyone
   could see. The medium ring, when there is one, sits just outside it. */
.network-node {
    cursor: pointer;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1.5;
    transition: opacity var(--motion-hover) var(--ease-standard),
        stroke var(--motion-hover) var(--ease-standard),
        stroke-width var(--motion-hover) var(--ease-standard);
}

.network-ring {
    fill: none;
    stroke-width: 2;
    opacity: 0.85;
    pointer-events: none;
    transition: opacity var(--motion-hover) var(--ease-standard);
}

/* Each edge carries a gradient between its two endpoint colours (a
   <linearGradient> per link, set as the stroke attribute by the module), so
   the stylesheet sets only opacity here; the focus rules below override the
   stroke outright when a neighbourhood is lifted. */
.network-link {
    stroke: var(--text-secondary);
    stroke-opacity: 0.32;
    stroke-linecap: round;
    fill: none;
    transition: opacity var(--motion-hover) var(--ease-standard),
        stroke-opacity var(--motion-hover) var(--ease-standard);
}

/* Invisible wide twin of every edge, so a one-pixel line can be hovered. */
.network-link-hit {
    stroke: transparent;
    stroke-linecap: round;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}

/* Hovering a node pushes the rest of the graph back so the neighbourhood is
   what is left standing. Highlight colour is near-white rather than an accent:
   the eight region hues are already spoken for on this page. */
.network--focusing .network-node,
.network--focusing .network-link {
    opacity: 0.13;
}

/* Only a label that was already showing is dimmed: dimming every label
   revealed the hidden ones at 13%, a faint wall of names under every hover. */
.network--focusing .network-label--rest,
.network--focusing.network--zoomed .network-label,
.network--focusing.network--ego .network-label {
    opacity: 0.13;
}

.network--focusing .network-node--linked,
.network--focusing .network-node--focus,
.network--focusing .network-label.network-label--linked {
    opacity: 1;
}

.network--focusing .network-node--focus {
    stroke: var(--text-primary);
    stroke-width: 2.5;
}

.network--focusing .network-link--linked {
    opacity: 1;
    stroke: var(--text-primary);
    stroke-opacity: 0.85;
}

.network--focusing .network-ring {
    opacity: 0.13;
}

.network--focusing .network-ring--linked {
    opacity: 0.95;
}

.network-link--hover {
    stroke-opacity: 1;
}

/* A legend toggle mutes a medium: pushed back further than the focus dimming,
   since it is a filter rather than a spotlight. */
.network-node--muted,
.network-ring--muted,
.network-label.network-label--muted,
.network-link--muted {
    opacity: 0.08;
    pointer-events: none;
}

.network-legend-item[data-legend] {
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding: 2px 8px 2px 4px;
    border: var(--border) solid transparent;
    transition: opacity var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard);
}

.network-legend-item[data-legend]:hover,
.network-legend-item[data-legend]:focus-visible {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-color: var(--panel-border);
    outline: none;
}

.network-legend-item.is-off {
    opacity: 0.4;
    text-decoration: line-through;
}

/* Fallback for before a module wires the classes above: hovering a node still
   pushes the rest back, so the interaction is never a bare colour swap. */
.network:not(.network--focusing):has(.network-node:hover) .network-node:not(:hover),
.network:not(.network--focusing):has(.network-node:hover) .network-link {
    opacity: 0.2;
}

/* Labels are --font-ui, never mono, and carry a canvas-coloured halo so they
   stay legible over a node or an edge. Hidden at rest where the node count
   would make a labelled graph a wall of text. */
.network-label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    fill: var(--text-primary);
    paint-order: stroke;
    stroke: rgba(10, 10, 11, 0.85);
    stroke-width: 2.5px;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-standard);
}

.network--zoomed .network-label,
.network--ego .network-label,
.network-label--rest {
    opacity: 1;
}

.network-label--major {
    font-size: 13px;
}

/* Hulls: a padded blob behind each group of related nodes, drawn as the hull
   path with a wide round-joined stroke of its own fill colour. The caption
   above it names the group's best-connected member. */
.network-hull {
    fill-opacity: 0.09;
    stroke-opacity: 0.09;
    stroke-linejoin: round;
    pointer-events: none;
    transition: fill-opacity var(--motion-hover) var(--ease-standard),
        stroke-opacity var(--motion-hover) var(--ease-standard);
}

.network--focusing .network-hull {
    fill-opacity: 0.04;
    stroke-opacity: 0.04;
}

.network-caption {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    fill: var(--text-secondary);
    paint-order: stroke;
    stroke: rgba(10, 10, 11, 0.85);
    stroke-width: 2.5px;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity var(--motion-base) var(--ease-standard);
}

.network--focusing .network-caption,
.network--zoomed .network-caption {
    opacity: 0.35;
}

/* ── Network stage: the graph beside its card ─────────────────────────────── */
.network-stage {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.network-stage .network {
    flex: 1 1 auto;
    min-width: 0;
}

.network-card {
    display: none;
    flex: 0 0 300px;
    flex-direction: column;
    height: clamp(420px, 60vh, 720px);
    overflow-y: auto;
    padding: var(--space-2) var(--space-3);
    background: var(--panel-fill-sunken);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.network-card.is-open {
    display: flex;
}

.network-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-1);
}

.network-card-title {
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
}

.network-card-close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-pill);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard);
}

.network-card-close:hover {
    color: var(--text-primary);
    border-color: var(--panel-border-bright);
}

.network-card-meta {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.network-card-section {
    margin-top: var(--space-2);
    padding-top: var(--space-1);
    border-top: var(--border) solid var(--panel-border);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.network-card-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.network-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.86rem;
    text-align: left;
    background: transparent;
    border: none;
    font-family: inherit;
}

.network-card-item--pick {
    cursor: pointer;
    transition: background-color var(--motion-hover) var(--ease-standard);
}

.network-card-item--pick:hover,
.network-card-item--pick:focus-visible {
    background: color-mix(in srgb, var(--region, var(--accent-primary)) 16%, transparent);
    outline: none;
}

.network-card-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.network-card-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-card-item-sub {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.network-card-thumb {
    flex: 0 0 28px;
    width: 28px;
    height: 42px;
    object-fit: cover;
    border-radius: 3px;
    background: var(--panel-fill);
}

.network-card-badge {
    flex-shrink: 0;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--region, var(--accent-primary)) 20%, transparent);
    color: var(--region, var(--accent-primary));
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
}

.network-card-more {
    margin: 4px 6px 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.network-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-2);
}

.network-card-action {
    text-decoration: none;
}

.network-card-action.is-primary {
    background: var(--region, var(--accent-primary));
    color: var(--text-on-accent);
    border-color: var(--region, var(--accent-primary));
}

/* ── Network controls: search, segments, range ────────────────────────────── */
.network-control-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.network-segment {
    display: inline-flex;
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--panel-fill-sunken);
}

.network-segment button {
    padding: 6px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-right: var(--border) solid var(--panel-border);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-hover) var(--ease-standard),
        color var(--motion-hover) var(--ease-standard);
}

.network-segment button:last-child {
    border-right: none;
}

.network-segment button:hover {
    color: var(--text-primary);
}

.network-segment button[aria-pressed="true"] {
    background: var(--region, var(--accent-primary));
    color: var(--text-on-accent);
}

.network-segment button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.chart-header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.network-range {
    width: 140px;
    accent-color: var(--region, var(--accent-primary));
    cursor: pointer;
}

.network-count {
    color: var(--text-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
    min-width: 11ch;
}

.network-control--detail {
    flex-wrap: wrap;
}

.network-search {
    position: relative;
}

.network-search input {
    width: 220px;
    padding: 8px 12px;
    background: var(--panel-fill-sunken);
    color: var(--text-primary);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    transition: border-color var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard);
}

.network-search input:hover {
    border-color: var(--panel-border-bright);
}

.network-search input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-dim);
    outline: none;
}

/* The list floats over the graph below, so it is opaque and lifted. */
.network-search-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 4px;
    background: var(--panel-fill-raised);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border-bright);
    border-radius: var(--radius-sm);
    box-shadow: var(--panel-lift-high);
}

.network-search-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
}

.network-search-item:hover,
.network-search-item.is-active {
    background: color-mix(in srgb, var(--region, var(--accent-primary)) 18%, transparent);
}

.network-search-hint {
    color: var(--text-secondary);
    font-size: 0.74rem;
    white-space: nowrap;
}

.tooltip .tooltip-hint {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 11px;
}

/* ── Matrix view ──────────────────────────────────────────────────────────── */
.network--matrix {
    cursor: default;
}

.network-matrix-band {
    opacity: 0.1;
}

.network-matrix-grid {
    stroke: var(--panel-border);
    stroke-width: 1;
}

.network-matrix-cell {
    cursor: pointer;
    transition: opacity var(--motion-hover) var(--ease-standard);
}

.network-matrix-cell.is-dim {
    opacity: 0.25;
}

.network-matrix-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--motion-hover) var(--ease-standard);
}

.network-matrix-label:hover,
.network-matrix-label.is-active {
    fill: var(--text-primary);
    text-decoration: underline;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container {
        padding: var(--space-2) var(--space-2) var(--space-6);
    }

    .stats-toc {
        gap: 6px;
        padding: var(--space-2);
        top: 76px;
    }

    .stats-category {
        padding: var(--space-3);
        margin-bottom: var(--space-4);
        scroll-margin-top: 150px;
    }

    .stats-category h2 {
        gap: var(--space-1);
        font-size: 1.3rem;
    }

    .network-stage {
        flex-direction: column;
    }

    .network-card {
        flex-basis: auto;
        height: auto;
        max-height: 320px;
    }

    .network-search input {
        width: 100%;
    }

    .network-control--search,
    .network-search {
        width: 100%;
    }

    .toc-link {
        font-size: 0.85rem;
        padding: 5px 12px;
    }

    .charts-grid {
        gap: var(--space-2);
    }

    .chart-container {
        padding: var(--space-2);
        overflow-x: auto;
    }

    .chart {
        min-height: 320px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--space-2);
        min-width: 320px;
    }

    .chart.large {
        min-height: 420px;
        min-width: 100%;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .chart-header h3 {
        font-size: 1rem;
    }

    .chord-diagram {
        height: 70vh;
        min-height: 440px;
    }
}

@media (max-width: 480px) {
    .stats-category {
        padding: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .chart {
        padding: var(--space-2);
        min-height: 260px;
    }

    .chart.large {
        min-height: 320px;
    }

    .stats-category h2 {
        font-size: 1.2rem;
    }

    .chart-header h3 {
        font-size: 0.95rem;
    }

    .chart-description {
        font-size: 0.85rem;
    }

    .stat-value {
        font-size: 1.7rem;
    }

    .stat-value--mix {
        font-size: 1.25rem;
    }

    .stats-footnote {
        padding: var(--space-2);
        font-size: 0.85rem;
    }

    .chord-diagram {
        height: 60vh;
        min-height: 340px;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .chart {
        min-height: 260px;
    }

    .chart.large {
        min-height: 320px;
    }
}