* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --barva-primarni: #1a2b3c;
  --barva-akcent: #0b6bcb;
  --barva-pozadi: #f5f7f9;
  --barva-panel: #ffffff;
  --barva-text: #1a2b3c;
  --barva-text-tlumeny: #5b6b7a;
  --barva-okraj: #dde4ea;
  --stin: 0 2px 12px rgba(16, 32, 48, 0.14);
}

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--barva-text);
  background: var(--barva-pozadi);
  overflow: hidden;
}

#mapa { position: absolute; inset: 0; }

/* ---------- panel ---------- */

#panel {
  position: absolute;
  top: 12px;
  left: 12px;
  bottom: 12px;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--barva-panel);
  border-radius: 14px;
  box-shadow: var(--stin);
  display: flex;
  flex-direction: column;
  z-index: 5;
  transition: transform 0.25s ease;
}

#panel.sbaleny { transform: translateX(calc(-100% - 24px)); }

#tl-panel {
  position: absolute;
  top: 12px;
  left: 364px;
  z-index: 6;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: var(--barva-panel);
  box-shadow: var(--stin);
  cursor: pointer;
  font-size: 17px;
  color: var(--barva-text);
  transition: left 0.25s ease;
}

#panel.sbaleny + #tl-panel,
#panel.sbaleny ~ #tl-panel { left: 12px; }

.panel-hlavicka {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--barva-okraj);
}

.panel-hlavicka h1 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.panel-hlavicka p { font-size: 12.5px; color: var(--barva-text-tlumeny); margin-top: 3px; }

.panel-telo {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sekce h2 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--barva-text-tlumeny);
  margin-bottom: 8px;
}

