/* ============================================================================
   LAYOUT „DW" – replika layoutu Datawrappera (motyw `wyborcza`) do użytku
   w naszych własnych piecach HTML.

   Po co: Datawrapper nie umie łączyć kilku wizualizacji w jednej ramce ani
   robić isotype, kafli czy równań z piktogramów. Ten arkusz daje ten sam
   wygląd, ale bez ograniczeń DW – jedna wspólna stopka, wiele bloków.

   Wartości NIE są zgadywane. Zmierzone na opublikowanym wykresie DW
   z motywem `wyborcza` (30.07.2026):
     font          Helvetica (motyw nie ładuje żadnego webfontu)
     headline      15 px / lh 15 px / 700 / #000
     description   14 px / lh 14 px / 400 / #3a3a3a
     etykiety osi  14 px / 400 / #000
     wartość w słupku  14 px / 400 / #fff
     notes         12 px / italic / #333
     byline+source 11 px / 400 / #888
     nagłówek      padding-top 10 px, odstęp do treści 10 px
     treść → stopka  20 px
     paleta        #df012d #0071bb #ef6703 #a62fb4 #039182 #626262 #C7C6C9
   ============================================================================ */

:root{
  --dw-red:#ED1C24;          /* czerwień redakcyjna GW (nie #df012d z palety DW) */
  --dw-blue:#0071bb;
  --dw-orange:#ef6703;
  --dw-grey:#626262;
  --dw-grey-l:#C7C6C9;
  --dw-ink:#000000;
  --dw-desc:#3a3a3a;
  --dw-note:#333333;
  --dw-meta:#888888;
  --dw-rule:#e8e8e8;
  --dw-font:Helvetica, Arial, "Helvetica Neue", sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:#fff}
body{
  width:707px; max-width:100%; margin:0 auto; background:#fff;
  font-family:var(--dw-font); color:var(--dw-note); font-size:14px;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ---------- ramka jednej „wizualizacji" ---------- */
.dw{padding:10px 0 0}

/* ---------- nagłówek ---------- */
.dw-headline{
  margin:0; font-size:17px; line-height:19px; font-weight:800; color:var(--dw-ink);
}
.dw-desc{
  margin:10px 0 0; font-size:14px; line-height:14px; font-weight:400; color:var(--dw-desc);
}
.dw-desc b{font-weight:700; color:var(--dw-ink)}
.dw-desc + .dw-desc{margin-top:14px}

/* ---------- treść ---------- */
.dw-body{margin-top:10px}

/* część składowa (to, czego DW nie potrafi: kilka wizualizacji w jednej ramce) */
.dw-part{padding:18px 0 0; margin-top:18px; border-top:1px solid var(--dw-rule)}
.dw-part:first-child{margin-top:14px}   /* pierwszą też odkreślamy od tytułu */
.dw-sub{margin:0 0 10px; font-size:16px; line-height:20px; font-weight:700; color:var(--dw-ink)}
.dw-note-inline{margin:10px 0 0; font-size:12px; line-height:15px; color:var(--dw-meta)}

/* ---------- wykres słupkowy (jak d3-bars w DW) ---------- */
.dw-bars{margin:0}
.dw-row{display:grid; grid-template-columns:var(--dw-lab,118px) 1fr; align-items:center; margin:0 0 4px}
.dw-row-label{font-size:14px; line-height:17px; color:var(--dw-ink); padding-right:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* wyróżniony wiersz – Helvetica ma tylko regular i bold, pośredniej grubości nie ma */
.dw-row.hi .dw-row-label{font-weight:700}
.dw-bar{position:relative; height:20px; background:transparent}
.dw-bar i{display:block; height:20px; width:0; background:var(--dw-red);
  transition:width .8s cubic-bezier(.22,.8,.3,1)}
.dw-bar.g i{background:var(--dw-grey-l)}
.dw-bar.dark i{background:var(--dw-grey)}
.dw-bar span{position:absolute; top:0; left:8px; height:20px; line-height:20px;
  font-size:14px; color:#fff; white-space:nowrap}
.dw-bar.g span,.dw-bar.out span{color:var(--dw-ink)}
.dw-bar.out span{left:auto; margin-left:8px}

/* ---------- legenda (jak key w DW) ---------- */
.dw-key{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 10px}
.dw-key span{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dw-note)}
.dw-key i{width:12px; height:12px; display:block; background:var(--dw-red)}

/* ikona wpleciona w tekst, np. legenda żetonu w zdaniu */
.dw-ic{display:inline-block; width:1.05em; height:1.05em; vertical-align:-.18em; margin:0 .04em}
.dw-ic svg{display:block; width:100%; height:100%; color:var(--dw-red)}

/* ---------- ISOTYPE – czego DW nie ma ---------- */
.dw-iso{margin:0 0 16px}
.dw-iso-lab{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:0 0 6px}
.dw-iso-lab .n{font-size:14px; line-height:17px; color:var(--dw-ink)}
.dw-iso-lab .v{font-size:14px; font-weight:700; color:var(--dw-red); white-space:nowrap}
.dw-iso-lab .v.g{color:var(--dw-grey)}
.dw-iso-row{display:flex; align-items:flex-end; width:100%; gap:4px; min-height:22px}
.dw-iso-row .u{flex:0 0 auto}
.dw-iso-row .u svg{display:block; width:100%; height:auto; color:var(--dw-red)}
.dw-iso-row .u.part{overflow:hidden}
.dw-iso-row .u.part > span{display:block}
.dw-iso-pod{margin:5px 0 0; font-size:12px; color:var(--dw-meta)}

/* ---------- kafle z piktogramem – czego DW nie ma ---------- */
.dw-tiles{display:grid; gap:1px; background:var(--dw-rule); border:1px solid var(--dw-rule); margin:14px 0 0}
.dw-tiles.c2{grid-template-columns:repeat(2,1fr)}
.dw-tiles.c3{grid-template-columns:repeat(3,1fr)}
.dw-tile{background:#fff; padding:12px 13px 13px}
.dw-tile svg{width:20px; height:20px; color:var(--dw-red); display:block; margin:0 0 7px}
.dw-tile .v{margin:0; font-size:20px; line-height:1.05; font-weight:700; color:var(--dw-ink)}
.dw-tile .o{margin:5px 0 0; font-size:12px; line-height:15px; color:var(--dw-note)}

/* ---------- równanie z piktogramów – czego DW nie ma ---------- */
.dw-eq{margin:12px 0 0}
.dw-eq .ik{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.dw-eq .grp{display:flex; gap:4px}
.dw-eq svg{width:26px; height:26px; display:block}
.dw-eq .grp.a svg{color:var(--dw-grey)}
.dw-eq .grp.b svg{color:var(--dw-red)}
.dw-eq .op{font-size:15px; font-weight:700; color:var(--dw-meta)}
.dw-eq p{margin:9px 0 0; font-size:12px; line-height:15px; color:var(--dw-note)}

/* ---------- duża liczba – czego DW nie ma ---------- */
.dw-big{margin:0}
.dw-big .n{margin:0; font-size:38px; line-height:1; font-weight:700; color:var(--dw-red)}
.dw-big .c{margin:7px 0 0; font-size:14px; line-height:17px; color:var(--dw-ink)}

/* ---------- stopka: notka, logo, byline i źródło ---------- */
.dw-footer{margin-top:20px}
.dw-notes{margin:0; font-size:12px; line-height:15px; font-style:italic; color:var(--dw-note)}
.dw-logo{display:inline-block; margin:10px 4px 0 0; width:200px; height:20px;
  background:url(https://static.im-g.pl/im/3/31727/m31727613,WYBORCZA-BIQDATA-LOGO.svg) no-repeat;
  background-size:200px}
.dw-meta{margin:6px 0 0; font-size:11px; line-height:13px; color:var(--dw-meta)}
.dw-meta a{color:var(--dw-meta)}

/* ---------- animacja (progressive enhancement) ---------- */
body.anim .rv{opacity:0; transform:translateY(10px)}
body.anim .rv.on{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}
body.anim .rv:not(.on) .dw-bar i{width:0!important; transition:none}
@media (prefers-reduced-motion:reduce){
  body.anim .rv{opacity:1; transform:none}
  .dw-bar i{transition:none}
}

/* ---------- telefon ---------- */
@media (max-width:600px){
  .dw-tiles.c3{grid-template-columns:1fr}
  .dw-row{grid-template-columns:1fr; row-gap:2px; margin-bottom:9px}
  .dw-row-label{padding-right:0}
  .dw-iso-lab{flex-direction:column; align-items:flex-start; gap:1px}
}