/* Leads – gemensam stilmall för alla bolag.
   Grund: 44 px kontroller, 8 px hörn på kontroller, 12 px hörn på ytor, avstånd i 4-skala (4/8/12/16/24).
   Alla färger, radier, skuggor och kontrollhöjder är tokens nedan – inga hårdkodade värden i reglerna.
   Ordning: 1 tokens och grund · 2 sidhuvud · 3 knappar · 4 fält · 5 sökbar väljare · 6 filter ·
   7 resultat och listor · 8 företagskort och kontaktlogg · 9 sidopanel · 10 slumpa · 11 besked och ytor ·
   12 inställningar · 13 affärer och översikt · 14 inloggning · 15 responsivt (1000/640/370) · 16 tillgänglighet. */

/* ---------- 1. Tokens och grund ---------- */
:root {
  /* Varm, ljus palett enligt designskissen 2026-10-08. Grönt är appens beslutade profilfärg. */
  --bg:#f7f6f2; --yta:#fff; --yta-2:#f1f0eb; --yta-hover:#edf5ef; --vit:#fff;
  --text:#1c2420; --text-2:#5b655e; --kant:#e4e2da; --kant-stark:#d6d3ca;
  --gron:#1f6b3a; --gron-mork:#16522c; --gron-ljus:#eef5f0; --gron-mellan:#cfe3d5; --gron-text:#17552d;
  --fara:#a3261f; --fara-ljus:#fbeaea; --fara-kant:#eccac7; --varn:#7a4d00; --varn-ljus:#fbf1dc;
  --info:#1f4f7a; --info-ljus:#eef3f8; --lila:#5b3a91; --lila-ljus:#f1ebfa;
  --overlay:#172c2259;
  /* Hörn: ytor, kontroller, inre element (märken, knappar i segment), små detaljer (staplar, kodtaggar). */
  --radie:12px; --radie-liten:8px; --radie-inre:6px; --radie-mini:4px;
  /* Höjder: kontroller, och knappar inuti ett segment med 3 px kant (38 + 2×3 = 44). */
  --kontroll:44px; --kontroll-inre:38px;
  --skugga:0 1px 2px #1c24200a; --skugga-lyft:0 1px 2px #1c242024; --skugga-hover:0 8px 24px #1c242016;
  --skugga-kort:0 4px 12px #20332914; --skugga-panel:-16px 0 48px #172c221a;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --fokus:0 0 0 3px var(--vit),0 0 0 5px var(--gron);
}
* {box-sizing:border-box;}
[hidden] {display:none!important;}
html {-webkit-text-size-adjust:100%;scroll-padding-top:100px;}
body {margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font);}
a {color:var(--gron);text-underline-offset:3px;}
a:hover {color:var(--gron-mork);}
h1,h2,h3,h4 {margin:0 0 12px;line-height:1.25;letter-spacing:-.025em;font-weight:650;}
h1 {font-size:28px;} h2 {font-size:22px;} h3 {font-size:18px;}
p {margin:0 0 12px;}
.dim,.hjalp {color:var(--text-2);}
.hjalp,.kalla {font-size:13px;color:var(--text-2);}
.varning-text {color:var(--varn);} .fel-text {color:var(--fara);}
.sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible {outline:2px solid var(--gron);outline-offset:3px;}
.hoppa {position:absolute;left:-9999px;top:8px;z-index:50;padding:12px;background:var(--yta);}
.hoppa:focus {left:12px;}
.icon {width:18px;height:18px;flex:none;vertical-align:middle;}
.bara-mobil {display:none;}

/* ---------- 2. Sidhuvud, meny och sidans ram ---------- */
.topp {background:var(--yta);border-bottom:1px solid var(--kant);position:sticky;top:0;z-index:20;}
.topp-inre {max-width:1240px;margin:auto;padding:12px 24px;display:flex;align-items:center;gap:24px;}
.logo {display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-size:16px;font-weight:700;white-space:nowrap;letter-spacing:-.02em;}
.logo-text {color:var(--text);}
.logo-text>span {color:var(--text-2);font-weight:500;}
.logo-markor {width:28px;height:28px;border-radius:var(--radie-liten);background:var(--gron);position:relative;}
.logo-markor::after {content:"";position:absolute;inset:7px 9px;border-radius:50% 50% 50% 0;background:var(--vit);transform:rotate(-45deg);}
.huvudmeny {display:flex;gap:4px;}
.huvudmeny a {display:flex;align-items:center;justify-content:center;min-height:var(--kontroll);padding:8px 14px;border-radius:var(--radie-liten);color:var(--text-2);font-size:14px;font-weight:550;text-decoration:none;white-space:nowrap;}
.huvudmeny a:hover {background:var(--yta-2);color:var(--text);}
.huvudmeny a[aria-current] {background:var(--gron-ljus);color:var(--gron-text);}
.kontomeny {margin-left:auto;position:relative;}
.konto-knapp {list-style:none;display:flex;align-items:center;gap:8px;min-height:var(--kontroll);padding:0 10px 0 4px;border-radius:var(--radie-liten);cursor:pointer;font-size:14px;font-weight:550;color:var(--text-2);}
.konto-knapp::-webkit-details-marker {display:none;}
.konto-knapp:hover,.kontomeny[open]>.konto-knapp,.konto-knapp.aktiv {background:var(--yta-2);color:var(--text);}
.initialer {display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gron-ljus);color:var(--gron-text);font-size:12px;font-weight:700;letter-spacing:.02em;}
.konto-knapp.ej-vald .initialer {background:var(--varn-ljus);color:var(--varn);}
.konto-namn {max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.konto-lista {position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;max-width:calc(100vw - 32px);padding:6px;background:var(--yta);border:1px solid var(--kant);border-radius:var(--radie);box-shadow:var(--skugga-hover);}
.konto-vem {display:flex;flex-direction:column;gap:2px;margin:0 0 6px;padding:8px 10px 10px;border-bottom:1px solid var(--kant);font-size:13px;color:var(--text-2);overflow-wrap:anywhere;}
.konto-vem strong {font-size:14px;color:var(--text);}
.konto-rad {display:flex;align-items:center;gap:8px;width:100%;min-height:var(--kontroll);padding:0 10px;border:0;border-radius:var(--radie-inre);background:none;color:var(--text);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer;}
.konto-rad:hover,.konto-rad[aria-current] {background:var(--yta-2);}
.konto-ut {margin:0;}
.jag-ar {margin:0 0 6px;padding:4px 10px 10px;border-bottom:1px solid var(--kant);}
.jag-ar label {display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-2);}
.jag-ar select {width:100%;}
.jag-ar select.ej-vald {border-color:var(--varn);}
main {max-width:1240px;margin:auto;padding:32px 24px 64px;outline:none;}
.sidintro {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;}
.sidintro h1 {margin:0;}
.sidintro.med-knapp {align-items:flex-start;}
.sidintro .dim {margin:6px 0 0;}
.ingress {color:var(--text-2);max-width:60ch;}
.brodsmula {margin:0 0 12px;font-size:14px;font-weight:600;}
.brodsmula a {display:inline-flex;align-items:center;gap:6px;text-decoration:none;}

