/* Sagsvagt – avisen. Paletten "Vin og blæk": rød og blå blok mødes om sagen. Ingen hvid.
   Opbygget efter Apples Human Interface Guidelines, som tilmeldingssiden: én typeskala med tydeligt hierarki
   (17 px brødtekst, 12 px som mindste), 8-punkts afstande, ens kontroller med mindst 44 px at ramme,
   grupper vist med stille flader og streger, og bevægelse kun som svar på det, man gør.
   Klassenavnene bruges af avis/byg.mjs, ekstra.mjs, kommuner.mjs og boks.mjs. */
:root {
  --nat: #0E0F14;
  --grafit: #2A2B33;
  --kalk: #E6DFD3;
  --kalk-lys: #EEE8DE;
  --kalk-mork: #D9D1C3;
  --muted: #56535A;
  --rule: #CFC6B8;
  --bordeaux: #3E0E14;
  --vin: #8A2430;
  --rubin: #B04A50;
  --rosen: #DCA9A5;
  --blaek: #0C1430;
  --indigo: #28377A;
  --skifer: #5D6BA8;
  --lyng: #B7BBD8;
  --moedet:
    radial-gradient(80% 160% at 0% 0%, var(--skifer) 0%, var(--indigo) 22%, var(--blaek) 48%, transparent 72%),
    radial-gradient(70% 160% at 100% 100%, var(--rubin) 0%, var(--vin) 22%, var(--bordeaux) 50%, transparent 75%),
    var(--nat);
  --sans: "Montserrat", system-ui, sans-serif;
  --serif: "Montserrat", system-ui, sans-serif; /* Én skrift på hele siden; --serif beholdes, fordi skabelonerne bruger den */

  /* Tekststile */
  --t-stor: clamp(2rem, 1.3rem + 2.6vw, 2.875rem);
  --t1: clamp(1.625rem, 1.25rem + 1.4vw, 2.125rem);
  --t2: 1.375rem;
  --t3: 1.125rem;
  --overskrift: 1.0625rem;
  --broed: 1.0625rem;
  --sekundaer: .9375rem;
  --fodnote: .8125rem;
  --billedtekst: .75rem;

  --r-knap: 8px; --r-felt: 12px; --r-kort: 16px; /* knapper let afrundede, ikke piller */
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
/* Mørk baggrund bag siden: telefonens statuslinje (klokken) og træk ud over kanten får samme farve som sidehovedet */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; background: var(--nat); }
body { margin: 0; background: var(--kalk); color: var(--nat); font: 400 var(--broed)/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
a { color: inherit; text-decoration-color: rgba(14,15,20,.3); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--skifer); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0; }

