/* === Stats panel: a page's numbers for its range, above its content ===
   Incidents (incidents/_stats.html), Members (members.html) and Protection
   (protection/_stats.html). Desktop: the v6 split card, one card cut into zones by
   hairlines (each zone padded like a card; a page sets its columns with --stats-cols).
   Inside: micro labels, a big number and its change, legends and a row per bar. Phone:
   a summary button that opens one tile per bar (js/ui.js toggles .open). */
.stats-panel { margin: 0 0 var(--gap); }
.stats-panel-card {
    display: grid;
    grid-template-columns: var(--stats-cols, minmax(250px, 300px) minmax(0, 1fr) minmax(220px, 300px));
    padding: 0;
}
.stats-panel-card.has-4 { --stats-cols: minmax(230px, 270px) minmax(0, 1fr) minmax(230px, 290px) minmax(200px, 250px); }
.stats-zone { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 15px 16px 16px; }
.stats-zone + .stats-zone { border-left: 1px solid var(--hairline); }
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }

/* The overview pieces the Members / Protection zones reuse, in the v6 voice. */
.stats-panel-card .ov-chart-score { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--label-1); }
.stats-panel .ov-chart-split { margin-top: 0; gap: 4px 14px; font-size: 12px; color: var(--label-2); }
.stats-panel .ov-chart-split b { color: var(--label-1); font-weight: 500; }
.stats-head .ov-chart-split { font-size: 12px; }
.ov-chart-split i.incidents { background: var(--accent); }
.ov-chart-split i.review { background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber); }

/* A quiet range: one slim row instead of a card of zeros. */
.stats-panel-quiet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; }
.stats-panel-quiet .preset-tabs { margin-left: auto; }

/* Narrower: two columns, the chart zone on its own row under them. */
@media (max-width: 1100px) {
    .stats-panel-card,
    .stats-panel-card.has-4 { --stats-cols: repeat(2, minmax(0, 1fr)); }
    .stats-zone-chart { grid-column: 1 / -1; grid-row: 2; }
    .stats-panel-card > .stats-zone-chart,
    .stats-panel-card.has-4 > .stats-zone:nth-child(4) { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* Phone: summary button + tiles (.overview-card), collapsed until opened. */
.stats-panel-toggle,
.stats-tiles { display: none; }
@media (max-width: 760px) {
    .stats-panel-card { display: none; }
    .stats-panel-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        /* A button, so Pico's [type=button] background beats .overview-card: the card look is set here. */
        background: var(--surface-1);
        border: 1px solid var(--hairline);
        border-radius: var(--r-card);
        color: var(--label-1);
        text-align: left;
    }
    .stats-panel-toggle:hover:not(:disabled) { transform: none; background: var(--card-hover); }
    .stats-panel-toggle .ov-chart-hero { flex: 1; min-width: 0; }
    .stats-panel-toggle .ov-chart-score { font-size: 22px; }
    .stats-panel-chevron { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; fill: none; stroke: var(--label-3); stroke-width: 2; transition: transform var(--dur-fast); }
    .stats-panel.open .stats-panel-chevron { transform: rotate(180deg); }
    .stats-panel.open .stats-tiles { display: grid; }
    .stats-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
    .stats-tiles-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .stats-tile {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        padding: 10px 12px;
        color: inherit;
        text-decoration: none;
    }
    .stats-tile.active { background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--hairline); }
    .stats-tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
    .stats-tile-top b { font-size: 18px; font-weight: 600; color: var(--label-1); font-variant-numeric: tabular-nums; }
    .stats-tile-sub { font-size: 12px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}