:root { --text: #1f2a24; --mjuk: #5c665f; --linje: #dde3dd; --bg: #f5f7f4; --kort: #fff; --acc: #2f6b3d; --acc2: #e7f1e8; --rod: #a33a2a; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--acc); }
.top { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding: .8rem 1rem; background: var(--kort); border-bottom: 1px solid var(--linje); }
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--text); }
.brand span { color: var(--acc); }
.top nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .95rem; }
.top nav a { text-decoration: none; }
.top nav a[aria-current] { font-weight: 600; text-decoration: underline; }
main { max-width: 1180px; margin: 0 auto; padding: 1rem; }
article { background: var(--kort); border: 1px solid var(--linje); border-radius: 10px; padding: 1.2rem 1.2rem 1.5rem; }
article > h1 { margin: .2rem 0 .4rem; line-height: 1.25; font-size: 1.7rem; }
.lead { font-size: 1.08rem; color: var(--mjuk); margin-top: 0; max-width: 820px; }
.text { max-width: 760px; }
.text h2 { margin-top: 2rem; }
.mjuk { color: var(--mjuk); font-size: .88rem; }
details { border: 1px solid var(--linje); border-radius: 8px; padding: .6rem .9rem; margin: .5rem 0; background: #fbfcfb; max-width: 820px; }
summary { cursor: pointer; font-weight: 600; }
.muut { margin-top: 1.2rem; }
.muut h2 { font-size: 1.05rem; }
.muut ul { display: flex; flex-wrap: wrap; gap: .4rem .8rem; padding: 0; list-style: none; }
footer { max-width: 1180px; margin: 0 auto; padding: 1rem; color: var(--mjuk); font-size: .9rem; }
.kort-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; padding: 0; list-style: none; }
.kort-lista li { border: 1px solid var(--linje); border-radius: 8px; padding: .8rem 1rem; background: #fbfcfb; }
.kort-lista a { font-weight: 600; }
.kort-lista p { margin: .3rem 0 0; color: var(--mjuk); font-size: .93rem; }
.knapp { display: inline-block; background: var(--acc); color: #fff; border: 0; border-radius: 6px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.fakta { background: var(--acc2); border-radius: 8px; padding: .3rem 1rem .6rem; margin: 1.2rem 0; max-width: 820px; }
.fakta h2 { margin-top: .6rem; font-size: 1.15rem; }
.lahde { font-size: .88rem; color: var(--mjuk); }
.regel-tabell { border-collapse: collapse; width: 100%; font-size: .95rem; }
.regel-tabell th, .regel-tabell td { text-align: left; padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--linje); vertical-align: top; }

/* ---- jämförelsen ---- */
.filter { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: end; margin: 1rem 0 .5rem; padding: .8rem 1rem; border: 1px solid var(--linje); border-radius: 8px; background: #fbfcfb; }
.filter label { display: flex; flex-direction: column; font-size: .88rem; color: var(--mjuk); gap: .15rem; }
.filter label:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: .35rem; color: var(--text); }
.filter select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--linje); border-radius: 6px; background: #fff; }
.antal { flex-basis: 100%; margin: 0; font-weight: 600; }
.tabell-wrap { overflow-x: auto; }
.modeller { border-collapse: collapse; width: 100%; font-size: .94rem; }
.modeller th { text-align: left; font-size: .85rem; color: var(--mjuk); border-bottom: 2px solid var(--linje); padding: .4rem .6rem .4rem 0; }
.modeller td { border-bottom: 1px solid var(--linje); padding: .55rem .6rem .55rem 0; vertical-align: top; }
.modeller .pris { white-space: nowrap; font-weight: 600; }
.modeller .ink { max-width: 260px; font-size: .88rem; }

/* ---- kalkylatorn ---- */
.kalkyl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; max-width: 900px; }
.kalkyl fieldset { border: 1px solid var(--linje); border-radius: 8px; padding: .6rem 1rem 1rem; margin: 0; }
.kalkyl legend { font-weight: 600; }
.kalkyl label { display: block; margin: .5rem 0; }
.kalkyl input[type=number], .kalkyl select { display: block; font: inherit; padding: .35rem .5rem; width: 100%; max-width: 220px; border: 1px solid var(--linje); border-radius: 6px; margin-top: .15rem; }
.kalkyl small { display: block; color: var(--mjuk); }
.svar { max-width: 900px; margin-top: 1rem; }
.utfall { border: 2px solid var(--linje); border-radius: 10px; padding: .2rem 1rem .5rem; margin-bottom: .8rem; }
.utfall.ja { border-color: #8cc39d; background: #f4faf5; }
.utfall.nej { border-color: #e0a3a3; background: #fdf5f5; }
.utfall h2 { font-size: 1.15rem; }
.utfall ul { list-style: none; padding: 0; }
.utfall li.fel { color: var(--rod); font-weight: 600; }
.obs-ruta { background: var(--acc2); border-radius: 8px; padding: .6rem 1rem; }

@media (max-width: 720px) {
  article { padding: 1rem .9rem; }
  main { padding: .6rem; }
  article > h1 { font-size: 1.45rem; }
  .modeller thead { display: none; }
  .modeller, .modeller tbody, .modeller tr, .modeller td { display: block; width: 100%; }
  .modeller tr { border: 1px solid var(--linje); border-radius: 8px; padding: .5rem .8rem; margin-bottom: .7rem; }
  .modeller td { border: 0; padding: .15rem 0; }
  .modeller td[data-t]:not([data-t=""]):not([data-t="Modell"])::before { content: attr(data-t) ": "; color: var(--mjuk); font-size: .85rem; }
  .modeller .ink { max-width: none; }
}

/* grannmedgivandet */
.granne input:not([type=checkbox]) { display: block; font: inherit; padding: .35rem .5rem; width: 100%; border: 1px solid var(--linje); border-radius: 6px; margin-top: .15rem; }
.knappar button { font: inherit; padding: .55rem 1rem; border: 0; border-radius: 6px; background: var(--acc); color: #fff; cursor: pointer; }
.granne-dokument { white-space: pre-wrap; font-family: Georgia, serif; border: 1px solid var(--linje); border-radius: 8px; padding: 1.2rem; margin: 1rem 0; max-width: 900px; }
@media print {
  body.skriver * { visibility: hidden; }
  body.skriver .granne-dokument, body.skriver .granne-dokument * { visibility: visible; }
  body.skriver .granne-dokument { position: absolute; left: 0; top: 0; border: 0; color: #000; }
}