/* skal-lab/karta.css — /karta-skalet (Sidovy E). Tokens + glas + brytpunkter bor i lab.css. */

/* ── /karta-skalet ─────────────────────────────────────────────────────── */
/* STARTBANA (samma recept som /karta, css/karta.css §30.12): iOS 26 Safari visar sidans pixlar bakom statusfältet och
   sökrutan BARA när scrollY ≠ 0, annars rotens platta färg. Body skjuts ner --lk-band (= skärmhöjd − innerHeight, mätt i
   karta.js, 0 utanför iOS), sidan scrollas dit och HÅLLS där (karta.js) ⇒ Safari ser en scrollad sida. Kartan sticker ut
   bandet åt båda håll. Överhäng (arket nedskjutet) klipps visuellt av clip-path; roten scrollbar bara när bandet > 0 (karta.js), scrollen äts av låset
   (utan låset flyttade Safari sidan när Sök fick fokus och kortet hamnade under menyn) */
/* safe area: i Safari (bandet > 0, karta.js .lk-bandad) står sidan redan mellan statusfältet och sökrutan, så env() lade en extra
   remsa ovanpå insetten; där = 0 ⇒ samma luft mot alla kanter. Hemskärmsappen (inget band) behåller env() */
:root { --lk-sa-t: env(safe-area-inset-top); --lk-sa-b: env(safe-area-inset-bottom); }
/* botten: Safaris piller står ~14 px under sidans kant; −17 ⇒ ~10 px mellan rutorna = Safaris egen lucka piller↔knapp (mätt iPhone 2026-09-29) */
.lk-bandad { --lk-sa-t: -12px; --lk-sa-b: -17px; }   /* toppen: 12 px närmare statusfältet */
/* ingen sid-zoom (nyp/dubbeltryck) över UI:t, bara kartan zoomar; noll-specificitet ⇒ egna touch-action (kartan: none) vinner. iOS: gesturestart i karta.js */
:where(body.lk, body.lk *) { touch-action: pan-x pan-y; }
/* de flytande kontrollerna rullar inget: drag över dem drog annars hela fönstret (roten scrollar för startbanan) */
:where(.lk-flikar, .lk-brand, .lk-ctrl, .lk-kredit, .lk-verktygsrad), :where(.lk-flikar, .lk-brand, .lk-ctrl, .lk-kredit, .lk-verktygsrad) * { touch-action: none; }
html:has(> body.lk) { overflow: hidden; overscroll-behavior: none; background: var(--s-map); }
[data-theme="light"]:has(> body.lk) { background: #ece6da; }
body.lk { position: relative; margin: var(--lk-band, 0px) 0 0; height: 100dvh; overflow: visible; clip-path: inset(calc(-1 * var(--lk-band, 0px)) 0); font: var(--type-body); color: var(--fg-2); background: var(--s-deep); }
/* hamburgarmenyn (meny.css) absolut i body här, inte fixed: ett fixed element mot skärmkanten får Safari att måla egna
   platta fält i statusfältet och sökrutan (svarta boxar över kartan). Slöjan sticker ut bandet som kartan. */
body.lk > :is(.sida-meny, .sida-meny-slojan) { position: absolute; }
body.lk > .sida-meny-slojan { inset: calc(-1 * var(--lk-band, 0px)) 0; }
.lk-karta {
  position: absolute; inset: calc(-1 * var(--lk-band, 0px)) 0; z-index: 0; overflow: hidden; touch-action: none; background: var(--s-map);
}
[data-theme="light"] .lk-karta { background: #ece6da; }
/* pekaren: vanlig pil i kartan, handen bara medan man håller nere (MapLibres egen css säger grab hela tiden) */
.lk-bas .maplibregl-canvas-container.maplibregl-interactive { cursor: default; }
.lk-bas .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
.lk-bas .maplibregl-canvas-container.lk-peka { cursor: pointer; }   /* över en prick eller text (karta.js bas mousemove); :active ovan vinner medan man drar */
/* baskartan: riktig MapLibre (karta.js) som tar gesterna själv (dra, hjul, nyp, vrid); lagren ovanför släpper igenom pekaren
   där de inte har något att klicka på (områdenas svg: bara själva ytorna) */
.lk-bas { position: absolute; inset: 0; z-index: -1; }
.lk-karta > :not(.lk-langtryck, .lk-bas) { translate: var(--pan-x, 0) var(--pan-y, 0); }
/* glidande pan (sparPanorera): registrerade så de kan interpoleras; barnen ärver värdet, deras egna transitioner rörs inte */
@property --pan-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --pan-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --z { syntax: '<number>'; inherits: true; initial-value: 1; }
.lk-karta.lk-glid { transition: --pan-x 520ms var(--lk-ease), --pan-y 520ms var(--lk-ease), --z 520ms var(--lk-ease); }
.lk-karta.lk-zoomar:not(.lk-glid) { transition: --z 260ms var(--lk-ease); }   /* reduce-motion: karta.js sätter aldrig klassen */
.lk-zoom button:disabled { opacity: .35; cursor: default; }
.lk-karta__ort { position: absolute; font: var(--type-meta); color: var(--fg-1); text-shadow: 0 1px 2px var(--sh-55); letter-spacing: .04em; will-change: transform; pointer-events: none; }   /* bara text, får aldrig äta kartdrag · eget lager: translate per bildruta (projicera) blir ren compositing */
[data-theme="light"] .lk-karta__ort { color: #2b2418; text-shadow: 0 1px 2px rgba(255,255,255,.8); }
body:not(.lk-testlager) .lk-karta > .lk-test { visibility: hidden; pointer-events: none; }   /* demoorterna = Testlager i Kartval (karta.js LAGER id test) */
/* platsmarkeringen speglar riktiga .mm-platsprick (ui/sidovy-kartrubrik.js): knappen är ett 0×0-ankare på koordinaten,
   markpunkten 8 px, broschen 40 px 14 px ovanför med platsens glyf (stad/tatort/hus/pelarhus/trad), engångsringen går ur broschen.
   Broschen finns bara på den valda (.on); .lk-prick--ny tas av och sätts på med reflow emellan så alla tre startar om. */
.lk-prick { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; z-index: 10; line-height: 0; }
.lk-karta > .lk-prick.lk-gl { display: none; }   /* MapLibre ritar pricken (kartlagret lk-prickar i karta.js); knappen bär bara tillståndet */
.lk-prick::before { content: ""; position: absolute; inset: -12px; }   /* träffyta 24 px runt en 8 px-prick */
/* färg per platstyp (prick, brosch, ring): Okabe-Ito ur NYTT_KARTLAGER §0.5, aldrig egen grön; vård = accenten, nål = a-2b */
.lk-prick { --pf: var(--a-4); }
/* kommunens prick står på kommunnamnets ankare; inzoomat (orterna tar över, karta.js lk-ortniva) försvinner den med namnet */
.lk-prick--kommun { transition: opacity .25s; }
.lk-karta.lk-ortniva .lk-prick.lk-prick--kommun { opacity: 0; pointer-events: none; }   /* över .lk-karta .lk-prick.on (opacity 1) */
.lk-prick--stad { --pf: #0072b2; } .lk-prick--tatort { --pf: #d55e00; } .lk-prick--hus { --pf: #e69f00; } .lk-prick--pelarhus { --pf: #cc79a7; } .lk-prick--trad { --pf: #009e73; }
.lk-prick__prick { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 999px; box-sizing: border-box; background: var(--pf); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.38), 0 0 0 .5px rgba(0,0,0,.12); }
.lk-prick__brosch { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); transform-origin: 50% 100%; width: 40px; height: 40px; border-radius: 999px; box-sizing: border-box; background: var(--pf); border: 3px solid #fff; color: #fff; align-items: center; justify-content: center; box-shadow: 0 2px 9px rgba(0,0,0,.34), 0 0 0 .5px rgba(0,0,0,.12); }
.lk-prick__brosch svg { width: 21px; height: 21px; }
.lk-prick__brosch::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--pf); pointer-events: none; opacity: 0; }
.lk-prick.on .lk-prick__brosch { display: flex; }
.lk-prick:hover .lk-prick__brosch { box-shadow: 0 2px 9px rgba(0,0,0,.34), 0 0 0 5px var(--aw-20); }
/* samma tre kurvor och 150 ms fördröjning som live: etiketten tonas ut först, sedan fjädrar prick + brosch, ringen sist */
.lk-prick--ny .lk-prick__prick { animation: lk-prick-pop 340ms cubic-bezier(.34,1.56,.64,1) 150ms both; }
.lk-prick--ny .lk-prick__brosch { animation: lk-prick-brosch 380ms cubic-bezier(.34,1.56,.64,1) 150ms both; }
.lk-prick--ny .lk-prick__brosch::after { animation: lk-prick-ring 620ms ease-out 150ms both; }
@keyframes lk-prick-pop { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes lk-prick-brosch { from { transform: translateX(-50%) scale(.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes lk-prick-ring { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
/* håll länge i kartan = live (map/pins.js .mm-langtryck-ring): ringen drar ihop sig mot pekpunkten på 500 ms, sedan landar nålen */
.lk-langtryck { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 999px; border: 2.5px solid var(--a-4); pointer-events: none; z-index: 9; animation: lk-langtryck-krymp 500ms linear both; }
@keyframes lk-langtryck-krymp { from { transform: scale(1); opacity: .28; } to { transform: scale(.36); opacity: .95; } }
/* ny nål sjunker in mjukt (kort fall, växer, lägger sig); en nål som dras lyfts. Barnen faller, inte knappen: knappens translate är kartans
   projicering (projEl i karta.js), en animation på den ryckte nålen 13 px fel tills den landat. Ersätter popp + brosch-popp */
.lk-karta > .lk-prick.lk-prick--nal.lk-prick--landar > :is(.lk-prick__prick, .lk-prick__brosch) { animation: lk-landar 560ms cubic-bezier(.33,1,.68,1) both; }
/* Sparade-lägets brosch-popp redan färdig (-1 ms) i listan: när --landar tas bort är det samma animation, den spelas inte om */
.lk-karta > .lk-prick.lk-prick--nal.lk-prick--landar > .lk-prick__brosch { animation: lk-landar 560ms cubic-bezier(.33,1,.68,1) both, lk-prick-brosch 1ms -1ms both; }
@keyframes lk-landar { 0% { translate: 0 -18px; scale: .6; opacity: 0; } 45% { opacity: 1; } 70% { translate: 0 1.5px; scale: 1.03; } 100% { translate: 0 0; scale: 1; } }
/* ringen drar ihop sig in i nålen i stället för att försvinna tvärt */
.lk-langtryck.ut { animation: lk-langtryck-ut 260ms cubic-bezier(.33,1,.68,1) forwards; }
@keyframes lk-langtryck-ut { from { transform: scale(.36); opacity: .95; } to { transform: scale(.12); opacity: 0; } }
.lk-prick--nal { cursor: pointer; touch-action: none; }
.lk-prick--nal.dras { cursor: grabbing; z-index: 12; }
.lk-prick--nal.dras .lk-prick__prick { scale: 1.6; transition: scale 120ms var(--lk-ease); }
.lk-prick--nal { --pf: var(--a-2b); }
/* Upptäcks erbjudanden och jobb (karta.js): medan listan är öppen, eller vald. Ingen intoning: kartlagret läser opaciteten en gång per byte */
.lk-upprick { visibility: hidden; }
body.lk-upp-erbjud .lk-upprick[data-u="erbjud"]:not(.lk-prick--ut), body.lk-upp-jobb .lk-upprick[data-u="jobb"]:not(.lk-prick--ut), .lk-upprick.on { visibility: visible; }   /* --ut: listans filter (lfKor) */
/* sökfiltret släcker prickar (kartaFilter() i karta.js); specificitet över raden ovan */
.lk-karta .lk-prick.lk-prick--ut { opacity: 0; visibility: hidden; transition: opacity var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t); }
/* testlager omr: polygoner att markera; syns med lagret eller när Jämför är öppet. Markerad = jämförelsens kolumnfärg --jf */
.lk-omr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; opacity: 0; visibility: hidden; will-change: transform; transition: opacity var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t); }
/* Jämför ritar baskartans riktiga ytor (lk-jf-fill i karta.js) */
/* Jämför på Etablering/Fastighet (jfLage): egna ytor färgade efter nyckeltalet, attrapplägenas ytor göms under tiden */
.lk-jfyta { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; opacity: .8; animation: lk-in var(--lk-t) var(--lk-ease); }
.lk-jfyta > * { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
body.lk-jf :is(.lk-etab, .lk-maklare) { display: none; }
/* lagret Områdesgränser ritas av baskartan (prods mm-admin-lan-* i karta.js), inte av .lk-omr */
/* vald prick syns alltid, även när dess lager är av (en klickad sparad poi i Sparade-läget) */
.lk-karta .lk-prick.on { opacity: 1; visibility: visible; }
/* Analysera läget: streckade linjer kandidat → mål (sparRita) */
.lk-anlinje { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.lk-anlinje line { stroke: var(--jf); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
/* närmaste service runt ett analyserat läge: liten rund ikon i lägets färg */
.lk-nara { position: absolute; z-index: 6; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--jf); box-shadow: 0 0 0 2.5px var(--jf), 0 2px 6px rgb(0 0 0 / .35); pointer-events: none; animation: lk-nara-in 380ms cubic-bezier(.34,1.56,.64,1) both; }
.lk-nara > :is(i, svg) { width: 14px; height: 14px; }
@keyframes lk-nara-in { from { scale: .2; opacity: 0; } }
.lk-taggar { margin: 4px 12px 8px; }
.lk-taggar .lk-sf__chip { --kf: var(--a-2b); }
.lk-an__seg { margin: 4px 12px 0; }
span.lk-jamfor__t { cursor: default; }
/* Sparade-läget (sparRita i karta.js): de sparade syns med broschen oavsett lager, övriga prickar tonas ner */
body.lk-sparlage .lk-prick:not(.sparad) { opacity: .3; }
.lk-karta .lk-prick.sparad { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 11; }
body.lk-sparlage .lk-prick.sparad .lk-prick__brosch { display: flex; animation: lk-prick-brosch 380ms cubic-bezier(.34,1.56,.64,1) both; }

/* header som glasbar över kartan */
/* ingen header på /karta: railen går från kanten, märket + vidga-knappen sitter i toppen (som mm-rail__topp) */
.lk-rail__topp { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 0 6px; }
.lk-rail__brand { display: flex; flex: 0 0 0px; overflow: hidden; align-items: center; gap: 8px; min-width: 0; color: var(--fg-1); text-decoration: none; }
.lk-rail__logo { width: 30px; height: 25px; flex: none; }
.lk-rail__namn { font: 600 14px/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
/* telefon/platta (komplementet till desktop-brytpunkten nedan): Fraunces (61 KB) syns bara i railen, som är gömd här, men de dolda panel-rubrikerna drog ändå ner den mitt i kartans kedja. :root för tokens som --type-* (löses där), body + !important slår body.mm-ny i ny.css. 2026-10-19 */
@media (max-width: 767px), (max-width: 1100px) and (orientation: portrait) { :root, body { --font-display: Georgia, 'Times New Roman', serif !important; } }
.lk-rail__kicker { display: block; position: relative; width: 100%; white-space: nowrap; text-align: left; padding: 6px 0 4px 9px; font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: transparent; transition: padding var(--lk-fjader), color 140ms var(--lk-ease); }
.lk-rail__kicker::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 1px; margin-left: -10px; background: var(--w-12); transition: opacity 140ms var(--lk-ease); }   /* stängd rail: ett streck i stället för avklippt text */
/* Vidga/stäng = Liquid Glass-morfen ur _design/referens (ikonen som fjädrar ut till ett kort, innehållet rinner in oskarpt):
   bredden fjädrar via den REGISTRERADE --lk-rail-w, så kort/legend/meny som räknar på den följer i samma kurva utan egna
   transitions; namnen tonar upp oskarpa rad för rad och försvinner i ett svep. Kurvan körs som WAAPI från karta.js (avbrott ⇒ ny fjäder från nuläget). */
/* ärvs INTE och sätts bara på ytorna som läser den: på body räknade varje fjäder-frame om hela sidan (~1000 element, 45 ms vid 4× CPU) */
@property --lk-rail-w { syntax: '<length>'; inherits: false; initial-value: 66px; }
/* --glas-*: ärvs INTE heller (varje [data-glas] sätter sina egna, lab.css): morfen animerar dem på #ark, och ärvda räknade om
   hela arkets innehåll varje frame (Lager: 100–230 ms per frame vid 4× CPU, mätt 2026-10-12) */
@property --glas-alfa { syntax: '<number>'; inherits: false; initial-value: .12; }
@property --glas-rim { syntax: '<number>'; inherits: false; initial-value: .3; }   /* morfen (karta.js form) animerar glasets täckning steglöst */
:root { --lk-fjader: 520ms linear(0, .148, .431, .699, .89, .999, 1.046, 1.054, 1.043, 1.028, 1.014, 1.004, .999, .997, 1); }
.lk-rail > .lk-ikn, .lk-rail__fot .lk-ikn, .lk-rail .lk-kgrupp > .lk-ikn { width: auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 11.5px; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), padding var(--lk-fjader); }
.lk-rail .lk-ikn__txt, .lk-rail__brand > :where(.lk-rail__logo, .lk-rail__namn) { display: inline; font: var(--type-label); white-space: nowrap; pointer-events: none; opacity: 0; filter: blur(6px); translate: -10px 0; transition: opacity 140ms var(--lk-ease), filter 140ms var(--lk-ease), translate 140ms var(--lk-ease); }   /* barnen namngivna, inte *: ett universellt subjekt bakom body.lk--exp räknade om ~1000 element per vidgning */
.lk-rail__vidga svg { transition: transform var(--lk-fjader); }
/* radordning ⇒ fördröjning när namnen rinner in */
.lk-rail > :nth-child(2) { --i: 1 } .lk-rail > :nth-child(3) { --i: 2 } .lk-rail > :nth-child(4) { --i: 3 } .lk-rail > :nth-child(5) { --i: 4 } .lk-rail > :nth-child(6) { --i: 5 } .lk-rail > :nth-child(7) { --i: 6 } .lk-rail > :nth-child(8) { --i: 7 } .lk-rail > :nth-child(9) { --i: 8 } .lk-rail > :nth-child(10) { --i: 9 } .lk-rail > :nth-child(11) { --i: 10 } .lk-rail > :nth-child(12) { --i: 11 } .lk-rail > :nth-child(13) { --i: 12 }
.lk-rail__fot > :nth-child(1) { --i: 13 } .lk-rail__fot > :nth-child(2) { --i: 14 } .lk-rail__fot > :nth-child(3) { --i: 15 } .lk-rail__fot > :nth-child(4) { --i: 16 }
/* 210 px med namn (body.lk--exp = riktiga mm-rail-exp) */
body.lk--exp :is(.lk-rail, .lk-kort, .lk-legend, .lk-utf, .lk-toast, .lk-meny, .lk-skala) { --lk-rail-w: 210px; }   /* läsarna av --lk-rail-w; ny läsare ⇒ in här OCH i RAIL_LASARE (karta.js) */
body.lk--exp .lk-rail { padding-left: 10px; padding-right: 10px; }
body.lk--exp .lk-rail__topp { justify-content: space-between; }
body.lk--exp .lk-rail__brand { flex: 1 1 auto; }
body.lk--exp .lk-rail__kicker { padding-left: 20px; color: var(--fg-8); transition: padding var(--lk-fjader), color 420ms var(--lk-ease) calc(40ms + var(--i, 0) * 16ms); }
body.lk--exp .lk-rail__kicker::before { opacity: 0; }
.lk-rail > [data-hist][hidden] { display: none; }   /* passaHist() i karta.js gömmer de rader som inte får plats */
/* "historik" är en knapp: öppnar historik-kortet som railens övriga vyer */
.lk-rail__kicker[hidden] { display: none; }   /* display: block ovan slår annars [hidden] */
button.lk-rail__kicker { background: none; border: 0; border-radius: 8px; cursor: pointer; }
button.lab-rad { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
body.lk--exp .lk-rail__kicker:hover { color: var(--fg-6); }
.lk-rail__kicker[aria-pressed="true"]::before { background: var(--fg-1); }
body.lk--exp .lk-rail__kicker[aria-pressed="true"] { color: var(--fg-1); }
body.lk--exp .lk-rail > .lk-ikn, body.lk--exp .lk-rail__fot .lk-ikn, body.lk--exp .lk-rail .lk-kgrupp > .lk-ikn { padding: 0 10px; }
body.lk--exp .lk-rail .lk-ikn__txt, body.lk--exp .lk-rail__brand > :where(.lk-rail__logo, .lk-rail__namn) { opacity: 1; filter: blur(0); translate: 0 0; transition-duration: 420ms; transition-delay: calc(40ms + var(--i, 0) * 16ms); }
body.lk--exp .lk-rail__vidga svg { transform: scaleX(-1); }
body.lk--exp .lk-ikn__badge { position: static; margin-left: auto; }
body.lk--fjadrar :is(.lk-kort, .lk-legend) { transition-property: transform, opacity, width, visibility, scale; }   /* left följer --lk-rail-w frame för frame, ingen egen jakt */
.lk-flik.lk-brand { flex: none; padding-inline: 12px; }   /* menyknappen först i flikpillret (telefon/iPad) */
.lk-flik.lk-brand > span { display: none; }   /* "Meny" under ☰ bara där symbolen står ovanför texten (PROV-blocket nedan) */
.lk-rail {
  position: absolute; left: var(--lk-inset); top: var(--lk-inset); bottom: var(--lk-inset); z-index: 40;  width: var(--lk-rail-w); border-radius: 18px; display: flex; flex-direction: column; align-items: stretch; padding: 10px 13px; gap: 4px; overflow: hidden auto; scrollbar-width: none;
}
.lk-rail__fot { margin-top: auto; display: flex; flex-direction: column; }
/* kugghjulet: helskärm/språk/tema fälls lugnt upp ovanför det (höjd 0fr → 1fr, ingen studs), knapparna glider in med en mjuk intoning */
.lk-rail__inst { --lk-lugn: cubic-bezier(.32, .72, 0, 1); display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--lk-lugn); }
.lk-rail__inst > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.lk-rail__inst .lk-ikn { opacity: 0; translate: 0 6px; transition: opacity 200ms var(--lk-ease), translate 200ms var(--lk-ease), background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), padding var(--lk-fjader); }
.lk-rail__inst .lk-ikn:nth-child(3) { --j: 0 } .lk-rail__inst .lk-ikn:nth-child(2) { --j: 1 } .lk-rail__inst .lk-ikn:nth-child(1) { --j: 2 }
.lk-rail__fot.oppen .lk-rail__inst { grid-template-rows: 1fr; }
.lk-rail__fot.oppen .lk-rail__inst .lk-ikn { opacity: 1; translate: 0 0; transition: opacity 360ms var(--lk-ease) calc(80ms + var(--j) * 30ms), translate 440ms var(--lk-lugn) calc(80ms + var(--j) * 30ms), background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), padding var(--lk-fjader); }
.lk-rail__kugg svg { transition: rotate 420ms cubic-bezier(.32, .72, 0, 1); }
.lk-rail__fot.oppen .lk-rail__kugg svg { rotate: 90deg; }
@media (prefers-reduced-motion: reduce) { .lk-rail__inst, .lk-rail__inst .lk-ikn, .lk-rail__kugg svg { transition-duration: 0s !important; transition-delay: 0s !important; } }
/* märket är en knapp: railens knappar göms och sajtens sidor fälls ut under det, samma kurva som kugghjulet */
button.lk-rail__brand { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.lk-rail.sidor > :not(.lk-rail__topp, .lk-rail__sidor) { display: none; }
.lk-rail__sidor { --lk-lugn: cubic-bezier(.32, .72, 0, 1); display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--lk-lugn); }
.lk-rail__sidor > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.lk-rail__sidor .lk-ikn { width: auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 11.5px; text-decoration: none; opacity: 0; translate: 0 -6px; transition: opacity 200ms var(--lk-ease), translate 200ms var(--lk-ease), background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), padding var(--lk-fjader); }
body.lk--exp .lk-rail__sidor .lk-ikn { padding: 0 10px; }
.lk-rail__sidor .lk-ikn:nth-child(2) { --j: 1 } .lk-rail__sidor .lk-ikn:nth-child(3) { --j: 2 } .lk-rail__sidor .lk-ikn:nth-child(4) { --j: 3 } .lk-rail__sidor .lk-ikn:nth-child(5) { --j: 4 } .lk-rail__sidor .lk-ikn:nth-child(6) { --j: 5 } .lk-rail__sidor .lk-ikn:nth-child(7) { --j: 6 } .lk-rail__sidor .lk-ikn:nth-child(8) { --j: 7 }
.lk-rail.sidor .lk-rail__sidor { grid-template-rows: 1fr; }
.lk-rail.sidor .lk-rail__sidor .lk-ikn { opacity: 1; translate: 0 0; transition: opacity 360ms var(--lk-ease) calc(60ms + var(--j, 0) * 30ms), translate 440ms var(--lk-lugn) calc(60ms + var(--j, 0) * 30ms), background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), padding var(--lk-fjader); }
@media (prefers-reduced-motion: reduce) { .lk-rail__sidor, .lk-rail__sidor .lk-ikn { transition-duration: 0s !important; transition-delay: 0s !important; } }
.lk-ikn {
  width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; position: relative;
  transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease);
}
@media (hover: hover) { .lk-ikn:hover { background: var(--w-08); } }
/* 2D/3D byter bara text, aldrig färg: läget syns i etiketten */
.lk-ikn[aria-pressed="true"]:not(.lk-3d), .lk-ikn[aria-expanded="true"], .lk-ikn.on { background: var(--w-14); color: var(--fg-1); } /* ingen orange: neutral som flikarna, rail + fristående knappar */
.lk-ikn .ny-i, .lk-ikn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* railens glyfer lever: vid hover lyfts glyfen och delarna ritas om en och en (stroke-dash), vid tryck krymper den,
   när knappen tänds studsar glyfen och delarna sprätter isär uppåt och faller tillbaka (vidga-knappen har egen transform).
   Tänd vilar glyfen på scale(1.04) så släckningen blir en mjuk sättning (transition) i stället för ett ryck. Hover+tänd
   listar BÅDA animationerna så att lk-rita inte startar om när tänd-läget faller bort medan pekaren står kvar. */
