/* Anime Compass — statistics.css. The dashboard layer over tokens.css and the
   shared chrome in shell.css: a sticky glass TOC, glass "island" sections, a
   two-column charts grid, and the D3 collaboration networks. The whole page is
   the spring-green (--accent-tertiary) region; the ratings section keeps the
   tangerine (--accent-curator) it carries on the browse page. Every colour is a
   token, a color-mix()/rgba() over a token, or an accent-tinted rgba() glow. */

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

/* ── In-page TOC navigation: sticky glass bar ────────────────────────────────── */
.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: 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);
}

.toc-link {
    color: var(--text-secondary);
    text-decoration: none;
    /* Nine entries, and this page's section names run longer than the film
       site's, so 16px here wraps the last pill onto a row of its own at the
       container's full width. 12px keeps all nine on one line. */
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    border: var(--border) solid var(--panel-border);
    background: var(--panel-fill-sunken);
    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);
}

/* Hover blooms the page's region colour rather than only lifting. */
.toc-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--panel-lift-high), 0 0 18px rgba(93, 232, 140, 0.22);
    border-color: color-mix(in srgb, var(--accent-tertiary) 55%, var(--panel-border));
    color: var(--accent-tertiary);
}

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

/* The scroll spy marks the section currently in view. Both spellings are
   matched so the state renders whichever the script sets. Declared after
   :hover so an active link keeps its fill while the cursor is on it. */
.toc-link.toc-link--active,
.toc-link.active {
    background: var(--accent-tertiary);
    color: var(--text-on-accent);
    border-color: var(--accent-tertiary);
    box-shadow: 0 0 18px rgba(93, 232, 140, 0.35);
}

/* ── Section styles: glass islands ──────────────────────────────────────────── */
.stats-category {
    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 var(--accent-tertiary-dim);
    padding: var(--space-4);
    scroll-margin-top: 160px;
}

/* Collection Highlights carries no panel of its own: its eight stat cards are
   glass islands already, so the section only needs the section-level rhythm
   and the same heading treatment. Glass inside glass would flatten both. */
.stats-highlights {
    margin-bottom: var(--space-6);
    padding: 0 var(--space-1);
    scroll-margin-top: 160px;
}

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

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

/* Curator ratings are tangerine everywhere in the product, including here. */
#rating-analysis {
    box-shadow: var(--panel-lift), inset 0 1px 0 var(--accent-curator-dim);
}

#rating-analysis h2 {
    color: var(--accent-curator);
}

.toc-link[href="#rating-analysis"].toc-link--active,
.toc-link[href="#rating-analysis"].active {
    background: var(--accent-curator);
    border-color: var(--accent-curator);
    box-shadow: 0 0 18px rgba(255, 154, 60, 0.35);
}

.toc-link[href="#rating-analysis"]:hover {
    border-color: color-mix(in srgb, var(--accent-curator) 55%, var(--panel-border));
    box-shadow: var(--panel-lift-high), 0 0 18px rgba(255, 154, 60, 0.22);
    color: var(--accent-curator);
}

/* ── Charts grid: two columns above 1100px, single column below ─────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: 0;
}

@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;
    margin: 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);
}

.chart-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--panel-lift-high);
    border-color: var(--panel-border-bright);
}

/* A chart-container holding the large/wide canvas variant spans both columns,
   as does one holding a network. */
.chart-container:has(canvas.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;
}

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

.director-selector label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Recessed into their host panel: darker, tighter radius, no lift. */
.director-selector select,
.network-control select {
    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;
    transition: border-color var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard);
}

.director-selector select {
    min-width: 200px;
}

.director-selector select:hover,
.network-control select:hover {
    border-color: var(--panel-border-bright);
}

.director-selector select:focus,
.network-control select:focus {
    border-color: var(--accent-tertiary);
    box-shadow: 0 0 0 3px var(--accent-tertiary-dim);
    outline: none;
}

/* The popup list is native chrome, and Chrome paints it by laying the select's
   own translucent fill over white, which is what turned every row grey with
   white text. Each row is set on the canvas black instead, as on the browse page. */
select option {
    background: var(--canvas);
    color: var(--text-primary);
}

/* ── Crew Explorer: role then name, two dependent selects ───────────────────── */
/* Same recessed control bar as the networks use, but the two selects carry role
   and person names rather than numeric thresholds, so they share the width
   instead of sitting at the network's 84px minimum. */
.crew-explorer-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);
}

.crew-explorer-controls .network-control {
    flex: 1 1 240px;
    min-width: 0;
}