/* ---------- 3. Knappar: en storlek, varianter bara för hierarki ---------- */
.knapp,.chip-knapp {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--kontroll);padding:10px 16px;border:1px solid transparent;border-radius:var(--radie-liten);font:600 14px/22px var(--font);text-decoration:none;cursor:pointer;background:var(--gron);color:var(--vit);transition:background .15s,border-color .15s;}
.knapp:hover {background:var(--gron-mork);color:var(--vit);}
.knapp.sekundar,.chip-knapp {background:var(--yta);color:var(--text);border-color:var(--kant-stark);}
.knapp.sekundar:hover,.chip-knapp:hover {background:var(--yta-2);border-color:var(--gron);color:var(--gron-text);}
.knapp.text {background:transparent;color:var(--gron);padding-inline:12px;}
.knapp.text:hover {background:var(--gron-ljus);}
.knapp.fara {background:var(--yta);color:var(--fara);border-color:var(--kant-stark);}
.knapp.fara:hover {background:var(--fara-ljus);border-color:var(--fara);}
.knapp.fara-text {color:var(--fara);justify-self:start;padding-inline:0;}
.knapp.fara-text:hover {background:transparent;text-decoration:underline;}
.knapp.inaktiv,.knapp[aria-disabled="true"],.knapp:disabled {color:var(--text-2);background:var(--yta-2);border-color:var(--kant);cursor:not-allowed;opacity:.65;pointer-events:none;}
.knapp.laddar {cursor:progress;}
.knapp.laddar::before,.laddar-text::before {content:"";width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:snurra .7s linear infinite;}
.knapprad,.inline {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.inline {display:inline-flex;margin:0;}
.knapprad {margin-top:16px;}
@keyframes snurra {to {transform:rotate(360deg);}}
/* Länk som på mobil blir en knapp (se responsivt). */
.lank-knapp {text-decoration:underline;}

/* ---------- 4. Fält, kryssrutor och utfällningar ---------- */
input,select,textarea {scroll-margin-top:160px;font:400 16px/22px var(--font);color:var(--text);background:var(--yta);border:1px solid var(--kant-stark);border-radius:var(--radie-liten);padding:10px 12px;min-height:var(--kontroll);max-width:100%;}
select {appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2359685f' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 12px center;}
select[multiple] {background-image:none;}
textarea {resize:vertical;line-height:1.5;}
input::placeholder,textarea::placeholder {color:var(--text-2);opacity:1;}
input:focus-visible,select:focus-visible,textarea:focus-visible {outline:2px solid var(--gron);outline-offset:2px;}
input[type=checkbox],input[type=radio] {appearance:none;flex:none;width:20px;height:20px;min-height:20px;padding:0;margin:0;border:1.5px solid var(--kant-stark);border-radius:var(--radie-inre);display:inline-grid;place-content:center;cursor:pointer;}
input[type=checkbox]:checked {background:var(--gron);border-color:var(--gron);}
input[type=checkbox]:checked::after {content:"";width:9px;height:5px;border:solid var(--vit);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);}
input[type=radio] {border-radius:50%;}
input[type=radio]:checked::after {content:"";width:10px;height:10px;border-radius:50%;background:var(--gron);}
label,legend,.falt-etikett {font-size:14px;font-weight:600;}
fieldset {border:0;padding:0;margin:0;min-width:0;}
legend {margin-bottom:8px;}
.kryss,.kryssruta-stor {display:flex;align-items:center;gap:10px;min-height:var(--kontroll);font-size:14px;font-weight:500;cursor:pointer;}
.kryssruta-stor {font-weight:600;}
.stack,.falt {display:grid;gap:8px;min-width:0;}
.falt {align-content:start;}
.falt input,.falt select,.falt textarea {width:100%;}
.falt .hjalp {font-size:12px;margin:0;}
.falt-par {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.falt-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-bottom:16px;}
.falt-grid .bred {grid-column:1/-1;}
.falt-rubrik {font-size:15px;margin:0 0 10px;}
.checklista,.formkryss {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;}
.checklista {grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
summary {scroll-margin-top:160px;list-style:none;display:flex;align-items:center;gap:8px;min-height:var(--kontroll);padding:10px 0;font-size:14px;font-weight:600;cursor:pointer;color:var(--text);}
summary::-webkit-details-marker {display:none;}
summary::after {content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 4px 4px auto;flex:none;}
details[open]>summary::after {transform:rotate(225deg);margin-bottom:-4px;}
/* En utfällning vars summary är en knapp eller länk visar ingen pil. */
.export-val>summary,.mg-ny summary,.forlorad-val summary,.redigera summary,.ruta details summary.knapp {list-style:none;}
.mg-ny summary::-webkit-details-marker,.forlorad-val summary::-webkit-details-marker,.redigera summary::-webkit-details-marker,.ruta details summary.knapp::-webkit-details-marker {display:none;}
/* Segment: en rad knappar där ett val är markerat. Samma utseende överallt: kontaktkanal (radio), affärsområde
   och visning (länkar), kontakttyp (radio). Grå ram, vald knapp vit med skugga, 44 px totalt. */
.segment {display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--yta-2);border-radius:var(--radie-liten);width:fit-content;}
.segment label {position:relative;}
.segment input {position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.segment span {display:inline-flex;align-items:center;justify-content:center;min-height:var(--kontroll-inre);padding:0 14px;border-radius:var(--radie-inre);
  font-size:14px;color:var(--text-2);cursor:pointer;}
.segment input:checked+span {background:var(--yta);color:var(--text);font-weight:600;box-shadow:var(--skugga-lyft);}
.segment label:has(:focus-visible) span {outline:2px solid var(--gron);outline-offset:-2px;}
.segment-lankar,.loggtyper {display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--yta-2);border-radius:var(--radie-liten);}
.segment-lankar a,.loggtyper span {display:inline-flex;align-items:center;min-height:var(--kontroll-inre);padding:0 12px;border-radius:var(--radie-inre);font-size:14px;color:var(--text-2);text-decoration:none;}
.segment-lankar a:hover {color:var(--text);}
.segment-lankar a[aria-current],.loggtyper input:checked+span {background:var(--yta);color:var(--text);font-weight:600;box-shadow:var(--skugga-lyft);}
.loggtyper {justify-self:start;}
.loggtyper label {position:relative;}
.loggtyper input {position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.loggtyper label:has(:focus-visible) span {outline:2px solid var(--gron);outline-offset:-2px;}

/* ---------- 5. Sökbar väljare: samma geometri som en vanlig select ---------- */
.valjare {position:relative;min-height:var(--kontroll);border:1px solid var(--kant-stark);border-radius:var(--radie-liten);background:var(--yta);display:flex;align-items:center;padding:0 68px 0 12px;cursor:pointer;}
.valjare:focus-within {outline:2px solid var(--gron);outline-offset:2px;}
.valjare::after {content:"";position:absolute;right:17px;top:16px;width:7px;height:7px;border:solid var(--text-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none;}
.valjare input {border:0;border-radius:0;background:transparent;padding:10px 0;min-height:calc(var(--kontroll) - 2px);height:calc(var(--kontroll) - 2px);width:100%;min-width:0;outline:none;box-shadow:none;}
.valjare input::placeholder {color:var(--text);}
.valjare:has(input:disabled) {background:var(--yta-2);border-color:var(--kant);cursor:not-allowed;}
.valjare input:disabled {background:transparent;color:var(--text-2);-webkit-text-fill-color:var(--text-2);opacity:1;cursor:not-allowed;}
.valjare input:disabled::placeholder {color:var(--text-2);opacity:1;}
.valjare-rensa {position:absolute;right:32px;top:0;display:grid;place-items:center;width:32px;height:calc(var(--kontroll) - 2px);border:0;background:transparent;color:var(--text-2);border-radius:var(--radie-liten);cursor:pointer;}
.valjare-rensa:hover {color:var(--fara);background:var(--yta-2);}
.valjare-lista {position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);z-index:15;background:var(--yta);border:1px solid var(--kant-stark);border-radius:var(--radie-liten);box-shadow:var(--skugga-hover);max-height:min(360px,45vh);overflow:auto;list-style:none;margin:0;padding:4px;}
.valjare-lista .grupp {padding:12px 10px 4px;color:var(--text-2);font-size:12px;font-weight:600;}
.valjare-lista [role=option] {position:relative;display:flex;align-items:center;gap:8px;min-height:var(--kontroll);padding:10px 10px 10px 32px;border-radius:var(--radie-mini);cursor:pointer;font-size:14px;}
.valjare-lista [role=option].aktiv,.valjare-lista [role=option]:hover {background:var(--yta-2);}
.valjare-lista [aria-selected=true] {color:var(--gron);background:var(--gron-ljus);}
.valjare-lista [aria-selected=true]::before {content:"";position:absolute;left:12px;top:18px;width:9px;height:5px;border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg);}
.valjare-lista [role=option]>span:first-child {flex:1;min-width:0;}
.valjare-lista .extra {font-size:12px;color:var(--text-2);max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.valjare-lista .tom {padding:12px;font-size:14px;color:var(--text-2);}

/* ---------- 6. Filter (Hitta, Slumpa, Kontaktade) ---------- */
.filterform {background:var(--yta);border:1px solid var(--kant);border-radius:var(--radie);padding:24px;display:grid;gap:16px;margin-bottom:24px;}
.prospekt-filter {grid-template-columns:minmax(0,1fr) auto;}
.falt-sok {min-width:0;}
.filter-submit {align-self:end;min-width:100px;position:relative;z-index:1;}
.filter-choices {grid-column:1/-1;border-top:1px solid var(--kant);padding-top:4px;min-width:0;}
.filter-choices>summary {width:100%;}
.filter-body {display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:16px;margin-top:12px;}
.filter-body>.falt:has(.segment) {grid-column:1/-1;}
.filter-rad {grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--kant);padding-top:8px;}
.fler-filter {flex:1;min-width:0;}
.fler-filter>summary {justify-content:flex-end;color:var(--gron);}
.fler-filter>summary::after {margin-left:8px;}
.fler-filter[open] {flex-basis:100%;}
.fler-filter[open]>summary {justify-content:flex-start;}
.fler-filter[open]>summary::after {margin-left:auto;}
.fler-innehall {display:grid;grid-template-columns:1.5fr 1fr;gap:24px;padding:16px 0 0;}
.foretagsformer {padding:0;}
.foretagsformer details {margin-top:8px;border-top:1px solid var(--kant);}
.formval-knappar {display:flex;gap:8px;margin-top:8px;}
.formval-knappar .knapp:first-child {margin-left:-12px;}
.filter-storlek {display:grid;gap:16px;align-content:start;}
.filterform.kompakt {grid-template-columns:2fr 1fr auto;align-items:end;}
.filterform.kompakt .filter-rad {grid-column:auto;border:0;padding:0;}
.filterform.kompakt .filter-rad>.knapp {min-width:88px;}
.prospekt-filter:not(:has(.falt-sok)) {grid-template-columns:1fr;}
.prospekt-filter:not(:has(.falt-sok)) .filter-choices {grid-row:1;border:0;padding:0;}
.prospekt-filter:not(:has(.falt-sok)) .filter-choices>summary {display:none;}
.prospekt-filter:not(:has(.falt-sok)) .filter-body {margin:0;}
/* Knappen Visa företag längst ned i filtret; tydlig markering när filtret ändrats men listan inte uppdaterats. */
.filter-fot {grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding-top:12px;border-top:1px solid var(--kant);}
.filter-andrat {font-size:13px;color:var(--varn);}
.filter-andrat:empty {display:none;}
.filterform.andrad .filter-fot .knapp {box-shadow:0 0 0 3px var(--gron-mellan);}
.filter-antal {font-weight:500;color:var(--text-2);}
/* Innan app.js byggt de sökbara väljarna: reservera samma höjd som väljaren, så att sidan inte hoppar. */
.js select[data-valjare] {visibility:hidden;height:var(--kontroll);min-height:var(--kontroll);overflow:hidden;}

/* ---------- 7. Resultat, chips, märken och listor ---------- */
.resultatrad {display:flex;flex-direction:column;gap:8px;margin:16px 0 12px;}
/* Antal till vänster, verktygsraden (slumpa + export) till höger på samma rad. */
.resultat-topp {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;}
.resultat-topp p {margin:0;font-size:13px;color:var(--text-2);}
.resultatrad strong {font-size:16px;font-weight:600;color:var(--text);}
.verktyg {display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
.resultat-filter {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;}
.kanal-forklaring {margin:0;max-width:72ch;}
.data-alder::before {content:" · ";}
.export-val {position:relative;}
.export-val>summary {gap:16px;}
.export-format {position:absolute;top:calc(100% + 8px);left:0;min-width:180px;padding:4px;border:1px solid var(--kant-stark);border-radius:var(--radie-liten);background:var(--yta);box-shadow:var(--skugga-hover);z-index:20;}
.export-format a {display:flex;align-items:center;min-height:var(--kontroll);padding:8px 12px;border-radius:var(--radie-mini);text-decoration:none;}
.export-format a:hover {background:var(--yta-2);}
.aktiva-filter {display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.chip {display:inline-flex;align-items:center;gap:8px;border:1px solid var(--kant);border-radius:var(--radie-liten);background:var(--yta);color:var(--text-2);min-height:36px;padding:6px 10px;font-size:13px;text-decoration:none;}
.chip:hover {border-color:var(--gron);color:var(--gron);}
.chip .icon {width:14px;height:14px;}
.rensa {font-size:13px;font-weight:600;min-height:var(--kontroll);display:inline-flex;align-items:center;}
.resultat-rubriker,.resultatkort {display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.2fr) 18px;gap:24px;align-items:center;}
.resultat-rubriker {padding:0 20px 12px;color:var(--text-2);font-size:12px;font-weight:600;}
.resultatgrid,.kontaktlista {list-style:none;padding:0;margin:0;border:1px solid var(--kant);border-radius:var(--radie);background:var(--yta);overflow:hidden;}
.resultatgrid>li+li,.kontaktlista>li+li {border-top:1px solid var(--kant);}
.resultatgrid .ankare {display:none;}
.resultatkort,.kontaktrad {padding:20px;min-height:88px;color:var(--text);text-decoration:none;transition:background .15s;}
.resultatkort:hover,.kontaktrad:hover {background:var(--yta-hover);color:var(--text);}
.resultatkort:focus-visible,.kontaktrad:focus-visible {outline-offset:-3px;}
.rk-identitet {display:grid;gap:4px;min-width:0;}
.rk-namn {font-size:15px;font-weight:650;line-height:1.4;overflow-wrap:anywhere;}
.rk-bransch {font-size:13px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rk-ort,.rk-storlek {font-size:13px;color:var(--text-2);}
.rk-fot {display:flex;flex-wrap:wrap;gap:4px;}
.rk-pil {color:var(--text-2);}
.visa-fler {text-align:center;margin-top:24px;}
.markering,.demo-pill {display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;line-height:18px;padding:3px 8px;border-radius:var(--radie-inre);background:var(--yta-2);color:var(--text-2);}
.demo-pill {white-space:nowrap;}
.markering.kontaktad {color:var(--gron);background:var(--gron-ljus);}
.markering.affar {color:var(--gron-text);background:var(--gron-mellan);}
.markering.sparr {color:var(--fara);background:var(--fara-ljus);}
.markering.varning {color:var(--varn);background:var(--varn-ljus);}
.markering.person {color:var(--lila);background:var(--lila-ljus);}
.markering.demo,.demo-pill {color:var(--text-2);background:var(--yta-2);}
.markering .icon {width:14px;height:14px;}
.kod {font-size:12px;color:var(--text-2);background:var(--yta-2);padding:2px 6px;border-radius:var(--radie-mini);}
/* Kontaktade */
.kontaktrad {display:grid;gap:8px;}
/* Statusmärket (Affär, Kontakta ej, Kontaktspärr) står ovanför namnet, som på företagskortet. */
.kr-markeringar {display:flex;gap:4px;flex-wrap:wrap;margin-bottom:-2px;}
.kr-meta {color:var(--text-2);font-size:13px;}
.kr-anteckning {font-size:14px;color:var(--text-2);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;border-left:2px solid var(--kant);padding-left:12px;}
.kr-anteckning:empty {display:none;}
/* Rad i Kontaktade: företaget till vänster, knappen Skapa/Öppna affär i en egen kolumn till höger.
   Hela raden markeras vid hovring, även när pekaren är över knappen. */
.kontaktlista>li {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;transition:background .15s;}
.kontaktlista>li:hover,.kontaktlista>li:hover .kontaktrad {background:var(--yta-hover);}
.kr-atgard {display:flex;align-items:center;padding:0 20px 0 8px;}

/* ---------- 8. Företagskort och kontaktlogg ---------- */
.foretagskort {display:flex;flex-direction:column;background:var(--yta);min-width:0;}
.kort-sida,.slump-kort .foretagskort {border:1px solid var(--kant);border-radius:var(--radie);padding:24px;max-width:880px;margin:auto;}
.kort-huvud {padding-bottom:24px;}
.kort-markeringar {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.kort-namn {font-size:26px;margin:0 0 8px;overflow-wrap:anywhere;outline:none;}
.kort-ingress {font-size:14px;color:var(--text-2);margin:0;}
.kort-sektion {border-top:1px solid var(--kant);padding:16px 0;}
.kontaktvagar {padding:0 0 24px;border-top:0;display:grid;gap:0;}
.kontaktvag {padding:16px 0;border-top:1px solid var(--kant);display:grid;gap:8px;}
.vag-etikett {font-size:13px;color:var(--text-2);font-weight:500;}
.vag-innehall {display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
.vag-varde {flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:15px;}
.vag-ej {color:var(--text-2);font-size:14px;}
.hamta-kontakt {display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:16px;border-top:1px solid var(--kant);}
.hamta-kontakt .notis {flex-basis:100%;margin:0;}
.affarsruta {display:flex;flex-direction:column;gap:8px;}
.affarsruta .ar-affar {display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid var(--kant);border-radius:var(--radie-liten);}
.affarsruta .ar-affar p {margin:2px 0 0;font-size:13px;}
.anteckning-rad {display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:12px;}
.kontaktlogg {display:grid;gap:12px;padding:16px 0 24px;}
.affar-logg .kontaktlogg {padding-top:0;}
.logg-huvud {display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;}
.logg-huvud h3 {margin:0;font-size:15px;font-weight:650;}
.logg-huvud .dim {font-size:13px;}
.logg-info {margin:0;font-size:13px;}
.logga,.lp-andra form {display:grid;gap:10px;}
.logga textarea,.lp-andra textarea {width:100%;min-height:64px;}
.logga .anteckning-rad {justify-content:flex-start;}
/* Kontaktloggen som tidslinje: en prick per kontakt och en lodrät linje mellan dem. */
.loggposter {list-style:none;margin:8px 0 0;padding:0;}
.loggposter li {position:relative;padding:0 0 18px 24px;}
.loggposter li::before {content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--gron);}
.loggposter li::after {content:"";position:absolute;left:4px;top:18px;bottom:0;width:1px;background:var(--kant-stark);}
.loggposter li:last-child {padding-bottom:4px;}
.loggposter li:last-child::after {display:none;}
.lp-huvud {display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;}
.lp-typ {font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--radie-inre);background:var(--gron-ljus);color:var(--gron-text);}
.lp-text {margin:4px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;}
.lp-andra {margin-left:auto;}
.lp-andra summary {display:inline-flex;min-height:0;padding:2px 0;font-size:13px;font-weight:500;color:var(--text-2);}
.lp-andra summary::after {display:none;}
.lp-andra summary:hover {color:var(--gron-text);text-decoration:underline;}
/* Medan posten redigeras står texten bara i redigeringsfältet. */
.lp-huvud:has(.lp-andra[open]) + .lp-text {display:none;}
.lp-andra[open] {flex-basis:100%;margin-left:0;display:grid;gap:8px;padding:12px;margin-top:8px;background:var(--yta-2);border-radius:var(--radie-liten);}
.tidigare-anteckning {padding:12px;background:var(--yta-2);border-radius:var(--radie-liten);}
.tidigare-anteckning h4 {margin:0;font-size:13px;color:var(--text-2);font-weight:600;}
.sparstatus {font-size:13px;margin:0;}
.sparstatus:empty {display:none;}
.sparstatus.sparar {color:var(--text-2);}
.sparstatus.sparat {color:var(--gron);}
.sparstatus.osparat {color:var(--varn);}
.sparstatus.fel {color:var(--fara);}
.bolagsfakta,.kontakta-ej,.historik {border-top:1px solid var(--kant);padding:4px 0;}
.kontakta-ej>summary {color:var(--fara);}
.kontakta-ej form {padding:12px 0;}
.uppgifter {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0;}
.uppgifter>div {min-width:0;}
.uppgifter dt {font-size:13px;color:var(--text-2);margin-bottom:4px;}
.uppgifter dd {margin:0;font-size:14px;overflow-wrap:anywhere;}
.kalla {margin-bottom:12px;}
.historik ul {padding-left:20px;}
.logg li {margin-bottom:12px;}

/* ---------- 9. Sidopanel ---------- */
.panel-bakgrund {position:fixed;inset:0;background:var(--overlay);z-index:30;}
.panel {position:fixed;inset:0 0 0 auto;width:min(600px,100%);background:var(--yta);z-index:31;overflow-y:auto;padding:0 24px 32px;box-shadow:var(--skugga-panel);outline:none;}
.panel-topp {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;margin-bottom:24px;border-bottom:1px solid var(--kant);background:var(--yta);position:sticky;top:0;z-index:2;}
.panel-stang {margin-left:-12px;}
.panel-byt {display:flex;align-items:center;gap:8px;}
.panel-byt .knapp {width:var(--kontroll);padding:10px;}
.panel-position {font-size:13px;color:var(--text-2);min-width:44px;text-align:center;font-variant-numeric:tabular-nums;}
.laddar-text {display:flex;align-items:center;gap:12px;padding:32px 0;color:var(--text-2);}
body.panel-oppen {overflow:hidden;}

/* ---------- 10. Slumpa: en sammanhållen arbetsyta ---------- */
.slump-vy {max-width:880px;margin:auto;}
.urval {position:relative;background:var(--yta);border:1px solid var(--kant);border-radius:var(--radie);padding:24px;margin-bottom:24px;}
.urval-antal {display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--text-2);margin:0 0 24px;}
.urval-antal strong {font-size:36px;font-weight:600;letter-spacing:-.04em;color:var(--text);line-height:1.2;}
.urval.har-kort .urval-antal {margin-bottom:8px;}
.urval.har-kort .urval-antal strong {font-size:24px;}
.urval-lista {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 16px;}
.urval-lista dt {font-size:13px;color:var(--text-2);margin-bottom:4px;}
.urval-lista dd {font-size:15px;margin:0;overflow-wrap:anywhere;}
.andra-urval {border-top:1px solid var(--kant);padding-top:4px;}
.andra-urval .filterform {border:0;box-shadow:none;padding:16px 0;margin:0;}
.andra-urval .filter-body {grid-template-columns:1fr 1fr;}
.slump-atgard {border-top:1px solid var(--kant);padding-top:16px;margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;scroll-margin-top:96px;}
.slumpform {margin:0;}
.slump-kort {margin-top:24px;}
/* En kort blandning, följd av att det valda företagskortet landar. */
.slump-effekt {position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--yta);border-radius:var(--radie);color:var(--gron-text);font-weight:600;pointer-events:none;}
.slump-kortlek {position:relative;display:block;width:104px;height:76px;}
.slump-kortlek i {position:absolute;left:22px;top:8px;width:60px;height:64px;border:1px solid var(--gron);border-radius:var(--radie-liten);background:var(--gron-ljus);box-shadow:var(--skugga-kort);animation:slump-blanda 480ms ease-in-out both;}
.slump-kortlek i::after {content:"";position:absolute;inset:15px 12px;border-top:4px solid var(--gron);border-bottom:4px solid var(--gron-mellan);}
.slump-kortlek i:nth-child(1) {--kast:-30px;--vinkel:-14deg;}
.slump-kortlek i:nth-child(2) {--kast:30px;--vinkel:14deg;animation-delay:50ms;}
.slump-kortlek i:nth-child(3) {--kast:0px;--vinkel:0deg;background:var(--yta);animation-delay:100ms;}
.slump-blandar .slump-kort {opacity:.35;pointer-events:none;}
.slump-avsloja {animation:slump-landa 520ms cubic-bezier(.2,.8,.2,1) both;}
@keyframes slump-blanda {0%,100% {transform:translateX(0) rotate(0);} 45% {transform:translateX(var(--kast)) translateY(-8px) rotate(var(--vinkel));}}
@keyframes slump-landa {from {opacity:0;transform:translateY(16px) rotate(-.7deg) scale(.985);} to {opacity:1;transform:none;}}

/* ---------- 11. Besked, tomlägen, ytor och tabeller ---------- */
.tomlage {background:var(--yta);border:1px solid var(--kant);border-radius:var(--radie);padding:40px 24px;margin:0 0 24px;text-align:center;}
.tomlage p {color:var(--text-2);max-width:52ch;margin:0 auto 16px;}
.tomlage .knapprad {justify-content:center;}
.flash,.notis {padding:16px;border:1px solid transparent;border-radius:var(--radie-liten);margin-bottom:16px;}
.flash.ok {background:var(--gron-ljus);color:var(--gron-text);border-color:var(--gron-mellan);}
.flash.fel,.notis.fel,.notis.sparr {background:var(--fara-ljus);color:var(--fara);border-color:var(--fara-kant);}
.notis.info {background:var(--info-ljus);color:var(--info);}
.ruta {background:var(--yta);border:1px solid var(--kant);border-radius:var(--radie);padding:24px;margin-bottom:24px;}
.ruta h3 {margin-top:24px;}
.ruta h2+p+h3,.ruta>h3:first-of-type {margin-top:20px;}
.tabell-wrap {position:relative;overflow-x:auto;margin:16px 0;}
table {border-collapse:collapse;width:100%;}
th,td {text-align:left;padding:12px;border-bottom:1px solid var(--kant);vertical-align:middle;}
th {font-size:13px;color:var(--text-2);font-weight:600;}
td.atgarder {white-space:nowrap;}
td input:not([type=checkbox]),td select {width:100%;min-width:120px;}
.sparrlista {list-style:none;padding:0;margin:16px 0;display:grid;gap:12px;}
.sparrlista li {padding:16px;border:1px solid var(--kant);border-radius:var(--radie-liten);}

/* ---------- 12. Inställningar: flikar, målgrupper, listor ---------- */
.flikar {display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--kant);margin:0 0 24px;scrollbar-width:none;}
.flikar a {display:inline-flex;align-items:center;min-height:var(--kontroll);padding:0 14px;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text-2);font-weight:500;text-decoration:none;white-space:nowrap;}
.flikar a:hover {color:var(--gron-text);}
.flikar a[aria-current="page"] {border-bottom-color:var(--gron);color:var(--gron-text);font-weight:600;}
.malgruppslista,.listval {list-style:none;margin:16px 0;padding:0;}
.malgruppslista li {padding:14px 0;border-top:1px solid var(--kant);}
.malgruppslista li.inaktiv,.listval li.inaktiv {opacity:.65;}
.malgruppslista p {margin:4px 0 0;font-size:14px;}
.mg-huvud {display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;}
.mg-antal {margin-left:auto;font-size:13px;}
.mg-andra summary {display:inline-flex;align-items:center;min-height:var(--kontroll-inre);font-size:14px;color:var(--gron);cursor:pointer;}
.mg-andra[open],.mg-ny[open] .malgrupp-form {padding:16px;margin-top:8px;background:var(--yta-2);border-radius:var(--radie-liten);}
.mg-ny summary {width:fit-content;}
.listval li {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--kontroll);border-top:1px solid var(--kant);}
.listval-ny {margin-bottom:8px;}