/* ---------- Avishovedet: én række med logo, menu og knap ---------- */
.masthead { background: var(--moedet); color: var(--kalk); padding-top: env(safe-area-inset-top); } /* i appen går sidehovedet op bag klokken */
.masthead a { color: var(--kalk); text-decoration: none; }
.masthead .wrap { display: flex; align-items: center; gap: 8px 20px; min-height: 64px; }
.mh-row { display: contents; }
.mh-logo { display: flex; align-items: center; min-height: 44px; order: 0; border-radius: 6px; }
.mh-logo img, .mh-logo svg { height: 40px; width: auto; display: block; margin-left: -8px; }
.mh-edition { order: 2; flex: none; font-size: var(--fodnote); color: rgba(230,223,211,.78); text-align: right; line-height: 1.4; white-space: nowrap; } /* altid to korte linjer */
.mh-edition b { color: var(--kalk); font-weight: 600; }
.mh-nav { order: 1; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; font-size: var(--sekundaer); font-weight: 500; margin-left: 8px; }
.mh-nav a, .mh-nav summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; opacity: .85; }
.mh-nav a:hover, .mh-nav summary:hover { opacity: 1; background: rgba(230,223,211,.08); }
.mh-nav a[aria-current], .mh-nav summary[aria-current] { opacity: 1; background: rgba(230,223,211,.14); font-weight: 600; }
.mh-nav .cta { display: none; } /* knappen ligger i mh-row som .mh-cta, så den også er synlig på små skærme */
.masthead .mh-cta { order: 3; flex: none; opacity: 1; background: var(--kalk); color: var(--nat); font-weight: 600; font-size: var(--sekundaer); display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-knap); white-space: nowrap; }
.masthead .mh-cta:hover { background: var(--kalk-lys); }
.mere { position: relative; }
.mere summary { list-style: none; cursor: pointer; }
.mere summary::-webkit-details-marker { display: none; }
.mere summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -3px 0 0 8px; }
.mere > div { position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; min-width: 16rem; background: var(--nat); padding: 8px; border-radius: var(--r-felt); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
.mere > div a { display: flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: 8px; opacity: .9; font-weight: 500; }
.mere > div a:hover { opacity: 1; background: rgba(230,223,211,.1); }

/* ---------- Tekst ---------- */
.kicker { font-size: var(--fodnote); font-weight: 500; color: var(--muted); margin: 0 0 6px; }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.status { font-weight: 600; }
.status.besluttet { color: var(--vin); }
.status.kommer { color: var(--indigo); }
.hl { font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.hl a { text-decoration: none; }
.hl a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.dek { color: #3E3B40; margin: 8px 0 0; font-size: var(--sekundaer); line-height: 1.5; }
.intro { color: var(--muted); max-width: 46em; }
.rubrik, .sec-h, .rail h2 { font-size: var(--sekundaer); font-weight: 600; color: var(--muted); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rubrik a, .sec-h a { font-size: var(--fodnote); font-weight: 500; color: var(--muted); text-decoration: none; }
.rubrik a:hover, .sec-h a:hover { color: var(--nat); text-decoration: underline; }

/* ---------- Knapper og chips: én familie ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 0; cursor: pointer;
  background: var(--nat); color: var(--kalk); font: 600 var(--broed)/1.2 var(--sans); text-decoration: none; border-radius: var(--r-knap); transition: background .2s; }
.btn:hover { background: var(--grafit); }
.kommune-tilmeld .btn, .vagt-box .btn, .moerk .btn { background: var(--kalk); color: var(--nat); }
.kommune-tilmeld .btn:hover, .vagt-box .btn:hover, .moerk .btn:hover { background: var(--kalk-lys); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--sekundaer); font-weight: 600; text-decoration: none; padding: 8px 16px; box-shadow: inset 0 0 0 1.5px var(--rule); border-radius: var(--r-knap); transition: box-shadow .2s, background .2s; }
.chips a:hover { box-shadow: inset 0 0 0 1.5px var(--nat); }
.chips a[aria-current] { background: var(--nat); box-shadow: none; color: var(--kalk); }
.faner { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.fane { font: 600 var(--sekundaer)/1 var(--sans); min-height: 44px; padding: 10px 16px; border-radius: var(--r-knap); border: 0; box-shadow: inset 0 0 0 1.5px var(--rule); background: transparent; color: var(--nat); cursor: pointer; }
.fane:hover { box-shadow: inset 0 0 0 1.5px var(--nat); }
.fane[aria-selected="true"] { background: var(--nat); box-shadow: none; color: var(--kalk); }
.emner { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.emne-tag { display: inline-flex; align-items: center; min-height: 32px; font: 600 var(--fodnote)/1 var(--sans); padding: 6px 10px; border-radius: 6px; text-decoration: none; }
.emne-tag.r { background: var(--rosen); color: var(--bordeaux); }
.emne-tag.b { background: var(--lyng); color: var(--blaek); }
.emne-tag:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.article header .emner { margin-top: 16px; }

/* ---------- Stille flader ---------- */
.kort, .kf, .vej, .paa-mail, .vagt-box, .decision { background: var(--kalk-lys); border-radius: var(--r-kort); }
.decision { font-size: var(--sekundaer); line-height: 1.5; background: none; border-top: 2px solid var(--vin); border-radius: 0; padding: 10px 0 0; max-width: 44em; }
.decision.kommer { border-top-color: var(--indigo); }
.decision b { display: block; font-size: var(--fodnote); letter-spacing: .04em; text-transform: uppercase; color: var(--vin); margin-bottom: 4px; }
.decision.kommer b { color: var(--indigo); }
/* Når beslutningen er forkortet: en tydelig linje under teksten med et link til hele beslutningen længere nede */
.kf-forkortet { display: block; margin-top: 8px; font-size: var(--fodnote); color: var(--muted); }
.kf-mere-link { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 600; color: var(--nat); text-decoration: underline; text-underline-offset: 3px; }
.kf-mere-link::after { content: " ↓"; }
.udfald { font: 600 var(--sekundaer)/1.5 var(--sans); margin: 16px 0 0; padding: 10px 0 0; border-top: 2px solid var(--vin); max-width: 44em; }
.udfald.kommer { border-top-color: var(--indigo); }

/* ---------- Forside ---------- */
.front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 48px; padding: 32px 0 24px; }
.leder { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0 32px; margin-top: 28px; padding: 24px; background: var(--kalk-lys); border-radius: var(--r-kort); }
.leder .rubrik { border: 0; padding: 4px 0 0; color: var(--vin); }
.leder h2 { font-size: var(--t2); margin: 0 0 8px; }
.leder p { line-height: 1.55; margin: 0 0 10px; max-width: 42em; }
.leder .byline { font-size: var(--fodnote); color: var(--muted); margin: 4px 0 0; }
.lead { padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.lead .hl { font-size: var(--t-stor); line-height: 1.08; letter-spacing: -.025em; max-width: 22ch; }
.lead .dek { font-size: var(--t3); line-height: 1.5; max-width: 40em; margin-top: 14px; }
.lead .anslag { display: block; }
.lead .decision { margin-top: 18px; }
.mellem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.mellem article { padding: 0; }
.mellem article + article { border: 0; }
.mellem .hl { font-size: var(--t3); line-height: 1.25; }
.mellem .dek { font-size: var(--sekundaer); }
.second { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.second article { padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.second .hl { font-size: var(--t2); }
.kortnyt { padding: 24px 0 40px; }
.kortnyt .rubrik { margin-bottom: 4px; }
.kortnyt ul { columns: 2; column-gap: 40px; }
.kortnyt ul, .notitser { list-style: none; margin: 0; padding: 0; }
.kortnyt li, .notitser li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--broed); line-height: 1.35; }
.notitser li:last-child { border-bottom: 0; }
.kortnyt li a, .notitser li a { text-decoration: none; font-weight: 600; display: inline; padding: 6px 0; margin: -6px 0; } /* større trykflade uden at ændre layoutet */
.kortnyt li a:hover, .notitser li a:hover { text-decoration: underline; }
.nh-hvor { display: block; font-size: var(--fodnote); font-weight: 500; color: var(--muted); margin-bottom: 2px; }
.nh-dato { font-size: var(--fodnote); color: var(--muted); white-space: nowrap; margin-left: 6px; }

.rail { padding-top: 4px; }
.rail section + section { margin-top: 32px; }
.mini { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.mini:last-child { border-bottom: 0; }
.mini .hl { font-size: var(--broed); line-height: 1.3; }
.mini .kicker { margin-bottom: 3px; }
.kal-dag { font-size: var(--sekundaer); font-weight: 600; margin: 16px 0 0; padding-bottom: 2px; }
.kal-moede { font-size: var(--fodnote); font-weight: 500; color: var(--muted); margin: 8px 0 0; }
.notitser.kal li { padding: 8px 0; font-size: var(--sekundaer); }

/* Tilmelding som et stille kort */
.paa-mail { padding: 20px 20px 22px; margin-bottom: 32px; }
.paa-mail .rubrik { border: 0; padding: 0; margin: 0 0 8px; color: var(--nat); font-size: var(--overskrift); }
.paa-mail p { font-size: var(--sekundaer); line-height: 1.5; margin: 0 0 14px; color: #3E3B40; }
.paa-mail a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--nat); color: var(--kalk); font-weight: 600; font-size: var(--sekundaer); text-decoration: none; border-radius: var(--r-knap); }
.paa-mail a:not(.btn):hover { background: var(--grafit); text-decoration: none; }
.body .tester { margin: 32px 0; }
.vagt-box { background: var(--moedet); color: var(--kalk); padding: 22px 22px 24px; }
.vagt-box h2 { border: 0; padding: 0; font-size: var(--t3); margin-bottom: 8px; color: var(--kalk); }
.vagt-box p { margin: 0 0 16px; font-size: var(--sekundaer); color: rgba(230,223,211,.85); }

/* ---------- Artikel ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding: 32px 0 64px; }
.article header { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.article h1.hl { font-size: var(--t-stor); line-height: 1.1; letter-spacing: -.025em; max-width: 24ch; }
.article .dek { font-size: var(--t3); line-height: 1.5; margin-top: 14px; }
.kommunens-titel { font-size: var(--fodnote); color: var(--muted); margin: 10px 0 0; }
.body { font-size: var(--broed); line-height: 1.65; max-width: 40em; }
.body h2 { font-size: var(--overskrift); font-weight: 600; margin: 32px 0 8px; }
.body p { margin: 0 0 14px; }
.body .decision { margin: 0 0 26px; }
.files { list-style: none; padding: 0; margin: 8px 0 0; font-size: var(--sekundaer); }
.files li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.source { font-size: var(--fodnote); color: var(--muted); border-top: 1px solid var(--rule); margin-top: 34px; padding-top: 16px; }
.source a { color: var(--indigo); }
.side .paa-mail { margin-bottom: 32px; }

/* Kort fortalt og sagens vej */
.kf, .vej { padding: 20px 22px 22px; margin: 0 0 24px; }
.kf h2, .vej h2 { font-size: var(--overskrift); font-weight: 600; margin: 0 0 8px; }
.kf dl { margin: 0; }
.kf dl > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.kf dl > div:last-child { border-bottom: 0; }
.kf dt { font-size: var(--fodnote); font-weight: 600; color: var(--muted); padding-top: 2px; }
.kf dd { margin: 0; font-size: var(--sekundaer); line-height: 1.5; }
.kf ul { margin: 0; padding-left: 18px; }
.kf li + li { margin-top: 6px; }
.kf-mere { margin: 6px 0 0; font-size: var(--fodnote); color: var(--muted); }
.kf-videre { display: block; font-size: var(--fodnote); color: var(--muted); margin-top: 2px; }
/* Hvad kan du gøre?: samme opbygning som Kort fortalt, med en rød streg, så handlingerne skiller sig ud */
.kf.goer { box-shadow: inset 3px 0 0 var(--vin); }
.kf.goer dt { color: var(--vin); }
.vej ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; }
.vej-trin { flex: 1 1 150px; position: relative; padding: 18px 14px 0 0; font-size: var(--fodnote); line-height: 1.4; }
.vej-trin::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--rule); }
.vej-trin::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--nat); }
.vej-trin.her::after { background: var(--vin); box-shadow: 0 0 0 4px var(--rosen); }
.vej-trin.kommer::after, .vej-trin.senere::after { background: var(--kalk-lys); box-shadow: inset 0 0 0 2px var(--nat); }
.vej-trin.senere::before { background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 11px); }
.vej-trin:last-child::before { right: auto; width: 12px; }
.vej-dato, .vej-st { display: block; color: var(--muted); }
.vej-hvor { display: block; margin: 2px 0; font-size: var(--sekundaer); font-weight: 600; }
.vej-hvor a { color: var(--indigo); }

