/* Portföljen v2: tidningen i två färglägen (data-tema på html).
Ljust är papper, mörkt är natttryck. Samma raster, samma typsnitt och samma data; bara ljuset byts. Sajten har
ljust som förval och mörkt bakom växeln Ljust/Mörkt (2026-10-05); konceptet byter ljus med upplagan.
Färgerna i graferna har en uppgift var: röd = nivåerna, blå = målet, magenta = optionerna,
grön och röd ljus = upp och ned (ihåliga och fyllda, så att formen bär skillnaden även utan färgseende).
Paletterna är prövade med dataviz-skillens validator (alla par, ljus och mörk yta). */
:root{
--serif:"Newsreader","Iowan Old Style",Georgia,serif;
--sans:"Libre Franklin","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
--gut:32px;--pad:40px;
/* rastret (2026-10-06): varje flerspaltig del står på 12 lika kolumner utan mellanrum, så att alla lodräta linjer
hamnar på samma tolftedelar av sidan; luften ligger som utfyllnad, lika mycket på båda sidor om varje linje */
--luft:16px;
}
html[data-tema="ljus"]{
color-scheme:light;
--paper:#EEEBE4;--box:#E5E1D7;--ink:#1B1A17;--ink-2:#47443D;--ink-3:#5F5B53;
--hair:#C8C3B8;--rule:#8C877C;--grid:#D8D3C8;
--pos:#1A6A3B;--neg:#A3231D;
--c-up:#1F7A45;--c-down:#A3231D;--c-regel:#A3231D;--c-mal:#2457C5;--c-opt:#A23A8F;--c-accent:#23408E;
--c-sma52:#5E5A52;--c-sma252:#A9A397;--c-kanal:rgba(27,26,23,.065);--c-kanalkant:rgba(27,26,23,.34);
--c-zon:rgba(27,26,23,.04);--c-wash:rgba(35,64,142,.11);--c-wash-neg:rgba(163,35,29,.10);
--c-opt-ut:rgba(162,58,143,.10);--c-opt-in:rgba(162,58,143,.24);
--grain:url("data:image/svg+xml;utf8,");
}
html[data-tema="mork"]{
color-scheme:dark;
--paper:#131A21;--box:#1A222B;--ink:#ECE7DE;--ink-2:#C4BEB3;--ink-3:#9C978E;
--hair:#2A343E;--rule:#5A6570;--grid:#222C36;
--pos:#6CCB8F;--neg:#F07167;
--c-up:#3FA968;--c-down:#E8603C;--c-regel:#E8603C;--c-mal:#5B8DEF;--c-opt:#C964B4;--c-accent:#9DB4FF;
--c-sma52:#BDB7AC;--c-sma252:#6F7A85;--c-kanal:rgba(236,231,222,.055);--c-kanalkant:rgba(236,231,222,.30);
--c-zon:rgba(236,231,222,.035);--c-wash:rgba(157,180,255,.13);--c-wash-neg:rgba(240,113,103,.12);
--c-opt-ut:rgba(201,100,180,.12);--c-opt-in:rgba(201,100,180,.28);
--grain:url("data:image/svg+xml;utf8,");
}
*{box-sizing:border-box}
/* webbläsaren ger figure 1em marginal över och under (17 px); sidan satte bara sidomarginalerna till noll, så graferna
fick 17 px luft som ingen hade valt: under huvud- och högerspalten och runt positionens graf (mätt 2026-10-06) */
figure{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;color:var(--ink);background-color:var(--paper);background-image:var(--grain);
font-family:var(--serif);font-optical-sizing:auto;font-size:17px;line-height:1.55;
text-rendering:optimizeLegibility;font-kerning:normal;transition:background-color .35s ease,color .35s ease}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.num{font-variant-numeric:tabular-nums lining-nums}
.sheet{max-width:1440px;margin:0 auto;padding:0 var(--pad) 48px}
.pos{color:var(--pos)} .neg{color:var(--neg)} .flat{color:var(--ink-2)}
.hans{font-style:italic}
.muted{color:var(--ink-3)}
.sans{font-family:var(--sans)}
/* ---------- toppraden: upplaga, språk, publik ---------- */
.topbar{display:flex;align-items:center;gap:16px;min-height:40px;border-bottom:1px solid var(--hair);font-family:var(--sans);font-size:12.5px;color:var(--ink-2)}
.topbar .tag{margin-right:auto;min-width:0}
.topbar .tag a{text-decoration:none}
.topbar .tag a:hover{text-decoration:underline}
.ctrls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.seg button,.solo{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1;padding:6px 10px;color:var(--ink-2);white-space:nowrap}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:hover:not([aria-pressed="true"]),.solo:hover{color:var(--ink);background:var(--box)}
.seg button:focus-visible,.solo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.solo{border:1px solid var(--rule);border-radius:3px;display:inline-flex;align-items:center;gap:7px}
.solo i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor}
.solo[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.solo[aria-pressed="true"] i{background:currentColor}
/* ---------- tidningshuvudet ---------- */
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:var(--gut);padding:14px 0 6px}
.ear{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ear.right{text-align:right}
.ear strong{color:var(--ink);font-weight:600}
.nameplate{font-family:var(--serif);font-weight:800;font-size:64px;line-height:.92;letter-spacing:-.025em;margin:0;font-variation-settings:"opsz" 72;text-align:center}
.nameplate a{text-decoration:none}
.rules{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);height:6px;margin-top:4px}
/* ---------- remsan ---------- */
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--ink)}
.cell{padding:7px var(--luft) 8px;border-left:1px solid var(--hair);min-width:0}
.cell:first-child{border-left:0;padding-left:0}
.cell:last-child{padding-right:0}
.cell .lab{font-family:var(--sans);font-size:12px;color:var(--ink-3);display:block}
.cell .val{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.15;display:block;letter-spacing:-.005em}
.cell:first-child .val{font-size:29px;line-height:1.05}
.cell .sub{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);display:block;margin-top:1px}
/* ---------- förstasidan: huvudspalt och högerspalt ---------- */
.front{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-bottom:1px solid var(--ink)}
.lead{grid-column:1 / span 8;min-width:0;padding:14px var(--luft) 0 0}
.rail{grid-column:9 / span 4;min-width:0;border-left:1px solid var(--hair);padding:14px 0 0 var(--luft)}
.lead h1{font-family:var(--serif);font-weight:700;font-size:44px;line-height:1.04;letter-spacing:-.018em;margin:0 0 12px;font-variation-settings:"opsz" 72;text-wrap:balance}
.lede{font-size:19px;line-height:1.52;margin:0;max-width:68ch;font-variation-settings:"opsz" 14;text-wrap:pretty}
.byline{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-top:9px}
.graphic{border-top:1px solid var(--hair);margin-top:14px;padding:10px 0 12px}
.ghead{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.ghead h2{font-family:var(--sans);font-weight:600;font-size:14px;margin:0}
.gsub{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin:2px 0 4px}
.rail .graphic:first-child{border-top:0;margin-top:0;padding-top:0}
/* högerspalten slutar på samma linje som huvudspalten: mätaren står överst, staplarna står mot spaltens fot och luften
hamnar mellan dem (förut 117–182 px tomt under staplarna, mätt 2026-10-06); minst 14 px mellan modulerna */
.rail{display:flex;flex-direction:column}
.rail .graphic:first-child{margin-bottom:14px}
.rail .graphic + .graphic{margin-top:auto}
/* 2026-10-07, ägarens ord: "webbsidan känns lite inzoomad, kan vi zooma ut typ 10-15%", så att första skärmen når ned
till Talen bakom kurvan och linjen under raden. I Chrome 1512 × 771 stod linjen 891 px ned; 0,85 lägger den på 757.
Bara breda skärmar: surfplatta och mobil behåller storleken. Muspositionerna räknas som andelar av getBoundingClientRect
och följer med zoomen; räkneverket i wow.js delar med currentCSSZoom. Luften i högerspalten (104 px under mätarens
förklaring, skärmbilden 13:38; delad lika syntes den fortfarande 13:56) fylls av mätaren och staplarna: mätarens
yta växer med spaltens lediga höjd och ritningen (264 × 180 enheter, cx och cy oförändrade för wow.js) skalas upp
högst 1,2 gånger, eftersom linjer och text växer med ritningen (1,5 gånger såg klumpig ut), och staplarnas rader
får 13 px emellan. Det som blir över står jämnt över och under mätaren; höjden följer dagens rubrik och ingress. */
@media (min-width:1181px){
html{zoom:.85}
.rail .graphic:first-child{flex:1 0 auto;display:flex;flex-direction:column}
.rail .graphic:first-child .chartwrap{flex:1 1 auto;min-height:180px}
.rail .graphic:first-child .chartwrap svg{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:317px;max-height:216px}
.rail .bars{gap:13px}
}
.chartwrap{position:relative}
.chartwrap svg{display:block;width:100%;overflow:visible}
.chartwrap:focus-within{outline:2px solid var(--ink);outline-offset:4px}
.keys{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--sans);font-size:12px;color:var(--ink-2);margin:4px 0 0}
.keys span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.keys b{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.gauge-note{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin:6px 0 0;line-height:1.45}
/* staplarna per position */
.bars{display:grid;gap:6px;margin-top:8px}
.barrow{display:grid;grid-template-columns:8.6em minmax(0,1fr) 5.6em;align-items:center;gap:10px;font-family:var(--sans);font-size:13px}
.barrow .v{text-align:right;font-family:var(--serif);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.barrow svg{display:block;width:100%;height:14px;overflow:visible}
/* ---------- puffar ---------- */
.desk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--ink)}
.story{position:relative;padding:12px var(--luft) 12px;border-left:1px solid var(--hair);min-width:0}
.story:first-child{border-left:0;padding-left:0}
.story:last-child{padding-right:0}
/* (2026-10-14) puffarnas plats i raden sätts av radPlatser() i tidning.js, så att rasterreglerna gäller för varje antal
innehav: rader om fem på 60 kolumner, och en sista rad med färre puffar delar hela bredden lika (nio innehav: fem och
fyra, förut en tom ruta sist och en kantlinje vid sidans vänstra kant på andra raden) */
@media (min-width:1181px){
.desk{grid-template-columns:repeat(60,minmax(0,1fr))}
.story{grid-column:span 12}
.story[data-bs="15"]{grid-column:span 15}
.story[data-bs="20"]{grid-column:span 20}
.story[data-bs="30"]{grid-column:span 30}
.story[data-bs="60"]{grid-column:span 60}
.story[data-b]{border-left:1px solid var(--hair);padding-left:var(--luft);padding-right:var(--luft)}
.story[data-b^="f"]{border-left:0;padding-left:0}
.story[data-b$="l"]{padding-right:0}
.story[data-bt="1"]{border-top:1px solid var(--hair)}
/* fler än sex innehav (2026-10-14): staplarna tätare och mätarens minsta yta 164 px i stället för 180, så att
högerspalten inte blir längre än huvudspalten; kalendern i två spalter när den har fler än fem rader */
.rail .bars.tata{gap:4px}
.rail:has(.bars.tata) .graphic:first-child .chartwrap{min-height:164px}
.lower .callist.tva{columns:2;column-gap:var(--gut)}
.lower .callist.tva li{break-inside:avoid}
}
/* puffens sex delar (namn, innehav, rubrik med text, graf, fot, fakta) står på samma rader i alla puffar i en rad:
rubrikerna börjar på samma linje och graferna och fötterna står på samma linje, hur lång texten än är */
@supports (grid-template-rows:subgrid){
.story{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
}
.kicker{font-family:var(--sans);font-size:12.5px;font-weight:600;margin:0}
.held{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin:1px 0 6px;line-height:1.35}
.story h3{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.12;margin:0 0 6px;letter-spacing:-.008em;font-variation-settings:"opsz" 36;text-wrap:balance}
.story h3 a{text-decoration:none}
.story h3 a::after{content:"";position:absolute;inset:0}
.story:hover h3 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.quote{font-style:italic;font-size:15px;line-height:1.38;color:var(--ink-2);margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spark{display:block;width:100%;height:32px}
.st{white-space:nowrap;font-family:var(--sans);font-size:12px}
.st .sym{font-size:10.5px;margin-right:4px;position:relative;top:-1px}
.st.ok .sym{color:var(--pos)} .st.bad .sym{color:var(--neg)}
.storyfoot{display:flex;justify-content:space-between;gap:8px;font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin-top:4px}
.facts{display:none;grid-template-columns:5em 1fr;gap:3px 8px;margin:8px 0 0;font-size:14.5px;line-height:1.35}
.facts dt{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);padding-top:2px}
.facts dd{margin:0;min-width:0}
.sub2{color:var(--ink-3);font-size:12.5px;font-family:var(--sans)}
/* ---------- i korthet, kalendern, marknaderna ---------- */
/* huvudspalt och sidospalt som förstasidan ovanför (8 + 4): I korthet och Kalendern under varandra till vänster,
Marknaderna till höger, och linjen mellan dem står i samma lodlinje som högerspaltens. Förut tre spalter där
I korthet slutade 216 px före raden (mätt 2026-10-06); mätt med dagens innehåll slutar spalterna nu
inom 14 px från varandra, och högst 48 px isär med en kalenderrad mer eller mindre. Samma rubriknivå i alla tre. */
.lower{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;border-bottom:1px solid var(--ink)}
.lower > section{min-width:0;padding:12px var(--luft) 14px}
.lower > .brief{grid-column:1 / span 8;grid-row:1;padding-left:0;padding-bottom:0}
.lower > .calendar{grid-column:1 / span 8;grid-row:2;padding-left:0;padding-top:20px}
.lower > .markets{grid-column:9 / span 4;grid-row:1 / span 2;border-left:1px solid var(--hair);padding-right:0}
.brief .lines{columns:2;column-gap:var(--gut)}
.brief .lines p{break-inside:avoid}
.lower .markets table.t td{padding:6px 0}
/* listornas sista rad har redan 6 px luft under sig; sektionens egen utfyllnad gav 26 px till linjen mot 15–16 px i
remsan, förstasidan och puffarna (optiskt mätt 2026-10-06) */
.lower > .calendar,.lower > .markets{padding-bottom:4px}
.lower h2{font-family:var(--serif);font-weight:700;font-size:22px;margin:0 0 8px;font-variation-settings:"opsz" 36}
.brief .lines p{margin:0 0 6px;font-size:17px;line-height:1.5}
.brief .lines p:last-child{margin-bottom:0}
.callist{list-style:none;margin:0;padding:0}
.callist li{display:grid;grid-template-columns:4.4em 1fr;gap:10px;border-bottom:1px solid var(--hair);padding:6px 0;font-size:15px;line-height:1.4}
/* listans sista rad har ingen egen linje: sektionens linje en bit under blev annars en dubbellinje */
.callist li:last-child,.lower table.t tr:last-child td{border-bottom:0}
.callist time{font-variant-numeric:tabular-nums lining-nums;font-weight:700}
table.t{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums lining-nums}
table.t th{font-family:var(--sans);font-weight:600;font-size:11.5px;color:var(--ink-3);text-align:right;border-bottom:1px solid var(--ink);padding:3px 0 4px}
table.t th:first-child,table.t td:first-child{text-align:left}
table.t td{border-bottom:1px solid var(--hair);padding:4px 0;text-align:right}
table.t td+td,table.t th+th{padding-left:10px}
/* ---------- börslistan ---------- */
.listwrap{border-bottom:3px solid var(--ink);padding-bottom:8px}
.listhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:9px 0 2px}
.listhead h2{font-family:var(--serif);font-size:22px;font-weight:700;margin:0;font-variation-settings:"opsz" 36}
.listhead p{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);margin:0;text-align:right;max-width:110ch}
table.list{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.25}
table.list th{font-family:var(--sans);font-weight:600;font-size:11.5px;color:var(--ink-3);text-align:right;padding:5px 0 5px 10px;border-bottom:1px solid var(--ink);vertical-align:bottom;white-space:nowrap}
table.list td{padding:5px 0 5px 10px;border-bottom:1px solid var(--hair);text-align:right;vertical-align:top;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
table.list tr:last-child td{border-bottom:0}
table.list th:first-child,table.list td:first-child{text-align:left;padding-left:0}
table.list .l{text-align:left}
table.list .s{display:block;font-family:var(--sans);font-size:11px;color:var(--ink-3);line-height:1.3;margin-top:1px}
table.list td.wrap{white-space:normal;max-width:16em}
table.list .nm{font-weight:600}
table.list .nm a{text-decoration:none}
table.list .nm a:hover{text-decoration:underline}
/* ---------- sidfot ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:12px 0 0;font-family:var(--sans);font-size:12px;color:var(--ink-3)}
.foot a{color:var(--ink-2)}
/* ---------- verktygstips ---------- */
.tip{position:absolute;pointer-events:none;background:var(--paper);border:1px solid var(--ink);padding:7px 10px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink-2);white-space:nowrap;opacity:0;transition:opacity .12s;z-index:5;box-shadow:2px 2px 0 var(--c-kanal)}
.tip.on{opacity:1}
.tip .d{color:var(--ink);font-weight:600;margin-bottom:2px}
.tip b{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tip .k{display:inline-block;width:12px;height:0;border-top:2px solid;vertical-align:middle;margin-right:6px}
details.numbers{margin-top:8px;font-family:var(--sans);font-size:12.5px}
details.numbers summary{cursor:pointer;color:var(--ink-2)}
details.numbers table{margin-top:8px;max-width:760px}
/* ---------- positionssidan ---------- */
.posnav{display:flex;gap:0;border-bottom:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.posnav::-webkit-scrollbar{display:none}
.posnav a{display:flex;flex-direction:column;gap:1px;padding:9px 0 8px;margin-right:36px;text-decoration:none;font-family:var(--sans);font-size:12px;color:var(--ink-3);border-bottom:3px solid transparent;white-space:nowrap}
.posnav a:last-child{margin-right:0}
.posnav a b{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink-2)}
.posnav a[aria-current="page"]{border-bottom-color:var(--ink)}
.posnav a[aria-current="page"] b{color:var(--ink)}
.posnav a:hover b{color:var(--ink)}
.article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.ahead{grid-column:1 / span 9;padding:18px 0 10px;min-width:0}
.ahead .kick{font-family:var(--sans);font-size:13px;font-weight:600;margin:0 0 6px}
.ahead .kick span{font-weight:400;color:var(--ink-3)}
.ahead h1{font-family:var(--serif);font-weight:700;font-size:46px;line-height:1.04;letter-spacing:-.018em;margin:0 0 10px;font-variation-settings:"opsz" 72;text-wrap:balance}
.dek{font-size:20px;line-height:1.5;margin:0;color:var(--ink-2);max-width:66ch}
/* siffrorna slutar i sektionslinjen (svart) i stället för en egen tunn linje 11 px ovanför den */
.figs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--ink);margin-top:6px}
.figs > div{padding:7px var(--luft) 8px;border-left:1px solid var(--hair);min-width:0}
.figs > div:first-child{border-left:0;padding-left:0}
.figs > div:last-child{padding-right:0}
.figs .lab{font-family:var(--sans);font-size:12px;color:var(--ink-3);display:block}
.figs .val{font-size:21px;font-weight:600;line-height:1.2;display:block}
.figs .sub{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);display:block}
.bigchart{grid-column:1 / -1;padding:12px 0 6px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--sans);font-size:12px;color:var(--ink-2);margin:0 0 6px}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend svg{flex:none;overflow:visible}
.caption{font-size:15.5px;line-height:1.5;color:var(--ink-2);margin:8px 0 0;max-width:100ch}
.caption b{color:var(--ink)}
.twocol{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding-top:14px}
.yours{grid-column:1 / span 6;min-width:0;padding-right:var(--luft)}
.check{grid-column:7 / span 6;border-left:1px solid var(--hair);padding-left:var(--luft);min-width:0}
.yours h2,.check h2,.plan h2,.optbox h2{font-family:var(--sans);font-size:13px;font-weight:700;margin:0 0 9px}
.yours dl{margin:0;display:grid;grid-template-columns:9em 1fr;gap:7px 12px}
.yours dt{font-family:var(--sans);font-size:12px;color:var(--ink-3);padding-top:3px}
.yours dd{margin:0;font-style:italic;font-size:16px;line-height:1.42}
.yours dd .plain{font-style:normal}
.yours dd .empty{font-style:normal;color:var(--ink-3)}
.check ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check li{display:grid;grid-template-columns:8.8em 1fr;gap:12px;font-size:15.5px;line-height:1.45}
.verdict{font-family:var(--sans);font-size:12px;font-weight:700;padding-top:3px}
.verdict.ok{color:var(--pos)} .verdict.na{color:var(--ink-3)} .verdict.bad{color:var(--neg)}
.check q{font-style:italic;quotes:"”" "”"}
.lowerpos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:18px;border-bottom:3px solid var(--ink)}
.plan{grid-column:1 / span 6;min-width:0;padding:14px var(--luft) 16px 0}
.plan-body > div{border-bottom:1px solid var(--hair);padding:7px 0}
.plan-body > div:first-child{border-top:1px solid var(--hair)}
/* den sista rutans tunna linje stod 17 px ovanför den tjocka slutlinjen, som en dubbellinje */
.plan-body > div:last-child{border-bottom:0;padding-bottom:0}
.plan b{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-3);font-weight:600}
.plan p{margin:2px 0 0;font-style:italic;font-size:17px;line-height:1.45}
.plan p.empty{font-style:normal;color:var(--ink-3)}
.optbox{grid-column:7 / span 6;border-left:1px solid var(--hair);padding:14px 0 16px var(--luft);min-width:0}
.optbox p{margin:0 0 8px;font-size:16px;line-height:1.5}
.marks{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.mark{font-family:var(--sans);font-size:11.5px;font-weight:600;border:1px solid var(--rule);border-radius:3px;padding:2px 7px;color:var(--ink-2)}
.mark.warn{border-color:var(--neg);color:var(--neg)}
/* ---------- metodsidan ---------- */
.mhead{padding:22px 0 12px;border-bottom:1px solid var(--ink)}
.mhead h1{font-family:var(--serif);font-weight:700;font-size:48px;line-height:1.04;letter-spacing:-.018em;margin:0 0 10px;font-variation-settings:"opsz" 72}
.mhead p{font-size:20px;line-height:1.5;margin:0;max-width:64ch;color:var(--ink-2)}
/* texten står i kolumn 4–9: mitt under namnskylten och under Om-kolumnernas två mittersta; innehållet i kolumn 1–3 */
.mbody{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding-top:6px}
.toc{grid-column:1 / span 3;position:sticky;top:12px;align-self:start;font-family:var(--sans);font-size:13px;padding-top:21px}
/* padding-top 21 (förut 16): innehållets första rad står på samma baslinje som första avsnittets rubrik (mätt 5 px isär) */
.mbody > #metod{grid-column:4 / span 6;padding:0 var(--luft);min-width:0}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--ink);text-decoration:underline}
.msec{border-bottom:1px solid var(--hair);padding:16px 0 18px}
.msec h2{font-family:var(--serif);font-weight:700;font-size:26px;line-height:1.15;margin:0 0 8px;font-variation-settings:"opsz" 48}
.msec p{margin:0 0 10px;font-size:17.5px;line-height:1.58}
.msec ul{margin:0 0 10px;padding-left:1.1em}
.msec li{margin:0 0 6px;font-size:17px;line-height:1.5}
.msec table.t{margin:6px 0 12px;font-size:15px}
.msec .src{font-family:var(--sans);font-size:12.5px;color:var(--ink-3)}
.msec code{font-family:var(--sans);font-size:14px;background:var(--box);padding:0 4px;border-radius:2px}
/* sista stycket behåller inte sin marginal: 35 px luft ovanför avsnittslinjen mot 17 px under den blev 25 mot 17 */
.msec > :last-child,.msec > ul:last-child > li:last-child{margin-bottom:0}
/* ---------- rörelse: rubriken trycks och kurvan ritas, en gång ---------- */
@media (prefers-reduced-motion:no-preference){
.lead h1,.lede,.ahead h1{animation:ink .7s ease-out both}
.lede{animation-delay:.12s}
@keyframes ink{from{opacity:0;filter:blur(1.5px)}to{opacity:1;filter:none}}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1s .2s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){body{transition:none}}
/* ---------- smalare skärmar ---------- */
@media (max-width:1180px){
.strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell:nth-child(3n+1){border-left:0;padding-left:0}
.cell:nth-child(3n){padding-right:0}
.cell:nth-child(n+4){border-top:1px solid var(--hair)}
.lead{grid-column:1 / -1;padding-right:0}
/* mätaren och staplarna sida vid sida, med linjen mellan dem som linjerna i resten av sidan */
.rail{grid-column:1 / -1;border-left:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair);margin-top:14px}
.rail .graphic,.rail .graphic:first-child{border-top:0;margin:0;padding:12px var(--luft) 12px 0}
.rail .graphic + .graphic{border-left:1px solid var(--hair);margin:0;padding:12px 0 12px var(--luft)}
/* puffarna på sex kolumner i rader om tre; blir två eller fyra över står de som halva rader överst (fem: de två
största på halva bredden och tre under), så att ingen rad har en tom del. Platserna sätts av radPlatser() i
tidning.js (2026-10-14; förut nth-child-regler för exakt fem, och med nio stod den sista ensam) */
.desk{grid-template-columns:repeat(6,minmax(0,1fr))}
.story{grid-column:span 2}
.story[data-ts="3"]{grid-column:span 3}
.story[data-ts="6"]{grid-column:span 6}
.story,.story:first-child,.story:last-child{border-left:1px solid var(--hair);padding:12px var(--luft) 14px;border-top:0}
.story[data-t^="f"]{border-left:0;padding-left:0}
.story[data-t$="l"]{padding-right:0}
.story[data-tt="1"]{border-top:1px solid var(--hair)}
.facts{display:grid}
.listwrap{display:none}
/* I korthet över hela bredden med raderna i två spalter; under den Kalendern (5) och Marknaderna (7): kalendern blir
smalare och därmed längre, så att de två slutar närmare varandra (mätt: högst 72 px isär mot 114 px med 6 + 6) */
.lower{grid-template-rows:auto auto}
.lower > .brief{grid-column:1 / -1;padding:12px 0 14px;border-bottom:1px solid var(--hair)}
.lower > .calendar{grid-column:1 / span 5;grid-row:2;padding:12px var(--luft) 4px 0}
.lower > .markets{grid-column:6 / span 7;grid-row:2}
.lower .markets table.t td{padding:4px 0}
.ahead{grid-column:1 / -1}
.figs{grid-template-columns:repeat(3,minmax(0,1fr))}
.figs > div:nth-child(3n+1){border-left:0;padding-left:0}
.figs > div:nth-child(3n){padding-right:0}
.figs > div:nth-child(n+4){border-top:1px solid var(--hair)}
.mbody > #metod{grid-column:4 / -1;padding-right:0}
.msec{max-width:72ch}
}
@media (max-width:760px){
:root{--pad:16px;--gut:16px;--luft:14px}
body{font-size:16px}
.topbar{flex-wrap:wrap;gap:6px 10px;padding:6px 0}
.topbar .tag{flex-basis:100%}
.ctrls{justify-content:flex-start;gap:8px}
.masthead{grid-template-columns:1fr;gap:4px;text-align:center}
.ear,.ear.right{text-align:center}
.ear.left{order:2} .ear.right{order:3}
.nameplate{font-size:50px;order:1}
/* remsan: avkastningen över hela bredden, sedan två och två; går resten inte jämnt ut tar den sista hela bredden,
så att ingen rad har en tom halva */
.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell,.cell:first-child{border-left:0;padding-left:0;padding-right:var(--luft);border-top:1px solid var(--hair)}
.cell:first-child{grid-column:1 / -1;border-top:0;padding-right:0}
.cell:nth-child(odd):not(:first-child){border-left:1px solid var(--hair);padding-left:var(--luft);padding-right:0}
.cell:last-child:nth-child(even){grid-column:1 / -1;padding-right:0}
.lead h1{font-size:33px}
.lede{font-size:17.5px}
.rail{grid-template-columns:minmax(0,1fr)}
.rail .graphic,.rail .graphic:first-child{padding:12px 0}
.rail .graphic + .graphic{border-left:0;border-top:1px solid var(--hair);padding:12px 0}
.desk{grid-template-columns:1fr}
.story,.story:nth-child(n){grid-column:1 / -1;border-left:0;padding:14px 0;border-top:1px solid var(--hair)}
.story:first-child{border-top:0}
.quote{-webkit-line-clamp:unset;display:block}
.brief .lines{columns:auto}
.lower > .calendar,.lower > .markets{grid-column:1 / -1;grid-row:auto;border-left:0;padding-left:0;padding-right:0}
.lower > .markets{border-top:1px solid var(--hair)}
.ahead h1{font-size:34px}
.dek{font-size:18px}
.figs{grid-template-columns:repeat(2,minmax(0,1fr))}
.figs > div,.figs > div:first-child{border-left:0;padding-left:0;padding-right:var(--luft);border-top:1px solid var(--hair)}
.figs > div:nth-child(even){border-left:1px solid var(--hair);padding-left:var(--luft);padding-right:0}
.figs > div:nth-child(-n+2){border-top:0}
.yours,.check,.plan,.optbox{grid-column:1 / -1}
.yours,.plan{padding-right:0}
.check,.optbox{border-left:0;padding-left:0;margin-top:16px}
.mbody > #metod{grid-column:1 / -1;padding:0}
.toc{grid-column:1 / -1}
.check li{grid-template-columns:1fr;gap:2px}
.yours dl{grid-template-columns:1fr;gap:0}
.yours dt{padding-top:8px}
.mbody{grid-template-columns:minmax(0,1fr)}
.toc{position:static;padding-top:10px}
.toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
.mhead h1{font-size:36px}
.mhead p{font-size:18px}
.listhead{flex-direction:column}
.listhead p{text-align:left}
}
/* ---------- bloggen (publikläget): notisen, Senaste, källorna och Om-kolumnerna ---------- */
/* notisen går över hela bredden (2026-10-06): texten till vänster i läsbar bredd, knapparna längst till höger i höjd
med sista raden; förut slutade rutan vid 74 tecken och lämnade halva raden tom */
.notis{border:1px solid var(--ink);background:var(--box);padding:14px 18px 12px;margin:12px 0 4px;display:grid;grid-template-columns:minmax(0,74ch) auto;justify-content:space-between;align-items:end;column-gap:var(--gut)}
.notis > h2,.notis > p{grid-column:1}
.notis > .notis-rad{grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:center}
.notis h2{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.15;margin:0 0 4px;font-variation-settings:"opsz" 48}
.notis p{margin:0;font-size:16.5px;line-height:1.5}
.notis .notis-rad{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px;font-family:var(--sans);font-size:13px}
.notis button{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1;padding:8px 16px;background:var(--ink);color:var(--paper)}
.notis button:focus-visible,.notis a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.notis a{color:var(--ink-2)}
.senaste{font-size:14.5px;line-height:1.42;color:var(--ink-2);margin:0 0 6px}
.plan p.plain{font-style:normal}
.kallor{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin:8px 0 0;line-height:1.5}
/* källraden i Senaste ärvde .plan p (kursiv 17 px, starkare regel) och såg ut som brödtext; nu som källor överallt */
.plan p.kallor{font-style:normal;font-size:12px;line-height:1.5;margin-top:8px}
.kallor a{color:var(--ink-2)}
.optbox p.muted a,.msec .src a{color:var(--ink-2)}
/* positionssidan, publikt: tankarna i bloggformat i stället för kortets fält och faktakollen */
.twocol.blogg .yours,.twocol.blogg .check{display:none}
/* publikt (2026-10-06): tankarna över hela bredden (förut två tredjedelar med resten tom), sedan Senaste (5) och
riktkursen (7) med gemensam överkant, som förut. Två blinda granskningar (Codex) föredrog 5 + 7 framför både
tankar + senaste mot riktkursen och 4 + 8: Senaste behöver bredden, och spalterna slutar mer lika. */
.twocol.blogg{grid-column:1 / -1;grid-row:4;display:block;padding:14px 0 0}
.twocol.blogg ~ .lowerpos{display:contents}
.twocol.blogg ~ .lowerpos > .plan,.twocol.blogg ~ .lowerpos > .optbox{grid-row:5;margin-top:6px;padding-bottom:12px;border-top:1px solid var(--ink);border-bottom:3px solid var(--ink)}
#opt-body > :last-child{margin-bottom:0}
.twocol.blogg ~ .lowerpos > .plan{grid-column:1 / span 5}
.twocol.blogg ~ .lowerpos > .optbox{grid-column:6 / span 7}
.tankar{grid-column:1 / span 8;min-width:0}
.tankar h2{font-family:var(--sans);font-size:13px;font-weight:700;margin:0 0 9px}
.tankar .post{border-top:1px solid var(--hair);padding:7px 0 6px}
.tankar .post + .post{margin-top:4px}
.tankar time{display:block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-3)}
.tankar .post p{margin:3px 0 0;font-size:17px;line-height:1.5;max-width:68ch}
.tankar .empty{margin:0;color:var(--ink-3)}
.om-kol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ink)}
/* Läs mer står längst ned i varje kolumn, på samma linje i hela raden */
.om-kol > div{padding:14px var(--luft) 16px;border-left:1px solid var(--hair);min-width:0;display:flex;flex-direction:column}
.om-kol > div:first-child{border-left:0;padding-left:0}
.om-kol > div:last-child{padding-right:0}
.om-kol > div > a{margin-top:auto;align-self:flex-start}
.om-kol h2{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.15;margin:0 0 6px;font-variation-settings:"opsz" 36}
.om-kol p{margin:0 0 8px;font-size:16px;line-height:1.5}
.om-kol a{font-family:var(--sans);font-size:13px;color:var(--ink-2)}
@media (max-width:1180px){
.om-kol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* positionssidan, publikt, under 920 px: Senaste blir på fyra tolftedelar för smal för brödtext (213–257 px), så
Senaste och riktkursen står under varandra över hela bredden, som i mobilen */
@media (max-width:919px){
.twocol.blogg ~ .lowerpos > .plan,.twocol.blogg ~ .lowerpos > .optbox{grid-column:1 / -1}
.twocol.blogg ~ .lowerpos > .plan{padding-right:0;border-bottom:0}
.twocol.blogg ~ .lowerpos > .optbox{grid-row:6;margin-top:0;padding-left:0;border-left:0;border-top:1px solid var(--hair)}
.twocol.blogg ~ .lowerpos > .plan .plain,.twocol.blogg ~ .lowerpos > .optbox p{max-width:68ch}
.om-kol > div:nth-child(3){border-left:0;padding-left:0}
.om-kol > div:nth-child(2n){padding-right:0}
.om-kol > div:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media (max-width:760px){
.tankar{grid-column:1 / -1}
/* publikt: tankarna, senaste och riktkursen under varandra; den tjocka linjen bara under den sista. Står här, efter
grundreglerna ovan, eftersom de har samma specificitet (i det första mobilblocket vann grundreglerna) */
.twocol.blogg,.twocol.blogg ~ .lowerpos > .plan,.twocol.blogg ~ .lowerpos > .optbox{grid-column:1 / -1;grid-row:auto}
.twocol.blogg{padding-right:0}
.twocol.blogg ~ .lowerpos > .plan{padding-right:0;border-bottom:0}
.twocol.blogg ~ .lowerpos > .optbox{margin-top:0;padding-left:0;border-left:0;border-top:1px solid var(--hair)}
.notis{padding:12px 14px;grid-template-columns:minmax(0,1fr)}
.notis > .notis-rad{grid-column:1;grid-row:auto;margin-top:10px}
.om-kol{grid-template-columns:1fr}
.om-kol > div,.om-kol > div:nth-child(3){border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--hair)}
.om-kol > div:first-child{border-top:0}
}
/* ---------- inställningarna (2026-10-05 kväll): en liten knapp i stället för raden, panelen öppnas vid klick ---------- */
.ctrls{position:relative}
.ctrls .ctrl-blogg{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding:1px 0}
.ctrls .ctrl-blogg:hover{border-bottom-color:transparent}
.inst-knapp{all:unset;box-sizing:border-box;cursor:pointer;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);border:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.inst-knapp:hover,.inst-knapp[aria-expanded="true"]{color:var(--ink);border-color:var(--rule);background:var(--box)}
.inst-knapp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.inst-knapp svg{width:15px;height:15px;display:block}
.inst-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:12px 14px;display:grid;gap:10px;min-width:232px;box-shadow:0 12px 32px rgba(0,0,0,.14);font-family:var(--sans)}
.inst-panel[hidden]{display:none}
.inst-panel .rad{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:12px;color:var(--ink-2)}
.fotval{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:2px;color:inherit}
.fotval:hover{color:var(--ink)}
.fotval:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:760px){
.topbar:has(.inst-knapp){flex-wrap:nowrap;align-items:flex-start}
.topbar:has(.inst-knapp) .tag{flex:1 1 auto;flex-basis:auto}
.topbar:has(.inst-knapp) .ctrls{justify-content:flex-end}
}
/* Förhandstexten (2026-10-08): sidornas text i HTML för sökrobotar som inte kör JavaScript (bygget skriver in den).
Läsaren med JavaScript ser aldrig den: klassen har-js sätts i huvudet före första målningen. */
html.har-js .forhand { display: none; }
.forhand { max-width: 760px; margin: 0 auto; padding: 20px 16px 28px; }
.forhand h1 { font-family: var(--serif); font-size: 34px; line-height: 1.1; margin: 0 0 12px; }
.forhand h2 { font-family: var(--sans); font-size: 16px; margin: 22px 0 6px; }
.forhand h3 { font-family: var(--sans); font-size: 14px; margin: 16px 0 4px; }
.forhand p, .forhand li { font-size: 17px; line-height: 1.55; }