/* Statistics — the caveats section (the experimental warning and "what these data do not say"). */

.stats-disclaimers ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-sec);
    font-size: 0.82rem;
    line-height: 1.65;
}

/* ── Statistics: warning and tabs ───────────────────────────────────────
   The warning stands BEFORE everything and is visually strong, because the data is young
   and the classification rules are a first version. The reader is to know this before
   seeing the first number. */

.stats-warning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--warn-muted-surface);
}

.stats-warning-icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    /* Room for the cone badge, which sticks out past the triangle on the right. */
    margin-right: 8px;
    color: var(--warn);
}

.stats-warning-icon .warn-sign {
    display: block;
    width: 30px;
    height: 30px;
}

/* The cone is a badge on the triangle's lower right corner, not a second icon beside it:
   one sign with a qualifier reads faster than two signs competing for attention. */
.stats-warning-icon .cone-sign {
    position: absolute;
    right: -11px;
    bottom: -5px;
    width: 17px;
    height: 17px;
}

.stats-warning strong { display: block; margin-bottom: 6px; }

.stats-warning p {
    margin: 0 0 6px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-sec);
}

.stats-warning p:last-child { margin-bottom: 0; }

.stats-warning p strong { display: inline; color: var(--text-main); }

/* ── The page „Czego te dane nie mówią" ──────────────────────────────────────────────────────
   Drawn to the approved mockups (StatsCaveats.dc.html at 390 px, StatsCaveatsDesktop.dc.html at
   1280 px). ONE DOM serves both layouts; `.stats-only-phone` / `.stats-only-wide` (css/stats.css)
   pick the copy. Colours are the statistics tokens, so the page follows the theme: the mockup's
   #f8fafc / #cbd5e1 / #94a3b8 are `--text-main` / `--stats-strong` / `--text-sec`, and its amber
   Gdynia rule is `--warn`. Every rule here is scoped under `.stats-panel--zastrzezenia`, which is
   what lets it win over the shared `.stats-card` (padding, gap) without `!important`. */

.stats-panel--zastrzezenia {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats-panel--zastrzezenia .stats-card h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
}

.stats-panel--zastrzezenia a { color: var(--accent); }
.stats-panel--zastrzezenia a:hover { color: var(--stats-link-hover); }

.stats-panel--zastrzezenia a:focus-visible,
.stats-panel--zastrzezenia .stats-cav-toggle:focus-visible::after {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* The intro. */
.stats-panel--zastrzezenia .stats-cav-intro { gap: 12px; }
.stats-panel--zastrzezenia .stats-cav-intro h2 { font-size: 1.1875rem; }

.stats-cav-intro p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-sec);
}

/* Where the numbers come from: a list on a phone, a table on a wide screen. */
.stats-panel--zastrzezenia .stats-cav-sources-card { gap: 4px; }

.stats-cav-sources {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stats-cav-sources li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid var(--stats-rule);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.stats-cav-sources strong { font-weight: 600; }
.stats-cav-src-use { color: var(--text-sec); }
.stats-cav-src-reach { color: var(--stats-strong); }

.stats-cav-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.stats-cav-table th {
    padding: 4px 8px 6px;
    font-weight: 600;
    text-align: left;
    color: var(--text-sec);
}

.stats-cav-table td {
    padding: 7px 8px;
    text-align: left;
    vertical-align: middle;
}

.stats-cav-table tbody tr { border-top: 1px solid var(--stats-rule); }
.stats-cav-table th:first-child,
.stats-cav-table td:first-child { padding-left: 0; }
.stats-cav-table th:last-child,
.stats-cav-table td:last-child { padding-right: 0; }
.stats-cav-table .stats-cav-src-name { color: var(--text-main); }

/* Gdynia: what is not counted there. The amber rule marks it as a limit of the data. */
.stats-panel--zastrzezenia .stats-cav-gdynia {
    border-left: 3px solid var(--warn);
}

.stats-cav-gdynia ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--stats-strong);
}

.stats-cav-gdynia strong { color: var(--text-main); }

