/* Mobil-appen (UI=mobil). Helioux' husstil (indbakken og Insight Bank):
   Inter i tynd vægt, næsten hvid baggrund, tynde linjer, én blød skygge og
   hovedknapper i kundens farve. Kundens farve (/brand.css → --brand) er ellers
   accent: prikker, valgt række, tal og fokus. Hovedknapperne bruger
   --brand-knap, som serveren mørkner, hvis hvid tekst ikke kan læses på
   brandfarven (Rasmus 28/10; før var de næsten sorte). Så virker siden for
   enhver kunde, hvor kun logo og én farve skifter (hyldeprodukt, redesign 27/10).
   Telefonen er udgangspunktet; computeren (≥ 900 × 560 px) får tre kolonner.
   Samme betingelse står i mobil.js (matchMedia) — testen holder dem ens. */

:root {
  --brand-x: var(--brand, #3b5568);
  --brand-bloed: color-mix(in srgb, var(--brand-x) 13%, #fff);
  --brand-vask: color-mix(in srgb, var(--brand-x) 5%, #fff);
  --brand-gloed: color-mix(in srgb, var(--brand-x) 16%, transparent);
  --ink: #171717;
  --ink-head: #1a1a1a;
  --offwhite: #fafaf7;
  --surface: #fff;
  --line: #ececea;
  --muted: #8a8a85;
  --muted2: #a6a6a0;
  --ok: #56b87a;
  --advarsel: #d9822b;
  --advarsel-tekst: #a3591a;
  --fejl: #c0392b;
  --skygge: 0 1px 2px rgba(23, 23, 23, .04), 0 12px 40px -12px rgba(23, 23, 23, .10);
  --top-sikker: env(safe-area-inset-top, 0px);
  --bund-sikker: env(safe-area-inset-bottom, 0px);
  /* Optag ved siden af Send (design 2026-11-01-optag-knap, v5). Knappen, pladsen
     i fod-bjælken og fod-bjælkens kant bruger de samme mål, så de altid flugter. */
  --fod-knap: 44px;                                  /* højden på Send og Optag */
  --optag-bredde: 112px;                             /* rummer "● 1:59:59": uret skubber aldrig */
  --optag-hoejre: 16px;
  --optag-bund: 16px;
  --optag-under: calc(67px + var(--bund-sikker));    /* det, kortet står over: fanerne */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 60% at 85% -15%, var(--brand-gloed), transparent 55%);
}
body.laast { overflow: hidden; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand-x); }
:focus-visible { outline: 2px solid var(--brand-x); outline-offset: 2px; border-radius: 6px; }

.ikon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skjult-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── fælles byggeklodser ── */
.etiket {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted2); font-weight: 500; margin: 20px 6px 6px;
}
.prik { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-x);
        box-shadow: 0 0 0 3px var(--brand-gloed); flex: none; display: inline-block; }
.prik-ok { background: var(--ok); box-shadow: none; }
.prik-advarsel { background: var(--advarsel); box-shadow: 0 0 0 3px rgba(217, 130, 43, .16); }
.prik-puls { animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 6px transparent; opacity: .55; } }

