/* Moji mediji — CGP žetoni (mojimediji.si) */
:root {
  --ink: #f5eee2;        /* papir / ozadje */
  --ink-2: #efe6d5;
  --ink-3: #e7dcc6;
  --paper: #16120e;      /* tisk / besedilo */
  --paper-dim: #4c4538;
  --paper-mute: #6e6556;
  --press: #e2341b;
  --press-deep: #b3260f;
  --gold: #9a6b16;
  --line: #16120e24;
  --line-soft: #16120e12;

  --bg: var(--ink);
  --fg: var(--paper);
  --za: var(--press);
  --proti: var(--paper);
  --turnout: var(--gold);

  --f-display: 'Fraunces', Georgia, serif;
  --f-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
:root[data-theme='dark'] {
  --bg: #16120e;
  --fg: #f5eee2;
  --ink-2: #211c16;
  --ink-3: #2c261e;
  --paper-dim: #c9bfae;
  --paper-mute: #9b917f;
  --line: #f5eee224;
  --line-soft: #f5eee212;
  --proti: #e7dcc6;
  --turnout: #d4a24a;
}
:root[data-bg='transparent'] { --bg: transparent; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 var(--f-sans);
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
}
.mm { padding: 20px 16px 16px; max-width: 1100px; margin: 0 auto; }
.mm--compact { padding: 16px; }

/* --- glava --- */
.kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-mute);
}
.kicker b { color: var(--press); font-weight: 500; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--press); }
.live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--press);
  animation: pulse 1.6s ease-out infinite;
}
.live--final { color: var(--paper-dim); }
.live--final::before { background: var(--paper-dim); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #e2341b88; } 100% { box-shadow: 0 0 0 9px #e2341b00; } }
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }

h2.title {
  font: 600 clamp(22px, 3.6vw, 34px)/1.12 var(--f-display);
  letter-spacing: -.01em; margin: 10px 0 4px; text-wrap: balance;
}
.mm--compact h2.title { font-size: 21px; }
.subtitle { color: var(--paper-dim); font-size: 13px; margin: 0 0 16px; max-width: 70ch; }

.notice, .stale {
  border-left: 3px solid var(--press); background: var(--ink-2);
  padding: 8px 12px; margin: 12px 0; font-size: 13px;
}
.stale { border-color: var(--gold); }

/* --- glavni rezultat --- */
.result { margin: 18px 0 8px; }
.result__nums { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.opt { min-width: 0; }
.opt--proti { text-align: right; }
.opt__label { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.opt--za .opt__label { color: var(--za); }
.opt__pct {
  font: 600 clamp(34px, 7vw, 60px)/1 var(--f-display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.mm--compact .opt__pct { font-size: 36px; }
.opt--za .opt__pct { color: var(--za); }
.opt__votes { font: 400 12px/1.4 var(--f-mono); color: var(--paper-mute); margin-top: 4px; }

.bar { position: relative; display: flex; height: 14px; margin-top: 12px; background: var(--ink-3); }
.bar span { display: block; height: 100%; transition: width .6s ease; }
.bar .za { background: var(--za); }
.bar .proti { background: var(--proti); margin-left: auto; }
.bar::after {
  content: ''; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px;
  background: var(--fg); opacity: .5;
}
.bar--thin { height: 6px; margin-top: 0; }
.bar--thin::after { top: -2px; bottom: -2px; }

/* --- kvorum (zakonodajni) --- */
.quorum { margin: 18px 0 4px; padding: 14px; border: 1px solid var(--line); background: var(--ink-2); }
.quorum__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.quorum__verdict { font: 600 19px/1.2 var(--f-display); }
.quorum__verdict.rejected { color: var(--press); }
.quorum__note { font-size: 12px; color: var(--paper-mute); }
.qbar { position: relative; height: 8px; background: var(--ink-3); margin: 12px 0 6px; }
.qbar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--proti); transition: width .6s ease; }
.qbar i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--press); }
.qlegend { display: flex; justify-content: space-between; font: 400 11px/1.3 var(--f-mono); color: var(--paper-mute); }

