/* Lysio Researchs grafiska profil, från template.pptx (ppt/theme/theme1.xml) */
:root{
  --lysio-marin:#003C63;    /* accent1 — primärfärg */
  --lysio-bla:#5991F0;      /* accent2 */
  --lysio-gul:#F9D764;      /* accent3 */
  --lysio-rosa:#F6C2DF;     /* accent4 */
  --lysio-gron:#7DBA74;     /* accent5 */
  --lysio-blaljus:#DEE9FC;  /* accent6 */
  --lysio-korall:#EF7764;   /* dk2 — bortfall/negativt. FÅR ALDRIG bära text
                               mot vit eller sand (2.80:1) — bara bakgrund,
                               kantlinjer och staplar (docs/designforslag.md,
                               punkt 7; profilens tillgänglighetsavsnitt).
                               Huvudkälla för diagram-/bedömningsfärger:
                               app/grafisk_profil.py (docs/komponentisering.md). */
  --lysio-cream:#FAF2E8;    /* lt2 */

  /* Bedömningsfärger ur profilens utökade palett, i stället för de två
     tidigare på-plats-uppfunna tonerna #3f7a38/#b8503f (docs/designforslag.md,
     punkt 7) — båda klarar AA (8.2:1 / 8.7:1 mot vitt). */
  --lysio-skogsgron:#386532;  /* bra-bedömning */
  --lysio-vinrod:#9A2110;     /* dålig bedömning */

  /* Gråskala, fem steg, alla godkända mot vitt DÄR DE BÄR TEXT
     (docs/designforslag.md, punkt 2) — ersätter ett tjugotal spretiga
     gråtoner som i praktiken gjorde samma jobb, varav flera (tidigare
     #8a96a2 3.02:1, #8a94a0 3.08:1, #adb5bd 2.07:1) föll under WCAG AA
     (4.5:1) trots att de bar placeringssiffror, axeletiketter och
     tabelltext. DOS-lagen gäller kommunernas publicerade material. */
  --gra-900:#1D2733;   /* rubriker */
  --gra-700:#45505C;   /* brödtext */
  --gra-500:#5D6874;   /* sekundärtext, 5.6:1 mot vitt */
  --gra-300:#C3CBD4;   /* kantlinjer, streck (kontrastkravet gäller inte dekor) */
  --gra-150:#E3E7EB;   /* avdelare */
  --gra-050:#F5F7F9;   /* ytor */

  /* Typografisk skala, fem steg (docs/designforslag.md, punkt 3) — ersätter
     29 näraliggande font-size-värden som var sediment från att varje
     komponent finjusterats för sig, inte ett medvetet system. */
  --text-xs:.75rem;    /* etiketter, källrader, nyckelförklaringar */
  --text-sm:.8125rem;  /* tabellceller, listrader, hjälptext */
  --text-bas:.9375rem; /* brödtext */
  --text-lg:1.125rem;  /* avsnittsrubriker */
  --text-xl:1.5rem;    /* sidrubrik */

  /* Stora nyckeltal delar samma två storlekar i stället för att varje vy
     (Jämförelse, Översikt, Start, ...) uppfinner sin egen. */
  --tal-stor:2.1rem;
  --tal-mellan:1.5rem;

  /* Radier, fyra steg (docs/designforslag.md, punkt 5) — ersätter
     border-radius:2px på ett trettiotal ställen, för litet för att läsas
     som rundat och för mycket för att läsas som skarpt. */
  --radie:6px;        /* kort, rutor, tabellramar, filterpanel */
  --radie-liten:4px;  /* staplar, klossar, taggar */
  --radie-stor:10px;  /* hjälte och andra stora ytor */
  --radie-pill:999px; /* chips */

  --bs-primary:var(--lysio-marin);
  --bs-primary-rgb:0,60,99;
  --bs-success:var(--lysio-gron);
  --bs-success-rgb:125,186,116;
  --bs-danger:var(--lysio-korall);
  --bs-danger-rgb:239,119,100;
  --bs-warning:var(--lysio-gul);
  --bs-warning-rgb:249,215,100;
  --bs-link-color:var(--lysio-marin);
  --bs-link-hover-color:var(--lysio-bla);
}
.form-check-input:checked{background-color:var(--lysio-marin); border-color:var(--lysio-marin)}
.form-select:focus, .form-control:focus{border-color:var(--lysio-bla); box-shadow:0 0 0 .25rem rgba(89,145,240,.25)}

/* Bootstrap 5.0.2 hårdkodar sina färger utan CSS-variabler, så vi skriver över klasserna direkt */
.bg-primary{background-color:var(--lysio-marin)!important}
.bg-success{background-color:var(--lysio-gron)!important}
.bg-danger{background-color:var(--lysio-korall)!important}
.bg-warning{background-color:var(--lysio-gul)!important}
.text-primary{color:var(--lysio-marin)!important}
.btn-primary{background-color:var(--lysio-marin); border-color:var(--lysio-marin)}
.btn-primary:hover, .btn-primary:active{background-color:#002d4a!important; border-color:#002d4a!important}
.btn-outline-primary{color:var(--lysio-marin); border-color:var(--lysio-marin)}
.btn-outline-primary:hover, .btn-outline-primary:active{
  background-color:var(--lysio-marin)!important; border-color:var(--lysio-marin)!important; color:#fff!important;
}

/* Sidrubrik: h1 för dokumentstrukturen (en per sida, så skärmläsare och
   sökmotorer hittar sidans ämne), men i h4:s visuella storlek eftersom
   layouten är byggd kring det. */
/* Visuellt dold men läst av skärmläsare. Används för tabellrubriker som
   redan står som synlig rubrik ovanför tabellen. */
.visuellt-dold{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

h1.sidrubrik{font-size:var(--text-xl); font-weight:600; line-height:1.2; margin-bottom:.5rem; color:var(--lysio-marin)}

html{min-height:100%}
body{
  background:#fff;
  font-family:"Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.smaller{font-size:var(--text-sm)}
.smallest{font-size:var(--text-xs)}
.cursor-pointer{cursor:pointer}
.box-shadow{box-shadow:0 .25rem .75rem rgba(0,0,0,.05)}

/* ---- Sidofält ---------------------------------------------------------
   Loggan står i en egen zon överst med lika stor luft runt om, kommunnamnet
   är sidans egentliga rubrik och menyn är den enda blå ytan — så ögat får
   en ordning att följa i stället för fyra likvärdiga textblock.          */
.sidebar{
  height:100vh; overflow-y:auto; overflow-x:hidden;
  width:260px; min-width:260px; max-width:260px;
  padding:0 .9rem .9rem;
  background-color:#fff; border-right:1px solid var(--gra-150);
  box-shadow:1px 0 0 rgba(0,0,0,.02);
}

.sidebar-brand{
  display:flex; align-items:center; justify-content:flex-start;
  padding:1.5rem .1rem 1.3rem; border-radius:var(--radie-liten);
  transition:opacity .15s ease;
}
.sidebar-brand:hover{opacity:.75}
.sidebar-brand:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}
.sidebar-brand img{display:block; height:54px; width:auto}

.sidebar-titel{
  padding:0 .1rem 1.1rem; margin-bottom:1rem;
  border-bottom:1px solid var(--gra-150);
}
.sidebar-titel-kommun{
  font-size:var(--text-lg); font-weight:700; letter-spacing:-.015em;
  color:var(--lysio-marin); line-height:1.25;
}
.sidebar-titel-produkt{
  margin-top:.2rem; font-size:var(--text-xs); font-weight:400;
  letter-spacing:.02em; color:var(--gra-500);
}

.sidebar-nav{display:flex; flex-direction:column; gap:.1rem}

/* UX1 (Erik: "otydligt med små sektionsöverskrifter... gör
   sektionsrubrikerna tydliga som rubriker"): varje avsnitt är nu en
   egen visuell grupp (.sidebar-avsnitt), skild från nästa med en
   diskret skiljelinje (border-top) och luft (padding-top), i stället
   för att bara lita på radavståndet mellan rubrik och länkar. Första
   avsnittet har ingen linje (det är redan först, inget att skilja
   det från). */
.sidebar-avsnitt{
  border-top:1px solid var(--gra-150); margin-top:.5rem; padding-top:.4rem;
}
.sidebar-avsnitt:first-of-type{border-top:none; margin-top:.2rem; padding-top:0}

/* Sektionsrubriken: --text-lg (redan definierad som "avsnittsrubriker"
   högre upp i filen, men tidigare oanvänd här) i stället för --text-xs
   (etiketter), så den faktiskt läses som en RUBRIK, inte en diskret
   etikett. Fortsatt marin (temat), men utan den gamla opacity:.6 som
   gjorde den nästan lika svag som en vanlig länk: vikten (700) och
   den större storleken bär hierarkin nu i stället för att göra texten
   ljusare. Ikonen (UX1 punkt 2, produkt().avsnittsikon) ges samma
   bredd som sidlänkarnas egna ikoner (.sidebar-lank i) så rubrikens
   text och sidornas text hamnar i linje. */
.sidebar-grupptitel{
  margin:0 0 .25rem; padding:0 .6rem;
  font-size:var(--text-lg); font-weight:700; letter-spacing:-.01em;
  color:var(--lysio-marin);
}

/* P30 (Erik: "strukturera vänstermenyn... implementera möjlighet att
   fälla ut olika delar"): varje avsnittsrubrik är nu en knapp i
   stället för en ren rubrik-div, med en pil som roterar (samma
   transform:rotate(90deg)-mönster som .filterpanel-pil/.kp-brist-pil
   ovan i filen) och en diskret sidantals-bricka (planerarens punkt 5,
   syns bara ihopfälld). Klickytan är minst 32px hög (UX1 punkt 2) och
   fokusringen syns tydligt vid tangentbordsnavigering, samma
   --lysio-bla-outline som .sidebar-lank. */
.sidebar-grupptitel-knapp{
  display:flex; align-items:center; gap:.5rem; width:100%; min-height:32px;
  border-radius:var(--radie-liten);
  background:none; border:none; cursor:pointer; text-align:left;
  transition:background-color .12s ease;
}
.sidebar-grupptitel-knapp:hover{background:var(--gra-050)}
.sidebar-grupptitel-knapp:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}
.sidebar-grupptitel-pil{
  font-size:.7rem; transition:transform .15s ease; flex:0 0 auto;
  color:var(--gra-500);
}
.sidebar-grupptitel-knapp[aria-expanded="true"] .sidebar-grupptitel-pil{transform:rotate(90deg)}
.sidebar-grupptitel-ikon{
  flex:0 0 1.15rem; font-size:var(--text-bas); text-align:center;
}
.sidebar-grupptitel-antal{
  margin-left:auto; font-weight:400; font-size:var(--text-xs); opacity:.8;
}
.sidebar-grupptitel-knapp[aria-expanded="true"] .sidebar-grupptitel-antal{display:none}

/* Sidorna lätt indragna under sin rubrik (UX1 punkt 2), så
   föräldra/barn-relationen syns utan att behöva läsa indenteringen av
   rubriktexten mot ikonen ovan. */
.sidebar-avsnitt-innehall{
  display:flex; flex-direction:column; gap:.1rem;
  padding-left:.5rem; border-left:1px solid var(--gra-150); margin-left:.65rem;
}

/* Den aktiva sektionen (UX1: "en tydlig markering av den aktiva
   sektionen"): rubrikens text och ikon får samma marin som en aktiv
   sidlänk redan har (.sidebar-lank.ar-aktiv), och indragslinjen byter
   till samma gula accent som den aktiva sidlänkens vänsterkant
   (border-left-color på .sidebar-lank.ar-aktiv), så man ser VILKEN
   gren av trädet man står i även innan ögat hittar den gulmarkerade
   länken längre ner. */
.sidebar-avsnitt--aktiv > .sidebar-grupptitel-knapp{background:var(--gra-050)}
.sidebar-avsnitt--aktiv > .sidebar-avsnitt-innehall{border-left-color:var(--lysio-gul)}

/* Fäll ut alla / fäll ihop alla (planerarens punkt 3): samma stil som
   en dämpad, sekundär menyrad, inte en primär knapp. */
.sidebar-falla-alla{
  display:flex; align-items:center; gap:.5rem; width:100%;
  margin:.2rem 0 .4rem; padding:.3rem .6rem; border:none; border-radius:var(--radie-liten);
  background:none; color:var(--gra-500); font-size:var(--text-xs); font-weight:600;
  cursor:pointer; transition:background-color .12s ease, color .12s ease;
}
.sidebar-falla-alla:hover{background:var(--gra-050); color:var(--lysio-marin)}
.sidebar-falla-alla:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}

