/* Skallet (steg 93): Hjem, Verktøy og Innstillinger. Fargene fra brandpakken står i index.html (--ink, --paper,
   --signal …). Her kommer skriftene, én farge per selskap, og komponentene i den nye flaten. Signal er fortsatt
   bare for det som trenger deg. */
:root {
  --display: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --tekst: "Instrument Sans", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --gul: #6B4FD8; --ok-bg: #DDF7EA; --gul-bg: #ECE6FB; --feil-bg: #FFE3E7; --glass: rgba(243,240,250,.82);
  --c0: #6B4FD8; --c0-bg: #E4DCF7; --c1: #0B7A47; --c1-bg: #DDF7EA; --c2: #5C4F80; --c2-bg: #EEEAF7; --c3: #7B5CF0; --c3-bg: #ECE6FB; --c4: #D3263A; --c4-bg: #FFE3E7;
  --f1: #6B4FD8; --f1-bg: #E4DCF7; --f2: #D3263A; --f2-bg: #FFE3E7; --f4: #5C4F80; --f4-bg: #EEEAF7;
  /* Beast Mode fra Athlate (steg 144, docs/design-farger-2026-10-17.md). Neon er det som er valgt og hovedknappene, rødt
     (--signal) det som trenger deg, grønt (--ok) det som er bra, lilla er opp og del, natt er ned og kilde, dyp er de mørke flatene (toppen av arkene, merkene). Tekst på neon og lilla
     har egne farger, så den aldri blir lys på lyst. */
  --neon: #3DF29A; --on-neon: #0E0A16;
  --lilla: #7B5CF0; --on-lilla: #FFFFFF;
  --natt: #4A3A75; --dyp: #1B1230; --fare: #D3263A;
}
/* Beast Mode og Lavender (steg 144) erstatter Wada 281. Lys er Lavender: lilla papir, dyp lilla tekst, neon bare som flate
   og mørkegrønt til tekst. Mørk er Beast Mode slik Athlate har den: nesten svart lilla, neon og rødt bare for fare. */
:root, .lys {
  --ink: #1B1230; --paper: #F3F0FA; --card: #FFFFFF; --line: #DCD3F0; --hair: #E9E3F7; --mute: #5C4F80; --soft: #E9E3F7;
  --signal: #D3263A; --signaltekst: #B4142A; --on-signal: #FFFFFF; --ok: #0B7A47; --linje2: #8E82AE; --skygge: rgba(27,18,48,.08); --gul: #6B4FD8;
  --ok-bg: #DDF7EA; --gul-bg: #ECE6FB; --feil-bg: #FFE3E7;
  --c0: #6B4FD8; --c0-bg: #E4DCF7; --c1: #4A3A75; --c1-bg: #E9E3F7;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) {
  --ink: #EDE7FB; --paper: #0E0A16; --card: #171024; --line: #2C2044; --hair: #1E1630; --mute: #A99BC9; --soft: #1E1630;
  --signal: #FF4D5E; --signaltekst: #FF7A88; --on-signal: #0E0A16; --ok: #3DF29A; --linje2: #6F6390; --skygge: rgba(0,0,0,.5);
  --c0: #3DF29A; --c0-bg: #1C0F35; --c1: #B79CFF; --c1-bg: #241A3D;
  --lilla: #B79CFF; --on-lilla: #0E0A16; --natt: #4A3A75; --dyp: #2A1F45; --fare: #FF4D5E;
} }
:root[data-tema="morkt"], .morkt {
  --ink: #EDE7FB; --paper: #0E0A16; --card: #171024; --line: #2C2044; --hair: #1E1630; --mute: #A99BC9; --soft: #1E1630;
  --signal: #FF4D5E; --signaltekst: #FF7A88; --on-signal: #0E0A16; --ok: #3DF29A; --linje2: #6F6390; --skygge: rgba(0,0,0,.5);
  --c0: #3DF29A; --c0-bg: #1C0F35; --c1: #B79CFF; --c1-bg: #241A3D;
  --lilla: #B79CFF; --on-lilla: #0E0A16; --natt: #4A3A75; --dyp: #2A1F45; --fare: #FF4D5E;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) {
  --gul: #B79CFF; --ok-bg: #12301F; --gul-bg: #241A3D; --feil-bg: #3A1520; --glass: rgba(14,10,22,.78);
  --c0: #3DF29A; --c0-bg: #1C0F35; --c1: #B79CFF; --c1-bg: #241A3D; --c2: #A99BC9; --c2-bg: #1E1630; --c3: #B79CFF; --c3-bg: #241A3D; --c4: #FF4D5E; --c4-bg: #3A1520;
  --f1: #B79CFF; --f1-bg: #241A3D; --f2: #FF4D5E; --f2-bg: #3A1520; --f4: #A99BC9; --f4-bg: #1E1630;
} }
:root[data-tema="morkt"] {
  --gul: #B79CFF; --ok-bg: #12301F; --gul-bg: #241A3D; --feil-bg: #3A1520; --glass: rgba(14,10,22,.78);
  --c0: #3DF29A; --c0-bg: #1C0F35; --c1: #B79CFF; --c1-bg: #241A3D; --c2: #A99BC9; --c2-bg: #1E1630; --c3: #B79CFF; --c3-bg: #241A3D; --c4: #FF4D5E; --c4-bg: #3A1520;
  --f1: #B79CFF; --f1-bg: #241A3D; --f2: #FF4D5E; --f2-bg: #3A1520; --f4: #A99BC9; --f4-bg: #1E1630;
}

body { font-family: var(--tekst); background: radial-gradient(1100px 480px at 88% -140px, var(--c0-bg), transparent 70%), var(--paper); background-attachment: fixed; }
button, input, select, textarea { font-family: inherit; }
h1, .sechead h2 { font-family: var(--display); }

/* Topplinjen: merke, meny, selskap, konto. */
header.topp { height: auto; min-height: var(--head); padding: 10px 20px; gap: 14px; flex-wrap: nowrap; background: var(--glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--hair); }
@media (max-width: 1250px) { #puls { display: none; } }
#insightChips { display: contents; }
.nav { display: flex; gap: 2px; background: var(--soft); border-radius: 999px; padding: 3px; }
.nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; color: var(--mute); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); box-shadow: 0 1px 4px var(--skygge); }
.nav .teller { background: var(--signal); color: var(--on-signal); border-radius: 999px; padding: 0 6px; font-size: 11px; line-height: 17px; }
.nav .teller:empty, .nav .teller[hidden] { display: none; }
header.topp select { font-weight: 600; }
.meg { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--dyp); color: var(--neon); font-family: var(--display); font-weight: 700; cursor: pointer; flex: none; }
@media (max-width: 720px) { .nav a span:not(.teller) { display: none; } #puls { display: none; } header.topp { padding: 8px 12px; gap: 8px; } }

/* Sidene: én om gangen. */
.shell { display: block; max-width: 1180px; }
.canvas { padding: 24px 24px 150px; }
#sider > .side, #sider > section.sec { display: none; }
#sider > .side.vis, #sider > section.sec.vis { display: flex; flex-direction: column; animation: skinn .26s ease-out; }
#sider > section.sec.vis { display: block; }
#sider > .side { gap: 22px; }
@keyframes skinn { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sktilbake { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); text-decoration: none; font-size: 14px; margin: 0 0 12px; }
.sktilbake:hover { color: var(--ink); }
#sider > .side .sktilbake { margin: 0; }
section.sec { margin: 0; }
.sechead h2 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 700; letter-spacing: -.025em; }

/* Ikoner */
.ik { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; flex: none; }
.ik.liten { width: 15px; height: 15px; vertical-align: -2px; }
.ik.stor { width: 34px; height: 34px; color: var(--ok); }
svg.lucide { flex: none; }

