/* Company KPIs (steg 176): kortene på Hjem, rommet med seks faner og «+ Add». Etter docs/skisser-2026-10-18/kpi.html og tilpass.html. */
.kpihjem { margin: 0 0 14px; }
.kpiover { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 2px 10px; }
.kpiover b { font: 600 12px var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.kpiover span { font-size: 12px; color: var(--mute); }
.kpiferdig { padding: 8px 18px; border-radius: 999px; }
.kpigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpihjem .kpikort:not(.rediger) { cursor: pointer; }
.kpikort { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.kpikort .navn { font-size: 12px; font-weight: 600; color: var(--mute); line-height: 1.25; padding-right: 22px; }
.kpikort .kpilinje { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kpikort .tall { font: 780 24px/1 var(--display); letter-spacing: -.02em; }
.kpikort .kpit { font-size: 11px; color: var(--mute); line-height: 1.3; }
.kpikort.stor { grid-column: 1 / -1; border-radius: 18px; padding: 14px 16px; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: end; }
.kpikort.stor .navn { grid-column: 1 / -1; font-size: 13px; }
.kpikort.stor .stort { font: 780 40px/1 var(--display); letter-spacing: -.03em; }
.kpikort.stor .stort.mangler { font: 600 15px var(--tekst); color: var(--mute); letter-spacing: 0; }
.kpikort.stor .terskel { font-size: 12px; color: var(--mute); text-align: right; line-height: 1.5; }
.kpibane { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--soft); position: relative; margin-top: 8px; }
.kpibane i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--neon); }
.kpibane b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.kpipil { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.kpipil.opp { background: var(--ok-bg); color: var(--ok); }
.kpipil.ned { background: var(--feil-bg); color: var(--signaltekst); }
.kpipil.flat { background: var(--soft); color: var(--mute); }
.kpiprikk { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: 1px; }
.kpiprikk.p-ok { background: var(--ok); } .kpiprikk.p-svak { background: var(--signal); } .kpiprikk.p-mid { background: var(--lilla); }
.kpimangler { color: var(--mute); font: 600 12px var(--tekst); }
.kpilenker { display: flex; justify-content: center; gap: 18px; margin: 12px 0 2px; font-size: 13px; }
/* Redigering */
.kpioppsett { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.kpioppsett button, .kpifaner button { flex: none; font: 600 13px var(--tekst); padding: 7px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); border: 0; cursor: pointer; }
.kpioppsett button.paa, .kpifaner button.paa { background: var(--ink); color: var(--paper); }
.kpikort.rediger { border-style: dashed; border-width: 1.5px; border-color: var(--linje2); padding-bottom: 30px; }
.kpikort.drar { border-style: solid; border-color: var(--lilla); box-shadow: 0 10px 24px -12px var(--skygge); transform: rotate(-1deg); z-index: 2; }
.kpix { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); font-size: 12px; cursor: pointer; }
.kpistr { position: absolute; left: 10px; bottom: 6px; border: 0; background: none; color: var(--mute); font: 600 11px var(--tekst); text-decoration: underline; cursor: pointer; padding: 2px; }
.kpigrep { position: absolute; right: 8px; bottom: 4px; padding: 4px 6px; color: var(--mute); cursor: grab; touch-action: none; user-select: none; font-size: 14px; letter-spacing: -2px; }
.kpilegg { border: 1.5px dashed var(--linje2); border-radius: 16px; background: none; color: var(--ink); font: 600 15px var(--tekst); min-height: 92px; cursor: pointer; }
.kpihint { text-align: center; font-size: 12px; color: var(--mute); margin: 10px 0 0; }
/* Rommet */
.kpih1 { font: 780 26px/1.1 var(--display); margin: 6px 2px 4px; }
.kpiingress { font-size: 13px; color: var(--mute); margin: 0 2px 12px; }
.kpifaner { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.kpifaner::-webkit-scrollbar, .kpioppsett::-webkit-scrollbar { display: none; }
.kpigruppe { font: 600 11px var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 16px 2px 8px; }
.kpimerk { font-size: 11px; color: var(--mute); margin: 12px 2px 0; }
.kpistortall { font: 780 32px/1.1 var(--display); display: flex; align-items: center; gap: 10px; }
.kpispark { width: 56px; height: 22px; display: block; }
.kpispark.stor { width: 100%; height: 60px; }
/* Mosaikken (19. oktober 2026): to kolonner på mobil, seks når plassen er der. Fliser i tre størrelser. */
.kpihjem, #kpiRot { container-type: inline-size; }
.kpimos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 80px; gap: 8px; grid-auto-flow: dense; }
.kpiflis { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 13px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; cursor: pointer; text-align: left; }
.kpiflis:focus-visible { outline: 2px solid var(--lilla); outline-offset: 2px; }
.kpiflis.s { grid-column: span 1; grid-row: span 2; }
.kpiflis.m { grid-column: span 2; grid-row: span 2; }
.kpiflis.l { grid-column: span 2; grid-row: span 3; }
.kpin { font-size: 12px; font-weight: 600; color: var(--mute); line-height: 1.25; padding-right: 44px; }
.kpiv { font: 780 26px/1 var(--display); letter-spacing: -.02em; margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpiflis.l .kpiv { font-size: 40px; letter-spacing: -.03em; }
.kpiu { font-size: 11px; color: var(--mute); margin-top: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpigraf { margin-top: auto; width: 100%; display: block; flex: none; padding-top: 6px; }
.kpigraf.fyll { flex: 1 1 0; min-height: 60px; height: auto !important; }
.kpin, .kpiv, .kpiu, .kpiakse { flex-shrink: 0; }
.kpin em { display: block; font: 600 9.5px var(--tekst); letter-spacing: .08em; text-transform: uppercase; font-style: normal; opacity: .75; margin-bottom: 2px; }
.kpibullet { margin-top: auto; height: 10px; border-radius: 5px; background: var(--soft); position: relative; flex: none; }
.kpibullet i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.kpibullet b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.kpiakse { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--mute); margin-top: 4px; flex: none; }
.kpipin { position: absolute; top: 9px; right: 9px; border: 1px solid var(--line); background: var(--card); color: var(--mute); border-radius: 999px; padding: 3px 8px; font: 600 10px var(--tekst); cursor: pointer; }
.kpipin.paa { background: var(--soft); color: var(--ink); border-color: transparent; }
.kpivent { margin-top: 8px; background: none; border: 1.5px dashed var(--linje2); cursor: default; }
.kpivent .kpin { padding-right: 0; }
.kpibrikker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kpibrikke { text-align: left; font: 600 12px var(--tekst); border: 0; border-radius: 999px; padding: 5px 10px; background: var(--soft); color: var(--ink); cursor: pointer; }
.kpibrikke small { color: var(--mute); font-weight: 600; }
@container (min-width: 700px) {
  .kpimos { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 78px; gap: 10px; }
  .kpiflis.m { grid-column: span 2; grid-row: span 2; }
  .kpiflis.l { grid-column: span 3; grid-row: span 4; }
  .kpiflis.s .kpiu { -webkit-line-clamp: 1; }
}
/* «+ Add»-arket */
.kpisok { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font: 400 15px var(--tekst); margin: 4px 0 10px; }
.kpivalg { display: grid; }
.kpivalgrad { display: grid; grid-template-columns: 1fr auto 34px; gap: 10px; align-items: center; padding: 11px 0; border: 0; border-top: 1px solid var(--hair); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.kpivalgrad .n { font-size: 15px; font-weight: 600; }
.kpivalgrad .n small { display: block; font-weight: 400; font-size: 12px; color: var(--mute); margin-top: 2px; }
.kpivalgrad .v { font: 780 17px var(--display); white-space: nowrap; }
.kpivalgrad .v.mangler { font: 600 12px var(--tekst); color: var(--mute); }
.kpivalgrad .pluss { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--neon); color: var(--on-neon); font-weight: 700; }
.kpivalgrad .pluss.har { background: var(--soft); color: var(--lilla); }
@media (min-width: 760px) { .kpigrid { grid-template-columns: repeat(4, 1fr); } .kpikort.stor { grid-column: span 2; } .kpilegg { min-height: 110px; } }

/* Hjem (19. oktober 2026): lønnsomhetstreet, KPI-ene og grepene modellene stemte over, i den rekkefølgen. */
.hjemtre, .hjemgrep { margin: 0 0 16px; }
.hjemtre .vkart { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px; }
.hjemtre .vstort { margin: 0 0 8px; }
.grepliste { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.grep + .grep { border-top: 1px solid var(--hair); }
.greprad { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 12px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.grepnr { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font: 700 12px var(--tekst); color: var(--mute); }
.grep.apen .grepnr { background: var(--ink); color: var(--paper); }
.grepn { font-size: 14px; font-weight: 600; line-height: 1.3; min-width: 0; }
.grepn small { display: block; font-weight: 400; font-size: 11px; color: var(--mute); margin-top: 3px; }
.grepp { font: 780 20px/1 var(--display); text-align: right; white-space: nowrap; color: var(--mute); }
.grepp.over { color: var(--ink); }
.grepp small { display: block; font: 600 10.5px var(--tekst); color: var(--mute); margin-top: 3px; }
.grepgraf { padding: 0 12px 12px; }
.grepinfo { font-size: 12px; margin: 8px 2px 0; }

/* ---------- Forsiden (steg 179, docs/skisser-2026-10-19/forside.html) ---------- */
.hshode { margin: 4px 0 22px; }
.hsdato { font: 600 11px var(--tekst); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.hsbrief { font: 780 30px/1.18 var(--display); letter-spacing: -.02em; margin: 6px 0 12px; max-width: 900px; }
.hsbrief em { font-style: normal; color: var(--lilla); }
.hspiller { display: flex; gap: 8px; flex-wrap: wrap; }
.hspille { font: 600 12.5px var(--tekst); border: 0; border-radius: 999px; padding: 6px 12px; background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hspille i, .hsstatus i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hspille i.p-ok, .hsstatus i.p-ok { background: var(--ok); } .hspille i.p-gul, .hsstatus i.p-gul { background: var(--gul); }
.hspille i.p-feil, .hsstatus i.p-feil { background: var(--signal); } .hspille i.p-lilla, .hsstatus i.p-lilla { background: var(--lilla); }
.hsstatus i.p-av { background: var(--linje2); }
.hsneste { margin: 0 0 22px; }
.hjemtre, .kpihjem, .hjemgrep, .hsto, .hsselskaper { margin: 0 0 26px; }
.hsto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; align-items: start; }
.hsto > * { margin: 0; min-width: 0; }
.hsstatuslinje { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--mute); margin: 0 0 26px; padding-top: 14px; border-top: 1px solid var(--hair); }
.hsstatus { color: var(--mute); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hsstatus b { color: var(--ink); }
@media (max-width: 760px) { .hsto { grid-template-columns: 1fr; } .hsbrief { font-size: 22px; } }

/* Treet, midtstilt med tallene */
.mhtre { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px 16px; text-align: center; }
.mhrot { display: inline-flex; flex-direction: column; align-items: center; background: var(--ink); color: var(--paper); border-radius: 16px; padding: 12px 22px; }
.mhrot b { font: 780 17px var(--display); } .mhrot small { font-size: 12px; opacity: .8; margin-top: 2px; }
.mhstamme { width: 2px; height: 18px; background: var(--line); margin: 0 auto; }
.mhgreiner { display: grid; grid-template-columns: 3fr 4fr; gap: 18px; position: relative; }
.mhgreiner::before { content: ""; position: absolute; top: 0; left: 21%; right: 29%; height: 2px; background: var(--line); }
.mhgrein { padding-top: 18px; position: relative; min-width: 0; }
.mhgrein::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 18px; background: var(--line); }
.mhghode { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font: 700 14px var(--tekst); margin-bottom: 14px; background: var(--paper); }
.mhblader { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.mhblad { all: unset; box-sizing: border-box; cursor: pointer; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 11px; text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 140px; min-width: 0; }
.mhblad:focus-visible { outline: 2px solid var(--lilla); outline-offset: 2px; }
.mhblad.valgt { border-color: var(--lilla); box-shadow: 0 0 0 2px var(--lilla) inset; }
.mhbn { font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.mhpil { font: 780 26px/1 var(--display); }
.mhbt { font-size: 11px; color: var(--mute); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mhhelling { width: 100%; height: 22px; flex: none; }
.mhdom { margin-top: auto; font: 700 10.5px var(--tekst); border-radius: 999px; padding: 3px 8px; align-self: flex-start; }
.mhtre .god { color: var(--ok); } .mhtre .darlig { color: var(--signal); } .mhtre .noy { color: var(--mute); }
.mhdom.god { background: var(--ok-bg); } .mhdom.darlig { background: var(--feil-bg); } .mhdom.noy { background: var(--soft); }
.mhdetalj { margin-top: 16px; text-align: left; border-top: 1px solid var(--hair); padding-top: 12px; }
.mhdhode { font: 600 11px var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.mhdrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mhm { background: var(--soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.mhm b { font: 780 18px var(--display); } .mhm small { color: var(--mute); font-size: 11px; }
.mhkilde { font-size: 11px; color: var(--mute); margin: 12px 0 0; }
@media (max-width: 760px) { .mhgreiner { grid-template-columns: 1fr; } .mhgreiner::before { display: none; } .mhblader { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mhtre { padding: 16px 12px; } }

/* KPI-blokken: fire hoved-KPI-er som faner for grafen, og veksleren */
.kpiblokk { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 6px 6px 14px; }
.kpihoved { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kpihk { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; min-width: 0; }
.kpihk:focus-visible { outline: 2px solid var(--lilla); }
.kpihk.paa { background: var(--soft); border-color: var(--line); }
.kpihk .kpin { padding-right: 0; }
.kpihk .kpiv { font: 780 30px/1 var(--display); letter-spacing: -.02em; margin-top: 3px; }
.kpihk.mangler .kpiv { font: 600 15px var(--tekst); color: var(--mute); padding: 8px 0 4px; }
.kpihk .kpiu { -webkit-line-clamp: 1; }
.kpid { font: 700 11px var(--tekst); margin-top: 3px; } .kpid.god { color: var(--ok); } .kpid.darlig { color: var(--signaltekst); } .kpid.noy { color: var(--mute); }
.kpistor { margin: 16px 14px 0; }
.kpistor.tom p { color: var(--mute); font-size: 13px; text-align: center; padding: 30px 0; margin: 0; }
.kpistorflate { position: relative; padding-top: 34px; }
.kpistorflate svg { width: 100%; display: block; }
.kpimerk2 { position: absolute; transform: translate(-50%, 0); margin-top: 0; font: 600 10.5px/1.25 var(--tekst); color: var(--mute); text-align: center; white-space: nowrap; pointer-events: none; }
.kpimerk2.ny { color: var(--ink); background: var(--paper); border: 1px solid var(--lilla); border-radius: 8px; padding: 3px 7px; transform: translate(-85%, -6px); }
.kpiakse13 { display: grid; grid-template-columns: repeat(13, 1fr); font-size: 10px; color: var(--mute); text-align: center; margin-top: 5px; }
.kpistorbullet { padding: 30px 6px 10px; }
.kpiveksler { margin: 16px 8px 0; border-top: 1px solid var(--hair); padding-top: 12px; }
.kpivfaner { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.kpivfaner button { font: 600 12.5px var(--tekst); padding: 6px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); border: 0; cursor: pointer; }
.kpivfaner button.paa { background: var(--ink); color: var(--paper); }
.kpivfaner em { font-style: normal; font-size: 12px; color: var(--mute); margin-left: auto; }
.kpivrad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kpiliten { all: unset; box-sizing: border-box; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 4px; min-height: 92px; min-width: 0; }
.kpiliten:focus-visible { outline: 2px solid var(--lilla); }
.kpiliten .kpin { font-size: 11px; padding-right: 0; }
.kpiliten .kpiv { font-size: 20px; margin-top: 2px; }
.kpiliten .kpigraf { padding-top: 0; }
.kpiliten .kpibullet { height: 8px; }
.kpivent2 { font-size: 12px; color: var(--mute); margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kpiinfo { font-size: 12px; margin: 4px 0; }
@media (max-width: 760px) { .kpihoved { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpihk .kpiv { font-size: 24px; } .kpivrad { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpivfaner em { display: none; } .kpistor { margin: 10px 6px 0; } }
.kpiimens { font-size: 12px; color: var(--mute); margin: 14px 14px 0; }
/* Den store grafen har fast høyde. .kpigraf.fyll strekker seg i kortene, men i .kpistor ga height:auto en kvadratisk
   graf like høy som bredden (19. oktober 2026). */
.kpistor .kpigraf.fyll { flex: none; min-height: 0; height: 150px !important; }