/* ══════════════════════════════════════════════════════════════════════════
   rafla.css — Raflan koko ilme.

   Pohja on deeptechin site/chrome.css + index-map.html (30.10.2026): sama
   paletti, Plex Sans, pyöristykset, pehmeät varjot, reunasta reunaan kulkeva
   otsikkopalkki, vasen sivupaneeli ja kartan päällä kelluvat valikot.
   Arvot on KOPIOITU eikä linkitetty: Rafla on oma saittinsa, ja sen ilme saa
   jatkossa erota deeptechistä ilman että toinen hajoaa.

   Kaikki ilmeen arvot ovat :rootissa. Alempana olevat säännöt viittaavat
   niihin eivätkä kirjoita värejä itse.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── paletti (deeptech) ── */
  --paper:#fbfbf9; --paper2:#ffffff;
  --ink:#332e26; --ink-d:#1f1a14; --ink-l:#8b8275; --ink-rgb:51,46,38;
  --hair:rgba(var(--ink-rgb),.20);
  --red:#b04a30;
  --line:#e0dad4; --frame:var(--line);
  --surface:#ffffff; --surface-rgb:255,255,255;
  --on-ink:#faf9f5; --on-ink-rgb:250,249,245;
  --head-bg:#fdfcfa;
  --shadow-rgb:31,26,20;
  --overlay:rgba(var(--shadow-rgb),.34);
  /* ── Raflan omat toimintovärit ──
     Deeptechissä muste on ainoa väri. Raflassa on kaksi asiaa, joiden PITÄÄ
     erottua kartalla yhdellä silmäyksellä: vapautunut pöytä (vihreä) ja
     Raflan oma pöytä (kulta). Sävyt on taitettu paletin lämpöön. */
  --vapaa:#2f7a45; --vapaa-rgb:47,122,69;
  --rafla-poyta:#a87a14;
  /* ── muoto ── */
  --r-s:8px; --r-m:14px;
  --bw:1px; --bw-h:1px; --bw-pin:1.5px;
  --sh-btn:0 1px 2px rgba(var(--shadow-rgb),.06);
  --sh-bar:0 2px 8px rgba(var(--shadow-rgb),.08);
  --sh-tip:0 4px 14px rgba(var(--shadow-rgb),.16);
  --sh-pop:0 8px 24px rgba(var(--shadow-rgb),.10);
  --sh-modal:0 22px 56px rgba(var(--shadow-rgb),.16);
  --sh-pin:0 2px 6px rgba(var(--shadow-rgb),.14);
  --sh-pin-h:0 6px 16px rgba(var(--shadow-rgb),.20);
  --sh-clus:0 4px 12px rgba(var(--shadow-rgb),.18);
  /* ── typografia ── */
  --font:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --fw-d:600;
  /* ── pohjakartta (deeptech, positronin sävyt) ──
     app.js sijoittaa nämä map-style.json:n rooleihin ("@water" -> --map-water). */
  --map-land:#f2f3f0; --map-water:#c2c8ca; --map-green:#e6e9e5; --map-built:#eaeae6;
  --map-road:#ffffff; --map-road-case:#d5d5d5; --map-border:#b3b3b3;
  --map-label:#333333; --map-label-minor:#666666; --map-label-water:#495e91; --map-halo:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
button{font:inherit;color:inherit}

/* 100dvh seuraa mobiiliselaimen todellista korkeutta osoiterivin
   piiloutuessa; 100vh on varalla vanhoille selaimille. */
