/* The Voice of Events — Event Intelligence
   Vizuální jazyk sdílený s it-solution.cz (paleta, typografie, žádný build),
   ale vlastní rozvržení: hero je živá ukázka převodu věty na záznam.

   Dvě akcentní barvy tu nesou význam:
     limetková  = údaj zazněl přímo ve větě
     tyrkysová  = údaj dopočítal systém
*/

/* ---------- fonty (self-hosted, variabilní řezy) ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/spacegrotesk-latin.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:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/spacegrotesk-latin-ext.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:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/inter-latin.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:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/inter-latin-ext.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:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/JetBrainsMono-latin.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:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/JetBrainsMono-latin-ext.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}

/* ---------- tokeny ---------- */
:root{
  --bg:#07110B;
  --bg-2:#0B1410;
  --card:#0E1A14;
  --card-2:#122019;
  --line:#1E3227;
  --line-soft:#182A20;
  --text:#F3F7F2;
  --muted:#A9BCB0;
  --muted-2:#7E9488;
  --acc:#B7F34A;          /* řečeno ve větě */
  --acc-ink:#07110B;
  --flow:#4FD8C4;         /* dopočítáno systémem */
  --warn:#F2B544;
  --r:14px;
  --head:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 1rem/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-wrap:break-word;
}

h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.1;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.2rem,5.4vw,3.7rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0}
a{color:var(--acc);text-underline-offset:3px}
img{max-width:100%;height:auto}

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-radius:6px;
}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--acc);color:var(--acc-ink);padding:.6rem 1rem;border-radius:8px}
.lead{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--muted);max-width:56ch}

/* ---------- kulisa ---------- */
/* Padající útržky hlášení. Stejná mechanika jako matrix na it-solution.cz,
   ale místo náhodných znaků skutečná slova — kulisa tím říká, co sem teče. */
#kulisa{
  position:fixed;inset:0;z-index:-1;width:100%;height:100%;
  background:
    radial-gradient(1000px 600px at 78% -8%, #0E2318 0%, transparent 62%),
    radial-gradient(760px 520px at 6% 34%, #0A1A13 0%, transparent 58%),
    var(--bg);
}

/* ---------- hlavička ---------- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(7,17,11,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft)}
.site-head__in{display:flex;align-items:center;gap:1.5rem;min-height:64px}
.brand{font-family:var(--head);font-weight:700;font-size:1.06rem;color:var(--text);text-decoration:none;
  letter-spacing:-.02em;white-space:nowrap}
.brand b{color:var(--acc)}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem;font-size:.93rem;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.nav .lang{font-size:.82rem;color:var(--muted-2);border:1px solid var(--line);border-radius:6px;padding:.18rem .45rem}

/* Na úzkém displeji se navigace nevejde vedle loga: zalomila se do tří řádků
   a logo zůstalo viset uprostřed nich. Proto pod 760 px logo na vlastní řádek
   a navigace pod ním na jednom řádku, který se dá posunout prstem. */
@media (max-width:760px){
  .site-head__in{flex-wrap:wrap;gap:.15rem 1rem;padding-block:.55rem;min-height:0}
  .brand{flex:1 0 100%;font-size:1rem}
  .nav{
    margin-left:0;width:100%;flex-wrap:nowrap;gap:1.15rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Poslední položka nesmí končit přesně na hraně, ať je vidět, že jde posunout. */
    padding-bottom:.15rem;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 .95rem/1 var(--body);padding:.85rem 1.35rem;border-radius:10px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;transition:filter .15s,background .15s}
.btn--primary{background:var(--acc);color:var(--acc-ink)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:var(--card-2)}
.btn--sm{padding:.55rem .9rem;font-size:.88rem}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr}}

.hero h1{margin-bottom:.9rem}
.hero__form{margin-top:1.6rem}

/* Karta kolem formuláře. Výklad se přesunul pod hero právě proto, aby vstupní
   pole nebylo zalité textem – karta ten důraz drží i po doskrolování. */
