/* =====================================================================
   DIGITÁLNÍ NÁMĚSTÍ VIMPERK — ŠUMAVA GLASS vrstva
   Zdroj designu: claude.ai/design → projekt „Design System" (Šumava Glass
   SPATIAL v2 / LIQUID GLASS v4). Tenhle soubor se načítá PO dn.css a
   povyšuje existující strukturu na liquid-glass estetiku ekosystému.
   ===================================================================== */

/* ---------- tokeny (výřez z tokens.css design systému) ---------- */
:root{
  --les:#17462F; --zlato:#c9a84c;
  --zivot:#3ddc78; --acc-rgb:61,220,120; --pin-ink:#cef59c; --pin-g1:184,242,116; --pin-g2:92,161,28;
  --pin-sh1:80,150,25; --pin-sh2:159,231,74; --pin-stroke:#0d2b06; --zivot-2:#13d6b0;
  --noc:#070b12; --noc-hluboka:#04060b;
  --grad-zivot:linear-gradient(135deg,var(--zivot),#13d6b0);
  --grad-prestige:linear-gradient(120deg,var(--zivot) 0%,var(--acc2) 40%,#c9a84c 100%);
  --grad-stroke:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 30%,rgba(255,255,255,0));
  --aurora-1:radial-gradient(42% 52% at 14% 8%,rgba(var(--acc-rgb),.40),transparent 62%);
  --aurora-2:radial-gradient(48% 58% at 88% 4%,rgba(19,214,176,.32),transparent 64%);
  --aurora-3:radial-gradient(60% 72% at 62% 98%,rgba(201,168,76,.20),transparent 62%);
  --depth-2:0 12px 38px rgba(0,0,0,.45);
  --depth-3:0 28px 80px rgba(0,0,0,.6);
  --glow-zivot:0 0 0 1px rgba(var(--acc-rgb),.35),0 10px 44px rgba(var(--acc-rgb),.4);
  --glow-soft:0 0 50px rgba(var(--acc-rgb),.22);
  --font-display:'Playfair Display','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
  --tracking-mono:.22em;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --lg-fill:rgba(255,255,255,.075);
  --lg-fill-2:rgba(255,255,255,.13);
  --lg-stroke:rgba(255,255,255,.17);
  --lg-blur:36px; --lg-sat:190%;
  --lg-spec:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 48%);
  --lg-shadow:0 22px 64px rgba(0,0,0,.5);
  --lg-inset:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.15);
  --r-glass:26px; --r-tile:20px;
  /* přemapování původních tokenů stránky na DS */
  --bg:var(--noc); --bg2:#0a1018; --card:rgba(255,255,255,.06); --card2:rgba(255,255,255,.09);
  --ink:#eaf2fb; --ink-2:rgba(233,240,251,.66); --ink-3:rgba(233,240,251,.42);
  --line:var(--lg-stroke); --line-strong:rgba(255,255,255,.3);
  --acc:var(--zivot); --acc-dim:rgba(var(--acc-rgb),.14); --acc2:#bff77e;
}

/* ---------- plocha + aurora ---------- */
body{
  background:var(--noc);
  background-image:none;
}
body::before{
  content:"";position:fixed;inset:-15%;z-index:-2;pointer-events:none;
  background:var(--aurora-1),var(--aurora-2),var(--aurora-3);
  filter:blur(10px);
  animation:dnDrift 26s var(--ease) infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(70% 50% at 50% 0%,rgba(19,214,176,.12),transparent 65%);
}
@keyframes dnDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-2%,0) scale(1.07)}
  100%{transform:translate3d(-2%,2%,0) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}

/* ---------- typografie ---------- */
.masthead h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1}
.masthead h1 em{font-style:normal;background:var(--grad-prestige);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head h2,.sheet h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.012em}
.kicker{font-family:var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;font-size:.7rem}
.kicker strong{color:var(--zivot)}
.stamp,.legal,.method-note,.form-note{font-family:var(--font-mono);letter-spacing:.06em}

/* ---------- sklo: karty, dlaždice, panely ---------- */
.card,.tile,.stat,.poll-main,.poll-kind,.gauge,.alertbar,.sheet,.timeline,.statement,.field input,.field textarea,.field select{
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.card,.tile,.stat,.poll-main,.poll-kind,.gauge,.statement{
  position:relative;background:var(--lg-fill);border:1px solid var(--lg-stroke);
  border-radius:var(--r-glass);box-shadow:var(--lg-shadow),var(--lg-inset);
  transition:transform .4s var(--ease-out),border-color .35s,box-shadow .35s;
}
/* lesklý horní okraj (specular) */
.card::before,.tile::before,.stat::before,.poll-main::before,.gauge::before{
  content:"";position:absolute;inset:0;height:60%;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--lg-spec);opacity:.4;mix-blend-mode:screen;
}

/* karty rostou podle obsahu, ne do jednotné výšky řádku */
.now-grid,.cards,.tiles{align-items:start}
/* diagonální refrakční lesk — jen náznak, ať nepřebije obsah */
.card::after,.tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(118deg,transparent 44%,rgba(255,255,255,.05) 49%,transparent 56%);
}
.card > *,.tile > *,.stat > *,.poll-main > *,.gauge > *{position:relative;z-index:1}

a.tile:hover,.tile:hover,a.card:hover,.card:hover{
  transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.45);
  box-shadow:var(--depth-3),var(--glow-soft);
}
.tile{border-radius:var(--r-tile)}