/* Afstemning */
.afst { margin-top: 14px; }
.afst-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--kalk); }
.afst-bar .for { background: var(--nat); }
.afst-bar .imod { background: var(--sten, #8D8A86); }
.afst-bar .undl { background: var(--rule); }
.afst-tal { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: var(--fodnote); color: var(--muted); }
.afst-tal b { color: var(--nat); font-size: var(--sekundaer); font-variant-numeric: tabular-nums; }
.afst-p { margin: 12px 0 0; display: grid; gap: 8px; }
.afst-p > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.afst-p dt { font-size: var(--fodnote); font-weight: 600; color: var(--muted); }
.afst-p dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.parti { display: inline-flex; align-items: center; font-size: var(--fodnote); font-weight: 600; padding: 4px 10px 4px 4px; border-radius: 99px; background: var(--kalk); white-space: nowrap; }
.parti:not(:has(b)) { padding-left: 10px; }
.parti b { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 99px; background: var(--nat); color: var(--kalk); font-size: var(--billedtekst); margin-right: 6px; }
.afst.kompakt { margin-top: 10px; }
.decision .afst-tal b { display: inline; margin: 0; font-size: var(--sekundaer); }
.afst-bogst { margin: 6px 0 0; font-size: var(--fodnote); font-weight: 500; line-height: 1.5; }
.afst-bogst abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help; }

/* Ordforklaringer */
dfn.ord { font-style: normal; border-bottom: 1.5px dotted var(--muted); cursor: help; position: relative; }
dfn.ord:hover::after, dfn.ord:focus::after { content: attr(data-ord); position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(300px, 80vw); background: var(--nat); color: var(--kalk); font: 500 var(--fodnote)/1.45 var(--sans); padding: 10px 12px; border-radius: var(--r-felt); z-index: 5; white-space: normal; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
dfn.ord:focus { outline: 2px solid var(--skifer); outline-offset: 2px; }

/* ---------- Lister og oversigter ---------- */
.listing { padding: 32px 0 64px; max-width: 820px; }
.listing h1, .emne-oversigt h1 { font-size: var(--t1); letter-spacing: -.025em; line-height: 1.1; margin: 0 0 8px; }
.listing .intro { margin: 0 0 20px; }
.listing article { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.listing .hl { font-size: var(--t2); }
.prose { font-size: var(--broed); line-height: 1.65; }
.prose h2 { font-size: var(--t3); margin: 30px 0 8px; }
.prose p { margin: 0 0 14px; }
.abonner { margin: -8px 0 24px; font-size: var(--sekundaer); }
.abonner a { color: var(--indigo); }
.emne-oversigt { padding: 32px 0 56px; }
.emne-oversigt .intro { margin: 0 0 28px; }
.emne-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 36px; }
.emne-gitter .rubrik .emne-navn { font-size: var(--overskrift); font-weight: 600; color: var(--nat); }

/* Møder */
.moeder .sec-h { margin-top: 24px; }
.moede { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.moede-dato { margin: 0; text-align: center; background: var(--kalk-lys); border-radius: var(--r-felt); padding: 8px 0 9px; line-height: 1.1; align-self: start; }
.moede-dato b { display: block; font-size: 1.625rem; letter-spacing: -.02em; }
.moede-dato span { display: block; font-size: var(--billedtekst); font-weight: 600; color: var(--muted); }
.moede h3 { margin: 0; font-size: var(--t3); }
.moede h3 a { text-decoration: none; }
.moede-meta { margin: 4px 0 0; font-size: var(--fodnote); color: var(--muted); }
.moede-meta a { color: var(--indigo); }
.punkter { list-style: none; margin: 12px 0 0; padding: 0; }
.punkter li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: var(--broed); line-height: 1.35; }
.punkter li a { text-decoration: none; font-weight: 600; }
.punkter li a:hover { text-decoration: underline; }
.punkter .emner { margin-top: 6px; }
.punkt-udfald { display: block; font-size: var(--fodnote); color: var(--vin); margin-top: 3px; }
.moede-mere { margin: 8px 0 0; font-size: var(--fodnote); color: var(--muted); }

/* Partier */
.partier-side { max-width: 960px; }
.parti-tabel { width: 100%; border-collapse: collapse; font-size: var(--sekundaer); font-variant-numeric: tabular-nums; }
.parti-tabel th, .parti-tabel td { padding: 12px 10px; border-bottom: 1px solid var(--rule); text-align: right; }
.parti-tabel th:first-child { text-align: left; }
.parti-tabel thead th { font-size: var(--fodnote); color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--nat); }
.parti-tabel tbody th { font-weight: 600; }
.pct { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 9rem; }
.pct-bar { flex: 1; height: 8px; background: var(--kalk-lys); border-radius: 99px; overflow: hidden; max-width: 90px; }
.pct-bar span { display: block; height: 100%; background: var(--nat); }
.matrix-wrap { overflow-x: auto; }
.matrix { border-collapse: separate; border-spacing: 3px; font-size: var(--fodnote); font-variant-numeric: tabular-nums; }
.matrix caption { caption-side: bottom; text-align: left; color: var(--muted); padding-top: 8px; font-size: var(--fodnote); }
.matrix th { font-weight: 600; padding: 4px 6px; }
.matrix td { width: 44px; height: 40px; text-align: center; border-radius: 8px; background: rgba(14,15,20, calc(var(--v, 0) * .9)); color: var(--nat); font-weight: 600; }
.matrix td[style*="--v:0.6"], .matrix td[style*="--v:0.7"], .matrix td[style*="--v:0.8"], .matrix td[style*="--v:0.9"], .matrix td[style*="--v:1"] { color: var(--kalk); }
.matrix td.selv { background: transparent; }
.matrix td.faa { background: transparent; color: var(--muted); }
.delt { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.delt .hl { font-size: var(--t3); }
.delt-om { margin: 6px 0 0; font-size: var(--sekundaer); color: var(--muted); }
.delt-tal { color: var(--muted); font-weight: 500; }

/* Høringer */
.frist { margin: 6px 0 0; font-size: var(--sekundaer); font-weight: 600; color: var(--indigo); }
.frist.snart { color: var(--vin); }

/* Søgning */
.soeg-felt input { width: 100%; min-height: 52px; font: 500 var(--broed) var(--sans); padding: 12px 16px; border: 0; box-shadow: inset 0 0 0 1.5px var(--rule); border-radius: var(--r-felt); background: var(--kalk-lys); color: var(--nat); margin-bottom: 16px; }
.soeg-felt input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--indigo); }
.soeg-side .chips { margin-bottom: 16px; }