.hero__box{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.1rem,2.5vw,1.5rem);
  box-shadow:0 0 0 1px rgba(183,243,74,.09), 0 20px 44px -28px rgba(0,0,0,.9);
  transition:box-shadow .18s,border-color .18s;
}
/* Limetkový pruh na horní hraně – jediná dekorace, která říká „sem se píše". */
.hero__box::before{
  content:"";position:absolute;left:clamp(1.1rem,2.5vw,1.5rem);right:clamp(1.1rem,2.5vw,1.5rem);
  top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--flow));
}
.hero__box:focus-within{
  border-color:rgba(183,243,74,.45);
  box-shadow:0 0 0 1px rgba(183,243,74,.22), 0 20px 44px -26px rgba(0,0,0,.9);
}
.hero__box-h{font:600 1.02rem/1.3 var(--head);margin:0 0 .85rem;letter-spacing:-.01em}
/* Uvnitř karty je pole o stupeň světlejší, ať se z pozadí vyloupne. */
.hero__box .say__mirror{background:var(--card-2)}
.hero__box .say{min-height:10.5rem;font-size:1.1rem}
.hero__box .btn--primary{padding:.95rem 1.7rem;font-size:1rem}

/* Výklad pod hero. Vlastní pás, ne .sec – nemá nadpis a nepotřebuje linku nahoře. */
.intro{padding:0 0 clamp(1.5rem,4vw,2.5rem)}
.intro__in{max-width:62ch;display:grid;gap:.9rem}
.hero__field{position:relative}

/* Vstup a zvýrazněná vrstva leží přesně na sobě: uživatel píše do průhledného
   textarea, podbarvení kreslí <div> pod ním. Proto musí mít obojí identickou
   typografii i padding — jinak se zvýraznění rozjede vůči textu. */
.say{
  --say-pad:1.1rem;
  font:400 1.06rem/1.6 var(--body);
  letter-spacing:0;
  padding:var(--say-pad);
  border-radius:var(--r);
  border:1px solid var(--line);
  min-height:9.5rem;
  width:100%;
}
.say__mirror{
  position:absolute;inset:0;background:var(--card);color:transparent;
  white-space:pre-wrap;word-wrap:break-word;overflow:hidden;pointer-events:none;
}
.say__input{
  position:relative;background:transparent;color:var(--text);resize:vertical;
  display:block;font-family:inherit;
}
.say__input::placeholder{color:var(--muted-2)}
.say__input:focus{outline:none;border-color:var(--acc)}
.say__field:focus-within .say__mirror{border-color:var(--acc)}

/* Podbarvení fragmentů ve větě. Ne rámeček, ale podtržení — text zůstane čitelný. */
mark.said{background:transparent;color:transparent;
  box-shadow:inset 0 -.42em 0 rgba(183,243,74,.22);border-radius:3px}
mark.said--flow{box-shadow:inset 0 -.42em 0 rgba(79,216,196,.22)}

.hero__actions{display:flex;align-items:center;gap:.9rem;margin-top:1rem;flex-wrap:wrap}
.hero__hint{color:var(--muted-2);font-size:.87rem}
.hero__extra{margin-top:1rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero__f{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:11rem}
.hero__f label{font-size:.8rem;color:var(--muted-2)}
.hero__f input,.hero__f select{
  background:var(--card);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .9rem;font:400 .95rem var(--body);width:100%}
.hero__f input:focus,.hero__f select:focus{outline:none;border-color:var(--acc)}
.hero__why{color:var(--muted-2);font-size:.95rem;line-height:1.6;max-width:54ch;margin-top:.75rem}
.hero__note{display:block;color:var(--muted-2);font-size:.8rem;line-height:1.45;margin-top:.5rem}

/* Souhrn kapacity – jediné číslo, ať nevypadá jako dashboard. */
.capacity{margin:1.2rem 0 0;padding:.9rem 1.1rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);display:flex;
  align-items:baseline;gap:.7rem;flex-wrap:wrap}
.capacity b{font:700 1.35rem/1 var(--head);color:var(--acc);font-variant-numeric:tabular-nums}
.capacity span{color:var(--muted)}
.capacity small{color:var(--muted-2);font-size:.82rem}
.hp{position:absolute;left:-9999px}