/* Sökfältet (planerarens punkt 4, bara när menyn har fler än 12
   sidor): samma dämpade yta som andra inbäddade sökfält i appen,
   ingen egen färgskala. */
.sidebar-sok{
  position:relative; margin:.2rem 0 .6rem;
}
.sidebar-sok i{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  color:var(--gra-500); font-size:var(--text-bas); pointer-events:none;
}
.sidebar-sok-falt{
  width:100%; padding:.4rem .6rem .4rem 1.8rem; border:1px solid var(--gra-300);
  border-radius:var(--radie-liten); font-size:var(--text-bas); color:var(--gra-700);
}
.sidebar-sok-falt:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}

.sidebar-lank{
  display:flex; align-items:center; gap:.7rem; min-height:32px;
  padding:.52rem .6rem .52rem .55rem; border-radius:var(--radie-liten);
  border-left:3px solid transparent;
  font-size:var(--text-bas); font-weight:400; line-height:1.3;
  color:var(--gra-700); text-decoration:none;
  transition:background-color .12s ease, color .12s ease;
}
.sidebar-lank i{
  flex:0 0 1.15rem; font-size:var(--text-lg); text-align:center;
  color:var(--gra-500); transition:color .12s ease;
}
.sidebar-lank:hover{background:var(--gra-050); color:var(--lysio-marin)}
.sidebar-lank:hover i{color:var(--lysio-marin)}
.sidebar-lank:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}
.sidebar-lank.ar-aktiv{
  background:var(--lysio-blaljus); color:var(--lysio-marin); font-weight:600;
  border-left-color:var(--lysio-gul);
}
.sidebar-lank.ar-aktiv i{color:var(--lysio-marin)}

.sidebar-genvag-rad{display:flex; align-items:center; gap:.1rem}
.sidebar-genvag-rad .sidebar-lank{flex:1 1 auto; min-width:0}
.sidebar-genvag-rad .sidebar-lank span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sidebar-genvag-radera{flex:0 0 auto; padding-right:.4rem; opacity:0; transition:opacity .12s ease}
.sidebar-genvag-rad:hover .sidebar-genvag-radera,
.sidebar-genvag-radera:focus-within{opacity:1}
.sidebar-genvag-radera button{font-size:1.1rem; line-height:1; padding:.2rem .3rem}

.sidebar-konto{padding-top:.9rem; margin-top:1rem; border-top:1px solid var(--gra-150)}
.sidebar-kommunval{margin-bottom:.75rem}
/* The fade that shows more menu below. Hidden by default, so the mobile
   panel is unchanged; the desktop rules below turn it on. */
.sidebar-tona{display:none}

/* Desktop: only the menu scrolls and the account row stays pinned at the
   bottom, so "Logga ut" is always in sight on a short screen, and a fade
   shows that the menu continues (bygg-sidomeny-hojd.md). Mobile keeps the
   whole panel as before. */
@media (min-width:861px){
  .sidebar{overflow:hidden}
  .sidebar-rull{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    /* Full sidebar width, so focus rings and the scroll bar are not clipped. */
    margin:0 -.9rem; padding:0 .9rem;
  }
  .sidebar-tona{
    display:block; position:sticky; bottom:0;
    height:2.5rem; margin-top:-2.5rem;
    background:linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events:none; opacity:0; transition:opacity .15s ease;
  }
  .sidebar-rull.har-mer .sidebar-tona{opacity:1}
  .sidebar-konto-fast{flex:0 0 auto; margin-top:0; padding-top:.6rem; border-top:1px solid var(--gra-150)}
  .sidebar-konto-fast .sidebar-konto-rad{flex-direction:row; align-items:center; justify-content:space-between; gap:.6rem}
  .sidebar-konto-fast .sidebar-konto-namn{min-width:0}
  .sidebar-konto-fast .sidebar-logga-ut{flex:0 0 auto}
}
.sidebar-etikett{
  display:block; margin-bottom:.25rem;
  font-size:var(--text-xs); font-weight:600; letter-spacing:.02em;
  color:var(--gra-500);
}
.sidebar-konto-rad{display:flex; flex-direction:column; gap:.35rem}
.sidebar-konto-namn{
  font-size:var(--text-xs); color:var(--gra-500);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-logga-ut{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:0; border:0; background:none;
  font-size:var(--text-sm); color:var(--gra-500); text-decoration:none;
}
.sidebar-logga-ut:hover{color:var(--lysio-marin); text-decoration:underline}
.sidebar-logga-ut:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px; border-radius:.2rem}

.main-content{overflow:auto; position:relative; min-width:0; padding:0}
.page-canvas{
  width:100%; min-width:0;
  /* The bottom padding keeps the last row of every page scrollable clear of
     the floating Feedback button: its height (about 2.75rem), its 20px
     offset and a margin (bygg-feedbackknapp.md). */
  padding:1.25rem 1.5rem 5.5rem;
}
/* On a wide screen the content stops at 1440px (1392px inside the canvas
   padding), left-aligned next to the sidebar, so values do not end up far
   from their labels (bygg-bredd-och-rapportknappar.md, UX decision C). The
   cap sits on the content, not on .page-canvas, so the sand header band
   still runs to the right edge instead of stopping mid-screen at 2560px. */
.page-canvas > :not(.sidhuvud),
.sidhuvud > *{max-width:calc(1440px - 3rem)}

/* Lists with one bar per row (toplists, deviation rows, Handel's profile
   and neighbour lists) default to 42rem: the width only adds distance
   between the label and its value, and 42rem keeps it under 600px. */
.jf-topplista,
.jf-dv-rubrikrad,.jf-dv-skalrad,.jf-dv-rad,
.hd-diagram{max-width:42rem}

/* Narrow tables (about three data columns) opt in with tabell--smal: they
   size to their content, at least 20rem so a two-column table does not
   shrink to a sliver, at most 40rem. The limits sit on the table, not on
   .table-responsive, so small screens keep their horizontal scroll. */
.table.tabell--smal{width:auto; min-width:20rem; max-width:40rem}

/* Sidhuvud och sektioner (variant K1, docs/sektioner.md).
   Sidhuvudet — rubrik, intro och filter — ligger på sand och skiljs därmed
   från innehållet: det är kontrollytan, inte data. Sektionerna i innehållet
   avgränsas av en hårfin linje över hela bredden, medan rubrikens marina
   kant och innehållets indrag håller ihop sektionen inbördes. Linjen delar
   av, kanten binder samman; två grepp med var sitt jobb.

   Kanten är marin, inte korall: korallen betyder redan bortfall och dåligt
   utfall i nyckeltal och avvikelser, och skulle tappa den betydelsen om den
   också blev sektionsmarkör. */
