/* Tavlen, kortet, listen, Vigtigst nu, søgning og den stående linje. Bygger på
   app.css og tokens.css: samme flader, samme radius. Stilstand er en tynd farvet
   kant til venstre på kortet (gul, rød), frist i ord med farve efter niveau, og
   små runde mærker for det, assistenten er i gang med. Under 720 px bliver
   kolonnerne til faner med swipe; fra 1000 px lægger kortet sig som et panel til
   højre for tavlen.

   Kortet bærer desuden prioriteringens ring, pulsen ved stilstand, glasset og
   dagens frø. Reglerne for dem står, hvor de håndhæves, længere nede under
   "Ringen om kortet", "Glasset" og "Dagens frø". */

/* ---- Hoved med faner mellem Tavle, Liste og Vigtigst nu ---- */
.tavle-hoved {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.tavle-visninger { display: flex; gap: 0.25rem; }
.tavle-visninger a {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  color: var(--tekst-svag);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.925rem;
  transition: color var(--overgang), background-color var(--overgang);
}
.tavle-visninger a:hover { color: var(--tekst); background: var(--flade-2); }
.tavle-visninger a.aktiv { color: var(--accent); background: var(--accent-bg); }

/* ---- Kolonnerne ---- */
/* Tavlen er flex og ikke et gitter, fordi enhver af de fem kolonner kan foldes sammen:
   en foldet kolonne fylder kun sin egen bredde, og de øvrige deler resten af pladsen.
   Med et gitter skulle rækken af søjlebredder skrives om for hver kombination af foldede
   kolonner, og en bredde sat inline er alligevel forbudt af sikkerhedsreglerne. */
/* BREDDEN: tavlen tager den plads, der er, men ikke mere end den kan bruge.
   Kolonnerne deler pladsen ligeligt op til --bredde-tavle; derover står tavlen
   midt på skærmen. Loftet er sat, så fem kolonner lander på cirka 420 px, og et
   kort dermed på en bredde, en titel stadig kan læses i ét blik. Uden loftet
   blev et kort 500 px bredt på en 2560 px skærm og linjen umulig at scanne. */
.tavle {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  max-width: var(--bredde-tavle);
  margin-inline: auto;
}
.kolonne {
  flex: 1 1 0;
  min-width: 190px;
  /* Er fire kolonner foldet sammen, må den femte ikke brede sig over hele skærmen. */
  max-width: 480px;
  background: var(--flade-2);
  border-radius: var(--radius);
  padding: 0.6rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* En foldet kolonne bliver en smal søjle i siden. Pointen med folden er, at de andre
   kolonner får pladsen; foldede man kun på højden, blev der ingenting vundet. */
.kolonne.foldet { flex: 0 0 auto; min-width: 0; }
/* Mens et kort trækkes, siger den stiplede kant, at en foldet kolonne ikke tager imod. */
.tavle.traekker .kolonne.foldet { border: 1px dashed var(--linje); opacity: 0.7; }
.kolonne.foldet {
  min-height: 0;
  align-self: stretch;
  padding: 0.5rem 0.3rem;
  align-items: center;
}
.kolonne.foldet .kolonne-liste, .kolonne.foldet .kolonne-tom, .kolonne.foldet .nyt-kort-knap { display: none; }
.kolonne.foldet .kolonne-hoved { flex-direction: column; align-items: center; gap: 0.5rem; }
.kolonne.foldet .kolonne-hoved h2 { writing-mode: vertical-rl; order: 3; }
.kolonne.foldet .kolonne-antal { order: 2; }
.kolonne.foldet .fold-knap { order: 1; }
.kolonne-hoved { display: flex; align-items: center; gap: 0.4rem; }
.kolonne-hoved h2 { font-size: 0.95rem; }
.kolonne-antal {
  color: var(--tekst-svag);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--flade);
  border-radius: 999px;
  padding: 0 0.45rem;
  line-height: 1.4;
}
.fold-knap {
  margin-left: auto;
  white-space: nowrap;
  background: none;
  border: none;
  color: var(--tekst-svag);
  font-size: 1.1rem;
  line-height: 1.2;
  cursor: pointer;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius);
}
.fold-knap:hover { color: var(--tekst); background: var(--flade); }
.fold-knap:disabled { opacity: 0.4; cursor: default; }
.fold-knap:disabled:hover { color: var(--tekst-svag); background: none; }
.kolonne-liste { display: flex; flex-direction: column; gap: 0.5rem; min-height: 48px; flex: 1; }
.kolonne-tom { font-size: 0.8rem; padding: 0.25rem 0.2rem; pointer-events: none; }

