@import url("karta-tema.css?v=4") layer(vv-tema);

/* ==========================================================================
 * karta-v2.css — kartmotorns kostym. Gäller ALLA lägen (results, profile,
 * compare) på både Astro- och Next-bygget.
 *
 * FÖRHÅLLANDET TILL TEMAT: den här filen innehåller inte ETT enda hårdkodat
 * värde. Varje färg, radie, ram, skugga, typsnitt och pin-mått kommer ur
 * temat via var(--k-*). Temat definieras på ETT ställe: tabellen KART_TEMA
 * i webapp/app/delat/karta/tema.ts. Next skriver den inline
 * (<style data-vv-karta-tema>); för Astro-bygget, som bara länkar den här
 * filen, @import:eras den GENERERADE avskriften karta-tema.css i CSS-lagret
 * vv-tema. Olagrade regler vinner alltid över lagrade, så där Next skriver
 * temat inline gäller tema.ts oavsett vad cachen serverar av karta-tema.css.
 * Vill du ändra kartans utseende ändrar du tabellen i tema.ts, inte den här
 * filen och aldrig karta-tema.css för hand.
 *
 * ÄGANDE: style.css ägs av ett annat spår — ALLA kartstilar bor HÄR. Filen
 * länkas i body och vinner därmed ordningsvinsten över style.css/leaflet.css
 * vid lika specificitet. Cachesträngsregeln: ändrad fil = bumpad ?v= i BÅDA
 * includerna (Astro-komponenterna och webapp/app/delat/karta/tema.ts).
 * ========================================================================== */

/* RAMEN delas av alla tre lägen. Layoutfilerna (resultat-karta-layout.css,
 * jamfor.css, profil.css) sätter höjd och placering; radie, ram och bakgrund
 * är kartans egna och kommer härifrån. Den andra selektorn har specificitet
 * (0,2,0) så ramen vinner över layoutfilernas scopade (0,2,0)-regler oavsett
 * laddningsordning. */
.vv-karta,
.vv-karta[data-vv-karta] {
  position: relative;
  overflow: hidden;
  border-radius: var(--k-radie);
  border: var(--k-ram);
  box-shadow: var(--k-skugga-1);
  background: var(--k-fond);
}

/* Leaflets egen typografi (Helvetica 12px) byts mot sajtens stack.
 * Kartcontainern ÄR .leaflet-container efter init. */
.vv-karta.leaflet-container { font-family: var(--k-font); }

/* --------------------------------------------------------------------------
 * 1. BASKARTAN
 *
 * Källan väljs i temat (--k-tile-kalla) och plockas upp av motorn. Filtret
 * här är den sista putsningen mot sajtens off-white — med CARTO Positron är
 * det en hårfin justering, inte en räddningsaktion. Vid byte till OSM
 * Standard måste --k-tile-filter höjas kraftigt (se karta-motor.js).
 * ------------------------------------------------------------------------ */
.vv-karta .leaflet-tile { filter: var(--k-tile-filter); }
/* Vektorlagret (MapLibre i Leaflet, 2026-09-15) ritas ofiltrerat: Positron
   är redan lugn. Canvasen får ingen fokusram, Leaflet äger interaktionen. */
.vv-karta .leaflet-gl-layer { filter: none; }
.vv-karta .maplibregl-canvas { outline: none; }

/* Höjder. Resultatkartans och jämförkartans höjd ägs av list/karta-layouten
 * (kartan fyller en kolumn). Profilytan är ett eget objekt med en egen höjd,
 * och den höjden är TEMA: --k-hojd i webapp/app/delat/karta/tema.ts, satt per
 * läge. Ingen layoutfil sätter profilkartans höjd.
 *
 * TVÅ SELEKTORER, INTE EN. data-vv-karta-lage sätts av motorn EFTER att
 * Leaflet monterat; den serverrenderade ytan bär bara data-vv-karta. Med bara
 * lage-selektorn var ytan 0 px hög från första målningen tills motorn kört,
 * och kartan växte fram som ett hopp i layouten. Nu har den sin höjd direkt ur
 * HTML:en, och lage-selektorn står kvar för legacy-vägen. */
