/* ==========================================================================
   Anmeld — Tavlens egen højreklik-menu og anmeldelses-ark (demo-sandkasse)
   Erstatter browserens standard kontekstmenu i appen med en menu, der kan
   vokse: "Anmeld problem" er stjernen, flere punkter føjes til listen i
   anmeld.js. Alt animation er transform/opacity, spring-kurver som resten
   af appen.
   ========================================================================== */

:root{
  --km-papir:#FFFEFA; --km-blaek:#20282A; --km-tekst:#4A5457; --km-svag:#8A857A;
  --km-kant:#E7E2D7; --km-dyb:#16565C; --km-accent:#17767E; --km-dybest:#0F3F44;
  --km-koral:#E2604F; --km-guld:#E8C56A; --km-fjeder:cubic-bezier(.34,1.56,.64,1);
  --km-let:cubic-bezier(.22,1,.36,1);
}

/* ---------- selve menuen ---------- */
.km{position:fixed;z-index:640;width:264px;
  background:rgba(255,254,250,.94);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--km-kant);border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(15,63,68,.38),0 4px 14px -6px rgba(15,63,68,.16);
  padding:7px;opacity:0;transform:scale(.86);
  transform-origin:var(--km-opr,12% 12%);
  transition:transform .34s var(--km-fjeder),opacity .2s ease}
.km.aaben{opacity:1;transform:scale(1)}
.km.borte{opacity:0;transform:scale(.94);transition-duration:.16s,.16s}

.km-overskrift{display:flex;align-items:center;gap:8px;padding:8px 12px 9px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.13em;color:var(--km-svag)}
.km-overskrift .magneter{display:inline-flex;gap:3px}
.km-overskrift .magneter span{width:6px;height:6px;border-radius:50%}
.km-overskrift .magneter span:first-child{background:var(--km-koral)}
.km-overskrift .magneter span:last-child{background:#2F6BC6}

.km-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.km-punkt{display:flex;align-items:center;gap:11px;padding:8px 10px;
  border-radius:12px;cursor:pointer;border:none;background:none;width:100%;
  text-align:left;font-family:inherit;
  opacity:0;transform:translateY(7px);
  transition:opacity .3s var(--km-let),transform .38s var(--km-fjeder),background .14s ease}
.km.aaben .km-punkt{opacity:1;transform:none}
.km.aaben .km-punkt:nth-child(1){transition-delay:.05s,.05s,0s}
.km.aaben .km-punkt:nth-child(2){transition-delay:.09s,.09s,0s}
.km.aaben .km-punkt:nth-child(3){transition-delay:.13s,.13s,0s}
.km.aaben .km-punkt:nth-child(5){transition-delay:.17s,.17s,0s}
.km-punkt:hover,.km-punkt.fokus{background:rgba(23,118,126,.09)}
.km-punkt:focus-visible{outline:2.5px solid var(--km-accent);outline-offset:-1px}
.km-punkt .ikon{flex:none;width:32px;height:32px;border-radius:10px;display:grid;
  place-items:center;background:rgba(23,118,126,.09);border:1px solid rgba(23,118,126,.16);
  transition:transform .25s var(--km-fjeder)}
.km-punkt:hover .ikon,.km-punkt.fokus .ikon{transform:scale(1.1) rotate(-4deg)}
.km-punkt .tekst{flex:1;min-width:0}
.km-punkt .tekst b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em;
  color:var(--km-blaek)}
.km-punkt .tekst span{display:block;font-size:11px;color:var(--km-svag);margin-top:1px}
.km-punkt .piletegn{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;
  color:var(--km-svag);flex:none}
/* stjernen: anmeld */
.km-punkt.stjerne .ikon{background:rgba(226,96,79,.12);border-color:rgba(226,96,79,.3)}
.km-punkt.stjerne:hover,.km-punkt.stjerne.fokus{background:rgba(226,96,79,.09)}
.km-streg{height:1px;margin:5px 12px;background:repeating-linear-gradient(90deg,
  var(--km-kant) 0 5px,transparent 5px 10px);opacity:0}