/* ---------- tlačítka ---------- */
.cta,.btn{position:relative;overflow:hidden}
.cta{
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.26),rgba(19,214,176,.15));
  color:#eafff3;border:1px solid rgba(var(--acc-rgb),.5);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(180%);
  backdrop-filter:blur(var(--lg-blur)) saturate(180%);
  box-shadow:0 10px 34px rgba(var(--acc-rgb),.2),var(--lg-inset);
  font-weight:800;letter-spacing:-.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.38),rgba(19,214,176,.24));
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.6),0 16px 52px rgba(var(--acc-rgb),.4),var(--lg-inset);
}
.cta::before,.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.05) 30%,transparent 55%);
  opacity:.7;mix-blend-mode:screen;
}
.cta > *,.btn > *{position:relative;z-index:1}
.btn{
  background:var(--lg-fill);border:1px solid var(--lg-stroke);color:var(--ink);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(180%);
  backdrop-filter:blur(var(--lg-blur)) saturate(180%);
  box-shadow:var(--lg-inset);
}
.btn:hover{border-color:rgba(var(--acc-rgb),.6);color:#fff}

/* ---------- rychlá navigace (glass pill) ---------- */
.quicknav{gap:6px}
.chip,.quicknav a{
  background:var(--lg-fill);border:1px solid var(--lg-stroke);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:var(--lg-inset);transition:color .25s,border-color .25s,background .25s;
}
.chip[aria-pressed="true"],.chip.is-on,.quicknav a.is-active{
  background:var(--grad-zivot);color:#04150c;border-color:transparent;font-weight:700;
}

/* ---------- upozorňovací pruh ---------- */
.alertbar{
  background:var(--lg-fill);border:1px solid var(--lg-stroke);border-radius:var(--r-tile);
  box-shadow:var(--lg-inset);
}

/* ---------- štítky původu (ŽIVĚ / OVĚŘENO / DEMO) ---------- */
.badge{
  font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;font-size:.6rem;font-weight:700;
}
.badge[data-kind="zive"],.badge.zive{
  background:rgba(var(--acc-rgb),.14);border:1px solid rgba(var(--acc-rgb),.45);color:var(--zivot);
}
.badge[data-kind="overeno"],.badge.overeno{
  background:rgba(201,168,76,.14);border:1px solid rgba(201,168,76,.45);color:#e5c76e;
}
.badge[data-kind="demo"],.badge.demo{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:rgba(233,240,251,.7);
}

/* ---------- „ŽIVĚ" tep ---------- */
.badge[data-kind="zive"]::before,.badge.zive::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--zivot);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6);animation:dnPulse 1.9s infinite;margin-right:2px;
}
@keyframes dnPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.55)}
  70%{box-shadow:0 0 0 7px rgba(var(--acc-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}
}

/* ---------- počasí / velká čísla ---------- */
.weather-big{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
/* gradient jen na velká samostatná čísla — NIKDY na celý řádek textu */
.stat .v{
  font-family:var(--font-display);font-weight:800;
  background:var(--grad-prestige);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.proj-money{color:var(--ink-2)}
.proj-money b,.proj-money strong{color:var(--zivot)}

/* ---------- kamera ---------- */
.camimg{border-radius:var(--r-tile);border:1px solid var(--lg-stroke);box-shadow:var(--depth-2)}

/* ---------- ukazatele (rozpočet, anketa) ----------
   POZOR: .bar je grid „název | dráha | procenta" — gradient smí dostat
   JEN výplň (.track i), jinak zmizí text popisku na světlém pozadí. */
.bar .track{background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}
.bar .track i{background:var(--grad-zivot);box-shadow:0 0 12px rgba(var(--acc-rgb),.35)}
.bar .n{color:var(--ink-2)}
.bar .p{color:var(--ink);font-family:var(--font-mono);font-size:.72rem}
.gauge{background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}
.gauge > i{background:var(--grad-zivot)}
.gauge.low > i{background:linear-gradient(135deg,#f5c04e,#ff9d5c)}

/* ---------- formulář ---------- */
.field input,.field textarea,.field select{
  background:rgba(255,255,255,.06);border:1px solid var(--lg-stroke);border-radius:14px;
  color:var(--ink);box-shadow:var(--lg-inset);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(var(--acc-rgb),.6);outline:none;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18);
}

/* ---------- spodní lišta (liquid dock) ---------- */
.dn-nav{
  background:rgba(10,14,20,.72);
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  border-top:1px solid var(--lg-stroke);
  box-shadow:0 -14px 44px rgba(0,0,0,.5);
}
.dn-nav a[aria-current="page"],.dn-nav a.is-active{color:var(--zivot)}

/* ---------- sheet „Více" ---------- */
.sheet{
  background:rgba(10,14,20,.9);
  -webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);
  border:1px solid var(--lg-stroke);box-shadow:var(--depth-3);
}
.scrim{backdrop-filter:blur(4px);background:rgba(3,6,10,.6)}

/* ---------- oddělovač sekcí ---------- */
.section-head{position:relative}
.section-head::after{
  content:"";display:block;height:1px;margin-top:14px;
  background:linear-gradient(90deg,rgba(var(--acc-rgb),.5),rgba(255,255,255,.08) 40%,transparent);
}

/* ---------- nájezd sekcí ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- mobil: sklo je drahé, ubereme blur ---------- */
@media(max-width:640px){
  :root{--lg-blur:20px}
  .card::after,.tile::after{display:none}
}

/* =====================================================================
   TADY A TEĎ — živá předpověď · kamerová smyčka · dvojitá výstraha
   ===================================================================== */

/* ---------- pruh 7denní předpovědi z /pocasi (plná šířka pod kartami) ----------
   ⚠️ embed-predpoved-pro.html se nevykreslí pod ~860 px šířky.
   Nad 900 px jede nativně přes celý pruh; v mezipásmu se renderuje
   v 900 px a zmenší transformem (řídí fitForecast v dn-live.js). */
.fc-strip{grid-column:1/-1}
.fc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fc-head .more{font-size:.85rem;white-space:nowrap}
.fc-frame{
  position:relative;width:100%;height:380px;overflow:hidden;margin:10px 0 2px;
  border-radius:var(--r-tile);border:1px solid var(--lg-stroke);
  box-shadow:var(--lg-inset);background:#0a0e16;
}
.fc-frame iframe{border:0;display:block;transform-origin:0 0}
/* mobilní podoba pruhu: 7 dní po sloupcích (plní dn-app do #fc-days) */
.fc-days{display:none}
@media(max-width:620px){
  .fc-frame{height:340px} /* 20.8.: v2 embed funguje i úzký — mobil už iframe neschovává */
  .fc-days{display:none} /* 20.8.: v2 má vlastní denní chipy */
  .fc-days .wd{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px;border-radius:12px;background:rgba(255,255,255,.045)}
  .fc-days .wd b{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-2);font-weight:600}
  .fc-days .wd:first-child b{color:var(--zivot)}
  .fc-days .wd svg{width:20px;height:20px}
  .fc-days .wd i{font-style:normal;font-weight:700;font-size:.82rem}
  .fc-days .wd u{text-decoration:none;font-size:.68rem;color:var(--ink-3)}
}

/* ---------- kamera jako smyčka (crossfade dvou vrstev) ---------- */
.cam-loop{position:relative;display:block;border-radius:var(--r-tile);overflow:hidden;
  border:1px solid var(--lg-stroke);box-shadow:var(--depth-2);background:#070b12;aspect-ratio:4/3}
.cam-loop .camimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;
  opacity:1;backface-visibility:hidden;will-change:opacity}
.cam-loop .cam-b{opacity:0}          /* jen initial stav před startem smyčky (JS třídu sundá) */
.cam-loop .cam-top{z-index:2;opacity:0}
.cam-loop .cam-top.cam-in{opacity:1;transition:opacity 1.9s linear}
@media(prefers-reduced-motion:reduce){.cam-loop .cam-top.cam-in{transition:opacity .2s linear}}
.cam-scrub{position:absolute;left:10px;right:10px;bottom:10px;height:4px;border-radius:999px;
  background:rgba(255,255,255,.22);overflow:hidden}
.cam-scrub i{display:block;height:100%;width:0;background:var(--grad-zivot);transition:width .3s linear}
.cam-time{position:absolute;left:12px;top:10px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  color:#fff;background:rgba(4,8,12,.55);padding:3px 9px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- výstrahy: dvě dlaždice vedle sebe ---------- */
.alert-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px}
@media(max-width:520px){.alert-split{grid-template-columns:1fr}}
.alert-vis{margin:0;border-radius:var(--r-tile);overflow:hidden;background:rgba(255,255,255,.05);
  border:1px solid var(--lg-stroke);box-shadow:var(--lg-inset)}
.alert-vis figcaption{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 10px 6px}
.alert-vis-body{position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:center;background:#070b12}
.alert-vis-body img,.alert-vis-body svg{width:100%;height:100%;object-fit:contain;display:block}
.alert-vis-wait{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-3)}
.alert-vis .alert-legend{display:flex;gap:5px;flex-wrap:wrap;padding:0 8px 8px}
.alert-vis .alert-legend span{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.06em;
  padding:2px 6px;border-radius:999px;background:rgba(4,8,12,.6);color:#fff}

/* výstrahy — mini přehled + časová osa */
.alert-mini{display:flex;flex-direction:column;gap:6px;padding:10px;width:100%}
.alert-row{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.07)}
.alert-row b{font-size:.82rem;color:#fff}
.alert-row span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.alert-clear{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  padding:14px 10px;border-radius:12px;background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.3);text-align:center}
.alert-clear b{font-size:.86rem;color:var(--zivot)}
.alert-clear span{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-3)}
.alert-tl{display:flex;align-items:flex-end;gap:4px;width:100%;height:100%;padding:14px 10px 8px}
.alert-tl-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;
  opacity:.55;transition:opacity .3s var(--ease)}
