:root{
  --paper:#eceeea; --surface:#f6f7f5; --sunk:#e2e5e0;
  /* Mikael, 30 september: varför är bokstäverna gråa och inte svarta?
     Mätt i stället för gissat. --mut låg på 3,98:1 mot papperet och
     --ochre på 3,53:1. Kravet för brödtext är 4,5:1, så båda låg under.
     Det gällde metadata, noteringar och etiketter — alltså just det som
     står med minst text och därför är svårast att gissa sig till.
     Nu 5,31:1 respektive 4,97:1. Mörkt läge låg redan över kravet och
     rörs inte. --line är en linje, inte text, och har inget krav. */
  --ink:#111917; --ink2:#3b4542; --mut:#424b48; --line:#cdd2cc;
  --pine:#12433c; --pine-soft:#dfe8e3; --ochre:#8a5c12;
  --ochre-fill:#8a5c12;
  --knapp-bg:#12433c; --knapp-ink:#f4f8f6; --ochre-soft:#f2e7d2;
  --g1:#8f3320; --g2:#95521a; --g3:#7e6412; --g4:#4d6a2c; --g5:#2a6b53;
  /* Rost för text. --g1 är mätt för staplar och ligger på 6,76:1 mot
     papperet, under sjukravet för text. Den här är mörkare och klarar
     7:1 mot varje yta den står på, inklusive sin egen mjuka yta. */
  --rost:#7a2a19; --rost-soft:#f7e6e1;
  --shadow:0 1px 0 rgba(17,25,23,.06);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1413; --surface:#161d1b; --sunk:#1d2624;
    --ink:#e7ebe7; --ink2:#b3bdb8; --mut:#a3ada9; --line:#2a3431;
    --pine:#7cc0a9; --pine-soft:#17302a; --ochre:#d7a04a;
    --ochre-fill:#d7a04a;
    --knapp-bg:#7cc0a9; --knapp-ink:#0c1211; --ochre-soft:#302615;
    --g1:#c9614a; --g2:#c98b45; --g3:#bda23f; --g4:#8aad5e; --g5:#5fbb94;
    --shadow:0 1px 0 rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0f1413; --surface:#161d1b; --sunk:#1d2624;
  --ink:#e7ebe7; --ink2:#b3bdb8; --mut:#a3ada9; --line:#2a3431;
  --pine:#7cc0a9; --pine-soft:#17302a; --ochre:#d7a04a;
  --ochre-fill:#d7a04a;
  --knapp-bg:#7cc0a9; --knapp-ink:#0c1211; --ochre-soft:#302615;
  --g1:#c9614a; --g2:#c98b45; --g3:#bda23f; --g4:#8aad5e; --g5:#5fbb94;
  --rost:#f0a892; --rost-soft:#33150f;
  --shadow:0 1px 0 rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:Newsreader,Georgia,serif; font-size:17px; line-height:1.55;
  font-weight:450;
  margin:0; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px}
h1,h2,h3,.ui{font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
a{color:inherit}

/* preview strip */
.preview{background:var(--pine); color:#f2f7f4; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; font-weight:600; padding:7px 0}
:root[data-theme="dark"] .preview, :root:not([data-theme="light"]) .preview{color:#07100e}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .preview{color:#f2f7f4}}
.preview .wrap{display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap}

/* masthead */
header.top{border-bottom:1.5px solid var(--ink)}
header.top .wrap{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding-block:18px 14px}
.brand{font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:23px;
  letter-spacing:-.02em; display:flex; align-items:baseline; gap:9px}
.brand .dot{width:9px; height:9px; background:var(--ochre); border-radius:50%;
  display:inline-block; transform:translateY(-1px)}
.brand small{font-weight:500; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mut)}
/* Menyn radbröt inuti varje post när den växte till elva rubriker —
   "Sök din / kommun" på två rader, "För / press" på två. En menypost
   bryts aldrig; det är raden som bryts, inte orden. */
nav.top-nav{display:flex; flex-wrap:wrap; gap:9px 20px;
  font-family:"Familjen Grotesk",sans-serif; font-size:14px;
  font-weight:500; align-items:baseline}
nav.top-nav a{text-decoration:none; color:var(--ink2); padding-bottom:2px;
  border-bottom:1.5px solid transparent; white-space:nowrap}
nav.top-nav a:hover{border-bottom-color:var(--ochre); color:var(--ink)}

/* hero */
.hero{padding-block:44px 30px; border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:44px; align-items:start}
.eyebrow{font-family:"Familjen Grotesk",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ochre);
  display:flex; align-items:center; gap:10px; margin-bottom:16px}
.eyebrow .bar{height:1px; flex:1; background:var(--line)}
h1{font-size:clamp(38px,6.2vw,66px); line-height:1.02; letter-spacing:-.035em;
  font-weight:700; margin:0 0 18px; text-wrap:balance}
.standfirst{font-size:20.5px; line-height:1.5; color:var(--ink);
  max-width:34em; margin:0 0 22px; font-weight:400}
.byline{font-size:13px; color:var(--mut); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.byline b{color:var(--ink2); font-weight:500}

.figure{background:var(--surface); border:1px solid var(--line); padding:22px 22px 18px}
.figure .n{font-family:"Familjen Grotesk",sans-serif; font-size:76px; line-height:.9;
  font-weight:700; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
/* Hjältetalet är en rubrik, inte en siffra. Mikael 30 september: "150
   säger ingenting, du kan lika gärna skriva 132 eller 119." Han har
   rätt — talet betyder något först tillsammans med av vad och av vilka,
   och då måste hela meningen bära rubrikens grad. Siffran är störst,
   men "av 251" och påståendet står i samma typsnitt och samma bläck,
   inte i millimeterstil under. */
.hero-tal{margin:0; font-family:"Familjen Grotesk",sans-serif;
  font-weight:700; letter-spacing:-.045em; line-height:.92; color:var(--ink);
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline;
  gap:12px; flex-wrap:wrap}
.hero-tal b{font-size:clamp(64px,8.4vw,96px); font-weight:700}
.hero-tal span{font-size:clamp(26px,3.4vw,38px); font-weight:600;
  color:var(--ink2)}
.hero-pastaende{margin:8px 0 0; font-family:"Familjen Grotesk",sans-serif;
  font-size:clamp(21px,2.5vw,28px); font-weight:600; line-height:1.2;
  letter-spacing:-.015em; color:var(--ink); max-width:15em}
.figure .cap{font-size:14px; color:var(--ink2); margin-top:14px;
  line-height:1.45; padding-top:12px; border-top:1px solid var(--line)}
.figure hr{border:0; border-top:1px solid var(--line); margin:16px 0}
.dist{display:flex; align-items:flex-end; gap:5px; height:96px; margin-top:4px}
.dist div{flex:1; background:var(--sunk); position:relative; display:flex;
  align-items:flex-end; justify-content:center}
.dist div span{position:absolute; bottom:calc(100% + 3px); font-size:12px; color:var(--mut)}
.dist div b{font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500;
  color:#fff; padding-bottom:3px; mix-blend-mode:normal}
.scale{display:flex; gap:5px; margin-top:6px}
.scale span{flex:1; text-align:center; font-family:"JetBrains Mono",monospace;
  font-size:12.5px; color:var(--mut)}

/* index of articles */
section{padding-block:38px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  flex-wrap:wrap; border-bottom:1.5px solid var(--ink); padding-bottom:10px; margin-bottom:6px}
.sec-head h2{font-size:26px; letter-spacing:-.02em; margin:0; font-weight:600}
.sec-head p{margin:0; font-size:14px; color:var(--mut); max-width:38em}

.idx{display:flex; flex-direction:column}
/* Stommen är densamma vare sig delen är ute eller inte. Till 29 september
   fick bara <a> rutnätet, och de väntande raderna föll utanför det: ingen
   skiljelinje, ingen radhöjd, numret på egen rad. Skillnaden ska ligga i
   statusen, aldrig i att raden ser trasig ut. */
.idx a, .idx .ejklar{display:grid; grid-template-columns:52px minmax(0,1fr); gap:18px;
  padding-block:15px; border-bottom:1px solid var(--line); text-decoration:none;
  align-items:baseline}
.idx a:hover{background:var(--surface)}
.idx .num{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--mut);
  font-variant-numeric:tabular-nums; padding-top:4px}
.idx .kick{font-family:"Familjen Grotesk",sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--pine); display:block; margin-bottom:5px}
.idx h3{font-family:"Familjen Grotesk",sans-serif; font-size:23px; line-height:1.18;
  letter-spacing:-.022em; margin:0 0 6px; font-weight:600; text-wrap:balance}
.idx p{margin:0; font-size:17px; color:var(--ink); line-height:1.5;
  max-width:46em; font-weight:400}
.tag{font-family:"Familjen Grotesk",sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--mut); text-align:right;
  padding-top:4px; white-space:nowrap}
.tag.live{color:var(--pine)}

/* filter + spår */
.filters{display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  flex-wrap:wrap; padding-block:16px 4px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-family:"Familjen Grotesk",sans-serif; font-size:13.5px; font-weight:500;
  padding:7px 14px; border:1.5px solid var(--line); background:var(--paper);
  color:var(--ink2); cursor:pointer; border-radius:999px; line-height:1.2}
.chip:hover{border-color:var(--ink2); color:var(--ink)}
.chip.on{background:var(--pine); border-color:var(--pine); color:var(--paper)}
.chip.kortchip{margin-left:6px}
.chip:focus-visible{outline:2.5px solid var(--ochre); outline-offset:2px}
.count{margin:0; font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--mut);
  font-variant-numeric:tabular-nums}

