@font-face { font-family:"Raleway"; font-weight:100 900; font-display:swap; src:url(/assets/fonts/raleway-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Raleway"; font-weight:100 900; font-display:swap; src:url(/assets/fonts/raleway-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme:light;
  --accent:#0E3A55; --tint-red:#FBEFF1; --tint-blue:#E8F3F9; --warn-bg:#FFF4D6; --warn-ink:#8A5A00;
  --soon-bg:#F3D0D2; --soon-ink:#7A1014; --soon-hover:#EBB8BB; --off-bg:#E4E7EA; --off-ink:#4E5960;
  --track:#EDEDED; --chart-main:#0E3A55; --seat-stroke:#2E2E2E; --t1:#AED6EB; --t2:#678A9F; --t3:#0E3A55;
  /* boje Grada Dubrovnika (www.dubrovnik.hr) */
  --stone:#F2F2F2; --stone-2:#EDEDED; --paper:#FFFFFF; --ink:#2E2E2E; --muted:#5F6B73;
  --sea:#0E3A55; --sea-deep:#0A2B3F; --slate:#678A9F; --sky:#AED6EB; --libertas:#C1161C; --line:#D6DCE0;
  /* crvena za tekst (u tamnom načinu svjetlija), obrub fokusa */
  --red-ink:#C1161C; --focus:#0E3A55; --focus-halo:#F2B705;
  --step--1:0.875rem; --step-0:1.0625rem; --step-1:1.3rem; --step-2:1.65rem; --step-3:2.2rem; --step-4:clamp(2.2rem, 6vw, 3.4rem);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; font-size:clamp(100%, 0.3vw + 0.82rem, 112.5%); }
body { margin:0; background:var(--paper); color:var(--ink); font:400 var(--step-0)/1.6 "Raleway", system-ui, sans-serif; font-variant-numeric:lining-nums; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-color:var(--libertas); }
a:hover { color:var(--red-ink); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--focus-halo); }
h1, h2, h3 { line-height:1.15; margin:0 0 .5em; font-weight:700; color:var(--accent); }
h1 { font-size:var(--step-4); } h2 { font-size:var(--step-2); margin-top:2.2rem; padding-left:12px; border-left:4px solid var(--libertas); } h3 { font-size:var(--step-1); }
p { max-width:68ch; }
.wrap { max-width:min(1680px, 100%); margin:0 auto; padding:0 clamp(16px, 3vw, 40px); }
.skip { position:absolute; left:-999px; } .skip:focus { left:16px; top:8px; background:var(--paper); padding:8px; z-index:9; }