.alert-tl-col.on{opacity:1}
.alert-tl-col i{display:block;width:100%;border-radius:5px 5px 2px 2px;transition:filter .3s}
.alert-tl-col.on i{filter:drop-shadow(0 0 10px currentColor)}
.alert-tl-col em{font-family:var(--font-mono);font-size:.5rem;font-style:normal;color:var(--ink-3);letter-spacing:.04em}
.t-tag.ok{background:rgba(201,168,76,.16);border:1px solid rgba(201,168,76,.45);color:#e5c76e}

@media(min-width:900px){
  .now-grid{grid-template-columns:repeat(3,1fr)}
}

/* =====================================================================
   SLADĚNÍ KARET „TADY A TEĎ" + fotopás
   ===================================================================== */
/* počasí a kamera drží stejnou výšku a stejný rytmus */
/* obě média mají STEJNOU pevnou výšku → karty sedí vedle sebe bez prázdna */
:root{--media-h:264px}
@media(max-width:899px){:root{--media-h:200px}}
#card-cam .cam-loop{aspect-ratio:auto;height:var(--media-h)}
/* teplota: dominantní, ale ne přebíjející */
.weather-big .deg{font-size:clamp(1.7rem,2.2vw,2.25rem)!important;line-height:1.05}
.weather-big .txt{font-size:.95rem;color:var(--ink-2)}
.weather-big{align-items:baseline;gap:12px;margin-bottom:2px}

/* fotopás — reálné snímky z fotokroniky sumava.eu */
.photostrip{margin:18px 0 4px}
.photostrip .ps-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.photostrip .ps-rail::-webkit-scrollbar{height:6px}
.photostrip .ps-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.ps-card{position:relative;display:block;scroll-snap-align:start;border-radius:var(--r-tile);overflow:hidden;
  aspect-ratio:4/3;border:1px solid var(--lg-stroke);box-shadow:var(--depth-2);text-decoration:none;
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .35s;background:#070b12}
.ps-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-out)}
.ps-card:hover{transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.45);box-shadow:var(--depth-3),var(--glow-soft)}
.ps-card:hover img{transform:scale(1.06)}
.ps-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:.82rem;
  font-weight:600;line-height:1.3;background:linear-gradient(transparent,rgba(4,8,12,.9))}
.ps-card .ps-credit{display:block;font-family:var(--font-mono);font-size:.56rem;font-weight:400;
  letter-spacing:.08em;color:rgba(255,255,255,.7);margin-top:3px;text-transform:uppercase}
@media(max-width:640px){.photostrip .ps-rail{grid-auto-columns:minmax(190px,78%)}}

/* ---------- restaurace: flip karta (líc podnik · rub menu/kontakt) ---------- */
.rest-flip{perspective:1200px;cursor:pointer;min-height:186px;padding:0!important;background:transparent!important;
  border:0!important;box-shadow:none!important}
.rest-flip::before,.rest-flip::after{display:none}
.rf-inner{position:relative;width:100%;height:100%;min-height:186px;transition:transform 1.1s var(--ease-out);
  transform-style:preserve-3d}
.rest-flip.flipped .rf-inner{transform:rotateY(180deg)}
.rf-front,.rf-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:var(--r-glass);
  background:var(--lg-fill);border:1px solid var(--lg-stroke);box-shadow:var(--lg-shadow),var(--lg-inset);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))}
.rf-back{transform:rotateY(180deg);overflow:auto}
.rest-flip.has-menu .rf-front{border-color:rgba(var(--acc-rgb),.4)}
.rf-hint{margin-top:auto;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zivot)}
.rf-back h4{font-size:.94rem;color:#fff;margin:0 0 6px}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.menu-list li{font-size:.82rem;color:var(--ink-2);line-height:1.35;padding-left:12px;position:relative}
.menu-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--zivot)}
.menu-note{font-size:.8rem;color:var(--ink-2);margin:0 0 6px}
@media(prefers-reduced-motion:reduce){.rf-inner{transition:none}}

/* =====================================================================
   INTERAKTIVNÍ BLOK „PENÍZE NAŽIVO"
   ===================================================================== */
.hot-wrap{margin:20px 0 6px}
.hot{position:relative;padding:26px;border-radius:var(--r-glass);overflow:hidden;
  background:var(--lg-fill);border:1px solid var(--lg-stroke);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-shadow),var(--lg-inset)}
.hot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 12% 0%,rgba(var(--acc-rgb),.22),transparent 62%),
             radial-gradient(60% 80% at 92% 8%,rgba(19,214,176,.16),transparent 60%)}
.hot > *{position:relative;z-index:1}
.hot-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:26px;align-items:center}
@media(max-width:860px){.hot-grid{grid-template-columns:1fr;gap:18px}}
.hot-label{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.hot-num{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1;letter-spacing:-.02em;
  background:var(--grad-prestige);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.hot-num em{font-style:normal;font-family:var(--font-ui);font-size:.34em;font-weight:700;
  -webkit-text-fill-color:var(--ink-2)}
.hot-num.sm{font-size:clamp(1.5rem,3vw,2.1rem)}
.hot-num span.done{animation:hotPop .5s var(--ease-out)}
@keyframes hotPop{0%{filter:brightness(1)}40%{filter:brightness(1.35) drop-shadow(0 0 22px rgba(var(--acc-rgb),.5))}100%{filter:brightness(1)}}
.hot-tick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  font-size:.9rem;color:var(--ink-2)}
.hot-tick b{font-family:var(--font-mono);color:var(--zivot);font-variant-numeric:tabular-nums}
.hot-dot{width:9px;height:9px;border-radius:50%;background:var(--zivot);flex:0 0 9px;
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6);animation:dnPulse 1.6s infinite}
.hot-note{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;color:var(--ink-3);margin-top:10px}
.hot-side{display:flex;gap:20px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.hot-ring{--p:0;position:relative;width:132px;height:132px;border-radius:50%;flex:0 0 132px;display:grid;place-items:center;
  background:conic-gradient(var(--zivot) calc(var(--p)*1%),rgba(255,255,255,.09) 0);
  box-shadow:0 0 44px rgba(var(--acc-rgb),.18)}
.hot-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#080d14}
.hot-ring-core{position:relative;text-align:center;line-height:1.15}
.hot-ring-core b{display:block;font-family:var(--font-display);font-size:1.6rem;color:#fff;font-variant-numeric:tabular-nums}
.hot-ring-core span{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.hot-split{margin-top:24px;padding-top:20px;border-top:1px solid var(--lg-stroke)}
.hot-sliders{display:grid;gap:10px;margin-top:6px}
.hot-slider{display:grid;grid-template-columns:minmax(120px,1.1fr) 2fr minmax(84px,auto);gap:12px;align-items:center}
@media(max-width:560px){.hot-slider{grid-template-columns:1fr auto;gap:6px}.hot-slider input{grid-column:1/-1}}
.hs-name{font-size:.86rem;color:var(--ink-2)}
.hs-val{font-family:var(--font-mono);font-size:.8rem;color:var(--zivot);text-align:right;font-variant-numeric:tabular-nums}
.hot-slider input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;
  background:rgba(255,255,255,.12);outline:none;cursor:pointer}
.hot-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--grad-zivot);box-shadow:0 3px 12px rgba(var(--acc-rgb),.5),inset 0 1px 0 rgba(255,255,255,.5);cursor:grab}
.hot-slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}
.hot-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--zivot)}

#card-cam .cam-loop{height:var(--media-h)}

