/* Česko v Evropě -- styl. Tokeny palety F a hlavička jako rozpocetvkontextu.cz a obce.rozpocetvkontextu.cz
   (rozpocet-obce/web/static/styl.css); písmo Onest. Paleta JVS se nepoužívá. */
@font-face { font-family: 'Onest'; font-weight: 400; font-display: swap; src: url(/pisma/onest-latin-400-normal.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; }
@font-face { font-family: 'Onest'; font-weight: 400; font-display: swap; src: url(/pisma/onest-latin-ext-400-normal.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: 'Onest'; font-weight: 700; font-display: swap; src: url(/pisma/onest-latin-700-normal.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; }
@font-face { font-family: 'Onest'; font-weight: 700; font-display: swap; src: url(/pisma/onest-latin-ext-700-normal.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; }

:root {
  --bg: #FFFFFF; --plocha: #F1F4F6; --text: #1A222B; --text-2: #565F68; --linka: #DADEE3;
  --lista: #1A222B; --cz: #1795FA; --odkaz: #005798;
  --pruh: #C6CBD2; --pruh-soused: #8A949E; --mrizka: #E6E9EC;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
/* Vzhled podle systému, tlačítkem v liště lze přepnout (motiv.js); stejně jako sesterské weby. */
:root[data-motiv="tmavy"] { --bg: #13181D; --plocha: #1D2227; --text: #E3E8EE; --text-2: #AFB5BC; --linka: #34383D;
  --odkaz: #72B8FF; --cz: #4AA8FF; --pruh: #3E464F; --pruh-soused: #6E7883; --mrizka: #262C32; color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
a { color: var(--odkaz); }
.obal { max-width: 1040px; margin: 0 auto; padding-inline: 16px; }
main { padding-block: 24px 48px; }
.nadtitulek { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 700; }
h1 { font-size: 34px; line-height: 1.15; margin: 4px 0 8px; text-wrap: balance; }
h2 { font-size: 20px; line-height: 1.25; margin: 0 0 6px; text-wrap: balance; }
h3 { font-size: 15px; margin: 22px 0 4px; }
.uvod { color: var(--text-2); max-width: 70ch; margin: 0 0 8px; }
.pozn { color: var(--text-2); font-size: 14px; margin: 0 0 12px; max-width: 75ch; }
.zdroj { color: var(--text-2); font-size: 13px; margin: 12px 0 0; }
.karta { border: 1px solid var(--linka); border-radius: 4px; padding: 20px; margin-block: 16px; scroll-margin-top: 12px; }

/* Souhrnné karty */
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; margin: 24px 0 8px; padding: 0; }
.kpi > a { display: block; border-left: 3px solid var(--cz); padding: 2px 0 2px 12px; min-width: 0; color: inherit; text-decoration: none; }
.kpi > a:hover strong { text-decoration: underline; }
.kpi dt { font-size: 13px; color: var(--text-2); font-weight: 700; }
.kpi dd { margin: 0; }
.kpi strong { font-size: 26px; display: block; line-height: 1.2; }
.kpi span { font-size: 13px; color: var(--text-2); display: block; }

/* Grafy (SVG z src/web.py): dvě varianty, široká a úzká, aby písmo zůstalo čitelné */
.graf { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.graf text { fill: var(--text); font-size: 12px; }
.graf .t2 { fill: var(--text-2); }
.graf .tucne { font-weight: 700; }
.graf .hodnota { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }  /* čitelné i přes čáru EU27 */
.graf .mrizka { stroke: var(--mrizka); stroke-width: 1; }
.graf .osa { stroke: var(--text-2); stroke-width: 1; }
.graf .eu { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.graf .l-soused { stroke: var(--pruh-soused); stroke-width: 1.5; fill: none; }
.graf .l-cz { stroke: var(--cz); stroke-width: 3; fill: none; }
.graf .bod-cz { fill: var(--cz); stroke: var(--bg); stroke-width: 2; }
.graf g.radek:hover .p { opacity: .75; }  /* barva pruhu = barva země (BARVY_ZEMI ve web.py) */
.jen-uzke { display: none; }
@media (max-width: 640px) { .jen-siroke { display: none; } .jen-uzke { display: block; } }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text-2); margin: 0 0 8px; }
.legenda i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.legenda i.cz { background: var(--cz); }
.legenda i.soused { background: var(--pruh-soused); }
.legenda i.ostatni { background: var(--pruh); }
.legenda i.eu { height: 0; border-top: 2px dashed var(--text); border-radius: 0; vertical-align: 3px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linka); white-space: nowrap; }
th { font-weight: 700; color: var(--text-2); font-size: 13px; }
td.c, th.c { text-align: right; }
tr.cz td { font-weight: 700; }
.tabulka { overflow-x: auto; }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--odkaz); font-size: 14px; }
.metodika li { margin-bottom: 8px; max-width: 75ch; }

/* Hlavička jako na sesterských webech */
.preskocit { position: absolute; left: 16px; top: -48px; z-index: 30; padding: 8px 14px; background: var(--bg); color: var(--text); font-weight: 700; outline: 2px solid var(--text); }
.preskocit:focus { top: 8px; }
main:focus { outline: none; }
.lista { background: var(--lista); color: #fff; }
.lista__obsah { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.lista__nazev { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 18px; letter-spacing: 0; }
.lista__nazev svg { flex: none; width: 34px; height: 34px; }
.lista__vpravo { display: inline-flex; align-items: center; gap: 8px; }
.lista__rok { font-weight: 400; white-space: nowrap; }
.lista__web { display: inline-flex; align-items: center; min-height: 28px; padding: 0 8px; border: 1px solid rgb(255 255 255 / .5); border-radius: 4px; color: #fff; font-size: 12px; text-decoration: none; white-space: nowrap; }
.lista__web:hover, .lista__motiv:hover { background: rgb(255 255 255 / .12); }
.lista__motiv { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-right: -10px; border: 0; border-radius: 4px; background: none; color: #fff; cursor: pointer; }
.lista__web:focus-visible, .lista__motiv:focus-visible, .lista__nazev:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.lista__motiv .ikona-slunce { display: none; }
[data-motiv="tmavy"] .lista__motiv .ikona-slunce { display: block; }
[data-motiv="tmavy"] .lista__motiv .ikona-mesic { display: none; }
.navigace { background: var(--bg); border-bottom: 1px solid var(--linka); }
.navigace__obsah { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.navigace__obsah::-webkit-scrollbar { display: none; }
.navigace__polozka { display: inline-flex; align-items: center; padding: 14px 14px 11px; border-bottom: 3px solid transparent; color: var(--text-2); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.navigace__polozka:first-child { margin-left: -14px; }
.navigace__polozka:hover { color: var(--text); }
.navigace__polozka[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.navigace__polozka:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.paticka { border-top: 1px solid var(--linka); color: var(--text-2); font-size: 14px; padding-block: 16px 32px; margin-top: 24px; }

@media (max-width: 760px) { .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  h1 { font-size: 28px; }
  .karta { padding: 16px 12px; }
  .lista__obsah { font-size: 12px; gap: 8px; }
  .lista__nazev { font-size: 13px; gap: 8px; }
  .lista__nazev svg { width: 28px; height: 28px; }
  .lista__rok { display: none; }
  .navigace__obsah { gap: 0; }
  .navigace__polozka { padding: 12px 8px 9px; font-size: 13px; }
  .navigace__polozka:first-child { margin-left: -8px; }
  .kpi strong { font-size: 22px; }
}
@media (pointer: coarse) { .lista__motiv { width: 44px; height: 44px; } .navigace__polozka { min-height: 44px; } }

/* Daně: podbarvení řádku Česka a EU ve skladbě, tabulka složek */
.graf rect.podklad { fill: var(--plocha); }
.graf .hodnota { font-variant-numeric: tabular-nums; }
table.slozky td i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
table.slozky tr.podradek td { color: var(--text-2); font-size: 13px; }
table.slozky tr.podradek td:first-child { padding-left: 24px; }
table.slozky td.tucne { font-weight: 700; }

.legenda .jednotka { color: var(--text-2); font-style: italic; }
.graf .voditko { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 1 3; }
/* popisky hodnot u pruhů s lemem v barvě pozadí: čára EU27 nebo vodítko je nepřeškrtne */
.graf text.hodnota { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }

/* Interaktivní graf vývoje (vyvoj.js) */
figure.vyvoj-i { margin: 0; }
.vyvoj-graf { position: relative; }
.graf .l-ost { stroke: var(--linka); stroke-width: 1.2; fill: none; cursor: pointer; }
.graf .l-ost:hover { stroke: var(--text-2); stroke-width: 2; }
.graf .l-vyb { stroke-width: 2; fill: none; }
.graf .l-vyb.l-cz { stroke-width: 3.5; }
.graf .kurzor { stroke: var(--text-2); stroke-width: 1; }
.vyvoj-bublina { position: absolute; top: 8px; z-index: 5; background: var(--bg); border: 1px solid var(--linka); border-radius: 6px; padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 14px rgb(0 0 0 / .12); pointer-events: none; min-width: 170px; }
.vyvoj-bublina strong { display: block; margin-bottom: 4px; }
.vyvoj-bublina span { display: flex; align-items: center; gap: 6px; }
.vyvoj-bublina span.cz { font-weight: 700; }
.vyvoj-bublina span b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.vyvoj-bublina i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.vyvoj-zeme { margin: 8px 0 4px; }
.vyvoj-volby, .vyvoj-cipy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vyvoj-volby button, .vyvoj-cipy button { font: inherit; font-size: 13px; border: 1px solid var(--linka); background: var(--bg); color: var(--text-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vyvoj-volby button { font-weight: 700; color: var(--text); }
.vyvoj-cipy button i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; opacity: .35; }
.vyvoj-cipy button[aria-pressed="true"] { color: var(--text); border-color: var(--text-2); font-weight: 700; }
.vyvoj-cipy button[aria-pressed="true"] i { opacity: 1; }
.vyvoj-volby button:hover, .vyvoj-cipy button:hover { border-color: var(--text); }
figure.vyvoj-i figcaption { margin-top: 4px; }