/* Kollbarportalens utseende. Laddas efter lysio.css, som inte ändras: här byts bara färgerna och några detaljer.
   Utgångspunkten är dagens Kollbarportal (uppmätta färger i Planering/underlag/03_skarmbilder_tableau.md, avsnitt 1.4)
   med lätta förbättringar. Orange är en accent för linjer, staplar och kanter, aldrig textfärg på vitt (för låg kontrast). */
:root{
  --kollbar-bla:#16477E;         /* primärfärg: rubriker, knappar, första diagramserien */
  --kollbar-orange:#FAAE31;      /* accent, aldrig text */
  --kollbar-okning:#27683F;      /* ökning, text och pil (7,0:1 mot vitt) */
  --kollbar-minskning:#AC173C;   /* minskning, text och pil (7,2:1 mot vitt) */
  --kollbar-yta:#E6F2FE;         /* ljusblå yta, som på dagens startsida */
  --kollbar-meny-aktiv:#F2F2F2;  /* aktiv menypost */
  --kollbar-lank:#1B72F9;        /* dagens portalblå: vänsterkant på aktiv menypost och informationsnotis (grafik, inte brödtext) */

  --lysio-marin:var(--kollbar-bla);
  --lysio-blaljus:var(--kollbar-yta);
  --lysio-cream:#FFF7EA;         /* krämvit, som analysdashboardernas paneler */
  --lysio-skogsgron:var(--kollbar-okning);
  --lysio-vinrod:var(--kollbar-minskning);
  --bs-primary-rgb:22,71,126;
}


/* Svensk Kollektivtrafiks logga är bredare än Lysios: låt den fylla menyns bredd. */
.sidebar-brand img{width:173px; max-width:none; height:auto}

/* Tecknen för uppgift som saknas (..), inte aktuell (.) eller skyddad (<5), och symbolen för låg bas (*): samma storlek
   och färg som brödtexten (inte små och grå), med en prickad understrykning och pekare som visar förklaringen. */
abbr.saknad-uppgift{text-decoration:underline dotted; cursor:help}

/* Teckenförklaring och förklaring av låg bas under en tabell eller ett diagram. Brödtextens storlek, en rad per tecken. */
.tabellnoter{margin-top:.5rem}
.tabellnoter p,.lag-bas-forklaring{margin:0 0 .25rem; font-size:var(--text-bas)}
.lag-bas-forklaring{margin-top:.25rem}
.teckenforklaring .tecken{font-weight:700; display:inline-block; min-width:1.5em}

/* Länkar i brödtext: mörkblå i stället för Bootstraps ljusblå, som har för låg kontrast. */
a:not([class]){color:var(--kollbar-bla)}

/* Rubrikytan (AP 145): krämvit, minst 107 px hög på alla sidor och växer om det står mer text under rubriken. I botten ligger en orange linje,
   4 px, över hela bredden (en inset-skugga, så att höjden inte ändras). Ingen kant till vänster: rubriken står i linje med innehållet under.
   24 px från sidhuvudet till innehållet. Raden under rubriken (urvalsrad, länk, ingress) är 14 px. */
.page-canvas .sidhuvud{min-height:var(--sidhuvud-hojd); box-sizing:border-box; margin-bottom:1.5rem; max-width:none; box-shadow:inset 0 -4px 0 var(--kollbar-orange)}
.page-canvas .sidhuvud :is(.urvalsrad,.sidlank,.sidintro,.best-urval){font-size:var(--text-brod); line-height:1.4}

/* ---- Menyn: platt lista som i dagens portal (AP 0.4b) -------------------------------------------------------- */
.sidebar-menyrubrik{font-size:var(--text-sm); font-weight:700; color:var(--gra-900); margin:0 0 .6rem; padding:0 .25rem}
.sidebar-menyrubrik.visuellt-dold{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}   /* dold för ögat, kvar för skärmläsare (AP 30 M1) */
/* Avsnitt i vänstermenyn (AP 30 del C): små rubriker, och sidorna längst ned i mindre format. */
.sidebar-sektionsrubrik{font-size:var(--text-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gra-500); margin:.9rem 0 .15rem; padding:0 .6rem}
.sidebar-lank.ar-aktiv{background:var(--kollbar-meny-aktiv); border-left-color:var(--kollbar-lank); color:var(--kollbar-bla)}

/* "Inloggad som" bryter raden i stället för att klippas, och Logga ut står under. */
.sidebar-konto-fast .sidebar-konto-rad,.sidebar-konto-rad{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.15rem .9rem}
.sidebar-konto-namn{flex:1 1 100%; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere}

/* Dator: menyn står fast överst och är lika hög som skärmen. Den rullar själv när den är längre. align-self hindrar att
   den sträcks till hela radens höjd, vilket gjorde att den hamnade längst ned på en nedrullad sida. */
@media (min-width:861px){
  .sidebar{position:sticky; top:0; align-self:flex-start; height:100vh; width:260px; min-width:260px; max-width:260px}
}

/* Smal skärm: fast huvud med menyknapp, och menyn som panel från vänster. */
.mobilmeny-bakgrund{display:none}
@media (max-width:860px){
  .mobilhuvud{position:sticky; top:0; z-index:1030}
  .sidebar{
    position:fixed!important; top:0; left:0; bottom:0; height:100vh; height:100dvh;
    width:min(300px, 85vw); min-width:0; max-width:none; overflow-y:auto;
    display:flex!important; transform:translateX(-100%); visibility:hidden;
    transition:transform .2s ease, visibility 0s linear .2s; z-index:1050;
    border-right:1px solid var(--gra-150); box-shadow:none; padding:0 .9rem .5rem; overflow:hidden;
  }
  .sidebar.mobilmeny-oppen{transform:none; visibility:visible; transition:transform .2s ease}
  .sidebar .sidebar-topp{display:block}
  .mobilmeny-bakgrund{display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1040}
  .mobilmeny-bakgrund[hidden]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sidebar,.sidebar.mobilmeny-oppen{transition:none}
}

