/* year-picker – jeden, wspólny wybór roku dla zakładek Prezydent, Senat i Gubernatorzy.
   Nakładka (jak usa-polish): żeby wrócić do poprzedniego wyglądu, usuń <link> i <script> year-picker ze strony. */

/* ---------- ukrywanie starych rozwiązań, gdy nowy pasek jest aktywny ---------- */
body.yp-on .wrap.wrap :is(#pyrs,#syrs,#gyrs){display:none!important}
/* Chipy zostają w DOM (skróty ← → z app.js klikają je programowo), ale nie zajmują miejsca. */
body.yp-on aside.side #chips{display:block!important;visibility:hidden!important;height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important}

/* ---------- pasek ---------- */
#yp{position:relative;z-index:30;container:yp/inline-size;margin:0 0 14px}
#yp[hidden]{display:none!important}
@media (min-width:901px){
  .wrap.wrap>#yp{grid-column:2;grid-row:1;margin:20px 0 14px}
}
@media (max-width:900px){
  #yp{margin:10px 0 4px}
}

.yp-bar{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 10px;border:1px solid var(--hair);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--card);
  box-shadow:0 14px 40px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}
.yp-t{flex:none;padding:0 6px 0 8px;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}

#yp button{font:inherit;font-variant-numeric:tabular-nums;color:inherit;-webkit-tap-highlight-color:transparent}
#yp button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* strzałki: starsze / nowsze wybory */
.yp-arr{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--hair);border-radius:10px;background:transparent;color:var(--mut);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.yp-arr:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--fg);border-color:rgba(255,255,255,.2)}
.yp-arr:disabled{opacity:.3;cursor:default}
.yp-arr svg{width:14px;height:14px}

/* pigułki z najbliższymi latami (zawsze wokół wybranego roku) */
.yp-pills{flex:1;min-width:0;display:flex;justify-content:flex-start;gap:6px;overflow:hidden}
.yp-pill{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1px solid var(--hair);border-radius:10px;background:transparent;color:var(--mut);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.yp-pill[hidden]{display:none}
.yp-pill:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.yp-pill[aria-pressed="true"]{background:rgba(200,169,106,.14);border-color:rgba(200,169,106,.6);color:var(--fg)}
.yp-pill b{font-weight:inherit}

/* kropka partii zwycięzcy */
.yp i.D,.yp i.R{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%}
.yp i.D{background:var(--dem)}
.yp i.R{background:var(--rep)}

/* przycisk „Wszystkie lata” / aktualny rok w trybie zwartym */
.yp-all{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 14px;border:1px solid rgba(200,169,106,.45);border-radius:10px;background:rgba(200,169,106,.08);color:var(--fg);font-size:.88rem;font-weight:650;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.yp-all:hover,.yp-all[aria-expanded="true"]{background:rgba(200,169,106,.16);border-color:rgba(200,169,106,.7)}
.yp-all .cv{flex:none;width:11px;height:11px;opacity:.8;transition:transform .2s}
.yp-all[aria-expanded="true"] .cv{transform:rotate(180deg)}
.yp-allt small{margin-left:6px;font-weight:500;color:var(--mut)}
.yp-curt{display:none;align-items:baseline;gap:8px;min-width:0}
.yp-curt b{font-size:1.05rem;font-weight:750}
.yp-curt em{font-style:normal;font-size:.8rem;font-weight:500;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- lista wszystkich lat ---------- */
.yp-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:min(72vh,560px);overflow:auto;overscroll-behavior:contain;padding:6px 16px 14px;
  border:1px solid rgba(255,255,255,.14);border-radius:16px;background:var(--card);
  box-shadow:0 28px 70px -20px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.25);scrollbar-width:thin}
.yp-pop[hidden]{display:none}
.yp-ph{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px 4px;padding:12px 16px 10px;background:var(--card);border-bottom:1px solid var(--hair)}
.yp-ph b{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.yp-x{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--hair);border-radius:9px;background:transparent;color:var(--mut);cursor:pointer}
.yp-x:hover{background:rgba(255,255,255,.07);color:var(--fg)}
.yp-x svg{width:12px;height:12px}

.yp-grid{display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--yp-rows,7),auto);column-gap:34px}
.yp-grid.yp-flat{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
.yp-dec{display:grid;grid-template-columns:4.1rem minmax(0,1fr);align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--hair)}
.yp-dl{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--mut);white-space:nowrap}
.yp-ys{display:flex;flex-wrap:wrap;gap:4px}
.yp-y{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:58px;min-height:44px;padding:5px 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--fg);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.yp-y:hover{background:rgba(255,255,255,.07)}
.yp-y[aria-pressed="true"]{background:rgba(200,169,106,.16);border-color:rgba(200,169,106,.6)}
.yp-y b{font-size:.95rem;font-weight:700}
.yp-y span{display:flex;align-items:center;gap:5px;max-width:9.5em;font-size:.72rem;color:var(--mut);white-space:nowrap}
.yp-y span u{text-decoration:none;overflow:hidden;text-overflow:ellipsis}

/* ---------- tryb zwarty (wąski kontener: telefon, małe okno) ---------- */
@container yp (max-width:700px){
  .yp-t,.yp-pills,.yp-allt{display:none}
  .yp-curt{display:inline-flex}
  .yp-all{flex:1;min-width:0;justify-content:space-between;height:44px;padding:0 14px}
  .yp-arr{width:44px;height:44px}
  .yp-bar{padding:6px;gap:6px;min-height:0}
  .yp-grid{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
  .yp-pop{padding:4px 12px 12px;max-height:min(64vh,520px)}
  .yp-ph{margin:0 -12px 4px;padding:12px}
}

@media (prefers-reduced-motion:reduce){
  .yp *{transition:none!important}
}