.personal-widget {
    border-radius: var(--radius-base-8);
    box-shadow: 10px 10px 33px -4px #0000000f,
    -10px -10px 33px -4px #0000000f,
    -10px 10px 33px -4px #0000000f,
    10px -10px 33px -4px #0000000f;
    padding: 0;
    margin-bottom: 20px;
}

.personal-widget-person {
    position: relative;
}

.personal-widget-toggle {
    position: absolute;
    bottom: 0;
    left: 0;
    appearance: none;
    height: 0;
    opacity: 0;
    width: 0;
}

.personal-widget .personal-widget-duties-button .personal-widget-control {
    user-select: none;
    cursor: pointer;
}
.personal-widget .personal-widget-duties-button .toggle-arrow::before {
    font-family: var(--font-material-icon-outlined);
    font-size: 24px;
    text-align: center;
}
.personal-widget .personal-widget-duties-button .duties-button-text-expand.toggle-arrow::before {
    content: "\e313";
}
.personal-widget .personal-widget-duties-button .duties-button-text-collapse.toggle-arrow::before {
    content: "\e316";
}

.personal-widget-person:has(.personal-widget-toggle:focus-visible) .personal-widget-control {
    border-radius: 8px;
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.personal-widget-person {
    .duties-button-text-expand {
        display: flex;
        visibility: visible;
    }
    .duties-button-text-collapse {
        display: none;
        visibility: hidden;
    }
}
.personal-widget-person:has(.personal-widget-toggle:checked) {
    .duties-button-text-expand {
        display: none;
        visibility: hidden;
    }
    .duties-button-text-collapse {
        display: flex;
        visibility: visible;
    }
}

.personal-widget:has(.personal-widget-toggle:checked) .duties {
    position: relative;
    display: block;
    padding: 33px 0 2rem;
}

.personal-widget .duties {
    position: relative;
    display: none;
    margin: 0;
}
.personal-widget .duties::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 33px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .06), transparent);
    pointer-events: none;
}
.personal-widget .personal-widget-toggle:checked ~ .duties {
    position: relative;
    display: block;
    padding: 33px 0 2rem;
}

.personal-widget .duties ol {
    display: block;
    margin: 0 2rem;
    list-style: decimal outside;
    padding-left: 20px;
}
.personal-widget .duties li {
    font-size: var(--font-base-size);
    font-weight: 500;
    line-height: var(--font-base-line-height);
    padding-left: 12px;
    padding-bottom: 12px;
}
.personal-widget .duties li:last-of-type {
    padding-bottom: 0;
}
.personal-widget .duties li::marker {
    font-size: var(--font-base-size);
    font-weight: 700;
    line-height: var(--font-base-line-height);
}

@media all and (min-width: 0px) {
    .personal-widget > .personal-widget-person {
        display: flex;
        flex-flow: column wrap;
        justify-content: left;
        align-items: stretch;
        gap: 32px;
        padding: 2rem;
    }

    .personal-widget .personal-widget-person > div {
        flex: 37.5%;
    }

    .personal-widget .personal-widget-person .separator-line {
        flex-basis: 0;
        border-bottom: 1px solid var(--border-neutral-secondary);
        border-left: none;
    }

    .personal-widget .personal-widget-person .personal-widget-details > div {
        margin-bottom: 20px;
    }
    .personal-widget .personal-widget-person .personal-widget-details > div:last-of-type {
        margin-bottom: 0;
    }

    .personal-widget .personal-widget-person .personal-widget-photo {
        flex-basis: 25%;
        text-align: right;
    }
    .personal-widget .personal-widget-person .personal-widget-photo img {
        width: 100%;
        border-radius: var(--radius-base-4);
        aspect-ratio: 3/4;
        object-fit: cover;
    }

    .personal-widget-person .personal-widget-duties-button.btn1 {
        display: none;
        visibility: hidden;
    }
    .personal-widget-person .personal-widget-duties-button.btn2 {
        display: inherit;
        visibility: inherit;
    }
}

@media all and (min-width: 576px) {
    .personal-widget > .personal-widget-person {
        display: flex;
        flex-flow: row nowrap;
        justify-content: left;
        align-items: stretch;
        gap: 32px;
        padding: 2rem;
    }

    .personal-widget .personal-widget-person .personal-widget-fullname {
        height: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
    }
    .personal-widget .personal-widget-person .personal-widget-fullname > div {
        width: 100%;
    }
    .personal-widget .personal-widget-person .personal-widget-fullname > div.btn-container {
        align-self: flex-end;
    }

    .personal-widget .personal-widget-person .separator-line {
        flex-basis: 0;
        border-left: 1px solid var(--border-neutral-secondary);
        border-bottom: none;
    }

    .personal-widget .personal-widget-duties-button .personal-widget-control {
        width: auto;
        display: inline-block;
    }
    .personal-widget-person .personal-widget-duties-button.btn1 {
        display: inherit;
        visibility: inherit;
    }
    .personal-widget-person .personal-widget-duties-button.btn2 {
        display: none;
        visibility: hidden;
    }
}