/* Statistics pages (/statistics and /statistics/*).
   Relies on shared.css for .container, .content-box, .cut-corner, .page-title,
   .page-intro, .contact-chip and .CTA. Only the category selector, the stat
   tiles, the chart panels and the data tables live here. */

/* Horizontal category selector. Scrolls sideways where the row nearly fits;
   on a phone it becomes a grid instead (see the narrow-screen block at the
   bottom of this file), because a scrolling row there shows two chips and
   hides the other four - the one for the page you are on included. */
.ToTop {
    background-color: #7d2128;
    display: flex;
}

.stats-nav {
    display: flex;
    gap: 8px;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 6px 2px 12px;
    margin: 0 auto clamp(16px, 3vw, 26px);
    width: 100%;
    scroll-snap-type: x proximity;
}

.stats-nav__item {
    flex: 1 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background-color: rgba(4, 5, 5, 0.75);
    border: 2px solid rgba(125, 33, 40, 0.45);
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.stats-nav__item:hover {
    background-color: rgba(125, 33, 40, 0.35);
    border-color: #7d2128;
    transform: translateY(-2px);
}

.stats-nav__item[aria-current="page"] {
    background-color: #7d2128;
    border-color: #7d2128;
}

.stats-updated {
    margin: 0 auto clamp(16px, 3vw, 24px);
    font-size: 0.9rem;
    opacity: 0.85;
    text-align: center;
}

.stats-content {
    display: grid;
    /* One column that is never allowed to grow past the page. A grid track sized
       `auto` takes the widest item's min-content width as its floor, and a panel
       holding a wide data table has a min-content width of several hundred
       pixels - enough to drag the whole page sideways on a phone. Pinning the
       track to `minmax(0, 1fr)` makes the panels fit the page and leaves the
       scrolling to .stats-table__scroll, which is built for it. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 3vw, 28px);
    width: 100%;
    margin-bottom: clamp(24px, 4vw, 40px);
}

.stats-message {
    margin: 0;
    padding: 28px 18px;
    text-align: center;
}

/* Jump list of the page's own sections, above them. Same numbered-chip pattern
   as the FAQ contents (.faq-toc), so the two read as one site. */
.stats-toc {
    padding: clamp(18px, 3vw, 28px);
    text-align: left;
}

/* The list folds into its own heading. It is open on a wide screen, where it
   looks exactly as it did before this was a <details>, and closed on a phone,
   where sixteen entries are two screens of scrolling before the first chart.
   The open state is set from statistics.ts; here the default triangle only has
   to go, so the heading keeps its own shape. */
.stats-toc__box > summary {
    list-style: none;
    cursor: pointer;
}

.stats-toc__box > summary::-webkit-details-marker {
    display: none;
}

.stats-toc__box > summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.stats-toc__title {
    /* shared.css pads every h2 as a page heading; this one caps a box. */
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-bottom: 3px solid #7d2128;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    letter-spacing: 0.3px;
}

.stats-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: stats-toc;
    display: grid;
    gap: 10px 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.stats-toc__list li {
    counter-increment: stats-toc;
}

.stats-toc__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    height: 100%;
    padding: 10px 14px;
    background-color: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(125, 33, 40, 0.5);
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stats-toc__link::before {
    content: counter(stats-toc) ".";
    color: #e7b7bb;
    font-variant-numeric: tabular-nums;
}

.stats-toc__link:hover,
.stats-toc__link:focus-visible {
    background-color: #7d2128;
    border-color: #7d2128;
}

/* The anchor lands clear of the viewport edge, as the FAQ's headings do. */
.chart-panel {
    scroll-margin-top: 20px;
}

/* Caveats belonging to the tile row above, not a panel of their own. */
.stats-caption {
    margin: -8px 0 0;
    padding: 0 2px;
    font-size: 0.88rem;
    line-height: 1.55;
    opacity: 0.85;
    text-align: left;
}

/* Stat tiles. Four per row on desktop, matching the tools roster. */
.stats-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 20px);
}