.sidhuvud{
  background:var(--lysio-cream);
  margin:-1.25rem -1.5rem 0;
  padding:1.25rem 1.5rem 1rem;
}
.sidhuvud .sidintro{margin-bottom:0}
.sidhuvud .filterfalt{border-bottom:none; padding-bottom:0; margin-top:1rem}
.sidhuvud + *{margin-top:0}
.sidhuvud--avslut{border-bottom:1px solid #ECE2D4; margin-bottom:1.75rem}

.sektion{border-top:1px solid var(--gra-150); padding-top:1.25rem; margin-bottom:2rem}
.sektion:first-of-type{border-top:none; padding-top:0}
.sektion > h5,
.sektion > .sektionsrubrik{
  padding-left:.7rem; border-left:3px solid var(--lysio-marin);
  font-size:var(--text-lg); font-weight:600; color:var(--lysio-marin);
  margin-bottom:.15rem;
}
.sektionsinnehall{padding-left:.7rem}

/* Sidans introduktion har läsbredd; tabeller och diagram får hela ytan. */
.sidintro{max-width:78ch; margin-bottom:1.25rem}
.sidrubrikrad{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; margin-bottom:.5rem}
.sidrubrikrad .sidrubrik{margin-bottom:0}
#toggle-sidebar{position:fixed; top:16px; margin-left:-16px; border-left:0; border-radius:0 .25rem .25rem 0; padding:.5rem; z-index:1000}

/* Feedback-knappen, flytande nere till höger (flyttad tillbaka hit från
   sidomenyn på beställarens begäran — se bas.html). Alltid synlig oavsett
   scrollposition, ovanpå sidans innehåll men under Bootstraps modal-lager
   (1050+), så den aldrig hamnar bakom en öppen modal eller dialog. */
/* A compact round icon button at every width, so it covers as little as
   possible. The label "Feedback" is visually hidden but stays in the
   accessibility tree (display:none left the button without a name), and
   it shows on hover and on keyboard focus. */
.feedback-flytande{
  position:fixed; right:20px; bottom:20px; z-index:1000;
  display:flex; align-items:center; gap:.4rem;
  background:var(--lysio-marin); color:#fff; border:none; border-radius:2rem;
  padding:.65rem; font-size:.85rem; font-weight:600;
  box-shadow:0 4px 14px rgba(0,60,99,.28);
  cursor:pointer; transition:background .12s ease, transform .12s ease;
}
.feedback-flytande span{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.feedback-flytande:hover,
.feedback-flytande:focus-visible{padding:.65rem 1.1rem}
.feedback-flytande:hover span,
.feedback-flytande:focus-visible span{position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto}
.feedback-flytande:hover{background:var(--lysio-bla); transform:translateY(-1px)}
.feedback-flytande:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}
.feedback-flytande i{font-size:1rem; line-height:1}

.funnel-wrap{display:flex; align-items:flex-start}
.funnel-graph-holder{min-width:0}
.funnel-graph-holder svg{display:block}

.table td{vertical-align:middle}
.table th{text-align:left}
.sortlank{color:inherit; text-decoration:none; white-space:nowrap}
.sortlank:hover{color:var(--lysio-marin)}
.sortlank i{font-size:var(--text-xs); margin-left:.25rem; color:var(--lysio-marin)}
td.namn{white-space:normal; min-width:200px; max-width:320px}

/* Företagssökets träfflista: ärvde annars Bootstraps standardstorlek
   (1rem), onödigt stor för en tät lista med hundratals rader — samma
   mindre textstorlek som portalens övriga tabeller (.jf-tabellram). */
.fs-tabell{font-size:var(--text-sm)}

.statcard{height:100%}
.statcard table{font-size:var(--text-sm)}
.statcard td.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.statcard td.name{white-space:normal}
.statcard td.mini-bar{width:70px}
.mini-track{height:8px; background:var(--lysio-blaljus); border-radius:.2rem; overflow:hidden}
.mini-fill{height:100%; background:var(--lysio-bla); border-radius:.2rem}

.lysio-tag{background:var(--lysio-blaljus); color:var(--lysio-marin); font-weight:600}

.tabular{font-variant-numeric:tabular-nums}

/* Nyckeltal med hierarki (Genomgång 1, avsnitt 2.5): kommunens storlek och
   ett kvalitetsmått ska inte se likadana ut. --primar för det tal som
   sätter sammanhanget (oftast antal företag), övriga är sekundära. */
.nyckeltal{border-left:3px solid var(--gra-150); padding:.5rem 0 .5rem 1rem}
.nyckeltal .varde{font-size:var(--text-xl); font-weight:600; color:var(--lysio-marin); font-variant-numeric:tabular-nums; line-height:1.15}
/* P7a (docs/plattform.md 5.2): saknas/undertryckt/ej_tillampligt är
   statustext, inte ett mätvärde. Den stora, marinblå sifferstilen ovan
   skulle ge "Skyddad uppgift" samma visuella vikt som ett riktigt tal -
   .varde--status sänker den till brödtextstorlek i neutral gråton. */
.nyckeltal .varde.varde--status{font-size:var(--text-bas); font-weight:400; color:var(--gra-700)}
.nyckeltal .jamforelse{font-size:var(--text-xs); color:var(--gra-500); margin-top:.15rem}
.nyckeltal .etikett{font-size:var(--text-xs); font-weight:600; color:var(--gra-500); letter-spacing:.01em}

.nyckeltal--primar{border-left-color:var(--lysio-marin)}
.nyckeltal--primar .varde{font-size:var(--tal-stor)}

.nyckeltal--bra .jamforelse{color:var(--lysio-skogsgron)}
.nyckeltal--daligt .jamforelse{color:var(--lysio-vinrod)}
/* P8a (_komponenter.html:nyckeltal): the judgement in words as well as
   colour (WCAG 1.4.1), in the same two text colours; never Lysio-röd. The
   footer and the value's meaning use the old .uh-namnare look. */
.nyckeltal-signal{font-size:var(--text-xs); font-weight:600; margin-top:.1rem}
.nyckeltal--bra .nyckeltal-signal{color:var(--lysio-skogsgron)}
.nyckeltal--daligt .nyckeltal-signal{color:var(--lysio-vinrod)}
.nyckeltal-fot,.nyckeltal-tolkning{font-size:var(--text-xs); color:var(--gra-500); margin-top:.1rem}
/* The legend under a table with values that are not ok (P7b, UX gurun). */
.tabell-forklaring{font-size:var(--text-xs); color:var(--gra-500); margin-top:-.5rem}

/* Varmekartetabellen (bygg-f8-varmekarta.md): the five fill steps as CSS
   custom properties set inline per table (--vk-bg-N/--vk-text-N, from
   Tema.palett), never a fixed hex here, so a second product's own palette
   takes effect without a CSS change. The legend chips (vk-steg-0/2/4)
   reuse the same classes as the cells so the two always match.
   Bootstrap's own table>:not(caption)>*>* rule sets background-color on
   every cell with two classes' worth of specificity (:not() counts as
   one); td.vk-steg-N (an element plus a class) matches that, so the fill
   is not silently lost to a plain white cell. */
td.vk-steg-0,span.vk-steg-0{background-color:var(--vk-bg-0); color:var(--vk-text-0)}
td.vk-steg-1,span.vk-steg-1{background-color:var(--vk-bg-1); color:var(--vk-text-1)}
td.vk-steg-2,span.vk-steg-2{background-color:var(--vk-bg-2); color:var(--vk-text-2)}
td.vk-steg-3,span.vk-steg-3{background-color:var(--vk-bg-3); color:var(--vk-text-3)}
td.vk-steg-4,span.vk-steg-4{background-color:var(--vk-bg-4); color:var(--vk-text-4)}
.vk-forklaring{font-size:var(--text-xs); color:var(--gra-500); margin-top:-.5rem}
.vk-forklaring .vk-steg{padding:.1rem .5rem; border-radius:.2rem; margin-right:.35rem}

.hjalptext{font-size:var(--text-sm); color:var(--gra-500)}
.info-ikon{cursor:help; color:var(--gra-500); border-bottom:1px dotted var(--gra-500)}

/* Gemensam hjälptext-komponent (app/templates/_hjalp.html): dold som
   standard i hela portalen, en liten (i)-knapp som visar en kort
   förklaring vid klick (och via title-attributet redan vid hover/skärmläsare).
   Samma visuella mönster som fanns i jämförelsevyns jf-nt-info, men under
   ett portalgemensamt namnrum så alla vyer kan använda det. */
.hjalp-wrap{display:inline-block; position:relative}
.hjalp-knapp{
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:1px solid var(--gra-300); background:#fff; color:var(--gra-500);
  font-size:var(--text-xs); font-weight:700; line-height:1; cursor:help; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:.1em; margin-left:.15rem;
}
.hjalp-knapp:hover{border-color:var(--lysio-marin); color:var(--lysio-marin); background:var(--lysio-blaljus)}
.hjalp-knapp:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}
.hjalp-knapp[aria-expanded="true"]{border-color:var(--lysio-marin); color:#fff; background:var(--lysio-marin)}
.hjalp-ruta{
  position:absolute; z-index:20; top:1.4rem; left:0; width:max-content; max-width:280px;
  font-size:var(--text-xs); line-height:1.45; color:var(--gra-700); text-align:left;
  background:#fff; border:1px solid var(--gra-150); border-left:2px solid var(--lysio-bla);
  border-radius:var(--radie); padding:.5rem .7rem; box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
}
@media (max-width:480px){
  .hjalp-ruta{position:fixed; left:16px; right:16px; top:auto; width:auto; max-width:none}
}

.kalla-rad{font-size:var(--text-xs); color:var(--gra-500); border-top:1px solid var(--gra-150); margin-top:1rem; padding-top:.5rem}

/* Gemensam infällbar filterpanel (Genomgång 2, avsnitt 3.1; UX3-04 i
   docs/ux3.md). Infälld visar en sammanfattning i klartext, utfälld visar
   hela panelen. Öppnaren är en <button>, återställningslänken ett eget
   syskonelement i samma rad — inte del av den klickbara ytan. */
.filterpanel{border:1px solid var(--gra-150); border-radius:var(--radie); margin-bottom:1.25rem}
.filterpanel-rubrikrad{display:flex; align-items:center; gap:.75rem; padding-right:.9rem}
.filterpanel-rubrik{flex:1; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .9rem; cursor:pointer; user-select:none; background:none; border:none; text-align:left; font:inherit; min-width:0}
.filterpanel-rubrik:hover{background:var(--gra-050)}
.filterpanel-titel{font-weight:600; color:var(--lysio-marin); font-size:var(--text-bas); display:flex; align-items:center; gap:.4rem; flex:0 0 auto}
.filterpanel-pil{transition:transform .15s ease; font-size:var(--text-xs)}
.filterpanel[data-oppen="true"] .filterpanel-pil{transform:rotate(90deg)}
.filterpanel-sammanfattning{font-size:var(--text-sm); color:var(--gra-500); flex:1; margin-left:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filterpanel-vantande{font-size:var(--text-xs); color:#a15c00; font-weight:600; flex:0 0 auto; white-space:nowrap}
.filterpanel-innehall{padding:0 .9rem .9rem; border-top:1px solid var(--gra-150)}
.filterpanel[data-oppen="false"] .filterpanel-innehall{display:none}
.filterpanel-atersall{font-size:var(--text-xs); flex:0 0 auto}

.filterfalt{border-bottom:1px solid var(--gra-150); padding-bottom:1rem}

/* "Skapa egen grupp" (Jämförelse): filtrerbar, alltid synlig kryssrutelista
   i stället för sök-och-klicka en kommun i taget. */
.egen-grupp-byggare{max-width:760px}
.egen-grupp-lista{max-height:280px; overflow-y:auto}
.egen-grupp-lista .list-group-item{cursor:pointer}
.egen-grupp-valda{max-height:280px; overflow-y:auto; display:flex; flex-wrap:wrap; align-content:flex-start; gap:.3rem; border:1px solid var(--gra-150); border-radius:var(--radie); padding:.5rem; min-height:2.5rem}
.egen-grupp-badge{display:inline-flex; align-items:center}

/* Flervalsdropdown: ser ut som en vanlig <select>, men öppnar en
   kryssrutelista i stället för en nativ listbox — så flera värden kan
   väljas utan Ctrl/Cmd-klick i en nativ multiple-select. */
.flervalsdropdown{min-width:180px}
.flervalsdropdown .dropdown-toggle{width:100%; text-align:left; cursor:pointer}
.flervalsdropdown .dropdown-toggle::after{position:absolute; right:.75rem; top:50%; margin-top:-.15rem}
.flervalsdropdown-meny{max-height:320px; overflow-y:auto; min-width:220px}
.flervalsdropdown-meny .form-check{padding-left:1.75rem; white-space:nowrap}
.flervalsdropdown-snabbval{font-size:var(--text-xs); margin-bottom:.4rem; padding-bottom:.4rem; border-bottom:1px solid var(--gra-150); display:flex; gap:.4rem; align-items:center}
.flervalsdropdown-snabbval .btn-link{font-size:inherit; text-decoration:none}
.flervalsdropdown-snabbval .btn-link:hover{text-decoration:underline}

/* CSS Grid för nyckeltal och fördelningskort (Genomgång 2, avsnitt 3.2) —
   auto-fit ger 1-4 kolumner efter bredd utan Bootstrap-brytpunkter. */
.nyckeltalsrad{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-bottom:1.25rem}
.nyckeltalsrad .nyckeltal{background:#fff; padding:.85rem 1rem; border-left:none; border-top:3px solid transparent; box-shadow:0 0 0 1px var(--gra-150)}
.nyckeltalsrad .nyckeltal--primar{border-top-color:var(--lysio-marin); background:var(--lysio-cream)}
.nyckeltalsrad .nyckeltal--bra{border-top-color:var(--lysio-gron)}
.nyckeltalsrad .nyckeltal--daligt{border-top-color:var(--lysio-korall)}

.kortrad{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:.75rem}

/* Sma multiplar (bygg-f8-sma-multiplar.md, katalog 3.7): 2 till 3 kolumner,
   en per rad vid 400 px. Varje del far egen rubrik och hjalptextrad. */
.sma-multiplar-rutnat{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1.25rem 1.5rem}
.sma-multiplar-del h6{margin-bottom:.25rem}
@media (max-width:480px){
  .sma-multiplar-rutnat{grid-template-columns:1fr}
}

/* ============================================================
   JÄMFÖRELSEVYN (variant 1, september 2026)
   Rapportkort högst upp, sedan ett avsnitt per område med
   topplista + måttväxlare, nyckeltal och fördjupning.
   ============================================================ */

/* --- Rapportkort: ett per område, klickbart ned till avsnittet --- */
.jf-betygsrad{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center;
  background:var(--lysio-cream); border:1px solid var(--gra-150); border-radius:var(--radie);
  padding:1.25rem 1.4rem; margin-bottom:1rem;
}
.jf-totalbetyg{display:flex; flex-direction:column; align-items:center; gap:.1rem}
.jf-totalbetyg .siffra{
  font-size:var(--tal-stor); font-weight:600; line-height:1;
  color:var(--lysio-marin); font-variant-numeric:tabular-nums;
}
.jf-totalbetyg .siffra .av{font-size:var(--text-lg); font-weight:400; color:var(--gra-500)}
.jf-totalbetyg .under{
  font-size:var(--text-xs); letter-spacing:.01em;
  color:var(--gra-500); font-weight:600; text-align:center;
}
.jf-betygstext{font-size:var(--text-bas); max-width:62ch; margin:0; line-height:1.5}
.jf-betygstext strong{color:var(--lysio-marin)}

/* Fyra kolumner så länge det får plats: fem områden på en auto-fit-rad
   ger annars ett ensamt kort på rad två med tomrum bredvid. */
.jf-kortgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:.85rem; margin-bottom:1.5rem}
.jf-kort{
  background:#fff; border:1px solid var(--gra-150); border-radius:var(--radie);
  border-top:3px solid var(--gra-300);
  padding:.95rem 1.05rem 1.05rem; display:flex; flex-direction:column; gap:.65rem;
  text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%;
}
.jf-kort:hover{background:var(--gra-050)}
.jf-kort:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}
.jf-kort--bra{border-top-color:var(--lysio-gron)}
.jf-kort--daligt{border-top-color:var(--lysio-korall)}
.jf-kort-huvud{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; min-height:2.6em}
.jf-kort-titel{font-size:var(--text-bas); font-weight:600; line-height:1.3; text-wrap:balance}
.jf-kort-plats{font-size:var(--text-xs); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.jf-kort-plats--bra{color:var(--lysio-skogsgron)}
.jf-kort-plats--daligt{color:var(--lysio-vinrod)}
.jf-kort-plats--neutral{color:var(--gra-500)}
.jf-kort-matt{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.jf-kort-matt li{display:flex; flex-direction:column; gap:.22rem}
/* Namn och värde på var sin rad. Sida vid sida krockar de så fort
   måttnamnet är långt ("Handelsbolag/kommanditbolag"). */
.jf-kort-rad{display:flex; flex-direction:column; gap:.1rem; font-size:var(--text-sm)}
.jf-kort-namn{color:var(--gra-500); line-height:1.25; min-width:0}
.jf-kort-varden{font-variant-numeric:tabular-nums; font-size:var(--text-sm)}
.jf-kort-varden span{color:var(--gra-500)}

/* Stapel under varje mått: var kommunen ligger på gruppens spann, med
   medianen som streck. Gör kortet avläsbart utan att läsa siffrorna. */
.jf-kort-spar{position:relative; height:5px; background:var(--gra-050); border-radius:var(--radie-liten)}
.jf-kort-fyll{position:absolute; left:0; top:0; bottom:0; border-radius:var(--radie-liten); background:var(--gra-300)}
.jf-kort-fyll--bra{background:var(--lysio-gron)}
.jf-kort-fyll--daligt{background:var(--lysio-korall)}
.jf-kort-median{position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--gra-700)}
.jf-kort-fot{
  font-size:var(--text-xs); color:var(--lysio-marin); border-top:1px solid var(--gra-150);
  padding-top:.45rem; margin-top:auto; display:flex; justify-content:space-between;
}
.jf-kort-fot .pil{color:var(--gra-500)}

/* --- Områdesavsnitt --- */
/* Jämförelsevyns numrerade avsnitt är samma sak som .sektion, fast med
   ordningsnummer och placeringssiffra i rubrikraden. De får därför samma
   K1-avgränsning: linje över bredden mellan avsnitt, marin kant på
   rubriken och indraget innehåll. */
.jf-avsnitt{margin-bottom:2rem; scroll-margin-top:1rem;
            border-top:1px solid var(--gra-150); padding-top:1.25rem}
.jf-avsnitt:first-of-type{border-top:none; padding-top:0}
.jf-avsnitt-huvud{margin-bottom:.75rem; padding-left:.7rem;
                  border-left:3px solid var(--lysio-marin)}
.jf-avsnitt-rubrikrad{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.75rem}
.jf-avsnitt-rubrikrad h5{margin:0; font-size:var(--text-lg); font-weight:600; color:var(--lysio-marin)}
.jf-avsnitt > *:not(.jf-avsnitt-huvud){padding-left:.7rem}
.jf-ordning{font-size:var(--text-xs); font-weight:600; color:var(--gra-500); font-variant-numeric:tabular-nums; margin-right:.4rem}
.jf-avsnitt-plats{font-size:var(--text-xs); font-weight:600; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:.4rem; white-space:nowrap}
.jf-avsnitt-plats--bra{color:var(--lysio-skogsgron)}
.jf-avsnitt-plats--daligt{color:var(--lysio-vinrod)}
.jf-avsnitt-plats--neutral{color:var(--gra-500)}
.jf-prick{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.jf-prick--bra{background:var(--lysio-gron)}
.jf-prick--daligt{background:var(--lysio-korall)}
.jf-prick--neutral{background:var(--gra-300)}

.jf-rutnat{
  display:grid; grid-template-columns:minmax(250px,1fr) minmax(250px,1.2fr);
  gap:1px; background:var(--gra-150); border:1px solid var(--gra-150); border-radius:var(--radie); overflow:hidden;
  align-items:start;
}
/* Rutorna måste fylla radens höjd, annars syns rutnätets gråa botten som
   ett fält bredvid den kortare rutan. */
.jf-rutnat > .jf-ruta{align-self:stretch}
.jf-ruta{background:#fff; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.65rem}
.jf-ruta--bred{grid-column:1 / -1}
.jf-ruta h6{
  font-size:var(--text-sm); font-weight:600; margin:0;
  letter-spacing:.01em; color:var(--gra-500);
}
.jf-ruta-huvud{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem}
.jf-listfot{font-size:var(--text-xs); color:var(--gra-500); margin:.3rem 0 0}

/* --- Måttväxlare på topplistan --- */
.jf-vaxlare{
  display:flex; flex-wrap:wrap; gap:1px; background:var(--gra-150);
  border:1px solid var(--gra-150); border-radius:var(--radie); overflow:hidden;
}
.jf-vaxlare-knapp{
  font:inherit; font-size:var(--text-xs); cursor:pointer; flex:1 1 auto;
  background:#fff; color:var(--gra-500); border:0; padding:.35rem .55rem;
  white-space:nowrap; text-align:center;
}
.jf-vaxlare-knapp:hover{background:var(--gra-050); color:var(--gra-900)}
.jf-vaxlare-knapp:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:-2px}
.jf-vaxlare-knapp[aria-selected="true"]{background:var(--lysio-marin); color:#fff; font-weight:600}

/* Rullgardin i stället för knapprad när måtten är för många (18 branscher). */
.jf-vaxlare-lista{font-size:var(--text-sm); width:100%}

/* --- Topplista --- */
.jf-topplista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.jf-tl-rad{
  display:grid; grid-template-columns:1.5rem 1fr auto; gap:.6rem; align-items:center;
  padding:.28rem .45rem; border-radius:var(--radie); font-size:var(--text-sm);
}
.jf-tl-rad--egen{background:var(--lysio-blaljus); font-weight:600}
.jf-tl-nr{color:var(--gra-500); font-variant-numeric:tabular-nums; font-size:var(--text-xs)}
.jf-tl-namn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jf-tl-varde{font-variant-numeric:tabular-nums; white-space:nowrap}
.jf-tl-avbrott{text-align:center; color:var(--gra-500); font-size:var(--text-sm); letter-spacing:.2em; padding:.1rem 0}

/* --- Nyckeltal --- */
.jf-nyckeltalsrutnat{display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:1.1rem .9rem; align-items:start}
.jf-nt{display:flex; flex-direction:column; gap:.1rem}
/* Fast höjd på etiketten så talen hamnar på samma baslinje även när ett
   namn tar två rader ("Störst under gruppen"). */
.jf-nt-etikett{
  font-size:var(--text-xs); letter-spacing:.01em; color:var(--gra-500);
  font-weight:600; line-height:1.3; min-height:2.6em; display:flex; align-items:flex-end;
}
.jf-nt-varde{font-size:var(--tal-mellan); font-weight:600; color:var(--lysio-marin); font-variant-numeric:tabular-nums; line-height:1.1}
.jf-nt-jmf{font-size:var(--text-xs); color:var(--gra-500); font-variant-numeric:tabular-nums}
.jf-nt-jmf--bra{color:var(--lysio-skogsgron)}
.jf-nt-jmf--daligt{color:var(--lysio-vinrod)}

/* Förklaringsknapp vid nyckeltal: vad måttet räknar och vilken nämnare
   som används (UX: varje mått ska gå att förstå där det visas). */
/* Etikett och infoknapp på samma rad, med knappen efter texten i stället
   för i en egen kolumn. Annars bryts "Flera arbetsställen" i två rader
   medan ikonen står kvar uppe och talen hamnar på olika höjd. */
/* Två rader text plus ikonens höjd. Med 2,6em bryts "Flera arbetsställen"
   så att ikonen hamnar på rad tre och talet under sjunker ur linje. */
.jf-nt-etikett-rad{display:block; min-height:3.1em}
.jf-nt-etikett-rad .jf-nt-etikett{min-height:0; display:inline}
.jf-nt-info{
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:1px solid var(--gra-300); background:#fff; color:var(--gra-500);
  font-size:var(--text-xs); font-weight:700; line-height:1; cursor:help; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:.1em; margin-left:.15rem;
}
.jf-nt-info:hover{border-color:var(--lysio-marin); color:var(--lysio-marin); background:var(--lysio-blaljus)}
.jf-nt-info:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}
.jf-nt-forklaring{
  font-size:var(--text-xs); line-height:1.5; color:var(--gra-700);
  background:var(--gra-050); border:1px solid var(--gra-150); border-left:2px solid var(--lysio-bla);
  border-radius:var(--radie); padding:.5rem .7rem; margin:.15rem 0 0;
}
.jf-nt-forklaring strong{color:var(--lysio-marin); font-weight:600}

/* Fördelningsband: kommunens sammansättning som ett vågrätt band, med
   gruppens median under. Fyller nyckeltalsrutan, som sträcks till
   topplistans höjd och annars står halvtom. */
.jf-fordelning{
  border-top:1px solid var(--gra-150); padding-top:.8rem; margin-top:.4rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.jf-fordelning-rubrik{
  font-size:var(--text-xs); letter-spacing:.01em;
  color:var(--gra-500); font-weight:600;
}
.jf-band-rad{display:flex; flex-direction:column; gap:.2rem}
.jf-band-etikett{font-size:var(--text-xs); color:var(--gra-500)}
.jf-band{display:flex; height:22px; border-radius:var(--radie); overflow:hidden; background:var(--gra-050)}
.jf-band--median{height:12px; opacity:.55}
.jf-band-del{min-width:2px; transition:none}
.jf-band-del[title]{cursor:help}

.jf-band-nyckel{
  display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.15rem;
}
.jf-band-post{display:flex; align-items:center; gap:.35rem; font-size:var(--text-xs); color:var(--gra-700)}
.jf-band-kloss{width:9px; height:9px; border-radius:var(--radie); flex:0 0 auto}
.jf-band-varde{color:var(--gra-500); font-variant-numeric:tabular-nums}

/* Förklaring under ett områdes avvikelselista, där alla poster delar
   samma definition. */
.jf-definition{
  font-size:var(--text-xs); line-height:1.5; color:var(--gra-500);
  border-top:1px solid var(--gra-150); padding-top:.55rem; margin:.2rem 0 0;
}
.jf-definition strong{color:var(--gra-700); font-weight:600}

/* --- Branschernas avvikelsestaplar: divergerande från en nollinje --- */
.jf-dv-rubrikrad,.jf-dv-skalrad,.jf-dv-rad{
  display:grid; grid-template-columns:minmax(115px,1.4fr) minmax(130px,2fr) 4.4rem 3.5rem;
  gap:.7rem;
}
.jf-dv-rubrikrad{
  font-size:var(--text-xs); letter-spacing:.01em; color:var(--gra-500);
  font-weight:600; padding:0 .3rem .3rem; border-bottom:1px solid var(--gra-150); margin-bottom:.3rem;
}
.jf-dv-rubrikrad span:nth-child(3),.jf-dv-rubrikrad span:nth-child(4){text-align:right}
.jf-dv-skalrad{font-size:var(--text-xs); color:var(--gra-500); padding:0 .3rem .25rem}
.jf-dv-skala{display:flex; justify-content:space-between}
.jf-dv-rad{align-items:center; padding:.24rem .3rem; font-size:var(--text-sm); border-radius:var(--radie)}
.jf-dv-rad:hover{background:var(--gra-050)}
a.jf-dv-rad{color:inherit; text-decoration:none}
a.jf-dv-rad:hover .jf-dv-namn{color:var(--lysio-marin); text-decoration:underline}
.jf-dv-namn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jf-dv-spar{position:relative; height:15px; background:var(--gra-050); border-radius:var(--radie)}
.jf-dv-noll{position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--gra-300)}
.jf-dv-stapel{position:absolute; top:2px; bottom:2px; border-radius:var(--radie)}
.jf-dv-stapel--over{background:var(--lysio-marin)}
.jf-dv-stapel--under{background:var(--gra-300)}
.jf-dv-andel{text-align:right; font-variant-numeric:tabular-nums; color:var(--gra-500); font-size:var(--text-xs)}
.jf-dv-avv{text-align:right; font-variant-numeric:tabular-nums; font-size:var(--text-xs); font-weight:600}
.jf-dv-avv--over{color:var(--lysio-marin)}
.jf-dv-avv--under{color:var(--gra-500)}

/* --- Fördjupning --- */
.jf-fordjupning{border-top:1px solid var(--gra-150); padding-top:.7rem}
.jf-fordjupning summary{
  font-size:var(--text-xs); color:var(--lysio-marin); cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:.4rem;
}
.jf-fordjupning summary::-webkit-details-marker{display:none}
.jf-fordjupning summary::before{content:"\25B8"; font-size:var(--text-xs); color:var(--gra-500)}
.jf-fordjupning[open] summary::before{content:"\25BE"}
.jf-fordjupning summary:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}
.jf-fordjupning-inre{padding-top:.8rem; display:flex; flex-direction:column; gap:.8rem}
.jf-tabellram{border:1px solid var(--gra-150); border-radius:var(--radie); overflow-x:auto}
.jf-tabellram .table{margin-bottom:0; font-size:var(--text-sm)}
.jf-tabellram .table th{
  font-size:var(--text-xs); letter-spacing:.01em;
  color:var(--gra-500); font-weight:600; white-space:nowrap;
}
.jf-tabellram .table td.h,.jf-tabellram .table th.h{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.jf-fotrad td{border-top:1px solid var(--gra-300); font-weight:600; background:var(--gra-050)}

.jf-notis{
  font-size:var(--text-xs); color:var(--gra-500); background:var(--gra-050);
  border:1px solid var(--gra-150); border-left:3px solid var(--lysio-gul);
  border-radius:var(--radie); padding:.55rem .75rem; margin:0;
}

/* insikter (app.insikter, _komponenter.html): sidans FÖRSTA innehåll
   (docs/projekt2-prognos-forslag.md, princip 1: "Insikten först, siffran
   sedan, tabellen sist"), därför brödtext (--text-bas, gra-700), inte
   sekundärtext eller en dämpad metodnot som .jf-notis. En egen kant per
   mening (inte en enda ram runt hela listan) läses som separata,
   fristående påståenden, inte en enda löpande text. */
.insikter .insikt{
  font-size:var(--text-bas); color:var(--gra-700);
  border-left:3px solid var(--lysio-marin); padding:.15rem 0 .15rem .75rem;
  margin-bottom:.5rem;
}
.insikter .insikt:last-child{margin-bottom:0}

/* Tomtillstånd som är sidans ENDA innehåll (t.ex. startsidan när
   grunddata/referensdata saknas, UX4-06 fynd 1) — .jf-notis är gjord som
   en dämpad metodnot BREDVID innehåll (text-xs, grå-500), och blir olik
   fotnot-liten och lätt att läsa som "sidan är trasig" när den är det
   enda som visas. Samma bakgrund/kant/radie som .jf-notis, men i
   normal brödtextstorlek och utan den gula kanten som annars signalerar
   "en bisak", inte "detta är sidans innehåll just nu". */
.start-tomtillstand{
  /* gra-700 ("brödtext"), inte gra-500 ("sekundärtext") — när rutan är
     sidans ENDA innehåll är den inte en bisak (UX4-06, uppföljning). */
  font-size:var(--text-bas); color:var(--gra-700); background:var(--gra-050);
  border:1px solid var(--gra-150);
  border-radius:var(--radie); padding:1rem 1.25rem; margin:0;
}

/* Kompetens-vyns actionbaserade översikt (docs/bygg-kompetensmatchning.md,
   uppföljning): en sammanfattningsruta plus en rangordnad, kompakt lista
   som binder ihop matchning/bristexponering/bristyrken till en slutsats,
   i stället för att bara visa de tre måtten var för sig. */
.kp-oversikt-sammanfattning{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--lysio-marin); border-radius:var(--radie-stor);
  padding:1.1rem 1.3rem; margin-bottom:1rem;
}
.kp-oversikt-ikon{
  flex-shrink:0; width:1.9rem; height:1.9rem; border-radius:var(--radie);
  background:var(--lysio-korall); color:#fff; font-weight:700; font-size:var(--text-lg);
  display:flex; align-items:center; justify-content:center;
}
.kp-oversikt-sammanfattning p{
  color:#fff; font-size:var(--text-bas); line-height:1.55; max-width:90ch;
}
.kp-atgardslista{display:flex; flex-direction:column; gap:.6rem}
.kp-atgardsrad{
  display:flex; gap:.9rem; align-items:flex-start;
  background:#fff; border:1px solid var(--gra-150); border-radius:var(--radie);
  padding:.7rem .9rem; border-left:3px solid var(--gra-300);
}
.kp-atgardsrad--hog{border-left-color:var(--lysio-korall)}
.kp-atgardsrad--mellan{border-left-color:var(--lysio-gul)}
.kp-atgardsnr{
  flex-shrink:0; width:1.5rem; height:1.5rem; border-radius:var(--radie);
  background:var(--lysio-marin); color:#fff; font-weight:700; font-size:var(--text-xs);
  display:flex; align-items:center; justify-content:center;
}
.kp-atgardsinnehall{flex-grow:1; min-width:0}
.kp-atgardsrubrik{font-size:var(--text-bas); font-weight:600; color:var(--lysio-marin)}
.kp-atgardstext{font-size:var(--text-sm); color:var(--gra-500); margin-top:.15rem; line-height:1.5}
.kp-atgardsdetaljer{display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.4rem}
.kp-atgardsdetalj{font-size:var(--text-xs); color:var(--gra-500)}
.kp-atgardsdetalj strong{color:var(--lysio-marin); font-variant-numeric:tabular-nums}

/* Bristyrken-tabellen: fällbara rader (jobbmöjligheter döljs som
   default) plus klickbara, sorterbara kolumnrubriker. */
.kp-sortknapp{
  background:none; border:none; padding:0; font:inherit; color:inherit;
  cursor:pointer; display:inline-flex; align-items:center; gap:.3rem;
}
.kp-sortknapp::after{content:"↕"; font-size:.8em; color:var(--gra-300)}
.kp-sortknapp--stigande::after{content:"↑"; color:var(--lysio-marin)}
.kp-sortknapp--fallande::after{content:"↓"; color:var(--lysio-marin)}
.kp-brist-rad{cursor:pointer}
.kp-brist-rad:hover{background:var(--gra-050)}
.kp-brist-rad:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:-2px}
.kp-brist-pil{
  width:1.2rem; color:var(--gra-300); font-size:var(--text-sm);
  transition:transform .15s ease;
}
.kp-brist-rad[aria-expanded="true"] .kp-brist-pil{transform:rotate(90deg); color:var(--lysio-marin)}
.kp-brist-detaljrad td{background:var(--gra-050); border-top:none}
.kp-brist-detaljinnehall{
  font-size:var(--text-sm); color:var(--gra-500); padding:.4rem .2rem; line-height:1.5;
}
.kp-brist-detaljinnehall strong{color:var(--lysio-marin)}

/* Relevans-kolumnen: en liten mätarstapel bredvid procenttalet, så
   skillnaden mellan raderna syns direkt utan att behöva läsa siffrorna. */
.kp-relevans-rad{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap}
.kp-relevans-stapel{
  display:inline-block; width:3rem; height:.5rem; border-radius:var(--radie-pill);
  background:var(--gra-150); overflow:hidden; flex-shrink:0;
}
.kp-relevans-stapel span{display:block; height:100%; background:var(--lysio-marin); border-radius:var(--radie-pill)}

/* AI-varningen görs grafisk i stället för ren löptext: en ikonruta i
   notisen, och en egen badge med mätarstapel i den fällda detaljvyn. */
.kp-ai-varning{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--gra-050); border:1px solid var(--gra-150); border-left:3px solid var(--lysio-korall);
  border-radius:var(--radie); padding:.7rem .9rem;
}
.kp-ai-varning-ikon{
  flex-shrink:0; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--lysio-korall); color:#fff; font-size:var(--text-bas);
  display:flex; align-items:center; justify-content:center;
}
.kp-ai-varning div{font-size:var(--text-xs); color:var(--gra-500); line-height:1.5}
.kp-ai-varning strong{color:var(--lysio-marin)}
.kp-ai-badge{
  display:flex; gap:.7rem; align-items:flex-start; margin-top:.5rem;
  background:#fff; border:1px solid var(--gra-150); border-radius:var(--radie); padding:.55rem .75rem;
}
.kp-ai-badge-ikon{
  flex-shrink:0; width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--lysio-korall); color:#fff; font-size:var(--text-xs);
  display:flex; align-items:center; justify-content:center;
}
.kp-ai-badge-innehall{flex-grow:1; min-width:0}
.kp-ai-badge-rubrik{font-size:var(--text-xs); font-weight:600; color:var(--lysio-marin)}
.kp-ai-badge-matare{
  width:100%; max-width:12rem; height:.4rem; border-radius:var(--radie-pill);
  background:var(--gra-150); overflow:hidden; margin:.3rem 0;
}
.kp-ai-badge-matare span{display:block; height:100%; background:var(--lysio-korall); border-radius:var(--radie-pill)}
.kp-ai-badge-fot{font-size:var(--text-xs); color:var(--gra-500); line-height:1.4}