.lk-rail .lk-ikn:not(.lk-rail__vidga) > svg { transition: transform 260ms var(--lk-ease); }
.lk-rail .lk-ikn:not(.lk-rail__vidga) > svg > * { transform-box: fill-box; transform-origin: center; }
.lk-rail .lk-ikn > svg > :nth-child(2) { --d: 1 } .lk-rail .lk-ikn > svg > :nth-child(3) { --d: 2 } .lk-rail .lk-ikn > svg > :nth-child(4) { --d: 3 } .lk-rail .lk-ikn > svg > :nth-child(n+5) { --d: 4 }
.lk-rail .lk-ikn:not(.lk-rail__vidga):hover > svg { transform: translateY(-2px) scale(1.1); }
.lk-rail .lk-ikn:not(.lk-rail__vidga):hover > svg > * { animation: lk-rita 560ms var(--lk-ease) both; animation-delay: calc(var(--d, 0) * 70ms); }
.lk-rail .lk-ikn:not(.lk-rail__vidga):active > svg { transform: scale(.86); transition-duration: 80ms; }
.lk-rail .lk-ikn:is([aria-pressed="true"], [aria-expanded="true"], .on):not(.lk-rail__vidga) > svg { transform: scale(1.04); animation: lk-hopp 560ms var(--lk-ease); }
.lk-rail .lk-ikn:is([aria-pressed="true"], [aria-expanded="true"], .on):not(.lk-rail__vidga) > svg > * { animation: lk-spratt 560ms var(--lk-ease); animation-delay: calc(var(--d, 0) * 45ms); }
.lk-rail .lk-ikn:is([aria-pressed="true"], [aria-expanded="true"], .on):not(.lk-rail__vidga):hover > svg > * { animation: lk-rita 560ms var(--lk-ease) both, lk-spratt 560ms var(--lk-ease); animation-delay: calc(var(--d, 0) * 70ms), calc(var(--d, 0) * 45ms); }
@keyframes lk-rita { from { stroke-dasharray: 120; stroke-dashoffset: 120; } to { stroke-dasharray: 120; stroke-dashoffset: 0; } }
@keyframes lk-hopp { 0% { transform: scale(1); } 35% { transform: translateY(-4px) scale(1.18); } 70% { transform: translateY(1px) scale(.95); } 100% { transform: scale(1.04); } }
@keyframes lk-spratt { 0% { transform: none; } 40% { transform: translateY(calc(-2px - var(--d, 0) * 1.5px)) scale(1.08); } 70% { transform: translateY(.5px) scale(.98); } 100% { transform: none; } }
/* räknaren = samma tonade pill som chipsen (.lk-chip.on), inte en solid orange notisprick: ogenomskinlig bas så ikonen under inte lyser igenom */
.lk-ikn__badge { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--a-4) 16%, var(--s-deep)); color: var(--a-2b); box-shadow: inset 0 0 0 1px var(--aw-24), 0 1px 3px rgba(0, 0, 0, .12); font: var(--type-kicker-sm); font-variant-numeric: tabular-nums; letter-spacing: 0; display: grid; place-items: center; }
.lk-ikn--rund { border-radius: 50%; }

/* kortet: EN yta för alla vyer (Lista/Nålar/Kartval/…), se .lk-kort */
.lk-panel__huvud { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.lk-panel__huvud h2 { margin: 0; font: var(--type-panel-title); flex: 1; }
/* tillbaka: kortet öppnades ur ett annat korts rad (Historik → plats); pilen under rubriken bär vyn man kom ifrån */
/* pilen hänger UNDER rubriken (absolut) så namnet står exakt där det står utan pil; huvudet växer nedåt i stället */
.lk-panel__namn { flex: 1; min-width: 0; position: relative; }
.lk-panel__huvud:has(.lk-tillbaka:not([hidden])), .lk-ark__huvud:has(.lk-tillbaka:not([hidden])) { padding-bottom: 20px; }
.lk-tillbaka { position: absolute; left: 0; top: calc(100% + 6px); display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 2px 8px 2px 4px; border: 0; border-radius: 999px; background: none; color: var(--fg-7); font: var(--type-meta); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.lk-tillbaka:hover { background: var(--w-08); color: var(--a-2b); }
.lk-tillbaka[hidden] { display: none; }
.lk-tillbaka .ny-i, .lk-tillbaka svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-panel__kropp { flex: 1; overflow: auto; padding: 4px 8px 12px; overscroll-behavior: contain; }
.lk-panel__kropp:not(:hover) { scrollbar-color: transparent transparent; }   /* strecket i kortet (Malte 2026-10-12): tummen syns bara när man hovrar kortet */
.lk-panel__fot { padding: 10px 16px; font: var(--type-meta); color: var(--fg-7); border-top: 1px solid var(--w-08); }
.lk-lagen { display: flex; gap: 4px; padding: 0 12px 8px; }
.lk-chip { border: 0; border-radius: 999px; padding: 7px 12px; font: var(--type-chip); background: var(--w-06); color: var(--fg-4); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
@media (hover: hover) { .lk-chip:hover { background: var(--w-10); } }
.lk-chip.on, .lk-chip[aria-checked="true"] { background: var(--aw-20); color: var(--a-2b); }

/* kortet: samma bredd, läge och animation oavsett vy; helskärm = hela kartytan */
.lk-kort {
  position: absolute; top: var(--lk-inset); bottom: var(--lk-inset); z-index: 35;
  /* höjden uttryckligen (= top/bottom) så den kan glida till helskärmens fit-content: interpolate-size, Chrome 129+; övriga hoppar */
  height: calc(100% - 2 * var(--lk-inset)); margin-block: auto; interpolate-size: allow-keywords;
  left: calc(var(--lk-inset) + var(--lk-rail-w) + 8px); width: var(--lk-panel-w); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden;
  transition: transform 320ms var(--lk-ease), opacity 320ms var(--lk-ease), left var(--lk-t) var(--lk-ease), width var(--lk-t) var(--lk-ease), top var(--lk-t) var(--lk-ease), bottom var(--lk-t) var(--lk-ease), height var(--lk-t) var(--lk-ease), background-color 360ms var(--lk-ease), visibility 0s linear 320ms;
}
/* ut/in ur railen = arkets tempo på telefon/iPad stående (320 ms, --lk-ease): längre glid, inte ett 220 ms-ryck */
.lk-kort[hidden] { display: flex; visibility: hidden; opacity: 0; transform: translateX(-36px); }
.lk-kort:not([hidden]) { transition-delay: 0s; }
/* helskärm = ett centrerat, ogenomskinligt ark (max 1080 bred, högst ~84 % av höjden), inte hela fönstret; höjden följer innehållet
   (fit-content + margin-block auto centrerar mellan top/bottom), så en kort vy blir inget halvtomt ark. Glaset tonar till opakt
   (--glas-alfa 1, background-color transitionerar; linsen/bluren ligger kvar under men syns inte) */
.lk-kort.full { --glas-alfa: 1; left: max(var(--lk-inset), (100% - 1080px) / 2); width: min(1080px, 100% - 2 * var(--lk-inset)); top: max(var(--lk-inset), 8vh); bottom: max(var(--lk-inset), 8vh); height: fit-content; max-height: calc(100% - 2 * max(var(--lk-inset), 8vh)); z-index: 60; }   /* fit-content struntar i top/bottom: taket måste stå själv */
/* vidgat kort = MER innehåll, inte samma innehåll större: raderna rinner ut i spalter så allt syns utan rullist över hela
   kortet, detaljraden (.lab-rad__mer) tänds, Kartvals brickor och filtrens reglage får spalter. Glaset är en ren blur
   här (glas.js, ytan är för stor för linsen) så bredd-transitionen kostar ingen JS per frame.
   EN vänsterkant (24 px): rubriken, rutornas kant och radernas ikon. Delarna bär 12 px egen inset i det smala kortet, den nollas här;
   raderna går ut 8 px så deras hovringsyta hänger utanför kanten och innehållet står på den. */
/* skymningen bakom helskärmskortet: kartan tonar ner så kortet läses som en dialog; klick på den förminskar (karta.js [data-full-ut]) */
.lk-skym { position: absolute; inset: 0; z-index: 59; background: rgb(0 0 0 / .4); opacity: 0; visibility: hidden; transition: opacity 320ms var(--lk-ease), visibility 0s linear 320ms; }
[data-theme="light"] .lk-skym { background: rgb(20 17 14 / .22); }
body.lk-kortfull .lk-skym { opacity: 1; visibility: visible; transition-delay: 0s; }
/* knappen visar det klick gör: pilar utåt = förstora; utfällt en pill med pilar inåt + "Förminska" så vägen tillbaka syns (mockup v2) */
.lk-kort [data-full] > :not(:first-child), .lk-kort [data-full][aria-pressed="true"] > :first-child { display: none; }
.lk-kort [data-full][aria-pressed="true"] > :not(:first-child) { display: block; }
.lk-kort [data-full][aria-pressed="true"] { width: auto; display: flex; align-items: center; gap: 6px; padding: 0 14px 0 12px; border-radius: 20px; font: var(--type-label); }
.lk-kort.full .lk-panel__huvud { padding: 20px 16px 14px 24px; }
.lk-kort.full .lk-panel__huvud h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
/* Sök/Platser staplar rubriken under knapparna i det smala kortet; i helskärmen står alla vyers rubrik på samma rad som knapparna */
.lk-kort.full:has(.lk-sokvy) .lk-panel__huvud { flex-wrap: nowrap; padding-bottom: 14px; }
.lk-kort.full:has(.lk-sokvy) .lk-panel__namn { display: block; }
.lk-kort.full:has(.lk-sokvy) .lk-panel__huvud h2 { flex-basis: auto; }
.lk-kort.full:has(.lk-sokvy) .lk-tillbaka { position: absolute; margin-right: 0; }
.lk-kort.full .lk-panel__kropp { padding: 4px 24px 24px; }
.lk-kort.full .lab-rader { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 24px; align-content: start; margin-inline: -8px; }
.lk-kort.full .lk-panel__kropp :is(.lk-sok, .lk-kort__lank, .lk-annons, .lk-atg, .lk-rapport__grid, .lk-vidare, .lk-an__seg, .lk-laddafler, .lk-pk__kalla, .lk-pk__del, .lk-brief,
  .lk-lagen, .lk-flergr, .lk-jfval, .lk-meny__grupp, .lk-kval__grupp h3) { margin-inline: 0; }
.lk-kort.full .lk-panel__kropp :is(.lk-lagen, .lk-flergr, .lk-jfval, .lk-meny__grupp, .lk-kval__grupp h3) { padding-inline: 0; }
/* kontrollerna (sök, segment, länkrutor) dras inte ut över 1 000 px: EN bredd för alla vyer */
.lk-kort.full .lk-panel__kropp :is(.lk-sok, .lk-kv__sok, .lk-dvsok, .lk-sf__seg, .lk-kort__lank, .lk-annons, .lk-vidare) { max-width: 480px; }
.lk-kort.full .lk-kv__sok { width: 100%; }
.lab-rad__mer { display: none; grid-column: 2 / -1; color: var(--fg-7); font: var(--type-meta); }
.lk-kort.full .lab-rad__mer { display: block; }
/* Kartval grupperat (karta.js val()): kompakt = rubrik + brickor; helskärm = grupperna som spalter med rader och reglage, som
   Google Earths lagerpanel: ikon, namn, brytare till höger, hårlinje mellan raderna */
.lk-kval__grupp h3 { display: flex; justify-content: space-between; margin: 0; padding: 10px 12px 0; font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--fg-7); }
.lk-kval__grupp h3 span { font: var(--type-meta); letter-spacing: 0; text-transform: none; }
/* Kartval i helskärm = Google Earths "Data layers": sök, filter-chips, kortrutnät, fot. Kompakta grupperna och .lk-kv delar vy, en syns åt gången */
.lk-kv, .lk-kort.full .lk-kval { display: none; }
/* "På kartan" (minimerad legend, karta.js val()): legendens rader i kortets gutter, "Fäst på kartan" i rubrikens högerkant */
.lk-kval__pa h3 button { border: 0; background: none; padding: 2px 6px; margin: -2px -6px; border-radius: 8px; font: var(--type-meta); letter-spacing: 0; text-transform: none; color: var(--a-4); cursor: pointer; }
.lk-kval__pa h3 button:hover { background: var(--w-08); }
/* Kartvals badge bara när legenden är minimerad: fäst på kartan visar kortet redan vilka lager som är på */
@media (prefers-reduced-motion: no-preference) { .lk-rail [data-oppna="kartval"] .lk-ikn__badge { transition: opacity 160ms var(--lk-ease), scale 160ms var(--lk-ease); } }
body:not(.lk-legend-min) .lk-rail [data-oppna="kartval"] .lk-ikn__badge { opacity: 0; scale: .5; }
.lk-kval__legend { display: grid; gap: 10px; padding: 10px 12px 4px; }
.lk-kort.full .lk-kv { display: flex; flex-direction: column; min-height: 100%; }
.lk-kv__topp { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 0 14px; }
.lk-kv__topp p { margin: 0; color: var(--fg-5); font: var(--type-body); }
.lk-kv__sok { display: flex; align-items: center; gap: 8px; width: min(340px, 100%); height: 40px; padding: 0 14px; border-radius: 999px; background: var(--w-08); color: var(--fg-5); box-shadow: inset 0 0 0 1px var(--w-08); transition: box-shadow var(--lk-t) var(--lk-ease); }
.lk-kv__sok:focus-within { box-shadow: inset 0 0 0 2px var(--a-4); }
.lk-kv__sok svg { width: 16px; height: 16px; flex: none; }
.lk-kv__sok input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg-2); font: var(--type-label); outline: none; }
body .lk-kv__sok input:focus-visible { outline: 0; } /* slår sida.css .mm-ny :is(input):focus-visible: pillrets ring är markeringen */
/* helskärmens Lager: gränsvalen på EN rad ovanför filtren (kompakta toppdelen .lk-kval__ovan göms, Färga ligger i foten) */
.lk-kort.full .lk-kval__ovan { display: none; }
.lk-kv__granser { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; }
.lk-kv__granser > .lk-meny__grupp { padding: 0; }
.lk-kv__granser .lk-lagen { flex: 0 1 480px; padding: 0; }
.lk-kv__knapp svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lk-kv__filter { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; box-shadow: inset 0 -1px var(--w-08); }
.lk-kv__filter .lk-chip span { margin-left: 6px; opacity: .6; font-variant-numeric: tabular-nums; }
.lk-kv__rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 18px 0; align-content: start; flex: 1; }
.lk-kv__lager { display: flex; flex-direction: column; border-radius: 14px; background: var(--w-05); overflow: hidden; box-shadow: inset 0 0 0 1px var(--w-08); transition: box-shadow var(--lk-t) var(--lk-ease); }
.lk-kv__lager.on { box-shadow: inset 0 0 0 2px var(--a-4); }
.lk-kv__lager[hidden] { display: none; }
.lk-kv__bild { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--s-map, var(--w-08)); color: var(--fg-5); }
.lk-kv__bild > svg { width: 38px; height: 38px; opacity: .8; }
.lk-kv__bild--skala { background: linear-gradient(135deg, var(--skala)); color: #fff; }
.lk-kv__tagg, .lk-kv__pa { position: absolute; top: 8px; padding: 3px 8px; border-radius: 999px; font: var(--type-meta); background: var(--sh-55, rgba(0,0,0,.5)); color: #fff; }
.lk-kv__tagg { left: 8px; }
.lk-kv__pa { right: 8px; display: flex; align-items: center; gap: 4px; background: var(--a-4); }
.lk-kv__pa svg { width: 12px; height: 12px; }
.lk-kv__lager h4 { margin: 12px 14px 4px; color: var(--fg-2); font: var(--type-label); font-weight: 600; }
.lk-kv__lager p { flex: 1; margin: 0 14px 12px; color: var(--fg-5); font: var(--type-meta); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lk-kv__valj { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 14px 14px; height: 34px; border: 0; border-radius: 999px; background: var(--w-08); color: var(--fg-2); font: var(--type-label); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.lk-kv__valj:hover { background: var(--w-12); }
.lk-kv__valj[aria-pressed="true"] { background: var(--a-4); color: #fff; }
.lk-kv__valj svg { width: 14px; height: 14px; }
/* Välj + Öppna (lagrets eget kort) sida vid sida */
.lk-kv__knappar { display: flex; gap: 8px; margin: 0 14px 14px; }
.lk-kv__knappar .lk-kv__valj { flex: 1; margin: 0; }
.lk-kv__tom[hidden] { display: none; }
.lk-kv__fot { position: sticky; bottom: -24px; display: flex; align-items: center; gap: 10px; margin: 0 -24px -24px; padding: 12px 24px; background: rgb(20, 17, 14); box-shadow: 0 -1px var(--w-08); color: var(--fg-5); font: var(--type-label); }
[data-theme="light"] .lk-kv__fot { background: #fff; } /* samma som det opaka kortet, lab.css [data-glas] */
.lk-kv__fot span { margin-right: auto; }
.lk-kv__fot b { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.lk-kv__knapp { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--fg-3); font: var(--type-label); cursor: pointer; }
.lk-kv__knapp:hover:not(:disabled) { background: var(--w-08); }
.lk-kv__knapp:disabled { opacity: .4; cursor: default; }
.lk-kv__knapp--klar { background: var(--a-4); color: #fff; }
.lk-kv__knapp--klar:hover:not(:disabled) { background: var(--a-4); filter: brightness(1.1); }
.lk-kort__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; padding: 8px; }
.lk-kort__val { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: 12px; border: 0; background: var(--w-05); color: var(--fg-4); font: var(--type-chip); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.lk-kort__val:hover { background: var(--w-09); }
.lk-kort__val.on { background: var(--aw-20); color: var(--a-2b); }
.lk-kort__val svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lk-sok { display: flex; align-items: center; gap: 10px; margin: 12px 12px 4px; padding: 0 12px; height: 40px; border-radius: 12px; background: var(--w-08); border: 1px solid var(--w-12); color: var(--fg-3); transition: border-color var(--lk-t) var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease); }
.lk-sok:focus-within { border-color: var(--w-14); box-shadow: 0 0 0 3px var(--w-06); } /* ingen orange, samma ton som vilande: en svag ring är markeringen (--w-16 finns inte: kanten föll till currentColor, krämvit) */
body .lk-sok input:focus-visible { outline: 0; } /* slår sida.css .mm-ny :is(input):focus-visible (0,2,1) */
.lk-sok svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lk-sok input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg-1); font: var(--type-label); outline: none; }
.lk-sok input::placeholder { color: var(--fg-6); }
.lk-sok input::-webkit-search-cancel-button { appearance: none; }
/* Sök-kortet som Apple Maps: stor rubrik, högre fält, rubriker i meningsform, varje rad ett eget kort med rund färgad ikon */
.lk-kort:has(.lk-sokvy) .lk-panel__huvud h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
/* stor rubrik = iOS navigeringsfält: ‹ tillbaka + knapparna på en egen rad, rubriken under i full bredd
   (”Arbetsmarknaden” i 28 px fick 134 px bredvid fyra knappar och rann in under dem) */
.lk-kort:has(.lk-sokvy) .lk-panel__huvud { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; padding-bottom: 10px; }
.lk-kort:has(.lk-sokvy) .lk-panel__namn { display: contents; }
.lk-kort:has(.lk-sokvy) .lk-panel__huvud h2 { order: 1; flex-basis: 100%; text-wrap: balance; }
.lk-kort:has(.lk-sokvy) .lk-tillbaka { position: static; margin-right: auto; }
.lk-sokvy .lk-sok { height: 48px; margin: 4px 8px 8px; padding-right: 6px; border-radius: 14px; }
/* filterknappen i pillrets högra hörn; filtren fälls ut under pillret när man klickar i det eller på knappen */
.lk-sok__filterknapp { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--fg-3); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.lk-sok__filterknapp:hover { background: var(--w-10); color: var(--fg-1); }
.lk-sok__filterknapp[aria-expanded="true"] { background: var(--w-14); color: var(--fg-1); }
.lk-sok__filterknapp { position: relative; }
.lk-sok__antal { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--sf-fyll); color: var(--sf-inv); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
/* filtren: display-byte + ren opacity/translate-inglidning som startar när arket nästan är uppe (ingen höjd-animation = ingen relayout per frame) */
.lk-sokvy { display: flex; flex-direction: column; --sf-fyll: var(--fg-2); --sf-inv: #14110e; } /* neutral grund; --kf = kategorins färg (karta.js SOKFILTER) */
.lk-sok__filter { --kf: var(--fg-2); }
[data-theme="light"] .lk-sokvy { --sf-inv: #fff; }
.lk-sokvy .lk-sok { order: -2; }
.lk-sokvy:has(input[type="search"]:not(:placeholder-shown)) .lk-sok__traffar { order: -1; } /* skriver man: träffarna först, filtren under */
.lk-sokvy[data-filter]:has(input[type="search"]:placeholder-shown) .lk-sok__traffar { display: none; } /* tomt fält + filtren uppe: inget "Hitta i närheten" under foten */
.lk-sok__filter { display: none; padding: 4px 8px 0; }
.lk-sokvy[data-filter] .lk-sok__filter { display: block; }
/* in: grupperna kaskaderar (bara de första syns, resten kommer samtidigt). Ut: träffarna glider tillbaka (data-sfut sätts av sokFilter) */
.lk-sokvy[data-filter] :is(.lk-sf__grupp, .lk-sf__fot) { animation: lk-sf-in 340ms var(--lk-ease) backwards; animation-delay: 60ms; }
.lk-sokvy[data-filter] .lk-sf__grupp:nth-child(2) { animation-delay: 95ms; }
.lk-sokvy[data-filter] .lk-sf__grupp:nth-child(3) { animation-delay: 130ms; }
.lk-sokvy[data-filter] .lk-sf__grupp:nth-child(4) { animation-delay: 165ms; }
.lk-sokvy[data-filter] .lk-sf__grupp:nth-child(n+5), .lk-sokvy[data-filter] .lk-sf__fot { animation-delay: 200ms; }
.lk-sokvy[data-sfut]:not([data-filter]) .lk-sok__traffar { animation: lk-sf-in 300ms var(--lk-ease) backwards; }
@keyframes lk-sf-in { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .lk-sokvy :is(.lk-sf__grupp, .lk-sf__fot, .lk-sok__traffar) { animation: none !important; } }
.lk-sf__grupp { padding: 14px 0 4px; }
.lk-sf__grupp h3 { margin: 0 4px 10px; color: var(--fg-1); font: var(--type-label); font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
/* seg: Apples segmenterade kontroll */
.lk-sf__seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: var(--w-06); }
.lk-sf__seg button { border: 0; border-radius: 9px; padding: 8px 6px; background: transparent; color: var(--fg-3); font: var(--type-chip); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease); }
.lk-sf__seg button[aria-checked="true"] { background: var(--w-10); color: var(--fg-1); box-shadow: 0 1px 3px var(--sh-20); }
/* chips: flera val, bock glider in när den är vald */
.lk-sf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-sf__chip { display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--w-06); box-shadow: inset 0 0 0 1px var(--w-10); color: var(--fg-2); font: var(--type-chip); font-size: 14px; cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease), gap var(--lk-t) var(--lk-ease); }
.lk-sf__chip:hover { background: var(--w-10); }
.lk-sf__chip svg { width: 0; height: 14px; fill: none; stroke: var(--kf); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: width var(--lk-t) var(--lk-ease), opacity var(--lk-t) var(--lk-ease); }
.lk-sf__chip[aria-pressed="true"] { gap: 6px; background: color-mix(in srgb, var(--kf) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--kf); color: var(--fg-1); }
.lk-sf__chip[aria-pressed="true"] svg { width: 14px; opacity: 1; }
/* reglage: etikett + värde på en rad, tunt spår fyllt till tummen */
.lk-sf__reglage { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px 8px; padding: 14px 16px 16px; border-radius: 16px; background: var(--w-06); color: var(--fg-3); font: var(--type-label); }
.lk-sf__reglage output { color: var(--fg-1); font-weight: 650; font-variant-numeric: tabular-nums; }
.lk-sf__reglage input { grid-column: 1 / -1; appearance: none; -webkit-appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.lk-sf__reglage input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--kf) var(--p), var(--w-14) var(--p)); }
.lk-sf__reglage input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--kf) var(--p), var(--w-14) var(--p)); }
.lk-sf__reglage input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .1); }
.lk-sf__reglage input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
/* brytare: inställningslista med iOS-switchar, hårlinje mellan raderna */
.lk-sf__lista { border-radius: 16px; background: var(--w-06); overflow: hidden; }
.lk-sf__rad { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; color: var(--fg-1); font: var(--type-label); font-size: 15px; cursor: pointer; }
.lk-sf__rad > span:nth-child(2) { flex: 1; }
.lk-sokvy .lk-sf__rad .lab-rad__n { width: 30px; height: 30px; border-radius: 8px; }
.lk-sf__rad .lab-rad__n svg { width: 16px; height: 16px; }
.lk-sf__rad + .lk-sf__rad { box-shadow: inset 0 1px 0 var(--w-08); }
.lk-sf__rad input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 14px; background: var(--w-14); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.lk-sf__rad input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: translate var(--lk-t) var(--lk-ease); }
.lk-sf__rad input:checked { background: var(--kf); }
.lk-sf__rad input:checked::after { translate: 18px 0; }
/* foten klistrar mot arkets underkant medan filtren scrollas */
/* foten: egen fast list (ingen toning över chipsen), Rensa alla som text till vänster, Visa som ljus pill till höger */
/* foten: flytande glaskapsel över filtren (Apple-knappgrupp). Rensa glider in från vänster först när något är valt, Visa fyller resten */
.lk-sf__fot { position: sticky; bottom: 8px; z-index: 2; display: flex; gap: 0; margin: 20px 0 0; padding: 5px; border-radius: 999px; --fotbg: rgba(38, 34, 30, .78); background: var(--fotbg); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--w-10), 0 10px 28px rgba(0, 0, 0, .35); }
[data-theme="light"] .lk-sf__fot { --fotbg: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .14); }
.lk-sf__fot button { height: 44px; border: 0; border-radius: 999px; font: var(--type-label); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: max-width 320ms var(--lk-ease), padding 320ms var(--lk-ease), margin 320ms var(--lk-ease), opacity 200ms var(--lk-ease), background var(--lk-t) var(--lk-ease); }
.lk-sf__rensa { max-width: 120px; margin-right: 5px; padding: 0 18px; overflow: hidden; background: var(--w-08); color: var(--fg-1); }
.lk-sf__rensa:hover { background: var(--w-12); }
.lk-sf__rensa:disabled { max-width: 0; margin-right: 0; padding: 0; opacity: 0; pointer-events: none; }
.lk-sf__visa { flex: 1; padding: 0 18px; background: var(--fg-1); color: var(--sf-inv); }
.lk-sf__visa:hover { opacity: .92; }
.lk-sf__visa b { font-variant-numeric: tabular-nums; }
/* pc + iPad liggande: kartan följer filtret direkt, ingen Visa-knapp; foten = bara Rensa, och bara när något är valt */
@media (min-width: 1101px), (min-width: 768px) and (orientation: landscape) {
  .lk-sf__visa { display: none; }
  .lk-sf__fot:has(.lk-sf__rensa:disabled) { display: none; }
  .lk-sf__rensa { flex: 1; max-width: none; margin-right: 0; }
}
.lk-sokvy .lk-meny__grupp { padding: 18px 8px 10px; font: var(--type-label); font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--fg-1); }
/* listkortens Sortera/filtrera (data-lf i huvudet, lfPanel i karta.js): samma kontroller som sökfiltret */
.lk-ikn[data-lf][hidden] { display: none; }
.lk-ikn[data-lf] { position: relative; }
.lk-ikn[data-lf].on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--a-4); }
.lk-lf { --kf: var(--fg-2); display: none; padding: 0 12px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--w-08); }
[data-lfoppen] > .lk-lf { display: block; animation: lk-sf-in 300ms var(--lk-ease) backwards; }
.lk-lf .lk-sf__grupp:first-child { padding-top: 2px; }
.lk-lf [data-lfrensa] { margin-top: 12px; }
.lk-lf__antal { margin: 0 16px 6px; font: var(--type-meta); color: var(--fg-7); }
/* visningslägena: kompakt = en tät rad, avancerad = stapel + detaljrad, kort = brickor */
.lk-lv .lab-rader > [hidden] { display: none; }
.lk-lv[data-lv="kompakt"] .lab-stapel, .lk-lv[data-lv="kompakt"] .lk-analys, .lk-lv[data-lv="kompakt"] .lk-jamfor__v i { display: none; }
.lk-lv[data-lv="kompakt"] .lab-rad { padding-block: 6px; }
.lk-lv[data-lv="avancerad"] .lab-rad__mer { display: block; }
.lk-lv[data-lv="kort"] .lab-rader { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0 12px; }
.lk-lv[data-lv="kort"] .lk-rad { position: relative; grid-template-columns: minmax(0, 1fr); }   /* minmax(0): ett långt ord (Franciskusleden) vidgade spåret förbi kortet ⇒ korten låg över varandra */
.lk-lv[data-lv="kort"] .lk-rad__x { position: absolute; top: 6px; right: 6px; }
.lk-lv[data-lv="kort"] .lab-rad { grid-template-columns: 28px minmax(0, 1fr); overflow-wrap: anywhere; hyphens: auto; align-content: start; height: 100%; min-height: 96px; padding: 12px; border-radius: 16px; background: var(--w-06); color: var(--fg-1); }
.lk-lv[data-lv="kort"] .lab-rad:hover { background: var(--w-10); }
.lk-lv[data-lv="kort"] .lk-sokvy .lab-rad { grid-template-columns: minmax(0, 1fr); }   /* ikonbrickan överst: bredvid namnet blev det ~90 px kvar och lednamnen bröts mitt i ordet */
.lk-lv[data-lv="kort"] .lab-rad__v { grid-column: 1 / -1; font-size: 20px; font-weight: 650; }
.lk-lv[data-lv="kort"] .lab-rad__v:empty { display: none; }
.lk-sokvy .lab-rader { gap: 8px; padding: 0 8px; }
.lk-sokvy .lab-rad { grid-template-columns: 36px 1fr auto; min-height: 60px; padding: 10px 14px 10px 12px; border-radius: 16px; background: var(--w-06); color: var(--fg-1); font-size: 16px; }
.lk-sokvy .lab-rad:hover { background: var(--w-10); }
.lab-rad > span > small { display: block; margin-top: 2px; color: var(--fg-7); font: var(--type-meta); }   /* metaraden (typ · ort) under titeln, inte ihopklistrad efter den */
.lk-sokvy .lab-rad small { display: block; margin-top: 2px; color: var(--fg-2); font: var(--type-label); }   /* sökträffens typ · kommun under namnet */
.lk-sokvy .lab-rad__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kf, var(--w-14)); color: #fff; }
/* historiken: samma runda färgade ikon (--kf = fargFor() i karta.js), i kortet och i railen; railens -4px håller radens mått */
.lk-hist .lab-rad__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kf, var(--w-14)); color: #fff; }
.lk-rail > [data-hist] > svg { box-sizing: content-box; margin: -4px; padding: 4px; border-radius: 50%; background: var(--kf, var(--w-14)); color: #fff; }
.lk-rail > [data-hist] { min-width: 0; } .lk-rail > [data-hist] > .lk-ikn__txt { display: block; flex: 1 1 auto; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* långa namn (Stockholm-Bromma flygplats) klipps med … inne i railen */
.lk-sokvy .lab-rad__n svg { width: 18px; height: 18px; }

/* kontrollkolumnerna: uppe och nere till höger */
.lk-ctrl { position: absolute; right: var(--lk-inset); z-index: 40; display: flex; flex-direction: column; gap: 8px; }
.lk-ctrl--ner { bottom: var(--lk-inset); }
.lk-ctrl .lk-ikn { width: 40px; height: 40px; }
/* zoom ± sitter ihop: ett pill 40×80 med hårlinje mellan halvorna; hover fyller bara sin halva */
.lk-zoom { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; }
.lk-zoom .lk-ikn { border-radius: 0; }
.lk-zoom .lk-ikn + .lk-ikn::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: var(--w-14); }
/* kompassen: ringen fyller knappen och vrids -bearing (nordstrecket i accent pekar mot norr); bokstaven står stilla = väderstrecket uppåt */
.lk-kompass { padding: 0; } /* UA-paddingen (1px 6px) knuffar en 34 px svg ur mitten */
.lk-kompass svg { width: 34px; height: 34px; stroke-width: 1.4; }
/* ingen transition på ringen: kameran glider redan (easeTo i karta.js) och skriver vinkeln per bildruta, en transition som startas om
   varje ruta höll ringen i evig animation (stilräkning + ommålning av glasknappen per ruta, ~15 % färre bildrutor i en vridning på 2742×984, mätt 2026-10-06) */
.lk-kompass__ring { transform-box: view-box; transform-origin: center; transform: rotate(calc(-1 * var(--lk-bearing, 0deg))); }
.lk-kompass .m { opacity: .45; }
.lk-kompass .n { stroke: var(--a-4); stroke-width: 2.2; }
/* baslinjen satt i y (24.6 = mitten + versalhöjd/2): dominant-baseline landar olika per motor */
.lk-kompass text { fill: currentColor; stroke: none; font: 700 13px/1 system-ui, sans-serif; text-anchor: middle; }
/* droppgruppen (.lk-kgrupp): en ny knapp (.lk-ny) knoppas av ur en befintlig (.lk-ur) via droppen (.lk-droppe, gooey) med
   ytspänning: ur-blobben (__a) sträcks mot droppen, halsen (__hals) hänger kvar medan droppen (__b) vaggar på halvvägs,
   sedan snäpper halsen av, droppen studsar in på plats --lk-dy bort och knappen (växer i flödet under tiden) fadar in när
   droppen stelnat = glas. Används av kompassen (2D/3D).
   Animationen sitter på .spelar (karta.js tar bort + reflow + lägger tillbaka den vid varje klick så den startar om: samma
   animation-name åt båda hållen startar annars inte om), .oppen = läget (knappen), .stangs = baklänges; båda släpps på animationend. */
.lk-kgrupp { position: relative; display: flex; flex-direction: column; --lk-dt: 1100ms; --lk-dy: -48px; }   /* 40 px knapp + 8 px gap */
/* .lk-ikn i selektorn: railens egen transition-regel (.lk-rail .lk-kgrupp > .lk-ikn) skulle annars vinna och knappen bara poppa */
.lk-kgrupp > .lk-ikn.lk-ny { height: 0; margin: 0; opacity: 0; scale: .6; overflow: hidden;
  transition: height 700ms var(--lk-ease), margin 700ms var(--lk-ease), scale var(--lk-fjader), opacity 120ms var(--lk-ease), padding var(--lk-fjader), background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.lk-kgrupp.oppen > .lk-ikn.lk-ny { height: 40px; margin-bottom: 8px; opacity: 1; scale: 1; transition-delay: 0s, 0s, 780ms, 860ms; }
.lk-3d { padding: 0; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .02em; }
/* §kompassen i hörnkolumnen: står alltid mot skärmens MITT (kolumnen nere: överst, kolumnen uppe: nederst), så när den fälls
   ihop (norr uppåt = .norr, karta.js bearingSatt) rör sig ingen annan knapp. Ordning från hörnet: Kartstil, 3D, kompass
   (pc: −, +, Kartstil, 3D, kompass). Avståndet bär kompassen själv (3D:s margin nollas) så det försvinner med den.
   ponytail: droppen (AVSTÄNGD) stiger fortfarande uppåt ur kompassen; slås den på igen måste --lk-dy följa ordningen. */
.lk-ctrl--ner .lk-kgrupp { flex-direction: column-reverse; }
.lk-ctrl--ner .lk-kgrupp.oppen > .lk-ikn.lk-ny { margin: 0; }
.lk-ctrl .lk-kompass { margin-bottom: 8px; transition: height 380ms var(--lk-ease), margin 380ms var(--lk-ease), opacity 200ms ease, scale 460ms cubic-bezier(.34, 1.5, .5, 1), background var(--lk-t) var(--lk-ease); }
/* ihop: väntar tills ringen snurrat hem (240 ms, .lk-kompass__ring) så man ser den peka norr innan den försvinner */
.lk-ctrl .lk-kompass.norr { height: 0; margin: 0; opacity: 0; scale: .5; visibility: hidden; pointer-events: none;
  transition: height 320ms var(--lk-ease) 240ms, margin 320ms var(--lk-ease) 240ms, opacity 160ms ease 240ms, scale 240ms var(--lk-ease) 240ms, visibility 0s 560ms; }
/* siffran i droppen: samma typ som badgen, bara större; Kartvals badge glider ner i droppen och släcks när knappen tänds */
.lk-kgrupp.spelar .lk-ur .lk-ikn__badge { animation: lk-badge var(--lk-dt) cubic-bezier(.3, 0, .2, 1) both; }
.lk-kgrupp.oppen .lk-ur .lk-ikn__badge { opacity: 0; }
.lk-droppe { position: absolute; left: 0; bottom: 0; width: 40px; height: 88px; pointer-events: none; filter: url(#lk-goo); opacity: .42; z-index: 1; transition: opacity 160ms var(--lk-ease); }
[data-theme="light"] .lk-droppe { opacity: .55; }
.lk-droppe > i { position: absolute; left: 0; bottom: 0; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, rgba(255, 255, 255, .72) 55%, #fff 100%); transform-origin: 50% 100%; }
.lk-droppe__b { translate: 0 0; scale: .3; }
.lk-droppe__hals { left: 14px; width: 12px; height: 0; bottom: 20px; border-radius: 6px; }
.lk-kgrupp.oppen .lk-droppe__b { translate: 0 var(--lk-dy); scale: 1; }
.lk-kgrupp.spelar .lk-droppe__b { animation: lk-dropp-b var(--lk-dt) cubic-bezier(.3, 0, .2, 1) both; }
.lk-kgrupp.spelar .lk-droppe__a { animation: lk-dropp-a var(--lk-dt) cubic-bezier(.3, 0, .2, 1) both; }
.lk-kgrupp.spelar .lk-droppe__hals { animation: lk-dropp-hals var(--lk-dt) cubic-bezier(.3, 0, .2, 1) both; }
.lk-kgrupp.spelar .lk-ur svg { animation: lk-knopp var(--lk-dt) cubic-bezier(.3, 0, .2, 1) both; }
.lk-kgrupp.stangs :is(.lk-droppe__b, .lk-droppe__a, .lk-droppe__hals, .lk-ur svg, .lk-ur .lk-ikn__badge) { animation-direction: reverse; }
.lk-kgrupp.oppen .lk-droppe { opacity: 0; transition-delay: 940ms; }
/* badgen (15 px, uppe till höger i knappen) glider ner till droppens mitt och växer mot knappens siffra; siffran tänds med knappen */
@keyframes lk-badge { 0% { translate: 0 0; scale: 1; opacity: 1; } 55% { translate: -3px calc(var(--lk-dy) * .55); scale: 1.15; opacity: 1; } 100% { translate: -6.5px calc(var(--lk-dy) + 6.5px); scale: 1.5; opacity: 0; } }
/* droppen: lägena i andelar av --lk-dy så samma kurva går uppåt (kompassen) och nedåt (railen) */
@keyframes lk-dropp-b {
  0% { translate: 0 0; scale: .3; }
  22% { translate: 0 calc(var(--lk-dy) * .33); scale: .62 .9; }
  40% { translate: 0 calc(var(--lk-dy) * .63); scale: .82 1.06; }
  58% { translate: 0 calc(var(--lk-dy) * .71); scale: .9 1.1; }
  72% { translate: 0 calc(var(--lk-dy) * 1.15); scale: 1.12 .9; }
  84% { translate: 0 calc(var(--lk-dy) * .94); scale: .96 1.05; }
  100% { translate: 0 var(--lk-dy); scale: 1; }
}
/* ur-blobben: dras med mot droppen (sträcks), hänger, snäpper tillbaka platt och studsar */
@keyframes lk-dropp-a {
  0% { scale: 1; }
  25% { scale: .9 1.24; }
  58% { scale: .88 1.3; }
  72% { scale: 1.14 .84; }
  86% { scale: .96 1.06; }
  100% { scale: 1; }
}
/* halsen: växer med droppen, smalnar medan den hänger, brister vid 68 % */
@keyframes lk-dropp-hals {
  0% { height: 0; scale: 1; }
  30% { height: 26px; scale: 1; }
  58% { height: 40px; scale: .5 1; }
  66% { height: 44px; scale: .18 1; }
  70%, 100% { height: 0; scale: 0 1; }
}
/* ur-knappens glyf: kläms i takt med blobben */
@keyframes lk-knopp { 0% { scale: 1; } 25% { scale: .94 1.14; } 58% { scale: .92 1.18; } 72% { scale: 1.1 .88; } 86% { scale: .97 1.04; } 100% { scale: 1; } }

/* verktygsmenyn: ankrad uppåt från nedre kolumnen */
.lk-meny { position: absolute; right: calc(var(--lk-inset) + 48px); bottom: var(--lk-inset); z-index: 45; width: 220px; border-radius: 14px; padding: 6px; max-height: 60dvh; overflow: auto;
  transition: transform var(--lk-t) var(--lk-ease), opacity var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t); transform-origin: bottom right; }
.lk-meny[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(8px) scale(.98); }
.lk-meny:not([hidden]) { transition-delay: 0s; }
/* menyn scrollar: lätt-glasets ::before/::after (absolut, inset 0) täcker bara första skärmen och scrollar bort. Blurren på värden i stället (lab.css: värdens backdrop-filter tar över).
   Legenden och #kort likaså: de tonas in, och opacitet < 1 gör värden till backdrop-rot, så pseudoelementens blur såg ingen karta under
   intoningen (kortet mörkt och genomskinligt, sedan bytte det färg när opaciteten nådde 1). Värdens egen blur tonas med den. */
:is(.lk-meny, .lk-legend, .lk-kort)[data-glas-latt] { backdrop-filter: brightness(var(--glas-dim)) saturate(1.4) blur(var(--glas-blur)); -webkit-backdrop-filter: brightness(var(--glas-dim)) saturate(1.4) blur(var(--glas-blur)); }
:is(.lk-meny, .lk-legend, .lk-kort)[data-glas-latt]::before, :is(.lk-meny, .lk-legend, .lk-kort)[data-glas-latt]::after { display: none; }
.lk-meny__grupp { padding: 6px 10px 2px; font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--fg-8); }
.lk-meny__rad { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: var(--type-label); cursor: pointer; text-align: left; }
@media (hover: hover) { .lk-meny__rad:hover { background: var(--w-08); } }
.lk-meny__rad--avsluta { color: var(--a-4); }
/* dela-menyn: fälls ut under kortets dela-knapp (läget sätts i karta.js); Dela via… bara där navigator.share finns */
.lk-meny.lk-meny--dela { position: fixed; right: auto; bottom: auto; z-index: 150; transform-origin: top right; }
.lk-meny--dela[hidden] { transform: translateY(-6px) scale(.98); }
.lk-meny--dela.upp { transform-origin: bottom right; }
.lk-meny--dela.upp[hidden] { transform: translateY(6px) scale(.98); }
:is(.lk-meny--dela, .lk-ctx) .lk-meny__rad[hidden] { display: none; }
.lk-meny__rad.on::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--a-4); }
.lk-meny__rad svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* teckenförklaring + kredit */
.lk-legend { position: absolute; translate: 0 0; scale: 1; transform-origin: 0 100%; transition: left var(--lk-t) var(--lk-ease), opacity 260ms var(--lk-ease) 60ms, translate 260ms var(--lk-ease) 60ms, scale 260ms var(--lk-ease) 60ms, visibility 0s; left: var(--lk-fri-v); bottom: var(--lk-inset); z-index: 20; width: 264px; border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
/* den fria kartytans vänsterkant (pc): railen, plus kortet när det är öppet. Legenden står där, Utforska här + toasten centreras till höger om den */
/* bara på de tre som läser den: en ärvd variabel på body stilräknade om alla ~2400 element vid varje kortöppning (36–165 ms vid 4x CPU) */
:is(.lk-legend, .lk-utf, .lk-toast) { --lk-fri-v: calc(var(--lk-inset) + var(--lk-rail-w) + 22px); }
body.lk--panel :is(.lk-legend, .lk-utf, .lk-toast) { --lk-fri-v: calc(var(--lk-inset) + var(--lk-rail-w) + 8px + var(--lk-panel-w) + 22px); }
/* aldrig överlapp: en meny vid railen täcker legendens hörn, en meny i hörnet täcker kreditpillret ⇒ det som täcks göms */
.lk-kort.full:not([hidden]) ~ .lk-legend, .lk-meny--rail:not([hidden]) ~ .lk-legend { opacity: 0; visibility: hidden; }
/* helskärmskortet täcker hela kartytan: INGET får ligga kvar tänt under glaset */
.lk-kort.full:not([hidden]) ~ .lk-ctrl, .lk-kort.full:not([hidden]) ~ .lk-kredit, .lk-kort.full:not([hidden]) ~ .lk-meny { opacity: 0; visibility: hidden; }
body.lk-kortfull .lk-rail { opacity: 0; visibility: hidden; }
.lk-rail { transition: opacity var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t), padding var(--lk-fjader); }
.lk-ctrl { transition: opacity var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t); }
.lk-meny:not(.lk-meny--rail):not([hidden]) ~ .lk-kredit { opacity: 0; visibility: hidden; }
.lk-kredit { transition: opacity var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t); }
/* Koreografi kring helskärmskortet. BORT: allt under glaset viker undan åt sin egen kant på 160 ms, utan väntan, medan
   kortet vidgas över det. TILLBAKA (kortet stängs eller krymper, 220 ms): ytorna kommer i ordning från kortets kant och
   utåt — railen när kortet är halvvägs borta, sedan legenden, kreditpillret, kolumnen till höger, ~70 ms emellan och
   samma 320 ms-glid — så det läses som EN rörelse, inte fyra ytor som råkar dyka upp. Ordningen ligger i --ater;
   body.lk-kortfull/lk-arkuppe/lk-arkmorf speglas av karta.js (body:has() här gjorde varje DOM-ändring på sidan dyr:
   Chrome räknade om ~250 element per lagerbyte). body.lk-ater sätts av karta.js i 700 ms när ett synligt helskärmskort stängs/krymper (klassen .full lever kvar på det
   gömda kortet, så den duger inte som villkor). */
