/* Sprintportalens utseende. Ett ställe för färger, typografi och komponenter.
   Accentfärgen och den grå skalan följer Vinnovas palett; Iteam syns bara i sidfoten. */

:root {
  --accent: #24870f;
  --accent-mork: #1e6a0c;
  --accent-ljus: #eaf3e4;
  --text: #121619;
  --text-2: #4d5358;
  --text-3: #697077;
  --kant: #dde1e6;
  --kant-stark: #c1c7cd;
  --yta: #ffffff;
  --yta-2: #f9fafc;
  --yta-3: #f2f4f8;
  --ok: #1e6a0c;
  --ok-bg: #eaf3e4;
  --varning: #8a5300;
  --varning-bg: #fdf1dc;
  --fel: #a2191f;
  --fel-bg: #fff1f1;
  --info: #9b368b;
  --info-bg: #f8eef7;
  --ok-kant: #cfe3c6;
  --varning-kant: #f3dcb3;
  --fel-kant: #f7cfd0;
  --info-kant: #ecd4e9;
  --kod-bg: #121619;
  --kod-text: #e4e7eb;
  --iteam: #f04037;
  --radie: 8px;
  --skugga: 0 1px 2px rgba(18, 22, 25, .06), 0 1px 3px rgba(18, 22, 25, .04);
  --bredd: 1160px;
  --typsnitt: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 15px/1.55 var(--typsnitt); color: var(--text); background: var(--yta-2);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-mork); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.hoppa { position: absolute; left: -999px; top: 0; background: var(--yta); padding: .5rem 1rem; z-index: 10; }
.hoppa:focus { left: 1rem; top: .5rem; }
/* Text bara för skärmläsare (klipps bort i stället för att flyttas, så den fungerar även i fasta behållare). */
.osynlig { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* -- sidhuvud -- */
.sidhuvud { background: var(--yta); border-bottom: 1px solid var(--kant); position: sticky; top: 0; z-index: 5; }
.sidhuvud .inre { max-width: var(--bredd); margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; gap: 2rem; min-height: 60px; }
.marke { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--text); flex-shrink: 0; }
.marke:hover { color: var(--text); }
.marke .symbol { width: 28px; height: 28px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; }
.marke .symbol svg { width: 16px; height: 16px; }
.marke .namn { font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.15; }
.marke .namn small { display: block; font-weight: 400; font-size: .74rem; color: var(--text-3); letter-spacing: 0; }
/* Menyn är en rullyta i sidled. Den får inte också rulla i höjdled: därför ligger den 1 px-överlappning som låter den
   aktiva understrykningen täcka sidhuvudets kant på menyn själv, inte på länkarna (länkar som sticker ut 1 px under
   menyn gör den till en rullyta som hoppar en pixel). */
.huvudnav { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--kant-stark) transparent; align-self: stretch; margin-bottom: -1px; }
.huvudnav a { display: flex; align-items: center; padding: 0 .7rem; color: var(--text-2); text-decoration: none; font-size: .92rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.huvudnav a:hover { color: var(--text); }
.huvudnav a:focus-visible, .undernav a:focus-visible { outline-offset: -2px; }
.huvudnav a.aktiv { color: var(--text); border-bottom-color: var(--accent); font-weight: 550; }
.huvudnav a.admin { color: var(--text-3); }
.huvudnav a.admin.aktiv { color: var(--text); }
.huvudnav .skiljare { width: 1px; background: var(--kant); margin: 16px 8px; }
/* Miljöbandet: när portalen kör lokalt (KORPUS_DOMAN saknas) ligger ett tunt plommonfärgat band överst i det klistrade
   sidhuvudet, ovanför menyraden så att menyn behåller hela sin bredd. Plommon är informativt utan värdering: lokalt är
   varken fel eller osäkert, bara en annan plats. Bandet finns inte i sandboxen. */
.miljoband { background: var(--info-bg); color: var(--info); border-bottom: 1px solid var(--info-kant); font-size: .78rem; line-height: 1.4; }
.miljoband .inre { min-height: 0; padding-top: .25rem; padding-bottom: .25rem; gap: .6rem; }
.miljoband b { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.miljoband b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.sidfot .lokal-text { font-weight: 600; color: var(--info); }
.anvandare { margin-left: auto; display: flex; align-items: center; gap: .9rem; font-size: .88rem; flex-shrink: 0; }
.anvandare .vem { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; }
.anvandare .initial { width: 28px; height: 28px; border-radius: 50%; background: var(--yta-3); border: 1px solid var(--kant); display: grid; place-items: center; font-weight: 600; font-size: .8rem; text-transform: uppercase; color: var(--text-2); }
.anvandare .roll { color: var(--text-3); font-size: .78rem; }
.anvandare a.ut { color: var(--text-3); text-decoration: none; }
.anvandare a.ut:hover { color: var(--text); }

/* -- admin-flikar -- */
.undernav { background: var(--yta); border-bottom: 1px solid var(--kant); }
.undernav .inre { max-width: var(--bredd); margin: 0 auto; padding: 0 1.25rem; display: flex; gap: .1rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--kant-stark) transparent; }
.undernav a { padding: .6rem .7rem; font-size: .86rem; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.undernav a:hover { color: var(--text); }
.undernav a.aktiv { color: var(--text); border-bottom-color: var(--text); font-weight: 550; }
.undernav .etikett { padding: .6rem .7rem .6rem 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); align-self: center; }

/* -- innehåll -- */
main { flex: 1; width: 100%; max-width: var(--bredd); margin: 0 auto; padding: 2rem 1.25rem 3rem; }
h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; margin: 0 0 .75rem; }
h2 { font-size: 1.2rem; letter-spacing: -.01em; font-weight: 600; margin: 2.25rem 0 .75rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; }
p { margin: 0 0 .9rem; }
ul, ol { padding-left: 1.3rem; } li { margin: .25rem 0; }
.ingress { font-size: 1.08rem; color: var(--text-2); max-width: 68ch; }
.overrubrik { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-mork); font-weight: 600; margin-bottom: .5rem; }
.dim { color: var(--text-3); } .liten { font-size: .86rem; } .nowrap { white-space: nowrap; }
.ok { color: var(--ok); } .varning { color: var(--varning); } .fel { color: var(--fel); }
p.fel, div.fel:not(.liten) { background: var(--fel-bg); border-left: 3px solid var(--fel); padding: .6rem .8rem; border-radius: 4px; }
p.varning { background: var(--varning-bg); border-left: 3px solid var(--varning); padding: .6rem .8rem; border-radius: 4px; }
.smulor { font-size: .84rem; color: var(--text-3); margin-bottom: .75rem; }
.smulor a { color: var(--text-2); }
hr { border: 0; border-top: 1px solid var(--kant); margin: 2rem 0; }

