/* GEO-02 (adres slowny): nadpisania stylu aplikacji do wygladu Orbispect. Laduje sie PO style.css (patrz skrypty/motyw/stosuj_motyw.py).
   Jeden motyw: ciemny, jak cala strona Orbispect. Zmienne aplikacji (--bg, --panel, --ink, --accent...) dostaja paleta Orbispect, reszta to czcionki i uklad pod naglowek serwisu. */

:root:root:root {
  color-scheme: dark;
  --bg: #06080a;
  --panel: #0d1217;
  --ink: #e8eef0;
  --muted: #93a4ad;
  --line: rgba(160, 190, 200, .18);
  --accent: #c8ff4d;
  --accent-ink: #06080a;
  --accent-soft: rgba(200, 255, 77, .12);
  --focus: #c8ff4d;
  --slowa: var(--os-display);
  --ui: var(--os-body);
}

/* uklad: naglowek serwisu (zwarty) nad aplikacja na pelna wysokosc okna */
html, body { background: #06080a; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; font-family: var(--os-body); }
.os-header { flex: none; }
.os-header--zwarty .os-bar { height: 56px; }
.os-header--zwarty .os-wordmark { font-size: 14px; }
@media (max-width: 1020px) { .os-header--zwarty .os-nav { top: 56px; } }
.app { flex: 1 1 auto; min-height: 0; height: auto; }
.panel { background: var(--os-panel); }

/* mapa: kafelki ulic przyciemnione do motywu (ortofotomapa bez zmian), kontrolki w kolorach strony */
.kafle-osm { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.7); }
.leaflet-container { background: #06080a; font-family: var(--os-body); }
.leaflet-bar a, .leaflet-bar a:hover { background: #0d1217; color: #e8eef0; border-color: rgba(160, 190, 200, .25); }
.leaflet-bar a:hover { color: var(--accent); }
.leaflet-control-attribution { background: rgba(6, 8, 10, .72) !important; color: #93a4ad !important; }
.leaflet-control-attribution a { color: #c8ff4d !important; }

/* naglowek panelu: etykieta produktu, tytul, plakietka */
.os-kod { margin: 0 0 2px; font-size: 10.5px; letter-spacing: .18em; }
.os-kod::before { width: 22px; }
.heks { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.marka h1 { font: 300 19px/1.1 var(--os-display); letter-spacing: -.01em; }
.beta { font-family: var(--os-mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; border: 1px solid rgba(200, 255, 77, .4); background: transparent; }
.uwaga { font-family: var(--os-mono); font-size: 11px; letter-spacing: .04em; }
.przelacznik { border-radius: 99px; background: transparent; border-color: var(--os-line-2); }
.przelacznik button { border-radius: 99px; font: 500 10.5px var(--os-mono); letter-spacing: .1em; text-transform: uppercase; }

/* wynik i przyciski: Unbounded dla adresu, mono dla przyciskow (jak na stronie glownej) */
.wynik { border-radius: 14px; background: var(--os-ink-2); }
.slowa { font: 300 clamp(19px, 1.6vw + 10px, 26px)/1.25 var(--os-display); letter-spacing: -.02em; }
/* link z adresem slownym: podkreslenie nizej, zeby nie zaslanialo podkreslnika */
.adres-link { text-decoration: underline; text-underline-offset: .3em; text-decoration-skip-ink: none; }
.slowa .kr { font-family: var(--os-mono); font-weight: 400; font-size: .78em; letter-spacing: 0; padding: 0 .06em; color: var(--os-lime, #c8ff4d); }
.przycisk, .chipy-dokl button { font-family: var(--os-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; border-radius: 10px; }
.przycisk.glowny:hover { box-shadow: 0 0 24px 0 rgba(200, 255, 77, .2); }
.chipy-dokl button[aria-checked="true"] { color: var(--accent); }
.wsp-wiersz code { font-family: var(--os-mono); }
.sekcja h2 { font-family: var(--os-mono); font-weight: 500; letter-spacing: .16em; }
.poziom, #wpis, .podpowiedzi .chip, .komunikat .chip { font-family: var(--os-body); }
.poziom .nazwa { font-family: var(--os-mono); font-weight: 500; letter-spacing: .04em; }
#wpis { background: var(--os-ink-2); }
.stopka .jak-link { font-family: var(--os-body); }

/* mala stopka serwisu na dole panelu */
.os-stopka-mala { margin: 0; padding-top: 8px; border-top: 1px solid var(--os-line); font: 400 10.5px/1.7 var(--os-mono); letter-spacing: .08em; color: var(--os-txt-3); }
.os-stopka-mala a { color: inherit; text-decoration: none; }
.os-stopka-mala a:hover { color: var(--os-lime); }

@media (max-width: 760px) {
  .slowa { font-size: clamp(18px, 5.4vw, 24px); }
  .app { grid-template-rows: 40dvh 1fr; }
}
/* rozmiary pola (m², ha) nie moga byc wielkimi literami */
.chipy-dokl button { text-transform: none; letter-spacing: .02em; }

/* laptop (dopisek 06.10: „rozszerzyć na pełny wygląd na laptopie”): szerszy panel, większy tytuł, adres, pola i przyciski; telefon i wąskie okna bez zmian */
@media (min-width: 1100px) {
  .app { grid-template-columns: clamp(420px, 32vw, 540px) 1fr; }
  .panel { padding: 30px 34px calc(28px + env(safe-area-inset-bottom)); gap: 22px; }
  .os-kod { font-size: 11.5px; margin-bottom: 8px; }
  .marka { gap: 14px; }
  .nazwa-marki { gap: 12px; }
  .heks { width: 30px; height: 30px; }
  .marka h1 { font-size: 32px; }
  .beta { font-size: 10.5px; padding: 4px 9px; }
  .sekcja { gap: 12px; }
  #wpis { font-size: 17px; min-height: 54px; padding: 12px 16px; }
  #formularz { gap: 10px; }
  #formularz .przycisk { min-height: 54px; padding-left: 26px; padding-right: 26px; }
  .przycisk { min-height: 46px; font-size: 12px; }
  .przycisk.pelny { min-height: 50px; }
  .wynik { padding: 26px; border-radius: 18px; }
  .pusty { font-size: 16px; }
  .slowa { font-size: clamp(26px, 1.6vw + 12px, 38px); margin-bottom: 28px; }
  .akcje { gap: 10px; }
  .wsp-wiersz { margin-top: 18px; font-size: 12.5px; }
  .wsp-wiersz code { font-size: 17px; padding: 13px 14px; }
  .chipy-dokl { gap: 8px; }
  .chipy-dokl button { min-height: 46px; font-size: 13px; }
  .stopka .jak-link { min-height: 52px; font-size: 14.5px; }
}