/* The kommune page's own styles (moved out of Kommune.cshtml 14.08.2026 when the page needed room
   for the shared for-sale strip - same move forside.css made at the same ceiling). Design tokens
   come from gv.css and must not be redeclared here ([claim: pages-inherit-design-tokens]).
   The card chassis for the strip is css/strib.css; these are the page's own tables and chips. */
.noegle div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.5rem 1.4rem; margin:.5rem 0; font-size:.92rem; }
.stats div { border-bottom:1px solid var(--line); padding:.25rem 0; display:flex; justify-content:space-between; gap:.5rem; }
.stats span { color:var(--muted); }
.stats b { font-variant-numeric:tabular-nums; font-weight:600; }
/* .vbar .lab and .vbar .b moved to gv.css 14.08.2026, next to .vbar itself - the town page
   draws the same chart and was getting two thirds of the component. */
th:first-child, td:first-child { text-align:left; }
td.k { font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.badge { font-size:.72rem; font-weight:700; padding:.12rem .5rem; border-radius:6px; color:#fff; }
.info { display:inline-block; width:1.05rem; height:1.05rem; line-height:1.05rem; text-align:center; font-size:.72rem;
    border:1px solid var(--line); border-radius:50%; color:var(--muted); cursor:pointer; vertical-align:baseline; background:transparent; padding:0; }
.info-boks { display:block; background:var(--accentbg); border-radius:8px; padding:.6rem .8rem; margin:.4rem 0; font-size:.85rem; }
.mere { background:none; border:none; padding:0; color:var(--accent); font:inherit; font-size:.8rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.mere-boks { display:block; margin-top:.5rem; padding-top:.5rem; border-top:1px dashed rgba(0,0,0,.15); font-weight:400; }
.mere-boks[hidden] { display:none; }
.chip { display:inline-block; margin:.15rem .4rem .15rem 0; padding:.3rem .7rem; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-size:.9rem; }

/* "Kort om X": the verdict box (14.08.2026, docs/MAKEOVER-KOMMUNE.md). Same component as the
   school page's, which is the reference implementation for this makeover - the rules are copied
   rather than shared because the school page declares them in its own <style> block, and hoisting
   them into gv.css would put an accent-bordered box on every page that ever writes .verdict
   ([[hoisting-css-is-not-refactoring]]). If a third page wants one, that is the moment to share. */
.verdict { border:1px solid var(--accent); border-radius:12px; background:var(--accentbg);
    padding:.9rem 1.1rem; margin:1.2rem 0 0; }
.verdict h2 { margin:.1rem 0 .5rem; font-size:1.1rem; }
.verdict ul { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.verdict li { display:flex; gap:.55rem; align-items:baseline; font-size:.96rem; }
.verdict .ic { flex:0 0 auto; }
.verdict a { color:var(--accent); text-decoration:none; white-space:nowrap; font-size:.86rem; }

/* Section chips. A horizontal rail on a phone, because fifteen sections is a lot of scrolling and
   the reader arrived for one of them. The bleed matches the body's own side padding (gv.css). */
.kchips { display:flex; gap:.4rem; overflow-x:auto; margin:.7rem -1.25rem .2rem; padding:0 1.25rem .3rem; }
.kchips a { flex:0 0 auto; font-size:.82rem; text-decoration:none; color:var(--fg);
    border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem; background:var(--card); }

/* Folded tails. The fold rule is "every fact stays reachable" (MAKEOVER-PLAN.md), so what goes in
   here is the LONG TAIL of a section, never its headline. */
.fold { margin:.4rem 0; }
.fold > summary { cursor:pointer; font-size:.88rem; color:var(--accent); font-weight:600;
    list-style:none; padding:.2rem 0; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:"▸ "; }
.fold[open] > summary::before { content:"▾ "; }

@media (hover:hover) {
    .kchips a:hover { border-color:var(--accent); background:var(--accentbg); }
    .verdict a:hover { text-decoration:underline; }
}