/* 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:#1F2933;   /* rubriker, samma som brödtexten (AP 145) */
  --gra-700:#1F2933;   /* mörkare grå text, samma som brödtexten (AP 145) */
  --gra-500:#4A5561;   /* grå stödtext, 7,6:1 mot vitt (AP 145) */
  --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-diagram:.65625rem; /* 10,5 px: minsta text, bara i diagram och tabeller (AP 145) */
  --text-xs:.75rem;    /* etiketter, källrader, nyckelförklaringar */
  --text-sm:.75rem;    /* 12 px: tabellceller, listrader, hjälptext (AP 145) */
  --text-bas:.875rem;  /* 14 px: brödtext (AP 145) */
  --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.25rem;
  --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;
}


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}

/* Dator (AP 30 M1): menyn rullar som helhet. Raden "Inloggad som" ligger efter posterna och hamnar längst ned när menyn är kortare än
   skärmen, men aldrig över posterna. Inget avsnitt klipps, och inget rullar inne i menyn. */
@media (min-width:861px){
  .sidebar{overflow-y:auto; overflow-x:hidden}
  .sidebar > *{flex-shrink:0}
  .sidebar-rull{flex:0 0 auto; margin:0; padding:0 0 .5rem; overflow:visible}
  .sidebar-konto-fast{flex:0 0 auto; margin-top:auto; padding-top:.6rem; padding-bottom:.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; overflow-x:hidden; 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 > *{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}

/* LS111 (Erik 2026-10-28): tabelltexten var Bootstraps odefinierade 1rem
   (16 px), onödigt stor jämfört med brödtexten (--text-bas, .9375rem).
   --text-sm (.8125rem) fanns redan för "tabellceller" (se :root ovan) men
   användes bara via .fs-tabell/.statcard, inte på .table självt. Sätts
   här en gång för ALLA tabeller (tabell(), tabellram(), handskrivna),
   motsvarande ungefär Eriks 90 % av 16 px. Övriga relativa storlekar i
   celler (badges, sorteringspilar, formulärfält i em/rem) följer med
   automatiskt. .table-sm:s cellutfyllnad minskas något i samma mått, så
   raderna blir lika täta som vid 90 % zoom. */
.table{font-size:var(--text-sm)}
.table-sm>:not(caption)>*>*{padding:.2rem .25rem}

/* 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.5rem -2rem 1.25rem; padding:1.25rem 2rem 1rem; position:relative}
/* AP 141: krämbandet går alltid ut till högerkanten, hur bred sidans innehåll än får vara (varje sida har sin egen största bredd). Det som sticker ut klipps av .main-content. */
.sidhuvud::after{content:""; position:absolute; top:0; bottom:0; left:100%; width:100vw; background:inherit}
@media print{.sidhuvud::after{display:none}}
.sidhuvud .filterfalt{margin-top:1rem}
.sidhuvud + *{margin-top:0}

.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{margin-bottom:.5rem}
.sektionsinnehall{padding-left:0}

/* 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}
/* LS92 (UX-granskningen 2026-10-25, G1): ett tal eller belopp i en tabell bryts aldrig över två rader
   ("738 571" över "kr"). Gäller siffercellerna, alltså de som är högerställda eller tabular. Textkolumner
   ska vara vänsterställda och får därför brytas som vanligt. */
.table td.tabular,.table th.tabular,.table td.text-end,.table th.text-end{white-space:nowrap}

/* LS96: sorterbara tabeller (app/static/js/tabellsortering.js). Rubriken är en knapp med pil. */
th[data-sortbar]{cursor:pointer;user-select:none}
th[data-sortbar]:hover{background:var(--gra-050)}
th[data-sortbar]:focus-visible{outline:2px solid var(--lysio-marin);outline-offset:-2px}
th[data-sortbar] .sortpil{font-size:.75em}

/* 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.5rem 1.5rem}
.sma-multiplar-rutnat + .sma-multiplar-rutnat{margin-top:1.5rem}
.sma-multiplar-del{min-width:0; overflow:hidden}      /* AP 88: ingen panel ritar över sin granne */
.sma-multiplar-del > div[role=img]{max-width:100%; overflow:hidden}
.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-diagram); 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:0; top:0; z-index:2000;
  width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  background:var(--lysio-marin); color:#fff; text-decoration:none; border-radius:0 0 .3rem 0;
}
.hoppa-till-innehall:focus,.hoppa-till-innehall:focus-visible{
  width:auto; height:auto; margin:0; padding:.6rem 1rem; overflow:visible; clip:auto; white-space:normal;
}

/* 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:var(--text-diagram); 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:var(--text-liten)}
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}

/* LS41: projektnamn som länk till Podio */
.ls-podiolank{color:var(--lysio-marin); text-decoration:underline; text-underline-offset:2px}
.ls-podiolank:hover{color:var(--lysio-marin); text-decoration-thickness:2px}
.ls-projektlank{color:var(--lysio-marin); text-decoration:underline; text-underline-offset:2px}
.ls-podiolank-slut{white-space:nowrap}
/* bootstrap-icons gör ikonens ::before till inline-block (ett atomärt inline-element), och före ett sådant
   får en rad brytas: gör den till vanlig inline så att ikonen följer med sista ordet. */
.ls-podiolank-ikon::before{display:inline; vertical-align:baseline}
.ls-podiolank-ikon{font-size:.7em; margin-left:.3em; vertical-align:baseline}