/* ---------- sticky živá lišta ---------- */
.dn-live-bar{position:fixed;left:50%;transform:translate(-50%,-140%);bottom:auto;top:12px;z-index:95;
  display:flex;gap:6px;padding:6px;border-radius:999px;pointer-events:none;opacity:0;
  background:rgba(10,14,20,.72);border:1px solid var(--lg-stroke);
  -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  box-shadow:0 16px 50px rgba(0,0,0,.55),var(--lg-inset);
  transition:transform .5s var(--ease-out),opacity .4s}
.dn-live-bar.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.dn-live-bar .lb-item{display:flex;align-items:center;gap:7px;padding:.45rem .85rem;border-radius:999px;
  text-decoration:none;color:var(--ink);background:rgba(255,255,255,.06);white-space:nowrap;
  transition:background .25s,color .25s}
.dn-live-bar .lb-item:hover{background:rgba(var(--acc-rgb),.16);color:#fff}
.dn-live-bar b{font-family:var(--font-mono);font-size:.82rem;font-variant-numeric:tabular-nums;color:#fff}
.dn-live-bar i{font-style:normal;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.dn-live-bar .lb-dot{width:7px;height:7px;border-radius:50%;background:var(--zivot);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.6);animation:dnPulse 1.8s infinite}
.dn-live-bar .lb-warn b{color:#f5c04e}
.dn-live-bar .lb-money b{color:var(--zivot)}
@media(max-width:720px){
  .dn-live-bar{top:auto;bottom:calc(var(--nav-h,58px) + env(safe-area-inset-bottom,0px) + 10px);
    transform:translate(-50%,180%);max-width:94vw;overflow-x:auto}
  .dn-live-bar.show{transform:translate(-50%,0)}
  .dn-live-bar i{display:none}
}

/* ---------- finální srovnání karet Počasí × Kamera ----------
   Obě jsou v jednom řádku: roztáhnou se na stejnou výšku a kamera
   dorovná zbytek (flex:1), takže pod počasím nezůstane díra. */
@media(min-width:900px){
  .now-grid{align-items:stretch}
  .now-grid > #card-weather,.now-grid > #card-cam{display:flex;flex-direction:column}
  #card-cam .cam-loop{flex:1;height:auto;min-height:220px}
}

/* sticky lišta patří DOLŮ — nahoře koliduje s ekosystémovým topbarem */
.dn-live-bar{top:auto;bottom:calc(var(--nav-h,58px) + env(safe-area-inset-bottom,0px) + 12px);
  transform:translate(-50%,180%)}
.dn-live-bar.show{transform:translate(-50%,0)}

/* ---------- živé hlasování v anketách ---------- */
.vote{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.vote-opt{position:relative;display:flex;align-items:center;gap:10px;padding:.7rem .9rem;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--lg-stroke);color:var(--ink);cursor:pointer;
  text-align:left;overflow:hidden;transition:border-color .25s,transform .2s}
.vote-opt:hover{border-color:rgba(var(--acc-rgb),.55);transform:translateY(-1px)}
.vote.sent .vote-opt{cursor:default}
.vote-opt .vo-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(var(--acc-rgb),.28),rgba(19,214,176,.16));
  transition:width .8s var(--ease-out);z-index:0}
.vote-opt .vo-txt{position:relative;z-index:1;flex:1;font-size:.88rem}
.vote-opt .vo-pct{position:relative;z-index:1;font-family:var(--font-mono);font-size:.78rem;color:var(--zivot);min-width:44px;text-align:right}
.vote-opt.mine{border-color:rgba(var(--acc-rgb),.7)}
.vote-opt.mine .vo-txt::after{content:" ✓";color:var(--zivot);font-weight:700}
.vote-note{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;color:var(--ink-3);margin-top:2px}

/* ---------- jídelní lístek: miniatura + pop-out ---------- */
.rf-thumb{position:absolute;right:14px;top:14px;width:54px;height:54px;border-radius:12px;
  background-size:cover;background-position:center;border:1px solid var(--lg-stroke);box-shadow:var(--depth-1)}
.rest-flip.has-menu .rf-front h3{padding-right:64px}
.jl-mini{width:100%;max-height:110px;object-fit:cover;border-radius:12px;margin-bottom:8px;
  border:1px solid var(--lg-stroke)}
.jl-open{cursor:pointer}
.jl-pop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .26s var(--ease)}
.jl-pop.show{opacity:1;pointer-events:auto}
.jl-pop-scrim{position:absolute;inset:0;background:rgba(3,6,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jl-pop-box{position:relative;z-index:1;width:min(92vw,720px);max-height:88vh;overflow:auto;padding:22px;
  border-radius:var(--r-glass);background:rgba(12,17,24,.94);border:1px solid var(--lg-stroke);
  box-shadow:var(--depth-3);transform:translateY(14px) scale(.98);transition:transform .3s var(--ease-out)}
.jl-pop.show .jl-pop-box{transform:none}
.jl-pop-box h3{font-family:var(--font-display);font-size:1.4rem;color:#fff;margin:0 0 4px;padding-right:40px}
.jl-pop-note{font-size:.85rem;color:var(--ink-2);margin:0 0 12px}
.jl-pop-body{border-radius:14px;overflow:hidden;background:#070b12;margin-bottom:14px}
.jl-pop-body img{width:100%;height:auto;display:block}
.jl-pop-body iframe{width:100%;height:min(62vh,620px);border:0;display:block;background:#fff}
.jl-pop-empty{padding:26px;text-align:center;color:var(--ink-3);font-size:.9rem}
.jl-pop-links{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.jl-pop-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid var(--lg-stroke);color:#fff;font-size:1.2rem;
  line-height:1;cursor:pointer;transition:background .2s}
.jl-pop-close:hover{background:rgba(255,255,255,.2)}

/* =====================================================================
   MÍSTNÍ ŽIVOT — akce jako přehledné karty s plakátem a datem
   ===================================================================== */
#life-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#life-list .ev-day{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:0}
#life-list .ev-day::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--acc-rgb),.4),transparent)}
#life-list .ev-day span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zivot);white-space:nowrap}
#life-list .ev-day:first-child{margin-top:0}
/* =====================================================================
   MÍSTNÍ ŽIVOT — akce: FOTKA NA CELÝ ŘÁDEK, NA VÝŠKU ŘÁDKU
   Marek 31. 8. 2026: „obrázky dej na celý řádek / na výšku řádku ať je to
   hezčí / samozřejmě responzivně… a na všech Digitálních náměstích".

   Tři vrstvy, VŠECHNY z téže fotky, BEZ zásahu do dn-app.js
   (pseudo-prvky dědí inline `background-image` klíčovým slovem `inherit`):
     1. .ev-foto::before  — rozostřená kopie přes CELÝ řádek (cover)
     2. .ev-card::after   — scrim: vlevo průhledný (nad plakátem), vpravo tmavý
     3. .ev-foto::after   — OSTRÝ plakát v levém sloupci, na CELOU VÝŠKU řádku
   Proč contain v pevném sloupci: plakáty jsou na výšku, fotky z kin na šířku —
   `cover` přes celý řádek by plakát rozřízl v půlce textu, `contain` bez sloupce
   by u širokých fotek zajel pod titulek. Šířku sloupce drží --ev-col, ze které
   se počítá i odsazení textu i zlom scrimu (jedno místo pravdy).
   Recept navazuje na karty podniků (.rf-bg) — tam Markem schválený 6. 8.
   ===================================================================== */
.ev-card{
  --ev-col:clamp(116px,12vw,172px);       /* šířka sloupce s ostrým plakátem */
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  position:relative;isolation:isolate;overflow:hidden;
  grid-template-columns:none;
  min-height:clamp(112px,11vw,148px);
  padding:14px 16px 13px;
  padding-left:calc(var(--ev-col) + 16px);
  padding-right:clamp(62px,6vw,78px);       /* rezerva pod datovou pilulkou */
  border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  transition:background .25s,border-color .25s}
.ev-card:hover{transform:none;border-color:rgba(var(--acc-rgb),.45)}

/* vrstva 1 — rozostřená fotka vyplní celý řádek; .ev-foto sám nekreslí nic
   (background-size:0 0), aby ::before/::after mohly zdědit jeho obrázek */
.ev-foto{position:absolute;inset:0;z-index:0;width:auto;height:auto;flex-basis:auto;
  border:0;border-radius:0;background-color:transparent;background-size:0 0;cursor:zoom-in}
.ev-foto::before{content:"";position:absolute;inset:0;
  background-image:inherit;background-size:cover;background-position:center;
  filter:blur(20px) saturate(125%);transform:scale(1.24);opacity:.55}
/* vrstva 3 — ostrý plakát, celá výška řádku, nikdy nezajede pod text */
/* `contain` = obrázek se NIKDY neořízne. Plakáty na výšku tím vyplní celou výšku
   řádku; u fotek na šířku zůstane nahoře a dole rozostřená kopie téže fotky —
   vypadá to záměrně, kdežto uříznutý text na plakátu vypadá rozbitě. */
.ev-foto::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--ev-col);
  background-image:inherit;background-size:contain;background-repeat:no-repeat;
  background-position:center;transition:transform .5s var(--ease)}
.ev-card:hover .ev-foto::after{transform:scale(1.04)}

/* vrstva 2 — scrim: vlevo průhledný (plakát zůstane čistý), vpravo tmavý pod text */
.ev-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(6,10,16,0) 0,
    rgba(6,10,16,0) var(--ev-col),
    rgba(6,10,16,.55) calc(var(--ev-col) + 34px),
    rgba(6,10,16,.82) calc(var(--ev-col) + 130px))}

/* akce bez fotky — jen jemný akcentový přechod přes celý řádek */
.ev-foto--prazdna{background:linear-gradient(135deg,rgba(var(--acc-rgb),.30),rgba(19,214,176,.12));
  background-size:auto;cursor:default}
.ev-foto--prazdna::before,.ev-foto--prazdna::after{display:none}
.ev-card:has(.ev-foto--prazdna){padding-left:16px}
.ev-card:has(.ev-foto--prazdna)::after{display:none}

/* Pozor: tenhle blok NAHRAZUJE původní pravidla karet akcí, ne je jen doplňuje —
   musí proto nést i základní typografii (bílý titulek bez podtržení, mono meta).
   Past 31. 8.: náhled se dělal jako base+patch, deploy jako náhrada → v náhledu
   typografie byla, na serveru vypadla. Náhled proto vždy nad HOTOVÝM souborem. */

/* datum = skleněná pilulka v rohu */
.ev-datum{position:absolute;top:10px;right:12px;left:auto;z-index:3;
  display:flex;flex-direction:row;align-items:baseline;gap:3px;line-height:1;
  padding:4px 10px;border-radius:999px;
  font-family:var(--font-display);color:#fff;
  background:rgba(8,12,18,.5);border:1px solid var(--lg-stroke);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ev-datum b{font-size:.95rem;font-weight:800}
.ev-datum span{font-family:var(--font-mono);margin-top:0;font-size:.62rem;color:#eaf2fb}

.ev-text{position:relative;z-index:3;display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-text a{color:#fff;text-decoration:none;font-weight:600;font-size:1rem;line-height:1.25;
  text-shadow:0 2px 12px rgba(0,0,0,.75)}
.ev-text a:hover{color:var(--zivot)}
.ev-meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;
  color:rgba(234,242,251,.84);text-shadow:0 1px 10px rgba(0,0,0,.75);white-space:normal}
.ev-meta b{color:var(--zivot);font-weight:700}

@media(max-width:520px){
  .ev-card{--ev-col:92px;grid-template-columns:none;min-height:104px;
    padding:12px 13px 11px;padding-left:calc(var(--ev-col) + 13px);padding-right:58px}
  .ev-card:has(.ev-foto--prazdna){padding-left:13px}
  .ev-datum b{font-size:.9rem}
  .ev-text a{font-size:.94rem}
}

/* staré jednosloupcové HTML (#life-list) — přebít doladění z 6. 8. */
#life-list .ev-card{padding:14px 16px 13px;padding-left:calc(var(--ev-col) + 16px);gap:3px}
#life-list .ev-foto{width:auto;height:auto;flex-basis:auto;border-radius:0;box-shadow:none}
/* menu v pop-outu */
.menu-list--pop{padding:16px 18px}
.menu-list--pop li{font-size:.9rem;color:#eaf2fb}

/* =====================================================================
   TADY A TEĎ — tři sloupce, stejná výška médií
   řádek 1: Počasí (poloviční křivka) · Kamera · Výstrahy
   řádek 2: Dnes ve Vimperku · Parkování · Nejbližší odjezdy
   ===================================================================== */
@media(min-width:1000px){
  .now-grid{grid-template-columns:repeat(3,1fr)!important;align-items:stretch}
  .now-grid > #card-weather{grid-column:auto!important}
  .now-grid > .card{display:flex;flex-direction:column}
  #card-cam .cam-loop{flex:1;height:auto;min-height:var(--media-h)}
  .now-grid .card .meta{margin-top:auto}
  #card-alerts #alerts-list{max-height:170px;overflow:auto;padding-right:4px}
  #card-alerts #alerts-list p{font-size:.84rem;line-height:1.45}
  #card-events #events-list,#card-parking #parking-list,#card-transport #transport-list{
    max-height:290px;overflow:auto;padding-right:4px}
}

/* tenké posuvníky uvnitř karet */
.now-grid ul::-webkit-scrollbar,#alerts-list::-webkit-scrollbar{width:5px}
.now-grid ul::-webkit-scrollbar-thumb,#alerts-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);border-radius:999px}

/* =====================================================================
   KARTY PODNIKŮ — jemná rozostřená fotka na pozadí
   ===================================================================== */
.rest-flip .rf-front{overflow:hidden}
/* jednotná výška karet: líc je absolutní jako rub → všechny karty přesně stejné (Marek 6. 8.);
   thumb a rozostřené pozadí musí přebít pozdější `.rf-front > *{position:relative}` */
.rest-flip .rf-front .rf-bg{position:absolute;inset:0;z-index:0}
.rest-flip .rf-front .rf-thumb{position:absolute;top:14px;right:14px;left:auto;z-index:2}
.rf-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:saturate(108%);opacity:.55;
  transition:opacity .45s var(--ease),filter .45s var(--ease)}
.rf-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,18,.55) 0%,rgba(8,12,18,.66) 55%,rgba(8,12,18,.9) 100%)}
.rest-flip:hover .rf-bg{opacity:.7;filter:saturate(120%)}
/* foto podniku tvoří pozadí boxu (styl healsai.eu) → malý čtvereček je duplicitní */
.rf-bg ~ .rf-thumb{display:none}
.rf-front > *{position:relative;z-index:1}
.rf-thumb{z-index:2}