@media (max-width: 1180px) {
    .stats-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .stats-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Two per row is where the phone stops: a single column turns the thirteen
   tiles of the overview into a screen and a half of scrolling before the first
   chart, and the numbers are short enough to sit side by side. */
@media (max-width: 520px) {
    .stats-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stats-tile {
        min-height: 104px;
        padding: 14px 10px;
    }

    .stats-tile__label {
        font-size: 0.76rem;
        letter-spacing: 0.3px;
    }
}

/* Below this the two columns would be narrower than the longest value. */
@media (max-width: 360px) {
    .stats-tiles {
        grid-template-columns: minmax(0, 1fr);
    }
}

.stats-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: clamp(16px, 2vw, 22px) 14px;
    text-align: center;
    min-height: 120px;
}

.stats-tile__value {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.stats-tile__label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.35;
}

.stats-tile__hint {
    font-size: 0.8rem;
    opacity: 0.85;
}

.chart-panel {
    padding: clamp(18px, 3vw, 28px);
    text-align: left;
}

.chart-panel h3 {
    margin: 0 0 6px;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    border-bottom: 3px solid #7d2128;
    padding-bottom: 8px;
    letter-spacing: 0.3px;
}

/* The heading and its copy-link mark share a line; the mark keeps to the end of
   the title rather than the end of the panel, so it reads as part of the
   heading and not as a control floating in the corner. */
.chart-panel__heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.chart-panel__anchor {
    position: relative;
    flex: none;
    font-size: 0.72em;
    line-height: 1;
    text-decoration: none;
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out;
}

.chart-panel__anchor:hover,
.chart-panel__anchor:focus-visible {
    opacity: 1;
}

.chart-panel__anchor:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* The confirmation replaces nothing and moves nothing: it is drawn beside the
   mark for a moment and then gone. */
.chart-panel__anchor.is-copied,
.chart-panel__anchor.is-failed {
    opacity: 1;
}

.chart-panel__anchor.is-copied::after,
.chart-panel__anchor.is-failed::after {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    border: 1px solid rgba(125, 33, 40, 0.75);
    border-radius: 4px;
    background-color: rgba(4, 5, 5, 0.96);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
}

.chart-panel__anchor.is-copied::after {
    content: attr(data-copied);
    color: #d6544e;
}

.chart-panel__anchor.is-failed::after {
    content: attr(data-failed);
}

@media (prefers-reduced-motion: reduce) {
    .chart-panel__anchor {
        transition: none;
    }
}