/* "Nyt kort" øverst i Indbakke og To-do. */
.nyt-kort-knap { width: 100%; padding: 0.4rem 0.6rem; font-size: 0.9rem; border-style: dashed; }
.nyt-kort-felt input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
  box-shadow: 0 0 0 3px var(--accent-bg);
  outline: none;
}
.nyt-kort-felt .hjaelp { font-size: 0.78rem; margin-top: 0.25rem; }
.nyt-kort-felt .besked { margin-top: 0.4rem; }

/* ---- Kortbrikken ---- */
/* ---- GLASSET ----
   Sheen og lysstrøg ligger som baggrundslag på selve kortet, og der er INTET
   backdrop-filter her. Med fyrre kort på skærmen ville det være fyrre
   slørings-lag, der skal genberegnes ved hver scroll — og forskellen kan ikke
   ses ved siden af hinanden, kun mærkes i rulningen. Det rigtige glas sidder på
   det, der er ét ad gangen: kortpanelet og assistentpanelet (nederst i filen).
   Begge lag er tokens, fordi de siger noget forskelligt i de to temaer: mørkt
   får lysstrøget i overkanten, lyst får en papirgradient og intet strøg. */
.kort-brik {
  position: relative;
  background: var(--flade);
  background-image: var(--glas-stroeg), var(--glas-sheen);
  background-repeat: no-repeat;
  background-size: 72% 1px, auto;
  background-position: 50% 0, 0 0;
  border: 1px solid var(--linje);
  border-left: 3px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge-kort);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color var(--overgang);
  /* Ringens styrke: mærket sætter basis, temaet sætter faktoren. */
  --glod-basis: 0;
  --glod-styrke: calc(var(--glod-basis) * var(--glod-faktor));
}
.kort-brik:hover, .kort-brik:focus-visible { border-color: var(--accent); outline: none; }
.kort-brik.stilstand-gul { border-left-color: var(--advar); }
.kort-brik.stilstand-roed { border-left-color: var(--fejl); }

/* ---- RINGEN OM KORTET: mærket som farve, stilstanden som puls ----
   Fire farver, ét pr. Eisenhower-felt, og de samme fire farver på matricens
   felter, så et kort ser ens ud i begge visninger. Styrken falder med, hvor
   meget feltet kræver af hende: Gør nu lyser tydeligst, Overvej at lukke
   svagest — det er dét, hun må lade ligge.

   Er prioriteringen slået fra, sender serveren intet mærke, kortet får ingen
   kvadrant-klasse, og så findes ::after slet ikke: et kort begynder ikke at
   lyse for en, der ikke har bedt om prioritering. Det er også grunden til, at
   ringen kun står under de fire klasser og ikke på .kort-brik med opacity 0 —
   fyrre umærkede kort skal ikke have hvert sit ekstra lag at tegne.

   Farven bærer hastværk, pulsen bærer stilstand: to oplysninger i samme kant.
   Tærsklerne (gul, rød) er serverens; her afgør de kun tempoet. */
