:root {
  --ink: #14171a;
  --muted: #5b6570;
  --line: #d8dde2;
  --bg: #fdfdfc;
  --accent: #1d4ed8;
  --warn-bg: #fff8e6;
  --chart-funded: #2a78d6;    /* overené validátorom, nemeniť */
  --chart-rejected: #eb6834;
  --chart-boundary: #14171a;
}

/* Web nemá žiaden JS ani prepínač motívu — jediný mechanizmus tmavého
   režimu je systémová voľba prehliadača. Grafové farby (--chart-funded/
   --chart-rejected) sa NEMENIA — validátor paliety ich overil ako
   rozlíšiteľné na svetlom AJ tmavom povrchu (pozri modulový docstring
   web/charts.py), takže rovnaký odtieň platí v oboch motívoch; mení sa len
   povrch (--bg/--ink/--muted/--line/--accent/--warn-bg/--chart-boundary),
   všetko cez tie isté premenné, ktoré už používa každý štýl na stránke. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaed;
    --muted: #9aa4ae;
    --line: #33383e;
    --bg: #14171a;
    --accent: #6ea8fe;
    --warn-bg: #2a2411;
    --chart-boundary: #e8eaed;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

header, main, footer { max-width: 68rem; margin: 0 auto; padding: 1rem 1.25rem; }
main { max-width: 52rem; }          /* čitateľná dĺžka riadku */
main .wide { max-width: none; }     /* tabuľky smú byť širšie */

header { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
         border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--ink); }
nav { display: flex; gap: 1rem; flex-wrap: wrap; align-self: center; }

a { color: var(--accent); }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.5rem 0 .5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }

.hint { color: var(--muted); font-size: .92rem; }
.warning { background: var(--warn-bg); border-left: 3px solid #c8952a;
           padding: .75rem 1rem; }

dl.facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.5rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem;
        display: block; overflow-x: auto; }   /* na mobile sa dá scrollovať */
th, td { text-align: left; padding: .45rem .6rem;
         border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .9rem; }
td:nth-last-child(-n+2) { font-variant-numeric: tabular-nums; }

form.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
input, select, button { font: inherit; padding: .4rem .6rem;
                        border: 1px solid var(--line); border-radius: 3px; }
button { background: var(--accent); color: #fff; border-color: var(--accent);
         cursor: pointer; }

footer { border-top: 1px solid var(--line); color: var(--muted);
         font-size: .9rem; margin-top: 3rem; }

/* Domovská stránka: veľké vyhľadávacie pole a tri vstupné cesty. */
.search-home { display: flex; gap: .5rem; margin: 1.5rem 0; }
.search-home input[type="search"] {
  flex: 1; font-size: 1.1rem; padding: .65rem .9rem;
}

.entry-paths {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem; margin: 2rem 0;
}
.entry-paths .entry {
  display: block; padding: 1rem 1.25rem; border: 1px solid var(--line);
  border-radius: 4px; text-decoration: none; color: inherit;
}
.entry-paths .entry:hover { border-color: var(--accent); }
.entry-paths .entry h2, .entry-paths .entry h3 {
  margin: 0 0 .35rem; font-size: 1.05rem; color: var(--accent); }
.entry-paths .entry p { margin: 0; color: var(--muted); font-size: .92rem; }
.directory-grid { margin-top: 1rem; }

/* Drobné grafy vedľa seba (small multiples) — kontrola vnútri stabilných
   programových línií na /zistenia. Dve vedľa seba pri šírke `main`
   (52rem), jedna pod druhou na mobile cez auto-fit/minmax, rovnaký vzor
   ako .entry-paths vyššie. */
.small-multiples {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .5rem 1.5rem; margin: 1rem 0;
}
.small-multiple .chart-caption {
  margin: 0; font-size: .85rem; font-weight: 600; color: var(--muted);
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  dl.facts { grid-template-columns: 1fr; }
  .search-home { flex-direction: column; }
}

.rank-strip { display: block; margin: .75rem 0 .25rem; max-width: 100%; }
.rank-strip .tick.funded { fill: var(--chart-funded); }
.rank-strip .tick.rejected { fill: var(--chart-rejected); }
.rank-strip .tick { opacity: .7; }
.rank-strip .tick.you { opacity: 1; stroke: var(--bg); stroke-width: 1.5; }
.rank-strip .boundary { stroke: var(--chart-boundary); stroke-width: 2;
                        stroke-dasharray: 3 3; }