/* -- kort och rutnät -- */
.kort { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: 1.15rem 1.25rem; margin: .75rem 0; }
.kort > :first-child { margin-top: 0; } .kort > :last-child { margin-bottom: 0; }
.kort h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.kort h3 { margin: 0 0 .4rem; }
.kort h2 a, .kort h3 a { color: var(--text); text-decoration: none; }
.kort h2 a:hover, .kort h3 a:hover { color: var(--accent-mork); text-decoration: underline; }
.rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.rutnat .kort { margin: 0; }
.ingang { display: flex; flex-direction: column; border-top: 3px solid var(--accent); }
.ingang p { color: var(--text-2); flex: 1; }
.ingang .bokstav { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--accent-ljus); color: var(--accent-mork); font-weight: 700; font-size: .85rem; margin-bottom: .6rem; }
.ingang .knappar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* nyckeltal */
.nyckeltal { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.nyckeltal .tal { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem 1.15rem; }
.nyckeltal .varde { font-size: 1.85rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nyckeltal .etikett { color: var(--text-2); font-size: .88rem; margin-top: .35rem; }

/* -- flikar inom en sida -- */
/* Samma sak som menyn: kanten ritas som inre skugga så att den aktiva fliken kan täcka den utan negativ marginal. */
.flikar { display: flex; gap: .1rem; box-shadow: inset 0 -1px 0 var(--kant); margin: 1.25rem 0 1.5rem; overflow-x: auto; scrollbar-width: none; }
.flikar a { padding: .55rem .9rem; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-size: .92rem; }
.flikar a:hover { color: var(--text); }
.flikar a.aktiv { color: var(--text); border-bottom-color: var(--accent); font-weight: 550; }
.flikar .antal { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 999px; background: var(--yta-3); font-size: .74rem; text-align: center; color: var(--text-2); }
.flikar .antal.varning { background: var(--varning-bg); color: var(--varning); }
.kravgrupp { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .6rem .9rem; margin: .6rem 0; }
.kravgrupp > summary { padding: .2rem 0; }
.kravgrupp table { margin-top: .6rem; }
.ok-ruta { background: var(--ok-bg); border-left: 3px solid var(--ok); color: var(--ok); padding: .6rem .8rem; border-radius: 4px; }
.hoger-knapp { float: right; margin: -.25rem 0 .5rem 1rem; }
form.staplad { display: grid; gap: .5rem; margin-top: .5rem; min-width: 16rem; }
form.staplad input:not([type=checkbox]):not([type=radio]), form.staplad select { min-width: 0; width: 100%; }
form.staplad .rad { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
form.staplad .rad select { width: auto; }
.knappar { display: flex; flex-wrap: wrap; gap: .4rem; }
.nyckeltal a.tal.klickbar { color: var(--text); text-decoration: none; }
.nyckeltal a.tal.klickbar:hover { border-color: var(--accent); }
.nyckeltal .varde .av { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.nyckeltal .vad { font-size: .9rem; font-weight: 500; line-height: 1.4; margin-top: .4rem; text-wrap: balance; }  /* etiketten som mening, inte versal etikett */
.nyckeltal .innebord { font-size: .82rem; color: var(--text-3); margin-top: .3rem; }
/* Kvalitet: ordlista för tabellen, granskpunkter och den hopfällda pipelinen */
.ordlista { margin: .75rem 0 1rem; }
.ordlista dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem 1.2rem; margin: .7rem 0 .2rem; font-size: .88rem; max-width: 80ch; }
.ordlista dt { font-weight: 600; }
.ordlista dd { margin: 0; color: var(--text-2); }
.granskpunkter { display: flex; flex-wrap: wrap; gap: .3rem; }
.granskpunkter a.tagg { text-decoration: none; }
.granskpunkter a.tagg:hover { border-color: var(--text-2); }
details.pipeline { margin-top: 2.25rem; }
details.pipeline[open] > summary { margin-bottom: .75rem; }
details.pipeline h3 { margin: 1.75rem 0 .4rem; }
@media (max-width: 760px) { .ordlista dl { grid-template-columns: 1fr; gap: .1rem; } .ordlista dd { margin-bottom: .5rem; } }

.kalla { margin-top: -.25rem; }

/* -- utlysningslistan -- */
.lista-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.filterkolumn { display: grid; gap: 1.1rem; font-size: .9rem; position: sticky; top: 76px; }
.filterkolumn fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
.filterkolumn legend { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--text-3); margin-bottom: .35rem; }
.filterkolumn label { color: var(--text); font-weight: 400; }
.filterkolumn input[type=search] { width: 100%; min-width: 0; }
.filterkolumn .antal { color: var(--text-3); font-size: .8rem; }
.kortlista { display: grid; gap: .75rem; min-width: 0; }
.ukort { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem 1.1rem; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; }
.ukort:hover { border-color: var(--kant-stark); }
.ukort .dag { text-align: center; border-right: 1px solid var(--kant); padding-right: .9rem; }
.ukort .dag b { display: block; font-size: 1.55rem; line-height: 1.1; font-weight: 650; font-variant-numeric: tabular-nums; }
.ukort .dag span { display: block; font-size: .74rem; color: var(--text-3); }
.ukort .dag.snart b { color: var(--varning); }
.ukort h2, .ukort h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.ukort h2 a, .ukort h3 a { color: var(--text); text-decoration: none; }
.ukort h2 a:hover, .ukort h3 a:hover { color: var(--accent-mork); text-decoration: underline; }
.ukort .program { font-size: .8rem; color: var(--text-3); margin: .2rem 0 .45rem; }
.ukort .fakta { font-size: .9rem; color: var(--text-2); margin: 0 0 .55rem; }
/* Öppen men inte sökbar: grått papper, stark kant och dämpad rubrik; texten håller AA. */
.ukort.ej { background: var(--yta-2); border-color: var(--kant-stark); }
.ukort.ej h3 a, .ukort.ej h2 a { color: var(--text-2); }
.taggar { display: flex; flex-wrap: wrap; gap: .35rem; }

.filterdetaljer > summary { display: none; }
@media (max-width: 900px) { .filterdetaljer > summary { display: block; padding: .6rem .9rem; border: 1px solid var(--kant-stark); border-radius: 6px; background: var(--yta); font-weight: 550; } .filterdetaljer[open] > summary { margin-bottom: .9rem; } }

/* -- utlysningssidan -- */
.statusrad { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.svar-rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.svar { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem 1.15rem; min-width: 0; }
.svar h2 { font-size: 1rem; margin: 0 0 .7rem; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.svar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .92rem; }
.svar li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .35rem; align-items: start; margin: 0; }
.ikon { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; margin-top: 3px; }
.ikon.krav { background: var(--accent-ljus); color: var(--accent-mork); }
.ikon.fraga { background: var(--varning-bg); color: var(--varning); }
.kallrad { display: block; font-size: .76rem; color: var(--text-3); margin-top: .15rem; }
.kallrad a { color: var(--text-3); }
.faktalista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .92rem; }
.faktalista dt { color: var(--text-3); }
.faktalista dd { margin: 0; font-variant-numeric: tabular-nums; }
.svar .mer { margin: .8rem 0 0; font-size: .86rem; }
.kravgrupper { display: grid; gap: .6rem; }
.kravgrupper .rubrikrad { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--text-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.stapelgrupp { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); }
.stapelgrupp > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; padding: .75rem 1rem; cursor: pointer; color: var(--text); }
.stapelgrupp > summary::-webkit-details-marker { display: none; }
.stapelgrupp > summary .antal { color: var(--text-3); font-size: .86rem; }
.stapel { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--yta-3); overflow: hidden; display: flex; }
.stapel i { display: block; height: 100%; }
.s-obl { background: var(--accent); } .s-okand { background: var(--kant-stark); } .s-friv { background: var(--varning); }
.stapelgrupp table { margin: 0; border: 0; border-top: 1px solid var(--kant); border-radius: 0 0 var(--radie) var(--radie); }
.texter { display: grid; gap: 1.25rem; max-width: 80ch; }
.texter h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
.texter .md { color: var(--text-2); }
.dokrad { display: grid; gap: .45rem; }
.dokrad a.dok { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .85rem; border: 1px solid var(--kant); border-radius: 6px; background: var(--yta); color: var(--text); text-decoration: none; font-size: .92rem; }
.dokrad a.dok:hover { border-color: var(--kant-stark); }
.granskruta { border: 1px dashed var(--kant-stark); border-radius: var(--radie); padding: .9rem 1.1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; color: var(--text-2); font-size: .9rem; margin-top: 2rem; }