.kort-brik.kvadrant-goer_nu { --glod: rgb(var(--kv-goer_nu-rgb)); --glod-basis: 0.95; }
.kort-brik.kvadrant-planlaeg { --glod: rgb(var(--kv-planlaeg-rgb)); --glod-basis: 0.72; }
.kort-brik.kvadrant-giv_videre { --glod: rgb(var(--kv-giv_videre-rgb)); --glod-basis: 0.72; }
.kort-brik.kvadrant-overvej_at_lukke { --glod: rgb(var(--kv-overvej_at_lukke-rgb)); --glod-basis: 0.34; }
.kort-brik.kvadrant-goer_nu::after,
.kort-brik.kvadrant-planlaeg::after,
.kort-brik.kvadrant-giv_videre::after,
.kort-brik.kvadrant-overvej_at_lukke::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--glod), var(--glod-lag-1) var(--glod), var(--glod-lag-2) var(--glod);
  opacity: var(--glod-styrke);
  transition: opacity 0.3s ease;
}
.kort-brik.kvadrant-goer_nu.stilstand-gul::after,
.kort-brik.kvadrant-planlaeg.stilstand-gul::after,
.kort-brik.kvadrant-giv_videre.stilstand-gul::after,
.kort-brik.kvadrant-overvej_at_lukke.stilstand-gul::after { animation: glod-puls 3.6s ease-in-out infinite; }
.kort-brik.kvadrant-goer_nu.stilstand-roed::after,
.kort-brik.kvadrant-planlaeg.stilstand-roed::after,
.kort-brik.kvadrant-giv_videre.stilstand-roed::after,
.kort-brik.kvadrant-overvej_at_lukke.stilstand-roed::after { animation: glod-puls 2.4s ease-in-out infinite; }
/* Kun opacity ændrer sig, så browseren kan lade det køre på grafikkortet uden at
   tegne kortet om for hvert billede. Bunden er en token, fordi en ring på hvidt
   må falde mindre for stadig at kunne ses. */
@keyframes glod-puls {
  0%, 100% { opacity: var(--glod-styrke); }
  50% { opacity: calc(var(--glod-styrke) * var(--puls-bund)); }
}
.kort-brik-hoved { display: flex; align-items: flex-start; gap: 0.4rem; }
.kort-brik-titel { font-weight: 500; flex: 1; overflow-wrap: anywhere; }
.kort-brik-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--tekst-svag);
}
.kort-brik-projekt { font-weight: 500; }
.kort-brik-spoegelse { opacity: 0.35; }
.kort-brik-valgt { border-color: var(--accent); }

/* Frist i ord, farvet efter niveau. */
.frist-overskredet { color: var(--fejl); font-weight: 500; }
.frist-idag { color: var(--advar); font-weight: 500; }
.stilstand-tekst.stilstand-gul { color: var(--advar); }
.stilstand-tekst.stilstand-roed { color: var(--fejl); }

/* Små mærker: assistenten arbejder, venter på ja, privat. */
.maerke {
  display: inline-flex;
  align-items: center;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.maerke-ai-venter_paa_ja { background: var(--advar-bg); color: var(--advar); font-weight: 600; }
/* Mens assistenten arbejder, puster prikken på mærket roligt, og en tynd linje glider hen
   over kortets overkant, så det kan ses på afstand, hvilket kort der sker noget på.
   "Venter på dit ja" står derimod stille i gult: det er noget, hun skal gøre noget ved,
   ikke noget, der bare kører. Med prefers-reduced-motion står begge stille. */
.maerke-ai-arbejder::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.35rem;
  animation: ai-puls 1.8s ease-in-out infinite;
}
/* Linjen holder sig selv inden for kortets kant: den starter 6 px inde og
   rejser 200 % af sin egen bredde, hvilket lander den 6 px fra højre kant på
   ethvert kort bredere end 120 px. Før klippede kortet den med overflow: hidden,
   og det kan det ikke længere — frøen skal kunne hænge ud over overkanten. */