body.lk-ater :is(.lk-rail, .lk-ctrl, .lk-legend, .lk-kredit) { --ater: 120ms; transition: opacity 320ms var(--lk-ease) var(--ater), translate 320ms var(--lk-ease) var(--ater), visibility 0s linear var(--ater), left var(--lk-t) var(--lk-ease), padding var(--lk-fjader); }
body.lk-ater .lk-legend { --ater: 190ms; }
body.lk-ater .lk-kredit { --ater: 260ms; }
body.lk-ater .lk-ctrl { --ater: 330ms; }
.lk-kort.full:not([hidden]) ~ :is(.lk-ctrl, .lk-kredit, .lk-legend), body.lk-kortfull .lk-rail { transition: opacity 160ms var(--lk-ease), translate 160ms var(--lk-ease), visibility 0s linear 160ms, left var(--lk-t) var(--lk-ease), padding var(--lk-fjader); }
body.lk-kortfull .lk-rail { translate: -14px 0; }
.lk-kort.full:not([hidden]) ~ .lk-ctrl { translate: 14px 0; }
.lk-kort.full:not([hidden]) ~ :is(.lk-legend, .lk-kredit) { translate: 0 14px; }
.lk-meny--stil { width: 320px; max-height: calc(100dvh - 2 * var(--lk-inset)); padding: 8px; }
/* Kartstil-popovern (pc + iPad): samma miniatyrrutnät som telefonarket (stilPop i karta.js); raderna i #kartstil är bara källan */
#kartstil { width: 340px; border-radius: 18px; }
#kartstil > :not(.lk-stilpop) { display: none; }
#kartstil .lk-stilnat { padding: 4px 4px 8px; }
#kartstil .lk-chip { min-height: 44px; }
.lk-meny__rad--val { align-items: center; }
/* Cinematic mode aktivt: delvalen syns bara när Cinematic är på (effekter() i karta.js), som en tonad ruta i menyn */
#kartstil [data-cineval][hidden] { display: none; }
#kartstil [data-cineval] { background: color-mix(in srgb, var(--a-4) 9%, transparent); border-radius: 0; animation: lk-cine-in var(--lk-t, .3s) var(--lk-ease, ease) both; }
#kartstil .lk-meny__grupp--cine { margin-top: 6px; padding-top: 10px; border-radius: 12px 12px 0 0; color: var(--a-4); }
#kartstil [data-cinebild] { margin-bottom: 6px; border-radius: 0 0 12px 12px; }
@media (hover: hover) { #kartstil .lk-meny__rad[data-cineval]:hover { background: color-mix(in srgb, var(--a-4) 16%, transparent); } }
@keyframes lk-cine-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #kartstil [data-cineval] { animation: none; } }
.lk-meny__tumme { flex: none; width: 34px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, var(--w-12), var(--w-05)); border: 1px solid var(--w-10); }
.lk-meny__meta { display: grid; gap: 1px; line-height: 1.2; }
.lk-meny__meta small { font: var(--type-meta); color: var(--fg-6); }
/* telefon: Kartstil i arket (stilVy i karta.js). Miniatyrer i rutnät, reglagen som chips; valet slår igenom direkt, ingen Spara */
.lk-stilnat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; padding: 4px 8px 8px; }
.lk-stilnat:has(.lk-chip) { grid-template-columns: 1fr 1fr; gap: 8px; }
.lk-stilnat .lk-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; text-align: left; }
.lk-stilnat .lk-chip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lk-stilruta { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--fg-4); font: var(--type-meta); text-align: center; cursor: pointer; }
.lk-stilruta.on { color: var(--fg-1); font-weight: 600; }
.lk-stilruta__tumme { aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid var(--w-10); box-shadow: 0 0 0 0 var(--a-4); transition: box-shadow var(--lk-t) var(--lk-ease); }
.lk-stilruta.on .lk-stilruta__tumme { box-shadow: 0 0 0 2px var(--a-4); }
/* ponytail: handgjorda antydningar av varje stil, byt mot riktiga skärmdumpar när stilarna är låsta */
.lk-stilruta--0 { background: linear-gradient(135deg, #f2efe9 55%, #aad3df 55%); }
.lk-stilruta--1 { background: linear-gradient(135deg, #2b2f36 55%, #1b2330 55%); }
.lk-stilruta--2 { background: radial-gradient(circle at 30% 35%, #5d6b4a, #3a4232 60%, #2c3a4a); }
.lk-stilruta--3 { background: linear-gradient(135deg, #fafafa 55%, #dfe6ea 55%); }
.lk-stilruta--4 { background: linear-gradient(135deg, #1f2124 55%, #2a2f35 55%); }
.lk-stilruta--5 { background: repeating-radial-gradient(circle at 40% 60%, #f4f1ea 0 6px, #d8cfbf 6px 7px); }
.lk-stilruta--6 { background: repeating-radial-gradient(circle at 40% 60%, #25272b 0 6px, #43464c 6px 7px); }
.lk-stilruta--7 { background: linear-gradient(135deg, #f5f5f3 55%, #c9d8e2 55%); }
.lk-stilruta--8 { background: linear-gradient(135deg, #26282c 55%, #1e2a36 55%); }
.lk-stilruta--9 { background: radial-gradient(circle at 65% 35%, #b7ab8e 0 18%, #6f7d52 19% 48%, #3f4d36 49%); }
.lk-legend[hidden] { display: none; }
/* minimerad (body.lk-legend-min, karta.js): kortet glider en bit mot railen, krymper lätt mot sitt nedre vänstra hörn och tonas
   bort mot Kartval (vars badge studsar, karta.js); raderna står sedan under "På kartan" i Kartval. */
body.lk-legend-min .lk-legend { translate: -16px 0; scale: .96; opacity: 0; visibility: hidden;
  transition: left var(--lk-t) var(--lk-ease), opacity 200ms var(--lk-ease), translate 220ms var(--lk-ease), scale 220ms var(--lk-ease), visibility 0s linear 220ms; }
.lk-legend__topp { display: flex; align-items: center; justify-content: space-between; }
.lk-legend__topp button { border: 0; background: none; padding: 4px; margin: -4px -6px -4px 0; line-height: 0; color: var(--fg-6); cursor: pointer; border-radius: 8px; }
.lk-legend__topp button:hover { color: var(--fg-9); background: var(--w-08); }
.lk-legend__topp button svg { width: 16px; height: 16px; }
.lk-legend__topp .lk-legend__av { margin: -4px 4px -4px auto; padding: 4px 8px; line-height: 1; font: var(--type-label); }
.lk-legend__rad { display: flex; align-items: center; gap: 10px; font: var(--type-label); color: var(--fg-3); }   /* --fg-9 var för blekt i båda teman */
.lk-legend__rad svg { flex: none; width: 19px; height: 19px; color: var(--a-4); }
.lk-legend__rad button { margin-left: auto; border: 0; background: none; padding: 4px; line-height: 0; color: var(--fg-6); cursor: pointer; }
.lk-legend__rad button svg { width: 16px; height: 16px; color: inherit; }
.lk-legend__rad button:hover { color: var(--fg-2); }
/* raden (namn + pil) öppnar lagrets eget kort (vy lagr / kat i karta.js): hela raden lyser vid hover, krysset är sin egen knapp i kanten.
   Negativ marginal = utfyllnaden, så raden tar samma plats som utan ytan */
.lk-legend__rad:has(> .lk-legend__namn) { margin: -4px -8px; padding: 4px 4px 4px 8px; border-radius: 10px; transition: background var(--lk-t) var(--lk-ease); }
.lk-legend__rad:has(> .lk-legend__namn:hover) { background: var(--w-08); }
.lk-legend__rad .lk-legend__namn { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; padding: 0; font: inherit; line-height: normal; color: inherit; text-align: left; }
.lk-legend__rad .lk-legend__namn:hover { color: var(--fg-2); }
.lk-legend__rad .lk-legend__namn svg { width: 19px; height: 19px; color: var(--a-4); }
/* .lk-legend__klasser: statistikens och kartlägets band, etiketten under varje del. Lagrens klasser ritas av .lk-leg-* nedan */
.lk-legend__klasser { display: flex; gap: 2px; padding: 0 0 2px; color: var(--fg-6); }   /* hela bredden: fem klasser + inv/km² får inte plats indraget under namnet */
.lk-legend__klasser span { flex: 1 1 0; min-width: 0; display: grid; gap: 5px; text-align: center; white-space: nowrap; font: var(--type-meta); font-size: 11px; }
.lk-legend__klasser span::before { content: ""; height: 6px; background: var(--f); }
.lk-legend__klasser span:first-of-type::before { border-radius: 3px 0 0 3px; } .lk-legend__klasser span:last-of-type::before { border-radius: 0 3px 3px 0; }
.lk-legend__klasser small { flex: none; margin: -4px 0 0 6px; font: var(--type-meta); font-size: 11px; line-height: 14px; }
/* lagrens klasser (klasser() i karta.js) efter datatyp, inte antal. Listan scrollar i stället för att växa ur skärmen */
#legend-rader { display: grid; gap: 8px; max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: -4px -8px; padding: 4px 8px; }
/* symbolen: formen efter lagrets geometri (geo), färgen ur legenden. Ensam klass = symbolen i raden, i ikonens ruta (legGlyf) */
.lk-leg-g, .lk-leg-kat li::before { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--f); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.lk-leg-g { width: 12px; height: 12px; margin: 0 3.5px; }
.lk-leg-g[data-geo="prick"], [data-geo="prick"] > li::before { border-radius: 50%; }
.lk-leg-g[data-geo="linje"] { width: 17px; height: 4px; margin: 0 1px; border-radius: 2px; }
[data-geo="linje"] > li::before { width: 14px; height: 3px; border-radius: 2px; }
/* dragspelet: pilen fäller ut lagrets klasser, bara ett lager åt gången */
.lk-legend__rad .lk-legend__vik { margin-left: 0; }
.lk-legend__vik svg { transition: rotate var(--lk-t) var(--lk-ease); }
.lk-legend__vik[aria-expanded="true"] svg { rotate: 180deg; }
:is(.lk-leg-kat, .lk-leg-skala, .lk-leg-enhet) { margin: 0; font: var(--type-meta); font-size: 11px; line-height: 14px; color: var(--fg-6); }
.lk-legend__rad ~ :is(.lk-leg-kat, .lk-leg-skala, .lk-leg-enhet) { padding-left: 29px; }   /* indraget under namnet (ikonen 19 + gap 10) */
/* kategorier: symbol + etikett i två spalter, långa etiketter bryts i stället för att krocka */
.lk-leg-kat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; padding: 0; list-style: none; }
.lk-leg-kat li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lk-leg-kat li::before { content: ""; }
/* skala: stegad stapel, etiketterna bara i ändarna, enheten emellan */
.lk-leg-skala { display: grid; gap: 5px; }
.lk-leg-skala > div { display: flex; gap: 1px; height: 8px; border-radius: 4px; overflow: hidden; outline: 1px solid color-mix(in srgb, currentColor 14%, transparent); outline-offset: -1px; }
.lk-leg-skala i { flex: 1; background: var(--f); }
.lk-leg-skala p { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin: 0; }
.lk-leg-skala span { max-width: 45%; }
.lk-leg-skala span:last-child { text-align: right; }
.lk-leg-skala small { flex: 1; min-width: 0; font: inherit; text-align: center; opacity: .8; }
.lk-leg-skala + .lk-leg-kat { margin-top: 2px; }
.lk-kredit { position: absolute; border: 0; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 28px; right: calc(var(--lk-inset) + 48px + 8px); bottom: var(--lk-inset); z-index: 20; border-radius: 999px; padding: 5px 10px; font: var(--type-meta); color: var(--fg-7); --glas-alfa: .08; }
/* källraden fälls ut/in åt vänster (pillret är högerankrat): max-width + opacitet, ingen display:none så den kan animeras.
   max-width ≈ radens bredd, så indragningen inte står still en stund innan den syns */
.lk-kredit__text { white-space: nowrap; overflow: hidden; max-width: 22em; margin-left: 0; opacity: 1;
  transition: max-width 360ms var(--lk-ease), margin-left 360ms var(--lk-ease), opacity 200ms var(--lk-ease) 120ms; }
.lk-kredit[aria-expanded="false"] .lk-kredit__text { max-width: 0; margin-left: -6px; opacity: 0; transition: max-width 300ms var(--lk-ease), margin-left 300ms var(--lk-ease), opacity 140ms var(--lk-ease); }
.lk-kort__lank { display: flex; align-items: center; justify-content: space-between; margin: 8px 12px 4px; padding: 12px 14px; border-radius: 12px; background: var(--aw-20); color: var(--a-2b); font: var(--type-label); text-decoration: none; transition: background var(--lk-t) var(--lk-ease); }
.lk-kort__lank:hover { filter: brightness(1.15); }
.lk-kort__lank svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* platsrubriken i kartan */
/* nålar + verktyg i kolumnen bara på telefon/iPad: på desktop bor de i railen (sidovy-kartrubrik.js gömmer dem) */
.lk-ctrl__mobil { display: none; }
/* verktygsmenyn öppnad från railen: kortspalten intill railen (draw-popup.js `mm-rail__verktyg`) */
.lk-meny--rail { right: auto; bottom: auto; left: calc(var(--lk-inset) + var(--lk-rail-w) + 8px); top: var(--lk-inset); max-height: calc(100dvh - 2 * var(--lk-inset)); }

/* ── bottenarket (telefon) och toppflikarna (iPad) ─────────────────────── */
.lk-flikar, .lk-verktygsrad, .lk-sokruta { display: none; }
.lk-ark { display: none; }

@media (max-width: 1100px) {
  .lk-rail, .lk-kort, .lk-skym, .lk-legend, .lk-ctrl__desk { display: none !important; }
  .lk-ctrl__mobil { display: grid; }
  /* Kolumnen vilar som Min plats + ⋯ och växer uppåt ur hörnet (karta.css §30.12). */
  .lk-ctrl--ner { flex-direction: column-reverse; }
  .lk-ctrl--ner [data-mer] { order: -1; }
  /* ⋯ fäller ut kolumnen: knapparna växer fram ur ⋯ en i taget (närmast först), fjädrar in; stängning baklänges och snabbare */
  .lk-ctrl--ner > :not([data-mer]) { max-height: 96px; opacity: 1; scale: 1; translate: 0 0; transform-origin: 50% 100%;
    transition: max-height 380ms var(--lk-ease), margin 380ms var(--lk-ease), opacity 240ms ease, scale 460ms cubic-bezier(.34, 1.5, .5, 1), translate 460ms cubic-bezier(.34, 1.5, .5, 1);
    transition-delay: calc(var(--d, 0) * 45ms); }
  body:not(.lk-mer) .lk-ctrl--ner > :not([data-mer]) { max-height: 0; margin-top: -8px; opacity: 0; scale: .5; translate: 0 24px; pointer-events: none; visibility: hidden;
    transition: max-height 280ms var(--lk-ease), margin 280ms var(--lk-ease), opacity 160ms ease, scale 240ms var(--lk-ease), translate 240ms var(--lk-ease), visibility 0s 280ms;
    transition-delay: calc((5 - var(--d, 0)) * 25ms); }
  .lk-ctrl--ner > [data-tema] { --d: 0; } .lk-ctrl--ner > [data-kartstil] { --d: 1; } .lk-ctrl--ner > .lk-kgrupp { --d: 2; }
  .lk-ctrl--ner > [data-meny] { --d: 3; } .lk-ctrl--ner > [data-oppna="sparade"] { --d: 4; }
  .lk-ctrl--ner [data-mer] svg { transition: rotate 380ms cubic-bezier(.34, 1.5, .5, 1); }
  body.lk-mer .lk-ctrl--ner [data-mer] svg { rotate: 90deg; }
  /* ⋯ AVSTÄNGT 2026-09-23 (telefon + iPad): kolumnen står alltid framme; utfällningen ovan ligger kvar om den ska tillbaka */
  .lk-ctrl--ner [data-mer] { display: none; }
  body:not(.lk-mer) .lk-ctrl--ner > :not([data-mer]) { max-height: 96px; margin-top: 0; opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; visibility: visible; }
  .lk-flikar { display: flex; position: absolute; left: var(--lk-inset); right: var(--lk-inset); z-index: 70; gap: 4px; padding: 5px; border-radius: 999px; }
  .lk-flik { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 9px 6px; background: transparent; color: var(--fg-4); font: var(--type-chip); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
  .lk-flik svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .lk-flik:is([aria-selected="true"], [aria-expanded="true"]) { background: var(--w-14); color: var(--fg-1); } /* ingen orange: neutral segmentknapp à la Apple */
  .lk-ark {
    display: flex; flex-direction: column; position: absolute; left: var(--lk-inset); right: var(--lk-inset); z-index: 65; border-radius: 18px 18px 0 0; overflow: hidden;
    bottom: 0; height: var(--lk-ark-h); transform: translateY(calc(100% + var(--lk-inset) + 60px - var(--lk-kik, 0px))); /* + bottom-offseten, annars kikar huvudet fram bakom flikraden */
    transition: transform 260ms var(--lk-ease);
  }
  /* arket har EN höjd (nästan helskärm) och lägena är bara translateY: en höjd-animation relayoutar innehållet och bygger om
     glaslinsen varje frame (glas.js ResizeObserver), det var det som hackade när sökrutan drog upp arket */
  .lk-ark { --lk-ark-h: calc(100dvh - 2 * var(--lk-inset) - 60px); }
  .lk-ark[data-lage="halv"] { transform: translateY(calc(100% - 39.6dvh)); }
  .lk-ark[data-lage="full"] { transform: translateY(0); border-radius: 18px; }   /* hela höjden: upp till kanten under insetten */
  .lk-ark__handtag { flex: none; display: grid; place-items: center; width: 100%; height: 22px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
  .lk-ark__handtag:focus-visible::before { background: var(--a-4); }
  .lk-ark[data-lage="titt"] { transform: translateY(calc(100% - 120px)); }
  .lk-ark__handtag::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--n-32); }
  .lk-ark__huvud { display: flex; align-items: center; gap: 10px; padding: 0 16px 8px; }
  .lk-ark__huvud h2 { margin: 0; font: var(--type-panel-title); flex: 1; }
  .lk-ark__kropp { flex: 1; overflow: auto; padding: 0 8px 12px; overscroll-behavior: contain; }
  .lk-ctrl--ner { bottom: calc(var(--lk-inset) + 56px + 8px); }
  .lk-kredit { bottom: calc(var(--lk-inset) + 56px + 8px); }
  .lk-meny { bottom: calc(var(--lk-inset) + 56px + 8px); }
  /* telefon: flikarna i botten */
  .lk-flikar { bottom: calc(var(--lk-inset) + var(--lk-sa-b)); }
  /* aktivt verktyg: raden tar flikarnas plats tills Klar */
  body.lk-verktyg .lk-flikar { display: none; }
  .lk-verktygsrad:not([hidden]) { display: flex; align-items: center; gap: 8px; position: absolute; left: var(--lk-inset); right: var(--lk-inset); bottom: calc(var(--lk-inset) + var(--lk-sa-b)); z-index: 70; padding: 6px 6px 6px 14px; border-radius: 999px; animation: lk-in-u 320ms var(--lk-ease); }
  .lk-verktygsrad__ikon svg { display: block; width: 18px; height: 18px; fill: none; stroke: var(--a-4); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .lk-verktygsrad__meta { flex: 1; min-width: 0; display: grid; line-height: 1.2; font: var(--type-label); }
  .lk-verktygsrad__meta :is(b, small) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lk-verktygsrad__meta small { font: var(--type-meta); color: var(--fg-6); }
  .lk-verktygsrad .lk-chip { padding: 9px 14px; }
  /* verktygen i arket: tummevänliga rader */
  #ark-kropp [data-verktyg] { padding: 12px 10px; }
  .lk-ark { bottom: calc(var(--lk-inset) + 56px + 4px); transition: transform 320ms var(--lk-ease), background-color 320ms var(--lk-ease), left 320ms var(--lk-ease), right 320ms var(--lk-ease), clip-path 320ms var(--lk-ease), visibility 0s 320ms; }
  /* stängt ark göms efter glidet: under Safaris sökruta (startbanan, --lk-band) syns sidan, och där låg det annars */
  .lk-ark[data-lage="stangd"] { visibility: hidden; }
  .lk-ark:not([data-lage="stangd"]) { transition-delay: 0s; }
}
/* iPad liggande (1133–1366 bred ⇒ pc-layouten): zoom ± behövs inte, man nyper. Pekskärm, eller iPadens bildformat
   (≤ 1,55:1) så labbets iPad-ram visar samma sak; laptops (16:10, 16:9) behåller knapparna */
@media (pointer: coarse) and (hover: none), (min-width: 1101px) and (max-width: 1366px) and (max-aspect-ratio: 31/20) {
  .lk-ctrl__desk { display: none; }
}
@media (max-width: 767px) {
  /* glaset tätnar ju högre arket står (titt = panelens .28): högt uppe täcker det mer av kartan så innehållet läses,
     nere igen släpper det igenom kartan; background-color transitionerar med transformen (320 ms ovan) */
  .lk-ark[data-lage="halv"] { --glas-alfa: .5; }
  /* full som Apple Maps stora läge: kant i kant i sidled och nästan täckande; linsen byts mot ren blur (syns ändå inte) */
  /* titt/halv står i sökrutans bredd (inset), först på väg till full glider sidorna ut till kanten (left/right 320 ms ovan) */
  .lk-ark[data-lage="full"] { --glas-alfa: .96; left: 0; right: 0; }
  /* drag (karta.js): transform, täthet och sidokanter sätts inline per frame, ingen transition som jagar fingret; linsen vilar
     (bredden ändras varje frame, en ombyggnad kostar 60–130 ms) och ren blur står i dess ställe tills släppet */
  .lk-ark.dras { transition: none; backdrop-filter: brightness(.9) saturate(1.4) blur(20px) !important; -webkit-backdrop-filter: brightness(.9) saturate(1.4) blur(20px) !important; }
  /* arket når skärmens botten bakom flikraden (den flyter ovanpå, som Apple Maps sökpiller) och i full ända upp;
     lägena räknas därför med fotens höjd (--lk-ark-fot, samma i karta.js lagY) */
  .lk-ark { --lk-ark-fot: calc(var(--lk-inset) + 60px + var(--lk-sa-b) + var(--lk-band, 0px)); --lk-k: 100%; --lk-t: var(--lk-k); left: var(--lk-inset); right: var(--lk-inset); bottom: calc(-1 * var(--lk-band, 0px)); height: calc(100dvh + var(--lk-band, 0px)); transform: translateY(var(--lk-t));
    /* arket går ner under Safaris sökruta (bandet, --lk-band) så innehållet rullar in under den som i Apple Maps; titt/halv räknar bandet i foten.
       Klippet (--lk-k) följer läget, inte glidet: stängt behåller det läget arket lämnade (data-mal) och står still */
    clip-path: inset(0 0 var(--lk-k) 0 round 18px 18px 0 0); }   /* når skärmens botten (sökrutan är borta medan arket är öppet) */
  .lk-ark:is([data-lage="titt"], [data-lage="stangd"][data-mal="titt"]) { --lk-k: calc(100% - 120px - var(--lk-ark-fot)); }
  .lk-ark:is([data-lage="halv"], [data-lage="stangd"][data-mal="halv"]) { --lk-k: calc(100% - 39.6dvh - var(--lk-ark-fot)); }
  .lk-ark:is([data-lage="full"], [data-lage="stangd"][data-mal="full"]) { --lk-k: 0px; }
  .lk-ark[data-lage="stangd"] { --lk-t: 100%; }   /* stängt: helt under skärmkanten */
  .lk-ark[data-lage] { transform: translateY(var(--lk-t)); }   /* vinner över ≤1100-blockets lägesregler */
  .lk-ark[data-lage="full"] { border-radius: 18px 18px 0 0; }
  .lk-ark__kropp { padding-bottom: calc(12px + var(--lk-sa-b) + var(--lk-band, 0px)); }   /* sista raden går att rulla upp ovanför Safaris sökruta */
  /* arket är alltid 100dvh och klipps under kanten: i titt/halv ligger kroppens nedre del utanför skärmen, så utan luften
     där (= den klippta delen, --lk-k) kunde de sista raderna aldrig scrollas upp i sikte */
  .lk-ark[data-lage="titt"] .lk-ark__kropp { padding-bottom: calc(100dvh - 120px - var(--lk-ark-fot) + 12px); }
  .lk-ark[data-lage="halv"] .lk-ark__kropp { padding-bottom: calc(60.4dvh - var(--lk-ark-fot) + 12px); }
  .lk-ark__huvud { touch-action: none; }
  /* i sökrutan (filtren utfällda): arket växer till nästan helskärm och glaset blir nästan ogenomskinligt */
  .lk-ark[data-lage="full"]:has(.lk-sokvy[data-filter]) { --glas-alfa: .9; }
  /* linsen (feDisplacementMap) räknas om varje frame arket rör sig; i sökläget är glaset nästan täckt ändå ⇒ ren blur; vila (karta.js) = på väg ur full */
  .lk-ark:is([data-lage="full"], [data-glas-vila], .lk-morf, :has(.lk-sokvy[data-filter])) { backdrop-filter: brightness(.9) saturate(1.4) blur(20px) !important; -webkit-backdrop-filter: brightness(.9) saturate(1.4) blur(20px) !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  /* iPad = barTop: flikraden under headern, arket kommer uppifrån som ett kort */
  .lk-ctrl--ner > [data-tema] { display: none; } /* tema bor i märkets meny (lab.js §Inställningar) */
  /* vänsterställd intill märket (= menyknappen), bred som sitt innehåll; Sök finns bara här (telefonens bottenrad rymmer den inte) */
  .lk-flikar { bottom: auto; top: var(--lk-inset); left: var(--lk-inset); right: auto; max-width: calc(100% - 2 * var(--lk-inset) - 48px); }
  .lk-flik { flex: none; padding: 9px 14px; }
  /* hänger under pillret, hög som innehållet men högst halva skärmen (resten rullar i kroppen): kartan syns under */
  .lk-ark { top: calc(var(--lk-inset) + 48px + 8px); bottom: auto; height: auto; max-height: 44dvh; left: var(--lk-inset); right: auto; width: min(420px, calc(100% - 2 * var(--lk-inset))); border-radius: 18px; transform: translateX(calc(-100% - var(--lk-inset) - 8px)); }
  .lk-ark:is([data-lage="titt"], [data-lage="halv"], [data-lage="full"]) { transform: none; }
  .lk-ark__handtag { display: none; }
    .lk-ctrl--ner, .lk-kredit, .lk-meny { bottom: 30px; }
  /* Sparade + Verktyg bor i pillret där uppe: inga dubbletter i hörnkolumnen; verktygsmenyn hänger under pillret som arket */
  .lk-ctrl--ner > :is([data-oppna="sparade"], [data-meny]) { display: none; }
  /* samma ordning som liggande (desktop): nerifrån Kartstil, kompass, 3D */
  .lk-ctrl--ner { flex-direction: column; }
  #meny { top: calc(var(--lk-inset) + 48px + 8px); bottom: auto; left: var(--lk-inset); right: auto; }
}
/* sökrutan i nedre vänstra hörnet: iPad stående (kortet växer upp ur hörnet) och telefon (arket morfar ur den, full bredd) */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .lk-sokruta { display: flex; align-items: center; gap: 10px; position: absolute; left: var(--lk-inset); bottom: var(--lk-inset); z-index: 70; width: min(375px, calc(100% - 2 * var(--lk-inset))); height: 48px; padding: 0 4px 0 0; border-radius: 999px; touch-action: none; }
  .lk-sokruta__handtag { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--n-32); pointer-events: none; }   /* dra uppåt ⇒ morfen (arkets handtag i pillerform) */
  .lk-sokruta > button { display: flex; align-items: center; gap: 10px; height: 100%; border: 0; background: none; color: var(--fg-5); font: var(--type-label); }
  .lk-sokruta__falt { flex: 1; padding: 0 0 0 18px; text-align: left; cursor: text; }
  .lk-sokruta__filter { width: 44px; justify-content: center; border-radius: 999px; cursor: pointer; }
  .lk-sokruta__filter:hover { color: var(--fg-2); }
  .lk-sokruta__minplats { margin-right: -10px; }   /* två symboler tätt ihop, filtret ytterst */
  .lk-sokruta svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  /* sökrutan tonar ut när kortet öppnas ⇒ kortet "blir" rutan */
  body.lk-arkuppe .lk-sokruta { opacity: 0; visibility: hidden; }
  /* morfen (karta.js morf): sökrutan ÄR arket hopfällt och växer till det (ingen toning, inget glid underifrån). Rutan ligger
     över arket och tonar bort ur pillret; WAAPI styr form + toning, så inga CSS-transitioner får ta över. Linsen vilar (ren blur) */
  .lk-ark.lk-morf { transition: none !important; }
  /* morfens oskärpa: egen rundad ruta bakom arket (karta.js satt/morf), arket själv utan backdrop medan den syns */
  .lk-morfglas { display: block; position: absolute; left: 0; top: 0; z-index: 65; pointer-events: none; }   /* [data-glas=bar]: linsen från glas.js */
  .lk-morfglas[hidden] { visibility: hidden !important; }   /* inte display: linsen för storleken står kvar byggd; !important slår morfens inline-visibility */
  /* arket i vila (och i draget) = morfens sista ruta: glas.js ger det en SVG-lins som CPU:n räknar om varje frame bakgrunden
     rör sig, det hackade när morfen landade. Samma recept som glas.js ger stora ytor (panel: dim 1.04, bmitt 22 / 2) */
  .lk-ark, .lk-ark.dras { backdrop-filter: brightness(1.04) saturate(1.4) blur(11px) !important; -webkit-backdrop-filter: brightness(1.04) saturate(1.4) blur(11px) !important; }
  .lk-morfglas:not([hidden]) ~ .lk-ark { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  /* under morfen ÄR arket pillret (samma ruta i början): rutans eget glas + handtag bort, annars syns två former i varandra (hörnet vid rutans kant) */
  body.lk-arkmorf .lk-sokruta { background: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  body.lk-arkmorf .lk-sokruta__handtag { visibility: hidden; }
}
/* iPad stående: kolumnen hänger i övre högra hörnet (som telefonen), Kartstil öppnas intill den */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .lk-ctrl--ner { top: var(--lk-inset); bottom: auto; }
  .lk-ctrl--ner > :not([data-mer]) { transform-origin: 50% 0; }
  /* kolumnen uppe ⇒ kompassen nederst (§kompassen): uppifrån Kartstil, 3D, kompass. Telefonen delar reglerna (nedan) */
  .lk-ctrl--ner > [data-kartstil] { order: -1; }
  .lk-ctrl--ner .lk-kgrupp { flex-direction: column; }
  .lk-ctrl .lk-kompass { margin: 8px 0 0; }
  .lk-kredit { right: var(--lk-inset); }   /* kolumnen är uppe ⇒ kreditpillret tar hörnet */
  #kartstil { top: calc(var(--lk-inset) + 48px + 8px); bottom: auto; }   /* under pillret, annars täcker den flikarna */
  .lk-flik[data-oppna="sok"] { display: none; }
  /* ETT kort, EN bredd (Apple Maps sidokort): alla flikar inkl. Verktyg öppnas i arket; halv/full via handtaget (karta.js
     klick växlar), höjden animerar (glas.js bygger linsen grovt under rörelsen) */
  /* ankrat i nedre vänstra hörnet: halv växer upp ur hörnet, full når upp under flikraden */
  .lk-ark { top: auto; bottom: var(--lk-inset); width: min(375px, calc(100% - 2 * var(--lk-inset))); max-height: none; height: calc(100dvh - 2 * var(--lk-inset) - 56px);
    transition: transform 320ms var(--lk-ease), height 320ms var(--lk-ease), background-color 320ms var(--lk-ease); }
  /* in/ut: kortet stiger upp ur nedre kanten redan i halv höjd (stängd = halv höjd), så det glider bara, krymper inte samtidigt */
  .lk-ark:is([data-lage="halv"], [data-lage="stangd"]) { height: 50dvh; }
  /* stängd: bara glidet animerar; höjden är den kortet lämnade/ska till (data-mal, karta.js) och byts medan det är utanför */
  .lk-ark[data-lage="stangd"] { transform: translateY(calc(100% + var(--lk-inset) + 8px)); transition: transform 320ms var(--lk-ease), background-color 320ms var(--lk-ease), visibility 0s 320ms; }
  .lk-ark[data-lage="stangd"][data-mal="full"] { height: calc(100dvh - 2 * var(--lk-inset) - 56px); }
  /* titt: rubrik + en rad kvar (ett drag nedåt från halv/full landar här, ett till stänger); = karta.js ipTitt */
  .lk-ark:is([data-lage="titt"], [data-lage="stangd"][data-mal="titt"]) { height: 190px; }
  /* drag (karta.js ipDrag): höjden sätts inline per frame, ingen transition som jagar fingret; ren blur medan linsen vilar */
  .lk-ark__huvud { touch-action: none; }
  .lk-ark.dras { transition: none; backdrop-filter: brightness(.9) saturate(1.4) blur(20px) !important; -webkit-backdrop-filter: brightness(.9) saturate(1.4) blur(20px) !important; }
  .lk-ark__handtag { display: grid; }
  /* verktygen: två spalter per grupp i stället för 20 rader under varandra */
  #ark-kropp:has([data-verktyg]) { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; align-content: start; }
  #ark-kropp:has([data-verktyg]) .lk-meny__grupp { grid-column: 1 / -1; }
  /* Kartstil växer ur knappen uppe till höger */
  #kartstil { width: 320px; transform-origin: top right; max-height: calc(100dvh - 2 * var(--lk-inset) - 56px); }
}
/* Sök bor i hörnet ⇒ flikraden slutar vid ~432 px: från 820 px bredd ryms Kartstil (320) bredvid den, högst upp */
@media (min-width: 820px) and (max-width: 1100px) and (orientation: portrait) {
  #kartstil { top: var(--lk-inset); max-height: calc(100dvh - 2 * var(--lk-inset)); }
}
/* pc: kreditpillret i hörnet, kompass + 3D uppe till höger, zoom kvar nere ovanför krediten (Malte 2026-10-13).
   Kolumnen spänner hela höjden (genomklickbar) och kompassgruppen trycks upp med margin-bottom: auto; HTML:en orörd så
   telefon/iPad (där kolumnen redan hänger uppe) delar DOM. Uppe ⇒ kompassen nederst (§kompassen), som iPad stående. */
@media (min-width: 1101px) {
  .lk-ctrl--ner { top: var(--lk-inset); bottom: calc(var(--lk-inset) + 28px + 8px); pointer-events: none; }
  .lk-ctrl--ner > * { pointer-events: auto; }
  .lk-ctrl--ner .lk-kgrupp { flex-direction: column; margin-bottom: auto; }
  .lk-ctrl .lk-kompass { margin: 8px 0 0; }
  .lk-kredit { right: var(--lk-inset); }
}
@media (max-width: 767px) {
  /* pillret: Lista · Kartval · Verktyg · Sparade; Sök bor i sökrutan nere */
  .lk-flik[data-oppna="sok"] { display: none; }
  /* tema bor i märkets meny, Sparade och Verktyg i pillret: inga dubbletter i kolumnen */
  .lk-ctrl--ner > :is([data-tema], [data-oppna="sparade"], [data-meny]) { display: none; }
  /* morfen ur/in i sökrutan: rutan tonar bort direkt när arket växer, tillbaka först när arket nästan krympt in */
  /* som iPad stående: flikraden i toppen intill märket, sökrutan i botten (rutan morfar till arket, karta.js morf) */
  .lk-flikar { top: calc(var(--lk-inset) + var(--lk-sa-t)); bottom: auto; }
  .lk-flik { padding: 9px 4px; }
  .lk-sokruta { right: var(--lk-inset); width: auto; bottom: calc(var(--lk-inset) + var(--lk-sa-b)); z-index: 70; }
  body.lk-verktyg .lk-flikar { display: flex; }
  body.lk-verktyg .lk-sokruta { display: none; }   /* verktygsraden tar sökrutans plats tills Klar */
  /* full når upp under flikraden (som iPad), inte över den */
  .lk-ark { height: calc(100dvh + var(--lk-band, 0px) - var(--lk-inset) - 48px - 8px - var(--lk-sa-t)); }
  /* kolumnen hänger under flikraden i högra kanten, uppifrån Kartstil, 3D, kompass (§kompassen: mot mitten); menyerna öppnas intill den */
  .lk-ctrl--ner { top: calc(var(--lk-inset) + 48px + 8px + var(--lk-sa-t)); bottom: auto; flex-direction: column; }
  .lk-ctrl--ner > :not([data-mer]) { transform-origin: 50% 0; }
  .lk-ctrl--ner > [data-kartstil] { order: -1; }
  .lk-ctrl--ner .lk-kgrupp { flex-direction: column; }
  .lk-ctrl .lk-kompass { margin: 8px 0 0; }
  :is(#meny, #kartstil) { top: calc(var(--lk-inset) + 48px + 8px + var(--lk-sa-t)); bottom: auto; }
  /* kolumnen är uppe ⇒ kreditpillret tar hörnet ovanför flikraden */
  .lk-kredit { right: var(--lk-inset); }
  /* arket glider upp över hörnet: glaset skulle visa pillret igenom, så det tonar ut (arket ligger efter i DOM ⇒ body.lk-arkuppe från karta.js, inte ~) */
  body.lk-arkuppe .lk-kredit { opacity: 0; visibility: hidden; }
  .lk-flik[data-meny] { order: 1; }
  .lk-flik[data-oppna="sparade"] { order: 2; }
  .lk-flik[data-oppna="jamfor"] { order: 3; }
}
/* PROV 2026-09-28: symbolen ovanför texten i flikpillret (telefon + iPad stående). Höjden hålls på 48 px (resten räknar med den).
   Ångra = radera hela blocket */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .lk-flik { flex-direction: column; gap: 2px; padding-block: 4px; font-size: 10.5px; line-height: 12px; }
  .lk-flik.lk-brand > span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-kort, .lk-ark, .lk-meny, .lk-legend, .lab-stapel > i, .lk-prick__prick, .lk-prick__brosch, .lk-prick__brosch::after, .lk-langtryck, .lk-rail .lk-ikn > svg, .lk-kompass__ring, .lk-kompass, .lk-ny, .lk-droppe, .lk-droppe > i, .lk-rail, .lk-ctrl, .lk-ctrl--ner > *, .lk-kredit, .lk-kredit__text, .lk-ur svg, .lk-ur .lk-ikn__badge { transition: none; animation: none; }
  /* droppens keyframes sitter på .lk-kgrupp.spelar (0,3,0+) och vann över raden ovan; lägena står statiskt i .oppen, droppen göms */
  .lk-kgrupp.spelar :is(.lk-droppe > i, .lk-ur svg, .lk-ur .lk-ikn__badge) { animation: none; }
  .lk-droppe { display: none; }
}

/* §inträde: när sidan laddas glider kontrollerna in i tur och ordning i stället för att poppa upp. Bara translate/scale/opacity
   (ingen filter: den bryter glasets backdrop-filter), fill-mode backwards ⇒ efter sista bildrutan styr de vanliga transitionerna igen.
   Ordningen följer ögat: rail/märke → flikar/ark → legend → kredit → knappkolumnen nerifrån och upp. */
@keyframes lk-in-v { from { opacity: 0; translate: -14px 0; scale: .97; } }
@keyframes lk-in-h { from { opacity: 0; translate: 14px 0; scale: .97; } }
@keyframes lk-in-u { from { opacity: 0; translate: 0 12px; scale: .97; } }
body.lk-start, body.lk-start * { transition: none !important; }   /* karta.js startblock: sparat läge sätts utan transitions */
@media (prefers-reduced-motion: no-preference) {
  :is(.lk-rail, .lk-brand) { animation: lk-in-v 620ms var(--lk-ease) 120ms backwards; }
  /* ett kort som står öppet vid omladdning (?vy=) glider in strax efter railen; karta.js hoppar över dess egen öppna-transition.
     Animationen byts aldrig ⇒ körs bara vid load; ett dolt kort går från 0 till 0 och syns inte */
  .lk-kort { animation: lk-in-v 620ms var(--lk-ease) 180ms backwards; }
  :is(.lk-flikar, .lk-ark) { animation: lk-in-u 620ms var(--lk-ease) 160ms backwards; }
  /* iPad stående: sökrutan stiger upp ur sitt hörn strax efter flikraden (display:none → flex vid vridning ⇒ spelas om) */
  .lk-sokruta { animation: lk-in-u 620ms var(--lk-ease) 220ms backwards; }
  .lk-legend { animation: lk-in-u 620ms var(--lk-ease) 260ms backwards; }
  /* kreditpillret poppar fram ur sin kant med kolumnens fjäder (lk-in-u var för diskret för en så liten knapp) */
  .lk-kredit { transform-origin: 100% 50%; animation: lk-in-knopp 520ms cubic-bezier(.34, 1.5, .5, 1) 600ms backwards; }
  .lk-ctrl > * { animation: lk-in-h 560ms var(--lk-ease) backwards; }
  .lk-ctrl > :nth-last-child(1) { animation-delay: 300ms; }
  .lk-ctrl > :nth-last-child(2) { animation-delay: 360ms; }
  .lk-ctrl > :nth-last-child(3) { animation-delay: 420ms; }
  .lk-ctrl > :nth-last-child(n+4) { animation-delay: 480ms; }
  /* railens knappar kaskaderar in efter glaset, uppifrån */
  .lk-rail > * { animation: lk-in-u 480ms var(--lk-ease) 220ms backwards; }
  .lk-rail > :nth-child(2) { animation-delay: 255ms; }  .lk-rail > :nth-child(3) { animation-delay: 290ms; }
  .lk-rail > :nth-child(4) { animation-delay: 325ms; }  .lk-rail > :nth-child(5) { animation-delay: 360ms; }
  .lk-rail > :nth-child(6) { animation-delay: 395ms; }  .lk-rail > :nth-child(7) { animation-delay: 430ms; }
  .lk-rail > :nth-child(8) { animation-delay: 465ms; }  .lk-rail > :nth-child(9) { animation-delay: 500ms; }
  .lk-rail > :nth-child(n+10) { animation-delay: 535ms; }
}
/* utan ⋯ växer kolumnen i stället fram ur sitt hörn vid load, med samma fjäder som ⋯-utfällningen: iPad nerifrån, telefon uppifrån */
@keyframes lk-in-knopp { from { opacity: 0; scale: .5; translate: 0 var(--lk-in-y, 24px); } }
@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
  .lk-ctrl--ner > [data-kartstil] { animation: lk-in-knopp 520ms cubic-bezier(.34, 1.5, .5, 1) 340ms backwards; }
  .lk-ctrl--ner .lk-3d { animation: lk-in-knopp 520ms cubic-bezier(.34, 1.5, .5, 1) 420ms backwards; }
  .lk-ctrl--ner .lk-ur { animation: lk-in-knopp 520ms cubic-bezier(.34, 1.5, .5, 1) 500ms backwards; }   /* ur hörnet: Kartstil, 3D, kompass */
  .lk-ctrl--ner > .lk-kgrupp { animation: none; }
  /* kreditpillret är aldrig display:none, så dess animation spelas inte om när iPaden vrids över 1100 px som kolumnens gör;
     ett eget keyframe-namn här byter animation-name vid brytpunkten ⇒ den startar om */
  .lk-kredit { animation-name: lk-in-knopp-m; }
}
@keyframes lk-in-knopp-m { from { opacity: 0; scale: .5; translate: 0 var(--lk-in-y, 24px); } }
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .lk-ctrl--ner > * { --lk-in-y: -24px; }
  .lk-ctrl--ner > [data-meny] { animation: lk-in-knopp 520ms cubic-bezier(.34, 1.5, .5, 1) 340ms backwards; }
}

/* §QoL: toast, tooltip, högerklicksmeny, mätning, kortkommandon, tomma lägen, skelett, radkryss, åtgärder, jämför, badgestuds */
.lk-ikn__badge[hidden] { display: none; }
.lk-ikn__badge.bump { animation: lk-bump 420ms cubic-bezier(.34,1.56,.64,1); }
@keyframes lk-bump { 0% { scale: 1; } 40% { scale: 1.22; } 100% { scale: 1; } }
/* toastens höjd över kanten bor i EN variabel: Utforska här lyfts över den (§Utforska här) */
body { --lk-toast-b: calc(var(--lk-inset) + 8px); }
.lk-toast { position: fixed; left: 50%; bottom: var(--lk-toast-b); translate: -50% 0; z-index: 200; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 999px; color: var(--fg-1); font: var(--type-label); max-width: calc(100vw - 32px); animation: lk-toast-in 320ms cubic-bezier(.34,1.56,.64,1); }
.lk-toast[hidden] { display: none; }
.lk-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-toast button { flex: none; border: 0; border-radius: 999px; padding: 6px 12px; background: var(--aw-20); color: var(--a-2b); font: var(--type-chip); cursor: pointer; }
@keyframes lk-toast-in { from { translate: -50% 16px; opacity: 0; scale: .96; } }
/* laddpausen (varmUpp): toastens glaspiller med en ring som snurrar på kompositorn (rotate), huvudtråden får vara upptagen */
.lk-laddpaus { gap: 10px; padding: 10px 18px 10px 14px; color: var(--fg-3); pointer-events: none; }
.lk-laddpaus__ring { flex: none; width: 16px; height: 16px; animation: lk-snurr .9s linear infinite; will-change: rotate; }
@media (prefers-reduced-motion: reduce) { .lk-laddpaus__ring { animation-duration: 2.4s; } }
/* will-change: eget lager; annars ritar Chrome om kortglasets blur bara under tooltipen och en lodrät skarv syns i kortet */
.lk-tips { position: fixed; z-index: 210; will-change: transform; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--s-deep); color: var(--fg-1); font: var(--type-meta); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.28); animation: lk-tips-in 140ms var(--lk-ease) 250ms backwards; }
.lk-tips[hidden] { display: none; }
.lk-tips--hoger { translate: 0 -50%; } .lk-tips--vanster { translate: -100% -50%; } .lk-tips--upp { translate: -50% -100%; }
@keyframes lk-tips-in { from { opacity: 0; } }
:is(.lk-tips, .lk-hjalp) kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--w-12); background: var(--w-08); color: var(--fg-3); font: var(--type-kicker); }
.lk-meny.lk-ctx { position: fixed; right: auto; bottom: auto; width: 220px; z-index: 150; animation: lk-ctx-in 160ms var(--lk-ease); transform-origin: 0 0; }
@keyframes lk-ctx-in { from { opacity: 0; scale: .94; } }
/* §mätning (verktyg/matning.js): värdet stort, raderna som en tabell, höjdprofilen i Okabe-Ito orange */
.lk-vt__varde { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--fg-1); min-height: 1.2em; }
.lk-vt__tips { margin: 4px 0 12px; font: var(--type-meta); color: var(--fg-3); }
.lk-vt__rader { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.lk-vt__rader dt { color: var(--fg-3); } .lk-vt__rader dd { margin: 0; text-align: right; color: var(--fg-1); }
/* Mät yta, sluten: områdeskortets form ur mockup/omrade.css (kicker, tal i rutor, grupperad lista) */
/* Markera område: kortet ur skal-lab/mockup/omrade.css, bara kortets regler, under .om (verktyg/omrade.js). Egna tokens som mockupen */
.om { --fg1: #f4f1ec; --fg3: #d8d3cb; --fg6: #9a958d; --fg8: #6f6b65; --glas: rgba(24, 22, 20, .72); --glas-k: rgba(255, 255, 255, .1);
  --rad: rgba(255, 255, 255, .05); --rad-h: rgba(255, 255, 255, .09); --accent: #56b4e9; --accent-a: rgba(86, 180, 233, .18);
  --kraft: #e69f00; --bygg: #009e73; --hog: #e69f00; --t: 220ms; --ease: cubic-bezier(.22, .8, .28, 1); color: var(--fg1); }
[data-theme="light"] .om { --fg1: #0a182a; --fg3: #24303c; --fg6: #626b74; --fg8: #8b929a; --glas: rgba(255, 255, 255, .78); --glas-k: rgba(11, 31, 58, .08);
  --rad: rgba(11, 31, 58, .04); --rad-h: rgba(11, 31, 58, .08); --accent: #0072b2; --accent-a: rgba(0, 114, 178, .14); --hog: #b35806; }
.om button { font: inherit; color: inherit; cursor: pointer; }
.om-topp { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: start; }
.om-rund { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--rad); }
.om-rund > :is(svg, i) { width: 18px; height: 18px; }
.om-titel { margin: 0; font: 600 24px/1.15 'Fraunces', Georgia, serif; letter-spacing: -.01em; outline: none; }
.om-titel[contenteditable]:focus { outline: 2px solid var(--accent-a); border-radius: 6px; }
.om-sub { margin: 4px 0 0; color: var(--fg6); font-size: 13px; font-variant-numeric: tabular-nums; }
.om-attrapp { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--fg8); color: var(--fg8); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.om-brickor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 6px; }
.om-bricka { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border: 0; border-radius: 14px; background: var(--rad); font-size: 12.5px; font-weight: 600; color: var(--fg3); transition: background var(--t) var(--ease); }
.om-bricka > :is(svg, i) { width: 20px; height: 20px; }
.om-bricka:hover { background: var(--rad-h); }
.om-bricka[aria-pressed="true"] { background: var(--accent); color: #fff; }
.om-kicker { margin: 22px 4px 8px; color: var(--fg6); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.om-tal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.om-tal div { padding: 12px; border-radius: 14px; background: var(--rad); }
.om-tal b { display: block; font: 600 20px/1.1 'Inter Tight', 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.om-tal span { color: var(--fg6); font-size: 12px; }
.om-tal em { font-style: normal; color: var(--fg3); }
.om-lista { border-radius: 14px; background: var(--rad); overflow: hidden; }
.om-rad { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 11px 12px; border: 0; background: none; text-align: left; transition: background var(--t) var(--ease); }
.om-rad + .om-rad { box-shadow: inset 0 .5px 0 var(--glas-k); }
button.om-rad:hover { background: var(--rad-h); }
.om-rad[aria-pressed="true"] { background: var(--accent-a); }
.om-rad > :is(svg, i) { width: 20px; height: 20px; color: var(--fg6); justify-self: center; }
.om-rad__t { font-size: 14px; font-weight: 550; color: var(--fg1); }
.om-rad__m { display: block; color: var(--fg6); font-size: 12px; font-weight: 400; }
.om-rad__v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg3); }
.om-rad--varning .om-rad__v { color: var(--kraft); }
.om-rad--ok .om-rad__v { color: var(--fg6); font-weight: 500; }
.om .om-prick { width: 10px; height: 10px; border-radius: 3px; }
.om-staplar { display: grid; gap: 7px; padding: 12px; border-radius: 14px; background: var(--rad); }
.om-stapel { display: grid; grid-template-columns: 74px 1fr 42px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.om-stapel i { display: block; height: 8px; border-radius: 4px; transition: width 320ms var(--ease); }
.om-stapel span:last-child { text-align: right; color: var(--fg6); }
.om-bygg { padding: 14px 12px; border-radius: 14px; background: var(--rad); }
.om-bygg__tal { display: flex; align-items: baseline; gap: 8px; }
.om-bygg__tal b { font: 600 30px/1 'Inter Tight', 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--bygg); }
.om-bygg__tal span { color: var(--fg6); font-size: 13px; }
.om-bygg__bar { height: 8px; margin: 12px 0 14px; border-radius: 4px; background: var(--rad-h); overflow: hidden; }
.om-bygg__bar i { display: block; height: 100%; background: var(--bygg); transition: width 320ms var(--ease); }
.om-krav { display: grid; gap: 2px; }
.om-krav label { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 2px; font-size: 13.5px; color: var(--fg3); cursor: pointer; }
.om-krav input[type="checkbox"] { appearance: none; width: 38px; height: 23px; margin: 0; border-radius: 999px; background: var(--rad-h); position: relative; cursor: pointer; transition: background var(--t); flex: none; }
.om-krav input[type="checkbox"]::after { content: ''; position: absolute; left: 2px; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--t) var(--ease); }
.om-krav input:checked { background: var(--bygg); }
.om-krav input:checked::after { transform: translateX(15px); }
.om-krav input[type="range"] { width: 120px; accent-color: var(--bygg); }
.om-fot { margin: 18px 4px 0; color: var(--fg8); font-size: 12px; }
.om-seg { display: flex; padding: 3px; gap: 2px; border-radius: 14px; background: var(--rad); }
.om-seg button { display: flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 11px; padding: 7px 11px; font-size: 13px; font-weight: 600; color: var(--fg6); }
.om-seg button[aria-selected="true"] { background: var(--glas); color: var(--fg1); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.om-flikar { margin: 16px 0 2px; }
.om-flikar button, .om-seg--val button { flex: 1; justify-content: center; padding: 7px 4px; }
.om-flikar button { font-size: 13.5px; }
.om-seg--val { margin-bottom: 10px; }
.om-niva { width: 100%; margin: 14px 0 6px; accent-color: var(--accent); }
.om-niva__skala { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fg6); font-variant-numeric: tabular-nums; }
.om .om-lank { border: 0; border-radius: 999px; padding: 5px 11px; background: var(--accent-a); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.om-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 4px 0; font-size: 12.5px; color: var(--fg3); }
.om-legend span { display: flex; align-items: center; gap: 6px; }
.om-legend i { width: 12px; height: 12px; border-radius: 3px; }
.om-netto { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--accent-a); font-size: 13.5px; }
.om-netto > :is(svg, i) { width: 22px; height: 22px; color: var(--accent); }
.om-netto b { font-variant-numeric: tabular-nums; }
.om-netto + .om-lista { margin-top: 8px; }
.om-utm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.om-utm div { padding: 12px 10px; border-radius: 14px; background: var(--rad); }
.om-utm b { display: block; font: 600 20px/1.1 'Inter Tight', 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--hog); }
.om-utm span { font-size: 12px; color: var(--fg6); }
.om-utm-tom { margin: 0 4px; color: var(--fg6); font-size: 13px; }
.om-sok { display: flex; align-items: center; gap: 8px; height: 40px; margin-top: 18px; padding: 0 12px; border-radius: 12px; background: var(--rad); color: var(--fg6); }
.om-sok > :is(svg, i) { width: 17px; height: 17px; flex: none; }
.om-sok input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg1); font: 14px 'Inter', sans-serif; outline: none; }
.om-rad--u { grid-template-columns: 26px 1fr auto 32px; }
.om-rad--u .om-rad__v { display: grid; justify-items: end; gap: 1px; }
.om-chip { font-size: 11px; font-weight: 600; color: var(--fg8); white-space: nowrap; }
.om-chip--hog { color: var(--hog); }
.om-chip--lag { color: var(--accent); }
.om-oga { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--fg8); }
.om-oga > :is(svg, i) { width: 18px; height: 18px; }
.om-oga[aria-pressed="true"] { color: var(--accent); background: var(--accent-a); }
.om-falt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.om-falt label { display: grid; gap: 4px; font-size: 12px; color: var(--fg6); }
.om-falt input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--rad-h); color: var(--fg1); font: 600 14px 'Inter', sans-serif; font-variant-numeric: tabular-nums; outline: none; }
.om-falt input:focus { box-shadow: 0 0 0 2px var(--accent); }
.om-falt .om-hel { grid-column: 1 / -1; }
.om-falt input[type="range"] { padding: 0; background: none; accent-color: var(--accent); }
.om-profil { padding: 12px; border-radius: 14px; background: var(--rad); }
.om-profil svg { display: block; width: 100%; height: auto; }
.om-profil .om-pm { fill: none; stroke: var(--fg1); stroke-width: 1.5; }
.om-profil .om-pberg { fill: none; stroke: #d55e00; stroke-width: 1.2; stroke-dasharray: 3 3; }
.om-profil .om-pn { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.om-profil .om-ps { fill: #f1a340; opacity: .55; }
.om-profil .om-pf { fill: #998ec3; opacity: .55; }
.om-profil text { fill: var(--fg6); stroke: none; font: 500 10px 'Inter', sans-serif; }
.om-profil__fot { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--fg6); font-variant-numeric: tabular-nums; }
.om-restid { display: grid; grid-template-columns: 1fr 50px 50px 50px; gap: 0 6px; align-items: center; padding: 6px 12px; border-radius: 14px; background: var(--rad); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.om-restid > * { padding: 7px 0; }
.om-restid b { text-align: right; font-weight: 600; color: var(--fg3); }
.om-restid i { font-style: normal; text-align: right; font-size: 11.5px; color: var(--fg6); }
.om-restid small { display: block; font-size: 12px; color: var(--fg6); }
.lk-vt__profil { margin: 0 0 12px; min-height: 72px; }
/* Klar/Ångra/Rensa direkt under värdet; nördläget visar resten (vägval, GPX, profilens knappar, legend och tabeller; för Mät avstånd hela profilen) */
.lk-vt > .lk-atg { margin: 0 0 12px; }
.lk-vt__nord { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--w-08); color: var(--fg-3); font: var(--type-chip); cursor: pointer; }
.lk-vt__nord[aria-pressed="true"] { background: var(--aw-20); color: var(--a-2b); }
.lk-vt__nord svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk-vt:not(.lk-vt--nord) :is([data-vt-led], [data-vt-gpx-in], .lk-vt__profil .lk-sekt__knappar, .lk-sekt__lut, .lk-sekt__tabeller),
.lk-vt[data-typ="avstand"]:not(.lk-vt--nord) .lk-vt__profil { display: none; }
.lk-vt__profil svg { display: block; width: 100%; height: 72px; margin-bottom: 10px; }
.lk-vt__profil svg.lk-sekt { height: auto; color: var(--fg-2); overflow: visible; }
.lk-sekt__rubrik { margin: 14px 0 6px; font: var(--type-meta); font-weight: 600; color: var(--fg-1); } .lk-sekt__rubrik small { font-weight: 400; color: var(--fg-3); }
/* Förstora = kortets helskärm; där ritas grafen om i en bredare ruta och tabellerna läggs i spalter */
.lk-vt__profil { position: relative; }
.lk-sekt__hl { opacity: 0; pointer-events: none; } svg.lk-sekt.hl .lk-sekt__hl { opacity: .7; }
.lk-sekt__info { position: absolute; z-index: 3; pointer-events: none; display: grid; gap: 2px; max-width: min(250px, 72%); padding: 7px 10px; border-radius: 10px; background: var(--s-deep); color: var(--fg-2); font: var(--type-meta); box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.lk-sekt__info b { color: var(--fg-1); font-weight: 600; } .lk-sekt__info.las { outline: 1px solid var(--w-12); }
.lk-sekt__lut { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font: var(--type-meta); color: var(--fg-3); }
.lk-sekt__lut span { display: inline-flex; align-items: center; gap: 4px; } .lk-sekt__lut i { width: 10px; height: 4px; border-radius: 2px; }
.lk-sekt-prick { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #e69f00; box-shadow: 0 1px 4px rgb(0 0 0 / .35); pointer-events: none; }
.lk-sekt__knappar { flex-wrap: wrap; }
.lk-sekt__knappar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 8px; font: var(--type-meta); color: var(--fg-3); }
.lk-sekt__knappar span { margin-right: auto; }
svg.lk-sekt { touch-action: pan-y; cursor: crosshair; } svg.lk-sekt:focus-visible { outline: 2px solid var(--fg-3); outline-offset: 2px; border-radius: 4px; }
.lk-sekt__stor { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 0; border-radius: 999px; background: var(--w-08); color: var(--fg-3); font: var(--type-meta); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.lk-sekt__stor:hover { background: var(--w-10); }
.lk-sekt__stor:is([aria-pressed="true"], [aria-checked="true"]) { background: var(--w-14); color: var(--fg-1); }   /* valt läge: neutralt som railen, ingen orange */
.lk-sekt__reglage { justify-content: flex-start; }
.lk-sekt__niva, .lk-sekt__fart { display: flex; align-items: center; gap: 4px; } .lk-sekt__niva { margin-right: auto; }
.lk-sekt__niva input { width: 96px; accent-color: #0072b2; } .lk-sekt__niva svg, .lk-sekt__fart svg { width: 14px; height: 14px; }
.lk-sekt__fart input { width: 3.4em; padding: 3px 6px; border: 0; border-radius: 8px; background: var(--w-08); color: var(--fg-1); font: var(--type-meta); }
.lk-sekt__sparade ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .lk-sekt__sparade li { display: flex; align-items: center; gap: 4px; }
.lk-sekt__sp { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--fg-1); font: var(--type-label); text-align: left; cursor: pointer; }
.lk-sekt__sp:hover { background: var(--w-08); } .lk-sekt__sp b { font-weight: 600; } .lk-sekt__sp small { color: var(--fg-3); font: var(--type-meta); }
.lk-vt__rutt { justify-content: flex-start; margin: 4px 0 8px; } .lk-vt__rutt span { margin-right: 2px; }
.lk-sekt__stor svg { width: 14px; height: 14px; margin: 0; }   /* mot .lk-vt__profil svg (grafens 100 %-bredd) */
.lk-kort.full .lk-sekt__tabeller { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 24px; align-items: start; }
.lk-sekt__prick { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.lk-vt__yta { fill: color-mix(in srgb, #e69f00 28%, transparent); }
.lk-vt__kurva { fill: none; stroke: #e69f00; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* trafikprofil/-scenario (verktyg/trafik.js): text och staplar i gruppernas indrag, raderna som överallt; --tf = platsens färg (A = accent, B = orange) */
.lk-tf > :is(p, svg, dl, .lk-tf__axel, .lk-tf__j, .lk-tf__jstap, .lk-tf__antal), .lk-tf .lk-vt__tips { margin-inline: 10px; }
.lk-tf__kvitto { margin-top: 8px; } .lk-tf__kvitto:empty { display: none; }
.lk-tf__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
.lk-tf__chips .lk-chip { display: inline-flex; align-items: center; gap: 6px; }
.lk-tf__chips .lk-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk-tf__staplar { display: block; width: calc(100% - 20px); height: 64px; margin-top: 4px; }
.lk-tf__staplar rect { fill: color-mix(in srgb, var(--tf, var(--a-2b)) 32%, transparent); } .lk-tf__staplar rect.topp { fill: var(--tf, var(--a-2b)); }
.lk-tf__axel { display: flex; justify-content: space-between; margin-bottom: 8px; font: var(--type-meta); color: var(--fg-7); font-variant-numeric: tabular-nums; }
.lk-tf__j { display: grid; grid-template-columns: 1fr repeat(var(--n, 2), minmax(44px, 64px)); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--w-06); font: var(--type-meta); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.lk-tf__j > span:not(:first-child) { text-align: right; color: var(--fg-1); }
.lk-tf__j--huvud { font: var(--type-kicker); color: var(--fg-6); border: 0; }
.lk-tf__j--huvud > span { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.lk-tf__bokst { display: inline-flex; align-items: center; padding: 2px 4px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.lk-tf__bokst:hover { background: var(--w-06); color: var(--fg-1); }
.lk-tf__j--namn { padding-top: 0; border: 0; }
.lk-tf__j--namn > span:not(:first-child) { overflow: hidden; color: var(--fg-5); font: var(--type-label); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lk-tf__plats { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--fg-2); font: var(--type-label); }
.lk-tf__plats svg { width: 14px; height: 14px; flex: none; color: var(--fg-5); }
[data-tf-hl] { cursor: default; }
[data-tf-hl]:hover { background: var(--w-06); }
.lk-resa__forslag .lab-rad:focus-visible { background: var(--w-10); outline: 0; }
.lk-tf__bort { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg-6); cursor: pointer; }
.lk-tf__bort:hover, .lk-tf__bort:focus-visible { background: var(--w-06); color: var(--fg-1); }
.lk-tf__bort svg { width: 12px; height: 12px; }
/* Ljudmiljö: dag- och nattindex sida vid sida */
.lk-lm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 10px 4px; }
.lk-lm small { display: block; font: var(--type-kicker); color: var(--fg-6); }
.lk-lm b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--fg-1); }
.lk-tf__prick { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tf); }
.lk-tf__jstap { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; margin-top: 10px; font: var(--type-meta); color: var(--fg-6); }
.lk-tf__jstap .lk-tf__staplar { width: 100%; height: 48px; }
.lk-tf__m { display: block; font: var(--type-meta); color: var(--fg-6); }
.lk-tf__op { color: var(--tf); }
.lk-tf__antal { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: var(--type-meta); color: var(--fg-4); }
.lk-tf__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 10px 6px; font: var(--type-meta); color: var(--fg-4); }
.lk-tf__skala { width: 72px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #fee391, #ec7014, #8c2d04); }
.lk-tf__diff { margin-top: 2px; font: var(--type-meta); font-weight: 600; color: var(--tf); }
/* hovringsbubblan i kartan (verktyg/trafik.js tsHover): följer pekaren, tar aldrig emot klick */
.lk-tf-tip { position: absolute; left: 0; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 8px 10px; border-radius: 10px; pointer-events: none;
  background: color-mix(in srgb, var(--s-deep) 90%, transparent); backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgb(0 0 0 / .25); font: var(--type-meta); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.lk-tf-tip[hidden] { display: none; } .lk-tf-tip b { color: var(--fg-1); } .lk-tf-tip__d { font-weight: 600; color: var(--tf); }
.lk-tf__antal :is(input, select) { width: 96px; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--w-08); color: var(--fg-1); font: inherit; font-variant-numeric: tabular-nums; }
/* skalstocken: glaspill nere till vänster, tonar in och ut */
.lk-skala { position: fixed; left: calc(var(--lk-rail-w, 0px) + var(--lk-inset) * 2); bottom: var(--lk-inset); z-index: 40; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: var(--type-chip); color: var(--fg-1); font-variant-numeric: tabular-nums; pointer-events: none; transition: opacity var(--lk-t) var(--lk-ease); }
.lk-skala[hidden] { display: flex; opacity: 0; }
.lk-skala i { display: block; height: 6px; border: 2px solid currentColor; border-top: 0; transition: width 120ms linear; }
.lk-skala small { color: var(--fg-3); font: inherit; }
@media (max-width: 767px) { .lk-skala { left: var(--lk-inset); bottom: calc(var(--lk-inset) + 96px); } }
.lk-hjalp { width: min(420px, calc(100vw - 32px)); padding: 0 0 16px; border: 1px solid var(--w-12); border-radius: 18px; background: var(--s-deep); color: var(--fg-1); }
.lk-hjalp[open] { animation: lk-hjalp-in 260ms var(--lk-ease); }
@keyframes lk-hjalp-in { from { opacity: 0; translate: 0 12px; scale: .97; } }
.lk-hjalp::backdrop { background: rgba(0,0,0,.4); }
.lk-hjalp h2 { margin: 0; flex: 1; font: var(--type-panel-title); }
.lk-hjalp form { margin: 0; }
.lk-hjalp dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 4px 16px 12px; align-items: center; }
.lk-hjalp dt { display: flex; gap: 4px; } .lk-hjalp dd { margin: 0; font: var(--type-label); color: var(--fg-3); }
.lk-hjalp p { margin: 0 16px; font: var(--type-meta); color: var(--fg-6); }
.lk-tomt { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--fg-5); }
.lk-tomt svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-7); margin-bottom: 4px; }
.lk-tomt strong { font: var(--type-label); color: var(--fg-3); } .lk-tomt small { font: var(--type-meta); max-width: 260px; }
.lk-skelett { display: grid; grid-template-columns: 28px 1fr 40px; gap: 12px; align-items: center; padding: 14px 8px; }
.lk-skelett i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--w-05) 30%, var(--w-10) 50%, var(--w-05) 70%) 0 0 / 300% 100%; animation: lk-skimmer 1.1s linear infinite; }
.lk-skelett i:nth-child(2) { width: 70%; }
@keyframes lk-skimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.lk-rad { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.lk-rad__x { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--fg-6); cursor: pointer; opacity: .55; transition: opacity var(--lk-t), background var(--lk-t); }
.lk-rad:hover .lk-rad__x, .lk-rad__x:focus-visible { opacity: 1; } .lk-rad__x:hover { background: var(--w-08); }
:is(.lk-rad__x, .lk-atg, .lab-rad__n) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk-nalfarg { color: var(--pf); }
.lk-rad-topp { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.lk-knapp { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--w-08); color: var(--fg-3); font: var(--type-chip); cursor: pointer; }
.lk-knapp:hover { background: var(--w-10); } .lk-knapp--liten { padding: 4px 10px; }
.lk-atg { display: flex; gap: 8px; margin: 10px 12px 4px; }
.lk-atg :is(button, a) { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--w-08); color: var(--fg-3); font: var(--type-label); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.lk-atg :is(button, a):hover { background: var(--w-10); }
.lk-atg button[aria-pressed="true"] { background: var(--aw-20); color: var(--a-2b); }
.lk-atg [data-fav][aria-pressed="true"] svg { fill: currentColor; animation: lk-bump 420ms cubic-bezier(.34,1.56,.64,1); }
.lk-atg .lk-fara { color: #d55e00; }
.lk-farger { display: flex; gap: 10px; padding: 6px 12px 4px; }
.lk-farger button { width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--s-deep); background: var(--f); cursor: pointer; transition: box-shadow var(--lk-t), scale var(--lk-t) var(--lk-ease); }
.lk-farger button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg-1); scale: 1.08; }
.lk-nal__koord { margin: 4px 12px; font: var(--type-label); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.lk-nal__tips { margin: 10px 12px; font: var(--type-meta); color: var(--fg-7); }
/* platser = rader som växer nedåt, nyckeltal = kolumner som rullar i sidled när de inte ryms */
/* rullar i båda led: rubrikraden (nyckeltalen) står kvar överst när platserna inte ryms på höjden */
.lk-jamfor-rull { overflow: auto; max-height: min(62dvh, 560px); margin: 8px 12px; scrollbar-width: thin; }
.lk-jamfor { display: grid; grid-template-columns: var(--nk, 112px) repeat(var(--k), minmax(96px, 1fr)); }   /* fast: fr växte till hela namnets bredd; Jämför 136 px (--nk) för krysset */
.lk-jamfor__horn { color: var(--fg-7); font: var(--type-meta) !important; display: flex; align-items: flex-end; }
.lk-jamfor > * { padding: 10px 6px; border-bottom: 1px solid var(--w-08); font: var(--type-label); }
.lk-jamfor__h { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* namnkolumnen står kvar när nyckeltalen rullar i sidled, utan egen bakgrund: cellerna tonas bort mot dess kant i stället; helt genomskinlig vid kanten, i vila (scrollLeft 0) ingen ton alls
   (karta.js jfTona sätter --m = hur många px av cellen som ligger under namnen) */
.lk-jamfor { position: relative; width: max-content; min-width: 100%; }   /* lika bred som kolumnerna, annars når sticky-namnen tabellens kant före rullningens slut och glider vänster */
.lk-jamfor :is(.lk-jamfor__h, .lk-jamfor__horn) { position: sticky; left: 0; z-index: 1; }
.lk-jamfor :is(.lk-jamfor__t, .lk-jamfor__horn) { position: sticky; top: 0; z-index: 2; }
.lk-jamfor .lk-jamfor__horn { z-index: 3; }
/* samma ton på höjden: det som glider in under rubrikraden (--mt) */
.lk-jamfor :is(.lk-jamfor__v, .lk-jamfor__t, .lk-jamfor__h) { --gx: linear-gradient(to right, transparent var(--m, -14px), #000 calc(var(--m, -14px) + 14px)); --gy: linear-gradient(to bottom, transparent var(--mt, -14px), #000 calc(var(--mt, -14px) + 14px));
  -webkit-mask-image: var(--gx), var(--gy); mask-image: var(--gx), var(--gy); -webkit-mask-composite: source-in; mask-composite: intersect; }
.lk-jamfor__h > button:first-child { flex: 1; min-width: 0; border: 0; background: none; padding: 0; color: var(--a-2b); font: var(--type-label); font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-jamfor__h .lk-rad__x { width: 24px; height: 24px; }
.lk-jamfor__t { color: var(--fg-6); font: var(--type-meta); align-self: stretch; border: 0; border-bottom: 1px solid var(--w-08); background: none; text-align: left; vertical-align: bottom; cursor: pointer; border-radius: 8px 8px 0 0; }
.lk-jamfor__t:hover { color: var(--fg-3); }
.lk-jamfor__t[aria-pressed="true"] { color: var(--a-2b); background: var(--aw-20); }
.lk-jamfor__v { font-variant-numeric: tabular-nums; }
/* platsens nyckel: samma kant och mönster som ytan i kartan (karta.js jfMon) */
.lk-jamfor__h::before { content: ''; flex: none; width: 18px; height: 18px; margin-right: 6px; box-sizing: border-box; border: 2.5px solid var(--jf, transparent); border-radius: 5px;
  outline: 1px solid #141414; background: var(--jfm), #808080; }
.lk-jamfor__h > :is(span, button:first-child) { white-space: normal !important; overflow-wrap: break-word; line-height: 1.2; }
/* långa namn kapas efter två rader (hela namnet i title) */
.lk-jamfor__h > :is(span, button:first-child) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.lk-jamfor__h > span { flex: 1; min-width: 0; font-weight: 600; }
.lk-jamfor__s { display: block; height: 4px; margin-top: 5px; border-radius: 2px; width: var(--w); background: var(--jf); opacity: .7; }
.lk-jamfor :is(.lk-jamfor__t, .lk-jamfor__v) small { display: block; margin-top: 2px; font: var(--type-meta); font-size: 11px; color: var(--fg-7); }
/* gynnsammast: Okabe-Ito blågrön ton + bock (aldrig rött för "sämre", aldrig bara färg) */
.lk-jamfor__v.bra { background: rgb(0 158 115 / .16); font-weight: 700; border-radius: 8px; }
.lk-jamfor__v.bra > i { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; color: #009e73; }
.lk-jamfor__fot { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 12px 4px; }
.lk-jamfor__fot [aria-expanded="true"] { background: var(--aw-20); color: var(--a-2b); }
.lk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lk-analys { margin: 6px 12px 10px; display: grid; gap: 8px; }
.lk-analys p { margin: 0; padding-left: 10px; border-left: 3px solid var(--jf, var(--w-08)); font: var(--type-label); color: var(--fg-3); }
.lk-analys b { color: var(--fg-1); }
.lk-sok__traffar mark { background: var(--aw-20); color: var(--a-2b); border-radius: 3px; }
/* Kartval: bocken i hörnet, poppar på lagret som just tändes */
.lk-kort__val { position: relative; }
.lk-kort__bock { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 999px; background: var(--a-4); color: var(--on-accent); opacity: 0; scale: .4; transition: opacity var(--lk-t), scale var(--lk-t) var(--lk-ease); }
.lk-kort__val .lk-kort__bock svg { width: 11px; height: 11px; stroke-width: 3; }
.lk-kort__val.on .lk-kort__bock { opacity: 1; scale: 1; }
.lk-kort__val.nytt .lk-kort__bock { animation: lk-bump 420ms cubic-bezier(.34,1.56,.64,1); }
/* pilen i andra hörnet öppnar lagrets eget kort (karta.js lagerKort): syns på tända brickor, på de andra vid hover. Brickan + pilen = .lk-kort__cell (knapp i knapp går inte) */
.lk-kort__cell { position: relative; display: grid; }
.lk-kort__mer { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--fg-6); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--lk-t), background var(--lk-t); }   /* 24 px = WCAG 2.5.8, samma mittpunkt som förut */
.lk-kort__mer svg { width: 14px; height: 14px; rotate: -90deg; }   /* ponytail: chevron-down vriden till ›, se legenden */
.lk-kort__val.on + .lk-kort__mer { color: var(--a-2b); }
:is(.lk-kort__cell:hover, .lk-kort__cell:focus-within) .lk-kort__mer, .lk-kort__val.on + .lk-kort__mer { opacity: 1; pointer-events: auto; }
.lk-kort__mer:hover { background: var(--w-12); }
/* vybyte: innehållet glider in och raderna kaskaderar (karta.js fyll() sätter .lk-in; rita() tar bort den) */
.lk-in { animation: lk-kropp-in 280ms var(--lk-ease); }
/* skelett → rader (karta.js fyll): kroppen glider inte in en gång till, skelettet ligger ovanpå och tonar ut medan raderna kaskaderar */
.lk-in.lk-in--mjuk { animation: none; }
.lk-in--mjuk :is(.lab-rader > .lab-rad, .lk-rad, .lk-kort__cell, .lk-jamfor__t, .lk-jamfor__v) { animation-duration: 480ms; animation-delay: calc(min(var(--i, 0), 12) * 45ms + 240ms); }
.lk-skelett-ut { position: absolute; z-index: 1; pointer-events: none; }
.lk-in :is(.lab-rader > .lab-rad, .lk-rad, .lk-kort__cell, .lk-jamfor__t, .lk-jamfor__v) { animation: lk-rad-in 360ms var(--lk-ease) backwards; animation-delay: calc(min(var(--i, 0), 12) * 28ms + 60ms); }
/* vidare-raden sist: glider in när radernas trappa (max 12 × 28 ms + 60) landat, lite längre väg så den märks som kortets slut */
.lk-in .lk-vidare { animation: lk-vidare-in 460ms var(--lk-ease) 400ms backwards; }
@keyframes lk-vidare-in { from { opacity: 0; translate: 0 14px; scale: .98; } }
@keyframes lk-kropp-in { from { opacity: 0; translate: 0 6px; } }
@keyframes lk-rad-in { from { opacity: 0; translate: 0 8px; } }
/* sökträffarna (karta.js sokRita): bara rader som är nya sedan förra tangenten glider in, i tur och ordning */
.lk-sok__traffar .lk-rad-ny { animation: lk-rad-in 320ms var(--lk-ease) backwards; animation-delay: calc(min(var(--i, 0), 12) * 24ms); }
@media (max-width: 1100px) { body { --lk-toast-b: calc(var(--lk-inset) + 64px + var(--lk-sa-b)); } }
@media (prefers-reduced-motion: reduce) {
  .lk-langtryck, .lk-langtryck circle, .lk-prick--landar > *, .lk-ikn__badge.bump, .lk-toast, .lk-tips, .lk-ctx, .lk-hjalp, .lk-skala, .lk-skala i, .lk-hojdmatare, .lk-skelett i, .lk-atg svg, .lk-kort__bock, .lk-farger button, .lk-in, .lk-in *, .lk-rad-ny { animation: none !important; transition: none !important; }
  .lk-langtryck circle + circle { stroke-dashoffset: 0; }
}
/* iPaden vrids: karta.js sätter lk-vrid en bildruta ⇒ §inträdet spelas om, kontrollerna glider in på sina nya platser i stället för att hoppa dit */
body.lk-vrid :is(.lk-rail, .lk-rail > *, .lk-brand, .lk-kort, .lk-flikar, .lk-ark, .lk-legend, .lk-kredit, .lk-ctrl > *, .lk-ctrl--ner .lk-ur, .lk-ctrl--ner .lk-3d) { animation-name: none !important; }

/* telefonen är bara stående: liggande täcks kartan av en vrid-skylt (en webbsida kan inte låsa orienteringen, karta.js försöker ändå) */
.lk-vridskylt { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body > :not(.lk-vridskylt) { visibility: hidden !important; }
  /* §vrid-skylten: telefonen som vrids upp i loop + tips om telefonens eget rotationslås (det enda som verkligen låser) */
  .lk-vridskylt { position: fixed; inset: 0; z-index: 2147483647; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: var(--s-deep); color: var(--fg-1); text-align: center; animation: lk-vridskylt-in 360ms var(--lk-ease) both; }
  .lk-vridskylt svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .lk-vridskylt__ikon { width: 64px; height: 64px; color: var(--a-4); overflow: visible; }
  .lk-vridskylt__tel { transform-origin: 32px 32px; animation: lk-vridskylt-tel 2.6s var(--lk-ease) infinite; }
  .lk-vridskylt__pil { opacity: .45; }
  .lk-vridskylt b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
  .lk-vridskylt p { display: flex; align-items: flex-start; gap: 12px; max-width: 46ch; margin: 6px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--w-07, rgba(128, 128, 128, .12));
    color: var(--fg-3); font-size: 14px; line-height: 1.45; text-align: left; }
  .lk-vridskylt p svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--a-4); }
  .lk-vridskylt em { font-style: normal; font-weight: 600; color: var(--fg-1); }
}
/* telefonen ligger, vrids upp till stående, vilar, börjar om */
@keyframes lk-vridskylt-tel { 0%, 15% { rotate: -90deg; } 55%, 100% { rotate: 0deg; } }
@keyframes lk-vridskylt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lk-vridskylt__tel { animation: none; } .lk-vridskylt { animation: none; } }
[data-helskarm][hidden] { display: none !important; }   /* karta.js: webbläsaren saknar helskärm (iPhone) */

/* tangentbordsfokus syns alltid (pekare/touch får ingen ring) */
:is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--a-4); outline-offset: 2px; }
/* §seg (?seg=1, karta.js if (seg)): Apple Maps laddrutnät. Varje ruta: ::before = tomt rutnät som tonar bort vid --in,
   rutan själv suddar kartan bakom (låg upplösning) tills --skarp. Etiketter/nålar/lager dolda under tiden (lk-seg-dold) */
.lk-seg { position: absolute; inset: 0; z-index: 3; display: grid; grid-auto-rows: 256px; pointer-events: none; overflow: hidden; }
.lk-seg > i { position: relative; backdrop-filter: blur(14px) saturate(.7); -webkit-backdrop-filter: blur(14px) saturate(.7);
  animation: lk-seg-skarp 700ms var(--lk-ease) var(--skarp) forwards; }
.lk-seg > i::before { content: ''; position: absolute; inset: 0; background-color: #26272a;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px; animation: lk-seg-in 420ms var(--lk-ease) var(--in) forwards; }
[data-theme="light"] .lk-seg > i::before { background-color: #f3f1ec;
  background-image: linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px); }
@keyframes lk-seg-in { to { opacity: 0; } }
@keyframes lk-seg-skarp { to { backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); } }
.lk-karta.lk-seg-dold > :not(.lk-seg, .lk-langtryck) { opacity: 0 !important; }
/* laddar-ringen i kreditpillret: tonar fram ÖVER ©-tecknet när body.lk-laddar (karta.js: MapLibres dataloading → idle), står still när den
   är dold. Utanför flödet (absolut) med fast mått: en breddanimation här ändrade pillrets storlek i ~11 bildrutor per laddning, och glas.js
   byggde då om SVG-linsen (toDataURL) i varje ruta, mitt i gesten (mätt 2026-10-06, 1,9 s av 46 s CPU i en pan på 2742×984) */
.lk-kredit__snurr { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; opacity: 0;
  animation: lk-snurr .8s linear infinite paused; transition: opacity 200ms var(--lk-ease); }
.lk-kredit__i { transition: opacity 200ms var(--lk-ease); }
body.lk-laddar .lk-kredit__snurr { opacity: .8; animation-play-state: running; }
body.lk-laddar .lk-kredit__i { opacity: 0; }
@keyframes lk-snurr { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .lk-kredit__snurr { animation-duration: 2.4s; } }
/* kortets väg vidare till en egen sida (vidare() i karta.js): en rad sist i kortet, ↗ = lämnar kartan (samma språk som hamburgarmenyn) */
/* sticky: flyter längst ner i kortets kropp medan raderna skrollar under, samma glasbit som listfiltrets fot (.lk-sf__fot) */
.lk-vidare { position: sticky; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 10px 12px 8px; padding: 12px 14px; border-radius: 16px;
  --fotbg: rgba(38, 34, 30, .82); background: var(--fotbg); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--w-10), 0 10px 28px rgba(0, 0, 0, .35); color: inherit; text-decoration: none; transition: box-shadow var(--lk-t) var(--lk-ease); }
