.profile-card{
    background: var(--brand-primary);
    color: var(--surface-subtle);
    border-radius: 10px;
    margin: auto;
    padding: 20px 30px;
    border: 1px solid rgb(219, 219, 219);
    width: 60vw;
    min-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
/* Status text legible on the navy .profile-card (light variants, ~7:1 on var(--brand-primary)) */
.profile-card .status-open   { color: #5fd38a; font-weight: bolder; }
.profile-card .status-closed { color: #ff8f8f; font-weight: bolder; }
.profile-card p{
    font-size: 14px;
}

.profile-pic-popup {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.journal-pic-popup {
    width: 150px !important;
    max-height: 400px;
    object-fit: cover;
}

/* For Webkit browsers (Chrome, Safari, newer versions of Opera, etc.) */
.profile-card::-webkit-scrollbar {
    width: 12px;
}

.profile-card::-webkit-scrollbar-track {
    background: #e8e8e8;
    border-radius: 10px;
}

.profile-card::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 10px;
    border: 4px solid #e8e8e8;
}

.profile-card::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* The dialog's close control (M5a, #210): top-right of the card. .popup-profile-content
   is position: fixed (base.css / review.css), so absolute is relative to it. */
.popup-profile-close {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 1;
    padding: 2px 8px;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;             /* the card is navy (--brand-primary): white, not the muted grey */
    opacity: 0.85;
    cursor: pointer;
}

.popup-profile-close:hover,
.popup-profile-close:focus-visible {
    opacity: 1;
}

.popup-profile-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}