/* -- startsidan -- */
.start-hjalte { display: grid; gap: .6rem; max-width: 780px; margin-bottom: 1.5rem; }
.start-hjalte h1 { font-size: 2rem; margin: 0; text-wrap: balance; }
.fragefalt { display: flex; gap: .5rem; flex-wrap: wrap; }
.fragefalt input { flex: 1 1 280px; min-width: 0; min-height: 2.8rem; font-size: 1rem; }
.fragefalt button { min-height: 2.8rem; }
.start-tva { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.snartlista { display: grid; }
.snartlista a { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--kant); color: var(--text); text-decoration: none; font-size: .93rem; }
.snartlista a:last-child { border-bottom: 0; }
.snartlista a:hover span { color: var(--accent-mork); text-decoration: underline; }
.snartlista b { color: var(--varning); font-size: .84rem; font-variant-numeric: tabular-nums; }
.spar { display: grid; gap: .55rem; }
.spar a { display: block; padding: .75rem .9rem; border: 1px solid var(--kant); border-radius: var(--radie); background: var(--yta); color: var(--text); text-decoration: none; font-weight: 550; }
.spar a span { display: block; font-weight: 400; font-size: .84rem; color: var(--text-3); margin-top: .1rem; }
.spar a:hover { border-color: var(--accent); }

/* -- tabeller -- */
table { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); overflow: hidden; margin: .75rem 0; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--kant); vertical-align: top; }
th { background: var(--yta-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, table tr:hover td { background: var(--yta-2); }

/* -- taggar -- */
.tagg { display: inline-block; padding: .08rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 500; line-height: 1.6; background: var(--yta-3); color: var(--text-2); border: 1px solid var(--kant); white-space: nowrap; vertical-align: middle; }
.tagg.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-kant); }
.tagg.varning { background: var(--varning-bg); color: var(--varning); border-color: var(--varning-kant); }
.tagg.fel { background: var(--fel-bg); color: var(--fel); border-color: var(--fel-kant); }
.tagg.info { background: var(--info-bg); color: var(--info); border-color: var(--info-kant); }

/* -- formulär och knappar -- */
label { display: block; overflow-wrap: anywhere; font-size: .84rem; font-weight: 500; color: var(--text-2); margin-bottom: .3rem; }
label > input:not([type=checkbox]):not([type=radio]), label > select, label > textarea { display: block; margin-top: .3rem; font-weight: 400; }
input[type=checkbox], input[type=radio] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); flex: none; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; color: var(--text); }
form:not(.rad) > label { margin-bottom: .9rem; }
td.nowrap, th.nowrap { white-space: nowrap; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=url], input[type=search], select, textarea {
  font: inherit; color: var(--text); background: var(--yta); padding: .5rem .65rem; border: 1px solid var(--kant-stark); border-radius: 6px; min-width: 12rem; min-height: 2.4rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ljus); }
/* Rullgardiner: systemets egen ram bort, en ritad pil i grafit, samma höjd och kant som textfälten. Listan som öppnas är fortfarande webbläsarens, så tangentbord och skärmläsare fungerar som vanligt. */
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; padding-right: 2.3rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234d5358' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: .9rem .9rem;
}
select:not([multiple]):not([size]):hover { border-color: var(--text-3); }
select:not([multiple]):not([size]):focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231e6a0c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5l4 4 4-4'/></svg>"); }
select:disabled { cursor: not-allowed; opacity: .55; }
select::-ms-expand { display: none; }
textarea { width: 100%; min-height: 6rem; }
form.rad { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; }
button, .knapp {
  font: inherit; font-size: .9rem; font-weight: 550; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.4rem; padding: .45rem 1rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap;
}
button:hover, .knapp:hover { background: var(--accent-mork); border-color: var(--accent-mork); color: #fff; }
button.sekundar, .knapp.sekundar { background: var(--yta); color: var(--text); border-color: var(--kant-stark); }
button.sekundar:hover, .knapp.sekundar:hover { background: var(--yta-3); color: var(--text); border-color: var(--kant-stark); }
button:disabled { opacity: .55; cursor: not-allowed; }
.knapp { margin: .2rem .3rem .2rem 0; }

/* -- kod -- */
code { overflow-wrap: anywhere; font-family: var(--mono); font-size: .86em; background: var(--yta-3); border: 1px solid var(--kant); padding: .05rem .3rem; border-radius: 4px; }
pre { font-family: var(--mono); background: var(--kod-bg); color: var(--kod-text); padding: 1rem; border-radius: var(--radie); overflow: auto; font-size: .82rem; line-height: 1.5; }
pre code { background: none; border: 0; padding: 0; color: inherit; }

/* -- markdown -- */
.md { max-width: 80ch; overflow-wrap: anywhere; }
.md h1 { font-size: 1.6rem; } .md h2 { font-size: 1.2rem; margin-top: 2rem; padding-top: .25rem; } .md h3 { font-size: 1rem; }
.md h2[id]::after, .md h3[id]::after { content: " #" attr(id); color: var(--kant-stark); font-size: .75em; font-weight: 400; opacity: 0; transition: opacity .15s; }
.md h2[id]:hover::after, .md h3[id]:hover::after { opacity: 1; }
.md table { margin: 1rem 0; }
.md blockquote { margin: 1rem 0; padding: .5rem 1rem; border-left: 3px solid var(--kant-stark); color: var(--text-2); background: var(--yta); }

/* -- övrigt -- */
.logg { max-height: 22rem; overflow: auto; }
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
details { margin: .5rem 0; } details summary { cursor: pointer; color: var(--text-2); font-weight: 500; }
details summary:hover { color: var(--text); }
.kallor li { margin: .35rem 0; border-radius: 3px; transition: background .12s, box-shadow .12s; }
.kallor li.markerad { background: var(--accent-ljus); box-shadow: 0 0 0 .4rem var(--accent-ljus); }

/* -- källhänvisningar i agentens svar: [1] blir en länk till källan, hovring visar vilken och markerar den i listan -- */
.kallhanv-grupp { white-space: nowrap; color: var(--text-3); font-size: .85em; }
.kallhanv { display: inline-block; padding: 0 .3em; border-radius: 4px; font-weight: 600; line-height: 1.45; text-decoration: none; color: var(--accent-mork); background: var(--yta-3); transition: background .12s, color .12s; }
.kallhanv:hover, .kallhanv:focus-visible, .kallhanv.markerad { background: var(--accent-ljus); color: var(--accent-mork); }
.md :is(p, li):has(> .kallhanv-grupp, > * > .kallhanv-grupp):hover { background: var(--yta-3); box-shadow: 0 0 0 .35rem var(--yta-3); border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .kallhanv, .kallor li { transition: none; } }
.diff-plus { color: var(--ok); background: var(--ok-bg); } .diff-minus { color: var(--fel); background: var(--fel-bg); }

/* -- inloggning -- */
.inloggning { max-width: 420px; margin: 4vh auto 0; }
.inloggning .kort { padding: 2rem; }
.inloggning h1 { font-size: 1.4rem; }
.inloggning input { width: 100%; }
.inloggning button { width: 100%; margin-top: 1rem; }

/* -- sidfot -- */
.sidfot { border-top: 1px solid var(--kant); background: var(--yta); }
.sidfot .inre { max-width: var(--bredd); margin: 0 auto; padding: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .8rem; color: var(--text-3); }
.sidfot .iteam::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--iteam); margin-right: .45rem; vertical-align: middle; }
.sidfot a { color: var(--text-2); }

@media (max-width: 1240px) { .anvandare .roll { display: none; } .sidhuvud .inre { gap: 1.25rem; } .huvudnav a { padding: 0 .55rem; } }

@media (max-width: 900px) { .svar-rad, .start-tva { grid-template-columns: minmax(0, 1fr); } .lista-layout { grid-template-columns: minmax(0, 1fr); } .filterkolumn { position: static; } }

