/*
 * Nad Głową — warstwa wizualna wzorowana na lotniczej mapie nawigacyjnej.
 *
 * Stąd biorą się decyzje: włoskowate linie zamiast cieni, kanty proste
 * zamiast zaokrągleń, kondensowana antykwa w etykietach i magenta jako
 * jedyny mocny akcent — na mapie ICAO tym kolorem rysuje się granice
 * przestrzeni kontrolowanej, więc okrąg promienia statystyk dostaje go
 * nie dla ozdoby, tylko zgodnie z konwencją.
 *
 * Noc nie jest odwróconą kopią dnia: to ta sama mapa czytana w kabinie,
 * z przygaszonym papierem i podbitym akcentem.
 */
:root{
  --paper:#F7F8F4;        /* papier mapy — panele */
  --paper-dark:#D8DDD6;   /* margines arkusza — tło strony */
  --paper-line:#B7BEB4;   /* linia włoskowata */
  --paper-rule:#CDD3C8;   /* linia pomocnicza, słabsza */
  --ink:#11171C;
  --ink-soft:#5A656E;
  --ink-faint:#8B959C;
  --magenta:#BE1E63;      /* magenta lotnicza — jedyny mocny akcent */
  --amber:#8A5A12;        /* bistr — teren i przeszkody */
  --teal:#1B6084;         /* błękit mapy — woda, dane wtórne */
  --live:#3D6B45;
  --halo:#F7F8F4;         /* obwódka sylwetki samolotu na mapie */
  --rank-1:#6B7A85;
  --rank-2:#1B6084;
  --rank-3:#11171C;
  --rank-4:#8A5A12;
  --rank-5:#BE1E63;
  --rank-far:#9AA5AD;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#161D22;
    --paper-dark:#0C1116;
    --paper-line:#2E3941;
    --paper-rule:#232C33;
    --ink:#E4E9E4;
    --ink-soft:#95A1A9;
    --ink-faint:#6B767E;
    --magenta:#F0578F;
    --amber:#D8A45A;
    --teal:#5CA6D6;
    --live:#6FAE79;
    --halo:#0C1116;
    --rank-1:#8998A3;
    --rank-2:#5CA6D6;
    --rank-3:#DCE3E7;
    --rank-4:#D8A45A;
    --rank-5:#F0578F;
    --rank-far:#6A7780;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper-dark);
  color:var(--ink);
  font-family:'Barlow','Barlow Condensed',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-bottom:40px;
}
.wrap{max-width:520px;margin:0 auto;padding:18px 16px 0;}

/* Tabliczka tytułowa — na mapach nawigacyjnych stoi w rogu arkusza
   i podaje, co i w jakiej skali przedstawia. Tutaj robi to samo. */
.titleblock{
  border:1px solid var(--ink);
  padding:0;
  background:var(--paper);
  margin-bottom:16px;
}
.titleblock > *{padding-left:14px;padding-right:14px;}
.titleblock .row{padding-top:12px;}
.titleblock .sub{
  padding-top:10px;padding-bottom:10px;margin-top:12px;
  border-top:1px solid var(--paper-line);
  background:var(--paper-dark);
}
.eyebrow{
  font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;
}
h1{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:34px;
  margin:0 0 2px;letter-spacing:.01em;line-height:1;text-transform:uppercase;
}
h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;
  margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--paper-rule);
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);
}
.sub{font-size:13px;color:var(--ink-soft);margin:0;}
.note-text{font-size:12.5px;color:var(--ink-soft);margin:0 0 10px;}

.panel{
  margin-bottom:14px;
  background:var(--paper);
  border:1px solid var(--paper-line);
  padding:14px 16px;
}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

input[type=text],input[type=password],input[type=number]{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:13px;padding:9px 10px;
  border-radius:2px;border:1px solid var(--paper-line);background:var(--paper);
  color:var(--ink);width:100%;
}
.coordfields{display:flex;gap:8px;margin-top:8px;}
.coordfields input{width:50%;}
label.small{font-size:11px;color:var(--ink-soft);display:block;margin-bottom:4px;font-family:'Roboto Mono',ui-monospace,monospace;}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--ink-soft);}
.checkbox-row input{width:auto;}

.radiuschoices{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:12px;padding:7px 12px;
  border:1px solid var(--paper-line);background:var(--paper);color:var(--ink-soft);cursor:pointer;
}
.chip.active{background:var(--ink);color:var(--paper);}

button.primary{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;
}
button.ghost{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;
  border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
}
button.ghost.small{padding:6px 12px;font-size:12px;}
button:disabled{opacity:.45;cursor:default;}

.status-line{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:11.5px;color:var(--ink-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;
}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;}
.dot.live{background:var(--live);}
.dot.off{background:var(--rank-1);}

.compass-wrap{margin:16px 0;display:flex;justify-content:center;}
.compass{position:relative;width:240px;height:240px;}
.compass svg{width:100%;height:100%;}
.sweep{transform-origin:130px 130px;animation:sweep 5s linear infinite;}
@keyframes sweep{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* Tytuł sekcji prowadzi linię aż do prawej krawędzi, a licznik siada
   na niej po prawej — tak podpisuje się bloki na mapie. */
.section-title{
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink);
  margin:26px 0 10px;display:flex;align-items:center;gap:10px;
}
.section-title::after{
  content:"";flex:1;height:1px;background:var(--paper-line);
}
.section-title .count{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:11px;
  color:var(--ink-soft);border:1px solid var(--paper-line);
  padding:1px 6px;order:3;
}

.location-card{
  background:var(--paper);border:1px solid var(--paper-line);
  padding:10px 12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;
}
.location-card.active{
  background:var(--paper);border-left:3px solid var(--magenta);
  padding-left:9px;
}
.location-card .name{font-family:'Barlow Condensed',sans-serif;font-weight:600;}
.location-card .meta{font-family:'Roboto Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-soft);}
.location-card.active .name{color:var(--ink);}
.location-card .trash{color:var(--magenta);padding:6px;}

.flight-card{
  background:var(--paper);border:1px solid var(--paper-line);
  padding:11px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;
}
.flight-main .cs{font-family:'Roboto Mono',ui-monospace,monospace;font-weight:600;font-size:15px;}
.flight-main .airline{font-size:12.5px;color:var(--ink-soft);margin-top:1px;}
.flight-main .type{font-family:'Roboto Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-soft);margin-top:1px;}
.flight-meta{text-align:right;font-family:'Roboto Mono',ui-monospace,monospace;font-size:11.5px;color:var(--ink-soft);line-height:1.5;}
.flight-meta b{color:var(--ink);font-weight:600;}
.empty-note{font-size:13px;color:var(--ink-soft);padding:16px 4px;text-align:center;font-style:italic;}

.bar-row{margin-bottom:10px;}
.bar-label{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px;}
.bar-label .val{font-family:'Roboto Mono',ui-monospace,monospace;color:var(--ink-soft);}
.bar-track{height:7px;background:var(--paper-rule);overflow:hidden;}
.bar-fill{height:100%;}

.note-box{
  margin-top:20px;border-left:3px solid var(--amber);background:var(--paper-dark);
  padding:11px 13px;border-radius:0;font-size:12.5px;color:var(--ink-soft);line-height:1.5;
}
.error-banner{
  margin-top:10px;background:#F1DCD8;border:1px solid var(--magenta);color:#7A2244;
  font-size:12.5px;padding:9px 12px;border-radius:2px;
}

.modal-overlay{
  position:fixed;inset:0;background:rgba(11,16,20,.45);display:flex;align-items:flex-end;
  justify-content:center;z-index:50;
}
.modal{
  background:var(--paper);width:100%;max-width:520px;border-radius:0;
  padding:20px 18px 28px;max-height:85vh;overflow-y:auto;
}
.modal h2{font-family:'Barlow Condensed',sans-serif;font-size:18px;text-transform:none;letter-spacing:0;color:var(--ink);}

/* ---- Mapa (Leaflet) ---- */
#map{
  height:320px;
  border-radius:2px;
  border:1px solid var(--paper-line);
  margin-top:14px;
  z-index:1;
}
#pickerMap{
  height:200px;
  border-radius:2px;
  border:1px solid var(--paper-line);
  margin-top:6px;
  z-index:1;
}
.leaflet-container{background:var(--paper-dark);}
.home-marker{
  background:var(--magenta);
  border:2px solid var(--paper);
  border-radius:50%;
  width:16px;height:16px;
  box-shadow:0 1px 4px rgba(11,16,20,.4);
}
.leaflet-popup-content{
  font-family:'Barlow','Barlow Condensed',sans-serif;font-size:13px;
}
.leaflet-popup-content b{font-family:'Roboto Mono',ui-monospace,monospace;}

input[type=datetime-local]{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:12.5px;padding:8px 9px;
  border-radius:2px;border:1px solid var(--paper-line);background:var(--paper);
  color:var(--ink);width:100%;
}
input:disabled{opacity:.5;}
.bar-label .lastseen{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:10.5px;color:var(--ink-soft);
  display:block;font-weight:400;
}
.bar-label .route-tag{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:11px;color:var(--teal);
  margin-left:6px;
}

/* ---- Ciekawostki ---- */
.curio-grid{display:flex;flex-direction:column;gap:8px;}
.curio-card{
  background:var(--paper);border:1px solid var(--paper-line);
  padding:10px 13px;display:flex;align-items:center;gap:11px;
}
.curio-card .ico{font-size:16px;line-height:1;width:20px;text-align:center;flex-shrink:0;opacity:.85;}
.curio-card .body{flex:1;min-width:0;}
.curio-card .lbl{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
}
.curio-card .val{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.curio-card .det{font-size:12px;color:var(--ink-soft);}
.curio-card .tm{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:10.5px;color:var(--ink-soft);
  text-align:right;white-space:nowrap;
}

/* ---- Log najciekawszych momentów ---- */
.hl-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 0;border-bottom:1px solid var(--paper-line);
}
.hl-item:last-child{border-bottom:none;}
.hl-item .ico{font-size:15px;line-height:1.3;}
.hl-item .txt{flex:1;min-width:0;}
.hl-item .ttl{font-size:13px;font-weight:500;}
.hl-item .sub{font-size:11.5px;color:var(--ink-soft);font-family:'Roboto Mono',ui-monospace,monospace;}
.hl-item .tm{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:10.5px;color:var(--ink-soft);white-space:nowrap;
}

/* ---- Wykres ruchu ---- */
.chart-wrap{
  background:var(--paper-dark);border:1px solid var(--paper-line);
  border-radius:2px;padding:14px 12px 8px;
}
.chart-bars{display:flex;align-items:flex-end;gap:2px;height:120px;}
.chart-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0;}
.chart-bar{
  width:100%;background:var(--teal);border-radius:0;min-height:2px;
  transition:height .2s;
}
.chart-bar.peak{background:var(--magenta);}
.chart-lbl{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:8.5px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;
}
.chart-val{font-family:'Roboto Mono',ui-monospace,monospace;font-size:8.5px;color:var(--ink);}

/* ---- Alerty ---- */
select{
  font-family:'Barlow','Barlow Condensed',sans-serif;font-size:13px;padding:9px 8px;
  border-radius:2px;border:1px solid var(--paper-line);background:var(--paper);color:var(--ink);
}
.alert-card{
  background:var(--paper);border:1px solid var(--paper-line);border-radius:2px;
  padding:9px 11px;margin-bottom:6px;display:flex;align-items:center;gap:8px;
}
.alert-card.off{opacity:.5;}
.alert-card .desc{flex:1;font-size:13px;}

/* ---- Porównanie lokalizacji ---- */
.cmp-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.cmp-table th,.cmp-table td{
  padding:7px 6px;text-align:right;border-bottom:1px solid var(--paper-line);
}
.cmp-table th{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft);font-weight:500;
}
.cmp-table td:first-child,.cmp-table th:first-child{text-align:left;font-weight:500;}
.cmp-table tbody tr:last-child td{border-bottom:none;}

/* ---- Zakładki trybów ---- */
/* Zakładki jako pasek kart z podkreśleniem — bez pigułek i wypełnień.
   Przy długich nazwach pasek przewija się w poziomie zamiast łamać
   etykiety na trzy wiersze. */
.tabs{
  display:flex;gap:0;margin-bottom:12px;
  border-bottom:1px solid var(--paper-line);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:0 0 auto;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  padding:8px 14px;border:none;background:transparent;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  color:var(--ink-faint);cursor:pointer;transition:color .15s,border-color .15s;
}
.tab:first-child{padding-left:0;}
.tab.active{color:var(--ink);border-bottom-color:var(--magenta);}
.tab:not(.active):hover{color:var(--ink-soft);}
.tab:focus-visible{outline:2px solid var(--magenta);outline-offset:-2px;}

/* ---- Wykres: wersja graficzna ---- */
.chart-card{
  background:var(--paper);
  border:1px solid var(--paper-line);padding:16px 14px 10px;
  position:relative;overflow:hidden;
}
.chart-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;font-family:'Roboto Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-soft);
}
.chart-head b{font-family:'Barlow Condensed',sans-serif;font-size:20px;color:var(--ink);font-weight:700;}
.chart-plot{position:relative;height:150px;margin-bottom:4px;}
.chart-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;}
.chart-grid span{
  border-top:1px dashed var(--paper-line);font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:8.5px;color:var(--ink-soft);padding-left:1px;line-height:1;
}
.chart-avg{
  position:absolute;left:0;right:0;border-top:1.5px dashed var(--magenta);opacity:.55;pointer-events:none;
}
.chart-avg::after{
  content:attr(data-label);position:absolute;right:0;top:-13px;
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:8.5px;color:var(--magenta);
}
.chart-bars2{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;}
.chart-col2{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;min-width:0;cursor:default;position:relative;}
.chart-bar2{
  width:100%;min-height:2px;
  background:var(--teal);
  transition:background .2s;
}
.chart-col2:hover .chart-bar2{background:var(--magenta);}
.chart-bar2.peak{background:linear-gradient(180deg,var(--magenta) 0%,rgba(178,58,107,.55) 100%);}
.chart-tip{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px;padding:3px 7px;border-radius:2px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;margin-bottom:4px;z-index:5;
}
.chart-col2:hover .chart-tip{opacity:1;}
.chart-xaxis{display:flex;gap:2px;}
.chart-xlbl{
  flex:1;text-align:center;font-family:'Roboto Mono',ui-monospace,monospace;font-size:8.5px;
  color:var(--ink-soft);overflow:hidden;white-space:nowrap;min-width:0;
}

/* ---- Rozszerzony opis w statystykach ---- */
.bar-label .meta-line{
  display:block;font-family:'Roboto Mono',ui-monospace,monospace;font-size:10px;
  color:var(--ink-soft);margin-top:2px;line-height:1.4;
}

/* ---- Zdjęcia samolotów: dwa warianty ---- */

/* WARIANT A — zdjęcie pod spodem, na całą szerokość */
.flight-card.photo-below{
  flex-direction:column;align-items:stretch;gap:10px;padding:11px 12px 12px;
}
.flight-card.photo-below .fc-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
/* WARIANT B — zdjęcia w kolumnie obok, po lewej */
.flight-card.photo-side{
  align-items:flex-start;gap:11px;
}
.flight-card.photo-side .flight-main{flex:1;min-width:0;}
.flight-card.photo-side .flight-meta{padding-top:2px;}

/* Etykieta rozmiaru w sekcji największych samolotów */
.bar-label .size-tag{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:2px;
  background:var(--ink);color:var(--paper);
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:9.5px;vertical-align:1px;
}

/* Atrybucja zdjęć — wymagana przez regulamin Planespotters */
.photo-credit{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:9px;color:var(--ink-soft);
  padding:3px 2px 0;text-align:right;line-height:1.3;
}
.photo-credit a{color:var(--teal);text-decoration:none;}
.photo-credit a:hover{text-decoration:underline;}
.fc-media .photo-credit{text-align:center;font-size:8px;}


/* ---- Legenda mapy (dwa promienie) ---- */
.map-legend{
  display:flex;flex-direction:column;gap:5px;margin-top:8px;padding:9px 11px;
  background:var(--paper);border:1px solid var(--paper-line);
  font-size:11.5px;color:var(--ink-soft);
}
.map-legend span{display:flex;align-items:center;gap:7px;}
.map-legend b{color:var(--ink);font-family:'Roboto Mono',ui-monospace,monospace;}
.dot-legend{width:11px;height:11px;border-radius:50%;flex-shrink:0;display:inline-block;}
.dot-legend.near{background:var(--magenta);}
.dot-legend.far{background:transparent;border:1px dashed var(--teal);}


/* ---- Zdjęcie poglądowe typu w statystykach ---- */
.bar-row.with-photo{display:flex;gap:11px;align-items:flex-start;}
.type-photo{
  flex-shrink:0;width:104px;height:70px;border-radius:2px;overflow:hidden;
  border:1px solid var(--paper-line);background:var(--paper-dark);
  display:flex;align-items:center;justify-content:center;
}
.type-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.type-photo .placeholder{font-size:22px;opacity:.35;}
.bar-row.with-photo .bar-body{flex:1;min-width:0;}
.type-photo-credit{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:8.5px;color:var(--ink-soft);
  margin-top:2px;text-align:center;
  /* Miejsce zarezerwowane z góry: podpis dolatuje sekundę po liście i bez
     tego cała zawartość poniżej przeskakiwałaby w dół */
  min-height:12px;
}
.type-photo-credit a{color:var(--teal);text-decoration:none;}
@media (max-width:380px){
  .type-photo{width:82px;height:56px;}
}

/* ---- Legenda rozmiarów samolotów ---- */
.size-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:10.5px;}

/* Prognoza zbliżenia w dymku na mapie */
.popup-approach{
  margin-top:6px;padding:6px 8px;border-radius:2px;
  background:rgba(62,124,140,.12);border-left:2px solid var(--teal);
  font-size:12px;line-height:1.45;
}
.popup-approach b{color:var(--ink);}


/* ---- Lista nadlatujących ---- */
.incoming-card{
  background:var(--paper);border:1px solid var(--paper-line);
  padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:11px;
}
.incoming-card.notable{
  border-left:3px solid var(--magenta);
}
.incoming-card.notable-3{
  border-color:#B23A6B;
  box-shadow:0 0 0 2px rgba(178,58,107,.14);
}
.incoming-size{
  flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--paper);font-size:13px;
}
.incoming-body{flex:1;min-width:0;}
.incoming-cs{font-family:'Roboto Mono',ui-monospace,monospace;font-weight:600;font-size:14.5px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.incoming-sub{font-size:12px;color:var(--ink-soft);margin-top:1px;}
.incoming-why{
  font-size:11.5px;color:var(--magenta);margin-top:3px;font-weight:500;
}
.incoming-timer{
  flex-shrink:0;text-align:right;font-family:'Roboto Mono',ui-monospace,monospace;
}
.incoming-timer .cd{
  font-size:19px;font-weight:600;color:var(--ink);line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.incoming-timer .cd.soon{color:var(--magenta);}
.incoming-timer .dir{font-size:10.5px;color:var(--ink-soft);margin-top:2px;}

.alert-bang{
  color:#C4213D;font-weight:700;font-size:15px;
  animation:bangPulse 1.8s ease-in-out infinite;
}
@keyframes bangPulse{0%,100%{opacity:1;}50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){ .alert-bang{animation:none;} }

/* ---- Stopka ---- */
.app-footer{
  margin-top:34px;padding:18px 4px 10px;
  border-top:1.5px solid var(--paper-line);
}
.footer-main{
  font-size:13px;color:var(--ink);line-height:1.6;margin-bottom:12px;
}
.footer-main strong{font-family:'Barlow Condensed',sans-serif;}
.footer-legal{font-size:10.5px;color:var(--ink-soft);line-height:1.55;}
.footer-legal p{margin:0 0 7px;}
.footer-legal a{color:var(--teal);text-decoration:none;}
.footer-legal a:hover{text-decoration:underline;}


/* ================= Znacznik samolotu na mapie =================
   Sama sylwetka, bez kółka pod spodem: rozmiar i kolor niosą informację
   o wielkości maszyny (tak jak w legendzie), a obrót — o kierunku lotu.
   Obrót jest płynny, żeby przy odświeżeniu danych samolot nie "przeskakiwał". */
.type-photo-slot{flex-shrink:0;width:104px;}
.type-photo-slot .type-photo{width:100%;}
@media (max-width:380px){ .type-photo-slot{width:82px;} }

.plane-glyph{
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s ease-out;
}
.plane-glyph.far{opacity:.85;}
.plane-glyph svg{overflow:visible;}

/* Ta sama sylwetka przy numerze lotu na liście nadlatujących */
.incoming-glyph{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* ================= Zdjęcia na kartach przelotów ================= */
.fc-media{display:flex;flex-direction:column;gap:6px;flex-shrink:0;width:118px;}
.fc-media .type-photo-slot{width:118px;}
.fc-media .type-photo{width:118px;height:78px;}
.fc-airframe img{
  width:118px;height:62px;object-fit:cover;border-radius:2px;display:block;
  border:1px solid var(--paper-line);
}
.flight-card.photo-below .fc-media{
  flex-direction:row;width:auto;gap:10px;margin-top:10px;
}
.flight-card.photo-below .fc-media > div{flex:1;min-width:0;}
.flight-card.photo-below .fc-media .type-photo{width:100%;height:150px;}
.flight-card.photo-below .fc-airframe img{width:100%;height:150px;}
@media (max-width:380px){
  .fc-media, .fc-media .type-photo-slot{width:92px;}
  .fc-media .type-photo{width:92px;height:62px;}
  .fc-airframe img{width:92px;height:52px;}
}

/* Podpis pod zdjęciem modelu — nazwa hasła w Wikipedii */
.type-photo-caption{
  font-size:9.5px;line-height:1.3;color:var(--ink-soft);text-align:center;
  margin-top:3px;overflow:hidden;
  /* Dwa wiersze na stałe — patrz uwaga przy .type-photo-credit */
  height:25px;
}
.type-photo-caption a{color:var(--teal);text-decoration:none;}
.type-photo-caption a:hover{text-decoration:underline;}

/* Liczba miejsc — wartość orientacyjna, stąd stonowana forma */
.seats-tag{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:2px;
  background:var(--paper-line);color:var(--ink-soft);
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:9.5px;vertical-align:1px;
}
.seats-tag.empty{display:none;}
.flight-main .type.seats{color:var(--ink-soft);}

/* ================= Logotypy linii lotniczych ================= */
.airline-logo{
  flex-shrink:0;width:56px;height:34px;border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--paper-dark);border:1px solid var(--paper-line);overflow:hidden;
}
.airline-logo img{max-width:100%;max-height:26px;object-fit:contain;display:block;}
.airline-logo .mono-badge{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:11px;font-weight:600;
  color:var(--ink-soft);letter-spacing:.5px;
}
.airline-logo .logo-credit{display:none;} /* pełna atrybucja w tooltipie */
.bar-row.with-logo{display:flex;gap:11px;align-items:flex-start;}
.bar-row.with-logo .airline-logo{width:74px;height:46px;}
.bar-row.with-logo .airline-logo img{max-height:36px;}
.bar-row.with-logo .bar-body{flex:1;min-width:0;}

/* Logo obok nazwy przewoźnika na karcie przelotu */
.flight-main .airline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.flight-main .airline .airline-logo{width:34px;height:22px;border-radius:2px;}
.flight-main .airline .airline-logo img{max-height:18px;}
.flight-main .airline .airline-logo .mono-badge{font-size:8.5px;}

/* ================= Zdjęcia na liście nadlatujących ================= */
.incoming-media{flex-shrink:0;width:88px;display:flex;flex-direction:column;gap:5px;}
.incoming-media .type-photo-slot{width:88px;}
.incoming-media .type-photo{width:88px;height:58px;}
.incoming-airframe img{
  width:88px;height:46px;object-fit:cover;border-radius:2px;display:block;
  border:1px solid var(--paper-line);
}
.incoming-cs .incoming-glyph{margin-right:2px;}

/* ================= Najciekawsze momenty ================= */
.hl-media{flex-shrink:0;}
.hl-media .type-photo-slot{width:64px;}
.hl-media .type-photo{width:64px;height:44px;}
.hl-media .type-photo-caption,
.hl-media .type-photo-credit{display:none;} /* pełny opis jest w sekcjach statystyk */
.hl-media .airline-logo{width:64px;height:40px;}

/* ================= Wykres "dzisiaj" ================= */
#todayChart{margin-bottom:4px;}

/* ================= Przycisk push w nagłówku =================
   Stan widać od razu, bez wchodzenia w ustawienia: zielona kropka i „ON"
   albo wygaszone „OFF". Ten sam przycisk włącza i wyłącza. */
.head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.push-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  padding:8px 12px;cursor:pointer;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  transition:background .15s,color .15s;
}
.push-btn b{font-weight:700;letter-spacing:.5px;}
.push-btn.on{
  background:var(--ink);color:var(--paper);
}
.push-btn.on b::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--live);margin-right:5px;vertical-align:1px;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}
.push-btn.off{color:var(--ink-soft);border-color:var(--paper-line);}
.push-btn:disabled{opacity:.45;cursor:default;}

/* ================= Wybór sekcji: statki powietrzne i loty ================= */
.tabs.subtabs{margin-top:6px;}
.tabs.subtabs .tab{font-size:12.5px;padding:6px 12px;}
.tabs.subtabs .tab:first-child{padding-left:0;}
.tab-count{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:9.5px;opacity:.65;
  margin-left:3px;
}

.chipbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;}
.chipbar .chip{
  font-family:'Barlow','Barlow Condensed',sans-serif;font-size:12.5px;
  padding:6px 13px;border-radius:2px;cursor:pointer;
  border:1px solid var(--paper-line);background:var(--paper-dark);color:var(--ink-soft);
}
.chipbar .chip.active{
  background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600;
}
.chip-count{font-family:'Roboto Mono',ui-monospace,monospace;font-size:10px;opacity:.7;margin-left:4px;}

.stat-block{margin-bottom:18px;}
.sub-title{
  font-family:'Barlow Condensed',sans-serif;font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);
  margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--paper-line);
}

/* ================= Wyjaśnienia w stopce ================= */
.footer-guide{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-line);
  font-size:12.5px;line-height:1.6;color:var(--ink-soft);
}
.footer-guide h3{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.7px;color:var(--ink);
  margin:14px 0 6px;
}
.footer-guide h3:first-child{margin-top:0;}
.footer-guide p{margin:0 0 9px;}
.footer-guide b{color:var(--ink);}


/* ================= Zwinięty podpis licencyjny =================
   Pełna atrybucja bywa dłuższa niż samo zdjęcie i rozpychała listę.
   Widać więc samo słowo „licencja": po najechaniu dymek systemowy,
   po kliknięciu pełny opis z odnośnikami. */
.lic{display:inline-block;max-width:100%;}
.lic-toggle{
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.3px;
  color:var(--ink-soft);background:none;border:0;padding:1px 0;cursor:pointer;
  border-bottom:1px dotted var(--ink-soft);line-height:1.2;
}
.lic-toggle:hover,.lic-toggle.open{color:var(--teal);border-bottom-color:var(--teal);}
.lic-toggle::before{content:"ⓘ ";}
.lic-body{
  display:block;margin-top:3px;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:8.5px;line-height:1.4;color:var(--ink-soft);
  word-break:break-word;overflow-wrap:anywhere;
}
.lic-body[hidden]{display:none;}
.lic-body a{color:var(--teal);text-decoration:none;}
.lic-body a:hover{text-decoration:underline;}

/* Podpis z nazwą modelu też ma się mieścić w kolumnie ze zdjęciem */
.type-photo-caption{word-break:break-word;overflow-wrap:anywhere;}

/* ==========================================================================
   WERSJA NA KOMPUTER
   ==========================================================================
   Telefon zostaje bez zmian — jedna kolumna, wszystko po kolei, bo tak się
   trzyma aplikację w ręce na dworze. Duży ekran to inna sytuacja: mapa może
   zostać na widoku, a obok niej przewija się dziennik i statystyki. Dlatego
   od 900 px układ rozdziela się na dwie kolumny, a mapa przykleja się do
   góry ekranu zamiast uciekać przy przewijaniu.

   To jeden arkusz, nie dwa osobne pliki — dwie wersje rozjechałyby się
   przy pierwszej poprawce. */

#activeLocationSection{display:block;}

@media (min-width:900px){
  .wrap{max-width:1180px;padding:24px 24px 0;}

  /* Panele sterujące obok siebie — na telefonie były jeden pod drugim */
  .panele-gorne{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
  }
  .panele-gorne .panel{margin-bottom:0;}

  /* Mapa po lewej i przyklejona; dane przewijają się obok */
  #activeLocationSection{
    display:grid;
    grid-template-columns:minmax(400px,5fr) 6fr;
    gap:0 26px;
    align-items:start;
    margin-top:14px;
  }
  .col-mapa{position:sticky;top:20px;}
  .col-dane{min-width:0;}

  #map{
    height:calc(100vh - 230px);
    min-height:420px;max-height:760px;
    margin-top:0;
  }

  /* Zakres danych stoi nad mapą, w tej samej kolumnie co ona */
  #activeLocationSection > .panel{grid-column:1;}
  .col-mapa{grid-column:1;}
  .col-dane{grid-column:2;grid-row:1 / span 3;}

  /* Długi tekst nie może się ciągnąć przez całą szerokość ekranu */
  .note-text,.footer-guide p,.footer-legal p,.sub{max-width:68ch;}

  /* Nagłówek: tytuł i przyciski w jednej linii, bez rozjeżdżania */
  .titleblock h1{font-size:40px;}

  /* Ekran logowania nie ma powodu być szeroki */
  #loginView{max-width:420px;margin:60px auto 0;}
}

/* O tym, czy coś zmieści się w dwóch kolumnach, decyduje szerokość KOLUMNY
   DANYCH, a nie okna — przy przyklejonej mapie to dwie różne rzeczy.
   Stąd zapytanie kontenerowe zamiast kolejnego progu okna. */
.col-dane{container-type:inline-size;container-name:dane;}

