#character-visuals {
    align-self: flex-end;
}

#info-body {
    gap: calc(var(--gap) * 2);
    width: 100%;
    min-width: 0;
}

.input-row-split {
    justify-content: space-between;
    min-width: 0;

    > .column {
        min-width: 0;
    }
}

.checkbox-split {
    justify-content: space-around;

    .checkbox-input label {
        font-size: 15pt;
    }
}

.range-input-column {
    width: 100%;
    min-width: 0;
}

#character-info {
    margin-bottom: calc(var(--gap));

    .input-row {
        gap: calc(var(--gap) / 2);

        label {
            margin-bottom: 0;
            margin-top: 9px;
        }

        input[type="text"] {
            flex: 1 1 auto;
            font-size: 20pt;
            /*text-align: center;*/
        }
    }
}

#character-body {
    --radio-group-width: calc((17.5px * 5) + (2px * 4));

    .radio-input-container {
        flex: 0 1 var(--radio-group-width);
    }

    input[type="text"] {
        flex: 0 1 var(--radio-group-width);
        min-width: 0;
    }

    .input-row-left-column .input-row label {
        flex-basis: 9ch;
    }
    .input-row-right-column .input-row label {
        flex-basis: 7ch;
    }
}

#character-skills {
    .input-row label {
        flex-basis: 17ch;
    }
}

#character-mind {
    .input-row-left-column .input-row label {
        flex-basis: 12ch;
    }
    .input-row-right-column .input-row label {
        flex-basis: 8ch;
    }

    .range-input label {
        font-size: 14pt;
        flex: 0 0 8.5ch;
    }
}

#character-social {
    .input-row-left-column .input-row label {
        flex-basis: 8.5ch;
    }
    .input-row-mid-column .input-row label,
    .input-row-right-column .input-row label {
        flex-basis: 10ch;
    }

    .range-input label {
        font-size: 14pt;
        flex: 0 0 8ch;
    }
}

#character-beliefs {
    .input-row label {
        flex-basis: 12ch;
    }
}

#character-priorities {
    .input-row-left-column .input-row label {
        flex-basis: 7ch;
    }
    .input-row-right-column .input-row label {
        flex-basis: 13ch;
    }
}

@media (min-width: 768px) {
    #info-body {
        flex: 1 1 0;
        width: auto;
        gap: var(--gap);
    }

    .input-row-split {
        flex-direction: row;
        gap: var(--gap);
    }

    #character-info {
        .info-split-row {
            flex-direction: row;
            gap: var(--gap);

            .left-info-column {
                flex: 1 1 35%;
                min-width: 0;
            }
            .right-info-column {
                flex: 1 1 65%;
                min-width: 0;
            }
        }

        .input-row {
            font-size: 20pt;
            label {
                margin-top: 0;
            }
        }
    }

    #character-mind,
    #character-social {
        .range-input label,
        .checkbox-input label {
            font-size: 16pt;
        }
    }

    #character-mind {
        .range-input label {
            flex: 0 0 11ch;
        }
    }

    #character-social {
        .range-input .left-label {
            flex: 0 0 8.5ch;
        }
        .range-input .right-label {
            flex: 0 0 10.5ch;
        }

        .range-checkbox-left-column {
            flex: 1 1 65%;
            min-width: 0;
        }
        .range-checkbox-right-column {
            flex: 1 1 35%;
            min-width: 0;
        }
    }

    #character-priorities {
        .input-row-right-column .input-row label {
            flex-basis: 16ch;
        }
    }
}