/* ai-lan versjon 2: appen etter de godkjente skissene (v2/skisser). Lys og mørk modus følger telefonen,
   eller valget under Mer, Utseende (data-tema="lys" eller "mork" på <html>). */

:root {
  color-scheme: light;
  --bg: #f4f4f6;
  --kort: #ffffff;
  --kort-2: #f7f7f9;
  --tekst: #14161b;
  --tekst-2: #5c616d;
  --tekst-3: #8b909b;
  --linje: #e7e8ec;
  --linje-2: #ececf0;
  --aksent: #3a5ccc;
  --aksent-myk: #eef1fc;
  --aksent-svak: #c9d2f0;
  --aksent-fyll: #3a5ccc;
  --gronn: #15803d; --gronn-myk: #e8f5ec;
  --gul: #b45309; --gul-myk: #fdf3e3; --gul-lys: #f0b44c; --gul-prikk: #e08a12;
  --lapp: #fff6c4; --lapp-tekst: #5a4a10;
  --rod: #c62828; --rod-myk: #fcecec;
  --gra: #b8bcc5;
  --simon: #3a5ccc; --simon-myk: #e6ebfb;
  --oyvind: #0f8a7e; --oyvind-myk: #def3f0;
  --lilla: #6d4bc4; --lilla-myk: #f1ecfb;
  --noytral: #59606c; --noytral-myk: #eef0f3;
  --knapp-myk: #f0f1f4;
  --felt: #e9e9ee;
  --chevron: #c2c5cc;
  --boble: #f0f1f4;
  --faner: rgb(250 250 251 / .92);
  --nav: rgb(255 255 255 / .94);
  --skygge: 0 1px 2px rgb(20 22 27 / .04);
  --tall: #e5484d;
  --radius: 16px;
  --topp: env(safe-area-inset-top, 0px);
  --bunn: env(safe-area-inset-bottom, 0px);
  /* høyden på fanelinja nederst, med safe-area på iPhone */
  --fanehoyde: calc(56px + var(--bunn));
}
/* Mens tastaturet er oppe på telefonen, skjules fanelinja bak det, og skrivefeltet ligger rett over tastaturet.
   --tastatur er hvor mye av siden tastaturet dekker, målt med visualViewport i app.js (oppgave 177). */
body.tastatur { --fanehoyde: var(--tastatur, 0px); }
body.tastatur .faner { display: none; }
/* Mørk modus: samme oppsett, mørke flater og lysere farger, så teksten er lett å lese. */
:root[data-tema="mork"] {
  color-scheme: dark;
  --bg: #000000;
  --kort: #1c1c1e;
  --kort-2: #2a2a2d;
  --tekst: #f2f3f5;
  --tekst-2: #a7abb4;
  --tekst-3: #7c818c;
  --linje: #2e2f33;
  --linje-2: #38393e;
  --aksent: #7b96f3;
  --aksent-myk: #1e2643;
  --aksent-svak: #33406b;
  --aksent-fyll: #4566dc;
  --gronn: #4ade80; --gronn-myk: #12301e;
  --gul: #f5b546; --gul-myk: #3a2b0d; --gul-lys: #f0b44c; --gul-prikk: #f0a030;
  --lapp: #38341c; --lapp-tekst: #f2e8b0;
  --rod: #ff7a7a; --rod-myk: #3d1719;
  --gra: #5d6069;
  --simon: #5b7be6; --simon-myk: #222c52;
  --oyvind: #1fa898; --oyvind-myk: #10322e;
  --lilla: #a78bfa; --lilla-myk: #2c2342;
  --noytral: #b4b8c1; --noytral-myk: #2c2d31;
  --knapp-myk: #2c2c2f;
  --felt: #1c1c1e;
  --chevron: #55585f;
  --boble: #2a2a2d;
  --faner: rgb(22 22 24 / .9);
  --nav: rgb(18 18 20 / .92);
  --skygge: none;
  --tall: #ff4d55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) {
    color-scheme: dark;
    --bg: #000000;
    --kort: #1c1c1e;
    --kort-2: #2a2a2d;
    --tekst: #f2f3f5;
    --tekst-2: #a7abb4;
    --tekst-3: #7c818c;
    --linje: #2e2f33;
    --linje-2: #38393e;
    --aksent: #7b96f3;
    --aksent-myk: #1e2643;
    --aksent-svak: #33406b;
  --aksent-fyll: #4566dc;
    --gronn: #4ade80; --gronn-myk: #12301e;
    --gul: #f5b546; --gul-myk: #3a2b0d; --gul-lys: #f0b44c; --gul-prikk: #f0a030;
    --lapp: #38341c; --lapp-tekst: #f2e8b0;
    --rod: #ff7a7a; --rod-myk: #3d1719;
    --gra: #5d6069;
    --simon: #5b7be6; --simon-myk: #222c52;
    --oyvind: #1fa898; --oyvind-myk: #10322e;
    --lilla: #a78bfa; --lilla-myk: #2c2342;
    --noytral: #b4b8c1; --noytral-myk: #2c2d31;
    --knapp-myk: #2c2c2f;
    --felt: #1c1c1e;
    --chevron: #55585f;
    --boble: #2a2a2d;
    --faner: rgb(22 22 24 / .9);
    --nav: rgb(18 18 20 / .92);
    --skygge: none;
    --tall: #ff4d55;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg); color: var(--tekst);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh; min-height: 100dvh;
}
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.skjult-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skjerm { max-width: 600px; margin: 0 auto; padding-bottom: calc(100px + var(--bunn)); min-height: 100vh; }
.skjerm.uten-faner { padding-bottom: 0; }
/* Inne i en samtale slutter siden rett over fanelinja, så skrivefeltet ligger rett over den. */
.skjerm:has(.samtale-side) { padding-bottom: var(--fanehoyde); }

/* toppen */
.topp { padding: calc(var(--topp) + 14px) 20px 10px; }
.topp .dato { font-size: 13px; font-weight: 600; color: var(--tekst-3); text-transform: uppercase; letter-spacing: .04em; }
.topp-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topp-rad.luft-over { margin-top: 22px; }
h1 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; margin: 2px 0 0; }
.rund-knapp { width: 36px; height: 36px; border-radius: 50%; background: var(--kort); display: grid; place-items: center; color: var(--aksent); box-shadow: 0 0 0 1px var(--linje); border: 0; padding: 0; flex: none; }
.rund-knapp:active { opacity: .6; }

/* seksjoner og kort */
.seksjon { padding: 0 16px; margin-top: 18px; }
.seksjon.tett { margin-top: 6px; }
.seksjon-tittel { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px; }
.seksjon-tittel h2 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.seksjon-tittel .liten { font-size: 13px; color: var(--tekst-3); font-weight: 500; }
.gruppe-tittel { font-size: 13px; color: var(--tekst-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 0 16px 7px; }
.kort { background: var(--kort); border-radius: var(--radius); box-shadow: var(--skygge); overflow: hidden; }
.kort + .kort { margin-top: 10px; }
.luft { padding: 16px; }
.dempet { color: var(--tekst-2); }
.svak { color: var(--tekst-3); }
.smaa { font-size: 13px; }

/* rader */
.rad { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; width: 100%; background: none; border: 0; text-align: left; }
.rad + .rad::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--linje); }
button.rad:active, a.rad:active, .trykk:active { background: var(--kort-2); }
.rad .vokser, .vokser { flex: 1; min-width: 0; }
.chevron { color: var(--chevron); flex: none; }