/* ---------- 13. Affärer, affärskort, Ny affär och Översikt ---------- */
.affar-summa {display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;margin:0 0 16px;}
.affar-filter {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;}
.affar-filter .segment-lankar:last-child {margin-left:auto;}
.ansvarig-val label {font-size:14px;color:var(--text-2);}
.ansvarig-val select {min-width:170px;}
.tavla {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:12px;overflow-x:auto;padding-bottom:12px;}
.tavla-kolumn {background:var(--yta-2);border-radius:var(--radie);padding:12px;display:flex;flex-direction:column;gap:8px;min-height:160px;}
.tavla-kolumn header h2 {font-size:14px;margin:0;display:flex;justify-content:space-between;}
.tavla-kolumn header p {margin:2px 0 4px;font-size:12px;}
.tavla-kolumn .antal {color:var(--text-2);font-weight:500;}
.affarskort {display:flex;flex-direction:column;gap:8px;background:var(--yta);border:1px solid var(--kant);border-left:3px solid var(--gron-mellan);
  border-radius:var(--radie-liten);padding:12px;color:var(--text);text-decoration:none;font-size:13px;line-height:1.4;box-shadow:var(--skugga);}
.affarskort:hover {border-color:var(--gron);border-left-color:var(--gron);color:var(--text);}
.affarskort.ak-forfallen {border-left-color:var(--fara);}
.ak-namn {font-weight:650;font-size:14px;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ak-rad {display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.ak-varde {font-weight:650;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ak-nasta {color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.ak-etikett,.ak-utan-varde {color:var(--text-2);}
.ak-fot {display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;padding-top:8px;border-top:1px solid var(--kant);color:var(--text-2);font-size:12px;}
.ak-fot>span {white-space:nowrap;}
.forfallen {color:var(--fara);font-weight:600;}
/* Stegvis lista: standardvisningen i Affärer */
.steglista {display:grid;gap:12px;margin-bottom:16px;}
.sg-grupp {background:var(--yta);border:1px solid var(--kant);border-radius:var(--radie);overflow:hidden;}
.sg-huvud {display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;background:var(--yta-2);}
.sg-huvud h2 {margin:0;font-size:15px;}
.sg-huvud .antal {color:var(--text-2);font-weight:500;margin-left:4px;}
.sg-summa {font-size:13px;color:var(--text-2);white-space:nowrap;}
.sg-summa strong {color:var(--text);}
.sg-grupp.tom {background:transparent;border-style:dashed;}
.sg-grupp.tom .sg-huvud {background:transparent;padding-block:8px;}
.sg-grupp.tom h2 {color:var(--text-2);font-weight:500;}
.sg-rader {list-style:none;margin:0;padding:0;}
.sg-rader li+li {border-top:1px solid var(--kant);}
.sg-rad {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2.2fr) 130px 120px 130px 18px;gap:16px;align-items:center;
  padding:12px 16px;border-left:3px solid transparent;color:var(--text);text-decoration:none;font-size:14px;}
.sg-rad:hover {background:var(--yta-hover);color:var(--text);}
.sg-rad.ak-forfallen {border-left-color:var(--fara);}
.sg-org {display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;}
.sg-namn {font-weight:650;overflow-wrap:anywhere;}
.sg-nasta {min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sg-datum,.sg-ansvarig {font-size:13px;color:var(--text-2);white-space:nowrap;}
.sg-datum.forfallen {color:var(--fara);}
.sg-varde {font-weight:650;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.sg-varde.ak-utan-varde {font-weight:400;font-size:13px;}
.affarstabell {width:100%;border-collapse:collapse;font-size:14px;}
.affarstabell th {text-align:left;font-size:13px;color:var(--text-2);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--kant-stark);}
.affarstabell td {padding:10px;border-bottom:1px solid var(--kant);vertical-align:top;}
.avslutade-lankar {font-size:14px;}
/* Punkten mellan länkarna är inline-block så att den inte blir understruken med länken. */
.avslutade-lankar a+a::before {content:"·";display:inline-block;margin-right:4px;color:var(--text-2);}
/* Ny affär */
.sok-org {display:flex;gap:8px;margin-top:12px;}
.sok-org input {flex:1;min-width:0;}
.org-traffar {list-style:none;margin:8px 0;padding:0;border:1px solid var(--kant);border-radius:var(--radie-liten);}
.org-traffar li+li {border-top:1px solid var(--kant);}
.org-traffar a {display:flex;justify-content:space-between;gap:12px;padding:12px;color:var(--text);text-decoration:none;min-height:var(--kontroll);}
.org-traffar a:hover {background:var(--gron-ljus);}
.vald-org {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0;padding:12px;border:1px solid var(--gron-mellan);background:var(--gron-ljus);border-radius:var(--radie-liten);}
.vald-org .dim {display:block;font-size:13px;}
.affar-form {margin-top:16px;border-top:1px solid var(--kant);padding-top:16px;}
/* Affärskort */
.affar-huvud {display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:16px;}
.affar-huvud h1 {margin:8px 0 4px;}
.affar-huvud p {margin:0;}
.affar-huvud .knapprad {margin-top:0;align-items:flex-start;}
.forlorad-val {position:relative;}
.forlorad-val[open] form {position:absolute;right:0;top:52px;z-index:5;width:280px;background:var(--yta);border:1px solid var(--kant-stark);border-radius:var(--radie);padding:16px;box-shadow:var(--skugga-hover);}
.saljstege ol {list-style:none;display:flex;gap:4px;margin:0 0 24px;padding:0;overflow-x:auto;}
.saljstege li {flex:1 0 110px;}
.saljstege form {display:block;}
.steg-knapp {width:100%;min-height:52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 12px;border:1px solid var(--kant-stark);border-radius:var(--radie-liten);background:var(--yta);font:inherit;cursor:pointer;text-align:left;}
.steg-knapp:hover {border-color:var(--gron);}
.steg-knapp.passerat {background:var(--gron-ljus);border-color:var(--gron-mellan);}
.steg-knapp[aria-current] {background:var(--gron);border-color:var(--gron);color:var(--vit);}
.steg-namn {font-size:13px;font-weight:600;}
.steg-p {font-size:12px;opacity:.8;}
.affar-grid {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start;}
.affar-grid .ruta {margin-bottom:16px;}
.affar-sidospalt .ruta h2,.affar-huvudspalt .ruta h2 {font-size:16px;margin:0 0 8px;}
.nasta-form {display:grid;grid-template-columns:minmax(0,1fr) 170px auto;gap:12px;align-items:end;}
.kontaktpersoner {list-style:none;margin:0 0 8px;padding:0;}
.kontaktpersoner li {padding:10px 0;border-top:1px solid var(--kant);display:grid;gap:4px;}
.kp-huvud {display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.kp-vagar {display:flex;flex-direction:column;gap:2px;font-size:14px;}
.kp-vagar a {overflow-wrap:anywhere;width:fit-content;}
.kp-ta-bort {border:0;background:none;padding:4px 0;font:inherit;font-size:13px;color:var(--text-2);cursor:pointer;}
.kp-ta-bort:hover {color:var(--fara);text-decoration:underline;}
/* Översikt */
.nyckeltal {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:24px;}
.nyckeltal>div {background:var(--yta);border:1px solid var(--kant);border-radius:var(--radie);padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.nt-namn {font-size:13px;color:var(--text-2);}
.nt-varde {font-size:22px;font-weight:650;overflow-wrap:anywhere;}
.nt-under {font-size:12px;color:var(--text-2);}
.oversikt-grid {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;}
.oversikt-grid h2 {font-size:16px;}
.forklaring {font-size:13px;display:flex;align-items:center;gap:6px;}
.pr-ovagt-ikon,.pr-viktat-ikon {display:inline-block;width:12px;height:12px;border-radius:var(--radie-mini);background:var(--gron-mellan);}
.pr-viktat-ikon {background:var(--gron);margin-left:10px;}
.prognos-rad {display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 0;font-size:14px;}
.prognos-rad.forsenad .pr-namn {color:var(--fara);}
.pr-stapel {position:relative;display:block;height:14px;background:var(--yta-2);border-radius:var(--radie-mini);overflow:hidden;}
.pr-ovagt,.pr-viktat {position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--radie-mini);background:var(--gron-mellan);}
.pr-viktat {background:var(--gron);}
.pr-tal {white-space:nowrap;font-size:13px;}
.atgarda {list-style:none;margin:0;padding:0;}
.atgarda a {display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--kontroll);border-top:1px solid var(--kant);color:var(--text);text-decoration:none;}
.atgarda a:hover {color:var(--gron-text);}
.atgarda .antal {min-width:28px;text-align:center;padding:2px 8px;border-radius:12px;background:var(--yta-2);font-weight:600;font-size:13px;}
.atgarda .antal.har {background:var(--fara-ljus);color:var(--fara);}
.omrade-rad {display:grid;gap:6px;padding:8px 0 12px;}
.omrade-rad .dim {display:block;font-size:13px;}
.kallor {list-style:none;margin:0;padding:0;}
.kallor li {display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--kant);font-size:14px;}

/* ---------- 14. Inloggning ---------- */
.inloggning {max-width:440px;margin:48px auto;text-align:center;display:grid;gap:12px;justify-items:center;}
.inloggning h1 {margin:0;}

/* ---------- 15. Responsivt: tre brytpunkter (1000, 640, 370) ---------- */
@media (max-width:1000px) {
  .sg-rad {grid-template-columns:minmax(0,1.6fr) minmax(0,1.6fr) 110px 120px 18px;}
  .sg-ansvarig {display:none;}
  .topp-inre {flex-wrap:wrap;gap:8px 16px;}
  .huvudmeny {order:3;flex-basis:100%;}
  .filter-body {grid-template-columns:1fr 1fr;}
  .fler-innehall {grid-template-columns:1fr;}
  .filterform.kompakt {grid-template-columns:minmax(0,1fr) auto;}
  .filterform.kompakt .falt-sok {grid-column:1/-1;}
  .filterform.kompakt .filter-rad {align-self:end;justify-content:flex-end;}
  .resultat-rubriker,.resultatkort {grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,1fr) 18px;gap:16px;}
  .resultat-rubriker>span:nth-child(3),.rk-storlek {display:none;}
  .nyckeltal {grid-template-columns:repeat(2,minmax(0,1fr));}
  .affar-grid,.oversikt-grid {grid-template-columns:1fr;}
}
@media (max-width:640px) {
  html {scroll-padding-top:16px;}
  .bara-mobil {display:block;}
  .bara-dator {display:none;}
  /* Sidhuvud: rullar bort med sidan på mobil, så att resultaten får hela skärmen. */
  .topp {position:static;}
  .topp-inre {padding:8px 16px 4px;gap:4px 8px;}
  .logo {font-size:15px;min-width:0;}
  .logo-text {overflow:hidden;text-overflow:ellipsis;}
  .logo .demo-pill {font-size:11px;}
  .konto-knapp {padding:0 6px;}
  .konto-namn {display:none;}
  .huvudmeny {justify-content:space-between;gap:4px;}
  .huvudmeny a {flex:1;padding:6px 4px;font-size:13px;}
  main {padding:16px 16px 48px;}
  .sidintro {margin-bottom:12px;gap:12px;}
  .sidintro h1 {font-size:22px;}
  .sidintro.med-knapp {flex-direction:column;align-items:stretch;}
  /* Länkar i löptext blir knappar med 44 px tryckyta. */
  .lank-knapp,.avslutade-lankar a,.affarstabell td a,.omrade-rad a {display:inline-flex;align-items:center;min-height:var(--kontroll);padding:0 12px;border:1px solid var(--kant-stark);border-radius:var(--radie-liten);background:var(--yta);text-decoration:none;}
  .avslutade-lankar {display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .avslutade-lankar a+a::before {content:none;}
  /* Fält och segment */
  .falt-par,.falt-grid,.formkryss {grid-template-columns:1fr;}
  .segment {width:100%;}
  .segment label {flex:1;text-align:center;}
  .segment span {display:flex;padding:0 8px;}
  /* Filter */
  .filterform {padding:16px;margin-bottom:20px;}
  .prospekt-filter {grid-template-columns:minmax(0,1fr) auto;gap:16px;}
  .prospekt-filter .falt-sok {grid-column:1;}
  .filter-submit {grid-column:2;grid-row:1;min-width:72px;align-self:end;}
  .filter-choices {grid-column:1/-1;grid-row:2;border-top:1px solid var(--kant);padding-top:4px;}
  .filter-choices>summary {width:100%;}
  .filter-fot .knapp {flex:1 1 100%;}
  .filter-body {grid-template-columns:1fr;gap:16px;margin-top:16px;}
  .filter-rad {gap:0;}
  .fler-filter {flex-basis:100%;border-top:1px solid var(--kant);}
  .fler-filter>summary {justify-content:flex-start;}
  .fler-filter>summary::after {margin-left:auto;}
  .fler-innehall {gap:24px;}
  .formval-knappar {gap:0;}
  /* Resultat */
  .resultatrad {margin:12px 0 12px;}
  .resultat-topp p {display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:12px;}
  .verktyg {flex:1 1 100%;}
  .verktyg .slumpa-knapp {flex:1;}
  .data-alder::before {content:none;}
  .aktiva-filter {flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:2px;}
  .aktiva-filter li {flex:none;}
  .chip {min-height:var(--kontroll);}
  .resultat-rubriker {display:none;}
  /* Namn, ort och statusmärken på egna rader så att inget överlappar. */
  .resultatkort {grid-template-columns:minmax(0,1fr) 18px;padding:16px;gap:6px 8px;}
  .rk-identitet {grid-column:1;}
  .rk-ort {grid-column:1;grid-row:2;}
  .rk-fot {grid-column:1;grid-row:3;justify-content:flex-start;}
  .rk-fot:empty {display:none;}
  .rk-pil {grid-column:2;grid-row:1/4;align-self:center;}
  .kontaktrad {padding:16px;}
  .kontaktlista>li {grid-template-columns:1fr;}
  .kr-atgard {padding:0 16px 16px;margin-top:-4px;}
  /* Företagskort och panel */
  .panel {padding:0 16px 24px;}
  .panel-topp {padding:12px 0;margin-bottom:24px;gap:8px;}
  .panel-byt {gap:4px;}
  .panel-position {min-width:36px;font-size:12px;}
  .kort-namn {font-size:24px;}
  .vag-innehall {display:grid;grid-template-columns:1fr;gap:12px;}
  .vag-innehall .knapp {justify-self:start;}
  .uppgifter {grid-template-columns:1fr;}
  .urval,.ruta,.kort-sida,.slump-kort .foretagskort {padding:20px;}
  /* Slumpa */
  .urval-lista {grid-template-columns:1fr;gap:16px;}
  .urval-lista>div {display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;}
  .urval-lista dt {margin:0;align-self:center;}
  .urval-antal {margin-bottom:24px;}
  .urval-antal strong {font-size:32px;}
  .andra-urval .filter-body {grid-template-columns:1fr;}
  .slump-atgard {scroll-margin-top:16px;}
  .slumpform,.slumpform>.knapp {width:100%;}
  /* Rutor och tabeller i Inställningar: varje rad blir ett kort med etiketter. */
  .ruta .knapprad {align-items:stretch;}
  .ruta .knapprad>.inline {width:100%;}
  .ruta .knapprad select {width:100%;}
  .installningstabell,.installningstabell tbody {display:block;}
  .installningstabell thead {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .installningstabell tr {display:block;border:1px solid var(--kant);border-radius:var(--radie-liten);padding:12px;margin-bottom:12px;}
  .installningstabell td {display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;border:0;padding:8px 0;font-size:13px;overflow-wrap:anywhere;}
  .installningstabell td::before {content:attr(data-label);font-size:13px;color:var(--text-2);font-weight:500;}
  .installningstabell td:not([data-label])::before {display:none;}
  .installningstabell td.atgarder {display:flex;flex-wrap:wrap;gap:8px;white-space:normal;border-top:1px solid var(--kant);padding-top:12px;margin-top:4px;}
  .installningstabell td input:not([type=checkbox]),.installningstabell td select {min-width:0;}
  .installningstabell td .dim {grid-column:2;}
  /* Kommunlistan: kompakt, en rad per kommun med åtgärderna under. */
  .installningstabell.kommuntabell tr {display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;border:0;border-top:1px solid var(--kant);border-radius:0;padding:10px 0;margin:0;}
  .installningstabell.kommuntabell td {display:inline;padding:0;font-size:13px;color:var(--text-2);}
  .installningstabell.kommuntabell td::before {display:none;}
  .installningstabell.kommuntabell td[data-label="Kommun"] {font-weight:600;font-size:14px;color:var(--text);flex-basis:100%;}
  .installningstabell.kommuntabell td[data-label="Antal"]:not(:empty)::after {content:" företag";}
  .installningstabell.kommuntabell td.atgarder {display:flex;flex-basis:100%;border:0;margin:6px 0 0;padding:0;gap:6px;}
  .mg-antal {margin-left:0;width:100%;}
  /* Affärer och Översikt */
  .affar-filter .segment-lankar:last-child {margin-left:0;}
  .tavla-kolumn:not(:has(.affarskort)) {display:none;}
  .steglista:not(.visa-tomma) .sg-grupp.tom {display:none;}
  .sg-visa-tomma {justify-self:start;}
  .sg-rad {grid-template-columns:minmax(0,1fr) auto 18px;gap:4px 12px;}
  .sg-org {grid-column:1;grid-row:1;}
  .sg-varde {grid-column:2;grid-row:1;}
  .sg-nasta {grid-column:1/3;grid-row:2;}
  .sg-datum {grid-column:1;grid-row:3;}
  .sg-ansvarig {display:block;grid-column:2;grid-row:3;text-align:right;}
  .rk-pil {grid-column:3;grid-row:1/4;}
  .tavla {grid-auto-columns:minmax(220px,1fr);}
  .nasta-form {grid-template-columns:1fr;}
  .forlorad-val[open] form {position:static;width:auto;margin-top:8px;}
  .affar-huvud .knapprad {width:100%;}
  .prognos-rad {grid-template-columns:80px minmax(0,1fr);}
  .prognos-rad .pr-tal {grid-column:1/-1;}
  .affarstabell,.affarstabell tbody {display:block;}
  .affarstabell thead {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .affarstabell tr {display:block;border:1px solid var(--kant);border-radius:var(--radie-liten);padding:8px 12px;margin-bottom:10px;background:var(--yta);}
  .affarstabell td {display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;border:0;padding:4px 0;overflow-wrap:anywhere;}
  .affarstabell td::before {content:attr(data-label);color:var(--text-2);font-size:13px;}
}
@media (max-width:370px) {
  .topp-inre {padding-inline:12px;}
  .logo {gap:5px;font-size:14px;}
  .logo-markor {width:24px;height:24px;}
  .huvudmeny a {font-size:12px;}
  .filterform.kompakt {grid-template-columns:1fr;}
  .filterform.kompakt .filter-rad {justify-content:stretch;}
  .filterform.kompakt .filter-rad .knapp {width:100%;}
}

/* ---------- 16. Tillgänglighet ---------- */
@media (prefers-reduced-motion:reduce) {* {animation:none!important;transition:none!important;}}
@media (forced-colors:active) {input[type=checkbox]:checked {background:Highlight;} input[type=checkbox]:checked::after {border-color:HighlightText;}}