/* ---------- přepínač „měřit od mé polohy" ---------- */
.gps-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 14px}
.gps-btn{display:inline-flex;align-items:center;gap:7px;padding:.42rem .9rem;border-radius:999px;cursor:pointer;
  background:var(--lg-fill);border:1px solid var(--lg-stroke);color:var(--ink-2);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:color .25s,border-color .25s,background .25s}
.gps-btn:hover{color:var(--zivot);border-color:rgba(var(--acc-rgb),.5)}
.gps-btn svg{fill:none;stroke:currentColor;stroke-width:1.8}
.gps-btn.gps-hleda{opacity:.6;pointer-events:none}
.gps-btn.gps-hleda svg{animation:dnPulse 1.2s infinite}
.gps-stav{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-3)}
.gps-stav.on{color:var(--zivot)}


#life-list .ev-day span{font-size:.6rem}
#card-events #events-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
#card-events #events-list li{display:flex;gap:9px;align-items:baseline;font-size:.86rem;
  padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.04)}
#card-events #events-list li b{font-family:var(--font-mono);font-size:.72rem;color:var(--zivot);flex:0 0 auto}
#card-events #events-list li .when{margin-left:auto;font-family:var(--font-mono);font-size:.62rem;color:var(--ink-3)}

/* =====================================================================
   SPODNÍ LIŠTA — sladěná s ekosystémovou Glass lištou V6 na sumava.eu
   Recept převzatý z sumava-tabbar.js: výška 58 px + safe-area, gradient
   + blur 14 px, hairline nahoře, uprostřed zvednutý terakotový pin.
   Cíl: kdo přejde z Digitálního náměstí na zbytek webu, nesmí zaznamenat skok.
   ===================================================================== */