.spar{margin-top:30px}
.spar-head{display:grid; grid-template-columns:52px minmax(0,1fr); gap:18px;
  align-items:baseline; border-bottom:1.5px solid var(--ink); padding-bottom:9px}
.spar-id{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ochre);
  letter-spacing:.03em}
.spar-head h3{font-family:"Familjen Grotesk",sans-serif; font-size:21px; font-weight:600;
  letter-spacing:-.02em; margin:0; grid-column:2}
.spar-head p{grid-column:2; margin:4px 0 0; font-size:16px;
  color:var(--ink2); font-weight:400; max-width:46em}
.idx .meta{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:8px}
.fmt{font-family:"Familjen Grotesk",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--mut);
  border:1px solid var(--line); padding:2px 7px}
.fmt.h{color:var(--paper); background:var(--pine); border-color:var(--pine)}
.fmt.d{color:var(--ink); border-color:var(--ink2)}
.fmt.a{color:var(--ochre); border-color:var(--ochre)}
.tid,.vag{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--mut)}
.vag{opacity:.75}
.vilande{font-family:"Familjen Grotesk",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--g2)}

/* sök */
.sok{background:var(--surface); border:1px solid var(--line); padding:26px}
.sok-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:30px; align-items:start}
label.lbl{font-family:"Familjen Grotesk",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:9px}
input[type=search]{width:100%; font-family:"Familjen Grotesk",sans-serif; font-size:19px;
  padding:12px 14px; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);
  border-radius:0}
input[type=search]:focus{outline:2.5px solid var(--ochre); outline-offset:2px}
.hits{list-style:none; margin:10px 0 0; padding:0; max-height:232px; overflow:auto;
  border:1px solid var(--line); background:var(--paper)}
.hits:empty{display:none}
.hits li{border-bottom:1px solid var(--line)}
.hits li:last-child{border-bottom:0}
.hits button{width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:10px 13px; font-family:"Familjen Grotesk",sans-serif; font-size:15px; color:var(--ink);
  display:flex; justify-content:space-between; gap:12px; align-items:center}
.hits button:hover,.hits button:focus-visible{background:var(--pine-soft); outline:none}
.hits .l{color:var(--mut); font-size:12.5px}

.kort{border:1.5px solid var(--ink); background:var(--paper); padding:20px 22px}
.kort .top{display:flex; justify-content:space-between; align-items:flex-start; gap:18px}
.kort h3{font-size:30px; letter-spacing:-.03em; margin:0; font-weight:700; line-height:1.05}
.kort .lan{font-size:13.5px; color:var(--mut); margin-top:4px}
.betyg{font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:44px;
  line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; text-align:right}
.betyg small{display:block; font-size:12.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut); margin-top:5px}
.rows{margin-top:18px; border-top:1px solid var(--line)}
.row{display:flex; justify-content:space-between; gap:14px; padding-block:9px;
  border-bottom:1px solid var(--line); font-size:15px}
.row .k{color:var(--mut)}
.row .v{font-family:"JetBrains Mono",monospace; font-size:14px; text-align:right;
  font-variant-numeric:tabular-nums}
.hint{font-size:14px; color:var(--mut); margin:14px 0 0; line-height:1.45}
/* Öppna-knappen. Mikael 30 september: i sökrutan är det enda läsaren
   behöver kunna göra att komma vidare till kommunens hela bedömning.
   Länken låg som en rad brödtext under en statusstege som sade mindre än
   poängen. Stegen är borta; länken är nu det största på kortet. */
.sok-not{font-size:14px; color:var(--ink2); margin:14px 0 0; line-height:1.5}
.sok-not a{color:var(--pine)}

/* Enkätblocket på sökkortet. Samma två kolumner som kommunsidan, men
   ensam — här finns ingen kommunkolumn att ställa den bredvid. */