.rank-strip .axis, .rank-strip .you-label {
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--muted); }
.rank-strip .you-label { fill: var(--ink); font-weight: 600; }
.chart-legend { font-size: .92rem; color: var(--muted); }
.chart-legend .swatch { display: inline-block; width: .7rem; height: .7rem;
                        margin-right: .25rem; vertical-align: baseline; }
.chart-legend .swatch.funded { background: var(--chart-funded); }
.chart-legend .swatch.rejected { background: var(--chart-rejected); }
.chart-legend .swatch.requested { background: none; border: 1.5px solid var(--muted); }

/* Rady v čase (stránka programu, Task 2 dávky B) — žiadny nový odtieň:
   "primary" je tá istá --chart-funded modrá ako inde na webe (peniaze/
   podpora), "reference" je existujúca --muted sivá, aby tichý fondový rad
   naozaj pôsobil potichu a nesúťažil s líniou o pozornosť. */
.time-series { display: block; margin: .75rem 0 .25rem; max-width: 100%; }
.time-series .year-tick { stroke: var(--line); stroke-width: 1; }
.time-series .zero-line { stroke: var(--line); stroke-width: 1;
                          stroke-dasharray: 2 2; }
.time-series .line.primary { stroke: var(--chart-funded); stroke-width: 2.5;
                             fill: none; }
.time-series .line.reference { stroke: var(--muted); stroke-width: 1.5;
                               stroke-dasharray: 4 3; opacity: .8; fill: none; }
.time-series .area.primary { fill: var(--chart-funded); fill-opacity: .16;
                             stroke: none; }
.time-series .dot.primary { fill: var(--chart-funded); }
.time-series .dot.reference { fill: var(--muted); }

/* Zamietnutie v čase (Task: zamietnuté ako vrstva, bod 4) — vlastný odtieň
   pre "rejected", ten istý --chart-rejected, aký už používa pásik poradia
   (.rank-strip .tick.rejected) a legenda (.chart-legend .swatch.rejected).
   Zámerne NIE --muted ("requested"/"reference" sivá) — zamietnuté nie je
   len "opačné číslo k podporeným" na tej istej škále, je to vlastná
   kategória s vlastnou, už zavedenou farbou. */
.time-series .line.rejected { stroke: var(--chart-rejected); stroke-width: 2.5;
                              fill: none; }
.time-series .area.rejected { fill: var(--chart-rejected); fill-opacity: .16;
                              stroke: none; }
.time-series .dot.rejected { fill: var(--chart-rejected); }
.time-series .dot.rejected.partial { stroke: var(--chart-rejected); }
.time-series .point-label {
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--muted); font-variant-numeric: tabular-nums; }
.time-series .axis {
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--muted); }

/* Neúplný rok 2026 (Fix 3, dávka B) — nikdy len farba: dutá bodka (fill =
   pozadie, nie farba radu), prerušovaný posledný úsek čiary, vyššia
   prerušovaná ryska na osi a jemný podklad ("závoj") od jeho začiatku po
   pravý okraj. Poradie pravidiel nižšie je dôležité — `.dot.partial` a
   `.line.partial` musia prísť AŽ PO `.dot.primary`/`.line.primary` atď., aby
   pri rovnakej špecifickosti selektora vyhrali (posledné pravidlo v súbore).
   `partial-veil` sa kreslí PRVÝ v SVG (pod všetkým), preto nízka nepriehľadnosť. */
.time-series .partial-veil { fill: var(--muted); opacity: .07; }
.time-series .year-tick.partial { stroke: var(--muted); stroke-width: 1.5;
                                  stroke-dasharray: 2 2; }
.time-series .line.partial { stroke-dasharray: 4 3; }
.time-series .dot.partial { fill: var(--bg); stroke-width: 2; }
.time-series .dot.primary.partial { stroke: var(--chart-funded); }
.time-series .dot.reference.partial { stroke: var(--muted); stroke-width: 1.5; }

/* Stĺpce po rokoch (profil žiadateľa, Task 3 dávky B). Žiadané a pridelené
   sa nerozlišujú len farbou — "requested" je obrys, "awarded" je plná
   výplň tej istej modrej ako všade inde na webe. Percentil poradia po
   rokoch (predtým pásik bodiek nad týmito stĺpcami — fix-percentile-chart,
   dávka B) je teraz samostatný `.time-series` graf pod nimi, žiadne vlastné
   CSS triedy tu nepotrebuje. */