/* přepínač režimu */
.prepinac-rezim { display: flex; gap: 6px; }
.prepinac-rezim label {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border: 1px solid var(--barva-okraj);
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.prepinac-rezim input { display: none; }
.prepinac-rezim input:checked + span { font-weight: 700; }
.prepinac-rezim label:has(input:checked) {
  background: #e7f1fc;
  border-color: var(--barva-akcent);
  color: var(--barva-akcent);
}

/* posuvník */
.radek-posuvnik { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.radek-posuvnik input[type="range"] { flex: 1; accent-color: var(--barva-akcent); }
#hodnota-intenzity { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* scénáře */
#scenare { display: flex; flex-direction: column; gap: 7px; }
.scenar {
  border: 1px solid var(--barva-okraj);
  border-radius: 10px;
  background: #fbfcfd;
  overflow: hidden;
}
.scenar:hover { border-color: var(--barva-akcent); }
.scenar-aplikovat {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: inherit;
  color: inherit;
}
.scenar-aplikovat:hover { background: #f2f8fe; }
.scenar-hlavicka { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scenar b { font-size: 13px; }
.scenar small { font-size: 11.5px; color: var(--barva-text-tlumeny); }
.scenar-meta { font-size: 11px; color: var(--barva-text-tlumeny); }
.scenar-stitek {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.scenar-stitek-planovano { background: #e7f1fc; color: #1d6fb8; }
.scenar-stitek-probiha { background: #fff2d9; color: #a15c00; }
.scenar-stitek-hypoteticky { background: #ececec; color: #5b6b7a; }
.scenar-odkaz {
  display: block;
  padding: 6px 12px 9px;
  font-size: 11.5px;
  color: var(--barva-akcent);
  text-decoration: none;
  border-top: 1px dashed var(--barva-okraj);
}
.scenar-odkaz:hover { text-decoration: underline; }

/* uzavírky */
#seznam-uzavirek { display: flex; flex-direction: column; gap: 6px; }
.napoveda { font-size: 12.5px; color: var(--barva-text-tlumeny); }
.uzavirka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fdf0ef;
  border: 1px solid #f2c8c4;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 13px;
}
.uzavirka button {
  border: none;
  background: none;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: #c62828;
  padding: 2px 5px;
}
.radek-tlacitka { display: flex; gap: 7px; margin-top: 7px; }
#tl-reset, #tl-kopirovat {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--barva-okraj);
  border-radius: 9px;
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--barva-text-tlumeny);
  font-family: inherit;
}
#tl-reset:hover { border-color: #c62828; color: #c62828; }
#tl-kopirovat:hover { border-color: var(--barva-akcent); color: var(--barva-akcent); }
#tl-kopirovat.kopirovano { border-color: #2e9e5b; color: #2e9e5b; }
#tl-kopirovat:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--barva-okraj); color: var(--barva-text-tlumeny); }

/* statistiky */
.stat-mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-box {
  background: #f4f7fa;
  border-radius: 10px;
  padding: 10px 12px;
}
.stat-box b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.stat-box span { font-size: 11px; color: var(--barva-text-tlumeny); }

#stat-dopad {
  margin-top: 8px;
  background: #fff7e6;
  border: 1px solid #f0d9a8;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* neobsloužená poptávka - výsledek se nedá srovnávat se stavem bez uzavírky */
#stat-dopad.vystraha {
  background: #fdecea;
  border-color: #e6a6a0;
  color: #8c1d13;
  font-weight: 600;
}
.vystraha-text { color: #8c1d13; font-weight: 600; margin-top: 10px; }

.stat-podnadpis { font-size: 12px; color: var(--barva-text-tlumeny); margin: 10px 0 5px; }
.presun {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--barva-okraj);
}
.presun b { color: #c0392b; font-variant-numeric: tabular-nums; }

/* typické cesty */
#typicke-cesty { display: flex; flex-direction: column; gap: 2px; }
.cesta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--barva-okraj);
}
.cesta:last-child { border-bottom: none; }
.cesta span { color: var(--barva-text-tlumeny); }
.cesta b { font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.cesta b.cesta-horsi { color: #c0392b; }
.cesta b.cesta-lepsi { color: #2e9e5b; }

/* legenda */
.legenda { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.legenda-radek { display: flex; align-items: center; gap: 8px; }
.legenda-carka { width: 26px; height: 5px; border-radius: 3px; flex: none; }

/* animace přepínač */
.radek-prepinac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.radek-prepinac input { accent-color: var(--barva-akcent); width: 17px; height: 17px; }

/* Patička scrolluje s obsahem panelu, ale drží se jeho dna: `margin-top: auto`
   ji na širokém displeji, kde obsah panel nevyplní, odsune dolů jako dřív,
   a jakmile obsah přeteče, volné místo zmizí a patička odscrolluje pryč.
   Záporné okraje ruší vnitřní odsazení `.panel-telo`, aby linka nad patičkou
   sahala od kraje ke kraji panelu. */
.paticka {
  margin: auto -18px -18px;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--barva-okraj);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--barva-text-tlumeny);
}
.paticka a { color: var(--barva-akcent); }

/* ---------- overlaye ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}
.overlay.aktivni { display: flex; }

#overlay-start { background: rgba(245, 247, 249, 0.94); pointer-events: all; }
#overlay-start .karta {
  background: var(--barva-panel);
  border-radius: 14px;
  box-shadow: var(--stin);
  padding: 28px 36px;
  text-align: center;
  max-width: 420px;
}
#overlay-start h2 { font-size: 18px; margin-bottom: 8px; }
#overlay-start p { font-size: 13.5px; color: var(--barva-text-tlumeny); }

#overlay-vypocet {
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
}
#overlay-vypocet .stitek {
  background: var(--barva-primarni);
  color: #fff;
  font-size: 13px;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: var(--stin);
}

.tocitko {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border: 3px solid var(--barva-okraj);
  border-top-color: var(--barva-akcent);
  border-radius: 50%;
  animation: toceni 0.9s linear infinite;
}
@keyframes toceni { to { transform: rotate(360deg); } }

/* mobil */
@media (max-width: 640px) {
  #panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 55vh;
    border-radius: 14px 14px 0 0;
  }
  #panel.sbaleny { transform: translateY(calc(100% - 46px)); }
  #tl-panel { display: none; }
}

/* ---------- režim Živě teď ---------- */

.jen-zive { display: none; }
body.rezim-zive .jen-zive { display: block; }
body.rezim-zive .jen-model { display: none; }

/* Parkování je samostatný pohled — model ani živá data k němu nepatří. */
body.rezim-parkovani .jen-model,
body.rezim-parkovani .jen-zive { display: none; }
body.rezim-parkovani .paticka { display: none; }
body.rezim-parkovani #panel { width: 370px; }
body.rezim-parkovani #tl-panel { left: 394px; }
body.rezim-parkovani #panel.sbaleny + #tl-panel,
body.rezim-parkovani #panel.sbaleny ~ #tl-panel { left: 12px; }

.prepinac-rezim label.prepinac-zive:has(input:checked) {
  background: #fdecea;
  border-color: #c62828;
  color: #8c1d13;
}

.zive-upozorneni {
  background: #fdecea;
  border: 1px solid #e5b4ae;
  border-left: 4px solid #c62828;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 8px;
}

#rezim-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: nowrap;
}
#rezim-badge.badge-zive { background: #c62828; color: #fff; }
#rezim-badge.badge-vystraha { background: #fff2d9; color: #a15c00; border: 1px solid #e0b400; }
#rezim-badge .tecka {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  margin-right: 7px;
  animation: zive-pulz 1.6s ease-in-out infinite;
}
@keyframes zive-pulz { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.zive-ikona {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

#zive-seznam { display: flex; flex-direction: column; gap: 5px; }
.zive-radek {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: var(--barva-panel);
  border: 1px solid var(--barva-okraj);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.zive-radek:hover { border-color: #c62828; }
.zive-radek small { color: var(--barva-text-tlumeny); font-size: 11px; }
.zive-radek b { color: #c0392b; }
.zive-radek-uzavirky { margin: 10px 0 4px; }

.legenda-tecka {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* mobil: badge nesmí kolidovat s tlačítkem panelu */
@media (max-width: 640px) {
  #rezim-badge { top: 10px; font-size: 12px; padding: 6px 12px; }
}

/* dojezdy v režimu Živě - zvýraznění zdržení i uvnitř hodnoty */
.cesta .cesta-horsi { color: #c0392b; }

/* trend dojezdů (změna proti minulému měření) */
.trend-horsi { color: #c0392b; font-size: 11px; font-weight: 700; }
.trend-lepsi { color: #2e9e5b; font-size: 11px; font-weight: 700; }

#tl-dojezdy-graf {
  margin-top: 8px;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 12.5px;
  background: var(--barva-panel);
  border: 1px solid var(--barva-okraj);
  border-radius: 8px;
  cursor: pointer;
}
#tl-dojezdy-graf:hover { border-color: var(--barva-akcent); color: var(--barva-akcent); }

/* ---------- overlay grafu dojezdů ---------- */

#dojezdy-graf-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(16, 32, 48, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.graf-karta {
  background: var(--barva-panel);
  border-radius: 14px;
  box-shadow: var(--stin);
  padding: 16px 18px;
  width: min(720px, 100%);
  max-height: 92vh;
  overflow-y: auto;
}
.graf-hlavicka { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.graf-hlavicka h2 { font-size: 15px; }
#graf-zavrit {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--barva-text-tlumeny);
  padding: 2px 6px;
}
#graf-zavrit:hover { color: var(--barva-text); }

#graf-trasy { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.graf-trasa {
  font: inherit;
  font-size: 11.5px;
  padding: 4px 9px;
  border: 1px solid var(--barva-okraj);
  border-radius: 999px;
  background: var(--barva-panel);
  cursor: pointer;
}
.graf-trasa.aktivni { background: #e7f1fc; border-color: var(--barva-akcent); color: var(--barva-akcent); font-weight: 700; }

.graf-legenda { display: flex; gap: 14px; font-size: 11.5px; color: var(--barva-text-tlumeny); margin-bottom: 4px; }
.graf-legenda .legenda-carka { margin-right: 5px; vertical-align: middle; }

#graf-platno { position: relative; }
#graf-platno svg { width: 100%; height: auto; display: block; }
.graf-popisek { font-size: 9.5px; fill: var(--barva-text-tlumeny); font-family: inherit; }
#graf-tooltip {
  position: absolute;
  background: var(--barva-primarni);
  color: #fff;
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #dojezdy-graf-overlay { padding: 0; align-items: stretch; }
  .graf-karta { border-radius: 0; max-height: 100vh; width: 100%; }
}

/* ── Vrstva parkování ─────────────────────────────────────────── */

.pk-zdroj {
  font-size: 11px;
  line-height: 1.45;
  color: #5b6770;
  margin: 8px 0 0;
}

.pk-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  margin: 0 10px 4px 0;
  white-space: nowrap;
}
.pk-leg i {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
}

.pk-popup { font-size: 12.5px; line-height: 1.5; }
.pk-popup strong { font-size: 14px; }
.pk-zsj { color: #5b6770; font-size: 11.5px; margin: 2px 0 6px; }
.pk-popup-upozorneni {
  margin-bottom: 8px;
  padding: 6px 7px;
  background: #eef3f6;
  color: #465a68;
  font-size: 11.5px;
  line-height: 1.4;
}

.pk-tab { width: 100%; border-collapse: collapse; }
.pk-tab td { padding: 2px 0; }
.pk-tab td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pk-tab .pk-oddel td { border-top: 1px solid #e3e8eb; padding-top: 5px; }

.pk-rezerva { color: #2e7d32; font-weight: 500; font-size: 11.5px; }
.pk-chybi { color: #98a2a8; font-weight: 400; font-style: italic; }

.pk-znacka {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e8f0fb;
  color: #2c5aa0;
  font-size: 11.5px;
}

.pk-varovani {
  margin-top: 8px;
  padding: 5px 8px;
  border-left: 3px solid #f0a04b;
  background: #fdf6ee;
  font-size: 11px;
  color: #7a5320;
}

.pk-vypocet {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--barva-text-tlumeny);
  text-align: right;
}
.pk-popup-omezeni { margin-top: 8px; color: #596974; font-size: 11.5px; line-height: 1.4; }

/* Souhrnný pohled parkování podle ZSJ */
#sekce-parkovani[hidden] { display: none; }
#sekce-parkovani { display: flex; flex-direction: column; gap: 11px; }

.pk-sekce-hlavicka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pk-sekce-hlavicka h2 { margin: 0; color: var(--barva-text); }
.pk-rok { color: var(--barva-text-tlumeny); font-size: 11.5px; white-space: nowrap; }
.pk-uvod { color: var(--barva-text-tlumeny); font-size: 12.5px; line-height: 1.45; }

.pk-prepinac {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--barva-okraj);
  border-radius: 9px;
  overflow: hidden;
}
.pk-prepinac label {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 5px;
  border-right: 1px solid var(--barva-okraj);
  color: var(--barva-text-tlumeny);
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.pk-prepinac label:last-child { border-right: 0; }
.pk-prepinac input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pk-prepinac label:has(input:checked) { background: #e9f2fa; color: #075cae; font-weight: 700; }
.pk-prepinac label:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--barva-akcent); }

.pk-stav {
  padding: 8px 10px;
  border: 1px solid #cbd9e5;
  border-radius: 7px;
  background: #f1f6fa;
  color: #38556d;
  font-size: 11.5px;
  line-height: 1.4;
}
.pk-stav-chyba { border-color: #e3aba6; background: #fdf0ef; color: #8c1d13; }

.pk-souhrn {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--barva-okraj);
  border-bottom: 1px solid var(--barva-okraj);
}
.pk-souhrn strong {
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pk-souhrn span { color: var(--barva-text-tlumeny); font-size: 11.5px; line-height: 1.35; }

#parkovani-legenda { gap: 5px; }
.pk-legenda-popis {
  margin-bottom: 2px;
  color: var(--barva-text-tlumeny);
  font-size: 11.5px;
  line-height: 1.4;
}
.pk-vzorek {
  width: 18px;
  height: 13px;
  flex: none;
  border: 1px solid rgba(23, 43, 58, 0.2);
  border-radius: 2px;
}
.pk-vzorek-nulova {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #604069;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.pk-vzorek-bez-dat {
  border: 1px dashed #53606a;
  background: repeating-linear-gradient(135deg, #d5d9dd 0 4px, #eef0f2 4px 8px);
}
.pk-legenda-podnadpis {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--barva-okraj);
  color: var(--barva-text);
  font-size: 11.5px;
  font-weight: 700;
}
.pk-vzorek-ulice {
  width: 18px;
  height: 5px;
  flex: none;
  display: inline-block;
  border-radius: 2px;
}
.pk-vzorek-ulice-nulova { border-top: 4px dashed #604069; }
.pk-vzorek-ulice-bez-hodnoty { background: #7b858c; }

.pk-detail {
  border: 1px solid #ccd8e2;
  border-radius: 9px;
  padding: 11px 12px;
  background: #fbfcfd;
}
.pk-detail-hlavicka {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pk-detail-kicker {
  display: block;
  margin-bottom: 1px;
  color: var(--barva-text-tlumeny);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pk-detail h3 { font-size: 15px; line-height: 1.25; }
.pk-stitek {
  flex: none;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pk-stitek-priorita { background: #fbe7e5; color: #a82b3b; }
.pk-stitek-bez-dat { background: #e7eaed; color: #53606a; }
.pk-stitek-nejista { background: #fff0d9; color: #805000; }
.pk-hlavni-cislo {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--barva-okraj);
}
.pk-hlavni-cislo strong {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pk-hlavni-cislo span { color: var(--barva-text-tlumeny); font-size: 11.5px; line-height: 1.3; }
.pk-hodnoty { margin-top: 7px; }
.pk-hodnoty div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dotted #dfe5ea;
  font-size: 11.5px;
}
.pk-hodnoty div:last-child { border-bottom: 0; }
.pk-hodnoty dt { color: var(--barva-text-tlumeny); }
.pk-hodnoty dd { flex: none; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pk-poznamka {
  margin-top: 8px;
  color: var(--barva-text-tlumeny);
  font-size: 11.5px;
  line-height: 1.45;
}
.pk-poznamka-varovani { color: #8b4325; }
.pk-nejistota {
  margin-top: 9px;
  padding: 8px 9px;
  border: 1px solid #e4c995;
  background: #fff8e9;
  color: #704b12;
  font-size: 11.5px;
  line-height: 1.45;
}
.pk-nejistota strong { display: block; margin-bottom: 3px; }

/* Poznámka o původu dat, u které je rozpor už vysvětlený — patří ke zdroji,
   ne k varováním, takže nesmí mít výstražnou barvu jako .pk-nejistota. */
.pk-nejistota.pk-poznamka-zdroje {
  border-color: #d8dde2;
  background: #f6f8fa;
  color: #4a555f;
}

.pk-zebricek-hlavicka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}
.pk-zebricek-hlavicka h3 { font-size: 12px; line-height: 1.3; }
.pk-zebricek-hlavicka span { flex: none; color: var(--barva-text-tlumeny); font-size: 10.5px; }
.pk-zebricek { display: flex; flex-direction: column; border-top: 1px solid var(--barva-okraj); }
.pk-zebricek-radek {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 3px 9px;
  border: 0;
  border-bottom: 1px solid var(--barva-okraj);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pk-zebricek-radek:hover { background: #f5f8fa; }
.pk-zebricek-radek:focus-visible { outline: 2px solid var(--barva-akcent); outline-offset: -2px; }
.pk-zebricek-radek.aktivni { background: #edf4fa; }
.pk-zebricek-radek i {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  max-width: 100%;
  background: #be4a54;
  opacity: 0.7;
}
.pk-poradi { color: var(--barva-text-tlumeny); font-size: 11px; text-align: center; }
.pk-zebricek-text { min-width: 0; }
.pk-zebricek-text strong,
.pk-zebricek-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-zebricek-text strong { font-size: 11.5px; }
.pk-zebricek-text small { margin-top: 1px; color: var(--barva-text-tlumeny); font-size: 10.5px; font-weight: 400; }
.pk-zebricek-hodnota { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.pk-srovnani { border-top: 1px solid var(--barva-okraj); padding-top: 9px; }
.pk-srovnani summary { color: var(--barva-text); font-size: 12px; font-weight: 700; cursor: pointer; }
.pk-srovnani > p { margin: 7px 0 3px; color: var(--barva-text-tlumeny); font-size: 11.5px; line-height: 1.4; }
#parkovani-bodovy-graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.pk-graf-mrizka line { stroke: #e2e7eb; stroke-width: 1; }
.pk-graf-mrizka text,
.pk-graf-osa { fill: #596974; font-family: inherit; font-size: 9.5px; }
.pk-graf-prioritni-pole { fill: #f9e9e6; opacity: 0.75; }
.pk-graf-prah { stroke: #a74a51; stroke-width: 1; stroke-dasharray: 3 3; }
.pk-graf-popis-pole { fill: #8c3440; font-family: inherit; font-size: 9px; font-weight: 700; }
.pk-graf-bod { cursor: pointer; }
.pk-graf-bod circle { fill: #397ea6; fill-opacity: 0.62; stroke: #fff; stroke-width: 1.2; }
.pk-graf-bod text { fill: #fff; font-family: inherit; font-size: 7.5px; font-weight: 800; pointer-events: none; }
.pk-graf-bod:hover circle,
.pk-graf-bod:focus circle { stroke: #172b3a; stroke-width: 2; fill-opacity: 0.95; }
.pk-graf-priorita circle { fill: #b93648; fill-opacity: 0.92; }
.pk-graf-klic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 2px; }
.pk-graf-klic button {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--barva-text-tlumeny);
  font: inherit;
  font-size: 10.5px;
  text-align: left;
  cursor: pointer;
}
.pk-graf-klic button:hover { color: var(--barva-akcent); }
.pk-graf-klic b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: #b93648;
  color: #fff;
  font-size: 8px;
}
.pk-graf-metodika { margin-top: 5px; color: #596974; font-size: 11.5px; line-height: 1.35; }
.pk-zdroj { margin: 0; padding-top: 9px; border-top: 1px solid var(--barva-okraj); }

@media (max-width: 640px) {
  body.rezim-parkovani #panel { width: 100%; max-height: 64vh; }
  body.rezim-parkovani .panel-hlavicka { padding: 10px 16px 8px; }
  body.rezim-parkovani .panel-hlavicka p { display: none; }
  body.rezim-parkovani .panel-telo { padding: 10px 16px 18px; gap: 12px; }
  .pk-prepinac label { min-height: 40px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #panel,
  #tl-panel { transition: none; }
}