.kort-brik.ai-arbejder::before, .kort-brik.ai-venter::before {
  content: '';
  position: absolute;
  top: 0; left: 6px;
  height: 2px;
  border-radius: 0 0 2px 2px;
}
.kort-brik.ai-arbejder::before {
  width: 30%;
  background: var(--accent);
  animation: ai-linje 1.8s ease-in-out infinite;
}
.kort-brik.ai-venter::before { right: 6px; width: auto; background: var(--advar); }
@keyframes ai-puls {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes ai-linje {
  0% { transform: translateX(0); }
  100% { transform: translateX(200%); }
}
@media (prefers-reduced-motion: reduce) {
  .maerke-ai-arbejder::before { animation: none; opacity: 1; }
  .kort-brik.ai-arbejder::before { animation: none; width: auto; right: 6px; }
}

/* ---- DAGENS FRØ ----
   Et fotografi, ikke en tegning, og Nikolajs eget. Figuren er sat, så kortets
   overkant rammer den dér, hvor kroppen slipper og benene begynder:
   top = -0,58 × højden. Dét tal er målt, ikke gættet — ved 56 % af figurens
   højde er den ét sammenhængende stykke (kroppen), ved 60 % er den fem (de
   fire ben og en tå). Kroppen hviler derfor PÅ kanten, og tæerne krummer ned
   over kortets forside. Derfor viger titlen også for dem.

   Kortet ovenover må ikke få frøen i hovedet, og luften findes to steder, fordi
   de to tilfælde er forskellige: står frøen først, får hele listen luft i toppen,
   så kortene i en række i matricen stadig står på linje; står den længere nede,
   tager kortet selv sin luft med. Ingen kolonne står med tom top for en frø, der
   ikke er der. */
.kolonne-liste:has(> .har-froe:first-child),
.matrix-liste:has(> .har-froe:first-child),
.gruppe-kort:has(> .har-froe:first-child) { padding-top: var(--froe-luft); }
.kort-brik.har-froe:not(:first-child) { margin-top: var(--froe-luft); }
.kort-brik.har-froe .kort-brik-titel { padding-right: 50px; }
.kort-froe {
  position: absolute;
  right: 14px;
  top: calc(var(--froe-h) * var(--froe-op));
  width: 58px;
  height: var(--froe-h);
  pointer-events: none;
  z-index: 3;
  filter: var(--froe-skygge);
  transform-origin: 50% 100%;
  animation: froe-aande 4.2s ease-in-out infinite;
}
.kort-froe span {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.kort-froe-aaben { background-image: url(/froe-aaben.webp); }
.kort-froe-lukket { background-image: url(/froe-lukket.webp); opacity: 0; }
@keyframes froe-aande {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.016, 1.028); }
}
/* BLINKET: to fotos, der er ens overalt undtagen øjnene, skiftes ud på ca.
   180 ms. Den blege hinde er frøens nikterende membran — dét er, hvad en frø
   faktisk lukker. Fire blink pr. 26 sekunder, hvoraf ét er dobbelt: et blink på
   slaget ser mekanisk ud, og uregelmæssigheden er hele pointen. */
.kort-froe-lukket { animation: froe-blink 26s linear infinite; }
@keyframes froe-blink {
  0%, 15.6% { opacity: 0; }
  15.8%, 16.5% { opacity: 1; }
  16.7%, 44.6% { opacity: 0; }
  44.8%, 45.5% { opacity: 1; }
  45.7%, 46.8% { opacity: 0; }
  47%, 47.6% { opacity: 1; }
  47.8%, 77.6% { opacity: 0; }
  77.8%, 78.5% { opacity: 1; }
  78.7%, 100% { opacity: 0; }
}
/* Uden bevægelse står frøen med åbne øjne, og ringen står stille på sin styrke:
   farven og mærket siger stadig det samme, kun tiden er taget ud. */
@media (prefers-reduced-motion: reduce) {
  .kort-froe, .kort-froe-lukket { animation: none; }
  .kort-brik::after { animation: none; }
}

