:root { --bg:#f7f6f2; --fg:#181818; --mut:#5c5c5c; --acc:#1650a8; --card:#ffffff; --line:#dedbd3; --za:#1a7f37; --protiv:#b42318; --uz:#8a6d00; --od:#6b6b6b; }
* { box-sizing:border-box; }
html { font-size:19px; }
body { background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; margin:0; }
main { max-width:660px; margin:0 auto; padding:0 16px 3rem; }
a { color:var(--acc); }
h1 { font-size:1.6rem; line-height:1.2; margin:1rem 0 .6rem; overflow-wrap:break-word; }
h2 { font-size:1.2rem; margin:1.8rem 0 .6rem; }
h3 { font-size:1.05rem; margin:.2rem 0 .4rem; }
p { margin:.4rem 0 .8rem; }
.top { background:#fff; border-bottom:1px solid var(--line); }
/* Wider than the 660px reading column on purpose: the header holds six links and two
   buttons, and 660px is not enough for them. It only affects the bar. */
.top .in { max-width:880px; margin:0 auto; padding:.5rem 16px; display:flex; align-items:center; gap:.6rem; }
.top a.home { font-weight:700; text-decoration:none; color:var(--fg); white-space:nowrap; }
.top nav { display:flex; flex-wrap:wrap; gap:.3rem .9rem; flex:1; min-width:0; align-items:center; }
.top .tools { display:flex; gap:.4rem; flex:0 0 auto; align-items:center; }
.burger { display:none; }

/* Below 700px the six links and two buttons do not fit one line, and the strip they used to
   sit in scrolled sideways — which means whatever did not fit was simply invisible, with
   nothing on screen to say so. On a phone they go behind a button instead. */
@media (max-width:699px){
  .top .in { flex-wrap:wrap; gap:.4rem; }
  .burger { display:flex; flex-direction:column; justify-content:center; gap:4px; margin-left:auto;
            width:2.3rem; height:2.1rem; padding:0 .45rem; background:#fff; border:1px solid var(--line);
            border-radius:8px; cursor:pointer; }
  .burger .bl { display:block; height:2px; background:var(--fg); border-radius:2px; transition:transform .15s, opacity .15s; }
  .top.open .burger .bl:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .top.open .burger .bl:nth-child(2) { opacity:0; }
  .top.open .burger .bl:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .top nav, .top .tools { display:none; }
  .top.open nav { display:flex; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0;
                  margin-top:.4rem; border-top:1px solid var(--line); }
  .top.open nav a { font-size:1rem; padding:.62rem .1rem; border-bottom:1px solid #f1f1f1; }
  .top.open .tools { display:flex; flex-basis:100%; padding:.55rem 0 .25rem; }
}
.top nav a { font-size:.9rem; text-decoration:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem; margin:.8rem 0; }
.card.big { padding:1.2rem; }
.card h2, .card h3 { margin-top:0; }
.btn { display:block; background:var(--acc); color:#fff; text-decoration:none; text-align:center; padding:.9rem 1rem; border-radius:12px; font-weight:700; font-size:1.05rem; margin:.6rem 0; }
.btn.sec { background:#fff; color:var(--acc); border:2px solid var(--acc); }
.mut { color:var(--mut); font-size:.9rem; }
.small { font-size:.85rem; }
.lead { font-size:1.1rem; }
.why { display:block; font-size:.82rem; color:#444; background:#fff7d6; border-radius:8px; padding:.3rem .5rem; margin:.2rem 0; white-space:normal; }
.b { cursor:pointer; display:inline-block; font-size:.78rem; border-radius:999px; padding:.1rem .55rem; margin:.15rem .25rem .15rem 0; white-space:nowrap; background:#eee; color:#333; }
.b.office { background:#dff5e6; color:#0f5e2a; }
.b.won { background:#dbe8ff; color:#1a3f8a; }
.b.switch { background:#ffe8c7; color:#7a4300; }
.b.new { background:#ececec; color:#444; }
.b.filler { background:#f3e1e1; color:#7a1f1f; }
.b.record { background:#e8ddf7; color:#4a2a80; }
.b.funkcija { background:#d9e9f7; color:#12456e; }
.b.warn { background:#fff3cd; color:#664d03; }
ul.people { list-style:none; padding:0; margin:.4rem 0; }
li.person { display:flex; gap:.5rem; padding:.45rem 0; border-top:1px solid var(--line); align-items:baseline; flex-wrap:wrap; }
li.person .pos { color:var(--mut); min-width:2rem; }
li.person .pname { font-weight:600; }
li.person .badges { flex-basis:100%; padding-left:2.5rem; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:.6rem 0; }
.fact { background:#f2f0ea; border-radius:10px; padding:.55rem .7rem; }
.fact b { display:block; font-size:1.3rem; line-height:1.2; }
.fact span { font-size:.82rem; color:var(--mut); }
.vote { display:inline-block; font-weight:700; padding:.05rem .5rem; border-radius:8px; font-size:.85rem; }
.v-za { background:#dff5e6; color:var(--za); }
.v-protiv { background:#fde2df; color:var(--protiv); }
.v-uz { background:#fff1c2; color:var(--uz); }
.v-odsutan { background:#e9e9e9; color:var(--od); }
.kd { border-top:1px solid var(--line); padding:.5rem 0; }
.kd .t { font-weight:600; }
.kd .d { color:var(--mut); font-size:.85rem; }
details { margin:.4rem 0; }
summary { cursor:pointer; color:var(--acc); font-weight:600; }
input[type=search] { width:100%; padding:.9rem 1rem; font-size:1.15rem; border-radius:12px; border:2px solid var(--line); background:#fff; color:var(--fg); }
.list a.item { display:block; padding:.6rem .2rem; border-top:1px solid var(--line); text-decoration:none; font-size:1.05rem; }
.list a.item span { color:var(--mut); font-size:.85rem; margin-left:.4rem; }
.claim { border-left:4px solid #e0b100; padding:.5rem .8rem; background:#fffbe6; border-radius:0 10px 10px 0; }
.src { font-size:.78rem; color:var(--mut); word-break:break-all; }
.step { display:flex; gap:.8rem; margin:.7rem 0; }
.step .n { background:var(--acc); color:#fff; border-radius:50%; width:2rem; height:2rem; min-width:2rem; display:flex; align-items:center; justify-content:center; font-weight:700; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
td, th { padding:.35rem .3rem; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
th { color:var(--mut); font-weight:normal; font-size:.8rem; }
footer { max-width:660px; margin:2rem auto 0; padding:1rem 16px 2rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--mut); }
.hb { padding:.3rem 0; font-size:.9rem; }
.hb-l { line-height:1.25; margin-bottom:.15rem; }
.hb-r { display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:center; }
.hb-l a { text-decoration:none; color:var(--fg); }
.hb-t { background:#eceae3; border-radius:4px; height:.8rem; overflow:hidden; }
.hb-f { height:100%; border-radius:0 4px 4px 0; min-width:2px; }
.hb-v { color:var(--mut); font-size:.82rem; white-space:nowrap; min-width:3.2rem; text-align:right; }
.c-blue { background:#2a78d6; } .c-blue2 { background:#86b6ef; } .c-za { background:#0ca30c; } .c-protiv { background:#d03b3b; } .c-uz { background:#fab219; } .c-od { background:#a9a9a9; } .c-new { background:#c3c2b7; } .c-sw { background:#eb6834; }
.st { display:flex; gap:2px; height:.9rem; border-radius:4px; overflow:hidden; margin:.3rem 0 .2rem; }
.st-s { min-width:3px; }
.st-l { display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:.8rem; color:var(--mut); }
.sw { display:inline-block; width:.7rem; height:.7rem; border-radius:2px; margin-right:.3rem; vertical-align:-1px; }
.years { display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0; }
.yr { border:2px solid #2a78d6; border-radius:8px; padding:.1rem .45rem; font-size:.8rem; color:#1c5cab; }
.yr.won { background:#2a78d6; color:#fff; }
.yr.now { border-style:dashed; }
.cmp { width:100%; border-collapse:collapse; font-size:.85rem; }
.cmp td { padding:.3rem .2rem; border-top:1px solid var(--line); vertical-align:middle; }
.dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.3rem; }
.tl { border-left:3px solid var(--line); margin:.5rem 0 0 .45rem; padding-left:1rem; }
.tl-i { position:relative; padding:.4rem 0 .7rem; }
.tl-d { position:absolute; left:-1.55rem; top:.7rem; width:.9rem; height:.9rem; border-radius:50%; border:2px solid #fff; }
.viz { position:relative; margin:.5rem 0; }
.viz-bar { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.4rem; }
.viz-bar .tog.on { background:var(--acc); color:#fff; border-color:var(--acc); }
.viz-axis text { font-size:.6rem; fill:var(--mut); } .viz-axis path, .viz-axis line { stroke:var(--line); }
.viz-grid { stroke:var(--line); }
.viz-lab { font-size:.62rem; fill:var(--fg); }
.viz-dot { fill:#86b6ef; stroke:#fff; stroke-width:1.5; cursor:pointer; }
.viz-dot.rec { fill:#2a78d6; }
.viz-dot.me { fill:#eb6834; stroke:#7a2e0a; stroke-width:2; }
.viz-me { font-size:.6rem; font-weight:700; fill:#7a2e0a; paint-order:stroke; stroke:#fff; stroke-width:3px; }
.viz-tip { position:absolute; z-index:5; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem; width:240px; font-size:.85rem; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.d3 .fb { font-size:.85rem; color:var(--mut); }
.d3-bar { margin:.15rem 0; } .d3-stack { margin:.3rem 0; } .d3-chance { margin:.4rem 0; }
.d3 svg text { font-family:inherit; }
.b.ch-velika { background:#dff5e6; color:#0f5e2a; } .b.ch-srednja { background:#fff1c2; color:#6b5300; } .b.ch-mala, .b.ch-vrlo { background:#eeeeee; color:#555; }
.av { width:36px; height:36px; border-radius:50%; object-fit:cover; vertical-align:middle; background:#eee; }
.av.big { width:84px; height:84px; float:right; margin:0 0 .5rem .8rem; }
.tog { font-size:1rem; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.35rem .6rem; cursor:pointer; }
.kd.hid { display:none; }
@media (max-width:420px){ html{font-size:18px} .facts{grid-template-columns:1fr 1fr} }

/* calibration table on metoda.html: six position buckets x four past-record classes */
table.cal { width:100%; border-collapse:collapse; margin:.6rem 0; font-size:.82rem; }
table.cal th, table.cal td { border-top:1px solid var(--line); padding:.35rem .3rem; text-align:center; vertical-align:top; }
table.cal th:first-child, table.cal td:first-child { text-align:left; }
table.cal thead th { font-size:.74rem; color:var(--mut); font-weight:600; border-top:0; }
table.cal .small { font-size:.72rem; }
.b.pop { background:#d9f0e4; color:#0b5c34; }
.calwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.6rem -1rem; padding:0 1rem; }
.calwrap table.cal { min-width:520px; margin:0; }
table.cal td, table.cal th { white-space:nowrap; }
table.cal th:first-child, table.cal td:first-child { white-space:normal; min-width:150px; }

/* Red koji je na profil stigao spajanjem dva zapisa o istoj osobi, i prijedlozi koje
   nismo prihvatili. Oboje mora da se vidi da nije isto što i ostatak stranice. */
.merged { border-left:3px solid #c9b98a; padding-left:.5rem; }
.tagspoj { background:#f0ece3; color:#5a4a28; font-size:.72rem; border-radius:3px; padding:.05rem .3rem; margin-left:.3rem; }
.fn { padding:.35rem 0; border-top:1px solid var(--line); }
.fn:first-of-type { border-top:0; }
.fn b { font-weight:600; }
.fn .when { color:var(--mut); font-size:.82rem; }

/* --- projekcije (project.py) --------------------------------------------- */
/* The projection tables borrow table.cal for its look, but not its shape. table.cal is the
   calibration grid on metoda.html: six fixed columns of numbers that cannot wrap, which is
   why every use of it sits inside .calwrap and scrolls sideways. These tables are the other
   kind — four columns, one of them a party name long enough to be a sentence — and they are
   the main thing on the page, so sideways scrolling is the wrong answer. Undo the nowrap and
   the 150px floor that table.cal imposes, and let the name wrap instead. Without this the
   projection page renders 901px wide inside a 390px phone. */
table.proj{width:100%;border-collapse:collapse;margin:.4rem 0;table-layout:auto}
table.proj th{text-align:left;font-size:.82rem;color:#5c5c5c;font-weight:600;border-bottom:1px solid #e3e3e3;padding:.25rem .4rem}
table.proj td{padding:.3rem .4rem;border-bottom:1px solid #f0f0f0;vertical-align:middle}
table.proj td, table.proj th{white-space:normal}
/* only the name column may break inside a word — that is what lets the table shrink.
   Let it loose on a heading and "Mandata" comes out as "Man dat a". */
table.proj td.ln, table.proj th:first-child{overflow-wrap:anywhere}
table.proj td.num, table.proj th.num{text-align:right;white-space:nowrap}
table.proj td:first-child, table.proj th:first-child{min-width:0;text-align:left}
table.proj td.ln{max-width:17rem}
table.proj tr.hid{display:none}
table.cal tr.best td{background:#f3f8ff}
/* The bar and the "20–39" beside it are one unit. Left to wrap, the en dash in the label
   is a break opportunity and a range comes out as "7–" on one line and "21" on the next. */
table.proj td.rg{white-space:nowrap}
.rng{position:relative;display:inline-block;width:5.5rem;height:.7rem;vertical-align:middle;background:#f0f0f0;border-radius:.35rem}
.rng i{position:absolute;top:0;height:100%;background:#9dc3ec;border-radius:.35rem}
.rng u{position:absolute;top:-.12rem;width:2px;height:.94rem;background:#1f5fa9;text-decoration:none}
.b.pj{background:#eef4fb;color:#1f5fa9;border-color:#cfe0f3}
.b.nova{background:#fdf4e6;color:#8a5a12;border-color:#f0dcbb}
.b.out{background:#fdecec;color:#9a2222;border-color:#f3cccc}
.twonum{display:flex;gap:1rem;flex-wrap:wrap;margin:.4rem 0 .6rem}
.twonum .tn{flex:1 1 12rem;min-width:11rem;background:#fafafa;border:1px solid #ececec;border-radius:.5rem;padding:.6rem .7rem}
.twonum .tn b{display:block;font-size:1.7rem;line-height:1.1}
.twonum .tn .tl2{display:block;font-size:.8rem;color:#5c5c5c;margin:.1rem 0 .3rem;text-transform:uppercase;letter-spacing:.03em}
/* A person is three things — how often they get in, who they are, and the detail behind it —
   and they were all running together in one wrapped paragraph per person, which on a phone
   came out as three dense lines with no edge between the name and the small print. Give each
   its own place: the number is a column, the name is a line, the detail is a line under it. */
ol.plist{list-style:none;margin:.5rem 0 0;padding:0}
ol.plist li{display:flex;gap:.7rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid #f0f0f0}
ol.plist li:last-child{border-bottom:0}
ol.plist li.cut{border-top:2px solid #1f5fa9;margin-top:.6rem;padding-top:.7rem}
.pw{flex:0 0 3.7rem;text-align:right;font-variant-numeric:tabular-nums;color:#8a8a8a}
.pw.hi{color:#14532d;font-weight:700}
.pw.mid{color:#1f5fa9;font-weight:700}
.pw.lo{color:#5c5c5c}
.pbody{flex:1 1 auto;min-width:0}
.pname{display:inline-block;font-weight:600;line-height:1.3}
.pmeta{display:block;font-size:.84rem;color:var(--mut);line-height:1.4;margin-top:.1rem}
/* The small print under a name is now mostly links — party, constituency, ballot. In accent
   blue that line shouts louder than the name above it, which is backwards. Keep them the
   colour of the text they sit in and mark them with a hairline, so the line still reads as a
   sentence and every part of it is still a way out. */
.qz a, .pmeta a{color:inherit;text-decoration:underline;text-decoration-color:#ccd4dc;text-underline-offset:2px}
.qz a:hover, .pmeta a:hover{color:var(--acc);text-decoration-color:currentColor}
@media (max-width:520px){
  .rng{width:3.2rem}
  table.proj{font-size:.78rem}
  table.proj td, table.proj th{padding:.3rem .2rem}
  table.proj td.ln{max-width:none}
  /* the range column carries a bar and a "5–13" label; on a phone the label is the part
     that has to survive, so the bar goes and the numbers stay */
  table.proj td .rng{display:none}
  /* Five columns do not fit a phone. .wideonly marks the one the page can do without — it is
     a footnote to the column beside it — and the paragraph that explains that column goes
     with it, so a phone is never left reading about a column it cannot see. */
  .wideonly{display:none}
  /* A heading is what sets the floor for a column of three-character numbers, so on a phone
     the heading is what has to give. */
  table.proj th{font-size:.72rem}
  /* .b is nowrap everywhere else on the site, and there it is right — but "nova/sklopljena"
     sitting inside a table cell drags the whole name column out with it. Let it wrap, but not
     the way the name column wraps: the cell breaks inside words, and a badge that reads
     "nova/sklopl ena" is worse than a wide column. It may break after the slash and nowhere
     else. */
  table.proj td .b{white-space:normal;overflow-wrap:normal;word-break:normal}
  ol.plist li{gap:.5rem}
  .pw{flex-basis:3.1rem}
  .twonum .tn{min-width:0}
}