/* ---------- záznam ---------- */
.rec{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.2rem,2.5vw,1.7rem);
  position:relative;min-height:15rem;
}
.rec[data-state="idle"]{border-style:dashed;border-color:var(--line-soft)}
.rec__empty{color:var(--muted-2);font-size:.95rem;max-width:34ch}
.rec__name{font-family:var(--head);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  line-height:1.2;margin-bottom:.15rem}
.rec__type{color:var(--muted);font-size:.9rem;margin-bottom:1.3rem}

.rec__rows{display:grid;gap:.85rem}
.rec__row{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:.9rem;align-items:baseline}
.rec__k{color:var(--muted-2);font-size:.83rem}
.rec__v{font-variant-numeric:tabular-nums}
.rec__v--said{color:var(--acc)}
.rec__v--flow{color:var(--flow)}
.rec__v--none{color:var(--muted-2)}

.rec__legend{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1rem;
  border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted-2)}
.rec__legend i{font-style:normal;display:inline-flex;align-items:center;gap:.4rem}
.rec__legend i::before{content:"";width:.7rem;height:.18rem;border-radius:2px;background:currentColor}
.rec__legend .is-said{color:var(--acc)}
.rec__legend .is-flow{color:var(--flow)}

.rec__ask{margin-top:1.2rem;padding:.85rem 1rem;background:var(--card-2);
  border:1px solid var(--line);border-radius:10px;font-size:.92rem;color:var(--muted)}