/* Linjen på selve kortet om, hvad assistenten er i gang med. */
.kort-ai {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--tekst);
  margin-bottom: 0.75rem;
}
.kort-ai-venter_paa_ja { background: var(--advar-bg); }
.kort-ai-fejlet { background: var(--fejl-bg); }
.kort-ai p { margin: 0; }
.kort-ai-tekst { flex: 1; min-width: 0; }
.kort-ai .link-knap { flex: 0 0 auto; }
.kort-ai-puls {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-top: 0.3rem;
  border-radius: 50%;
  background: var(--accent);
  animation: ai-puls 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .kort-ai-puls { animation: none; opacity: 1; }
}
/* Linjen, der siger, at et panel eller en dialog bliver stående, fordi noget ikke er gemt. */
.ugemt-linje { margin-bottom: 0.5rem; }
.maerke-ai-fejlet { background: var(--fejl-bg); color: var(--fejl); }
.maerke-privat { background: var(--flade-2); color: var(--tekst-svag); }
.maerke-froe { background: var(--ok-bg); color: var(--ok); }
.nyt-kort-knapper { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.nyt-prik {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.45rem;
}

/* ---- Telefon: faner med swipe i stedet for fem smalle søjler ---- */
.tavle-faner { display: none; }
.tavle-flyt-hint { display: none; }
.tavle-foldet-hint { margin-bottom: 0.5rem; }
@media (max-width: 720px) {
  .tavle-faner {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    position: sticky;
    top: 48px;
    background: var(--bg);
    padding: 0.25rem 0 0.5rem;
    margin: 0 -1rem 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    z-index: 5;
    scrollbar-width: none;
  }
  .tavle-faner::-webkit-scrollbar { display: none; }
  /* En fade i højre kant siger, at pillerne kan rulles. */
  .tavle-faner-ramme { position: relative; }
  .tavle-faner-ramme::after {
    content: '';
    position: absolute;
    top: 0; right: -1rem; bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg));
  }
  .tavle-faner button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--linje);
    border-radius: 999px;
    background: var(--flade);
    color: var(--tekst-svag);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .tavle-faner button.aktiv { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
  .tavle-faner.traekker button { border-style: dashed; border-color: var(--accent); }
  .tavle-flyt-hint { display: block; margin-bottom: 0.5rem; }
  /* Folden findes ikke på telefonen, hvor kolonnerne er faner; så gør linjen om den heller ikke. */
  .tavle-foldet-hint { display: none; }
  .tavle {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1rem;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem 0.5rem;
  }
  .tavle::-webkit-scrollbar { display: none; }
  .kolonne { flex: 0 0 100%; min-width: 0; max-width: none; scroll-snap-align: start; min-height: 50vh; }
  .kolonne-hoved h2 { font-size: 1.05rem; }
  .fold-knap { display: none; }
  .kolonne.foldet .kolonne-liste, .kolonne.foldet .kolonne-tom, .kolonne.foldet .nyt-kort-knap { display: flex; }
  .kolonne.foldet .kolonne-tom { display: block; }
  /* På telefonen er kolonnerne faner, og der findes ingen fold. Den smalle søjle rulles tilbage. */
  .kolonne.foldet { align-self: auto; padding: 0.6rem; align-items: stretch; }
  .kolonne.foldet .kolonne-hoved { flex-direction: row; align-items: center; gap: 0.4rem; }
  .kolonne.foldet .kolonne-hoved h2 { writing-mode: horizontal-tb; }
}

/* ---- Kortet: side på telefon, panel til højre fra 1000 px ---- */
.kort-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 1rem; align-items: start; }
.kort-side { position: sticky; top: 68px; max-height: calc(100vh - 84px); overflow: auto; }
/* Kortpanelet holder sin spalte, også når tavlen bagved er fuld bredde: en
   titel, en beskrivelse og en journal skal læses, ikke scannes. */
.kort-panel {
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge-kort);
  padding: 1rem;
  max-width: 720px;
  margin: 0 auto;
}
/* ---- RIGTIGT GLAS ----
   Her, og kun her, er der backdrop-filter: kortpanelet ligger oven på tavlen,
   og der er ét ad gangen. Fladen er næsten uigennemsigtig med vilje. Tekst oven
   på et halvgennemsigtigt, slørret lag rendres uden subpixel-udjævning og ser
   mudret ud; med 0,86-0,88 i alfa står bogstaverne på fast grund, og sløringen
   ses kun som et strøg af farve fra det, der ligger bagved.
   Uden backdrop-filter i browseren bliver fladen bare den almindelige. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .kort-panel {
    background: var(--glas-flade);
    -webkit-backdrop-filter: var(--glas-sloer);
    backdrop-filter: var(--glas-sloer);
  }
}
.kort-panel.stilstand-gul { border-left: 3px solid var(--advar); }
.kort-panel.stilstand-roed { border-left: 3px solid var(--fejl); }
.kort-panel-hoved { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.kort-panel-hoved .knap { padding: 0.4rem 0.75rem; font-size: 0.9rem; }
.kryds {
  margin-left: auto;
  width: 34px; height: 34px;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst-svag);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.kryds:hover { color: var(--tekst); background: var(--flade-2); }
.kort-panel .besked { margin-bottom: 0.75rem; }
.kort-titel-felt label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Titlen ombryder og vokser i højden: den skjulte kopi i ::after sætter højden, så hele
   navnet står der også på en telefon. Begge lag skal have samme skrift og samme kanter. */