.km.aaben .km-streg{opacity:1;transition:opacity .3s ease .15s}

.km-kontekst{padding:8px 12px 7px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.08em;color:var(--km-svag);
  display:flex;align-items:center;gap:7px}
.km-kontekst i{width:6px;height:6px;border-radius:50%;background:var(--km-accent);
  flex:none;animation:kmPuls 2.4s ease-in-out infinite}
@keyframes kmPuls{0%,100%{box-shadow:0 0 0 0 rgba(23,118,126,.3)}
  55%{box-shadow:0 0 0 4px rgba(23,118,126,0)}}

/* ---------- anmeldelses-arket ---------- */
.ka-taeppe{position:fixed;inset:0;z-index:650;background:rgba(15,63,68,.42);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s ease;display:grid;place-items:center;padding:20px}
.ka-taeppe.aaben{opacity:1}
.ka{width:min(480px,100%);background:var(--km-papir);border:1px solid var(--km-kant);
  border-radius:24px;padding:26px 26px 22px;position:relative;
  box-shadow:0 40px 90px -30px rgba(15,63,68,.5);
  opacity:0;transform:translateY(26px) scale(.96);
  transition:transform .45s var(--km-fjeder),opacity .28s ease}
.ka-taeppe.aaben .ka{opacity:1;transform:none}
@media (max-width:640px){
  .ka-taeppe{place-items:end center;padding:0}
  .ka{width:100%;border-radius:24px 24px 0 0;border-bottom:none;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .ka::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:40px;height:4.5px;border-radius:99px;background:var(--km-kant)}
}

.ka-hoved{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.ka-flag{flex:none;width:42px;height:42px;border-radius:14px;display:grid;
  place-items:center;background:rgba(226,96,79,.12);border:1px solid rgba(226,96,79,.3)}
.ka-hoved h3{margin:2px 0 3px;font-size:19px;font-weight:750;letter-spacing:-.02em;
  color:var(--km-blaek)}
.ka-hoved p{margin:0;font-size:12.5px;color:var(--km-tekst);line-height:1.5}
.ka-luk{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:10px;
  border:none;background:none;color:var(--km-svag);cursor:pointer;display:grid;
  place-items:center;transition:background .15s,color .15s}
.ka-luk:hover{background:rgba(23,118,126,.08);color:var(--km-blaek)}

.ka-kontekst{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.07em;color:var(--km-tekst);background:rgba(23,118,126,.06);
  border:1px dashed rgba(23,118,126,.3);border-radius:11px;padding:8px 12px;
  margin-bottom:16px}
.ka-kontekst i{width:6px;height:6px;border-radius:50%;background:var(--km-accent);flex:none}

.ka-label{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.13em;color:var(--km-svag);margin:0 0 8px}
.ka-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ka-chip{border:1.5px solid var(--km-kant);background:#fff;border-radius:999px;
  padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--km-tekst);
  cursor:pointer;font-family:inherit;
  transition:transform .25s var(--km-fjeder),background .18s,color .18s,border-color .18s}
.ka-chip:hover{transform:translateY(-1.5px);border-color:rgba(23,118,126,.4)}
.ka-chip.valgt{background:var(--km-dyb);border-color:var(--km-dyb);color:#F3EFE6;
  transform:scale(1.04)}
.ka-chip:focus-visible{outline:2.5px solid var(--km-accent);outline-offset:2px}

.ka-tekst{width:100%;min-height:96px;resize:vertical;border:1.5px solid var(--km-kant);
  border-radius:14px;padding:13px 15px;font-family:'Source Serif 4',Georgia,serif;
  font-size:15px;line-height:1.6;color:var(--km-blaek);background:#fff;
  transition:border-color .18s,box-shadow .18s}
.ka-tekst:focus{outline:none;border-color:var(--km-accent);
  box-shadow:0 0 0 3.5px rgba(23,118,126,.13)}