@media (max-width:820px){
  .jf-rutnat{grid-template-columns:1fr}
  .jf-betygsrad{grid-template-columns:1fr; justify-items:start; gap:.9rem}
}
@media (max-width:700px){
  .jf-dv-rubrikrad,.jf-dv-skalrad,.jf-dv-rad{
    grid-template-columns:minmax(95px,1.3fr) minmax(80px,1.5fr) 3.8rem 3.2rem;
    gap:.4rem; font-size:var(--text-xs);
  }
}

/* Hoppa till innehåll (docs/ux3.md, UX3-09): osynlig tills den får fokus
   (första Tab-tryck), då hoppar man förbi hela sidomenyn/mobilhuvudet
   direkt till <main>. Standardmönster, inte bara relevant på mobil. */
.hoppa-till-innehall{
  position:absolute; left:-9999px; top:0; z-index:2000;
  padding:.6rem 1rem; background:var(--lysio-marin); color:#fff;
  text-decoration:none; border-radius:0 0 .3rem 0;
}
.hoppa-till-innehall:focus{left:0}

/* Kompakt mobilhuvud (docs/ux3.md, UX3-08): dold på desktop (sidomenyn
   visar redan kommun/vy där). Under 860px ersätter den sidomenyns
   brand/titel-block, så mobilbesökaren ser aktiv kommun och aktuell vy
   utan att först scrolla förbi hela navigationen. */
