.caesar-cipher__content {
    display: grid;
    gap: var(--tool-gap);
}

.caesar-cipher__panel {
    width: 100%;
}

.caesar-cipher__form,
.caesar-cipher__settings,
.caesar-cipher__fields {
    display: grid;
    gap: var(--tool-gap);
}

.caesar-cipher__form {
    grid-template-columns: 1fr;
}

.caesar-cipher__settings {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: start;
}

.caesar-cipher__quick-action {
    display: grid;
    grid-template-rows: 1lh auto;
    gap: 0.4rem;
    align-self: start;
}

.caesar-cipher__quick-action::before {
    content: '';
}

.caesar-cipher__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.caesar-cipher__field {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.caesar-cipher__hint {
    margin: -0.1rem 0 0;
    line-height: 1.5;
}

.caesar-cipher__field textarea {
    flex: 1 1 auto;
    min-height: 16rem;
    resize: vertical;
    line-height: 1.5;
}

.caesar-cipher__field textarea[readonly] {
    background: var(--color-surface-muted);
}

.caesar-cipher__actions {
    justify-content: flex-end;
}

.caesar-cipher__panel > .tool-status {
    margin: 1rem 0 0;
}

@media (min-width: 48.0625rem) {
    @supports (grid-template-rows: subgrid) {
        .caesar-cipher__fields {
            grid-template-rows: auto auto minmax(16rem, auto);
        }

        .caesar-cipher__field {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
        }

        .caesar-cipher__field > .tool-label {
            grid-row: 1;
        }

        .caesar-cipher__field > .caesar-cipher__hint {
            grid-row: 2;
        }

        .caesar-cipher__field > textarea {
            grid-row: 3;
            height: 100%;
            min-height: 0;
        }
    }
}

@media (max-width: 48rem) {
    .caesar-cipher__settings,
    .caesar-cipher__fields {
        grid-template-columns: 1fr;
    }

    .caesar-cipher__quick-action {
        grid-template-rows: auto;
        gap: 0;
        justify-self: start;
    }

    .caesar-cipher__quick-action::before {
        display: none;
    }

    .caesar-cipher__field textarea {
        min-height: 12rem;
    }

    .caesar-cipher__actions {
        justify-content: stretch;
    }
}