/* drazovce.sk – spoločný vzhľad. Papier, grafit a modré guľôčkové pero z volebnej miestnosti. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #fbfcfb; --ink: #20252c; --soft: #59616c; --rule: #d8dce1; --sheet: #ffffff;
  --pen: #1d3fcc; --ser-a: #1d3fcc; --ser-b: #1f8a58; --quiet-bar: #a4abb5;
  /* názvy, ktoré používa archívna stránka kandidátov */
  --bg: var(--paper); --fg: var(--ink); --muted: var(--soft); --line: var(--rule); --card: var(--sheet); --accent: var(--pen); --hl: #eef1fc;
  --heat-max: 45%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161a21; --ink: #eceef2; --soft: #a4acb8; --rule: #343a44; --sheet: #1d222b;
    --pen: #93a9ff; --ser-a: #6480ec; --ser-b: #2fa86e; --quiet-bar: #5d6571;
    --hl: #232a3d; --heat-max: 60%;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 "Archivo", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--pen); text-underline-offset: .15em; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.obal { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--soft); }

/* hlavička a pätička */
.hlava { border-bottom: 1px solid var(--rule); }
.hlava .obal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding-top: 14px; padding-bottom: 12px; }
.znacka { font-weight: 700; font-stretch: 85%; font-size: 1.2rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.hlava nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; }
.hlava nav a { color: var(--soft); text-decoration: none; }
.hlava nav a:hover { color: var(--ink); text-decoration: underline; }
.hlava nav a[aria-current] { color: var(--ink); font-weight: 600; }
.paticka { margin-top: 64px; padding-top: 16px; padding-bottom: 40px; font-size: .875rem; color: var(--soft); }
.paticka p { border-top: 1px solid var(--rule); padding-top: 16px; margin: 0; max-width: none; }

/* text */
main p { max-width: 68ch; }
h1 { text-wrap: balance; font-weight: 800; font-stretch: 75%; font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.02; letter-spacing: -.01em; margin: 40px 0 16px; }
h2 { font-weight: 750; font-stretch: 80%; font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.1; margin: 64px 0 12px; }
.uvod { font-size: 1.2rem; line-height: 1.45; margin: 0 0 8px; }
.pozn { font-size: .9rem; color: var(--soft); }

/* poradie kandidátov: veľkosť písma odlišuje zvolených od náhradníkov */
.poradie { list-style: none; margin: 0; padding: 0; }
.riadok { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 7px 0 9px; }
.riadok .c { color: var(--soft); text-align: center; }
.riadok .meno { font-weight: 550; }
.riadok .strana { display: block; font-size: .85rem; color: var(--soft); line-height: 1.3; }
.riadok .hlasy { text-align: right; white-space: nowrap; font-weight: 600; }
.riadok .podiel { display: block; font-size: .85rem; font-weight: 400; color: var(--soft); }
.stlpec { grid-column: 2 / 4; height: 6px; margin-top: 5px; background: var(--quiet-bar); border-radius: 0 4px 4px 0; width: var(--w); }

.zvoleni { margin-top: 32px; }
.zvoleni .riadok { grid-template-columns: 4rem minmax(0, 1fr) auto; padding: 14px 0 16px; }
.zvoleni .c { position: relative; font-size: 1.5rem; font-weight: 650; color: var(--ink); align-self: center; line-height: 1; }
.zvoleni .kruh { position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; transform: translate(-50%, -50%); overflow: visible; }
.kruh path { fill: none; stroke: var(--pen); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.zvoleni .meno { font-size: clamp(1.75rem, 6.6vw, 3rem); font-weight: 800; font-stretch: 72%; line-height: 1.05; letter-spacing: -.005em; }
.zvoleni .hlasy { font-size: clamp(1.25rem, 3.6vw, 1.7rem); font-stretch: 85%; }
.zvoleni .podiel { font-size: .9rem; }
.zvoleni .stlpec { height: 8px; background: var(--ser-a); }

/* jediný pohyb na stránke: krúžky sa po načítaní nakreslia jeden po druhom */
@media (prefers-reduced-motion: no-preference) {
  .kruh path { stroke-dasharray: 1.04; stroke-dashoffset: 1.04; animation: krúžok .7s cubic-bezier(.5, .1, .3, 1) forwards; animation-delay: calc(.25s + var(--i) * .5s); }
  @keyframes krúžok { to { stroke-dashoffset: 0; } }
}

/* tabuľky */
.tab { width: 100%; border-collapse: collapse; }
.tab th, .tab td { padding: 7px 10px 7px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--rule); }
.tab thead th { border-top: 0; font-size: .875rem; font-weight: 600; color: var(--soft); vertical-align: bottom; }
.tab th[scope=row] { font-weight: 400; }
.tab .cislo { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 10px; }
.tab .vyber { font-weight: 700; }
.mier { display: block; height: 6px; margin-top: 4px; border-radius: 0 4px 4px 0; width: var(--w); background: var(--quiet-bar); }
.ser-a { background: var(--ser-a); }
.ser-b { background: var(--ser-b); }
.tab-porovnanie th:first-child { width: 42%; }
.tab-porovnanie td { width: 29%; }
.tab tr.zvoleny th[scope=row] { font-weight: 700; }
.miesto { display: block; font-size: .85rem; line-height: 1.25; color: var(--soft); }
.posuv { overflow-x: auto; }
.posuv:focus-visible { outline: 2px solid var(--pen); }

/* hlasy po okrskoch: čím väčší podiel lístkov v okrsku, tým sýtejšia bunka */
.tepla { min-width: 620px; font-size: .95rem; }
.tepla th, .tepla td { padding: 5px 6px; }
.tepla thead th { text-align: center; }
.tepla .skup { border-bottom: 2px solid var(--rule); }
.tepla thead tr:last-child th:first-child { padding-left: 0; }
.tepla th[scope=row] { position: sticky; left: 0; background: var(--paper); padding-left: 0; white-space: nowrap; min-width: 9.5rem; }
.tepla td { text-align: right; background: color-mix(in srgb, var(--ser-a) calc(var(--a) * var(--heat-max) / 100%), transparent); border-left: 2px solid var(--paper); }

@media (max-width: 480px) {
  .tab-prim { font-size: .875rem; }
  .tab-prim th, .tab-prim td { padding-right: 4px; }
  .tab-prim .cislo { padding-left: 4px; }
}

/* archívna stránka kandidátov */
.oznam { max-width: none; margin: 28px 0 0; padding: 12px 14px; background: var(--hl); border-left: 3px solid var(--pen); }
.archiv h1 { font-size: clamp(2rem, 6vw, 3rem); margin-top: 24px; }
.archiv h2 { margin-top: 40px; }
.zoznam-volieb { list-style: none; padding: 0; font-size: 1.2rem; }
.zoznam-volieb li { padding: 8px 0; border-top: 1px solid var(--rule); }

/* text len pre čítačky obrazovky */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }