/* Komponenty: karta szansy, godziny, kafelki, panele, wykresy, oś czasu, mapa i lista miejsc. */
/* Karty strony głównej: tło, obwódka i efekt wciśnięcia wspólne dla karty szansy, godzin i kafelków. */
.card {
  position: relative;
  border: 1px solid var(--card-border);
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text);
  text-align: left;
}
.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sub);
}
.card-title i {
  font-style: normal;
  font-size: 1.1rem;
  line-height: 0.8;
}
.data-tile,
.hour,
.chance {
  cursor: pointer;
  transition: var(--press);
}
.data-tile:active,
.chance:has(.chance-link:active),
.hour:active {
  transform: scale(var(--press-scale));
}

/* Zorza w tle strony: zielona i fioletowa plama i mniejsza zielona obok, które rosną z poziomem szansy
   (data-level 0–4, jak opis słowny). Przy małej szansie świecą przy prawej krawędzi obok bloku szansy, przy bardzo dużej
   zalewają górę ekranu. Stoją w miejscu przy przewijaniu jak niebo, a treść przesuwa się nad nimi. */
@property --g-o {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --v-o {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
/* Oddychanie: jasność każdej plamy powoli rośnie i spada we własnym tempie. */
@property --breath {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.aurora-sky {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100%, 560px);
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  /* Safari maluje pasek u góry jednolitym kolorem strony, więc zorza wchodzi łagodnie od ciemnej góry zamiast urywać się pod paskiem. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 160px);
  mask-image: linear-gradient(to bottom, transparent, #000 160px);
  transition:
    --g-o 2s ease,
    --v-o 2s ease;
}
.aurora-sky i {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;
  transition:
    left 2s ease,
    top 2s ease,
    width 2s ease,
    height 2s ease;
}
.aurora-green {
  left: var(--g-x);
  top: var(--g-y);
  width: var(--g-w);
  height: var(--g-h);
  opacity: calc(var(--g-o) * var(--breath));
  background: radial-gradient(closest-side, var(--aurora-green), rgb(90 195 105 / 0.5) 45%, transparent);
  animation:
    aurora-drift 18s ease-in-out infinite alternate,
    aurora-breath 8s ease-in-out infinite alternate;
}
/* Mniejsza zielona plama na lewo i wyżej od dużej, w innym tempie: kształt zorzy się zmienia, a nie tylko przesuwa. */
.aurora-green-2 {
  left: calc(var(--g-x) - var(--g-w) * 0.28);
  top: calc(var(--g-y) - var(--g-h) * 0.1);
  width: calc(var(--g-w) * 0.55);
  height: calc(var(--g-h) * 0.55);
  opacity: calc(var(--g-o) * 0.8 * var(--breath));
  background: radial-gradient(closest-side, var(--aurora-green), rgb(90 195 105 / 0.4) 50%, transparent);
  animation:
    aurora-drift-2 13s ease-in-out infinite alternate,
    aurora-breath 11s ease-in-out -4s infinite alternate;
}
.aurora-violet {
  z-index: -1;
  left: var(--v-x);
  top: var(--v-y);
  width: var(--v-w);
  height: var(--v-h);
  opacity: calc(var(--v-o) * var(--breath));
  background: radial-gradient(closest-side, var(--aurora-violet), rgb(65 43 93 / 0.6) 50%, transparent);
  animation:
    aurora-drift 23s ease-in-out infinite alternate-reverse,
    aurora-breath 9s ease-in-out -3s infinite alternate;
}
.aurora-sky[data-level="0"] {
  --g-x: 104%; --g-y: 230px; --g-w: 200px; --g-h: 320px; --g-o: 0.4;
  --v-x: 86%; --v-y: 250px; --v-w: 200px; --v-h: 280px; --v-o: 0.7;
}
.aurora-sky[data-level="1"] {
  --g-x: 98%; --g-y: 220px; --g-w: 320px; --g-h: 400px; --g-o: 0.55;
  --v-x: 78%; --v-y: 290px; --v-w: 280px; --v-h: 320px; --v-o: 0.8;
}
.aurora-sky[data-level="2"] {
  --g-x: 82%; --g-y: 190px; --g-w: 520px; --g-h: 500px; --g-o: 0.7;
  --v-x: 60%; --v-y: 380px; --v-w: 460px; --v-h: 320px; --v-o: 0.9;
}
.aurora-sky[data-level="3"] {
  --g-x: 60%; --g-y: 130px; --g-w: 860px; --g-h: 680px; --g-o: 0.9;
  --v-x: 45%; --v-y: 480px; --v-w: 700px; --v-h: 300px; --v-o: 1;
}
.aurora-sky[data-level="4"] {
  --g-x: 50%; --g-y: 150px; --g-w: 1040px; --g-h: 780px; --g-o: 1;
  --v-x: 45%; --v-y: 550px; --v-w: 900px; --v-h: 320px; --v-o: 1;
}
@keyframes aurora-drift {
  from {
    transform: translate(-3%, 1.5%) scale(1) rotate(-3deg);
  }
  to {
    transform: translate(3%, -2%) scale(1.1) rotate(3deg);
  }
}
@keyframes aurora-drift-2 {
  from {
    transform: translate(4%, -3%) scale(1.15) rotate(5deg);
  }
  to {
    transform: translate(-4%, 3%) scale(0.95) rotate(-5deg);
  }
}
@keyframes aurora-breath {
  from {
    --breath: 0.7;
  }
  to {
    --breath: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-sky i {
    animation: none;
  }
}

/* Blok szansy: tekst wprost na tle, bez ramki, 32 px nad i pod. Całość otwiera „Skąd ten wynik”. */
.chance {
  position: relative;
  padding: 32px var(--text-inset);
  color: var(--text);
}
/* Sekcja pod blokiem szansy: blok ma już własne 32 px, więc dokładamy tylko 16. */
.chance + .section {
  margin-top: 16px;
}
.chance-link {
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
/* Rozciągnięty przycisk: kliknięcie w dowolne miejsce karty działa jak kliknięcie w tytuł. */
.chance-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* Słowny opis szansy po lewej, liczba procent po prawej, oba 28 px. */
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  font-size: 1.75rem;
  line-height: 34px;
}
.score-row strong {
  font-weight: 500;
}
/* W bloku szansy teksty są co 8 px, tylko pod opisem szansy 16 px. */
.summary {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  line-height: 20px;
  color: var(--sub);
}
/* Zapowiedź na dole karty szansy: zmiana chmur i najlepsza godzina, którą widać potem w pasku godzin. */
.outlook {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--sub-65);
}
.outlook[hidden] {
  display: none;
}

/* Godziny: pigułki przewijane w poziomie aż do krawędzi ekranu. */
.hourly {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.hourly::-webkit-scrollbar {
  display: none;
}
/* Wymiary z Figmy: 70×123, padding 20/16, gap 12. Wybrana godzina ma tło i obwódkę kafelka, pozostałe słabsze tło bez obwódki.
   Rozmycie tła (szkło) jest wspólne z kafelkami, przy regule .data-tile. */
.hour {
  flex: 0 0 70px;
  height: 123px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border: 1px solid transparent;
  border-radius: 30px;
  /* Poświata zorzy od dołu pigułki. --aurora (0–1) ustawia hours.js: im większa szansa, tym jaśniej i wyżej. */
  background: radial-gradient(
      ellipse 130% calc(35% + var(--aurora, 0) * 60%) at 50% 100%,
      rgb(var(--glow-rgb) / calc(var(--aurora, 0) * 0.95)),
      rgb(var(--glow-rgb) / calc(var(--aurora, 0) * 0.4)) 55%,
      transparent
    )
    no-repeat border-box;
  background-color: var(--card-soft);
  color: var(--text);
}
.hour[aria-pressed="true"] {
  background-color: var(--card);
  border-color: var(--card-border);
}
.hour time {
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--sub);
}
/* „Teraz” na biało, żeby odróżniało się od kolejnych godzin. */
.hour time.now {
  color: var(--text);
}
.hour strong {
  font-size: 0.9375rem;
  line-height: 20px;
  font-weight: 500;
}
.icon {
  display: block;
  width: 24px;
  height: 24px;
}
.hour-detail {
  margin: 16px 0 0;
  padding-inline: var(--text-inset);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sub);
}
/* Drobne teksty wprost na tle: strefa czasowa i pewność prognozy. */
.note {
  margin: 12px 0 0;
  padding-inline: var(--text-inset);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--sub-65);
}
.note[hidden] {
  display: none;
}
.confidence {
  margin-top: 24px;
}

/* Kafelki danych. */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
/* Kafelki i pigułki godzin to szkło: rozmywają zorzę w tle. */
.data-tile,
.hour {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.data-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.tile-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 20px;
}
.tile-icon:empty {
  display: none;
}
/* Wysokości linii z Figmy: 21 px → 27 px, 15 px → 20 px. */
.tile-number {
  font-size: 1.3125rem;
  line-height: 27px;
  font-weight: 500;
}
.tile-status {
  font-size: 0.9375rem;
  line-height: 20px;
  color: var(--sub);
}
/* Kolor stanu kafelka aktywności: szary gdy nie sprzyja zorzy, jaśniejszy neutralnie, zielony gdy sprzyja, fiolet gdy mocno sprzyja. */
.data-tile[data-level="0"] {
  --state: var(--sub-65);
}
.data-tile[data-level="1"] {
  --state: var(--sub);
}
.data-tile[data-level="2"] {
  --state: var(--green);
}
.data-tile[data-level="3"] {
  --state: var(--violet);
}
.data-tile[data-level] .tile-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--state);
  vertical-align: 1px;
}
/* Wskaźnik pod opisem: miernik z segmentów albo mini wykres z 2 godzin. */
.tile-viz {
  display: block;
  height: 32px;
  margin-top: 16px;
}
.tile-viz:empty {
  display: none;
}
.meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
}
.meter i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}
.meter i.on {
  background: var(--state);
}
.spark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.spark path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.spark-line {
  stroke: var(--state);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.spark .spark-area {
  fill: var(--green);
  opacity: 0.22;
}
.spark-rule {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}
.spark-rule.dashed {
  stroke-dasharray: 3 3;
}
.next-change {
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sub-65);
}
.next-change:empty {
  display: none;
}

/* Panele wysuwane od dołu. Klasa .open włącza animację, a hidden ustawia sheet.js po jej zakończeniu. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sheet-backdrop.open {
  opacity: 1;
}
/* Wspólne dla paneli (.sheet): wysuwanie od dołu i układ, w którym nagłówek stoi w miejscu, a przewija się tylko .sheet-scroll.
   Wysokość w dvh, bo na iPhonie vh nie uwzględnia paska adresu. */
/* Panel dostaje fokus po otwarciu (ui/sheet.js); bez obwódki, bo to nie jest kontrolka. */
.sheet:focus {
  outline: none;
}

.sheet {
  position: fixed;
  z-index: 21;
  left: 50%;
  bottom: 0;
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sheet);
  border-radius: 32px 32px 0 0;
  border: 1px solid var(--card-border);
  transform: translate(-50%, 100%);
  /* Chowa się tak, jak się wysuwa: ta sama krzywa, ale szybciej. Czas zgodny z CLOSE_MS w sheet.js. */
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet.open {
  transform: translate(-50%, 0);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet[hidden] {
  display: none;
}
.info-sheet {
  max-height: 86vh;
  max-height: calc(100dvh - 40px - env(safe-area-inset-top));
  /* Nagłówek i treść 24 px od krawędzi, jak w makiecie panelu. Padding mają osobno,
     bo przewijana treść obcinałaby wykres, który sięga krawędzi panelu. */
  padding: 0;
}
/* Mapa i ekran miejsc zajmują cały ekran. */
.map-sheet,
.places-sheet {
  top: 0;
  border-radius: 0;
  border: 0;
}
.places-sheet {
  padding: calc(56px + env(safe-area-inset-top)) var(--gutter) 0;
  background: linear-gradient(180deg, var(--bg-top) 0, var(--bg) 600px, var(--bg) 100%) var(--bg-top);
}
/* Ekran miejsc według makiety autora (18.10.2026): tytuł 21 px, 32 px do pola wyszukiwania i 32 px do kart. */
.places-head {
  flex: none;
  padding-bottom: 32px;
}
.places-head h2 {
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 27px;
  margin: 0 0 32px;
}
.sheet-handle,
.sheet-header {
  flex: none;
}
/* Nagłówek z makiety: 20 px nad i pod, 24 px z boków. Po przewinięciu treści cienka linia, żeby treść nie wchodziła wizualnie pod tytuł. */
.info-sheet .sheet-header {
  margin-bottom: 0;
  padding: 20px 24px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.info-sheet .sheet-scroll {
  padding-inline: 24px;
  /* Odstęp od dołu daje stopka ze źródłem (.source-note). */
  padding-bottom: env(safe-area-inset-bottom);
}
.info-sheet.scrolled .sheet-header {
  border-bottom-color: var(--card-border);
}
.sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}
/* Strona pod otwartym panelem się nie przewija. */
html.sheet-open,
html.sheet-open body {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .sheet,
  .fab,
  .sheet-backdrop,
  .card,
  .hour {
    transition: none !important;
  }
}
.hourly::-webkit-scrollbar {
  display: none;
}
/* Uchwyt ma swój pasek 12 px (8 odstępu i 4 uchwytu), a pod nim zaczyna się nagłówek. */
.sheet-handle {
  width: 44px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
}
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sheet-header h2 {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.01em;
}
/* ✕ z makiety: 44×44, padding 12, w środku ramka ikony 20×20. */
.sheet-header button {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: var(--press);
}
.sheet-header button:active {
  transform: scale(var(--press-scale));
}
/* Krzyżyk Phosphor bold zajmuje 66% swojej ramki, czyli 13 px z 20. Powiększenie daje 14 px jak w makiecie. */
.sheet-header button .icon {
  width: 20px;
  height: 20px;
  transform: scale(1.07);
}
/* Delikatne podświetlenie: tło z 4% do 8%. */
.sheet-header button:active {
  background: rgba(255, 255, 255, 0.08);
}
@media (hover: hover) {
  .sheet-header button:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}
.search-field {
  flex: none;
  display: flex;
  gap: 12px;
  align-items: center;
  height: 54px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 0 16px;
  color: var(--text);
}
.search-icon .icon {
  width: 20px;
  height: 20px;
}
/* Wpisany tekst 16 px, bo przy mniejszym Safari na iPhonie przybliża stronę po stuknięciu w pole; podpowiedź 14 px jak w makiecie. */
.search-field input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
}
.search-field input::placeholder {
  color: var(--muted);
  font-size: 0.875rem;
}
.search-hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--sub-65);
  margin: 12px 0;
  padding-inline: var(--text-inset);
}
/* Treść panelu szczegółów według makiety (STYL.md, „Panel szczegółów”): metryka, wykres od krawędzi do krawędzi,
   dane w kolumnach, wyjaśnienie i źródła. Bloki nie mają wspólnego odstępu, każdy ma własny padding. */