.enkkol{margin-top:18px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); overflow:hidden; padding:0 0 16px}
.enkkol > *:not(h3){margin-inline:18px}
.enkkol h3{margin:0 0 14px; font-size:16px; padding:11px 18px;
  font-family:"Familjen Grotesk",sans-serif; font-weight:600;
  background:var(--ochre-fill); color:#fbf6ee}
.enkkol p{font-size:15px; line-height:1.5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .enkkol h3{color:#14100a}
}
:root[data-theme="dark"] .enkkol h3{color:#14100a}

/* "Det kommunen inte kan visa" och "Vad kommunen lämnade" — de två
   avsnitt ur kommunkortet som sidan saknade till den 30 september. */
.ruta.fattas{border-left:4px solid var(--ochre); background:var(--surface)}
.ruta.fattas p{font-size:17px; line-height:1.5; margin:0 0 12px}
.ruta.fattas p.sist{font-size:15.5px; color:var(--ink2); margin:0;
  padding-top:12px; border-top:1px solid var(--line)}
.ruta.handlingar p{margin:0 0 10px}
.ruta.handlingar blockquote{margin:12px 0 0; padding-left:14px;
  border-left:3px solid var(--pine); font-size:16px; line-height:1.5}
.ruta.handlingar blockquote p{margin:0; font-style:italic}

.samma{font-family:"Familjen Grotesk",sans-serif; font-size:12.5px;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink2); border:1px dashed var(--line); border-radius:3px;
  padding:3px 8px}

/* Enkätens fördelning. Alternativet, stapeln, andelen och antalet — i den
   ordning svarsalternativen själva står, aldrig sorterade efter storlek,
   så att två frågor går att lägga bredvid varandra. */
.svarstab{margin:6px 0 30px; border-top:1.5px solid var(--ink)}
.svarsrad{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:16px; align-items:center; padding:12px 0;
  border-bottom:1px solid var(--line)}
.svaralt{font-size:16px; color:var(--ink); line-height:1.35}
.svarstapel{height:16px; border-radius:3px; background:var(--sunk);
  overflow:hidden}
.svarstapel span{display:block; height:100%; background:var(--pine);
  border-radius:0 3px 3px 0}
/* Ett nej bär rostfärgen, som i pedagogenkätens slutrapport. Ja-svaren
   bär granen, "Vet ej" grått. Färgen är en upprepning av ordet till
   vänster, aldrig den enda bäraren. */
.svarstapel.nej span{background:var(--g1)}
.svarstapel.vet span{background:var(--mut)}

/* Tre nyckeltal överst, som rapportens rutor. */
.enknyckel{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px; margin:6px 0 28px}
.enknyck{background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:18px 18px 16px}
.enknyckt{margin:0; font-family:"Familjen Grotesk",sans-serif;
  font-size:42px; font-weight:700; line-height:1; letter-spacing:-.03em;
  color:var(--g1)}
.enknyckb{margin:8px 0 0; font-size:15px; line-height:1.4; color:var(--ink)}
.enknyckr{margin:9px 0 0; padding-top:9px;
  border-top:1px solid var(--line); font-size:13px;
  line-height:1.4; color:var(--ink2)}
.enknyckn{margin:7px 0 0; font-family:"Familjen Grotesk",sans-serif;
  font-size:13px; color:var(--ink2); font-variant-numeric:tabular-nums}
.enkfraga{font-size:19px; margin:26px 0 0}
.svartal{font-family:"Familjen Grotesk",sans-serif; font-size:14px;
  color:var(--ink2); white-space:nowrap; text-align:right;
  font-variant-numeric:tabular-nums}
.svartal b{font-size:19px; color:var(--ink); margin-inline-end:7px}
@media (max-width:640px){
  .svarsrad{grid-template-columns:minmax(0,1fr) auto; gap:8px 14px}
  .svarstapel{grid-column:1 / -1; order:3}
}

/* Kommunens svar på de sju frågorna. Egen tabell — nummer, frågans
   rubrik, och svaret ordagrant. Ett nej får samma tomma mark som en
   punkt kommunen inte kan visa; ett svar med innehåll får grönt. */
.fragtab{margin:6px 0 30px; border-top:1.5px solid var(--ink)}
.fragrad{display:grid; grid-template-columns:30px minmax(0,1.15fr) minmax(0,1.3fr);
  gap:16px; padding:14px 14px 14px 12px; align-items:start;
  border-bottom:1px solid var(--line); border-left:4px solid transparent}
/* Frågeradens färg följer sedan 6 oktober frågekartan och registret:
   grön om kommunen tagit minst en av de punkter frågan prövas mot, rost
   om den inte tagit någon. Rosten saknade regel helt fram till nu — bara
   de gröna raderna var markerade, och de var dessutom satta för hand
   efter om svaret innehöll något. Ett kort med 0 av 10 kunde därför ha
   gröna rader. Samma gran och samma rost som punkttabellen använder, så
   att de två tabellerna på samma sida talar samma språk. */
.fragrad.ja{border-left-color:var(--pine); background:var(--pine-soft)}
.fragrad.nej{border-left-color:var(--g1); background:var(--ochre-soft)}
.fnr{font-family:"JetBrains Mono",monospace; font-size:14px;
  color:var(--ink2); padding-top:2px}
.frub{min-width:0}
.fkick{display:block; font-family:"Familjen Grotesk",sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ochre); margin-bottom:6px}
.ffraga{display:block; font-size:15.5px; line-height:1.45; color:var(--ink)}
.fsvar{font-size:16px; line-height:1.5; color:var(--ink)}
@media (max-width:760px){
  .fragrad{grid-template-columns:26px minmax(0,1fr); gap:9px}
  .fsvar{grid-column:1 / -1; padding-left:35px}
}

/* "Orden, och vad de betyder" — kortets genomgång. */
/* En kommun som hört av sig efter publiceringen. Grön kant, inte rost:
   det här är kommunen som gjort något, och den enda färgen på sidan som
   betyder "något har hänt här" ska inte läsas som en anmärkning. */
.ruta.rattelse{border-left:4px solid var(--pine); background:var(--pine-soft)}
.ruta.rattelse p{font-size:16.5px; line-height:1.5; margin:0 0 10px}
.ruta.rattelse p.liten{font-size:14.5px; color:var(--ink2); margin:12px 0 0;
  padding-top:10px; border-top:1px solid var(--line)}
/* Etiketten. Samma brist som .ruta.underlag hade: rutan var stilad, men
   ETIKETTEN saknade regel och renderades som lös brödtext i serif. Tredje
   gången samma fel — en kontroll fångar det numera. */
.ruta.rattelse p.kl{
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--pine); margin:0 0 10px;
}
/* Rättelserutan bär sedan 6 oktober hela spåret: vilka handlingar som kom
   in, hur var och en lästes, och vad var och en prövades mot punkt för
   punkt. Skälet är att en kommun som skickat in material ska kunna följa
   varje mening vi skriver om den tillbaka till sin egen handling. Det
   gröna strecket till vänster om en punkt betyder att punkten gav poäng;
   det grå att den inte gjorde det. Färgen är aldrig den enda signalen —
   det står också utskrivet i rubriken. */