/* zaglavlje: kameni pojas s imenom grada */
.masthead { background:var(--paper); border-top:4px solid var(--libertas); box-shadow:0 1px 0 var(--line); }
.brand-logo { display:block; height:44px; width:auto; }
.masthead .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; padding-top:14px; padding-bottom:14px; }
.brand { display:flex; align-items:center; gap:14px; color:var(--accent); text-decoration:none; font-weight:700; line-height:1.2; }
.brand span { border-left:1px solid var(--line); padding-left:14px; }
.brand small { display:block; font-weight:400; color:var(--muted); font-size:var(--step--1); }
.masthead nav a { color:var(--accent); font-weight:600; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.masthead nav a:hover { color:var(--red-ink); border-bottom-color:var(--libertas); }
.masthead nav { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:var(--step--1); }

/* naslov izbora */
.hero { padding:40px 0 28px; background:var(--stone); border-bottom:1px solid var(--line); }
.hero h1 { max-width:22ch; }
.hero h1::after { content:""; display:block; width:72px; height:4px; background:var(--libertas); margin-top:16px; }
.hero .when { font-size:var(--step-1); margin:0; }
.notice { margin-top:18px; padding:12px 16px; border-left:5px solid var(--libertas); background:var(--tint-red); max-width:68ch; }
.notice.live { border-color:var(--accent); background:var(--tint-blue); }

/* gdje glasujem */
.find { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; max-width:560px; }
.find label { flex-basis:100%; font-weight:700; }
.find input { flex:1 1 220px; font:inherit; padding:12px 14px; border:2px solid var(--accent); border-radius:0; }
.find input:focus { border-color:var(--libertas); outline:none; box-shadow:0 0 0 3px rgba(193,22,28,.2); }
.btn { font:inherit; font-weight:700; padding:12px 18px; border:0; border-radius:0; background:var(--libertas); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { background:#9A1116; color:#fff; }

/* jedinice */
.units { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap:0; border-top:1px solid var(--line); margin-top:12px; }
.unit { display:block; padding:14px 12px 14px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.unit:hover .unit-name { text-decoration:underline; color:var(--red-ink); }
.unit-name { font-weight:700; font-size:var(--step-1); }
.unit-meta { color:var(--muted); font-size:var(--step--1); }
.seatbar { display:block; margin-top:6px; height:10px; width:100%; max-width:200px; }

/* vijeće – polukrug mjesta */
.council { max-width:420px; }
.council > svg { width:100%; height:auto; display:block; }
.council text { font:700 13px "Raleway", sans-serif; }
.council .total { font-size:30px; fill:var(--accent); } .council .total-label { font:400 12px "Raleway", sans-serif; fill:var(--muted); }
.legend { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px; }
.legend li { display:flex; gap:10px; align-items:baseline; }
.dot { width:26px; height:26px; flex:none; } .dot text { font:700 12px "Raleway", sans-serif; }

/* tablice */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; font-size:var(--step--1); font-variant-numeric:lining-nums tabular-nums; }
th, td { text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:700; color:var(--muted); }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:10px; }
tr.sum th, tr.sum td { border-top:2px solid var(--accent); font-weight:700; color:var(--accent); }
.out { color:var(--muted); }
.elected { font-weight:700; }

/* rezultat jedinice */
.result-grid { display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr); gap:32px; align-items:start; }
.stage { display:inline-block; font-size:var(--step--1); padding:2px 10px; border-radius:999px; background:var(--stone); }
.stage.final { background:var(--libertas); color:#fff; }

/* liste */
.list { border-top:3px solid var(--libertas); padding-top:12px; margin-top:28px; }
.list h3 { display:flex; gap:12px; align-items:baseline; }
.list .ballot { font-size:var(--step-2); }
.list .by { color:var(--muted); margin:0 0 8px; }

/* rokovi – stvarni slijed, pa numeriran */
.timeline { list-style:none; counter-reset:t; padding:0; margin:0; max-width:760px; }
.timeline li { counter-increment:t; display:grid; grid-template-columns:2.2rem 1fr; gap:4px 12px; padding:10px 0; border-bottom:1px solid var(--line); }
.timeline li::before { content:counter(t) "."; color:var(--muted); }
.timeline .date { grid-column:2; color:var(--muted); font-size:var(--step--1); }
.timeline li.past { color:var(--muted); }
.timeline li.next { font-weight:700; color:var(--red-ink); }

.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:8px 40px; }
.docs { list-style:none; padding:0; margin:0; } .docs li { padding:6px 0; border-bottom:1px solid var(--line); }
.formats a { margin-right:12px; }
.muted { color:var(--muted); }
footer { margin-top:56px; padding:28px 0 40px; background:var(--sea); font-size:var(--step--1); color:#DCE6EC; border-top:4px solid var(--libertas); }
footer a { color:#fff; } footer a:hover { color:var(--sky); }
footer .footer-logo { height:48px; width:auto; display:block; margin-bottom:12px; }

@media (max-width:720px) {
  .brand-logo { height:34px; } .brand span { font-size:var(--step--1); }
  .hero { padding-top:24px; }
  .result-grid { grid-template-columns:minmax(0, 1fr); }
  th, td { padding-right:8px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }

/* izlaznost: kružni grafikon + rangirani stupci */
.turnout-grid { display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); gap:40px; align-items:start; margin-top:28px; }
.donut-card { margin:0; position:sticky; top:16px; padding:20px; background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--libertas); }
.donut-card svg { width:100%; max-width:240px; display:block; margin:0 auto; }
.donut-pct { font:700 30px "Raleway", sans-serif; fill:var(--accent); font-variant-numeric:lining-nums; }
.donut-sub { font:500 13px "Raleway", sans-serif; fill:var(--muted); }
.donut-num { margin:12px 0 8px; text-align:center; }
.key { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--step--1); color:var(--muted); }
.key li { display:flex; align-items:center; gap:6px; } .key svg { width:12px; height:12px; }
.donut-card .key { justify-content:center; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); text-align:center; }
.split dt { font-size:var(--step--1); color:var(--muted); } .split dd { margin:0; font-weight:700; color:var(--accent); font-size:var(--step-1); font-variant-numeric:lining-nums; }
.bars-title { margin-top:24px; font-size:var(--step-1); }
.key-row { margin-bottom:4px; }
.bars { list-style:none; padding:0; margin:0; }
.bars li { display:grid; grid-template-columns:minmax(110px, 160px) 1fr 64px; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--stone-2); }
.bar-name { font-weight:600; }
.bar { width:100%; height:14px; display:block; }
.bar-val { text-align:right; font-weight:700; font-variant-numeric:lining-nums tabular-nums; color:var(--accent); }
.small { font-size:var(--step--1); }
.table-toggle { margin-top:32px; } .table-toggle summary { cursor:pointer; font-weight:700; color:var(--accent); padding:8px 0; }
@media (max-width:820px) {
  .turnout-grid { grid-template-columns:minmax(0, 1fr); gap:24px; }
  .donut-card { position:static; }
  .bars li { grid-template-columns:96px 1fr 56px; gap:8px; }
}

