/* Spørgeskemaer (sporgeskemaer.js): listen, lærredet, sidepanelet og forhåndsvisningen.
   Visningen (.sk-v-*) står i sporgeskema-visning.css - de udgivne sider bruger den samme fil. */
.sk-daempet, .sk-editor .hint, .sk-panel .hint, .sk-forhaand .hint { color: var(--daempet); font-size: .85rem; }
.sk-lille { font-size: .85rem; }
.sk-maerke { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 1rem; border: 1px solid var(--kant); color: var(--daempet); white-space: nowrap; }
.sk-maerke.god { color: var(--god); border-color: var(--god); }
.sk-maerke[data-status="aendret"] { color: var(--advarsel); border-color: var(--advarsel); }
.sk-handlinger { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.sk-kort-liste h3 { margin: 0 0 .4rem; font-size: 1rem; }
.sk-kort-liste p { margin: .2rem 0; }
.sk-kort-liste .sk-handlinger { justify-content: flex-start; margin-top: .5rem; }
.sk-listebesked { margin-bottom: .6rem; }

/* editoren */
.sk-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.sk-titel { margin: 0; font-size: 1.15rem; }
.sk-tilbage { white-space: nowrap; }
.sk-besked { margin: .2rem 0 .4rem; }
.sk-fejlboks { border: 1px solid var(--kant); border-radius: .6rem; padding: .6rem .8rem; margin-bottom: .8rem; background: var(--flade); }
.sk-fejlboks.ok { border-color: var(--god); color: var(--god); }
.sk-fejlboks.har-fejl { border-color: var(--fejl); }
.sk-fejlboks.har-fejl > strong { color: var(--fejl); }
.sk-fejlboks ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.sk-fejlboks .sk-advarsler { color: var(--advarsel); }

.sk-arbejde { position: relative; display: grid; grid-template-columns: 1fr; gap: .8rem; }
.sk-arbejde.med-panel { grid-template-columns: 1fr minmax(18rem, 26rem); }
.sk-laerred { position: relative; overflow: hidden; min-height: 28rem; height: 70vh; border: 1px solid var(--kant); border-radius: .6rem; cursor: grab; touch-action: none;
  background-color: var(--bund); background-image: radial-gradient(var(--kant) 1px, transparent 1px); background-size: 18px 18px; }
.sk-laerred.traekker { cursor: grabbing; }
.sk-flade { transform-origin: 50% 0; padding: 1.5rem 1rem 4rem; }
.sk-kolonne { display: flex; flex-direction: column; align-items: center; }
.sk-start { font-size: .8rem; font-weight: 600; color: var(--daempet); padding: .2rem .8rem; border: 1px dashed var(--kant); border-radius: 1rem; background: var(--flade); }
.sk-kant { position: relative; width: 2px; height: 3rem; background: var(--kant); }
.sk-kant.tom { background: repeating-linear-gradient(var(--fejl) 0 4px, transparent 4px 8px); }
.sk-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--kant); background: var(--flade); color: var(--farve); font: 600 1rem/1 inherit; cursor: pointer; padding: 0; }
.sk-plus:hover, .sk-plus:focus-visible { border-color: var(--farve); }
.sk-trin { display: grid; gap: .2rem; width: min(22rem, 80vw); text-align: left; font: inherit; color: var(--tekst); background: var(--flade); border: 1px solid var(--kant); border-left: 4px solid var(--farve); border-radius: .6rem; padding: .6rem .8rem; cursor: pointer; }
.sk-trin.sk-slut { border-left-color: var(--god); }
.sk-trin.sk-opdeling { border-left-color: var(--advarsel); cursor: default; opacity: .85; }
.sk-trin.fejl { border-color: var(--fejl); border-left-color: var(--fejl); }
.sk-trin.aktiv { box-shadow: 0 0 0 2px var(--farve); }
.sk-trin-type { font-size: .75rem; font-weight: 600; color: var(--daempet); text-transform: uppercase; letter-spacing: .03em; }
.sk-trin-tekst { font-weight: 600; overflow-wrap: anywhere; }
.sk-trin-info { font-size: .8rem; color: var(--daempet); overflow-wrap: anywhere; }
.sk-prik { color: var(--fejl); }
.sk-oevrige-titel { margin: 2rem 0 .6rem; }
.sk-oevrige-titel ~ .sk-trin { margin-bottom: .6rem; }
.sk-zoom { position: absolute; right: .6rem; bottom: .6rem; display: flex; gap: .3rem; }
.sk-zoom .knap { min-width: 2.2rem; }

/* sidepanelet */
.sk-panel { display: grid; gap: .8rem; align-content: start; background: var(--flade); border: 1px solid var(--kant); border-radius: .6rem; padding: .9rem; max-height: 70vh; overflow: auto; }
.sk-panel h3 { margin: 0; font-size: 1rem; }
.sk-typer { display: flex; flex-wrap: wrap; gap: .3rem; }
.sk-typer .knap.valgt { border-color: var(--farve); color: var(--farve); font-weight: 600; }
.sk-valgene { display: grid; gap: .3rem; }
.sk-flueben { display: flex; align-items: center; gap: .3rem; }
.sk-flueben input { width: auto; }
.sk-egenskab { display: flex; gap: .4rem; }
.sk-svarboks { display: grid; gap: .4rem; }
.sk-svarboks .felt-titel { font-weight: 600; }
.sk-svarliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sk-svar { display: flex; align-items: center; gap: .3rem; }
.sk-svar.traekkes { opacity: .5; }
.sk-svar input[name="svar-tekst"] { flex: 1; min-width: 0; }
.sk-svar select { flex: 1; min-width: 0; }
.sk-point { width: 4.5rem; flex: none; }
.sk-greb { cursor: grab; color: var(--daempet); user-select: none; }
.sk-svar-knapper { display: inline-flex; gap: .2rem; }
.sk-panel-knapper { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; border-top: 1px solid var(--kant); padding-top: .7rem; }

/* navnedialogen og forhåndsvisningen */
.sk-navn h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
.sk-forhaand { width: min(36rem, 94vw); border: 1px solid var(--kant); border-radius: .8rem; padding: 1rem; background: var(--flade); color: var(--tekst); }
.sk-forhaand::backdrop { background: rgb(0 0 0 / .45); }
.sk-forhaand-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.sk-forhaand-resultat { margin: .8rem 0 0; }

@media (max-width: 760px) {
  .sk-arbejde.med-panel { grid-template-columns: 1fr; }
  .sk-laerred { height: 55vh; min-height: 20rem; }
  .sk-panel { max-height: none; }
  .sk-handlinger { justify-content: flex-start; }
}

/* ---------- visningen (den besøgendes side) ---------- */