.info-body {
  display: flex;
  flex-direction: column;
}
.info-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-value {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.02em;
}
.info-hero.is-text .info-value {
  font-weight: 600;
}
.info-status {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 20px;
  color: var(--sub);
}
/* Wykres sięga krawędzi panelu mimo paddingu 24 px. */
.info-chart {
  margin-inline: -24px;
}
.info-chart .chart-empty {
  padding-inline: 24px;
}
.info-stats {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 0 20px;
}
/* 16 px od wykresu nad i od linii pod wartością. */
.info-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--track);
  font-size: 0.8125rem;
  line-height: 18px;
}
.info-stats span {
  color: var(--sub);
}
.info-stats b {
  font-weight: 600;
}
.info-text {
  padding: 16px 0;
  font-size: 0.8125rem;
  line-height: 18px;
  color: var(--sub);
}
.info-text p {
  margin: 0;
}
.info-text p + p {
  margin-top: 16px;
}
.info-sheet .source-note {
  margin: 0;
  padding-bottom: 48px;
  font-size: 0.8125rem;
  line-height: 18px;
  color: var(--sub-65);
}
/* Tymczasowo, do projektu: paski „Skąd ten wynik” w karcie. */
.info-card {
  margin: 16px 0;
}
.info-card .card-title {
  margin-bottom: 12px;
}
/* Wykres w panelu: linia od krawędzi do krawędzi, podpisy osi 24 px od krawędzi, 13 px.
   Linie podziałki co 53 px, przerywane 4/4 px; liczby osi Y po prawej, 4 px nad linią. */