/* izbornik godina */
.years { background:var(--sea); }
.years .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding-top:6px; padding-bottom:6px; }
.years-label { color:#DCE6EC; font-size:var(--step--1); margin-right:6px; }
.years a { color:#fff; text-decoration:none; font-weight:600; font-size:var(--step--1); padding:4px 10px; border-bottom:2px solid transparent; }
.years a:hover { border-bottom-color:var(--sky); color:#fff; }
.years a[aria-current="page"] { background:var(--libertas); }

/* rezultat jedinice */
.result-top { display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:32px; align-items:center; margin:8px 0 12px; }
.council { margin:0; }
.kpis { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 24px; margin:0; }
.kpis dt { font-size:var(--step--1); color:var(--muted); }
.kpis dd { margin:0; font-size:var(--step-1); font-weight:700; color:var(--accent); font-variant-numeric:lining-nums tabular-nums; }
.kpis dd small { font-weight:400; color:var(--muted); font-size:var(--step--1); }
.kpi-main { grid-column:1 / -1; padding-bottom:12px; border-bottom:1px solid var(--line); }
.kpi-main dd { font-size:var(--step-3); color:var(--red-ink); }
.lbadge { width:28px; height:28px; flex:none; } .lbadge text { font:700 12px "Raleway", sans-serif; }
ol.votes { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
ol.votes li { display:grid; grid-template-columns:28px minmax(0, 1fr); gap:12px; align-items:start; }
ol.votes li.out .v-name, ol.votes li.out .v-nums strong { color:var(--muted); }
ol.votes li.out .v-bar, ol.votes li.out .lbadge { opacity:.55; }
.v-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.v-name { font-weight:700; color:var(--ink); }
.v-seats { flex:none; font-size:var(--step--1); font-weight:700; color:#fff; background:var(--sea); padding:2px 10px; border-radius:999px; }
.v-seats.none, .out .v-seats { background:none; color:var(--muted); box-shadow:inset 0 0 0 1px var(--muted); }
.v-bar { display:block; width:100%; height:12px; margin:6px 0 4px; }
.v-nums { font-size:var(--step--1); color:var(--muted); font-variant-numeric:lining-nums tabular-nums; }
.v-nums strong { color:var(--ink); font-size:var(--step-0); }
.elected-groups { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap:16px; }
.egroup { border:1px solid var(--line); border-top:3px solid var(--accent); padding:12px 16px; background:var(--paper); }
.egroup h4 { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:var(--step-0); color:var(--accent); }
.egroup h4 span:first-of-type { flex:1; }
.egroup ol { margin:0; padding-left:1.4em; } .egroup li { padding:2px 0; }
details.dhondt { margin-top:28px; border:1px solid var(--line); background:var(--stone); padding:12px 16px; }
details.dhondt > summary { cursor:pointer; font-weight:700; color:var(--accent); }
ol.ladder { list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:8px; }
ol.ladder li { display:grid; grid-template-columns:28px auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; background:var(--paper); border:1px solid var(--line); padding:8px 10px; }
ol.ladder .lbadge { grid-row:1 / 3; }
.l-seat { font-weight:700; color:var(--red-ink); font-size:var(--step--1); white-space:nowrap; }
.l-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.l-q { grid-column:2 / 4; font-size:var(--step--1); color:var(--muted); font-variant-numeric:lining-nums tabular-nums; }
.next-seat { background:var(--paper); border-left:4px solid var(--libertas); padding:10px 14px; }
details.qtable { margin-top:12px; } details.qtable summary { cursor:pointer; color:var(--accent); }
table.quotients th[scope=row] { min-width:180px; color:var(--ink); font-weight:600; }
table.quotients td.win { background:var(--sea); color:#fff; font-weight:700; }
@media (max-width:720px) {
  .result-top { grid-template-columns:minmax(0, 1fr); gap:16px; }
  .council { max-width:340px; margin:0 auto; }
}

/* stranica izbora: bočni izbornik kao na www.dubrovnik.hr */
.election-layout { display:grid; grid-template-columns:clamp(250px, 22vw, 340px) minmax(0, 1fr); gap:clamp(24px, 3vw, 48px); align-items:start; padding-top:28px; }
.election-main { min-width:0; }
.election-main .wrap { padding:0; max-width:none; }
.election-main .hero { background:none; border:0; padding:0 0 20px; }
.election-main .hero h1 { font-size:var(--step-3); }
.section-title { font-size:var(--step-3); }
.section-title::after { content:""; display:block; width:72px; height:4px; background:var(--libertas); margin-top:12px; }
.crumbs-pub { margin:0 0 6px; font-size:var(--step--1); }
ul.doclist { list-style:none; padding:0; margin:12px 0 24px; border-top:1px solid var(--line); }
ul.doclist li { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
ul.doclist a { display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:var(--accent); font-weight:600; }
ul.doclist a:hover span { text-decoration:underline; color:var(--red-ink); }
ul.doclist svg { width:16px; height:20px; flex:none; margin-top:2px; }
.doc-plain { font-weight:600; color:var(--ink); }
@media (max-width:900px) {
  .election-layout { grid-template-columns:minmax(0, 1fr); gap:16px; padding-top:16px; }
}

/* pregled iz administracije */
.preview-bar { position:sticky; top:0; z-index:10; background:#C1161C; color:#fff; padding:10px 16px; text-align:center; font-size:var(--step--1); }
.preview-bar a { color:#fff; font-weight:700; margin-left:14px; }
.unpub { display:inline-block; background:var(--warn-bg); color:var(--warn-ink); border:1px dashed var(--warn-ink); padding:1px 8px; font-size:var(--step--1); font-weight:700; }

/* izbornik odjeljaka izbora */
.side { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.side ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.side li { position:relative; }
.side li > a:first-child { display:flex; justify-content:space-between; align-items:center; gap:.75em; min-height:3.6em; padding:.65em 1em .65em 1.6em;
  background:var(--libertas); color:#fff; text-decoration:none; text-transform:uppercase; font-size:.8125rem; letter-spacing:.02em; line-height:1.45;
  border-left:6px solid transparent; transition:background-color .15s ease, border-color .15s ease; }
.side li > a:first-child:hover { background:#9A1116; }
.side li.current > a:first-child { background:var(--sea); border-left-color:var(--libertas); }
.side li.soon > a:first-child { background:var(--soon-bg); color:var(--soon-ink); }
.side li.soon > a:first-child:hover { background:var(--soon-hover); }
.side li.soon.current > a:first-child { background:var(--sea); color:#fff; }
.side li.off > a:first-child { background:var(--off-bg); color:var(--off-ink); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.35); }
.side li.off.current > a:first-child { background:var(--sea); color:#fff; }
.side-meta { display:flex; align-items:center; gap:8px; flex:none; }
.side-count { min-width:24px; padding:1px 7px; border-radius:999px; background:rgba(0,0,0,.2); font-size:.75rem; font-weight:700; text-align:center; letter-spacing:0; }
.side-soon { font-size:.6875rem; text-transform:none; letter-spacing:0; opacity:.85; }
.side svg { width:.625rem; height:.75rem; }
.side-edit { display:block; text-align:right; font-size:.75rem; margin-top:2px; color:var(--accent); }
.preview-bar ~ main .side { top:52px; max-height:calc(100vh - 64px); }
@media (prefers-reduced-motion:reduce) { .side li > a:first-child { transition:none; } }
@media (max-width:900px) {
  .side { position:sticky; top:0; z-index:5; max-height:none; overflow-x:auto; overflow-y:hidden; margin:0 -16px; padding:8px 16px;
    background:var(--paper); border-bottom:1px solid var(--line); scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .side::-webkit-scrollbar { display:none; }
  .side ul { display:flex; gap:6px; width:max-content; }
  .side li { scroll-snap-align:start; }
  .side li > a:first-child { min-height:40px; padding:8px 12px; border-left:0; border-bottom:4px solid transparent; font-size:.75rem; white-space:nowrap; }
  .side li.current > a:first-child { border-bottom-color:var(--libertas); }
  .side svg, .side-edit { display:none; }
  .preview-bar ~ main .side { top:40px; }
}

/* mobitel: jedna traka (grb, „Gdje glasujem?“, ☰) i izbornik koji klizi s desne strane.
   Bez JS-a ostaju navigacija zaglavlja i vodoravne kartice odjeljaka. */
.mast-actions { display:none; align-items:center; gap:4px; margin-left:auto; }
.menu-toggle, .find-quick, .drawer-close { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:8px;
  background:none; color:var(--accent); cursor:pointer; }
.menu-toggle:hover, .find-quick:hover, .drawer-close:hover { background:var(--stone); color:var(--accent); }
.menu-toggle svg, .find-quick svg, .drawer-close svg { width:26px; height:26px; }
.drawer, .drawer-backdrop { display:none; }
@media (max-width:900px) {
  .js .mast-actions { display:flex; }
  .js .masthead nav, .js .side, .js .years { display:none; }
  .js .masthead { position:sticky; top:0; z-index:20; border-top-width:3px; }
  .js .preview-bar ~ .masthead { position:relative; }
  .js .masthead .wrap { flex-wrap:nowrap; padding-top:8px; padding-bottom:8px; gap:12px; }
  .js .brand { min-width:0; }
  .js .brand-logo { height:32px; }
  .js .election-layout { padding-top:20px; }
  .js .drawer-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:40; background:rgba(10,20,28,.5); opacity:0; transition:opacity .2s ease; }
  .js .drawer:not([hidden]) { display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; z-index:41; width:min(88vw, 360px);
    background:var(--paper); color:var(--ink); box-shadow:-8px 0 24px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .22s ease; }
  .js.menu-open .drawer { transform:none; }
  .js.menu-open .drawer-backdrop { opacity:1; }
  .js.menu-open, .js.menu-open body { overflow:hidden; }
}
@media (max-width:520px) { .js .brand span { display:none; } }
@media (prefers-reduced-motion:reduce) { .drawer, .drawer-backdrop { transition:none !important; } }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 20px; border-top:3px solid var(--libertas); border-bottom:1px solid var(--line); }
.drawer-title { margin:0; font-weight:700; color:var(--accent); font-size:var(--step-1); }
.drawer-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px 32px; }
.drawer-find { display:flex; justify-content:center; align-items:center; gap:8px; width:100%; min-height:48px; margin-bottom:12px; }
.drawer-find svg { width:20px; height:20px; }
.drawer-list { list-style:none; margin:0 -20px; padding:0; }
.drawer-list a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:10px 20px; border-left:4px solid transparent;
  border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; text-decoration:none; line-height:1.3; }
.drawer-list a:hover { background:var(--stone); color:var(--accent); }
.drawer-list li.current a { border-left-color:var(--libertas); background:var(--tint-blue); color:var(--accent); }
.drawer-list small { flex:none; color:var(--muted); font-weight:500; font-size:.8125rem; }
.drawer-count { flex:none; min-width:26px; padding:1px 8px; border-radius:999px; background:var(--stone-2); color:var(--accent); font-size:.8125rem; font-weight:700; text-align:center; }
.drawer-label { margin:24px 0 8px; color:var(--muted); font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.seg { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg a { flex:1; display:grid; place-items:center; min-height:44px; color:var(--accent); font-weight:700; text-decoration:none; }
.seg a + a { border-left:1px solid var(--line); }
.seg a[aria-current="page"] { background:var(--sea); color:#fff; }

/* Gdje glasujem: pronađena ulica u popisu područja */
mark.hit { background:#FFE58A; color:#17232B; font-weight:700; padding:0 3px; border-radius:2px; box-shadow:0 0 0 1px #E8C547; }

/* ---------------------------------------------------------------- tamni način
   Prati postavku uređaja; ručni izbor (widget za pristupačnost) postavlja data-theme na <html>. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
  color-scheme:dark;
    --stone:#182229; --stone-2:#22303A; --paper:#11181D; --ink:#E4E9EC; --muted:#A3B0B8; --line:#2E3C46;
    --accent:#93C7E4; --tint-red:#3A1B1F; --tint-blue:#15303F; --warn-bg:#3D3112; --warn-ink:#F2C66D;
    --soon-bg:#4A2528; --soon-ink:#F5C9CC; --soon-hover:#5B2D31; --off-bg:#28323A; --off-ink:#A3B0B8; --red-ink:#F0787C; --focus:#F2B705; --focus-halo:#11181D;
    --track:#2A3640; --chart-main:#7FB8DA; --seat-stroke:#A3B0B8; --t1:#2E5870; --t2:#5D93B3; --t3:#A9D6EF;
  }
  :root:not([data-theme="light"]) .logo-light { display:none; }
  :root:not([data-theme="light"]) .logo-dark { display:block; }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --stone:#182229; --stone-2:#22303A; --paper:#11181D; --ink:#E4E9EC; --muted:#A3B0B8; --line:#2E3C46;
  --accent:#93C7E4; --tint-red:#3A1B1F; --tint-blue:#15303F; --warn-bg:#3D3112; --warn-ink:#F2C66D;
  --soon-bg:#4A2528; --soon-ink:#F5C9CC; --soon-hover:#5B2D31; --off-bg:#28323A; --off-ink:#A3B0B8; --red-ink:#F0787C; --focus:#F2B705; --focus-halo:#11181D;
  --track:#2A3640; --chart-main:#7FB8DA; --seat-stroke:#A3B0B8; --t1:#2E5870; --t2:#5D93B3; --t3:#A9D6EF;
}
:root[data-theme="dark"] .logo-light { display:none; }
:root[data-theme="dark"] .logo-dark { display:block; }
.logo-dark { display:none; }
.find input { background:var(--paper); color:var(--ink); }
/* grafikoni: boje iz tokena (CSS ima prednost pred atributima fill/stroke) */
.track { fill:var(--track); } .donut-track { stroke:var(--track); }
.donut-main { stroke:var(--chart-main); } .legend-main { fill:var(--chart-main); }
.seat { stroke:var(--seat-stroke); }
.t-1130 { fill:var(--t1); } .t-1630 { fill:var(--t2); } .t-1900 { fill:var(--t3); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* „Gdje glasujem?“ – rezultat pretrage */
.find-summary { margin-top:28px; }
.station { border-top:3px solid var(--libertas); padding-top:12px; margin-top:24px; max-width:68ch; }
.station h3 { margin-bottom:6px; }
.station dl { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:4px 16px; margin:0 0 8px; }
.station dt { color:var(--muted); font-size:var(--step--1); padding-top:.15em; }
.station dd { margin:0; }
.station .when-vote { font-weight:700; color:var(--accent); }
.bring-id { display:flex; gap:12px; align-items:flex-start; }
.bring-id svg { width:24px; height:24px; flex:none; margin-top:2px; color:var(--accent); }
/* Testna instalacija (APP_INSTANCE=test) */
.test-bar { background:#C98A00; color:#1b1300; }
/* karta biračkih mjesta (MapLibre, lokalne pločice) */
.station-map { margin:16px 0 8px; max-width:68ch; }
.station-map-canvas { height:clamp(260px, 42vh, 420px); border:1px solid var(--line); background:var(--stone); }
.station-map figcaption { margin-top:4px; }
.map-pin { min-width:30px; height:30px; padding:0 6px; border-radius:15px; display:grid; place-items:center; cursor:pointer;
  background:var(--sea); color:#fff; font:700 14px/1 "Raleway", system-ui, sans-serif; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.35); }
.map-pin:hover, .map-pin:focus-visible { background:var(--libertas); }
.maplibregl-popup-content { font:400 var(--step--1)/1.45 "Raleway", system-ui, sans-serif; color:#2E2E2E; padding:12px 28px 12px 14px; }
.maplibregl-popup-content a { color:#0E3A55; font-weight:700; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib a { color:#2E2E2E; }
/* jedinica: lista s najviše mjesta (boje traka su po redu jačine u jedinici, ne po strankama) */
.unit-lead { display:block; margin-top:4px; color:var(--muted); font-size:var(--step--1); }
/* upute biraču */
ol.guide { max-width:68ch; padding-left:1.4em; } ol.guide li { margin:0 0 10px; padding-left:4px; }
/* zbroj za cijeli Grad */
.city-kpis { grid-template-columns:repeat(auto-fit, minmax(min(160px, 100%), 1fr)); margin:8px 0 16px; }
.city-kpis div { min-width:0; }
table.city-seats { max-width:640px; } table.city-seats th[scope=row] { color:var(--ink); font-weight:600; }
/* poveznice na karte uz adresu biračkog mjesta i u oblačiću karte */
.maplinks { display:inline; }
.maplink-sub { margin-left:10px; font-size:var(--step--1); white-space:nowrap; }
.maplink-sub::before { content:"→ "; text-decoration:none; }
.popup-links { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; }
/* mobitel: manji naslov stranice */
@media (max-width:520px) {
  .election-main .hero h1, .section-title { font-size:1.75rem; }
  .hero .when { font-size:var(--step-0); }
}
.drawer:focus { outline:none; box-shadow:-8px 0 24px rgba(0,0,0,.18); }
.menu-open #awgt-launcher { display:none !important; }