/* Statystyki page — chart layer. Series colors are the validated dataviz
   palette (slots 1–3) stepped per mode; chrome reuses the site tokens. */
:root {
  --s1: #2a78d6;   /* oferty (ceny ofertowe) */
  --s2: #1baf7a;   /* transakcje RCN — rynek wtórny */
  --s3: #eda100;   /* transakcje RCN — rynek pierwotny */
}
@media (prefers-color-scheme: dark) {
  :root { --s1: #3987e5; --s2: #199e70; --s3: #c98500; }
}

/* stat tiles */
.tiles { display: grid; gap: 12px; margin: 0 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 12px 14px; }
.tile .v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.tile .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tile .d { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* chart cards */
.charts { display: flex; flex-direction: column; gap: 14px; }
.chartcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 14px 16px; }
.chart-h { font-size: 14px; font-weight: 700; }
.chart-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 2px;
  font-size: 12px; color: var(--text); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.plot { position: relative; }
.plot svg { display: block; width: 100%; height: auto; }
.gridline { stroke: var(--line); stroke-width: 1; }
.axisline { stroke: var(--line); stroke-width: 1; }
.tick { fill: var(--muted); font-size: 11px; }
.endlabel { font-size: 11px; font-weight: 600; }
.crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

/* tooltip */
.tt { position: absolute; pointer-events: none; z-index: 10;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 7px 9px; font-size: 12px; min-width: 130px; }
.tt .tt-t { font-weight: 700; margin-bottom: 3px; }
.tt .tt-r { display: flex; justify-content: space-between; gap: 12px; }
.tt .tt-r span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* small multiples row */
.multi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.multi .m-h { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }

/* data table (accessibility fallback) */
details.dtable { margin-top: 8px; }
details.dtable summary { cursor: pointer; font-size: 12px; color: var(--accent);
  font-weight: 600; list-style: none; }
details.dtable summary::before { content: "▸ "; }
details.dtable[open] summary::before { content: "▾ "; }
.dtable-wrap { max-height: 260px; overflow: auto; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 8px; }
.dtable table { border-collapse: collapse; width: 100%; font-size: 12px; }
.dtable th, .dtable td { padding: 4px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dtable th:first-child, .dtable td:first-child { text-align: left; }
.dtable thead th { position: sticky; top: 0; background: var(--card); }

.note { font-size: 12px; color: var(--muted); margin-top: 6px; }