/* The jump list (wide only). */
.stats-cav-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.stats-cav-nav a {
    box-sizing: border-box;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    border-radius: 4px;
    background: var(--stats-card-bg);
    border: 1px solid var(--border);
    font-size: 0.8125rem;
    text-decoration: none;
}

.stats-panel--zastrzezenia .stats-cav-nav a { color: var(--stats-strong); }
.stats-panel--zastrzezenia .stats-cav-nav a:hover { color: var(--text-main); }

.stats-cav-count {
    font-size: 0.75rem;
    color: var(--text-sec);
    font-variant-numeric: tabular-nums;
}

.stats-cav-nav .stats-cav-count { font-size: inherit; }

/* One group of notes. On a phone the card has no padding of its own: the head and the list carry
   it, so the head's tap target spans the whole width of the card. */
.stats-panel--zastrzezenia .stats-cav-group {
    gap: 0;
    padding: 0;
    scroll-margin-top: 12px;
}

.stats-cav-head {
    position: relative;
    box-sizing: border-box;
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
}

.stats-cav-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The toggle is the title; its `::after` is stretched over the whole head, so the whole row is one
   target. The „zakładka:" line is plain text (no link), so nothing else competes for the tap. */
.stats-cav-toggle {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-main);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.stats-cav-toggle::after {
    content: '';
    position: absolute;
    inset: 0;
}

.stats-cav-tabs {
    font-size: 0.75rem;
    color: var(--text-sec);
}

.stats-cav-head > svg {
    color: var(--text-sec);
    transition: transform 0.15s;
}

.stats-cav-group.is-open .stats-cav-head > svg { transform: rotate(180deg); }

.stats-cav-list {
    margin: 0;
    padding: 0 16px 6px;
    list-style: none;
}

.stats-cav-list li {
    padding: 10px 0;
    border-top: 1px solid var(--stats-rule);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--stats-strong);
}

.stats-cav-list strong {
    color: var(--text-main);
    font-weight: 600;
}

@media (max-width: 959px) {
    .stats-cav-group:not(.is-open) .stats-cav-list { display: none; }
}

@media (min-width: 960px) {
    .stats-panel--zastrzezenia {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 16px;
    }

    /* The intro is full width; the sources card and the Gdynia box share a row as the mockup draws
       them (3:2, the sources table wider), and wrap onto their own rows when the content is narrower
       than their basis widths together. */
    .stats-panel--zastrzezenia > * { flex: 1 1 100%; min-width: 0; }
    .stats-panel--zastrzezenia > .stats-cav-sources-card { flex: 3 1 560px; }
    .stats-panel--zastrzezenia > .stats-cav-gdynia { flex: 2 1 340px; }

    /* The mockup's cards are padded 18px 20px; the group cards below have the same padding. */
    .stats-panel--zastrzezenia > .stats-cav-intro,
    .stats-panel--zastrzezenia > .stats-cav-sources-card,
    .stats-panel--zastrzezenia > .stats-cav-gdynia { padding: 18px 20px; }

    .stats-panel--zastrzezenia .stats-cav-intro { gap: 8px; }
    .stats-panel--zastrzezenia .stats-cav-intro h2 { font-size: 1.375rem; }
    .stats-cav-intro p { font-size: 0.875rem; }

    .stats-panel--zastrzezenia .stats-cav-sources-card { gap: 8px; }
    .stats-panel--zastrzezenia .stats-cav-sources-card h2,
    .stats-panel--zastrzezenia .stats-cav-gdynia h2 { font-size: 0.9375rem; }

    /* A wide group is an ordinary padded card with a one-line header; the notes are always open. */
    .stats-panel--zastrzezenia .stats-cav-group { gap: 4px; padding: 18px 20px; }

    .stats-cav-wide-head {
        display: flex;
        align-items: baseline;
        gap: 12px;
    }

    .stats-cav-wide-head h2 { flex-grow: 1; }

    .stats-cav-list { padding: 0; }
    .stats-cav-list li { font-size: 0.875rem; }
}