/* Materialräknaren: one typography and control system, calculator through account. */
/* Kalkfix: "Vad kostar det?"-blockets stil, ordagrant flyttad ur hubbens inline-CSS (hubbens gzip-tak). Står först, som förut före den här filen. */
.vk{margin:12px 0 0}.vk .vkunder{margin:6px 0 0;font-size:13px;color:var(--ink2)}#vk_out{margin-top:12px}#vk_out .vkpris{font-family:"Barlow Condensed",sans-serif;font-size:34px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}#vk_out .vkpris small{display:block;font:600 14px Barlow,sans-serif;color:var(--ink2);margin:4px 0 0;letter-spacing:.02em}#vk_out .vkmitt{margin:4px 0 0;font-size:15px;color:var(--ink)}#vk_out .vkvarn{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--gul)}#vk_out .note{font-size:13px;line-height:1.45;color:var(--ink2);margin:10px 0 0}#vk_out details.notes{margin-top:10px}#vk_out .vkgrp{margin:2px 0 8px}#vk_out .vkgrp small{display:block;font-size:13px;color:var(--ink2);margin:6px 0 2px}#vk_out .vkgrp ul{list-style:none;margin:0;padding:0}#vk_out .vkgrp li{font-size:14px;line-height:1.35;padding:2px 0}#vk_out .str{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--ink2)}
:root{--mr-font:Barlow,system-ui,sans-serif;--mr-heading:"Barlow Condensed",Barlow,sans-serif;--mr-body:16px;--mr-control:14px;--mr-small:13px;--mr-label:13px;--mr-heading-size:22px;--mr-touch:44px;--mr-shell:1080px;--mr-bar-h:0px}
html{scroll-padding-top:calc(var(--mr-bar-h) + 16px)}
body{font-family:var(--mr-font);font-size:var(--mr-body);line-height:1.45}
body>header,body>main,body>footer,.wrap{max-width:var(--mr-shell);margin-inline:auto}
body header h1,body header h1.fit,body header .rubrik{font:700 clamp(22px,7vw,34px)/1.1 var(--mr-heading);letter-spacing:.01em;text-transform:uppercase;white-space:normal}
header small{font:500 12px/1.45 var(--mr-font);letter-spacing:.08em}
h2,.calc h2,.bd h2,.jobs h2,.mrpro :is(h2,h3),#mrk_feedback h2{font:700 var(--mr-heading-size)/1.2 var(--mr-heading);letter-spacing:.02em;text-transform:uppercase}
:is(.act,.mrpro .act,.mrk .act,.mrpro #mrpro_enheter .act,.mr-appbar .act){font:600 var(--mr-control)/1.3 var(--mr-font);text-transform:none;letter-spacing:0;min-height:var(--mr-touch);padding:8px 12px;border-radius:var(--radius,6px);justify-content:center}
:is(.in input,.in select,.mrpro td input:not([type=checkbox]),#mrk_feedback textarea){font:500 var(--mr-body)/1.45 var(--mr-font);min-height:var(--mr-touch);padding:9px 10px}
:is(label,.mrpro label.lbl){font:600 var(--mr-label)/1.4 var(--mr-font);letter-spacing:0;text-transform:none;color:var(--ink2)}
:is(.note,.disc,.calc p.lead,.bd-grid button span,.jobs .job span,.mrpro .status,.mrpro .note,.mrpro .pro-kontext .status,.mrpro .pro-kontext .note,.mrpro .pro-sparsvar,.mrpro .pro-denna,.mrpro .jobbinfo .note,.mrk-status,#mrk_feedback p){font:400 var(--mr-small)/1.45 var(--mr-font)}
:is(.rows .k,.mrpro table,.mrpro .pro-enhetinfo,.mrpro .jobbinfo b){font-family:var(--mr-font);font-size:var(--mr-body);line-height:1.45}
:is(.bd-grid button b,.jobs .job b){font:700 20px/1.2 var(--mr-heading);letter-spacing:.02em}
:is(details>summary,.mrpro details>summary,.mrpro #mrpro_kontot>details>summary,.pro-hjalp>summary){font:600 var(--mr-control)/1.4 var(--mr-font);min-height:var(--mr-touch);text-transform:none;letter-spacing:0}
.mrk .act{border-radius:0;font-weight:500}.mrk-links :is(a,button){font:500 var(--mr-control)/1.4 var(--mr-font);text-transform:none;letter-spacing:0}
.mrpro th{font:600 var(--mr-label)/1.4 var(--mr-font);text-transform:none;letter-spacing:0}
.mrpro .pro-kontext :is(h1,h2),.mrpro .pro-identitet :is(h1,h2){font:700 var(--mr-heading-size)/1.2 var(--mr-heading);letter-spacing:.02em;text-transform:uppercase}
.mrpro .arbetsnav .act{border-radius:0;font-weight:500;padding:8px 4px}.mrpro .arbetsnav .act[aria-current=step]{font-weight:600}
.mr-appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--line);max-width:var(--mr-shell);margin:0 auto}
.mr-appbar[hidden]{display:none}.mr-appbar .act{display:inline-flex;align-items:center;flex:0 0 auto;min-width:92px;height:44px;color:var(--ink);border:1px solid var(--ink);background:transparent;text-decoration:none;cursor:pointer}
.mr-appbar .mr-app-context{font:600 var(--mr-control)/1.4 var(--mr-font);color:var(--ink2);min-width:0;overflow-wrap:anywhere}
.mrpro .pro-kontext{top:var(--mr-bar-h)}.mrpro .arbetsnav{top:calc(var(--mr-bar-h) + var(--pro-kontext-h,100px))}
.mrpro .pro-del :is(h2,h3)[id],.mrpro .pro-del :is(a,button,summary,select,textarea){scroll-margin-top:calc(var(--pro-kontext-h,100px) + 60px)}
.mrpro .pro-kontext .pro-tillbaka{display:none}.mrpro .pro-identitet{gap:8px 12px}
body[data-mr-app] .tillbaka,body[data-mr-app] #crumb_back,body[data-mr-app] #jobs>[data-hem]{display:none}
.mrpro:is([data-vy=jobb],[data-vy=konto])>.pro-kontext{position:static;padding-block:8px 12px}
.mrpro[data-vy=login]>.pro-kontext,.mrpro[data-kop=true]>.pro-kontext{display:none}
@media(min-width:1100px){.mrpro .pro-del[data-del=summa]{top:calc(var(--mr-bar-h) + var(--pro-kontext-h,100px) + 60px);max-height:calc(100dvh - var(--mr-bar-h) - var(--pro-kontext-h,100px) - var(--mrk-h,52px) - 120px)}}
@media(max-width:599px){.mrpro .pro-identitet :is(h1,h2){font-size:var(--mr-heading-size)}.mrpro .pro-identitet .pro-varninglank{font-size:var(--mr-small)}.mrpro .jobbinfo b{font-size:var(--mr-body)}}
@media print{.mr-appbar{display:none!important}:root{--mr-bar-h:0px}}

main>h1{font:700 clamp(26px,6vw,36px)/1.1 var(--mr-heading);letter-spacing:.01em;text-transform:uppercase}
.mrpro input[aria-invalid=true]{border-color:var(--acc);outline-color:var(--acc)}

.jobs>[data-hem]{background:none;border:0;padding:6px 0;min-height:44px;color:var(--acc-text);font:600 var(--mr-control)/1.4 var(--mr-font);cursor:pointer;align-self:flex-start}

.mr-avgransning>summary{padding:0;gap:10px;color:var(--ink);letter-spacing:0;text-transform:none}.mr-avgransning-text{display:block}.mr-avgransning-kort{display:block;margin-top:4px;font:400 var(--mr-small)/1.45 var(--mr-font)}

/* UX-REVISION R1 mr-v247 "Lugnare hubb": Gör offert är listans enda huvudknapp; export och Töm i den stängda menyn Dela och exportera;
   andra produkter i undermenyn Mer från Ståhle Digital; i kalkylvyn ligger listan bakom pillret tills pillret öppnar den; rullistor 44 px även i WebKit. */
#li_offert{width:calc(100% - 32px);margin-top:12px}
#li_meny{border:0;margin-top:10px}
#li_meny>summary{border:1px solid var(--line);border-radius:var(--radius,6px);padding:8px 14px;color:var(--ink)}
#li_meny .actions{margin-top:10px}
#li_meny .act,#lista #vk_knapp{background:transparent;color:var(--ink)}
.mr-mer{border:0;margin-top:10px}
.actions+.byline{display:none}
body:has(#crumb:not([hidden])) #lista:not([data-visad]){display:none}
.mrk details{border-top:0}
/* UX251: rullistans valda text radbryts i stället för att kapas (hela texten syns vid 320–1280 px); höjden är minst 44 px. */
section[role=tabpanel] .in select{-webkit-appearance:none;appearance:none;height:auto;min-height:var(--mr-touch);white-space:normal;text-overflow:clip;overflow-wrap:break-word;padding-right:30px!important;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
#li_det details:not([open])>summary::after{content:"+"}
@media (forced-colors:active){section[role=tabpanel] .in select{-webkit-appearance:auto;appearance:auto;background-image:none}}

/* UX-REVISION R4 mr-v248 "Ett formspråk": en huvudknapp (accent, var(--acc) med var(--acc-ink)) i hubben, PRO och på /angra; sekundära är ghost.
   En rubrikskala: projektnamnet och Mitt konto har samma versala smala stil som övriga rubriker. Sidfotslänkar har 44 px tryckyta på alla sidor. */
:is(.wrap,body)>footer{row-gap:0;align-items:center}:is(.wrap,body)>footer a{display:inline-flex;align-items:center;min-height:var(--mr-touch);min-inline-size:var(--mr-touch);padding-block:0;vertical-align:middle}

/* UX251 (hubb och kalkylsidor, Claude Code 2026-10-22): första målningen är slutläget (CLS). gamla.js lägger temaväljaren i rubriken och
   konto-nav.js flyttar den strax efter till bottenmenyns Tema; i rubriken tar den aldrig plats, annars hoppar sidan när den flyttas. */
header>.mr-tema{display:none}
/* Hubbens korta ingress står i HTML:en (gamla.js lade in den efter första målningen); den långa .disc visas bara på landningssidor. */
.ingress-kort{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink)}body:not([data-start]) .disc{display:none}
/* UX251 fokus: fältets fokusram ligger på .in, som har overflow:hidden och klippte kontrollens egen ram (WCAG 2.4.7). Ramen omsluter hela fältet,
   enheten inräknad, i --acc-text: mörkt och ritning som förut, ljust #b8431f (minst 4,7:1 mot ytorna, WCAG 1.4.11). Bara hubben och kalkylsidorna (.wrap). */
.wrap .in:has(:focus-visible){outline:3px solid var(--acc-text);outline-offset:2px}.wrap .in :is(input,select):focus-visible{outline:none}
/* Sammanfattningar kant i kant med räknarens ram (.calc har overflow:hidden) får fokusramen innanför kanten, annars klipps den på sidorna. */
.wrap .calc details:not(#li_det)>summary:focus-visible{outline-offset:-3px}
/* Chipsraden rullar i sidled och klipper därmed också upp- och nedåt: 5 px luft runt chipsen så att fokusramen syns hel. Samma läge som förut. */
.crumb .chips{width:calc(100% + 10px);margin:-5px;padding:5px}
/* Platshållare minst 4,5:1 mot fältet i alla teman (Chromes förval #757575 gav 2,99:1 i mörkt tema). */
.wrap .in input::placeholder{color:color-mix(in srgb,var(--ink2) 80%,var(--field));opacity:1}
/* Kalkfix: "Fler uppgifter i …" och chipsraden visas bara när det finns andra uppgifter att välja (t.ex. inte i Takavvattning). */
.crumb .grp:has(+.chips:empty),.crumb .chips:empty{display:none}
/* Kalkfix: Töm listan står för sig, längst ned i listan och skild från Dela och exportera, som en destruktiv handling med bekräftelse. */
.li-tom{margin:12px 16px 4px;padding-top:12px;border-top:1px solid var(--line)}
#li_clear,#li_tom_ja{color:var(--fel-r,#b3261e);border-color:currentColor;background:transparent}
.li-tom-fraga{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.li-tom-fraga p{flex-basis:100%;margin:0;font-size:14px;font-weight:600;color:var(--ink)}
/* UX-REVISION R5 (Claude Code, 2026-10-22): i listvyn är Gör offert den enda accentknappen – listpillret (Listan … / ↓ Tillbaka till räknaren) är
   sekundärt. "✓ Tillagd i listan" är ett tydligt kvitto: ingen färgövergång (ingen blek mellanfärg), full opacitet, accentkant och sidans textfärg. */
.lipill{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.act.add{transition:transform .12s ease,box-shadow .15s ease}
.act.add.done{background:transparent;border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);color:var(--ink);opacity:1}
/* H0/U1 CLS (2026-10-23): kalkylernas breda tvåkolumnslayout och resultatpanelens rubrik gäller från första målningen. Samma regler injiceras
   senare ordagrant av materialraknaren-gamla.js del 8 (mrTema.CSS, utan [role=tabpanel]), men när ett skript i slutet av body hämtas långsamt hann
   sidan målas med formuläret i full bredd och utan "Resultat"-rubriken, och flyttades sedan. Bara räknarens flikar (role=tabpanel), inte offertsidans .calc. */
@media screen and (min-width:960px){
section[role=tabpanel]>.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start;overflow:visible}
section[role=tabpanel]>.calc>*{grid-column:1;min-width:0}
section[role=tabpanel]>.calc>.res{grid-column:2;grid-row:1/span 60;position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--radius)}
section[role=tabpanel]>.calc>.res::before{content:"Resultat";display:block;font:600 13px Barlow,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);padding-top:10px}}
/* CLS (2026-10-23): huvudets skript sätter .mrv på html och räknarens skript tar bort den när kalkylerna är ritade (senast efter 3 s). Under tiden
   är kalkylerna osynliga i stället för att målas halvfärdiga och flytta sig: formulärets "Fler alternativ", resultatraderna, statusraden och
   knapparna under resultatet läggs in av skripten i slutet av body. Utan JavaScript sätts klassen aldrig. */
.mrv section[role=tabpanel]>.calc{visibility:hidden}

/* D6.3b: one outer header and viewport canvas through the app. */
@media screen and (min-width:600px){html{scrollbar-gutter:stable}}
@media screen{
body{min-block-size:100vh;min-block-size:100dvh}
body>.wrap>header,body>header{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding-block:16px 10px}
body>.wrap>header>small,body>header>small{margin-top:4px}
}
@media print{body{min-block-size:0}}

/* P83: preserve each focus frame, using the existing contrast token. */
:focus-visible{outline-color:var(--acc-text)}

.mrpro #mrpro_forutsattningar>summary{scroll-margin-top:calc(var(--mr-bar-h,0px) + var(--pro-kontext-h,100px) + 76px)}
/* P84: PRO tools in normal flow reserve no fixed stack in a low viewport. */
@media screen and (max-height:480px){
html:has(.mrpro){scroll-padding-top:16px}
.mrpro .pro-del :is(h2,h3)[id],.mrpro :is(input,select,textarea),.mrpro #mrpro_forutsattningar,.mrpro .pro-del :is(a,button,summary,select,textarea),.mrpro #mrpro_forutsattningar>summary{scroll-margin-block:0}
.mrpro .pro-del[data-del=summa]{position:static;max-height:none;overflow:visible}
}