/* ==========================================================================
   OPPGAVER, skjermen (28. september 2026)

   Eget ark som hjerne.css og konsept.css, fordi lodd.css deles til to andre
   repoer, og ukelista er skallets egen. Bare det Lodd ikke har fra før står
   her: haken, radens deler, innleggingsradene, underoppgavene, segmentraden
   og ukehodet på smal skjerm. Ingen ny farge: segmentene og tokens er de samme
   som resten av skallet bruker, definert i begge temaer i lodd.css.
   ========================================================================== */

/* Tallet ved Oppgaver i menyen er grått, ikke amber som systemenes. En åpen
   oppgave er normaltilstanden, ikke noe som venter på inngripen. --ink-2 og
   ikke --ink-3: på 12px holdt det svakeste grå ikke 4,5 i kontrast. */
.sidemeny #oppgaver-tall { color: var(--ink-2); }

/* --- ukehodet ------------------------------------------------------------ */

#skjerm-oppgaver .opg-ukehode { align-items: center; }
/* .seksjon skyver en .pille ut til høyre. Merket «Arkiv» hører til datoene. */
#skjerm-oppgaver .opg-ukehode > .opg-merke { margin-left: 0; }
#skjerm-oppgaver .opg-styring {
  display: flex;
  align-items: center;
  /* Versjon 2: luft mellom gruppene, så Liste og Tavle, Status og Dag, og
     Mine og Alle leses som tre valg og ikke som ett kontrollpanel. */
  gap: var(--s-4);
  margin-left: auto;
}
#skjerm-oppgaver .opg-styring .ikonknapp[hidden] { display: none; }

/* Segmentraden. Et tredje nivå er en rad med knapper, aldri en meny
   (spes-navigasjon.md regel 2). */
/* Versjon 2: én fylt flate uten kant, og det valgte er et hvitt felt i
   den. Aldri ramme i ramme (spes-design-v2.md 2, regel 3). */
#skjerm-oppgaver .opg-seg {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 0;
  border-radius: var(--r-2);
  background: var(--flate-3);
}
#skjerm-oppgaver .opg-seg button {
  font: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  touch-action: manipulation;
}
#skjerm-oppgaver .opg-seg button[aria-pressed="true"] {
  background: var(--flate);
  color: var(--ink);
}
/* Med mus holder et menypunkts høyde. Med finger står 44 over. */
@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .opg-seg button { min-height: var(--menypunkt); }
}
#skjerm-oppgaver .opg-seg button:disabled { cursor: default; opacity: .5; }
/* Status og Dag skjules i tavla, og display over slår ellers hidden ut. */
#skjerm-oppgaver .opg-seg[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .opg-seg button:hover:not(:disabled) { color: var(--ink); }
}

/* Linjene under ukehodet: overført, tom uke, feil og kvittering. Samme
   innrykk som radene, så de ligger på linja og ikke ved siden av den. */
#skjerm-oppgaver .opg-linje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
  padding-left: 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-3);
}
#skjerm-oppgaver .opg-linje[hidden] { display: none; }
#skjerm-oppgaver .opg-linje.feilmelding { color: var(--rod); }
#skjerm-oppgaver .opg-linje.feilmelding:empty { display: none; }

/* --- gruppene ------------------------------------------------------------ */

/* Navnet på gruppa står i spalten og ikke i margen, med dagen eller datoen
   ved siden av og tallet til høyre, i mono. */
#skjerm-oppgaver .opg-gruppeboks { margin-bottom: var(--s-6); }
#skjerm-oppgaver .opg-gruppe { margin-bottom: var(--s-3); align-items: baseline; }
/* VERSJON 2: gruppa er et kort, navnet er hodet i kortet og radene ligger
   under det med en hårstrek imellom (spes-design-v2.md 4). */