/* ---- Nyckeltal: inga färgade kanter överst, bra eller dåligt syns i pilraden (AP 0.4b) -------------------------- */
.nyckeltalsrad .nyckeltal--primar,.nyckeltalsrad .nyckeltal--bra,.nyckeltalsrad .nyckeltal--daligt{border-top-color:transparent}

/* Kortet med tolv perioder som staplar. Ritas i HTML och CSS: --andel (0 till 1) sätter höjden. */
.nyckeltal-staplar{display:flex; align-items:flex-start; gap:.45rem; margin:.5rem 0 .6rem}   /* överkant: varje stapel står i en ruta med fast höjd (nyckeltal-stapel-upp), så baslinjen blir densamma även när en etikett har två rader ("hittills i år") */
.nyckeltal-stapel{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end}
.nyckeltal-stapel{position:relative}
/* AP 119: verktygstipset per stapel (period, värde, bas), vid hovring och tryck. Utan skugga, en tunn linje. De yttre staplarna fäller tipset inåt. */
.nyckeltal-stapel-tips{display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); z-index:20; padding:.25rem .5rem; background:#fff; border:1px solid var(--gra-150); border-radius:var(--radie-liten); font-size:var(--text-xs); line-height:1.35; color:var(--gra-900); white-space:nowrap; text-align:left; font-variant-numeric:tabular-nums; pointer-events:none}
.nyckeltal-stapel-tips span{display:block}
.nyckeltal-stapel--tips .nyckeltal-stapel-tips{display:block}   /* klassen sätts av ram.js vid hovring med mus och tryck på pekskärm */
.nyckeltal-stapel--tips .nyckeltal-stapel-fyll{opacity:1}
.nyckeltal-stapel:nth-child(-n+3) .nyckeltal-stapel-tips{left:0; transform:none}
.nyckeltal-stapel:nth-last-child(-n+3) .nyckeltal-stapel-tips{left:auto; right:0; transform:none}
.nyckeltal-stapel-varde{font-size:var(--text-xs); color:var(--gra-700); font-variant-numeric:tabular-nums; white-space:nowrap; margin-bottom:.15rem}
.nyckeltal-stapel-fyll{width:100%; height:calc(var(--andel, 0) * 3.6rem); min-height:2px; background:var(--lysio-marin); opacity:.4; border-radius:var(--radie-liten) var(--radie-liten) 0 0}
.nyckeltal-stapel-period{font-size:var(--text-xs); color:var(--gra-500); margin-top:.2rem}
.nyckeltal-stapel--senaste .nyckeltal-stapel-fyll{opacity:1}
.nyckeltal-stapel--senaste .nyckeltal-stapel-varde{font-weight:700; color:var(--lysio-marin)}
.nyckeltal-stapel--senaste .nyckeltal-stapel-period{font-weight:600; color:var(--gra-900)}
.nyckeltal-forandring{font-size:var(--text-sm); font-weight:600; color:var(--gra-900)}