.mobilhuvud{display:none}

#toggle-sidebar{display:none}

@media (max-width:860px){
  .main-content{flex:0 0 100%; width:100%}

  .mobilhuvud{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.7rem 1rem; background:#fff; border-bottom:1px solid var(--gra-150);
    position:sticky; top:0; z-index:1010;
  }
  .mobilhuvud-kommun{font-size:var(--text-lg); font-weight:700; color:var(--lysio-marin); line-height:1.2}
  .mobilhuvud-vy{font-size:var(--text-xs); color:var(--gra-500)}
  .mobilhuvud-knapp{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:2.4rem; height:2.4rem; border:1px solid var(--gra-300); border-radius:var(--radie-liten);
    background:#fff; color:var(--lysio-marin); font-size:var(--text-lg);
  }
  .mobilhuvud-knapp:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}

  /* Sidomenyns brand/titel-block dubblerar mobilhuvudet ovanför — döljs
     bara på mobil, resten av innehållet (nav/konto) återanvänds oförändrat
     inuti den utfällbara panelen. */
  .sidebar .sidebar-topp{display:none}

  .sidebar{
    position:static; height:auto; width:100%; min-width:0; max-width:none;
    border-right:none; border-bottom:1px solid var(--gra-150); box-shadow:none;
    display:none!important; /* vinner över Bootstraps .d-flex{display:flex!important} */
  }
  .sidebar.mobilmeny-oppen{display:flex!important; padding-top:.9rem}
  .sidebar-konto{margin-top:1rem}
  .page-canvas{padding:1rem 1rem 5.5rem}
  /* Sandytan går ut till kanvasens kant, så den negativa marginalen
     måste följa .page-canvas-paddingen även här. */
  .sidhuvud{margin:-1rem -1rem 0; padding:1rem 1rem .9rem}

  /* Långa filter-/gruppbeskrivningar radbryts i stället för att klippas
     med "..." (docs/ux3.md, UX3-08) — på en smal skärm tar ellipsis bort
     merparten av texten i stället för bara den sista biten. */
  .filterpanel-sammanfattning{
    white-space:normal; text-overflow:clip; margin-left:0; flex-basis:100%;
  }
  .filterpanel-rubrik{flex-wrap:wrap}
}