#skjerm-oppgaver .opg-gruppeboks.kort { padding: 0 var(--s-2) var(--s-2); }
#skjerm-oppgaver .opg-gruppeboks.kort > .opg-gruppe {
  margin: 0;
  padding: var(--s-4) var(--s-3) var(--s-3);
  gap: var(--s-3);
}
#skjerm-oppgaver .opg-gruppeboks.kort .opg-rader > .opg-post:first-child .rad.oppgave,
#skjerm-oppgaver .opg-gruppeboks.kort .opg-rader > .opg-ny:first-child { border-top: 0; }
#skjerm-oppgaver .opg-gruppeboks.kort .opg-rader > .opg-ny:last-child,
#skjerm-oppgaver .opg-gruppeboks.kort .opg-rader > .opg-post:last-child:not(:has(.er-apen)) .rad.oppgave { border-bottom: 0; }
/* Ingen marg: dagen står i brikka og statusen i haken. Segmentet er igjen
   i koden, fordi dra og slipp leser det, men tegnes ikke. */
#skjerm-oppgaver .rad.oppgave .marg,
#skjerm-oppgaver .opg-ny .marg { display: none; }
#skjerm-oppgaver .rad.oppgave,
#skjerm-oppgaver .rad.opg-ny { border-radius: var(--r-2); }
#skjerm-oppgaver .rad.oppgave .inn,
#skjerm-oppgaver .opg-rader > .rad.opg-ny .inn { padding-left: var(--s-3); padding-right: var(--s-3); }
#skjerm-oppgaver .opg-gruppe > .etikett:first-child {
  width: auto;
  flex: 0 1 auto;
  margin-left: 0;
  padding-right: 0;
  text-align: left;
}
#skjerm-oppgaver .opg-antall {
  font-family: var(--font-mono);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
#skjerm-oppgaver .opg-fold { margin-left: var(--s-3); }
/* I dag står fram: gruppa øverst i dagvisningen får navnet i blekk og ikke
   i grått, så øyet lander der først. */
#skjerm-oppgaver [data-gruppe="idag"] .opg-gruppe > .etikett { color: var(--ink); }
#skjerm-oppgaver .opg-tomtekst { padding: var(--s-4) var(--s-3); text-align: left; }
/* Den tomme teksten står inne i gruppas kort, og får derfor ingen egen
   ramme eller flate: ramme i ramme er det versjon 2 tok bort. */
#skjerm-oppgaver .opg-gruppeboks.kort .opg-tomtekst { border: 0; box-shadow: none; background: none; }
#skjerm-oppgaver .opg-opplest {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#skjerm-oppgaver .opg-linje .knapp { margin-left: calc(-1 * var(--s-5)); }

/* --- raden --------------------------------------------------------------- */

/* Posten er raden og underoppgavene dens, så de flyttes sammen. Hårstreken
   over står bare på den første i gruppa, som i resten av skallet. */
#skjerm-oppgaver .opg-rader { position: relative; }
#skjerm-oppgaver .opg-post .rad.oppgave { border-top: 0; }
#skjerm-oppgaver .opg-rader > .opg-post:first-child .rad.oppgave,
#skjerm-oppgaver .opg-rader > .opg-ny:first-child { border-top: 1px solid var(--line); }
#skjerm-oppgaver .opg-post { transition: opacity var(--tid-2) var(--kurve-ut); }
#skjerm-oppgaver .opg-post.opg-gaar { opacity: 0; }
#skjerm-oppgaver .opg-post.opg-kom { animation: opg-kom var(--tid-3) var(--kurve) both; }
@keyframes opg-kom {
  from { opacity: 0; transform: translateY(calc(-1 * var(--s-2))); }
  to { opacity: 1; transform: none; }
}
#skjerm-oppgaver .opg-post.loftet .rad.oppgave { background: var(--flate); }

#skjerm-oppgaver .rad.oppgave {
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--tid-1) var(--kurve);
}
#skjerm-oppgaver .rad.oppgave:focus-visible { background: var(--flate-3); }
#skjerm-oppgaver .rad.oppgave[aria-current="true"] { background: var(--flate-3); }
#skjerm-oppgaver .rad.oppgave .inn { flex-wrap: nowrap; gap: var(--s-3); padding-top: var(--s-2); padding-bottom: var(--s-2); }
#skjerm-oppgaver .rad.oppgave { min-height: var(--s-8); }
/* Tittelen er den som gir plass. Med grunnlag 0 får den bare det som er
   igjen etter haken, brikka, eieren og knappene, så «Mer» aldri skyves ut
   av raden på 375 når brikka står der. */