.chart {
  /* Kolor linii i gradientu; .is-yellow dla zachmurzenia. */
  --chart: var(--green);
  /* Liczba nad górną linią: 16 px wysokości i 4 px przerwy. */
  padding-top: 20px;
  font-size: 0.8125rem;
  line-height: 18px;
  color: var(--sub-65);
}
.chart.is-yellow {
  --chart: var(--yellow);
}
.chart-plot {
  position: relative;
}
.chart-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--track) 0 4px, transparent 4px 8px);
}
/* Liczby osi Y leżą nad wykresem i mogą zachodzić na linię. */
.chart-y {
  position: absolute;
  z-index: 1;
  right: 24px;
  line-height: 16px;
  transform: translateY(calc(-100% - 4px));
}
.chart-line {
  fill: none;
  stroke: var(--chart);
  /* Tyle, ile miała linia starego wykresu (2 jednostki przy skali ok. 1,15). */
  stroke-width: 2.3px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.chart-line.negative {
  stroke: var(--warn);
}
.chart-area {
  fill: url(#chartFill);
}
/* 8 px pod dolną linią podziałki, która ma 1 px i wystaje pod wykres. */
.chart-x {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding-inline: 24px;
}
/* Słupki (prognoza Kp): w pasie 24 px od krawędzi, szerokość 24 px, zielone o jasności zależnej od wartości. Godziny pod środkiem słupków. */
.chart-bars {
  position: absolute;
  inset: 0 24px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
/* Każdy blok ma równą część szerokości, a słupek 24 px na jej środku. */
.chart-bars b {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  font-weight: 400;
}
.chart-bars i {
  position: relative;
  width: 24px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  /* Jasność z --a (0–1) ustawia wykres: im wyższe Kp, tym jaśniejszy zielony. */
  background: rgb(var(--green-rgb) / var(--a, 1));
}
.chart-bars span {
  position: absolute;
  bottom: calc(100% + 4px);
  left: -12px;
  right: -12px;
  text-align: center;
  font-style: normal;
  color: var(--sub);
}
.chart-x.is-bars {
  gap: 8px;
}
.chart-x.is-bars span {
  flex: 1;
  text-align: center;
}
.chart-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sub-65);
}
/* Łuki Słońca i Księżyca (ui/sky-chart.js): od krawędzi do krawędzi jak inne wykresy, linie co 37 px. */
.sky-chart .is-sun {
  --sky: var(--sun);
}
.sky-chart .is-moon {
  --sky: var(--moon);
}
.sky-horizon {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.sky-arc {
  fill: none;
  stroke-width: 5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Kropka „teraz” 18 px; mała kropka to wschód albo zachód na horyzoncie. */
.sky-dot {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--sky);
}
.sky-dot.is-event {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}
/* Faza Księżyca obok procentu tarczy. */
.moon-phase {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
}
.factor {
  padding: 12px 0;
  border-top: 1px solid var(--card-border);
}
.factor:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.factor:last-child {
  padding-bottom: 0;
}
.factor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 20px;
}
.factor-head b {
  font-weight: 500;
}
.factor-bar {
  height: 6px;
  margin: 8px 0;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.factor-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--green);
}
.factor small {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sub-65);
}