/* ---------- Fod ---------- */
footer.foot { background: var(--nat); color: rgba(230,223,211,.75); font-size: var(--sekundaer); }
footer.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 36px; line-height: 1.6; }
footer.foot img, footer.foot svg { height: 34px; width: auto; margin-left: -8px; }
footer.foot a { color: var(--kalk); text-decoration: none; display: inline-block; padding: 8px 0; }
footer.foot a:hover { text-decoration: underline; }

/* ---------- Mindre skærme: samme indhold, stablet ---------- */
@media (max-width: 960px) {
  .front, .article { grid-template-columns: 1fr; }
  .rail { margin-top: 32px; }
  .article { gap: 32px; }
  .mellem { grid-template-columns: 1fr; gap: 0; }
  .mellem article { padding: 16px 0; }
  .mellem article + article { border-top: 1px solid var(--rule); }
  .emne-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
  .mh-edition { display: none; } /* mellem 720 og 1120 px er der ikke plads til både menu, udgave og knap */
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .masthead .wrap { gap: 0 12px; padding-top: 4px; padding-bottom: 4px; flex-wrap: wrap; }
  .mh-logo img, .mh-logo svg { height: 36px; }
  .mh-nav { order: 3; flex-basis: 100%; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mh-nav::-webkit-scrollbar { display: none; }
  .mh-nav a, .mh-nav summary { flex: none; min-height: 40px; }
  .masthead .mh-cta { order: 1; margin-left: auto; }
  .mere > div { position: fixed; left: 16px; right: 16px; top: auto; min-width: 0; }
  .leder { grid-template-columns: 1fr; padding: 20px; }
  .kortnyt ul { columns: 1; }
  .second, .emne-gitter { grid-template-columns: 1fr; }
  .lead .dek { font-size: var(--broed); }
  .hl, .listing h1, .emne-oversigt h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; } /* lange kommuneord som "miljøkonsekvensrapport" deles på smalle skærme */
  .kf, .vej, .paa-mail { padding: 16px; }
  .kf dl > div { grid-template-columns: 1fr; gap: 2px; }
  .parti-tabel th, .parti-tabel td { padding: 10px 5px; font-size: var(--fodnote); }
  .parti-tabel .parti { white-space: normal; }
  .pct { min-width: 0; } .pct-bar { display: none; }
  .moede { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* "Læs hele sagen": kommunens lange tekst foldet sammen under Kort fortalt og Sagens vej */
/* Ingen bundlinje: kildelinjen (.source) lige under har sin egen */
.hel-sag { margin: 8px 0 0; border-top: 1px solid var(--rule); }
.hel-sag summary { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 56px; padding: 12px 0; font: 700 var(--overskrift)/1.3 var(--sans); color: var(--nat); cursor: pointer; }
.hel-sag summary::-webkit-details-marker { display: none; }
.hel-sag summary span { font-weight: 500; font-size: var(--sekundaer); color: var(--muted); }
.hel-sag summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.hel-sag[open] summary::after { transform: rotate(-135deg); }
.hel-sag[open] { padding-bottom: 8px; }
.hel-sag > h2:first-of-type { margin-top: 8px; }

/* "Forklar sagen enkelt" (avis/forenklet.mjs): en fold-ud øverst på sagen med en letlæst forklaring */
.forenklet { margin: 20px 0 4px; max-width: 44em; }
.forenklet summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--r-knap); background: var(--nat); color: var(--kalk); font: 600 var(--sekundaer)/1.2 var(--sans); cursor: pointer; }
.forenklet summary::-webkit-details-marker { display: none; }
.forenklet summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.forenklet[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.forenklet summary:hover { background: var(--grafit); }
.forenklet .skjul, .forenklet[open] .vis { display: none; }
.forenklet[open] .skjul { display: inline; }
.forenklet-indhold { margin-top: 14px; padding: 20px 22px 18px; background: var(--kalk-lys); border-left: 3px solid var(--indigo); border-radius: var(--r-felt); }
.forenklet-kort { font-size: var(--t3); font-weight: 600; line-height: 1.45; margin: 0 0 6px; }
.forenklet-indhold h3 { font-size: var(--overskrift); font-weight: 700; margin: 16px 0 4px; }
.forenklet-indhold p { margin: 0; line-height: 1.6; }
.forenklet-note { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--fodnote); color: var(--muted); }

