form{
    --grow: 1;
    --size: calc(var(--base-size) * var(--grow));
    --button-size: calc(var(--size) * 3);
    --gap: var(--base-size);
}


form :has(.hint-button)
{
    display: flex;
    flex-wrap: wrap;
}

form :has(.hint-button) > *
{
    transition: all .5s var(--base-easing);
}

form :has(.hint-button) > :not(.hint-button):not(.message-display)
{
    flex-basis: 100%;
}

form :has(.hint-button.show) > :not(.hint-button):not(.message-display)
{
    flex-basis: calc(100% - (var(--button-size) + var(--base-size)));
}

form .hint-button::before,
form .message-display
{
    --font-size: var(--size);
    border-radius: 100px;
    background-color: var(--alert);
    color: var(--background);
}

form .hint-button::before
{
    --fm-size-ratio: var(--vg-ns-size-ratio);
    content: '\2c';
    font-family: var(--vg-ns);
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    font-size: var(--adjusted-font-size);
    line-height: 1;
    height: calc(var(--size) * 3);
}

form .message-display
{
    padding: 0 calc(var(--size) * 2);
    box-sizing: border-box;
    max-height: 0;
    margin-top: 0;
}

form .message-display.show
{
    padding: calc(var(--size) * .5) calc(var(--size) * 2);
    max-height: 200px;
    margin-top: var(--gap);
}

form .hint-button
{
    max-width: 0;
    overflow: hidden;
    margin-left: 0;
    cursor: pointer;
}

form .hint-button.show
{
    max-width: var(--button-size);
    margin-left: var(--gap);
}

form .hint-button[aria-expanded='true']::before
{
    content: '\6d';
}