@media (max-width: 760px) {
  .ukort { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .ukort .dag { border-right: 0; text-align: left; padding: 0; display: flex; gap: .5rem; align-items: baseline; } .ukort .dag span { display: inline; }
  .sidhuvud .inre { flex-wrap: wrap; gap: .25rem 1rem; padding-top: .5rem; }
  .huvudnav { order: 3; width: 100%; flex-wrap: wrap; overflow: visible; column-gap: 0; }
  .huvudnav a { min-height: 44px; padding: 0 .6rem; }
  .huvudnav .skiljare { margin: 12px 4px; }
  .undernav .inre { flex-wrap: wrap; overflow: visible; padding: 0 1rem; }
  .undernav a { min-height: 44px; display: flex; align-items: center; }
  main table { display: block; overflow-x: auto; max-width: 100%; }
  .tabellrulle table { display: table; }
  .knapp, .exempelfragor a, .exempelfragor .exempel { white-space: normal; }
  .granska-knappar .knapp { max-width: 100%; overflow-wrap: anywhere; }
  .anvandare .roll, .anvandare .namn-text { display: none; }
  .miljoband .inre { padding-top: .35rem; padding-bottom: .35rem; }
  main { padding: 1.25rem 1rem 2rem; }
  h1 { font-size: 1.45rem; }
  input[type=text], select { min-width: 0; width: 100%; }
}
.tabellrulle { overflow-x: auto; max-width: 100%; }
.tabellrulle table { min-width: 40rem; }
.dokgrupp-rubrik { font-size: .95rem; margin: 1.1rem 0 .4rem; color: var(--text-2); }
details.dokgrupp { margin-top: 1rem; }
/* AI-märkning: syns alltid ovanför AI-genererad text */
.ai-markning { border: 1px solid var(--kant); border-left: 4px solid var(--text-2); border-radius: var(--radie); padding: .6rem .85rem; margin: .5rem 0 1rem; background: var(--yta); }
.ai-markning.ai-hog { border-left-color: var(--ok); }
.ai-markning.ai-medel, .ai-markning.ai-avstar { border-left-color: var(--varning); }
.ai-markning.ai-lag { border-left-color: var(--fel); }
.ai-markning .ai-rad { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.ai-markning .ai-etikett { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; background: var(--text-2); color: var(--yta); padding: .1rem .45rem; border-radius: 3px; }
.ai-markning p, .ai-markning ul { margin: .35rem 0 0; }
.tagg.ai { background: var(--yta-3); border: 1px dashed var(--text-2); }
/* Spår till källan: källkortet vid hover och tangentbordsfokus. Samma kort för uppgifter i profilen (_spar.html),
   agentens [n] i svaret och syntesens [n] (portal.py: kallruta). */
.sparad { position: relative; border-bottom: 1px dotted var(--text-2); cursor: help; }
.sparad:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.sparad.hanv { border-bottom: 0; cursor: inherit; }
.sparruta { display: none; position: absolute; left: 0; top: calc(100% + .35rem); z-index: 30; width: min(34rem, calc(100vw - 2rem)); background: var(--yta); color: var(--text); text-align: left;
  border: 1px solid var(--kant); border-radius: var(--radie); box-shadow: 0 10px 28px rgba(18, 22, 25, .12), 0 2px 6px rgba(18, 22, 25, .07); padding: .7rem .85rem .75rem; font: 400 .82rem/1.5 var(--typsnitt); white-space: normal; cursor: auto; }
.sparad:hover > .sparruta, .sparad:focus > .sparruta, .sparad:focus-within > .sparruta { display: block; animation: sparin .14s ease-out; }
.sparad.stangd > .sparruta { display: none !important; }
@keyframes sparin { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sparad:hover > .sparruta, .sparad:focus-within > .sparruta { animation: none; } }
/* Med skript: fast placering inom fönstret, beräknad i base.html. */
.sparruta.fast { position: fixed; left: var(--x); top: var(--y); max-height: calc(100vh - 1rem); overflow-y: auto; }
.sparruta .sparplats { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-family: var(--mono); font-size: .74rem; color: var(--text-2); margin-bottom: .4rem; overflow-wrap: anywhere; }
.sparruta .sparslag { font: 650 .66rem/1.5 var(--typsnitt); letter-spacing: .06em; text-transform: uppercase; padding: 0 .4rem; border-radius: 999px; background: var(--yta-3); color: var(--text-2); border: 1px solid var(--kant); white-space: nowrap; }
.sparruta .sparslag.villkor { background: var(--info-bg); color: var(--info); border-color: var(--info-kant); }
.sparruta .sparslag.dokument, .sparruta .sparslag.omgang_text { background: var(--accent-ljus); color: var(--accent-mork); border-color: var(--ok-kant); }
.sparruta .sparslag.egen { background: var(--varning-bg); color: var(--varning); border-color: var(--varning-kant); }
.sparruta .spartitel { display: block; font-weight: 600; font-size: .86rem; line-height: 1.35; margin-bottom: .35rem; }
.sparruta q { display: block; quotes: "”" "”"; border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .6rem; margin: .25rem 0; color: var(--text); }
.sparruta q::before, .sparruta q::after { content: none; }
.sparruta .sparnot { display: block; color: var(--text-3); font-size: .76rem; margin-top: .35rem; }
.sparruta .sparnot + .sparnot { margin-top: .1rem; }
.sparlank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; margin: -.3rem -.2rem; vertical-align: middle; text-decoration: none; font-size: .85em; }
.ai-prick { font-size: .72rem; line-height: 1.2; font-weight: 700; letter-spacing: .04em; border: 1px dashed var(--text-2); border-radius: 3px; padding: 0 .15rem; margin-left: .3rem; vertical-align: .1em; color: var(--text-2); }
/* Källtext med radnummer */
.radvy { font-family: ui-monospace, monospace; font-size: .8rem; line-height: 1.5; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); overflow-x: auto; max-height: 75vh; overflow-y: auto; }
.radvy ol { list-style: none; margin: 0; padding: .4rem 0; counter-reset: none; }
.radvy li { display: grid; grid-template-columns: 4rem 1fr; gap: .75rem; padding: 0 .75rem; white-space: pre-wrap; word-break: break-word; }
.radvy li .nr { color: var(--text-2); text-align: right; user-select: none; text-decoration: none; }
.radvy li.markerad { background: var(--varning-bg); }
.radvy li:target { outline: 2px solid var(--accent); }
/* Utlysningsprofilen */
.profilsyntes { margin: 1rem 0 1.5rem; }
.profilsyntes .ingress { margin-top: .4rem; }
.hanvisning { font-size: .78em; vertical-align: super; text-decoration: none; margin-left: .05rem; color: var(--accent-mork); border-radius: 3px; }
.hanvisning:hover, .hanvisning:focus-visible { background: var(--accent-ljus); }
.profilrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.profilrad .kort { min-width: 0; }
.profilrad h2 { font-size: 1.05rem; margin-top: 0; }
ol.tidslinje { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
ol.tidslinje li.avviker { border-left: 3px solid var(--varning); padding-left: .5rem; }
/* Granskarnas flaggor */
.flaggknapp { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; margin: -.3rem -.2rem; padding: 0; vertical-align: middle; border: 0; background: none; cursor: pointer; color: var(--text-2); font-size: .85em; font-weight: 400; line-height: 1; }
.flaggknapp:hover { background: none; border: 0; }
.flaggknapp:hover, .flaggknapp:focus-visible { color: var(--accent); }
.flaggad { font-size: .75rem; font-weight: 600; padding: .05rem .35rem; border-radius: 3px; white-space: nowrap; }
.flaggad.stammer { background: var(--ok-bg); color: var(--ok); }
.flaggad.stammer_inte { background: var(--fel-bg); color: var(--fel); }
.flaggad.osaker { background: var(--varning-bg); color: var(--varning); }
.svarsbedomning { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid var(--kant); }
.svarsbedomning .svarsknapp { margin: 0; padding: .25rem .7rem; font-size: .82rem; border: 1px solid var(--kant); border-radius: 999px; background: var(--yta); color: var(--text); min-height: 0; }
.svarsbedomning .svarsknapp:hover, .svarsbedomning .svarsknapp:focus-visible { border-color: var(--accent); color: var(--accent-mork); background: var(--yta); }
.svarsbedomning .svarsknapp.stammer:hover { border-color: var(--ok); color: var(--ok); }
.svarsbedomning .svarsknapp.stammer_inte:hover { border-color: var(--fel); color: var(--fel); }
.svarsbedomning .liten { flex-basis: 100%; }
.flaggdialog { border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem 1.2rem; width: min(32rem, 92vw); background: var(--yta); color: inherit; box-shadow: var(--skugga); }
.flaggdialog::backdrop { background: rgba(0,0,0,.25); }
.flaggdialog h2 { font-size: 1rem; margin-top: 0; }
.flaggdialog .flaggval { display: flex; gap: 1rem; flex-wrap: wrap; border: 0; padding: 0; margin: .6rem 0; }
.flaggdialog textarea { width: 100%; }
.stegrad { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin: 1rem 0 1.5rem; }
.stegrad li { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .6rem .8rem; display: grid; gap: .25rem; font-size: .88rem; }
.luckruta { border-left: 4px solid var(--varning); margin: .8rem 0 1.2rem; }
.luckruta ul { margin: .3rem 0; }
/* Bygg: grafisk startsida för byggare */
.bygghjalte { background: linear-gradient(135deg, var(--accent-ljus), var(--yta)); border: 1px solid var(--kant); border-radius: calc(var(--radie) * 2); padding: 1.6rem 1.8rem; margin: 1rem 0 2rem; }
.bygghjalte h1 { margin: .2rem 0 .6rem; }
.tresteg { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.tresteg li { display: flex; gap: .8rem; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .9rem 1rem; min-width: 0; }
.tresteg li > div { min-width: 0; }
.tresteg p { margin: .25rem 0 .6rem; font-size: .9rem; color: var(--text-2); }
.stegnr { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.kod { background: var(--kod-bg); color: var(--kod-text); border-radius: var(--radie); padding: .7rem .9rem; overflow-x: auto; font-size: .8rem; line-height: 1.5; margin: .5rem 0; }
.kod code { background: none; color: inherit; padding: 0; white-space: pre; }
.verktygsgrid, .repogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .8rem; margin: 1rem 0 2rem; }
.verktyg, .repo { display: grid; grid-template-columns: 2.6rem 1fr; grid-template-rows: auto 1fr; column-gap: .75rem; align-items: start; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .85rem 1rem; text-decoration: none; color: inherit; transition: border-color .15s; }
.verktyg:hover, .repo:hover { border-color: var(--accent); }
.verktyg .logo, .repo .logo { grid-row: span 2; }
.verktyg span:last-child, .repo span:last-child { font-size: .82rem; color: var(--text-2); }
.logo { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; }
.logo svg { width: 2rem; height: 2rem; }
.textlogo { border-radius: 6px; color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .02em; }
.liten-logo { width: 1.3rem; height: 1.3rem; vertical-align: -.3rem; margin-right: .25rem; }
.liten-logo svg { width: 1.1rem; height: 1.1rem; }
.liten-logo.textlogo { font-size: .72rem; letter-spacing: 0; border-radius: 4px; width: auto; min-width: 1.3rem; padding: 0 .2rem; }
.tjanstgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.tjanst { display: flex; gap: .9rem; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem; min-width: 0; }
.tjanst > div { min-width: 0; }
.tjanst p { margin: .3rem 0 .5rem; font-size: .88rem; color: var(--text-2); }
.tjanst .url { word-break: break-all; font-size: .78rem; }
.kopiera { border: 1px solid var(--kant); background: var(--yta); border-radius: 4px; font-size: .72rem; min-height: 1.6rem; padding: .15rem .5rem; cursor: pointer; margin-left: .3rem; }
.kopiera:hover { border-color: var(--accent); }
.flikrad details { border: 1px solid var(--kant); border-radius: var(--radie); padding: .5rem .8rem; margin: .4rem 0; }
.flikrad summary { cursor: pointer; font-weight: 600; }
.sifferrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin: 1rem 0; }
.sifferrad > div { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .8rem 1rem; display: grid; }
.sifferrad b { font-size: 1.7rem; letter-spacing: -.02em; }
.sifferrad span { font-size: .82rem; color: var(--text-2); }
.kopiera { color: var(--text); font-weight: 500; }
.tjanst .logo, .tresteg .stegnr { flex: none; }
/* Start och prova */
.exempelfragor { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }
.exempelfragor a, .exempelfragor .exempel { font-size: .82rem; border: 1px solid var(--kant); background: var(--yta); color: var(--text); border-radius: 999px; padding: .2rem .7rem; text-decoration: none; cursor: pointer; font-weight: 400; }
.exempelfragor a:hover, .exempelfragor .exempel:hover { border-color: var(--accent); color: var(--accent-mork); }
.vagrubrik { margin-top: 2rem; }
.vagar { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin: .8rem 0 2rem; }
.vag { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .8rem; align-items: start; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem; text-decoration: none; color: inherit; transition: border-color .15s; }
.vag:hover { border-color: var(--farg, var(--accent)); }
.vag .vagsymbol { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 6px; display: grid; place-items: center; color: var(--farg); background: color-mix(in srgb, var(--farg) 12%, transparent); }
.vag .vagsymbol svg { width: 1.4rem; height: 1.4rem; }
.vag:hover .vagsymbol { color: var(--farg); }
.vag > span:last-child { font-size: .85rem; color: var(--text-2); }
.nytt ul { padding-left: 1.1rem; margin: 0; }
.regler { margin-top: 1rem; }
.omgangsval { width: 100%; max-width: 100%; }
.foretagsval { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem; max-height: 20rem; overflow-y: auto; border: 1px solid var(--kant); border-radius: var(--radie); padding: .6rem; background: var(--yta-2); }
.foretagsval fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.foretagsval legend { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: .2rem; }
.foretagsval .foretag { display: block; font-weight: 400; font-size: .88rem; padding: .1rem 0; }
/* Granska som handläggare */
.granskstatus { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.granskstatus > div { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .6rem 1rem; display: grid; }
.granskstatus b { font-size: 1.4rem; }
.granskstatus span { font-size: .8rem; color: var(--text-2); }
.granskgrupp { margin: 1.6rem 0; }
.granskgrupp-rubrik { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.granskgrupp-rubrik h2 { margin: 0; font-size: 1.1rem; }
.ansokningskort { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .7rem; margin-top: .7rem; }
.ansokan { display: grid; gap: .3rem; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .8rem .9rem; text-decoration: none; color: inherit; }
.ansokan:hover { border-color: var(--accent); }
.ansokan b { font-size: .92rem; line-height: 1.35; }
.ansokan .ansokan-status { font-size: .8rem; color: var(--accent-mork); font-weight: 600; }
.ansokan.klar { background: var(--ok-bg); }
.omgangskrav h3 { margin: .6rem 0 .3rem; font-size: .9rem; } .omgangskrav ul { padding-left: 1.1rem; }
/* Jämna rader: 6 vägar och 9 verktyg fyller tre kolumner. */
@media (min-width: 52rem) { .vagar, .verktygsgrid { grid-template-columns: repeat(3, 1fr); } }
.tjanst .url { display: block; margin-bottom: .35rem; }
a.tagg { text-decoration: none; } a.tagg:hover { border-color: currentColor; } .teckenforklaring .tagg { margin-right: .15rem; }
.rundtur { border-left: 5px solid var(--accent); }
.rundsteg { list-style: none; padding: 0; margin: .9rem 0 .4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.rundsteg li { display: flex; gap: .8rem; min-width: 0; }
.rundsteg li > div { min-width: 0; }
.rundsteg p { margin: .25rem 0 .6rem; font-size: .9rem; color: var(--text-2); }
.swaggerram { padding: .5rem 0; overflow-x: auto; } .swaggerram .swagger-ui .info { margin: 1rem 0; }
/* Swagger UI: bara de färger som inte klarar AA, med portalens tokens. */
.swaggerram .swagger-ui .info a, .swaggerram .swagger-ui .scopes h2 a { color: var(--accent-mork); }
.swaggerram .swagger-ui .info a:hover, .swaggerram .swagger-ui .scopes h2 a:hover { color: var(--accent); }
.swaggerram .swagger-ui .btn.authorize, .swaggerram .swagger-ui .btn.execute { background: var(--accent); border-color: var(--accent); color: #fff; }
.swaggerram .swagger-ui .btn.authorize:hover, .swaggerram .swagger-ui .btn.execute:hover { background: var(--accent-mork); border-color: var(--accent-mork); }
.swaggerram .swagger-ui .btn.authorize svg { fill: #fff; color: #fff; }
.swaggerram .swagger-ui .btn.authorize svg path { fill: currentColor; }
/* Sida vid sida: originalet (PDF) och det som togs ut. */
main.bred { max-width: none; }
.sidvid-huvud { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sidvid-huvud h1 { margin-bottom: .2rem; }
.sidvid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.sidvid-pdf { position: sticky; top: 4.5rem; min-width: 0; }
.pdf-verktyg { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.pdf-knappar { display: flex; gap: .3rem; }
.liten-knapp { padding: .15rem .6rem; font-size: .9rem; line-height: 1.4; }
.pdf-ram { position: relative; height: calc(100vh - 7.5rem); overflow: auto; background: var(--yta-3); border: 1px solid var(--kant); border-radius: var(--radie); padding: .75rem; }
.pdf-sida { position: relative; margin: 0 auto .75rem; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.pdf-sida canvas { display: block; }
.pdf-lager { position: absolute; inset: 0; pointer-events: none; }
.pdf-markering { position: absolute; background: rgba(255, 196, 0, .38); outline: 2px solid rgba(230, 150, 0, .9); border-radius: 2px; }
.sidvid-uttag { min-width: 0; }
.uttag-nav { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .2rem 0 .6rem; position: sticky; top: 3.9rem; background: var(--yta-2); padding: .3rem 0; z-index: 2; }
.uttag-grupp { margin-bottom: .6rem; }
.uttag-grupp > summary { cursor: pointer; padding: .3rem 0; }
.uttag { border: 1px solid var(--kant); border-radius: var(--radie); padding: .55rem .7rem; margin: .4rem 0; background: var(--yta); }
.uttag:hover, .uttag:focus-within { border-color: var(--accent); }
button.uttag-valj { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; margin: 0; min-height: 0; display: inline; text-align: start; white-space: normal; cursor: pointer; }
button.uttag-valj:hover { background: none; color: inherit; border: 0; text-decoration: underline; }
.uttag.vald { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.uttag-rad { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.uttag-text { font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.uttag-detalj { font-size: .86rem; color: var(--text-2); margin-top: .15rem; }
.uttag-citat { display: block; font-size: .84rem; color: var(--text-2); margin-top: .3rem; border-left: 3px solid var(--kant); padding-left: .5rem; }
.uttag-plats { font-size: .76rem; color: var(--text-2); margin-top: .2rem; }
.uttag-fakta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem .7rem; margin: .35rem 0 0; font-size: .82rem; }
.uttag-fakta dt { color: var(--text-3); } .uttag-fakta dd { margin: 0; color: var(--text-2); }
.uttag-grund { margin-top: .35rem; font-size: .82rem; }
.uttag-grund summary { cursor: pointer; color: var(--text-2); padding: .1rem 0; }
.uttag-grund ul { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--text-2); }
.uttag-grund p { margin: .3rem 0 0; }
/* Källtexten till vänster när originalet saknas: samma ruta som PDF:en, med radnummer som i spåren. */
.textram { position: relative; height: calc(100vh - 7.5rem); max-height: none; }
.textram li.markerad { background: var(--varning-bg); }
@media (max-width: 900px) {
  .sidvid { grid-template-columns: 1fr; }
  .sidvid-pdf { position: static; }
  .pdf-ram { height: 70vh; }
  .textram { height: 50vh; }
}
/* Sprintsidan */
.sprinthjalte { background: linear-gradient(135deg, var(--accent-ljus), var(--yta)); border: 1px solid var(--kant); border-radius: 14px; padding: 1.6rem 1.6rem 1.2rem; margin-bottom: 1rem; }
.sprinthjalte h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .2rem 0 .5rem; text-wrap: balance; }
.knapprad { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.lagesrad { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 0 0 1.6rem; }
.lagesrad a { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .7rem 1rem; text-decoration: none; color: var(--text); display: flex; flex-direction: column; }
.lagesrad a:hover { border-color: var(--accent); }
.lagesrad b { font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--accent-mork); }
.lagesrad span { font-size: .85rem; color: var(--text-2); }
.ingangar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.ingang { display: flex; gap: .9rem; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem; }
.ingang p { margin: .25rem 0; color: var(--text-2); font-size: .92rem; }
.ingangsbokstav { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.tidslinje-sprint { list-style: none; padding: 0; margin: .5rem 0; border-left: 3px solid var(--accent-ljus); }
.tidslinje-sprint li { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; padding: .45rem 0 .45rem 1rem; }
.tidslinje-sprint li::before { content: ""; position: absolute; left: -.48rem; top: .85rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--accent); }
.tidslinje-sprint .nar { font-weight: 700; color: var(--accent-mork); }
.dokgrupper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dokgrupper h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0 0 .4rem; }
.dokkort { display: block; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .6rem .8rem; margin-bottom: .5rem; text-decoration: none; color: var(--text); }
.dokkort:hover { border-color: var(--accent); }
.dokkort span { display: block; font-size: .85rem; color: var(--text-2); margin-top: .1rem; }
.tjanstetabell td:first-child { font-weight: 600; white-space: nowrap; }
.vemrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; }
.vem { display: flex; gap: .6rem; align-items: center; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .5rem .7rem; }
.initial { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yta-3); display: grid; place-items: center; font-weight: 700; color: var(--text-2); }
@media (max-width: 900px) { .lagesrad { grid-template-columns: repeat(2, 1fr); } .ingangar, .dokgrupper { grid-template-columns: 1fr; } }
/* Admin: kvoter */
.rutnat-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem 1.2rem; }
.rutnat-form > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.matare { height: .45rem; background: var(--yta-3); border-radius: 999px; overflow: hidden; margin-top: .4rem; }
.matare span { display: block; height: 100%; background: var(--accent); }
th.tal, td.tal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Handboken */
.handbok { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.hb-toc { position: sticky; top: 4.5rem; font-size: .88rem; max-height: calc(100vh - 6rem); overflow: auto; }
.hb-toc p { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin: 0 0 .4rem; }
.hb-toc ol { list-style: none; margin: 0; padding: 0; }
.hb-toc ol ol { padding-left: .8rem; }
.hb-toc a { display: block; padding: .15rem 0 .15rem .6rem; border-left: 2px solid transparent; color: var(--text); text-decoration: none; }
.hb-toc ol ol a { color: var(--text-2); font-size: .84rem; }
.hb-toc a:hover { border-left-color: var(--accent); color: var(--accent-mork); }
.hb-text { min-width: 0; max-width: 52rem; }
.hb-text section { scroll-margin-top: 4.5rem; padding-top: .4rem; margin-bottom: 2.6rem; }
.hb-text h2 { border-top: 1px solid var(--kant); padding-top: 1rem; }
.hb-text h3 { scroll-margin-top: 4.5rem; margin-top: 1.6rem; }
.hb-text p, .hb-text li { max-width: 70ch; }
.notis { background: var(--varning-bg); border-left: 4px solid var(--varning); padding: .7rem 1rem; border-radius: 0 var(--radie) var(--radie) 0; }
.tips { background: var(--accent-ljus); border-left: 4px solid var(--accent); padding: .7rem 1rem; border-radius: 0 var(--radie) var(--radie) 0; }
.hb-vagar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .6rem 0 1rem; }
.hb-vagar a { display: block; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); padding: .8rem 1rem; color: var(--text); text-decoration: none; }
.hb-vagar a:hover { border-color: var(--accent); }
.hb-vagar span { display: block; font-size: .88rem; color: var(--text-2); margin-top: .2rem; }
.hb-flode { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0 1.2rem; }
.hb-flode span { background: var(--yta); border: 1px solid var(--kant); border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; }
.hb-flode i { font-style: normal; color: var(--text-3); }
.hb-regler li { margin-bottom: .5rem; }
@media (max-width: 900px) { .handbok { grid-template-columns: 1fr; } .hb-toc { position: static; max-height: none; border: 1px solid var(--kant); border-radius: var(--radie); padding: .8rem 1rem; background: var(--yta); } .hb-vagar { grid-template-columns: 1fr; } }
/* Admin: deltagare */
.radform { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.radform select { width: auto; }
.knappar-rad { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.knappar-rad form { margin: 0; }

/* Granska mot originalet: ska synas direkt på varje omgång */
.granska-ruta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin: .6rem 0 1rem;
  padding: .75rem .9rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--kant)); border-left: 4px solid var(--accent);
  border-radius: var(--radie); background: color-mix(in srgb, var(--accent) 7%, var(--yta)); }
.granska-ruta > div:first-child { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 18rem; }
.granska-knappar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.granska-knappar .knapp { margin: 0; }
.knapp-roll { font-size: .78em; font-weight: 400; color: inherit; margin-left: .3rem; }
.knapp.sekundar .knapp-roll { color: var(--text-2); }
.instruktion { margin: .3rem 0 .8rem; padding: .5rem .75rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--yta)); border-radius: var(--radie); }
td .knapp.hoger { float: right; margin: 0 0 .3rem .6rem; }

/* Innovationssprint 1: sprintsidan */
.sprintfakta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .2rem 0 .8rem; font-weight: 600; color: var(--accent-mork); }
.sprintfakta span::before { content: "·"; margin-right: .5rem; color: var(--text-3); }
.sprintfakta span:first-child::before { content: none; }
.sidnav ~ h2[id] { scroll-margin-top: 4.5rem; }
.sidnav { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 1.2rem 0 .4rem; padding: .5rem 0; border-bottom: 1px solid var(--kant); font-size: .92rem; }
.utfall { display: grid; gap: .5rem; margin: .8rem 0 1.5rem; }
.utfall > details { scroll-margin-top: 4.5rem; border: 1px solid var(--kant); border-left: 4px solid var(--accent); border-radius: var(--radie); background: var(--yta); }
.utfall > details > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 650; font-size: 1.05rem; display: flex; align-items: center; gap: .7rem; list-style: none; }
.utfall > details > summary::-webkit-details-marker { display: none; }
.utfall > details > summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 1.3rem; color: var(--text-3); }
.utfall > details[open] > summary::after { content: "−"; }
.utfallsnr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent-ljus); color: var(--accent-mork); font-size: .85rem; flex: none; }
.utfallsinnehall { padding: 0 1rem 1rem; max-width: 72rem; }
.utfallsinnehall > p { max-width: 65ch; }
.tvaspalt, .personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.2rem; }
.principlista { margin: .4rem 0; }
.principlista dt { font-weight: 650; margin-top: .6rem; }
.principlista dd { margin: .15rem 0 0; color: var(--text-2); max-width: 65ch; }
.persona { border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem; background: var(--yta-2); min-width: 0; }
.persona h3 { margin: .2rem 0; }
.persona h4 { margin: 1rem 0 .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.persona-teaser { font-style: italic; color: var(--text-2); }
.hypoteser, .bakgrund { list-style: none; padding: 0; display: grid; gap: .9rem; }
.hypoteser li, .bakgrund li { display: flex; gap: .9rem; align-items: flex-start; }
.hypoteser h3 { margin: 0 0 .3rem; }
.hypoteser p, .bakgrund p { margin: .1rem 0 .4rem; max-width: 65ch; }
.hypnr { font-weight: 700; color: var(--accent-mork); font-variant-numeric: tabular-nums; min-width: 1.8rem; }
.etikett { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 650; margin-top: .5rem !important; }
.processflode { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .5rem; margin: .5rem 0 1.2rem; }
.processflode li { display: flex; flex-direction: column; gap: .25rem; padding: .7rem .8rem; border: 1px solid var(--kant); border-radius: var(--radie); background: var(--yta-2); font-size: .92rem; }
.processflode li span { color: var(--text-2); }
.processflode li.grind { background: var(--accent-ljus); border-color: transparent; }
.arkprinciper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.arkprinciper article { border-top: 3px solid var(--accent); padding-top: .6rem; min-width: 0; }
.arkprinciper h3 { margin: 0 0 .3rem; }
.arkprinciper .enkelt { color: var(--text-2); font-style: italic; }
.arkprinciper details summary { cursor: pointer; font-size: .9rem; color: var(--accent-mork); }
.arkprinciper details ul { padding-left: 1.1rem; font-size: .92rem; }
.i-sandboxen { color: var(--text-3); }
.faser { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: .8rem 0 1.5rem; }
.faser > li { border: 1px solid var(--kant); border-radius: var(--radie); padding: 1rem; background: var(--yta); min-width: 0; }
.fashuvud { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem; margin-bottom: .4rem; }
.fashuvud .nar { font-size: .85rem; color: var(--accent-mork); font-weight: 600; }
.dagar { list-style: none; padding: 0; display: grid; gap: .3rem; margin: .5rem 0; }
.dagar li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; border-radius: 6px; background: var(--yta-2); font-size: .92rem; }
.dagar li span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.efterlista { padding-left: 1.1rem; margin: .4rem 0; }
.perspektiv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.perspektiv article { border-left: 4px solid var(--accent); padding: .2rem 0 .2rem 1rem; min-width: 0; }
.perspektiv h3 { margin: .1rem 0 .3rem; }
.infolank { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 1rem; padding: .75rem 1rem; max-width: 40rem;
  border: 2px solid var(--accent); border-radius: var(--radie); background: var(--yta); color: var(--text); text-decoration: none; }
