/* Movie 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 lime (--accent-tertiary) region; the ratings section keeps the crimson
   (--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;
    padding: 6px 16px;
    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(182, 232, 47, 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(182, 232, 47, 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;
}

/* Section heading: crafted colour icon, then the region-coloured title. */
.stats-category 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 {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}

/* Curator ratings are crimson 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, 77, 109, 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, 77, 109, 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;
}

/* ── 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;
    max-height: 70vh;
}

.chart.large {
    height: 500px;
    max-height: 80vh;
}

#title-wordcloud {
    cursor: pointer;
}

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

/* ── 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(182, 232, 47, 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(182, 232, 47, 0.35);
}

.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(255, 201, 60, 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) ───────────────────────────────────────── */
/* The one component with no Book Compass equivalent. 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;
}

/* Swatch colours follow ColorSchemes.getBasePalette() order; CrewNetwork.js
   colours nodes from the same source and may overwrite these via data-dept.
   Moved out of inline style="" attributes so the page can run under a CSP
   with style-src 'self'. */
.network-legend-swatch--directing      { background: #FFC93C; }
.network-legend-swatch--camera         { background: #4FA9FF; }
.network-legend-swatch--editing        { background: #B6E82F; }
.network-legend-swatch--writing        { background: #C77DFF; }
.network-legend-swatch--sound          { background: #FF4D6D; }
.network-legend-swatch--production     { background: #4ADFC4; }
.network-legend-swatch--visual-effects { background: #FF9A4D; }

/* 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 department 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 {
        scroll-margin-top: 150px;
    }

    .stats-category 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 {
        font-size: 1.3rem;
    }

    .stats-category {
        padding: var(--space-3);
        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 {
        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);
    }

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

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

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

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

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

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

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