#skjerm-oppgaver .rad.oppgave .vokser { flex: 1 1 0; min-width: 0; overflow: hidden; }
#skjerm-oppgaver .rad.oppgave .tittel { overflow-wrap: anywhere; cursor: text; }
/* Én linje under tittelen, som i Asana. Hele notatet står i ruta. */
#skjerm-oppgaver .rad.oppgave .under { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skjerm-oppgaver .rad.oppgave[data-status="ferdig"] .tittel { color: var(--ink-3); font-weight: 400; }

/* Redigering i raden: feltet har samme skrift og samme plass som teksten,
   så ingenting hopper når man klikker. */
#skjerm-oppgaver .tittel-felt {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-4);
  font-weight: 500;
  box-shadow: none;
  outline: none;
}
#skjerm-oppgaver .underoppgave .tittel-felt { font-size: var(--t-3); font-weight: 400; }

/* Håndtaket er seks prikker, pekerens sted å gripe. Det tar plass alltid og
   er usynlig til pekeren eller fokus kommer, så raden ikke hopper. */
#skjerm-oppgaver .handtak {
  flex: 0 0 16px;
  width: 16px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--tid-1) var(--kurve);
}
#skjerm-oppgaver .handtak svg { width: 16px; height: 16px; fill: currentColor; }
#skjerm-oppgaver .rad.oppgave:focus-within .handtak { opacity: 1; }

/* Haken. Ringen er 16px, trykkflata 44. Ett trykk er Ferdig: ringen fylles
   grønt og haken tegnes etter et lite opphold, så man ser den komme. */
#skjerm-oppgaver .hake {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
#skjerm-oppgaver .hake svg { width: 16px; height: 16px; overflow: visible; }
#skjerm-oppgaver .hake .ring {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: fill var(--tid-2) var(--kurve), stroke var(--tid-2) var(--kurve);
}
#skjerm-oppgaver .hake .halv { fill: var(--amber); opacity: 0; }
#skjerm-oppgaver .hake.jobbes { color: var(--amber); }
#skjerm-oppgaver .hake.jobbes .halv { opacity: 1; }
#skjerm-oppgaver .hake .strek {
  fill: none;
  stroke: var(--flate);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  transition: stroke-dashoffset var(--tid-3) var(--kurve) 60ms;
}
#skjerm-oppgaver .hake.er-ferdig { color: var(--gronn); }
#skjerm-oppgaver .hake.er-ferdig .ring { fill: var(--gronn); stroke: var(--gronn); }
#skjerm-oppgaver .hake.er-ferdig .strek { stroke-dashoffset: 0; }
#skjerm-oppgaver .hake.liten svg { width: 14px; height: 14px; }

/* Undermerket: pil, 2/5 i mono og en framdriftsstrek. Det kan ikke
   forveksles med noe annet i raden, og sier både «har under» og «hvor
   langt». */
#skjerm-oppgaver .undermerke {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-1);
  cursor: pointer;
}
#skjerm-oppgaver .undermerke .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#skjerm-oppgaver .undermerke .pil { display: inline-flex; transition: transform var(--tid-2) var(--kurve); }
#skjerm-oppgaver .undermerke .pil svg { width: 12px; height: 12px; }
#skjerm-oppgaver .undermerke.er-apen .pil { transform: rotate(90deg); }

/* Eieren er et menneske: den runde avataren fra Lodd (.avatar.person), fylt
   i personfargen som i Asana. Fram til 29. september 2026 var den en ring,
   og Theodor syntes lista var steril. Farge er informasjon, og her er
   informasjonen hvem. Det samme i raden, på kortet og ved kommentarene. */
#skjerm-oppgaver .rad.oppgave .dagbrikke { flex: 0 0 auto; }

/* Radknappene: Velg dag, Bytt eier og Mer. De tar plass alltid og er bare
   usynlige, så en rad aldri endrer bredde ved hover. */
