/* SPOLEČNÝ SOUBOR tří webů Rozpočet v kontextu. Zdroj: web/spolecne/spolecne.css v repozitáři hlavního webu
   (sesit-l-dashboard); do sesterských webů ho kopíruje node web/scripts/synchronizuj_sesterske.mjs.
   Neupravovat v kopiích, audit odchylku nahlásí. Načítá se před styl.css daného webu.
   Zadání vzhledu: docs/sjednoceni_webu.md. Paleta F: src/paleta.py (ZAKLAD, ZAKLAD_TMAVE), web/src/theme/palette.css. */

/* Základní barvy = role palety hlavního webu; web může přidat vlastní (barva obce, Česka …) v styl.css. */
:root {
  --bg: #FFFFFF; --plocha: #F1F4F6; --text: #1A222B; --text-2: #565F68; --linka: #DADEE3;
  --lista: #1A222B; --odkaz: #1A222B; --seda: #B2B8BF;  /* odkazy inkoustem a podtržené jako hlavní web (T4) */
  --font: 'Onest', 'Segoe UI', Arial, sans-serif;  /* stejná záložní písma jako hlavní web (T5) */
  color-scheme: light;
}
/* Vzhled podle systému, tlačítkem v liště lze přepnout (motiv.js). */
:root[data-motiv="tmavy"] { --bg: #13181D; --plocha: #1D2227; --text: #E3E8EE; --text-2: #AFB5BC; --linka: #34383D;
  --odkaz: #E3E8EE; --seda: #4A4D51; color-scheme: dark; }

@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; }
* { 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); }
/* R1: šířka a okraje jako hlavní web (ramec.css .obal) */
.obal { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
@media (max-width: 640px) { .obal { 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; }
/* Písmo a text (sjednocení 2026-10-14, T1–T2): nadpisy 34/20/16 px (H1 na mobilu 26 px), mírně stažené jako hlavní web;
   perex pod nadpisem 18 px tmavě (na mobilu 16 px), šedé jsou jen poznámky a zdroje. */
h3 { font-size: 16px; }
h1, h2, h3 { letter-spacing: -0.005em; }
@media (max-width: 640px) { h1 { font-size: 26px; } }
.uvod, .uvod-perex { color: var(--text); font-size: 18px; line-height: 1.5; }
@media (max-width: 640px) { .uvod, .uvod-perex { font-size: 16px; } }
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; margin: 24px 0 8px; padding: 0; }
.kpi dd { margin: 0; }
.zdroj { color: var(--text-2); font-size: 13px; margin: 12px 0 0; }
/* G4: výklad grafu zvlášť nad řádkem se zdrojem (ram.rozdel_zdroje) */
.pozn-grafu { color: var(--text-2); font-size: 13px; margin: 12px 0 0; max-width: 90ch; }
.pozn-grafu + .zdroj { margin-top: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { font-weight: 700; color: var(--text-2); font-size: 13px; }
td.c, th.c { text-align: right; }
.tabulka { overflow-x: auto; }
.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)); } }
/* Skok na obsah pro klávesnici a čtečky (stejně jako hlavní web). */
.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; }
/* Hlavička jako na hlavním webu (web/src/styles/ramec.css: .lista, .navigace, .nabidka): tmavá lišta s logem,
   štítkem stavu dat, přepínačem vzhledu a hledáním; pod ní navigace s podtržením, na úzkém displeji tlačítko Menu.
   Značky skládá ram.py, chování navigace.js. */