.voksende { display: grid; }
.voksende::after {
  content: attr(data-vaerdi) ' ';
  white-space: pre-wrap;
  visibility: hidden;
}
.voksende > textarea, .voksende::after {
  grid-area: 1 / 1 / 2 / 2;
  font: inherit;
  overflow: hidden;
  resize: none;
  word-break: break-word;
}
.kort-titel-felt .voksende > textarea, .kort-titel-felt .voksende::after {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.kort-titel-felt .voksende > textarea { background: transparent; min-height: 0; resize: none; }
.kort-titel-felt .voksende > textarea:hover { border-color: var(--linje); }
.kort-status { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; margin: 0.25rem 0 1rem 0.4rem; }
.kort-felter { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.felt-afkryds { justify-content: flex-end; padding-bottom: 0.55rem; }
.felt-afkryds label { font-weight: 500; cursor: pointer; gap: 0.5rem; }
.felt-afkryds input { margin: 0; width: auto; }
.kort-panel textarea { resize: vertical; min-height: 5rem; }
.kort-panel h3 { font-size: 0.925rem; margin: 1rem 0 0.4rem; display: flex; align-items: center; gap: 0.35rem; }
.kort-kilde { margin-top: 1rem; }

/* Tjekliste */
.tjekliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tjek-punkt { display: flex; align-items: center; gap: 0.4rem; }
.tjek-haandtag { color: var(--tekst-svag); cursor: grab; font-size: 0.8rem; letter-spacing: -0.2em; user-select: none; padding: 0.2rem 0.1rem; }
.tjek-punkt input[type="checkbox"] { margin: 0; flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--accent); }
.tjek-punkt .link-knap { font-size: 1.1rem; padding: 0 0.4rem; }
/* På en telefon skal både feltet og slet-krydset kunne rammes med en finger: 44 px høje. */
@media (max-width: 720px) {
  .tjek-punkt { min-height: 44px; }
  .tjek-punkt .link-knap { min-width: 44px; min-height: 44px; }
}
.deling-hjaelp { margin: 0.25rem 0 0; }
.tjek-tekst {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
}
.tjek-tekst:hover, .tjek-tekst:focus { border-color: var(--linje); outline: none; background: var(--flade); }
.tjek-gjort .tjek-tekst { text-decoration: line-through; color: var(--tekst-svag); }
.tjek-ny input, .link-form input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
}
.tjek-ny { margin-top: 0.4rem; }
.tjek-ny input:focus, .link-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* Links */
.link-liste { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.link-liste li { display: flex; align-items: center; gap: 0.6rem; }
.link-liste a { overflow-wrap: anywhere; }
.link-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.4rem; align-items: center; }
.link-form .knap { padding: 0.45rem 0.7rem; font-size: 0.875rem; }
.link-knap {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-knap:hover { color: var(--tekst); }

/* Journal. Den står foldet sammen, og overskriften er selve knappen. Folden må ikke tegne
   den boks, .fold ellers giver i Opsætning; her skal linjen ligne kortets andre overskrifter. */
.kort-journal.fold { background: none; border: none; border-radius: 0; margin: 1rem 0 0; }
.kort-journal.fold > summary {
  padding: 0;
  min-height: 44px;
  align-items: center;
  font-size: 0.925rem;
}
.kort-journal.fold > summary .fold-linje { font-size: 0.875rem; }
.kort-journal .hjaelp { margin: 0 0 0.4rem; }
.journal { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.journal li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--linje);
}
.journal .tid { color: var(--tekst-svag); white-space: nowrap; }
.journal li.fortrudt .journal-tekst { text-decoration: line-through; color: var(--tekst-svag); }

