:root{
  /* Brändin vihreä poimittu Canva-esittelyn logosta (#468C36), jotta
     karttasivu ja diat näyttävät samalta sovellukselta. */
  --brandi:#468C36;
  --brandi-tumma:#33682A;
  --norsunluu:#F5F1EA;
  --hiekka:#D8CFC0;
  --kivi:#A39B8E;
  --musta:#1A1A1A;
  --metsa:#3D5A4A;
  --ohjain:64px;
}
*{box-sizing:border-box}
/* display:flex alla ohittaisi HTML:n hidden-attribuutin — pakotetaan piiloon */
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--musta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--musta);-webkit-tap-highlight-color:transparent}

/* ---------- kirjautuminen ---------- */
.login{height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:var(--norsunluu);padding:24px}
.login-logo{width:200px;max-width:60vw}
.login h1{margin:0;font-size:26px;font-weight:600;letter-spacing:.02em}
.login-teksti{margin:0;color:var(--kivi)}
.virhe{color:#a33;margin:4px 0 0;text-align:center;max-width:32ch}
.nappi{border:0;border-radius:8px;background:var(--brandi);color:#fff;
  padding:12px 20px;font-size:15px;cursor:pointer}

/* ---------- esitys ---------- */
.esitys{height:100%;position:relative;background:var(--musta)}
.sivut{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.sivut::-webkit-scrollbar{display:none}
.sivu{flex:0 0 100%;height:100%;scroll-snap-align:center;position:relative;
  display:flex;align-items:center;justify-content:center}
.sivu img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;
  -webkit-user-drag:none}

/* videosivu: dian kuva + toistonappi, klikkaus vaihtaa YouTube-soittimeen */
.videosivu{position:relative}
.video-nappi{position:absolute;inset:0;margin:auto;width:96px;height:96px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);cursor:pointer;
  box-shadow:0 4px 28px rgba(0,0,0,.35);display:flex;align-items:center;
  justify-content:center;transition:transform .15s}
.video-nappi:hover{transform:scale(1.06)}
.video-kolmio{width:0;height:0;margin-left:7px;
  border-left:30px solid var(--brandi);
  border-top:19px solid transparent;border-bottom:19px solid transparent}
.video-kehys{width:100%;height:100%;border:0;background:#000}

.ohjaus{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:20px;pointer-events:none}
.ohjain{pointer-events:auto;width:var(--ohjain);height:var(--ohjain);border:0;
  border-radius:50%;background:rgba(255,255,255,.86);color:var(--musta);
  font-size:34px;line-height:1;cursor:pointer;box-shadow:0 2px 14px rgba(0,0,0,.3)}
.ohjain:disabled{opacity:.25;cursor:default}
.laskuri{pointer-events:none;color:#fff;background:rgba(0,0,0,.45);
  padding:6px 14px;border-radius:999px;font-size:14px;font-variant-numeric:tabular-nums}
/* ylläpitolinkki näkyy vain nimetyille ylläpitäjille */
.yllapito-linkki{position:absolute;top:calc(10px + env(safe-area-inset-top));right:58px;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  color:var(--musta);font-size:17px}
.uloskirjaus{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;
  width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.75);
  cursor:pointer;font-size:16px}

/* ---------- karttasivu: kartta + kohdelista rinnakkain ----------
   Paneelin leveys on suhteellinen, jotta asettelu kestää kaikki ruutukoot
   tabletista isoon näyttöön. Rinnakkaisasettelu säilyy yli ~500px leveydellä. */
.karttasivu{flex:0 0 100%;height:100%;scroll-snap-align:center;position:relative;
  background:var(--norsunluu);display:grid;
  grid-template-columns:1fr clamp(200px, 30%, 360px)}
#kartta{position:relative;height:100%;min-width:0}

.kohdepaneeli{height:100%;min-height:0;display:flex;flex-direction:column;
  background:#fff;border-left:1px solid var(--hiekka);
  box-shadow:-2px 0 18px rgba(0,0,0,.06)}
.paneeli-ylä{padding:16px 18px 12px;border-bottom:1px solid var(--hiekka)}
.kartta-otsikko{margin:0 0 3px;font-size:16.5px;font-weight:600;color:var(--brandi);
  line-height:1.25;padding-right:30px}  /* tilaa uloskirjausnapille */
.kartta-teksti{margin:0;font-size:13.5px;color:#666;line-height:1.45}
.kartta-haku{display:flex;gap:8px;margin-top:12px}
.kartta-haku input{flex:1;min-width:0;border:1px solid var(--hiekka);border-radius:8px;
  padding:10px 12px;font-size:16px}
.kartta-haku button{border:0;border-radius:8px;background:var(--brandi);color:#fff;
  padding:10px 16px;font-size:15px;cursor:pointer}

/* lista: jokainen kohde kahdella rivillä */
/* alaosan tyhjä tila jättää sivunavigoinnin alle jäävät rivit näkyviin */
.kohdelista{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:0 0 calc(var(--ohjain) + 26px);list-style:none;
  -webkit-overflow-scrolling:touch}
.kohderivi{padding:9px 18px;border-bottom:1px solid #efece6;cursor:pointer;
  display:flex;flex-direction:column;gap:1px}
.kohderivi:hover{background:#faf8f4}
.kohderivi.valittu{background:#eff5ec;box-shadow:inset 3px 0 0 var(--brandi)}
.kohde-katu{font-size:14.5px;font-weight:600;color:var(--musta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kohde-paikka{font-size:12.5px;color:var(--kivi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.maplibregl-popup-content{border-radius:10px;padding:10px 14px;font-size:14px}
.popup-paikka{font-weight:600;color:var(--brandi)}
.popup-lisa{color:#666;font-size:12.5px}

.jaadytetty{position:fixed;inset:0;background:var(--norsunluu);z-index:99;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px}

/* Keskikoossa (tabletti) pidetään rinnakkaisasettelu mutta tiivistetään
   tekstit, jotta kartta säilyy pääosassa. */
@media (max-width:900px){
  .paneeli-ylä{padding:11px 12px 9px}
  .kartta-otsikko{font-size:14.5px;padding-right:26px}
  .kartta-teksti{font-size:12px}
  .kartta-haku{margin-top:9px}
  .kartta-haku input{padding:8px 10px;font-size:14px}
  .kartta-haku button{padding:8px 12px;font-size:13.5px}
  .kohderivi{padding:7px 12px}
  .kohde-katu{font-size:13px}
  .kohde-paikka{font-size:11.5px}
}
/* Vasta puhelinleveydellä kartta ylös ja lista alle. */
@media (max-width:500px){
  :root{--ohjain:52px}
  .karttasivu{grid-template-columns:1fr;grid-template-rows:40% 60%}
  .kohdepaneeli{border-left:0;border-top:1px solid var(--hiekka)}
}