body{color:var(--ink-d);font-family:var(--font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;
  height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}

/* ── otsikkopalkki ───────────────────────────────────────────────────────── */
/* Reunasta reunaan, vain alaviiva - kuten deeptechissä. */
.titleblock{background:var(--head-bg);border-bottom:var(--bw) solid var(--frame);flex-shrink:0}
.tb-main{display:flex;align-items:center;gap:14px;padding:20px 16px 18px;flex-wrap:wrap}
.tb-logo{width:clamp(28px,4.6vw,40px);height:clamp(28px,4.6vw,40px);color:var(--ink);flex-shrink:0}
.tb-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.tb-main h1{font-weight:var(--fw-d);font-size:clamp(26px,4.4vw,38px);line-height:1.05;color:var(--ink-d);letter-spacing:-.01em}
.tb-tag{font-size:13px;color:var(--ink-l)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.demo{font-size:11px;color:var(--ink-l);border:var(--bw) dashed var(--hair);border-radius:var(--r-s);padding:6px 10px}
.demo b{color:var(--ink-d);font-weight:var(--fw-d)}

/* ── pikasuodattimet otsikon alla ────────────────────────────────────────── */
/* Samat pillerit kuin deeptechin vaihesuodattimessa (.fchip). */
.filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 16px;
  border-bottom:var(--bw) solid var(--frame);background:var(--head-bg);flex-shrink:0}
.fsep{width:1px;align-self:stretch;background:var(--line);margin:2px 3px}
.fchip{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-d);font-size:11.5px;
  color:var(--ink-d);border:var(--bw) solid var(--line);border-radius:var(--r-s);
  background:rgba(var(--surface-rgb),.55);padding:4px 9px;cursor:pointer;user-select:none;
  transition:border-color .12s,background .12s,color .12s}
.fchip:hover{border-color:var(--ink)}
.fchip.sel{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.fchip .cn{font-weight:400;font-size:10.5px;color:var(--ink-l)}
.fchip.sel .cn{color:rgba(var(--on-ink-rgb),.75)}
.fchip.go{border-color:rgba(var(--vapaa-rgb),.55);color:var(--vapaa)}
.fchip.go:hover{border-color:var(--vapaa)}
.fchip.go.sel{background:var(--vapaa);border-color:var(--vapaa);color:#fff}
.fchip.go.sel .cn{color:rgba(255,255,255,.8)}
.fchip .by{font-weight:400;color:var(--ink-l)}
.fchip.sel .by{color:rgba(var(--on-ink-rgb),.75)}

/* ── runko: vasen paneeli + kartta ───────────────────────────────────────── */
#shell{flex:1;display:flex;min-height:0}
#wrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:var(--map-land);font-family:var(--font)}

/* Paneeli vain leveällä näytöllä, kuten deeptechissä: puhelimessa 340 px
   peittäisi koko kartan. Puhelimessa lista avataan kartan päältä napista. */
#side{display:none}
@media(min-width:1000px){
  #side{display:flex;flex-direction:column;width:340px;flex-shrink:0;min-height:0;
    background:var(--paper2);border-right:var(--bw) solid var(--frame)}
  body.noside #side{display:none}
}
.sideh{padding:12px 12px 8px;border-bottom:var(--bw-h) solid var(--line)}
#q{width:100%;font-family:var(--font);font-size:12.5px;padding:7px 10px;border:var(--bw) solid var(--frame);
  background:var(--surface);color:var(--ink-d);border-radius:var(--r-s);outline:none}
#q:focus{box-shadow:0 0 0 2px rgba(var(--ink-rgb),.18)}
#sidecount{font-size:11px;color:var(--ink-l);margin-top:7px}
#list{flex:1;overflow:auto;min-height:0}
.row{display:flex;gap:10px;width:100%;padding:10px 12px;border:0;border-bottom:var(--bw-h) solid var(--line);
  background:none;text-align:left;cursor:pointer;color:var(--ink-d)}
