/* lzm.si/referendumi.php — kartice referendumov, graf ZA/PROTI, tabela.
   Podlaga, besedilo in robovi iz stil.css.

   ⛔ ZA in PROTI NISTA zelena in rdeča. Stran je stran liste; zelena »za« in rdeča
   »proti« bi izid barvali kot dober ali slab. Modra in oranžna sta nevtralni in
   preverjeni (dataviz validate_palette: CVD ΔE 24,7 svetla / 26,8 temna, obe ≥ 3 : 1
   proti kartici). Barva nosi samo črto in ključ — besedilo je vedno v barvi besedila. */
:root{
  --za:#2a78d6;
  --proti:#eb6834;
  --mreza:color-mix(in srgb, var(--crnilo) 12%, transparent);
  --mreza-sredina:color-mix(in srgb, var(--crnilo) 38%, transparent);
}
@media (prefers-color-scheme: dark){
  :root{
    --za:#3987e5;
    --proti:#d95926;
  }
}

.osvezitev{color:var(--pridusen);font-size:.92rem}
.osvezitev.zamuja{
  color:var(--crnilo);
  border-left:4px solid var(--rdeca);
  background:color-mix(in srgb, var(--rdeca) 8%, transparent);
  border-radius:0 10px 10px 0;
  padding:.6rem .9rem;
}

/* ---------------------------------------------------------- izbira osi */
.os-izbira{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:1.25rem 0 0;font-size:.92rem;color:var(--pridusen)}
.os-izbira[hidden]{display:none}
.preklop{display:inline-flex;border:1px solid var(--rob-polje);border-radius:9px;overflow:hidden}
.preklop button{
  font:inherit;font-size:.92rem;color:var(--crnilo);background:transparent;
  border:0;padding:.4rem .85rem;cursor:pointer;
}
.preklop button + button{border-left:1px solid var(--rob-polje)}
.preklop button[aria-pressed="true"]{background:var(--gumb-ozadje);color:var(--gumb-tekst);font-weight:600}
.preklop button:focus-visible{outline:2px solid var(--zelena);outline-offset:-3px}

/* ------------------------------------------------------------- kartica */
.referendum{
  background:var(--papir);
  border:1px solid var(--rob);
  border-radius:12px;
  box-shadow:var(--senca);
  padding:1.1rem 1.25rem 1rem;
  margin:1.25rem 0;
}
.referendum h2{margin:0 0 .2rem}
.referendum .naziv{color:var(--pridusen);font-size:.9rem;line-height:1.45;margin-bottom:1rem}
.referendum .vir{font-size:.85rem;color:var(--pridusen);margin:.75rem 0 0}

