/* public/css/tyyli.css — kartoitustyökalun ulkoasu (index.html).
   Hallintasivulla (hallinta.html) on oma, pienempi tyyli. */

*{box-sizing:border-box;}
:root{
  --bg:#0c0c14; --panel:#13131d; --panel2:#1a1a26; --line:#272736;
  --txt:#ececf6; --muted:#9090a8; --field:#1d1d2a; --field-border:#33334a;
  /* Proscreen-brändi */
  --pink:#ee60a2; --violet:#7a65ad; --cyan:#4fc6e0; --coral:#f1817e; --gold:#f3dd6c;
  --magenta:#ee60a2; --orange:#f5893d;
  --green:#6bcb77; --red:#e8453c;
  --accent:#ee60a2; --accent2:#4fc6e0;
  --grad-hero:linear-gradient(90deg,#f3dd6c 0%,#f1817e 20%,#ee60a2 44%,#7a65ad 72%,#4fc6e0 100%);
  --grad-btn:linear-gradient(95deg,#ee60a2 0%,#7a65ad 100%);
}
html,body{height:100%;}
body{margin:0;font-family:'Manrope',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased;overflow:hidden;}
button{font-family:inherit;}

/* ---------- Kirjautuminen ---------- */
#login{position:fixed;inset:0;overflow:hidden;background:#0a0a12;display:flex;align-items:center;justify-content:center;z-index:5000;}
#login::before,#login::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;}
#login::before{width:520px;height:520px;background:radial-gradient(circle,#ee60a2,transparent 65%);top:-160px;left:-120px;}
#login::after{width:560px;height:560px;background:radial-gradient(circle,#4fc6e0,transparent 65%);bottom:-200px;right:-140px;}
#login .box{position:relative;z-index:1;background:rgba(26,26,38,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);padding:32px 28px;border-radius:18px;width:344px;max-width:calc(100vw - 32px);box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center;}
#login .loginlogo{margin-bottom:20px;}
#login .loginlogo img{height:54px;width:auto;}
#login p{margin:0 0 18px;font-size:13px;color:var(--muted);}
#login input{width:100%;padding:12px 13px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:10px;font-size:14px;margin-bottom:11px;outline:none;transition:border-color .15s,box-shadow .15s;}
#login input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(238,96,162,.2);}
#login input::placeholder{color:#6a6a82;}
#login button{width:100%;padding:12px;border:none;border-radius:10px;background:var(--grad-btn);color:#fff;font-size:14px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:filter .15s,transform .05s;}
#login button:hover{filter:brightness(1.08);}
#login button:active{transform:translateY(1px);}
#login .err{color:#ff7da8;font-size:13px;min-height:18px;margin-top:9px;}
#login .linkki{display:inline-block;font-size:12px;color:var(--muted);margin-top:8px;text-decoration:underline;cursor:pointer;}
#login .linkki:hover{color:var(--txt);}
#login .ehdotinfo{font-size:11px;color:#6f6f88;margin-top:10px;line-height:1.5;}
#login .ehdotinfo a{color:#9090a8;}
#login .versio{font-size:10px;color:#5c5c74;margin-top:6px;letter-spacing:.3px;}

/* ---------- Dialogi (salasanan vaihto, ehdot) ---------- */
#dialogi{position:fixed;inset:0;background:rgba(6,6,12,.78);display:none;align-items:center;justify-content:center;z-index:5500;padding:16px;}
#dialogi .box{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:24px 22px;width:100%;max-width:420px;box-shadow:0 24px 70px rgba(0,0,0,.6);}
#dialogi h2{font-family:'Sora',sans-serif;font-size:16px;margin:0 0 6px;}
#dialogi p{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5;}
#dialogi p a{color:var(--cyan);}
#dialogi input[type=password],#dialogi input[type=text]{width:100%;padding:11px 12px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:10px;font-size:14px;margin-bottom:10px;outline:none;}
#dialogi input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(238,96,162,.2);}
#dialogi label.cb{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--txt);margin:4px 0 14px;line-height:1.45;cursor:pointer;}
#dialogi .napit{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
#dialogi button{padding:10px 16px;border:none;border-radius:10px;background:var(--grad-btn);color:#fff;font-size:13px;font-weight:700;cursor:pointer;}
#dialogi button.toissijainen{background:var(--field);color:var(--muted);border:1px solid var(--field-border);}
#dialogi button:disabled{opacity:.4;cursor:default;}
#dialogi .err{color:#ff7da8;font-size:13px;min-height:18px;margin-top:6px;}
#dialogi h3{font-family:'Sora',sans-serif;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;}
#dialogi ul.lahteet{margin:0 0 12px;padding-left:18px;font-size:13px;color:var(--txt);line-height:1.5;}
#dialogi ul.lahteet li{margin-bottom:4px;}
#dialogi button.vaara{background:rgba(232,69,60,.18);color:#f3897f;border:1px solid rgba(232,69,60,.5);}
#dialogi button.ensisijainen{}
#dialogi .lisaysvalinnat{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px;}
#dialogi .lisaysvalinnat button{flex:1;min-width:150px;padding:12px 10px;}
#dialogi label.lt{margin:6px 0 4px;}
#dialogi .hakurivi{display:flex;gap:6px;}
#dialogi .hakurivi input{flex:1;margin-bottom:0;}
#dialogi .hakurivi button{padding:10px 14px;}
#dialogi .ehdokkaat{display:flex;flex-direction:column;gap:4px;margin:8px 0 2px;max-height:200px;overflow-y:auto;}
#dialogi .ehdokkaat .pieni{font-size:12px;color:var(--muted);}
#dialogi .ehdokas{text-align:left;background:var(--field);color:var(--txt);border:1px solid var(--field-border);font-weight:500;padding:8px 10px;}
#dialogi .ehdokas:hover{border-color:var(--pink);}
#dialogi .lomake .mk{display:flex;flex-direction:column;gap:3px;margin-bottom:9px;font-size:12px;color:var(--muted);}
#dialogi .lomake .mk input,#dialogi .lomake .mk select{margin-bottom:0;width:100%;}
#dialogi .lomake .mk select{padding:10px 12px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:10px;font-size:14px;}
#dialogi .lomake .valinnat{display:flex;gap:14px;color:var(--txt);font-size:13px;}
#dialogi .lomake .valinnat label{display:flex;align-items:center;gap:5px;cursor:pointer;}
#dialogi .lomake .pieni{font-size:11px;color:#6f6f88;margin:2px 0 6px;}
#dialogi .laheiset{display:none;font-size:12px;color:#f3c84b;background:rgba(243,221,108,.1);border:1px solid rgba(243,221,108,.35);border-radius:8px;padding:8px 10px;margin:6px 0 2px;line-height:1.45;}
#dialogi .laheiset.on{display:block;}
#dialogi .poistetut{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;margin:6px 0;}
#dialogi .privi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--field);border:1px solid var(--field-border);border-radius:10px;font-size:13px;}
#dialogi .privi .pnimi{flex:1;min-width:140px;font-weight:600;}
#dialogi .privi .ppvm{font-weight:400;font-size:11px;color:var(--muted);margin-left:8px;}
#dialogi .privi .posoite{font-weight:400;font-size:11px;color:var(--muted);}
#dialogi button.pieni{padding:6px 10px;font-size:12px;}

/* ---------- Perusrakenne: sivupalkki + kartta ---------- */
#wrap{display:flex;height:100vh;height:100dvh;width:100vw;}
#sidebar{position:relative;width:380px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;}
#sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-hero);z-index:3;}
#mapWrap{flex:1;position:relative;background:var(--bg);min-width:0;}
#map{position:absolute;inset:0;background:var(--bg);}
/* Googlen kartan taustaväri ennen laattojen latausta */
#map .gm-style{font-family:'Manrope',sans-serif;}

header{padding:14px 18px 11px;border-bottom:1px solid var(--line);background:var(--panel2);}
header .logo img{height:40px;width:auto;display:block;margin-bottom:8px;}
header h1{font-family:'Sora',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0;}
header p{font-size:12px;color:var(--txt);opacity:.65;margin:3px 0 0;}
header #kayttaja{font-size:11px;color:var(--muted);opacity:1;margin-top:5px;line-height:1.7;}
header #kayttaja b{color:var(--pink);font-weight:700;}
header #kayttaja a{color:var(--cyan);text-decoration:none;cursor:pointer;}
header #kayttaja a:hover{text-decoration:underline;}

label.lt{display:block;font-family:'Sora',sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:11px 0 4px;}
label.lt:first-child{margin-top:0;}

/* ---------- Kansiot (vasen valikko) ---------- */
#kansiot{border-bottom:1px solid var(--line);background:var(--panel);padding:9px 18px 8px;}
#kansioToggle{display:none;width:100%;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;text-align:left;}
#kansioToggle .nuoli{margin-left:auto;color:var(--muted);font-size:11px;transition:transform .15s;}
#kansiot.auki #kansioToggle .nuoli{transform:rotate(180deg);}
#kansioToggle .lt{margin:0;font-size:9px;}
#kansioLista{display:flex;flex-direction:column;gap:2px;max-height:150px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2e2e40 transparent;}
.kansio{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--txt);border:1px solid transparent;user-select:none;}
.kansio:hover{background:#1f1f2c;}
.kansio.on{background:rgba(238,96,162,.12);border-color:rgba(238,96,162,.45);}
.kansio .kikoni{width:14px;height:11px;border-radius:2px 2px 3px 3px;background:#3c3c52;position:relative;flex-shrink:0;}
.kansio .kikoni::before{content:'';position:absolute;left:0;top:-3px;width:6px;height:4px;border-radius:2px 2px 0 0;background:inherit;}
.kansio.on .kikoni,.kansio.on .kikoni::before{background:var(--pink);}
.kansio.wurth .kikoni,.kansio.wurth .kikoni::before{background:#5a5a78;}
.kansio.on.wurth .kikoni,.kansio.on.wurth .kikoni::before{background:var(--pink);}
.kansio .knimi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.kansio .ktyyppi{font-size:10px;color:#6f6f88;}
.kansio .kmaara{font-family:'Sora',sans-serif;font-size:12px;font-weight:700;color:var(--muted);min-width:22px;text-align:right;}
.kansio.on .kmaara{color:var(--txt);}
.kansio.arkistoitu{opacity:.6;}
.kansio.arkistoitu .knimi{font-style:italic;}
.oikeusinfo{font-size:11px;color:#6f6f88;margin:6px 0 0;}
.oikeusinfo a{color:var(--cyan);cursor:pointer;margin-left:6px;}
.oikeusinfo a:hover{text-decoration:underline;}
.tyhjainfo{font-size:12px;color:#6f6f88;line-height:1.5;padding:4px 0;}

/* ---------- Suodattimet ----------
   Suodatinlohko on avattava/suljettava (koneella oletuksena auki, puhelimessa
   kiinni). Jos tila loppuu (pieni näyttö, pitkä kansiolista), lohko vierittyy
   ja kohdelista säilyttää vähimmäiskorkeutensa. */
.controls{padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2e2e40 transparent;}
#lisaaKohde{width:100%;margin-bottom:8px;padding:9px 10px;border:none;border-radius:9px;background:var(--grad-btn);color:#fff;font-size:13px;font-weight:700;cursor:pointer;}
#lisaaKohde:hover{filter:brightness(1.08);}
#search{width:100%;padding:8px 10px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:9px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s;}
#search:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(238,96,162,.18);}
#search::placeholder{color:#6a6a82;}
#suodatinToggle{display:flex;width:100%;margin-top:8px;padding:7px 10px;border:1px solid var(--field-border);background:var(--field);color:var(--muted);border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;text-align:left;align-items:center;gap:8px;}
#suodatinToggle .nuoli{margin-left:auto;font-size:11px;transition:transform .15s;}
.controls.auki #suodatinToggle .nuoli{transform:rotate(180deg);}
#suodattimet{display:none;margin-top:8px;}
.controls.auki #suodattimet{display:block;}
.filterrow{display:flex;gap:8px;margin-bottom:6px;}
.chip{flex:1;cursor:pointer;padding:7px 4px 6px;border-radius:10px;border:1.5px solid var(--line);background:var(--field);text-align:center;font-size:11px;font-weight:600;letter-spacing:.3px;user-select:none;transition:border-color .15s,background .15s;}
.chip .cnt{display:block;font-family:'Sora',sans-serif;font-size:16px;font-weight:700;line-height:1.1;margin-bottom:1px;}
.chip.oma{color:#f7a3cb;} .chip.oma.active{border-color:var(--magenta);background:rgba(238,96,162,.15);}
.chip.vuokra{color:#b6a7e2;} .chip.vuokra.active{border-color:var(--violet);background:rgba(122,101,173,.16);}
.chip.off{opacity:.45;}
select{width:100%;padding:8px 10px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:9px;font-size:13px;margin-bottom:2px;outline:none;transition:border-color .15s,box-shadow .15s;}
select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(238,96,162,.18);}
.statusrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.sfilter{cursor:pointer;font-size:11px;font-weight:600;padding:3.5px 10px;border-radius:13px;border:1.5px solid var(--line);color:var(--muted);user-select:none;background:transparent;transition:border-color .14s,color .14s,background .14s;}
.sfilter:hover{border-color:#45455c;color:#c6c6da;}
.sfilter.starf.on{background:rgba(243,221,108,.15);border-color:var(--gold);color:var(--gold);}
.sfilter.lupaf[data-l="Todennäköistä"].on{background:rgba(107,203,119,.16);border-color:var(--green);color:#9fe0a6;}
.sfilter.lupaf[data-l="Epäselvää"].on{background:rgba(241,129,126,.18);border-color:var(--coral);color:#f6a8a5;}
.sfilter.lupaf[data-l="Epätodennäköistä"].on{background:rgba(232,69,60,.16);border-color:var(--red);color:#f3897f;}
.sfilter.lupaf[data-l=""].on{background:rgba(144,144,168,.16);border-color:#7a7a92;color:#c6c6d8;}

/* ---------- Kohdelista ---------- */
#list{overflow-y:auto;flex:1;min-height:180px;scrollbar-width:thin;scrollbar-color:#2e2e40 transparent;}
#list::-webkit-scrollbar{width:9px;}
#list::-webkit-scrollbar-thumb{background:#2e2e40;border-radius:6px;border:2px solid var(--panel);}
#list::-webkit-scrollbar-thumb:hover{background:#3a3a52;}
.item{padding:8px 18px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px;}
.item:hover{background:#23232f;}
.item.on{background:rgba(238,96,162,.1);box-shadow:inset 3px 0 0 var(--pink);}
.item .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle;}
.item.oma .dot{background:var(--magenta);} .item.vuokra .dot{background:var(--violet);}
.item .nm{font-weight:600;color:var(--txt);}
.item .meta{color:var(--muted);font-size:11px;margin-left:16px;}
.item .kvl{font-weight:700;color:#fff;}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:4px;}
.item .stars{color:var(--gold);font-size:12px;margin-left:5px;letter-spacing:1px;}
.item .lupa{font-weight:600;}
.tyhja{padding:18px;font-size:12px;color:#6f6f88;line-height:1.5;}

.badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:4px;}
.b-hyva{background:rgba(31,160,31,.22);color:#5fd35f;} .b-koht{background:rgba(224,164,0,.2);color:#f3c84b;}
.b-heikko{background:rgba(179,89,0,.22);color:#f0a060;} .b-ei{background:rgba(255,255,255,.08);color:#9696b0;}

/* ---------- Kartan päällä olevat elementit ---------- */
#karttaViesti{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:13px;color:var(--muted);line-height:1.5;z-index:2;pointer-events:none;}
#karttaViesti.on{display:flex;}
#karttaViesti.virhe{color:#ff7da8;}
#karttatyyppi{position:absolute;top:10px;left:10px;z-index:3;display:flex;gap:2px;background:rgba(19,19,29,.92);border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:0 4px 14px rgba(0,0,0,.4);}
#karttatyyppi button{padding:6px 11px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;}
#karttatyyppi button:hover{color:var(--txt);}
#karttatyyppi button.on{background:rgba(238,96,162,.18);color:var(--txt);}
#legenda{position:absolute;left:10px;bottom:28px;z-index:3;background:rgba(26,26,38,.92);color:var(--txt);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.5);font-size:12px;line-height:1.6;max-width:210px;}
#legenda .lotsikko{display:flex;align-items:center;gap:8px;padding:6px 11px;cursor:pointer;font-family:'Sora',sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);user-select:none;}
#legenda .lotsikko .nuoli{margin-left:auto;font-size:10px;}
#legenda .lsisalto{padding:0 11px 8px;}
#legenda.kiinni .lsisalto{display:none;}
#legenda .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;}

/* Kohteen pinni kartalla (AdvancedMarkerElement-sisältö) */
.pin{width:18px;height:18px;border-radius:50%;border:3px solid #0c0c14;box-shadow:0 1px 4px rgba(0,0,0,.6);cursor:pointer;transition:transform .12s;}
.pin:hover{transform:scale(1.25);}
.pin.sel{transform:scale(1.4);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.7);}
.pin.uusi{background:#fff;border-color:var(--pink);border-width:4px;transform:scale(1.4);box-shadow:0 0 0 4px rgba(238,96,162,.35),0 2px 8px rgba(0,0,0,.7);animation:pinSykkii 1.2s ease-in-out infinite;}
.pin.raahaus{cursor:grab;box-shadow:0 0 0 4px rgba(79,198,224,.5),0 2px 8px rgba(0,0,0,.7);animation:pinSykkii 1.2s ease-in-out infinite;}
@keyframes pinSykkii{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.4),0 2px 8px rgba(0,0,0,.7);}50%{box-shadow:0 0 0 8px rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.7);}}
/* Lisäystila: osoitin ristiksi, ohjepalkki kartan yläreunaan */
#mapWrap.lisays #map,#mapWrap.lisays #map *{cursor:crosshair!important;}
#lisaysOhje{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;display:none;align-items:center;gap:10px;background:rgba(238,96,162,.95);color:#fff;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.4);max-width:calc(100% - 20px);}
#lisaysOhje.on{display:flex;}
#lisaysOhje button{padding:5px 10px;border:none;border-radius:7px;background:rgba(0,0,0,.25);color:#fff;font-size:12px;font-weight:700;cursor:pointer;}
/* Googlen oma zoomausnappi tummana */
.gm-bundled-control .gmnoprint > div{background:rgba(26,26,38,.95)!important;}
.gm-bundled-control button{background:transparent!important;}
.gm-bundled-control button img{filter:invert(.85);}

/* ---------- Kohteen kortti (oma paneeli) ---------- */
/* max-height jättää Googlen zoomausnapit (oikea alakulma) näkyviin kortin alle */
#kortti{position:absolute;top:10px;right:10px;width:320px;max-width:calc(100% - 20px);max-height:calc(100% - 110px);z-index:4;background:var(--panel2);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.55);display:none;flex-direction:column;overflow:hidden;}
#kortti.on{display:flex;}
#kortti .kortti-yla{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);background:var(--panel);}
#kortti .kortti-yla b{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#korttiSulje{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;}
#korttiSulje:hover{color:var(--txt);}
#kortti .pop{padding:10px 14px 12px;overflow-y:auto;font-size:13px;scrollbar-width:thin;scrollbar-color:#2e2e40 transparent;}
.pop a{color:var(--accent2);}
.pop b{font-size:13px;}
.pop .statbtns{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0;}
.pop .sb{cursor:pointer;font-size:11px;padding:3px 8px;border-radius:10px;border:1.5px solid var(--field-border);background:var(--field);color:var(--muted);user-select:none;}
.pop .sb.sel{color:#fff;font-weight:600;}
.pop .lukittu .sb,.pop .lukittu .star,.pop .lukittu .lb{cursor:default;}
.pop .lukittu .sb:not(.sel),.pop .lukittu .lb:not(.sel){opacity:.45;}
.pop textarea{width:100%;min-height:54px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:6px;padding:6px;font-size:12px;font-family:inherit;resize:vertical;}
.pop textarea::placeholder{color:#6a6a82;}
.pop .stars{margin:7px 0 2px;}
.pop .stars .lbl{display:block;font-size:11px;color:var(--muted);margin-bottom:2px;}
.pop .star{cursor:pointer;font-size:21px;line-height:1;color:#54546a;user-select:none;margin-right:2px;}
.pop .star.on{color:var(--gold);}
.pop .lupabtns{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 2px;}
.pop .lupalbl{display:block;width:100%;font-size:11px;color:var(--muted);margin-bottom:1px;}
.pop .lb{cursor:pointer;font-size:11px;padding:3px 8px;border-radius:10px;border:1.5px solid var(--field-border);background:var(--field);color:var(--muted);user-select:none;}
.pop .lb.sel{color:#fff;font-weight:600;}
.pop .lb[data-l="Todennäköistä"].sel{background:var(--green);border-color:var(--green);color:#0c0c14;}
.pop .lb[data-l="Epäselvää"].sel{background:var(--coral);border-color:var(--coral);color:#0c0c14;}
.pop .lb[data-l="Epätodennäköistä"].sel{background:var(--red);border-color:var(--red);color:#fff;}
.pop .notelbl{display:block;font-size:11px;color:var(--muted);margin:8px 0 3px;}
.pop .kommentit{margin:2px 0 7px;max-height:220px;overflow-y:auto;}
.pop .kmt{border-left:2px solid var(--field-border);padding:2px 0 4px 8px;margin-bottom:6px;}
.pop .kmt.kaikki{border-left-color:var(--cyan);}
.pop .kmt-yla{display:flex;align-items:center;gap:7px;margin-bottom:2px;}
.pop .kmt-nimi{font-size:11px;font-weight:700;color:var(--pink);}
.pop .kmt-pvm{font-size:10px;color:#6f6f88;}
.pop .kmt-tag{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(79,198,224,.5);border-radius:8px;padding:0 5px;}
.pop .kdel{margin-left:auto;background:none;border:none;color:#5c5c74;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
.pop .kdel:hover{color:var(--red);}
.pop .kmt-teksti{font-size:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.pop .eikomm{font-size:11px;color:#6f6f88;padding:1px 0 5px;}
.pop .nakyvyys{display:flex;gap:10px;font-size:11px;color:var(--muted);margin:5px 0 2px;}
.pop .nakyvyys label{cursor:pointer;display:flex;gap:4px;align-items:center;}
.pop .save{margin-top:5px;padding:5px 12px;border:none;border-radius:6px;background:linear-gradient(90deg,#ee60a2,#7a65ad);color:#fff;font-weight:600;font-size:12px;cursor:pointer;transition:opacity .15s;}
.pop .save:disabled{opacity:.35;cursor:default;filter:grayscale(.7);}
.pop .hint{display:block;font-size:10px;color:#6f6f88;margin-top:7px;line-height:1.45;}
.pop .kuvat{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.pop .kuvat .kw{position:relative;}
.pop .kuvat img{width:62px;height:62px;object-fit:cover;border-radius:6px;cursor:pointer;}
.pop .kuvat .del{position:absolute;top:-6px;right:-6px;background:#c2185b;color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:11px;line-height:1;cursor:pointer;}
.pop .addimg{margin-top:6px;font-size:12px;}
.pop .tila{font-size:11px;color:var(--muted);margin-top:4px;min-height:14px;display:block;}
.pop .katso{font-size:11px;color:#6f6f88;margin-top:6px;}
.pop .osoite{color:#9696b0;}
.pop .rikastusinfo{font-size:11px;color:#6f6f88;margin-top:6px;line-height:1.45;}
.pop .rikastusinfo .kasin{color:#f3c84b;}
.pop .rikastusinfo .huomio{color:#f0a060;}
.pop .rikastusinfo .virhe{color:#f3897f;}
.pop .ktoiminnot{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px;}
.pop .kt{padding:5px 9px;border-radius:8px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);font-size:11px;font-weight:600;cursor:pointer;}
.pop .kt:hover{border-color:#5a5a78;}
.pop .kt.on{border-color:var(--cyan);color:var(--cyan);}
.pop .kt.vaara{color:#f3897f;}
.pop .kt.vaara:hover{border-color:var(--red);}
.pop .kt:disabled{opacity:.4;cursor:default;}
.pop .muokkaus .mk{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:11px;color:var(--muted);}
.pop .muokkaus .mk > span:first-child{width:118px;flex-shrink:0;}
.pop .muokkaus .mk input,.pop .muokkaus .mk select{flex:1;min-width:0;padding:5px 7px;border:1px solid var(--field-border);background:var(--field);color:var(--txt);border-radius:6px;font-size:12px;font-family:inherit;}
.pop .muokkaus .mk input:focus,.pop .muokkaus .mk select:focus{border-color:var(--pink);outline:none;}
.pop .muokkaus .valinnat{display:flex;gap:12px;color:var(--txt);}
.pop .muokkaus .valinnat label{display:flex;gap:4px;align-items:center;cursor:pointer;}
.pop .muokkaus .mnapit{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;}
.pop .muokkaus .toissijainen{padding:5px 12px;border-radius:6px;border:1px solid var(--field-border);background:var(--field);color:var(--muted);font-size:12px;cursor:pointer;}
.pop .muokkaus .save{margin-top:0;}
.pop .linkit{margin-top:8px;}
.pop .kuvat .eikuva{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:6px;background:var(--field);color:var(--muted);font-size:20px;}
.pop .huom{color:#e08600;font-size:11px;}
.pop hr{margin:6px 0;border:none;border-top:1px solid #2a2a3a;}
.pop .pieni{font-size:12px;color:#9696b0;}

#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:6000;cursor:zoom-out;}
#lightbox img{max-width:92%;max-height:92%;border-radius:8px;}
.saving{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:8px 16px;border-radius:20px;font-size:13px;z-index:4000;display:none;}

/* ---------- Puhelin: kartta ylhäällä, paneeli alhaalla ---------- */
@media (max-width:640px){
  #wrap{flex-direction:column;}
  #mapWrap{height:52vh;height:52dvh;flex:none;}
  #sidebar{width:100%;height:48vh;height:48dvh;flex:1;border-right:none;border-top:1px solid var(--line);}
  header{padding:10px 14px 8px;}
  header .logo img{height:26px;margin-bottom:4px;}
  header h1{display:none;}
  header p{display:inline;margin:0;}
  header #kayttaja{display:inline;margin-left:8px;}
  #kansiot{padding:8px 14px;}
  #kansiot > label.lt{display:none;}
  #kansioToggle{display:flex;}
  #kansioLista{display:none;margin-top:6px;}
  #kansiot.auki #kansioLista{display:flex;}
  .controls{padding:8px 14px;}
  #list{min-height:120px;}
  .item{padding:7px 14px;}
  #kortti{position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;max-height:70vh;max-height:70dvh;border-radius:14px 14px 0 0;z-index:1500;}
  #karttatyyppi{top:8px;left:8px;}
  #legenda{bottom:26px;left:8px;}
  #legenda.kiinni-puhelin .lsisalto{display:none;}
}