/* «Your maps» - OVERSIKTEN, venstrepanelet paa kartvelgerens kart (ADR 0071).
   Panelets skall (mål, materiale, hode, klaffen paa kanten) er kartvelgerens (lag.css);
   her bor bare det som er oversiktens eget: verktoylinja, lista, kortet, etikettene paa
   kartet og bobla.

   ETT KORTFORMAT (eierbestilling 2026-09-02). Flaten hadde en bryter mellom «liste» og
   «miniatyrer» - to sannheter om hvor stort et kart skal se ut, og en innstilling kunden
   maatte ta stilling til for aa se sine egne kart. Naa er det ÉN form: utsnittet til
   venstre i kortets hoyde, navnet og fakta til hoyre. Ruta er stor nok til at bildet
   faktisk viser noe, og liten nok til at fem kart faar plass uten aa rulle. */

/* Hodet er panelets eget (.panelhode). Tellingen staar der arealet staar paa
   tegneflaten: til hoyre, i mono - samme plass, samme stemme. */
.mk-tell{font-family:var(--mono);font-size:11.5px;color:var(--demp);letter-spacing:.02em;
  white-space:nowrap;
  /* Samme regel som for lista under: «Loading …» skal ikke rekke aa bli sett naar
     kartene kommer med en gang (maalt 212 ms paa telefon 2026-09-04). */
  animation:mk-vent .2s ease-out .25s backwards}

/* VERKTOYLINJA: soek, rekkefolge og kart-bryteren - tre innstillinger for den samme
   lista, paa den samme linja (eierbestilling 2026-09-03). Soeket gir fra seg plassen;
   det er navnet man skriver, ikke plassholderen man leser. */
.mk-styr{flex:none;padding:12px 18px 10px;display:flex;align-items:center;gap:7px}
.mk-sok{flex:1;min-width:84px;display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;
  border:1px solid var(--kant);border-radius:999px;background:#fff;color:var(--demp);
  transition:border-color .18s var(--kurve),box-shadow .18s var(--kurve)}
.mk-sok:hover{border-color:var(--demp)}
.mk-sok:focus-within{border-color:transparent;box-shadow:0 0 0 2px var(--petrol)}
.mk-sok svg{width:14px;height:14px;color:var(--demp);flex:none}
.mk-sok input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12.5px;
  color:var(--svart);outline:none}
.mk-sok input::placeholder{color:var(--demp)}
.mk-sok input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* Sorteringen: samme rolige velgerknapp som pluginen (.velgfelt i pille-form),
   aldri en native select - den apner OS-ens egen meny midt i produktet. */
.mk-sort{position:relative;flex:none}
.mk-sortknapp{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;
  border:1px solid var(--kant);border-radius:999px;background:#fff;cursor:pointer;
  font:inherit;font-size:11.5px;color:var(--svart);white-space:nowrap;
  transition:border-color .18s var(--kurve),box-shadow .18s var(--kurve)}
.mk-sortknapp:hover{border-color:var(--demp);box-shadow:0 3px 10px rgba(36,36,36,.06)}
.mk-sortknapp:focus-visible{outline:2px solid var(--gronn);outline-offset:1px}
.mk-sortknapp svg{width:11px;height:7px;color:var(--demp);flex:none;
  transition:transform .18s var(--kurve)}
.mk-sortknapp[aria-expanded="true"] svg{transform:rotate(180deg)}
.mk-sortliste{position:absolute;z-index:20;right:0;top:calc(100% + 5px);min-width:158px;
  padding:5px;border:1px solid var(--hairline);border-radius:11px;background:#fff;
  box-shadow:0 16px 38px rgba(36,36,36,.16)}