[data-vv-karta="profile"].vv-karta,
[data-vv-karta-lage="profile"].vv-karta { height: var(--k-hojd); }

/* ASTROS LEGACY-PROFILKARTA behåller sin gamla höjd. Den ytan (id
 * hitta-hit-karta, utan data-vv-karta) är fortfarande en fullbredds
 * sektionskarta i app/src/pages/mottagning/[id].astro, inte Next-profilens
 * 160 px i sidopanelen — samma tema, men inte samma objekt. */
.vv-karta.hitta-hit-karta:not([data-vv-karta]) { height: 380px; }
@media (max-width: 640px) {
  .vv-karta.hitta-hit-karta:not([data-vv-karta]) { height: 300px; }
}

/* --------------------------------------------------------------------------
 * 2. TILLSTÅND — laddning, fel, tomt
 *
 * Skimret ligger på :not(.is-laddad) och släcks av första lyckade plattan.
 * Fel- och tomplattan byggs av motorn som DOM och delar utseende: kartan
 * ska aldrig visa en tom grå ruta utan förklaring.
 * ------------------------------------------------------------------------ */
.vv-karta:not(.is-laddad)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--k-fond);
  background-image: linear-gradient(
    100deg,
    var(--k-skimmer-genomskinlig) 32%,
    var(--k-skimmer) 50%,
    var(--k-skimmer-genomskinlig) 68%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: vv-karta-skimmer var(--k-skimmer-tid) linear infinite;
}
@keyframes vv-karta-skimmer {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

.vv-karta-platta {
  position: absolute;
  inset: 0;
  z-index: 900; /* över tiles/pins (600-tal) — plattan tar ytan */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 24px;
  text-align: center;
  background: var(--k-fond);
  color: var(--k-ink-soft);
  font: 500 14px/1.5 var(--k-font);
}
.vv-karta-platta p { margin: 0; max-width: 34ch; }
.vv-karta-igen {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--k-linje-stark);
  border-radius: var(--k-radie-pill);
  background: var(--k-yta);
  color: var(--k-brand-ink);
  font: 600 14px/1 var(--k-font);
  box-shadow: var(--k-skugga-1);
  cursor: pointer;
}
.vv-karta-igen:hover { border-color: var(--k-brand); color: var(--k-brand); }
.vv-karta-igen:focus-visible {
  outline: 2px solid var(--k-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--k-fokus);
}

/* --------------------------------------------------------------------------
 * 3. PINS
 *
 * EN pin i hela sajten. Storleken kommer ur --k-pin-storlek, som lägena i
 * temat justerar; formen och färgen gör de aldrig.
 * OBS: yttre .vv-pin (leaflet-marker-icon) transformeras av Leaflet — alla
 * egna transforms ligger på inre element.
 * ------------------------------------------------------------------------ */
.vv-pin { background: none; border: none; }
.vv-pin-kropp { position: relative; display: block; width: 100%; height: 100%; }
.vv-pin-droppe {
  position: absolute;
  left: 50%;
  top: 4px;
  width: var(--k-pin-storlek);
  height: var(--k-pin-storlek);
  margin-left: calc(var(--k-pin-storlek) / -2);
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  background: var(--k-pin-farg);
  border: var(--k-pin-ring) solid var(--k-pin-karna);
  /* Profilens ensamma pin får en stillsam halo i stället för
   * hover-koreografi: ögat ska hitta platsen direkt, inte belönas för att
   * peka. Temat sätter --k-halo bara i profilläget. */
  box-shadow: var(--k-skugga-pin), var(--k-halo);
  transition: transform var(--k-overgang), background-color var(--k-overgang), box-shadow var(--k-overgang);
}
.vv-pin-droppe::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: var(--k-pin-karna);
}
.vv-pin.is-hover .vv-pin-droppe,
.vv-pin:hover .vv-pin-droppe {
  transform: rotate(-45deg) scale(var(--k-pin-skala-hover));
  background: var(--k-pin-farg-hover);
}
.vv-pin.is-aktiv .vv-pin-droppe {
  transform: rotate(-45deg) scale(var(--k-pin-skala-aktiv));
  background: var(--k-pin-farg-aktiv);
  box-shadow: var(--k-skugga-pin-aktiv);
}