.ruta.rattelse p.sparrad{font-size:14.5px; color:var(--ink2); margin:0 0 14px}
.ruta.rattelse p.kl2{
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut); margin:24px 0 10px}
.ruta.rattelse ul.handlingslista{margin:0; padding-left:20px}
.ruta.rattelse ul.handlingslista li{font-size:16.5px; line-height:1.5;
  margin:0 0 14px}
.ruta.rattelse ul.handlingslista li:last-child{margin-bottom:0}
.ruta.rattelse .handlingslista .liten{font-size:14.5px; color:var(--ink2)}
.ruta.rattelse .provad{margin:0 0 18px; padding-left:14px;
  border-left:3px solid var(--line)}
.ruta.rattelse .provad.gav{border-left-color:var(--pine)}
.ruta.rattelse .provad p{margin:0 0 8px}
.ruta.rattelse .provad p:last-child{margin:0}
.ruta.rattelse blockquote.provcitat{margin:0 0 10px; padding:0}
.ruta.rattelse blockquote.provcitat p{margin:0; font-size:16px;
  line-height:1.5; font-style:italic}
/* Etiketterna i ordrutan och i hämta-rutan. Hittade av kontrollen
   "etiketter i rutor utan egen regel" den 6 oktober — samma fel som
   .ruta.underlag hade, på två ställen till. */
.ruta.orden .kl{
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--ochre); margin:0 0 10px;
}
.ruta.ratt .kl{
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--mut); margin:0 0 8px;
}
.ruta.ratt p{margin:0 0 8px; font-size:15.5px; line-height:1.5}
.ruta.ratt p:last-child{margin-bottom:0}
.ruta.orden{border-left:4px solid var(--ochre); background:var(--surface)}
.ruta.orden p{font-size:16.5px; line-height:1.55; margin:0 0 14px}
.ruta.orden p:last-child{margin:0}

/* Pedagogernas egna ord, som i slutrapporten: varje svar i en egen ruta. */
.egnaord{margin:14px 0 26px}
.egnaord blockquote{margin:0 0 10px; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:16px 18px}
.egnaord blockquote p{margin:0; font-size:16px; line-height:1.55;
  color:var(--ink)}

/* Kommunens svar står ensamt sedan pedagogsvaren flyttade ut i full
   bredd. Rutan tar hela raden; texten i den håller sin egen läsbredd. */
.kolrad{margin:0 0 30px}
.kolrad .kol{border:1px solid var(--line); border-radius:8px;
  background:var(--surface); overflow:hidden; padding:0 0 18px}
.kolrad .kol > *:not(h3){margin-inline:22px; max-width:46em}
.kolrad .kol h3{margin:0 0 14px; font-size:17px; padding:12px 22px;
  color:var(--knapp-ink); background:var(--knapp-bg)}

.enkunder{margin:-4px 0 20px; font-size:16px; line-height:1.5;
  color:var(--ink2); max-width:46em}
.svarriks{display:block; font-size:13px; font-weight:500; color:var(--mut);
  margin-top:3px}

.oppnak{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:10px 16px; margin-top:18px; padding:16px 18px; text-decoration:none;
  background:var(--knapp-bg); color:var(--knapp-ink); border:0}
.oppnak-t{font-family:"Familjen Grotesk",sans-serif; font-size:19px;
  font-weight:600; line-height:1.25; grid-column:1}
.oppnak-u{font-size:14px; line-height:1.4; grid-column:1; opacity:.82}
.oppnak-p{grid-column:2; grid-row:1 / span 2; font-size:26px; line-height:1}
.oppnak:hover .oppnak-p{transform:translateX(3px)}
.oppnak-p{transition:transform .12s ease}
@media (max-width:520px){.oppnak-t{font-size:17.5px}}

/* anatomi */
.anat{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0;
  border:1px solid var(--line); background:var(--surface)}
.anat > div{padding:20px 18px; border-right:1px solid var(--line)}
.anat > div:last-child{border-right:0}
.anat .st{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ochre);
  letter-spacing:.06em}
.anat h4{font-family:"Familjen Grotesk",sans-serif; font-size:17px; margin:8px 0 6px;
  font-weight:600; letter-spacing:-.01em}
.anat p{margin:0; font-size:15.5px; color:var(--ink2); line-height:1.5;
  font-weight:400}

.futures{margin-top:22px; border-top:1px solid var(--line)}
.futures .f{display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:18px;
  padding-block:14px; border-bottom:1px solid var(--line); align-items:baseline}
.futures .f .id{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--mut)}
.futures .f b{font-family:"Familjen Grotesk",sans-serif; font-size:17px; font-weight:500}
.futures .f .s{font-family:"Familjen Grotesk",sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}

.note{border-left:3px solid var(--ochre); padding:2px 0 2px 18px; margin:26px 0 0;
  font-size:16.5px; color:var(--ink); max-width:44em; font-weight:400}

/* Skälet till att granskningen finns. Står i hero, under ingressen, och
   ska läsas som författarens egen röst — inte som en ruta man kan hoppa
   över. Därför ingen bakgrund, bara en smal linje och mörkare text. */
.skalet{margin:22px 0 22px; padding-left:14px; border-left:2px solid var(--ochre);
  font-size:16px; line-height:1.6; color:var(--ink); max-width:34em}
@media (max-width:620px){ .skalet{font-size:15.5px; padding-left:12px} }

/* Upplägget, tidigt. En rad, inte ett block — den ska läsas i förbifarten
   av någon som redan bestämt sig för att inte läsa. */
.stegrad{margin:30px 0 4px; padding:13px 16px; border-radius:3px;
  background:var(--sunk); border-left:3px solid var(--ochre);
  font-size:14.5px; line-height:1.55; color:var(--ink2)}
.stegrad b{color:var(--ink); font-weight:600}
.stegrad a{color:var(--pine); white-space:nowrap; margin-left:.35em}
@media (max-width:620px){ .stegrad{font-size:14px; padding:12px 13px} }

footer{border-top:1.5px solid var(--ink); margin-top:20px; padding-block:26px 44px;
  font-size:14px; color:var(--mut)}