/* Mapa na pełnym ekranie: ✕ w prawym górnym rogu, legenda w karcie na dole. */
#auroraMap {
  position: absolute;
  inset: 0;
  /* Kolor wody OpenStreetMap po filtrze poniżej (#AAD3DF → #2F3B3E). Przy przybliżaniu, zanim wczytają się kafelki,
     widać to tło; w kolorze wody (większość mapy) nie mruga ciemniejszymi plamami. Ląd po filtrze to #1F1E1D. */
  background: #2f3b3e;
}
/* Na karcie mapy gesty obsługuje tylko Leaflet. Bez tego Safari na iPhonie przy przeciąganiu przy krawędzi albo nad legendą
   przesuwał całą kartę z „gumowym” odbiciem, a szczypanie przybliżało stronę, więc mapa wychodziła poza ramkę. */
.map-sheet,
#auroraMap {
  touch-action: none;
  overscroll-behavior: none;
}
/* Ciemna mapa: odwracamy jasne kafelki OpenStreetMap i przywracamy odcienie, żeby pasowały do grafitowego tła.
   Filtr dotyczy tylko podkładu, warstwa zorzy i znacznik miejsca zostają w swoich kolorach. */
#auroraMap .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.85) saturate(0.4);
}
.leaflet-container {
  font-family: inherit;
}
.leaflet-control-attribution {
  font-size: 9px !important;
}
/* Okrągłe przyciski na mapie: ✕ i powrót do lokalizacji pod nim. Wymiar i ikona jak ✕ w panelu szczegółów (44 px, ikona bold 20 px),
   ale tło ciemne szkło, bo jasne 4% z panelu znikałoby na mapie. Mniej przezroczyste niż pływające przyciski (85% zamiast 70%), bo mapa pod nimi jest jasna i ruchliwa. */