/* ------------------------------------------------------------ številke */
.stevilke{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem 1rem;margin:0 0 1rem}
@media (max-width:520px){ .stevilke{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stevilke > div{min-width:0}
.stevilke dt{font-size:.85rem;font-weight:600;color:var(--pridusen);letter-spacing:.02em}
.stevilke dd{margin:0}
.stevilke .vrednost{font-size:1.45rem;font-weight:700;line-height:1.2;color:var(--crnilo)}
.stevilke .pod{font-size:.8rem;color:var(--pridusen);font-variant-numeric:tabular-nums}
/* Ključ ob ZA in PROTI: kratka črta v barvi črte na grafu — besedilo ostane v barvi besedila. */
.stevilke .za dt::before,
.stevilke .proti dt::before,
.kljuc{
  content:"";
  display:inline-block;
  width:14px;height:3px;border-radius:2px;
  vertical-align:middle;
  margin-right:.4rem;
  position:relative;top:-1px;
}
.stevilke .za dt::before,.kljuc.za{background:var(--za)}
.stevilke .proti dt::before,.kljuc.proti{background:var(--proti)}

/* --------------------------------------------- prag zakonodajnega referenduma */
.kvorum{font-size:.9rem;margin:0 0 1rem}
.kvorum p{margin:0 0 .4rem}
.kvorum .sklep{font-weight:600;margin:.4rem 0 0}
.merilo{height:8px;border-radius:4px;background:color-mix(in srgb, var(--proti) 18%, transparent);overflow:hidden}
.merilo .polnilo{display:block;height:100%;border-radius:4px;background:var(--proti)}

/* ---------------------------------------------------------------- graf */
.graf{margin:0}
.platno{position:relative;width:100%}
.platno svg{display:block;width:100%;height:auto;overflow:visible}
.platno svg:focus{outline:none}
.platno svg:focus-visible{outline:2px solid var(--zelena);outline-offset:2px;border-radius:6px}
.platno text{fill:var(--pridusen);font-size:12px;font-variant-numeric:tabular-nums}
.platno text.napis{fill:var(--crnilo);font-weight:600}
.mreza{stroke:var(--mreza);stroke-width:1}
.mreza.sredina{stroke:var(--mreza-sredina)}
.crta{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.crta.za{stroke:var(--za)}
.crta.proti{stroke:var(--proti)}
/* Trend je izpeljan, ne izmerjen: tanjši, črtkan in pod črto podatkov. */
.trend{fill:none;stroke-width:1.5;stroke-dasharray:5 4;opacity:.85}
.trend.za{stroke:var(--za)}
.trend.proti{stroke:var(--proti)}
/* Napis ob koncu črte lahko leži na trendu — obroba v barvi kartice ga loči. */
.platno text.napis{paint-order:stroke;stroke:var(--papir);stroke-width:3px;stroke-linejoin:round}
/* Prevesna točka: oznaka, ne podatek — nevtralna barva, pikčasta navpičnica. */
.prevoj-crta{stroke:var(--pridusen);stroke-width:1;stroke-dasharray:2 3}
.prevoj-pika{fill:var(--crnilo);stroke:var(--papir);stroke-width:2}
.platno text.prevoj-napis{fill:var(--crnilo);font-weight:600;paint-order:stroke;stroke:var(--papir);stroke-width:3px;stroke-linejoin:round}
.pika{stroke:var(--papir);stroke-width:2}
.pika.za{fill:var(--za)}
.pika.proti{fill:var(--proti)}
.kriz{stroke:var(--pridusen);stroke-width:1}
.dogodki{fill:transparent;cursor:crosshair;touch-action:pan-y}

.namig{
  position:absolute;
  z-index:2;
  pointer-events:none;
  background:var(--papir);
  border:1px solid var(--rob);
  border-radius:8px;
  box-shadow:var(--senca);
  padding:.45rem .65rem;
  font-size:.85rem;
  line-height:1.45;
  white-space:nowrap;
}
.namig[hidden]{display:none}
.namig .glava{color:var(--pridusen);font-size:.8rem;margin-bottom:.15rem}
.namig strong{font-variant-numeric:tabular-nums}
.namig .ime{color:var(--pridusen)}

.legenda{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.88rem;color:var(--crnilo);margin:.35rem 0 0}
.legenda .opomba{color:var(--pridusen);margin-left:auto}
.kljuc.trend{background:repeating-linear-gradient(90deg,var(--pridusen) 0 4px,transparent 4px 7px);height:2px}
.trend-ocena{font-size:.85rem;color:var(--pridusen);margin:.4rem 0 0}
.trend-ocena p{margin:0 0 .25rem}
.trend-ocena .prevoj{color:var(--crnilo)}

/* -------------------------------------------------------------- tabela */
.tabela{margin:.9rem 0 0;font-size:.9rem}
.tabela summary{cursor:pointer;color:var(--zelena);font-weight:600}
.tabela summary:focus-visible{outline:2px solid var(--zelena);outline-offset:3px;border-radius:6px}
.drsnik{overflow-x:auto;margin-top:.5rem;max-height:22rem;overflow-y:auto}
.tabela table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.tabela th,.tabela td{padding:.3rem .55rem;text-align:right;border-bottom:1px solid var(--rob);white-space:nowrap}
.tabela thead th{position:sticky;top:0;background:var(--papir);font-weight:600;color:var(--pridusen)}
.tabela tbody th{font-weight:600;text-align:left}
.tabela thead th:first-child{text-align:left}