/* Signifikans: bricka med ord och symbol, så att färg aldrig bär budskapet ensam. Färgen är data (bra eller dåligt), som före natten. */
.signifikans{display:inline-block; margin-top:.35rem; padding:.1rem .5rem; border-radius:var(--radie-liten); font-size:var(--text-xs); font-weight:600; border:1px solid currentColor}
.signifikans--okning,.signifikans--bra{color:var(--kollbar-okning); background:#EAF4EC}
.signifikans--minskning,.signifikans--daligt{color:var(--kollbar-minskning); background:#FBEAEE}
.signifikans--ingen{color:var(--gra-700); background:var(--gra-050)}
.signifikans--neutral{color:var(--kollbar-bla); background:var(--kollbar-yta)}

/* ---- Tabeller: en enda stil, se avsnittet AP 95 längst ned. ---- */

/* ---- Notiser: en enda komponent, se avsnittet AP 95 längst ned. ---- */
/* Färgsteg i en tabell (värmekartan, AP 14): fem blå steg från svagt till starkt, samma skala som profilens fordelning_skala.
   Texten är mörk på de ljusa stegen och vit på de mörka (kontrast minst 4,5). Stegets ord står alltid i text. */
.table td.steg-0, .steg-0{background-color:#DCE8F5 !important; box-shadow:none !important; color:#111820 !important}
.table td.steg-1, .steg-1{background-color:#A9C4E3 !important; box-shadow:none !important; color:#111820 !important}
.table td.steg-2, .steg-2{background-color:#6F9CCB !important; box-shadow:none !important; color:#111820 !important}
.table td.steg-3, .steg-3{background-color:#2F6AA8 !important; box-shadow:none !important; color:#FFFFFF !important}
.table td.steg-4, .steg-4{background-color:#16477E !important; box-shadow:none !important; color:#FFFFFF !important}
.stegforklaring{display:flex; flex-wrap:wrap; gap:.25rem 1rem; align-items:center; margin:.25rem 0 .5rem; font-size:var(--text-bas)}
.stegforklaring-post{display:inline-flex; align-items:center; gap:.35rem}
.stegruta{display:inline-block; width:1.1rem; height:1.1rem; border:1px solid #8A96A2}
/* Åtgärdsmatrisens tabell (AP 48): kategoricellen har en mjuk ton av kvadrantens färg i diagrammet och raden en mycket svag. Tonerna är
   profilfärgen blandad med vitt (`app.former.spridning.kvadrantton`, kontrollerat i tests/test_ap48.py). Texten är mörk (#111820, minst 4,5:1)
   och kategorin står alltid i text: färgen är aldrig ensam bärare. */
.table tbody tr.rad-kvadrant.rad-kvadrant--varda{--bs-table-bg:#F3F8F1}
.table tbody tr.rad-kvadrant.rad-kvadrant--forbattra{--bs-table-bg:#FCE8E0}
.table tbody tr.rad-kvadrant.rad-kvadrant--bevaka{--bs-table-bg:#EEF7F8}
.table tbody tr.rad-kvadrant.rad-kvadrant--kan_bli_battre{--bs-table-bg:#FDF8E6}
.table td.kvadrant-cell{color:#111820 !important; font-weight:600; box-shadow:none !important}
.table td.kvadrant-cell--varda{background-color:#DDECD7 !important}
.table td.kvadrant-cell--forbattra{background-color:#F6BEA6 !important}
.table td.kvadrant-cell--bevaka{background-color:#CFE9EB !important}
.table td.kvadrant-cell--kan_bli_battre{background-color:#F9ECB9 !important}

/* ---- Startsidans kort (AP 11) ---------------------------------------------------------------------------------------- */
.nyckeltal--kort{position:relative}
/* Hela kortet är klickbart och får den ljusa bakgrunden vid hovring (AP 145, avsnitt 9). Knapparna i kortet ligger ovanpå och fungerar som förut. */
/* Hovring över nyckeltalskorten: hela rutan, ut till ramen, får den ljusa bakgrunden, och hela rutan är klickbar.
   Knapparna i rutan (Stapel/Linje, frågetecknet, ···) ligger ovanpå och fungerar som förut. */
.page-canvas .vykort--nyckeltal{position:relative}
.page-canvas .vykort--nyckeltal .nyckeltal--lank{position:static!important}
.page-canvas .vykort--nyckeltal .nyckeltal--lank:hover{background:none!important}
.page-canvas .vykort--nyckeltal:has(.nyckeltal--lank):hover{background:var(--gra-050,#F5F7F9)!important}
.page-canvas .vykort--nyckeltal :is(.tidsniva-vaxel,.forklaring){position:relative;z-index:2}
.nyckeltal-lank{color:inherit; text-decoration:none}
.nyckeltal-lank:hover,.nyckeltal-lank:focus-visible{color:var(--kollbar-bla); text-decoration:underline}
.nyckeltal-riket{margin-top:.5rem; font-weight:600; color:var(--gra-700)}
.nyckeltal-mening{font-size:var(--text-sm); color:var(--gra-700); margin:.5rem 0 0}
.tidsniva{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 1rem}
.tidsniva-etikett{font-size:var(--text-sm); font-weight:600; color:var(--gra-700)}
.tidsniva-val{font-size:var(--text-sm); padding:.2rem .6rem; border:1px solid var(--gra-300); border-radius:var(--radie-pill); color:var(--kollbar-bla); text-decoration:none; background:#fff}
.tidsniva-val:hover,.tidsniva-val:focus-visible{background:var(--gra-050); border-color:var(--kollbar-bla)}
.tidsniva-val--aktiv{background:var(--kollbar-bla); color:#fff; border-color:var(--kollbar-bla)}

/* Startsidan (AP 30 B): nyhetsrutan som smal kompakt lista till vänster och korten i full bredd till höger, som dagens startsida. På smal
   skärm ligger nyheterna under korten. */
.start-rutnat{display:grid; grid-template-columns:13rem minmax(0,1fr); gap:1rem; align-items:start}
.start-rutnat .vyresultat{grid-column:2; grid-row:1}
.start-nyheter{grid-column:1; grid-row:1}
.start-nyheter .nyheter-ruta{margin-top:0; padding:.6rem .75rem}
.nyheter-ruta--kompakt h5{font-size:var(--text-bas); margin:0 0 .35rem}
.nyheter-ruta--kompakt .nyhet{padding:.35rem 0; border-top:1px solid var(--gra-150)}
.nyheter-ruta--kompakt .nyhet h6{font-size:var(--text-sm); line-height:1.25}
.nyheter-ruta--kompakt .hjalptext,.nyheter-ruta--kompakt .nyhet-ingress,.nyheter-ruta--kompakt p{font-size:var(--text-xs); margin-bottom:.15rem}
.nyheter-ruta--kompakt .nyhet-ingress{color:var(--gra-700)}
@media (max-width:1100px){
  .start-rutnat{grid-template-columns:minmax(0,1fr)}
  .start-rutnat .vyresultat,.start-nyheter{grid-column:1}
  .start-nyheter{grid-row:2}
}
/* Kortet: staplarna eller linjen till vänster, talet och förändringen till höger. */
.nyckeltal--kort{display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:.25rem 1.5rem; align-items:start; padding:.75rem 1rem}
.nyckeltal--kort .nyckeltal-diagram{min-width:0}
.nyckeltal--kort .etikett{font-size:var(--text-lg); font-weight:700; color:var(--lysio-marin)}
.nyckeltal--kort .nyckeltal-sida{text-align:right}
.nyckeltal--kort .nyckeltal-sida .varde{font-size:var(--text-xl)}
.nyckeltal--kort .nyckeltal-mening{margin-top:.35rem}
.nyckeltal--kort .nyckeltal-staplar{gap:.25rem; margin:.25rem 0 .2rem}
.nyckeltal--kort .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 5rem)}
.nyckeltal--kort .nyckeltal-staplar--delad .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 2.5rem)}
.nyckeltal--kort .nyckeltal-stapel-upp,.nyckeltal--kort .nyckeltal-stapel-ned{height:3.2rem}
.nyckeltal--kort .nyckeltal-stapel-period{text-align:center; line-height:1.1}
@media (max-width:700px){
  .nyckeltal--kort{grid-template-columns:minmax(0,1fr)}
  .nyckeltal--kort .nyckeltal-sida{text-align:left}
}
/* Växeln mellan staplar och linje: radioknappar före korten, etiketterna i tidsnivåraden. */
.start-vaxel{position:absolute; opacity:0; pointer-events:none}
.tidsniva-vaxel{display:inline-flex; gap:.25rem}
.nyckeltal-diagram-topp{display:flex; justify-content:space-between; align-items:center; gap:.5rem}
.nyckeltal-diagram-topp .tidsniva-vaxel{position:relative; z-index:3}
.nyckeltal-diagram-topp .tidsniva-val{font-size:var(--text-xs); padding:.1rem .5rem}
.tidsniva-val{cursor:pointer}
.nyckeltal-vy--linje{display:none}
.start-vaxel#visa-linje:checked ~ .vyresultat .nyckeltal-vy--linje{display:block}
.start-vaxel#visa-linje:checked ~ .vyresultat .nyckeltal-vy--stapel{display:none}
body:has(#visa-stapel:checked) label[for="visa-stapel"],body:has(#visa-linje:checked) label[for="visa-linje"]{background:var(--kollbar-bla); color:#fff; border-color:var(--kollbar-bla)}
body:has(#visa-stapel:focus-visible) label[for="visa-stapel"],body:has(#visa-linje:focus-visible) label[for="visa-linje"]{outline:2px solid var(--kollbar-lank); outline-offset:2px}
/* Linjen: SVG för strecket, punkter och tal som HTML ovanpå (så att de inte förvrängs). */
.nyckeltal-linje-yta{position:relative; height:7rem; margin:1.2rem 0 .2rem}
.nyckeltal-linje-yta svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.nyckeltal-linje-yta polyline{fill:none; stroke:var(--lysio-marin); stroke-width:2; stroke-linejoin:round}
.nyckeltal-punkt{position:absolute; width:.55rem; height:.55rem; margin:0 0 -.275rem -.275rem; border-radius:50%; background:var(--lysio-marin); opacity:.6}
.nyckeltal-punkt--senaste{opacity:1; width:.75rem; height:.75rem; margin:0 0 -.375rem -.375rem}
.nyckeltal-punkt-varde{position:absolute; transform:translate(-50%, -1.45rem); margin-bottom:-.45rem; font-size:var(--text-xs); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--gra-700); line-height:1}
.nyckeltal-punkt-varde--senaste{font-weight:700; color:var(--lysio-marin)}
.nyckeltal-linje-perioder{display:flex}
.nyckeltal-linje-perioder .nyckeltal-stapel-period{flex:1 1 0; min-width:0; text-align:center; line-height:1.1}
.nyckeltal-stapel-period--senaste{font-weight:600; color:var(--gra-900)}
@media (max-width:700px){
  .nyckeltal--kort .nyckeltal-stapel-varde,.nyckeltal-punkt-varde{font-size:var(--text-diagram)}
  .nyckeltal--kort .nyckeltal-stapel-period,.nyckeltal-linje-perioder .nyckeltal-stapel-period{font-size:var(--text-diagram); writing-mode:vertical-rl; transform:rotate(180deg); margin:.2rem auto 0; height:3.2rem}   /* AP 111: samma höjd på alla etiketter, så att staplarna står på en linje */
  .nyckeltal--kort .nyckeltal-staplar{gap:.12rem}
  /* Tolv tal ryms inte på 390 px: bara det senaste visas, resten står i den dolda texten. */
  .nyckeltal--kort .nyckeltal-stapel:not(.nyckeltal-stapel--senaste) .nyckeltal-stapel-varde,.nyckeltal-punkt-varde:not(.nyckeltal-punkt-varde--senaste){display:none}
}

@media (max-width:700px){
  /* AP 119: på smal skärm ligger tipset under stapelraden, aldrig över kortets värde. */
  .nyckeltal--kort .nyckeltal-staplar{position:relative}
  .nyckeltal--kort .nyckeltal-stapel{position:static}
  .nyckeltal--kort .nyckeltal-stapel-tips,.nyckeltal--kort .nyckeltal-stapel:nth-child(-n+3) .nyckeltal-stapel-tips,.nyckeltal--kort .nyckeltal-stapel:nth-last-child(-n+3) .nyckeltal-stapel-tips{top:100%; bottom:auto; left:0; right:auto; transform:none}
}

/* Förklaringar (AP 26, AP 39): ikonen ⓘ öppnar en liten ruta med verktygstipset och länken Läs mer. Klick, Enter och mellanslag öppnar. */
.forklaring{display:inline; position:relative; z-index:2; margin-left:.2rem}
.forklaring--oppen{z-index:60}
.forklaring-ikon{background:none; border:0; padding:0 .15rem; cursor:pointer; color:var(--kollbar-bla); font:inherit; font-size:0; line-height:1; border-radius:50%}   /* ⓘ-tecknet är dolt, frågetecknet ritas i ::after (stilrent.css) */
.forklaring-ikon:hover{color:var(--kollbar-lank)}
.forklaring-ikon:focus-visible{outline:2px solid var(--kollbar-lank); outline-offset:2px}
.forklaring-text{margin-right:.2rem}
.forklaring-lank{font-size:var(--text-sm)}
/* Länkar till hjälpsidan (AP 60) öppnas i en ny flik och har en liten ikon efter texten. */
.hjalplank-ikon{margin-left:.25em; font-size:.8em; vertical-align:baseline}
.tv-hjalplank{line-height:1.6}
.forklaring--js .forklaring-ruta{display:none; position:absolute; left:0; top:calc(100% + .3rem); z-index:50; width:min(19rem, calc(100vw - 2rem)); padding:.55rem .7rem; background:#fff; border:1px solid var(--gra-300); border-radius:.4rem; font-size:var(--text-sm); font-weight:400; line-height:1.4; color:var(--gra-900); text-align:left; white-space:normal; text-transform:none; letter-spacing:0}
.forklaring--js.forklaring--oppen .forklaring-ruta{display:block}
.forklaring--js .forklaring-text{display:block; margin:0 0 .3rem}
/* Inställningar: ikonen uppe till höger i fältets rad. */
.installning-rad{position:relative}
.installning-rad > .forklaring{position:absolute; right:.1rem; top:-.15rem; margin:0}
.installning-rad:has(.installning-ruta){display:flex; gap:.3rem; align-items:flex-start}
.installning-rad:has(.installning-ruta) > .forklaring{position:static; margin:0}
legend .forklaring, label .forklaring{margin-left:.25rem}

/* Hjälpmenyn "?" (AP 39) */
.hjalpmeny{position:relative; display:inline-block}
.hjalpmeny > summary{list-style:none; cursor:pointer; min-width:2rem; text-align:center; font-weight:700}
.hjalpmeny > summary::-webkit-details-marker{display:none}
.hjalpmeny-panel{position:absolute; right:0; z-index:60; min-width:14rem; max-width:min(20rem, calc(100vw - 2rem)); margin-top:.2rem; padding:.5rem .75rem; background:#fff; border:1px solid var(--gra-300); border-radius:.4rem; display:flex; flex-direction:column; gap:.3rem; font-size:var(--text-bas); text-align:left}
.hjalpmeny-panel a{padding:.2rem 0}
.hjalpmeny-kontakt{margin:.3rem 0 0; padding-top:.4rem; border-top:1px solid var(--gra-300); font-size:var(--text-sm)}
.sidhuvud-rad{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.5rem}
.sidhuvud-rad .hjalpmeny{margin-left:auto}
.sidrubrik .forklaring{font-size:var(--text-bas)}

/* Tomtillstånd med åtgärd (AP 39) */
.tomt-atgard{margin:.35rem 0 0; font-weight:500}
.begreppslista{columns:2 16rem; list-style:none; padding-left:0}
/* FAQ och manual: innehållsförteckning (AP 38). */
.faq-innehall-lista,.manualinnehall{list-style:none; padding-left:0; columns:2 18rem}
.faq-innehall-lista>li,.manualinnehall>li{break-inside:avoid; margin-bottom:.6rem}
.faq-innehall-lista ul{padding-left:1.1rem; margin:.2rem 0 0; font-size:var(--text-sm,.9rem)}

/* Nyckeltalskortets staplar med negativa värden (NPS): en nollinje mitt i ytan, positiva staplar uppåt och negativa nedåt. */
.nyckeltal-staplar--delad{align-items:stretch}
.nyckeltal-staplar--delad .nyckeltal-stapel{justify-content:flex-start}
.nyckeltal-stapel-upp,.nyckeltal-stapel-ned{width:100%; height:2.6rem; display:flex; flex-direction:column; align-items:center}
.nyckeltal-stapel-upp{justify-content:flex-end; border-bottom:2px solid var(--gra-700)}
.nyckeltal-staplar:not(.nyckeltal-staplar--delad) .nyckeltal-stapel-upp{height:5rem}   /* AP 111: nollinje under alla staplar */
.nyckeltal-stapel-ned{justify-content:flex-start}
.nyckeltal-staplar--delad .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 1.5rem)}
.nyckeltal-stapel-fyll--ned{border-radius:0 0 var(--radie-liten) var(--radie-liten)}
.nyckeltal-staplar--delad .nyckeltal-stapel-varde{margin:.1rem 0}

/* AP 30 M1: listsidan Mina rapporter läses som en tabell, med luft mellan kolumnerna och Antal kort och Senast ändrad åtskilda. */
.rapportlista{width:100%; border-collapse:collapse}
.rapportlista th,.rapportlista td{padding:.6rem 1.5rem .6rem .75rem; text-align:left; vertical-align:middle; border-bottom:1px solid var(--gra-150)}
.rapportlista .rapportlista-tal{text-align:right; font-variant-numeric:tabular-nums; width:9rem}
.rapportlista .rapportlista-datum{width:12rem; white-space:nowrap}

/* AP 30 del I: menyn syns hel på 900 px höjd, utan raderna "Kollbarportalen" och "Välj dashboard" och med lägre rader. */
.sidebar-lank{padding-top:.34rem; padding-bottom:.34rem; min-height:30px; gap:.7rem}
.sidebar-brand{padding:.75rem .1rem .5rem}
.sidebar-lank i{font-size:var(--text-lg); line-height:1}
.sidebar-nav{gap:0}

/* AP 30 N: kartans teckenförklaring under kartan ligger i en rad, så att kartan och förklaringen ryms på 900 px. */
.karta-legend-under .karta-legend{display:flex !important; flex-wrap:wrap; gap:2px 16px; font-size:var(--text-liten)}
/* AP 145: Leaflets egna kontroller i textskalan (zoomknapparna 18 px). */
.leaflet-bar a,.leaflet-touch .leaflet-bar a{font-size:var(--text-lg)}

/* ==========================================================================================================================
   AP 33: startsidan enligt mockup B. Kortet har diagrammet till vänster (alla staplar i nyckeltalets färg, --nk-farg, som
   sätts på kortet från konstanten FARGER i app/vyer/start.py) och det senaste värdet, förändringen i färg och signifikansen
   som text till höger. Ingen y-axel och inga stödlinjer. Avsnittet är avgränsat så att det går att flytta eller ta bort.
   ========================================================================================================================== */
.start-rutnat{gap:1.1rem}
@media (min-width:1101px){.start-rutnat{grid-template-columns:17rem minmax(0,1fr)}}
.nyckeltal--kort{--nk-farg:var(--lysio-marin); grid-template-columns:minmax(0,1fr) 13rem; gap:.25rem 1.1rem; padding:.9rem 1.1rem .6rem}
.nyckeltal--kort .etikett{font-size:var(--text-lg)}
.nyckeltal--kort .nyckeltal-staplar{gap:.35rem; margin:.5rem 0 .2rem}
.nyckeltal--kort .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 8rem); background:var(--nk-farg); opacity:1; border-radius:3px 3px 0 0}
.nyckeltal--kort .nyckeltal-stapel-upp,.nyckeltal--kort .nyckeltal-stapel-ned{height:5rem}
.nyckeltal--kort .nyckeltal-staplar--delad .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 4.2rem)}
.nyckeltal--kort .nyckeltal-staplar--delad .nyckeltal-stapel-fyll--ned{border-radius:0 0 3px 3px}
.nyckeltal--kort .nyckeltal-stapel-upp{border-bottom:1px solid var(--gra-500)}
.nyckeltal--kort .nyckeltal-staplar:not(.nyckeltal-staplar--delad) .nyckeltal-stapel-upp{height:6.5rem}
.nyckeltal--kort .nyckeltal-staplar:not(.nyckeltal-staplar--delad) .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 5.4rem)}
.nyckeltal--kort .nyckeltal-stapel-varde{font-size:var(--text-diagram); letter-spacing:-.01em; color:var(--gra-900); margin-bottom:.2rem}
.nyckeltal--kort .nyckeltal-stapel--senaste .nyckeltal-stapel-varde{color:var(--gra-900)}
.nyckeltal--kort .nyckeltal-stapel-period,.nyckeltal--kort .nyckeltal-linje-perioder .nyckeltal-stapel-period{font-size:var(--text-diagram); color:var(--gra-700); margin-top:.35rem; line-height:1.25; text-align:center}
.nyckeltal--kort .nyckeltal-stapel-period span,.nyckeltal--kort .nyckeltal-linje-perioder .nyckeltal-stapel-period span{display:block}
.nyckeltal--kort .nyckeltal-stapel--senaste .nyckeltal-stapel-period,.nyckeltal--kort .nyckeltal-stapel-period--senaste{font-weight:700; color:var(--gra-900)}
/* AP 147 (R4.2): på datorbredd ryms tolv månader i kortets diagram bara med mindre text, så att år och månad står på två rader utan att åren går ihop. */
@media (min-width:861px){.nyckeltal--kort .nyckeltal-stapel-period,.nyckeltal--kort .nyckeltal-linje-perioder .nyckeltal-stapel-period{font-size:var(--text-diagram); letter-spacing:-.01em}}
.nyckeltal--kort .nyckeltal-linje-yta{height:9rem}
.nyckeltal--kort .nyckeltal-linje-yta polyline{stroke:var(--nk-farg); stroke-width:2.5}
.nyckeltal--kort .nyckeltal-punkt{background:var(--nk-farg); opacity:1}
.nyckeltal--kort .nyckeltal-punkt-varde{color:var(--gra-900)}
.nyckeltal--kort .nyckeltal-punkt-varde--senaste{color:var(--gra-900)}
.start-rutnat .vykort--nyckeltal .nyckeltal--kort .nyckeltal-sida{padding:1.6rem 0 0}   /* kortmenyn ligger ovanför värdet, så texten får hela bredden */
.nyckeltal--kort .nyckeltal-sida .varde{font-size:2.25rem; font-weight:700; line-height:1.1; color:var(--lysio-marin)}
.nyckeltal--kort .nyckeltal-forandring{font-size:var(--text-brod); font-weight:600; margin-top:.15rem}
.nyckeltal--kort .nyckeltal-forandring--bra{color:var(--kollbar-okning)}
.nyckeltal--kort .nyckeltal-forandring--daligt{color:var(--kollbar-minskning)}
.nyckeltal--kort .nyckeltal-forandring--neutral{color:var(--gra-700)}
.nyckeltal--kort .nyckeltal-pil{font-size:var(--text-brod)}
.nyckeltal--kort .nyckeltal-foregaende,.nyckeltal--kort .nyckeltal-signifikans{font-size:var(--text-sm); color:var(--gra-700); margin-top:.15rem}
/* Bara negativa värden (NPS i dag): nollinjen nära toppen och staplarna hänger ner från den. */
.nyckeltal--kort .nyckeltal-staplar--bara-ned .nyckeltal-stapel-upp{height:.6rem}
.nyckeltal--kort .nyckeltal-staplar--bara-ned .nyckeltal-stapel-ned{height:7.8rem}
.nyckeltal--kort .nyckeltal-staplar--bara-ned .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 6.8rem)}
@media (max-width:700px){
  .vykort--nyckeltal .nyckeltal-diagram-topp{flex-wrap:wrap; padding-right:3.5rem}   /* kortmenyn ··· (med pil) ligger i hörnet och täcker inte Stapel och Linje (AP 145) */
  .nyckeltal--kort{grid-template-columns:minmax(0,1fr)}
  .nyckeltal--kort .nyckeltal-sida{text-align:left}
  /* AP 64: huvudvärdet och förändringen kommer före historikdiagrammet. Namnet och växeln först, sedan talet, sedan diagrammet. */
  .nyckeltal--kort .nyckeltal-diagram{display:contents}
  .nyckeltal--kort .nyckeltal-diagram-topp{order:1}
  .nyckeltal--kort .nyckeltal-sida{order:2; padding-top:0}
  .nyckeltal--kort .nyckeltal-vy,.nyckeltal--kort .nyckeltal-linje-not{order:3}
  .start-rutnat .vykort--nyckeltal .nyckeltal--kort .nyckeltal-sida{padding-top:0}
  .nyckeltal--kort .nyckeltal-stapel-period span,.nyckeltal--kort .nyckeltal-linje-perioder .nyckeltal-stapel-period span{display:inline}
  .nyckeltal--kort .nyckeltal-stapel-period,.nyckeltal--kort .nyckeltal-linje-perioder .nyckeltal-stapel-period{white-space:nowrap; max-height:none; text-align:left}
  .nyckeltal--kort .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 6rem)}
  .nyckeltal--kort .nyckeltal-staplar--delad .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 3rem)}
  .nyckeltal--kort .nyckeltal-stapel-upp,.nyckeltal--kort .nyckeltal-stapel-ned{height:3.6rem}
  .nyckeltal--kort .nyckeltal-staplar--bara-ned .nyckeltal-stapel-upp{height:.5rem}
  .nyckeltal--kort .nyckeltal-staplar--bara-ned .nyckeltal-stapel-ned{height:6.5rem}
  .nyckeltal--kort .nyckeltal-staplar--bara-ned .nyckeltal-stapel-fyll{height:calc(var(--andel, 0) * 5.5rem)}
  .nyckeltal--kort .nyckeltal-staplar{gap:.12rem}
}

/* ---- Infällbar meny (AP 32, AP 141, AP 145): infälld är en smal list med ikoner, som i går. Gäller bara datorbredd, på mobil är menyn en panel. ----
   Menyns logotypdel är lika hög som sidhuvudet (--sidhuvud-hojd) och loggan står centrerad i höjdled. Menylänkarna börjar 16 px under den. */
.sidebar-topp{display:flex; align-items:center; justify-content:space-between; gap:.5rem; height:var(--sidhuvud-hojd); min-height:var(--sidhuvud-hojd); box-sizing:border-box}
.sidebar-topp .sidebar-brand{flex:0 0 auto; min-width:0; padding-top:0; padding-bottom:0}
.sidebar .sidebar-rull{padding-top:16px}
/* Menyknappen: en ruta på 28 x 28 px med en tunn pil, direkt i body. Utfälld meny: högt uppe till höger i menyn (8 px från överkanten), pilen åt vänster.
   Infälld meny: längst ut till vänster uppe (12 px från kanten), pilen åt höger, och rubriken i sidhuvudet får 56 px vänstermarginal. */
.sidebar-infall-knapp{position:fixed; top:8px; left:216.6px; z-index:1050; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; min-height:28px; padding:0;
  border:1px solid var(--gra-150); border-radius:var(--knapp-radie); background:#fff; color:var(--gra-700); line-height:1; cursor:pointer}
.sidebar-infall-knapp:hover,.sidebar-infall-knapp:focus-visible{background:var(--knapp-hover); border-color:var(--kollbar-bla); color:var(--kollbar-bla)}
.sidebar-infall-knapp:focus-visible{outline:2px solid var(--kollbar-lank); outline-offset:1px}
.sidebar-infall-knapp svg{transition:transform .15s}
body.meny-infalld .sidebar-infall-knapp{left:12px}
body.meny-infalld .sidebar-infall-knapp svg{transform:rotate(180deg)}
@media (min-width:861px){body.meny-infalld .page-canvas .sidhuvud{padding-left:56px}}
@media (max-width:860px){ .sidebar-infall-knapp{display:none} }
@media (min-width:861px){
  body.meny-infalld .sidebar{width:64px; min-width:64px; max-width:64px; padding-left:.4rem; padding-right:.4rem}
  body.meny-infalld .sidebar-topp .sidebar-brand,
  body.meny-infalld .sidebar-sektionsrubrik,
  body.meny-infalld .sidebar-lank span,
  body.meny-infalld .sidebar-konto-fast{display:none}
  body.meny-infalld .sidebar-topp{justify-content:center; padding-top:.6rem}
  body.meny-infalld .sidebar-lank{justify-content:center; padding-left:.3rem; padding-right:.3rem; gap:0}
  body.meny-infalld .sidebar-lank i{flex:0 0 auto}
}

/* Menyn har en rullande del (grupperna) och en fast del (Hjälp och Administration) som aldrig kräver rullning, och under dem kontoraden. */
@media (min-width:861px){
  .sidebar{overflow:hidden; display:flex; flex-direction:column}
}
.sidebar-rull{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0; padding:0 0 .5rem}
.sidebar-fast{flex:0 0 auto; border-top:1px solid var(--gra-150); padding-bottom:.25rem}
.sidebar-fast .sidebar-sektionsrubrik{margin-top:.5rem}
.sidebar .sidebar-konto-fast{flex:0 0 auto; margin-top:0; padding-top:.35rem; padding-bottom:.5rem; border-top:0}

/* Feedbackknappen (AP 42, AP 91): en liten fast knapp nere till höger på dator och en liten rund ikon på mobil. Sidan har utrymme i
   nederkanten (.page-canvas), så knappen täcker aldrig sista raden. Panelen ligger ovanför knappen, med en tunn linje och utan skugga. */
.feedback{position:static}
.feedback-knapp{position:fixed; right:16px; bottom:16px; z-index:1030; display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 .75rem; border:1px solid var(--gra-300); border-radius:var(--radie-liten); background:#fff; color:var(--kollbar-bla); font:inherit; font-size:var(--text-sm); line-height:1; cursor:pointer}
.feedback-knapp:hover{border-color:var(--kollbar-bla)}
.feedback-rund-ikon{display:none; font-size:1rem}
.feedback-knapp:focus-visible,.feedback-panel :focus-visible{outline:3px solid var(--kollbar-bla); outline-offset:2px}
@media (max-width:860px){
  .feedback-knapp{width:40px; height:40px; padding:0; border-radius:50%}
  .feedback-rund-ikon{display:inline}
  .feedback-text{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  .feedback-panel{bottom:64px!important}
}
.feedback-panel{position:fixed; right:16px; bottom:52px; z-index:1030; width:min(22rem, calc(100vw - 32px)); background:#fff; border:1px solid var(--gra-300); border-radius:var(--radie-liten); padding:1rem}
.feedback-panel[hidden],.feedback-panel [hidden]{display:none}
.feedback-rubrik{font-size:var(--text-bas); font-weight:600; margin:0 0 .3rem}
.feedback-inledning{margin:0 0 .6rem; color:var(--gra-500); font-size:var(--text-sm)}
.feedback-typer{border:0; margin:0 0 .7rem; padding:0; display:flex; flex-direction:column; gap:.2rem}
.feedback-typ{display:flex; align-items:center; gap:.5rem; margin:0; cursor:pointer}
.feedback-typ span{font-size:var(--text-bas)}
.feedback-etikett{display:block; font-weight:400; margin-bottom:.25rem}
.feedback-panel textarea{width:100%; border:1px solid var(--gra-300); border-radius:var(--radie-liten); padding:.5rem; font:inherit; resize:vertical}
.feedback-med{margin:.5rem 0; color:var(--gra-500); font-size:var(--text-sm)}
.feedback-fel{margin:.4rem 0; color:#a11}
.feedback-atgarder{display:flex; justify-content:flex-end; gap:.5rem}
.feedback-avbryt,.feedback-skicka{height:28px; border-radius:var(--radie-liten); padding:0 .9rem; font:inherit; font-size:var(--text-sm); cursor:pointer}
.feedback-avbryt{background:#fff; border:1px solid var(--gra-300); color:var(--gra-900)}
.feedback-skicka{background:var(--kollbar-bla); border:1px solid var(--kollbar-bla); color:#fff}
.feedback-skicka:disabled{opacity:.6; cursor:default}
.feedback-tack p{margin:0 0 .7rem}
@media print{.feedback{display:none}}

/* AP 45: lång historik som linje, och varannan stapel utan tal när staplarna är många */
.nyckeltal--kort .nyckeltal-stapel-varde{white-space:nowrap}
.nyckeltal-vy--lang{display:block}
.tidsniva-val--av{opacity:.45; cursor:not-allowed; border-style:dashed}
.tidsniva-val--aktiv-lang{background:var(--kollbar-bla); color:#fff; border-color:var(--kollbar-bla)}
.nyckeltal-punkt--lang{width:.38rem; height:.38rem; margin:0 0 -.19rem -.19rem; z-index:1}
.nyckeltal-punkt--lang::after{content:""; position:absolute; inset:-.5rem -.15rem}
.nyckeltal-punkt--lang:hover{transform:scale(1.8)}
.nyckeltal-punkt--lang.nyckeltal-punkt--senaste{width:.7rem; height:.7rem; margin:0 0 -.35rem -.35rem}
.nyckeltal-punkt-varde--lang{transform:translate(-100%, -1.1rem); font-size:var(--text-diagram)}
.nyckeltal-punkt-varde--lang.nyckeltal-punkt-varde--lagst{transform:translate(-50%, .7rem)}
.nyckeltal-punkt-varde--lang:not(.nyckeltal-punkt-varde--senaste){transform:translate(-50%, -1.1rem); color:var(--gra-700)}
.nyckeltal-punkt-varde--lang.nyckeltal-punkt-varde--lagst{transform:translate(-50%, 1.4rem)}
.nyckeltal-punkt-varde--lang.nyckeltal-punkt-varde--senaste{font-weight:700; transform:translate(-100%, -1.1rem)}
.nyckeltal-linje-axel{position:relative; height:1.2rem; margin-top:.3rem}
.nyckeltal-linje-axeletikett{position:absolute; transform:translateX(-50%); font-size:var(--text-diagram); color:var(--gra-700); white-space:nowrap}
.nyckeltal-linje-not{margin:.15rem 0 0; font-size:var(--text-xs); color:var(--gra-700)}

/* AP 72: utloggningen är ett formulär med en knapp (POST med CSRF), och bredvid den en länk till byte av lösenord. */
.sidebar-logga-ut-formular{display:inline; margin:0}
button.sidebar-logga-ut{cursor:pointer; font-family:inherit}
.sidebar-konto-rad{flex-wrap:wrap}

/* AP 73: korten på startsidan för Beställningar */

/* AP 76: ärenden */
.arende-filter{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin:0 0 1rem}
.arende-filter .form-select{width:auto; max-width:14rem}
.arende-notiser{margin:0 0 .75rem; padding-left:1.2rem}
.arende-noteringar{list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.6rem}
.arende-notering{border:0; border-top:1px solid var(--farg-linje); padding:.5rem 0}
.arende-notering--intern{border-style:dashed}
.arende-notering-rubrik{margin:0 0 .25rem; font-size:var(--text-sm)}
/* AP 106: länken Ny nyhet vid nyhetsspaltens rubrik (bara admin) */
.nyheter-ruta h5 .nyheter-ny{font-size:var(--text-xs); font-weight:400; margin-left:.5rem}