@media (max-width: 999px) {
  .kort-layout { display: block; }
  .kort-baggrund { display: none; }
  .kort-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 720px) {
  .kort-panel { border-left-width: 1px; border-radius: var(--radius); padding: 0.875rem; }
  .kort-panel.stilstand-gul, .kort-panel.stilstand-roed { border-left-width: 3px; }
  .kort-felter { grid-template-columns: 1fr; }
  .link-form { grid-template-columns: 1fr; }
  .kort-panel-hoved .knap { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
}

/* ---- Listen ---- */
.liste-sortering { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.liste-sortering button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: var(--flade);
  color: var(--tekst-svag);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.liste-sortering button.aktiv { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
/* Tabellen får ikke hele skærmen, selv om listen hører til arbejdsfladerne: fem
   søjler trukket ud over 2500 px betyder, at øjet skal rejse fra titlen i venstre
   kant til "senest rørt" i højre for hver eneste række. */
.tabel-rul { overflow-x: auto; max-width: 1500px; background: var(--flade); border: 1px solid var(--linje); border-radius: var(--radius); }
.liste-tabel { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.liste-tabel th, .liste-tabel td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--linje); white-space: nowrap; }
.liste-tabel th { font-weight: 600; font-size: 0.8rem; color: var(--tekst-svag); }
.liste-tabel td.liste-titel { white-space: normal; font-weight: 500; min-width: 200px; }
.liste-tabel tbody tr { cursor: pointer; }
.liste-tabel tbody tr:hover, .liste-tabel tbody tr:focus-visible { background: var(--flade-2); outline: none; }
.liste-tabel tbody tr:last-child td { border-bottom: none; }

/* ---- Matricen: de fire mærker som et 2x2-felt ----
   Akserne står i kanten: "Haster" og "Haster ikke" over søjlerne, "Vigtigt" og "Ikke
   vigtigt" ud for rækkerne. Feltets overskrift har samme farve som mærket på kortet,
   så hun kan se, at det er de samme fire ord. Under 720 px står felterne under
   hinanden, og akserne står i stedet som en linje i hvert felt. */
.matrix {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  align-items: stretch;
  max-width: var(--bredde-tavle);
  margin-inline: auto;
}
.matrix-akse {
  margin: 0;
  color: var(--tekst-svag);
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.matrix-akse-haster { grid-column: 2; grid-row: 1; }
.matrix-akse-haster-ikke { grid-column: 3; grid-row: 1; }
.matrix-akse-vigtigt { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; }
.matrix-akse-vigtigt-ikke { grid-column: 1; grid-row: 3; writing-mode: vertical-rl; }
.matrix-felt-goer_nu { grid-column: 2; grid-row: 2; }
.matrix-felt-planlaeg { grid-column: 3; grid-row: 2; }
.matrix-felt-giv_videre { grid-column: 2; grid-row: 3; }
.matrix-felt-overvej_at_lukke { grid-column: 3; grid-row: 3; }
.matrix-uden { grid-column: 1 / -1; grid-row: 4; }
.matrix-felt {
  position: relative;
  background: var(--flade-2);
  border-radius: var(--radius);
  padding: 0.6rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  --glod-basis: 0;
  --glod-styrke: calc(var(--glod-basis) * var(--glod-faktor));
}
/* Feltet bærer samme farve som ringen på kortene i det — samme opskrift, halv
   styrke, fordi et felt er stort og en ring om noget stort skriger. Feltet
   pulser ikke: stilstand hører til det enkelte kort, ikke til kvadranten. */
.matrix-felt-goer_nu { --glod: rgb(var(--kv-goer_nu-rgb)); --glod-basis: 0.5; }
.matrix-felt-planlaeg { --glod: rgb(var(--kv-planlaeg-rgb)); --glod-basis: 0.4; }
.matrix-felt-giv_videre { --glod: rgb(var(--kv-giv_videre-rgb)); --glod-basis: 0.4; }
.matrix-felt-overvej_at_lukke { --glod: rgb(var(--kv-overvej_at_lukke-rgb)); --glod-basis: 0.2; }
.matrix-felt-goer_nu::after,
.matrix-felt-planlaeg::after,
.matrix-felt-giv_videre::after,
.matrix-felt-overvej_at_lukke::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--glod), var(--glod-lag-1) var(--glod), var(--glod-lag-2) var(--glod);
  opacity: var(--glod-styrke);
}
.matrix-felt-hoved { display: flex; align-items: center; gap: 0.4rem; }
.matrix-felt-hoved h2 { font-size: 0.95rem; }
.matrix-felt-goer_nu .matrix-felt-hoved h2 { color: rgb(var(--kv-goer_nu-rgb)); }
.matrix-felt-planlaeg .matrix-felt-hoved h2 { color: rgb(var(--kv-planlaeg-rgb)); }
.matrix-felt-giv_videre .matrix-felt-hoved h2 { color: rgb(var(--kv-giv_videre-rgb)); }
.matrix-felt-overvej_at_lukke .matrix-felt-hoved h2 { color: rgb(var(--kv-overvej_at_lukke-rgb)); }
.matrix-felt-akser { display: none; margin: 0; color: var(--tekst-svag); font-size: 0.8rem; }
.matrix-liste { display: flex; flex-direction: column; gap: 0.5rem; min-height: 48px; flex: 1; }
.matrix-tom { font-size: 0.8rem; padding: 0.25rem 0.2rem; pointer-events: none; }
.matrix-uden .matrix-felt { min-height: 0; }
.matrix-uden .matrix-liste { flex-direction: row; flex-wrap: wrap; }
.matrix-uden .kort-brik { flex: 1 1 240px; max-width: 320px; }
@media (max-width: 720px) {
  .matrix { display: flex; flex-direction: column; }
  .matrix-akse { display: none; }
  .matrix-felt-akser { display: block; }
  .matrix-uden .matrix-liste { flex-direction: column; }
  /* I en søjle ville et kort, der må vokse, blive lige så højt som feltet. */
  .matrix-uden .kort-brik { flex: 0 0 auto; max-width: none; }
}
/* På en bred skærm har et felt plads til flere kort ved siden af hinanden. Uden
   det ville hvert kort blive 700 px bredt, og hun ville stadig kun se fire ad
   gangen. Kortene trækkes stadig med den samme Sortable; den er ligeglad med,
   om listen er en søjle eller et gitter. */
@media (min-width: 1400px) {
  .matrix-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-content: start;
  }
  .matrix-uden .kort-brik { max-width: none; }
}