#skjerm-oppgaver .radknapper { flex: 0 0 auto; display: inline-flex; gap: var(--s-1); }
#skjerm-oppgaver .radknapper .ikonknapp { border-color: transparent; background: none; box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .rad.oppgave:hover { background: var(--flate-2); }
  #skjerm-oppgaver .rad.oppgave:hover .handtak { opacity: 1; }
  #skjerm-oppgaver .radknapper { opacity: 0; transition: opacity var(--tid-1) var(--kurve); }
  #skjerm-oppgaver .rad.oppgave:hover .radknapper,
  #skjerm-oppgaver .rad.oppgave:focus-within .radknapper { opacity: 1; }
  #skjerm-oppgaver .radknapper .ikonknapp:hover { background: var(--flate); border-color: var(--line-2); }
  #skjerm-oppgaver .hake:hover .ring { stroke: var(--gronn); }
  #skjerm-oppgaver .undermerke:hover { border-color: var(--line-2); background: var(--flate); }
  #skjerm-oppgaver .opg-und-slett { opacity: 0; transition: opacity var(--tid-1) var(--kurve); }
  #skjerm-oppgaver .rad.underoppgave:hover .opg-und-slett,
  #skjerm-oppgaver .rad.underoppgave:focus-within .opg-und-slett { opacity: 1; }
}
/* På berøring er det ingen hover å vise knappene med. Da står bare «Mer»,
   og «Flytt til …» i den menyen er hovedveien. */
@media (hover: none), (pointer: coarse) {
  #skjerm-oppgaver .handtak { display: none; }
  #skjerm-oppgaver .radknapper .rk-dag,
  #skjerm-oppgaver .radknapper .rk-eier { display: none; }
}

/* --- innleggingsradene --------------------------------------------------- */

#skjerm-oppgaver .opg-ny { min-height: 44px; }
#skjerm-oppgaver .opg-ny .inn { gap: var(--s-3); padding-top: 0; padding-bottom: 0; }
#skjerm-oppgaver .opg-pluss {
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}
#skjerm-oppgaver .opg-pluss svg { width: 16px; height: 16px; }
#skjerm-oppgaver .opg-ny input.hopp-felt {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
#skjerm-oppgaver .opg-ny input.hopp-felt::placeholder { color: var(--ink-3); }
#skjerm-oppgaver .opg-ny:focus-within { background: var(--flate-2); }
#skjerm-oppgaver .opg-ny:focus-within .opg-pluss { color: var(--ink); }

/* --- underoppgavene ------------------------------------------------------ */

/* Folding med høyden fra 0fr til 1fr. Det er unntaket fra «bare transform
   og opacity»: det finnes ingen transform for høyde. */
#skjerm-oppgaver .opg-underliste {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tid-3) var(--kurve);
}
#skjerm-oppgaver .opg-underliste.er-apen { grid-template-rows: 1fr; }
/* Den loddrette hårstreken langs innrykket binder underoppgavene til
   forelderen, så en utfoldet liste aldri leses som fem oppgaver. */
#skjerm-oppgaver .opg-underinnhold {
  min-height: 0;
  overflow: hidden;
  margin-left: var(--s-8);
  border-left: 1px solid var(--line-2);
}
#skjerm-oppgaver .opg-underliste.er-apen .opg-underinnhold { margin-bottom: var(--s-2); }
#skjerm-oppgaver .rad.underoppgave,
#skjerm-oppgaver .opg-und-ny { min-height: 36px; border: 0; }
#skjerm-oppgaver .rad.underoppgave .inn,
#skjerm-oppgaver .opg-und-ny .inn { gap: var(--s-3); padding: 0 0 0 var(--s-3); }
#skjerm-oppgaver .rad.underoppgave .tittel { font-size: var(--t-3); font-weight: 400; cursor: text; }
#skjerm-oppgaver .rad.underoppgave[data-ferdig] .tittel { color: var(--ink-3); }
#skjerm-oppgaver .opg-und-ny input.hopp-felt { min-height: 36px; font-size: var(--t-3); }
#skjerm-oppgaver .opg-und-slett { border-color: transparent; background: none; box-shadow: none; }

/* --- ruta ---------------------------------------------------------------- */

#skjerm-oppgaver .opg-felt { margin: 0 0 var(--s-5); }
#skjerm-oppgaver .opg-felt > .etikett { display: block; margin-bottom: var(--s-2); }
#skjerm-oppgaver .opg-felt input,
#skjerm-oppgaver .opg-felt textarea { width: 100%; }
#skjerm-oppgaver .opg-felt textarea { resize: vertical; min-height: 64px; }
/* Eieren er to like brikker med avatar ved siden av hverandre. Før var den
   valgte en fylt flate og den andre løs tekst under, og så ut som ett valgt
   og ett glemt (spes-design-v2.md 1.3). */