[data-theme="light"] .lk-vidare { --fotbg: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .14); }
.lk-vidare:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--w-18, rgba(128, 128, 128, .4)), 0 10px 28px rgba(0, 0, 0, .35); outline: 0; }
.lk-vidare:focus-visible { outline: 2px solid var(--a-4); outline-offset: 2px; }
.lk-kort.full .lk-vidare { position: static; }   /* helskärm: klistrad låg den över rad 13 med rader på sidorna; sist i listan räcker */
.lk-vidare > span { flex: 1; min-width: 0; }
.lk-vidare b { display: block; font-weight: 500; }
.lk-vidare small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-6); }
.lk-vidare svg, .lk-vidare i { flex: none; width: 18px; height: 18px; color: var(--a-4); }
.lk-vidare > :last-child { width: 16px; height: 16px; color: var(--fg-7); }
/* Listans Ladda fler: centrerad under raderna, före vidare-rutan */
.lk-laddafler { display: flex; justify-content: center; margin: 6px 12px 2px; }
.lk-laddafler [data-auto] { background: none; color: var(--fg-7); pointer-events: none; } /* efter första klicket: bara en hint, laddar själv */
/* Min plats (sökrutans sikte, karta.js): blå punkt med vit kant + mjuk puls, som Kartor. Attrappen: platsen är fast */
.lk-minplats { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid #fff; border-radius: 50%; background: rgb(0 114 178); box-shadow: 0 1px 4px rgb(0 0 0 / .3); pointer-events: none; z-index: 2; }
.lk-minplats::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgb(0 114 178 / .35); z-index: -1; }
@media (prefers-reduced-motion: no-preference) { .lk-minplats::after { animation: lk-minplats-puls 2s ease-out infinite; } }
.maplibregl-marker.lk-minplats { margin: 0; }   /* markören centrerar själv */
@keyframes lk-minplats-puls { to { transform: scale(3.5); opacity: 0; } }