/* Steder i sagen og stedsiderne (avis/steder.mjs) */
.steder { margin: 12px 0 0; font-size: var(--fodnote); color: var(--muted); }
.steder span { font-weight: 600; margin-right: 2px; }
.steder a { color: var(--nat); font-weight: 600; }
.sted-bogstav { font-size: var(--overskrift); margin: 24px 0 8px; }
.listing .tester { margin: 40px 0 0; }
.kilde-osm { margin-top: 32px; font-size: var(--fodnote); color: var(--muted); }
/* Del: én rolig række, samme knapfamilie som chips */
.del-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.del-knap { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font: 600 var(--sekundaer)/1 var(--sans); color: var(--nat); background: none; border: 0; box-shadow: inset 0 0 0 1.5px var(--rule); border-radius: var(--r-knap); text-decoration: none; cursor: pointer; }
.del-knap:hover { box-shadow: inset 0 0 0 1.5px var(--nat); text-decoration: none; }
.del-knap[hidden] { display: none; }
.del-svar { font-size: var(--fodnote); color: var(--muted); }
.chips a span { margin-left: 4px; }

/* ---------- Avishovedet i to etager (.masthead.to): som en trykt avis ----------
   Øverst logo og udgave (bag en tynd streg) til venstre, knap og login til højre.
   Nedenunder sektionerne centreret på deres egen række med god luft. Min avis har sit eget hoved. */