.infolank:hover { background: var(--accent-ljus); }
.infolank > span:first-child { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.infolank > span:first-child span { font-size: .85rem; color: var(--text-2); overflow-wrap: anywhere; }
.infolank > span:last-child { font-size: 1.4rem; color: var(--accent-mork); }

/* Snabbknappen: skriv i loggboken eller registrera en lösning från vilken sida som helst.
   Ligger ovanpå innehållet, därför en av de tre ytor som får ha skugga (jämte dialogen och spårrutan). */
.snabb { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; margin: 0; }
.snabb > summary { list-style: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: var(--skugga); }
.snabb > summary::-webkit-details-marker { display: none; }
.snabb > summary:hover, .snabb[open] > summary { background: var(--accent-mork); border-color: var(--accent-mork); color: #fff; }
.snabb > summary svg { width: 1.25rem; height: 1.25rem; }
.snabbmeny { position: absolute; right: 0; bottom: calc(100% + .5rem); width: min(21rem, calc(100vw - 2.5rem)); background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie); box-shadow: var(--skugga); padding: .35rem; display: grid; gap: .15rem; }
.snabbmeny button { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: .65rem; row-gap: .1rem; width: 100%; text-align: start; justify-items: start; align-items: start; background: none; border: 0; color: var(--text); padding: .55rem .7rem; border-radius: 6px; min-height: 0; white-space: normal; font-weight: 400; line-height: 1.4; }
.snabbmeny button:hover, .snabbmeny button:focus-visible { background: var(--yta-3); color: var(--text); border-color: transparent; }
.snabbmeny button svg { grid-row: span 2; width: 1.25rem; height: 1.25rem; color: var(--accent-mork); margin-top: .1rem; }
.snabbmeny button b { font-weight: 600; }
.snabbmeny button span { font-size: .82rem; color: var(--text-2); }
.snabbdialog { width: min(40rem, 92vw); }
.snabbhuvud { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.snabbhuvud h2 { margin: 0; }
.snabbdialog textarea { min-height: 5rem; }
.snabbdialog form > label { margin-bottom: .7rem; }
.bred { width: 100%; }
/* Formulär i grupper: en legend per grupp, ett fält per rad, hjälptext under fältet, "valfritt" vid etiketten. */
.formular { display: grid; gap: 1.4rem; }
.formular fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .85rem; }
.formular legend { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--text-3); padding: 0; margin-bottom: .75rem; }
.formular .faltrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem; align-items: start; }
.formular .falt { display: grid; gap: .3rem; min-width: 0; }
.formular .falt label { margin: 0; color: var(--text); }
.formular .falt input, .formular .falt select, .formular .falt textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.formular .hjalp { font-size: .8rem; color: var(--text-3); margin: 0; line-height: 1.45; }
.formular .hjalp code { font-size: .92em; }
.formular .valfri { font-size: .76rem; font-weight: 400; color: var(--text-3); text-transform: none; letter-spacing: 0; margin-left: .25rem; }
.formular .knappar { margin: 0; }
.formular details.faltgrupp { margin: 0; }
.formular details.faltgrupp summary { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--text-3); list-style: none; }
.formular details.faltgrupp summary::before { content: "▸ "; } .formular details.faltgrupp[open] summary::before { content: "▾ "; }
.formular details.faltgrupp[open] summary { margin-bottom: .75rem; }
.formular details.faltgrupp[open] legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.formular details.faltgrupp fieldset { position: relative; }
.filterrad { margin: 0 0 1rem; }
@media (max-width: 760px) { .snabb { right: 1rem; bottom: 1rem; } }
/* Plats under innehållet och i sidfoten så att knappen inte täcker text. */
body:has(.snabb) main { padding-bottom: 4.5rem; }
body:has(.snabb) .sidfot .inre { padding-right: 4.5rem; }
@media print { .snabb { display: none; } }