/* ============================================================
   UTRIKESHANDEL (variant 1, september 2026)
   Export och import hålls isär genom hela vyn: ett företag kan
   exportera till en marknad och importera från en annan, och en
   gemensam siffra döljer kommunens handelsprofil (UX-12).
   ============================================================ */
.uh-namnare{font-size:var(--text-xs); color:var(--gra-500); margin-top:.1rem}

/* Export/import per marknad and per size class draw through the registered
   grupperad_stapel form (diagram_ram + ritaDiagram) since Erik's revert of
   F8's dumbbells; the hand-written uh-ei-*/uh-nyckel/uh-for-fa bar markup
   and its CSS were removed with it (docs: uh-dubbelstapel branch). */

/* --- Tidsintervall: kompakt chips + fri skala (Trender/Sysselsättning) ---
   Egen avgränsad box (bakgrund+kant), så den läses som EN sammanhållen
   kontroll bredvid filterradens övriga fält, inte tre lösa rader. Chips
   och skala på VAR SIN rad inuti boxen — att tvinga allt på en enda rad
   gjorde boxen bredare än utrymmet bredvid bransch/jämförelsegrupp
   tillät, vilket bröts av Bootstrap-raden på ett sätt som slet isär
   layouten och knuffade "Visa resultat" iväg (se ux2-uppföljning).
   Väljer man ett chip flyttas skalans båda handtag; drar man i skalan
   avmarkeras chipsen automatiskt (bara ett facit i taget). */
