/* LaivuCeļš — «lauka karte»
 *
 * Dizaina virziens: vecu upju un mērniecības karšu estētika. Tas nav
 * dekorācija — kartogrāfija gadsimtu ir optimizēta lasāmībai dienas gaismā
 * uz lauka, un tas ir tieši šī lietojuma konteksts.
 *
 * Apzināti NAV iegulta display fonta: webfonts pievienotu 30-200 KB oflaina
 * pakai, un spilgtā saulē uz ūdens svarīgāka ir pārbaudīta burtforma nekā
 * raksturs. Raksturu nes tipogrāfija — tabulārie cipari, izretinātas
 * etiķetes, papīra tekstūra, dziļuma atzīmes.
 */

:root {
  /* Kartes papīrs, nevis tīri balts — mazāk atspīduma saulē */
  --papirs: #f5f0e4;
  --papirs-dzilaks: #ebe4d3;
  --tinte: #12212e;
  --tinte-vieglaka: #4a5a68;
  --upe: #1a6f9c;
  --upe-gaisa: #7dc9e8;
  --marsruts: #c1440e;   /* kartes sarkanbrūns, ne neona sarkans */
  --taka: #2f6b33;
  --briesmas: #8a3419;
  --mala: rgba(18, 33, 46, .16);
  --mala-stipra: rgba(18, 33, 46, .32);
  --r: 4px;              /* kartes leģendas stūri ir asi, ne noapaļoti */

  --f-teksts: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --f-skaitli: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  font-family: var(--f-teksts);
  color: var(--tinte);
  background: var(--papirs);
}

/* Papīra graudi — inline SVG, lai oflains nav atkarīgs no attēla faila */
.papira-graudi,
.panelis::before,
.modalis::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

#karte { position: fixed; inset: 0; background: var(--papirs-dzilaks); }

/* ── Virsraksts: kartes leģendas josla ───────────────────────────── */

.virsraksts {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) 14px 6px;
  background: linear-gradient(to bottom, rgba(18, 33, 46, .82), rgba(18, 33, 46, 0));
  color: #f5f0e4;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.virsraksts-zime {
  width: 14px; height: 14px; flex: none;
  border: 2px solid var(--upe-gaisa);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.virsraksts-teksts { font-weight: 700; }
.virsraksts-posms {
  margin-left: auto;
  font-family: var(--f-skaitli);
  font-size: 11px;
  letter-spacing: .04em;
  opacity: .85;
  text-transform: none;
}

/* ── Pogas ───────────────────────────────────────────────────────── */

.pogas {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(214px + env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
  z-index: 5;
}
.poga {
  width: 52px; height: 52px;      /* > 44 px: slapjas rokas laivā */
  border: 1.5px solid var(--tinte);
  border-radius: var(--r);
  background: var(--papirs);
  color: var(--tinte);
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 2px 2px 0 var(--tinte), 0 3px 10px rgba(0, 0, 0, .2);
  transition: transform .09s ease, box-shadow .09s ease;
  cursor: pointer;
}
.poga:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--tinte), 0 1px 4px rgba(0, 0, 0, .2);
}
.poga[aria-pressed="true"] {
  background: var(--upe);
  color: #fff;
  border-color: var(--tinte);
}
.poga:disabled { opacity: .5; }
/* [hidden] jāuzvar pret display: grid — citādi paslēptā poga paliek redzama */
.poga[hidden] { display: none; }
.poga:focus-visible { outline: 3px solid var(--upe); outline-offset: 3px; }

/* ── Apakšas panelis ─────────────────────────────────────────────── */

.panelis {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  background: var(--papirs);
  border-top: 2px solid var(--tinte);
  padding: 0 16px calc(14px + env(safe-area-inset-bottom));
  max-height: 80vh;
  overflow: hidden auto;
  box-shadow: 0 -3px 20px rgba(18, 33, 46, .22);
}
.panelis::before { z-index: -1; }

/* Dziļuma atzīmes gar paneļa augšmalu — kartes sondēšanas motīvs */
.panelis::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background-image: repeating-linear-gradient(
    to right,
    var(--tinte) 0 1px,
    transparent 1px 9px
  );
  opacity: .38;
  pointer-events: none;
}

.kopsavilkums { display: grid; gap: 7px; padding: 16px 0 4px; }

