/*
 * Mission Type description display.
 *
 * The field is a 400 x 400 square. Long BLOB text scrolls inside the field
 * rather than expanding the Mission Data section.
 */

.mission-description-cell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    max-width: 100%;
    margin: 12px auto;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--panel-border, #555);
    background: var(--panel-bg, #202020);
}

.mission-description-cell > h3 {
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--panel-border, #555);
    font-size: 1rem;
    text-align: center;
}

.mission-description-content {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--panel-border, #444);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text, #f2f2f2);
    font: inherit;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
}

.mission-description-content[data-state="empty"] {
    display: grid;
    place-items: center;
    color: var(--muted, #b8b8b8);
    text-align: center;
}

.adv-mission-app .mission-configuration-layout
    > .mission-description-cell {
    grid-column: 1 / -1;
    justify-self: center;
}

.mission-data-collapsed .mission-description-cell {
    display: none;
}

@media (max-width: 430px) {
    .mission-description-cell {
        width: calc(100vw - 30px);
        height: calc(100vw - 30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mission-description-content {
        scroll-behavior: auto;
    }
}