.tidsintervall{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--gra-050); border:1px solid var(--gra-150); border-radius:var(--radie);
  padding:.55rem .7rem; width:290px;
}
.ti-chiprad{display:flex; flex-wrap:wrap; gap:.3rem}
.ti-chip{
  font:inherit; font-size:var(--text-xs); font-weight:600; color:var(--gra-700);
  background:#fff; border:1px solid var(--gra-150); border-radius:var(--radie-pill);
  padding:.3rem .65rem; cursor:pointer; transition:background .12s,color .12s,border-color .12s;
  white-space:nowrap;
}
.ti-chip:hover{border-color:var(--lysio-bla); color:var(--gra-900)}
.ti-chip:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}
.ti-chip[aria-pressed="true"]{background:var(--lysio-marin); border-color:var(--lysio-marin); color:#fff}

.ti-skalarad{display:flex; align-items:center; gap:.5rem}
.ti-skala{flex:1 1 auto; display:flex; align-items:center; gap:.45rem; min-width:0}
.ti-arstal{font-size:var(--text-xs); color:var(--gra-500); font-variant-numeric:tabular-nums; white-space:nowrap}
.ti-spar{position:relative; height:6px; background:var(--gra-150); border-radius:var(--radie-liten); margin:0 4px; flex:1 1 auto}
.ti-fyll{position:absolute; top:0; bottom:0; background:var(--lysio-bla); border-radius:var(--radie-liten)}
.ti-handtag{
  position:absolute; top:50%; width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid var(--lysio-marin); transform:translate(-50%,-50%);
  cursor:grab; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.ti-handtag:active{cursor:grabbing}
.ti-handtag:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:3px}

.ti-varde{
  font-size:var(--text-xs); font-weight:700; color:var(--lysio-marin);
  font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto;
}

@media (max-width:560px){
  .tidsintervall{width:100%}
}

/* --- Handelns profil: underbranscher mot jämförelsegruppen ---
   Första versionen använde egna klassnamn (.hp-profil, .hp-kort,
   .hp-etikett, .hp-post, .hp-namn) som inte fanns i den här filen, så
   tabellen renderades helt ostilad: siffrorna klibbade ihop och
   staplarna syntes inte alls. Ersattes av husets befintliga
   .jf-tabellram + Bootstraps .table, och .h för sifferkolumner, precis
   som jämförelsevyn — de fem gamla klasserna togs bort som död kod
   (docs/GENOMGANG-KODKVALITET.md, avsnitt 5), resten av .hp-blocket
   nedan är fortfarande i aktivt bruk. */
.hp-tabell td{vertical-align:middle}
.hp-tabell td:first-child{line-height:1.25}
.hp-under{display:block; font-size:var(--text-xs); color:var(--gra-500)}
.hp-grupp{color:var(--gra-500)}
.hp-kol-jf{width:180px; white-space:nowrap; text-align:left}

/* Stapel där mitten är 1,0 (= som gruppen). Skalan går 0-2. */
.hp-stapel{
  position:relative; display:inline-block; vertical-align:middle;
  width:96px; height:8px; background:var(--gra-050); border-radius:var(--radie); overflow:hidden;
}
.hp-mitt{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--gra-300); z-index:2}
.hp-fyll{display:block; height:100%; background:var(--lysio-bla); border-radius:var(--radie)}
.hp-fyll--over{background:var(--lysio-marin)}
.hp-fyll--under{background:var(--gra-300)}
.hp-tal{margin-left:.55rem; font-size:var(--text-sm)}
.hp-fatal{font-size:var(--text-xs); color:var(--gra-500)}

@media (max-width:820px){
  .hp-kol-jf{width:auto}
  .hp-stapel{display:none}
}

/* --- Handelns profil: divergerande stapeldiagram ---
   Avvikelse i procentenheter mot jämförelsegruppen, kring ett nolläge i
   mitten. En lista med kvottal ("1,5x") kräver att läsaren tolkar talet;
   en stapel åt höger eller vänster visar riktning och storlek direkt. */