/* quizet i kortet (quizVy i karta.js): mätare, steg, fråga; svaren är sökkortets rader */
.lk-quiz__matare { height: 4px; margin: 8px 8px 0; border-radius: 2px; background: var(--w-08); overflow: hidden; }
.lk-quiz__matare span { display: block; width: var(--p); height: 100%; background: var(--a-2b); }
.lk-quiz__steg { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 12px 8px 0; font: var(--type-label); color: var(--fg-3); }
.lk-quiz small, .lk-kat small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--fg-3); }
.lk-quiz__steg .lk-ikn:disabled { visibility: hidden; }
.lk-quiz__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; }
.lk-quiz__chips .lk-chip { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; }
.lk-quiz__chips .lk-chip svg { width: 16px; height: 16px; }
.lk-quiz .lk-atg { margin-top: 16px; }
.lk-quiz h3 { margin: 6px 8px 16px; font-size: 22px; font-weight: 700; color: var(--fg-1); }
.lk-quiz .lab-rad[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--a-2b); }
/* 3D-knappen (karta.js visa3d): kommer och går som kompassen, glider ihop i stället för display: none. .oppen-regelns
   droppfördröjningar (780/860 ms) skrivs över: här finns ingen droppe att vänta på */
.lk-ctrl .lk-kgrupp.oppen > .lk-ikn.lk-3d { transition: height 380ms var(--lk-ease), margin 380ms var(--lk-ease), opacity 200ms ease, scale 460ms cubic-bezier(.34, 1.5, .5, 1), background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.lk-ctrl .lk-kgrupp.oppen > .lk-ikn.lk-3d[hidden] { display: grid; height: 0; margin: 0; opacity: 0; scale: .5; visibility: hidden; pointer-events: none;
  transition: height 320ms var(--lk-ease) 160ms, margin 320ms var(--lk-ease) 160ms, opacity 160ms ease 160ms, scale 240ms var(--lk-ease) 160ms, visibility 0s 480ms; }
.lk-ctrl .lk-kgrupp:has(> .lk-3d[hidden]) .lk-kompass { margin: 0; }   /* kompassens 8 px gäller avståndet till 3D: går med den */
/* 3D ⇄ 2D: etiketten vippar över kanten i stället för att bytas rakt av */
.lk-3d > span { display: block; }
.lk-3d > span.byt { animation: lk-3d-byt 320ms cubic-bezier(.2, .8, .2, 1); }
@keyframes lk-3d-byt { from { opacity: 0; transform: perspective(60px) rotateX(-70deg) translateY(4px); filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) { .lk-3d > span.byt { animation: none; } }

/* Färga kartan (karta.js fl*): varje område får --fc ur viridis; markerat område behåller jämförelsens kant */
/* svep: kopian i det andra årets färger, klippt till vänster om delaren */
/* legendens skala: band i viridis, en prick per område, pekat område lyfts */
.lk-fl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lk-fl__band { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 5px; background: linear-gradient(to right, rgb(68 1 84), rgb(59 82 139), rgb(33 145 140), rgb(94 201 98), rgb(253 231 37)); }
.lk-fl__band span { position: absolute; top: 50%; width: 6px; height: 6px; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .45); transition: scale var(--lk-t) var(--lk-ease); }
.lk-fl__band span.pek { scale: 2.2; z-index: 1; }
.lk-fl small { font: var(--type-meta); color: var(--fg-7); }
.lk-fl small:last-child { text-align: right; }
.lk-fl__pek, .lk-fl__tom { margin: 0; font: var(--type-meta); color: var(--fg-3); }
.lk-kort .lk-sf__reglage { margin: 8px 12px; }
.lk-atg { flex-wrap: wrap; }
/* restid till dina taggade nålar (platskort + nålkort) */
.lk-restid { display: flex; gap: 10px; align-items: flex-start; margin: 10px 12px; padding: 10px 12px; border-radius: 12px; background: var(--w-06); font: var(--type-label); color: var(--fg-3); }
.lk-restid svg { flex: none; width: 18px; height: 18px; color: var(--a-4); }
.lk-restid b { color: var(--fg-1); font-variant-numeric: tabular-nums; }
.lk-restid small { color: var(--fg-7); }
/* höjdprofil under mätetiketten */
/* sol och skugga: ljus från solens håll, skugga bort från det, natt = mörkt */
.lk-skugga { position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--lk-t) var(--lk-ease); background: linear-gradient(calc(var(--sol-a, 180deg) + 180deg), rgb(255 214 140 / var(--sol-l, 0)), rgb(8 12 30 / var(--sol-m, 0))); }
body.lk-sol .lk-skugga { opacity: 1; }
.lk-solbar { position: fixed; left: 50%; bottom: calc(var(--lk-inset) + 64px); translate: -50% 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px 8px 16px; border-radius: 22px; color: var(--fg-1); font: var(--type-label); max-width: calc(100vw - 32px); }
.lk-solbar > svg { width: 18px; height: 18px; color: #e69f00; }
.lk-solbar label { display: flex; align-items: center; gap: 8px; color: var(--fg-3); }
.lk-solbar input { width: 130px; accent-color: #e69f00; }
.lk-solbar output { min-width: 16ch; font-variant-numeric: tabular-nums; }
/* ett område lagt i verklig storlek (importerade spår är kartlagret lk-import) */
.lk-kontur { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.lk-kontur path { fill: rgb(230 159 0 / .18); stroke: #e69f00; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.lk-kontur__etikett { position: absolute; z-index: 4; translate: -50% -50%; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--s-deep); color: var(--fg-1); font: var(--type-chip); white-space: nowrap; cursor: grab; touch-action: none; user-select: none; }
.lk-kontur__etikett button { border: 0; background: none; padding: 4px; line-height: 0; color: var(--fg-6); cursor: pointer; }
.lk-kontur__etikett svg { width: 14px; height: 14px; }
/* inbäddad: bara kartan och legenden */
body.lk-inbaddad :is(.lk-rail, .lk-flikar, .lk-sokruta, #kort, #ark) { display: none !important; }
.lk-solbar[hidden] { display: none; }
/* nio gränsnivåer: raden bryts i stället för att flöda ut ur kortet */
.lk-lagen > .lk-sf__seg { flex: 1; display: flex; flex-wrap: wrap; }
.lk-lagen > .lk-sf__seg > button { flex: 1 1 auto; }
/* Fler gränser: de sällsynta indelningarna bakom en egen rad (öppen när en av dem är vald) */
.lk-flergr { padding: 0 12px 8px; }
.lk-flergr > summary { cursor: pointer; font-size: 12px; opacity: .7; padding: 2px 0; }
.lk-flergr > summary:hover { opacity: 1; }
.lk-flergr > .lk-lagen { padding: 6px 0 0; }
/* etableringsrutnätet och mäklarområdena ligger under områdena (.lk-omr), i samma %-rymd */
.lk-etab, .lk-maklare { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; animation: lk-in var(--lk-t) var(--lk-ease); }
.lk-etab { opacity: .55; }
.lk-maklare path { fill: color-mix(in srgb, var(--mf) 14%, transparent); stroke: var(--mf); stroke-width: 1.5; stroke-dasharray: 5 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--lk-t); }
.lk-maklare path.on { fill: color-mix(in srgb, var(--mf) 36%, transparent); stroke-dasharray: none; stroke-width: 2.5; }
@keyframes lk-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lk-etab, .lk-maklare { animation: none; } }
/* §höjd: mätaren följer pekaren */
.lk-hojdmatare { position: fixed; z-index: 45; translate: 14px 14px; padding: 4px 10px; border-radius: 999px; background: var(--s-deep); color: var(--fg-1); font: var(--type-chip); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.lk-hojdmatare { transition: opacity var(--lk-t) var(--lk-ease); }
.lk-hojdmatare:is([hidden], .ute, :empty) { display: block; opacity: 0; }
/* §platskortet: andra raden (rapport, besökt, foto) är lättare än den första; briefen och fotot */
.lk-atg--sma { margin-top: 0; }
.lk-atg--sma button { padding: 8px 10px; background: none; }
.lk-atg--sma button:hover { background: var(--w-08); }
/* helskärm: åtgärderna i naturlig bredd på EN rad (huvudknapparna, sen de små), inte utdragna 3 + 2 över 1 000 px */
.lk-kort.full .lk-atg { display: inline-flex; vertical-align: top; margin: 10px 8px 4px 0; }
.lk-kort.full .lk-atg :is(button, a) { flex: none; }
.lk-kort.full .lk-atg--sma button { padding: 10px 12px; }
.lk-atg [data-besokt][aria-pressed="true"] svg { animation: lk-bump 420ms cubic-bezier(.34,1.56,.64,1); }
/* §handlingsraden (plats): EN rad likvärdiga knappar, ikon över text; Analysera läget i accent (Malte 2026-10-23) */
.lk-atg--rad { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.lk-atg--rad button { flex-direction: column; gap: 4px; padding: 10px 4px 8px; font: var(--type-meta); line-height: 1.2; text-align: center; }
.lk-atg--rad svg { width: 20px; height: 20px; }
.lk-atg--rad .lk-atg__hu { background: var(--aw-20); color: var(--a-2b); }
.lk-kort.full .lk-atg--rad { display: grid; width: min(100%, 520px); margin-right: 0; }
.lk-kort.full .lk-atg--rad button { padding: 10px 4px 8px; }
/* §OSM-punktens kort (poiHtml): kategoriband/foto, sen rutor à la statsbudget (färgad kant per grupp, tabellsiffror) */
.lk-poi__hero { margin: 4px 12px 0; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--g) 34%, transparent), color-mix(in srgb, var(--g) 6%, transparent)); }
.lk-poi__foto { margin: 0; }
.lk-poi__foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lk-poi__foto figcaption { padding: 4px 14px 0; font: var(--type-meta); color: var(--fg-5); }
.lk-poi__foto figcaption a { color: inherit; }
.lk-poi__kat { display: flex; align-items: center; gap: 12px; padding: 14px; }
.lk-poi__ik { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--g); color: #fff; }
.lk-poi__ik svg, .lk-poi__rik svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk-poi__kat b { display: block; font: var(--type-label); color: var(--fg-1); }
.lk-poi__kat small { font: var(--type-meta); color: var(--fg-5); font-variant-numeric: tabular-nums; }
.lk-poi__rub { margin: 16px 12px 6px; font: var(--type-meta); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-5); }
.lk-poi__rutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 0 12px; }
.lk-poi__ruta { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--w-08); overflow: hidden; }
.lk-poi__ruta::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--g); }
.lk-poi__rik { color: var(--fg-3); }
.lk-poi__rik svg { width: 16px; height: 16px; }
.lk-poi__ruta b { font-size: 22px; font-weight: 650; line-height: 1.15; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.lk-poi__ruta small { font: var(--type-meta); color: var(--fg-3); }
.lk-poi__ruta em { font: var(--type-meta); font-style: normal; color: var(--fg-5); font-variant-numeric: tabular-nums; }
.lk-poi__lista { display: grid; gap: 4px; margin: 0 12px; padding: 0; list-style: none; }
.lk-poi__lista li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--w-08); }
.lk-poi__lista li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 1px var(--w-14); }
.lk-poi__lista span { flex: 1; min-width: 0; }
.lk-poi__lista span b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--type-label); color: var(--fg-1); }
.lk-poi__lista small { font: var(--type-meta); color: var(--fg-5); }
.lk-poi__lista li > b { font: var(--type-label); font-weight: 650; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.lk-poi__fakta { display: grid; gap: 4px; margin: 8px 12px 0; }
.lk-poi__fakta div { display: flex; justify-content: space-between; gap: 12px; font: var(--type-meta); }
.lk-poi__fakta dt { color: var(--fg-3); } .lk-poi__fakta dd { margin: 0; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.lk-poi__not { margin: 6px 12px 0; font: var(--type-meta); color: var(--fg-5); }
button.lk-kort__lank { width: calc(100% - 24px); border: 0; cursor: pointer; text-align: left; }
:is(.lk-kort.full, .lk-ark[data-lage="full"]) .lk-poi__sida { display: none; }
.lk-brief { margin: 8px 16px 12px; color: var(--fg-3); font: var(--type-label); line-height: 1.55; text-wrap: pretty; }
.lk-foto { margin: 10px 12px 0; }
.lk-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; animation: lk-in var(--lk-t) var(--lk-ease); }
.lk-foto figcaption { margin-top: 6px; color: var(--fg-3); font: var(--type-meta); }
/* §rapport: nyckeltalen i rutor, jämfört med riket (blå = bättre, orange = sämre, Okabe-Ito) */
.lk-rapport__over { margin: 14px 16px 0; color: var(--fg-3); font: var(--type-meta); text-transform: uppercase; letter-spacing: .06em; }
.lk-rapport__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 12px 8px; }
.lk-kort.full .lk-rapport__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }   /* helskärm: rutor à ~200 px, inte två à 500 */
.lk-rapport__tal { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--w-06); }
.lk-rapport__tal small, .lk-rapport__tal span { color: var(--fg-3); font: var(--type-meta); }
.lk-rapport__tal b { color: var(--fg-1); font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lk-rapport__tal .bra { color: #56b4e9; }
.lk-rapport__tal .samre { color: #e69f00; }
[data-theme="light"] .lk-rapport__tal .bra { color: #0072b2; }
[data-theme="light"] .lk-rapport__tal .samre { color: #d55e00; }
/* rapportens delar (rapport/rapport.js): profilen som staplar mot mittenkommunen (strecket), utvecklingen som index-linjer.
   Staplarna växer med transform, linjerna ritas in med stroke-dashoffset (pathLength="1"); slutläget är vilan, så utskrift och
   reducerad rörelse får dem färdiga */
.lk-rapport__h { margin: 18px 16px 8px; color: var(--fg-1); font: var(--type-label); font-weight: 600; }
.lk-rapport__not { margin: 6px 16px 4px; color: var(--fg-3); font: var(--type-meta); }
.lk-rapport__dna { display: grid; gap: 2px; margin: 0 16px; }
.lk-dna { display: grid; grid-template-columns: minmax(7.5em, 40%) 1fr 2em; align-items: center; gap: 10px; padding: 4px 0; color: var(--fg-2); font: var(--type-meta); }
.lk-dna small { color: var(--fg-3); font-variant-numeric: tabular-nums; text-align: right; }
.lk-dna__spar { position: relative; height: 6px; border-radius: 3px; background: var(--w-08); overflow: hidden; }
.lk-dna__spar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--fg-3); opacity: .7; }
.lk-dna__fyll { position: absolute; inset: 0; border-radius: inherit; background: #56b4e9; transform-origin: left; transform: scaleX(var(--a)); }
.lk-dna__fyll.samre { background: #e69f00; }
[data-theme="light"] .lk-dna__fyll { background: #0072b2; }
[data-theme="light"] .lk-dna__fyll.samre { background: #d55e00; }
.lk-dna__fyll.nara { opacity: .55; }
/* etableringen: branschen med bästa lägets namn under, beskedet i ord till höger */
.lk-dna--etab { grid-template-columns: minmax(7.5em, 40%) 1fr 3.4em; }
.lk-dna--etab span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: .9em; }
.lk-rapport__banor { display: grid; gap: 8px; margin: 0 12px; }
.lk-bana { margin: 0; padding: 12px 14px 10px; border-radius: 14px; background: var(--w-06); }
.lk-bana figcaption, .lk-bana p { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--fg-3); font: var(--type-meta); font-variant-numeric: tabular-nums; }
.lk-bana figcaption b { color: var(--fg-1); font-weight: 600; }
.lk-bana svg { display: block; width: 100%; height: auto; margin: 8px 0 6px; overflow: visible; }
.lk-bana path { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.lk-bana__k { stroke: #56b4e9; }
.lk-bana__rk { stroke: var(--fg-3); stroke-width: 1.5; opacity: .6; }
.lk-bana__pk, .lk-bana__prk { display: inline-block; width: 10px; height: 2.5px; margin: 0 4px 0 6px; border-radius: 2px; vertical-align: middle; background: #56b4e9; }
.lk-bana__prk { background: var(--fg-3); opacity: .6; }
[data-theme="light"] :is(.lk-bana__k) { stroke: #0072b2; }
[data-theme="light"] .lk-bana__pk { background: #0072b2; }
@media (prefers-reduced-motion: no-preference) {
  .lk-dna__fyll { animation: lk-dna-in 700ms var(--lk-ease) backwards; animation-delay: calc(120ms + var(--i, 0) * 40ms); }
  .lk-bana path { stroke-dasharray: 1; animation: lk-rita 1100ms var(--lk-ease) backwards 160ms; }
  .lk-bana__rk { animation-delay: 60ms; }
}
@keyframes lk-dna-in { from { transform: scaleX(0); } }
@keyframes lk-rita { from { stroke-dashoffset: 1; } }
.lk-utskrift { display: none; }
@media print {
  .lk-utskrift, .lk-utskrift * { visibility: visible; color: #000 !important; }
  .lk-utskrift { display: block; position: absolute; left: 0; top: 0; width: 100%; background: #fff; font: 11px/1.4 system-ui, sans-serif; }
  .lk-utskrift h1 { margin: 0 0 2px; font-size: 18px; } .lk-utskrift > p { margin: 0 0 8px; }
  .lk-utskrift img { display: block; width: 100%; max-height: 105mm; object-fit: cover; margin-bottom: 8px; }
  .lk-utskrift--karta img { max-height: 250mm; object-fit: contain; }   /* bara kartan: hela bilden på sidan */
  .lk-utskrift svg.lk-sekt { width: 100%; height: auto; } .lk-utskrift .lk-sekt__hl { display: none; }
  .lk-utskrift .lk-sekt__tabeller { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } .lk-utskrift section { break-inside: avoid; }
  body * { visibility: hidden; }
  .lk-kort, .lk-ark { position: static !important; transform: none !important; clip-path: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  .lk-rapport, .lk-rapport * { visibility: visible; color: #000 !important; }
  .lk-rapport { position: absolute; left: 0; top: 0; width: 100%; }
  .lk-rapport__tal { background: #f2f2f2; break-inside: avoid; }
  .lk-rapport .lk-atg { display: none; }
}
/* §fokus och §tur: bara kartan, chromet tonas bort */
body:is(.lk-fokus, .lk-turlage) :is(.lk-rail, .lk-flikar, .lk-sokruta, #kort, #ark, .lk-ctrl, .lk-legend, .lk-kredit, .lk-meny, #verktygsrad, .lk-solbar, .lk-utf) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.lk-fokusut { position: fixed; left: 50%; bottom: calc(var(--lk-inset) + var(--lk-sa-b, 0px)); translate: -50% 0; z-index: 46; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; color: var(--fg-1); font: var(--type-label); cursor: pointer; animation: lk-in-u var(--lk-t) var(--lk-ease); }
.lk-fokusut svg { width: 16px; height: 16px; }
.lk-fokusut[hidden], .lk-tur[hidden] { display: none; }
.lk-tur { position: fixed; left: 50%; bottom: calc(var(--lk-inset) + var(--lk-sa-b, 0px)); translate: -50% 0; z-index: 46; display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 24px; color: var(--fg-1); max-width: calc(100vw - 32px); animation: lk-in-u var(--lk-t) var(--lk-ease); }
.lk-tur button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--w-08); color: inherit; cursor: pointer; }
.lk-tur button:hover { background: var(--w-10); }
.lk-tur button svg { width: 16px; height: 16px; }
.lk-tur__text { display: flex; flex-direction: column; min-width: 128px; max-width: 380px; font: var(--type-label); }
.lk-tur__text b { font-weight: 600; }
.lk-tur__text small { color: var(--fg-3); font: var(--type-meta); }
.lk-tur__prickar { display: flex; gap: 4px; }
.lk-tur .lk-tur__prickar button { width: 6px; height: 6px; padding: 0; border-radius: 3px; background: currentColor; opacity: .3; transition: width var(--lk-t) var(--lk-ease), background var(--lk-t), opacity var(--lk-t); }
.lk-tur .lk-tur__prickar button.on { width: 18px; background: #e69f00; opacity: 1; }
.lk-tur [data-turbak], .lk-tur [data-turfram] { background: none; }
@media (max-width: 767px) { .lk-tur { flex-wrap: wrap; justify-content: center; border-radius: 20px; width: calc(100vw - 32px); } .lk-tur__text { order: -1; flex: 1 0 100%; padding: 4px 8px 0; max-width: none; } }
/* Cinematic: färgtoning och vinjett över baskartan (resten, ljus/skugga/AO/terräng/träd, i karta.js transformStyle) */
body.lk-cine .lk-bas { filter: saturate(1.15) contrast(1.06); background: #34566a; }   /* prods Atmosfär: SKY_ATMO fog-color bakom globen */
[data-theme="light"] body.lk-cine .lk-bas { background: #9fc4c8; }
body.lk-cine .lk-bas::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(0 0 0 / .32)); }
@media (prefers-reduced-motion: reduce) { .lk-fokusut, .lk-tur, .lk-foto img { animation: none; } }

/* fotoläget (foto() i karta.js): allt UI tonar bort, kvar är kartan, valen och avtryckaren som iPhone-kamerans vita knapp */
body.lk-fotolage > :not(.lk-karta, #fotolage, #toast) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity var(--lk-t) var(--lk-ease), visibility 0s var(--lk-t); }
body.lk-fotolage.utan-pins .lk-karta > .lk-prick, body.lk-fotolage.utan-granser .lk-karta > svg, body.lk-fotolage.utan-text .lk-karta__ort { visibility: hidden; }
.lk-fotolage { position: fixed; inset: 0; z-index: 60; pointer-events: none; animation: lk-foto-in var(--lk-t) var(--lk-ease); }
.lk-fotolage[hidden] { display: none; }
.lk-fotolage > * { pointer-events: auto; }
.lk-fotolage::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.lk-fotolage.blixt::before { animation: lk-blixt .5s ease-out; }
@keyframes lk-foto-in { from { opacity: 0; } }
@keyframes lk-blixt { from { opacity: .8; } }
.lk-fotolage__stang { position: absolute; top: calc(var(--lk-inset) + env(safe-area-inset-top)); right: calc(var(--lk-inset) + env(safe-area-inset-right)); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--fg-1); cursor: pointer; }
.lk-fotolage__stang svg { width: 18px; height: 18px; }
.lk-fotolage__val { position: absolute; left: 50%; bottom: calc(124px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; gap: 2px; padding: 4px; border-radius: 999px; color: var(--fg-1); }
.lk-fotolage__val button { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 13px; opacity: .5; cursor: pointer; transition: opacity .2s, background .2s; }
.lk-fotolage__val button.on { opacity: 1; background: var(--w-08); }
.lk-fotolage__val svg { width: 16px; height: 16px; }
.lk-fotolage__ta { position: absolute; left: 50%; bottom: calc(32px + env(safe-area-inset-bottom)); translate: -50% 0; width: 74px; height: 74px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: none; box-shadow: 0 2px 16px rgb(0 0 0 / .35); cursor: pointer; }
.lk-fotolage__ta::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.lk-fotolage__ta:active::after { transform: scale(.86); }
.lk-fotolage__ta:focus-visible { outline: 2px solid var(--a-4); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .lk-fotolage, .lk-fotolage.blixt::before { animation: none; } }

/* Underlag och bearbetning (underlag() i karta.js): källa + metod per mått, hopfällt under Analysera läget, Jämför och rapporten */
.lk-underlag { margin: 10px 12px; padding: 10px 14px; border-radius: 14px; background: var(--w-05); font: var(--type-meta); color: var(--fg-7); }
.lk-underlag summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--fg-2); }
.lk-underlag summary::-webkit-details-marker { display: none; }
.lk-underlag summary::after { content: "+"; margin-left: auto; transition: transform var(--lk-t) var(--lk-ease); }
.lk-underlag[open] summary::after { transform: rotate(45deg); }
.lk-underlag summary svg { width: 16px; height: 16px; }
.lk-underlag dl { margin: 10px 0 0; display: grid; gap: 8px; }
.lk-underlag dt { color: var(--fg-2); }
.lk-underlag dd { margin: 0; }
.lk-underlag dd small { display: block; }
.lk-underlag a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lk-underlag__alla { display: inline-block; margin-top: 10px; }

/* annonsen i platskortet (karta.js annons): samma luft och knappform som .lk-atg, en tunn ram i stället för fylld yta så den läses
   som något annat än sajtens eget innehåll; mäklarens färg bara i initialerna och Ring, aldrig som stor yta */
.lk-annons { margin: 12px 12px 8px; padding: 10px 12px 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--w-10); }
.lk-annons__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--fg-6); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.lk-annons__h button { display: grid; place-items: center; width: 24px; height: 24px; margin: -4px -6px -4px 0; border: 0; border-radius: 999px; background: none; color: var(--fg-6); cursor: pointer; }
.lk-annons__h button:hover { background: var(--w-08); color: var(--fg-3); }
.lk-annons__h svg { width: 14px; height: 14px; }
.lk-annons__m { display: flex; align-items: center; gap: 12px; }
.lk-annons__foto { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--mk); color: #fff; font-weight: 600; font-size: 14px; }
.lk-annons b { display: block; font-weight: 500; color: var(--fg-2, inherit); }
.lk-annons small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-6); }
.lk-annons__knappar { display: flex; gap: 8px; margin-top: 10px; }
.lk-annons__knappar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--w-08); color: var(--fg-3); font: var(--type-label); text-decoration: none; transition: background var(--lk-t) var(--lk-ease); }
.lk-annons__knappar a:hover { background: var(--w-10); }
.lk-annons__knappar .lk-annons__ring { background: var(--mk); color: #fff; }
.lk-annons__knappar .lk-annons__ring:hover { filter: brightness(1.1); }
.lk-annons__knappar svg { width: 15px; height: 15px; }
.lk-annons__ko { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.lk-annons__ko > span { flex: 1; min-width: 0; }
.lk-annons__ko svg { flex: none; width: 16px; height: 16px; color: var(--fg-7); }
.lk-annons__ko:hover b { text-decoration: underline; }
/* ljust läge: --w-10 är vit där och blev en vit ram mot det ljusa kortet; en mörk hårlinje i stället */
[data-theme="light"] .lk-annons { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.lk-annons__mer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 10px; }
.lk-annons__mer button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--fg-3); font: var(--type-label); cursor: pointer; }
.lk-annons__mer button:hover { text-decoration: underline; }
.lk-annons__mer .lk-annons__omr svg:first-child { color: var(--mk); }   /* färgen bara i ikonen: blå text mot mörkt kort klarar inte kontrasten */
.lk-annons__mer svg { width: 15px; height: 15px; }
.lk-annons__om { margin: 12px 0 0; line-height: 1.5; color: var(--fg-3); }
.lk-annons__fakta { display: grid; gap: 6px; margin: 12px 0 0; }
.lk-annons__fakta div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.lk-annons__fakta dt { color: var(--fg-6); }
.lk-annons__fakta dd { margin: 0; color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* Leder: hoverrutan (typens ikon i dess färg + namn, typ, längd, tid) och ledkortet (bildremsan, nyckeltalen, höjdprofilen) */
.lk-tips--led { align-items: flex-start; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; }
.lk-tips__ik, .lk-led__ik { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--lf); color: #14181d; }
.lk-tips__ik svg, .lk-led__ik svg { width: 16px; height: 16px; }
.lk-tips__txt { display: grid; gap: 1px; }
.lk-tips__txt b { color: var(--fg-1); font: var(--type-label); }
.lk-tips__txt small { color: var(--fg-3); font-size: 12px; }
.lk-led__bilder { display: flex; gap: 8px; margin: 10px 0 0; padding: 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none; }
.lk-led__bilder::-webkit-scrollbar { display: none; }
.lk-led__bilder figure { flex: 0 0 88%; margin: 0; scroll-snap-align: start; cursor: pointer; }
.lk-led__bilder:focus-visible { outline: 2px solid var(--a-4); outline-offset: 2px; border-radius: 14px; }
.lk-led__prickar { display: flex; justify-content: center; margin: 2px 0 0; }
.lk-led__prickar button { display: grid; place-items: center; height: 20px; padding: 0 3px; border: 0; background: none; cursor: pointer; }
.lk-led__prickar button::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--fg-6); transition: width var(--lk-t) var(--lk-ease), background var(--lk-t) var(--lk-ease); }
.lk-led__prickar [aria-current="true"]::before { width: 18px; background: var(--fg-1); }
.lk-led__bilder figure:only-child { flex-basis: 100%; }
.lk-led__bilder svg, .lk-led__bilder img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--w-08); aspect-ratio: 16 / 9; border-radius: 14px; animation: lk-in var(--lk-t) var(--lk-ease); }
.lk-led__bilder figcaption, .lk-led__profil figcaption { margin-top: 6px; color: var(--fg-3); font: var(--type-meta); }
.lk-led__bilder figcaption a { color: inherit; }
.lk-led__typ { display: flex; align-items: center; gap: 10px; margin: 14px 12px 0; }
.lk-led__typ > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.lk-led__typ b { color: var(--fg-1); font: var(--type-label); }
.lk-led__typ small { color: var(--fg-3); font: var(--type-meta); }
.lk-led__chip { padding: 4px 10px; border-radius: 999px; background: var(--w-08); color: var(--fg-3); font: var(--type-meta); }
.lk-led__tal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 12px 0; }
.lk-led__tal div { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--w-08); }
.lk-led__tal svg { width: 16px; height: 16px; margin-bottom: 4px; color: var(--lf); }
.lk-led__tal b { color: var(--fg-1); font: var(--type-label); font-variant-numeric: tabular-nums; }
.lk-led__tal small { color: var(--fg-6); font-size: 12px; }
.lk-led__profil { margin: 12px 12px 0; color: var(--lf); }
.lk-led__profil svg { display: block; width: 100%; height: 56px; }
.lk-led__om { margin: 12px 12px 0; line-height: 1.5; color: var(--fg-3); }
.lk-led .lk-annons__fakta { margin: 12px 12px 0; }
.lk-led .lk-atg a { text-decoration: none; }
.lk-led__mk { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--mk); box-shadow: 0 0 0 1px var(--w-16); vertical-align: -1px; }   /* markeringsfärgen ur OSM; vit markering syns mot kanten */
.lk-led__del { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--w-08); }
.lk-led__del svg { flex: none; width: 16px; height: 16px; color: var(--lf); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lk-led__del span { display: grid; }
.lk-led__del b { color: var(--fg-1); font: var(--type-label); }
.lk-led__del small { color: var(--fg-3); font: var(--type-meta); }
.lk-led__not { margin: 10px 12px 4px; color: var(--fg-6); font-size: 11px; line-height: 1.4; }
/* vägkortet (vagMer i karta.js): rubrik per del, dygnskurvan som staplar (vardag, --lf) med helgen som linje */
.lk-led__rub { margin: 18px 12px 0; color: var(--fg-6); font: var(--type-kicker); }
.lk-led__dygn { margin: 8px 12px 0; --tf: var(--lf); }
.lk-led__dygn > p { margin: 0 0 6px; color: var(--fg-3); font: var(--type-meta); }
.lk-led__dygn .lk-tf__staplar { width: 100%; }
.lk-led__helg { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lk-led__leg { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--fg-6); font: var(--type-meta); }
.lk-led__leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--lf); }
.lk-led__leg i.h { width: 14px; height: 0; margin-left: 10px; border-radius: 0; border-top: 1.5px solid var(--fg-3); background: none; }
.lk-led__del + .lk-led__del { margin-top: 6px; }
.lk-led .lk-atg button { text-align: left; }
.lk-led .lk-atg button svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .lk-led__bilder svg, .lk-led__bilder img { animation: none; } }
/* Kollektivtrafik: bytespunktens kort, ett trafikslag per rad med linjerna som brickor i linjens färg (--kf, satt i ktVy) */
.lk-kt__sum { margin: 14px 12px 0; color: var(--fg-3); font: var(--type-body); }
.lk-kt__sum b { color: var(--fg-1); }
.lk-kt__rad { display: flex; gap: 10px; margin: 8px 12px 0; padding: 10px; border-radius: 12px; background: var(--w-08); }
.lk-kt__rad > div { min-width: 0; }
.lk-kt__rad b { color: var(--fg-1); font: var(--type-label); }
.lk-kt__ik { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kf); color: #fff; }
.lk-kt__ik svg { width: 16px; height: 16px; }
.lk-kt__linjer { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lk-kt__utr { margin: 8px 0 0; color: var(--fg-3); font: var(--type-meta); }
.lk-kt__l { display: inline-block; min-width: 24px; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--kf); color: #fff; font: var(--type-meta); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.lk-kt .pk__kropp { padding: 14px 12px 0; }
.lk-kt__linjer :is(span, button) { min-width: 24px; border: 0; padding: 2px 7px; border-radius: 6px; background: var(--kf); color: #fff; font: var(--type-meta); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.lk-kt__linjer button { cursor: pointer; }
.lk-kt__linjer button[aria-pressed="true"] { outline: 2px solid var(--kf); outline-offset: 2px; }
.lk-kt__linjer--u span { background: none; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--kf); font-weight: 500; }
/* Linjekortet (hplLinje): stoppen som en tunnelbanekarta, linjen i --kf, hållplatsen fet, passerade tonade */
.lk-ltur__rikt { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.lk-ltur__rikt button { border: 0; padding: 3px 9px; border-radius: 999px; background: var(--w-08); color: var(--fg-2); font: var(--type-meta); cursor: pointer; }
.lk-ltur__rikt button[aria-pressed="true"] { background: var(--fg-1); color: var(--s-deep); }
.lk-ltur { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.lk-ltur li { position: relative; }
.lk-ltur li::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 3px; background: var(--kf); }
.lk-ltur li:first-child::before { top: 50%; }
.lk-ltur li:last-child::before { bottom: 50%; }
.lk-ltur button { position: relative; display: flex; width: 100%; align-items: baseline; gap: 8px; border: 0; padding: 5px 4px 5px 24px; border-radius: 8px; background: none; color: var(--fg-1); font: var(--type-body); text-align: left; cursor: pointer; }
.lk-ltur button::before { content: ""; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -5.5px; border: 2px solid var(--kf); border-radius: 50%; background: var(--s-deep); }
.lk-ltur button span { flex: 1; }
.lk-ltur small { color: var(--fg-3); font: var(--type-meta); font-variant-numeric: tabular-nums; }
.lk-ltur button:is(:hover, :focus-visible) { background: var(--w-08); }
.lk-ltur button:is(:hover, :focus-visible)::before { background: var(--kf); }
.lk-ltur .har button { font-weight: 600; }
.lk-ltur .har button::before { background: var(--kf); }
.lk-ltur .forbi button { color: var(--fg-3); }
/* Mark och tomter: skiften med hel kant (mäklarområdena är streckade), tomtkortets pris + fakta, markannonsens ikon i ringen */
.lk-marklage path { stroke-dasharray: none; }
.lk-mark__pris { margin: 4px 16px 0; }
.lk-mark__pris b { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lk-mark__pris small { color: var(--fg-6); }
.lk-mark__fakta { margin: 12px 16px 4px; }
.lk-annons__foto svg { width: 20px; height: 20px; }
/* Utforska här (prods explore-fab): glaspillret nere i mitten, snabbvalen fälls ut ovanför i en rad, en i taget (--i).
   Telefon: uppe i mitten (nere bor arket), raden fälls ut nedanför */
.lk-utf { position: absolute; left: 50%; bottom: var(--lk-inset); transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(100vw - 2 * var(--lk-inset) - 120px); pointer-events: none; transition: opacity var(--lk-t) var(--lk-ease), visibility 0s, bottom var(--lk-t) var(--lk-ease); }
/* Utforska syns bara när INGET är öppet (kort, Kartstil, Verktyg, arket, verktygsraden): en regel, tillstånden speglas av hidden/body-klasser.
   Chipsen nämns själva: .lk-utf[data-oppen] .lk-utf__chip sätter visibility: visible, som annars slår igenom förälderns hidden */
:is(#kort, #meny, #kartstil):not([hidden]) ~ .lk-utf, body:is(.lk-arkuppe, .lk-verktyg) .lk-utf,
:is(#kort, #meny, #kartstil):not([hidden]) ~ .lk-utf .lk-utf__chip, body:is(.lk-arkuppe, .lk-verktyg) .lk-utf .lk-utf__chip { opacity: 0; visibility: hidden; transition: opacity var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t); }
/* pc: pillret står ALLTID på samma ställe: mitt på kartytan till höger om railen (det göms ju när ett kort är öppet, se ovan).
   Snabbvalen får aldrig nå in över legenden (vänsterkant --lk-fri-v, 264 + 16 bred): raden är symmetrisk kring pillret och bryts i stället.
   Toasten centreras fortfarande på den fria ytan (mellan kortet/legenden och hörnkolumnen + kreditpillret, 120px) */
@media (min-width: 1101px) {
  .lk-utf { left: calc((100% + var(--lk-inset) + var(--lk-rail-w) + 22px - 120px) / 2); max-width: calc(100% - var(--lk-inset) - var(--lk-rail-w) - 22px - 680px); }
  .lk-toast { --lk-fri: var(--lk-fri-v); left: calc((100% + var(--lk-fri) - 120px) / 2); max-width: calc(100% - var(--lk-fri) - 136px); }
  .lk-legend:not([hidden]) ~ .lk-toast { --lk-fri: calc(var(--lk-fri-v) + 264px + 16px); }
  body.lk-legend-min .lk-legend ~ .lk-toast { --lk-fri: var(--lk-fri-v); }
}
/* iPad stående: nere bor sökrutan + kortet, så pillret står uppe intill flikraden (ankrat i dess högra kant, följer flikarnas
   bredd; utforska ligger efter flikraden i DOM:en för ankarets skull) och snabbvalen fälls nedåt som på telefon */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  .lk-flikar { anchor-name: --lk-flikar; }
  .lk-utf { top: var(--lk-inset); bottom: auto; right: calc(var(--lk-inset) + 48px); transform: none; max-width: none; align-items: flex-start; flex-direction: column-reverse; --lk-utf-dy: -8px;
    left: calc(var(--lk-inset) + 385px);   /* utan ankarstöd (Safari < 26): flikradens bredd, mätt 2026-10-06 */
    left: calc(anchor(--lk-flikar right) + 8px); }
  .lk-utf > .lk-utf__pill { min-height: 48px; }   /* lika hög som flikraden intill; > slår basreglerna längre ner */
  .lk-utf > .lk-utf__val { justify-content: flex-start; }
}
/* toasten (Ångra m.fl.) knuffar upp pillret + snabbvalen medan den syns, som snackbaren lyfter FAB:en. Telefon + iPad stående: pillret bor uppe, ingen krock.
   ponytail: 50px = toastens höjd (42) + luft; växer toasten till två rader, mät den i stället */
@media (min-width: 1101px), (min-width: 768px) and (orientation: landscape) { .lk-utf:has(~ .lk-toast:not([hidden])) { bottom: calc(var(--lk-toast-b) + 50px); } }
.lk-utf > * { pointer-events: auto; }
.lk-utf__pill, .lk-utf__chip { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 999px; font: var(--type-label); color: var(--fg-2); white-space: nowrap; --glas-alfa: .12; }
.lk-utf__pill svg, .lk-utf__chip svg { width: 16px; height: 16px; flex: none; }
.lk-utf__chip[aria-pressed="true"] { color: var(--a-2b); --glas-alfa: .34; }
.lk-utf__val { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; pointer-events: none; }   /* raden står kvar (dolda chips tar plats) ⇒ bara chipsen får träffas, annars en osynlig ~700×86-ruta som äter kartdrag */
.lk-utf__chip { pointer-events: auto; }
.lk-utf__chip { opacity: 0; transform: translateY(var(--lk-utf-dy, 8px)) scale(.94); visibility: hidden; transition: opacity var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease), visibility 0s linear var(--lk-t); }
.lk-utf[data-oppen] .lk-utf__chip { opacity: 1; transform: none; visibility: visible; transition-delay: calc(var(--i) * 40ms), calc(var(--i) * 40ms), 0s; }
@media (hover: hover) { .lk-utf__pill:hover, .lk-utf__chip:hover { --glas-alfa: .34; } }
@media (max-width: 767px) {
  .lk-utf { bottom: auto; top: calc(env(safe-area-inset-top) + var(--lk-inset) + 56px); flex-direction: column-reverse; max-width: calc(100vw - 2 * var(--lk-inset)); }
  .lk-utf__chip { transform: translateY(-8px) scale(.94); }
}
@media (prefers-reduced-motion: reduce) { .lk-utf, .lk-utf__chip { transition: none; } }

/* Jämför: sök + kategorichips över tabellen, nivåsegmentet bär listans längd */
.lk-jfval { padding: 4px 12px 0; }
.lk-jfval .lk-kv__sok { width: 100%; }
.lk-jfchips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
.lk-jfchips .lk-chip { flex: none; }
.lk-sf__seg .lk-jfant { margin-left: 5px; opacity: .6; font-variant-numeric: tabular-nums; }

/* platskortets riktiga sektion (plats/kort.js): skelettet tonar ut ovanpå medan raderna glider in (pkLand i karta.js) */
.lk-pk { position: relative; overflow: clip; }
.lk-pk__ut { position: absolute; inset: 0 0 auto; pointer-events: none; }
.lk-pk__rad > span:nth-child(2) { display: grid; gap: 1px; }
.lk-pk__rad small { color: var(--fg-7); font: var(--type-meta); }
.lk-pk__rad .lab-rad__n svg { width: 16px; height: 16px; }
.lk-pk__foto figcaption a { color: inherit; }
.lk-pk__karusell { position: relative; container-type: inline-size; }
.lk-pk__spar { display: flex; margin: 10px 12px 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } /* bara x: hjulet i y går vidare till kortet */
.lk-pk__spar::-webkit-scrollbar { display: none; }
.lk-pk__spar > .lk-foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.lk-pk__pil { position: absolute; top: calc((100cqi - 24px) * 9 / 32 - 6px); width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--lk-t) var(--lk-ease); } /* mitten av 16:9-bilden: 10 px marginal + halva höjden − halva pilen */
.lk-pk__pil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-pk__pil[data-pil="-1"] { left: 20px; } .lk-pk__pil[data-pil="1"] { right: 20px; }
.lk-pk__pil[data-pil="-1"] svg { rotate: -90deg; } .lk-pk__pil[data-pil="1"] svg { rotate: 90deg; } /* ponytail: chevron-up vriden, ikonregistret har ingen vänster/höger */
.lk-pk__karusell:hover .lk-pk__pil, .lk-pk__pil:focus-visible { opacity: 1; }
@media (hover: none) { .lk-pk__pil { display: none; } } /* telefon: svep */
/* fotokortet i datorkortet (mockup v2): bilden kant i kant överst (5:2), kortets knappar flyter som runda glas på den, rubriken
   i huvudet göms (namnet står under stigen i kroppen). Kroppen tappar sin sidopadding, raderna får den tillbaka som marginal */
.lk-kort:has(.lk-pk__karusell) .lk-panel__huvud { position: absolute; inset: 0 0 auto; z-index: 3; pointer-events: none; }
.lk-kort:has(.lk-pk__karusell) .lk-panel__huvud h2 { visibility: hidden; }
.lk-kort:has(.lk-pk__karusell) .lk-panel__huvud :is(.lk-ikn, .lk-tillbaka) { pointer-events: auto; }
.lk-kort:has(.lk-pk__karusell) .lk-panel__huvud .lk-ikn { width: 32px; height: 32px; border-radius: 16px; background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(8px); }
.lk-kort:has(.lk-pk__karusell) .lk-panel__huvud [data-full][aria-pressed="true"] { width: auto; }
@media (hover: hover) { .lk-kort:has(.lk-pk__karusell) .lk-panel__huvud .lk-ikn:hover { background: rgba(0,0,0,.5); } }
.lk-kort:has(.lk-pk__karusell) .lk-panel__kropp { padding-top: 0; padding-inline: 0; scrollbar-width: none; } /* rullisten åt bildens högerkant */
.lk-kort:has(.lk-pk__karusell) .lk-pk > :not(.lk-pk__karusell) { margin-inline: 8px; }
.lk-kort.full:has(.lk-pk__karusell) .lk-pk > :not(.lk-pk__karusell) { margin-inline: 24px; }
.lk-kort .lk-pk__spar { margin: 0; }
.lk-kort .lk-pk__spar img { aspect-ratio: 5 / 2; border-radius: 0; }
.lk-kort .lk-pk__spar figcaption { padding-inline: 24px; }
.lk-kort .lk-pk__pil { top: calc(20cqi - 16px); } .lk-kort .lk-pk__pil[data-pil="-1"] { left: 12px; } .lk-kort .lk-pk__pil[data-pil="1"] { right: 12px; }
.lk-pk__kalla { margin: 2px 16px 8px; color: var(--fg-7); font: var(--type-meta); }
.lk-pk__del { margin: 16px 16px 6px; font: var(--type-meta); font-weight: 600; color: var(--fg-7); }

/* statistikkartan i Lista (statistik/statistik.js): nyckeltal, Värde/Förändring, årsreglage + spela upp, serien */
/* huvudet (nyckeltal, läge, år, serie) står kvar som en glasbit medan raderna rullar under, samma glas som .lk-vidare */
.lk-stat { position: sticky; top: -4px; z-index: 3; display: grid; gap: 8px; margin: 0 0 8px; padding: 8px; border-radius: 18px;
  --fotbg: rgba(38, 34, 30, .82); background: var(--fotbg); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--w-10), 0 10px 28px rgba(0, 0, 0, .3); }
[data-theme="light"] .lk-stat { --fotbg: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .12); }
.lk-stat__val { position: relative; display: block; }
.lk-stat__val select { appearance: none; width: 100%; padding: 11px 38px 11px 14px; border: 0; border-radius: 12px; background: var(--w-06); color: inherit; font: var(--type-label); cursor: pointer; }
.lk-stat__val select:focus-visible { outline: 2px solid var(--a-4); outline-offset: 2px; }
.lk-stat__val option, .lk-stat__val optgroup { background: var(--s-deep); color: var(--fg-1); }
/* rullgardinen: anpassningsbar select (appearance: base-select, Chromium 135+) = glaslista med grupprubriker; andra webbläsare får den inbyggda */
@supports (appearance: base-select) {
  .lk-stat__val select, .lk-stat__val ::picker(select) { appearance: base-select; }
  .lk-stat__val select::picker-icon { display: none; }
  .lk-stat__val ::picker(select) { max-height: min(420px, 60dvh); margin-top: 6px; padding: 6px; border: 0; border-radius: 16px; overflow-y: auto; scrollbar-width: thin;
    background: rgba(38, 34, 30, .9); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--w-10), 0 16px 40px rgba(0, 0, 0, .4);
    opacity: 0; translate: 0 -4px; transition: opacity 160ms var(--lk-ease), translate 160ms var(--lk-ease), overlay 160ms allow-discrete, display 160ms allow-discrete; }
  .lk-stat__val ::picker(select):popover-open { opacity: 1; translate: 0; }
  @starting-style { .lk-stat__val ::picker(select):popover-open { opacity: 0; translate: 0 -4px; } }
  [data-theme="light"] .lk-stat__val ::picker(select) { background: rgba(255, 255, 255, .94); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .16); }
  .lk-stat__val optgroup { background: none; padding: 0; font: var(--type-meta); color: var(--fg-7); }
  .lk-stat__val optgroup::label, .lk-stat__val optgroup > legend { display: block; padding: 10px 10px 4px; font-weight: 600; letter-spacing: .02em; }
  .lk-stat__val optgroup + optgroup { margin-top: 4px; box-shadow: inset 0 1px 0 var(--w-08); }
  .lk-stat__val option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: none; color: var(--fg-1); font: var(--type-label); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
  .lk-stat__val option:is(:hover, :focus-visible) { background: var(--w-08); outline: 0; }
  .lk-stat__val option:checked { background: var(--aw-20); color: var(--a-2b); font-weight: 600; }
  .lk-stat__val option::checkmark { order: 1; margin-left: auto; }
}
.lk-stat__val > svg { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; pointer-events: none; color: var(--fg-6); }
.lk-stat__ar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.lk-stat__ar:has([data-stbas]) { grid-template-columns: 1fr 1fr auto; }   /* förändringsläget: Sedan och År sida vid sida */
.lk-kort .lk-stat .lk-sf__reglage { margin: 0; }
.lk-stat__spela { width: 48px; border: 0; border-radius: 16px; background: var(--w-06); color: inherit; cursor: pointer; display: grid; place-items: center; transition: background var(--lk-t) var(--lk-ease); }
.lk-stat__spela:hover, .lk-stat__spela[aria-pressed="true"] { background: var(--w-10); }
.lk-stat__spela svg { width: 18px; height: 18px; }
.lk-stat__en { margin: 0; font: var(--type-meta); color: var(--fg-7); }
.lk-stat__serie:empty { display: none; }
.lk-stat__serie svg { display: block; width: 100%; height: 60px; overflow: visible; }
.lk-stat__serie :is(polyline, line) { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.lk-stat__serie line { stroke: var(--fg-7); stroke-width: 1; stroke-dasharray: 2 3; }
.lk-stat__serie line.bas { stroke-dasharray: none; opacity: .6; }
.lk-stat__serie polyline.med { stroke: var(--fg-6); stroke-width: 1.5; }
.lk-stat__serie polyline.kom { stroke: var(--a-4); stroke-width: 2.5; }
.lk-stat__serie p { display: flex; gap: 12px; margin: 4px 0 0; font: var(--type-meta); color: var(--fg-7); }
.lk-stat__serie p span:last-child { margin-left: auto; }
.lk-stat__serie p :is(.med, .kom)::before { content: ""; display: inline-block; width: 10px; height: 2px; margin: 0 5px 3px 0; background: var(--fg-6); }
.lk-stat__serie p .kom::before { background: var(--a-4); }
.lk-stat__rader .lab-stapel { display: block; margin-top: 6px; }   /* spannet är inline i lab.css: höjden 6px gällde aldrig */
.lk-stat__rader .lab-stapel > i { animation: none; transition: transform var(--lk-t) var(--lk-ease); }   /* årsbytet glider staplarna i stället för att växa om dem */
.lk-stat__rader > .pek { background: var(--w-10); }
@media (prefers-reduced-motion: reduce) { .lk-stat__rader .lab-stapel > i, .lk-stat__spela { transition: none; } }

/* textkartan (#textkarta, sok/textkarta.js): osynlig tills den får fokus (första tabbstoppet), glider då ner överst i mitten */
.lk-textkarta { --glas-alfa: .92; position: fixed; top: calc(var(--lk-inset) + var(--lk-sa-t, 0px)); left: 50%; z-index: 90; display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 999px; color: var(--fg-1); font: var(--type-label); opacity: 0; pointer-events: none; translate: -50% -8px;
  transition: opacity var(--lk-t) var(--lk-ease), translate var(--lk-t) var(--lk-ease); }
.lk-textkarta:focus { opacity: 1; translate: -50% 0; outline: 2px solid #e69f00; outline-offset: 2px; }
.lk-textkarta svg { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: reduce) { .lk-textkarta { transition: none; } }

/* snabbläget (body.lk-snabb, karta.js snabb): glaset utan blur och lins, tätt nog att läsa på */
.lk-snabb [data-glas] { --glas-alfa: .9; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.lk-snabb [data-glas-latt]::before, .lk-snabb [data-glas-latt]::after { display: none; }

/* §resa: Reseplaneraren (resaVy i karta.js). Benen bär trafikslagets färg (--kf), som linjen i kartan */
.lk-resa { display: grid; gap: 8px; padding: 4px 12px 8px; }
.lk-resa .lk-kv__sok { width: 100%; }
.lk-resa__forslag:empty { display: none; }
/* Utgå från: fem val bryts på två rader i stället för att klämmas; adressfältet överst i listan */
.lk-lf__utga .lk-sf__seg { display: flex; flex-wrap: wrap; }
.lk-lf__utga .lk-sf__seg > button { flex: 1 1 auto; }
.lk-dvadr { display: grid; gap: 6px; margin-bottom: 10px; }
.lk-dvadr .lk-kv__sok { width: 100%; }
.lk-dvsok { display: flex; align-items: center; gap: 8px; }
.lk-dvsok .lk-kv__sok { flex: 1; width: auto; min-width: 0; }
/* Täthetens tidsserie: en stapel per månad, kommande ljusare, vald månad hel och resten dämpade */
.lk-dvtid { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin: 2px 16px 4px; }
.lk-dvtid__b { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; }
.lk-dvtid__b span { width: 100%; height: max(2px, calc(var(--h) * 100%)); background: #ee2277; border-radius: 2px 2px 0 0; opacity: .8; transition: opacity var(--lk-t) var(--lk-ease); }
.lk-dvtid__b[data-fram] span { opacity: .35; }
.lk-dvtid:has([aria-pressed="true"]) .lk-dvtid__b span { opacity: .2; }
.lk-dvtid .lk-dvtid__b[aria-pressed="true"] span { opacity: 1; }
.lk-dvtid__b:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.lk-dvtid__t { display: flex; justify-content: space-between; gap: 8px; }
.lk-resa__lage { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-resa__byt { margin-left: auto; }
.lk-resa__alt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--a-4); }
.lk-resa__alt { grid-template-columns: minmax(0, 1fr) auto; } .lk-resa__alt .lab-rad__v { text-align: right; } .lk-resa__alt .lab-rad__v small { display: block; }
.lk-resa__kedja { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lk-resa__ben { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 4px; border-radius: 999px; background: var(--kf); color: #fff; font: var(--type-meta); font-weight: 600; }
.lk-resa__ben svg { width: 13px; height: 13px; }
.lk-resa__ben--tyst { background: var(--w-08); color: var(--fg-5); }
.lk-resa__steg { list-style: none; margin: 0; padding: 4px 16px 12px 34px; }
.lk-resa__steg li { position: relative; padding-bottom: 14px; font: var(--type-label); color: var(--fg-2); }
.lk-resa__steg li::before { content: ''; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--kf); }
.lk-resa__steg li:not(:last-child)::after { content: ''; position: absolute; left: -14px; top: 16px; bottom: 0; width: 2px; border-radius: 1px; background: var(--kf); opacity: .6; }
.lk-resa__steg small { display: block; font: var(--type-meta); color: var(--fg-5); }

/* Platser (POI-katalogen): tända som piller med kategorins färg, ofta valda som rutor; reglagen och ikonerna tar --kf */
.lk-pl .lk-kv__sok { width: 100%; margin-bottom: 4px; }
.lk-pl .lk-sf__rad small { display: block; color: var(--fg-5); font: var(--type-meta); }
.lk-pl__pa { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-pl__pa .lk-chip { display: inline-flex; align-items: center; gap: 6px; }
.lk-pl__pa .lk-chip svg { width: 14px; height: 14px; }
.lk-pl__prick { width: 10px; height: 10px; border-radius: 50%; background: var(--kf); box-shadow: 0 0 0 2px #fff; }
.lk-pl__ofta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lk-pl__ruta { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: 10px 4px; border: 0; border-radius: 14px; background: var(--w-06); color: var(--fg-3); font: var(--type-meta); text-align: center; cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.lk-pl__ruta svg { width: 20px; height: 20px; }
.lk-pl__ruta[aria-pressed="true"] { background: var(--kf); color: #fff; }
/* kedjechipsen under en tänd kategori; valda tar kategorins färg */
.lk-pl__kedjor { padding: 2px 0 10px 44px; }
.lk-pl__kedjor small { display: block; margin-bottom: 6px; color: var(--fg-5); font: var(--type-meta); }
.lk-pl__kedjor div { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-pl__kedjor .lk-chip[aria-pressed="true"] { background: var(--kf); color: #fff; }


/* flygsimulatorn kräver tangentbord (flygsim.js) */
@media (hover: none) and (pointer: coarse) { #kartstil [data-flygsim] { display: none; } }
/* platskortets handlingar som mockup v2:s brickor: ikon över text, tre spalter per rad (Rapport linjerar under
   raden ovan), Rundvandring en hel fylld knapp. Bara i .lk-pk; övriga kort behåller den breda .lk-atg-raden */
.lk-kort .lk-pk .lk-atg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; max-width: 520px; }
.lk-kort .lk-pk .lk-atg button { flex-direction: column; gap: 6px; padding: 12px 6px 10px; background: var(--w-08); font: var(--type-meta); text-align: center; }
.lk-kort .lk-pk .lk-atg button:hover { background: var(--w-10); }
.lk-kort .lk-pk .lk-atg button[aria-pressed="true"] { background: var(--aw-20); }
.lk-kort .lk-pk .lk-atg svg { width: 18px; height: 18px; }
.lk-kort .lk-pk .lk-atg [data-tur] { grid-column: 1 / -1; flex-direction: row; gap: 8px; padding: 10px 12px; font: var(--type-label); }