.mk-sortliste[hidden]{display:none}
.mk-sortliste div{padding:7px 9px;border-radius:7px;font-size:12.5px;color:var(--svart);
  cursor:pointer;outline:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mk-sortliste div:hover,.mk-sortliste div:focus{background:var(--papir-dyp,#EDEFED)}
.mk-sortliste div[aria-selected="true"]{color:var(--gronn-dyp);font-weight:600}
.mk-sortliste div[aria-selected="true"]::after{content:"✓";font-size:12px}

/* VISNINGSBRYTEREN: to knapper i én pille, samme hoyde og haarlinje som soeket og
   rekkefolgen. Den valgte baerer husets grönne fyll - samme sprak som et valgt
   produktkort. Formen er pluginens «My maps», saa de to flatene leses likt. */
.mk-visning{display:flex;align-items:center;flex:none;height:32px;padding:2px;gap:1px;
  border:1px solid var(--kant);border-radius:999px;background:#fff}
.mk-visning button{width:28px;height:26px;display:flex;align-items:center;
  justify-content:center;border:0;border-radius:999px;background:none;color:var(--demp);
  cursor:pointer;transition:background .18s var(--kurve),color .18s var(--kurve)}
.mk-visning button:hover{color:var(--svart)}
.mk-visning button[aria-pressed="true"]{background:color-mix(in srgb,var(--gronn) 13%,#fff);
  color:var(--gronn-dyp)}
.mk-visning button:focus-visible{outline:2px solid var(--gronn);outline-offset:1px}
.mk-visning svg{width:14px;height:14px}

/* KARTET ER EN VISNING, IKKE ET VILKAAR (eierbestilling 2026-09-02). Med mange kart over
   samme by blir omrissene et teppe man ikke ser gjennom - og noen ganger vil kunden bare
   se KARTET, ikke sine egne firkanter oppaa det. Bryteren er husets egen (.lag-bryter,
   samme som kartlagene): samme handling, samme form.
   FOTLINJA (eierbestilling 2026-09-04). Den stod som en ordloes pille paa verktoylinja
   og maatte forklare seg med en title-attributt ingen leser. Her nede er den en hel
   setning med bryteren i den andre enden - panelets egen bunnlinje, i samme haarlinje
   som panelfoten paa kjopsflaten. Hele linja er treffflate (<label>). */
/* `label` er mono og VERSALER i lag.css - husets etikettstemme, riktig for en
   overskrift over et felt. Dette er ikke en overskrift, det er en innstilling man
   LESER, saa den laaner formen fra lagmenyens egen bryterrad (.lag-navn): brodfont,
   normal skrift, ingen sperring. */
.mk-fot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;border-top:1px solid var(--hairline);cursor:pointer;
  font-family:var(--body);font-size:.82rem;letter-spacing:0;text-transform:none;
  color:var(--demp);
  transition:color .18s var(--kurve),background .18s var(--kurve)}
.mk-fot:hover{color:var(--svart);background:var(--papir-dyp,#EDEFED)}
.mk-fot:has(:focus-visible){box-shadow:inset 0 0 0 2px var(--petrol)}
.mk-fot .lag-bryter{flex:none;cursor:pointer}
@media (max-width:1080px){.mk-fot{padding-inline:14px}}

/* KORTET: utsnitt til venstre i full radhoyde, navnet og fakta til hoyre.
   Utsnittet tegner kartets EGET omriss fra request_geojson til det ekte bildet er hentet
   (/api/pakke/<id>/utsnitt - MapLibre-snapshotet fra bestillingen, bakt inn i pakkens
   inventar). En form som er sann slaar en tom rute, og den skiller kartene fra hverandre. */
.mk-liste{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 18px 8px;
  display:flex;flex-direction:column;gap:8px}
/* `flex:none` er ikke pynt: lista er en rullende beholder med fast hoyde, og et kort med
   `overflow:hidden` mister sin automatiske minstehoyde - uten den klemmes kortene flate
   og teksten klippes bort. */
.mk-kort{display:flex;flex-direction:row;align-items:stretch;flex:none;width:100%;
  text-align:left;padding:0;border:1px solid var(--hairline);border-radius:12px;
  background:#fff;overflow:hidden;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .18s var(--kurve),box-shadow .18s var(--kurve)}
.mk-kort:hover,.mk-kort.pekt{border-color:var(--kant);box-shadow:0 6px 18px rgba(36,36,36,.07)}
.mk-kort:focus-visible{outline:2px solid var(--gronn);outline-offset:2px}
.mk-bilde{position:relative;flex:none;width:112px}
.mk-utsnitt{width:100%;height:100%;min-height:84px;overflow:hidden;background:var(--grunn);
  box-shadow:inset -1px 0 0 var(--hairline)}
/* BEGGE barna maa bindes til ruta. Bare `svg` var stylet, saa det ekte kartbildet la seg
   ut i sin egen naturlige stoerrelse og dro kortet flere hundre piksler hoyere enn
   omriss-kortene ved siden av (eierfunn 08-30). `cover`: bildet beskjaeres, aldri strekkes. */
.mk-utsnitt svg,.mk-utsnitt img{display:block;width:100%;height:100%;object-fit:cover}
.mk-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:10px 13px}
/* Statusen staar paa navnelinja, ikke oppaa utsnittet: paa en 112 px rute spiste chipen
   kartformen, og status er noe man LESER. Utsnittet faar vaere kartet. */
.mk-navnrad{display:flex;align-items:baseline;gap:8px;min-width:0}
/* KUNDENS EGET NUMMER. Naar 35 kart heter «Bergen» er nummeret det eneste som skiller dem
   fra hverandre - men det er en REFERANSE, ikke en tittel. Mono og dempet (samme sprak som
   statusmerket i den andre enden av raden), tabular slik at sifrene staar i kolonne
   nedover lista, og med fast bredde saa #1 og #35 gir navnet samme venstrekant. */
.mk-kartnr{flex:none;min-width:2.4ch;font-family:var(--mono);font-size:10.5px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--demp)}
.mk-navn{flex:1;min-width:0;font-weight:600;font-size:13.5px;color:var(--svart);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:11.5px;
  color:var(--demp);min-width:0}
.mk-meta-tekst{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-meta2{margin-top:5px;font-family:var(--mono);font-size:10px;color:var(--demp);
  opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* MINIATYRVISNINGEN: samme kort, snudd. Utsnittet legger seg oeverst i full bredde og
   blir stort nok til aa kjenne igjen et kart paa formen; teksten faller under. Ett kort
   per rad - panelet er 316-378 px bredt, og to kolonner her ville gjort miniatyrene
   MINDRE enn lista de skulle vaere et alternativ til. */
.mk-liste.er-galleri .mk-kort{flex-direction:column}
.mk-liste.er-galleri .mk-bilde{width:100%}
.mk-liste.er-galleri .mk-utsnitt{min-height:0;aspect-ratio:16 / 9;
  box-shadow:inset 0 -1px 0 var(--hairline)}
.mk-liste.er-galleri .mk-info{padding:9px 13px 11px}

/* Ankomst: en kort trapp naar lista faktisk lastes - aldri ved sok eller sortering,
   der en entre for hvert tastetrykk er stoy. Tak paa 8, som i pluginen. */
.mk-liste.ankommer .mk-kort{animation:mk-inn .3s var(--kurve) both;
  animation-delay:calc(var(--i,0) * 22ms)}
@keyframes mk-inn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Status som farge + ord, aldri farge alene (WCAG 1.4.1). */
.mk-merke{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;color:var(--demp)}
.mk-merke::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.mk-merke.ready{color:#2E7D52}
.mk-merke.failed{color:#B23A22}
.mk-merke.building{color:#B06A2C}
.mk-merke.building::before{animation:mk-puls 1.9s var(--kurve) infinite}
@keyframes mk-puls{0%,100%{opacity:.35}50%{opacity:1}}

/* Samme regel som andre steder: en melding som bare staar i et oyeblikk mens lista
   hentes, skal ikke rekke aa bli sett. Den toner inn etter et kvart sekund. */
.mk-melding{padding:18px 12px;font-size:14px;line-height:1.55;color:var(--tekst);
  animation:mk-vent .2s ease-out .25s backwards}
@keyframes mk-vent{from{opacity:0}}
.mk-melding b{color:var(--svart);font-weight:600}
.mk-melding a{color:var(--petrol)}

/* KARTBOBLEN er kortets info-blokk pluss en handlingslinje: navn, status, dato/areal,
   og hva klikket foerer til, med samme pil som all annen navigasjon.
   `pointer-events:none` er ikke pynt: bobla foelger musepekeren, og uten den kan den
   legge seg mellom pekeren og omrisset og spise klikket den nettopp lovte. */
.mk-popup{pointer-events:none}
.mk-popup .maplibregl-popup-content{width:max-content;max-width:250px;
  padding:10px 13px 9px;border-radius:11px;border:1px solid var(--hairline);
  box-shadow:0 10px 28px rgba(36,36,36,.16);font-family:var(--sans);background:#fff}
.mk-popup .mk-navnrad{gap:8px}
.mk-popup .mk-meta{margin-top:2px}
.mk-popup .mk-popup-apne{display:flex;align-items:center;gap:6px;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--hairline);
  color:var(--petrol);font-size:11.5px;font-weight:500}
.mk-popup .mk-popup-apne svg{width:12px;height:12px;flex:none}
.mk-popup .maplibregl-popup-tip{border-top-color:#fff}

@media (max-width:1080px){.mk-liste{padding-inline:14px}}
@media (prefers-reduced-motion:reduce){
  .mk-merke.building::before{animation:none;opacity:.75}
  .mk-kort,.mk-sok,.mk-sortknapp svg{transition:none}
  .mk-liste.ankommer .mk-kort{animation:none}
}