#skjerm-oppgaver .opg-personer { display: flex; flex-wrap: wrap; gap: var(--s-3); }
#skjerm-oppgaver .opg-personer .person-rad {
  width: auto;
  flex: 1 1 0;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border: 1px solid transparent;
  background: var(--flate-2);
  color: var(--ink-2);
}
#skjerm-oppgaver .opg-personer .person-rad .navn { font-weight: 500; }
#skjerm-oppgaver .opg-personer .person-rad[aria-pressed="true"] { background: var(--brand-svak); border-color: var(--brand-tekst); color: var(--ink); }
#skjerm-oppgaver .opg-arkivlinje { margin: 0 0 var(--s-5); color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-oppgaver .opg-historikk { margin: 0 0 var(--s-6); }
#skjerm-oppgaver .opg-historikk .rad:first-of-type { border-top: 0; }
#skjerm-oppgaver .opg-historikk .rad { min-height: 36px; }
#skjerm-oppgaver .opg-historikk .rad .marg { padding-top: var(--s-3); }
#skjerm-oppgaver .opg-historikk .rad .inn { padding: var(--s-2) 0 var(--s-2) var(--inn); }
#skjerm-oppgaver .opg-historikk .tittel { font-size: var(--t-3); font-weight: 400; }
/* EN TOM TILSTAND I RUTA ER EN LINJE, IKKE EN BOKS. .seksjon-tom i lodd.css
   er et kort, og det er riktig på en skjerm. I ruta ble «Ingen kommentarer
   ennå» en tom ramme med fire ord sentrert i kanten, oppå flaten ruta alt
   er (skjermbildet 5. oktober 2026). Den gamle regelen tok bare bort
   luften, så boksen ble stående og klemte teksten mot kanten. Her er den en
   rolig grå linje i samme innrykk som innholdet under overskriften. */
#skjerm-oppgaver .rute > .rute-kropp .seksjon-tom {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}

/* --- tavla --------------------------------------------------------------- */
/* Tre kolonner på --flate-2 med kortene hvite oppå, som i prøven. Versjon 2 har ingen
   loddlinje i skallet, så tavla starter der overskriften starter. */
#skjerm-oppgaver .tavle {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-left: 0;
  padding-bottom: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* Kolonnene deler bredden, og krymper aldri under --kolonne-bredde. Med
   margen borte får alle tre plass på 1280 (spes-design-v2.md 1.4). */
#skjerm-oppgaver .kolonne {
  flex: 1 0 var(--kolonne-bredde);
  width: auto;
  margin-bottom: 0;
  padding: var(--s-3);
  border-radius: var(--r-3);
  background: var(--flate-2);
}
#skjerm-oppgaver .kolonne-hode {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-1) var(--s-3);
}
#skjerm-oppgaver .kolonne-hode .etikett { font-size: var(--t-3); line-height: var(--t-3-h); font-weight: 600; color: var(--ink); letter-spacing: 0; }
#skjerm-oppgaver .kolonne-kort {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: var(--s-8);
}
#skjerm-oppgaver .kolonne-tom { padding: var(--s-4) var(--s-2); }
/* Den tomme kolonna blir en slippsone mens noe holdes, og viker for
   plassholderen når pekeren står over den. */
#skjerm-oppgaver .drar .kolonne-tom {
  outline: 1px dashed var(--line-2);
  outline-offset: calc(-1 * var(--s-1));
  border-radius: var(--r-2);
  min-height: var(--s-8);
  color: transparent;
}
#skjerm-oppgaver .kolonne-kort:has(> [data-plass]) > .kolonne-tom { display: none; }

/* Kortet. Kanten bærer det, ingen skygge i ro, og hover gir en mørkere
   kant og ikke et løft: løftet er forbeholdt det som dras. */
