#page-profile .profile-new-memory-btn.btn-new-memory.profile-lists-trigger { background: var(--button-new-memory-bg) !important; color: var(--bg, #F7F5EB) !important; height: 44px !important; min-height: 44px !important; padding: 10px 20px 10px 16px !important; font-size: 14px !important; }
.profile-lists-dialog {
    width: min(960px, calc(100vw - 48px)); max-width: none;
    max-height: min(820px, calc(100dvh - 64px)); margin: auto; padding: 0;
    border: 0; border-radius: 24px; background: var(--bg, #F7F5EB); color: #171717;
    box-shadow: 0 24px 90px #0003; font-family: var(--font-body); overflow: auto;
}
.profile-lists-dialog::backdrop { background: rgb(0 0 0 / 25%); }
.profile-lists-dialog[open] { display: flex; flex-direction: column; }
.profile-lists-dialog > * { flex-shrink: 0; }
.profile-lists-dialog button, .profile-lists-dialog input { font: inherit; }
.profile-lists-dialog button { cursor: pointer; }
.profile-lists-dialog button:focus-visible, .profile-lists-dialog input:focus-visible { outline: 2px solid #7256b5; outline-offset: 3px; }
.profile-lists-dialog button:disabled { opacity: .45; cursor: wait; }
.pl-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 32px 24px; border-bottom: 1px solid #ededed; }
.pl-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #76717f; }
.pl-header h2 { margin: 5px 0 0; font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 1.05; }
.pl-close, .pl-remove { display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; width: 44px; height: 44px; background: #f4f4f4; color: #171717; font-size: 28px !important; }
.pl-workspace { display: grid; grid-template-columns: 33% minmax(0, 1fr); min-height: 420px; }
.pl-sidebar { background: #faf9fc; padding: 24px 16px; border-right: 1px solid #ededed; }
.pl-sidebar-heading { display: flex; align-items: center; gap: 8px; padding: 0 12px 18px; font-size: 13px; font-weight: 600; }
.pl-total { border-radius: 20px; background: #eeebf2; padding: 2px 7px; font-size: 11px; }
.pl-list-nav { display: flex; flex-direction: column; gap: 8px; }
.pl-list-item { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; width: 100%; border: 1px solid transparent; border-radius: 999px; color: inherit; background: transparent; }
.pl-list-item[aria-current="true"] { background: var(--bg, #F7F5EB); border-color: #ddd5ee; box-shadow: 0 3px 10px #30204006; }
.pl-list-item > span:last-child { min-width: 0; }
.pl-list-item strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.pl-list-item small { display: block; font-size: 11px; color: #757079; margin-top: 5px; }
.pl-list-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; }
.pl-list-icon svg { width: 24px; height: 24px; }
.pl-color-0 { background: #e9e0f7; color: #55378a; }
.pl-color-1 { background: #ffead9; color: #a04721; }
.pl-color-2 { background: #def0db; color: #377036; }
.pl-new { width: 100%; margin-top: 16px; background: #000; border: 1px solid #000; padding: 13px 10px; border-radius: 999px; color: var(--bg, #F7F5EB); font-size: 13px !important; font-weight: var(--button-font-weight) !important; }
.pl-detail { padding: 28px 32px; min-width: 0; }
.pl-empty { min-height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pl-empty h3, .pl-new-view h3 { font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 1.1; margin: 20px 0 12px; }
.pl-empty p, .pl-new-view > p { font-size: 13px; line-height: 1.8; max-width: 380px; color: #716b78; margin: 0 0 24px; }
.pl-people-art { display: flex; padding-right: 20px; }
.pl-people-art span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 4px solid white; margin-right: -20px; background: #e9e0f7; color: #543387; }
.pl-people-art span:nth-child(2) { background: #ffddcf; color: #98543f; transform: translateY(-10px); }
.pl-people-art span:nth-child(3) { background: #e2edd2; color: #4a6d38; }
.pl-people-art svg { width: 28px; height: 28px; }
.pl-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.pl-suggestion { padding: 10px 14px; border: 1px solid #e6e2eb; border-radius: 24px; background: var(--bg, #F7F5EB); font-size: 12px !important; color: #45384f; }
.pl-primary, .pl-secondary, .pl-danger { min-height: 44px; padding: 11px 20px; border-radius: 24px; border: 1px solid #161616; background: #161616; color: var(--bg, #F7F5EB); font-size: 12px !important; font-weight: var(--button-font-weight) !important; }
.pl-secondary { border-color: #ddd; background: var(--bg, #F7F5EB); color: #252525; }
.pl-danger { background: #b72a25; border-color: #b72a25; margin-left: 8px; }
.pl-detail-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 20px; }
.pl-member-count { font-size: 11px; color: #726778; background: #f5f1fa; border-radius: 20px; padding: 5px 10px; }
.pl-name-form label, .pl-add-form label, .pl-create-form label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.pl-name-form > div, .pl-add-row { display: flex; align-items: center; gap: 8px; }
.pl-name-form input, .pl-create-form input, .profile-lists-dialog .memory-text-field { width: 100%; min-width: 0; height: 46px; border: 1px solid #dedbe3; border-radius: 999px; padding: 10px 16px; background: var(--bg, #F7F5EB); color: #171717; font-size: 14px; }
.pl-name-form button, .pl-add-row > button { flex: 0 0 auto; }
.pl-add-form { margin-top: 24px; }
.pl-add-row .invitation-email-picker { flex: 1; min-width: 0; }
.pl-members { margin-top: 24px; }
.pl-member { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f0eef3; }
.pl-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--bg, #F7F5EB); }
.pl-member-name { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.pl-member-name strong { display: block; font-size: 12px; font-weight: 500; }
.pl-member-name small { display: block; font-size: 11px; margin-top: 3px; color: #79717d; }
.pl-remove { background: none; font-size: 23px !important; color: #79717d; }
.pl-member-empty { padding: 24px 12px; border-radius: 999px; background: #faf9fc; font-size: 12px; color: #777; text-align: center; line-height: 1.7; }
.pl-delete-area { margin-top: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pl-delete-area p { width: 100%; }
.pl-save { margin-left: auto; }
.pl-delete-area p { font-size: 12px; line-height: 1.7; margin-bottom: 12px; }
.pl-delete-list { background: none; border: 0; color: #867b87; text-decoration: underline; text-underline-offset: 3px; font-size: 11px !important; min-height: 44px; }
.pl-new-view { padding: 16px 0; }
.pl-create-form { max-width: 380px; }
.pl-create-form button { margin-top: 20px; }
.pl-footer { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #eee; padding: 18px 32px; font-size: 11px; color: #7a7382; line-height: 1.6; }
.pl-status:empty { display: none; }
.pl-status { color: #493660; }
@media(max-width: 600px) {
    .profile-lists-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 32px); border-radius: 20px; }
    .pl-header { padding: 22px 20px 18px; }
    .pl-header h2 { font-size: 22px; }
    .pl-workspace { display: flex; flex-direction: column; min-height: 0; }
    .pl-sidebar { padding: 14px; border-right: 0; border-bottom: 1px solid #eee; }
    .pl-sidebar-heading { padding: 0 4px 10px; }
    .pl-list-nav { flex-direction: row; overflow-x: auto; }
    .pl-list-item { flex: 0 0 auto; width: 180px; padding: 10px; }
    .pl-new { margin-top: 10px; padding: 11px; }
    .pl-detail { padding: 24px 20px; }
    .pl-empty { min-height: 270px; }
    .pl-empty h3, .pl-new-view h3 { font-size: 22px; }
    .pl-name-form > div { align-items: stretch; flex-direction: column; }
    .pl-name-form button { align-self: flex-end; }
    .pl-footer { padding: 16px 20px; }
    .profile-lists-dialog input { font-size: 16px !important; }
    .pl-primary, .pl-secondary { padding: 11px 16px; }
}

/* Match the shared pill buttons and circular people icons. */
.profile-lists-dialog button { border-radius: 999px; text-transform: uppercase; letter-spacing: var(--button-letter-spacing); font-weight: var(--button-font-weight) !important; }
.pl-list-item small { text-transform: none; letter-spacing: normal; }
.profile-lists-dialog .pl-add-person { display: grid; place-items: center; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #000 !important; color: var(--bg, #F7F5EB) !important; flex: 0 0 44px; }
.pl-add-person svg { width: 26px; height: 26px; }
.profile-lists-dialog .pl-save { background: #eef0ef !important; border-color: #eef0ef; color: #666 !important; }
.profile-lists-dialog .pl-save.is-dirty { background: var(--button-new-memory-bg) !important; border-color: var(--button-new-memory-bg); color: var(--bg, #F7F5EB) !important; }
.profile-lists-dialog .pl-save:disabled { opacity: 1; cursor: default; }
@media(max-width: 768px) {
    #page-profile .memories-filter-bar .profile-lists-trigger { order: -1; margin-top: 0; margin-bottom: 8px; }
}

/* Compact labels and the same palette/typography as account controls. */
.pl-list-item > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pl-list-item strong, .pl-list-item small { margin: 0; line-height: 1.2; }
.pl-detail-top { justify-content: flex-start; gap: 8px; margin-bottom: 12px; }
.pl-list-icon { font-size: 14px; font-weight: 700; letter-spacing: 0; background: var(--bg, #F7F5EB); color: #000; box-shadow: inset 0 0 0 3px var(--pl-avatar-color, var(--primary)); }
.profile-lists-dialog .pl-delete-list, .profile-lists-dialog .pl-danger { background: #ef4444 !important; color: var(--bg, #F7F5EB) !important; border: 0; border-radius: 999px; padding: 11px 16px; min-height: 44px; text-decoration: none; }

.pl-list-item small, .pl-member-count { font-weight: 400; }
.profile-lists-dialog .pl-delete-list { box-sizing: border-box; height: 32px; min-height: 32px; padding: 4px 18px; line-height: 1; }

/* Explicit line boxes avoid inherited button leading in group initials. */
.pl-list-icon { line-height: 1; text-align: center; }
.pl-group-initials { display: block; line-height: 1; }
@media (max-width: 768px) {
    .pl-group-initials, .pl-user-initial { transform: translateY(1px); }
}

/* Shared list picker in co-author and publishing settings. */
.memory-contact-picker { margin: 12px 0 16px; }
.memory-contact-toggle { display: inline-flex; gap: 10px; align-items: center; }
.memory-contact-options { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; margin-top: 10px; padding: 8px; border-radius: 20px; background: #f7f7f7; font-size: 13px; line-height: 1.5; }
.memory-contact-options[hidden] { display: none; }
.memory-edit-dialog .memory-contact-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--bg, #F7F5EB) !important; color: #111 !important; text-align: left; }
.memory-contact-choice > span:last-child { min-width: 0; }
.memory-contact-choice strong { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
.memory-contact-choice small { display: block; font-size: 11px; font-weight: 400; }
.memory-contact-choice:disabled { opacity: .45; cursor: default; }
.memory-contact-feedback { font-size: 12px; line-height: 1.5; margin: 8px 0 0; }
.memory-contact-feedback:empty { display: none; }

.memory-contact-heading { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; text-align: center; font-size: 13px; }
.memory-contact-feedback { text-align: center; }

.pl-list-item { padding-top: 8px; padding-bottom: 8px; padding-left: 9px; }
.memory-publishing-dialog .memory-publishing-person { padding-top: 6px; padding-bottom: 6px; min-height: 52px; }
/* The circle action has the same surface before interaction and in every state,
   including when rendered outside the settings dialog. */
button.btn-outline.memory-contact-toggle,
button.btn-outline.memory-contact-toggle:is(:hover, :focus, :focus-visible, :active) {
    -webkit-appearance: none; appearance: none;
    background: var(--button-new-memory-bg, #00b252) !important;
    color: var(--bg, #F7F5EB) !important; border-color: var(--button-new-memory-bg, #00b252);
    justify-content: center; max-width: 100%;
}
.memory-contact-toggle > span { min-width: 0; }
.memory-contact-icon, .memory-contact-chevron { display: block; flex-shrink: 0; align-self: center; }
.memory-contact-chevron { width: 24px; height: 24px; }