div.survey-editor div.item-deck {
    display: block;
    max-width: var(--content-width);
    margin: 1em;
    padding: 1em;
    border: 1px solid var(--etch-color);
    border-radius: 0.5em;
    overflow: clip;
}
div.survey-editor div.item-deck > div.toolbar {
    margin: -1em;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--etch-color);
    background-color: var(--etch-color);
}
div.survey-editor div.item-deck > div.toolbar > button, div.survey-editor div.item-deck > div.toolbar > label, div.survey-editor div.item-deck > div.toolbar > span, div.survey-editor div.item-deck > div.toolbar > label > select {
    background: none;
    border: none;
    color: black;
    border-radius: 0;
    display: inline-block;
    padding: 0.5em;
}
div.survey-editor div.item-deck > div.toolbar > button, div.survey-editor div.item-deck > div.toolbar > label:not(:has(> select)), div.survey-editor div.item-deck > div.toolbar > label > select {
    font-weight: normal;
    cursor: pointer;
}
div.survey-editor div.item-deck > div.toolbar > button:hover, div.survey-editor div.item-deck > div.toolbar > label:hover {
    background-color: var(--etch-highlight-color);
}
div.survey-editor div.item-deck > div.toolbar > label > input {
    display: inline;
    margin: 0;
    cursor: inherit;
}
div.survey-editor div.item-deck > div.toolbar > span.title {
    font-weight: bold;
}
div.survey-editor div.item-deck > div.toolbar > label > select {
    padding: 0;
}

div.survey-editor:not(:has(input[name="deck_view"]#deck-view-empty:checked)) .view-empty {
    display: none !important;
}
div.survey-editor:not(:has(input[name="deck_view"]#deck-view-items:checked)) .view-items {
    display: none !important;
}

div.survey-editor:not(:has(input[name="entities_view"]#entities-view-explain:checked)) .view-explain {
    display: none !important;
}
div.survey-editor:not(:has(input[name="entities_view"]#entities-view-next:checked)) .view-next {
    display: none !important;
}

div.survey-editor:not(:has(input[name="entity_sort_view"]#entity-sort-view-texts:checked)) .view-texts {
    display: none !important;
}
div.survey-editor:not(:has(input[name="entity_sort_view"]#entity-sort-view-nexts:checked)) .view-nexts {
    display: none !important;
}

div.survey-editor:not(:has(input[name="end_view"]#end-view-meta:checked)) .view-meta {
    display: none !important;
}
div.survey-editor:not(:has(input[name="end_view"]#end-view-submitted:checked)) .view-submitted {
    display: none !important;
}

div.survey-editor {
    display: grid;
    overflow: visible; /* big yikes but necesary to make the nav work nicely, TODO come up with a better way */
    grid-template: max-content max-content / 31em max-content;
    gap: 0;
}
div.survey-editor div.survey-pane {
    border-right: 1px solid var(--etch-color);
    grid-area: 2 / 1 / span 1 / span 1;
    padding-right: 1em;
    width: var(--content-width);
}
div.survey-editor nav {
    grid-area: 1 / 1 / span 1 / span 2;
}
div.survey-editor div.editor-pane {
    grid-area: 2 / 2 / span 1 / span 1;
    padding-left: 1em;
}

div.survey-editor div.survey-pane input[type=text], div.survey-editor div.survey-pane input[type=number] {
    box-shadow: none !important;
    border: none !important;
    display: block;
}
div.survey-editor input.h1 {
    font-size: 1.3em;
    width: 100%;
}
div.survey-editor input[type=text]:hover, div.form.survey-editor textarea:hover, div.survey-editor input.sorting-label-agree:hover, div.survey-editor input.sorting-label-zero:hover, div.survey-editor input.sorting-label-disagree:hover {
    cursor: text;
    background-color: var(--etch-color);
}
div.survey-editor div.ldsl-item input[type=text]:hover, div.survey-editor div.ldsl-item input[type=number]:hover {
    background-color: var(--slip-border-color);
}
div.survey-editor div.ldsl-item input[type=number] {
    background: none;
    display: inline;
    field-sizing: content;
    border-bottom: 1px solid var(--slip-border-color) !important;
}
div.form.survey-editor textarea {
    background: none;
    border: none;
    resize: none;
    display: block;
    overflow: clip;
    width: 100%;
    field-sizing: content;
}


div.survey-editor input.sorting-label-agree, div.survey-editor input.sorting-label-zero, div.survey-editor input.sorting-label-disagree {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--drawn-color);
    font-size: smaller;
    field-sizing: content;
    background: none;
}

div.survey-editor input.sorting-label-agree {
    margin-bottom: 1em;
    text-align: left;
}
div.survey-editor input.sorting-label-zero {
    text-align: center;
}
div.survey-editor input.sorting-label-disagree {
    margin-top: 1em;
    text-align: right;
}
div.survey-editor hr {
    border: none;
    border-top: 1px solid var(--drawn-color);
}

div.survey-editor:not(:has(nav.wizard input#page-sort:checked)) .on-page-sort {
    display: none !important;
}
div.survey-editor:not(:has(nav.wizard input#page-intro:checked)) .on-page-intro {
    display: none !important;
}
div.survey-editor:not(:has(nav.wizard input#page-entities:checked)) .on-page-entities {
    display: none !important;
}
div.survey-editor:not(:has(nav.wizard input#page-entity-sort:checked)) .on-page-entity-sort {
    display: none !important;
}
div.survey-editor:not(:has(nav.wizard input#page-end:checked)) .on-page-end {
    display: none !important;
}

div.survey-editor:not(:has(select[name=schema_intro_page_auth_type] option[value=None]:checked)) .view-auth-none {
    display: none !important;
}
div.survey-editor:not(:has(select[name=schema_intro_page_auth_type] option[value=PollerID]:checked)) .view-auth-pollerid {
    display: none !important;
}
div.survey-editor:not(:has(select[name=schema_intro_page_auth_type] option[value=Login]:checked)) .view-auth-login {
    display: none !important;
}

div.survey-editor div.survey-pane input[type=text].inline-editable-label {
    display: inline;
    width: fit-content;
    field-sizing: content;
}