#skjerm-oppgaver .kort.oppgave {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* Høyde etter innholdet, som kortene i prøven (spes-design-v2.md 1.4). */
  padding: var(--s-3);
  cursor: pointer;
  transition: border-color var(--tid-1) var(--kurve);
}
#skjerm-oppgaver .kort.oppgave.opg-kom { animation: opg-kom var(--tid-3) var(--kurve) both; }
#skjerm-oppgaver .kort.oppgave[aria-current="true"] { border-color: var(--ink-3); }
#skjerm-oppgaver .kort-topp {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-right: var(--s-5);
}
/* To linjer, så klippes den tredje med ellipse. */
#skjerm-oppgaver .kort-topp .tittel {
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  font-weight: 500;
  color: var(--ink);
  cursor: text;
}
#skjerm-oppgaver .kort-topp .tittel-felt { flex: 1 1 0; font-size: var(--t-4); }
/* Én til to linjer av notatet, i grått under navnet. */
#skjerm-oppgaver .kort-notat {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-3);
}
#skjerm-oppgaver .kort.oppgave[data-status="ferdig"] .tittel { color: var(--ink-3); font-weight: 400; }
#skjerm-oppgaver .kort-bunn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
#skjerm-oppgaver .kort-bunn .avatar { margin-left: auto; }
#skjerm-oppgaver .kort-bunn .undermerke { min-height: 0; padding: 0; cursor: inherit; }
#skjerm-oppgaver .kort-uka { font-size: var(--t-1); font-variant-numeric: tabular-nums; }
#skjerm-oppgaver .kort-mer {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  border-color: transparent;
  background: var(--flate);
  box-shadow: none;
}
/* Med en finger, og på et smalt vindu, er Mer en ekte flate på 44 i hjørnet
   av kortet og ikke 32 med et usynlig lag: laget stakk over kanten av
   kortet, og der lå kolonnen over det (nettleserprøven, 29. september
   2026, 375 i mørkt tema). */
@media (hover: none), (pointer: coarse), (max-width: 599px) {
  #skjerm-oppgaver .kort-mer { top: 0; right: 0; width: 44px; height: 44px; z-index: 1; background: none; }
  #skjerm-oppgaver .kort-mer::after { content: none; }
  #skjerm-oppgaver .kort-topp { padding-right: var(--s-7); }
}
/* Innleggingsrada som kort: en stiplet kant sier «her kommer det noe». */
/* Ikke et .kort: det er en plass for et kort, uten skygge. */
#skjerm-oppgaver .opg-ny-kort {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-3);
  background: transparent;
}
#skjerm-oppgaver .opg-ny-kort:focus-within { background: var(--flate); border-style: solid; }

@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .kort.oppgave:hover { border-color: var(--line-2); }
  #skjerm-oppgaver .kort-mer { opacity: 0; transition: opacity var(--tid-1) var(--kurve); }
  #skjerm-oppgaver .kort.oppgave:hover .kort-mer,
  #skjerm-oppgaver .kort.oppgave:focus-within .kort-mer { opacity: 1; }
  #skjerm-oppgaver .kort-mer:hover { border-color: var(--line-2); }
}

/* --- ruta: underoppgaver og kommentarer ---------------------------------- */

#skjerm-oppgaver .opg-bolk { margin-bottom: var(--s-6); }
#skjerm-oppgaver .opg-bolk-hode {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
#skjerm-oppgaver .opg-bolk-hode .hva {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
#skjerm-oppgaver .opg-bolk-tall {
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
/* Ferdige underoppgaver blir stående der de er, i grått: rekkefølgen er
   arbeidsrekkefølge. */
/* Alle radene i ruta er like høye, også den man legger til i: innleggingsrada
   sto 36 mellom rader på 44, og trappa var synlig nederst i bolken. */
#skjerm-oppgaver .opg-r-under .rad.underoppgave,
#skjerm-oppgaver .opg-r-under .opg-und-ny { min-height: 44px; }
/* Pluss og felt på samme linje også på 375: feltet tar det som er igjen. */
#skjerm-oppgaver .opg-r-under .inn { flex-wrap: nowrap; }
#skjerm-oppgaver .opg-r-under .opg-und-ny input.hopp-felt { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; }
#skjerm-oppgaver .opg-r-under input.opg-r-und-felt {
  flex: 1 1 0;
  min-width: 0;
  /* Hele radhøyden, så en finger treffer navnet og ikke kanten rundt det. */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-3);
}
#skjerm-oppgaver .opg-r-under .rad.underoppgave[data-ferdig] input.opg-r-und-felt { color: var(--ink-3); }
#skjerm-oppgaver .opg-r-teller { margin-left: auto; font-size: var(--t-2); white-space: nowrap; }

