/*
 * TPB.se komponenter v1 (12 oktober 2026)
 * Läggs i temat, t.ex. assets/css/tpb-komponenter.css, och laddas på alla sidor.
 * Alla innehållsklasser har prefixet tpb- och ligger under wrappern .tpb-sida.
 * Färgerna definieras en gång här. Temat kan använda samma variabler för sidhuvud, sidfot och knappar.
 * Tillgänglighetsval i temat: lägg klassen tpb-stor eller tpb-kontrast på <html> (sparas i localStorage).
 */
:root{
--tpb-ink:#17242c;
--tpb-djup:#123c4a;
--tpb-djup2:#0c2d38;
--tpb-accent:#b0491b;
--tpb-papper:#f7f3ea;
--tpb-kort:#ffffff;
--tpb-linje:#d8cfbd;
--tpb-ljus:#e6f0f2;
--tpb-mjuk:#55646c;
--tpb-tom:#cfc6b2;
--tpb-lank:#0f5a73;
--tpb-lank-mork:#a9dcef;
--tpb-bas:1.0625rem;
--tpb-las:820px;
}
html.tpb-stor{--tpb-bas:1.25rem}
html.tpb-kontrast{--tpb-ink:#000000;--tpb-djup:#000000;--tpb-djup2:#000000;--tpb-accent:#8a2e00;--tpb-papper:#ffffff;--tpb-linje:#000000;--tpb-ljus:#ffffff;--tpb-mjuk:#000000;--tpb-tom:#555555;--tpb-lank:#00366e}
/* Grund */
.tpb-sida{font-size:var(--tpb-bas);line-height:1.75;color:var(--tpb-ink)!important;max-width:var(--tpb-las);margin:0 auto}
.tpb-sida p:empty{display:none!important}
.tpb-sida>br,.tpb-fig>br,.tpb-figyta>br,.tpb-alfa>br,.tpb-tk>br{display:none}
.tpb-sida p{margin:0 0 1.15em}
.tpb-sida h2{font-family:inherit;font-size:1.55em;line-height:1.25;color:var(--tpb-djup)!important;margin:2.1em 0 .7em;background:transparent!important;border:0!important}
.tpb-sida h3{font-family:inherit;font-size:1.2em;line-height:1.3;color:var(--tpb-djup)!important;margin:1.6em 0 .5em;background:transparent!important;border:0!important}
.tpb-sida a{color:var(--tpb-lank)!important;text-decoration:underline!important;text-underline-offset:.18em;text-decoration-thickness:1px}
.tpb-sida a:hover{color:var(--tpb-accent)!important;text-decoration-thickness:2px}
.tpb-sida a:visited{color:#3f4f86!important}
.tpb-sida ul,.tpb-sida ol{margin:0 0 1.2em;padding-left:1.4em}
.tpb-sida ul{list-style:disc!important}
.tpb-sida ol{list-style:decimal!important}
.tpb-sida li{margin:0 0 .4em}
.tpb-sida strong{color:inherit}
/* Ingress */
.tpb-ingress{font-size:1.18em;line-height:1.65;color:var(--tpb-ink)!important;border-left:5px solid var(--tpb-accent)!important;padding:4px 0 4px 22px;margin:0 0 1.6em!important}
/* Oberoende */
.tpb-obero{background:var(--tpb-ljus)!important;border:1px solid #c5d9de!important;border-radius:12px;padding:24px 28px;margin:0 0 28px}
.tpb-obero p:last-child{margin-bottom:0}
.tpb-obero-rubrik{font-weight:700;font-size:1.05em;color:var(--tpb-djup)!important;margin:0 0 6px!important}
/* Faktaruta, alltid 2x2 */
.tpb-fakta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none!important;padding:0!important;margin:0 0 30px!important}
.tpb-fakta li{list-style:none!important;background:var(--tpb-kort)!important;border:1px solid var(--tpb-linje)!important;border-top:4px solid var(--tpb-djup)!important;border-radius:4px 4px 12px 12px;padding:22px 24px;margin:0}
.tpb-fakta strong{display:block;font-size:1.8em;line-height:1.1;color:var(--tpb-djup)!important;margin:0 0 6px}
.tpb-fakta span{display:block;font-size:.95em;line-height:1.5;color:var(--tpb-mjuk)!important}
/* Kort, 2x2 */
.tpb-kort{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;list-style:none!important;padding:0!important;margin:0 0 30px!important}
.tpb-kort li{list-style:none!important;background:var(--tpb-kort)!important;border:1px solid var(--tpb-linje)!important;border-radius:14px;padding:24px 26px;margin:0}
.tpb-kort h3{margin:0 0 8px!important;font-size:1.1em}
.tpb-kort p{margin:0;font-size:.97em;line-height:1.65}
.tpb-mellan{font-weight:700;margin:0 0 12px!important}
/* Visste du att */
.tpb-vet{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;list-style:none!important;padding:0!important;margin:0 0 30px!important}
.tpb-vet li{list-style:none!important;background:var(--tpb-kort)!important;border:1px solid var(--tpb-linje)!important;border-left:4px solid var(--tpb-accent)!important;border-radius:0 14px 14px 0;padding:24px 28px;margin:0;line-height:1.65}
.tpb-vet li strong{display:block;color:var(--tpb-djup)!important;font-size:1.05em;margin:0 0 9px}
/* Steglista */
.tpb-steg{counter-reset:tpbsteg;list-style:none!important;padding:0!important;margin:0 0 28px!important}
.tpb-steg li{counter-increment:tpbsteg;list-style:none!important;position:relative;padding:4px 0 14px 58px;margin:0;min-height:44px}
.tpb-steg li::before{content:counter(tpbsteg);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--tpb-djup)!important;color:#ffffff!important;font-weight:700;display:flex;align-items:center;justify-content:center}
.tpb-steg li strong{color:var(--tpb-djup)!important}
/* Tidslinje */
.tpb-tid{list-style:none!important;padding:0!important;margin:0 0 26px!important;border-left:3px solid var(--tpb-linje)!important}
.tpb-tid li{list-style:none!important;position:relative;padding:0 0 18px 28px;margin:0}
.tpb-tid li::before{content:"";position:absolute;left:-10px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--tpb-accent)!important;border:3px solid var(--tpb-papper)!important}
.tpb-tid strong{display:block;color:var(--tpb-djup)!important;font-size:1.1em;line-height:1.3}
.tpb-tid span{display:block}
/* Figurer */
.tpb-fig{margin:6px 0 30px;padding:24px;background:var(--tpb-kort)!important;border:1px solid var(--tpb-linje)!important;border-radius:14px}
.tpb-figyta{display:flex;justify-content:center}
.tpb-figtext{font-size:.9em;line-height:1.55;color:var(--tpb-mjuk)!important;margin:14px 0 0!important;text-align:center}
.tpb-storcell{display:block;width:100%;max-width:230px;height:auto}
.tpb-cellram{fill:#fbfaf6!important;stroke:var(--tpb-linje)!important;stroke-width:2}
.tpb-dstor{fill:var(--tpb-ljus)!important;stroke:var(--tpb-djup)!important;stroke-width:3}
.tpb-dstortal{fill:var(--tpb-djup)!important;font-weight:700}
.tpb-mattfig{display:block;width:100%;max-width:480px;height:auto}
.tpb-mattpunkt{fill:var(--tpb-ink)!important}
.tpb-mattlinje{stroke:var(--tpb-accent)!important;stroke-width:2;fill:none!important}
.tpb-matttext{fill:var(--tpb-ink)!important;font-weight:600}
/* Alfabetet: tecken-kort med en liten cell */
.tpb-alfa-rubrik{font-weight:700;color:var(--tpb-djup)!important;margin:22px 0 10px!important}
.tpb-alfa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;list-style:none!important;padding:0!important;margin:0 0 18px!important}
.tpb-alfa-tre{grid-template-columns:repeat(3,92px);justify-content:center}
.tpb-tk{list-style:none!important;background:var(--tpb-kort)!important;border:1px solid var(--tpb-linje)!important;border-radius:10px;padding:10px 6px 9px;margin:0;text-align:center}
.tpb-fig .tpb-tk{background:#fbfaf6!important}
.tpb-tk-tecken{font-size:1.35em;font-weight:700;line-height:1.1;color:var(--tpb-djup)!important;margin:0 0 6px!important}
.tpb-tk-cell{display:flex;justify-content:center;gap:5px;margin:0 0 6px}
.tpb-alfa-tecken{grid-template-columns:repeat(4,minmax(0,1fr))}
.tpb-alfa-tecken .tpb-tk-pkt{font-size:.8em}
.tpb-cs{display:block;width:36px;height:53px}
.tpb-dp{fill:var(--tpb-ink)!important;stroke:var(--tpb-ink)!important;stroke-width:1}
.tpb-dt{fill:transparent!important;stroke:var(--tpb-tom)!important;stroke-width:1.6}
.tpb-dn{fill:var(--tpb-accent)!important;stroke:var(--tpb-accent)!important;stroke-width:1}
.tpb-tk-pkt{font-size:.74em;line-height:1.35;color:var(--tpb-mjuk)!important;margin:0!important}
/* Punktskrift som rad av små celler (tabeller) */
.tpb-brrad{display:inline-flex;flex-wrap:wrap;gap:3px 2px;align-items:center;vertical-align:middle}
.tpb-brrad .tpb-cs{width:20px;height:29px}
.tpb-brmell{display:inline-block;width:10px}
/* Verktyg (kortkoden [tpb_punktskrift] ligger i den här diven) */
.tpb-verktyg{margin:0 0 26px}
.tpb-verktyg>p:empty{display:none!important}
/* Tabeller */
.tpb-tw{margin:0 0 30px;border:1px solid var(--tpb-linje)!important;border-radius:12px;overflow:hidden;background:var(--tpb-kort)!important}
.tpb-sida table.tpb-tab{width:100%;border-collapse:collapse;margin:0!important;font-size:.97em;background:var(--tpb-kort)!important;border:0!important}
.tpb-sida table.tpb-tab th{background:var(--tpb-djup)!important;color:#ffffff!important;text-align:left;font-weight:700;padding:13px 18px;border:0!important;vertical-align:bottom}
.tpb-sida table.tpb-tab td{padding:15px 18px;border:0!important;border-top:1px solid var(--tpb-linje)!important;vertical-align:top;background:var(--tpb-kort)!important;color:var(--tpb-ink)!important}
.tpb-sida table.tpb-tab tr:nth-child(even) td{background:#fbfaf6!important}
@media (max-width:760px){
.tpb-tw{overflow:visible;border:0!important;background:transparent!important;border-radius:0}
.tpb-sida table.tpb-tab{min-width:0;display:block;width:100%;font-size:1em;background:transparent!important}
.tpb-sida table.tpb-tab thead{display:none}
.tpb-sida table.tpb-tab tbody{display:block}
.tpb-sida table.tpb-tab tr{display:block;background:var(--tpb-kort)!important;border:1px solid var(--tpb-linje)!important;border-left:4px solid var(--tpb-accent)!important;border-radius:0 12px 12px 0;padding:16px 20px 18px;margin:0 0 12px}
.tpb-sida table.tpb-tab td,.tpb-sida table.tpb-tab tr:nth-child(even) td{display:block;border:0!important;padding:11px 0 0;line-height:1.55;background:transparent!important}
.tpb-sida table.tpb-tab td:first-child{padding:0;font-size:1.12em;font-weight:700;line-height:1.3}
.tpb-sida table.tpb-tab td::before{content:attr(data-e);display:block;font-size:.72em;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin:0 0 3px;color:var(--tpb-mjuk)!important}
.tpb-sida table.tpb-tab td:first-child::before{display:none}
.tpb-sida table.tpb-tab td:empty{display:none}
}
/* Vanliga frågor (h2 Vanliga frågor + h3/p, schema från publicera.py) */
#faq{scroll-margin-top:90px}
#faq~h3{font-size:1.1em;margin:1.5em 0 .35em;padding-top:1.1em;border-top:1px solid var(--tpb-linje)!important}
/* Källor */
.tpb-kallor{margin:2.4em 0 0;padding:24px 28px;background:var(--tpb-kort)!important;border:1px solid var(--tpb-linje)!important;border-radius:12px;font-size:.92em}
.tpb-kallor h2{margin:0 0 .6em!important;font-size:1.3em}
.tpb-kallor ol{margin:0 0 12px;padding-left:1.3em}
.tpb-kallor li{overflow-wrap:anywhere;line-height:1.55}
.tpb-lasdatum{font-size:.92em;color:var(--tpb-mjuk)!important;margin:0!important}
/* Avslutning med internlänkar */
.tpb-slut{margin:28px 0 0;padding:24px 28px;background:var(--tpb-djup)!important;border-radius:14px;color:#ffffff!important}
.tpb-slut-rubrik{font-weight:700;color:#ffffff!important;margin:0 0 10px!important}
.tpb-slut ul{list-style:none!important;padding:0!important;margin:0!important}
.tpb-slut li{list-style:none!important;margin:0 0 8px}
.tpb-slut a,.tpb-slut a:visited{color:var(--tpb-lank-mork)!important;text-decoration:underline!important;font-weight:700}
.tpb-slut a:hover{color:#ffffff!important}
/* Mobil */
@media (max-width:760px){
.tpb-sida{font-size:calc(var(--tpb-bas) * .97)}
.tpb-ingress{font-size:1.1em;padding-left:16px}
.tpb-obero,.tpb-kallor,.tpb-slut,.tpb-fig{padding:20px}
.tpb-fakta{gap:10px}
.tpb-fakta li{padding:18px 16px}
.tpb-fakta strong{font-size:1.45em}
.tpb-kort,.tpb-vet{grid-template-columns:1fr}
.tpb-kort li,.tpb-vet li{padding:20px}
.tpb-alfa{gap:6px}
.tpb-tk{padding:8px 2px 7px}
.tpb-tk-tecken{font-size:1.2em}
.tpb-cs{width:30px;height:44px}
.tpb-tk-pkt{font-size:.68em}
.tpb-alfa-tecken{grid-template-columns:repeat(3,minmax(0,1fr))}
.tpb-alfa-tecken .tpb-tk-pkt{font-size:.74em}
.tpb-alfa-tre{grid-template-columns:repeat(3,80px)}
.tpb-sida h2{font-size:1.35em}
}
.tpb-tk-sub{display:block}