/* Dny otevřených dveří — klidný, čitelný přehled pro rodiče na mobilu.
   Petrolejová = ovládání a výběr, slunečnicová = datum (to hlavní, co hledají), jinak bílá a šedá. */
/* Barvy jako tokeny: světlý režim tady, tmavý níž (prefers-color-scheme). Hlavička je tmavá v obou režimech. */
:root {
  color-scheme: light dark;
  --petrol: #0e5968;          /* akcent: tlačítka, výběr */
  --petrol-2: #136b7a;        /* odkazy, zvýraznění v grafech */
  --petrol-svetla: #e4f1f3;   /* jemná plocha akcentu */
  --na-petrol: #ffffff;       /* text na akcentu */
  --hlava: #0e4f5c;           /* hlavička (stejná v obou režimech) */
  --hlava-akcent: #ffd24a;    /* odkaz a focus v hlavičce (stejný v obou režimech) */
  --slunce: #ffd24a;          /* datum dne otevřených dveří */
  --slunce-svetle: #fff4cc;
  --text: #17252d;
  --sedy: #52636e;
  --cara: #d6dfe4;
  --cara-silna: #b9c4ca;      /* okraj vstupních polí */
  --plocha: #edf1f3;          /* tlumená plocha uvnitř karet */
  --bila: #ffffff;            /* karty a panely */
  --stranka: #f5f7f8;         /* pozadí stránky */
  --zelena: #1f7a45;
  --zelena-svetla: #e3f4e9;
  --varovani: #7a5a00;
  --g-sede: #a3adb4;          /* grafy: srovnání */
  --g-sede2: #7d8890;
  --g-cara: #5f6b73;          /* grafy: referenční čára */
  --g-budouci: #9cc8cf;       /* grafy: budoucí roky */
  --g-bod: #00799e;
  --kal1: #d3e7ea; --kal2: #93c3cb; --kal3: #3f8f9c;
  --cervena: #a8372a;         /* vize kraje: data neodpovídají */
  --cervena-svetla: #fbe6e2;
  --r: 12px;                  /* karty */
  --r-ovl: 8px;               /* tlačítka a pole */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --petrol: #8bd3df; --petrol-2: #8bd3df; --petrol-svetla: #203c43; --na-petrol: #10252a;
    --slunce: #6b5518; --slunce-svetle: #3a3218;
    --text: #edf3f5; --sedy: #acbbc3; --cara: #33444d; --cara-silna: #5a6d78;
    --plocha: #233139; --bila: #192329; --stranka: #11181c;
    --zelena: #6fcf97; --zelena-svetla: #1d3a28; --varovani: #f0c95a;
    --g-sede: #5d6b74; --g-sede2: #8696a0; --g-cara: #9fb0b9; --g-budouci: #3d6a72; --g-bod: #6cc4d6;
    --kal1: #1f3a40; --kal2: #2f5a62; --kal3: #4f9fac;
    --cervena: #f29a8c; --cervena-svetla: #3e2420;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.5; color: var(--text); background: var(--stranka); }
a { color: var(--petrol-2); }
a:hover { color: var(--petrol); }
:focus-visible { outline: 3px solid var(--petrol-2); outline-offset: 3px; }
.hlava :focus-visible { outline-color: var(--hlava-akcent); }
.sirka { max-width: 860px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--slunce); color: var(--text); padding: .5rem 1rem; z-index: 20; }
.skip:focus { left: 0; }