#skjerm-oppgaver .opg-traad {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
/* Linja står rett under etiketten «Kommentarer», som har --s-2 under seg.
   --s-1 på toppen gjør at teksten ikke klistrer seg til den. */
#skjerm-oppgaver .opg-traad .seksjon-tom { padding: var(--s-1) 0 0; }
#skjerm-oppgaver .opg-kommentar {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
#skjerm-oppgaver .opg-kommentar > .vokser { flex: 1 1 0; min-width: 0; }
#skjerm-oppgaver .opg-kommentar.opg-kom { animation: opg-kom var(--tid-3) var(--kurve) both; }
#skjerm-oppgaver .opg-kom-hode {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
}
#skjerm-oppgaver .opg-kom-hode .navn { font-size: var(--t-3); font-weight: 600; color: var(--ink); }
#skjerm-oppgaver .opg-kom-hode .svak { font-size: var(--t-1); font-variant-numeric: tabular-nums; }
#skjerm-oppgaver .opg-kom-slett { flex: 0 0 auto; margin-top: calc(-1 * var(--s-3)); }
#skjerm-oppgaver .opg-kom-tekst {
  margin: var(--s-1) 0 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
#skjerm-oppgaver .opg-kom-skjema {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}
/* SKRIVEFELTET ER LIKE HØYT SOM SEND (44), OG TEKSTEN STÅR MIDT I DET.
   Felles feltregel gir padding bare til sidene, så ett ord lå klistret til
   toppkanten av et felt som var høyere enn linja. 26 + 8 + 8 + 2 kant = 44,
   altså er luften over og under teksten like stor som gulvet krever.
   Feltet vokser til seks linjer; grensen står her, så
   tilpassKommentarfelt i oppgaver.js bare leser den og aldri gjetter. */
#skjerm-oppgaver .opg-kom-skjema textarea {
  flex: 1 1 0;
  min-height: 44px;
  max-height: calc(var(--t-5-h) * 6 + var(--s-3) * 2 + 2px);
  padding: var(--s-3) var(--s-4);
  line-height: var(--t-5-h);
  resize: none;
  overflow-y: hidden;
}
@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .opg-kom-slett { opacity: 0; transition: opacity var(--tid-1) var(--kurve); }
  #skjerm-oppgaver .opg-kommentar:hover .opg-kom-slett,
  #skjerm-oppgaver .opg-kom-slett:focus-visible { opacity: 1; }
}

/* --- smal skjerm --------------------------------------------------------- */

/* Ukehodet bryter til flere linjer: uka og datoene først, pilene og de to
   segmentradene under. Ingen vannrett rulling på 375. Margen er for smal
   til dagen, så den står bare i brikka. */
@media (max-width: 599px) {
  #skjerm-oppgaver .opg-styring { flex: 1 0 100%; flex-wrap: wrap; justify-content: space-between; margin-left: 0; row-gap: var(--s-3); }
  /* Pilene holder Mine og Alle mellom seg, og Status eller Dag får egen
     linje under. Ellers ble forrige og neste uke delt på to linjer. */
  #skjerm-oppgaver .opg-gruppering,
  #skjerm-oppgaver .opg-visning { order: 3; }
  /* Én kolonne om gangen, og den neste skimtes til høyre, så det er
     tydelig at tavla fortsetter. */
  #skjerm-oppgaver .tavle { scroll-snap-type: x mandatory; }
  #skjerm-oppgaver .kolonne {
    flex-basis: calc(100% - var(--s-7));
    width: auto;
    scroll-snap-align: start;
  }
  #skjerm-oppgaver .rad.oppgave .inn { gap: var(--s-2); }
  #skjerm-oppgaver .undermerke .framdrift-strek { display: none; }
  #skjerm-oppgaver .opg-underinnhold { margin-left: var(--s-7); }
  #skjerm-oppgaver .radknapper .rk-dag,
  #skjerm-oppgaver .radknapper .rk-eier { display: none; }
  #skjerm-oppgaver .radknapper { opacity: 1; }
  /* På telefon er fingeren målet: 44 px, som resten av skallet. */
  #skjerm-oppgaver .radknapper .ikonknapp,
  #skjerm-oppgaver .opg-und-slett { width: 44px; height: 44px; }
}