/* NaviTour - warstwa TYLKO dla wersji przeglądarkowej (navitour.travel.pl/app).
 *
 * Ten plik NIE JEST częścią aplikacji na telefon i nigdy nie trafia do APK -
 * dokłada go wyłącznie strona. Dzięki temu moduł webowy powstaje BEZ ANI JEDNEJ
 * zmiany w kodzie aplikacji: to ten sam, sprawdzony bundle, tylko z ukrytymi
 * funkcjami, które w przeglądarce nie mają sensu.
 *
 * Zakres ustalony z użytkownikiem: na stronie PLANUJEMY trasy oraz OGLĄDAMY
 * trasy przejechane i zaplanowane (te, które aplikacja wysłała na konto).
 * Na stronie się NIE nawiguje, NIE jedzie i NIE rejestruje przejazdu.
 */

/* ---------------------------------------------------------------- jazda ---
   Wszystko, co uruchamia albo obsługuje jazdę. Ukrycie przez `display: none`
   wyłącza też klikalność - element nie istnieje dla myszy ani dla czytnika
   ekranu, więc nie da się przypadkiem wystartować nawigacji ze strony. */
#btnGo,
#btnRecord,
#btnGroupRide,
.ride-buttons,
#btnPauseBig,
#hud,
.manoeuvre-row,
#speedLimitSign,
#speedAlertBanner,
#arrivalBadge,
#pauseBadge,
#gpsBadge,
#groupPanel,
#btnGroupPanel,
#rideSummaryModal {
  display: none !important;
}

/* ------------------------------------------------------- rzeczy z telefonu ---
   Mapy offline pobierają kafle do pamięci telefonu, "Zamknij aplikację" nie ma
   odpowiednika w karcie przeglądarki, a sprawdzanie aktualizacji dotyczy pliku
   APK - na stronie wszystkie trzy tylko myliłyby. */
#btnOfflineMaps,
#btnAppClose,
#btnCheckUpdate,
#updateCheckResult {
  display: none !important;
}

/* ------------------------------------------------------------ ustawienia ---
   Z Ustawień znika wszystko, co dotyczy SAMEJ JAZDY. Strona planuje trasy i
   pokazuje trasy zaplanowane oraz przejechane - nie nawiguje, więc głos,
   ostrzeżenia o prędkości czy wygląd kursora nie mają tu czego regulować.

   Sekcje wskazujemy przez `:has()` po identyfikatorze kontrolki, która w danej
   sekcji siedzi. Dzięki temu nie trzeba dopisywać niczego do markupu
   APLIKACJI - a to był warunek: aplikacji nie ruszamy. */

/* Komunikaty głosowe - lektor prowadzi po trasie, na stronie nie ma czego
   czytać na głos. */
.settings-section:has(#setVolume),
/* Ostrzeżenia o przekroczeniu prędkości - dotyczą jazdy. */
.settings-section:has(#setSpeedAlert),
/* Wygląd kursora pojazdu - widać go wyłącznie podczas prowadzenia. */
.settings-section:has(#setCursorArrow),
/* Ksywka do jazdy w grupie - jazda w grupie na stronie nie istnieje. */
.settings-section:has(#setGroupNickname),
/* Kopia i transfer tras - sięga po foldery w telefonie (pendrive, karta SD). */
.settings-section:has(#btnExportTracks) {
  display: none !important;
}

/* Automatyczny motyw nocny czyta CZUJNIK ŚWIATŁA telefonu - w przeglądarce nie
   ma go skąd wziąć. Sam wybór jasny/ciemny zostaje, bo dotyczy wyglądu strony. */
.settings-row:has(#setAutoNight),
#setSensorNote {
  display: none !important;
}

/* ZOSTAJE ŚWIADOMIE:
     - średnia prędkość roweru - wpływa na czas przejazdu i na przeliczenie
       czasu na dystans przy pętli, czyli na PLANOWANIE,
     - drogi płatne - to preferencja wyznaczania trasy,
     - podkłady map i motyw - dotyczą oglądania mapy,
     - różowy ślad przejechanych tras - to właśnie przeglądanie przejazdów,
     - konto i synchronizacja - bez tego nie ma tras z serwera. */

/* ------------------------------------------------------------- szeroki ekran ---
   Interfejs powstał dla telefonu. To NIE jest jeszcze pełne przeprojektowanie
   pod monitor (to osobny krok) - tylko tyle, żeby na dużym ekranie treść nie
   rozjeżdżała się na całą szerokość i dało się z tego wygodnie korzystać. */
@media (min-width: 900px) {
  /* Kontener ekranów to `#screenContainer.layout` (sprawdzone w przeglądarce,
     nie zgadnięte - wcześniej celowałem w nieistniejące `#app`/`.screen`). */
  #screenContainer {
    /* Samo `max-width` nie wystarcza: element stoi w układzie, który nie
       rozciąga go z automatu (zmierzone: 572 px przy limicie 1000 px) -
       stąd jawne `width: 100%`. */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
  /* Mapa na dużym ekranie może być wyraźnie wyższa - to ona jest tu
     najważniejsza, a miejsca w pionie nie brakuje jak w telefonie.
     Ustawiamy `min-height`, a NIE `height`: sama `.map-wrap` ma w aplikacji
     `min-height: 160px` i stoi w układzie, który potrafi ścisnąć zwykłą
     wysokość z powrotem do tego minimum (zmierzone: `height: 420px` dawało
     w efekcie 160 px). */
  .map-wrap:not(.map-fullscreen) {
    min-height: 420px;
  }
}