.knap {
  border: 0; border-radius: 11px; background: var(--brand-knap, var(--ink-head)); color: #fff;
  font-size: 15px; font-weight: 400; padding: 13px 18px; transition: background .18s;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
/* Reserven er den gamle næsten-sorte: uden /brand.css aldrig hvid tekst på ingenting. */
.knap:hover { background: color-mix(in srgb, var(--brand-knap, var(--ink-head)) 82%, #000); }

.knap-lille { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.knap-fuld { width: 100%; }
.knap-stille { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.knap-stille:hover { background: var(--surface); border-color: var(--brand-x); color: var(--brand-x); }
.knap-fare, .knap-fare:hover { color: var(--fejl); border-color: color-mix(in srgb, var(--fejl) 35%, #fff); }
/* Efter de stille knapper, så en deaktiveret knap aldrig lyser op; teksten kan
   læses (4,5:1), så "Sender …" og "Fjerner …" står tydeligt. */
.knap:disabled, .knap:disabled:hover {
  background: var(--line); color: #6b6b66; border-color: var(--line); cursor: default;
}

/* Skraldespanden øverst i detaljen og dens bekræftelse. */
.detalje-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skraldespand {
  width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; border-radius: 11px;
  background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.skraldespand:hover, .skraldespand:focus-visible, .skraldespand[aria-expanded="true"] { color: var(--fejl); background: var(--surface); }
.skraldespand:disabled { opacity: .35; cursor: default; }
.bekraeft {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface); box-shadow: var(--skygge);
}
.bekraeft-tekst { font-size: 14px; color: var(--ink); margin: 0 0 10px; }
.bekraeft-knapper { display: flex; gap: 8px; }
.link-knap { border: 0; background: none; font-size: 12.5px; color: var(--brand-x); padding: 0; }

.felt {
  width: 100%; border: 1px solid var(--line); border-radius: 11px; background: var(--offwhite);
  font-size: 16px; font-weight: 300; padding: 11px 13px; outline: 0; transition: border-color .2s, box-shadow .2s;
}
.felt:focus { border-color: var(--brand-x); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-gloed); }
.felt-navn { display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 5px; }
.valgfri { color: var(--muted2); }

.kort {
  margin-top: 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--skygge); padding: 16px;
}
.kort-titel { font-size: 15px; font-weight: 500; color: var(--ink-head); margin-bottom: 12px; letter-spacing: -.005em; }

/* ── telefonen: listen ── */
.filtre { display: none; }

.liste-kolonne {
  max-width: 640px; margin: 0 auto;
  padding: calc(var(--top-sikker) + 10px) 14px calc(100px + var(--bund-sikker));
}
.top { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 2px; min-height: 36px; }
.logo { height: 24px; width: auto; display: block; }
.logo-tekst { font-size: 17px; font-weight: 500; color: var(--ink-head); letter-spacing: -.01em; }

.liste-titel:focus { outline: none; }
.liste-titel { font-size: 27px; font-weight: 500; letter-spacing: -.02em; color: var(--ink-head); margin: 16px 6px 12px; }

.banner {
  display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px;
  background: var(--surface); border: 1px solid #f0d6d0; border-left: 3px solid var(--fejl);
  border-radius: 12px; padding: 11px 10px 11px 13px; font-size: 14px; color: var(--ink);
}
.banner p { flex: 1; }
.banner-luk { border: 0; background: none; color: var(--muted); padding: 2px; display: grid; }
.banner-luk .ikon { width: 18px; height: 18px; }

.live {
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 13px; margin: 2px 0 4px;
}
.live-hoved { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.live-hoved b { color: var(--ink-head); font-weight: 500; }
.live-liste { list-style: none; margin-top: 4px; }
.live-liste .live-flere { color: var(--muted2); }
.live-liste li { font-size: 13px; color: var(--muted); padding: 3px 0 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.antal-linje { display: none; }
.tom { color: var(--muted); font-size: 15px; margin: 26px 6px; max-width: 34ch; }

.liste ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.post {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  border-radius: 12px; padding: 12px 12px; transition: background .15s;
}
.post:hover { background: rgba(0, 0, 0, .035); }
.post:active { background: rgba(0, 0, 0, .05); }
.post[aria-current="true"] { background: var(--brand-bloed); }
.post-top { display: flex; align-items: center; gap: 10px; }
.post-emne { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 400; color: var(--ink); line-height: 1.35; }
.post-sendt .post-emne { color: var(--muted); font-weight: 300; }
.post-pil { width: 16px; height: 16px; color: var(--muted2); }
.post-meta { display: block; font-size: 13px; color: var(--muted); padding-left: 18px; margin-top: 2px; }
.post-note { display: block; font-size: 13px; color: var(--advarsel-tekst); padding-left: 18px; margin-top: 3px; }
.post-slet { display: block; font-size: 12.5px; color: var(--muted); padding-left: 18px; margin-top: 3px; }

/* ── telefonen: faner i bunden ── */
.faner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--line); padding: 6px 8px calc(6px + var(--bund-sikker));
}
.fane {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: none; font-size: 11px; color: var(--muted); padding: 6px 0 4px; min-height: 54px; white-space: nowrap;
}
.fane .ikon { width: 25px; height: 25px; }
.fane[aria-pressed="true"] { color: var(--ink-head); font-weight: 500; }
.fane[aria-pressed="true"] .ikon { color: var(--brand-x); }
.fane-ikon { position: relative; display: grid; }
.fane-tal {
  position: absolute; top: -5px; left: 15px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand-x); color: #fff; font-size: 11px; font-weight: 600;
  line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
.fane-tal:empty { display: none; }
.fane-tal-advarsel { background: var(--advarsel); }

/* ── telefonen: den valgte optagelse som ark ── */
.ark {
  position: fixed; inset: 0; z-index: 30; background: var(--offwhite);
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
}
.ark.aaben { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ark-top { padding: calc(var(--top-sikker) + 6px) 8px 0; }
.tilbage { border: 0; background: none; font-size: 16px; color: var(--ink); display: inline-flex; align-items: center; gap: 2px; padding: 9px 8px; }
.ark-indhold { flex: 1; overflow-y: auto; padding: 8px 18px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ark-tom { display: none; }

.status-maerke {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .8); border-radius: 999px; padding: 4px 11px;
}
.ark-emne { font-size: 22px; font-weight: 500; letter-spacing: -.015em; color: var(--ink-head); line-height: 1.35; margin: 12px 0 6px; }
.ark-tid { font-size: 13.5px; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ark-slet { display: block; margin-top: 4px; }
.ark-note {
  margin-top: 16px; font-size: 14px; color: var(--advarsel-tekst);
  background: #fdf6ee; border: 1px solid #f3e0c9; border-radius: 12px; padding: 11px 13px;
}

.soeg {
  display: flex; align-items: center; gap: 8px; background: var(--offwhite); border: 1px solid var(--line);
  border-radius: 12px; padding: 3px 3px 3px 13px; transition: border-color .2s, box-shadow .2s;
}
.soeg:focus-within { border-color: var(--brand-x); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-gloed); }
.soeg-felt { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 300; padding: 8px 0; }
.soeg-felt::placeholder, .felt::placeholder { color: var(--muted2); }
.vaelger .etiket { margin: 16px 2px 8px; }

.valg { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.valg-tom { font-size: 14px; color: var(--muted); margin: 2px 2px 6px; }
.valg-raekke {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: var(--surface);
  transition: border-color .18s, background .18s;
}
.valg-raekke:hover { border-color: var(--brand-x); }
.valg-raekke[aria-checked="true"] { border-color: var(--brand-x); background: var(--brand-vask); }
.valg-av {
  flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--ink-head); color: #f4f4f1;
  display: grid; place-items: center; font-size: 11px; font-weight: 500;
}
.valg-tekst { flex: 1; min-width: 0; }
.valg-navn { display: block; font-size: 15px; font-weight: 500; color: var(--ink-head); }
.valg-under { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valg-flueben { flex: 0 0 20px; height: 20px; border-radius: 50%; border: 1.5px solid #d6d6d0; display: grid; place-items: center; }
.valg-raekke[aria-checked="true"] .valg-flueben { border: 6px solid var(--brand-x); }

.ny-kunde {
  margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px dashed #d9d9d3; border-radius: 12px; background: transparent; padding: 11px 13px; font-size: 14.5px;
}
.ny-kunde[aria-expanded="true"] { border-style: solid; border-color: var(--brand-x); background: var(--brand-vask); }
.ny-plus { flex: 0 0 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--muted); font-size: 18px; font-weight: 300; }
.ny-form { margin-top: 4px; }

.info-tekst { font-size: 15px; color: var(--ink); }
.info-navn { font-size: 17px; font-weight: 500; color: var(--ink-head); margin-top: 2px; }
.info-under { font-size: 13px; color: var(--muted); margin-top: 2px; }
.info .etiket { margin: 0 0 6px; }
.info .knap { margin-top: 14px; }
.info-live { display: flex; align-items: center; gap: 10px; }

.ark-fod {
  padding: 12px 18px calc(12px + var(--bund-sikker)); border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.ark-til { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.ark-til b { font-weight: 500; color: var(--ink-head); }
/* Bjælken står der altid, når Optag-knappen findes (Rasmus 05-11): uden for
   "Mangler kunde" med en stille tekst i stedet for kunden og Send. Uden knappen
   (telefonen, Safari, smalt vindue) er den væk som før. */
.optag-hint { display: none; }
.ark-fod.kun-optag .optag-hint { display: block; }
.ark-fod.kun-optag #arkTil, .ark-fod.kun-optag #sendKnap { display: none; }
body:not(.har-optag-knap) .ark-fod.kun-optag { display: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(86px + var(--bund-sikker)); transform: translateX(-50%); z-index: 40;
  background: var(--ink-head); color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 400;
  box-shadow: var(--skygge); width: max-content; max-width: calc(100vw - 32px); text-align: center;
}

/* ── login ── */
.login-side { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login {
  width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--skygge); padding: 30px 26px 26px;
}
.login-logo { height: 30px; width: auto; display: block; margin: 0 auto; }
.login-titel { text-align: center; font-size: 13.5px; font-weight: 300; color: var(--muted); margin: 10px 0 14px; }
.login-fejl { font-size: 13.5px; color: var(--fejl); margin-top: 6px; }
.login .knap-fuld { margin-top: 20px; }

/* ── computeren: tre kolonner (filtre · liste · den valgte optagelse) ── */
@media (min-width: 900px) and (min-height: 560px) {
  html, body { height: 100%; }
  body { overflow: hidden; font-size: 14px; }
  .skal { display: grid; grid-template-columns: 240px minmax(300px, 380px) 1fr; height: 100vh; }

  .filtre {
    display: flex; flex-direction: column; gap: 1px; padding: 22px 12px; overflow-y: auto;
    border-right: 1px solid var(--line); background: rgba(255, 255, 255, .5);
  }
  .filtre .logo { margin: 2px 10px 20px; align-self: flex-start; }
  .filtre .etiket { margin: 18px 10px 6px; }
  .filter-soeg {
    display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 11px; padding: 0 11px; transition: border-color .2s, box-shadow .2s;
  }
  .filter-soeg:focus-within { border-color: var(--brand-x); box-shadow: 0 0 0 3px var(--brand-gloed); }
  .filter-soeg .ikon { width: 16px; height: 16px; color: var(--muted2); }
  .filter-soeg input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; font-weight: 300; padding: 9px 0; }
  .filter-soeg input::placeholder { color: var(--muted2); }
  .filter-gruppe { display: flex; flex-direction: column; gap: 1px; }
  .filter {
    display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
    border: 0; background: none; border-radius: 9px; padding: 7px 10px; font-size: 13.5px; font-weight: 400; color: var(--ink);
  }
  .filter:hover { background: rgba(0, 0, 0, .035); }
  .filter[aria-pressed="true"] { background: var(--brand-bloed); color: var(--ink-head); font-weight: 500; }
  .filter-tal { font-size: 12px; color: var(--muted2); font-weight: 400; }
  .filter[aria-pressed="true"] .filter-tal { color: var(--brand-x); font-weight: 500; }
  .filter-tal.advarsel { color: var(--advarsel); font-weight: 500; }

  .liste-kolonne {
    max-width: none; margin: 0; padding: 20px 10px 32px; overflow-y: auto;
    border-right: 1px solid var(--line); background: rgba(255, 255, 255, .28);
  }
  .liste-kolonne .top, .liste-titel { display: none; }
  .antal-linje { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); padding: 4px 12px 0; min-height: 24px; }
  .liste .etiket { margin: 16px 12px 4px; }
  .live { margin: 0 2px 8px; }
  .live-hoved { font-size: 13px; }
  .live-liste li { font-size: 12px; }
  .tom { font-size: 13.5px; margin: 18px 12px; }
  .post { padding: 10px 12px; border-radius: 11px; }
  .post-emne { font-size: 13.5px; }
  .post-meta, .post-note, .post-slet { font-size: 11.5px; }
  .post-pil { display: none; }

  .ark {
    position: static; transform: none; visibility: visible; transition: none;
    background: transparent; min-height: 0; overflow: hidden;
  }
  .ark-top { display: none; }
  /* Rullebjælken tager lige meget fra begge sider (Windows: ca. 17 px), så
     indholdets midte er kolonnens midte, som fod-bjælken og Optag regner med,
     og indholdet hopper ikke, når bjælken kommer og går (modbevis 04-11). */
  .ark-indhold { padding: 34px 44px 34px; scrollbar-gutter: stable both-edges; }
  .ark-indhold > * { max-width: 720px; margin-inline: auto; }
  .ark-tom { display: block; color: var(--muted2); text-align: center; margin: 32vh auto 0; font-size: 14px; }
  .ark-emne { font-size: 22px; }
  .valg-navn { font-size: 14px; }
  /* Fod-bjælken som én række: teksten til venstre, Send og Optags plads til
     højre. Knapperne er én gruppe, så er der ikke plads, brydes teksten op over
     dem; først i et meget smalt vindue står Send over Optag, aldrig under den.
     På en bred skærm står udkastet midt i sin kolonne, og fod-bjælken og Optag
     følger dets kanter, så Send står under det, den sender (Rasmus 04-11).
     --ark-kant er afstanden fra kolonnens kant til de 720 px; 620 px er de to
     første kolonner i .skal (240 + 380). */
  :root {
    --ark-kant: max(44px, calc((100vw - 620px - 720px) / 2));
    --optag-hoejre: var(--ark-kant); --optag-under: calc(var(--optag-bund) + var(--fod-knap));
  }
  .ark-fod {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px;
    padding: 14px var(--optag-hoejre) var(--optag-bund) var(--ark-kant); background: rgba(255, 255, 255, .6);
  }
  .ark-fod > * { max-width: 720px; }
  .ark-til { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
  .ark-fod-knapper {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 8px;
    margin-left: auto; align-self: flex-end;
  }
  .ark-fod .knap-fuld { width: auto; height: var(--fod-knap); padding: 0 22px; }

  .faner { display: none; }
  .toast { left: auto; right: 32px; bottom: 92px; transform: none; }   /* fri af Send-knappen */
  .felt, .soeg-felt { font-size: 14px; }
}

/* Et halvt 1920-vindue (960 px): mindre margen til højre, så Send og Optag kan
   stå på samme linje. */
@media (min-width: 900px) and (max-width: 999px) and (min-height: 560px) {
  :root { --optag-hoejre: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Udkast før Close (GODKEND_FOER_CLOSE) */
.udkast-gemt { font-size: 12.5px; color: var(--muted); min-height: 1em; margin: 0 0 4px; }
.udkast-gemt.fejl { color: var(--fejl); }
/* Noten som punkter og opgaverne med × (design 2026-10-28-udkast-noten-som-
   punkter v2): en punktliste, ikke en formular. Felterne har ingen ramme, før
   man trykker, og er 16 px, ellers zoomer iOS ind. */
.udkast-note { display: grid; gap: 14px; margin: 0 0 18px; }
.note-overskrift { font-size: 13.5px; font-weight: 500; color: var(--ink-head); margin: 0 0 2px; }
.punkter, .udkast-opgaver { list-style: none; margin: 0; padding: 0; }
.punkt { display: grid; grid-template-columns: 14px 1fr 44px; align-items: start; }
.punkt-prik { color: var(--muted); font-size: 16px; line-height: 1.5; padding-top: 6px; }
.punkt-tekst {
  font: inherit; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--ink);
  width: 100%; margin: 0; padding: 6px 8px; border: 0; border-radius: 9px;
  background: transparent; resize: none; overflow: hidden; outline: 0;
}
/* Kortet er hvidt og siden #fafaf7: brandets svage vask kan ses mod begge (modbevis 28/10). */
.punkt-tekst:focus { background: var(--brand-vask); box-shadow: inset 0 0 0 1px var(--brand-gloed); }
/* Lille tegn, stor trykflade (44 × 44 px). */
.fjern {
  width: 44px; height: 44px; margin-top: -4px; border: 0; border-radius: 10px; background: none;
  color: var(--muted2); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.fjern:hover, .fjern:focus-visible { color: var(--ink); background: var(--offwhite); }
.tilfoej {
  display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 2px;
  border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
}
.tilfoej:hover, .tilfoej:focus-visible { color: var(--ink); }
.tilfoej:disabled { opacity: .4; cursor: default; }
.udkast-opgaver { display: grid; gap: 18px; }
.opgave { display: grid; grid-template-columns: 1fr 44px; align-items: start; }
.opgave-felter { display: grid; gap: 2px; min-width: 0; }
/* "Din opgave" / "Kundens opgave": et lille mærke ved datoen, ikke en sætning. */
/* Et tryk skifter "Din opgave" / "Kundens opgave"; de små pile siger, at det kan skiftes.
   Lille mærke, men trykfladen er høj nok til en tommelfinger. */
.opgave-hvem {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 30px;
  padding: 0 9px; border: 0; border-radius: 8px; font: inherit; font-size: 12px; color: #6b6b66;
  background: var(--line); cursor: pointer; touch-action: manipulation;
}
/* Trykfladen er 44 px høj, selvom mærket ser lille ud (modbevis 28/10). */
.opgave-hvem::before { content: ""; position: absolute; inset: -7px -3px; }
.opgave-hvem.kunden { color: var(--brand-x); background: var(--brand-bloed); }
.opgave-hvem-skift { width: 13px; height: 13px; opacity: .75; }
.opgave-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 0 8px; }
.dato-pille {
  position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.dato-pille:focus-within { border-color: var(--brand-x); }
/* Telefonens datovælger ligger usynligt over pillen; pillen viser DD-MM-YYYY. */
.dato-valg {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.opgave-advarsel { font-size: 12.5px; color: var(--advarsel-tekst); }
/* Modtageren: samme pille som datoen; vælgeren rækker 4 px ud over, så trykfladen er 44 px. */
.til-pille > .dato-valg { inset: -4px 0; height: auto; }
#fjernUdkast { margin-top: 14px; }
/* Felter i Close (design 2026-11-04-felter-i-appen): navnet over feltet, det sagte
   under. Tal og tekst er tekstfelter (16 px, ellers zoomer iOS ind); datoen er
   samme pille som opgavernes. */
#udkastFelterTitel { margin-top: 22px; }
.udkast-felter { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.felt-raekke-navn { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 5px; }
/* En rulleliste arver ikke skriften af sig selv (målt i browseren 05-11), og
   browserens egen pil sad helt ude ved kanten (Rasmus 05-11): egen pil med luft. */
.udkast-felter select.felt {
  font-family: inherit; color: var(--ink); cursor: pointer;
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.felt-raekke .dato-felt { display: flex; align-items: center; gap: 4px; }
.felt-raekke .fjern { margin-top: 0; }
.felt-sagt { font-size: 12.5px; color: var(--muted); margin: 5px 2px 0; }
.felt-raekke .opgave-advarsel { display: block; margin: 5px 2px 0; }

/* Optag-knappen på computeren (design 2026-11-01-optag-knap, v5): i fod-bjælkens
   række til højre for "Send til Close", hvid med tynd kant som .knap-stille og med
   Sends radius og højde. Knappen ligger fast; på computeren står fod-bjælken der
   altid, når knappen findes (Rasmus 05-11), og .optag-plads holder stedet fri. Bredden er
   fast, så uret under en optagelse aldrig skubber. Kortets ene markante element
   er bølgerne; resten er roligt. */
.optag { position: fixed; right: var(--optag-hoejre); bottom: var(--optag-bund); z-index: 50; }
.optag-plads { display: none; flex: none; width: var(--optag-bredde); height: var(--fod-knap); align-self: flex-end; }
body.har-optag-knap .optag-plads { display: block; }
.optag-knap {
  width: var(--optag-bredde); height: var(--fod-knap); padding: 0 12px; gap: 8px;
  white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums;
}
/* Optage-prikken: rød, kendt fra enhver optager. Den blinker, mens der optages. */
.optag-knap-prik { width: 10px; height: 10px; border-radius: 50%; background: var(--fejl); flex: none; }
.optag-knap.optager .optag-knap-prik { animation: puls 1.6s ease-in-out infinite; }
.optag-knap:disabled .optag-knap-prik { opacity: .4; }

/* Kortet åbner over fod-bjælken, så Send aldrig dækkes; optag.js måler dens
   højde (--fod-hoejde, 0 når den er skjult: uden knap, fx et vindue, der gøres
   smalt under en optagelse). Så står det over knappen, i et smalt vindue over fanerne. */
.optag-kort {
  position: fixed; right: var(--optag-hoejre); bottom: calc(max(var(--fod-hoejde, 0px), var(--optag-under)) + 12px);
  width: min(340px, calc(100vw - 32px)); padding: 16px 18px 16px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); box-shadow: var(--skygge);
}
.optag-kort.fejl { border-color: color-mix(in srgb, var(--fejl) 30%, var(--line)); }
.optag-hoved { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.optag-titel {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 14px; font-weight: 500; color: var(--ink-head); letter-spacing: -.005em;
}
.optag-prik { width: 8px; height: 8px; border-radius: 50%; background: var(--fejl); flex: none; }
.optag-prik.puls { animation: puls 1.6s ease-in-out infinite; }

/* Mikrofonen som en lille pille; den indbyggede rullemenu skjules bag egen pil. */
.optag-mikrofon { position: relative; display: block; max-width: 170px; flex: none; }
.optag-vaelg {
  appearance: none; -webkit-appearance: none; display: block; width: 100%;
  font: inherit; font-size: 12.5px; color: var(--muted); padding: 5px 26px 5px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--offwhite);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.optag-vaelg:hover { color: var(--ink); border-color: color-mix(in srgb, var(--brand-x) 35%, var(--line)); }
.optag-vaelg:focus-visible { outline: none; border-color: var(--brand-x); box-shadow: 0 0 0 3px var(--brand-gloed); }
.optag-pil { position: absolute; right: 9px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; color: var(--muted); pointer-events: none; }

.optag-ur {
  margin-top: 2px; font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.15;
  color: var(--ink-head); font-variant-numeric: tabular-nums;
}
/* Søjlerne tegnes i lærredets color (brandfarven), læst af optag.js. */
.optag-boelger { display: block; width: 100%; height: 56px; margin: 8px 0 2px; color: var(--brand-x); }

.optag-besked { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.optag-besked.advarsel { color: var(--advarsel-tekst); }
.optag-besked.fejl { color: var(--fejl); }

.optag-knapper { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.optag-knapper:empty { display: none; }
.optag-knapper button { font: inherit; font-size: 13.5px; cursor: pointer; }
.optag-knap-primaer, .optag-knap-fare {
  border: 0; border-radius: 999px; padding: 9px 16px; color: #fff; font-weight: 400;
  display: inline-flex; align-items: center; gap: 8px; transition: background .18s;
}
.optag-knap-primaer { background: var(--brand-knap, var(--ink-head)); }
.optag-knap-primaer:hover { background: color-mix(in srgb, var(--brand-knap, var(--ink-head)) 82%, #000); }
.optag-knap-fare { background: var(--fejl); }
.optag-knap-fare:hover { background: color-mix(in srgb, var(--fejl) 85%, #000); }
/* Stop-symbolet foran "Stop og send". */
.optag-knap-stop::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.optag-knap-stille {
  margin-left: auto; border: 0; background: none; padding: 9px 4px; color: var(--muted);
}
.optag-knap-stille:hover { color: var(--ink); }
.optag-knapper button:focus-visible { outline: 2px solid var(--brand-x); outline-offset: 2px; }

/* Detaljen får luft i bunden efter det, der dækker den: knappen, når fod-bjælken
   er skjult (kun uden knap, fx et smalt vindue under en optagelse), og kortet, når det er åbent (--optag-kort-hoejde, 0 når det er
   skjult). Så kan alt i detaljen rulles fri, også under en optagelse. */
body.har-optag .ark-indhold {
  padding-bottom: calc(max(var(--fod-hoejde, 0px), var(--optag-under)) - var(--fod-hoejde, 0px)
                       + var(--optag-kort-hoejde, 0px) + 34px);
}
@media (prefers-reduced-motion: reduce) {
  .optag-prik.puls, .optag-knap.optager .optag-knap-prik { animation: none; }
}

/* Mail til kunden (design 2026-11-06-mailudkast-i-appen): under felterne. Kontakten til
   højre for overskriften; Til er samme pille som opgavernes modtager; tiltalen og linjen
   under teksten kan ikke rettes og står derfor i den dæmpede farve. */
.udkast-mail { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--line); }
.mail-hoved { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-hoved .etiket { margin: 16px 6px 6px; }
.kontakt-knap { position: relative; display: inline-flex; align-items: center; min-height: 44px;
                padding: 0 4px; cursor: pointer; }
.kontakt-knap input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
                      opacity: 0; cursor: pointer; }
.kontakt-spor { position: relative; width: 40px; height: 24px; border-radius: 999px;
                background: var(--line); transition: background .2s; }
.kontakt-spor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
                       border-radius: 50%; background: var(--surface);
                       box-shadow: 0 1px 2px rgba(23, 23, 23, .2); transition: transform .2s; }
.kontakt-knap input:checked + .kontakt-spor { background: var(--brand-knap, var(--brand-x)); }
.kontakt-knap input:checked + .kontakt-spor::after { transform: translateX(16px); }
.kontakt-knap input:focus-visible + .kontakt-spor { outline: 2px solid var(--brand-x); outline-offset: 2px; }
.mail-forklaring { font-size: 13px; color: var(--muted); margin: 2px 6px 6px; }
.mail-linje { font-size: 13px; color: var(--muted); margin: 0 6px 8px; overflow-wrap: anywhere; }
.mail-til-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 2px; }
.mail-til .dato-tekst { overflow-wrap: anywhere; }
#mailTilAdvarsel, #mailCitat { display: block; margin: 6px 6px 0; }
#mailTilBesked { margin-top: 6px; }
.mail-brev { border: 1px solid var(--line); border-radius: 11px; background: var(--offwhite);
             padding: 11px 13px; transition: border-color .2s, box-shadow .2s; }
.mail-brev:focus-within { border-color: var(--brand-x); background: var(--surface);
                          box-shadow: 0 0 0 3px var(--brand-gloed); }
.mail-tiltale, .mail-slut { font-size: 14px; color: var(--muted); margin: 0; }
.mail-tiltale { margin-bottom: 8px; }
.mail-slut { margin-top: 8px; font-size: 12.5px; }
.mail-tekst { display: block; width: 100%; border: 0; background: none; resize: none; outline: 0;
              font: inherit; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--ink);
              min-height: 7.5em; padding: 0; }
@media (min-width: 900px) and (min-height: 560px) {
  .mail-tekst { font-size: 14px; }
}
.mail-til.deaktiveret { cursor: default; color: var(--muted); }
/* Kvitteringen med mailens tekst, når kladden fejlede: bliver, til sælgeren lukker den. */
.mail-kvit { border-color: #f1e1cf; border-left-color: var(--advarsel); }
.mail-kvit-krop { flex: 1; min-width: 0; display: grid; gap: 6px; }
.mail-kvit-emne { font-weight: 500; }
.mail-kvit-tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13.5px;
                   color: var(--ink); max-height: 40vh; overflow: auto; background: var(--offwhite);
                   border-radius: 8px; padding: 8px 10px; }
#mailKvitKopier { justify-self: start; font-size: 13.5px; min-height: 32px; }