/* Initialen (profile): mottagningens första bokstav i kärnan i stället för
 * den vita pricken. Roteras tillbaka +45° eftersom droppen är roterad -45°. */
.vv-pin-droppe.has-initial::after { display: none; }
.vv-pin-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  color: var(--k-pin-karna);
  font: 700 var(--k-text-initial) / 1 var(--k-font);
  letter-spacing: 0;
  user-select: none;
}

/* Brickan ovanför pinnen: pris i results, kolumnnummer i compare.
 * Visas när kartan står på/över klustergränsen (motorn sätter .is-priszoom),
 * och alltid i lägen där brickan är hela poängen. */
.vv-pin-bricka {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translateX(-50%) translateY(4px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  padding: 5px 9px;
  border: var(--k-ram);
  border-radius: var(--k-radie-pill);
  background: var(--k-yta);
  color: var(--k-ink);
  font: 600 var(--k-text-bricka) / 1 var(--k-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--k-skugga-1);
  transition: opacity var(--k-overgang), transform var(--k-overgang);
}
.vv-karta.is-priszoom .vv-pin-bricka {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.vv-pin.is-aktiv .vv-pin-bricka { border-color: var(--k-brand-ink); color: var(--k-brand-ink); }
/* Tooltipkortet bär redan priset — brickan viker undan så de inte staplas. */
.vv-karta.is-priszoom .vv-pin:hover .vv-pin-bricka { opacity: 0; }

/* Numrerad bricka (compare): fyllt teal, kopplar pin till kolumn. */
.vv-pin-bricka-nr {
  min-width: 22px;
  padding: 4px 7px;
  text-align: center;
  background: var(--k-brand);
  border-color: var(--k-brand);
  color: var(--k-pa-brand);
}

/* --------------------------------------------------------------------------
 * 4. TOOLTIPKORTET — samma kort i alla lägen
 *
 * I results/compare öppnas det på hover; i profile står det permanent kvar
 * som en lugn namnetikett. Samma komponent, samma typografi.
 * ------------------------------------------------------------------------ */
.leaflet-tooltip.vv-tip {
  padding: var(--k-tip-luft);
  border: var(--k-ram);
  border-radius: var(--k-radie-liten);
  background: var(--k-yta);
  color: var(--k-ink);
  box-shadow: var(--k-skugga-2);
  font-family: var(--k-font);
  white-space: normal;
  /* Leaflet-tooltipen är absolut positionerad och krymper till min-content.
   * Utan width:max-content bröt "Mr Mrs Peace" till tre rader (uppmätt).
   * max-content ger kortet sin naturliga bredd, max-width sätter taket. */
  width: max-content;
  max-width: min(240px, 70vw);
}
.leaflet-tooltip-top.vv-tip::before { border-top-color: var(--k-yta); }
.leaflet-tooltip-bottom.vv-tip::before { border-bottom-color: var(--k-yta); }
.leaflet-tooltip-left.vv-tip::before { border-left-color: var(--k-yta); }
.leaflet-tooltip-right.vv-tip::before { border-right-color: var(--k-yta); }

.vv-tipkort { display: grid; gap: 3px; }
.vv-tip-namn {
  font-size: var(--k-text-tip);
  font-weight: 600;
  line-height: 1.3;
  color: var(--k-ink);
}
.vv-tip-rad,
.vv-tip-betyg { font-size: var(--k-text-meta); color: var(--k-ink-muted); }
.vv-tip-betyg strong { color: var(--k-ink); font-variant-numeric: tabular-nums; }
.vv-tip-stjarna { color: var(--k-stjarna); margin-left: 2px; }
.vv-tip-pris {
  font-size: var(--k-text-meta);
  font-weight: 600;
  color: var(--k-brand-ink);
  font-variant-numeric: tabular-nums;
}
.vv-tip-tid {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--k-text-meta);
  color: var(--k-ink-soft);
}
.vv-tip-tid strong { color: var(--k-ink); font-weight: 600; }
.vv-tip-prick {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--k-gron);
}