/* --- številke --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid var(--line); margin-top: 18px; }
.stat { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.stat__k { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-mute); }
.stat__v { font: 600 22px/1.2 var(--f-display); font-variant-numeric: tabular-nums; margin-top: 4px; }
.stat__s { font-size: 12px; color: var(--paper-mute); }

/* --- prazno stanje --- */
.empty { padding: 26px 0 10px; }
.empty__big { font: 600 24px/1.2 var(--f-display); }
.empty p { color: var(--paper-dim); margin: 6px 0 0; }

/* --- razdelki --- */
.section { margin-top: 28px; }
.section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section__title { font: 600 18px/1.2 var(--f-display); margin: 0; }
.tabs { display: inline-flex; border: 1px solid var(--line); }
.tabs button {
  font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 12px; border: 0; background: transparent; color: var(--paper-dim); cursor: pointer;
}
.tabs button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }

/* --- zemljevid --- */
.map { position: relative; }
.map svg { display: block; width: 100%; height: auto; }
.map .ok { stroke: var(--bg); stroke-width: .8; cursor: pointer; transition: fill .4s; }
.map .ok:hover, .map .ok.sel { stroke: var(--fg); stroke-width: 2; }
.map .ve { fill: none; stroke: var(--fg); stroke-width: 1.4; pointer-events: none; opacity: .55; }
.tip {
  position: absolute; pointer-events: none; z-index: 2; min-width: 170px;
  background: var(--fg); color: var(--bg); padding: 8px 10px; font-size: 12px; line-height: 1.35;
  transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap;
}
.tip b { font-family: var(--f-display); font-size: 14px; display: block; margin-bottom: 2px; }
.tip .m { font-family: var(--f-mono); }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 11px/1 var(--f-mono); color: var(--paper-mute); }
.legend .ramp { flex: 0 1 220px; height: 8px; }

/* --- tabela --- */
.search {
  width: 100%; max-width: 280px; font: 14px var(--f-sans); padding: 8px 10px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
}
.search:focus { outline: 2px solid var(--press); outline-offset: -1px; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th {
  font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-mute); text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--fg);
}
th:first-child, td:first-child { text-align: left; padding-left: 0; }
td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
td:first-child { white-space: normal; }
tr.ve td { font-weight: 700; border-bottom-color: var(--line); background: var(--ink-2); cursor: pointer; }
tr.ve td:first-child::before { content: '▸ '; color: var(--paper-mute); }
tr.ve.open td:first-child::before { content: '▾ '; }
tr.vo td:first-child { padding-left: 16px; }
tr.vo { cursor: pointer; }
tr.vo:hover td, tr.vo.sel td { background: var(--line-soft); }
td.za { color: var(--za); }
td .mini { display: inline-block; width: 60px; vertical-align: middle; margin-left: 8px; }
.win { font-weight: 700; }

/* --- volišča --- */
.detail { margin-top: 18px; padding: 14px; border: 1px solid var(--fg); }
.detail__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.detail h3 { font: 600 18px/1.2 var(--f-display); margin: 0; }
.close { border: 0; background: none; color: var(--paper-mute); font: 500 11px var(--f-mono); text-transform: uppercase; cursor: pointer; }
.muted { color: var(--paper-mute); }
.early { font: 500 10px var(--f-mono); color: var(--gold); text-transform: uppercase; margin-left: 4px; }

/* --- pregled vseh --- */
.grid { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--fg); }
.card { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .card:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--line); }
  .card:nth-child(even) { padding-left: 20px; }
}
.card h3 { font: 600 18px/1.2 var(--f-display); margin: 6px 0 10px; text-wrap: balance; }
.card .opt__pct { font-size: 30px; }
.card a, .more { color: inherit; }
.more { display: inline-block; margin-top: 12px; font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--press); text-decoration: none; }
.more:hover { text-decoration: underline; }

/* --- noga --- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--line);
  font: 400 11px/1.4 var(--f-mono); color: var(--paper-mute);
}
.foot strong { color: var(--fg); font-weight: 500; }

@media (max-width: 520px) {
  .hide-sm { display: none; }
  td .mini { display: none; }
}