.ka-tekst::placeholder{color:#B3AC9C}
.ka-note{margin:9px 0 16px;font-size:11.5px;color:var(--km-svag);line-height:1.55;
  display:flex;gap:8px;align-items:flex-start}
.ka-note svg{flex:none;margin-top:1.5px}

.ka-send{width:100%;border:none;border-radius:15px;padding:15px;
  background:linear-gradient(150deg,#17545A,var(--km-dybest));color:#F3EFE6;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 14px 28px -14px rgba(15,63,68,.5);
  transition:transform .25s var(--km-fjeder),box-shadow .25s,filter .2s}
.ka-send:hover{transform:translateY(-2px);filter:brightness(1.06)}
.ka-send:active{transform:translateY(0) scale(.985)}
.ka-send:disabled{opacity:.75;cursor:default;transform:none}
.ka-send .snurre{width:16px;height:16px;border-radius:50%;
  border:2.2px solid rgba(243,239,230,.35);border-top-color:#F3EFE6;
  animation:kaSpin .7s linear infinite}
@keyframes kaSpin{to{transform:rotate(360deg)}}

/* takke-tilstanden */
.ka-tak{text-align:center;padding:14px 4px 4px}
.ka-tak svg{display:block;margin:0 auto 14px}
.ka-tak .cirkel{stroke-dasharray:166;stroke-dashoffset:166;
  animation:kaTegn .6s var(--km-let) .1s forwards}
.ka-tak .flue{stroke-dasharray:40;stroke-dashoffset:40;
  animation:kaTegn .4s var(--km-let) .55s forwards}
@keyframes kaTegn{to{stroke-dashoffset:0}}
.ka-tak h3{margin:0 0 6px;font-size:20px;font-weight:750;letter-spacing:-.02em;
  color:var(--km-blaek)}
.ka-tak p{margin:0 auto 18px;max-width:340px;font-size:13.5px;line-height:1.6;
  color:var(--km-tekst)}
.ka-tak .demo-maerke{display:inline-block;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.12em;color:var(--km-svag);
  border:1px dashed var(--km-kant);border-radius:999px;padding:5px 12px;margin-bottom:18px}
.ka-takluk{border:1.5px solid var(--km-kant);background:#fff;border-radius:13px;
  padding:11px 26px;font-family:inherit;font-size:14px;font-weight:650;
  color:var(--km-blaek);cursor:pointer;transition:border-color .18s,transform .2s var(--km-fjeder)}
.ka-takluk:hover{border-color:var(--km-accent);transform:translateY(-1px)}

/* ---------- toast ---------- */
.km-toast{position:fixed;left:50%;bottom:96px;z-index:660;
  transform:translate(-50%,16px);opacity:0;
  background:var(--km-dybest);color:#F3EFE6;border-radius:999px;
  padding:11px 20px;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;pointer-events:none;
  box-shadow:0 16px 34px -14px rgba(15,63,68,.55);
  transition:transform .35s var(--km-fjeder),opacity .25s ease}
.km-toast.vis{transform:translate(-50%,0);opacity:1}
.km-toast svg{flex:none}

@media (prefers-reduced-motion:reduce){
  .km,.km-punkt,.ka,.ka-chip,.km-toast{transition-duration:.01s!important}
  .ka-tak .cirkel,.ka-tak .flue{animation-duration:.01s!important}
}

/* --- to ting, produktionen har brug for -----------------------------
   .mangler   feltet blinker, naar man trykker send uden at have skrevet
   .fejl      notelinjen bliver til fejlbeskeden, i stedet for at der
              dukker en ny raekke op og flytter knappen under fingeren */
.ka-tekst.mangler{border-color:#E2604F;animation:ka-ryst .34s ease}
@keyframes ka-ryst{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.ka-note.fejl{color:#A8341F}
.ka-note.fejl svg{stroke:#A8341F}
.ka-frist{font-size:12.5px;opacity:.7;margin-top:6px}