/* Granska som handläggare: innehållet till vänster, bedömningen i en panel som följer med. */
.granska-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.granska-innehall { min-width: 0; }
.granskastart { border-left: 5px solid var(--accent); }
.granskasteg { margin: .4rem 0 .6rem; padding-left: 1.4rem; display: grid; gap: .3rem; }
.granskasteg a { font-weight: 550; }
.granska-rubrik { margin-top: 1.5rem; scroll-margin-top: 76px; }
#krav { scroll-margin-top: 76px; }
.bedomningspanel { position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; scroll-margin-top: 76px; }
.bedomningspanel .kort { margin: 0; }
.bedomningspanel label { margin-top: .75rem; }
.bedomningspanel .val { display: grid; gap: .35rem; margin-top: .3rem; }
.bedomningspanel .val label { margin-top: 0; display: flex; align-items: flex-start; }
.bedomningspanel .val input { margin-top: .2rem; }
.bedomningspanel textarea { min-height: 5rem; }
.bedomningspanel button { width: 100%; }
@media (max-width: 1000px) { .granska-layout { grid-template-columns: minmax(0, 1fr); } .bedomningspanel { position: static; max-height: none; overflow: visible; } }
.bedomningspanel .kravlista { border: 0; padding: 0; margin: .9rem 0 0; }
.bedomningspanel .kravlista legend { font-weight: 550; padding: 0; }
.bedomningspanel .kravlista p { margin: .2rem 0 .5rem; }
.kravhuvud, .kravrad { display: grid; grid-template-columns: minmax(0, 1fr) 2rem 2rem 2.6rem; gap: .2rem; align-items: start; }
.kravhuvud span { text-align: center; } .kravhuvud span:first-child { text-align: left; }
.kravrad { padding: .4rem 0; border-top: 1px solid var(--kant); }
.bedomningspanel .kravrad label { margin: 0; display: flex; justify-content: center; }
.bedomningspanel .kravrad input { margin-top: .15rem; }
.facitkrav li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .3rem; margin: .3rem 0; }
.facitkrav li.oense { background: var(--varning-bg); border-radius: 4px; padding: .25rem .4rem; margin-left: -.4rem; }
.facitkrav .dittsvar { color: var(--text-2); }