/* Felles byggeklosser */
.hilsen { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hilsen h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.1; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; }
.hilsen p { margin: 0; color: var(--mute); }
.gruppe { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gruppe > h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); font-weight: 600; font-family: var(--tekst); }
.liste { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2px 16px; }
.rad { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 14px; width: 100%; color: var(--ink); text-decoration: none; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: default; }
a.rad, button.rad { cursor: pointer; }
.rad:last-child { border-bottom: 0; }
.rad > span:first-child { min-width: 0; }
.rad small { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }
.rad em { font-style: normal; color: var(--mute); font-size: 13px; text-align: right; white-space: nowrap; }
a.rad:hover > span:first-child, button.rad:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.med-ikon { display: flex; gap: 10px; align-items: flex-start; }
.lenke { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.knapper { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knapp { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: transform .12s ease, border-color .12s; }
.knapp:hover { border-color: var(--mute); }
.knapp:active { transform: scale(.97); }
/* Hovedknappen er neon i begge moduser (steg 147, Beast): det som er valgt og det du gjør, ett sted. */
.knapp.ja { background: var(--neon); color: var(--on-neon); border-color: var(--neon); font-weight: 700; box-shadow: 0 6px 18px -8px rgba(61,242,154,.65); }
.knapp.nei { color: var(--signaltekst); }
.knapp.stor { padding: 12px 20px; font-size: 15px; }
.pille { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.p-ok { background: var(--ok-bg); color: var(--ok); } .p-gul { background: var(--gul-bg); color: var(--gul); } .p-feil { background: var(--feil-bg); color: var(--signaltekst); } .p-av { background: var(--soft); color: var(--mute); }
.prikk { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px; display: inline-block; }
.prikk.p-ok { background: var(--ok); } .prikk.p-gul { background: var(--gul); } .prikk.p-feil { background: var(--signal); }
.co-0 { background: var(--c0-bg); color: var(--c0); } .co-1 { background: var(--c1-bg); color: var(--c1); } .co-2 { background: var(--c2-bg); color: var(--c2); } .co-3 { background: var(--c3-bg); color: var(--c3); } .co-4 { background: var(--c4-bg); color: var(--c4); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.seg button { padding: 5px 11px; font-size: 13px; background: none; border: 0; cursor: pointer; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.boks { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; line-height: 1.9; }
.mono { font: 13px ui-monospace, Menlo, monospace; }

/* Hjem */
.hjemtopp { display: flex; align-items: center; gap: 16px; }
.ring { flex: none; }
.hjemgrid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hjemgrid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } .hjemgrid .kolonne { position: sticky; top: 84px; } }
.kolonne { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.stabel { position: relative; }
.stabel.flere { padding-bottom: 14px; }
.stabel.flere::before, .stabel.flere::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 30px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); z-index: 0; }
.stabel.flere::after { left: 28px; right: 28px; bottom: 0; opacity: .6; }
.kort.hovedkort { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 32px -12px var(--skygge), 0 2px 6px var(--skygge); transition: transform .22s ease, opacity .22s ease; }
.kort.hovedkort.ut { transform: translateX(40px) rotate(2deg); opacity: 0; }
.kort.hovedkort h3 { margin: 0; font-family: var(--display); font-size: 23px; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.kort.hovedkort p { margin: 0; }
.korttopp { display: flex; gap: 12px; align-items: center; }
.korttopp .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--mute); }
.korttopp .fra { font-size: 12px; color: var(--mute); margin-top: 2px; }
.teller2 { margin-left: auto; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; background: var(--soft); padding: 3px 9px; border-radius: 999px; }
.typeikon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.chip.co { border: 0; font-weight: 600; font-size: 12px; padding: 2px 9px; border-radius: 999px; cursor: default; }
.risiko { font-size: 12px; } .r-high { color: var(--signaltekst); font-weight: 600; } .r-medium { color: var(--gul); }
.hvis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px; }
.hvis div { background: var(--soft); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.hvis .hvis-ja { background: var(--ok-bg); }
.hvis b { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mute); font-weight: 600; margin-bottom: 3px; }
.utkast { background: var(--soft); border-radius: 12px; padding: 12px; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; white-space: pre-wrap; }
.medie img, .medie video { display: block; max-width: min(100%, 360px); max-height: 420px; border-radius: 12px; border: 1px solid var(--line); }
.hvorfor { font-size: 14px; border-top: 1px solid var(--hair); padding-top: 10px; }
.hvorfor summary { cursor: pointer; color: var(--mute); }
.hvorfor p, .hvorfor ul { margin: 8px 0 0; }
.hvorfor ul { padding-left: 1.2em; color: var(--mute); font-size: 13px; }
.laer { display: flex; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--hair); padding-top: 12px; }
.ferdig { text-align: center; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 44px 16px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ferdig b { font-family: var(--display); font-size: 19px; }
.ferdig span { color: var(--mute); }
.varsel { display: flex; gap: 12px; align-items: center; background: var(--feil-bg); color: var(--ink); border-radius: 14px; padding: 12px 14px; text-decoration: none; }
.varsel small { display: block; color: var(--mute); font-size: 13px; }
.varsel > span { flex: 1; }
.status { display: flex; flex-direction: column; gap: 8px; }
.statuskort { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; cursor: pointer; text-align: left; color: var(--ink); transition: border-color .15s, transform .15s; }
.statuskort:hover { border-color: var(--mute); transform: translateY(-1px); }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 17px; flex: none; }
.st-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-topp { display: flex; align-items: center; gap: 8px; }
.st-linje { font-size: 13px; color: var(--mute); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spark { flex: none; overflow: visible; }

/* Verktøy */
.finnrad { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; color: var(--mute); max-width: 520px; }
.finnrad input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 9px 0; outline: none; font-size: 15px; }
.fliser { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.flis { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-height: 132px; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.flis:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--skygge); border-color: var(--mute); }
.flis b { font-family: var(--display); font-size: 16px; font-weight: 650; }
.flis > span:not(.flisikon):not(.pille) { font-size: 13px; color: var(--mute); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.flisikon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.f-1 { background: var(--f1-bg); color: var(--f1); } .f-2 { background: var(--f2-bg); color: var(--f2); } .f-4 { background: var(--f4-bg); color: var(--f4); }
@media (max-width: 520px) { .fliser { grid-template-columns: 1fr 1fr; } .flis { min-height: 118px; padding: 14px; } .hvis { grid-template-columns: 1fr; } .kort.hovedkort { padding: 18px; } .kort.hovedkort h3 { font-size: 20px; } .ring { width: 52px; height: 52px; } }

/* Kjøring: tre ferdige bunter, grupperte linjer med knapper */
.kj-kortene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kj-kort { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px; min-height: 168px; text-align: left; }
.kj-kort b { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.kj-kort > span { font-size: 14px; color: var(--mute); line-height: 1.4; flex: 1; }
.kj-kort em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-bg); padding: 3px 9px; border-radius: 999px; }
.kj-kort.valgt { border-color: var(--ink); box-shadow: 0 10px 24px -16px var(--skygge); }
.kj-spor { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.kj-spor p { margin: 0; font-size: 15px; line-height: 1.5; }
.kj-aapent { margin: 0; padding: 12px 16px 12px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.kj-aapent li { padding: 4px 0; font-size: 14px; color: var(--mute); }
.kj-gruppe { margin: 0 0 22px; }
.kj-gruppe-hode { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; }
.kj-gruppe-hode h3 { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: -.02em; }
.kj-gruppe-hode p { margin: 2px 0 0; font-size: 13px; color: var(--mute); }
.kj-gruppe-hode .kj-anslag { margin-left: auto; font-style: normal; font-size: 12px; color: var(--mute); white-space: nowrap; padding-top: 4px; }
.kj-linjer { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.kj-linje { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.kj-linje:last-child { border-bottom: 0; }
.kj-linje.av .kj-tekst b { color: var(--mute); }
.kj-linje small { display: block; font-size: 12px; color: var(--mute); font-weight: 400; }
.kj-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kj-tekst b { font-size: 15px; }
.kj-hva { font-size: 13px; color: var(--mute); line-height: 1.4; }
.kj-anslag { font-style: normal; font-size: 12px; color: var(--mute); }
.kj-linje .seg { flex: none; margin-top: 2px; }
.kj-uke { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.kj-uke p { margin: 0; font-size: 13px; color: var(--mute); max-width: 72ch; }
.kj-uke .seg { flex-wrap: wrap; }
@media (max-width: 720px) {
  .kj-kortene { grid-template-columns: 1fr; }
  .kj-kort { min-height: 0; }
  .kj-linje { flex-wrap: wrap; }
  .kj-linje .seg { width: 100%; }
  .kj-gruppe-hode { flex-wrap: wrap; }
}

/* Innstillinger */
.setninger { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2px 16px; }
.setning { padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.8; }
.setning:last-child { border-bottom: 0; }

.setning .v { background: none; border: 0; padding: 0 3px; font: inherit; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--signal); cursor: pointer; border-radius: 0; }
.setning .v:hover { background: var(--soft); }
.setning .vfelt { font: inherit; font-weight: 600; border: 1px solid var(--mute); border-radius: 8px; padding: 2px 8px; background: var(--paper); color: var(--ink); max-width: 100%; }
.setning code, .rad code { font-size: 12.5px; background: var(--soft); padding: 1px 5px; border-radius: 5px; }

/* Ark og beskjeder */
.skslor { position: fixed; inset: 0; background: rgba(18,16,14,.38); z-index: 40; display: none; align-items: flex-end; justify-content: center; padding: 16px; overflow-y: auto; }
.skslor.on { display: flex; }
.skark { background: var(--card); color: var(--ink); border-radius: 22px; max-width: 560px; width: 100%; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 40px var(--skygge); margin: auto 0 env(safe-area-inset-bottom, 0px); animation: skopp .22s ease-out; }
.skark h3 { margin: 0; font-family: var(--display); font-size: 20px; }
.skark p { margin: 0; }
.skark textarea, .skark input, .skark select { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--paper); color: var(--ink); max-width: 100%; }
.skark textarea { width: 100%; }
.skark .felt { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); }
.skark .felt input, .skark .felt textarea { color: var(--ink); font-size: 15px; }
@keyframes skopp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.sktoast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 110px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 14px; font-size: 14px; z-index: 50; max-width: calc(100% - 32px); box-shadow: 0 10px 30px -10px var(--ink); animation: skopp .2s ease-out; }

/* Spør: fast nederst, samtalen åpner seg over feltet. */
#sider > #sec-spor, #sec-spor { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--paper) 62%, transparent); pointer-events: none; animation: none; }
#sec-spor > * { pointer-events: auto; max-width: 760px; margin-left: auto; margin-right: auto; }
#sec-spor .sechead { display: none; }
#sec-spor .ask { border-radius: 18px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 32px -14px var(--skygge), 0 0 0 1px var(--line); border: 0; }
#sec-spor .ask input { font-size: 15px; padding: 10px 0; }
#sec-spor .ask button { border-radius: 12px; }
.ask button { background: var(--neon); color: var(--on-neon); font-weight: 700; }
#sec-spor .chips { margin: 0 auto 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
#sec-spor .chips .chip { white-space: nowrap; font-size: 12px; padding: 4px 10px; background: var(--glass); }
#sec-spor #chatLog, #sec-spor #chatMsg, #sec-spor .sporhode { display: none; }
#sec-spor.apen { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); top: 20vh; overflow-y: auto; display: flex !important; flex-direction: column; gap: 10px; }
#sec-spor.apen #chatLog { display: flex; margin-top: 0; width: 100%; }
#sec-spor.apen #chatMsg { display: block; margin: 0 auto; }
#sec-spor.apen .sporhode { display: flex; justify-content: space-between; align-items: center; width: 100%; }
#sec-spor.apen .chips { display: none; }
#sec-spor.apen form { position: sticky; bottom: 0; width: 100%; }
.sporhode b { font-family: var(--display); font-size: 18px; }

/* Eksisterende komponenter i den nye flaten */
.panel, .prop, .agent, .src, .eksp { border-radius: 16px; }
.btn { border-radius: 12px; }
.btn.primary { box-shadow: 0 6px 16px -8px var(--ink); }
@media (prefers-reduced-motion: reduce) { #sider > .side.vis, #sider > section.sec.vis, .skark, .sktoast { animation: none; } .kort.hovedkort { transition: none; } }

/* Mobil (steg 99, 5. oktober 2026). Sebastian avgjør forslagene på telefonen: et langt utkast skjøv Ja, Endre og Nei
   tre skjermhøyder ned. Utkastet kortes ned med «Vis hele utkastet», og knappene står fast nederst på kortet. */
.utkast.lang:not(.apen) > span { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.visutkast { margin-top: -4px; align-self: flex-start; font-size: 14px; }
@media (max-width: 720px) {
  #sec-spor .chips { display: none; }
  #sec-spor { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .kort.hovedkort .knapper.avgjor { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5; background: var(--card); padding: 10px 0 4px; margin: 0 -2px; box-shadow: 0 -10px 16px -12px var(--skygge); flex-wrap: nowrap; }
  .kort.hovedkort .knapper.avgjor .knapp { flex: 1; min-height: 48px; font-size: 16px; }
  .utkast { font-size: 15px; }
  input, select, textarea, .skark textarea, .skark input, .skark select, .setning .vfelt, #sec-spor .ask input { font-size: 16px; }
  .skslor { padding: 0; }
  .skark { border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); margin: auto 0 0; }
  .skark .knapper .knapp { min-height: 44px; flex: 1; }
  .skark textarea { min-height: 38vh; }
}
@media (max-width: 520px) { header.topp .brand { display: none; } header.topp select { max-width: 36vw; } }

/* Forslag i klartekst (steg 99): innlegget det gjelder, hvorfor, og valg mellom tekster. */
.kontekst { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.kontekst p { margin: 0; color: var(--ink); }
.kontekst-hvem { color: var(--mute); font-size: 13px; }
.kontekst a { font-size: 14px; font-weight: 600; align-self: flex-start; display: inline-flex; gap: 4px; align-items: center; }
.kort-hvorfor { margin: 0; }
.valg { display: flex; flex-direction: column; gap: 8px; }
.valg-tittel { font-size: 13px; color: var(--mute); font-weight: 600; }
.valgrad { display: flex; gap: 10px; align-items: flex-start; background: var(--soft); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 15px; white-space: pre-wrap; }
.valgrad input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--ink); }
.valgrad:has(input:checked) { outline: 2px solid var(--ink); }
#skEgen { width: 100%; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--paper); color: var(--ink); }
/* Faste felter på forslaget (steg 99). */
.felter { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.felter dt { color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.felter dd { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 420px) { .felter { grid-template-columns: 1fr; gap: 2px; } .felter dd { margin-bottom: 6px; } }


/* Vakt (steg 108): kortene om endring hos konkurrentene, etter mockup 4 del 4. Ingen AI-merke. */
#sec-vakt .innledning { max-width: 70ch; margin: 0 0 12px; color: var(--mute); }
#sec-vakt .ukeoverskrift { margin: 18px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); font-weight: 600; }
#sec-vakt .ukeoverskrift small { font-weight: 400; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.vaktkort-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vaktkort { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; min-width: 0; }
.vaktkort h3 { margin: 0; font-size: 15.5px; line-height: 1.3; font-weight: 650; }
.vaktkort h3 em { font-style: normal; color: var(--signaltekst, var(--ink)); }
.vaktkort .merkelapp { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.vaktkort .meta { font-size: 12px; color: var(--mute); display: flex; gap: 8px; flex-wrap: wrap; }
.vaktkort .sjekk { text-decoration: underline; text-underline-offset: 2px; }
.vaktkort .forogetter summary { cursor: pointer; font-size: 12.5px; color: var(--mute); }
.vaktkort .forogetter p { margin: 2px 0 8px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }

/* Forslagskortet (steg 109): effekt og kostnad, grunner med sjekk, stegene med bryter. */
.fkort { display: flex; flex-direction: column; gap: 12px; }
.fkort-tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fkort-tall > div { background: var(--soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fkort-tall span.mute { font-size: 12px; } .fkort-tall b { font-size: 15px; line-height: 1.3; } .fkort-tall small { font-size: 12px; }
.fgrunner { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.fgrunner li { display: flex; flex-direction: column; gap: 1px; } .fgrunner .sjekk { color: var(--mute); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.fsteg { display: flex; flex-direction: column; gap: 6px; }
.fstegrad { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; font-size: 14px; cursor: pointer; }
.fstegrad input { margin-top: 3px; } .fstegrad small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; }
.fstegrad:has(input:not(:checked)) { opacity: .55; text-decoration: line-through; }
.fleste summary { cursor: pointer; font-size: 13px; color: var(--mute); } .fleste p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
/* Rammeverkene i Innstillinger (steg 109): én renderer, spørsmålet som kunden ser det. */
.rv { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.rv:last-child { border-bottom: 0; }
.rv .rvsetning { font-size: 15px; line-height: 1.6; margin: 0 0 6px; }
.rv .rvhjelp { color: var(--mute); font-size: 13px; margin: 0 0 8px; }
.rvfelt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; font-size: 14px; }
.rvfelt .sp { flex: 1 1 260px; } .rvfelt .hv { color: var(--mute); font-size: 12px; flex-basis: 100%; }
.rvfelt .knapp.valgt { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rvfelt input[data-rvtekst] { font: inherit; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; flex: 1 1 220px; }
.rvfelt .svar { color: var(--mute); font-size: 12px; }
/* Det uskarpe forslaget i Vakt (steg 109). */
.vaktkort.laas { position: relative; overflow: hidden; min-height: 150px; }
.vaktkort.laas .uskarp { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.vaktkort.laas .over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 14px; background: linear-gradient(to top, var(--card) 55%, transparent); }

/* Legg til et selskap (steg 110): konkurrentbrikkene. */
.skark .brikke { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.skark .brikke.pa { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.skark .brikke small { margin-left: 6px; opacity: .75; font-size: 11px; }

/* Steg 112: mindre tekst. Det store tallet, rader med verdi og pil, lenker under én hovedknapp. Gjelder alle flatene. */
.vstort, .hstort { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0 14px; }
.vstort .tall, .hstort .tall { color: var(--ink); font-family: var(--display); font-size: clamp(46px, 9vw, 64px); font-weight: 760; line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.vstort .under, .hstort .under { color: var(--mute); font-size: 14px; line-height: 1.35; padding-bottom: 5px; }
.lenke { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); cursor: pointer; }
.under-knapp { display: flex; justify-content: center; gap: 22px; font-size: 13.5px; color: var(--mute); margin-top: 10px; flex-wrap: wrap; }
.knapp.ja.stor.vakt-hoved, .hovedknapp { width: 100%; margin-top: 14px; }
.prikk { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; vertical-align: 0; }
.prikk.ring { border: 2px solid var(--mute); width: 9px; height: 9px; box-sizing: border-box; background: none; }
/* Vakt: søkekartet og flisene. */
.vkart { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 12px 8px; color: var(--ink); cursor: pointer; font: inherit; max-width: 560px; }
.vkart svg { width: 100%; height: auto; display: block; }
.vkart .forklaring { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--mute); padding-top: 6px; }
.vkart .forklaring span { display: inline-flex; align-items: center; gap: 5px; }
.vfliser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; max-width: 560px; }
.vflis { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.vflis b { font-family: var(--display); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.vflis span { font-size: 12px; color: var(--mute); }
#sec-vakt .vakt-hoved, #sec-vakt .under-knapp { max-width: 560px; }

/* Hjem (steg 112): kortet med stort tall, stolpe og prikker, selskapene som prikk og kurve. */
.hovedkort .kortmeta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mute); }
.hovedkort .hstort { margin: 0; }
.hovedkort h3 { font-size: 18px; line-height: 1.3; }
.hovedkort .fakta { display: flex; gap: 6px; flex-wrap: wrap; }
.hovedkort .fakta span { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--soft); }
.stolpe { display: flex; gap: 2px; height: 34px; border-radius: 10px; overflow: hidden; }
.stolpe .seg { border: 0; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--on-signal); background: var(--signal); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; min-width: 0; }
.stolpe .seg:nth-child(2) { background: color-mix(in srgb, var(--signal) 70%, var(--card)); }
.stolpe .seg:nth-child(n+3) { background: color-mix(in srgb, var(--signal) 45%, var(--card)); color: var(--ink); }
.stolpe .seg.av { background: var(--hair); color: var(--mute); text-decoration: line-through; }
.treffrad { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mute); }
.treffrad i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-block; }
.treffrad i.traff { background: var(--ok); border-color: var(--ok); }
.treffrad i.bom { background: var(--mute); border-color: var(--mute); }
.treffrad span { margin-left: 4px; }
.frist { height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; margin-top: -4px; }
.frist i { display: block; height: 100%; background: var(--mute); }
.kort-kontekst p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; }
.liste button.rad { cursor: pointer; font: inherit; }
.selskaper { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.selskaper .sel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.selskaper .sel b { font-size: 14px; display: flex; align-items: center; gap: 7px; }
.selskaper .sel .spark { width: 100%; height: 26px; }
/* Bare prikkene. Uten .prikk farget regelen også pillene grønt på grønt (rettet i steg 113). */
.prikk.p-gul { background: var(--gul, #D9A92E); } .prikk.p-ok { background: var(--ok); } .prikk.p-av { background: var(--line); } .prikk.p-feil { background: var(--signal); }

/* Innstillinger (steg 112): ringen for oppsettet og verdiene som prikker og ruter. */
.iring { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.iring b { font-family: var(--display); font-size: 20px; display: block; line-height: 1.2; }
.iring .lenke { font-size: 13.5px; color: var(--mute); }
.iprikker, .iruter { display: inline-flex; gap: 3px; vertical-align: middle; }
.iprikker i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.iprikker i.pa { background: var(--ok); }
.iruter i { width: 8px; height: 8px; border-radius: 2px; background: var(--line); display: inline-block; }
.iruter i.pa { background: var(--ok); }
#side-innst .liste button.rad { width: 100%; }
.innst-ark .setninger, .innst-ark .liste { margin-top: 6px; }
.innst-ark .setning { font-size: 15px; }

/* Legg til et selskap (steg 112): ett felt, tre prikker for det panelet leser, rader i dempet skrift. */
.skark .nfelt { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); box-sizing: border-box; margin-bottom: 10px; }
.ntrinn { display: flex; align-items: center; font-size: 12px; color: var(--mute); margin: 4px 0 12px; }
.ntrinn .t { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 64px; }
.ntrinn .t i { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.ntrinn .linje { height: 2px; background: var(--ok); flex: 1; margin-bottom: 18px; }
.ntrinn.leter .t i, .ntrinn.leter .linje { background: var(--line); animation: nleter 1.2s ease-in-out infinite; }
.ntrinn.leter .t:nth-of-type(2) i { animation-delay: .3s; } .ntrinn.leter .t:nth-of-type(3) i { animation-delay: .6s; }
@keyframes nleter { 50% { background: var(--ok); } }
@media (prefers-reduced-motion: reduce) { .ntrinn.leter .t i, .ntrinn.leter .linje { animation: none; } }
.skark .rad.foreslatt em { font-style: italic; }
.nlogo { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; font-style: normal; margin-left: 2px; vertical-align: middle; }
.nbrikker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.skark .under-knapp select { font: inherit; font-size: 13.5px; color: var(--mute); background: none; border: 0; text-decoration: underline; }

/* Ukerapporten (steg 113): poeng som tall og strek, delene i arket. */
.seksjonsnavn { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin: 16px 0 6px; }
.ukvalgt { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin: 14px 0; box-shadow: 0 12px 32px -12px var(--skygge); }
.ukvalgt .kortmeta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mute); }
.ukvalgt h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.ukpoeng { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; width: 100%; }
.ukpoeng b { color: var(--ink); min-width: 20px; }
.ukpoeng .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--hair, var(--line)); overflow: hidden; }
.ukpoeng .bar i { display: block; height: 100%; background: var(--ink); border-radius: 6px; }
.ukpoeng .bar.under i { background: var(--line); }
.ukkol { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; text-align: left; }
.ukdel { display: inline-block; width: 60px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; vertical-align: middle; }
.ukdel i { display: block; height: 100%; background: var(--ok); }

/* Verktøy (steg 114): tallene som små ruter med prikk, tre per rad. */
.vtavle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 4px; }
.vrute { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 10px; font-size: 13px; display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); text-decoration: none; }
.vrute.gul { border-color: color-mix(in srgb, var(--gul, #D9A92E) 55%, var(--line)); }
.vrute:hover { border-color: var(--mute); }
@media (min-width: 900px) { .vtavle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 430px) { .vtavle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Agentene (steg 114): ruter for hva som skjedde med forslagene, fylt for svar, tom for gikk ut. */
.rad .navn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rad .navn small { color: var(--mute); font-size: 12px; }
.aruter { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; margin-right: 4px; }
.aruter i, .aforkl i { width: 7px; height: 12px; border-radius: 2px; display: inline-block; box-sizing: border-box; }
.aruter .g, .aforkl .g { background: var(--ok); } .aruter .n, .aforkl .n { background: var(--mute); }
.aruter .u, .aforkl .u { border: 1.5px solid var(--line); } .aruter .v, .aforkl .v { background: var(--gul, #D9A92E); } .aruter .f { background: var(--signal); }
.aforkl { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--mute); margin: 8px 2px 0; }
.aforkl span { display: inline-flex; align-items: center; gap: 5px; }
.asist { font-size: 13.5px; color: var(--mute); margin: 10px 0; }

/* Historikk (steg 114): stolpen for hvordan forslagene endte, brikkene og linjene. */
.hstolpe { display: flex; height: 14px; border-radius: 6px; overflow: hidden; gap: 2px; margin-top: 12px; }
.hstolpe i { display: block; }
.hbrikker { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 10px; }
.hbrikker .brikke { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--mute); cursor: pointer; }
.hbrikker .brikke.pa { background: var(--ink); color: var(--paper, var(--bg)); border-color: var(--ink); }
.htittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hlogg .act { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.hlogg .act .t { color: var(--mute); font-size: 12px; }

/* Kjøring (steg 114): bryteren og ukeplanen. */
.kjvalg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--soft, var(--card)); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; margin-bottom: 16px; }
.kjvalg button { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 0; border-radius: 9px; border: 0; background: transparent; color: var(--mute); cursor: pointer; }
.kjvalg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 6px -2px var(--skygge); }
.kjvalg button:disabled { cursor: default; }
.kjuke { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px; margin: 14px 0; }
.kjuke table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kjuke th, .kjuke td { padding: 9px 2px; text-align: center; border-bottom: 1px solid var(--line); }
.kjuke tr:last-child td { border-bottom: 0; }
.kjuke th { color: var(--mute); font-weight: 600; font-size: 11.5px; }
.kjuke th:first-child, .kjuke td:first-child { text-align: left; padding-left: 0; }
.kjuke tbody tr { cursor: pointer; }
.kjuke td i[class^="kj-"] { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--ink); }
.kjuke td i.kj-kilde { background: var(--k2, #4F86E8); }
.kjuke td i.kj-merking { background: var(--mute); }
.kjuke td i.kj-fast { background: transparent; border: 2px solid var(--ink); box-sizing: border-box; }

/* Markedet (steg 115). */
.mtre { width: 100%; height: auto; display: block; }
.mtre text { font-family: var(--tekst); }
.rv.krets .rvfelt { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.rv.krets .rvfelt .sp { flex: 1; min-width: 0; }

/* Hjem styrer uka (steg 116): radene med ring eller prikk foran verbet. public/hjem-modell.js. */
.hrad { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hring { width: 18px; height: 18px; flex: none; }
/* Prikken står i et felt like bredt som ringen, så teksten i alle radene i «Styrer uka» starter likt (steg 119). */
.hrad > .prikk { width: 8px; height: 8px; margin: 0 5px; flex: none; }
.nestekort .kortmeta span:first-child { text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px; font-weight: 600; }

/* Målgruppene (steg 116): mulighetsmatrisen. Fargestyrken er antall samtaler i feltet, et tomt felt har stiplet kant. */
.mmatrise { display: grid; gap: 5px; align-items: center; margin: 4px 0 14px; font-size: 12.5px; }
.mmatrise .mkol { color: var(--mute); text-align: center; font-size: 11.5px; line-height: 1.2; }
.mmatrise .mrad { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; line-height: 1.2; }
.mcelle { aspect-ratio: 1; max-width: 100%; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--gul) calc(var(--styrke, 0) * 100%), transparent); border: 1px solid var(--line); }
.mcelle.hull { border-style: dashed; color: var(--mute); font-weight: 500; background: none; }
.mhull { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-bottom: 12px; }
.mgny { display: flex; gap: 8px; margin: 8px 0 4px; }
.mgny input { flex: 1; min-width: 0; }

/* Steg 116: «Vis»-knappene fra før skallet trengs ikke i et rom, og forklaringene ligger bak «Slik virker det». */
.sec .sechead button[id$="Apne"] { display: none; }
details.om { margin: 0 0 12px; }
details.om summary { cursor: pointer; color: var(--mute); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
details.om summary::-webkit-details-marker { display: none; }
details.om[open] summary { margin-bottom: 6px; }

/* Fellesskapet (steg 116): stolper per målgruppe, brikker, og innleggene kortet til tre linjer. */
.stolper { display: flex; flex-direction: column; gap: 7px; margin: 0 0 14px; font-size: 13px; }
.stolper > div { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 30px; gap: 10px; align-items: center; }
.stolper b { display: block; height: 8px; border-radius: 4px; background: var(--gul); min-width: 2px; }
.stolper .uten span, .stolper .uten em { color: var(--mute); }
.stolper .uten b { background: var(--line); }
.stolper em { font-style: normal; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.brikker { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.brikker button { font: inherit; font-size: 13px; color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.brikker button.on { background: var(--ink); color: var(--paper, var(--card)); border-color: var(--ink); }
#sec-fellesskap .fitem .tekst { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#sec-fellesskap .fitem .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Årshjulet (steg 116): nivåene på én linje, som brikker. */
#sec-arshjul > .valg { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
#sec-arshjul > .valg .pillbtn { flex: none; }
#fellesskap .rad > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fellesskap .rad > em { flex: none; }

/* Mastermodellen i ukerapporten (steg 117): spennet som strek med prikk, stemmene som elleve ruter. */
.ukspenn { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--line); margin: 6px 0 4px; }
.ukspenn i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: color-mix(in srgb, var(--gul) 45%, transparent); }
.ukspenn b { position: absolute; top: -2px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.ukruter { display: flex; gap: 3px; }
.ukruter i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); display: block; }
.ukruter i.for { background: var(--ok); border-color: var(--ok); }
.ukruter i.mot { background: var(--fare); border-color: var(--fare); }
.ukruter i.noy { background: var(--line); }
.ukruter i.tom { border-style: dashed; }

/* Forsiden (steg 117): dommen, plassene per kanal og figurene med påstand og kildelinje. */
.forside { margin-top: 28px; display: grid; gap: 18px; }
.fdom h3 { font-family: var(--display); font-size: clamp(21px, 3.4vw, 28px); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 10px; max-width: 34ch; }
.fknapper { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fplasser { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fplass { background: var(--card, var(--paper)); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; }
.fplass .fk { color: var(--mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.fplass .fn { font-family: var(--display); font-size: 34px; font-weight: 760; line-height: 1; font-variant-numeric: tabular-nums; }
.fplass .fn small { font-size: 16px; color: var(--mute); font-weight: 600; }
.fplass .fe { color: var(--mute); font-size: 12.5px; } .fplass .fe.ned { color: var(--signaltekst, var(--signal)); }
.ffliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.fflis { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; background: var(--card, var(--paper)); }
.fflis .ffig { color: var(--mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.fflis h4 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.fflis svg { width: 100%; height: auto; max-height: 230px; }
.fflis .lenke { justify-self: start; }
.fkilde { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 6px; color: var(--mute); font-size: 11.5px; }
.fkilde b { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }

/* Dulting på forslagskortet (steg 118). */
.dult { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.dultmerke { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c3); background: var(--c3-bg); border-radius: 999px; padding: 3px 10px; }
.dultvarsel { font-size: 12.5px; color: var(--mute); }

/* Oppsettet som bilder (steg 118): baner, stige, brikker og bobler. */
.oppbilde { width: 100%; max-width: 320px; display: block; margin: 0 auto 8px; }
.stige { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.stigetrinn { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); min-width: 74px; text-align: center; font-size: 12px; }
.stigetrinn i { font-style: normal; font-family: var(--display); font-size: 18px; font-weight: 750; }
.stigetrinn.ja { border-color: var(--ok); } .stigetrinn.ja i { color: var(--ok); }
.stigetrinn.nei { border-color: var(--signal); } .stigetrinn.nei i { color: var(--signaltekst); }
.stigetrinn.forbi { opacity: .4; }
.stigeutfallene { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.stigeutfall { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--mute); }
.stigeutfall.na { background: var(--ink); color: var(--paper); font-weight: 700; }
.stigeneste { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
.minbrikker { font-size: 16px; line-height: 2.1; }
.brikke { display: inline-block; padding: 1px 10px; border-radius: 10px; background: var(--c0-bg); color: var(--ink); line-height: 1.6; }
.brikke.tom { background: none; border: 1.5px dashed var(--signaltekst); color: var(--signaltekst); font-weight: 700; }
.brikke.mal { background: var(--ok-bg); }
.bobler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.boble { font: inherit; font-size: calc(12.5px * var(--s, 1)); padding: calc(4px * var(--s, 1)) calc(11px * var(--s, 1)); border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.boble.valgt { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Trakten som figur (steg 121). */
svg.trakt { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.uktrakt { margin: 4px 0 16px; }
@media (prefers-reduced-motion: reduce) { svg.trakt animate, svg.trakt animateMotion { display: none; } }

/* Det første markedsbildet (steg 122). */
.forstebilde { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; border: 1.5px solid var(--ink); border-radius: 20px; padding: 20px; background: var(--card); }
.forstebilde h3 { margin: 4px 0 10px; font-family: var(--display); font-size: 21px; line-height: 1.25; }
.forstebilde ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; }
.fbhund { width: 56px; height: 56px; color: var(--ink); }
.fbkonk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fbkonk span { font-size: 13px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
/* Regnskapene i det første markedsbildet (steg 125): omsetning som stolper med vekst. */
.fbfunn { margin: -4px 0 10px; font-weight: 600; }
.fbregnskap { display: grid; gap: 6px; margin-bottom: 12px; }
.fbrr { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) auto 48px; gap: 8px; align-items: center; font-size: 13px; }
.fbrr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbrr i { display: block; height: 10px; border-radius: 5px; background: var(--line); }
.fbrr.egen i { background: var(--ink); }
.fbrr b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fbrr em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.fbrr em.opp { color: var(--ok); }
.fbrr em.ned { color: var(--signaltekst); }
@media (prefers-reduced-motion: no-preference) { .forstebilde.bygger .fbhund { animation: fbsnus 1.6s ease-in-out infinite; } @keyframes fbsnus { 50% { transform: translateY(-5px); } } }
@media (max-width: 600px) { .forstebilde { grid-template-columns: minmax(0, 1fr); } }

/* Your next move og modellene på Home (steg 124). */
.nestehode { font: 500 11.5px var(--mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-bottom: 8px; }
.hjemtrakt { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--card); text-decoration: none; color: inherit; margin-bottom: 12px; }
.hjemtrakt > span { font-size: 12.5px; color: var(--mute); }
.modeller { margin-top: 32px; }
.modeller .mhode { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 14px; }
.modeller h2 { margin: 0; font-family: var(--display); font-size: 26px; letter-spacing: -.02em; }
.modeller .mhode > span { color: var(--mute); font-size: 14px; }
.mfremdrift { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.mfremdrift i { display: block; height: 100%; background: var(--signal); border-radius: 4px; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mkort { position: relative; border: 1px dashed var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 6px; align-content: start; background: transparent; }
.mkort.live { border: 1px solid var(--line); background: var(--card); }
.mnr { position: absolute; top: 14px; right: 16px; font: 600 11px var(--mono, ui-monospace, monospace); color: var(--mute); }
.mnavn { font: 600 11.5px var(--mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--signaltekst); }
.mres { font-family: var(--display); font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.mres.last { color: var(--mute); font-size: 17px; }
.munder { font-size: 13.5px; }
.mwhy { font-size: 12.5px; color: var(--mute); }
.mkort .lenke { justify-self: start; margin-top: 2px; }
@media (max-width: 900px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mgrid { grid-template-columns: minmax(0, 1fr); } .modeller .mhode { grid-template-columns: auto auto; } .mfremdrift { grid-column: 1 / -1; } }

/* Forslag til svar fra dataene i VRIO-A og Value gap (steg 125). */
.rvforslag { margin: 8px 0 0; font-size: 13px; color: var(--mute); }
.rvforslag b { color: var(--ink); }

/* Ringen og neste steg over modellene (steg 126). Tallet står i ringen, og teksten sier det samme. */
.mneste { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 14px; background: var(--card); }
.mneste b { display: block; font-size: 15px; }
.mneste span { display: block; color: var(--mute); font-size: 13.5px; margin: 4px 0 8px; }
.mring { width: 80px; height: 80px; }

/* Like synlige valg på forslagskortet (steg 126): «Not now» og «Change or see why» er knapper, ikke grå lenker. */
.knapper.likeverdige { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.knapper.likeverdige .knapp { min-height: 44px; }

/* Det som kjører og det som er målt (steg 127). Treff og bom like tydelige, ingen feiring. */
.kjorergruppe { margin: 18px 0; }
.kjorer { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card); display: grid; gap: 8px; margin-bottom: 10px; }
.kjorer h3 { margin: 0; font-size: 17px; }
.kj-fremdrift { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.kj-fremdrift i { display: block; height: 100%; background: var(--ink); }
.kj-maal { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; color: var(--mute); }
.kj-tall { font-family: var(--display); font-size: 26px; color: var(--ink); }
.kjorer.bom .kj-tall { color: var(--signaltekst); }
.kjorer.traff .kj-tall { color: var(--ok); }
.kj-dele { border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 14px; }

/* Beslutningsrommet (steg 127). Svaret først, så kortene. Tabellene ruller sideveis på smale skjermer. */
#beslRot { display: grid; gap: 14px; }
.beslvalg { display: flex; flex-wrap: wrap; gap: 12px; }
.beslvalg label { display: grid; gap: 4px; font-size: 12.5px; color: var(--mute); }
.beslvalg select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); max-width: 100%; }
.beslsvar { border: 1.5px solid var(--ink); border-radius: 18px; padding: 16px; background: var(--card); }
.beslsvar h3 { margin: 4px 0 6px; font-family: var(--display); font-size: 21px; line-height: 1.25; }
.beslkort { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card); display: grid; gap: 10px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mute); }
.beslsant { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.besltabell { overflow-x: auto; }
.besltabell table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 13.5px; }
.besltabell th, .besltabell td { text-align: left; padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
.besltabell th small { display: block; color: var(--mute); font-weight: 400; font-size: 11.5px; }
.besltabell td input[type="number"] { width: 64px; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper, #fff); color: var(--ink); }
.besltabell td input[type="range"] { width: 100%; min-height: 24px; }
.besltabell td output { display: block; font-weight: 600; }
.besltabell td small { color: var(--mute); font-size: 11.5px; }
.beslvekt { margin-top: 4px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.beslbar { display: block; height: 6px; border-radius: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.beslbar i { display: block; height: 100%; background: var(--ink); }
.beslsum th, .beslsum td { border-top: 2px solid var(--ink); }
.beslfoss { display: grid; gap: 14px; }
.beslfrad { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.beslfspor { position: relative; height: 12px; background: linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat; }
.beslfspor i { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.beslfspor i.pluss { background: var(--ok); }
.beslfspor i.minus { background: var(--signaltekst); }
.beslfrad em { font-style: normal; font-variant-numeric: tabular-nums; }

/* Drilldown (steg 137): arket som forklarer ett tall, tegnet etter project/Drilldown.dc.html. Blå topp, sitrongult tall,
   seladon for opp og benzol for ned, fem deler med én forklaringslinje hver. Tegnes av public/drill-modell.js. */
.skark.drillark { padding: 0; overflow: hidden auto; max-height: 88vh; gap: 0; }
.drill { display: flex; flex-direction: column; }
.drtopp { background: var(--dyp); color: #F5F5F5; padding: 10px 18px 16px; display: block; flex: none; }
/* Blokk og ikke grid (17. oktober 2026): Safari på iPhone regnet grid-hodet lavere enn innholdet i det rullende arket,
   så kartet la seg over tittel, tall og «Why». Avstanden kommer fra marginene under. */
.drtopp > * + * { margin-top: 8px; } .drtopp > .drhank { display: block; margin: 0 auto 2px; } .drtopp > .drtittel { display: block; }
.drhank { width: 40px; height: 4px; border-radius: 2px; background: #4A6290; }
.drsmule { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.drsmule .mono { font-size: 10px; letter-spacing: .08em; color: #A99BC9; }
.drlukk { border: 0; background: rgba(255,255,255,.12); color: #F5F5F5; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: none; }
.drtittel { font: 600 16px/1.25 var(--display); }
.drtall { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.drtall .disp { font: 780 44px/.9 var(--display); letter-spacing: -.04em; color: var(--neon); }
.drdelta { background: var(--neon); color: var(--on-neon); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 3px 9px; }
.drdelta.opp { background: var(--lilla); color: var(--on-lilla); }
.drwhy { background: var(--natt); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.drwhy b { color: var(--neon); }
.drkropp { padding: 0 18px 22px; display: flex; flex-direction: column; }
.drdel { display: grid; gap: 7px; padding: 14px 0; border-top: 1.5px solid var(--ink); }
.drdel:first-child { border-top: 0; }
.drdel h4 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 14px var(--display); }
.drdel h4 i, .drnr { font: 600 10px var(--tekst); font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--dyp); color: var(--neon); display: inline-grid; place-items: center; flex: none; }
.drnr { background: var(--neon); color: var(--on-neon); margin-right: 6px; }
.drex { font-size: 12px; color: var(--mute); line-height: 1.4; margin: 0; }
.drdel h4 { flex-wrap: wrap; }
.drhjelp { margin-left: auto; font: 400 12px var(--tekst); }
.drhjelp summary { list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); display: grid; place-items: center; font: 600 12px var(--tekst); }
.drhjelp summary::-webkit-details-marker { display: none; }
.drhjelp[open] { flex-basis: 100%; display: grid; justify-items: end; gap: 6px; }
.drhjelp[open] summary { background: var(--dyp); color: var(--neon); }
.drhjelp[open] p { justify-self: stretch; text-align: left; }
.dralle summary { cursor: pointer; font: 500 11px var(--mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.dralle[open] summary { margin-bottom: 6px; }
.drdriver { display: grid; grid-template-columns: minmax(70px, 30%) 1fr 64px; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 2px; border: 0; background: transparent; color: inherit; text-align: left; border-radius: 6px; cursor: pointer; }
.drdriver:hover { background: rgba(252,238,149,.35); }
.drdriver span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drbane { position: relative; height: 14px; display: block; }
.drbane > i { position: absolute; top: 1px; bottom: 1px; border-radius: 4px; }
.drbane > i.drmidt { left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--dyp); border-radius: 0; }
.drdriver b { text-align: right; }
.drhend { display: grid; gap: 4px; font-size: 12.5px; }
.drlegende { display: flex; flex-wrap: wrap; gap: 10px; font: 500 9px var(--mono, ui-monospace, monospace); text-transform: uppercase; color: var(--mute); }
.drlegende span { display: flex; align-items: center; gap: 4px; }
.drlg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.drlg-kilde { background: var(--natt); } .drlg-del { background: var(--lilla); } .drlg-hendelse { background: var(--neon); box-shadow: 0 0 0 1px var(--ink); }
.drlg-brukes { background: var(--card); box-shadow: 0 0 0 1.5px var(--ink); } .drlg-leser { border: 1.5px dashed var(--mute); }
.drlister { display: grid; gap: 3px; font-size: 12px; }
.drk { font: 500 9px/1.25 ui-monospace, "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.drnormal { position: relative; height: 26px; }
.drspor { position: absolute; left: 0; right: 0; top: 9px; height: 8px; border-radius: 4px; background: var(--line); }
.drband { position: absolute; top: 9px; height: 8px; border-radius: 4px; background: var(--lilla); }
.drmerke { position: absolute; top: 3px; width: 3px; height: 20px; background: var(--dyp); border-radius: 2px; }
.drlohi { display: flex; justify-content: space-between; font-size: 10px; color: var(--mute); }
.drgronn { background: var(--lilla); color: var(--on-lilla); border-radius: 3px; padding: 0 4px; }
.drtillit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; background: var(--soft); border-radius: 12px; padding: 10px 0; }
.drtillit > div { display: grid; gap: 2px; padding: 0 6px; min-width: 0; }
.drtillit > div + div { border-left: 1.5px solid var(--card); }
.drtillit .disp { font: 780 20px var(--display); }
.drmetrikk { font-size: 10px; color: var(--mute); }
.drknapper { display: flex; gap: 8px; padding-top: 6px; }
.drknapp { min-height: 44px; border-radius: 999px; font-weight: 600; font-size: 13px; border: 0; cursor: pointer; flex: 1; }
.drknapp.bla { background: var(--dyp); color: #fff; } .drknapp.sitron { background: var(--neon); color: var(--on-neon); }
.drtittel2 { font: 600 15px/1.25 var(--display); padding: 16px 0 8px; }
.drtabell { display: grid; font-size: 12px; overflow-x: auto; }
.drtabell > span { padding: 5px 4px; border-bottom: 1px solid var(--hair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drtabell > .drh { font: 500 9px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; background: var(--dyp); color: var(--neon); }
.drh-v { text-align: right; }
[data-drill] { cursor: pointer; }

/* Sidene fra blokkregisteret (steg 138): nummerert spørsmål, kildebrikke, grafikk, legende, «?» og konklusjon. */
.sbside { display: grid; gap: 0; }
.sblokk { display: grid; gap: 8px; padding: 14px 0; border-top: 1.5px solid var(--ink); }
.sblokk:first-child { border-top: 0; }
.sblokk header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sblokk h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 16px var(--display); }
.sblokk h3 i { font: 600 11px var(--tekst); font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--neon); color: var(--on-neon); display: grid; place-items: center; flex: none; }
.sbkilde { font: 500 9.5px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; background: var(--soft); color: var(--mute); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.sbgraf { display: grid; gap: 6px; }
.sbtom { margin: 0; color: var(--mute); font-size: 13.5px; }
.sbtom a { color: var(--ink); font-weight: 600; }
.sbtall { font: 700 15px var(--display); cursor: pointer; }
.sbsm { font-size: 11.5px; color: var(--mute); }
.sbmal, .sbtrakt { display: grid; grid-template-columns: minmax(90px, 34%) 70px 1fr minmax(60px, auto); gap: 8px; align-items: center; font-size: 13px; }
.sbbar { position: relative; height: 10px; border-radius: 5px; background: var(--soft); display: block; }
.sbbar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--lilla); }
.sbbar > i.bak { background: var(--neon); box-shadow: inset 0 0 0 1px var(--ink); }
.sbbar > i.bla { background: var(--dyp); }
.sbbar > b { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--ink); border-radius: 2px; }
.sbkort { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none; }
.sbsjanse { justify-self: start; background: var(--neon); color: var(--on-neon); font-weight: 700; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.sbsignal { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13.5px; cursor: pointer; }
.sbsignal small { display: block; color: var(--mute); font-size: 11.5px; }
.sbpil { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--soft); }
.sbpil.opp { background: var(--lilla); color: var(--on-lilla); } .sbpil.ned { background: var(--natt); color: #F5F5F5; }
.sbfoss { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 56px; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.sbbane { position: relative; height: 14px; display: block; }
.sbbane > i { position: absolute; top: 1px; bottom: 1px; border-radius: 4px; }
.sbbane > i.midt { left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--ink); border-radius: 0; }
.sbbane > i.ok { background: var(--lilla); } .sbbane > i.ned { background: var(--natt); }
.sbtabell { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.sbstabel { display: flex; height: 18px; border-radius: 6px; overflow: hidden; cursor: pointer; }
.sbstabel i { display: block; height: 100%; }
.sbm.bla, .sbstabel .bla { background: var(--dyp); } .sbm.ok, .sbstabel .ok { background: var(--lilla); } .sbm.sitron, .sbstabel .sitron { background: var(--neon); }
.sbm.benzol, .sbstabel .benzol { background: var(--natt); } .sbm.lys, .sbstabel .lys { background: var(--line); }
.sbm.bak { background: var(--neon); box-shadow: inset 0 0 0 1px var(--ink); } .sbm.strek { width: 3px !important; background: var(--ink); }
.sbm.opp { background: var(--lilla); border-radius: 50%; } .sbm.ned { background: var(--natt); border-radius: 50%; }
.sbpalett { display: grid; gap: 8px; }
.sbpalett > div { display: grid; gap: 2px; }
.sbk { font: 500 9.5px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.sbpille { display: inline-block; background: var(--lilla); color: var(--on-lilla); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 2px 10px; }
.sbfot { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sblegende { display: flex; flex-wrap: wrap; gap: 10px; font: 500 10px ui-monospace, "JetBrains Mono", monospace; text-transform: uppercase; color: var(--mute); }
.sblegende span { display: flex; align-items: center; gap: 4px; }
.sbm { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sbhvorfor { flex: none; max-width: 70%; }
.sbhvorfor summary { list-style: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 700; cursor: pointer; margin-left: auto; }
.sbhvorfor summary::-webkit-details-marker { display: none; }
.sbhvorfor p { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); }
.sbkonklusjon { margin: 0; font: 600 14px var(--display); }
.sbuke { padding-bottom: 6px; }
.beslstatus { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-bottom: 14px; }
.beslstatus p { margin: 0; }
.besltiltak { display: grid; gap: 8px; }
.besltiltak label { display: grid; gap: 4px; font-size: 13px; color: var(--mute); }
.besltiltak input, .besltiltak select { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--paper); color: var(--ink); }
.knapp.primar { background: var(--neon); color: var(--on-neon); border-color: var(--neon); font-weight: 600; }

/* Kortene i svaret fra kommandolinjen (steg 139): public/kommando.js. */
.kmdkortene { display: grid; gap: 8px; margin-top: 10px; }
.kmdkort { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.kmdkort.feil { background: var(--gul-bg); }
.kmdkort.konfig, .kmdkort.sikret { border-left: 3px solid var(--neon); }
.kmdtype { justify-self: start; font: 500 9.5px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; background: var(--dyp); color: var(--neon); border-radius: 999px; padding: 2px 8px; }
.kmdsti { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 13px; }
.kmdforetter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kmdforetter span { display: grid; gap: 2px; }
.kmdforetter small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.kmdsikring, .kmdkost, .kmdbesk { margin: 0; font-size: 12px; color: var(--mute); }
.kmdbesk { white-space: pre-wrap; max-height: 9em; overflow: auto; }
.kmdkost { margin-top: 6px; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 10.5px; }
.kmdok { margin: 0; font-size: 13px; }
.kmdok::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.kmdfelt { display: grid; gap: 4px; font-size: 12px; color: var(--mute); }
.kmdfelt input { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--paper); color: var(--ink); }
.kmdkort .sblokk { border-top: 0; padding: 4px 0 0; }

/* Tale i Spør (steg 141): mikrofonknappen og språket ved siden av Send. public/tale.js. */
.ask .tale, .ask .talesprak { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; min-width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; padding: 0 10px; }
.ask .talesprak { font: 600 11px ui-monospace, "JetBrains Mono", monospace; }
.ask .tale.tar-opp { background: var(--neon); color: var(--on-neon); border-color: var(--on-neon); animation: talepuls 1.2s ease-in-out infinite; }
@keyframes talepuls { 50% { box-shadow: 0 0 0 6px rgba(252,238,149,.45); } }
.ukhjelp summary { cursor: pointer; font-size: 13px; color: var(--mute); margin-top: 10px; }
/* Kartkomponenten (steg 145, public/kart.js): drilldownen og Hjem. Én puls per kart, flyt der noe skjer, pust når alt er bra. */
:root { --kring: #3A2C5C; }
.drkart { margin: 2px -6px 0; }
.kart { display: block; max-width: 380px; margin: 0 auto; overflow: visible; }
.kart-node { cursor: pointer; }
.kart-node:focus-visible { outline: none; }
.kart-node:focus-visible circle, .kart-node:focus-visible rect { stroke: var(--ink); stroke-width: 2.5; }
.kart-node:not(.valgt):hover > circle:not(.kpuls) { filter: drop-shadow(0 0 6px rgba(61,242,154,.5)); }
.kart-node.valgt > circle { filter: drop-shadow(0 0 8px rgba(61,242,154,.45)); }
.drtrykk { text-align: center; }
.drdel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .kflyt { stroke-dasharray: 4 6; animation: kflyt 1.3s linear infinite; }
  @keyframes kflyt { to { stroke-dashoffset: -20; } }
  .kpuls { animation: kpuls 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes kpuls { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.85); opacity: 0; } }
  .kpust { animation: kpust 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes kpust { 50% { transform: scale(1.035); } }
  .kart-inn .kinn { animation: kinn .55s cubic-bezier(.2,.8,.2,1.25) both; transform-box: fill-box; transform-origin: center; }
  @keyframes kinn { from { transform: scale(0); opacity: 0; } }
  .kart-inn .ktegn { stroke-dasharray: 320; stroke-dashoffset: 320; animation: ktegn .8s ease-out forwards; }
  @keyframes ktegn { to { stroke-dashoffset: 0; } }
}
/* Hjem som kart (steg 145): overskriften, kartet og arket bak en sirkel. */
.hjemkart { display: grid; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 14px 12px 12px; max-width: 520px; width: 100%; justify-self: center; }
.hkhode { display: grid; gap: 2px; padding: 0 4px; }
.hkhode span { font: 600 10px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.hkhode b { font: 800 20px/1.15 var(--display); text-wrap: balance; }
.hkhint { margin: 0; text-align: center; font-size: 12.5px; color: var(--mute); }
.hkbeslut { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--signal); background: color-mix(in srgb, var(--signal) 10%, var(--card)); color: var(--ink); border-radius: 14px; padding: 10px 12px; cursor: pointer; text-align: left; font: inherit; }
.hkbeslut b { min-width: 28px; height: 28px; border-radius: 14px; background: var(--signal); color: var(--on-signal); display: grid; place-items: center; font: 800 14px var(--display); padding: 0 6px; }
.hkbeslut span { flex: 1; font-weight: 600; }
.hkbeslut i { font-style: normal; font-size: 20px; color: var(--mute); }
.hkventer { display: grid; gap: 4px; background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.hkventer span { font: 600 10px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.hkventer b { font-weight: 700; font-size: 14px; }
.hkark { display: grid; gap: 10px; }
.hkark h3 { margin: 0; font: 800 21px/1.15 var(--display); text-wrap: balance; }
.hkark p { margin: 0; }
.hkmerke { justify-self: start; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 3px 10px; }
.hkmerke.svak { background: var(--signal); color: var(--on-signal); } .hkmerke.sterk { background: var(--neon); color: var(--on-neon); } .hkmerke.middels { background: var(--soft); color: var(--ink); }
.hkkv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.hkkv span:nth-child(even) { font-family: ui-monospace, "JetBrains Mono", monospace; text-align: right; }
.ukgraf { display: block; max-width: 340px; margin: 6px auto 0; }
.ukvalgt { display: grid; gap: 6px; background: var(--soft); border-radius: 14px; padding: 12px; margin: 4px 0 8px; }
.ukvalgt b { font: 800 16px var(--display); } .ukvalgt p { margin: 0; font-size: 13.5px; }
.ukmaler { font-weight: 700; color: var(--ink); }
.ukopphav { display: block; font: 600 10.5px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .02em; color: var(--mute); margin-top: 2px; }
.ukmodeller .rad b { display: block; font-size: 14px; } .ukmodeller .rad small { display: block; color: var(--mute); font-size: 12.5px; } .ukmodeller em.ukv { font-style: normal; flex: none; }
.ukv { justify-self: start; font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 2px 9px; }
.ukv.for { background: var(--neon); color: var(--on-neon); } .ukv.mot { background: var(--fare); color: #fff; } .ukv.noy { background: var(--card); } .ukv.tom { border: 1.5px dashed var(--mute); }
.ukgraftekst { font-size: 13px; text-align: center; margin: 2px 0 6px; }
/* Hva hver modell tilførte (steg 149): fullt navn, spørsmålet modellen stiller, og en stolpe som vokser inn. */
.ukbidrag { display: grid; gap: 2px; margin: 6px 0 4px; }
.ukbh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 2px 6px; }
.ukbh b { font: 800 16px var(--display); } .ukbh span { font-size: 12px; color: var(--mute); }
.ukbrad { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(56px, 1fr) 36px; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.ukbrad:hover, .ukbrad.valgt { background: var(--soft); }
.ukbnavn b { display: block; font-size: 13.5px; } .ukbnavn small { display: block; font-size: 12px; color: var(--mute); line-height: 1.3; }
.ukbstolpe { position: relative; height: 10px; border-radius: 5px; background: var(--hair); display: block; overflow: hidden; }
.ukbstolpe i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; display: block; }
.ukbstolpe i.for { background: var(--neon); box-shadow: 0 0 8px rgba(61,242,154,.5); } .ukbstolpe i.mot { background: var(--fare); } .ukbstolpe i.noy { background: var(--line); }
.ukbstolpe em { position: absolute; inset: 0; font-style: normal; font-size: 10px; color: var(--mute); display: grid; place-items: center; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px); }
.ukbtall { font: 800 14px var(--display); text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .ukbstolpe i { animation: ukvoks .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 60ms); transform-origin: left; }
  @keyframes ukvoks { from { transform: scaleX(0); } }
}

/* Steg 152: kartet og ukebildet deler bredden, selskapene har samme kartgrammatikk. */
.hjemtopp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .hjemtopp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.smahimmel { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; }
.selskapkart { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
.selskapkart svg { width: 100%; height: auto; }

.romkart { max-width: 380px; margin: 0 auto 24px; }
.rivalstabel { border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 4px 0 var(--card), 0 5px 0 var(--line); }

/* Faktisk gjennomføring og tidsbruk, samme skjema i journal og avgjorte forslag. */
.oppfolging { margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.oppfolging label { display: block; margin: 12px 0; font-size: 13px; }
.oppfolging input, .oppfolging select, .oppfolging textarea { display: block; margin-top: 6px; max-width: 100%; }
.oppfolging textarea { width: 100%; min-height: 60px; }
.rvfelt select { max-width: 100%; }

/* Modellgrunnlaget (steg 156): hvilke data hver modell mates med. Statusen har form og ord, ikke bare farge. */
#mgRot { display: grid; gap: 16px; }
.mg-intro { display: grid; gap: 6px; }
.mg-intro h3 { margin: 0; font: 800 22px/1.15 var(--display); text-wrap: balance; }
.mg-intro p { margin: 0; color: var(--mute); max-width: 70ch; }
.mg-intro .meta { font: 600 10px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.mg-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mg-summary div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; }
.mg-summary b { font: 800 28px/1 var(--display); color: var(--ok); font-variant-numeric: tabular-nums; }
.mg-summary span { font-size: 12.5px; color: var(--mute); }
.mg-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.mg-columns > section, .mg-focus { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.mg-columns h3, .mg-focus h3 { margin: 0; font: 800 16px var(--display); }
.mg-columns p, .mg-focus p { margin: 0; font-size: 13.5px; }
.mg-focus label { font: 700 13px var(--text); }
.mg-focus select, .mg-filters input, .mg-filters select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; }
.mg-map { min-width: 0; }
.mg-input { border-top: 1px solid var(--hair); padding-top: 10px; display: grid; gap: 4px; }
.mg-input p { margin: 0; font-size: 13px; }
.mg-input a { font-size: 13px; color: var(--ok); font-weight: 700; text-decoration: none; }
.mg-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-heading h3 { margin: 0; font: 800 15px var(--display); }
.mg-status { font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.mg-status.available { background: var(--neon); color: var(--on-neon); }
.mg-status.partial, .mg-status.stale { background: var(--gul-bg); color: var(--ink); border: 1px solid var(--gul); }
.mg-status.missing { background: transparent; color: var(--mute); border: 1.5px dashed var(--mute); }
.mg-status.supported, .mg-status.planned { background: var(--soft); color: var(--mute); }
.mg-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 640px) { .mg-filters { grid-template-columns: 1fr; } }
.mg-filters label { display: grid; gap: 4px; font-size: 12.5px; color: var(--mute); }
.mg-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mg-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.mg-card p, .mg-card h4 { margin: 0; font-size: 13px; } .mg-card h4 { font: 800 15px var(--display); }
.mg-card .meta { font: 600 10px ui-monospace, "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.mg-gaps, .mg-inventory { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.mg-gaps summary, .mg-inventory summary { cursor: pointer; font-weight: 700; }

/* Agentkortet (steg 160): leser, vurderer, gjør. */
.agkort { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px 14px; margin: 10px 0 14px; display: grid; gap: 10px; }
.agkort-rad { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 14px; line-height: 1.4; }
.agkort-rad b { color: var(--mute); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }

/* Lukkeknappen i arket: står fast øverst til høyre mens arket rulles. */
.skark { position: relative; }
.sklukk { position: sticky; top: 0; align-self: flex-end; margin: -6px -4px -40px 0; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.sklukk:active { transform: scale(.94); }
.sklukk + h3, .sklukk + * h3:first-child { padding-right: 44px; }

/* Safari presser barna i et flex-ark med max-height sammen, så kartet la seg over hodet i drilldown (17. oktober 2026).
   Ingen del av et ark skal krympe: arket ruller i stedet. */
.skark > *, .drill > *, .drkropp > * { flex-shrink: 0; }

/* Rammeverkene som bilder (17. oktober 2026): fremdrift som linje, tall som fliser, forklaring bak «?». */
.rvfrem { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.rvbane { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.rvbane i { display: block; height: 100%; background: var(--neon); border-radius: 4px; }
.rvfrem .mono { font-size: 13px; color: var(--mute); }
details.rvhjelp { position: relative; }
details.rvhjelp summary { list-style: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; color: var(--mute); cursor: pointer; }
details.rvhjelp summary::-webkit-details-marker { display: none; }
details.rvhjelp[open] p { position: absolute; right: 0; top: 30px; z-index: 4; width: min(300px, 80vw); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--ink); box-shadow: 0 10px 30px -12px var(--skygge); }
.rvtall { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rvtall > div { background: var(--soft); border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.rvtall .disp { font: 780 34px/1 var(--display); color: var(--ink); }
.rvtall span { font-size: 13px; font-weight: 600; } .rvtall small { font-size: 12px; color: var(--mute); }
.rvport { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--soft); font-size: 14px; }
.rvport .prikk { width: 10px; height: 10px; border-radius: 50%; background: var(--mute); }
.rvport.met .prikk { background: var(--ok); } .rvport.not_met .prikk { background: var(--signal); }
.rvport > span:not(.prikk) { flex: 1; color: var(--mute); }

/* Svar fra tallene (17. oktober 2026). */
.rvverdi { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rvverdi.fra b { background: var(--ok-bg); border-radius: 8px; padding: 3px 8px; }
.rvredig summary { list-style: none; cursor: pointer; color: var(--mute); font-size: 13px; text-decoration: underline; }
.rvredig summary::-webkit-details-marker { display: none; }
.rvredig[open] { flex-basis: 100%; } .rvredig[open] summary { display: none; }
.rvredigfelt { display: flex; gap: 8px; } .rvredigfelt input { flex: 1; min-width: 0; }

/* Et besvart felt er én rad: spørsmålet til venstre, verdien og «Edit» til høyre (17. oktober 2026). */
.rvfelt.rvrad { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.rvfelt.rvrad .sp { min-width: 0; }
.rvfelt.rvrad .rvverdi { flex: none; justify-content: flex-end; text-align: right; }
.rvfelt.rvrad .rvredig[open] { grid-column: 1 / -1; }
.rvfelt.rvrad:has(.rvredig[open]) .rvverdi { display: contents; }

/* Periodene som to linjer (17. oktober 2026). */
.rvperiode { background: var(--soft); border-radius: 14px; padding: 10px 12px; margin: 4px 0 8px; display: grid; gap: 6px; }
.rvpertittel { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.rvper { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 8px; font-size: 14px; }
.rvper span { color: var(--mute); } .rvper em { font-style: normal; color: var(--mute); font-size: 13px; }

/* Datakartet og blueprinten (steg 174), bare internt. public/datakart.js tegner SVG-en, fargene er variablene over. */
.dk-rot { display: grid; gap: 10px; }
.dk-topp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-topp .intern { font: 600 11px var(--tekst); padding: 4px 9px; border-radius: 999px; background: var(--feil-bg); color: var(--signaltekst); letter-spacing: .04em; }
.dk-rot .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dk-rot .chip { font: 600 12px var(--tekst); padding: 6px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); border: 0; cursor: pointer; }
.dk-rot .chip.paa { background: var(--ink); color: var(--paper); }
.dk-rot .chip small { color: var(--mute); font-weight: 500; }
.dk-ing { margin: 0; font-size: 13px; max-width: 90ch; }
.dk-lerret { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; overflow-x: auto; position: relative; }
.dk-lerret svg { display: block; width: 100%; height: auto; }
.dk-lerret svg text { font-family: var(--tekst); pointer-events: none; }
.dk-lerret [role=button] { cursor: pointer; }
.dk-lerret [role=button]:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.dk-node.dim { opacity: .45; }
.dk-merrad { position: relative; height: 22px; }
.dk-mer { position: absolute; top: 0; font-size: 12px; }
.dk-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--mute); }
.dk-legende i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.dk-detalj { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; }
.dk-detalj h3 { margin: 0; font: 780 17px/1.2 var(--display); }
.dk-detalj b { color: var(--mute); font-weight: 600; margin-right: 4px; }
.dk-st { margin: 0; } .dk-st.dk-feiler { color: var(--signaltekst); } .dk-st.dk-venter { color: var(--lilla); }
.dk-fot { font-size: 12px; margin: 0; }
.vev-sok { display: grid; gap: 8px; }
.vev-sok input { width: 100%; max-width: 420px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; box-sizing: border-box; }
.vev-treff { display: flex; gap: 6px; flex-wrap: wrap; }
.dk-hva { margin: 0; color: var(--ink); }
.dk-lenker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dk-lenke { text-decoration: none; font-size: 13px; padding: 8px 12px; }
.dk-tips { position: fixed; z-index: 60; max-width: 320px; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px -10px var(--skygge); font-size: 13px; line-height: 1.4; pointer-events: none; }
.dk-tips b { font-weight: 700; } .dk-tips small { color: var(--mute); font-size: 11px; }
/* Økonomimodellen (steg 177), etter docs/skisser-2026-10-18/okonomi.html og budsjett.html. */
.oko { display: grid; gap: 10px; max-width: 760px; }
.oko-bud { max-width: none; }
.oko svg text { font-family: var(--tekst); }
.oko-topp, .oko-budtopp { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.oko-budtopp .oko-h { margin-right: auto; }
.oko-seg { display: inline-flex; gap: 2px; background: var(--soft); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.oko-seg button { border: 0; background: none; color: var(--ink); font: 600 13px var(--tekst); padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.oko-seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.oko-lenke { font-size: 14px; color: var(--mute); text-decoration: none; font-weight: 600; }
.oko-lenke:hover { color: var(--ink); }
.oko-ov { font: 600 12px var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0; }
.oko-h { font: 780 22px/1.15 var(--display); margin: 0; }
.oko-ing { font-size: 13px; color: var(--mute); margin: 0 0 4px; }
.oko-kort { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.oko-rader { gap: 8px; }
.oko-rd { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 14px; }
.oko-rd > b { font: 780 15px var(--display); text-align: right; white-space: nowrap; }
.oko-rd small { grid-column: 1 / -1; font-size: 12px; color: var(--mute); }
.oko-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.oko-chips button { border: 0; font: 600 12px var(--tekst); padding: 6px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); cursor: pointer; }
.oko-chips button.paa { background: var(--ink); color: var(--paper); }
.oko-kalk { margin: 0; padding-left: 18px; font-size: 12px; color: var(--mute); display: grid; gap: 3px; }
.oko-formel { font-size: 12px; color: var(--mute); background: var(--soft); border-radius: 10px; padding: 8px 10px; }
.oko-formel b { color: var(--ink); }
.oko-formel details { margin-top: 6px; } .oko-formel summary { cursor: pointer; font-weight: 600; }
.oko-merk { font-size: 12px; color: var(--mute); margin: 0; }
.oko-to { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oko-liten b { font: 780 22px/1.1 var(--display); display: block; }
.oko-liten span { font-size: 12px; color: var(--mute); }
.oko-varsel { display: flex; gap: 10px; align-items: flex-start; background: var(--feil-bg); border-radius: 14px; padding: 12px; font-size: 13px; }
.oko-varsel i { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); margin-top: 4px; flex: none; }
.oko-trenger { display: grid; gap: 4px; background: var(--card); border: 1px dashed var(--linje2); border-radius: 16px; padding: 14px; font-size: 13px; }
.oko-trenger span { color: var(--mute); }
.oko-skyv { display: grid; grid-template-columns: 130px 1fr 64px; gap: 8px; align-items: center; font-size: 13px; }
.oko-skyv input { accent-color: var(--lilla); width: 100%; }
.oko-skyv output { text-align: right; font: 780 14px var(--display); }
.oko-velg { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mute); }
.oko-velg select { flex: 1; min-width: 0; font: 600 14px var(--tekst); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.oko-melding { font-size: 13px; color: var(--ink); background: var(--gul-bg); border-radius: 10px; padding: 8px 10px; margin: 0; }
.oko-knapp { border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 14px var(--tekst); padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.oko-knapp.primar, .oko-knapper .primar { background: var(--neon); color: var(--on-neon); border-color: var(--neon); }
.oko-knapp:disabled { opacity: .45; cursor: default; }
.oko-knapper { display: flex; gap: 8px; flex-wrap: wrap; }
.oko-knapper button { border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 14px var(--tekst); padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.oko-felter { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.oko-felt { display: grid; grid-template-columns: 1fr 90px auto; gap: 6px; align-items: center; font-size: 13px; }
.oko-felt.bred { grid-template-columns: 1fr; }
.oko-felt em, .oko-drv em { font-style: normal; color: var(--mute); font-size: 12px; }
.oko input:not([type="range"]) { font: 500 14px var(--tekst); padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); min-width: 0; }
.oko-tabell { display: grid; grid-template-columns: repeat(var(--kol), minmax(70px, 1fr)); gap: 4px; overflow-x: auto; }
.oko-tabell > span { display: contents; font-size: 11px; color: var(--mute); }
.oko-fliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.oko-flis { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.oko-flis span { font-size: 13px; font-weight: 600; color: var(--mute); }
.oko-flis b { font: 780 24px/1.1 var(--display); }
.oko-flis em { font-style: normal; font-size: 13px; font-weight: 700; }
.oko .pluss { color: var(--ok); } .oko .minus { color: var(--signaltekst); }
.oko-prikk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 5px; }
.oko-rutenett { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.oko-rutenett table { border-collapse: collapse; width: 100%; font-size: 14px; }
.oko-rutenett th, .oko-rutenett td { padding: 10px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hair); }
.oko-rutenett thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.oko-rutenett tbody th { text-align: left; font-weight: 500; color: var(--mute); padding-left: 30px; }
.oko-rutenett td { font-family: ui-monospace, "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.oko-rutenett td small { display: block; font-size: 11px; }
.oko-rutenett td.bud small:not(.pluss):not(.minus) { color: var(--mute); }
.oko-rutenett td.prog { color: var(--mute); }
.oko-rutenett tr.sum th, .oko-rutenett tr.sum td { font-weight: 700; color: var(--ink); }
.oko-rutenett tr.sum th { padding-left: 12px; }
.oko-rutenett tr.andel th { padding-left: 12px; color: var(--lilla); font-weight: 600; }
.oko-rutenett tr.andel td { color: var(--mute); }
.oko-rutenett tr:last-child th, .oko-rutenett tr:last-child td { border-bottom: 0; background: var(--soft); }
.oko-rutenett td.aar { font-weight: 700; }
.oko-fot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.oko-drivere { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 16px; }
.oko-drv { display: grid; grid-template-columns: 1fr 100px 20px; gap: 6px; align-items: center; font-size: 13px; }
.oko-drv span small { display: block; color: var(--mute); font-size: 11px; }
.oko-ver { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--mute); }
@media (max-width: 560px) { .oko-to { grid-template-columns: 1fr; } .oko-skyv { grid-template-columns: 96px 1fr 56px; } .oko-felt { grid-template-columns: 1fr 80px auto; } }
.oko-kap { height: 12px; border-radius: 6px; background: var(--soft); overflow: hidden; margin-top: 6px; }
.oko-kap i { display: block; height: 100%; border-radius: 6px; }
.oko-kaptekst { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--mute); }
.oko-steg { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.oko-steg div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 12px; color: var(--mute); }
.oko-steg b { display: block; color: var(--ink); font: 780 14px var(--display); }
.oko-steg a { color: var(--lilla); font-weight: 600; }
.oko-slipp { border-style: dashed; border-width: 2px; justify-items: start; }
.oko-slipp.over { border-color: var(--lilla); background: var(--gul-bg); }
.oko-slipp.laster { opacity: .7; }
.oko-slipp-h { font: 780 17px/1.25 var(--display); }
.oko-fil { display: inline-block; }
.oko-forslag { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--hair); }
.oko-forslag input { margin-top: 3px; accent-color: var(--lilla); }
.oko-forslag small { display: block; color: var(--mute); font-size: 12px; }
.oko-forslag em { display: block; font-style: normal; color: var(--lilla); font-size: 11px; }
.oko-hand summary { cursor: pointer; font-weight: 600; }
.oko-hand[open] { gap: 10px; }
/* Data room (steg 175): skissen docs/skisser-2026-10-18/filer.html. Bare for plattformens egne folk. */
.nav a[hidden] { display: none; }
.drom-velg { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.drom-velg button { font: 600 13px var(--tekst); padding: 7px 13px; border-radius: 999px; border: 0; background: var(--soft); color: var(--ink); cursor: pointer; }
.drom-velg button.paa { background: var(--ink); color: var(--paper); }
.drom-ring { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.drom-ring b { font: 780 30px/1 var(--display); }
.drom-ring small { display: block; font-size: 13px; color: var(--mute); margin-top: 3px; }
.drom-del { font: 700 13px var(--tekst); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin: 18px 2px 8px; }
.drom-liste { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.drom-r { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; font-size: 15px; }
.drom-r:first-child { border-top: 0; }
.drom-r:hover { background: var(--soft); }
.drom-n small { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; }
.drom-ik { width: 28px; height: 28px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; font: 600 13px var(--tekst); }
.drom-st { font: 600 12px var(--tekst); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.drom-st.ok { background: var(--ok-bg); color: var(--ok); }
.drom-st.del { background: var(--gul-bg); color: var(--lilla); }
.drom-st.mangler { background: var(--feil-bg); color: var(--signaltekst); }
.drom-st.av { background: var(--soft); color: var(--mute); }
.drom-dok { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 12px 14px; border: 0; border-top: 1px solid var(--hair); font: inherit; font-size: 15px; width: 100%; text-align: left; background: none; color: var(--ink); cursor: pointer; }
.drom-dok:hover { background: var(--soft); }
.drom-dok:first-child { border-top: 0; }
.drom-dok > small, .drom-filer, .drom-handl { grid-column: 1 / -1; }
.drom-dok > small { font-size: 12px; color: var(--mute); }
.drom-nr { font: 600 12px var(--tekst); color: var(--mute); margin-right: 4px; }
.drom-filer { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.drom-handl { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 2px; }
.drom-fjern { color: var(--mute); }
.drom-knapp { display: block; width: 100%; text-align: center; font: 600 15px var(--tekst); padding: 14px; border: 0; border-radius: 999px; background: var(--neon); color: var(--on-neon); margin-top: 16px; cursor: pointer; }
.drom-knapp:disabled { opacity: .6; cursor: progress; }
.drom-tilbake { display: inline-flex; color: var(--mute); text-decoration: none; font-size: 14px; margin: 0 0 12px; }
.drom-tilbake:hover { color: var(--ink); }
.drom-merk { font-size: 12px; color: var(--mute); margin: 8px 4px 0; }
.drom-be { color: var(--ink) !important; opacity: .85; }
.drom-ark h2 { font: 780 22px/1.15 var(--display); margin: 6px 0 8px; }
.drom-ark h3 { font: 700 12px var(--tekst); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin: 20px 0 8px; }
.drom-ark-hode { display: flex; align-items: center; gap: 10px; }
.drom-be-stor { font-size: 15px; line-height: 1.45; margin: 0 0 10px; padding: 12px 14px; border-left: 3px solid var(--lilla); background: var(--soft); border-radius: 0 12px 12px 0; }
.drom-svar { font-size: 13px; color: var(--mute); margin: 0; }
.drom-tom { font-size: 13px; margin: 0 0 8px; }
.drom-slipp { display: grid; gap: 3px; place-items: center; text-align: center; padding: 18px; margin: 8px 0 10px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; font-size: 14px; }
.drom-slipp small { color: var(--mute); font-size: 12px; }
.drom-slipp:hover, .drom-slipp.over { border-color: var(--neon); background: var(--soft); }
.drom-felt { display: grid; gap: 5px; font-size: 13px; color: var(--mute); margin: 8px 0; }
.drom-felt textarea, .drom-felt input { font: 15px var(--tekst); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.drom-kom { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.drom-kom li { background: var(--soft); border-radius: 12px; padding: 9px 12px; }
.drom-kom p { margin: 3px 0 0; font-size: 14px; line-height: 1.4; }
.drom-kom-hvem { font-size: 12px; color: var(--mute); }
.drom-peker p { font-size: 13px; color: var(--mute); margin: 8px 0; }
.drom-ark .drom-handl { margin-top: 16px; }
.drom-disk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--mute); margin: 0 0 12px; }
.drom-disk span { flex: 1 1 320px; }
.drom-koble { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.drom-koble h2 { font: 780 20px/1.2 var(--display); margin: 0 0 6px; }
.drom-koble p, .drom-koble ol { font-size: 14px; margin: 0 0 8px; }
.drom-koble ol { padding-left: 20px; display: grid; gap: 4px; }
.drom-svar-kom { margin: 8px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--line); }

/* Den rangerte lista under kortet i «Your next move» (19. oktober 2026). */
.rangho { margin-top: 18px; }
.ranglist .rangrad { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-top: 1px solid var(--hair); color: var(--ink); cursor: pointer; }
.ranglist .rangrad:first-child { border-top: 0; }
.rangnr { width: 26px; height: 26px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; font: 600 13px var(--tekst); }
.rangtekst small { display: block; font-size: 12px; color: var(--mute); }
.ranglist .rangrad em { font-style: normal; font-size: 13px; color: var(--mute); white-space: nowrap; }