.etikete {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-vieglaka);
}
.nakamais strong {
  display: block;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -.011em;
  margin-top: 2px;
}

.skaitli {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.attalums {
  font-family: var(--f-skaitli);
  font-variant-numeric: tabular-nums;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--marsruts);
}
.eta {
  font-family: var(--f-skaitli);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--tinte);
}
.atrumi {
  font-family: var(--f-skaitli);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--tinte-vieglaka);
  border-top: 1px solid var(--mala);
  padding-top: 7px;
}

/* ── Objektu saraksts ────────────────────────────────────────────── */

.saraksts { display: grid; padding-bottom: 10px; }
.rinda {
  /* Poga ir vienkāršs bloks; režģis dzīvo .rinda-iekse. Chromium <button>
   * nepaziņo pareizu iekšējo augstumu, kad grid saturs aplaužas. */
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--mala);
  background: none;
  text-align: left;
  padding: 0;
  color: var(--tinte);
  cursor: pointer;
  font-family: inherit;
}
.rinda-iekse {
  display: grid;
  grid-template-columns: 3.9rem 1fr auto;
  gap: 11px;
  align-items: center;
  min-height: 56px;
  padding: 9px 0;
}
.rinda:active { background: var(--papirs-dzilaks); }
.rinda:focus-visible { outline: 2px solid var(--upe); outline-offset: -2px; }
.rinda-km {
  font-family: var(--f-skaitli);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--upe);
  font-weight: 600;
}
.rinda-teksts { display: grid; gap: 1px; min-width: 0; }
.rinda-teksts strong { font-size: 15.5px; font-weight: 600; }
.rinda-teksts small { font-size: 11.5px; color: var(--tinte-vieglaka); }
.rinda-att {
  font-family: var(--f-skaitli);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--tinte-vieglaka);
}
.rinda.izbraukts { opacity: .42; }
.rinda.izbraukts .rinda-km { text-decoration: line-through; }

/* ── Modālis ─────────────────────────────────────────────────────── */

.modalis {
  border: 2px solid var(--tinte);
  border-radius: var(--r);
  max-width: 33rem;
  width: calc(100% - 1.75rem);
  padding: 22px 20px 18px;
  color: var(--tinte);
  background: var(--papirs);
  box-shadow: 5px 5px 0 rgba(18, 33, 46, .28);
  position: relative;
  overflow: visible;
}
.modalis::before { z-index: 0; border-radius: var(--r); }
.modalis > * { position: relative; z-index: 1; }
.modalis::backdrop {
  background: rgba(18, 33, 46, .58);
  backdrop-filter: blur(2px);
}
.modalis[open] { animation: iznirst .17s ease-out; }
@keyframes iznirst {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modalis[open] { animation: none; }
  .poga { transition: none; }
}

.modalis h2 {
  margin: 0 44px 5px 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.014em;
}
.modalis .meta {
  margin: 0 0 13px;
  font-size: 11.5px;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--tinte-vieglaka);
  padding-bottom: 11px;
  border-bottom: 1px solid var(--mala);
}
.modalis .apraksts { margin: 0; font-size: 15px; line-height: 1.58; }

/* Saraksta modālis ir garš saraksts, ne teksts: aizņem gandrīz visu ekrānu
 * un ritinās iekšēji, lai maršruta konteksts (virsraksts) paliek redzams. */
.modalis--saraksts {
  max-width: 34rem;
  width: calc(100% - 1.25rem);
  max-height: min(86vh, 100% - 2rem);
  padding-bottom: 8px;
}
/* display TIKAI pie [open]: `<dialog>` aizvērtā stāvoklī dabū display: none no
 * pārlūka stila, un beznosacījuma `display: flex` to pārspētu — saraksts būtu
 * vienmēr atvērts un aizsegtu karti. */
.modalis--saraksts[open] {
  display: flex;
  flex-direction: column;
}
.modalis--saraksts h2 { margin-bottom: 3px; }
.modalis--saraksts .meta { flex: none; }
.modalis--saraksts .saraksts {
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px calc(4px + env(safe-area-inset-bottom));
}
.modalis .eta-rinda {
  margin: 13px 0 0;
  font-family: var(--f-skaitli);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--tinte-vieglaka);
}
.modalis .eta-rinda:empty { display: none; }