footer .cols{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
footer b{font-family:"Familjen Grotesk",sans-serif; color:var(--ink2); font-weight:600;
  font-size:13px; letter-spacing:.05em; text-transform:uppercase; display:block; margin-bottom:7px}
footer p{margin:0 0 5px; max-width:30em}

@media (max-width:860px){
  .hero-grid,.sok-grid{grid-template-columns:1fr; gap:28px}
  .idx a, .idx .ejklar{grid-template-columns:34px minmax(0,1fr); }
  .idx .tag{grid-column:2; text-align:left; padding-top:8px}
  .anat > div{border-right:0; border-bottom:1px solid var(--line)}
  .anat > div:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* Öppna-märket och de delar som ännu inte har någon text.
   Till 28 september länkade varje rubrik till #sok och ingenting
   öppnades. Nu länkar den som har en färdig text till den, och den som
   inte har någon märks ut i stället för att ge en död länk. */
/* Ute nu, eller inte.
   Till 29 september bar bara de VÄNTANDE delarna en statusetikett. De
   publicerade hade ingenting att jämföra med — bara en tunn Öppna-ram —
   och ögat fick därför leta efter en skillnad som inte fanns uttalad.
   Nu bär varje rad en status. Systemet på hela sidan: en FYLLD ruta är
   en status, en RAM är metadata eller en knapp. Grönt betyder att den
   går att läsa nu, ockra att den kommer ett visst datum, och bara den
   gröna raden har en linje i kanten. Tre signaler i stället för en, så
   att det håller även för den som inte skiljer färgerna åt. */
.ute{display:inline-block;font-family:"Familjen Grotesk",sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--paper);background:var(--pine);border:1px solid var(--pine);
  border-radius:4px;padding:2px 8px;margin-inline-end:7px}
.oppna{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pine);border:1px solid var(--pine);
  border-radius:4px;padding:1px 6px;margin-inline-end:6px}
/* Datumet är information, inte en brasklapp.
   Mikael den 29 september: rutan ska fånga ögat, så att läsaren blir
   nyfiken på när delen kommer i stället för att bara konstatera att den
   inte finns. Dämpningen jag lade in en timme tidigare tog med sig
   datumet i fallet. Nu bär den väntande delen en fylld ruta i egen varm
   färg — ockra mot tallgrönt — i stället för en streckad grå ram. Ordet
   "Publiceras" är litet, datumet stort: det är datumet som ska läsas,
   inte verbet. Ockran är mörkare än --ochre för att texten ska hålla
   kontrastkravet mot pappret; i mörkt läge vänder den. */
.kommer{display:inline-flex; align-items:baseline; gap:6px;
  font-family:"Familjen Grotesk",sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--paper);
  background:var(--ochre-fill); border:1px solid var(--ochre-fill);
  border-radius:4px; padding:3px 10px; margin-inline-end:6px}
.kommer b{font-size:12.5px; font-weight:700; letter-spacing:.02em}

/* "Internt underlag" är inget datum och ska inte lysa. Den delen kommer
   aldrig — den ligger i listan för att vi inte döljer att den finns. */
.ejannu{display:inline-block;font-size:12.5px;color:var(--mut);
  border:1px dashed var(--line);border-radius:4px;padding:1px 6px;
  margin-inline-end:6px}

/* Raden som går att läsa nu: grön kantlinje och full svärta i rubriken. */
.idx a.ute-rad{border-left:3px solid var(--pine); padding-left:13px;
  background:var(--surface)}
.idx a.ute-rad h3{color:var(--ink)}
.idx a.ute-rad:hover{background:var(--sunk)}

/* Raden som ännu inte finns: nedtonad i texten, men aldrig i datumet.
   Genomskinlighet över hela raden var fel grepp — den drog ner just det
   som skulle synas. Rubriken och ingressen kliver tillbaka ett steg,
   statusrutan står kvar i full styrka. */
.idx .ejklar{cursor:default; border-left:3px solid transparent;
  padding-left:13px}
.idx .ejklar h3{color:var(--ink2)}
.idx .ejklar p{color:var(--mut)}

/* ---------------------------------------------------------- figurer
   Diagrammen ritas som inline-SVG av figur.py, ur registret. Ramen
   här ska bara ge dem luft och en yta att stå på. */
.figur{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:22px 24px 18px; margin:18px 0 10px; overflow-x:auto;
}
.figur svg{display:block; min-width:600px}
@media (max-width:700px){
  .figur{padding:16px 14px 12px}
}
#kedjan{margin-top:38px}

/* ------------------------------------------------- varför vi frågar
   Skälet under varje punkt på skalsidan. Det ska läsas som en
   förklaring, inte som en fortsättning på rubriken. */
.punkt .varfor{
  margin:8px 0 0; padding-top:9px; border-top:1px solid var(--line);
  font-size:15px; line-height:1.5; color:var(--ink2);
}
.punkt .vk{
  display:block; font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--mut); margin-bottom:4px;
}
.punkt.ja .vk{color:var(--pine)}
.punkt.nej .vk{color:var(--ochre)}

/* ------------------------------------------------- studsrutan
   De 32 kommuner som aldrig fick faktakontrollen. Ska synas, inte
   gömmas — F påstår att den står här. */
.ruta.studs{
  border:1px solid var(--ochre); background:var(--surface);
  border-left:4px solid var(--ochre); border-radius:5px;
  padding:16px 18px; margin:18px 0 6px;
}
.ruta.studs .kl{
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--ochre); margin:0 0 8px;
}
.ruta.studs p{margin:0 0 8px; font-size:15.5px; line-height:1.5}
.ruta.studs p:last-child{margin-bottom:0}

/* Etiketten i rutan om underlaget. Själva rutan var stilad hela tiden av
   .ruta längre ner plus ockraöverskrivningen — det var ETIKETTEN som
   saknade regel, och den renderades därför som lös brödtext i serif på
   156 kommunsidor. .ruta.studs hade sin, den här hade ingen. Rutans egna
   mått och färger sätts av reglerna längre ner och upprepas inte här. */
.ruta.underlag .kl{
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--mut); margin:0 0 8px;
}
.ruta.underlag p{margin:0 0 8px; font-size:15.5px; line-height:1.5}
.ruta.underlag p:last-child{margin-bottom:0}

/* Pedagogsiffrorna på kommunsidan. Först återanvände jag .rad2, som bara
   finns i PDF-mallen — på sajten var klassen ostilad och talen sprang
   ihop till "15 av 2658 %". Egen regel, egna namn. */
.enkrad{display:flex; gap:14px; align-items:baseline; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:16px}
.enkrad:last-of-type{border-bottom:0}
.enkrad .n{flex:0 0 86px; font-family:"JetBrains Mono",monospace;
  font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums}
.enkrad .p{flex:0 0 52px; font-weight:700; color:var(--ink);
  font-family:"Familjen Grotesk",sans-serif; font-size:15px}
.enkrad .t{flex:1; color:var(--ink2); line-height:1.45}
@media (max-width:620px){
  .enkrad{flex-wrap:wrap; gap:6px 12px}
  .enkrad .t{flex:0 0 100%}
}

