/* styles-modern.css - odświeżony wygląd (24.10.2026, wersja do oceny, gałąź ui-modern). Ten sam styl PERUN-a (ostre rogi,
   cienkie linie, mono, bursztyn), nowe: podsumowanie zdaniem, znacznik "na żywo", duża liczba Czujności, "szkło" na
   elementach nad mapą, kafle bento, pływające menu na telefonie. Usunięcie tego pliku i js/modernUi.js = wygląd jak dotąd. */

/* --- podsumowanie + na żywo (nagłówek): mono, wersaliki, jedna linia - jak reszta etykiet strony --- */
.mui-summary{flex:1 1 0;min-width:120px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 6px}
.mui-sentence{font:500 11px/1.35 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim,#9aa6b1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mui-sentence b{font-weight:600}
.mui-live{font:500 10px/1 'IBM Plex Mono',monospace;color:var(--text-faint,#5a6472);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.mui-live b{font-weight:500;color:var(--text-dim,#9aa6b1);font-variant-numeric:tabular-nums;text-transform:uppercase}
.mui-live.stale b{color:var(--amber)}
.mui-dot{width:6px;height:6px;background:#4caf50;animation:muiLive 1.6s ease-in-out infinite}
.mui-live.stale .mui-dot{background:var(--amber);animation:none}
@keyframes muiLive{50%{opacity:.25}}

/* --- Czujność: pasek 4 poziomów w miejscu starego paska (ta sama wysokość bloku) --- */
.mui-gauge > div:not(.mui-levels){display:none!important}
.mui-gauge{min-width:170px!important;flex:0 1 300px!important}
.mui-levels{display:flex;gap:3px;min-width:0;width:100%}
.mui-levels div{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;padding:0 2px;height:20px;border:1px solid var(--line-strong,#333d4a);display:flex;align-items:center;justify-content:center;font:500 9px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--text-faint,#5a6472);transition:background .4s,color .4s,border-color .4s}
.mui-levels div.past{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.mui-levels div.on{border-color:var(--c);background:var(--c);color:#080b0f;font-weight:600}
#top-status-pill{display:none!important}
/* węższy ekran: pasek bez napisów (poziom i tak stoi słowem na początku zdania), więcej miejsca na zdanie */
@media (max-width:1250px){.mui-gauge{flex-basis:170px!important;min-width:130px!important}.mui-levels div{font-size:0!important;height:12px}}
.mui-dots{display:none}

/* --- "szkło" na elementach nad mapą (mapa prześwituje) --- */
.perun-live-ctrl .grp,.map-live-clock,.perun-replay-fab,.perun-live-card,.perun-live-notice,.perun-voiv-timer,
map-area .leaflet-bar,map-area .leaflet-bar a{
  background:rgba(10,14,20,.6)!important;-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  border-color:rgba(160,175,190,.3)!important}
map-area .leaflet-bar a:hover{background:rgba(242,169,59,.18)!important}
.perun-replay-fab:hover{background:var(--amber)!important}

/* --- kafle bento w "Stan na dziś" --- */
.pi-tiles{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}
.pi-tile{padding:10px!important;background:#0d1218!important;border-color:#253039!important}
.pi-tile:first-child .pi-num{font-size:30px!important}
.pi-num{font-variant-numeric:tabular-nums}

/* --- telefon: zdanie zamiast plakietki w nagłówku, menu pływa nad mapą --- */
body.pm{--pm-top:84px}
body.pm status-bar .top-bar-inner > div.mui-summary:not(.perun-brand):not(.top-status-wrapper){display:flex!important}
body.pm .mui-summary{flex:none;min-width:0;width:100%;align-items:center;padding:0;gap:3px}
body.pm .mui-sentence{font-size:10px;text-align:center;max-width:calc(100vw - 24px)}
body.pm status-bar .top-bar-inner > div.mui-dots:not(.perun-brand):not(.top-status-wrapper){display:flex!important;gap:6px;position:absolute;top:18px;right:16px}
.mui-dots span{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--line-strong,#444f5a)}
.mui-dots span.on{background:var(--c);border-color:var(--c)}
body.pm .mui-live{font-size:9px}
body.pm .top-status-wrapper{display:none!important}
body.pm .pm-nav{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:var(--pm-nav);padding-bottom:0;border:1px solid rgba(160,175,190,.3);
  background:rgba(10,14,20,.7);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
body.pm map-area{bottom:0}
body.pm side-panel,body.pm .pm-more{bottom:calc(var(--pm-nav) + 20px + env(safe-area-inset-bottom));left:10px;right:10px;border:1px solid rgba(160,175,190,.3);border-top:2px solid var(--amber)}
body.pm .perun-replay-fab{bottom:calc(var(--pm-nav) + 22px + env(safe-area-inset-bottom))}
body.pm map-area .leaflet-bottom{bottom:calc(var(--pm-nav) + 16px)}

@media (prefers-reduced-motion:reduce){.mui-dot{animation:none}}

/* --- telefon: płynniejsze przewijanie mapy - bez rozmycia tła (kosztowne przy przesuwaniu), bez migotania dronów
   (animacja filtra przerysowuje każdy znacznik w każdej klatce); "cień" kursu zostaje (tani: transform/opacity) --- */
body.pm .perun-live-ctrl .grp,body.pm .map-live-clock,body.pm .perun-replay-fab,body.pm .perun-live-card,body.pm .perun-live-notice,
body.pm .perun-voiv-timer,body.pm map-area .leaflet-bar,body.pm map-area .leaflet-bar a,body.pm .pm-nav{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(10,14,20,.88)!important}
body.pm .perun-live-obj .body{animation:none!important}
body.pm .perun-live-obj,body.pm .perun-live-obj.src-perun{filter:none!important}
/* ramka widoku 3D kończy się nad pływającym menu - panel informacji w 3D nie chowa się pod nim */
body.pm .map-frame .perun-live-3d{height:calc(100% - var(--pm-nav) - 20px - env(safe-area-inset-bottom))}