@layer components {
    .profile {
        display: grid;
        gap: calc(var(--block-space) * 2);
        margin: 0 auto;
        max-inline-size: min(100ch, 100%);

        @media (min-width: 960px) {
            grid-template-columns: 1fr 1.2fr;
            align-items: start;
        }
    }

    .profile__panel {
        display: flex;
        flex-direction: column;
        gap: var(--block-space-double);
    }

    .profile__identity {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--block-space-half);
        text-align: center;
    }

    .profile__avatar {
        --avatar-size: 7ch;

        font-size: var(--text-small);

        @media (min-width: 960px) {
            --avatar-size: 8ch;

            font-size: var(--text-large);
        }
    }

    .profile__name {
        font-size: var(--text-x-large);
        line-height: 1.2;
    }

    .profile__name-form {
        display: flex;
        flex-direction: column;
        gap: var(--block-space);
    }

    .profile__field {
        display: flex;
        flex-direction: column;
        gap: calc(var(--block-space) / 4);
    }

    .profile__label {
        font-size: var(--text-small);
        font-weight: 600;
        color: var(--color-ink-dark);
    }

    .profile__signout {
        border-block-start: 1px solid var(--color-ink-lighter);
        padding-block-start: var(--block-space);
    }

    .profile__preferences {
        display: flex;
        flex-direction: column;
        gap: var(--block-space);
    }

    .profile__prefs-header {
        p {
            margin-block-start: 0.2em;
        }
    }

    /* Compact grid: label | options per row */
    .profile__unit-grid {
        display: grid;
        gap: 0.6em 1.5em;
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .profile__unit-label {
        color: var(--color-ink-dark);
        font-family: var(--font-data);
        font-size: var(--text-small);
        font-weight: 600;
        letter-spacing: 0.02em;
        text-align: end;
    }

    .profile__unit-options {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

    .profile__unit-btn {
        border: 1px solid var(--color-ink-lighter);
        border-radius: 0.35em;
        color: var(--color-ink);
        cursor: pointer;
        font-family: var(--font-data);
        font-size: var(--text-small);
        font-weight: 600;
        padding: 0.25em 0.65em;
        transition: background-color 100ms ease-out, border-color 100ms ease-out;
        user-select: none;

        @media (any-hover: hover) {
            &:hover {
                background-color: var(--color-ink-lightest);
            }
        }
    }

    .profile__unit-btn--active {
        background-color: var(--color-ink);
        border-color: var(--color-ink);
        color: var(--color-ink-inverted);

        @media (any-hover: hover) {
            &:hover {
                background-color: var(--color-ink-dark);
            }
        }
    }
}