/* Kommunens egna ord. De ska se ut som tal, inte som bevisning: större
   grad än brödtexten, grön kantlinje, och källan under i litet. */
.egna{margin:10px 0 22px}
.ordagrant{margin:0 0 14px; padding:2px 0 2px 18px;
  border-left:3px solid var(--pine); font-size:17.5px; line-height:1.5;
  color:var(--ink)}
.ordagrant cite{display:block; margin-top:5px; font-style:normal;
  font-family:"Familjen Grotesk",sans-serif; font-size:12px;
  letter-spacing:.04em; color:var(--mut)}

/* Översättningen överst på kommunsidan. Den ska läsas, inte skummas:
   större grad, luft, och en tydlig avslutande rad om vad det betyder. */
.oversatt{margin:22px 0 30px; padding:20px 24px; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--pine);
  border-radius:6px}
.oversatt p{margin:0 0 10px; font-size:16.5px; line-height:1.55;
  color:var(--ink2); max-width:44em}
.oversatt p:last-child{margin-bottom:0}
.oversatt .stort{font-size:20px; line-height:1.4; color:var(--ink);
  font-weight:400; letter-spacing:-.01em}
.oversatt .foljd{padding-top:12px; border-top:1px solid var(--line);
  color:var(--ink)}

/* Kommunkortets topp: namn och fakta till vänster, poängen i egen ruta. */
/* Toppen, omgjord natten till den 30 september. Mikael: "Uddevalla står
   med feta bokstäver, men själva resultatet står med jättesmå bokstäver
   — det är ju inte för att tala om att Uddevalla finns som vi
   publicerar." Namnet var 66 px och resultatet 34. Nu är det tvärtom:
   namnet orienterar, talet är nyheten och får bära sidan. */
.komtopp{display:block; margin:0 0 10px}
.komtitel{min-width:0; margin-bottom:18px}
.komtitel h1{margin:0 0 5px; font-size:clamp(30px,4vw,40px)}
.kommeta{margin:0; font-size:14.5px; color:var(--mut); line-height:1.5}





/* Kommunens starkaste egna mening som ingress. */
.ingresscitat{margin:22px 0 26px; padding:16px 20px;
  background:var(--pine-soft); border-left:4px solid var(--pine);
  border-radius:0 6px 6px 0}
.ingresscitat p{margin:0; font-size:19px; line-height:1.45; color:var(--ink)}
.ingresscitat cite{display:block; margin-top:10px; font-style:normal;
  font-family:"Familjen Grotesk",sans-serif; font-size:14px;
  color:var(--ink2)}

/* Två kolumner: kommunen och pedagogerna bredvid varandra. */
.tvakol.ensam{grid-template-columns:minmax(0,1fr)}
.tvakol{display:grid; grid-template-columns:1fr 1fr; gap:22px;
  margin:0 0 30px; align-items:start}
.tvakol .kol{border:1px solid var(--line); border-radius:8px;
  padding:0 0 18px; background:var(--surface); overflow:hidden}
.tvakol .kol > *:not(h3){margin-inline:20px}
/* Två röster, två färger. Mikael 30 september: sidan var bara grön och
   grå. Kommunens egen röst bär granen, pedagogernas bär ockran — samma
   två färger som citatet och enkätstaplarna redan använder, så att
   läsaren ser vems ord hon läser innan hon läst rubriken. */
.tvakol .kol h3{margin:0 0 14px; font-size:17px; padding:12px 20px;
  color:var(--knapp-ink)}
.tvakol .kol-k h3{background:var(--knapp-bg)}
.tvakol .kol-p h3{background:var(--ochre-fill); color:#fbf6ee}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tvakol .kol-p h3{color:#14100a}
}
:root[data-theme="dark"] .tvakol .kol-p h3{color:#14100a}




@media (max-width:760px){
  .tvakol{grid-template-columns:1fr}
}

/* De tio punkterna som tabell, inte som textblock. Nummer och namn till
   vänster, skälet till höger, en tunn linje mellan raderna. Läsaren ska
   kunna skumma kolumnen med namn och stanna där hon vill veta mer. */
.punkttab{margin:6px 0 26px; border-top:1.5px solid var(--ink)}
.punktrad{display:grid; grid-template-columns:30px 22px minmax(0,1fr) minmax(0,1.45fr);
  gap:12px; padding:14px 14px 14px 12px; border-bottom:1px solid var(--line);
  align-items:start; border-left:4px solid transparent}
/* En tagen punkt är det ovanliga i den här granskningen — sju kommuner av
   tio tar högst en. Raden som kommunen kan visa får därför bära färgen och
   hela ytan; de andra står tomma. Ordet "Kan visa" står kvar i raden, så
   att den som inte skiljer färgerna åt läser samma sak. */
.punktrad.rad-ja{border-left-color:var(--pine); background:var(--pine-soft)}
/* Mikael 30 september: det negativa framgår inte. Han har rätt — "Kan
   inte visa" stod i minsta graden på hela raden, i grå text, bredvid en
   tom ring. Det som är granskningens fynd låg som en fotnot.
   Raden bär nu en rostfärgad kant, så att en kommun som inte kan visa
   någonting syns som en obruten stapel längs hela sidan. Ordet står
   kvar och bär fortfarande betydelsen; färgen är ett tillägg. */
.punktrad.rad-nej{background:none; border-left-color:var(--rost)}
.punktrad .pnr{font-family:"JetBrains Mono",monospace; font-size:14px;
  color:var(--mut); padding-top:2px}



.punktrad .pnamn{font-family:"Familjen Grotesk",sans-serif; font-weight:600;
  font-size:15.5px; line-height:1.35; color:var(--ink)}
.punktrad .pnamn .forf{display:inline-block; margin-top:6px; font-size:12.5px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ochre); background:var(--ochre-soft); border-radius:3px;
  padding:3px 7px}
.punktrad .pskal{font-size:15.5px; line-height:1.5; color:var(--ink2)}
.punktrad .pskal blockquote{margin:8px 0 0; padding-left:12px;
  border-left:2px solid var(--pine); font-size:15px; color:var(--ink)}
.punktrad .pskal .mots{margin:8px 0 0; font-size:14.5px; color:var(--ink)}
@media (max-width:760px){
  .punktrad{grid-template-columns:26px 20px minmax(0,1fr); gap:9px}
  .punktrad .pskal{grid-column:1 / -1; padding-left:55px}
}