.bar-chart { display: block; margin: .75rem 0 .25rem; max-width: 100%; }
.bar-chart .baseline { stroke: var(--line); stroke-width: 1; }
.bar-chart .bar.requested { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.bar-chart .bar.awarded { fill: var(--chart-funded); }
/* Neúplný rok (Fix 3, dávka B) — tlmená výplň + prerušovaný obrys, nikdy
   len farba; poznámka v popisku skupiny nesie zvyšok signálu. */
.bar-chart .bar.partial { opacity: .55; stroke-dasharray: 3 2; }
.bar-chart .bar.awarded.partial { stroke: var(--ink); stroke-width: 1; }
.bar-chart .bar.requested.partial { stroke-width: 1.5; }
.bar-chart .axis {
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--muted); }

/* Pozícia medzi príjemcami na logaritmickej osi (Task 3 dávky B) — rovnaký
   jazyk ako rank-strip (os, prerušovaná referenčná čiara, zvýraznená
   značka), len nad peniazmi namiesto skóre. */
.distribution-position { display: block; margin: .75rem 0 .25rem; max-width: 100%; }
.distribution-position .axis-line { stroke: var(--line); stroke-width: 1; }
.distribution-position .median { stroke: var(--chart-boundary); stroke-width: 2;
                                 stroke-dasharray: 3 3; }
.distribution-position .you { fill: var(--chart-funded); stroke: var(--bg);
                              stroke-width: 1.5; }
.distribution-position .you-label { fill: var(--ink); font-weight: 600;
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.distribution-position .axis, .distribution-position .median-label {
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--muted); }

/* Rebríček, vodorovné pruhy (Fix 1, dávka B) — nahrádza zvislé stĺpce pre
   najväčších príjemcov/mestá/programové línie: meno vľavo na vlastnom
   riadku, hodnota za koncom pruhu. Rovnaká modrá "awarded" ako všade inde. */
.ranked-bars { display: block; margin: .75rem 0 .25rem; max-width: 100%; }
.ranked-bars .baseline { stroke: var(--line); stroke-width: 1; }
.ranked-bars .bar.awarded { fill: var(--chart-funded); }
.ranked-bars .row-label, .ranked-bars .value-label {
  font: 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.ranked-bars .row-label { fill: var(--ink); }
.ranked-bars .value-label { fill: var(--muted); font-variant-numeric: tabular-nums; }

/* Stránka výzvy: riadok s rozhodnutím Rady patrí k žiadosti nad ním, nie k
   žiadosti pod ním — bez vrchného orámovania a s menším odsadením pôsobí ako
   jej pokračovanie, nie ako ďalší riadok tabuľky. */
.council-row td { border-top: none; padding-top: 0; }

/* Vyhľadávanie podľa typu (Commit 4, 2026-08-10 nazov-a-architektura) —
   ikona je vždy dekoratívna (aria-hidden v web/icons.py), slovný názov
   typu stojí vedľa nej v h2 a nesie celý význam sám. */
.result-section h2 { display: flex; align-items: center; gap: .4rem; }
.result-section .type-icon { color: var(--muted); flex-shrink: 0; }
.result-section .hit { margin-bottom: .75rem; }

/* Rozbaľovacie vysvetlivky (Commit 1/2, 2026-08-10 čitateľnosť) — natívny
   <details>, žiadny JS. Zbalené v predvolenom stave; ikona v <summary> je
   vždy len doplnok k slovnému textu vedľa nej (rovnaké pravidlo ako
   .result-section .type-icon vyššie), takže panel nesie význam aj bez farby
   či ikony — pre čítačku, tlač aj farboslepého čitateľa. Marker prehliadača
   necháme (`list-style: revert` proti globálnemu resetu vyššie) a len ho
   zafarbíme, aby bol viditeľný v OBOCH motívoch bez vlastnej definície. */
details.explainer {
  margin: .75rem 0; border: 1px solid var(--line); border-radius: 4px;
  padding: 0 .9rem;
}
details.explainer > summary {
  cursor: pointer; padding: .6rem 0; font-size: .92rem; font-weight: 600;
  color: var(--muted); list-style: revert;
}
details.explainer > summary::marker { color: var(--muted); }
details.explainer > summary .explainer-icon {
  vertical-align: -.2rem; margin-right: .3rem;
}
details.explainer[open] > summary { border-bottom: 1px solid var(--line); }
details.explainer > summary ~ * { margin: .75rem 0; }
details.explainer > :last-child { margin-bottom: .9rem; }