/* GLOBURNS - układ na smartfonie (assets/telefon.js). Działa tylko przy klasie
   body.tel, którą skrypt nadaje na ekranie do 820 px szerokości. Kolory biorą
   się ze zmiennych motywu strony, z zapasem na wypadek innych nazw. */
body.tel {
  /* Relief: --panel-pelny, --druk...; Conflict globe: --panel, --paper... */
  --tel-tlo: var(--panel-pelny, var(--ocean, var(--panel, #fff)));
  --tel-druk: var(--druk, var(--paper, #1b1b1b));
  --tel-dim: var(--druk-dim, var(--paper-dim, #5e5e5e));
  --tel-ramka: var(--ramka, var(--panel-edge, rgba(0,0,0,.15)));
  --tel-akcent: var(--akcent, var(--teal, #C2185B));
  --tel-podklad: var(--tlo, var(--ocean-void, #fff));
  --tel-gora: 50px;
}

/* ---------- nagłówek: marka i menu ---------- */
body.tel header {
  top: var(--pasek-wys, 0px);
  height: var(--tel-gora); padding: 0 6px 0 14px; align-items: center; gap: 8px;
  flex-wrap: nowrap; row-gap: 0;
}
html:not([data-test]) body.tel header { top: 0; }
body.tel header h1 { font-size: 16px; letter-spacing: .12em; white-space: nowrap; pointer-events: auto; }
body.tel header .podtytul { display: none; }
#tel-menu-przycisk {
  pointer-events: auto; margin-left: auto; width: 44px; height: 44px; padding: 12px 11px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--tel-tlo); border: 1px solid var(--tel-ramka); border-radius: 10px;
}
#tel-menu-przycisk span { display: block; height: 2px; background: var(--tel-druk); border-radius: 1px; transition: transform .15s ease, opacity .15s ease; }
body.tel-menu #tel-menu-przycisk span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.tel-menu #tel-menu-przycisk span:nth-child(2) { opacity: 0; }
body.tel-menu #tel-menu-przycisk span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

#tel-menu {
  position: fixed; z-index: 60; left: 8px; right: 8px;
  top: calc(var(--pasek-wys, 0px) + var(--tel-gora) + 4px);
  max-height: calc(100vh - var(--tel-gora) - var(--tel-dok, 56px) - 24px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px; background: var(--tel-tlo); color: var(--tel-druk);
  border: 1px solid var(--tel-ramka); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
#tel-menu[hidden] { display: none; }
#tel-menu .nawigacja { display: flex; flex-direction: column; gap: 0; margin: 0; pointer-events: auto; }
#tel-menu .nawigacja a {
  display: block; padding: 11px 2px; font-size: 16px; color: var(--tel-druk); text-decoration: none;
  border-bottom: 1px solid var(--tel-ramka);
}
#tel-menu .nawigacja a:last-child { border-bottom: 0; }
#tel-menu .wybor-jezyka, #tel-menu .motyw, #tel-menu .udost-naglowek, #tel-menu .plan { pointer-events: auto; margin: 0; align-self: flex-start; }
#tel-menu .wybor-jezyka select { font-size: 15px; padding: 6px 8px; }
#tel-menu .udost-naglowek .udost-przycisk span { display: inline; }
#tel-menu footer {
  position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 0 0; border-top: 1px solid var(--tel-ramka); background: none; pointer-events: auto; font-size: 12px;
}

/* ---------- pasek kafelków na dole ---------- */
#tel-dok { display: none; }
body.tel #tel-dok {
  position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, var(--tel-podklad) 55%, transparent);
}
body.tel #tel-dok::-webkit-scrollbar { display: none; }
.tel-kafelek {
  flex: 0 0 auto; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.1; color: var(--tel-druk);
  background: var(--tel-tlo); border: 1px solid var(--tel-ramka); border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.tel-kafelek[aria-pressed="true"] { border-color: var(--tel-akcent); color: var(--tel-akcent); font-weight: 600; }
.tel-kafelek-zdarzenie { border-color: var(--tel-akcent); max-width: 55vw; }

/* ---------- arkusze: karty i szczegóły ---------- */
body.tel #sterowanie, body.tel #panel-prawy {
  position: fixed; z-index: 40; left: 8px; right: 8px; top: auto;
  bottom: calc(var(--tel-dok, 56px) + var(--tel-os, 0px) + 2px);
  width: auto; max-height: none; height: auto; padding: 0; gap: 0;
  display: block !important; overflow: visible; background: none; pointer-events: none;
}
[dir="rtl"] body.tel #panel-prawy, [dir="rtl"] body.tel #sterowanie { left: 8px; right: 8px; }
body.tel #sterowanie > .karta:not(.tel-aktywna),
body.tel #panel-prawy > .karta:not(.tel-aktywna):not(#szczegoly) { display: none !important; }
body.tel #sterowanie > .karta.tel-aktywna:not([hidden]),
body.tel #panel-prawy > .karta.tel-aktywna:not([hidden]) {
  display: block !important; pointer-events: auto; margin: 0;
  max-height: calc(58vh - var(--tel-os, 0px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--tel-tlo); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
body.tel #karta-aktualnosci.tel-aktywna #ak-lista { max-height: none; }
body.tel #panel-prawy #szczegoly { display: none; }
body.tel #panel-prawy #szczegoly.otwarte:not(.tel-zwiniete) {
  display: block; pointer-events: auto; max-height: calc(50vh - var(--tel-os, 0px) / 2); overflow-y: auto; overscroll-behavior: contain;
  background: var(--tel-tlo); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
}

/* Przycisk zwijania arkusza: strzałka w dół, przyklejona do górnej krawędzi. */
.tel-zwin { display: none; }
body.tel .tel-zwin {
  display: block; position: sticky; top: 0; z-index: 3; float: right;
  width: 44px; height: 36px; margin: 0 0 -36px; padding: 0;
  background: transparent; border: 0;
}
body.tel .tel-zwin span {
  display: block; width: 11px; height: 11px; margin: 9px auto 0;
  border-right: 2px solid var(--tel-dim); border-bottom: 2px solid var(--tel-dim); transform: rotate(45deg);
}
[dir="rtl"] body.tel .tel-zwin { float: left; }
/* W szczegółach obok zwijania stoi krzyżyk zamknięcia. */
body.tel #szczegoly .tel-zwin { margin-right: 40px; }
[dir="rtl"] body.tel #szczegoly .tel-zwin { margin-right: 0; margin-left: 40px; }
body.tel #szczegoly #zamknij { z-index: 4; }

/* ---------- to, co na telefonie zasłaniało globus ---------- */
body.tel #kafelki-przelacz, body.tel #infografika, body.tel .szerzej { display: none !important; }
body.tel > footer { display: none; }
body.tel #infografika-panstwo { bottom: calc(var(--tel-dok, 56px) + 8px); }
body.tel-szczegoly #infografika-panstwo, body.tel-menu #infografika-panstwo { display: none; }

/* ---------- oś czasu (History) ---------- */
body.tel #panel-przelacz { display: none !important; }
body.tel #os {
  left: 8px; right: 8px; bottom: calc(var(--tel-dok, 56px) + 2px);
  height: auto; max-height: calc(100vh - var(--tel-gora) - var(--tel-dok, 56px) - 40px); overflow-y: auto;
  grid-template-rows: auto; padding: 6px 10px 8px; gap: 6px;
}
body.tel:not(.tel-os-pelna) #os .os-kolekcje,
body.tel:not(.tel-os-pelna) #os .os-stopka,
body.tel:not(.tel-os-pelna) #os .os-skala,
body.tel:not(.tel-os-pelna) #os .os-idz,
body.tel:not(.tel-os-pelna) #os .os-szukaj,
body.tel:not(.tel-os-pelna) #os .os-tryb { display: none !important; }
body.tel #os .os-tor { height: 54px; min-height: 54px; }
body.tel.tel-os-pelna #os .os-tor { height: 70px; }
body.tel #os .os-sterowanie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#tel-os-przelacz { display: none; }
body.tel #tel-os-przelacz {
  display: block; margin-left: auto; width: 44px; height: 36px; padding: 0;
  background: var(--tel-tlo); border: 1px solid var(--tel-ramka); border-radius: 18px;
}
body.tel #tel-os-przelacz span {
  display: block; width: 10px; height: 10px; margin: 5px auto 0;
  border-left: 2px solid var(--tel-druk); border-top: 2px solid var(--tel-druk); transform: rotate(45deg);
}
body.tel.tel-os-pelna #tel-os-przelacz span { margin-top: -2px; transform: rotate(225deg); }
[dir="rtl"] body.tel #tel-os-przelacz { margin-left: 0; margin-right: auto; }