.masthead.to .mh-top { display: flex; align-items: center; gap: 0 18px; min-height: 84px; }
.masthead.to .mh-logo svg { height: 50px; }
.masthead.to .mh-edition { display: block; order: 0; text-align: left; padding-left: 18px; border-left: 1px solid rgba(230,223,211,.3); line-height: 1.45; }
.masthead.to .mh-handling { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.masthead.to .mh-cta { order: 0; }
.mh-ikon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; min-width: 44px; font-size: .75rem; font-weight: 500; opacity: .88; }
.mh-ikon:hover { opacity: 1; }
.mh-ikon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.masthead.to .mh-nav { display: block; margin: 0; padding: 0; border-top: 1px solid rgba(230,223,211,.14); font-size: 1rem; }
.masthead.to .mh-nav .wrap { display: flex; justify-content: center; align-items: stretch; gap: 0 36px; min-height: 52px; }
.masthead.to .mh-nav a, .masthead.to .mh-nav summary { min-height: 52px; padding: 0 2px; border-radius: 0; font-weight: 600; letter-spacing: .01em; opacity: .8; background: none; }
.masthead.to .mh-nav a:hover, .masthead.to .mh-nav summary:hover { opacity: 1; background: none; }
/* Den aktive sektion: en streg under, i stedet for en kasse */
.masthead.to .mh-nav > .wrap > a[aria-current], .masthead.to .mh-nav summary[aria-current] { opacity: 1; background: none; box-shadow: inset 0 -3px 0 var(--kalk); }
.masthead.to .mere > div { top: 100%; }
@media (max-width: 900px) {
  .masthead.to .mh-nav .wrap { gap: 0 24px; }
}
@media (max-width: 720px) {
  .masthead.to .wrap.mh-top { min-height: 60px; gap: 0 12px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
  .masthead.to .mh-logo svg { height: 36px; }
  .masthead.to .mh-edition { display: none; }
  .masthead.to .mh-handling { gap: 10px; }
  .masthead.to .mh-cta { min-height: 38px; padding: 0 14px; }
  .mh-ikon span { display: none; }
  /* Sektionerne kan skubbes til siden med fingeren */
  .masthead.to .mh-nav { flex-basis: auto; margin: 0; padding: 0; overflow: visible; }
  .masthead.to .mh-nav .wrap { justify-content: flex-start; flex-wrap: nowrap; gap: 0 22px; min-height: 46px; padding-top: 0; padding-bottom: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .masthead.to .mh-nav .wrap::-webkit-scrollbar { display: none; }
  .masthead.to .mh-nav a, .masthead.to .mh-nav summary { flex: none; min-height: 46px; font-size: var(--sekundaer); }
}

/* ---------- Telefon: tab-bjælke i bunden (som i Min avis) ----------
   De fire vigtigste sektioner og "Mere" kan nås med tommelfingeren; øverst står kun logo, knap og login. */
.tabbar { display: none; }
@media (max-width: 720px) {
  .masthead.to .mh-nav { display: none; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #F6F2EA; border-top: 1px solid var(--rule); } /* lys, som i nyhedsapps */
  .tabbar > a, .tab-mere summary { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 4px 2px; border-radius: 0; color: var(--nat); text-decoration: none; font: 600 .6875rem/1.1 var(--sans); opacity: .55; }
  .tabbar > a[aria-current], .tab-mere summary[aria-current], .tab-mere[open] summary { opacity: 1; box-shadow: inset 0 2px 0 var(--nat); font-weight: 700; } /* aktiv: mørk med en streg over */
  .tabbar .ti { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar > a[aria-current] .ti { stroke-width: 2.2; }
  .tab-mere { flex: 1 1 0; display: flex; }
  .tab-mere summary { list-style: none; cursor: pointer; }
  .tab-mere summary::-webkit-details-marker { display: none; }
  .tab-mere .ti circle { fill: currentColor; stroke: none; }
  /* Mørkt lag bag arket: et tryk udenfor lukker arket uden at ramme et link bagved */
  .tab-mere[open]::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(14,15,20,.4); }
  .tab-mere > div { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-height: calc(100vh - 140px); overflow-y: auto;
    background: var(--nat); padding: 8px; border-radius: var(--r-felt); box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); }
  .tab-mere > div a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 8px; color: var(--kalk); text-decoration: none; font-weight: 500; }
  .tab-mere > div a[aria-current] { background: rgba(230,223,211,.12); font-weight: 600; }
  /* Lange ord (fx "DATABESKYTTELSESRÅDGIVERENS") må brydes, så intet løber ud over kanten */
  main { overflow-wrap: break-word; }
  /* Udvalgslinket over overskrifterne er lille; en usynlig kant gør det lettere at ramme */
  .kicker a { padding: 10px 0; }
}