.dn-nav{
  height:calc(58px + env(safe-area-inset-bottom,0px));
  padding:7px 4px;padding-bottom:max(9px,env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(0,0,0,.30),transparent),rgba(18,22,26,.55)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4)!important;
  backdrop-filter:blur(14px) saturate(1.4)!important;
  border-top:.5px solid rgba(255,255,255,.14)!important;
  box-shadow:0 -1px 0 rgba(255,255,255,.08) inset,0 -12px 26px rgba(0,0,0,.16)!important;
  overflow:visible!important;
}
.dn-nav ul{display:flex;align-items:flex-end;justify-content:space-around;height:100%;
  margin:0;padding:0;list-style:none;overflow:visible}
.dn-nav li{flex:1;display:flex;justify-content:center;overflow:visible}
.dn-nav a,.dn-nav button{
  flex:1;min-width:44px;min-height:44px;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:3px;padding:4px 2px;
  color:rgba(255,255,255,.85);text-decoration:none;font-size:.64rem;letter-spacing:.01em;
  background:none;border:0;cursor:pointer}
.dn-nav a svg,.dn-nav button svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.5;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4))}
.dn-nav a[aria-current="page"],.dn-nav a.is-active{color:var(--pin-ink)}

/* zvednutý pin uprostřed — stejný jako „TADY" v ekosystémové liště */
.dn-nav .dn-nav-mid{overflow:visible}
.dn-nav .dn-pin-link{gap:1px}
.dn-nav .dn-pin{width:48px;height:48px;border-radius:50%;margin-top:-24px;margin-bottom:1px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,rgba(var(--pin-g1),.97),rgba(var(--pin-g2),.97));
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 7px 18px rgba(var(--pin-sh1),.5),0 0 0 5px rgba(var(--pin-sh2),.12),
             inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s var(--ease)}
.dn-nav .dn-pin svg{width:25px;height:25px;stroke:var(--pin-stroke);stroke-width:1.9;filter:none}
.dn-nav .dn-pin-link:active .dn-pin{transform:scale(.93)}
.dn-nav .dn-pin-link span:not(.dn-pin){color:var(--pin-ink)}
/* popisky v liště na jeden řádek */
.dn-nav a,.dn-nav button{white-space:nowrap}
.dn-nav .dn-pin-link{gap:2px;font-size:.62rem}

/* =====================================================================
   MOBIL — nad dlaždice patří jen to nejnutnější
   „Tady a teď · Nahlásit · Hlasujeme" jsou v dolní liště, tak je nahoře
   neopakujeme; disclaimer a lede se schovají, aby panel služeb naskočil
   hned pod nadpis (nad přehybem).
   ===================================================================== */
@media(max-width:760px){
  .masthead{padding:18px 0 8px}
  .masthead .kicker{font-size:.58rem;gap:4px 8px;margin-bottom:6px}
  .masthead .kicker .r{display:none}          /* „nezávislý občanský projekt…" → do patičky */
  .masthead h1{font-size:clamp(1.5rem,7vw,2rem);margin:0 0 4px}
  .masthead .lede{display:none}                /* dlouhá věta jen na desktopu */
  .masthead .cta-row{display:none}             /* stejné akce má dolní lišta */
  .masthead .quicknav{display:none}
  #alertbar{margin-top:10px;padding:9px 12px;font-size:.85rem}
  #panel{margin-top:12px}
  /* pin lišty vyčnívá 24 px nahoru → obsah nesmí končit těsně pod ním */
  body{padding-bottom:calc(var(--nav-h,58px) + env(safe-area-inset-bottom,0px) + 34px)}
}
/* disclaimer, který jsme schovali nahoře, patří do patičky */
.dn-disclaimer{display:none}
@media(max-width:760px){
  .dn-disclaimer{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;
    color:var(--ink-3);text-align:center;margin:18px 0 4px;line-height:1.5}
}

/* =====================================================================
   MOBILNÍ RESPONSIVITA — doladění
   ===================================================================== */
/* dlaždice mají jednotnou výšku, ať mřížka nedrncá */
.tiles{grid-auto-rows:1fr}
.tile{min-height:96px;justify-content:flex-start}
.tile .t-name{line-height:1.2}
@media(max-width:520px){
  .tile{min-height:88px;padding:11px 12px}
  .tile .t-name{font-size:.85rem}
  .tile .t-info{font-size:.72rem}
  .tile .t-tag{font-size:.52rem;padding:1px 5px}
}
@media(max-width:760px){
  /* peníze naživo */
  .hot{padding:18px}
  .hot-num{font-size:clamp(1.9rem,10vw,2.6rem)}
  .hot-side{justify-content:space-between;width:100%}
  .hot-ring{width:108px;height:108px;flex-basis:108px}
  .hot-ring-core b{font-size:1.25rem}
  .hot-split{margin-top:18px;padding-top:16px}
  /* ankety */
  .vote-opt{padding:.62rem .8rem}
  .vote-opt .vo-txt{font-size:.84rem}
  .poll-facts{gap:6px}
  /* projekty a restaurace — jedna karta na řádek se čte líp */
  #projects-wrap,#rest-wrap,#health-wrap{grid-template-columns:1fr!important}
  .rest-flip,.rf-inner{min-height:172px}
  /* fotopás */
  .photostrip .ps-rail{grid-auto-columns:minmax(190px,82%)}
  /* výstrahy */
  .alert-split{grid-template-columns:1fr 1fr}
  .alert-vis-body{min-height:128px}
  /* sekce nadpisy */
  .section-head h2{font-size:1.25rem}
  .section-sub{font-size:.82rem}
}
@media(max-width:420px){
  .alert-split{grid-template-columns:1fr}
  .hot-slider{grid-template-columns:1fr auto}
}

/* štítek dlaždice nesmí naskočit do názvu (ŽIVĚ je krátké, OVĚŘENO dlouhé) */
.tile .t-top{padding-right:0!important;flex-wrap:wrap}
.tile .t-tag{position:static!important;margin-left:auto;flex:0 0 auto;
  align-self:flex-start;white-space:nowrap;padding:1px 6px;border-radius:999px}
.tile .t-name{flex:1 1 auto;min-width:0}
@media(max-width:520px){
  .tile .t-top{gap:6px}
  .tile .t-tag{font-size:.5rem;letter-spacing:.1em;padding:1px 5px}
}

/* =====================================================================
   POČASÍ — minimalistická hlavička + hodinový pás (bez posuvníků)
   ===================================================================== */
.w-now{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 12px}
.w-icon{flex:0 0 auto;width:52px;height:52px;color:var(--zivot);display:block}
.w-icon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 10px rgba(var(--acc-rgb),.28))}
.w-temp{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);
  line-height:1;letter-spacing:-.02em;color:#fff}