/* ---------------------------------------------------------- kommunkortet
   Mikael 30 september: "massa grönt och massa svart text". Han har rätt.
   Sidan var en textmassa med enhetlig grad och en enda accentfärg.
   Omgjord efter tre regler ur dataviz-disciplinen:

   1. Ett tal som ska förstås direkt ritas, inte skrivs. Poängen är därför
      en mätare med tio segment — formen syns innan siffran är läst.
   2. Text bär aldrig datafärgen. Siffror och etiketter står i bläck;
      färgen sitter i märket bredvid.
   3. Status bärs aldrig av färg och symbol ensamt. Ordet står med.        */

.poangruta{display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:10px 26px; align-items:center; border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line); padding:20px 0 22px}
.poangtal{grid-row:1 / span 2; margin:0;
  font-family:"Familjen Grotesk",sans-serif; font-size:19px;
  color:var(--ink); line-height:1.15; max-width:5.5em}
.poangtal b{display:block; font-size:clamp(76px,11vw,108px); line-height:.88;
  font-weight:700; color:var(--fyll,var(--ink));
  letter-spacing:-.04em; margin:0 0 2px}
.matare{display:flex; gap:4px; margin:0; grid-column:2}
.matare .seg{flex:1 1 0; min-width:12px; height:44px; border-radius:4px;
  background:var(--sunk); border:1px solid var(--line)}
.matare .seg.fylld{background:var(--fyll,var(--pine));
  border-color:var(--fyll,var(--pine))}
.poangetikett{grid-column:2; margin:0; font-size:15.5px; color:var(--ink2);
  align-self:start;
  max-width:34em}

/* Pedagogernas svar, som på kommunkortet: talet först och stort. */
.enkstapel{margin:0 0 20px}
.enkstort{margin:0; font-family:"Familjen Grotesk",sans-serif;
  font-size:38px; font-weight:700; line-height:1; letter-spacing:-.03em;
  color:var(--ochre)}
.enkstort span{font-size:26px; font-weight:600}
.enktext{margin:5px 0 0; font-size:15.5px; line-height:1.4;
  color:var(--ink2)}
.enktext b{color:var(--ochre); font-family:"Familjen Grotesk",sans-serif;
  font-weight:700; margin-inline-end:3px}

/* Status i punkttabellen: prick plus ord. */
.punktrad{grid-template-columns:26px 132px minmax(0,1fr) minmax(0,1.4fr)}
.punktrad .pmark{display:flex; align-items:flex-start; gap:7px; padding-top:1px}
.punktrad .pmark .prick{width:11px; height:11px; border-radius:50%;
  flex:0 0 auto; border:1.5px solid var(--line); background:transparent;
  margin-top:5px}
.punktrad .pmark.ja .prick{background:var(--pine); border-color:var(--pine)}
/* Märket för en punkt kommunen inte kan visa är fyllt, inte tomt. En tom
   ring läses som "inget svar" — det här är ett svar. */
.punktrad .pmark.nej .prick{background:var(--rost); border-color:var(--rost)}
/* Statusordet är en etikett med egen yta, inte en grå notering. Samma
   grad och vikt för båda utfallen, så att ingendera väger tyngre än
   verkligheten: det är utfallet som skiljer dem åt, inte typografin. */
.punktrad .pmark .pord{font-family:"Familjen Grotesk",sans-serif;
  font-size:14px; font-weight:700; letter-spacing:.01em; line-height:1.25;
  border-radius:3px; padding:3px 7px}
.punktrad .pmark.ja .pord{color:var(--pine); background:var(--pine-soft)}
.punktrad .pmark.nej .pord{color:var(--rost); background:var(--rost-soft)}
/* Mobilreglerna för poängrutan låg tidigare i ett mediablock HÖGRE UPP i
   filen än själva .poangruta, så basregeln vann och telefonen fick
   skrivbordets layout. De ligger nu efter den regel de ska överta. */
@media (max-width:760px){
  .punktrad{grid-template-columns:24px 124px minmax(0,1fr)}
  /* Skälet ligger under de tre första cellerna på telefon och ska börja
     där namnet börjar, inte under nummerkolumnen. */
  .punktrad .pskal{padding-left:0}
  .poangruta{grid-template-columns:minmax(0,1fr); gap:14px}
  .poangtal{grid-row:auto; max-width:none}
  .matare,.poangetikett{grid-column:1}
  .matare{gap:5px}
  .matare .seg{min-width:0; height:38px}
}


/* ---------------------------------------------------- inre sidor */
.brand{text-decoration:none; color:inherit}
nav.top-nav a.pa{color:var(--ink); border-bottom-color:var(--ochre)}
/* Kommunsidan låg på 720 px i ett 1180 px fönster — sex tiondelar av
   bredden, resten tomt. Brödtext mår bra av en smal spalt, men
   tabellerna, staplarna och de sju frågorna har tre kolumner var och
   klämdes ihop. Sidan använder nu samma bredd som förstasidan, och
   de textblock som ska förbli smala håller sin egen max-width. */
main{max-width:1080px; margin:0 auto; padding:34px 20px 56px}
main > p, main > .ruta > p, .oversatt p, .lead, .standfirst{
  max-width:46em}
main h1{font-size:clamp(32px,5vw,50px); margin:.05em 0 .4em}
main h2{font-family:"Familjen Grotesk",sans-serif; font-size:24px;
  letter-spacing:-.02em; font-weight:600; margin:2em 0 .5em;
  border-bottom:1.5px solid var(--ink); padding-bottom:8px}
main h3{font-family:"Familjen Grotesk",sans-serif; font-size:17px;
  font-weight:600; margin:0 0 .4em}
main p{margin:0 0 .95em}
main a{color:var(--pine); text-underline-offset:2px}
.kick{font-family:"Familjen Grotesk",sans-serif; font-size:12px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ochre);
  font-weight:600; margin:0 0 10px}
.lead{font-size:20.5px; line-height:1.5; color:var(--ink); font-weight:450;
  margin-bottom:1.3em}
.liten{font-size:14.5px; color:var(--ink2); line-height:1.5}

.poang{display:flex; align-items:baseline; gap:12px; margin:0 0 24px}
.poang b{font-family:"Familjen Grotesk",sans-serif; font-size:64px;
  line-height:1; font-weight:700; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.poang span{font-size:14px; color:var(--mut); letter-spacing:.06em;
  text-transform:uppercase; font-weight:600;
  font-family:"Familjen Grotesk",sans-serif}

.tal{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0; border:1px solid var(--line); background:var(--surface);
  margin:26px 0 30px}
.tal div{padding:18px; border-right:1px solid var(--line)}
.tal div:last-child{border-right:0}
.tal b{display:block; font-family:"Familjen Grotesk",sans-serif;
  font-size:34px; line-height:1.05; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.tal span{font-size:13.5px; color:var(--mut); display:block; margin-top:6px;
  line-height:1.35}

.punkt{border:1px solid var(--line); background:var(--surface);
  padding:14px 16px; margin:0 0 9px; border-left:3px solid var(--line)}
.punkt.ja{border-left-color:var(--g5); background:var(--pine-soft)}
.ph{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:5px}
.pn{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--mut);
  min-width:16px}
.ph b{font-family:"Familjen Grotesk",sans-serif; font-size:16.5px;
  font-weight:600; letter-spacing:-.01em}
.pm{margin-left:auto; font-family:"Familjen Grotesk",sans-serif; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--mut)}
.punkt.ja .pm{color:var(--g5)}
.punkt p{font-size:15.5px; margin:0 0 .5em; color:var(--ink2)}
.lag{font-family:"Familjen Grotesk",sans-serif; font-size:12.5px !important;
  letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  color:var(--ochre) !important; margin:0 0 7px !important}
