body {
    height: 100vh;
}

.content {
    height: 100%;
    justify-self: center;
    align-content: center;
    max-width: 920px;
    text-align: center;
}

.section-selected-mark {
    width: .2rem;
    margin-block: .3rem;
    background-color: white;
}

.section-selected-mark-hidden {
    width: .2rem;
}

.tab-selected-mark {
    width: 90%;
    height: .2rem;
    background-color: black;
    margin: auto;
}

.tab-selected-mark-hidden {
    height: .2rem;
}

.tab-link {
    text-decoration: none;
    color: black;
    margin-inline: 2rem;
}

.mw-800 {
    max-width: 800px;
}

.mw-950 {
    max-width: 950px;
}

.mw-1200 {
    max-width: 1200px;
}

.emia-screens {
    list-style: none;
    padding-left: 0;
}

.centered-col {
    width: max-content;
    text-align: center;
}

.increased-padding {
    padding-inline: 1.5rem;
    padding-block: .5rem;
}

.medium-input {
    max-width: 300px;
}

.long-input {
    max-width: 600px;
}

.screen-editor {
    width: 800px;
}

.pointer-cursor {
    cursor: pointer;
}

/* The save button doubles as the autosave status display; reserve room for
   the longer statuses so the text changes do not resize it constantly */
#save-button {
    min-width: 10rem;
}

/* Floating deletion confirmation, anchored to the delete button by JS so
   that it overlays the page without affecting the layout */
.delete-confirmation {
    position: absolute;
    z-index: 1050;
    max-width: 320px;
    width: max-content;
}

/* Unrolled edition forms (EMIA screens, component EMIAs) */
.inline-editor-panel {
    border: 1px solid var(--bs-border-color);
    border-left: .25rem solid var(--bs-primary);
    border-radius: .5rem;
    background-color: var(--bs-gray-100);
    padding: 1.5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

/* A question option's columns are flex items sized by their content, so a
   validation message under an input would widen the input with it. Keep the
   message out of the column's intrinsic width (width 0 + min-width 100%) and
   truncate the overflow; the full text is in the message's tooltip. */
.multiple-option-question .option .invalid-feedback {
    width: 0;
    min-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Each screen element (content block or question) nested in the screen panel,
   bordered like the screen panel but subordinate to it (white card, neutral
   accent) so the elements within a screen are visually separable */
.screen-element-card {
    border: 1px solid var(--bs-border-color);
    border-left: .25rem solid var(--bs-secondary);
    border-radius: .5rem;
    background-color: var(--bs-white);
    padding: 1rem;
}

.active-icon {
    filter: invert(20%) sepia(97%) saturate(5000%) hue-rotate(210deg);
}

/* The editor's bottom action bar (save + live autosave status, back/next)
   sticks to the bottom of the viewport so it stays in view on tall editors,
   keeping the save button in its usual place. Sits above the page but below
   the delete-confirmation popup (z-index 1050). */
.editor-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    background-color: var(--bs-light);
    border-top: 1px solid var(--bs-border-color);
    padding: .75rem 0;
}

.ql-tooltip.ql-editing {
    z-index: 1040;
}

/* Content editors opened without can_edit_content: the disabled fieldset
   covers the inputs, these cover the clickable spans and divs */
fieldset.read-only-content [onclick],
fieldset.read-only-content .btn {
    pointer-events: none;
    opacity: .65;
}