.crew-explorer-controls .network-control select {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* ── Chart canvas holder: recessed glass ────────────────────────────────────── */
.chart {
    position: relative;
    display: block;
    background: var(--panel-fill-sunken);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    height: 400px;
    /* Chart.js sizes a responsive canvas from its container and then clamps to
       the canvas's computed max-height, so the `height` above never reaches it:
       .chart-container is auto-height, which makes max-height the number that
       actually decides how tall the chart draws. A bare viewport fraction here
       therefore gives a 900px-tall bar chart on a tall monitor. Pin the cap to
       the intended height and keep the viewport term only as the short-window
       escape. */
    max-height: min(400px, 70vh);
}

.chart.large {
    height: 500px;
    max-height: min(500px, 80vh);
}

#title-wordcloud {
    cursor: pointer;
}

/* ── Collection Highlights stat 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 {
    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);
    box-shadow: var(--panel-lift-high), 0 0 24px rgba(93, 232, 140, 0.18);
    border-color: color-mix(in srgb, var(--accent-tertiary) 55%, var(--panel-border));
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-tertiary);
    line-height: 1;
    margin-bottom: var(--space-1);
    text-shadow: 0 0 22px rgba(93, 232, 140, 0.35);
}

/* A tile whose value is a phrase rather than a figure. On the numeric scale it
   wraps to two lines and shouts over the eight tiles it sits beside, which
   inverts the row's hierarchy for the one tile carrying the least weight. */
.stat-value--text {
    font-size: 1.2rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.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.85rem;
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

/* ── Zoom controls ────────────────────────────────────────────────────────── */
.zoom-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-fill-sunken);
    color: 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(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--panel-lift-high), 0 0 22px rgba(61, 224, 232, 0.35);
}

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

.zoom-hint {
    font-size: 0.85rem;
    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) ───────────── */
.chord-diagram {
    height: 80vh !important;
    max-height: 80vh !important;
    min-height: 500px;
    padding: 5px !important;
}

/* ── Collaboration networks (D3, SVG) ───────────────────────────────────────── */
/* It has to stay readable at ~600 nodes, so the resting image is deliberately
   quiet (dim links, no labels) and the detail is bought by zooming or by
   hovering 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-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;
    font-style: italic;
}

/* 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;
}

.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;
    color: var(--text-secondary);
    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 4px dots bought no depth anyone
   could see. The department 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:
   every accent is already spoken for as a role in the legend. */
.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 department: 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;
    transition: opacity var(--motion-hover) var(--ease-standard),
        background-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);
    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: at 400 nodes a labelled
   graph is 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, 12, 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 regular collaborators, 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, 12, 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(--accent-primary) 14%, 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(--accent-primary) 18%, transparent);
    color: 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;
    font-style: italic;
}

.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(--accent-primary);
    color: var(--text-on-accent);
    border-color: 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(--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(--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-tertiary);
    box-shadow: 0 0 0 3px var(--accent-tertiary-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);
    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(--accent-primary) 16%, 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 design ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container {
        padding: var(--space-2);
    }

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

    .stats-category,
    .stats-highlights {
        scroll-margin-top: 150px;
    }

    .stats-category h2,
    .stats-highlights h2 {
        gap: var(--space-1);
    }

    .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: 300px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--space-2);
        min-width: 320px;
    }

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

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

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

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

    .stats-category h2,
    .stats-highlights h2 {
        font-size: 1.3rem;
    }

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

    .stats-highlights {
        padding: 0;
        margin-bottom: var(--space-4);
    }

    /* Specific adjustments for the widest canvas-based charts */
    #genre-treemap,
    #release-timeline,
    #director-bars,
    #theme-bars {
        min-width: 100%;
        overflow-x: auto;
    }

    .chord-diagram {
        height: 70vh !important;
        min-height: 400px;
    }

    .network-controls,
    .crew-explorer-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .network-control {
        justify-content: space-between;
    }

    .network-legend {
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--space-2);
    }

    .stats-category {
        padding: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .stats-highlights {
        margin-bottom: var(--space-3);
    }

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

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

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

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

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

    .chord-diagram {
        height: 60vh !important;
        min-height: 300px;
    }
}

/* Mobile landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .chart {
        min-height: 250px;
    }

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

/* ── Touch: nothing may depend on a cursor ──────────────────────────────────── */
/* Without hover there is no way to reveal a name, so the graph's most connected
   people are labelled at rest and the drag hint replaces the grab cursor. */
@media (hover: none) {
    .network {
        cursor: default;
    }

    .network-label--major {
        opacity: 1;
    }
}