.w-text{font-size:.9rem;color:var(--ink-2);flex:1 1 100%;margin-top:-4px}
@media(min-width:520px){.w-text{flex:1 1 auto;margin-top:0}}

.w-hours{position:relative;border-radius:16px;overflow:hidden;line-height:0;
  border:1px solid var(--lg-stroke);box-shadow:var(--lg-inset);background:#0a1018}
.w-hours canvas{display:block;width:100%}
.wh{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:4px 1px;border-radius:11px;transition:background .25s}
.wh.now{background:rgba(var(--acc-rgb),.12)}
.wh b{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.04em;color:var(--ink-3);font-weight:600}
.wh.now b{color:var(--zivot)}
.wh-ic{width:24px;height:24px;color:rgba(233,240,251,.8);display:block}
.wh.now .wh-ic{color:var(--zivot)}
.wh-ic svg{width:100%;height:100%;display:block}
.wh i{font-style:normal;font-family:var(--font-mono);font-size:.72rem;color:#fff;font-variant-numeric:tabular-nums}
.wh-bar{display:block;width:5px;border-radius:999px;background:linear-gradient(180deg,var(--zivot),rgba(19,214,176,.35))}
.wh u{text-decoration:none;font-family:var(--font-mono);font-size:.52rem;color:#7fc8ff;min-height:10px;display:block}

/* výstrahy — bez dlouhého textu, vizuál dostane víc místa */
#card-alerts #alerts-list{max-height:none;overflow:visible}
#card-alerts #alerts-list:empty{display:none}
#card-alerts .alert-split{margin-top:4px}
#card-alerts .alert-vis-body{min-height:150px}

/* =====================================================================
   IDOS — vyhledávání spojení přímo v kartě
   ===================================================================== */
.idos{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--lg-stroke)}
.idos-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.idos-row--2{grid-template-columns:1fr auto}
.idos-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.idos-f span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.idos-f input{width:100%;padding:.5rem .7rem;border-radius:11px;font-size:.86rem;
  background:rgba(255,255,255,.06);border:1px solid var(--lg-stroke);color:var(--ink);
  font-family:var(--font-ui)}
.idos-f input:focus{border-color:rgba(var(--acc-rgb),.6);outline:none;
  box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16)}
.idos-f--time input{font-family:var(--font-mono);font-size:.78rem;color-scheme:dark}
.idos-swap{width:32px;height:34px;border-radius:10px;cursor:pointer;flex:0 0 32px;
  background:rgba(255,255,255,.06);border:1px solid var(--lg-stroke);color:var(--ink-2);
  font-size:.9rem;line-height:1;transition:color .2s,border-color .2s}
.idos-swap:hover{color:var(--zivot);border-color:rgba(var(--acc-rgb),.5)}
.idos-go{padding:.55rem 1.1rem!important;font-size:.85rem!important;white-space:nowrap}
.idos-quick{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.idos-quick .chip{font-size:.68rem;padding:.28rem .62rem;cursor:pointer;border-radius:999px;
  background:var(--lg-fill);border:1px solid var(--lg-stroke);color:var(--ink-2);
  font-family:var(--font-ui);transition:color .2s,border-color .2s}
.idos-quick .chip:hover{color:var(--zivot);border-color:rgba(var(--acc-rgb),.55)}
.idos-note{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.05em;
  color:var(--ink-3);line-height:1.5;margin:2px 0 0}
@media(max-width:480px){
  .idos-row{grid-template-columns:1fr;gap:6px}
  .idos-swap{width:100%;height:28px}
  .idos-row--2{grid-template-columns:1fr}
}

/* =====================================================================
   KOLIK NÁS TU JE — vývoj počtu obyvatel
   ===================================================================== */
.lide-wrap{margin:20px 0 6px}
.lide{position:relative;padding:24px;border-radius:var(--r-glass);overflow:hidden;
  background:var(--lg-fill);border:1px solid var(--lg-stroke);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-shadow),var(--lg-inset)}
.lide::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(65% 85% at 85% 0%,rgba(var(--acc-rgb),.16),transparent 62%)}
.lide > *{position:relative;z-index:1}
.lide-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.lide-num{display:flex;align-items:baseline;gap:9px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1;letter-spacing:-.02em;
  background:var(--grad-prestige);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.lide-num em{font-style:normal;font-family:var(--font-ui);font-size:.28em;font-weight:600;
  -webkit-text-fill-color:var(--ink-2);letter-spacing:0}
.lide-trend{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 14px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--lg-stroke)}
.lide-trend b{font-size:.95rem;color:var(--ink)}
.lide-trend span{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3)}
.lide-trend.up b{color:var(--zivot)}
.lide-trend.down b{color:#ff9d7a}
.lide-graf{border-radius:16px;overflow:hidden;line-height:0;background:rgba(6,10,16,.5);
  border:1px solid rgba(255,255,255,.08);cursor:crosshair}
.lide-graf canvas{display:block;width:100%;touch-action:pan-y}
.lide-popis{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;color:var(--ink-2);
  margin:10px 0 0;min-height:1.2em}
.lide-popis b{color:#fff}
.lide-popis i{font-style:normal;color:var(--ink-3);font-size:.9em}
.lide-popis .up{color:var(--zivot)}
.lide-popis .down{color:#ff9d7a}
.lide-fakta{font-size:.86rem;color:var(--ink-2);margin:8px 0 0;line-height:1.55}
.lide-fakta b{color:#fff}
@media(max-width:520px){
  .lide{padding:16px}
  .lide-head{gap:10px}
  .lide-trend{padding:6px 11px}
  .lide-trend b{font-size:.86rem}
}
/* proč přibývá/ubývá */
.lide-proc{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lide-proc span{flex:1 1 140px;display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);font-size:.78rem;color:var(--ink-2)}
.lide-proc b{font-family:var(--font-display);font-size:1.35rem;font-weight:800;line-height:1.1;color:#fff}
.lide-proc span.up b{color:var(--zivot)}
.lide-proc span.down b{color:#ff9d7a}
.lide-proc i{font-style:normal;font-family:var(--font-mono);font-size:.6rem;color:var(--ink-3);margin-top:2px}
.lide-mil{display:block;margin-top:5px;color:var(--ink-3);font-size:.92em;line-height:1.45}

/* 🅿️ mapa parkovišť (20.8.) */
#parking-map{height:210px;border-radius:var(--r-tile);overflow:hidden;margin:4px 0 12px;
  border:1px solid var(--lg-stroke);box-shadow:var(--lg-inset);background:#0a0e16}
.pk-pin{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:rgba(23,70,47,.9);border:2px solid var(--zivot,#3ddc78);color:#dfffe9;
  font:800 13px/1 var(--font-mono,monospace);box-shadow:0 0 12px rgba(61,220,120,.55)}

/* ❤️ zdraví: transparentní znak kategorie na pozadí karty (20.8.) */
.zdr-karta{position:relative;overflow:hidden}
.zdr-karta .zdr-znak{position:absolute;right:6px;bottom:2px;width:86px;height:86px;opacity:.10;
  pointer-events:none;color:var(--zivot,#3ddc78);transform:rotate(-8deg)}
.zdr-karta .zdr-znak svg{width:100%;height:100%}
.zdr-karta.zdr-pharmacy .zdr-znak{color:#7ec9ff}
.zdr-karta.zdr-dentist .zdr-znak{color:#eaf2fb}
.zdr-karta.zdr-gyn .zdr-znak{color:#f0a8c8}
.zdr-karta.zdr-hospital .zdr-znak{color:#e0b060}

/* kompaktní trojice boxů (20.8.): pod mapou jen pár řádků — piny na mapě zůstávají všechny */
#parking-list li:nth-child(n+5){display:none!important} /* dn-app dává inline display:block */
#transport-list li:nth-child(n+6){display:none!important}

/* ✉️ vzkaz radnici (20.8.) */
.vzkaz-karta{display:flex;flex-direction:column;gap:10px}
.vzkaz-karta textarea{width:100%;resize:vertical;background:rgba(10,14,22,.65);color:inherit;
  border:1px solid var(--lg-stroke);border-radius:12px;padding:12px 14px;font:inherit;min-height:96px}
.vzkaz-karta textarea:focus{outline:none;border-color:var(--zivot,#3ddc78);box-shadow:0 0 14px rgba(61,220,120,.25)}
.vzkaz-radek{display:flex;gap:10px;flex-wrap:wrap}
.vzkaz-radek input{flex:1;min-width:200px;background:rgba(10,14,22,.65);color:inherit;
  border:1px solid var(--lg-stroke);border-radius:12px;padding:10px 14px;font:inherit}
.vzkaz-radek input:focus{outline:none;border-color:var(--zivot,#3ddc78)}
.vzkaz-stav{margin:0;font-size:.9rem}
.vzkaz-stav.chyba{color:#ff9d9d}
.vzkaz-ok{margin:4px 0;font-size:1rem}

/* 🎩 kompaktní masthead (20.8.): CTA vpravo vedle nadpisu, podtitulek na jeden řádek */
@media(min-width:761px){
  .masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:24px;padding:26px 0 10px}
  .masthead .kicker{grid-row:1;grid-column:1/-1}
  .masthead h1{grid-row:2;grid-column:1;margin:10px 0 2px}
  .masthead .cta-row{grid-row:2;grid-column:2;justify-self:end;align-self:start;margin:16px 0 0;flex-wrap:nowrap} /* zarovnáno s horní hranou nadpisu */
  .masthead .lede{grid-row:3;grid-column:1/-1;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 0}
}

/* =====================================================================
   REDESIGN 2. 9. 2026 — „BENTO NOC" + kulaté piny služeb
   (Marek: „B základ, ale chipy spíš z A"). Jediný blok navíc: přepisuje
   povrchy a rozvržení horní části, žádnou logiku. Kamera jako pozadí
   hlavičky = proměnná --hero-bg, kterou plní dn-live.js.
   ===================================================================== */
:root{
  --lg-fill:rgba(255,255,255,.045); --lg-fill-2:rgba(255,255,255,.09);
  --lg-stroke:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.2);
  --lg-shadow:0 10px 30px rgba(0,0,0,.35); --lg-inset:inset 0 1px 0 rgba(255,255,255,.07);
  --lg-blur:14px; --lg-sat:150%; --r-glass:22px; --r-tile:16px;
  --hero-bg:none;
}
/* plocha: aurora ztlumit, nahoře kamera města, dole tma */
body{position:relative}
body::before{opacity:.35}
body::after{
  position:absolute;inset:0 0 auto 0;height:640px;opacity:1;
  background:var(--hero-bg) center 45%/cover no-repeat;filter:saturate(.85);
  -webkit-mask:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.36) 50%,transparent 100%);
  mask:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.36) 50%,transparent 100%);
}
/* hlavička: kicker + obrovský název, nízká */
.masthead{padding:34px 0 6px}
.masthead h1{font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin:0;line-height:1.3}
.masthead h1 .thin{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(3rem,7.5vw,5.4rem);line-height:.95;letter-spacing:-.02em;color:#fff;text-transform:none;margin-top:8px;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.masthead .lede{font-size:.9rem;max-width:60ch;margin-top:8px;text-shadow:0 1px 8px rgba(0,0,0,.5);white-space:normal;overflow:visible;text-overflow:clip}
.masthead .cta-row{display:none}
/* služby = jedna řada kulatých skleněných pinů (žádné textové karty) */
#panel{margin-top:6px}
.tiles{display:flex;gap:4px;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:6px 2px 10px;margin-top:4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 88px;min-height:0;padding:0;gap:0;align-items:center;text-align:center;scroll-snap-align:start;
  background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0}
.tile::before,.tile::after{display:none}
.tile .t-top{flex-direction:column;gap:7px;padding:0;align-items:center}
.tile svg{width:56px;height:56px;padding:16px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  transition:transform .3s var(--ease-out),background .3s}
.tile:hover{transform:none}
.tile:hover svg{transform:translateY(-3px);background:rgba(255,255,255,.18)}
.tile .t-name{font-size:.68rem;font-weight:500;line-height:1.15;color:var(--ink-2);max-width:84px}
.tile .t-info,.tile .t-tag{display:none}
/* povrchy: bez šikmého odlesku, tichý hover */
.card::after{display:none}
.card::before,.stat::before,.poll-main::before,.gauge::before{opacity:.14}
.card:hover{transform:none;border-color:rgba(255,255,255,.16);box-shadow:var(--lg-shadow),var(--lg-inset)}
a.card:hover,.rest-flip:hover{transform:translateY(-2px)}
/* velká čísla bílá (Playfair), zelená jen jako živý bod */
#card-weather .w-now{align-items:flex-end;gap:12px}
#card-weather .w-temp{font-size:clamp(3rem,5.2vw,4.6rem);font-weight:600;letter-spacing:-.03em;line-height:.95;background:none;-webkit-text-fill-color:#fff;color:#fff}
#card-weather .w-icon{width:38px;height:38px;color:#fff;margin-bottom:10px}
.hot-num{background:none;-webkit-text-fill-color:#fff;color:#fff;font-weight:600}
.hot::before{opacity:.45}
.stat .v{background:none;-webkit-text-fill-color:#fff;color:#fff;font-weight:600}
.section-head h2{font-weight:600}
/* duplicitní podtitulek sekce: statický řádek zmizí, když JS doplnil živý */
section:has(> .section-sub[id]:not([hidden])) > .section-sub:not([id]){display:none}
/* bento: první řádek Tady a teď 4 · 5 · 3, zbytek po třetinách */
@media(min-width:1020px){
  .now-grid{grid-template-columns:repeat(12,1fr)!important;gap:12px}
  .now-grid > *{grid-column:span 4}
  .now-grid > #card-weather{grid-column:span 4!important}
  .now-grid > #card-cam{grid-column:span 5}
  .now-grid > #card-alerts{grid-column:span 3}
  .now-grid > .fc-strip{grid-column:1/-1}
  #card-alerts .alert-split{grid-template-columns:1fr}
}
/* mobil: pravidlo dvou (dva boxy vedle sebe), kamera a předpověď přes celou šířku */
@media(max-width:699px){
  .masthead{padding:22px 0 4px}
  .masthead h1 .thin{font-size:2.7rem}
  .tiles{justify-content:flex-start}
  .now-grid,#rest-wrap,#projects-wrap,#health-wrap{grid-template-columns:1fr 1fr!important;gap:8px}
  .now-grid > #card-cam,.now-grid > .fc-strip,.now-grid > #card-alerts,.now-grid > #card-weather{grid-column:1/-1}
  body::after{height:420px}
  .cards .card h3{flex-wrap:wrap}
  .proj-status{white-space:normal!important;font-size:.58rem}
}
/* flip karta restaurací: rub nikdy neprosvítá (Safari ignoruje backface-visibility u overflow:auto) */
.rest-flip .rf-back{visibility:hidden;transition:visibility 0s .55s}
.rest-flip.flipped .rf-back{visibility:visible;transition-delay:0s}
.rest-flip.flipped .rf-front{visibility:hidden;transition:visibility 0s .55s}