/* status */
.prikk { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.prikk.gronn { background: var(--gronn); } .prikk.gul { background: var(--gul-prikk); } .prikk.rod { background: var(--rod); } .prikk.gra { background: var(--gra); }
.status { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.status.gronn { color: var(--gronn); background: var(--gronn-myk); }
.status.gul { color: var(--gul); background: var(--gul-myk); }
.status.rod { color: var(--rod); background: var(--rod-myk); }
.status.gra { color: var(--tekst-2); background: var(--knapp-myk); }
.status.bla { color: var(--aksent); background: var(--aksent-myk); }
.merke { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.merke.viktig { color: var(--aksent); background: var(--aksent-myk); }
.merke.liten { color: var(--tekst-2); background: var(--knapp-myk); }
.etikett { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }

/* avatarer: mennesker er runde, AI-er er avrundede firkanter med et lite stjernetegn */
.av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; box-shadow: 0 0 0 2px var(--kort); background: var(--noytral); line-height: 1; }
.av.s { background: var(--simon); } .av.o { background: var(--oyvind); }
.av.a { background: #b45309; } .av.b { background: #6d4bc4; } .av.c { background: #be185d; }
.av.ai { border-radius: 7px; background: var(--noytral-myk); color: var(--noytral); }
.av.ai.s { background: var(--simon-myk); color: var(--simon); }
.av.ai.o { background: var(--oyvind-myk); color: var(--oyvind); }
.av svg { width: 12px; height: 12px; }
.av.stor { width: 36px; height: 36px; font-size: 15px; }
.av.stor.ai { border-radius: 11px; } .av.stor svg { width: 18px; height: 18px; }
.av.middels { width: 30px; height: 30px; font-size: 13px; box-shadow: none; }
.av.middels.ai { border-radius: 9px; } .av.middels svg { width: 15px; height: 15px; }
.av.storre { width: 56px; height: 56px; font-size: 22px; box-shadow: none; }
.av.mini { width: 16px; height: 16px; border-radius: 5px; box-shadow: none; font-size: 9px; }
.av.mini:not(.ai) { border-radius: 50%; }
.av.mini svg { width: 10px; height: 10px; }
.stabel { display: inline-flex; flex: none; }
.stabel .av + .av { margin-left: -5px; }
button.av-knapp { border: 0; padding: 0; background: none; border-radius: 50%; }

/* knapper */
.knapper { display: flex; gap: 8px; margin-top: 14px; }
.knapp { flex: 1; height: 44px; border-radius: 12px; border: 0; font-weight: 600; font-size: 16px; display: inline-grid; place-items: center; padding: 0 14px; background: var(--knapp-myk); color: var(--tekst); }
.knapp:active { opacity: .7; }
.knapp:disabled { opacity: .5; }
.knapp.fylt { background: var(--aksent-fyll); color: #fff; }
.knapp.myk { background: var(--knapp-myk); color: var(--tekst); }
.knapp.rod { background: var(--rod-myk); color: var(--rod); }
.knapp.smal { height: 38px; font-size: 15px; }
.knapp.lenkeknapp { background: none; color: var(--aksent); flex: none; padding: 0 8px; height: auto; font-size: 15px; font-weight: 500; }
.knapp.hel { width: 100%; }

/* skjema */
.felt-boks { display: block; margin-top: 10px; }
.felt-boks > span { display: block; font-size: 13px; color: var(--tekst-2); margin: 0 0 6px 2px; font-weight: 500; }
.tekstfelt { width: 100%; border: 1px solid var(--linje-2); background: var(--kort); border-radius: 12px; padding: 10px 12px; font-size: 16px; outline: none; resize: none; }
.tekstfelt:focus { border-color: var(--aksent); }
textarea.tekstfelt { min-height: 76px; line-height: 1.4; }
.feiltekst { color: var(--rod); font-size: 14px; margin-top: 10px; }
.velger { display: flex; flex-wrap: wrap; gap: 8px; }
.velger button { font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 0; background: var(--kort); color: var(--tekst-2); box-shadow: 0 0 0 1px var(--linje); display: inline-flex; align-items: center; gap: 6px; }
.velger button[aria-pressed="true"] { background: var(--aksent-fyll); color: #fff; box-shadow: none; }

/* fanelinja */
.faner { position: fixed; left: 0; right: 0; bottom: 0; height: var(--fanehoyde); padding: 7px 8px var(--bunn); display: flex; justify-content: center; background: var(--faner); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); border-top: 1px solid var(--linje); z-index: 20; }
.fane { flex: 1; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #9a9ea8; font-size: 10.5px; font-weight: 600; position: relative; }
.fane-ikon { display: grid; } .fane svg { width: 27px; height: 27px; }
.fane.valgt { color: var(--aksent); }
.fane .tall { position: absolute; top: -3px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--tall); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.fane .tall.prikk-tall { min-width: 10px; width: 10px; height: 10px; padding: 0; top: 0; left: calc(50% + 9px); }

/* ny versjon er klar (oppgave 61): liten knapp over fanelinja */
.ny-versjon { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--fanehoyde) + 12px); z-index: 35; border: 0; border-radius: 999px; padding: 9px 16px; background: var(--aksent); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 6px 20px rgb(0 0 0 / .2); white-space: nowrap; }
.ny-versjon[hidden] { display: none; }
.skjerm:has(.samtale-side) ~ .ny-versjon { bottom: calc(var(--fanehoyde) + 76px); }

/* beskjed nederst */
.beskjed { position: fixed; left: 12px; right: 12px; bottom: calc(70px + var(--bunn)); max-width: 560px; margin: 0 auto; background: #24262c; color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-size: 14.5px; z-index: 40; box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
.beskjed .beskjed-tekst { flex: 1; }
.beskjed .beskjed-knapp { border: 0; background: none; color: #a9bbff; font-weight: 700; font-size: 15px; padding: 4px 2px; }
.skjerm:has(.samtale-side) ~ .beskjed { bottom: calc(var(--fanehoyde) + 70px); }
body.tastatur .beskjed { bottom: calc(70px + var(--tastatur, 0px)); }

/* "dra ned for å oppdatere" */
.oppdaterer { position: fixed; top: calc(var(--topp) + 6px); left: 50%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; border: 3px solid var(--linje-2); border-top-color: var(--aksent); opacity: 0; z-index: 30; pointer-events: none; }
.oppdaterer.laster { animation: snurr .8s linear infinite; opacity: 1; }
@keyframes snurr { to { transform: rotate(360deg); } }

/* tomt, laster og feil */
.tomt { padding: 28px 24px; text-align: center; color: var(--tekst-3); font-size: 14.5px; }
.tomt b { display: block; color: var(--tekst); font-size: 16px; margin-bottom: 4px; font-weight: 650; }
.tomt .tomt-ikon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 10px; background: var(--gronn-myk); color: var(--gronn); }
.tomt .tomt-ikon svg { width: 22px; height: 22px; }
.feilkort { padding: 18px 16px; text-align: center; }
.feilkort p { margin: 0 0 12px; color: var(--tekst-2); }
.skjelett { padding: 16px; }
.skjelett i { display: block; height: 12px; border-radius: 6px; background: var(--kort-2); margin: 8px 0; }
.skjelett i:nth-child(2) { width: 70%; } .skjelett i:nth-child(3) { width: 45%; }

/* ---------- Til meg ---------- */
.mp .rad { padding: 11px 16px; }
.mp .navn { font-weight: 600; display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.mp .navn-tittel { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.mp .navn small { font-weight: 400; color: var(--tekst-3); font-size: 13px; margin-left: 5px; overflow: hidden; text-overflow: ellipsis; flex: 0 10 auto; min-width: 0; }
.sist-topp { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 4px; }
.sist-topp .etikett { color: var(--aksent); }
.tema { padding: 12px 16px 14px; position: relative; }
.tema + .tema { border-top: 1px solid var(--linje); }
.tema h3 { font-size: 16px; font-weight: 650; margin: 0 0 3px; letter-spacing: -0.015em; display: flex; justify-content: space-between; gap: 10px; }
.tema p { margin: 0; color: var(--tekst-2); font-size: 14.5px; }
.punkter { margin: 10px 0 0; padding: 0; list-style: none; background: var(--kort-2); border-radius: 12px; }
.punkter li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; }
.punkter li + li { border-top: 1px solid var(--linje-2); }
.punkter li .vokser { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punkter .tid { color: var(--tekst-3); font-size: 13px; }
/* Historikken på en oppgave: de grå hendelsene i tråden (oppgave 86). */
.historikk-rad { display: flex; gap: 10px; align-items: baseline; padding: 9px 16px; font-size: 13.5px; color: var(--tekst-2); }
.historikk-rad + .historikk-rad { border-top: 0.5px solid var(--linje); }
.historikk-rad .tid { color: var(--tekst-3); font-size: 12.5px; white-space: nowrap; }
.antall { font-size: 13px; color: var(--aksent); font-weight: 600; margin-top: 8px; display: inline-flex; gap: 4px; align-items: center; background: none; border: 0; padding: 0; }
.slag { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.slag .tid { margin-left: auto; color: var(--tekst-3); font-weight: 500; }
.slag.gul { color: var(--gul); } .slag.gronn { color: var(--gronn); } .slag.rod { color: var(--rod); } .slag.bla { color: var(--aksent); }
.ventekort h3 { font-size: 17px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.02em; line-height: 1.3; }
.ventekort h3 .tittel-lenke { color: inherit; text-decoration: none; display: inline; }
.ventekort h3 .tittel-lenke .chevron { display: inline-block; margin-left: 6px; color: var(--tekst-3); vertical-align: 0; }
.ventekort .apne-oppgaven { display: inline-block; margin: 8px 0 6px; padding: 4px 0; }
.ventekort p { margin: 0; color: var(--tekst-2); white-space: pre-line; }
.ventekort p.hel { color: var(--tekst); }
.meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--tekst-2); }
.meta.sporsmal { color: var(--tekst); }
.meta .sak-lenke { color: var(--aksent); text-decoration: underline; } /* ny runde av en uenig sak (oppgave 202) */
.sitat { margin-top: 10px; padding: 10px 12px; background: var(--kort-2); border-radius: 12px; font-size: 14.5px; display: flex; gap: 10px; white-space: pre-line; }
.sitat .av { margin-top: 1px; box-shadow: none; }
.melding-hode { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.melding-hode .navn { font-weight: 650; }
.melding-hode .tid { margin-left: auto; color: var(--tekst-3); font-size: 13px; align-self: flex-start; padding-top: 4px; }
.svarskjema { margin-top: 12px; }
.svarskjema .knapper { margin-top: 10px; }
.mer-tekst { background: none; border: 0; padding: 0; color: var(--aksent); font-weight: 600; font-size: 14px; margin-top: 4px; }

/* ---------- Samtaler ---------- */
.sok { margin: 4px 16px 0; height: 38px; border-radius: 11px; background: var(--felt); display: flex; align-items: center; gap: 7px; padding: 0 11px; color: var(--tekst-3); }
.sok input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--tekst); min-width: 0; height: 100%; }
.sok input::placeholder { color: var(--tekst-3); }
.valg { display: flex; gap: 8px; padding: 14px 16px 0; overflow-x: auto; scrollbar-width: none; }
.valg::-webkit-scrollbar { display: none; }
.valg button { white-space: nowrap; font-size: 14px; font-weight: 600; padding: 6px 13px; border-radius: 999px; background: var(--kort); color: var(--tekst-2); box-shadow: 0 0 0 1px var(--linje); border: 0; }
.valg button[aria-pressed="true"] { background: var(--tekst); color: var(--bg); box-shadow: none; }
.samtale-rad { display: flex; gap: 12px; padding: 13px 16px 13px 14px; position: relative; width: 100%; text-align: left; background: none; border: 0; }
.samtale-rad + .samtale-rad::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; height: 1px; background: var(--linje); }
.samtale-rad:active { background: var(--kort-2); }
.ikon { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; position: relative; }
.ikon.mennesker { background: var(--simon-myk); color: var(--simon); }
.ikon.blandet { background: var(--lilla-myk); color: var(--lilla); }
.ikon.ai { background: var(--noytral-myk); color: var(--noytral); }
.ikon.gjengen { background: var(--aksent-myk); color: var(--aksent); }
.ikon.oppgave { background: var(--noytral-myk); color: var(--noytral); }
.ulest { position: absolute; left: -9px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--aksent); }
.linje1 { display: flex; align-items: baseline; gap: 8px; }
.linje1 .navn { font-weight: 600; font-size: 16px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.015em; }
.linje1 .tid { font-size: 13px; color: var(--tekst-3); flex: none; }
.samtale-rad.ny .linje1 .tid { color: var(--aksent); font-weight: 600; }
.siste { color: var(--tekst-2); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; overflow-wrap: anywhere; }
.samtale-rad.ny .siste { color: var(--tekst); }
.siste b { font-weight: 600; }
.linje2 { display: flex; align-items: flex-start; gap: 10px; }
.linje2 .siste { flex: 1; min-width: 0; }
.ulest-tall { flex: none; min-width: 22px; height: 22px; padding: 0 7px; margin-top: 2px; border-radius: 999px; background: var(--aksent); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.linje3 { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--tekst-3); }
.linje3 .av { width: 20px; height: 20px; font-size: 10px; }
.linje3 .av.ai svg { width: 11px; height: 11px; }
.tag { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--noytral-myk); color: var(--noytral); white-space: nowrap; }
.tag.bla { background: var(--aksent-myk); color: var(--aksent); }
.alle-rad { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--aksent); font-weight: 600; font-size: 16px; width: 100%; border: 0; background: none; }
.alle-rad .svak { margin-left: auto; font-weight: 500; font-size: 15px; }
.forklar { padding: 10px 20px 0; font-size: 13px; color: var(--tekst-3); }
.linje3 .hvem-med { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.samtale-rad { cursor: pointer; }
.meld-inn-knapp { flex: none; margin: -4px 0; font-size: 13px; font-weight: 600; color: var(--aksent); background: var(--aksent-myk); border: 0; border-radius: 999px; padding: 6px 12px; }

/* ---------- inne i en samtale ---------- */
.samtale-side { display: flex; flex-direction: column; min-height: calc(100vh - var(--fanehoyde)); min-height: calc(100dvh - var(--fanehoyde)); background: var(--kort); }
.nav { position: sticky; top: 0; z-index: 10; background: var(--nav); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); padding-top: var(--topp); }
.nav-rad { display: flex; align-items: center; height: 50px; padding: 0 8px; }
.tilbake { display: flex; align-items: center; gap: 5px; color: var(--aksent); font-size: 17px; width: 110px; padding-left: 6px; background: none; border: 0; height: 44px; }
.nav .midt { flex: 1; text-align: center; min-width: 0; }
.nav .midt b { display: block; font-size: 16.5px; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .midt span { font-size: 12px; color: var(--tekst-3); }
.nav .hoyre { width: 110px; display: flex; justify-content: flex-end; padding-right: 4px; }
.nav .hoyre button { background: none; border: 0; color: var(--aksent); padding: 6px; display: grid; }
.deltakere { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--linje); border-top: 1px solid var(--linje); background: var(--kort-2); font-size: 13px; color: var(--tekst-2); }
.deltakere .stabel .av { box-shadow: 0 0 0 2px var(--kort-2); }
.deltakere .tekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pille-knapp { flex: none; font-weight: 600; padding: 5px 11px; border-radius: 999px; font-size: 13px; border: 0; }
.pille-knapp.rod { color: var(--rod); background: var(--rod-myk); }
.pille-knapp.bla { color: var(--aksent); background: var(--aksent-myk); }
.trad { flex: 1; padding: 8px 14px 6px; display: flex; flex-direction: column; justify-content: flex-end; }
/* Skillelinja over den første uleste meldingen. Står til man forlater samtalen. */
.nye-skille { display: flex; align-items: center; gap: 10px; margin: 12px 0 12px; color: var(--aksent); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; scroll-margin-top: 140px; }
.nye-skille::before, .nye-skille::after { content: ""; flex: 1; height: 1.5px; background: var(--aksent); opacity: 0.55; border-radius: 1px; }
/* Oppsummering av det uleste (Simon, melding 376): knappen ved skillelinja og øverst, og den private meldingen.
   Den private meldingen er rolig og skiller seg fra boblene: lilla tone, stiplet kant og merket "Bare synlig for deg". */