.row:hover,.row.sel{background:rgba(var(--ink-rgb),.06)}
.row .pin{flex-shrink:0;box-shadow:none}
.row .pin::after,.row .pin .n,.mhead .pin .n{display:none}
.rb{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.rt{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.rt b{font-weight:var(--fw-d);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc{font-size:11px;color:var(--ink-l);white-space:nowrap}
.rd{font-size:12px;line-height:1.4;color:var(--ink-d);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs{font-size:11px;color:var(--ink-l);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.empty{padding:18px 12px;color:var(--ink-l);font-size:12.5px}
#sidet{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:900;
  width:18px;height:48px;align-items:center;justify-content:center;cursor:pointer;
  background:var(--surface);border:var(--bw) solid var(--frame);border-left:0;color:var(--ink-d);
  border-radius:0 var(--r-s) var(--r-s) 0;font-size:11px;padding:0}
@media(min-width:1000px){#sidet{display:flex}}

/* Pienet merkinnät: UUSI ja vapaan pöydän kellonaika. */
.tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;
  border-radius:4px;padding:1px 5px;line-height:1.4}
.tag.uusi{background:var(--ink);color:var(--on-ink)}
.tag.aika{color:var(--vapaa);border:var(--bw) solid rgba(var(--vapaa-rgb),.45);font-variant-numeric:tabular-nums}
.tag.aika.rafla{color:var(--rafla-poyta);border-color:rgba(168,122,20,.45)}

/* ── kartan päällä kelluvat valikot (deeptechin .bar) ────────────────────── */
.bar{position:absolute;top:12px;left:12px;right:12px;z-index:900;display:flex;gap:6px;
  align-items:flex-start;flex-wrap:wrap;pointer-events:none}
.bar>*{pointer-events:auto}
.dd{position:relative}
.ddb,.reset,.listbtn{font-family:var(--font);font-size:11.5px;padding:5px 10px;border:var(--bw) solid var(--frame);
  border-radius:var(--r-s);cursor:pointer;color:var(--ink-d);background:var(--surface);
  display:inline-flex;align-items:center;gap:6px;box-shadow:var(--sh-btn)}
.ddb:hover,.dd.open .ddb,.reset:hover,.listbtn:hover{background:var(--ink);color:var(--on-ink)}
.ddb b{color:var(--on-ink);background:var(--red);padding:0 5px;font-size:10px;border-radius:4px}
.dd.open .ddb b{background:var(--surface);color:var(--ink-d)}
.ddp{display:none;position:absolute;top:calc(100% + 5px);left:0;background:var(--paper2);
  border:var(--bw) solid var(--frame);border-radius:var(--r-m);padding:7px;max-height:60vh;overflow:auto;
  min-width:220px;box-shadow:var(--sh-pop)}
.dd.open .ddp{display:block}
.pill{display:flex;width:100%;margin-bottom:3px;font-size:12px;padding:5px 9px;border:var(--bw-h) solid var(--line);
  border-radius:var(--r-s);cursor:pointer;user-select:none;color:var(--ink-d);background:var(--surface);
  align-items:center;gap:6px;text-align:left}
.pill:hover{border-color:var(--ink)}
.pill .cn{color:var(--ink-l);font-size:10.5px;margin-left:auto}
.pill.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink);font-weight:var(--fw-d)}
.pill.on .cn{color:var(--on-ink)}
.hits{font-size:11.5px;padding:5px 9px;background:rgba(var(--surface-rgb),.75);border-radius:var(--r-s);
  border:var(--bw) solid var(--line);color:var(--ink-l);align-self:center}
.hits.nar{border-color:var(--ink);color:var(--ink-d);background:var(--surface);font-weight:var(--fw-d)}
/* Listanappi vain kapealla näytöllä, jossa sivupaneelia ei ole. */
.listbtn{margin-left:auto}
@media(min-width:1000px){.listbtn{display:none}}

/* ── merkit ──────────────────────────────────────────────────────────────── */
/* Valkoinen pyöristetty neliö, ohut mustekehys, pehmeä varjo (deeptechin
   .pin). Koko kertoo kuumuuden; kuumimmilla on lisäksi ulkokehä, kuten
   deeptechin "scaled"-yhtiöillä. */
.mk{cursor:pointer}
.maplibregl-marker:hover{z-index:5}
.pin{position:relative;background:var(--surface);border:var(--bw-pin) solid var(--ink);border-radius:var(--r-s);
  box-shadow:var(--sh-pin);display:flex;align-items:center;justify-content:center;transition:transform .12s}
.pin:hover{transform:translateY(-1px);box-shadow:var(--sh-pin-h)}
.pin img{width:100%;height:100%;object-fit:contain;padding:2px;border-radius:var(--r-s)}
.pin .ini{font-weight:var(--fw-d);font-size:11.5px;color:var(--ink-d)}
.pin.hot::after{content:"";position:absolute;inset:-5px;border:var(--bw) solid var(--ink);border-radius:11px;opacity:.55}
.pin.sel{outline:2.5px solid var(--ink-d);outline-offset:3px}
.pin .t{position:absolute;top:-10px;left:-14px;background:var(--vapaa);color:#fff;font-size:9px;font-weight:700;
  font-variant-numeric:tabular-nums;border-radius:4px;padding:1px 4px;box-shadow:var(--sh-pin);z-index:2}
.pin .t.rafla{background:var(--rafla-poyta)}
.pin .t.pian{animation:syke 1.6s ease-in-out infinite}
@keyframes syke{0%,100%{box-shadow:0 0 0 0 rgba(var(--vapaa-rgb),.6)}50%{box-shadow:0 0 0 5px rgba(var(--vapaa-rgb),0)}}
@media(prefers-reduced-motion:reduce){.pin .t.pian{animation:none}}
.pin .n{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--on-ink);
  font-size:8px;font-weight:700;letter-spacing:.05em;border-radius:4px;padding:1px 4px;z-index:2}
/* Klusteri täytettynä: valkoinen ympyrä katoaisi vaalealle kartalle. */
.clus{background:var(--ink-d);border:var(--bw-pin) solid var(--surface);color:var(--on-ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:var(--fw-d);box-shadow:var(--sh-clus)}

/* MapLibren omat hallinnat saitin muotokieleen. */
.maplibregl-ctrl-group{background:var(--surface);border:var(--bw) solid var(--frame);border-radius:var(--r-s);box-shadow:var(--sh-bar)!important}
.maplibregl-ctrl-group button+button{border-top:var(--bw) solid var(--frame)}
.maplibregl-ctrl-attrib{background:rgba(var(--surface-rgb),.8)!important;color:var(--ink-l);font-size:9.5px}
.maplibregl-ctrl-attrib a{color:var(--ink)}
.maplibregl-popup.tt .maplibregl-popup-content{background:var(--ink-d);color:var(--on-ink);border-radius:var(--r-s);
  font-weight:var(--fw-d);font-size:12px;padding:5px 9px;box-shadow:var(--sh-tip)}
.maplibregl-popup.tt .maplibregl-popup-tip{display:none}
.maplibregl-popup.tt{pointer-events:none}
.notice{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:900;background:var(--surface);
  border:var(--bw) solid var(--frame);border-radius:var(--r-s);padding:8px 12px;font-size:12px;box-shadow:var(--sh-pop)}

/* ── paikkakortti (deeptechin yrityskortti) ──────────────────────────────── */
.overlay{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;z-index:2000;padding:24px}
.overlay.open{display:flex}
.modal{background:var(--paper2);border:var(--bw) solid var(--frame);border-radius:var(--r-m);max-width:520px;width:100%;
  max-height:86vh;overflow:auto;position:relative;box-shadow:var(--sh-modal);animation:pop .14s ease}
@keyframes pop{from{transform:translateY(4px);opacity:0}to{transform:none;opacity:1}}
.modal .x{position:absolute;top:12px;right:12px;background:var(--surface);border:var(--bw) solid var(--frame);
  border-radius:var(--r-s);color:var(--ink-d);width:28px;height:28px;cursor:pointer;display:grid;place-items:center;font-size:14px}
.modal .x:hover{background:var(--ink);color:var(--on-ink)}
.mhead{display:flex;gap:13px;align-items:center;padding:16px 52px 16px 18px;border-bottom:var(--bw) solid var(--frame);
  background:rgba(var(--ink-rgb),.04)}
.mhead .pin{box-shadow:none;flex-shrink:0}
.mhead h3{font-size:21px;font-weight:var(--fw-d);color:var(--ink-d);line-height:1.1}
.msub{font-size:12px;color:var(--ink-l);display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.mbody{padding:16px 18px}
.mdesc{color:var(--ink-d);font-size:14px;line-height:1.55}
.mrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.mp{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;border:var(--bw-h) solid var(--line);
  border-radius:var(--r-s);background:var(--surface);padding:4px 9px;color:var(--ink-d)}
.maddr{margin-top:14px;font-size:12px;color:var(--ink-l)}
.mlinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.visit{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--on-ink);text-decoration:none;
  padding:9px 15px;font-weight:var(--fw-d);font-size:12.5px;border:var(--bw) solid var(--ink);border-radius:var(--r-s);cursor:pointer}
.visit:hover{background:var(--ink-d)}
.visit.alt{background:var(--surface);color:var(--ink-d);border-color:var(--frame)}
.visit.alt:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
/* Vaikuttajan nosto: hiusviivalaatikko, ei keltaista taustaa. */
.nosto{margin-top:14px;border:var(--bw) solid var(--line);border-left:3px solid var(--ink);border-radius:var(--r-s);padding:10px 12px}
.nosto h4{font-size:12.5px;font-weight:var(--fw-d)}
.nosto p{font-size:13px;line-height:1.5;margin-top:3px}
.nosto .by{color:var(--ink-l)}
.nosto .kaup{font-size:10.5px;color:var(--ink-l);letter-spacing:.04em;text-transform:uppercase;margin-top:5px}
/* Vapaat pöydät: kortin ylimpänä, koska ne ovat aikasidonnaisia. */
.poydat{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.poyta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;
  border:var(--bw) solid rgba(var(--vapaa-rgb),.5);border-radius:var(--r-s)}
.poyta.rafla{border-color:rgba(168,122,20,.5)}
.poyta b{font-weight:var(--fw-d);font-variant-numeric:tabular-nums}
.poyta small{display:block;font-size:11.5px;color:var(--ink-l)}
.lunasta{flex-shrink:0;background:var(--vapaa);color:#fff;border:0;border-radius:var(--r-s);padding:7px 13px;
  font-weight:var(--fw-d);font-size:12px;cursor:pointer;text-decoration:none}
.poyta.rafla .lunasta{background:var(--rafla-poyta)}
.pian{background:var(--vapaa);color:#fff;font-size:9.5px;font-weight:700;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.demohuom{font-size:12px;color:var(--ink-l);background:rgba(var(--ink-rgb),.05);border-radius:var(--r-s);padding:8px 10px}

/* ── listapaneeli puhelimessa ────────────────────────────────────────────── */
/* Leveällä näytöllä lista on sivupaneelissa. Kapealla se avataan alhaalta
   nousevaksi arkiksi, joka sisältää saman haun ja samat rivit. */
@media(max-width:999px){
  body.listopen #side{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;height:72dvh;z-index:1500;
    background:var(--paper2);border-top:var(--bw) solid var(--frame);border-radius:var(--r-m) var(--r-m) 0 0;box-shadow:var(--sh-modal)}
  .sideclose{display:block}
}
.sideclose{display:none;float:right;margin:-2px 0 6px 8px;background:none;border:0;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-l)}

/* ── kapea näyttö ────────────────────────────────────────────────────────── */
@media(max-width:680px){
  .tb-main{padding:14px 12px 12px;gap:10px}
  .tb-tag{font-size:12px}
  .tb-right{margin-left:0;width:100%}
  .filters{padding:7px 12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .fchip{flex-shrink:0}
  .bar{top:10px;left:10px;right:10px;gap:5px}
  .ddb,.reset,.listbtn{font-size:11px;padding:5px 8px}
  .ddp{min-width:0;width:max-content;max-width:calc(100vw - 24px)}
  .overlay{padding:0;align-items:flex-end}
  .modal{max-height:88dvh;border-radius:var(--r-m) var(--r-m) 0 0}
}