.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__motiv, .lista__hledat { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: none; color: #fff; cursor: pointer; }
.lista__vpravo > :last-child { margin-right: -10px; }
.lista__motiv:hover, .lista__hledat:hover { background: rgb(255 255 255 / .12); }
.lista__motiv:focus-visible, .lista__hledat: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 { position: relative; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--linka); }
.navigace__obsah { display: flex; align-items: stretch; gap: 4px; }
.navigace__polozka { display: inline-flex; align-items: center; gap: 6px; padding: 14px 14px 11px; border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--text-2); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.navigace__polozka:first-child { margin-left: -14px; }
.navigace__polozka:hover { color: var(--text); }
.navigace__polozka[aria-current="page"], .navigace__rozbal[data-aktivni], .navigace__rozbal[aria-expanded="true"] { color: var(--text); border-bottom-color: var(--text); }
.navigace__polozka:focus-visible, .nabidka a:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.navigace__vpravo { margin-left: auto; }
.navigace__menu, .navigace__kde { display: none; }
/* Nabídka položky (např. Na co se utrácí) pod svým tlačítkem; Menu přes celou šířku. */
.nabidka { position: absolute; top: 100%; z-index: 6; padding: 8px; background: var(--bg); border: 1px solid var(--linka); border-radius: 0 0 8px 8px; box-shadow: 0 12px 24px -12px rgb(0 0 0 / .35); }
.nabidka[hidden] { display: none; }
.nabidka--seznam { min-width: 240px; }
.nabidka ul { list-style: none; margin: 0; padding: 0; }
.nabidka__odkaz { display: block; padding: 7px 10px; border-radius: 4px; color: var(--text); font-size: 14px; text-decoration: none; }
.nabidka__odkaz:hover, .nabidka__odkaz[aria-current="page"] { background: var(--plocha); }
.nabidka__odkaz[aria-current="page"] { font-weight: 700; }
.nabidka__nadpis { display: block; padding: 14px 0 4px; color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nabidka__stranky a { display: block; padding: 12px 0; border-bottom: 1px solid var(--linka); color: var(--text); font-size: 17px; font-weight: 700; text-decoration: none; }
.nabidka__stranky ul a { padding-left: 14px; font-size: 15px; font-weight: 400; }
.nabidka__stranky a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
/* Telefon a úzké okno (jako hlavní web do 860 px): místo řady odkazů tlačítko Menu s celým seznamem.
   Jen se skripty (třída js z motiv.js); bez nich zůstává posuvná řada odkazů. */
html:not(.js) .navigace__obsah { overflow-x: auto; scrollbar-width: none; }
html:not(.js) .navigace__rozbal { display: none; }
@media (max-width: 860px) {
  .js .navigace__obsah > .navigace__polozka:not(.navigace__menu) { display: none; }
  .js .navigace__obsah > .navigace__menu { display: inline-flex; width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
  .js .navigace__kde { display: inline; margin-left: auto; color: var(--text-2); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
  .nabidka--menu { left: 0; right: 0; max-height: calc(100vh - 110px); overflow-y: auto; padding: 4px 32px 20px; border-radius: 0; }
}
@media (max-width: 640px) {
  .lista__obsah { font-size: 12px; gap: 8px; }
  .lista__nazev { font-size: 13px; gap: 8px; }
  .lista__nazev svg { width: 28px; height: 28px; }
  .nabidka--menu { padding: 4px 16px 16px; }
}
@media (pointer: coarse) { .navigace__polozka { min-height: 44px; } .lista__motiv, .lista__hledat { width: 44px; height: 44px; } }
/* Drobečky nad nadpisem (R7, ram.drobky) */
.drobky { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.drobky a { display: inline-block; padding-block: 3px; color: var(--text-2); }
.drobky a:hover { color: var(--text); }
/* Stažení, sdílení a vložení grafu (akce-grafu.js, stejné na webu obcí; jako AkceGrafu na hlavním webu) */
.karta.ma-akce { position: relative; }
.karta.ma-akce > h2 { padding-right: 44px; }
.akce-grafu { position: absolute; top: 14px; right: 14px; z-index: 5; }
.akce-grafu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--linka); border-radius: 6px; color: var(--text-2); background: var(--bg); }
.akce-grafu > summary::-webkit-details-marker { display: none; }
.akce-grafu > summary:hover, .akce-grafu[open] > summary { color: var(--text); border-color: var(--text-2); }
.akce-grafu > summary:focus-visible { outline: 2px solid var(--odkaz); outline-offset: 2px; }
.akce-grafu__menu { position: absolute; right: 0; top: 40px; width: min(280px, calc(100vw - 48px)); display: grid; gap: 2px; padding: 6px;
  background: var(--bg); border: 1px solid var(--linka); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.akce-grafu__menu button { font: inherit; font-size: 14px; text-align: left; padding: 8px 10px; border: 0; border-radius: 4px; background: none; color: var(--text); cursor: pointer; }
.akce-grafu__menu button:hover, .akce-grafu__menu button:focus-visible { background: var(--plocha); }
.akce-grafu__menu textarea { font: 12px/1.4 ui-monospace, Menlo, monospace; width: 100%; resize: vertical; padding: 6px; color: var(--text);
  background: var(--plocha); border: 1px solid var(--linka); border-radius: 4px; }
.akce-grafu__licence { font-size: 12px; color: var(--text-2); margin: 6px 10px 4px; }
/* režim vložení (?vlozit=ID): jen graf, bez lišty, navigace a patičky */
.vlozeno header, .vlozeno footer, .vlozeno .preskocit, .vlozeno .akce-grafu { display: none !important; }
.vlozeno main { padding: 0 !important; max-width: none; }
.vlozeno .karta { margin: 0; border: 0; padding: 8px 4px; }
.vlozeno-pata { font-size: 12px; color: var(--text-2); margin: 10px 0 0; }
.vlozeno .zajimavost { display: none !important; }
/* text jen pro čtečky obrazovky (hlášení akcí u grafů) */
.jen-ctecka { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 400px) { .lista__nazev { min-width: 0; line-height: 1.15; } .lista__vpravo { gap: 4px; flex: none; } }  /* název webu se zalomí do dvou řádků */
/* bez teček mezi odkazy: na telefonu by visely na konci řádků */
/* Patička (R8–R10, ram.paticka): 14 px, řádky bez teček mezi odkazy (na telefonu by visely na konci řádků). */
.paticka p { margin: 0 0 8px; max-width: 90ch; }
.paticka__odkazy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
.paticka__odkazy a, .paticka a[href^="mailto:"] { display: inline-block; padding-block: 3px; min-height: 24px; }
.paticka__odkazy [aria-current] { color: var(--text-2); }
.stav-dat { color: var(--text-2); }
/* Okno hledání (hledani-okno.js) jako na hlavním webu (ramec.css .hledani) */
.hledani { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 80px); margin: 56px auto auto; padding: 0; border: 1px solid var(--linka); border-radius: 8px;
  background: var(--bg); color: var(--text); box-shadow: 0 8px 32px rgb(12 24 56 / .25); }
.hledani::backdrop { background: rgb(12 24 56 / .4); }
.hledani__obsah { padding: 12px; }
.hledani__radek { display: flex; gap: 8px; }
.hledani__pole { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--text-2); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.hledani__pole:focus-visible, .hledani__zavrit:focus-visible, .hledani__odkaz:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.hledani__zavrit { width: 44px; border: 0; background: none; color: var(--text-2); font-size: 26px; line-height: 1; cursor: pointer; }
.hledani__pocet { margin: 10px 2px 4px; color: var(--text-2); font-size: 13px; }
.hledani__pocet:empty { display: none; }
.hledani__vysledky { margin: 0; padding: 0; list-style: none; }
.hledani__odkaz { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 2px 10px; margin-top: 6px; padding: 8px 10px; border-left: 4px solid var(--linka);
  border-radius: 4px; color: var(--text); text-decoration: none; }
.hledani__odkaz:hover { background: var(--plocha); }
.hledani__druh { grid-row: span 2; color: var(--text-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hledani__nazev { font-weight: 700; font-size: 14px; }
.hledani__kde { color: var(--text-2); font-size: 12px; }
@media (max-width: 480px) { .hledani__odkaz { grid-template-columns: minmax(0, 1fr); } .hledani__druh { grid-row: auto; } }
/* Rodina webů (2026-10-10): stejná lišta nad hlavičkou na všech třech webech (hlavní web: Hlavicka.tsx, ramec.css).
   Lišta je tmavá v obou režimech, proto pevné barvy z palety. */
.rodina { background: #1A222B; border-bottom: 1px solid rgb(255 255 255 / 0.12); color: #AFB5BC; font-size: 13px; }
.rodina__obsah { display: flex; align-items: center; gap: 2px; min-height: 34px; overflow-x: auto; scrollbar-width: none; }
.rodina__nazev { margin-right: 8px; white-space: nowrap; }
.rodina a { padding: 5px 10px; border-radius: 4px; color: #AFB5BC; text-decoration: none; white-space: nowrap; }
.rodina a:hover { color: #FFFFFF; }
.rodina a[aria-current='page'] { background: #34383D; color: #FFFFFF; font-weight: 700; }
.rodina a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
@media (max-width: 480px) { .rodina__nazev { display: none; } }
@media (max-width: 480px) { .rodina__obsah > a:first-of-type { margin-left: -10px; } }
/* „Data v tabulce“ pod grafem (akce-grafu.js, G5) jako .tabulka-dat na hlavním webu */
.data-tabulka { margin-top: 10px; font-size: 13px; }
.data-tabulka > summary { cursor: pointer; width: max-content; padding-block: 3px; color: var(--text); font-weight: 700; }
.data-tabulka > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.data-tabulka .tabulka { margin-top: 6px; }
.data-tabulka table { font-size: 13px; }
.data-tabulka caption { text-align: left; color: var(--text-2); padding: 6px 0 4px; }
.data-tabulka th, .data-tabulka td { padding: 3px 8px; white-space: nowrap; }
.data-tabulka tbody th { font-weight: 400; color: var(--text); font-size: 13px; }
.vlozeno .data-tabulka { display: none; }
/* Grafy a ovládání (sjednocení 2026-10-14, G1, G2, G8, O1, O3; vzor web/src/styles hlavního webu) */
.karta { background: var(--bg); }
.karta.ma-akce > h2, .karta.ma-akce h3, h3.s-akci, .podnadpis { font-size: 17px; line-height: 1.3; }  /* nadpis grafu (G1) */
/* Přepínač zobrazení (O1): šedý podklad, aktivní volba bílá a tučně; i „pilulky“ vývoje a map Evropy */
.prepinac, .prepinac-pohledu { display: inline-flex; flex-wrap: wrap; padding: 2px; border: 1px solid var(--linka); border-radius: 8px; background: var(--plocha); }
.prepinac button, .prepinac-pohledu button { font: inherit; font-size: 14px; min-height: 32px; padding: 4px 14px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.prepinac button[aria-pressed="true"], .prepinac-pohledu button[aria-pressed="true"] { background: var(--bg); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px var(--seda); }
.prepinac button:focus-visible, .prepinac-pohledu button:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
@media (pointer: coarse) { .prepinac button, .prepinac-pohledu button { min-height: 44px; } }
/* Tlačítka (O3): rámeček, rádius 4 px, 14 px, aspoň 32 px */
.tlacitko, a.stahnout, button.stahnout { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border: 1px solid var(--seda); border-radius: 4px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tlacitko:hover, a.stahnout:hover, button.stahnout:hover { border-color: var(--text); }
/* Bublina u grafu (G8) jako na hlavním webu: rámeček, rádius 4 px, stín, 13 px, tučný nadpis */
.bublina { background: var(--bg); color: var(--text); border: 1px solid var(--seda); border-radius: 4px; padding: 8px 10px;
  box-shadow: 0 6px 14px -8px var(--seda); font-size: 13px; line-height: 1.4; }
.bublina strong:first-child { display: block; margin-bottom: 4px; font-weight: 700; }
.bublina .m { color: var(--text-2); }
/* „Více o …“ pod úvodní větou (S2) jako „Více o oblasti“ na hlavním webu */
.vice { margin: 4px 0 8px; max-width: 75ch; }
.vice > summary { cursor: pointer; width: max-content; padding-block: 3px; font-size: 13px; font-weight: 700; }
.vice > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.vice > p { margin: 6px 0 0; }