.navi { display: flex; gap: 10px; margin-top: 16px; }
.navi-poga {
  flex: 1;
  min-height: 50px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r);
  background: var(--upe);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: .015em;
  box-shadow: 2px 2px 0 var(--tinte);
}
.navi-poga--otra { background: var(--papirs); color: var(--tinte); }
.navi-poga:active { transform: translate(2px, 2px); box-shadow: none; }

.aizvert {
  position: absolute;
  top: 9px; right: 9px;
  width: 46px; height: 46px;
  border: 0;
  background: none;
  font-size: 19px;
  color: var(--tinte-vieglaka);
  cursor: pointer;
  z-index: 2;
}
.avots { margin: 14px 0 0; font-size: 11.5px; }
.avots a { color: var(--upe); }
.avots[hidden] { display: none; }

/* ── Banneris ────────────────────────────────────────────────────── */

.banneris {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(46px + env(safe-area-inset-top));
  z-index: 7;
  max-width: calc(100% - 22px);
  padding: 11px 15px;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r);
  background: var(--briesmas);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.42;
  box-shadow: 2px 2px 0 var(--tinte);
  animation: nolaizas .22s ease-out;
}
@keyframes nolaizas {
  from { opacity: 0; transform: translate(-50%, -9px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.banneris[hidden] { display: none; }

/* ── Kartes marķieri ─────────────────────────────────────────────── */

.obj {
  /* NEUZSTĀDI `position` šeit. MapLibre marķiera elementam uzliek
   * `position: absolute`, bet šis fails ielādējas VĒLĀK par maplibre-gl.css,
   * tāpēc vienādas specifikas `.obj { position: relative }` to pārspētu.
   * Tad marķieri sāk piedalīties dokumenta plūsmā un krājas viens zem otra:
   * konstanta pikseļu nobīde uz katru kārtas numuru, kas ģeogrāfiski aug ar
   * tālummaiņu — pie z11 pēdējais objekts bija 11 km no savas vietas.
   * `::after` saņem saistošo bloku no MapLibre `absolute`, tāpēc `relative`
   * te nav vajadzīgs. Sargs: e2e/markieri.spec.js */
  width: 34px; height: 34px;
  border: 2px solid var(--papirs);
  border-radius: 50%;
  background: var(--upe);
  color: #fff;
  font: 600 15px/1 var(--f-teksts);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 7px rgba(18, 33, 46, .42);
}
/* Pieskāriena mērķis 46 px, kaut redzamā ikona ir 34 px */
.obj::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.obj:focus-visible { outline: 3px solid var(--marsruts); outline-offset: 2px; }

.obj-krauja    { background: #a8521a; }
.obj-pilskalns { background: #6b3fa0; }
.obj-sala      { background: #0e7f96; }
.obj-sadza     { background: #a8213c; }
.obj-tornis    { background: #1a4fa0; }
.obj-avoti     { background: #0d6b62; }
.obj-atsegums  { background: #7d4a12; }
.obj-taka      { background: var(--taka); }
.obj-iekapsana { background: #1f7a3a; }
.obj-izkapsana { background: #14572a; }
.obj-majas,
.obj-naksnosana { background: #b5820b; }

/* Mājas ikona ir maršruta enkurs — lielāka un ar dubultu apmali */
.obj-majas {
  width: 40px; height: 40px;
  font-size: 17px;
  border-width: 3px;
  box-shadow: 0 0 0 1.5px var(--tinte), 0 2px 9px rgba(18, 33, 46, .48);
}

.km-atzime {
  background: var(--papirs);
  border: 1px solid var(--tinte);
  border-radius: 2px;
  padding: 1px 5px;
  font-family: var(--f-skaitli);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tinte);
  box-shadow: 1px 1px 0 var(--mala-stipra);
}

.poz {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--upe);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--tinte), 0 0 12px rgba(26, 111, 156, .7);
}

/* MapLibre atribūcija — pieskaņo kartes papīram, bet paliek salasāma */
.maplibregl-ctrl-attrib {
  background: rgba(245, 240, 228, .9) !important;
  font-size: 10.5px !important;
}
.maplibregl-ctrl-attrib a { color: var(--tinte) !important; }