/* ---- hlavička ---- */
.hlava { background: var(--hlava); color: #fff; padding: 1.6rem 0 1.4rem; }
.hlava .perex a { color: var(--hlava-akcent); }
.hlava h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: .2rem 0 .4rem; max-width: none; }
.hlava .perex { max-width: none; margin: 0; }
.hlava-radek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .1rem 1.2rem; margin: 0 0 .6rem; }
.hlava-radek .kraj { margin: 0; }
.menu { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.menu a { color: #e6f2f4; font-weight: 600; font-size: .95rem; text-decoration: none; padding: .45rem 0; white-space: nowrap; }
.menu a:hover { color: #fff; text-decoration: underline; }
.menu a[aria-current="page"] { color: var(--hlava-akcent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
body.rezim-data .hlava-radek, body.rezim-detail .hlava-radek, body.rezim-vyber .hlava-radek { margin: 0; }
.kraj { margin: 0 0 .6rem; font-weight: 600; color: #bfe0e5; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; }
.znacka { color: #fff; font-weight: 800; font-size: 1.1rem; letter-spacing: .01em; text-decoration: none; }
.znacka:hover { text-decoration: underline; }
h1 { margin: 0; font-size: clamp(2rem, 6.4vw, 3.2rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; max-width: 22ch; }
.perex { margin: 1rem 0 0; font-size: 1.15rem; max-width: 46ch; color: #e6f2f4; }

main { padding-top: .5rem; padding-bottom: 3rem; }

/* ---- hledání a výběr ---- */
.hledani { margin-top: 1.6rem; display: grid; gap: 1.3rem; }
.skupina h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.napoveda { margin: 0 0 .2rem; color: var(--sedy); font-size: .95rem; }
.rozbal { border: 1.5px solid var(--cara); border-radius: var(--r); background: var(--bila); }
.rozbal summary {
  cursor: pointer; list-style: none; padding: .8rem 1rem; min-height: 52px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
}
.rozbal summary::-webkit-details-marker { display: none; }
.rozbal summary::after { content: "▾"; margin-left: auto; color: var(--petrol-2); font-size: 1.1rem; }
.rozbal[open] summary::after { content: "▴"; }
.rozbal-h { font-weight: 700; font-size: 1.05rem; }
.rozbal-v { color: var(--sedy); font-size: .95rem; }
.rozbal-v.ma { color: var(--petrol); font-weight: 600; }
.rozbal-in { padding: 0 1rem 1rem; display: grid; gap: .9rem; }
.rozbal-in .pilulky { margin-top: 0; }
.pilulky { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.pilulka {
  font: inherit; font-size: .98rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .4rem .95rem;
  background: var(--bila); color: var(--text);
  border: 1.5px solid var(--cara); border-radius: 999px;
}
.pilulka:hover { border-color: var(--petrol-2); }
a.pilulka { text-decoration: none; }
.pilulka .pocet { font-size: .82rem; color: var(--sedy); font-variant-numeric: tabular-nums; }
.pilulka[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--na-petrol); font-weight: 600; }
.pilulka[aria-pressed="true"]::before { content: "✓"; font-weight: 800; }
.pilulka[aria-pressed="true"] .pocet { color: inherit; opacity: .8; }
.pilulka:disabled { opacity: .4; cursor: default; }

/* ---- další možnosti ---- */
.volba { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.volba legend { font-weight: 600; padding: 0; margin-bottom: .3rem; }
.volba label, .zatrz label { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; cursor: pointer; }
.volba input, .zatrz input { accent-color: var(--petrol); width: 1.15rem; height: 1.15rem; margin: 0; flex: none; }
.zatrz { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.pole label { display: block; font-weight: 600; margin-bottom: .3rem; }
.pole input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%; font: inherit; min-height: 46px; padding: .5rem .75rem;
  border: 1px solid var(--cara-silna); border-radius: var(--r-ovl); background: var(--bila); color: var(--text);
}

/* ---- výsledky ---- */
.vysledky { margin-top: 2.4rem; }
.vysledky:focus { outline: none; }
.vysledky-hl { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--cara); }
.vysledky-hl h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em; }
.pohledy { display: inline-flex; background: var(--plocha); border-radius: 999px; padding: 3px; }
.pohledy button {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  border: 0; background: none; color: var(--sedy); border-radius: 999px; padding: .45rem 1rem; min-height: 40px;
}
.pohledy button[aria-selected="true"] { background: var(--bila); color: var(--petrol); box-shadow: 0 0 0 1.5px var(--cara); }
.aktivni { margin: .7rem 0 0; color: var(--sedy); font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.aktivni-h { margin-right: .2rem; }
.cip { font: inherit; font-size: .92rem; min-height: 40px; padding: .3rem .75rem; border-radius: 999px; border: 1.5px solid var(--petrol); background: var(--petrol-svetla); color: var(--petrol); cursor: pointer; }
.cip:hover { background: var(--bila); }
.cip-x { font-weight: 800; }
.rychle { margin: .2rem 0 .8rem; }
.sr-odebrat { font-size: .85rem; font-weight: 400; margin-left: .3rem; }
.aktivni[hidden] { display: none; }
.btn-text { font: inherit; background: none; border: 0; padding: .2rem 0; color: var(--petrol-2); text-decoration: underline; cursor: pointer; }

.karty { display: grid; gap: 1rem; margin-top: 1.1rem; }
.karta { border: 1.5px solid var(--cara); border-radius: var(--r); padding: 1.1rem 1.15rem 1rem; background: var(--bila); }
.karta-hl { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.karta h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; }
.misto { margin: .2rem 0 0; color: var(--sedy); font-size: .95rem; }

.zajima {
  flex: none; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .3rem .75rem;
  border: 1.5px solid var(--cara); border-radius: 999px; background: var(--bila); color: var(--sedy);
}
.zajima .ikona { font-size: 1.1rem; line-height: 1; color: #b3bcc2; }
.zajima[aria-pressed="true"] { border-color: #e0b52a; background: var(--slunce-svetle); color: var(--text); }
.zajima[aria-pressed="true"] .ikona { color: #d29b00; }

/* termíny na kartě školy */
.terminy { margin: .9rem 0 0; display: grid; gap: .5rem; }
.termin[hidden] { display: none; }
.termin { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3rem .85rem; }
.termin-den {
  width: 3.6rem; text-align: center; border-radius: 10px; padding: .3rem 0 .35rem;
  background: var(--slunce); color: var(--text); line-height: 1.05;
}
.termin-den .tdn { display: block; font-size: .72rem; font-weight: 700; }
.termin-den .tc { display: block; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.termin-den .tm { display: block; font-size: .72rem; font-weight: 700; }
.termin.dalsi-t .termin-den { background: var(--slunce-svetle); }
.termin.probehl .termin-den { background: var(--plocha); color: var(--sedy); }
.termin.probehl .termin-txt { color: var(--sedy); }
.termin-txt { min-width: 0; }
.termin-txt .kdy { display: block; font-weight: 700; }
.termin-txt .cas { font-variant-numeric: tabular-nums; }
.termin-txt .pozn { display: block; font-size: .88rem; color: var(--sedy); }
.za { display: inline-block; margin-left: .35rem; font-size: .8rem; font-weight: 700; color: var(--zelena); }
.do-kal {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  min-height: 40px; padding: .3rem .7rem; border-radius: 10px;
  border: 1.5px solid var(--petrol); background: var(--bila); color: var(--petrol);
}
.do-kal:hover { background: var(--petrol-svetla); }
.vic-terminu { font: inherit; font-size: .92rem; background: none; border: 0; padding: .3rem 0; color: var(--petrol-2); text-decoration: underline; cursor: pointer; justify-self: start; }
.bez-terminu { margin: .9rem 0 0; padding: .7rem .85rem; border-radius: 10px; background: var(--plocha); color: var(--sedy); font-size: .95rem; }
.varovani { margin: .6rem 0 0; font-size: .88rem; color: var(--varovani); }
.jen-vicelete { margin: .5rem 0 0; padding: .45rem .7rem; border-radius: var(--r); background: var(--slunce-svetle); font-size: .92rem; font-weight: 600; }

/* obory */
.obory { margin: .95rem 0 0; }
.obory-h { margin: 0 0 .25rem; font-size: .88rem; font-weight: 700; color: var(--sedy); }
.obory-pozn { margin: .4rem 0 0; font-size: .82rem; color: var(--sedy); }
.zazemi { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; font-size: .9rem; }
.zazemi li { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.zazemi-ik { font-weight: 800; color: var(--zelena); }
.zazemi .nema { color: var(--sedy); }
.zazemi .nema .zazemi-ik { color: var(--sedy); }
.zazemi-pozn { font-size: .8rem; color: var(--sedy); }
.obory-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.obory-l li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; font-size: .97rem; }
.obory-l li.sedi .obor-n { font-weight: 700; }
.obor-m { font-size: .84rem; color: var(--sedy); }
.obor-b2 { font-weight: 400; }
.mz-loni { color: var(--sedy); font-size: .9rem; }
.obor-p { flex-basis: 100%; font-size: .84rem; color: var(--sedy); margin: -.1rem 0 .15rem; }
.obor-b { flex-basis: 100%; font-size: .86rem; font-weight: 600; color: var(--petrol); margin: -.05rem 0 .1rem; }
.obor-u { flex-basis: 100%; font-size: .8rem; color: var(--sedy); margin: -.1rem 0 .15rem; }
.obory-l li + li { padding-top: .35rem; border-top: 1px solid var(--plocha); }
.mz { margin: .8rem 0 0; }
.mz-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem; }
.mz-l b { color: var(--petrol); font-variant-numeric: tabular-nums; }
.mz-pozn { color: var(--sedy); font-size: .82rem; }
.mz-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.mz-hl { grid-column: 1; }
.mz-pozn { grid-column: 1; }
.mz-pred { grid-column: 1 / -1; font-size: .82rem; color: var(--sedy); }
.mz-pred b { color: var(--text); font-weight: 600; }
.vz { margin: .8rem 0 0; }
.vz .obory-h { cursor: help; }
.vz-h { margin: .4rem 0 .15rem; font-size: .88rem; font-weight: 600; }
.vz-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.vz-l b { color: var(--petrol); display: inline-block; min-width: 3.2em; }
.vz-pozn { display: block; color: var(--sedy); font-size: .8rem; padding-left: 3.2em; }
.ps-obal { overflow-x: auto; }
.ps-t { border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; margin: .2rem 0 .4rem; }
.ps-t th, .ps-t td { padding: .25rem .6rem .25rem 0; text-align: left; white-space: nowrap; }
.ps-t thead th { font-size: .78rem; font-weight: 600; color: var(--sedy); }
.ps-t tbody th { font-weight: 400; color: var(--sedy); cursor: help; }
.ps-t td b { color: var(--petrol); }
.ps-op { color: var(--sedy); font-size: .8rem; }
.ps-zdroje .vz-pozn { padding-left: 0; }
.ps-nahore { margin: .5rem 0 .2rem; font-size: .95rem; }
.ps-nahore > b { color: var(--petrol); font-size: 1.15rem; }
.ps-nahore-d { color: var(--sedy); font-size: .85rem; }
.ps-prep { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .5rem; }
.ps-prep-b { font: inherit; font-size: .85rem; padding: .3rem .7rem; border: 1px solid var(--cara); border-radius: 999px; background: none; cursor: pointer; }
.ps-prep-b[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--na-petrol); }
.ps-l .ob-n, .ps-l .ob-n a { text-decoration: none; color: inherit; }
.ps-l .ob-n a:hover { text-decoration: underline; }
.ps-l a.ob-n:hover { text-decoration: underline; }
.ps-chybi { margin: .6rem 0 0; font-size: .88rem; }
.ps-chybi summary { cursor: pointer; color: var(--petrol-2); padding: .3rem 0; }
.ps-chybi ul { margin: .3rem 0; padding-left: 1.1rem; }
.ps-chybi li { margin: .3rem 0; }
.vz-odkaz { color: inherit; }
.vz-chybi { margin: .45rem 0 0; font-size: .86rem; color: var(--sedy); }
.g-vz { margin: .55rem 0 0; font-size: .82rem; cursor: help; }
.g-vz b { font-weight: 600; }
.mz-stopa { grid-column: 2; grid-row: 1 / span 2; height: 22px; }
.mz-osa { position: relative; height: 1.1rem; margin: .1rem 0 0 calc(50% + .5rem); font-size: .72rem; color: var(--sedy); }

/* ---- malé grafy v detailu oboru a u maturity ---- */
.g-mrizka { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0 .3rem; }
.g-panel { border: 1px solid var(--cara); border-radius: 10px; padding: .6rem .75rem .55rem; background: var(--bila); min-width: 0; }
.g-body { grid-column: 1 / -1; }
.g-h { margin: 0; font-size: .9rem; font-weight: 700; color: var(--text); }
.g-pod { margin: 0 0 .35rem; font-size: .8rem; color: var(--sedy); }
.g-pozn { margin: .3rem 0 0; font-size: .8rem; color: var(--sedy); }
.g-radek { display: grid; grid-template-columns: 3.6rem 1fr 3.4rem; align-items: center; gap: .5rem; min-height: 24px; }
.g-popis { font-size: .8rem; color: var(--sedy); }
.g-hodnota { font-size: .9rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.g-stopa { position: relative; display: block; height: 14px;
  background: linear-gradient(var(--cara), var(--cara)) 0 50% / 100% 1px no-repeat; }
.g-body .g-stopa { background:
  linear-gradient(var(--cara), var(--cara)) 50% 0 / 1px 100% no-repeat,
  linear-gradient(var(--cara), var(--cara)) 0 50% / 100% 1px no-repeat; }
.g-pruh { position: absolute; top: 2px; height: 10px; border-radius: 5px; background: var(--petrol-2); }
.g-pruh.g-od0 { border-radius: 0 5px 5px 0; }
.g-pruh.g-srov { background: var(--g-sede); }
.g-pruh.g-loni { background: none; border: 2px solid var(--petrol-2); opacity: .55; }
.g-tecka { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--petrol); box-shadow: 0 0 0 2px var(--bila); }
.g-tecka.g-loni { background: var(--bila); border: 2px solid var(--petrol-2); box-shadow: none; }
.g-pruh.g-loni2 { opacity: .3; }
.g-tecka.g-loni2 { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-color: var(--g-sede2); }
.g-cr { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--g-cara); }
.g-osa { min-height: 0; }
.g-osa .g-stopa { background: none; height: 1rem; }
.g-tik { position: absolute; top: 0; transform: translateX(-50%); font-size: .72rem; color: var(--sedy); line-height: 1; white-space: nowrap; }
.g-tik:first-child { transform: none; }
.g-tik:last-child { transform: translateX(-100%); }
.g-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; margin: 0 0 .4rem; font-size: .8rem; color: var(--sedy); }
.g-lz { display: inline-block; margin-right: .3rem; vertical-align: middle; }
.g-lz-skola { width: 10px; height: 10px; border-radius: 50%; background: var(--petrol); }
.g-lz-loni { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--petrol-2); }
.g-lz-cr { width: 3px; height: 14px; border-radius: 2px; background: var(--g-cara); }
.g-lz-tecka { width: 10px; height: 10px; border-radius: 50%; background: var(--petrol); margin-left: 0; }
.g-lz-tecka + .g-lz-cr, .g-legenda .g-lz-cr { margin-left: .6rem; }
.obor-zk b { font-weight: 600; color: var(--text); }
/* detail: každý obor jako samostatný oddíl s výrazným názvem */
.karta-detail .obory-l > li + li { margin-top: 1rem; padding-top: 1.1rem; border-top: 2px solid var(--cara); }
.karta-detail .obory-l > li > .obor-n { font-size: 1.16rem; font-weight: 700; color: var(--petrol); line-height: 1.3; }
.g-kraj { margin: .35rem 0 0; font-size: .84rem; color: var(--text); }
.g-kraj b { color: var(--petrol); }

/* ---- Obory v číslech ---- */
.data-str { padding-bottom: 2rem; }
.data-str:focus { outline: none; }
.data-str h2 { font-size: 1.5rem; margin: .8rem 0 .3rem; }
.data-perex { color: var(--sedy); margin: 0 0 .9rem; max-width: 70ch; }
/* záložky stránky Obory v číslech */
.data-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1rem; font-size: .85rem; }
.data-nav-b { font: inherit; padding: .3rem .7rem; min-height: 32px; border: 1px solid var(--cara); border-radius: 999px; background: var(--bila); color: var(--petrol-2); cursor: pointer; }
.data-nav-b:hover { border-color: var(--petrol-2); }
/* záložky Oborů v číslech jsou odkazy (#data/…); aktuální plná */
a.data-nav-b { display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; }
a.data-nav-b[aria-current="page"] { background: var(--petrol-2); border-color: var(--petrol-2); color: #fff; }
/* Přijímačky 2027: odkaz na hlavní stránce (nejbližší krok šedě) a osa na vlastní stránce */
.kroky-v { color: var(--sedy); font-weight: 400; font-size: .9rem; margin-left: .35rem; }
.prij-osa { max-width: 860px; }
.prij-osa .osa { margin: .6rem 0 .8rem; }
.data-sekce h3[tabindex="-1"]:focus, .data-h3[tabindex="-1"]:focus, .data-tab-obal[tabindex="-1"]:focus { outline: none; }
/* podbarvení sloupce Na místo (tabulka oborů) a vzorky v popisku tabulky */
.na-hi { background: color-mix(in srgb, var(--petrol-2) 30%, transparent); font-weight: 700; }
.na-1 { background: color-mix(in srgb, var(--petrol-2) 14%, transparent); }
.na-0 { background: transparent; }
.na-lo { color: var(--sedy); background: color-mix(in srgb, var(--sedy) 12%, transparent); }
.na-vzor { display: inline-block; padding: 0 .35rem; border-radius: 4px; border: 1px solid var(--cara); }
.data-filtry { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: 0 0 .8rem; }
.data-f { display: grid; gap: .15rem; font-size: .85rem; color: var(--sedy); }
.data-f select { font: inherit; font-size: 1rem; color: var(--text); padding: .45rem .6rem; min-height: 44px; border: 1px solid var(--cara); border-radius: 10px; background: var(--bila); }
.data-souhrn { font-size: .9rem; margin: 0 0 .5rem; }
.data-graf { margin: 0 0 1rem; border: 1px solid var(--cara); border-radius: var(--r); padding: .8rem; }
.sc-obal { position: relative; }
.sc { display: block; max-width: 100%; height: auto; overflow: visible; }
.sc-ytitul { margin: 0 0 .2rem; font-size: .8rem; color: var(--sedy); }
.sc-mrizka line { stroke: var(--cara); stroke-width: 1; }
.sc-mrizka text { font-size: 11px; fill: var(--sedy); font-family: var(--font); }
.sc-mrizka .sc-osa { font-size: 12px; fill: var(--sedy); }
.sc-mrizka .sc-jedna { stroke: var(--g-sede2); stroke-width: 1.5; }
.sc-mrizka .sc-jedna-t { font-size: 11px; fill: var(--text); paint-order: stroke; stroke: var(--bila); stroke-width: 4px; stroke-linejoin: round; }
.sc-bod { cursor: pointer; outline: none; }
.sc-hit { fill: transparent; }
.sc-m { fill: var(--g-bod); stroke: var(--bila); stroke-width: 2; }
.sc-bod:hover .sc-m, .sc-bod:focus-visible .sc-m { stroke: var(--text); stroke-width: 2; }
.sc-bod:focus-visible .sc-hit { stroke: var(--slunce); stroke-width: 3; }
.sc-zv .sc-m { stroke: var(--text); stroke-width: 3; }
.sc-tip { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: .05rem; max-width: 240px; padding: .45rem .6rem;
  background: var(--bila); border: 1px solid var(--cara); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); font-size: .82rem; }
.sc-tip.vlevo { transform: translateX(-100%); }
.sc-tip[hidden] { display: none; }
.sc-tip span { color: var(--sedy); }
.data-tab-obal { overflow-x: auto; margin: .8rem 0 1rem; border: 1px solid var(--cara); border-radius: var(--r); }
.data-tab { border-collapse: collapse; width: 100%; font-size: .86rem; }
.data-tab caption { text-align: left; padding: .5rem .7rem; font-size: .82rem; color: var(--sedy); }
.data-tab th, .data-tab td { padding: .35rem .55rem; border-top: 1px solid var(--cara); text-align: left; vertical-align: top; }
.data-tab thead th { background: var(--plocha); border-top: 0; white-space: nowrap; }
.data-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-tab tbody th { font-weight: 600; min-width: 11rem; }
.data-tab tbody td:nth-child(2) { min-width: 13rem; }
.data-tab tr.zv { background: var(--slunce-svetle); }
.data-razeni { font: inherit; font-weight: 700; background: none; border: 0; padding: .2rem 0; color: var(--text); cursor: pointer; min-height: 32px; }
.data-razeni:hover { color: var(--petrol-2); text-decoration: underline; }
.data-sipka { color: var(--petrol-2); }
/* tabulka oborů: názvy škol bez zalomení (na širší obrazovce), hlavička se smí lámat, ať je místo pro obor */
.data-obory thead th { white-space: normal; vertical-align: bottom; }
@media (min-width: 900px) { .data-obory tbody th { white-space: nowrap; } }
.data-metodika { margin: .5rem 0 0; font-size: .9rem; }
.data-metodika summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.data-metodika p { margin: .3rem 0 .5rem; color: var(--sedy); max-width: 75ch; }
.data-sekce { margin: 0 0 1.2rem; }
.demo-veta { margin: .2rem 0 .5rem; font-weight: 600; max-width: 75ch; }
.dm-obal { min-height: 230px; }
.dm { display: block; max-width: 100%; height: auto; }
.dm-b { fill: var(--petrol-2); }
.dm-b.dm-odhad { fill: var(--g-budouci); }
.dm-b.dm-ted { stroke: var(--text); stroke-width: 2; }
.dm-m { stroke: var(--g-cara); stroke-width: 3; stroke-linecap: round; }
.kr-v.dm-m-t { fill: var(--g-cara); font-weight: 600; }
.dm .dm-ted-t { font-weight: 700; fill: var(--text); }
.dm-lz-stav { width: 10px; height: 12px; border-radius: 2px 2px 0 0; background: var(--petrol-2); }
.dm-lz-odhad { width: 10px; height: 12px; border-radius: 2px 2px 0 0; background: var(--g-budouci); margin-left: .3rem; }
.dm-lz-mista { width: 14px; height: 3px; border-radius: 2px; background: var(--g-cara); margin-left: .3rem; }
.g-trh { margin: .45rem 0 0; padding-top: .4rem; border-top: 1px solid var(--cara); font-size: .82rem; color: var(--text); }
.g-trh b { font-weight: 600; }
.g-sl-h { margin: .55rem 0 .15rem; font-size: .8rem; font-weight: 600; cursor: help; }
.g-sloupce { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; }
.g-sl { display: grid; grid-template-rows: auto 44px auto; justify-items: center; font-variant-numeric: tabular-nums; }
.g-sl-n { font-size: .75rem; font-weight: 600; }
.g-sl-s { position: relative; width: 100%; max-width: 26px; height: 44px; border-bottom: 1px solid var(--cara); }
.g-sl-b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0; background: var(--g-sede); }
.g-sl-b.g-sl-ted { background: var(--petrol-2); }
.g-sl-r { font-size: .7rem; color: var(--sedy); margin-top: 2px; }
.g-k2 { list-style: none; margin: 0; padding: 0; font-size: .84rem; font-variant-numeric: tabular-nums; display: grid; gap: .1rem; }
.g-k2 li { border: 0; padding: 0; margin: 0; }
.g-k2-ne { color: var(--sedy); }
.stip { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  vertical-align: middle; color: #5b4300; background: #fde9b0; cursor: help; }
.data-h3 { font-size: 1.15rem; margin: 1rem 0 .2rem; }
.ob-l { display: grid; gap: .15rem; }
.ob-r { grid-template-columns: minmax(9rem, 15rem) 1fr 3.4rem; }
.ob-n { font: inherit; font-size: .88rem; text-align: left; background: none; border: 0; padding: .3rem 0; color: var(--petrol-2); cursor: pointer; min-height: 32px; text-decoration: underline; text-decoration-color: var(--cara); text-underline-offset: 3px; }
.ob-n:hover { text-decoration-color: currentColor; }
.ob-vybr .ob-n { font-weight: 700; color: var(--text); text-decoration: none; }
.ob-vybr { background: var(--slunce-svetle); border-radius: 6px; }
.g-lz-pruh { width: 14px; height: 8px; border-radius: 0 4px 4px 0; background: var(--petrol-2); }
.g-lz-loni2 { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--g-sede2); }
.g-lz-kraj { width: 14px; height: 3px; background: var(--g-sede); }
.kr { display: block; max-width: 100%; height: auto; }
.kr-mr { stroke: var(--cara); stroke-width: 1; }
.kr-t { font-size: 11px; fill: var(--sedy); font-family: var(--font); }
.kr-v { font-size: 12px; font-weight: 700; fill: var(--text); font-family: var(--font); paint-order: stroke; stroke: var(--bila); stroke-width: 4px; stroke-linejoin: round; }
/* vývoj po letech jako malá tabulka */
.vy-tab { width: auto; min-width: min(100%, 36rem); }
.vy-tab tbody th { font-weight: 600; min-width: 14rem; }
.vy-pozn { display: block; font-size: .78rem; font-weight: 400; color: var(--sedy); }
.vy-tab td.num { font-size: .95rem; font-weight: 700; }
.vy-kraj th, .vy-kraj td.num { color: var(--sedy); font-weight: 400; }
.vy-kraj th { padding-left: 1.2rem; }
.vy-zm { color: var(--sedy); }
.vy-obal { display: inline-block; max-width: 100%; vertical-align: top; }
.vy-tab tbody td:nth-child(2) { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* kalendář v Návštěvách */
.kal-mapa { margin: .3rem 0 1rem; border: 1px solid var(--cara); border-radius: var(--r); padding: .2rem .8rem .6rem; }
.kal-mapa > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
.kal-leg { margin: .1rem 0 .5rem; }
.kal-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin: 0 .25rem 0 .5rem; vertical-align: middle; }
.kal-mesice { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }
.kal-mh { margin: 0 0 .25rem; font-weight: 700; font-size: .9rem; }
.kal-g { display: grid; grid-template-columns: repeat(7, 34px); gap: 3px; }
.kal-dh { font-size: .72rem; color: var(--sedy); text-align: center; }
.kal-d { font: inherit; font-size: .8rem; width: 34px; height: 34px; border: 0; border-radius: 6px; background: var(--plocha); color: var(--sedy); padding: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.kal-d:disabled { cursor: default; background: none; color: var(--g-sede); }
.kal-s1 { background: var(--kal1); color: var(--text); }
.kal-s2 { background: var(--kal2); color: var(--text); }
.kal-s3 { background: var(--kal3); color: var(--na-petrol); }
.kal-s4 { background: var(--petrol); color: var(--na-petrol); }
.kal-d.kal-minule { opacity: .45; }
.kal-d.kal-dnes { box-shadow: inset 0 0 0 2px var(--text); }
.kal-d.kal-vybr { box-shadow: 0 0 0 3px var(--slunce); font-weight: 700; }
.kal-d:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--slunce); }
@media (max-width: 560px) {

  .kal-g { grid-template-columns: repeat(7, 1fr); }
  .kal-d { width: auto; aspect-ratio: 1; height: auto; min-height: 36px; }
  .kal-m { width: 100%; }
}
@media (max-width: 560px) {
  .g-mrizka { grid-template-columns: 1fr; }
  .mz-r { grid-template-columns: 1fr; }
  .mz-hl, .mz-pozn, .mz-stopa, .mz-pred { grid-column: 1; grid-row: auto; }
  .mz-stopa { order: 2; }
  .mz-osa { margin-left: 0; }
  .g-radek { grid-template-columns: 3.9rem 1fr 3.1rem; gap: .4rem; }
  .g-popis { white-space: nowrap; }
  .ob-l .ob-r { grid-template-columns: 1fr 3.1rem; row-gap: 0; padding-bottom: .25rem; }
  .ob-l .ob-n { grid-column: 1 / -1; min-height: 28px; padding: .15rem 0 0; }
}
/* srovnání uložených škol */
.srovnani { overflow-x: auto; margin-top: .6rem; border: 1px solid var(--cara); border-radius: var(--r); }
.srovnani table { border-collapse: collapse; width: 100%; min-width: 470px; font-size: .92rem; }
.srovnani th, .srovnani td { text-align: left; vertical-align: top; padding: .45rem .6rem; border-bottom: 1px solid var(--cara); }
.srovnani thead th { font-size: .8rem; color: var(--sedy); font-weight: 600; background: var(--plocha); }
.srovnani .sr-skola th { background: var(--petrol-svetla); color: var(--petrol); }
.srovnani .sr-info { display: block; font-weight: 400; font-size: .82rem; color: var(--text); }
.srovnani .sr-cislo { font-weight: 700; color: var(--petrol); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pohledy button[hidden] { display: none; }
.volno { color: var(--text); }
.obor-b-pozn { font-weight: 400; color: var(--sedy); font-size: .8rem; }
.bez-odkaz { display: block; margin: 0 0 .6rem; }
.jen-mobil { display: none; }
/* přehled vs. detail */
.jen-prehled[hidden], #detail[hidden] { display: none !important; }
.hlavni-nav { margin: .9rem 0 .2rem; }
.hlavni-nav .pohledy { display: flex; width: fit-content; max-width: 100%; }
body.rezim-detail .hlava, body.rezim-vyber .hlava, body.rezim-data .hlava { padding: .55rem 0; }
body.rezim-data .hlava h1, body.rezim-data .hlava .perex { display: none; }
body.rezim-data .hlava .kraj { margin: 0; }
body.rezim-detail .hlava h1, body.rezim-detail .hlava .perex,
body.rezim-vyber .hlava h1, body.rezim-vyber .hlava .perex { display: none; }
body.rezim-detail .hlava .kraj, body.rezim-vyber .hlava .kraj { margin: 0; }
body.rezim-vyber .hledani, body.rezim-vyber #kroky { display: none; }
.karta-detail .karta-hl h3 { font-size: 1.5rem; }
.karta-detail .obory, .karta-detail .mz, .karta-detail #d-zazemi { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--cara); }
.karta-detail .obory-h { font-size: 1.08rem; color: var(--text); margin-bottom: .45rem; }
.karta-detail .obory-l li + li { padding-top: .55rem; }
.vyber-filtr { margin: .4rem 0; }
.obor-b-pozn { font-size: .84rem; }
#detail { outline: none; padding-top: .4rem; }
.detail-zpet { margin: .6rem 0 .5rem; }
.detail-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.karta-detail .obory-h2 { margin-top: .9rem; }
.karta-detail h3.obory-h { font-size: 1.08rem; }
.karta h3 a { color: inherit; text-decoration: none; }
.karta h3 a:hover { text-decoration: underline; }
.obor-kr { flex-basis: 100%; font-size: .86rem; font-weight: 600; color: var(--petrol); margin: -.05rem 0 .1rem; }
.dalsi-terminy { margin: .1rem 0 0; font-size: .9rem; color: var(--sedy); }
.radek-txt b a { color: inherit; }
/* Můj výběr */
.vyber-banner { background: var(--slunce-svetle); padding: .7rem .9rem; border-radius: var(--r); margin: .6rem 0; }
.vyber-banner p { margin: 0 0 .5rem; }
.sdileni { margin: .4rem 0 .2rem; }
.sdileni .napoveda { margin: .4rem 0 0; }
.sdileni input { display: block; width: 100%; box-sizing: border-box; margin-top: .3rem; font: inherit; font-size: .85rem; padding: .4rem .5rem; }
.sr-karty { display: none; gap: .7rem; margin-top: .6rem; }
.sr-karta { border: 1px solid var(--cara); border-radius: var(--r); padding: .75rem .85rem; }
.sr-karta h3 { margin: 0; font-size: 1.02rem; }
.sr-karta .sr-info { margin: .15rem 0 0; font-size: .84rem; color: var(--sedy); }
.sr-karta ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.sr-karta li span { display: block; font-size: .84rem; color: var(--text); }
/* mobil: filtry za tlačítkem */
#filtry-tl, #filtry-hotovo { display: none; }
.volba-pozn { color: var(--sedy); font-size: .86rem; }
.zak { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .02rem .5rem; white-space: nowrap; }
.zak-m { background: var(--petrol-svetla); color: var(--petrol); }
.zak-vl { background: var(--zelena-svetla); color: var(--zelena); }
.zak-c, .zak-j { background: var(--plocha); color: var(--sedy); }
.obory-dalsi { margin-top: .35rem; }
.obory-dalsi summary { cursor: pointer; color: var(--petrol-2); font-size: .93rem; font-weight: 600; min-height: 36px; display: list-item; }
.obory-dalsi[open] summary { margin-bottom: .3rem; }

.akce { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tl {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border-radius: 10px;
  border: 1.5px solid var(--petrol); background: var(--bila); color: var(--petrol);
}
.tl:hover { background: var(--petrol-svetla); color: var(--petrol); }
.tl-hlavni { background: var(--petrol); color: var(--na-petrol); }
.tl-hlavni:hover { background: var(--petrol-2); border-color: var(--petrol-2); color: var(--na-petrol); }
.tl-svetle { border-color: #fff; background: transparent; color: #fff; }
.tl-svetle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.zdroj { margin: .75rem 0 0; font-size: .8rem; color: var(--sedy); }
.zdroj a { color: var(--sedy); }

/* oddíl škol bez termínu */
.oddil { margin-top: 1.6rem; background: var(--plocha); }
.oddil .rozbal-in.karty { margin-top: 0; }

/* pohled podle data */
.den-h { margin: 1.8rem 0 .2rem; font-size: 1.1rem; display: flex; align-items: baseline; gap: .5rem; }
.den-h:first-child { margin-top: 1.2rem; }
.den-h .za { margin: 0; }
.radek { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--cara); }
.radek-txt b { display: block; font-size: 1.02rem; }
.radek-txt span { color: var(--sedy); font-size: .93rem; }

.prazdno { padding: 1.6rem 0; font-size: 1.05rem; }

/* spodní lišta vybraných škol */
.lista { position: sticky; bottom: 0; z-index: 10; background: var(--petrol); color: #fff; padding: .6rem 0; }
.lista[hidden] { display: none; }
.nahoru { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--petrol); color: var(--na-petrol); border: 2px solid var(--bila);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; }
.nahoru:hover { background: var(--petrol-2); }
.nahoru[hidden] { display: none; }
#obsah:focus { outline: none; }
body.ma-listu .nahoru { bottom: calc(16px + 3.6rem); }
.lista-in { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.lista-in span { font-weight: 600; margin-right: auto; }
.lista .tl-hlavni { background: var(--slunce); border-color: var(--slunce); color: var(--text); }
.lista .tl-hlavni:hover { background: #ffdd70; color: var(--text); }

/* patička */
.pata { background: var(--plocha); padding: 1.8rem 0 2.6rem; margin-top: 1rem; font-size: .97rem; }
.pata p { margin: 0 0 .7rem; max-width: 68ch; }
.pata-mala { color: var(--sedy); font-size: .88rem; }

/* Široký monitor: filtry vlevo (lepí se při rolování), výsledky vpravo — změnu podmínky je hned vidět. */
@media (min-width: 1100px) {
  .sirka { max-width: 1240px; }
  .kroky, #detail, .tahak, .hlava .perex { max-width: 860px; }
  .rozlozeni { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 2.2rem; align-items: start; margin-top: 1.4rem; }
  .rozlozeni .hledani { margin-top: 0; position: sticky; top: .8rem; max-height: calc(100vh - 5.5rem); overflow-y: auto;
    padding: 0 1rem .9rem 0; overscroll-behavior: contain; border-right: 2px solid var(--cara); scrollbar-gutter: stable; }
  .rozlozeni .vysledky { margin-top: 0; }
  body.rezim-vyber .rozlozeni { grid-template-columns: minmax(0, 1fr); }
}
/* Střední šířka: filtry nad výsledky, na konci tlačítko s počtem, které k nim odroluje. */
@media (min-width: 561px) and (max-width: 1099px) {
  #filtry-hotovo { display: inline-flex; margin-top: .4rem; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  /* na telefonu nic pod 13 px: poznámky a popisky grafů o stupeň větší než na počítači */
  .g-pod, .g-pozn, .g-popis, .g-legenda, .sc-ytitul, .g-sl-h, .zazemi-pozn, .obor-u, .vz-pozn, .vz-chybi, .zdroj,
  .obor-b-pozn, .srovnani thead th, .obory-pozn, .mz-pozn, .mz-pred, .g-vz, .data-tab caption, .g-trh,
  .obor-m, .obor-p, .g-kraj, .pilulka .pocet, .g-k2 { font-size: .9rem; }
  .g-tik, .g-sl-r, .g-sl-n, .mz-osa, .kal-dh, .zak, .stip, .za, .termin-den .tdn, .termin-den .tm { font-size: .82rem; }
  .mz-osa { height: 1.25rem; }
  .hlava { padding: 1.2rem 0 1.1rem; }
  .karta { padding: .95rem .9rem .9rem; }
  .termin { grid-template-columns: auto 1fr; }
  .termin .do-kal { grid-column: 2; justify-self: start; min-height: 44px; }
  .jen-mobil { display: block; }
  #filtry-tl { display: inline-flex; margin: .2rem 0 .4rem; }
  #lista-ukaz { display: none; }
  #filtry-telo:not(.otevrene) { display: none; }
  /* filtry jako panel přes celou obrazovku; dole pořád „Zobrazit N škol“ */
  #filtry-telo.otevrene { position: fixed; inset: 0; z-index: 60; background: var(--bila); overflow-y: auto;
    padding: 0 16px; display: grid; gap: 1.1rem; align-content: start; }
  #filtry-telo.otevrene .filtry-hlava { display: flex; }
  #filtry-telo.otevrene #filtry-hotovo { display: block; width: 100%; position: sticky; bottom: 0; margin: .4rem 0 0;
    min-height: 52px; border-radius: 0; box-shadow: 0 -12px 0 var(--bila); }
  body.panel-otevreny { overflow: hidden; }
  /* hlavní navigace jako stálá spodní lišta se třemi záložkami */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .hlavni-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; background: var(--bila);
    border-top: 1px solid var(--cara); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .hlavni-nav .pohledy { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); background: none; padding: 0; border-radius: 0; }
  .hlavni-nav .pohledy button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; border-radius: 12px; font-size: .8rem; padding: .25rem .2rem; }
  .hlavni-nav .pohledy button[aria-selected="true"] { background: var(--petrol-svetla); color: var(--petrol); box-shadow: none; font-weight: 700; }
  .hlavni-nav .tab-ik { display: block; }
  .lista { display: none !important; }
  .nahoru, body.ma-listu .nahoru { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.panel-otevreny .nahoru { display: none; }
  .hlava .perex { display: none; }
  .hlava h1 { font-size: 1.35rem; }
  .hlava { padding: .8rem 0 .7rem; }
  body.rezim-datum .hledani { display: none; }
  ul.vyber-skoly li { flex-direction: column; align-items: stretch; }
  .srovnani { display: none; }
  .sr-karty { display: grid; }
  .zajima { padding: .3rem .6rem; }
}
@media print {
  .krok, .dalsi, .pohledy, .akce, .zajima, .do-kal, .lista, .skip, .nahoru, .menu { display: none !important; }
  .hlava { background: none; color: var(--text); padding: 0; }
  .hlava .znacka, .hlava .kraj { color: var(--text); }
  .karta { break-inside: avoid; }
}

/* ---- přijímačky: časová osa ---- */
.kroky { margin-top: 1.4rem; }
.osa { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--petrol-svetla); display: grid; gap: .7rem; }
.osa li { position: relative; line-height: 1.45; }
.osa li::before { content: ""; position: absolute; left: calc(-1rem - 8px); top: .35em; width: 13px; height: 13px; border-radius: 50%; background: var(--bila); border: 3px solid var(--petrol-2); }
.osa li b { display: block; color: var(--petrol); }
.osa-pozn { display: block; margin-top: .3rem; padding: .45rem .65rem; border-radius: 8px; background: var(--petrol-svetla); font-size: .93rem; }
.osa li.probehlo { color: var(--sedy); }
.osa li.probehlo::before { background: var(--cara); border-color: var(--cara); }
.osa li.ted { background: var(--slunce-svetle); border-radius: 8px; padding: .35rem .5rem; margin-left: -.5rem; }
.osa li.ted::before { background: var(--slunce); border-color: var(--petrol); left: calc(-.5rem - 8px); }
.osa .kdy { font-weight: 600; color: var(--zelena); margin-left: .35rem; font-size: .9rem; }

/* ---- tahák na DOD ---- */
.tahak { margin: .4rem 0 1rem; padding: 1.3rem 1.2rem; border-radius: var(--r); background: var(--petrol-svetla); }
.tab-ik { display: none; }
.filtry-hlava { display: none; position: sticky; top: 0; z-index: 1; background: var(--bila); align-items: center;
  justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--cara); }
.filtry-hlava h2 { margin: 0; font-size: 1.2rem; }
.filtry-x { font: inherit; font-size: 1.8rem; line-height: 1; width: 48px; height: 48px; border: 0; background: none; color: var(--text); cursor: pointer; border-radius: 50%; }
.filtry-x:hover { background: var(--plocha); }
.datum-vyber { position: relative; }
.datum-vyber input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.datum-vyber.zvolene { background: var(--petrol); border-color: var(--petrol); color: var(--na-petrol); font-weight: 600; }
.datum-vyber:focus-within { outline: 3px solid var(--slunce); outline-offset: 2px; }
.vyber-skoly { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .6rem; }
.vyber-skoly li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  border: 1px solid var(--cara); border-radius: var(--r); padding: .7rem .9rem; background: var(--bila); }
.vs-info { display: grid; gap: .1rem; }
.vs-info b a { color: inherit; }
.vs-info span { color: var(--sedy); font-size: .92rem; }
.vs-akce { display: flex; gap: .5rem; flex-wrap: wrap; }
.porovnani { margin-top: .4rem; }
.porovnani > summary { cursor: pointer; padding: .7rem 0; min-height: 48px; }
.sr-zadny { color: var(--sedy); font-style: italic; }
.tahak h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--petrol); }
.tahak-sloupce { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.tahak ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; line-height: 1.45; }
@media (max-width: 560px) { .tahak-sloupce { grid-template-columns: 1fr; } }
.tahak-tisk { margin-top: 1rem; }
.o-datech { max-width: 70ch; line-height: 1.55; }
@media print { .kroky, .detail-zpet, .tahak-tisk, body.rezim-tahak .pata { display: none !important; } .tahak { background: none; padding: 0; } }

/* ---- odkud dojíždíte ---- */
.label-pozn { font-weight: 400; color: var(--sedy); font-size: .88rem; }
.odkud-rada { display: flex; gap: .5rem; }
.odkud-rada input { flex: 1; min-width: 0; }
.odkud-rada .tl { white-space: nowrap; }
.odkud-vybrano { margin-top: .6rem; display: grid; gap: .6rem; }
.odkud-vybrano[hidden] { display: none; }
.odkud-vybrano p { margin: 0; color: var(--sedy); font-size: .92rem; }
.razeni { font-size: .95rem; }
.km { display: inline-block; font-weight: 700; color: var(--petrol); background: var(--petrol-svetla); border-radius: 999px; padding: 0 .5rem; font-size: .85rem; }
.pole .volba label { display: inline-flex; font-weight: 400; margin: 0; }



/* ==== Vzhled 2026 (navrženo s Codexem): klidnější hierarchie, méně rámečků, kompaktní mobil ==== */
/* rámečky 1 px, karty 12 px, ovládání 8 px */
.karta, .rozbal, .pilulka, .zajima, .tl, .do-kal, .cip { border-width: 1px; }
.tl, .do-kal, .ps-prep-b { border-radius: var(--r-ovl); }
.pole input:not([type="radio"]):not([type="checkbox"]) { min-height: 48px; }
.vysledky-hl { border-bottom-width: 1px; }
.karta-detail .obory-l > li + li { border-top-width: 1px; }
/* hledání: bez výchozích okrajů odstavců, menší mezery; dva vstupy jako kompaktní navigační řádky */
.hledani { gap: .75rem; grid-template-columns: minmax(0, 1fr); }  /* nowrap souhrny nesmí roztáhnout sloupec */
.objevit { margin: 0; }
.objevit .btn-text, .objevit .data-odkaz {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-height: 48px;
  padding: .55rem .9rem; border: 1px solid var(--cara); border-radius: var(--r-ovl); background: var(--bila);
  color: var(--petrol-2); font-weight: 600; text-decoration: none; text-align: left; font-size: .97rem; }
.objevit .btn-text::after, .objevit .data-odkaz::after { content: "›"; font-size: 1.3rem; line-height: 1; color: var(--sedy); }
.objevit .btn-text:hover, .objevit .data-odkaz:hover { border-color: var(--petrol-2); background: var(--petrol-svetla); }
/* rozbalovací souhrny: na jednom řádku, dlouhý popis se zkrátí */
.rozbal summary { flex-wrap: nowrap; align-items: center; min-height: 48px; min-width: 0; }
.rozbal-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rozbal-h { flex: none; }
/* spodní lišta „Uloženo“ je zbytečná — „Můj výběr“ je v hlavní navigaci */
.lista { display: none !important; }
body.ma-listu .nahoru { bottom: 16px; }
/* detail: navigace po částech v jednom posuvném řádku, ne ve třech */
.detail-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.detail-nav::-webkit-scrollbar { display: none; }
.detail-nav > * { flex: none; }
@media (min-width: 1100px) { #detail { margin-left: auto; margin-right: auto; } }
@media (max-width: 560px) {
  /* detail přes celou šířku telefonu, bez vnořeného rámečku */
  .karta-detail { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; padding: 1rem 16px; }
  .hledani { margin-top: 1rem; }
  .vysledky { margin-top: 1.6rem; }
  body.ma-listu .nahoru { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---- Pro školy a kraj (#kraj): vize kraje ---- */
.vk-souhrn { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .6rem 0 .6rem; }
.vk-chip { font-size: .9rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--cara); background: var(--bila); }
.vk-chip strong { font-size: 1.05rem; }
.vk-pill { flex: none; font-size: .78rem; font-weight: 700; padding: .18rem .6rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.vk-rozpor { background: var(--cervena-svetla); color: var(--cervena); border-color: var(--cervena); }
.vk-zmena { background: var(--slunce-svetle); color: var(--varovani); border-color: var(--varovani); }
.vk-stav { background: var(--petrol-svetla); color: var(--petrol-2); border-color: var(--petrol-2); }
.vk-bez { background: var(--bila); color: var(--petrol-2); border-color: var(--petrol-2); }
.vk-sled, .vk-chybi { background: var(--plocha); color: var(--sedy); border-color: var(--cara-silna); }
.vk-obdobi { font-size: .9rem; background: var(--plocha); border-radius: var(--r); padding: .5rem .7rem; margin: .5rem 0 .8rem; }
.vk-prehled .data-tab td { vertical-align: top; }
.vk-prehled .data-tab td:last-child { white-space: nowrap; }
.vk-sk th { text-align: left; background: var(--plocha); font-size: .85rem; padding-top: .5rem; }
.vk-legenda { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem .6rem; align-items: start; font-size: .85rem; margin: .7rem 0 1.2rem; }
.vk-legenda dt { margin: 0; }
.vk-legenda dd { margin: 0; color: var(--sedy); }
.vk-skupina { margin-top: 1.6rem; }
.vk-cil:focus { outline: 2px solid var(--petrol-2); outline-offset: 2px; }
.vk-zjisteni { margin: .35rem 0 .4rem; font-weight: 600; }
.vk-omezeni { margin: .5rem 0; padding: .45rem .7rem; background: var(--plocha); border-radius: var(--r); font-size: .85rem; }
.vk-omezeni-h, .vk-cit-h { margin: 0 0 .15rem; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sedy); }
.vk-omezeni ul { margin: 0; padding-left: 1.1rem; }
.vk-omezeni li { margin: .1rem 0; }
.vk-opatreni td { vertical-align: top; font-size: .88rem; }
.vk-prij { margin: .5rem 0; }
.vk-usn ul { margin: .3rem 0 .5rem; padding-left: 1.1rem; font-size: .85rem; }
.vk-usn li { margin: .35rem 0; }
.vk-usn-cit { display: block; color: var(--sedy); margin-top: .15rem; }
.vk-prij caption { text-align: left; font-size: .82rem; font-weight: 600; padding: .35rem .6rem; color: var(--sedy); }
.vk-prij th[scope="col"], .vk-prij td { font-size: .85rem; }
.vk-cile { list-style: none; padding: 0; margin: .8rem 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.vk-cil { min-width: 0; overflow-wrap: anywhere; }
.vk-cil { background: var(--bila); border: 1px solid var(--cara); border-radius: var(--r); padding: .8rem .9rem; }
.vk-hl { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.vk-nazev { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.vk-cit { margin: .5rem 0 .6rem; padding: .1rem 0 .1rem .7rem; border-left: 3px solid var(--cara-silna); color: var(--sedy); font-size: .88rem; }
.vk-cit p { margin: 0 0 .15rem; }
.vk-str { font-size: .8rem; }
.vk-pm { display: grid; grid-template-columns: 3.6rem 1fr 1fr 3.6rem; align-items: center; gap: .3rem; margin: .3rem 0 0; }
.vk-pm-l, .vk-pm-r { display: flex; height: 14px; background: var(--plocha); }
.vk-pm-l { justify-content: flex-end; border-right: 2px solid var(--g-cara); border-radius: 4px 0 0 4px; }
.vk-pm-r { border-radius: 0 4px 4px 0; }
.vk-pm-b { display: block; height: 100%; }
.vk-pm-minus { background: var(--g-sede2); border-radius: 4px 0 0 4px; }
.vk-pm-plus { background: var(--g-bod); border-radius: 0 4px 4px 0; }
.vk-pm-n { font-size: .85rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.vk-pm-nl { text-align: right; }
.vk-pm-pop { margin: .1rem 0 .3rem; font-size: .78rem; color: var(--sedy); text-align: center; }
.vk-postup { height: 14px; background: var(--plocha); border-radius: 4px; overflow: hidden; margin: .3rem 0 0; }
.vk-postup-b { display: block; height: 100%; background: var(--g-bod); }
.vk-velke { font-size: 1.35rem; font-weight: 700; margin: .1rem 0 .2rem; font-variant-numeric: tabular-nums; }
.vk-rady { display: flex; align-items: flex-end; gap: .5rem; height: 6.2rem; margin: 0 0 .4rem; }
.vk-rad { flex: 1; max-width: 4rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: .75rem; }
.vk-rad-b { display: block; width: 100%; background: var(--g-bod); border-radius: 3px 3px 0 0; }
.vk-rad-n { font-variant-numeric: tabular-nums; }
.vk-rad-r { color: var(--sedy); }
.vk-fakta { margin: .3rem 0 .3rem; padding-left: 1.1rem; font-size: .9rem; }
.vk-fakta li { margin: .15rem 0; }
.vk-zmeny summary { cursor: pointer; font-size: .88rem; color: var(--petrol-2); padding: .3rem 0; }
.vk-zmeny .data-tab-obal { margin: .3rem 0 .4rem; }
.vk-cil .zdroj { margin: .3rem 0 0; font-size: .8rem; color: var(--sedy); }
@media (max-width: 520px) {
  .vk-hl { flex-direction: column; gap: .3rem; }
  .vk-legenda { grid-template-columns: minmax(0, 1fr); }
  .vk-legenda dd { margin-bottom: .3rem; }
  .vk-prehled .data-tab td:last-child { white-space: normal; }
  .vk-pm { grid-template-columns: 3rem 1fr 1fr 3rem; }
}
.ps-cast li { margin: .3rem 0; font-size: .9rem; }
@media (min-width: 561px) { .ps-l .ob-r { grid-template-columns: 19rem 1fr 4.6rem; } .ps-l .ob-n { white-space: nowrap; } }
.ps-l .g-hodnota { white-space: nowrap; }
@media (max-width: 560px) { .ps-l .ob-r { grid-template-columns: 1fr 4.4rem; } }
.ps-r-cast { row-gap: 0; }
.ps-l .ps-sk { grid-column: 1 / -1; margin-top: -.3rem; padding-bottom: .3rem; font-size: .78rem; line-height: 1.3; color: var(--g-sede2, #777); }
@media (max-width: 560px) { .ps-r-cast .ps-sk { order: 1; margin-top: 0; padding-bottom: 0; } .ps-r-cast .g-stopa, .ps-r-cast .g-hodnota { order: 2; } }
.g-leg-p { display: inline-flex; align-items: center; }
.ps-sk-m { font-size: .8rem; color: var(--g-sede2, #777); }