.hd-diagram{border:1px solid var(--gra-150); border-radius:var(--radie); padding:.9rem 1.1rem; background:#fff}
.hd-rad{
  display:grid; grid-template-columns:minmax(150px,230px) 1fr 62px;
  align-items:center; gap:.9rem; padding:.17rem 0;
}
.hd-namn{
  font-size:var(--text-sm); color:var(--gra-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hd-spar{position:relative; height:15px}
.hd-noll{
  position:absolute; left:50%; top:-2px; bottom:-2px;
  width:1px; background:var(--gra-300); z-index:1;
}
.hd-stapel{position:absolute; top:2px; height:11px; border-radius:1px; z-index:2}
.hd-stapel--over{background:var(--lysio-marin)}
.hd-stapel--under{background:var(--gra-300)}
.hd-varde{
  font-size:var(--text-xs); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.hd-varde--over{color:var(--lysio-marin); font-weight:600}
.hd-varde--under{color:var(--gra-500)}

.hd-axel{
  display:grid; grid-template-columns:minmax(150px,230px) 1fr 62px;
  gap:.9rem; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--gra-150);
  font-size:var(--text-xs); color:var(--gra-500);
}
.hd-axel span:nth-child(1){grid-column:2; text-align:left}
.hd-axel .hd-axel-mitt{grid-column:2; text-align:center; margin-top:-1.05rem}
.hd-axel span:nth-child(3){grid-column:2; text-align:right; margin-top:-1.05rem}

@media (max-width:820px){
  .hd-rad,.hd-axel{grid-template-columns:minmax(110px,1fr) 1fr 54px; gap:.5rem}
  .hd-namn{font-size:var(--text-xs)}
}

/* --- Största handelsföretagen ---
   Rankad lista i stället för tabell: fem rader med fyra kolumner blir en
   gles tabell med mycket luft, medan korten håller ihop företagsnamn och
   bransch som en enhet och låter måtten stå åt höger. */
.hf-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.hf-kort{
  display:grid; grid-template-columns:32px minmax(0,1fr) 120px 150px;
  align-items:center; gap:1rem;
  border:1px solid var(--gra-150); border-radius:var(--radie); background:#fff;
  padding:.62rem .9rem;
}
.hf-kort + .hf-kort{margin-top:-1px}
.hf-rang{
  font-size:var(--text-lg); font-weight:600; color:var(--gra-300);
  font-variant-numeric:tabular-nums; text-align:center;
}
.hf-kort:first-child .hf-rang{color:var(--lysio-marin)}
.hf-innehall{min-width:0; display:flex; flex-direction:column; gap:.1rem}
.hf-namn{
  font-size:var(--text-bas); font-weight:600; color:var(--gra-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hf-bransch{
  font-size:var(--text-xs); color:var(--gra-500);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hf-matt{display:flex; flex-direction:column; gap:.1rem; text-align:right}
.hf-matt-etikett{
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.03em; color:var(--gra-500);
}
.hf-matt-varde{font-size:var(--text-sm); color:var(--gra-900); white-space:nowrap}

@media (max-width:820px){
  .hf-kort{grid-template-columns:28px minmax(0,1fr); gap:.6rem .8rem}
  .hf-matt{grid-column:2; flex-direction:row; justify-content:space-between; text-align:left}
  .hf-matt-etikett{text-transform:none}
}

/* --- Publicerade besöksmål (Visit Swedens nationella API) --- */
.bm-rutnat{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.9rem}
.bm-kort{border:1px solid var(--gra-150); border-radius:var(--radie); padding:.8rem .95rem; background:#fff}
.bm-antal{font-size:var(--text-xl); font-weight:600; color:var(--lysio-marin); line-height:1.1}
.bm-etikett{font-size:var(--text-xs); color:var(--gra-500); margin-bottom:.5rem}
.bm-undertyper{list-style:none; margin:0; padding:.45rem 0 0; border-top:1px solid var(--gra-150)}
.bm-undertyper li{
  display:flex; justify-content:space-between; gap:.7rem;
  font-size:var(--text-xs); color:var(--gra-700); padding:.13rem 0;
}
.bm-undertyper li span:last-child{color:var(--gra-500)}

/* --- Besöksmål: egen kommun markerad i topplistan --- */
.bm-egen{font-weight:600; color:var(--lysio-marin)}
.bm-markor{
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em;
  background:var(--lysio-blaljus); color:var(--lysio-marin);
  padding:.08rem .3rem; border-radius:var(--radie); margin-left:.3rem;
}

/* --- Besöksmålens tematiska inriktning --- */
.bm-teman{display:flex; flex-direction:column; gap:.55rem; max-width:520px}
.bm-tema-rad{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.18rem}
.bm-tema-namn{font-size:var(--text-sm); color:var(--gra-900)}
.bm-tema-tal{font-size:var(--text-sm); font-weight:600; color:var(--lysio-marin); white-space:nowrap}
.bm-tema-andel{font-size:var(--text-xs); font-weight:400; color:var(--gra-500); margin-left:.45rem}

/* --- Topplistor (Trygghet) ---
   Ett placeringstal säger var kommunen ligger men inte mot vem. Korten
   visar de fem bästa plus den egna, med en synlig lucka när den egna
   ligger utanför topplistan. */
.tl-rutnat{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1rem}
.tl-kort{border:1px solid var(--gra-150); border-radius:var(--radie); padding:.85rem 1rem; background:#fff}
.tl-rubrik{font-size:var(--text-bas); font-weight:600; color:var(--lysio-marin); margin-bottom:.15rem}
.tl-beskrivning{font-size:var(--text-xs); color:var(--gra-500); margin-bottom:.6rem; line-height:1.35}
.tl-lista{list-style:none; margin:0; padding:0}
.tl-rad{
  display:grid; grid-template-columns:28px minmax(0,1fr) auto;
  align-items:baseline; gap:.7rem;
  padding:.24rem 0; border-bottom:1px solid var(--gra-050); font-size:var(--text-sm);
}
.tl-rad:last-child{border-bottom:none}
.tl-plats{color:var(--gra-500); text-align:right; font-size:var(--text-sm)}
.tl-kommun{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gra-900)}
.tl-varde{color:var(--gra-700); white-space:nowrap}
.tl-egen{background:var(--lysio-blaljus); margin:0 -.45rem; padding-left:.45rem; padding-right:.45rem}
.tl-egen .tl-plats,.tl-egen .tl-kommun,.tl-egen .tl-varde{color:var(--lysio-marin); font-weight:600}
.tl-lucka{text-align:center; color:var(--gra-300); font-size:var(--text-sm); padding:.1rem 0; letter-spacing:.2em}
.tl-enhet{font-size:var(--text-xs); color:var(--gra-500); margin-top:.5rem; text-align:right}

/* --- Komponentbibliotek (/admin/komponenter) ---
   Katalogsidans egen ram. Komponenterna själva använder sina vanliga
   klasser — det är hela poängen, katalogen visar dem som de faktiskt
   ser ut i vyerna. */
.kb-avsnitt{
  font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.06em;
  color:var(--lysio-marin); font-weight:600;
  margin:2.2rem 0 .9rem; padding-bottom:.35rem;
  border-bottom:2px solid var(--lysio-blaljus);
}
.kb-block{
  border:1px solid var(--gra-150); border-radius:var(--radie);
  padding:1rem 1.2rem 1.2rem; margin-bottom:1.1rem; background:#fff;
}
.kb-huvud{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap}
.kb-namn{
  font-size:var(--text-lg); font-weight:600; color:var(--lysio-marin);
  background:var(--lysio-blaljus); padding:.12rem .5rem; border-radius:var(--radie);
}
.kb-anvands{font-size:var(--text-xs); color:var(--gra-500)}
.kb-nar{font-size:var(--text-sm); color:var(--gra-700); margin:.5rem 0 1rem; max-width:62em; line-height:1.45}

/* Value labels on and off above a line chart (bygg-vardeetiketter.md). */
.diagram-kontroller{display:flex; justify-content:flex-end; margin-bottom:.25rem}
.diagram-etikettknapp{
  border:1px solid var(--gra-300); border-radius:var(--radie-liten); background:#fff;
  color:var(--lysio-marin); font-size:var(--text-xs); font-weight:600; padding:.15rem .55rem;
}
.diagram-etikettknapp[aria-pressed="true"]{background:var(--lysio-marin); border-color:var(--lysio-marin); color:#fff}
.diagram-etikettknapp:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}

/* Avvikelseavsnittets brickor (skiss A3a, patientavgifter-produkten,
   docs/instruktioner/bygg-skr-demo.md): fyra dämpade brickor i stället
   för en lång förklaringstext, som samtidigt förklarar grönt/rött och
   visar antalet vårdtyper i varje läge. Bakgrunden blandas ur samma
   RGB-variabler som .bg-success/.bg-danger redan använder (aldrig ett
   nytt, hårdkodat hex-värde), och --lysio-korall bär bara bakgrunden,
   aldrig text (samma AA-regel som resten av profilen): texten är
   jf-nt-jmf--bra/daligt (--lysio-skogsgron/--lysio-vinrod), redan
   kontrastprövade. */
.avvikelse-brickrad{display:flex; gap:.5rem; flex-wrap:wrap}
.avvikelse-bricka{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .6rem; border-radius:var(--radie-liten);
  font-size:var(--text-sm); font-weight:600;
}
.avvikelse-bricka--over{background:rgba(var(--bs-success-rgb),.14); color:var(--lysio-skogsgron)}
.avvikelse-bricka--under{background:rgba(var(--bs-danger-rgb),.14); color:var(--lysio-vinrod)}
.avvikelse-bricka--lika{background:var(--gra-050); color:var(--gra-500)}
.avvikelse-bricka--saknas{background:var(--gra-050); color:var(--gra-300); cursor:default}

/* Skillnad-cellen: en smal stapel (nollan i mitten) och talet i samma
   cell, aldrig utspridda över tabellens fulla bredd (Erik, skiss A3:
   "Värdena ska aldrig hamna långt från diagrammet"). */
.avvikelse-skillnadcell{display:flex; align-items:center; gap:.4rem; justify-content:flex-end}
.avvikelse-stapelspar{position:relative; flex:0 0 84px; height:14px; background:var(--gra-150); border-radius:3px}
.avvikelse-nolllinje{position:absolute; top:-2px; bottom:-2px; left:50%; width:1px; background:var(--gra-300)}
.avvikelse-stapel{position:absolute; top:1px; bottom:1px; border-radius:2px; background:var(--gra-300)}
/* Färgad bakgrund på stapeln (skr-01e, Erik: "Något har hänt med
   färgerna"): jf-nt-jmf--bra/daligt sätter bara TEXTfärg, ingen
   bakgrund, så en stapel som fick den klassen förblev grå. Egna
   klasser här, samma två färger som --lysio-gron/--lysio-korall bär
   redan (bakgrund/kantlinje/stapel, aldrig text, se variabeln
   --lysio-korall:s egen kommentar ovan). Små avvikelser (rad.bedomning
   None) får ingen av klasserna och förblir --gra-300. */
.avvikelse-stapel--bra{background:var(--lysio-gron)}
.avvikelse-stapel--daligt{background:var(--lysio-korall)}
.avvikelse-tal{flex:0 0 64px; font-size:var(--text-sm)}
.avvikelse-markor{display:inline-block; width:12px; text-align:center; font-size:var(--text-xs)}
table.avvikelse-tabell thead th{cursor:pointer; user-select:none}
table.avvikelse-tabell thead th:hover{color:var(--lysio-marin)}
.avvikelse-sortpil{font-size:.65rem; margin-left:3px; color:var(--gra-500)}

/* Kartans tabell (skr-01e, Erik: "Tabellen jämte har för stor font"):
   mindre text och inga radbrytningar, så långa gruppnamn/regionnamn
   inte tvingar tabellen mycket högre än kartan bredvid. */
table.koroplet-tabell-tat{font-size:.85rem}
table.koroplet-tabell-tat th, table.koroplet-tabell-tat td{white-space:nowrap; padding-top:.25rem; padding-bottom:.25rem}

/* Marginalkortet, Lysio stats (LS2 punkt 8, skissen lysio-stats/
   mockups/marginal-per-ar.html, godkänd av Erik): egen, liten
   komponent (inte nyckeltal(), som är byggd för en rad flera kort,
   inte ett ensamt kort med en stapel och två belopp av olika storlek). */
.marginalkort{max-width:640px; border:1px solid var(--gra-150); border-radius:var(--radie); padding:1.2rem 1.4rem}
.marginalkort-belopp{text-align:center; margin:1.4rem 0 .9rem}
.marginalkort-i-ar{font-size:var(--tal-stor); font-weight:600; color:var(--lysio-marin); font-variant-numeric:tabular-nums; line-height:1.05}
.marginalkort-i-fjol{font-size:var(--tal-mellan); color:var(--gra-500); font-variant-numeric:tabular-nums; margin-top:.6rem}
.marginalkort-etikett{font-size:var(--text-xs); color:var(--gra-500)}
.marginalkort-stapelspar{height:12px; background:var(--gra-150); border-radius:6px; overflow:hidden}
.marginalkort-stapel{height:100%; background:var(--lysio-gul); border-radius:6px}
.marginalkort-rad{display:flex; justify-content:space-between; font-size:var(--text-sm); color:var(--gra-500); margin-top:.4rem}
.marginalkort-diff{font-weight:600; color:var(--text)}
.marginalkort-not{font-size:var(--text-xs); color:var(--gra-500); margin-top:1rem}

/* Landskorten (LS12, Erik: "Gör kort per land med flagga. I år störst
   och föregående under"): en rad kort, samma "belopp stort, etikett
   liten"-princip som marginalkortet men i en grid i stället för ett
   ensamt kort, eftersom antalet länder kan variera. */
.ls-landskort-rad{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.9rem}
.ls-landskort{border:1px solid var(--gra-150); border-radius:var(--radie); padding:.9rem 1rem; text-align:center}
.ls-landskort-huvud{display:flex; align-items:center; justify-content:center; gap:.4rem; margin-bottom:.5rem}
.ls-landskort-flagga{font-size:1.3rem; line-height:1}
.ls-landskort-namn{font-weight:600; color:var(--text)}
.ls-landskort-i-ar{font-size:var(--tal-mellan); font-weight:600; color:var(--lysio-marin); font-variant-numeric:tabular-nums; line-height:1.1}
.ls-landskort-i-fjol{font-size:var(--text-sm); color:var(--gra-500); font-variant-numeric:tabular-nums; margin-top:.4rem}
.ls-landskort-etikett{font-size:var(--text-xs); color:var(--gra-500)}
.ls-landskort-diff{margin-top:.5rem}

/* Diagramväxeln Per månad/Ackumulerat (LS2 punkt 2): en enkel
   segmenterad knapprad, samma mönster som diagram-etikettknapp men två
   knappar som utesluter varandra i stället för en enda på/av-knapp. */
.diagramvaxel{display:flex; gap:0; margin-bottom:.5rem}
.diagramvaxel button{border-radius:0}
.diagramvaxel button:first-child{border-top-left-radius:var(--radie-liten); border-bottom-left-radius:var(--radie-liten)}
.diagramvaxel button:last-child{border-top-right-radius:var(--radie-liten); border-bottom-right-radius:var(--radie-liten); margin-left:-1px}

/* Turismens omsättning (T1, Erik: "Turismens omsättning per kommun i
   samma stil som skärmbilden"): totalen stort som marginalkortet,
   sedan en rad per kategori med en färgruta, namn, en stapel och
   belopp/andel. Egen "turism-"-prefix (inte "ls-"), produktoberoende
   variabler (--gra-150/--radie/--text-xs m.fl. är redan gemensamma). */
.turism-omsattning-kort{border:1px solid var(--gra-150); border-radius:var(--radie); padding:1.1rem 1.3rem}
.turism-omsattning-total{font-size:var(--tal-stor); font-weight:600; color:var(--lysio-marin); font-variant-numeric:tabular-nums; line-height:1.05}
.turism-omsattning-total-kr{font-size:var(--text-sm); color:var(--gra-500); font-variant-numeric:tabular-nums}
.turism-kategorilista{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.turism-kategori-rad{display:grid; grid-template-columns:.8rem minmax(10rem, 1fr) minmax(6rem, 2fr) 5rem 3.5rem; align-items:center; gap:.7rem}
.turism-kategori-farg{width:.8rem; height:.8rem; border-radius:50%; display:inline-block}
.turism-kategori-namn{font-size:var(--text-sm)}
.turism-kategori-underrubrik{display:block; font-size:var(--text-xs); color:var(--gra-500)}
.turism-kategori-stapelspar{height:10px; background:var(--gra-150); border-radius:5px; overflow:hidden}
.turism-kategori-stapel{display:block; height:100%; border-radius:5px}
.turism-kategori-mkr{font-size:var(--text-sm); font-variant-numeric:tabular-nums; text-align:right}
.turism-kategori-andel{font-size:var(--text-xs); color:var(--gra-500); font-variant-numeric:tabular-nums; text-align:right}
.turism-omsattning-kalla{margin-top:.8rem; margin-bottom:0}
.diagramvaxel button.active{background:var(--lysio-marin); border-color:var(--lysio-marin); color:#fff}