@container dane (min-width:620px){
  /* Ciekawostki to krótkie kafelki — w dwóch kolumnach czytają się lepiej
     i przestają rozciągać stronę w nieskończoność */
  .curio-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start;}

  /* Na szerokiej karcie liczby odrywały się od reszty i wisiały samotnie
     przy prawej krawędzi. Zamiast tego dostają własną kolumnę oddzieloną
     włoskowatą kreską — jak blok danych na marginesie mapy. */
  .flight-card .flight-meta,
  .incoming-card .incoming-timer{
    min-width:140px;padding-left:14px;
    border-left:1px solid var(--paper-rule);
    align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  }
  .flight-card{align-items:stretch;}
  .flight-card.photo-side .flight-meta{padding-top:0;}

  /* Na telefonie opis samolotu jest kolumną, bo szerokości nie ma.
     Tutaj jest, więc typ, miejsca, trasa i rejestracja układają się w jeden
     wiersz — karta przestaje być wąskim paskiem tekstu w morzu pustki. */
  .flight-card .flight-main{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 16px;align-content:flex-start;
  }
  .flight-card .flight-main .cs{flex-basis:100%;margin-bottom:2px;}
  .flight-card .flight-main .incoming-why{flex-basis:100%;}
  .flight-card .flight-main .type{margin-top:0;}
}

@media (min-width:1600px){
  .wrap{max-width:1480px;}
  #map{max-height:820px;}
}

/* Mysz zamiast palca — dopiero wtedy stany najechania mają sens */
@media (hover:hover) and (pointer:fine){
  .flight-card,.incoming-card,.curio-card,.location-card{
    transition:border-color .15s;
  }
  .flight-card:hover,.incoming-card:hover,.curio-card:hover{
    border-color:var(--ink-faint);
  }
  .bar-row:hover .bar-fill{filter:brightness(1.12);}
  button.ghost:hover{background:var(--ink);color:var(--paper);}
  button.primary:hover{opacity:.88;}
  .lic-toggle:hover{cursor:help;}
}


/* ---- Stan serwera (stopka) ---- */
/* Zwinięty domyślnie: to podgląd dla właściciela, nie treść dla czytelnika. */
.diag{
  margin:18px 0 22px;border-top:1px solid var(--paper-line);padding-top:12px;
}
.diag > summary{
  cursor:pointer;font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.diag > summary:hover{color:var(--ink);}
.diag-body{margin-top:10px;font-size:12px;}
.diag-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 18px;
}
.diag-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--paper-line);padding:3px 0;}
.diag-row .k{color:var(--ink-soft);}
.diag-row .v{font-family:'Roboto Mono',ui-monospace,monospace;font-weight:500;text-align:right;}
.diag-row .v.zle{color:var(--magenta);}
.diag-row .v.ok{color:var(--teal);}
.diag h4{
  font-family:'Barlow Condensed',system-ui,sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin:14px 0 6px;
}


/* ---- Dostępność ---- */
/*
 * Widoczny fokus dla klawiatury. Sam kontur przeglądarki bywa niewidoczny
 * na papierowym tle, więc rysujemy własny — magentą, tak jak akcent
 * na mapie — i tylko przy nawigacji klawiaturą (:focus-visible), żeby nie
 * obrysowywał wszystkiego po kliknięciu myszą.
 */
:where(a, button, input, select, summary, [tabindex]):focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:2px;
  border-radius:1px;
}

/*
 * Ruch tylko dla tych, którzy go chcą. Obracające się sylwetki i pulsujący
 * wykrzyknik przy ciekawej maszynie potrafią przyprawić o mdłości osoby
 * wrażliwe na animacje — a nic nie wnoszą poza ozdobą.
 */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ---- Brak połączenia ---- */
/* Pasek pojawia się tylko wtedy, gdy ma co powiedzieć — pusty nie zajmuje
   miejsca, więc układ strony nie drga przy każdej zmianie stanu sieci. */
.offline-bar:empty{display:none;}
.offline-bar{color:var(--magenta);margin-top:6px;}
.dot.off{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--magenta);margin-right:6px;vertical-align:middle;
}


/* Trasa, której nie dało się potwierdzić pozycją samolotu */
.trasa-niepewna{
  display:inline-block;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:10px;font-weight:600;color:var(--ink-faint);
  border:1px solid var(--paper-line);border-radius:2px;
  width:13px;height:13px;line-height:12px;text-align:center;
  vertical-align:middle;cursor:help;
}