/* ---- Vigtigst nu og søgning: grupper ---- */
.gruppe { margin-bottom: 1.25rem; }
.gruppe h2 { font-size: 1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.gruppe-kort { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; }
.soeg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.soeg-traef {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  color: var(--tekst);
  font: inherit;
}
button.soeg-traef { cursor: pointer; }
button.soeg-traef:hover { border-color: var(--accent); }
.soeg-titel { font-weight: 500; }
.soeg-uddrag { font-size: 0.85rem; color: var(--tekst-svag); }
/* De ord, hun søgte på, står med fed i uddraget, så træffet kan forklares. */
.soeg-uddrag strong { color: var(--tekst); font-weight: 600; }

/* Søgefeltet i topbaren. */
.soegefelt { flex: 1; max-width: 300px; margin-left: auto; min-width: 160px; }
.topbar-indre .nav { margin-left: 0; }
.soegefelt input {
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: var(--flade-2);
  color: var(--tekst);
  font-size: 0.9rem;
}
.soegefelt input:focus { outline: none; border-color: var(--accent); background: var(--flade); }
.soegefelt input::placeholder { color: var(--tekst-svag); }
@media (max-width: 720px) {
  .soegefelt { max-width: none; }
}

/* ---- Den stående linje ---- */
.staaende-linje {
  background: var(--accent-bg);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.925rem;
}
.staaende-linje > .link-knap { font-weight: 500; text-decoration: none; }
.staaende-liste { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }

/* ---- Rettelser efter kontrollen af trin 2 og 3: lukkede kort, listen på telefon, instruktionsfund, tavlen ved siden af panelet ---- */
/* Et kort i Færdig viser fristen som grå dato uden niveau. */
.frist-lukket { color: var(--tekst-svag); font-weight: 400; }
/* Journalen: instruktionen, assistenten fandt, med teksten og knappen "Gør det". */
.journal-instruktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0.35rem 0 0.25rem; padding: 0.5rem 0.65rem; background: var(--accent-bg); border-radius: var(--radius); }
.journal-instruktion .knap { padding: 0.3rem 0.65rem; font-size: 0.85rem; }
/* Listen: på telefon to linjer pr. kort i stedet for tabellen; på desktop omvendt. */
.liste-mobil { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 0.4rem; }
.liste-mobil button {
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
}
.liste-mobil-hoved { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.liste-mobil-hoved .liste-titel { font-weight: 500; overflow-wrap: anywhere; }
.liste-mobil-hoved .frist { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 720px) {
  .liste-mobil { display: flex; }
  .tabel-rul { display: none; }
}
/* Med kortet og assistentpanelet åbne er der ikke plads til fem søjler på 190 px: søjlerne
   må blive smallere, og rullebjælken under tavlen er altid synlig. */
@media (min-width: 1000px) and (max-width: 1599px) {
  [data-assistent="aaben"] .kort-layout .tavle { overflow-x: scroll; scrollbar-width: thin; }
  [data-assistent="aaben"] .kort-layout .kolonne { min-width: 150px; }
}