/* A net's trends page (Pages/Public/Trends.cshtml), after site.css and charts.css. The charts,
   the ranked lists, the flags and the slider of months are the chart kit's; what is here is
   only this page's own: the row of numbers, the row that says which months and what is
   counted, and the two lists at the end. Written for a phone first. */

/* ── The net in numbers ──────────────────────────────────────────────────── */
/* Two across on a phone, and a last one by itself fills its row. */
.trends-counts > div { position: relative; min-width: 0; }
.trends-counts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.trends-counts span { line-height: 1.35; }
/* How the average stands against the sessions before: its own line under the label. */
.trends-counts em { display: block; font-style: normal; color: var(--muted); }
.trends-counts em.up { color: var(--ok); }
.trends-counts em.down { color: var(--bad); }
/* The biggest session is a link: the whole box takes the tap, not the date alone. */
.trends-counts a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.trends-counts a:focus-visible { outline: none; }
.trends-counts a:focus-visible::after { box-shadow: 0 0 0 3px var(--adm-ring); }

/* ── Which months, and what is counted ───────────────────────────────────── */
.trends-controls { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.trends-controls .month-range { margin: 0; }
.trends-by { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trends-by-label { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.trends-by .chip { font-size: 14px; }
.trends-by .chip.on { color: var(--text); }
.trends-by .info-btn { margin: 0 -2px 0 -12px; }

/* ── The cards ───────────────────────────────────────────────────────────── */
/* A pair of cards with only one of the two in it is one card across. */
.trends .grid-2 { gap: 0 14px; }
.trends .grid-2.alone { grid-template-columns: 1fr; }
.trends .grid-2:empty { display: none; }
/* The words in place of the charts, for a net that has met once. */
.trends .empty b { font-weight: 600; }

/* The countries past the first dozen, folded away until asked for. */
.trends-more { margin-top: 2px; border-top: 1px solid var(--line); }
.trends-more summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); color: var(--blue); font-size: 14px; cursor: pointer; list-style: none; }
.trends-more summary::-webkit-details-marker { display: none; }
.trends-more summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
.trends-more[open] summary::before { transform: rotate(45deg); }
.trends-more summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--adm-ring); border-radius: 6px; }

/* Who came to the most sessions: each row is tall enough for a finger, and the whole row
   leads to the station's page when it has one. */
.trends-regulars li { min-height: var(--tap); align-content: center; }
.trends-regulars .rank-name .flag { margin: 0 0 0 6px; }
.trends-regulars .rank-name a { color: var(--blue); }
.trends-regulars .rank-name a::after { content: ""; position: absolute; inset: 0; }
/* The whole row is the link (the line above), so the row is as tall as a finger needs: it was
   41 pixels. */
.trends-regulars li { padding-top: 10px; padding-bottom: 12px; }
.trends-regulars .rank-num small { margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
    .trends-more summary::before { transition: none; }
}

/* ── Wider screens ───────────────────────────────────────────────────────── */
@media (min-width: 761px) {
    .trends-counts { grid-template-columns: repeat(3, 1fr); }
    .trends-counts > div:last-child:nth-child(odd) { grid-column: auto; }
    .trends-controls { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px 28px; flex-wrap: wrap; }
    .trends-controls .month-range { flex: 1 1 380px; }
    .trends-by { flex: none; }
}
@media (min-width: 1000px) {
    .trends-counts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}