/* -- Användningslogg (admin): en faktarad, ett filter på en rad, kapade fördelningar, täta rader -- */
.loggfakta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: 1rem 0 .75rem; font-size: .9rem; color: var(--text-2); }
.loggfakta b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.loggfakta .taggar { gap: .3rem; }
.loggfakta a.tagg { text-decoration: none; }
.loggfakta a.tagg:hover { border-color: var(--text-2); color: var(--text); }
.tagg.vald { border-color: var(--accent); color: var(--text); background: var(--yta); }
.loggfilter { gap: .6rem 1rem; }  /* form.rad ger en rad med kontrollerna i botten; etiketterna får ingen bottenmarginal */
form.loggfilter > label { margin: 0; }
.loggfilter label:has(> input[type=checkbox]) { min-height: 2.4rem; }
.loggfilter input[type=number] { width: 5.5rem; }
.loggfilter input[type=text] { width: 13rem; }
.loggfilter button, .loggfilter > a { margin-bottom: 0; }
.loggfilter > a { display: inline-flex; align-items: center; min-height: 2.4rem; font-size: .9rem; }
.fordelning { align-items: start; }
.fordelning .kort h3 { margin-bottom: .5rem; }
.oplista, .fragelista { margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .86rem; }
.oplista { list-style: none; }
.oplista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; }
.oplista code { overflow-wrap: anywhere; }
.fragelista { padding-left: 1.3rem; }
.oplista .antal, .fragelista .antal { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.visa-fler { margin: .5rem 0 0; }
.visa-fler > summary { font-size: .84rem; color: var(--accent-mork); }
.visa-fler[open] > summary { margin-bottom: .35rem; }
.omgangar { margin: .75rem 0 0; }
.nyckel { color: var(--text-3); font-size: .8rem; }
.par { display: inline-block; margin-right: .5rem; max-width: 100%; }
.antaltext { white-space: nowrap; }
table.logg { font-size: .86rem; }
table.logg td { padding: .45rem .7rem; }
table.logg td.op code { white-space: normal; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
table.logg td.param, table.logg td.resultat { max-width: 24rem; overflow-wrap: anywhere; }
table.logg td.param .tagg, table.logg td.resultat .tagg { vertical-align: baseline; }
tr.radfel td, table tr.radfel:hover td { background: var(--fel-bg); }
details.inline { display: inline; margin: 0; }
details.inline > summary { display: inline; font-weight: 500; color: var(--accent-mork); text-decoration: underline dotted; text-underline-offset: .15em; cursor: pointer; }
details.inline[open] > summary { display: block; }
details.inline pre { margin: .3rem 0 .2rem; padding: .6rem .7rem; font-size: .76rem; white-space: pre-wrap; max-height: 16rem; min-width: 18rem; }
.inaktivruta { margin: .6rem 0; padding: .7rem .9rem; border: 1px solid var(--kant-stark); border-left: 4px solid var(--text-3); border-radius: var(--radie); background: var(--yta-2); }
.aktiveringsform { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 .8rem; }
.aktiveringsform input { flex: 1 1 14rem; min-width: 0; }

/* Ansökningsformuläret */
.formularavsnitt { border-top: 1px solid var(--kant); padding: .4rem 0; }
.formularavsnitt > summary { cursor: pointer; }
.formularfragor { list-style: none; padding: 0; margin: .3rem 0 .5rem; display: grid; gap: .25rem; }
.formularfragor li { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; padding: .25rem 0; border-bottom: 1px dashed var(--kant); }
.formularfragor li.foljd { padding-left: 1.4rem; }
.formularfragor .fnr { min-width: 2.2rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.formularfragor .ftext { flex: 1 1 18rem; min-width: 0; }