.map-btn {
  position: absolute;
  z-index: 1001;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  cursor: pointer;
  transition: var(--press);
}
.map-btn:active {
  transform: scale(var(--press-scale));
}
.map-btn .icon {
  width: 20px;
  height: 20px;
}
.map-close {
  top: calc(16px + env(safe-area-inset-top));
}
.map-locate {
  top: calc(16px + 44px + 12px + env(safe-area-inset-top));
}
.map-panel {
  /* Przeciągnięcie palcem przez legendę nie zaznacza tekstu. */
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  z-index: 1001;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(24px + env(safe-area-inset-bottom));
  padding: 14px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.map-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--sub);
}
.map-legend i {
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #52d9ba, #b4ff63, #ffe45b, #ff6d5a);
}
.map-note {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sub-65);
}

/* Lista miejsc i wyniki wyszukiwania: wiersze w jednej karcie. */
.place-list {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.place-row {
  display: flex;
  align-items: center;
}
.place-row + .place-row {
  border-top: 1px solid var(--card-border);
}
.place-main {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}
.place-main:active {
  background: var(--card);
}
.place-main b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 20px;
}
.place-main b .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}
/* Podpis w wynikach wyszukiwania: ten sam szary 12 px co na kartach miejsc. */
.place-main small {
  display: block;
  font-size: 0.75rem;
  line-height: 16px;
  color: var(--muted);
}
.place-badge {
  flex: none;
  margin-right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card);
  font-size: 0.75rem;
  color: var(--green);
}
.delete-place {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: 6px;
  border: 0;
  background: none;
  color: var(--sub-65);
  cursor: pointer;
}
.delete-place .icon {
  width: 18px;
  height: 18px;
}
/* Karty miejsc: nazwa 15 px, podpis i linia warunków 12 px szare, plakietka „Teraz” 13 px. Wymiary z makiety autora. */
.place-cards {
  display: grid;
  gap: var(--gap);
}
.place-card {
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--press);
}
/* Wciśnięcie dotyczy całej karty (jak kafelki na stronie głównej), a nie samego obszaru przycisku obok plakietki i ✕.
   ✕ ma własne wciśnięcie i nie rusza karty. */
.place-card:has(.place-main:active) {
  transform: scale(var(--press-scale));
  background: rgba(255, 255, 255, 0.12);
}
.place-card .place-main:active {
  background: none;
}
.place-card .delete-place:active {
  color: var(--text);
}
.place-card .place-main {
  display: block;
  padding: 16px;
}
.place-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 20px;
}
.place-name .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}
.place-sub,
.place-meta {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 16px;
  color: var(--muted);
}
.place-meta {
  gap: 12px;
  margin-top: 12px;
}
.place-cloud {
  display: flex;
  align-items: center;
  gap: 12px;
}
.place-cloud .icon {
  width: 12px;
  height: 12px;
}
.place-card .place-badge {
  margin-right: 28px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  line-height: 16px;
  color: var(--glow);
}
.place-card .delete-place {
  color: var(--muted);
}
.search-results:not(:empty) {
  margin-top: 4px;
}