.oppsum-topp { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 16px; font-size: 13px; color: var(--tekst-2); border-bottom: 1px solid var(--linje); }
.oppsum-topp:empty { display: none; }
.oppsum-topp > span { flex: 1; min-width: 0; }
.oppsum-rad { display: flex; justify-content: center; margin: -4px 0 14px; }
.oppsum-knapp { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--lilla); background: var(--lilla-myk); border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.oppsum-knapp svg { width: 14px; height: 14px; }
.oppsum-knapp.hvit { background: var(--kort); margin-top: 10px; }
.oppsum-knapp:disabled { opacity: .6; }
.privat { margin: 2px 0 16px; padding: 11px 14px 13px; border-radius: 16px; background: var(--lilla-myk); border: 1px dashed color-mix(in srgb, var(--lilla) 45%, transparent); scroll-margin-top: 150px; }
.privat-merke { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; color: var(--lilla); margin-bottom: 7px; letter-spacing: .01em; }
.privat-merke svg { width: 12px; height: 12px; }
.privat-hode { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; font-size: 14.5px; }
.privat-hode svg { width: 14px; height: 14px; color: var(--lilla); }
.privat-hode span { font-size: 12.5px; color: var(--tekst-3); }
.privat-tekst { font-size: 15px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.privat-tekst a { color: inherit; text-decoration: underline; }
.privat-vent { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--tekst-2); }
.privat-under { font-size: 13px; line-height: 1.38; color: var(--tekst-3); margin-top: 4px; }
.prikker { display: inline-flex; gap: 3px; }
.prikker i { width: 6px; height: 6px; border-radius: 50%; background: var(--lilla); opacity: .3; animation: prikk 1.2s infinite ease-in-out; }
.prikker i:nth-child(2) { animation-delay: .2s; } .prikker i:nth-child(3) { animation-delay: .4s; }
@keyframes prikk { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .prikker i { animation: none; opacity: .6; } }
.dag { text-align: center; font-size: 12px; font-weight: 600; color: var(--tekst-3); margin: 10px 0 10px; }
.hendelse { text-align: center; font-size: 12.5px; color: var(--tekst-3); margin: 8px 12px 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.m { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; }
.m.fortsetter { margin-bottom: 4px; }
.m .innhold { max-width: min(282px, 78%); min-width: 0; }
.m .plass { width: 30px; flex: none; }
.m .hvem { font-size: 12.5px; color: var(--tekst-3); margin: 0 0 3px 12px; display: flex; gap: 6px; align-items: center; }
.m .hvem b { color: var(--tekst-2); font-weight: 600; }
.ai-merke { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: var(--noytral-myk); color: var(--noytral); letter-spacing: .02em; }
.boble { padding: 9px 13px; border-radius: 19px; font-size: 15.5px; line-height: 1.38; background: var(--boble); white-space: pre-wrap; overflow-wrap: anywhere; }
.boble .tittel { display: block; font-weight: 650; margin-bottom: 2px; }
.boble a { color: inherit; text-decoration: underline; }
.m.ai .boble { background: var(--kort); box-shadow: 0 0 0 1px var(--linje); }
.m.meg { justify-content: flex-end; }
.m.meg .innhold { max-width: min(300px, 82%); }
.m.meg .boble { background: var(--aksent-fyll); color: #fff; }
.boble .svar-pa { font: inherit; color: inherit; background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; width: 100%; cursor: pointer; }
.boble .svar-pa { display: block; font-size: 13px; opacity: .75; border-left: 2px solid currentColor; padding-left: 8px; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sett { text-align: right; font-size: 12px; color: var(--tekst-3); margin: -7px 4px 12px; }
.bilder { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bilder:first-child { margin-top: 0; }
.bilde { display: block; border-radius: 12px; overflow: hidden; background: var(--kort-2); border: 0; padding: 0; max-width: 100%; }
.bilde img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* flere bilder i én melding: rutenett med kvadratiske ruter, "+N" på det siste (Simon, melding 314) */
.bilder.rutenett { display: grid; gap: 3px; max-width: 100%; border-radius: 14px; overflow: hidden; }
.bilder.rutenett.k2 { grid-template-columns: 1fr 1fr; } .bilder.rutenett.k3 { grid-template-columns: 1fr 1fr 1fr; }
.bilder.rutenett .rute { width: 100%; aspect-ratio: 1; border-radius: 0; position: relative; }
.bilder.rutenett .flere { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .45); color: #fff; font-size: 22px; font-weight: 700; }
.m .boble { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m.blink .boble { animation: blink 1.2s ease; }
@keyframes blink { 0%, 60% { box-shadow: 0 0 0 3px var(--aksent-svak); } 100% { box-shadow: none; } }
.meny-sitat { font-size: 14px; color: var(--tekst-2); padding: 4px 4px 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meny-sitat b { color: var(--tekst); }
.meny-valg { width: 100%; border: 0; background: none; font: inherit; color: var(--tekst); text-align: left; cursor: pointer; }
.meny-valg svg { width: 20px; height: 20px; color: var(--aksent); flex: none; }
.ikke-med { padding: 12px 16px; border-top: 1px solid var(--linje); background: var(--nav); text-align: center; position: sticky; bottom: var(--fanehoyde); }
body.tastatur .ikke-med { padding-bottom: calc(12px + var(--bunn)); }
.ikke-med p { margin: 0 0 10px; color: var(--tekst-2); font-size: 14px; }
.skriv { position: sticky; bottom: var(--fanehoyde); padding: 8px 12px; background: var(--nav); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); border-top: 1px solid var(--linje); z-index: 10; }
.skriv-rad { display: flex; gap: 8px; align-items: flex-end; }
.skriv .pluss { width: 36px; height: 36px; border-radius: 50%; background: var(--knapp-myk); display: grid; place-items: center; color: var(--tekst-2); flex: none; border: 0; padding: 0; }
.skriv .felt { flex: 1; min-height: 36px; border-radius: 18px; border: 1px solid var(--linje-2); display: flex; align-items: flex-end; padding: 3px 4px 3px 14px; background: var(--kort); }
.skriv textarea { flex: 1; border: 0; outline: none; background: none; resize: none; font-size: 16px; line-height: 1.35; padding: 4px 0; max-height: 140px; min-width: 0; color: var(--tekst); }
.skriv textarea::placeholder { color: var(--tekst-3); }
.skriv .send { width: 28px; height: 28px; border-radius: 50%; background: var(--aksent-fyll); color: #fff; display: grid; place-items: center; border: 0; padding: 0; flex: none; }
.skriv .send:disabled { background: var(--aksent-svak); opacity: 1; }
/* Tale til tekst (oppgave 178): mikrofonen ved siden av Send, rød med stoppfirkant under opptak. */
.skriv .mik { width: 28px; height: 28px; border-radius: 50%; background: none; color: var(--tekst-2); display: grid; place-items: center; border: 0; padding: 0; flex: none; margin-right: 6px; }
.skriv .mik[hidden] { display: none; }
.skriv .mik svg { width: 20px; height: 20px; }
.skriv .mik.tar-opp { background: var(--rod); color: #fff; animation: tale-puls 1.4s ease-out infinite; }
.skriv .mik.starter { opacity: .7; }
.skriv .stopp-firkant, .pl-innspill-skjema .stopp-firkant { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
@keyframes tale-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rod) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.skriv .tale-linje, .pl-innspill-skjema .tale-linje { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 44px; font-size: 14px; line-height: 1.35; color: var(--tekst-2); }
.skriv .tale-linje[hidden], .pl-innspill-skjema .tale-linje[hidden] { display: none; }
.skriv .tale-linje .tale-tekst, .pl-innspill-skjema .tale-linje .tale-tekst { flex: 1; min-width: 0; }
.skriv .tale-linje .forelopig, .pl-innspill-skjema .tale-linje .forelopig { color: var(--tekst-3); font-style: italic; }
.skriv .tale-linje.feil, .pl-innspill-skjema .tale-linje.feil { color: var(--tekst); }
.skriv .rod-prikk, .pl-innspill-skjema .rod-prikk { width: 9px; height: 9px; border-radius: 50%; background: var(--rod); flex: none; animation: tale-blink 1.2s ease-in-out infinite; }
@keyframes tale-blink { 50% { opacity: .35; } }
.samtale-side > .bunn { display: contents; }
/* Arkiver samtalen (oppgave 194): liten og dempet, rett over skrivefeltet. Borte mens tastaturet er oppe. */
.skriv .arkiv-knapp-rad { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.skriv .arkiv-knapp-rad:empty, body.tastatur .skriv .arkiv-knapp-rad { display: none; }
.arkiv-knapp { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 13px; color: var(--tekst-2); cursor: pointer; }
.arkiv-knapp svg { flex: none; }
.alle-rad + .alle-rad { border-top: 1px solid var(--linje); }
.arkiv-rad { color: var(--tekst-2); font-weight: 500; }
.arkiv-rad .chevron { margin-left: auto; }
.skriv .vedlagt-rad { margin: 0 0 8px 44px; }
/* Bildevalget (bildeValg i js/bilder.js): i skrivefeltet, i "Nei, send tilbake" og i Ny oppgave (oppgave 101) */
.vedlagt-bilder { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 4px 0; scrollbar-width: none; }
.vedlagt-bilde { position: relative; flex: none; }
.vedlagt-bilde img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block; }
.vedlagt-bilde .lite-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; background: var(--tekst); color: var(--bg); box-shadow: 0 0 0 2px var(--kort); }
.skriv .vedlagt-bilde .lite-x { box-shadow: 0 0 0 2px var(--nav); }
.vedlagt-rad .smaa { display: block; margin-top: 2px; }
.bildevalg .vedlagt-rad { margin-top: 10px; }
.skriv .bildevalg .vedlagt-rad { margin-top: 0; }
.legg-ved-rad { margin-top: 8px; }
.tilbakemelding .knapper { margin-top: 10px; flex-direction: column; }
.tilbakemelding .knapper .knapp { flex: none; }
.tilbakemelding .tb-hjelp { margin: 12px 0 0; display: block; line-height: 1.4; }
/* Legg til informasjon (oppgave 161): det som er lagt til før, over skrivefeltet. */
.tillegg-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.tillegg-liste:empty { display: none; }
.tillegg-rad .meta { margin: 0 0 4px; }
.tillegg-rad .vedlegg, .tillegg-rad .bilder { margin-top: 8px; }
.legg-ved { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 6px 2px; color: var(--aksent); font-size: 15px; font-weight: 500; }
.legg-ved svg { width: 19px; height: 19px; }
.oppgave-bilder { margin: 10px 0 4px; }
.skriv .vedlagt { display: flex; align-items: center; gap: 10px; margin: 0 0 8px 44px; }
.skriv .vedlagt img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.skriv .svarer { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 44px; font-size: 13px; color: var(--tekst-2); }
.skriv .svarer span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lite-x { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--knapp-myk); color: var(--tekst-2); display: grid; place-items: center; padding: 0; flex: none; }
.lite-x svg { width: 11px; height: 11px; }
.eldre { display: block; margin: 4px auto 10px; }

/* ark (sheet) som glir opp nedenfra: deltakere, ny oppgave */
/* Arket ligger over fanelinja, så fanelinja synes og kan trykkes mens arket er oppe (visArk i js/felles.js). */
.ark { position: fixed; inset: auto 0 var(--fanehoyde) 0; z-index: 26; border: 0; padding: 0; margin: 0 auto; width: 100%; max-width: 600px; max-height: calc(88vh - var(--fanehoyde)); max-height: calc(88dvh - var(--fanehoyde)); overflow: auto; overscroll-behavior: contain; border-radius: 18px 18px 0 0; background: var(--bg); color: var(--tekst); box-shadow: 0 -8px 30px rgb(0 0 0 / .18); }
/* Ark med innhold (Venter på ditt ja, Om samtalen, Siste aktivitet, Flytt til milepæl) har alltid samme høyde,
   nesten hele skjermen, med innholdet øverst, også når det bare er én oppgave igjen (Simon, oppgave 122).
   Små valg-ark (meny, varsel) er like høye som innholdet. */
.ark.hoy { height: calc(88vh - var(--fanehoyde)); height: calc(88dvh - var(--fanehoyde)); }
.ark-bak { position: fixed; inset: 0 0 var(--fanehoyde) 0; z-index: 25; background: rgb(0 0 0 / .35); }
.ark-topp { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.ark-topp h2 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.ark-innhold { padding: 6px 16px 20px; }
body.tastatur .ark-innhold { padding-bottom: calc(20px + var(--bunn)); }

/* bilde i full størrelse */
.bildevisning { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.bildevisning::backdrop { background: rgb(0 0 0 / .96); }
.bildevisning img { max-width: 100vw; max-height: 100vh; display: block; }
.bildevisning[open] { width: 100vw; height: 100vh; max-height: 100dvh; display: grid; place-items: center; }
.bildevisning .lukk, .bildevisning .bla { position: fixed; border: 0; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; display: grid; place-items: center; padding: 0; }
.bildevisning .lukk { top: calc(12px + env(safe-area-inset-top)); right: 12px; } .bildevisning .lukk svg { width: 14px; height: 14px; }
.bildevisning .bla { top: 50%; margin-top: -20px; } .bildevisning .bla svg { width: 10px; height: 17px; }
.bildevisning .forrige { left: 10px; } .bildevisning .neste { right: 10px; } .bildevisning .neste svg { transform: scaleX(-1); }
.bildevisning .bla:disabled { opacity: .25; }
.bildevisning .teller { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; font-weight: 600; }

/* ---------- Plan ---------- */
.ai-er { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-er .kort { margin-top: 0; }
.ai-kort { padding: 12px 13px; display: flex; flex-direction: column; align-items: stretch; }
/* Ikon, navn og status i en rad; beskrivelsen og tiden under, over hele bredden (oppgave 108) */
.ai-kort .kort-hode { display: flex; gap: 10px; align-items: center; min-width: 0; margin-bottom: 4px; }
.ai-kort .navn { font-weight: 600; font-size: 14.5px; }
.ai-kort .tilstand { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; margin-top: 1px; }
.ai-kort .tilstand.gronn { color: var(--gronn); } .ai-kort .tilstand.gul { color: var(--gul); } .ai-kort .tilstand.gra { color: var(--tekst-3); }
.av-med-prikk { position: relative; flex: none; display: inline-flex; }
.av-med-prikk .i-appen { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--gronn); box-shadow: 0 0 0 2px var(--kort); }
.ai-kort .hva { font-size: 12.5px; color: var(--tekst-2); margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-hode { padding: 15px 16px 12px; display: block; width: 100%; border: 0; background: none; text-align: left; }
.mp-hode .over { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mp-hode h3 { font-size: 18px; font-weight: 700; margin: 2px 0 0; letter-spacing: -0.02em; }
.mp-hode .hvorfor { font-size: 13px; color: var(--tekst-2); margin-top: 4px; }
.framdrift { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--tekst-2); }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--linje-2); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar i.gronn { background: var(--gronn); } .bar i.gul { background: var(--gul-lys); }
.oppg { display: flex; gap: 12px; padding: 11px 16px; position: relative; align-items: flex-start; width: 100%; border: 0; background: none; text-align: left; }
.oppg::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--linje); }
.oppg:active { background: var(--kort-2); }
.oppg .ik { width: 22px; height: 22px; flex: none; margin-top: 1px; display: grid; place-items: center; }
.oppg .t { font-weight: 550; font-size: 15px; letter-spacing: -0.01em; }
.oppg.ferdig .t { color: var(--tekst-3); }
.oppg .u { font-size: 13px; color: var(--tekst-2); margin-top: 2px; }
.oppg .u .av.mini { vertical-align: -3px; margin: 0 5px 0 1px; }
.oppg .u .rod { color: var(--rod); font-weight: 600; }
.oppg .hoyre { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
/* Statuslinja (oppgave 256): kort status med farget prikk under tittelen i Plan, hele teksten øverst på oppgaven.
   Gul som "Pågår" når den bygges, rød når den står i ro, blå når den venter på deg, grønn prikk når den er klar. */
.statuslinje .sl-prikk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-3); margin-right: 6px; vertical-align: 1px; flex: none; }
.statuslinje.sl-gul .sl-prikk { background: var(--gul-prikk); } .statuslinje.sl-rod .sl-prikk { background: var(--rod); }
.statuslinje.sl-aksent .sl-prikk { background: var(--aksent); } .statuslinje.sl-gronn .sl-prikk { background: var(--gronn); }
.statuslinje.sl-gul .sl-tekst { color: var(--gul); } .statuslinje.sl-rod .sl-tekst { color: var(--rod); } .statuslinje.sl-aksent .sl-tekst { color: var(--aksent); }
.oppg .u.statuslinje { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oppg .u.statuslinje:not(.sl-gra):not(.sl-gronn) .sl-tekst { font-weight: 550; }
.oppg .u.statuslinje .siden { color: var(--tekst-3); }
.detalj .slag.sl-hel { align-items: baseline; gap: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--tekst-2); }
.detalj .slag.sl-hel .sl-prikk { width: 9px; height: 9px; margin-right: 8px; vertical-align: 0; position: relative; top: -1px; }
.trad-tall { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--tekst-3); }
.trad-tall.trykk { margin: -8px -10px -8px 0; padding: 8px 10px; border-radius: 10px; cursor: pointer; } /* større trykkflate */
.lukket { display: flex; align-items: center; gap: 12px; padding: 15px 16px; width: 100%; border: 0; background: none; text-align: left; }
.lukket h3 { font-size: 16.5px; margin: 0; font-weight: 650; letter-spacing: -0.015em; }
.lukket .u { font-size: 13px; color: var(--tekst-2); margin-top: 2px; }
.mp-kort { margin-top: 12px; }
.mp-kort:first-child { margin-top: 0; }
.mp-venter .lukket h3, .mp-venter .mp-hode h3 { color: var(--tekst-2); font-weight: 600; }
/* Milepæl til godkjenning (oppgave 156): blå kant på kortet, en blå boks øverst med hvem som har sagt ja, fristen og knappene. */
.mp-kort.mp-til-godkjenning { box-shadow: 0 0 0 2px var(--aksent-svak), var(--skygge); }
.mp-godkjenning { margin: 0 16px 12px; padding: 12px 14px; border-radius: 14px; background: var(--aksent-myk); }
.mp-godkjenning .g-tittel { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 15px; color: var(--aksent); }
.mp-godkjenning .g-tittel svg { width: 16px; height: 16px; }
.mp-godkjenning .g-krav { font-size: 13px; color: var(--tekst-2); margin: 3px 0 8px; }
.mp-godkjenning .knapper { margin-top: 10px; }
.mp-godkjenning .knapp.myk { background: var(--kort); }
.godkjenning { display: grid; gap: 5px; margin: 8px 0 4px; font-size: 14px; }
.godkjenning .g-rad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.godkjenning .g-rad.svak { color: var(--tekst-2); font-size: 13.5px; }
/* Arket for "Godkjenn uten å vente" (oppgave 165) */
.ark-tekst { margin: 0 0 4px; line-height: 1.45; }
.mp-runde { margin: 0 16px 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; display: grid; gap: 6px; }
.mp-runde.svak { background: var(--knapp-myk); color: var(--tekst-2); display: flex; gap: 7px; align-items: flex-start; }
.mp-runde.svak svg { flex: none; margin-top: 2px; }
.mp-runde.ikke-enna { background: var(--rod-myk); }
/* Avsluttes (oppgave 210): hva som gjenstår, og knappen nederst i milepælen. */
.mp-avslutning { margin: 0 16px 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; background: var(--gul-myk); color: var(--tekst); display: flex; gap: 7px; align-items: flex-start; }
.mp-avslutning svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gul); }
.mp-avslutt { display: flex; justify-content: center; padding: 4px 16px 10px; }
.mp-avslutt .knapp { font-size: 14px; color: var(--tekst-2); }
.mp-slett { padding-top: 0; } .mp-slett .knapp { color: var(--rod); }
.mp-bunn { padding: 10px 16px 14px; border-top: 1px solid var(--linje); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--tekst-2); }