/* --------------------------------------------------------------------------
 * 5. KLUSTER — teal cirkel med antal, storleksklasser s/m/l.
 * .vv-kluster-aktiv sätts av list→kartsynken när det hovrade kortets pin
 * just nu är klustrad, så synken aldrig blir stum.
 * ------------------------------------------------------------------------ */
.vv-kluster { background: none; border: none; }
.vv-kluster-inre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--k-kluster-farg);
  color: var(--k-pa-brand);
  border: var(--k-kluster-ring) solid var(--k-pa-brand);
  font: 600 var(--k-text-kluster) / 1 var(--k-font);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--k-skugga-kluster);
  transition: transform var(--k-overgang), background-color var(--k-overgang), box-shadow var(--k-overgang);
}
.vv-kluster-m .vv-kluster-inre { font-size: 14px; }
.vv-kluster-l .vv-kluster-inre { font-size: 15px; }
.vv-kluster:hover .vv-kluster-inre {
  transform: scale(1.06);
  background: var(--k-brand-djup);
}
.vv-kluster.vv-kluster-aktiv .vv-kluster-inre {
  background: var(--k-brand-ink);
  box-shadow: var(--k-skugga-kluster-aktiv);
}

/* Obligatorisk animations-CSS ur Leaflet.markercluster 1.5.3
 * (dist/MarkerCluster.css, MIT) — inlinad här i stället för en extra fil;
 * Default-temat används INTE (klusterikonen ovan är vår egen). */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* --------------------------------------------------------------------------
 * 6. KONTROLLER OCH ATTRIBUTION
 *
 * Zoomen bor bottomright, attributionen bottomleft. Tidigare låg båda till
 * höger och kolliderade mitt i bilden på den 320 px höga profilkartan.
 * Attributionen är ALLTID synlig — den är ett licenskrav, inte en detalj.
 * ------------------------------------------------------------------------ */
.vv-karta .leaflet-control-zoom.leaflet-bar {
  border: none;
  border-radius: var(--k-radie-liten);
  box-shadow: var(--k-skugga-2);
  overflow: hidden;
  margin: 0 16px 16px 0;
}
.vv-karta .leaflet-control-zoom.leaflet-bar a {
  width: var(--k-kontroll-storlek);
  height: var(--k-kontroll-storlek);
  line-height: var(--k-kontroll-storlek);
  font-size: 18px;
  font-weight: 400;
  color: var(--k-ink);
  background: var(--k-yta);
  border: none;
  border-bottom: 1px solid var(--k-linje);
}
.vv-karta .leaflet-control-zoom.leaflet-bar a:last-child { border-bottom: none; }
.vv-karta .leaflet-control-zoom.leaflet-bar a:hover {
  background: var(--k-fond);
  color: var(--k-brand);
}
.vv-karta .leaflet-control-zoom.leaflet-bar a:focus-visible {
  outline: 2px solid var(--k-brand);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px var(--k-fokus);
}
.vv-karta .leaflet-control-zoom.leaflet-bar a.leaflet-disabled {
  color: var(--k-ink-muted);
  opacity: 0.45;
  background: var(--k-yta);
}