.chart-panel__note {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* Period switch above a chart that carries more than one cut of its subject.
   Scrolls sideways rather than wrapping into a block that pushes the chart
   itself off the screen, the same way .stats-nav does. */
.chart-views {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.chart-views__item {
    appearance: none;
    cursor: pointer;
    padding: 5px 12px;
    border: 1px solid rgba(125, 33, 40, 0.55);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chart-views__item:hover {
    background-color: rgba(125, 33, 40, 0.45);
    border-color: #7d2128;
}

.chart-views__item[aria-pressed="true"] {
    background-color: #7d2128;
    border-color: #7d2128;
}

.chart-views__item:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.chart-panel__figure {
    width: 100%;
}

/* Doughnuts pair the ring with an HTML legend beside it on wide screens. */
.chart-panel__figure--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
}

/* A ring of nearly thirty slices sits where every other ring does - left of its
   legend - but takes the larger share of the row, because its smallest slices
   need the diameter. The ring is centred in its own column and against the
   legend beside it, which is a taller list than any other on the page. */
.chart-panel__figure--split-wide {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: center;
    justify-items: center;
}

.chart-panel__figure--split-wide .chart-panel__canvas--doughnut-large {
    max-width: min(100%, 820px);
}

/* One column, the way every other ring's legend reads: categories ordered by
   size, top to bottom. */
.chart-panel__figure--split-wide .doughnut-legend {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
    .chart-panel__figure--split,
    .chart-panel__figure--split-wide {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The canvas needs a fixed-height box: Chart.js with maintainAspectRatio off
   grows to its parent, and a parent that sizes to the canvas would loop. */
.chart-panel__canvas {
    position: relative;
    width: 100%;
    height: clamp(260px, 38vw, 400px);
}

.chart-panel__canvas--doughnut {
    height: clamp(230px, 26vw, 300px);
}

.chart-panel__canvas--doughnut-large {
    height: clamp(360px, 62vw, 820px);
}

.chart-panel__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.doughnut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.doughnut-legend__item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(125, 33, 40, 0.3);
    font-size: 0.94rem;
}

.doughnut-legend__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.doughnut-legend__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    align-self: center;
}

.doughnut-legend__label {
    overflow-wrap: anywhere;
}

.doughnut-legend__value {
    font-weight: 700;
    white-space: nowrap;
}

.stats-table {
    margin-top: 14px;
    font-size: 0.9rem;
}

.stats-table > summary {
    cursor: pointer;
    padding: 6px 0;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.stats-table > summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* The table and its download buttons move together: switching a chart's year
   replaces this whole block, so the files always match what is on screen. */
.stats-table__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.stats-table__actions-label {
    font-size: 0.85rem;
    opacity: 0.85;
}

.stats-table__download {
    appearance: none;
    cursor: pointer;
    padding: 4px 12px;
    border: 1px solid rgba(125, 33, 40, 0.55);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stats-table__download:hover {
    background-color: rgba(125, 33, 40, 0.45);
    border-color: #7d2128;
}

.stats-table__download:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Wide tables scroll inside their own box so the page never scrolls sideways. */
.stats-table__scroll {
    overflow-x: auto;
    margin-top: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.stats-table__scroll table {
    border-collapse: collapse;
    width: 100%;
    min-width: 320px;
}

.stats-table__scroll th,
.stats-table__scroll td {
    border: 1px solid rgba(125, 33, 40, 0.35);
    padding: 7px 12px;
    text-align: right;
    white-space: nowrap;
}

.stats-table__scroll thead th,
.stats-table__scroll tbody th {
    text-align: left;
    font-weight: 600;
}

.stats-table__scroll thead th {
    position: sticky;
    top: 0;
    background-color: rgba(125, 33, 40, 0.55);
    z-index: 1;
}

.stats-table__plain {
    font-size: 0.95rem;
}

/* ------------------------------------------------------------- narrow screens

   Everything below only fires on a phone or a small tablet. The desktop rules
   above are left alone on purpose: what changes here is the shape of the
   controls, never the shape of a chart. */

/* A tablet is wide enough to hold the chips, just not on one line: they wrap
   into two rows instead of scrolling, so the set is still all on screen. */
@media (max-width: 900px) {
    .stats-nav {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
    }

    /* Natural width, so a chip left over on the second row stays a chip rather
       than stretching across it. */
    .stats-nav__item {
        flex: 0 1 auto;
    }
}

@media (max-width: 700px) {
    /* Below this even wrapped rows come out ragged, so the chips go into a grid.
       Scrolling sideways worked on a laptop where four of the six were visible,
       but on a phone it showed two and gave no sign that the rest - or the
       current page's own chip - existed. */
    .stats-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow-x: visible;
        padding: 4px 0 10px;
    }

    .stats-nav__item {
        white-space: normal;
        padding: 11px 8px;
        font-size: 0.85rem;
        letter-spacing: 0.2px;
    }

    /* Folded up, the contents box is a heading with a chevron. */
    .stats-toc {
        padding: 14px 16px;
    }

    .stats-toc__box > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
    }

    .stats-toc__box > summary::after {
        content: "";
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        border-right: 2px solid #e7b7bb;
        border-bottom: 2px solid #e7b7bb;
        transform: translateY(-3px) rotate(45deg);
        transition: transform 0.15s ease;
    }

    .stats-toc__box[open] > summary::after {
        transform: translateY(2px) rotate(225deg);
    }

    .stats-toc__title {
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }

    .stats-toc__box[open] .stats-toc__list {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 3px solid #7d2128;
    }

    .stats-toc__link {
        padding: 12px 14px;
    }

    /* Pill-shaped controls grow to something a thumb can actually hit. */
    .chart-views__item {
        padding: 9px 14px;
        font-size: 0.86rem;
    }

    .stats-table > summary {
        padding: 10px 0;
    }

    .stats-table__download {
        padding: 9px 16px;
        font-size: 0.85rem;
    }

    /* A table wider than the phone scrolls inside its own box; the scroll stays
       in the box rather than turning into a page swipe halfway through. */
    .stats-table__scroll {
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .stats-table__scroll th,
    .stats-table__scroll td {
        padding: 7px 9px;
    }
}

.stats-note {
    margin: 0 auto clamp(20px, 4vw, 32px);
    padding: clamp(14px, 2vw, 20px);
    border: 1px solid rgba(125, 33, 40, 0.5);
    border-radius: 8px;
    background-color: rgba(4, 5, 5, 0.75);
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: left;
    width: 100%;
}