/* oppgave */
.detalj { padding: 16px; }
.detalj h2 { font-size: 22px; line-height: 1.25; margin: 6px 0 6px; letter-spacing: -0.02em; }
.detalj .linjer { margin-top: 12px; }
.detalj .linje { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linje); font-size: 14.5px; }
.detalj .linje:first-child { border-top: 0; }
.detalj .linje > span:first-child { width: 96px; flex: none; color: var(--tekst-3); }
.detalj .tekst { white-space: pre-line; color: var(--tekst-2); margin: 6px 0 0; }
.under-tittel { font-size: 13px; font-weight: 600; color: var(--tekst-3); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
.liten-trad { padding: 8px 12px 4px; }
.liten-trad .m .innhold { max-width: 88%; }

/* ---------- Mer ---------- */
.profil { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.profil .navn { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.liste .rad { min-height: 48px; padding: 9px 16px; }
.liste .rad + .rad::before { left: 58px; }
.flis { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.flis.gra-bla { background: #5b6b8c; } .flis.gronn { background: #15803d; } .flis.lilla { background: #6d4bc4; } .flis.rod { background: #e5484d; }
.flis.oransje { background: #d97706; } .flis.bla { background: #3a5ccc; } .flis.gra { background: #8b909b; } .flis.brun { background: #a16207; }
.liste .t { font-size: 16px; letter-spacing: -0.01em; }
.liste .u { font-size: 13px; color: var(--tekst-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verdi { color: var(--tekst-3); font-size: 15px; white-space: nowrap; }
.verdi.tall-verdi { min-width: 22px; text-align: right; }
.fot { text-align: center; font-size: 12.5px; color: var(--tekst-3); padding: 18px 0 0; }
.radio-rad .hake { color: var(--aksent); visibility: hidden; }
.radio-rad[aria-checked="true"] .hake { visibility: visible; }
.lesetekst { padding: 4px 18px 20px; font-size: 15.5px; line-height: 1.5; }
.lesetekst h2 { font-size: 20px; margin: 22px 0 6px; letter-spacing: -0.02em; }
.lesetekst h3 { font-size: 17px; margin: 18px 0 4px; }
.lesetekst p { margin: 8px 0; }
.lesetekst ul, .lesetekst ol { padding-left: 22px; margin: 8px 0; }
.lesetekst li { margin: 4px 0; }
.lesetekst code { font: 13.5px ui-monospace, Menlo, monospace; background: var(--kort-2); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.lesetekst table { border-collapse: collapse; font-size: 14px; margin: 10px 0; display: block; overflow-x: auto; }
.lesetekst td, .lesetekst th { border: 1px solid var(--linje); padding: 5px 8px; text-align: left; vertical-align: top; }
.logg-rad .t { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.beslutning h3 { font-size: 16px; margin: 0 0 4px; font-weight: 650; letter-spacing: -0.015em; }
.beslutning .tekst { white-space: pre-line; color: var(--tekst-2); font-size: 14.5px; margin-top: 8px; }
.side-topp { padding: calc(var(--topp) + 4px) 8px 0; display: flex; align-items: center; height: calc(50px + var(--topp)); position: sticky; top: 0; z-index: 10; background: var(--bg); }
.side-topp .midt { flex: 1; text-align: center; font-weight: 650; font-size: 16.5px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-topp .hoyre-plass { width: 110px; display: flex; justify-content: flex-end; padding-right: 8px; }

/* ---------- innlogging ---------- */
.inn { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--topp) + 24px) 24px calc(24px + var(--bunn)); max-width: 420px; margin: 0 auto; }
.inn .logo { width: 64px; height: 64px; border-radius: 16px; display: block; margin-bottom: 18px; }
.inn h1 { font-size: 30px; }
.inn p { color: var(--tekst-2); margin: 6px 0 22px; font-size: 16px; }
.inn .knapp { width: 100%; margin-top: 14px; }
.inn .tekstfelt { font-size: 17px; height: 50px; }
.inn .kode { letter-spacing: .3em; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.inn .lenker { display: flex; justify-content: space-between; margin-top: 16px; }

@media (min-width: 700px) {
  .skjerm { border-left: 1px solid var(--linje); border-right: 1px solid var(--linje); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- varsler: kortet øverst i Til meg og arket første gang ---------- */
.varsel-seksjon + .seksjon.tett { margin-top: 18px; }
.varselkort { box-shadow: var(--skygge), inset 0 0 0 1px var(--aksent-svak); }
.varsel-hode { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.varsel-hode h3 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -0.02em; line-height: 1.3; }
.varselkort > p, .varsel-ark p { margin: 0; color: var(--tekst-2); }
.lukk-knapp { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: var(--knapp-myk); color: var(--tekst-3); display: grid; place-items: center; flex: none; margin: -4px -4px 0 0; }
.lukk-knapp svg { width: 12px; height: 12px; }
.lukk-knapp:active { opacity: .6; }
.varsel-steg { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.varsel-steg li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.steg-ikon { width: 36px; height: 36px; border-radius: 10px; background: var(--aksent-myk); color: var(--aksent); display: grid; place-items: center; flex: none; }
.steg-ikon svg { width: 20px; height: 20px; }
img.steg-ikon.app { background: none; box-shadow: 0 0 0 1px var(--linje); }
.varsel-ark .ark-innhold { padding-top: 0; text-align: left; }
.varsel-ark h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 6px; }
.varsel-ark p { font-size: 15.5px; }
.varsel-ark .knapper { margin-top: 20px; }
.varsel-ark-ikon { width: 56px; height: 56px; border-radius: 16px; background: #e5484d; color: #fff; display: grid; place-items: center; }
.varsel-ark-ikon svg { width: 30px; height: 30px; }

/* ---------- Plan, skisse 3 (oppgave 82, 83, 87, 88 og 93) ---------- */
/* 82: ferdige oppgaver som venter på ditt ja, øverst i Plan */
.ja-kort { padding: 16px; box-shadow: var(--skygge), inset 0 0 0 1.5px color-mix(in srgb, var(--gronn) 35%, transparent); }
.ja-kort .hode { display: flex; gap: 12px; align-items: center; }
.ja-ikon { width: 44px; height: 44px; border-radius: 14px; background: var(--gronn-myk); color: var(--gronn); display: grid; place-items: center; flex: none; }
.ja-kort h3 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -0.02em; line-height: 1.3; }
.ja-kort .u { font-size: 13.5px; color: var(--tekst-2); margin-top: 2px; }
.ja-liste { margin: 12px 0 0; padding: 0; list-style: none; background: var(--kort-2); border-radius: 12px; }
.ja-liste li { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 14px; }
.ja-liste li + li { border-top: 1px solid var(--linje-2); }
.ja-liste li .vokser { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ja-liste .svak { font-size: 12.5px; white-space: nowrap; }
.ja-kort .knapper { margin-top: 12px; }
.ark-tall { font-size: 14px; color: var(--tekst-3); font-weight: 500; margin-left: 6px; }
.ark .ventekort { box-shadow: var(--skygge); margin-bottom: 12px; }
/* 83: milepælene, alle åpne */
.mp-kort .framdrift b { color: var(--tekst); font-weight: 650; }
.bar.tykk { height: 8px; border-radius: 4px; }
.mp-hode.fast { cursor: default; }
.ferdig-gruppe { padding: 18px 20px 8px; font-size: 13px; color: var(--tekst-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
/* 88: sist ferdige under hver milepæl */
.merke.maling { color: var(--lilla); background: var(--lilla-myk); }
/* Samarbeid (oppgave 160): AI-ene blir enige om planen før de begynner. */
.merke.samarbeid { color: var(--aksent); background: var(--aksent-myk); font-size: 11px; vertical-align: 1px; }
.samarbeid-rad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.enighet-boks .hjelp { display: block; margin-top: 4px; font-size: 13px; }
.avkryss { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; font-size: 14.5px; line-height: 1.35; }
.avkryss input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--aksent); }
.avkryss b { display: block; font-weight: 600; }
.avkryss .svak { display: block; font-size: 13px; color: var(--tekst-2); margin-top: 2px; }
.merke.ja-venter { color: var(--gronn); background: var(--gronn-myk); }
.vis-ferdige { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; width: 100%; border: 0; background: none; text-align: left; color: var(--aksent); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.vis-ferdige::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--linje); }
.vis-ferdige .ik { width: 22px; display: grid; place-items: center; color: var(--gronn); }
.vis-ferdige .ned { margin-left: auto; color: var(--tekst-3); display: inline-flex; }
.vis-ferdige[aria-expanded="true"] .ned { transform: rotate(180deg); }
/* Grupper i hver milepæl som kan foldes ut (Simon, melding 1411, oppgave 187). */
.gruppe { border-top: 1px solid var(--linje); }
.gruppe-rad { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; font: inherit; color: var(--tekst); cursor: pointer; }
.gruppe-rad:active { background: var(--kort-2); }
.gruppe-prikk { width: 22px; display: grid; place-items: center; flex: none; }
.gruppe-prikk::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gra); }
.gruppe-prikk.aksent::before { background: var(--aksent); } .gruppe-prikk.gul::before { background: var(--gul-lys); } .gruppe-prikk.brun::before { background: #a16207; }
.gruppe-prikk.gronn::before { background: var(--gronn); } .gruppe-prikk.rod::before { background: var(--rod); }
.gruppe-prikk.lilla::before { background: var(--lilla); } .gruppe-prikk.noytral::before { background: var(--tekst-3); }
.gruppe-navn { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.gruppe-tall { font-weight: 500; color: var(--tekst-2); }
.gruppe-rad .ned { color: var(--tekst-3); display: inline-flex; transition: transform .15s; }
.gruppe-rad[aria-expanded="true"] .ned { transform: rotate(180deg); }
.gruppe-innhold > .oppg:first-child::before, .gruppe-innhold > .krav-rad:first-child .oppg::before { display: none; }
.gruppe-innhold { padding-bottom: 4px; }
.krav-varsel.kort-linje { margin: 0 16px 6px 50px; padding: 8px 11px; font-size: 13.5px; }
.sak-rad .ik svg { stroke: #a16207; }
:root[data-tema="mork"] .sak-rad .ik svg { stroke: #d6a03a; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) .sak-rad .ik svg { stroke: #d6a03a; } }
.vedtak-rad .ik svg { stroke: var(--gronn); }
.vedtak-rad.erstattet .t { color: var(--tekst-2); text-decoration: line-through; }
.vedtak-rad.erstattet .ik svg { stroke: var(--tekst-2); }
.vedtak-hvorfor { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-line; }
.sak-rad.sak-meg .u { color: var(--aksent); font-weight: 600; }
/* 93: prioritet */
/* Prioritet som stolper, som dekningsmåleren på iPhone (oppgave 93). */
.stolper { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 12px; flex: none; }
.stolper i { display: block; width: 3px; border-radius: 1px; background: var(--tekst-3); opacity: .32; }
.stolper i.fylt { opacity: 1; }
.stolper i:nth-child(1) { height: 4px; } .stolper i:nth-child(2) { height: 6.5px; } .stolper i:nth-child(3) { height: 9px; } .stolper i:nth-child(4) { height: 12px; }
.stolper.haster i.fylt, .stolper.hoy i.fylt { background: var(--rod); }
.stolper.normal i.fylt { background: var(--aksent); }
.stolper.lav i.fylt { background: var(--tekst-3); }
.oppg .hoyre .stolper { margin-top: 3px; }
.segment button .stolper { margin-right: 2px; }
.merke.hoy, .merke.haster, .merke.lav { display: inline-flex; align-items: center; gap: 3px; padding-left: 6px; }
.merke.hoy { color: var(--rod); background: var(--rod-myk); font-weight: 700; }
.merke.haster { color: #fff; background: var(--rod); font-weight: 700; }
.merke.lav { color: var(--tekst-3); background: none; box-shadow: inset 0 0 0 1px var(--linje-2); font-weight: 500; }
.merke svg { flex: none; }
.segment { display: flex; background: var(--knapp-myk); border-radius: 10px; padding: 2px; gap: 2px; width: 100%; }
.segment button { flex: 1 1 auto; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tekst-2); padding: 6px 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; min-width: 0; }
.segment button[aria-pressed="true"] { background: var(--kort); color: var(--tekst); box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 0 0 0.5px rgb(0 0 0 / .06); }
.segment button.hoy[aria-pressed="true"], .segment button.haster[aria-pressed="true"] { color: var(--rod); }
.segment button:disabled { opacity: .6; }
.detalj .linje.prio { align-items: center; padding: 10px 0 6px; }
.detalj .linje.prio > span:first-child { width: 72px; }
/* 87: oppgaven sto stille */
.stille { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--gul); background: var(--gul-myk); border-radius: 7px; padding: 3px 8px 3px 6px; line-height: 1.3; }
.stille svg { flex: none; }
.oppg.har-stille::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gul-prikk); }
.stille-boks { display: flex; gap: 10px; margin-top: 12px; padding: 11px 12px; border-radius: 12px; background: var(--gul-myk); color: var(--gul); font-size: 14px; line-height: 1.4; }
.stille-boks svg { flex: none; margin-top: 2px; }
.stille-boks b { display: block; font-weight: 650; }
.stille-boks span { color: var(--tekst-2); }
/* Venter på et menneske eller en sak (oppgave 137): dempet grå, som "Venter" */
.venter-boks { display: flex; gap: 10px; margin-top: 12px; padding: 11px 12px; border-radius: 12px; background: var(--kort-2); color: var(--tekst-2); font-size: 14px; line-height: 1.4; }
.venter-boks svg { flex: none; margin-top: 1px; }
.venter-boks b { display: block; font-weight: 650; color: var(--tekst); }
.venter-boks .knapp { margin-top: 8px; }
.oppg.venter-menneske .t { color: var(--tekst-2); }
.historikk-rad .gul { color: var(--gul); font-weight: 600; }

/* Siste aktivitet for én person: kortene øverst i Plan er knapper som åpner arket (oppgave 102) */
button.ai-kort { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.aktivitet-ark .ark-topp { align-items: flex-start; }
.aktivitet-hvem { display: flex; gap: 12px; align-items: center; min-width: 0; }
.aktivitet-hvem .u { font-size: 13.5px; color: var(--tekst-2); margin-top: 1px; }
.aktivitet-ark .gruppe-tittel { padding: 4px 4px 7px; }
.opptatt-med { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 16px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; }
.opptatt-med small { display: block; font-size: 12.5px; color: var(--tekst-3); font-weight: 500; }
.opptatt-med svg { color: var(--tekst-3); flex: none; }
.aktivitet { margin: 0; }
.aktivitet .tomt { padding: 16px; color: var(--tekst-2); font-size: 14px; }
.aktivitet .skjelett { padding: 14px 16px; }
.aktivitet-rad { display: flex; gap: 10px; align-items: baseline; padding: 11px 14px; }
.aktivitet-rad + .aktivitet-rad { border-top: 0.5px solid var(--linje); }
.aktivitet-rad .hva { font-size: 14.5px; line-height: 1.35; }
.aktivitet-rad .hva a { color: var(--aksent); text-decoration: none; font-weight: 500; }
.aktivitet-rad .utdrag { font-size: 13px; color: var(--tekst-2); margin-top: 2px; line-height: 1.35;  white-space: pre-line; }
.aktivitet-rad .tid { color: var(--tekst-3); font-size: 12.5px; white-space: nowrap; flex: none; }
.vis-flere { margin-top: 12px; }

/* Ny oppgave: Hører til milepæl som valgkort (oppgave 103) */
.mp-valgliste { display: flex; flex-direction: column; gap: 8px; }
.mp-valg { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linje-2); background: var(--kort); color: var(--tekst); font: inherit; }
.mp-valg:active { background: var(--kort-2); }
.mp-valg[aria-checked="true"] { border-color: var(--aksent); box-shadow: 0 0 0 1px var(--aksent) inset; }
.mp-valg .ring { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--linje-2); display: grid; place-items: center; color: transparent; }
.mp-valg .ring svg { width: 12px; height: 12px; }
.mp-valg[aria-checked="true"] .ring { background: var(--aksent-fyll); border-color: var(--aksent-fyll); color: #fff; }
.mp-valg .over { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tekst-3); }
.mp-valg .t { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; margin-top: 1px; }
.mp-valg .u { display: block; font-size: 13px; color: var(--tekst-2); margin-top: 2px; line-height: 1.3; }
.mp-valg .merke.venter { text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--knapp-myk); color: var(--tekst-2); }
.mp-hjelp { font-size: 13px; color: var(--tekst-3); margin-top: 10px; }

/* Prioritet inne i oppgaven: bare stolpene, lav til venstre og haster til høyre (oppgave 107). */
.segment button .stolper { margin-right: 0; height: 14px; }
.segment button { padding: 8px 0; }
.segment button .stolper i { width: 3.5px; }
.segment button .stolper i:nth-child(1) { height: 4.5px; } .segment button .stolper i:nth-child(2) { height: 7.5px; } .segment button .stolper i:nth-child(3) { height: 10.5px; } .segment button .stolper i:nth-child(4) { height: 14px; }
.segment button[aria-pressed="false"] .stolper i.fylt { opacity: .55; }
/* Milepælen på oppgaven kan endres (oppgave 105). */
.detalj .linje.mp-linje { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; text-align: left; align-items: center; cursor: pointer; }
.detalj .linje.mp-linje .vokser { color: var(--tekst); font-weight: 500; min-width: 0; }
.detalj .linje.mp-linje .endre { display: inline-flex; align-items: center; gap: 4px; color: var(--aksent); font-size: 14px; flex: none; }
.detalj .linje.mp-linje .endre svg { width: 7px; height: 12px; color: var(--chevron); }
/* Milepælene i Til meg: framdriftslinje i stedet for status (oppgave 110). */
.mp .mp-framdrift { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.mp .mp-framdrift small { flex: none; min-width: 52px; font-size: 12.5px; color: var(--tekst-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp .mp-bar { height: 4px; }
.mp .rad.mp-venter .navn-tittel { color: var(--tekst-2); font-weight: 600; }
/* Kortet der man godkjenner en ferdig oppgave: hva som ble bedt om, bildene og hva AI-en gjorde (oppgave 111). */
.ventekort .beskrivelse { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--tekst-2); white-space: pre-line; }
.ventekort .beskrivelse.kortet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ventekort .beskrivelse-boks .mer-tekst { font-size: 13.5px; }
/* bilder på en sak: det første over hele kortet, resten som små ruter (Simon, oppgave 118) */
.sak-bilder { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sak-bilder .bred { width: 100%; max-height: 520px; border-radius: 12px; }
.sak-bilder .bred img { object-fit: contain; background: var(--kort-2); }
.sak-smaa { display: flex; flex-wrap: wrap; gap: 6px; }
.sak-smaa .liten { width: 64px; height: 64px; border-radius: 10px; }
.ventekort .oppgave-mini { margin-top: 8px; }
.ventekort .oppgave-mini .bilder { max-width: 150px; }
.sitat.gjort b { font-weight: 650; }
/* Sveip tilbake (oppgave 109): siden følger fingeren, og siden man kom fra skimtes under. */
.sveip-under { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--bg); pointer-events: none; }
/* Den ekte forrige siden ligger her én gang (ikke en kopi), forskjøvet til der man var, og dempet av skyggen (Simon, melding 900). */
.sveip-under .sveip-bilde { position: absolute; left: 0; right: 0; will-change: transform; }
.sveip-skygge { position: absolute; inset: 0; background: #000; opacity: .18; }
body.sveiper .skjerm#skjerm, #skjerm[style*="translate3d"] { position: relative; z-index: 2; background: var(--bg); box-shadow: -10px 0 24px rgb(0 0 0 / .14); will-change: transform; }
body.sveiper { overflow-x: hidden; }
/* Siste aktivitet: et ikon i en liten farget sirkel per slag (oppgave 102). */
.aktivitet-rad { align-items: flex-start; }
.aktivitet-rad .tid { margin-top: 2px; }
.akt-ik { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-top: -2px; }
.akt-ik svg { width: 15px; height: 15px; }
.akt-ik.bla { background: var(--aksent-myk); color: var(--aksent); }
.akt-ik.gul { background: var(--gul-myk); color: var(--gul); }
.akt-ik.gronn { background: var(--gronn-myk); color: var(--gronn); }
.akt-ik.rod { background: var(--rod-myk); color: var(--rod); }
.akt-ik.lilla { background: var(--lilla-myk); color: var(--lilla); }
.akt-ik.gra { background: var(--noytral-myk); color: var(--noytral); }

/* Oppsummer oppgavene som venter på ditt ja (Simon, oppgave 116): "Oppsummer" og "Godkjenn alle" side om side,
   og den private boksen øverst i arket med lukk-knappen til høyre for merket. */
.ja-ark .knapper .oppsum-ja { color: var(--lilla); background: var(--lilla-myk); }
.ja-ark .knapper .oppsum-ja span { display: inline-flex; align-items: center; gap: 6px; }
.ja-ark .knapper .oppsum-ja svg { width: 16px; height: 16px; }
.ja-ark .knapper .knapp.hel { width: auto; }
.ja-ark .privat { margin: 0 0 12px; }
.privat-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.privat-topp .lukk-knapp { margin: -4px -6px 0 0; }
/* Minimer (Simon, melding 894): pil opp ved siden av krysset, og minimert én linje med pil ned som åpner den igjen. */
.privat-knapper { display: flex; gap: 6px; margin: -4px -6px 0 0; }
.privat-knapper .lukk-knapp { margin: 0; }
.mini-knapp svg { width: 12px; height: 8px; }
.mini-knapp svg.opp, .privat-linje svg:last-child { transition: transform .15s; }
.mini-knapp svg.opp { transform: rotate(180deg); }
.privat.mini { padding: 4px 6px 4px 6px; }
.privat.mini .privat-topp { align-items: center; }
.privat.mini .privat-topp .lukk-knapp { margin: 0; }
.privat-linje { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0 8px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--tekst); text-align: left; }
.privat-linje span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.privat-linje svg { flex: none; color: var(--lilla); }
.privat-linje svg:first-child { width: 14px; height: 14px; }
.privat-linje svg:last-child { width: 11px; height: 7px; color: var(--tekst-3); }
.privat-linje:active { opacity: .6; }

/* Krav som må holde (Simon, oppgave 123): status i farge, dempede linjer under, og knappene Holder og Holder ikke. */
.krav-rad { position: relative; }
.krav-rad + .krav-rad::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--linje); }
.krav-rad .oppg::before { display: none; }
.krav-rad .oppg { padding-bottom: 6px; }
.krav-status { font-size: 13px; }
.krav-status b { font-weight: 650; }
.krav-status.k-gronn b { color: var(--gronn); } .krav-status.k-rod b { color: var(--rod); } .krav-status.k-gra b { color: var(--tekst-3); }
.krav-linje { display: block; font-size: 12.5px; color: var(--tekst-3); margin-top: 3px; line-height: 1.35; }
.krav-linje.lenke { color: var(--aksent); }
.krav-knapper { display: flex; gap: 8px; padding: 0 16px 12px 50px; }
.krav-knapper .knapp.liten { flex: none; height: 34px; padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.krav-knapper .knapp.liten svg { width: 14px; height: 14px; }
.knapp.gronn-fylt { background: var(--gronn); color: #fff; }
.knapp.rod-fylt { background: var(--rod); color: #fff; }
.krav-ark .tittel-sitat { margin: 0 0 10px; font-weight: 600; }
.krav-ark .meta { font-size: 13px; color: var(--tekst-3); margin-top: 10px; }
/* Begrunnelsen til svaret står etter statusen, og bildene under (oppgave 153). Svaret skrives i det samme
   skrivefeltet med bilder som i Til meg (svarKnapper). */
.krav-status.md p { margin: 0; }
.krav-status.md > p:first-child { display: inline; }
.krav-status.med-begrunnelse { display: block; line-height: 1.4; }
.krav-status.med-begrunnelse .mer-tekst { font-size: 12.5px; }
.krav-bilder { margin-top: 6px; }
.historikk-rad .begrunnelse { display: block; color: var(--tekst-3); font-size: 13px; margin-top: 2px; }
.historikk-rad .bilder, .hendelse .bilder { margin-top: 6px; }
.krav-knapper > div { flex: 1; min-width: 0; }
.krav-knapper .knapper { margin-top: 0; }
.krav-knapper .svarskjema { margin-top: 0; }
.krav-boks { margin-top: 12px; }
.krav-boks .krav-knapper { padding: 10px 0 0; }

/* "+" i Plan: liten meny med Ny oppgave og Ny milepæl (Simon, oppgave 114). Trykk utenfor lukker den. */
/* "+ Oppgave" og "+ Milepæl" øverst i Plan (oppgave 114) */
.ny-knapper { display: flex; gap: 8px; flex: none; }
.ny-knapp { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 13px 0 9px; border-radius: 999px; background: var(--aksent-myk); color: var(--aksent); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ny-knapp svg { width: 16px; height: 16px; }
.ny-knapp:active { opacity: .6; }
/* Under "Ingenting venter på deg" i Til meg (oppgave 134): lavere kort uten forklaring, knappene rett under, midt på */
.tomt.lav { padding: 18px 20px; }
.tomt.lav b { margin-bottom: 0; }
.tomt.lav .tomt-ikon { margin-bottom: 8px; }
.ny-knapper.stor { margin-top: 12px; }
.ny-knapper.stor .knapp { height: 48px; text-decoration: none; }
.ny-knapper.stor .knapp.myk { background: var(--kort); color: var(--aksent); box-shadow: inset 0 0 0 1.5px var(--aksent); }
.ny-knapper.stor .ikon-tekst { display: inline-flex; align-items: center; gap: 6px; }
.ny-knapper.stor svg { width: 18px; height: 18px; }
.pv-ik { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--aksent-myk); color: var(--aksent); display: grid; place-items: center; }
.pv-ik svg { width: 18px; height: 18px; }
/* Ny milepæl og arket for å endre en milepæl */
.ny-mp-skjema .seksjon + .seksjon { margin-top: 12px; }
.felt-hjelp { font-size: 13px; color: var(--tekst-3); margin: -2px 0 10px 2px; }
.mp-valg.firkant .ring { border-radius: 6px; }
.mp-valg:disabled { opacity: .45; cursor: default; }
.forste-liste { display: flex; flex-direction: column; gap: 8px; }
.forste-rad { display: flex; align-items: center; gap: 10px; }
.forste-rad .nr { flex: none; width: 16px; text-align: center; font-size: 14px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.fjern-linje { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: var(--knapp-myk); color: var(--tekst-2); display: grid; place-items: center; }
.fjern-linje svg { width: 10px; height: 10px; }
.legg-linje { margin-top: 8px; }
.legg-linje svg { width: 16px; height: 16px; }
.ny-mp-skjema .mp-hjelp { margin: 0 4px; }
.ny-mp-skjema .seksjon:has(> .mp-hjelp) .knapper { margin-top: 10px; }
/* Navnet på en milepæl i Plan åpner arket for å endre den. */
button.mp-navn { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.mp-navn { cursor: pointer; }
/* Den nye milepælen har blå kant en kort stund. */
.mp-kort { transition: box-shadow .8s ease; }
.mp-kort.ny-mp { box-shadow: 0 0 0 2px var(--aksent), var(--skygge); }

/* Tekst med markdown (oppgave 125): js/markdown.js og js/tekst.js. Kompakt, så den passer i bobler og kort. */
.md { white-space: normal !important; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 0.55em; }
.md h2, .md h3, .md h4 { font-size: 1.05em; line-height: 1.3; margin: 0.7em 0 0.3em; letter-spacing: -0.01em; }
.md h2 { font-size: 1.15em; }
.md h4 { font-size: 1em; }
.md ul, .md ol { margin: 0.3em 0 0.55em; padding-left: 1.35em; }
.md li { margin: 0.15em 0; }
.md li > ul, .md li > ol { margin: 0.15em 0; }
.md blockquote { margin: 0.3em 0 0.55em; padding: 0.1em 0 0.1em 0.75em; border-left: 3px solid var(--linje); color: var(--tekst-2); }
.md code { font: 0.88em ui-monospace, Menlo, monospace; background: var(--kort-2); padding: 1px 5px; border-radius: 5px; }
.md pre { margin: 0.3em 0 0.55em; padding: 8px 10px; background: var(--kort-2); border-radius: 10px; overflow-x: auto; white-space: pre !important; max-width: 100%; }
.md pre code { background: none; padding: 0; font-size: 0.85em; overflow-wrap: normal; }
.md a { color: var(--aksent); text-decoration: underline; text-underline-offset: 2px; }
.md hr { border: 0; border-top: 1px solid var(--linje); margin: 0.6em 0; }
.md table { border-collapse: collapse; font-size: 0.9em; margin: 0.3em 0 0.55em; display: block; overflow-x: auto; }
.md td, .md th { border: 1px solid var(--linje); padding: 4px 7px; text-align: left; vertical-align: top; }
.boble .md pre, .boble .md code { background: rgba(127, 127, 127, 0.16); }
.boble .md a, .m.meg .md blockquote { color: inherit; }
.m.meg .md blockquote { border-left-color: rgb(255 255 255 / .5); }
.ventekort .lang-tekst, .ventekort .milepael-tekst { color: var(--tekst-2); }
.ventekort .lang-tekst.hel { color: var(--tekst); }
.ventekort .md p { white-space: normal; }
/* Tre linjer av beskrivelsen; med markdown kan den ha flere blokker, så høyden settes i stedet for line-clamp. */
.ventekort .beskrivelse.md.kortet { display: block; max-height: calc(3 * 1.4em); overflow: hidden; }
.sitat .md { flex: 1; min-width: 0; }
.mp-beskrivelse { font-size: 13.5px; line-height: 1.4; color: var(--tekst-2); padding: 0 16px 12px; margin-top: -4px; }
.stemme-tekst { margin-top: 2px; color: var(--tekst); }

/* Knapper som flyter over innholdet ("+" i Plan, ny samtale, ny versjon) skjules mens et ark er oppe, så de aldri
   dekker knappene i arket (Simon, oppgave 128). Gjelder alle ark og dialoger, også bildevisningen. */
body:has(dialog[open]) :is(.topp .rund-knapp, .ny-knapper, .ny-versjon) { visibility: hidden; pointer-events: none; }

/* Rapportene på en oppgave (oppgave 141): siste øverst, de tidligere sammenfoldet under, med svarene mellom. */
.rapport-hvem { margin-top: 6px; }
.rapporter-tidligere { margin: 10px 0 6px; border-bottom: 1px solid var(--linje); padding-bottom: 8px; border-top: 1px solid var(--linje, rgba(127,127,127,.2)); padding-top: 4px; }
.rapporter-tidligere[hidden] { display: none; }
.rapport-tidligere, .rapport-svar { padding: 10px 0 4px; }
.rapport-tidligere .md, .rapport-svar .md { color: var(--tekst-2); }
.rapport-svar { display: flex; gap: 8px; align-items: flex-start; }
.rapport-svar > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--tekst-3); }
.rapport-svar.nei > svg { color: var(--rod, #d33); }
.ventekort .tidligere-rapport { display: block; margin-top: 6px; font-size: 13px; color: var(--tekst-3); text-decoration: underline; }
.krav-varsel { margin: 8px 16px 4px; padding: 11px 13px; border-radius: 12px; background: var(--lapp); color: var(--lapp-tekst); font-size: 14px; line-height: 1.4; }
.alternativer { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.alternativ { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--kort-2); font-size: 15px; line-height: 1.35; cursor: pointer; }
.alternativ input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--aksent); }
.alternativ.eget { background: transparent; border: 1px dashed var(--linje); color: var(--tekst-2); }

/* Filer som vedlegg (Simon, oppgave 150): en brikke med ikon, navn og størrelse. Trykk leser, åpner eller laster ned. */
.filer { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 100%; }
.filer:first-child { margin-top: 0; }
.fil-brikke, .vedlagt-fil { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 320px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--kort); box-shadow: inset 0 0 0 1px var(--linje); color: var(--tekst); text-align: left; font: inherit; border: 0; }
.fil-brikke { cursor: pointer; }
.fil-brikke.henter { opacity: .6; }
.fil-ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--aksent); color: #fff; }
.fil-ikon svg { width: 20px; height: 20px; }
.fil-ikon.pdf { background: #d6453d; } .fil-ikon.docx { background: #2b5fb8; } .fil-ikon.xlsx { background: #1f7a45; } .fil-ikon.pptx { background: #c4532a; }
.fil-ikon.md, .fil-ikon.txt, .fil-ikon.csv { background: var(--tekst-3); }
.fil-tekster { display: flex; flex-direction: column; min-width: 0; }
.fil-navn { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-info { font-size: 13px; color: var(--tekst-2); }
.vedlagt-filer { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 4px 0; }
.vedlagt-fil { position: relative; padding-right: 30px; }
.vedlagt-fil .lite-x { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 22px; height: 22px; background: var(--tekst); color: var(--bg); }
.m.meg .fil-brikke { background: rgb(255 255 255 / .18); box-shadow: none; color: inherit; }
.m.meg .fil-brikke .fil-info { color: inherit; opacity: .8; }
.fil-ark .fil-om { margin: 0 0 10px; }
.fil-ark .fil-tekst { white-space: pre-wrap; word-break: break-word; font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0; }
.sak-bilder .filer { margin-top: 4px; }
.krav-varsel ul { margin: 6px 0 0; padding-left: 18px; }
.krav-varsel li + li { margin-top: 2px; }
.krav-varsel.lapp-sak { margin: 10px 0 0; }

/* "+ Skriv eller snakk" på en egen linje under "+ Milepæl" og "+ Oppgave" (oppgave 170) */
/* Plan: tittelen og de tre knappene på én linje, også på 360 px (oppgave 176). Knappene er 36 px høye. */
.plan-linje { gap: 8px; }
.plan-linje h1 { font-size: 28px; flex: none; }
.plan-linje .ny-knapper { gap: 6px; }
.plan-linje .ny-knapp { height: 36px; padding: 0 11px 0 8px; font-size: 14px; gap: 3px; }
.plan-linje .ny-knapp.bare-ikon { width: 36px; padding: 0; justify-content: center; }
.plan-linje .ny-knapp.bare-ikon svg { width: 18px; height: 18px; }
.ny-knapper.stor.under-ny { margin-top: 8px; }
/* Holder tastaturet oppe fra trykket til samtalens skrivefelt har fått fokus (tankeKnapper i felles.js) */
.fokus-holder { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; border: 0; padding: 0; pointer-events: none; }
/* Den tomme nye samtalen: "Skriv eller snakk" med mikrofonen (tale.js) */
.tomt.ny-tanke .tale-ikon { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--aksent-myk); color: var(--aksent); }
.tomt.ny-tanke .tale-ikon svg { width: 22px; height: 22px; }
.tomt.ny-tanke .tale-hjelp { margin: 6px 0 8px; color: var(--aksent); font-weight: 500; }

/* Hva som venter på de andre (oppgave 175): inne i kortet "Ingenting venter på deg", eller et eget kort sist i Venter på deg */
.andre-kort { margin-top: 10px; padding: 12px 16px; }
.andre-overskrift { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tekst-2); margin-bottom: 6px; }
.andre-overskrift svg { width: 14px; height: 14px; }
.andre-linje { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tekst-2); }
.tomt .andre-linje { margin-top: 6px; font-size: 14.5px; }
.andre-navn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--aksent); text-decoration: underline; text-decoration-color: var(--aksent-svak); text-underline-offset: 3px; cursor: pointer; }
.andre-navn.apen { text-decoration-color: currentColor; }
.andre-liste { margin: 10px -16px -12px; border-top: 1px solid var(--linje); text-align: left; }
.tomt .andre-liste { margin: 14px -20px -18px; }
.andre-hode { padding: 12px 16px 4px; font-size: 13px; color: var(--tekst-3); font-weight: 600; }
.andre-slag { font-size: 12.5px; color: var(--tekst-3); }
.andre-tittel { font-size: 15px; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.andre-liste .rad svg { flex: none; color: var(--tekst-3); }

/* Venter på deg som kompakt liste (Simon, oppgave 183): én rad per ting med skillelinjer, som i iOS.
   Raden har ikon, tittelen med nummeret først og en kort linje under. Trykk folder ut raden med knappene. */
.venter-liste .v-rad { position: relative; }
.venter-liste .v-rad + .v-rad::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: 1px; background: var(--linje); }
.v-topp { display: flex; align-items: center; }
.v-hode { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.v-hode:active { background: var(--kort-2); }
.v-ik { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.v-ik svg { width: 15px; height: 15px; }
.v-ik.gul { background: var(--gul-myk); color: var(--gul); }
.v-ik.gronn { background: var(--gronn-myk); color: var(--gronn); }
.v-ik.rod { background: var(--rod-myk); color: var(--rod); }
.v-ik.bla { background: var(--aksent-myk); color: var(--aksent); }
.v-tittel, .v-linje { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tittel { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.v-linje { font-size: 13px; color: var(--tekst-2); margin-top: 1px; line-height: 1.3; }
.v-tid { flex: none; align-self: flex-start; margin-top: 2px; font-size: 12.5px; color: var(--tekst-3); }
/* Ja og Nei på en vanlig sak: nederst til høyre, på linja under tittelen. */
.v-raske { position: absolute; right: 14px; bottom: 6px; display: flex; gap: 6px; }
.v-raske .knapp { flex: none; height: 28px; padding: 0 12px; font-size: 14px; border-radius: 9px; }
.v-rad.rask .v-hode { padding-bottom: 12px; }
.v-rad.rask .v-linje { padding-right: 96px; margin-top: 9px; }
.v-rad.apen .v-tittel { white-space: normal; }
.v-rad.apen .v-raske, .v-rad.apen .v-linje { display: none; }
.v-innhold { padding: 0 14px 14px; }
.v-kort > :first-child { margin-top: 0; }
.v-kort .knapper .knapp { padding: 0 8px; }

/* Designdashbord (oppgave 186): forslag til Hjem. Alt har dd- foran, så det ikke påvirker resten av appen. */
.dd-forklaring { margin: 0 0 10px; padding: 0 4px; font-size: 14.5px; color: var(--tekst-2); }
.dd-forklaring b { color: var(--tekst); }
.dd-analyse { padding: 14px; font-size: 14.5px; color: var(--tekst-2); }
.dd-analyse p { margin: 0; } .dd-analyse p + p { margin-top: 10px; } .dd-analyse b { color: var(--tekst); }
.dd-velgere { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.dd-velgere button, .dd-bryter button { min-height: 44px; border: 0; border-radius: 10px; background: var(--knapp-myk); color: var(--tekst); font: inherit; font-weight: 600; cursor: pointer; }
.dd-velgere button.valgt, .dd-bryter button.valgt { background: var(--aksent-fyll); color: #fff; }
.dd-navn { margin: 0 4px 2px; font-size: 18px; } .dd-ide { margin: 0 4px 12px; font-size: 14.5px; color: var(--tekst-2); }
.dd-ramme { max-width: 390px; height: 740px; margin: 0 auto; border: 6px solid var(--linje); border-radius: 28px; overflow: hidden; background: var(--bg); }
.dd-skjerm { height: 100%; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.dd-hjem { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.dd-vurdering { margin: 12px 4px 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14.5px; }
.dd-vurdering dt { color: var(--tekst-3); } .dd-vurdering dd { margin: 0; }
.dd-tittel { display: flex; justify-content: space-between; font-size: 16px; font-weight: 650; margin-top: 4px; } .dd-tittel span { color: var(--tekst-3); font-weight: 400; font-size: 14px; }
.dd-kort, .dd-andre, .dd-tom, .dd-brev, .dd-folk, .dd-helt, .dd-fokus, .dd-skriv, .dd-flis, .dd-r, .dd-lapp { background: var(--kort); border-radius: 14px; color: var(--tekst); text-decoration: none; }
.dd-rad, .dd-mp, .dd-hendelse { display: flex; align-items: center; gap: 8px; padding: 11px 12px; min-height: 44px; color: var(--tekst); text-decoration: none; box-sizing: border-box; }
.dd-rad + .dd-rad, .dd-mp + .dd-mp, .dd-hendelse + .dd-hendelse { border-top: 1px solid var(--linje); }
.dd-rad b, .dd-hendelse b { display: block; font-size: 14.5px; font-weight: 600; } .dd-rad .vokser, .dd-hendelse .vokser { flex: 1; min-width: 0; }
.dd-skjerm small { color: var(--tekst-3); font-size: 12.5px; } .dd-hendelse small { display: block; }
.dd-rad svg { width: 14px; height: 14px; color: var(--chevron); flex: none; }
.dd-mp { flex-direction: column; align-items: stretch; } .dd-mp > span { display: flex; justify-content: space-between; gap: 8px; } .dd-mp b { font-size: 14.5px; font-weight: 600; }
.dd-tom { display: flex; align-items: center; gap: 8px; padding: 14px; font-weight: 600; font-size: 14.5px; } .dd-tom svg { width: 18px; height: 18px; color: var(--gronn); }
.dd-andre { padding: 10px 12px; font-size: 14px; background: var(--lapp); color: var(--lapp-tekst); }
.dd-folk { display: flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; } .dd-folk small { margin-left: auto; }
.dd-person { position: relative; opacity: .5; } .dd-person.paa { opacity: 1; }
.dd-lag { display: flex; gap: 8px; } .dd-lag a { flex: 1; text-align: center; padding: 11px; border-radius: 12px; background: var(--knapp-myk); color: var(--aksent); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.dd-fokus { display: flex; flex-direction: column; gap: 12px; padding: 18px; } .dd-fokus strong { font-size: 20px; line-height: 1.25; }
.dd-knapp { padding: 12px; border-radius: 12px; background: var(--aksent-fyll); color: #fff; font-weight: 600; text-align: center; }
.dd-flisene { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dd-flis { padding: 14px; font-size: 13px; color: var(--tekst-2); } .dd-flis strong { display: block; font-size: 30px; line-height: 1.1; color: var(--tekst); }
.dd-skriv { display: flex; justify-content: space-between; align-items: center; padding: 16px; border: 1px solid var(--aksent-svak); color: var(--tekst-2); font-size: 16px; } .dd-skriv svg { width: 20px; height: 20px; color: var(--aksent); }
.dd-helt { display: flex; flex-direction: column; gap: 8px; padding: 18px; } .dd-helt strong { font-size: 20px; line-height: 1.25; } .dd-helt span { font-size: 13.5px; color: var(--tekst-2); }
.dd-rute { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dd-r { display: flex; flex-direction: column; gap: 6px; padding: 12px; font-size: 13px; min-width: 0; } .dd-r.stor, .dd-r.bred { grid-column: 1 / -1; } .dd-r.stor strong { font-size: 36px; line-height: 1; } .dd-r a { color: var(--tekst); } .dd-r.bred { text-align: center; color: var(--aksent); font-weight: 600; font-size: 14.5px; }
.dd-bryter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dd-bryter + div { display: flex; flex-direction: column; gap: 10px; }
.dd-brev { padding: 16px; font-size: 16px; line-height: 1.4; } .dd-brev p { margin: 0; } .dd-brev p + p { margin-top: 8px; }
.dd-kolonner { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; } .dd-kol { flex: 0 0 85%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .dd-lapp { padding: 12px; font-size: 14px; }
.dd-skjerm > * { flex-shrink: 0; }
.dd-skjerm .bar { flex: none; width: 100%; height: 6px; }

/* Designdashbord, runde 2 (oppgave 188): kolonner. Telefonen viser én om gangen, en bred skjerm flere. */
.dd-runde { margin-bottom: 12px; }
.dk-hode-rad { display: flex; justify-content: space-between; margin: 0 4px 8px; font-size: 15px; } .dk-hode-rad span { color: var(--tekst-3); }
.dk-ramme { height: 720px; max-height: 80dvh; border-radius: 22px; background: var(--bg); border: 1px solid var(--linje); overflow: hidden; }
.dk-flate { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.dk-spor { display: flex; align-items: center; gap: 6px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; }
.dk-spor button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--gra); cursor: pointer; position: relative; }
.dk-spor button::after { content: ""; position: absolute; inset: -18px -4px; }
.dk-spor button.her { width: auto; height: auto; padding: 3px 10px; background: var(--aksent-myk); color: var(--aksent); font: inherit; font-size: 12.5px; font-weight: 600; }
.dk-bane { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 0 12px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dk-kol { flex: 0 0 calc(100% - 24px); max-width: 340px; scroll-snap-align: end; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; animation: dk-inn .18s ease-out; }
.dk-kol > * { flex-shrink: 0; }
@media (min-width: 700px) { .dk-kol { flex-basis: 300px; } }
@media (prefers-reduced-motion: reduce) { .dk-kol { animation: none; } }
@keyframes dk-inn { from { opacity: 0; transform: translateX(14px); } }
.dk-tilbake { display: flex; align-items: center; gap: 6px; min-height: 44px; border: 0; background: none; color: var(--tekst); font: inherit; text-align: left; cursor: pointer; padding: 0 4px; } .dk-tilbake svg { width: 11px; height: 18px; color: var(--aksent); } .dk-tilbake b { font-size: 17px; font-weight: 650; }
.dk-node { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--kort); color: var(--tekst); font: inherit; text-align: left; cursor: pointer; }
.dk-ik { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--f); background: color-mix(in srgb, var(--f) 16%, transparent); } .dk-ik svg { width: 19px; height: 19px; }
.dk-bilde { flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.dk-t { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 550; line-height: 1.25; } .dk-tall { flex: none; font-size: 13.5px; font-weight: 650; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.dk-strek .dk-node { border-left: 4px solid var(--f); } .dk-kort .dk-node { background: color-mix(in srgb, var(--f) 9%, var(--kort)); }
.dk-rutenett .dk-kol:not(:first-child) { display: grid; grid-template-columns: 1fr 1fr; align-content: start; } .dk-rutenett .dk-tilbake, .dk-rutenett .dk-detalj { grid-column: 1 / -1; } .dk-rutenett .dk-node { flex-direction: column; align-items: flex-start; min-height: 104px; }
.dk-ring { flex: none; transform: rotate(-90deg); } .dk-ring circle { fill: none; stroke-width: 3.6; } .dk-ring .b { stroke: var(--linje); } .dk-ring .p { stroke: var(--gul-lys); } .dk-ring .f { stroke: var(--gronn); }
.dk-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dk-rad { display: flex; gap: 8px; } .dk-rad > * { flex: 1; } .dk-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; padding-top: 6px; }
.dk-flis { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-height: 128px; padding: 12px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--f, var(--aksent)) 11%, var(--kort)); color: var(--tekst); font: inherit; text-align: left; cursor: pointer; }
.dk-flis strong { margin-top: auto; font-size: 38px; line-height: 1; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .dk-flis small { color: var(--tekst-2); font-size: 12.5px; }
.dk-flis.lav { min-height: 96px; } .dk-flis.stor { min-height: 150px; } .dk-flis.stor strong { font-size: 64px; } .dk-kol > .dk-flis.stor { width: 100%; }
.dk-ringer { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .dk-ringknapp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--kort); color: var(--tekst); font: inherit; cursor: pointer; } .dk-ringknapp strong { position: absolute; top: 40px; font-size: 16px; } .dk-ringknapp small { color: var(--tekst-2); font-size: 11.5px; text-align: center; }
.dk-folkene { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: 18px; background: var(--kort); } .dk-av { display: grid; place-items: center; min-height: 60px; border: 0; background: none; cursor: pointer; } .dk-av .av { box-shadow: 0 0 0 2.5px var(--kort), 0 0 0 5px var(--gra); } .dk-av.gronn .av { box-shadow: 0 0 0 2.5px var(--kort), 0 0 0 5px var(--gronn); }
.dk-stolpe { display: flex; gap: 3px; height: 44px; } .dk-stolpe button { flex: 1 1 0; min-width: 8px; border: 0; border-radius: 6px; cursor: pointer; }
.dk-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dk-bento .stor { grid-column: 1 / -1; } .dk-bento .hoy { grid-row: span 2; --f: var(--aksent); } .dk-bento .bred { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 64px; gap: 8px; --f: var(--gronn); }
.dk-prikker { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--kort); color: var(--tekst); font: inherit; cursor: pointer; text-align: left; } .dk-hode { display: flex; align-items: center; justify-content: space-between; } .dk-hode strong { font-size: 22px; } .dk-punkt { display: flex; flex-wrap: wrap; gap: 4px; } .dk-punkt i { width: 9px; height: 9px; border-radius: 3px; background: var(--f); }
.dk-stige { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 4px; } .dk-stige::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 20px; width: 2px; background: var(--linje); } .dk-trinn { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px 8px 0; border: 0; background: none; color: var(--tekst); font: inherit; cursor: pointer; text-align: left; } .dk-trinn .dk-ring { background: var(--bg); border-radius: 50%; }
.dk-app { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; color: var(--tekst-2); font: inherit; cursor: pointer; } .dk-app small { font-size: 12px; } .dk-appik { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; color: #fff; background: var(--f); } .dk-appik svg { width: 28px; height: 28px; } .dk-appik em { position: absolute; top: -6px; right: -6px; min-width: 20px; padding: 2px 5px; box-sizing: border-box; border-radius: 99px; background: var(--tall); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }
.dk-stokk { position: relative; padding: 0 8px 12px 0; border: 0; background: none; color: var(--tekst); font: inherit; cursor: pointer; text-align: left; } .dk-stokk::before, .dk-stokk::after { content: ""; position: absolute; inset: 8px 0 4px 8px; border-radius: 14px; background: color-mix(in srgb, var(--f) 30%, var(--kort)); } .dk-stokk::after { inset: 4px 4px 8px 4px; background: color-mix(in srgb, var(--f) 16%, var(--kort)); } .dk-kortet { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; border-radius: 14px; background: var(--kort); } .dk-kortet strong { font-size: 22px; }
.dk-detalj { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--kort); } .dk-tekst { font-size: 14.5px; color: var(--tekst-2); overflow-wrap: anywhere; } .dk-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--tekst-3); } .dk-meta span { display: inline-flex; align-items: center; gap: 5px; } .dk-meta svg { width: 14px; height: 14px; }
.dk-apne { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; border-radius: 12px; background: var(--aksent-fyll); color: #fff; font-weight: 600; text-decoration: none; } .dk-apne svg { width: 7px; height: 12px; }
[data-f="gul"] { --f: var(--gul-lys); } [data-f="gronn"] { --f: var(--gronn); } [data-f="bla"] { --f: var(--aksent); } [data-f="rod"] { --f: var(--tall); } [data-f="lilla"] { --f: var(--lilla); } [data-f="gra"] { --f: var(--gra); }
.dk-kol:only-child { flex-basis: 100%; max-width: none; }
@media (min-width: 700px) { .dk-kol:only-child { flex-basis: 340px; max-width: 340px; } }
.dk-hode { gap: 10px; }
.dk-appik { background: color-mix(in srgb, var(--f) 22%, var(--kort)); color: var(--f); }
/* Forslag 11: innholdet fra kolonne 2 rett under kategorien. */
.dk-gruppe { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.dk-under { display: flex; flex-direction: column; margin: 0 8px 8px 8px; border-radius: 0 0 14px 14px; overflow: hidden; background: var(--kort); border-left: 2px solid var(--f); }
.dk-under .dk-node { min-height: 46px; padding: 6px 10px; border-radius: 0; background: none; } .dk-under .dk-node + .dk-node { border-top: 1px solid var(--linje); }
.dk-under .dk-ik, .dk-under .dk-bilde { width: 28px; height: 28px; } .dk-under .dk-ik svg { width: 16px; height: 16px; } .dk-under .dk-t { font-size: 14px; }
/* Forslag 11: valgt rad, dempede rader under kategoriene, status og menyen med pluss. */
.dk-node.valgt { background: color-mix(in srgb, var(--aksent) 24%, var(--kort)); box-shadow: inset 0 0 0 1.5px var(--aksent); }
.dk-stokk.valgt .dk-kortet { box-shadow: inset 0 0 0 1.5px var(--aksent); }
.dk-under .dk-ik, .dk-under .dk-ring { display: none; }
.dk-under .dk-t { color: var(--tekst-2); font-weight: 450; } .dk-under .dk-tall { color: var(--tekst-3); font-weight: 500; }
.dk-under .dk-node.valgt .dk-t { color: var(--tekst); font-weight: 600; }
.dk-status { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--f); } .dk-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--f); }
.dk-status.puls i { animation: dk-puls 1.4s ease-in-out infinite; } @keyframes dk-puls { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--f) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dk-status.puls i { animation: none; } }
.dk-ramme.med-meny { position: relative; display: flex; flex-direction: column; } .dk-ramme.med-meny .dk-flate { flex: 1; min-height: 0; }
.dk-meny { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: end; padding: 6px 6px 8px; background: var(--faner); border-top: 1px solid var(--linje); }
.dk-fane { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; border: 0; background: none; color: var(--tekst-3); font: inherit; cursor: pointer; } .dk-fane svg { width: 24px; height: 24px; } .dk-fane small { font-size: 11px; font-weight: 600; } .dk-fane.valgt { color: var(--aksent); }
.dk-pluss { justify-self: center; display: grid; place-items: center; width: 60px; height: 60px; margin-top: -26px; border: 0; border-radius: 50%; color: #fff; cursor: pointer; background: linear-gradient(180deg, #6d8bf5, #3355d6 60%, #2743b4); box-shadow: 0 8px 18px rgb(39 67 180 / .55), 0 2px 0 #1d3390, inset 0 1.5px 0 rgb(255 255 255 / .45); transition: transform .15s; } .dk-pluss svg { width: 26px; height: 26px; } .dk-pluss:active { transform: translateY(2px); } .dk-pluss.apen { transform: rotate(45deg); }
.dk-plussark { position: absolute; left: 12px; right: 12px; bottom: 84px; z-index: 3; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--kort-2); box-shadow: 0 10px 30px rgb(0 0 0 / .45); } .dk-plussark a { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 16px; color: var(--tekst); font-weight: 600; font-size: 15px; text-decoration: none; } .dk-plussark a + a { border-top: 1px solid var(--linje); } .dk-plussark svg { width: 20px; height: 20px; color: var(--aksent); }
/* Forslag 11, ny runde: radene er bare farget ikon, grå tekst og antall. Mindre pluss, og valgene i rutenett. */
.dk-under { background: none; border-left: 0; margin: 2px 8px 10px 14px; border-radius: 0; }
.dk-under .dk-node { min-height: 40px; padding: 4px 6px; background: none; border-radius: 10px; } .dk-under .dk-node + .dk-node { border-top: 0; }
.dk-under .dk-ik { display: grid; width: 22px; height: 22px; background: none; color: var(--f); } .dk-under .dk-ik svg { width: 18px; height: 18px; }
.dk-under .dk-node.valgt { background: color-mix(in srgb, var(--aksent) 24%, transparent); box-shadow: inset 0 0 0 1.5px var(--aksent); }
.dk-meny { grid-template-columns: 1fr 1fr 60px 1fr 1fr; }
.dk-pluss { width: 46px; height: 46px; margin-top: -10px; border-radius: 15px; background: linear-gradient(180deg, #5f7ef0, #3a5ccc); box-shadow: 0 4px 10px rgb(39 67 180 / .45), inset 0 1px 0 rgb(255 255 255 / .35); } .dk-pluss svg { width: 20px; height: 20px; }
.dk-plussark { left: auto; right: auto; left: 50%; transform: translateX(-50%); bottom: 76px; width: min(292px, calc(100% - 24px)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.dk-plussark a { flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; padding: 8px; border-radius: 12px; text-align: center; } .dk-plussark a + a { border-top: 0; } .dk-plussark a:active { background: var(--kort); }
.dk-plussik { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--f); background: color-mix(in srgb, var(--f) 18%, transparent); } .dk-plussark .dk-plussik svg { width: 22px; height: 22px; color: var(--f); } .dk-plussark small { font-size: 12.5px; font-weight: 600; }
/* Ikonene sak og prat har fast hvit strek. Her skal de følge kategorifargen. */
.dk-ik svg[stroke="#fff"], .dk-plussik svg[stroke="#fff"] { stroke: var(--f); }
.dk-pluss.apen { transform: none; } .dk-pluss.apen svg { transform: rotate(45deg); } .dk-pluss svg { transition: transform .15s; }
/* Forslag 11: det som venter på deg haster. Rødt kort og pulserende tall, bare når noe venter. */
.dk-gruppe.haster .dk-kortet { background: color-mix(in srgb, var(--tall) 20%, var(--kort)); box-shadow: inset 0 0 0 1.5px var(--tall); }
.dk-gruppe.haster .dk-kortet .dk-ik { background: var(--tall); color: #fff; }
.dk-gruppe.haster .dk-t { font-size: 16px; font-weight: 700; } .dk-naa { display: block; color: var(--tall); font-size: 12.5px; font-weight: 650; }
.dk-gruppe.haster .dk-kortet strong { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; border-radius: 99px; background: var(--tall); color: #fff; font-size: 18px; animation: dk-haster 1.6s ease-in-out infinite; }
@keyframes dk-haster { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tall) 28%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dk-gruppe.haster .dk-kortet strong { animation: none; } }
.dk-gruppe.haster .dk-under .dk-t { color: var(--tekst); font-weight: 550; font-size: 14px; }

/* Planlegging av milepæler (oppgave 198): spørsmål på Hjem, merket i Plan og plansiden. */
.status.lilla { color: var(--lilla); background: var(--lilla-myk); }
.v-ik.lilla { background: var(--lilla-myk); color: var(--lilla); }
.slag.lilla { color: var(--lilla); }
.v-rad.sp .v-tittel { white-space: normal; } /* Hele spørsmålet synes, så du kan svare (Simon, oppgave 220). */
.v-valg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 12px 54px; margin-top: -4px; }
.v-valg .knapp { flex: none; height: 30px; padding: 0 13px; font-size: 14px; border-radius: 9px; }
.v-valg .knapp.lenkeknapp { padding: 0 6px; font-size: 14px; }
.v-rad.apen .v-valg { display: none; }
.sp-skjema { margin-top: 12px; }
.sp-valg { display: flex; flex-direction: column; gap: 8px; }
.sp-valg.rad { flex-direction: row; flex-wrap: wrap; }
.sp-valg.rad .knapp { flex: none; padding: 0 16px; }
.sp-valg .knapp.hel { place-items: center start; text-align: left; height: auto; min-height: 44px; padding: 10px 14px; line-height: 1.3; }
.sp-skjema .sp-annet { margin-top: 8px; padding: 4px 2px; }
.sp-under { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.knapp.fyll-ut { flex: none; color: var(--lilla); background: var(--lilla-myk); }
.knapp.fyll-ut svg { width: 14px; height: 14px; }
.mp-planlegges .lukket { color: inherit; text-decoration: none; }
.mp-planlegges .lukket .chevron { color: var(--tekst-3); }
.mp-fyll { padding: 0 16px 14px; margin-top: -4px; }
.planlegg-valg { margin-top: 0; }
.pl-hode { padding: 4px 20px 12px; }
.pl-tittel { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 0; line-height: 1.2; }
.pl-status-tekst { font-size: 18px; font-weight: 700; color: var(--lilla); letter-spacing: -0.01em; }
.pl-godkjent .pl-status-tekst { color: var(--gronn); }
.pl-godkjenning .pl-status-tekst { color: var(--aksent); }
.pl-ikke .pl-status-tekst { color: var(--tekst-2); }
.pl-under { font-size: 14px; color: var(--tekst-2); margin-top: 4px; line-height: 1.4; }
.pl-steg { list-style: none; display: flex; gap: 4px; margin: 14px 0 0; padding: 0; }
.pl-steg li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tekst-3); text-align: center; line-height: 1.2; }
.pl-steg .pl-prikk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--knapp-myk); color: var(--tekst-2); }
.pl-steg .pl-prikk svg { width: 12px; height: 12px; }
.pl-steg li.gjort { color: var(--tekst-2); }
.pl-steg li.gjort .pl-prikk { background: var(--gronn-myk); color: var(--gronn); }
.pl-steg li.naa { color: var(--tekst); font-weight: 650; }
.pl-steg li.naa .pl-prikk { background: var(--lilla); color: #fff; }
.pl-fyll { margin-top: 14px; }
.pl-sak { color: inherit; text-decoration: none; }
.pl-sak .navn { font-weight: 600; }
.pl-sak .u { font-size: 13px; margin-top: 2px; }
.pl-sp h3 { margin: 0; font-size: 16.5px; line-height: 1.35; }
.pl-sp .meta { margin-top: 4px; }
.pl-svar { margin-top: 10px; }
.pl-svar-rad { padding: 11px 16px; position: relative; }
.pl-svar-rad + .pl-svar-rad::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--linje); }
.pl-svar-sp { font-size: 14px; color: var(--tekst-2); line-height: 1.35; }
.pl-svar-tekst { font-size: 15px; font-weight: 600; margin-top: 2px; line-height: 1.35; white-space: pre-wrap; }
.pl-alle { padding: 0; font-size: 14px; }
.pl-oppg { position: relative; }
.pl-oppg + .pl-oppg::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--linje); }
.pl-oppg-hode { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.pl-oppg-hode:active, .pl-gruppe-hode:active { background: var(--kort-2); }
.pl-nr { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--lilla-myk); color: var(--lilla); }
.pl-oppg-tittel { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.pl-oppg-tall { display: block; font-size: 13px; color: var(--tekst-2); margin-top: 2px; }
.pl-pil { flex: none; color: var(--tekst-3); display: grid; place-items: center; transition: transform .15s; }
.pl-pil.ned { transform: rotate(90deg); }
.pl-oppg-innhold { padding: 0 14px 14px 50px; }
.pl-beskrivelse { font-size: 14px; line-height: 1.4; color: var(--tekst-2); margin-bottom: 8px; }
.pl-gruppe { margin-top: 6px; }
.pl-gruppe-hode { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; background: none; border: 0; text-align: left; color: var(--tekst); font: inherit; font-size: 13px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.pl-gruppe-hode .pl-pil svg { width: 6px; height: 10px; }
.pl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-regel, .pl-detalj { background: var(--kort-2); border-radius: 12px; padding: 9px 12px; font-size: 14.5px; line-height: 1.38; }
.pl-prove { font-size: 13px; color: var(--tekst-2); margin-top: 3px; }
.pl-detalj { display: flex; align-items: center; gap: 10px; }
.pl-detalj .knapp.pl-stryk { flex: none; height: 32px; padding: 0 12px; font-size: 14px; color: var(--rod); background: var(--kort); }
.pl-tom { font-size: 13.5px; padding: 4px 0 8px; }
.pl-oppg-innhold .mer-tekst { display: inline-block; margin-top: 10px; }
.tving { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

/* Alle er med i planleggingen (Simon, melding 1579, oppgave 212): "Øyvind svarte: X. Enig?" med Enig og Mitt svar,
   en lett rad "Planen for X lages" sist i Venter på deg, alle svarene på plansiden, og Innspill med mikrofon. */
.v-rad.enig .v-linje { white-space: normal; }
.v-info { display: block; color: inherit; text-decoration: none; }
.v-info .v-hode { padding-top: 9px; padding-bottom: 9px; }
.v-info .v-linje { white-space: normal; font-size: 13.5px; margin: 0; }
.v-info svg:last-child { flex: none; width: 15px; height: 15px; color: var(--tekst-3); }
.lages-alene { margin-top: 10px; }
.sp-mitt { margin-top: 14px; }
.pl-enig { margin-top: 8px; }
.pl-enig-knapper { margin: 0; gap: 8px; }
.pl-enig-knapper .knapp { flex: none; height: 32px; padding: 0 14px; font-size: 14px; }
.pl-innspill-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
/* Mikrofonen og "Legg ved bilder" i en rad under feltet (oppgave 224). */
.pl-innspill-verktoy { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.pl-innspill-skjema .mik { width: 40px; height: 40px; border-radius: 50%; background: var(--kort-2); color: var(--tekst-2); display: grid; place-items: center; border: 0; padding: 0; flex: none; }
.pl-innspill-skjema .mik[hidden] { display: none; }
.pl-innspill-skjema .mik svg { width: 20px; height: 20px; }
.pl-innspill-skjema .mik.tar-opp { background: var(--rod); color: #fff; animation: tale-puls 1.4s ease-out infinite; }
.pl-innspill-skjema .tekstfelt { width: 100%; }
.pl-innspill-rad .sak-bilder { margin-top: 6px; white-space: normal; }
.pl-mp-beskrivelse { margin-top: 8px; color: var(--tekst-2); font-size: 15px; line-height: 1.45; }
.pl-hode .sak-bilder { margin-top: 10px; }
.pl-innspill-skjema .knapper { margin-top: 8px; }
.pl-innspill-hjelp { margin-top: 8px; }
.pl-innspill-skjema .tale-linje { margin-left: 2px; }
.krav-varsel.pl-venter { margin: 12px 0 0; }
.pl-venter-paa { display: block; font-weight: 650; }
.pl-venter .pl-under { margin-top: 3px; color: inherit; opacity: .85; }
.v-rad.enig.apen .v-linje { display: none; }
.alt-tillegg { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }

/* Veiviseren "+ Planlegg" (oppgave 215, js/planlegg-veiviser.js): hele skjermen, ett spørsmål om gangen, stor tekst. */
.veiviser { min-height: 100dvh; display: flex; flex-direction: column; padding: var(--topp) 0 0; }
.vv-topp { display: flex; align-items: center; height: 54px; padding: 0 8px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.vv-plass { width: 110px; }
.vv-prikker { flex: 1; display: flex; justify-content: center; gap: 8px; }
.vv-prikk { width: 9px; height: 9px; border-radius: 50%; background: var(--linje-2); transition: width .2s, background .2s; }
.vv-prikk.gjort { background: var(--aksent); opacity: .5; }
.vv-prikk.naa { background: var(--aksent); width: 24px; border-radius: 5px; }
.vv-midt { flex: 1; padding: 20px 20px 16px; }
.vv-sporsmal { font-size: 30px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; margin: 8px 0 8px; }
.vv-under { margin: 0 0 18px; color: var(--tekst-2); font-size: 16px; line-height: 1.4; }
.vv-felt > .tekstfelt { width: 100%; }
.vv-verktoy { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.vv-verktoy .legg-ved { font-size: 16px; }
.vv-felt .bildevalg .vedlagt-rad { margin-top: 10px; }
.veiviser .vv-tekst { font-size: 19px; line-height: 1.4; min-height: 150px; padding: 12px 14px; }
.veiviser .vv-navn { font-size: 21px; font-weight: 600; height: 56px; padding: 0 14px; }
.vv-hjelp { margin: 10px 2px 0; color: var(--tekst-3); font-size: 14px; }
.vv-felt .mik { width: 48px; height: 48px; border-radius: 50%; background: var(--kort-2); color: var(--tekst-2); display: grid; place-items: center; border: 0; padding: 0; flex: none; }
.vv-felt .mik[hidden] { display: none; }
.vv-felt .mik svg { width: 24px; height: 24px; }
.vv-felt .mik.tar-opp { background: var(--rod); color: #fff; animation: tale-puls 1.4s ease-out infinite; }
.vv-felt .mik.starter { opacity: .7; }
.vv-felt .tale-linje { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; line-height: 1.35; color: var(--tekst-2); }
.vv-felt .tale-linje[hidden] { display: none; }
.vv-felt .tale-linje .tale-tekst { flex: 1; min-width: 0; }
.vv-felt .tale-linje .forelopig { color: var(--tekst-3); font-style: italic; }
.vv-bunn { position: sticky; bottom: 0; padding: 12px 20px calc(12px + var(--bunn)); background: var(--bg); display: flex; flex-direction: column; gap: 6px; margin: 0; }
body.tastatur .vv-bunn { padding-bottom: 12px; bottom: var(--tastatur, 0px); }
.vv-bunn .knapp.fylt { height: 54px; font-size: 18px; flex: none; }
.vv-bunn .vv-hopp { height: 44px; align-self: center; font-size: 16px; }
.vv-bunn .vv-hopp[hidden] { display: none; }
/* "+ Innspill" under den gule boksen på plansiden, og arket med feltet (oppgave 215). */
.pl-innspill-knapp { margin-top: 12px; }
.pl-innspill-knapp .knapp.myk { flex: none; height: 40px; background: var(--kort); color: var(--aksent); box-shadow: inset 0 0 0 1.5px var(--aksent); }
.pl-innspill-knapp .ikon-tekst { display: inline-flex; align-items: center; gap: 6px; }
.pl-innspill-knapp svg { width: 17px; height: 17px; }
.pl-innspill .pl-innspill-liste { margin-bottom: 0; }
.pl-innspill-ark .pl-innspill-skjema .knapper .knapp { flex: 1; }

/* Beskrivelsen på plansiden: to linjer med "Les mer" (oppgave 229) */
.pl-mp-beskrivelse.to-linjer { max-height: calc(2 * 1.45em); overflow: hidden; }
.mp-beskrivelse.to-linjer { max-height: calc(2 * 1.4em); overflow: hidden; padding-bottom: 0; }
.pl-mp-beskrivelse.to-linjer *, .mp-beskrivelse.to-linjer * { margin-top: 0; margin-bottom: 0; }
.mp-beskrivelse-boks > .mer-tekst { margin: 4px 16px 12px; }

/* Design under Mer (oppgave 197) */
.design-tittel { font-size: 20px; margin: 0 0 4px; }
.design-kort { padding: 14px 16px; }
.design-kort h3 { margin: 0 0 6px; font-size: 17px; }
.design-kort .knapp { margin-top: 10px; }
.design-poeng { margin: 8px 0 0; font-size: 14.5px; }

/* Filter og søk i Plan (oppgave 257): pillene ruller vannrett på smal skjerm, søkeikonet står fast til høyre. */
.plan-filter { display: flex; align-items: center; gap: 6px; padding: 12px 16px 0 0; }
.plan-filter .plan-filter-valg { flex: 1; min-width: 0; padding: 2px 4px 2px 16px; }
.plan-filter-valg button { display: inline-flex; align-items: center; gap: 6px; }
.plan-filter-valg .pille-tall { font-size: 12px; font-weight: 700; min-width: 18px; padding: 0 5px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--felt); color: var(--tekst-2); }
.plan-filter-valg button[aria-pressed="true"] .pille-tall { background: rgb(127 127 127 / .3); color: inherit; }
.sok-knapp { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--kort); color: var(--tekst-2); box-shadow: 0 0 0 1px var(--linje); }
.sok-knapp.pa { background: var(--tekst); color: var(--bg); box-shadow: none; }
.sok-knapp svg { width: 16px; height: 16px; }
.plan-sok { margin-top: 10px; }
.plan-treff { margin-top: 14px; }
.plan-treff .gruppe-tittel { padding: 0 4px 7px; }
.treff { display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: inherit; text-decoration: none; position: relative; }
.treff + .treff { border-top: 1px solid var(--linje); }
.treff .t { font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
.treff .u { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treff .u .svak { overflow: hidden; text-overflow: ellipsis; }
.treff .status { font-size: 12px; padding: 2px 8px; }
.treff > svg { flex: none; color: var(--tekst-3); }
.mp-filter .mp-hode .u { font-size: 13px; margin-top: 2px; }
.plan-filter-tomt .knapp { margin-top: 10px; }
/* Planlegg på nytt (oppgave 262): knappen nederst i milepælen, linja øverst mens den planlegges, veiviseren og plansiden. */
.mp-avslutt { gap: 18px; flex-wrap: wrap; }
.mp-avslutt a.knapp { text-decoration: none; }
.mp-avslutt .mp-planlegg-nytt { color: var(--lilla); font-weight: 600; }
.mp-paa-nytt { margin: 0 16px 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; background: var(--lilla-myk); color: var(--tekst); display: flex; gap: 8px; align-items: center; text-decoration: none; }
.mp-paa-nytt .chevron, .mp-paa-nytt svg { flex: none; width: 15px; height: 15px; color: var(--tekst-3); }
.vv-milepael { margin: 0 0 6px; }
.vv-mp-navn { font-size: 17px; font-weight: 650; color: var(--tekst-2); margin-top: 2px; line-height: 1.3; }
.pl-runde { margin-top: 12px; }
.pl-runde-hva { margin-top: 6px; font-size: 15px; line-height: 1.45; }
.pl-runde-ferdig { margin-top: 8px; font-size: 14px; color: var(--tekst-2); line-height: 1.4; }
.pl-runde .sak-bilder { margin-top: 10px; }
.pl-runde-hvem { margin-top: 8px; }
.pl-fra-for { padding: 2px 0; }
.pl-fra-rad, .pl-tidligere-rad { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: inherit; text-decoration: none; border-top: 1px solid var(--linje); font-size: 15px; }
.pl-fra-rad:first-child, .pl-tidligere-rad:first-child { border-top: 0; }
.pl-fra-rad svg, .pl-tidligere-rad svg { flex: none; width: 15px; height: 15px; color: var(--tekst-3); }
.pl-fra-hjelp { margin: 8px 4px 0; }
.pl-tidligere-rad .navn { font-weight: 600; }
.pl-tidligere-rad .u { font-size: 13px; margin-top: 2px; }