.vv-karta .leaflet-control-attribution {
  background: var(--k-papper); /* fallback där color-mix saknas */
  background: color-mix(in srgb, var(--k-papper) 88%, transparent);
  color: var(--k-ink-muted);
  font: 400 var(--k-text-attribution) / 1.4 var(--k-font);
  padding: 3px 9px;
  margin: 0;
  border-radius: 0 var(--k-radie-liten) 0 0;
  /* Attributionen får ALDRIG kapas. En första version hade nowrap +
   * ellipsis och klippte "OpenStreetMap-bidragsgiva…" — snyggt, och ett
   * licensbrott. Leaflets attributionskontroll flyter (float) och krymper
   * till min-content, vilket i stället bröt texten till tre rader som
   * klipptes av kartans nederkant (uppmätt). width:max-content ger remsan
   * dess naturliga bredd; max-width låter den bryta först om kartan
   * verkligen är smalare än texten. */
  width: max-content;
  max-width: 100%;
  white-space: normal;
}
.vv-karta .leaflet-control-attribution a {
  color: var(--k-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vv-karta .leaflet-control-attribution a:hover { color: var(--k-brand); }

/* Popupen (om någon yta använder popup i stället för tooltip) i samma språk. */
.vv-karta .leaflet-popup-content-wrapper {
  border: var(--k-ram);
  border-radius: var(--k-radie-liten);
  box-shadow: var(--k-skugga-2);
  color: var(--k-ink);
  font-family: var(--k-font);
}
.vv-karta .leaflet-popup-content {
  margin: 10px 14px;
  font-size: var(--k-text-tip);
  font-weight: 600;
  line-height: 1.4;
}
.vv-karta .leaflet-popup-tip { box-shadow: var(--k-skugga-1); }

/* --------------------------------------------------------------------------
 * 6b. VERKTYGSRADEN UNDER PROFILKARTAN — adress, Vägbeskrivning, Kopiera
 *
 * Serverrenderad text och länkar (fungerar utan JS); "Kopiera adress" får
 * sitt beteende av KOPIERA_ADRESS_SKRIPT i tema.ts. Samma tokens som kartan
 * så raden läses som kartans, inte som sidans. Finns även när mottagningen
 * saknar koordinater: då är raden hela "Hitta hit", utan tom kartruta.
 * ------------------------------------------------------------------------ */
.vv-karta-verktyg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 12px 0 0;
}
.vv-karta-adress {
  flex: 1 1 100%;
  margin: 0 0 2px;
  color: var(--k-ink-soft);
  font: 400 var(--k-text-tip) / 1.5 var(--k-font);
  overflow-wrap: anywhere;
}
.vv-karta-knapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--k-linje-stark);
  border-radius: var(--k-radie-pill);
  background: var(--k-yta);
  color: var(--k-brand-ink);
  font: 600 var(--k-text-tip) / 1 var(--k-font);
  text-decoration: none;
  box-shadow: var(--k-skugga-1);
  cursor: pointer;
  transition: border-color var(--k-overgang), color var(--k-overgang), background-color var(--k-overgang);
}
.vv-karta-knapp:hover { border-color: var(--k-brand); color: var(--k-brand); }
.vv-karta-knapp:focus-visible {
  outline: 2px solid var(--k-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--k-fokus);
}
.vv-karta-knapp.is-kopierad { border-color: var(--k-gron); color: var(--k-gron); }
.vv-karta-knapp svg { flex: 0 0 auto; }
.vv-karta-lank {
  color: var(--k-ink-muted);
  font: 400 var(--k-text-meta) / 1 var(--k-font);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vv-karta-lank:hover { color: var(--k-brand); }
.vv-karta-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 7. MOBIL
 *
 * Helskärmskartan i resultatläget: kontrollerna lyfts ovanför "Dölj
 * kartan"-pillen (fixed bottom center, 48 px + 16 px marginal; Jämför-raden
 * lyfter pillen ytterligare). Brytpunkten 960 px är List+Map-layoutens egen.
 * Attributionen ligger till vänster och krockar inte med den centrerade
 * pillen, men lyfts ändå ovanför safe-area på mobil.
 * ------------------------------------------------------------------------ */
@media (max-width: 960px) {
  .rk-karta.vv-karta .leaflet-control-zoom.leaflet-bar {
    margin: 0 16px calc(80px + env(safe-area-inset-bottom, 0px)) 0;
  }
  body:has(#vv-jamfor-rad) .rk-karta.vv-karta .leaflet-control-zoom.leaflet-bar {
    margin-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
  .rk-karta.vv-karta .leaflet-control-attribution {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* --------------------------------------------------------------------------
 * 8. Rörelserespekt — transitions/animationer stängs av helt.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vv-karta::before,
  .vv-pin-droppe,
  .vv-pin-bricka,
  .vv-kluster-inre,
  .leaflet-cluster-anim .leaflet-marker-icon,
  .leaflet-cluster-anim .leaflet-marker-shadow,
  .leaflet-cluster-spider-leg {
    transition: none !important;
    animation: none !important;
  }
}