.rec__actions{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.rec__err{color:var(--warn);font-size:.93rem}

/* ---------- sekce ---------- */
.sec{padding:clamp(2.6rem,6vw,4.5rem) 0;border-top:1px solid var(--line-soft)}
.sec__head{max-width:52ch;margin-bottom:2rem}
.sec__head h2{margin-bottom:.7rem}

/* Jedna akce, čtyři pohledy. Záměrně ne čtyři stejné karty: uprostřed je jeden
   záznam a kolem výřezy, které si z něj různí lidé berou. */
.views{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.view{background:var(--card);padding:1.3rem}
.view h3{margin-bottom:.5rem}
.view p{color:var(--muted);font-size:.92rem}
.view__link{display:inline-block;margin-top:.7rem;font-size:.88rem;color:var(--acc)}
.view__take{display:block;margin-top:.8rem;font:500 .82rem/1.4 var(--mono);color:var(--flow)}

/* ---------- výpis akcí ---------- */
.feed{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden}
.ev{display:grid;grid-template-columns:9rem minmax(0,1fr) auto;gap:1.2rem;align-items:center;
  background:var(--card);padding:1rem 1.2rem;text-decoration:none;color:inherit}
.ev:hover{background:var(--card-2)}
/* Datum s časem se nesmí lámat – „so 17. 10. 19:00" je jeden údaj. */
.ev__when{font:500 .85rem/1.4 var(--mono);color:var(--flow);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ev__name{font-weight:600}
.ev__where{color:var(--muted);font-size:.9rem}
.ev__type{color:var(--muted-2);font-size:.8rem;white-space:nowrap}
@media (max-width:620px){
  .ev{grid-template-columns:1fr;gap:.35rem}
  .ev__type{display:none}
}
.feed__empty{background:var(--card);padding:2rem 1.2rem;color:var(--muted-2)}

/* ---------- hledání podle města ---------- */
.search{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.2rem}
.search__f{display:flex;flex-direction:column;gap:.3rem}
.search__f label{font-size:.8rem;color:var(--muted-2)}
.search__f input,.search__f select{
  background:var(--card);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .9rem;font:400 .95rem var(--body);min-width:12rem}
.search__f--r select{min-width:10rem}
.search__f input:focus,.search__f select:focus{outline:none;border-color:var(--acc)}
.search__clear{font-size:.87rem;color:var(--muted);padding-bottom:.85rem}
.search__note{color:var(--muted);font-size:.92rem;margin-bottom:1.2rem}
.search__warn{color:var(--warn)}
@media (max-width:560px){
  .search{gap:.6rem}
  .search__f,.search__f input,.search__f select{width:100%;min-width:0}
  .search .btn{width:100%}
}

.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filters a{font:500 .87rem/1 var(--body);color:var(--muted);text-decoration:none;
  padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px}
.filters a:hover{color:var(--text)}
.filters a[aria-current="page"]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}

/* ---------- návrh zdroje pro město ---------- */
.srcbox{margin-top:3rem;padding:1.6rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r)}
.srcbox h2{font-size:1.25rem;margin-bottom:.5rem}
.srcbox .lead{margin-bottom:1.3rem;font-size:.98rem}
.srcbox__row{display:flex;gap:.8rem;flex-wrap:wrap}
.srcbox__f{display:flex;flex-direction:column;gap:.3rem;min-width:12rem}
.srcbox__f--wide{flex:1;min-width:18rem}
.srcbox__f label{font-size:.8rem;color:var(--muted-2)}
.srcbox__f input{background:var(--card-2);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .9rem;font:400 .95rem var(--body);width:100%}
.srcbox__f input:focus{outline:none;border-color:var(--acc)}
.srcbox__actions{display:flex;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.srcbox__msg{font-size:.92rem;color:var(--acc)}
.srcbox__msg--err{color:var(--warn)}
@media (max-width:560px){.srcbox__f,.srcbox__f--wide{min-width:100%}.srcbox .btn{width:100%}}

/* ---------- okna poptávky ---------- */
.windows{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;margin-top:1.5rem}
.win{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1.2rem;
  background:var(--card);padding:1.2rem 1.3rem}
.win__time{font:600 1rem/1.4 var(--mono);color:var(--flow);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.win__level{font-weight:600;margin-bottom:.35rem}
.win__people{color:var(--muted-2);font-weight:400;margin-left:.4rem;font-size:.9rem}
.win__reason{color:var(--muted);font-size:.94rem;margin-bottom:.6rem}
.win__list{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;
  font-size:.9rem;color:var(--muted)}
/* Odlišit změřené od odhadnutého: bez toho čísla vypadají jistěji, než jsou. */
.win__src{color:var(--muted-2);font-size:.78rem;font-style:italic}
.win--high .win__time{color:var(--acc)}
.win--high .win__level{color:var(--acc)}
.win--medium .win__level{color:var(--flow)}
.win--low .win__time{color:var(--muted-2)}
.win__warn{color:var(--muted-2);font-size:.9rem;margin-top:1rem;max-width:70ch}
@media (max-width:620px){.win{grid-template-columns:1fr;gap:.4rem}}

.fb{margin-top:2.5rem;padding:1.5rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r)}
.fb h2{font-size:1.2rem;margin-bottom:.4rem}
.fb .lead{margin-bottom:1.2rem;font-size:.95rem}
.fb__row{display:flex;gap:.8rem;flex-wrap:wrap}
.fb__actions{display:flex;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
@media (max-width:560px){.fb__row .search__f{width:100%}.fb .btn{width:100%}}

.how{margin-top:2.5rem;color:var(--muted);font-size:.93rem}
.how summary{cursor:pointer;color:var(--muted-2);margin-bottom:.8rem}
.how p{max-width:72ch;margin-bottom:.8rem}

/* ---------- pruh přihlášeného řidiče ---------- */
.me{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.1rem;margin-bottom:1.2rem}
.me__sub{color:var(--muted-2);font-size:.88rem;margin-left:.5rem}
.me__form{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.me__form select,.me__form input{background:var(--card-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:.35rem .5rem;font:400 .88rem var(--body);
  margin-left:.35rem}
@media (max-width:620px){.me,.me__form{width:100%}}

/* Poměr přihlášených vozů k potřebným. Zelená až když je pokryto. */
.win__taxi{margin-left:.6rem;font:500 .82rem/1 var(--mono);color:var(--warn);
  border:1px solid var(--warn);border-radius:999px;padding:.2rem .5rem}
.win__taxi--ok{color:var(--acc);border-color:var(--acc)}
.ev-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.ev-row .btn{flex-shrink:0}
@media (max-width:620px){.ev-row{flex-direction:column;gap:.4rem}}

/* ---------- detail akce ---------- */
.detail{padding:clamp(2rem,5vw,3.5rem) 0}
.detail h1{margin-bottom:.6rem}
.detail__meta{color:var(--muted);margin-bottom:2rem}
.detail__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2.5rem;align-items:start}
@media (max-width:820px){.detail__grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.panel h3{margin-bottom:.9rem}
.panel + .panel{margin-top:1rem}
.panel--soon{border-style:dashed;color:var(--muted-2)}
.detail__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

/* ---------- patička ---------- */
.site-foot{border-top:1px solid var(--line-soft);padding:2.5rem 0;color:var(--muted-2);font-size:.88rem}
.site-foot__in{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.site-foot a{color:var(--muted)}
.site-foot__sib{margin-left:auto;display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---------- stav načítání ---------- */
.dots::after{content:"";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.dots::after{content:"…";animation:none}}

/* ---------- jak to funguje ---------- */
/* Číslování tu nese informaci: kroky jdou opravdu po sobě. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.step{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1.2rem;
  background:var(--card);padding:1.5rem 1.4rem}
.step__n{font:700 1.4rem/1 var(--head);color:var(--acc);font-variant-numeric:tabular-nums}
.step__h{font-size:1.15rem;margin-bottom:.4rem}
.step__p{color:var(--muted);max-width:62ch}
@media (max-width:560px){
  .step{grid-template-columns:1fr;gap:.5rem}
}

/* ---------- přepínač seznam / mapa ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.5rem}
.views-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  padding:3px;background:var(--card);flex-shrink:0}
.views-switch a{text-decoration:none;color:var(--muted);font:500 .88rem/1 var(--body);
  padding:.5rem .95rem;border-radius:999px}
.views-switch a:hover{color:var(--text)}
.views-switch a[aria-current="page"]{background:var(--acc);color:var(--acc-ink)}

/* ---------- rozcestník měst ---------- */
.cities{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.cities__label{color:var(--muted-2);font-size:.85rem;margin-right:.3rem}
.cities a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.88rem;color:var(--muted);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:.35rem .75rem}
.cities a:hover{color:var(--text);border-color:var(--muted-2)}
.cities a b{color:var(--flow);font-weight:600;font-variant-numeric:tabular-nums}
.cities a[aria-current="page"]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.cities a[aria-current="page"] b{color:var(--acc-ink)}

/* ---------- mapa ---------- */
.mapbox{height:min(72vh,620px);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card)}
/* Leaflet má vlastní světlé ovládání; sladit ho s tmavým webem. */
.leaflet-container{background:var(--card);font:400 .92rem/1.5 var(--body)}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--card);color:var(--text);
  border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--card-2)}
/* Světlé dlaždice proti tmavému webu řežou do očí. Jemné ztlumení stačí,
   silnější filtr by mapu udělal nečitelnou — a čitelnost je tu přednější. */
.leaflet-tile{filter:saturate(.82) brightness(.93)}
.leaflet-control-attribution{background:rgba(7,17,11,.9)!important;color:var(--muted)}
.leaflet-control-attribution a{color:var(--acc)}
.pin .leaflet-popup-content-wrapper{background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pin .leaflet-popup-tip{background:var(--card);border:1px solid var(--line)}
.pin .leaflet-popup-content{margin:.9rem 1rem;display:grid;gap:.15rem}
.pin__name{font-weight:600;color:var(--text);text-decoration:none;font-size:1rem}
.pin__name:hover{color:var(--acc)}
.pin__when{color:var(--flow);font-variant-numeric:tabular-nums}
.pin__where{color:var(--muted)}
.pin__type{color:var(--muted-2);font-size:.85rem;margin-top:.2rem}

/* Shluky v barvách webu; výchozí styl pluginu je světle modrý. */
.marker-cluster{background:rgba(183,243,74,.25)}
.marker-cluster div{background:var(--acc);color:var(--acc-ink);font:600 .82rem/30px var(--body)}