.ts-survey-form {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

[data-question] {
    margin: 0 0 2em 0;
}

    [data-question] > h3 {
    }

    [data-question] > div {
        margin: 0 0 1em 0;
    }

.ts-survey-text input,
.ts-survey-date input,
.ts-survey-email input,
.ts-survey-number input,
.ts-survey-dropdown select,
.ts-survey-textarea textarea,
.ts-survey-submit {
    border: 1px solid #ccc;
    border-radius: .25em;
    box-sizing: border-box;
    padding: .5em;
}


/*[data-question] input:focus,
[data-question] select:focus,
[data-question] textarea:focus,
[data-question] .dateTimePicker span:focus,
.ts-survey-submit:focus
{
    outline: 1px solid #000;
}*/


.ts-survey-text input {
    width: 100%;
    max-width: 1000px;
}

.ts-survey-textarea textarea {
    width: 100%;
    max-width: 1000px;
    height: 10em;
}




.ts-survey-radio ul,
.ts-survey-checkbox ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.ts-survey-radio li,
.ts-survey-checkbox li {
    display: flex;
    align-items: center;
}

.ts-survey-radio input[type="radio"],
.ts-survey-checkbox input[type="checkbox"] {
    margin: .4em .6em;
    padding: 0;
}


.ts-survey-radio {
}

.ts-survey-checkbox {
}



.ts-survey-dropdown {
}

.ts-survey-number {
}

.ts-survey-range {
}

.ts-survey-email input {
    width: 100%;
    max-width: 1000px;
}

.ts-survey-date .dateTimePickerInputSkin {
    width: calc(8em + 50px);
}

.ts-survey-date .dateTimeBlock {
    width: calc(8em + 15px);
}


.ts-survey-submit {
    padding: .5em 1em;
}

/* Fejl ved et spørgsmål (reglernes "påkrævet" og "gyldigt svar") og ved indsendelse. Virker med og uden typografi:
   farven er typografiens --sv-error, ellers en dæmpet rød. Ikonet gør, at fejlen ikke kun vises med farve. */
.ts-survey-error,
.survey-post-error {
    color: var(--sv-error, #b03a2e);
    font-size: .9em;
    font-weight: 600;
}

.ts-survey-error {
    margin: .35em 0 0 0;
}

    .ts-survey-error::before,
    .survey-post-error::before {
        content: "\26A0\FE0E\00A0";
    }

section[data-question] :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--sv-error, #b03a2e);
    outline: 2px solid color-mix(in srgb, var(--sv-error, #b03a2e) 35%, transparent);
    outline-offset: 1px;
}

section[data-question] :is([role="radiogroup"], [role="group"])[aria-invalid="true"] {
    border-left: 3px solid var(--sv-error, #b03a2e);
    padding-left: .5em;
}


/* ---------------------------------------------------------------------------------------------------------------
   Typografiark til spørgeskemaet. Vælges på relationen (visningstype Spørgeskema → Typografi) eller arves fra
   listesiden (første fane); klassen survey-look og survey-look-<navn> sættes på skemaets container. Uden valg sættes
   ingen klasse, og skemaet ser ud som før. Farverne kommer fra de fælles typografier i Tangora.Public.Looks.css
   (--lk-*); et site justerer med --ts-look-* eller, som hidtil, --survey-*.
   --------------------------------------------------------------------------------------------------------------- */

.survey-look {
    --sv-bg: var(--lk-bg);
    --sv-surface: var(--lk-surface);
    --sv-text: var(--lk-text);
    --sv-muted: var(--lk-muted);
    --sv-line: var(--lk-line);
    --sv-accent: var(--lk-accent);
    --sv-accent-text: var(--lk-accent-text);
    --sv-selected: var(--lk-selected);
    --sv-focus: var(--lk-focus);
    --sv-error: var(--lk-error);
    --sv-radius: var(--lk-radius);
    --sv-border: var(--lk-border);
    --sv-gap: var(--lk-gap);
    --sv-size: var(--lk-size);
}

.survey-look-dark {
    color-scheme: dark;
    padding: 1.5em;
    border-radius: var(--sv-radius);
}

/* Fælles for alle ark (to klasser, så de vinder over grundreglerne ovenfor). */
.survey-look {
    color: var(--sv-text);
    background: var(--sv-bg);
    font-size: var(--sv-size);
    line-height: 1.5;
}

    .survey-look .ts-survey-form {
        padding: 0;
    }

    .survey-look [data-question] {
        margin: 0 0 var(--sv-gap) 0;
    }

        .survey-look [data-question] > h3 {
            font-size: 1.05em;
            font-weight: 600;
            line-height: 1.35;
            margin: 0 0 .5em 0;
            color: var(--sv-text);
        }

            .survey-look [data-question] > h3 + div {
                color: var(--sv-muted);
                font-size: .92em;
                margin: -.25em 0 .75em 0;
            }

    .survey-look .ts-survey-text input,
    .survey-look .ts-survey-date input,
    .survey-look .ts-survey-email input,
    .survey-look .ts-survey-number input,
    .survey-look .ts-survey-dropdown select,
    .survey-look .ts-survey-textarea textarea,
    .survey-look .ts-survey-month select {
        font: inherit;
        color: var(--sv-text);
        background: var(--sv-surface);
        border: var(--sv-border) solid var(--sv-line);
        border-radius: calc(var(--sv-radius) * .6);
        padding: .6em .75em;
    }

    .survey-look input:focus-visible,
    .survey-look select:focus-visible,
    .survey-look textarea:focus-visible,
    .survey-look .ts-survey-submit:focus-visible {
        outline: 3px solid var(--sv-focus);
        outline-offset: 1px;
        border-color: var(--sv-accent);
    }

    .survey-look .ts-survey-radio li,
    .survey-look .ts-survey-checkbox li {
        border: var(--sv-border) solid var(--sv-line);
        border-radius: calc(var(--sv-radius) * .6);
        background: var(--sv-surface);
        margin: 0 0 .4em 0;
        padding: .3em .5em;
    }

        .survey-look .ts-survey-radio li:hover,
        .survey-look .ts-survey-checkbox li:hover,
        .survey-look .ts-survey-radio li:has(input:checked),
        .survey-look .ts-survey-checkbox li:has(input:checked) {
            background: var(--sv-selected);
        }

        .survey-look .ts-survey-radio li:has(input:checked),
        .survey-look .ts-survey-checkbox li:has(input:checked) {
            border-color: var(--sv-accent);
        }

    .survey-look input[type="radio"],
    .survey-look input[type="checkbox"],
    .survey-look input[type="range"] {
        accent-color: var(--sv-accent);
    }

    .survey-look input[type="radio"],
    .survey-look input[type="checkbox"] {
        width: 1.1em;
        height: 1.1em;
    }

    .survey-look input[type="range"] {
        width: 100%;
        max-width: 32em;
    }

    .survey-look .ts-survey-submit {
        font: inherit;
        font-weight: 600;
        color: var(--sv-accent-text);
        background: var(--sv-accent);
        border: var(--sv-border) solid var(--sv-accent);
        border-radius: var(--sv-radius);
        padding: .75em 1.5em;
        cursor: pointer;
    }

        .survey-look .ts-survey-submit:hover {
            filter: brightness(1.08);
        }

        .survey-look .ts-survey-submit:disabled {
            opacity: .6;
            cursor: default;
        }

    .survey-look .ts-survey-group {
        background: var(--sv-surface);
        border: var(--sv-border) solid var(--sv-line);
        border-radius: var(--sv-radius);
        padding: 1.25em 1.5em;
        margin: 0 0 var(--sv-gap) 0;
    }

        .survey-look .ts-survey-group > h3 {
            font-size: 1.25em;
            font-weight: 700;
            margin: 0 0 1em 0;
        }

    .survey-look > p {
        background: var(--sv-surface);
        border: var(--sv-border) solid var(--sv-line);
        border-radius: var(--sv-radius);
        padding: 1em 1.25em;
    }

    .survey-look .survey-post-error,
    .survey-look .survey-load-error,
    .survey-look [id^="validationerror_"] {
        color: var(--sv-error);
    }

/* Dæmpet: fladt, ingen kort; grupper adskilles med en streg, svarmuligheder uden rammer. */
.survey-look-muted .ts-survey-group {
    background: transparent;
    border: 0;
    border-top: var(--sv-border) solid var(--sv-line);
    border-radius: 0;
    padding: 1.25em 0 0 0;
}

.survey-look-muted .ts-survey-radio li,
.survey-look-muted .ts-survey-checkbox li {
    border-color: transparent;
    background: transparent;
    padding: .15em 0;
}

/* Høj kontrast: understregede overskrifter og tydelig markering af det valgte. */
.survey-look-contrast [data-question] > h3 {
    font-weight: 700;
}

.survey-look-contrast .ts-survey-radio li:has(input:checked),
.survey-look-contrast .ts-survey-checkbox li:has(input:checked) {
    outline: 2px solid var(--sv-text);
}

/* Matrix: skalaen som kolonneoverskrifter og ét valg pr. række. Hver række har sine egne labels (skjult, når der er
   kolonner); er matrixen for smal til kolonner, stables rækkerne, og labels vises ved knapperne. */
.ts-survey-matrix {
    container-type: inline-size;
}

.ts-survey-matrix-head,
.ts-survey-matrix-row {
    display: grid;
    grid-template-columns: minmax(8em, 2fr) repeat(var(--ts-matrix-cols, 5), minmax(2.75em, 1fr));
    align-items: center;
    column-gap: .5em;
}

.ts-survey-matrix > .ts-survey-matrix-top {
    margin: 0;
}

/* Teksterne ved skalaens ender: under første og sidste overskrift, eller som én linje, når matrixen er smal. */
.ts-survey-matrix-end {
    display: block;
    margin-top: .15em;
    font-size: .85em;
    opacity: .8;
}

.ts-survey-matrix-ends {
    display: none;
    margin: .2em 0 .4em 0;
    font-size: .85em;
    color: var(--sv-muted, inherit);
}

.ts-survey-matrix-head {
    font-size: .85em;
    text-align: center;
    color: var(--sv-muted, inherit);
    padding: 0 0 .4em 0;
}

.ts-survey-matrix-row,
.survey-look [data-question].ts-survey-matrix-row {
    margin: 0;
    padding: .45em .4em;
    border-top: 1px solid var(--sv-line, #e3e6e8);
}

.ts-survey-matrix-choices {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(var(--ts-matrix-cols, 5), minmax(2.75em, 1fr));
    grid-template-columns: subgrid;
    column-gap: .5em;
}

/* Rækken under musen eller med fokus markeres, så øjet kan følge den ud til knappen. */
.ts-survey-matrix-row:focus-within {
    background: var(--sv-selected, color-mix(in srgb, currentColor 6%, transparent));
}

.ts-survey-matrix-head {
    padding-left: .4em;
    padding-right: .4em;
}

/* [data-question] > div giver luft under kontrollerne; ikke i en matrixrække */
.ts-survey-matrix-row > div {
    margin: 0;
}

.ts-survey-matrix-choices-cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .35em;
}

    .ts-survey-matrix-choices-cell input {
        margin: .3em;
    }

    .ts-survey-matrix-choices-cell label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

.ts-survey-matrix-row > .ts-survey-error,
.ts-survey-matrix-row > .ts-survey-answer {
    grid-column: 2 / -1;
}

@container (max-width: 34em) {
    .ts-survey-matrix-head {
        display: none;
    }

    .ts-survey-matrix-ends {
        display: block;
    }

    .ts-survey-matrix-row {
        display: block;
    }

    .ts-survey-matrix-choices {
        display: flex;
        flex-wrap: wrap;
        gap: .2em 1em;
        margin-top: .3em;
    }

    .ts-survey-matrix-choices-cell {
        justify-content: flex-start;
    }

        .ts-survey-matrix-choices-cell label {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip: auto;
            white-space: normal;
        }
}

/* NPS: 0-10 som knapper med teksterne for enderne under. */
.ts-survey-nps-wrap {
    container-type: inline-size;
    max-width: 40em;
}

.ts-survey-nps-choices {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: .25em;
}

.ts-survey-nps-choices-cell {
    position: relative;
}

    .ts-survey-nps-choices-cell input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .ts-survey-nps-choices-cell label {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5em;
        border: 1px solid var(--sv-line, #c7cdd1);
        border-radius: calc(var(--sv-radius, 6px) * .6);
        background: var(--sv-surface, #fff);
        color: var(--sv-text, inherit);
        cursor: pointer;
    }

    .ts-survey-nps-choices-cell input:checked + label {
        background: var(--sv-accent, #2f6f8f);
        border-color: var(--sv-accent, #2f6f8f);
        color: var(--sv-accent-text, #fff);
        font-weight: 600;
    }

    .ts-survey-nps-choices-cell input:focus-visible + label {
        outline: 3px solid var(--sv-focus, #2f6f8f);
        outline-offset: 2px;
    }

.ts-survey-nps-ends {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-top: .3em;
    font-size: .85em;
    color: var(--sv-muted, inherit);
}

@container (max-width: 22em) {
    .ts-survey-nps-choices {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Radioknapper tegnes selv (kun i skemaet, ikke i kurven): en ring i tekstfarven, prik i accentfarven, når den er
   valgt, og en svag prik ved hover. NPS-knapperne har deres egne (usynlige) radioer. */
.ts-survey-form input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1.1em;
    height: 1.1em;
    margin: .3em .5em;
    padding: 0;
    vertical-align: middle;
    color: inherit; /* currentColor = tekstfarven, ikke feltets egen (sort i mørk typografi) */
    border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

    .ts-survey-form input[type="radio"]::before {
        content: "";
        width: .55em;
        height: .55em;
        border-radius: 50%;
        background: var(--sv-accent, currentColor);
        opacity: 0;
        transform: scale(.4);
        transition: opacity .12s ease, transform .12s ease;
    }

    .ts-survey-form input[type="radio"]:checked {
        border-color: var(--sv-accent, currentColor);
    }

        .ts-survey-form input[type="radio"]:checked::before {
            opacity: 1;
            transform: scale(1);
        }

    .ts-survey-form input[type="radio"]:focus-visible {
        outline: 3px solid var(--sv-focus, color-mix(in srgb, currentColor 35%, transparent));
        outline-offset: 2px;
    }

    .ts-survey-form input[type="radio"][aria-invalid="true"] {
        border-color: var(--sv-error, #b03a2e);
    }

.survey-look-contrast .ts-survey-form input[type="radio"] {
    border: 2px solid var(--sv-text);
}

.ts-survey-form .ts-survey-nps-choices-cell input[type="radio"] {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
}

    .ts-survey-form .ts-survey-nps-choices-cell input[type="radio"]::before {
        display: none;
    }

/* ---------------------------------------------------------------------------------------------------------------
   Hover: et svagt signal på det, der kan klikkes. Kun på enheder med mus (ikke "hængende" hover efter et tryk på en
   touchskærm); fokus er stadig den tydelige markering. Uden typografi bruges currentColor, så det passer til sitets
   egne farver (også mørke sites); typografierne bruger deres --sv-* og Høj kontrast markerer med mere end farve.
   --------------------------------------------------------------------------------------------------------------- */
@media (hover: hover) {
    .ts-survey-radio label,
    .ts-survey-checkbox label,
    .ts-survey-radio input,
    .ts-survey-checkbox input,
    .ts-survey-matrix-choices-cell,
    .ts-survey-matrix-choices-cell input {
        cursor: pointer;
    }

    /* Sidens standard */
    .ts-survey-text input:hover,
    .ts-survey-date input:hover,
    .ts-survey-email input:hover,
    .ts-survey-number input:hover,
    .ts-survey-dropdown select:hover,
    .ts-survey-textarea textarea:hover,
    .ts-survey-month select:hover {
        border-color: color-mix(in srgb, currentColor 45%, transparent);
    }

    .ts-survey-matrix-row:hover {
        background: var(--sv-selected, color-mix(in srgb, currentColor 6%, transparent));
    }

    .ts-survey-nps-choices-cell input:hover + label {
        border-color: var(--sv-accent, currentColor);
        background: var(--sv-selected, color-mix(in srgb, currentColor 6%, transparent));
    }

    .ts-survey-form input[type="radio"]:hover:not(:checked)::before {
        opacity: .28;
        transform: scale(1);
    }

    .survey-look-contrast .ts-survey-form input[type="radio"]:hover:not(:checked)::before {
        opacity: .45;
    }

    .ts-survey-nps-choices-cell input:checked:hover + label {
        background: var(--sv-accent, #2f6f8f);
    }

    /* Typografierne (Moderne, Dæmpet, Mørk, Høj kontrast): svarmulighederne har deres egen hover ovenfor i arket */
    .survey-look .ts-survey-radio li:hover,
    .survey-look .ts-survey-checkbox li:hover {
        border-radius: calc(var(--sv-radius) * .6);
    }

    .survey-look .ts-survey-text input:hover,
    .survey-look .ts-survey-date input:hover,
    .survey-look .ts-survey-email input:hover,
    .survey-look .ts-survey-number input:hover,
    .survey-look .ts-survey-dropdown select:hover,
    .survey-look .ts-survey-textarea textarea:hover,
    .survey-look .ts-survey-month select:hover {
        border-color: color-mix(in srgb, var(--sv-accent) 60%, var(--sv-line));
    }

    /* Dæmpet: svarmuligheder uden rammer får kun en tone */
    .survey-look-muted .ts-survey-radio li:hover,
    .survey-look-muted .ts-survey-checkbox li:hover {
        border-color: transparent;
    }

    /* Høj kontrast: understregning og ramme, ikke kun farve */
    .survey-look-contrast .ts-survey-radio li:hover,
    .survey-look-contrast .ts-survey-checkbox li:hover {
        outline: 2px dashed var(--sv-text);
        outline-offset: -2px;
    }

        .survey-look-contrast .ts-survey-radio li:hover label,
        .survey-look-contrast .ts-survey-checkbox li:hover label,
        .survey-look-contrast .ts-survey-matrix-row:hover .ts-survey-matrix-label {
            text-decoration: underline;
        }

    .survey-look-contrast .ts-survey-nps-choices-cell input:hover + label {
        outline: 2px dashed var(--sv-text);
        outline-offset: 1px;
    }

    .survey-look-contrast .ts-survey-text input:hover,
    .survey-look-contrast .ts-survey-date input:hover,
    .survey-look-contrast .ts-survey-email input:hover,
    .survey-look-contrast .ts-survey-number input:hover,
    .survey-look-contrast .ts-survey-dropdown select:hover,
    .survey-look-contrast .ts-survey-textarea textarea:hover,
    .survey-look-contrast .ts-survey-month select:hover {
        border-color: var(--sv-text);
        box-shadow: 0 0 0 1px var(--sv-text);
    }
}

/* Besked om anonyme skemaer øverst i skemaet (Survey.js, S.anonymous). */
.ts-survey-anonymous {
    margin: 0 0 1.25em 0;
    font-size: .9em;
    color: var(--sv-muted, inherit);
}
/* Sider ("Vis grupper som sider"): hver gruppe er en side med Næste/Tilbage og fremdrift øverst. Siderne skjules kun
   (klassen ts-survey-offpage), så svar og regler virker som på én side. Uden typografi bruges neutrale farver. */
.ts-survey-offpage,
.ts-survey-form [hidden] {
    display: none !important;
}

.ts-survey-progress {
    margin: 0 0 1em;
}

.ts-survey-progress-text {
    margin: 0 0 .35em;
    font-size: .9em;
    color: var(--sv-muted, #5b6770);
}

    .ts-survey-progress-text:focus {
        outline: none;
    }

.ts-survey-progress-bar {
    height: .4em;
    border-radius: 999px;
    background: var(--sv-line, #e2e6e9);
    overflow: hidden;
}

.ts-survey-progress-fill {
    height: 100%;
    width: 0;
    background: var(--sv-accent, #2f6f8f);
    transition: width .2s ease;
}

.ts-survey-pager {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: 1em;
}

    /* :not(#sd) counts as an id (as in the editor and against layout boxes' #layoutboxN button), so these win */
    .ts-survey-form .ts-survey-pager button:not(#sd) {
        font: inherit;
        border: 1px solid #ccc;
        border-radius: .25em;
        padding: .5em 1em;
        background: #fff;
        color: #222; /* the site's button styles may set white text */
        cursor: pointer;
    }

    .ts-survey-form .ts-survey-pager .ts-survey-next:not(#sd) {
        margin-left: auto;
    }

    .survey-look .ts-survey-form .ts-survey-pager button:not(#sd) {
        border: var(--sv-border) solid var(--sv-line);
        border-radius: var(--sv-radius);
        padding: .75em 1.5em;
        background: var(--sv-surface);
        color: var(--sv-text);
    }

    .survey-look .ts-survey-form .ts-survey-pager .ts-survey-next:not(#sd) {
        font-weight: 600;
        color: var(--sv-accent-text);
        background: var(--sv-accent);
        border-color: var(--sv-accent);
    }

    .survey-look .ts-survey-form .ts-survey-pager button:focus-visible:not(#sd) {
        outline: 3px solid var(--sv-focus);
        outline-offset: 1px;
    }

/* Send står til højre som Næste, når skemaet har sider */
.ts-survey-pager + .ts-survey-submit {
    display: block;
    margin-left: auto;
    margin-top: 1em;
}