/* Strony statystyk: wydajności (/statystyki) i katalogu (/statystyki/kraje).
   Wspólny arkusz, bo obie składają się z tych samych kawałków — kafelków,
   paneli z wykresem i tabeli. Przy dwóch kopiach w <style> pierwsza zmiana
   odstępu rozjechałaby je o pół kratki. */

.stats { flex: 1 0 auto; padding: 2.5rem 0 3rem; }
.stats h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.stats .lead { color: var(--text-dim); margin: 0.6rem 0 0; max-width: 62ch; }

/* ------------------------------------------------------------ nawigacja --- */

.stats-nav { display: flex; gap: 0.5rem; margin-bottom: 1.6rem; }
.stats-nav .btn { padding: 0.5rem 1rem; font-size: 0.9rem; }
.stats-nav .is-current {
    border-color: var(--amber);
    background: var(--amber-soft);
    color: var(--amber);
}

/* --------------------------------------------------------------- zakres --- */

.range {
    display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end;
    margin: 1.8rem 0 2rem; padding: 1rem 1.2rem;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.range label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--text-dim); }
.range input {
    font: inherit; font-size: 0.95rem; color: var(--text);
    background: var(--ink-3); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 0.5rem 0.7rem;
    color-scheme: dark;
}
.range .shortcuts { display: flex; gap: 0.4rem; margin-left: auto; }
.range .shortcuts a { font-size: 0.85rem; padding: 0.5rem 0.8rem; }

/* -------------------------------------------------------------- kafelki --- */

.tiles { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 0.9rem 1.1rem;
}
.tile .k { font-size: 0.78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.tile .v { font-size: 1.75rem; font-weight: 680; letter-spacing: -0.02em; margin-top: 0.15rem; }
.tile .v .unit { font-size: 0.95rem; font-weight: 500; color: var(--text-dim); margin-left: 0.15rem; }

/* --------------------------------------------------------------- panele --- */

.panel {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.2rem 1.3rem 0.6rem; margin-top: 1.4rem;
}
.panel h2 { font-size: 1.02rem; }
.panel .hint { color: var(--text-faint); font-size: 0.85rem; margin: 0.3rem 0 0.4rem; max-width: 70ch; }

.chart { height: 320px; width: 100%; }
.chart-tall { height: 380px; }
/* Wykres poziomy rośnie z liczbą krajów, a nie z szerokością ekranu — właściwą
   wysokość ustawia stats-countries.js, bo tylko on zna liczbę krajów. To tutaj
   jest wartością na czas, zanim skrypt się wykona. */
.chart-countries { height: 420px; }

/* --------------------------------------------------------------- tabela --- */

.table-wrap { overflow-x: auto; margin-top: 0.5rem; }
table.samples { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
table.samples th, table.samples td { padding: 0.45rem 0.7rem; text-align: right; white-space: nowrap; }
table.samples th { color: var(--text-faint); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
table.samples td { border-bottom: 1px solid var(--line); }
table.samples th:first-child, table.samples td:first-child,
table.samples th:nth-child(2), table.samples td:nth-child(2) { text-align: left; }
table.samples td.name { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }

/* Tabela krajów ma kilkanaście kolumn i zjeżdża w bok. Nazwa kraju zostaje
   przyklejona do lewej krawędzi, bo bez niej przewinięty wiersz jest ciągiem
   liczb bez właściciela. Tło nieprzezroczyste, inaczej przejeżdżałyby pod nią
   kolumny. */
table.samples.sticky-first th:first-child,
table.samples.sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ink-2);
}

table.samples td.code { color: var(--text-faint); font-variant-numeric: tabular-nums; }
table.samples td.total { font-weight: 650; }
/* Zero jako kreska: w tabeli pełnej liczb pusta pozycja ma się nie liczyć
   wzrokowo, bo i tak nic nie wnosi. */
table.samples td.zero { color: var(--text-faint); }
table.samples tr.is-empty td { opacity: 0.55; }

.tag {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem;
    font-size: 0.7rem; border-radius: 999px;
    border: 1px solid var(--line-strong); color: var(--text-faint);
}

.empty { padding: 3rem 1rem; text-align: center; color: var(--text-dim); }