blockquote{margin:9px 0 0; padding:9px 14px; border-left:2px solid var(--ochre);
  background:var(--paper); font-size:15.5px; color:var(--ink2);
  font-style:italic}

/* Delsvar per förvaltning. Neutral ram — det är redovisning, inte betyg. */
.punkt.delsvar{border-left-color:var(--line)}
.punkt.delsvar .ph b{font-size:15px}

/* Motsägelse i kommunens eget material. Ska synas, men får aldrig se ut
   som en anklagelse — den är en iakttagelse om två meningar som inte går
   ihop, inget annat. Därför dämpad ockra, ingen röd ton. */
.mots{font-size:14.5px !important; margin:10px 0 0 !important;
  padding:9px 13px; background:var(--sunk); border-left:2px solid var(--ochre);
  color:var(--ink2)}
.mots b{color:var(--ink); font-weight:600}

/* Förbehållet om underlaget, direkt under poängen. */
.ruta.underlag{border-left-color:var(--ochre); margin:18px 0 22px}

.ruta{background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--pine); padding:18px 20px; margin:26px 0}
.ruta p:last-child{margin:0}
.ruta p{font-size:15.5px}

#sok{width:100%; font-family:"Familjen Grotesk",sans-serif; font-size:18px;
  padding:12px 14px; border:1.5px solid var(--ink); background:var(--paper);
  color:var(--ink); margin:0 0 14px}
#sok:focus{outline:2.5px solid var(--ochre); outline-offset:2px}
.lista{list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink)}
.lista li{border-bottom:1px solid var(--line)}
.lista a{display:flex; justify-content:space-between; gap:14px;
  padding:12px 4px; text-decoration:none}
.lista a:hover{background:var(--surface)}
.nk{font-family:"Familjen Grotesk",sans-serif; font-weight:600;
  color:var(--ink)}
.np{font-family:"JetBrains Mono",monospace; color:var(--mut); font-size:13.5px;
  white-space:nowrap; font-variant-numeric:tabular-nums}

footer.sidfot{border-top:1.5px solid var(--ink); margin-top:20px}
footer.sidfot .cols{max-width:1080px; margin:0 auto;
  padding:26px 20px 52px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px}
footer.sidfot b{font-family:"Familjen Grotesk",sans-serif; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut);
  display:block; margin-bottom:8px}
footer.sidfot p{font-size:14px; color:var(--ink2); margin:0 0 .5em;
  line-height:1.45}
footer.sidfot a{color:var(--pine)}


.tillbaka{font-family:"Familjen Grotesk",sans-serif; font-size:14px;
  color:var(--pine); text-decoration:none; display:inline-block;
  margin-bottom:18px}
.tillbaka:hover{text-decoration:underline}

@media (max-width:760px){
  .hero-grid,.sok-grid{grid-template-columns:minmax(0,1fr)}
  .anat > div{border-right:0; border-bottom:1px solid var(--line)}
  .anat > div:last-child{border-bottom:0}
  main{padding-top:24px}
  nav.top-nav{flex-wrap:wrap; gap:10px 16px; row-gap:8px}
  header.top .wrap{padding-block:14px 12px}
  .eyebrow{flex-wrap:wrap; gap:6px 10px}
  .eyebrow .bar{flex-basis:100%; height:1px; order:1}
  .hero{padding-block:28px 24px}
  .sok{padding:18px}
  .idx a{grid-template-columns:38px minmax(0,1fr); gap:12px}
  .spar-head{grid-template-columns:38px minmax(0,1fr); gap:12px}
  .tal div{border-right:0; border-bottom:1px solid var(--line)}
  .tal div:last-child{border-bottom:0}
  .figure{padding:18px}
  .figure .n{font-size:60px}
  .preview .wrap{gap:4px}
  .kort .top{flex-wrap:wrap}
}
@media (max-width:420px){
  .row{flex-wrap:wrap; gap:2px}
  .row .v{text-align:left}
}

/* ===================================================================
   Tillagt 2026-10-01. Enbart nya regler sist i filen.
   Ingenting ovanfor den har raden ar andrat.
   =================================================================== */

.meny-knapp{display:none; background:none; cursor:pointer; line-height:0;
  border:1.5px solid var(--line); border-radius:6px; padding:9px 10px;
  margin-left:auto}
.meny-knapp span{display:block; width:20px; height:2px; border-radius:2px;
  background:var(--ink)}
.meny-knapp span + span{margin-top:4px}
.meny-knapp:hover{border-color:var(--ochre)}
.meny-knapp:focus-visible{outline:2px solid var(--ochre); outline-offset:2px}

@media (max-width:760px){
  header.top .wrap{flex-wrap:nowrap; align-items:center; gap:12px}
  .brand{font-size:20px}
  .meny-knapp{display:block; flex:0 0 auto}
  nav.top-nav{display:none; flex-basis:100%; flex-direction:column;
    align-items:stretch; gap:0; margin-top:12px; padding-top:2px;
    border-top:1px solid var(--line)}
  header.top .wrap.oppen{flex-wrap:wrap}
  header.top .wrap.oppen nav.top-nav{display:flex}
  nav.top-nav a{display:block; width:100%; font-size:16px; padding:12px 2px;
    border-bottom:1px solid var(--line)}
  nav.top-nav a:last-child{border-bottom:0}
  nav.top-nav a:hover{border-bottom-color:var(--line); color:var(--ink)}
  nav.top-nav a.pa{color:var(--ink); border-bottom-color:var(--line)}
  nav.top-nav a.pa::before{content:"\203A\00a0"; color:var(--ochre)}
}

#q::placeholder{transition:opacity .22s ease}
#q.byter::placeholder{opacity:0}
@media (prefers-reduced-motion:reduce){ #q::placeholder{transition:none} }

/* Hero-rubriken i mindre grad sa att den ryms pa tva rader. */
.hero h1{font-size:clamp(27px,3.9vw,42px); line-height:1.08}
@media (max-width:760px){ .hero h1{font-size:clamp(25px,6.4vw,34px)} }