.private-message-status {
    position: fixed; bottom: 12px; right: 12px; z-index: 30000;
    max-width: min(540px, calc(100vw - 24px)); box-sizing: border-box;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 12px; border: 1px solid #777; border-radius: 12px;
    color: #111; background: #fff4cf; box-shadow: 0 4px 18px #0004;
}
.private-message-status[hidden] { display: none; }
.private-message-status span { flex: 1 1 240px; }
.private-message-status button { width: auto; }
/* =========================================================
   ANONYMOUS TIP
   COMPLETE STYLESHEET
   FIXED SIDEBAR + INDEPENDENT RIGHT-SIDE SCROLL
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

/* Keep the live page hidden while its isolated navigation snapshot animates. */
@layer page-genie-visibility;
@layer page-genie-visibility {
    .content-area[data-page-genie-pending],
    .content-area[data-page-genie-pending] * {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}
/* Important button lettering takes precedence over individual palettes. */
@layer button-letter-color;
@layer profile-action-layout;
@layer cancel-button-palette;
@layer dropdown-arrow-sizing;
@layer post-dropdown-spacing;
@layer attached-post-options;
@layer page-content-spacing;

/* One inset per page: wrappers must not add a second gutter around sections.
   Keep widths available to the scrollbar's measured clearance rules. */
@layer page-content-spacing {
    :root { --page-content-gap: 16px; }
    .content-area > .page > .scroll-area {
        box-sizing: border-box;
        padding: var(--page-content-gap) !important;
    }
    .page > .scroll-area > :is(
        .site-settings-content, .help-page-content, .legal-document,
        .finance-page-content, .activity-monitor-content,
        .uploads-page-content, .profile-settings-page-content, #profileContent
    ) {
        box-sizing: border-box;
        min-width: 0;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Settings uses separate wrappers for sign-in, backup, and account sections. */
    #settings > .scroll-area > .site-settings-content:not([hidden]) ~ .site-settings-content:not([hidden]) {
        margin-top: var(--page-content-gap) !important;
    }
    :is(.site-settings-content, .help-page-content, .legal-document) > :is(.settings-card, .settings-section),
    :is(#expandedSettings, #helpTopics, #safetyTopics) > .settings-section {
        margin-block: var(--page-content-gap) !important;
        margin-inline: 0 !important;
    }
    :is(.site-settings-content, .help-page-content, .legal-document, #expandedSettings, #helpTopics, #safetyTopics)
        > :nth-child(1 of :not([hidden])) {
        margin-top: 0 !important;
    }
    :is(.site-settings-content, .help-page-content, .legal-document, #expandedSettings, #helpTopics, #safetyTopics)
        > :nth-last-child(1 of :not([hidden])) {
        margin-bottom: 0 !important;
    }
    :is(.finance-page-content, .activity-monitor-content, .notifications-list,
        .messages-layout, .posted-requests-list, .uploads-library-list,
        #messageDraftsList, #blockedListContent, #profileSettingsContent,
        .contacts-dual-grid, .contact-directory-grid) {
        gap: var(--page-content-gap) !important;
    }
    #contactDirectory > .contact-directory-controls {
        margin-bottom: var(--page-content-gap) !important;
    }
    #financeTransactionsDetails > .finance-card + .finance-card {
        margin-top: var(--page-content-gap) !important;
    }
    #profileSettingsContent { padding-bottom: 0 !important; }
    #messages > .scroll-area { --messages-scroll-top-padding: var(--page-content-gap); }
    /* Fill the available page width while retaining the responsive column count. */
    .profile-photo-columns { grid-template-columns: minmax(0, 1fr) !important; }
    @container profile-layout (min-width: 816px) {
        .profile-photo-columns {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            height: 100cqb !important;
        }
        .profile-photo-columns > .page-column-scroll { padding-bottom: 0 !important; }
    }
    @container finance-layout (min-width: 816px) {
        .finance-dashboard-columns { height: 100cqb !important; }
        .finance-dashboard-column { padding-bottom: 0 !important; }
    }
}

/* Preserve the first post's inset while allowing section headers to stick flush. */
@layer post-dropdown-spacing {
    .page { --post-dropdown-content-inset: var(--page-content-gap, 16px); }
    .page:has(:is(.posted-fulfillment-dropdown-menu, .feed-post-buyers-panel, .post-message-notifications):is(:not([hidden]), [data-dropdown-motion])) > .page-header {
        margin-bottom: 0 !important;
    }
    .page:has(:is(.posted-fulfillment-dropdown-menu, .feed-post-buyers-panel, .post-message-notifications):is(:not([hidden]), [data-dropdown-motion])) > .scroll-area {
        padding-top: calc(var(--post-dropdown-content-inset) + var(--page-section-gap, 20px)) !important;
    }
    .page :is(.posted-fulfillment-dropdown-menu, .feed-post-buyers-panel, .post-message-notifications) > :is(.post-response-header, .post-notifications-header) {
        top: calc(0px - var(--post-dropdown-content-inset) - var(--page-section-gap, 20px)) !important;
    }
    .page-column-scroll :is(.feed-post-buyers-panel, .post-message-notifications) > :is(.post-response-header, .post-notifications-header) {
        top: 0 !important;
    }
}

@layer dropdown-arrow-sizing {
    :root {
        --dropdown-arrow-size: 11px;
        --dropdown-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%23373737' d='M0 2.5h11L5.5 8.5z'/%3E%3C/svg%3E");
    }
    html[data-appearance="night"] { --dropdown-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%23F8EEEC' d='M0 2.5h11L5.5 8.5z'/%3E%3C/svg%3E"); }
    html.user-high-contrast { --dropdown-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%23000000' d='M0 2.5h11L5.5 8.5z'/%3E%3C/svg%3E"); }
    .site-dropdown-arrow,
    :is(.feed-message-action-button, .profile-message-button, #newMessageButton, .feed-post-notifications-button)[aria-expanded]::after,
    .post-message-composer .post-message-close::after,
    .finance-transactions-toggle::before {
        box-sizing: border-box !important;
        width: var(--dropdown-arrow-size) !important;
        min-width: var(--dropdown-arrow-size) !important;
        max-width: var(--dropdown-arrow-size) !important;
        height: var(--dropdown-arrow-size) !important;
        min-height: var(--dropdown-arrow-size) !important;
        max-height: var(--dropdown-arrow-size) !important;
        flex: 0 0 var(--dropdown-arrow-size) !important;
        font-family: Arial, sans-serif !important;
        font-size: var(--dropdown-arrow-size) !important;
        font-weight: 400 !important;
        line-height: var(--dropdown-arrow-size) !important;
        text-align: center;
        letter-spacing: normal !important;
    }
    .site-dropdown-arrow { display: inline-block; }
    details > summary::marker { font-size: var(--dropdown-arrow-size); }
    html :is(#compose, #composePost) details > summary::after {
        content: '▼' !important;
        width: var(--dropdown-arrow-size) !important;
        height: var(--dropdown-arrow-size) !important;
        flex: 0 0 var(--dropdown-arrow-size) !important;
        border: 0 !important;
        font: 400 var(--dropdown-arrow-size)/1 Arial, sans-serif !important;
        transform: rotate(0deg) !important;
    }
    html :is(#compose, #composePost) details[open] > summary::after { transform: rotate(180deg) !important; }
    select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
        appearance: none !important;
        -webkit-appearance: none !important;
        padding-inline-end: 32px !important;
        background-image: var(--dropdown-select-arrow), var(--search-face-light, linear-gradient(transparent, transparent)) !important;
        background-size: var(--dropdown-arrow-size) var(--dropdown-arrow-size), 100% 100% !important;
        background-position: right 12px center, 0 0 !important;
        background-repeat: no-repeat !important;
    }
}

/* Cancel controls share the refresh buttons' ivory face in every state. */
@layer cancel-button-palette {
    :where(.site-cancel-button, [data-cancel-button], #cancelComposePostButton,
        #cancelPostButton, .site-popup-secondary-button, .calendar-cancel,
        .repost-cancel, .draft-choice-cancel, .posted-request-cancel-button,
        .offer-payment-cancel-button, .fulfillment-cancel-button,
        .cancel-fulfillment-option, .saved-request-cancel-fulfillment-option,
        .message-edit-cancel-button, .report-form-cancel-button,
        .submitted-report-cancel-button) {
        background-color: #FFF1E6 !important;
        border-color: #FFF1E6 !important;
        color: #000000 !important;
        --readable-button-text: #000000 !important;
    }
    .post-options-menu .posted-request-cancel-button {
        background-color: transparent !important;
        border-color: transparent !important;
    }
    .post-options-menu .posted-request-cancel-button:hover:not(:disabled) {
        background-color: #eef1f4 !important;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --feed-card-spacing: 16px;
    --legend-border-width: 4px;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #222;
    background: #f4f4f4;

    overflow: hidden;
}

button,
input,
textarea,
select {
    font-family: inherit;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {
    width: 100%;
    height: 64px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 10px 20px;

    background: #fff;

    border-bottom: 1px solid #d8d8d8;

    position: relative;
    z-index: 10;

    flex-shrink: 0;
}

.top-bar h1 {
    margin: 0;
    padding: 0;

    font-size: 24px;
    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   SEARCH
========================================================= */

.search-container {
    flex: 1 1 auto;

    width: 100%;
    max-width: 600px;

    min-width: 0;
}

.search-container input {
    width: 100%;
    height: 38px;

    padding: 8px 12px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #fff;

    outline: none;
}

.search-container input:focus {
    border-color: #999;
}


/* =========================================================
   MAIN APPLICATION
   THIS IS A FIXED VIEWPORT.
   THE RIGHT CONTENT SCROLLS INSIDE IT.
========================================================= */

.app-layout {
    width: 100%;
    height: calc(100vh - 64px);

    display: flex;
    flex-direction: row;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   LEFT SIDEBAR
========================================================= */

.sidebar {
    width: 230px;
    min-width: 230px;
    max-width: 230px;

    height: 100%;

    flex: 0 0 230px;

    padding: 12px;

    background: #fff;

    border-right: 1px solid #d8d8d8;

    overflow-x: hidden;
    overflow-y: auto;

    flex-shrink: 0;
}

.sidebar nav {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.sidebar button {
    width: 100%;

    min-height: 38px;

    padding: 9px 10px;

    border: none;
    border-radius: 6px;

    background: transparent;

    color: #222;

    text-align: left;

    font-size: 14px;
    line-height: 1.25;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.sidebar button:hover {
    background: #eee;
}


/* =========================================================
   NAVIGATION DROPDOWNS
========================================================= */

.nav-dropdown {
    position: relative;

    width: 100%;
}

.nav-main-button {
    width: 100% !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    gap: 8px;
}


/* ONE UNIVERSAL ARROW */

.dropdown-arrow {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 14px;
    min-width: 14px;
    height: 14px;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;

    flex: 0 0 14px;

    transition: transform 0.15s ease;

    transform: rotate(0deg);
}


/* ALL OPEN DROPDOWNS USE THE EXACT SAME ARROW */

.nav-dropdown.open
> .nav-main-button
> .dropdown-arrow,

.nav-dropdown.open
> .nav-main-button
.dropdown-arrow {
    transform: rotate(180deg);
}


/* NAV DROPDOWN MENU */

.nav-dropdown > .dropdown-menu {
    display: none;

    width: 100%;

    padding-left: 12px;
}

.nav-dropdown.open > .dropdown-menu,
.nav-dropdown > .dropdown-menu.open {
    display: block;
}

.nav-dropdown .dropdown-menu button {
    width: 100%;

    min-height: 32px;

    padding: 7px 8px;

    font-size: 13px;
}


/* =========================================
   RIGHT CONTENT AREA
========================================= */

.content-area {
    --page-section-gap: 20px;
    --page-side-gap: 20px;

    flex: 1 1 0;

    min-width: 0;
    min-height: 0;
    height: 100%;

    padding: 20px;
    padding-top: var(--page-section-gap);

    overflow-y: scroll;
    overflow-x: hidden;
}


/* =========================================
   PAGE
========================================= */

.page {
    width: 100%;
    height: 100%;

    display: none;

    flex-direction: column;

    overflow: hidden;

    min-height: 0;
    min-width: 0;
}

.page.active {
    display: block;
}


/* =========================================
   PAGE HEADER
========================================= */

.page-header {
    flex: 0 0 auto;
}


/* =========================================
   SCROLL AREA
========================================= */

.scroll-area {
    width: 100%;
    min-width: 0;

    height: auto;
    min-height: 0;

    overflow: visible;
}


/* =========================================================
   FEEDS
========================================================= */

#publicFeed,
.profile-feed-post-list,
#followFeedContent {
    width: 100%;

    min-width: 0;

    display: block;

    overflow: visible;
}

#publicFeed > *,
.profile-feed-post-list > *,
#followFeedContent > * {
    min-width: 0;
}


/* =========================================================
   FEED LEGEND / FILTER
========================================================= */

.feed-legend,
.feed-filter,
.feed-dropdown {
    width: auto;

    max-width: 180px;

    min-width: 0;

    flex: 0 1 auto;
}


/* =========================================================
   REQUEST CARD
========================================================= */

.request-card {
    width: 100%;

    min-width: 0;

    margin: 0 0 var(--feed-card-spacing) 0;
    padding: 16px;

    background: #fff;

    border: 1px solid #d7d7d7;
    border-radius: 9px;

    display: block;
}


/* =========================================================
   POSTED REQUESTS
========================================================= */

.posted-requests-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 16px;
}

.posted-request-card {
    width: 100%;

    min-width: 0;

    padding: 20px;

    background: var(--surface, #fff);

    border: 1px solid var(--border, #d7d7d7);

    border-radius: 10px;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.06);
}

.posted-request-card h3 {
    margin: 0 0 14px;

    color: var(--primary, #222);

    font-size: 18px;
    font-weight: 650;
}

.posted-request-card p {
    margin: 8px 0;

    color: var(--text, #222);

    font-size: 14px;
    line-height: 1.5;
}

.posted-request-card strong {
    color: var(--text, #222);

    font-weight: 650;
}


/* =========================================================
   REQUEST USER
========================================================= */

.request-user {
    width: 100%;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 14px;
}

.anonymous-avatar-button {
    width: 38px !important;
    min-width: 38px !important;

    height: 38px;

    padding: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border: none !important;
    border-radius: 50% !important;

    background: #ddd !important;

    text-align: center !important;

    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    flex: 0 0 38px;
}

.anonymous-name-button {
    width: auto !important;
    min-width: 0 !important;

    padding: 4px !important;

    border: none !important;

    background: transparent !important;

    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   REQUEST CARD BODY
========================================================= */

.request-card-body {
    width: 100%;

    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        155px;

    gap: 20px;

    align-items: start;
}


/* =========================================================
   REQUEST INFORMATION
========================================================= */

.request-information {
    width: 100%;

    min-width: 0;
}

.request-information p {
    width: 100%;

    margin: 0 0 8px 0;

    line-height: 1.4;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.request-information .post-reference-title {
    margin-bottom: 0;
}

.request-information .post-reference-title + .post-description {
    margin-top: 0;
}

.request-information strong {
    font-weight: 600;
}

/* =========================================================
   PREVENT LONG TEXT / FILENAMES FROM ESCAPING PROMPT CARDS
========================================================= */

.request-card,
.posted-request-card,
.fulfilled-request-dropdown,
.fulfilled-request-item {
    min-width: 0;
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* Wrap all text inside prompt cards */

.request-card p,
.request-card span,
.request-card strong,
.request-card a,

.posted-request-card p,
.posted-request-card span,
.posted-request-card strong,
.posted-request-card a,

.fulfilled-request-dropdown p,
.fulfilled-request-dropdown span,
.fulfilled-request-dropdown strong,
.fulfilled-request-dropdown a,

.fulfilled-request-item p,
.fulfilled-request-item span,
.fulfilled-request-item strong,
.fulfilled-request-item a {
    min-width: 0;
    max-width: 100%;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* =========================================================
   REQUEST ACTIONS
========================================================= */

.request-actions {
    width: 155px;
    min-width: 155px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.request-actions button {
    width: 155px;
    min-width: 155px;

    min-height: 38px;
    height: 38px;

    padding: 8px 7px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;

    color: #222;

    font-size: 13px;
    line-height: 1.2;

    text-align: center;

    white-space: normal;

    overflow-wrap: anywhere;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.request-actions button:hover {
    background: #e8e8e8;
}


/* =========================================================
   NEW FULFILLMENT BUTTON
========================================================= */

.request-actions .new-fulfillment-button,
.saved-post-card-actions .new-fulfillment-button {

    background:
        #70193D !important;

    border-color:
        #70193D !important;

    color:
        #ffffff !important;
}


.request-actions .new-fulfillment-button:hover,
.saved-post-card-actions .new-fulfillment-button:hover {

    background:
        #70193D !important;

    border-color:
        #70193D !important;

    color:
        #ffffff !important;
}


/* =========================================================
   COMPOSE BUTTON
========================================================= */

.compose-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 160px;
    min-height: 44px;

    padding: 11px 18px;

    border: 1px solid #ccc;
    border-radius: 7px;

    background: #222;

    color: #fff;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.2;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.compose-button:hover {
    background: #444;
}

.compose-button:active {
    transform: translateY(1px);
}


/* =========================================================
   REQUEST FORM
========================================================= */

#requestForm {
    width: 100%;

    max-width: none;
    min-width: 0;

    height: auto;

    display: flex;
    flex-direction: column;

    gap: 16px;

    overflow: visible;
}

#requestForm label {
    width: 100%;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;

    font-weight: 500;
}

#requestForm input,
#requestForm textarea,
#requestForm select {
    width: 100%;

    min-width: 0;

    padding: 10px 11px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #fff;

    color: #222;

    font-size: 14px;
}

#requestForm input:focus,
#requestForm textarea:focus,
#requestForm select:focus {
    outline: none;

    border-color: #999;
}

#requestForm textarea {
    min-height: 130px;

    resize: vertical;
}


/* =========================================================
   FORM CHECKBOX
========================================================= */

#requestForm .checkbox-label {
    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 8px;
}

#requestForm .checkbox-label input {
    width: auto;

    min-width: auto;
}


/* =========================================================
   MONEY INPUT
========================================================= */

.input-with-prefix {
    width: 100%;

    display: flex;

    min-width: 0;
}

.input-prefix {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 11px;

    background: #eee;

    border: 1px solid #ccc;
    border-right: none;

    border-radius: 6px 0 0 6px;

    flex: 0 0 auto;
}

.input-with-prefix input {
    flex: 1 1 auto;

    min-width: 0;

    border-radius: 0 6px 6px 0 !important;
}


/* =========================================================
   MILES INPUT
========================================================= */

.input-with-suffix {
    width: 100%;

    display: flex;

    min-width: 0;
}

.input-with-suffix input {
    flex: 1 1 auto;

    min-width: 0;

    border-radius: 6px 0 0 6px !important;
}

.input-suffix {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 11px;

    background: #eee;

    border: 1px solid #ccc;
    border-left: none;

    border-radius: 0 6px 6px 0;

    flex: 0 0 auto;
}


/* =========================================================
   SELECTS
========================================================= */

#requestForm select,
#requestType,
#requestVisibility {
    width: 100%;
    min-width: 100%;

    height: 44px;
    min-height: 44px;

    padding: 10px 12px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #fff;

    color: #222;

    font-size: 14px;
    line-height: 1.2;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

#requestType:focus,
#requestVisibility:focus {
    outline: none;

    border-color: #999;
}


/* =========================================================
   FORM SUBMIT
========================================================= */

#requestForm > button {
    width: fit-content;

    min-width: 130px;

    padding: 10px 18px;

    border: none;
    border-radius: 6px;

    background: #222;

    color: #fff;

    font-size: 14px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

#requestForm > button:hover {
    background: #444;
}


/* =========================================================
   CONFIRMATION OVERLAY
========================================================= */

.confirmation-overlay {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.45);
}

.confirmation-box {
    width: min(420px, 100%);

    padding: 24px;

    background: #FBFBF9;

    border-radius: 10px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.25);

    text-align: center;
}

.confirmation-box h3 {
    margin: 0 0 12px;

    font-size: 20px;
}

.confirmation-box p {
    margin: 0 0 22px;
}

.confirmation-buttons {
    display: flex;

    justify-content: center;

    gap: 10px;
}

.confirmation-buttons button {
    min-width: 100px;

    padding: 10px 18px;

    border: none;
    border-radius: 6px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

#cancelPostButton {
    background: #e5e5e5;
    color: #222;
}

#confirmPostButton {
    background: #222;
    color: #fff;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-card {
    width: 100%;

    min-width: 0;

    padding: 20px;

    background: #fff;

    border: 1px solid #d7d7d7;
    border-radius: 9px;
}

.profile-avatar-button {
    padding: 0;

    border: none;

    background: transparent;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.large-anonymous-avatar {
    width: 80px;
    min-width: 80px;

    height: 80px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ddd;

    font-size: 30px;
    font-weight: 600;
}


/* =========================================================
   PROFILE HEADER
========================================================= */

.profile-header {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 20px;

    min-width: 0;
}


/* =========================================================
   PROFILE FOLLOW CONTAINER
========================================================= */

.profile-follow-container {
    width: fit-content;

    min-width: 0;

    display: inline-flex;

    flex-direction: column;

    align-items: stretch;

    position: relative;

    flex-shrink: 0;
}


/* =========================================================
   PROFILE FOLLOW BUTTON
========================================================= */

.profile-follow-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    width: 155px;
    min-width: 155px;

    height: 38px;
    min-height: 38px;

    padding: 6px 12px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #222;

    color: #fff;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.profile-follow-button:hover {
    background: #444;
}

.profile-follow-button.following {
    background: #eee;
    color: #222;
}

.profile-follow-button.following:hover {
    background: #ddd;
}


/* =========================================================
   PROFILE UNFOLLOW
========================================================= */

.profile-unfollow-option {
    display: none;

    width: 100%;

    min-width: 0;

    height: 38px;
    min-height: 38px;

    padding: 6px 12px;

    margin-top: 2px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;

    color: #222;

    font-size: 14px;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.profile-unfollow-option:hover {
    background: #e8e8e8;
}


/* =========================================================
   PROFILE ACTION BUTTONS
========================================================= */

.profile-action-buttons {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 8px;

    width: 155px;

    flex: 0 0 155px;
}

.profile-action-buttons .profile-follow-button {
    width: 155px !important;
    min-width: 155px !important;

    height: 38px;
    min-height: 38px;

    margin: 0;
}


/* =========================================================
   PROFILE MESSAGE
========================================================= */

.profile-message-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 155px !important;
    min-width: 155px !important;

    height: 38px;
    min-height: 38px;

    padding: 6px 12px;

    margin: 0;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;

    color: #222;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.profile-message-button:hover {
    background: #e8e8e8;
}


/* =========================================================
   PROFILE CREDIBILITY
========================================================= */

.profile-credibility {
    width: 100%;

    min-width: 0;

    margin-bottom: 20px;
}

.profile-card > .profile-credibility {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.72);
}

#profile .profile-card:not(.own-profile-card) > .profile-member-information {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.72);
}
#profile .profile-card:not(.own-profile-card) > .profile-member-information > h3 { margin: 0 0 10px; }
html[data-page-background="starfield"] #profile .profile-card:not(.own-profile-card) > :is(.profile-about, .profile-credibility, .profile-member-information) {
    border-top-color: #000;
}

.profile-credibility h3 {
    margin: 0 0 10px;
}

.profile-credibility p {
    margin: 6px 0;
}


/* =========================================================
   PROFILE REQUESTS
========================================================= */

.profile-requests {
    width: 100%;

    min-width: 0;
}

.profile-requests h3 {
    margin: 0 0 14px;
}


/* =========================================================
   FULFILLMENT OVERLAY
========================================================= */

.fulfill-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);

    display: flex;

    justify-content: center;
    align-items: center;

    z-index: 99999;

    padding: 20px;
}

.fulfill-form {
    width: 100%;
    max-width: 600px;

    max-height: 90vh;

    overflow-y: auto;

    padding: 30px;

    background: #FBFBF9;

    border-radius: 12px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.25);

    color: #222;
}

.fulfill-form h2 {
    margin: 0 0 25px;

    font-size: 24px;
    font-weight: 700;
}

.fulfill-form p {
    margin: 12px 0;

    line-height: 1.5;

    color: #333;
}

.fulfillment-instruction {
    margin-top: 25px !important;
    margin-bottom: 20px !important;

    padding: 15px;

    border-radius: 8px;

    background: #f5f5f5;

    color: #333;
}


/* =========================================================
   FILE UPLOAD
========================================================= */

.fulfill-form label {
    display: block;

    margin-top: 20px;
    margin-bottom: 20px;

    font-weight: 600;

    color: #222;
}

.fulfill-form input[type="file"] {
    display: block;

    width: 100%;

    margin-top: 10px;

    padding: 10px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #fff;

    color: #222;
}


/* =========================================================
   FULFILLMENT BUTTONS
========================================================= */

.fulfill-buttons {
    display: flex;

    flex-direction: row-reverse;

    justify-content: flex-start;

    align-items: center;

    gap: 10px;

    margin-top: 30px;
}

.fulfill-buttons button {
    padding: 10px 18px;

    border: none;
    border-radius: 6px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    font-size: 14px;
}

.fulfill-buttons button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* =========================================================
   FOLLOW DROPDOWN
========================================================= */

.follow-dropdown {
    position: relative;

    display: inline-flex;

    flex-direction: column;

    align-items: stretch;

    width: 155px;
    min-width: 155px;
}


/* FOLLOW BUTTON */

.follow-main-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    width: 155px;
    min-width: 155px;

    height: 38px;
    min-height: 38px;

    padding: 6px 12px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;

    color: #222;

    font-size: 14px;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.follow-main-button:hover {
    background: #e8e8e8;
}


/* FOLLOW ARROW
   SAME SIZE AS EVERY OTHER ARROW */

.follow-main-button .dropdown-arrow {
    width: 14px !important;
    min-width: 14px !important;

    height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;

    flex: 0 0 14px !important;
}


/* FOLLOW UNFOLLOW OPTION */

.follow-dropdown .unfollow-option {
    display: none;

    width: 155px;
    min-width: 155px;

    height: 38px;
    min-height: 38px;

    margin-top: 2px;

    padding: 6px 12px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;

    color: #222;

    font-size: 14px;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.follow-dropdown .unfollow-option:hover {
    background: #e8e8e8;
}

.follow-dropdown .unfollow-option[style*="block"] {
    display: flex;

    align-items: center;
    justify-content: center;
}

/* =========================================================
   UNIFORM DROPDOWN ARROWS
========================================================= */

.follow-main-button,
.save-main-button,
.fulfill-main-button {
    position: relative;

    display: flex !important;

    align-items: center;
    justify-content: center;

    padding-right: 32px !important;
}

.follow-main-button .dropdown-arrow,
.save-main-button .dropdown-arrow,
.fulfill-main-button .dropdown-arrow {
    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    margin: 0 !important;

    font-size: 10px;

    line-height: 1;
}


/* =========================================================
   SAVE / FULFILL DROPDOWNS
========================================================= */

.save-dropdown,
.fulfill-dropdown {
    width: fit-content;

    display: inline-flex;

    flex-direction: column;

    align-items: stretch;

    position: relative;
}

.save-main-button,
.unsave-option,
.fulfill-main-button,
.cancel-fulfillment-option {
    width: auto;

    min-width: 0;

    height: auto;

    padding: 6px 12px;

    margin: 0;

    font-size: 14px;

    line-height: 1.2;

    box-sizing: border-box;

    white-space: nowrap;
}

.save-main-button,
.fulfill-main-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;
}

.unsave-option,
.cancel-fulfillment-option {
    display: none;

    width: 100%;
}


/* =========================================================
   HOME
========================================================= */

#home {
    display: flex;
}


/* =========================================================
   SIGN IN
========================================================= */

#signInForm {
    width: min(500px, 100%);

    display: flex;
    flex-direction: column;

    gap: 18px;
}

#signInForm label {
    display: flex;

    flex-direction: column;

    gap: 7px;

    color: var(--text, #222);

    font-size: 14px;
    font-weight: 600;
}

#signInForm input {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid var(--border, #ccc);
    border-radius: 7px;

    background: var(--surface, #fff);

    color: var(--text, #222);

    font-size: 14px;

    outline: none;
}

#signInForm input:focus {
    border-color: var(--primary, #222);

    box-shadow:
        0 0 0 2px var(--primary-light, #eee);
}

#signInForm button[type="submit"] {
    width: auto;

    align-self: flex-start;

    padding: 11px 20px;

    border: 0;
    border-radius: 7px;

    background: var(--primary, #222);

    color: var(--button-text, #fff);

    font-size: 14px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

#signInForm button[type="submit"]:hover {
    background: var(--primary-dark, #444);
}


/* =========================================================
   CREATE ACCOUNT
========================================================= */

#createAccountForm {
    width: min(500px, 100%);

    display: flex;
    flex-direction: column;

    gap: 18px;
}

.signup-profile-image { display: grid; gap: 8px; min-width: 0; }
.signup-profile-image small { line-height: 1.5; }
.signup-profile-image-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#createProfileImagePreview { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; }
#removeCreateProfileImage { width: max-content; max-width: 100%; padding: 6px 10px; border-radius: 12px; }
#createProfileImageStatus { margin: 0; color: #9f2340; line-height: 1.5; }
.signup-profile-image [hidden] { display: none !important; }

#createAccountForm label {
    display: flex;

    flex-direction: column;

    gap: 7px;

    color: var(--text, #222);

    font-size: 14px;
    font-weight: 600;
}

#createAccountForm input {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid var(--border, #ccc);
    border-radius: 7px;

    background: var(--surface, #fff);

    color: var(--text, #222);

    font-size: 14px;

    outline: none;
}

#createAccountForm input:focus {
    border-color: var(--primary, #222);

    box-shadow:
        0 0 0 2px var(--primary-light, #eee);
}

#createAccountForm button[type="submit"] {
    width: auto;

    align-self: flex-start;

    padding: 11px 20px;

    border: 0;
    border-radius: 7px;

    background: #4f7f62;

    color: var(--button-text, #fff);

    font-size: 14px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

#createAccountForm button[type="submit"]:hover {
    background: #426b53;
}


/* =========================================================
   CREATE ACCOUNT LINK
========================================================= */

.create-account-prompt {
    margin-top: 20px;

    color: var(--muted-text, #666);

    font-size: 14px;
}

.create-account-link {
    padding: 11px 20px;

    border: 0;
    border-radius: 7px;

    background: #4f7f62;

    color: #fff;

    font-size: 14px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.create-account-link:hover {
    background: #426b53;
    color: #fff;

    text-decoration: none;
}

.create-account-link:focus-visible,
#createAccountForm button[type="submit"]:focus-visible {
    outline: 2px solid #FFE082;
    outline-offset: 3px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .sidebar {
        width: 190px;
        min-width: 190px;
        max-width: 190px;

        flex-basis: 190px;
    }

    .content-area {
        padding: 14px;
    }

    .request-card-body {
        grid-template-columns:
            minmax(0, 1fr)
            125px;

        gap: 12px;
    }

    .request-actions {
        width: 125px;
        min-width: 125px;
    }

    .request-actions button {
        width: 125px;
        min-width: 125px;

        font-size: 12px;

        padding: 8px 5px;
    }

    .follow-dropdown {
        width: 125px !important;
        min-width: 125px !important;
    }

    .follow-main-button,
    .follow-dropdown .unfollow-option,
    .profile-follow-button {
        width: 125px !important;
        min-width: 125px !important;
    }

    .profile-action-buttons {
        width: 125px;
        flex-basis: 125px;
    }

    .profile-action-buttons .profile-follow-button,
    .profile-message-button {
        width: 125px !important;
        min-width: 125px !important;
    }

    .feed-legend,
    .feed-filter,
    .feed-dropdown {
        max-width: 150px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 550px) {

    .top-bar {
        height: auto;

        min-height: 64px;

        flex-wrap: wrap;

        padding: 10px 14px;
    }

    .top-bar h1 {
        font-size: 20px;
    }

    .search-container {
        flex-basis: 100%;

        max-width: none;
    }

    .app-layout {
        height: calc(100vh - 110px);
    }

    .sidebar {
        width: 165px;
        min-width: 165px;
        max-width: 165px;

        flex-basis: 165px;

        padding: 8px;
    }

    .sidebar button {
        font-size: 12px;

        padding: 8px 6px;
    }

    .content-area {
        padding: 10px;
    }

    .request-card {
        padding: 12px;
    }

    .request-card-body {
        grid-template-columns:
            minmax(0, 1fr)
            105px;

        gap: 9px;
    }

    .request-actions {
        width: 105px;
        min-width: 105px;
    }

    .request-actions button {
        width: 105px;
        min-width: 105px;

        font-size: 11px;

        padding: 7px 4px;
    }

    .follow-dropdown {
        width: 105px !important;
        min-width: 105px !important;
    }

    .follow-main-button,
    .follow-dropdown .unfollow-option,
    .profile-follow-button {
        width: 105px !important;
        min-width: 105px !important;
    }

    .compose-button {
        min-width: 130px;

        font-size: 13px;

        padding: 9px 12px;
    }

    .profile-action-buttons {
        width: 105px;
        flex-basis: 105px;
    }

    .profile-action-buttons .profile-follow-button,
    .profile-message-button {
        width: 105px !important;
        min-width: 105px !important;
    }

    .profile-header {
        gap: 10px;
    }

    .feed-legend,
    .feed-filter,
    .feed-dropdown {
        max-width: 120px;
    }
}


/* =========================================================
   FULFILLMENT MOBILE
========================================================= */

@media (max-width: 600px) {

    .fulfill-overlay {
        padding: 10px;
    }

    .fulfill-form {
        padding: 20px;

        max-height: 95vh;
    }

    .fulfill-buttons {
        flex-direction: column;
    }

    .fulfill-buttons button {
        width: 100%;
    }
}


/* =========================================
   NOTIFICATION LIST
========================================= */

.notifications-list {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: var(--feed-card-spacing);

}


/* =========================================
   NOTIFICATION
========================================= */

.notification-item {

    width: 100%;

    padding: 16px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 9px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

}


.notification-item:hover {

    background: var(--surface-secondary);

}


.notification-item p {

    margin: 0;

    color: var(--text);

    font-size: 14px;

    line-height: 1.5;

}


.notification-time {

    margin-top: 7px !important;

    color: var(--muted-text) !important;

    font-size: 12px !important;

}


/* Unopened notifications */

.notification-item.unopened {

    border-left: 4px solid var(--primary);

}


/* Opened notifications */

.notification-item.opened {

    opacity: 0.85;

}

/* =========================================
   OPENED NOTIFICATION DETAILS
========================================= */

.notification-details-hint {

    margin-top: 9px !important;

    color: var(--primary) !important;

    font-size: 12px !important;

    font-weight: 600;

}


.notification-details {

    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px solid var(--border);

}


.notification-details[hidden] {

    display: none;

}


.notification-detail-row {

    margin: 7px 0 !important;

    color: var(--text) !important;

    font-size: 14px !important;

    line-height: 1.5;

}

.notification-detail-row strong {

    font-weight: 650;

}


.notification-item.opened:focus {

    outline: 2px solid var(--primary);

    outline-offset: 2px;

}

/* =========================================
   NOTIFICATIONS
========================================= */

.notifications-label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}


/* Unopened notification indicator */

.notification-dot {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    display: none;

    border-radius: 50%;

    background: #BC544B;

}


/* =========================================
   NOTIFICATION COUNT
========================================= */

.notification-count {

    display: none;

    min-width: 10px;

    color: #22b8be;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    text-align: left;

}


/* Show number when unopened notifications exist */

.notification-count.visible {

    display: inline-block;

}

/* =========================================
   NOTIFICATION DOT
========================================= */

.notifications-label {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}


.form-button-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.form-button-row button {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   NOTIFICATIONS SCROLL
========================================= */

#notifications.page.active {
    display: flex !important;

    flex-direction: column;

    height: 100%;

    min-height: 0;

    overflow: hidden;
}


#notifications .scroll-area {
    flex: 1 1 auto !important;

    height: auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


#notificationsList {
    width: 100%;

    padding-bottom: 40px;
}

/* =========================================================
   ROSY PLUM PAGE BACKGROUND
   Background behind feed cards and legend-tab pages
========================================================= */

#home > .scroll-area,
#activityMonitor > .scroll-area,
#userActivity > .scroll-area,
#followFeed > .scroll-area,

#notifications > .scroll-area,

#yourOffers > .scroll-area,
#fulfilledRequests > .scroll-area,
#requestDrafts > .scroll-area,

#savedOffers > .scroll-area,
#fulfilledPosts > .scroll-area,
#fulfillmentDrafts > .scroll-area,

#messages > .scroll-area,
#messageDrafts > .scroll-area,

#followList > .scroll-area,
#followers > .scroll-area,
#blocked > .scroll-area,

#profile > .scroll-area,
#signIn > .scroll-area,
#createAccount > .scroll-area,

#balance > .scroll-area,
#financeEarnings > .scroll-area,
#financeTaxInfo > .scroll-area,
#financeTransactions > .scroll-area,
#financeWithdrawals > .scroll-area,
#financeMethods > .scroll-area,
#transactionDetail > .scroll-area,

#report > .scroll-area,

#legal > .scroll-area,
#privacy > .scroll-area,
#terms > .scroll-area {

    background-image: none !important;

    background-color: #F4A384 !important;

}

/* =========================================================
   TRANSLUCENT GLASS SCROLLING ITEMS
========================================================= */

/* Public Feed + Follow Feed */
.request-card,

/* My Requests + Saved Posts + Drafts */
.posted-request-card,

/* Notifications */
.notification-item,

/* Contacts + Profile */
.profile-card,
:where(#profileContent) .profile-section-dropdown,
:where(#profileContent) .profile-gallery-section,

/* Finance */
.balance-card,

/* Fulfilled Request dropdown items */
.fulfilled-request-dropdown,

/* Individual fulfillment items */
.fulfilled-request-item {

    /* Translucent glass */
    background: rgba(255, 255, 255, 0.58) !important;

    /* Blur the turquoise cube wallpaper behind the card */
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);

    /* Rounded glass edges */
    border-radius: 18px !important;

    /* Light glass border */
    border: 1px solid rgba(255, 255, 255, 0.72) !important;

    /* Depth */
    box-shadow:
        0 8px 24px rgba(0, 70, 75, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);

    background-clip: padding-box;
}


/* =========================================================
   GLASS FOR PAGES THAT CURRENTLY CONTAIN PLAIN TEXT ITEMS
   Messages + Help + Legal
========================================================= */

#messages > .scroll-area > p,
#messageDrafts > .scroll-area > p,

#report > .scroll-area > p,

#legal > .scroll-area > p,
#privacy > .scroll-area > p,
#terms > .scroll-area > p {

    width: 100%;

    margin: 0 0 16px 0;
    padding: 20px;

    background: rgba(255, 255, 255, 0.58);

    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(0, 70, 75, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}


/* =========================================================
   NOTIFICATION HOVER
   Keep glass effect when hovering
========================================================= */

.notification-item:hover {

    background: rgba(255, 255, 255, 0.68) !important;

}


/* =========================================================
   SLIGHTLY STRONGER GLASS EDGE ON HOVER
========================================================= */

.request-card:hover,
.posted-request-card:hover,
.profile-card:hover,
:where(#profileContent) .profile-section-dropdown:hover,
:where(#profileContent) .profile-gallery-section:hover,
.fulfilled-request-dropdown:hover {

    border-color: rgba(255, 255, 255, 0.9) !important;

    box-shadow:
        0 10px 28px rgba(0, 70, 75, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* =========================================================
   COMMUNICATION THREADS
========================================================= */

.messages-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(220px, 300px)
        minmax(0, 1fr);

    gap: 16px;

    align-items: start;
}


/* =========================================
   THREAD PANEL
========================================= */

.message-threads-panel,
.message-conversation-panel {

    background:
        rgba(255, 255, 255, 0.58);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);

    backdrop-filter:
        blur(14px)
        saturate(125%);

    border:
        1px solid
        rgba(255, 255, 255, 0.72);

    border-radius: 18px;

    box-shadow:
        0 8px 24px
        rgba(0, 70, 75, 0.16),
        inset 0 1px 0
        rgba(255, 255, 255, 0.65);

    overflow: hidden;
}


.message-threads-panel {
    padding: 14px;
}


/* =========================================
   NEW MESSAGE
========================================= */

.new-message-panel {

    margin-bottom: 14px;
    padding: 14px;

    background:
        rgba(255, 255, 255, 0.62);

    border:
        1px solid
        rgba(255, 255, 255, 0.8);

    border-radius: 14px;
}


.new-message-panel label {

    display: block;

    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 600;
}


#messageRecipientSelect {

    width: 100%;

    min-height: 42px;

    margin-bottom: 8px;
    padding: 8px 10px;

    border: 1px solid #bcc7cb;
    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.82);
}


#startMessageButton {

    width: 100%;

    min-height: 40px;

    border: 0;
    border-radius: 9px;

    background: var(--primary, #1f5f8b);
    color: #ffffff;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


/* =========================================
   THREAD BUTTON
========================================= */

.message-threads-list {

    display: flex;
    flex-direction: column;

    gap: 8px;
}


.message-thread-button {

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    padding: 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.68);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.52);

    color: var(--text, #222);

    text-align: left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.message-thread-button:hover {

    background:
        rgba(255, 255, 255, 0.7);

}


.message-thread-button.active {

    border-color:
        rgba(9, 219, 219, 0.95);

    background:
        rgba(255, 255, 255, 0.8);

}


.message-thread-button strong {

    font-size: 14px;

}


.message-thread-preview {

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: var(--muted-text, #66727e);

    font-size: 13px;

}


.message-thread-time {

    color: var(--muted-text, #66727e);

    font-size: 11px;

}


/* =========================================
   CONVERSATION
========================================= */

.message-conversation-panel {

    min-width: 0;

}


.message-conversation-header {

    padding: 16px 18px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.72);

    font-size: 17px;
    font-weight: 650;
}


.message-conversation-list {

    min-height: 350px;
    max-height: 55vh;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 18px;

    overflow-y: auto;
    overflow-x: hidden;
}


/* =========================================
   MESSAGE BUBBLES
========================================= */

.message-bubble {

    width: fit-content;
    max-width: 78%;

    padding: 11px 14px;

    border-radius: 16px;

    box-shadow:
        0 3px 10px
        rgba(0, 70, 75, 0.10);
}


.message-bubble p {

    margin: 0 0 6px 0;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


.message-bubble.sent {

    align-self: flex-end;

    background:
        rgba(9, 219, 219, 0.72);

    border-bottom-right-radius: 5px;
}


.message-bubble.received {

    align-self: flex-start;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid
        rgba(255, 255, 255, 0.85);

    border-bottom-left-radius: 5px;
}


.message-meta {

    display: block;

    color:
        rgba(31, 41, 51, 0.72);

    font-size: 11px;
}


/* =========================================
   MESSAGE COMPOSER
========================================= */

.message-form {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;

    padding: 14px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.72);
}


#messageInput {

    width: 100%;

    min-height: 54px;
    max-height: 150px;

    padding: 11px 13px;

    resize: vertical;

    border:
        1px solid
        rgba(150, 170, 175, 0.75);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.78);

    color: var(--text, #222);

    font: inherit;

    outline: none;
}


#messageInput:focus {

    border-color:
        #09DBDB;

}


#sendMessageButton {

    align-self: end;

    min-height: 44px;

    padding: 10px 18px;

    border: 0;
    border-radius: 10px;

    background:
        var(--primary, #1f5f8b);

    color: #ffffff;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


#sendMessageButton:disabled {

    opacity: 0.5;

    cursor: default;
}


.message-empty {

    margin: 0;

    color:
        var(--muted-text, #66727e);

}


/* =========================================
   MOBILE MESSAGES
========================================= */

@media (max-width: 800px) {

    .messages-layout {

        grid-template-columns:
            1fr;

    }


    .message-conversation-list {

        min-height: 260px;
        max-height: none;

    }


    .message-form {

        grid-template-columns:
            1fr;

    }


    #sendMessageButton {

        width: 100%;

    }

}

/* =========================================================
   MESSAGE THREAD DROPDOWNS
========================================================= */

.message-threads-list {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 14px;

}


/* =========================================
   COMPLETE THREAD
========================================= */

.message-thread-dropdown {

    width: 100%;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.58);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);

    backdrop-filter:
        blur(14px)
        saturate(125%);

    border:
        1px solid
        rgba(255, 255, 255, 0.72);

    border-radius: 18px;

    box-shadow:
        0 8px 24px
        rgba(0, 70, 75, 0.16),
        inset 0 1px 0
        rgba(255, 255, 255, 0.65);

}


/* =========================================
   THREAD HEADER
========================================= */

.message-thread-summary {

    width: 100%;

    min-height: 72px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 15px 18px;

    cursor: default;

    list-style: none;

    user-select: none;

}


/* Hide Safari / Chrome default details arrow */

.message-thread-summary::-webkit-details-marker {

    display: none;

}


.message-thread-summary::marker {

    display: none;

    content: "";

}


/* =========================================
   LEFT SIDE OF THREAD HEADER
========================================= */

.message-thread-summary-info {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

}


.message-thread-summary-info strong {

    color:
        var(--text, #222);

    font-size: 15px;

}


.message-thread-preview {

    max-width: 600px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color:
        var(--muted-text, #66727e);

    font-size: 13px;

}


/* =========================================
   RIGHT SIDE OF THREAD HEADER
========================================= */

.message-thread-summary-right {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 12px;

}


.message-thread-time {

    color:
        var(--muted-text, #66727e);

    font-size: 11px;

}


/* =========================================
   OPEN / CLOSED THREAD BUTTON
   MATCHES ADD USERS
========================================= */

.message-thread-arrow {
    width: auto !important;
    min-width: 90px !important;

    height: 30px !important;
    min-height: 30px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 4px 9px !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(
            140,
            165,
            170,
            0.75
        ) !important;

    border-radius: 7px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        ) !important;

    color:
        var(
            --text,
            #222
        ) !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.message-thread-arrow:hover {
    background:
        rgba(
            255,
            255,
            255,
            1
        ) !important;
}


/* =========================================
   OPENED CONVERSATION
========================================= */

.message-thread-conversation {
    border-top: 0 !important;

    background: #FCB1A8;
}


/* =========================================
   MESSAGE LIST
========================================= */

.message-conversation-list {

    width: 100%;

    max-height: 500px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 18px;

    overflow-y: auto;
    overflow-x: hidden;

}


/* =========================================
   MESSAGE BUBBLES
========================================= */

.message-bubble {

    width: fit-content;

    max-width: 78%;

    padding: 11px 14px;

    border-radius: 16px;

    box-shadow:
        0 3px 10px
        rgba(0, 70, 75, 0.10);

}


.message-bubble p {

    margin: 0 0 6px 0;

    line-height: 1.45;

    overflow-wrap: anywhere;

}


/* Your messages */

.message-bubble.sent {

    align-self: flex-end;

    background:
        rgba(9, 219, 219, 0.72);

    border-bottom-right-radius:
        5px;

}


/* Their messages */

.message-bubble.received {

    align-self: flex-start;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid
        rgba(255, 255, 255, 0.85);

    border-bottom-left-radius:
        5px;

}


.message-meta {

    display: block;

    color:
        rgba(31, 41, 51, 0.70);

    font-size: 11px;

}


/* =========================================
   REPLY AREA
========================================= */

.message-form {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;

    padding: 14px 18px 18px;

}


.message-reply-input {

    width: 100%;

    min-height: 54px;
    max-height: 150px;

    padding: 11px 13px;

    resize: vertical;

    border:
        1px solid
        rgba(140, 165, 170, 0.75);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.78);

    color:
        var(--text, #222);

    font: inherit;

    outline: none;

}


.message-reply-input:focus {

    border-color:
        #09DBDB;

}


/* =========================================
   SEND BUTTON
========================================= */

.message-send-button {

    align-self: end;

    min-height: 44px;

    padding: 10px 18px;

    border: none;

    border-radius: 10px;

    background:
        var(--primary, #1f5f8b);

    color: #ffffff;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

}


/* =========================================
   OPEN THREAD
========================================= */

.message-thread-dropdown[open] {

    border-color:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 10px 30px
        rgba(0, 70, 75, 0.20),
        inset 0 1px 0
        rgba(255, 255, 255, 0.8);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .message-thread-summary {

        align-items: flex-start;

    }


    .message-thread-time {

        display: none;

    }


    .message-form {

        grid-template-columns:
            1fr;

    }


    .message-send-button {

        width: 100%;

    }


    .message-bubble {

        max-width: 90%;

    }

}

/* =========================================================
   MESSAGE DRAFTS
========================================================= */

#messageDraftsList {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 14px;

}


.message-draft-card {

    width: 100%;

    padding: 18px;

    background:
        rgba(255, 255, 255, 0.58);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);

    backdrop-filter:
        blur(14px)
        saturate(125%);

    border:
        1px solid
        rgba(255, 255, 255, 0.72);

    border-radius: 18px;

    box-shadow:
        0 8px 24px
        rgba(0, 70, 75, 0.16),
        inset 0 1px 0
        rgba(255, 255, 255, 0.65);

}


.message-draft-card h3 {

    margin:
        0 0 10px 0;

    font-size: 16px;

}


.message-draft-body {

    margin:
        0 0 12px 0;

    line-height: 1.5;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

}


.message-draft-time {

    display: block;

    margin-bottom: 14px;

    color:
        var(--muted-text, #66727e);

    font-size: 12px;

}


/* =========================================
   DRAFT ACTION BUTTONS
========================================= */

.message-draft-actions,
.message-form-actions {

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 8px;

}


.message-draft-actions button,
.message-draft-button,
.message-send-button {

    min-height: 42px;

    padding: 9px 15px;

    border:
        1px solid
        rgba(150, 165, 170, 0.75);

    border-radius: 9px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

}


.message-draft-button,
.message-draft-actions button {

    background:
        rgba(255, 255, 255, 0.76);

    color:
        var(--text, #222);

}


.message-draft-button:hover,
.message-draft-actions button:hover {

    background:
        rgba(255, 255, 255, 0.92);

}


.message-send-button {

    border-color:
        transparent;

    background:
        var(--primary, #1f5f8b);

    color:
        #ffffff;

}


.delete-message-draft-button {

    color:
        #9d2929 !important;

}

/* Keep draft actions beside the content instead of adding a bottom row. */
#messageDrafts .message-draft-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 12px;
}

#messageDrafts .message-draft-card > :not(.message-draft-actions) {
    grid-column: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

#messageDrafts .message-draft-actions {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: start;
    width: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

#messageDrafts#messageDrafts .message-draft-actions button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #3f7f82;
    border-radius: 12px;
    background: #3f7f82;
    color: #fff;
    font: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

#messageDrafts .message-draft-actions button:hover {
    background: #356b6e;
    border-color: #356b6e;
}

#messageDrafts .message-draft-actions .delete-message-draft-button {
    background: #b43c3c;
    border-color: #b43c3c;
    color: #fff !important;
}

#messageDrafts .message-draft-actions .delete-message-draft-button:hover {
    background: #963232;
    border-color: #963232;
}

#messageDrafts .message-draft-actions button:focus-visible {
    outline: 2px solid #007d87;
    outline-offset: 3px;
}


/* =========================================
   MOBILE MESSAGE DRAFT ACTIONS
========================================= */

@media (max-width: 600px) {

    .message-form-actions,
    .message-draft-actions {

        width: 100%;

        flex-direction: column;

    }


    .message-form-actions button,
    .message-draft-actions button {

        width: 100%;

    }

}

/* =========================================================
   COMMUNICATION THREADS - FULL WIDTH
========================================================= */

.messages-layout {
    grid-template-columns: 1fr !important;
}

.message-threads-panel {
    width: 100%;
    max-width: none;
}

/* =========================================================
   RESPONSIVE LAYOUT
   KEEP SIDEBAR LEFT + CONTENT RIGHT
========================================================= */

@media (max-width: 800px) {

    /* =========================================
       KEEP THE TWO MAIN COLUMNS IN PLACE
    ========================================= */

    .app-layout {
        display: flex !important;
        flex-direction: row !important;

        width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }


    /* =========================================
       SIDEBAR STAYS ON THE LEFT
       BUT CAN BECOME NARROWER
    ========================================= */

    .sidebar {
        width: clamp(145px, 30vw, 190px) !important;
        min-width: clamp(145px, 30vw, 190px) !important;
        max-width: clamp(145px, 30vw, 190px) !important;

        flex:
            0 0
            clamp(145px, 30vw, 190px) !important;

        height: 100% !important;
        max-height: none !important;

        padding: 8px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }


    /* Sidebar labels can wrap rather than break layout */

    .sidebar button {
        min-width: 0 !important;

        padding: 8px 6px !important;

        font-size: 12px !important;

        white-space: normal !important;
        overflow-wrap: anywhere;
    }


    .nav-main-button {
        gap: 4px !important;
    }


    .dropdown-menu {
        min-width: 0 !important;
    }


    .dropdown-menu button {
        padding-left: 15px !important;
    }


    /* =========================================
       FEED / PAGE STAYS ON THE RIGHT
    ========================================= */

    .content-area {
        flex: 1 1 auto !important;

        width: auto !important;

        min-width: 0 !important;
        min-height: 0 !important;

        --page-section-gap: 10px;
        --page-side-gap: 10px;
        padding: 10px !important;
        padding-top: var(--page-section-gap) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }


    .page {
        width: 100% !important;
        min-width: 0 !important;
    }


    .scroll-area {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* =========================================
       LET PAGE HEADERS COMPRESS
       WITHOUT MOVING THE PAGE
    ========================================= */

    .page-header {
        min-width: 0;

        gap: 8px;

        padding:
            10px 12px !important;
    }


    .page-header h2 {
        min-width: 0;

        font-size: 17px;

        overflow-wrap: anywhere;
    }


    /* =========================================
       FEED CARDS SHRINK NATURALLY
    ========================================= */

    .request-card,
    .posted-request-card,
    .profile-card,
    .notification-item,
    .message-thread-dropdown,
    .message-draft-card {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* =========================================
       INSIDE REQUEST CARDS:
       STACK ACTIONS ONLY WHEN NECESSARY
       THE FEED ITSELF REMAINS ON THE RIGHT
    ========================================= */

    .request-card-body {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 12px !important;
    }


    .request-actions {
        width: 100% !important;
        min-width: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .request-actions button {
        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 38px !important;
    }


    .follow-dropdown,
    .follow-main-button,
    .follow-dropdown .unfollow-option {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* =========================================
       MESSAGES REMAIN IN RIGHT CONTENT AREA
    ========================================= */

    .messages-layout {
        width: 100% !important;

        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .message-threads-panel {
        width: 100% !important;
        min-width: 0 !important;
    }


    .message-thread-summary {
        min-width: 0;

        gap: 8px;
    }


    .message-thread-summary-info {
        min-width: 0;
    }


    .message-thread-preview {
        max-width: 100%;
    }
}


/* =========================================================
   VERY NARROW WINDOWS
   SAME LEFT/RIGHT ARRANGEMENT
========================================================= */

@media (max-width: 550px) {

    .app-layout {
        flex-direction: row !important;
    }


    .sidebar {
        width: clamp(125px, 34vw, 150px) !important;
        min-width: clamp(125px, 34vw, 150px) !important;
        max-width: clamp(125px, 34vw, 150px) !important;

        flex:
            0 0
            clamp(125px, 34vw, 150px) !important;
    }


    .sidebar button {
        font-size: 11px !important;

        padding:
            7px 4px !important;
    }


    .content-area {
        min-width: 0 !important;

        --page-section-gap: 6px;
        --page-side-gap: 6px;
        padding: 6px !important;
        padding-top: var(--page-section-gap) !important;
    }


    .request-card,
    .posted-request-card {
        padding: 10px !important;
    }


    /* One action button per row
       when extremely narrow */

    .request-actions {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .page-header {
        flex-wrap: wrap;
    }


    .compose-button {
        min-width: 0 !important;
        width: auto !important;

        padding:
            8px 10px !important;

        font-size: 12px !important;
    }


    /* Message reply controls can stack */

    .message-form {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .message-form-actions {
        width: 100%;

        flex-wrap: wrap;
    }
}

/* =========================================================
   KEEP FEED ACTIONS IN THE SAME POSITION
   Following → Save → Send Message → Fulfill
========================================================= */

@media (max-width: 800px) {

    /* Keep request information on the left
       and action buttons on the right */

    .request-card-body {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            clamp(95px, 24vw, 125px) !important;

        gap: 10px !important;

        align-items: start !important;
    }


    /* Keep all four actions vertically stacked */

    .request-actions {
        width: clamp(95px, 24vw, 125px) !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 7px !important;
    }


    /* Following */

    .follow-dropdown {

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
    }


    .follow-main-button,
    .follow-dropdown .unfollow-option {

        width: 100% !important;
        min-width: 0 !important;
    }


    /* Save */

    .save-dropdown {

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
    }


    /* Fulfill */

    .fulfill-dropdown {

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
    }


    /* Every action button including Send Message */

    .request-actions button,
    .save-dropdown button,
    .fulfill-dropdown button {

        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 38px !important;

        padding: 7px 5px !important;

        font-size: 11px !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }

}


/* =========================================================
   VERY NARROW WINDOW
   SAME ARRANGEMENT — JUST SMALLER
========================================================= */

@media (max-width: 550px) {

    .request-card-body {

        grid-template-columns:
            minmax(0, 1fr)
            clamp(78px, 25vw, 100px) !important;

        gap: 7px !important;
    }


    .request-actions {

        width:
            clamp(78px, 25vw, 100px) !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 5px !important;
    }


    .request-actions button,
    .follow-main-button,
    .follow-dropdown .unfollow-option,
    .save-dropdown button,
    .fulfill-dropdown button {

        width: 100% !important;
        min-width: 0 !important;

        min-height: 34px !important;

        padding: 5px 3px !important;

        font-size: 10px !important;
        line-height: 1.15 !important;

        white-space: normal !important;
    }

}

/* =========================================================
   KEEP LEGEND FULL HEIGHT WHEN PAGE NARROWS
   Sidebar stays beside feed from top to bottom
========================================================= */

body {
    display: flex !important;
    flex-direction: column !important;

    height: 100vh !important;
    min-height: 0 !important;

    overflow: hidden !important;
}


/* Header may resize, but remains above both columns */

.top-bar {
    flex: 0 0 auto !important;
}


/* Fill every pixel remaining below the header */

.app-layout {
    flex: 1 1 auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: row !important;

    overflow: hidden !important;
}


/* =========================================================
   LEFT LEGEND
========================================================= */

.sidebar {
    align-self: stretch !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    flex-shrink: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

}


/* Legend navigation fills its column */

.sidebar nav {
    width: 100% !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;
}


/* =========================================================
   RIGHT FEED
========================================================= */

.content-area {
    flex: 1 1 auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    height: auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* =========================================================
   NARROW WINDOWS
   DO NOT LET SIDEBAR TURN INTO A SHORT BLOCK
========================================================= */

@media (max-width: 800px) {

    .app-layout {
        flex-direction: row !important;

        height: auto !important;
        min-height: 0 !important;
    }


    .sidebar {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        align-self: stretch !important;
    }


    .content-area {
        height: auto !important;
        min-height: 0 !important;
    }

}


@media (max-width: 600px) {

    .app-layout {
        flex-direction: row !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }


    .sidebar {
        height: auto !important;

        max-height: none !important;

        align-self: stretch !important;

        overflow-y: auto !important;
    }


    .content-area {
        min-height: 0 !important;
    }

}

/* =========================================================
   ORIGINAL NAVY LEGEND / SIDEBAR
========================================================= */

.sidebar {
    background:
        #4E0707 !important;

    border-right:
        1px solid
        #151c22 !important;
}


/* Main legend buttons */

.sidebar button {
    background: transparent !important;

    color: #e8edf1 !important;
}


.sidebar button:hover {
    background:
        #2d3a45 !important;

    color:
        #ffffff !important;
}


.sidebar .dropdown-menu {
    background:
        #4E0707 !important;
}


.sidebar .dropdown-menu button {
    background:
        transparent !important;

    color:
        #cbd4db !important;
}


.sidebar .dropdown-menu button:hover {
    background:
        #2b3944 !important;

    color:
        #ffffff !important;
}


/* Dropdown arrows */

.sidebar .dropdown-arrow {
    color: #9eabb5 !important;
}

/* =========================================================
   FOLLOW ARROW VISIBILITY

   Follow          = no arrow
   Following ▼     = arrow
   Following click = shows Unfollow
========================================================= */

/* Hide arrow while button says Follow */

.follow-main-button:not(.following)
.dropdown-arrow,

.profile-follow-button:not(.following)
.dropdown-arrow {

    display: none !important;

}


/* Show arrow only after user is followed */

.follow-main-button.following
.dropdown-arrow,

.profile-follow-button.following
.dropdown-arrow {

    display: inline-flex !important;

}


/* Keep plain Follow text centered */

.follow-main-button:not(.following) {

    padding-right:
        12px !important;

}

/* =========================================================
   CLICKABLE NOTIFICATION BUTTON
   THREE-LINE PREVIEW
========================================================= */

.notification-item {
    display: block !important;

    width: 100% !important;

    -webkit-appearance: none;
    appearance: none;

    text-align: left !important;

    font: inherit;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.notification-message {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    line-height: 1.5;
}

/* =========================================================
   SEPARATE COMMUNICATION THREADS BY USER

   Each different user conversation is its own
   standalone glass card, like notifications
   and feed items.
========================================================= */

.message-threads-panel {
    width: 100% !important;

    padding: 0 !important;

    background: transparent !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


.message-threads-list {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 16px !important;
}


/* Each individual user's conversation */
.message-thread-dropdown {
    width: 100% !important;

    margin: 0 !important;

    background: #FA8072 !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;

    overflow: hidden !important;
}

/* =========================================================
   MY REQUESTS + SAVED POSTS
   CONSISTENT SEPARATED GLASS ITEMS

   Applies to:
   - My Requests / Posted
   - My Requests / Fulfilled
   - My Requests / Drafts
   - Saved Posts / Unfulfilled
   - Saved Posts / Fulfilled
   - Saved Posts / Drafts
========================================================= */


/* =========================================================
   LIST CONTAINERS

   Give every individual post/request its own space,
   matching the separation used by notifications.
========================================================= */

#postedRequestsList,
#fulfilledRequestsList,
#requestDraftsList,
#savedOffersList,
#fulfilledPostsList,
#fulfillmentDraftsList {

    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 16px !important;

}


/* =========================================================
   INDIVIDUAL ITEMS
   SAME TRANSPARENT GLASS PROMPT
========================================================= */

#postedRequestsList > .posted-request-card,
#requestDraftsList > .posted-request-card,
#savedOffersList > .posted-request-card,
#fulfilledPostsList > .posted-request-card,
#fulfillmentDraftsList > .posted-request-card,
#fulfilledRequestsList > .fulfilled-request-dropdown {

    width: 100% !important;

    margin: 0 !important;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;

    background-clip:
        padding-box;

}


/* =========================================================
   HOVER
   MATCH OTHER GLASS ITEMS
========================================================= */

#postedRequestsList > .posted-request-card:hover,
#requestDraftsList > .posted-request-card:hover,
#savedOffersList > .posted-request-card:hover,
#fulfilledPostsList > .posted-request-card:hover,
#fulfillmentDraftsList > .posted-request-card:hover,
#fulfilledRequestsList > .fulfilled-request-dropdown:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.68
        ) !important;

    border-color:
        rgba(
            255,
            255,
            255,
            0.9
        ) !important;

    box-shadow:
        0 10px 28px
        rgba(
            0,
            70,
            75,
            0.20
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.8
        ) !important;

}


/* =========================================================
   FULFILLED REQUESTS

   If one request has several different fulfillments,
   separate those individual fulfillments too.
========================================================= */

.fulfilled-request-items {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 16px;

    padding: 16px;

}


/* Each submitted fulfillment gets its own glass prompt */

.fulfilled-request-items
> .fulfilled-request-item {

    width: 100% !important;

    margin: 0 !important;

    padding: 16px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;

}


/* =========================================================
   EMPTY PAGE MESSAGE

   Keep empty-state prompts visually consistent too.
========================================================= */

#postedRequestsList > p,
#fulfilledRequestsList > p,
#requestDraftsList > p,
#savedOffersList > p,
#fulfilledPostsList > p,
#fulfillmentDraftsList > p {

    width: 100%;

    margin: 0;

    padding: 20px;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        );

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);

    backdrop-filter:
        blur(14px)
        saturate(125%);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius:
        18px;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        );

}

/* =========================================================
   PUBLIC USER PROFILE
========================================================= */

#profileContent {
    --profile-container-gap: 16px;
    container-type: inline-size;
    container-name: profile-layout;
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: var(--profile-container-gap);
}

.profile-photo-columns {
    display: grid;
    grid-template-columns: minmax(0, 400px);
    gap: var(--profile-container-gap, 16px);
    align-items: start;
    min-width: 0;
}
.profile-main-column {
    display: flex;
    flex-direction: column;
    gap: var(--profile-container-gap, 16px);
    min-width: 0;
}
.profile-main-column > :is(.profile-card, .profile-section-dropdown, .profile-account-controls),
.profile-photos-column > .profile-gallery-section { margin-block: 0; }
.profile-photo-columns .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-photo-columns .profile-stats [data-profile-list="offersPosted"] { grid-column: 2; }
.profile-photo-columns .profile-gallery-grid { grid-template-columns: minmax(0, 1fr); }
/* Two compact 400px sections and the existing 16px gap must fit together. */
@container profile-layout (min-width: 816px) {
    .profile-photo-columns {
        grid-template-columns: repeat(2, minmax(0, 400px));
        grid-template-rows: minmax(0, 1fr);
        height: calc(100cqb - 20px);
    }
    .profile-photo-columns > .page-column-scroll {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        padding-bottom: 20px;
    }
    .profile-main-column > * { flex-shrink: 0; }
}


/* =========================================================
   PROFILE IMAGE
========================================================= */

.large-anonymous-avatar {
    overflow: hidden;
}


.profile-avatar-image,
.request-profile-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


.request-profile-image {
    pointer-events: none;
}


/* =========================================================
   PROFILE STATISTICS
========================================================= */

.profile-stats {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-top: 18px;
}


.profile-stat {
    min-width: 0;

    padding: 14px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    background:
        rgba(
            255,
            255,
            255,
            0.46
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.68
        );

    border-radius: 12px;
}


.profile-stat strong {
    font-size: 18px;
}


.profile-stat span {
    font-size: 12px;

    color:
        var(
            --muted-text,
            #66727e
        );
}


/* =========================================================
   ABOUT
========================================================= */

.profile-about {
    width: 100%;

    margin-top: 20px;

    padding-top: 16px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );
}


.profile-about h3 {
    margin:
        0 0 8px 0;
}


.profile-about p {
    margin: 0;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* =========================================================
   INLINE PROFILE EDITING
   OWNER ONLY
========================================================= */


/* =========================================================
   PROFILE IMAGE AREA
========================================================= */

.profile-avatar-area {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    flex: 0 0 auto;
}

.profile-avatar-area > .large-anonymous-avatar {
    position: relative;
}

.profile-avatar-area > .large-anonymous-avatar[role="button"] {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.profile-avatar-area > .large-anonymous-avatar.profile-avatar-edit-cursor {
    cursor: url("images/edit-cursor.svg") 4 20, default;
}


.profile-avatar-editable {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


.profile-avatar-editable:hover {
    opacity: 0.88;

    transform:
        scale(1.02);
}


.profile-avatar-editable:focus-visible {
    outline:
        2px solid
        var(
            --primary,
            #1f5f8b
        );

    outline-offset:
        3px;
}

/* =========================================================
   VIEWABLE PROFILE IMAGE
========================================================= */

.profile-avatar-viewable {
    cursor: zoom-in;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


.profile-avatar-viewable:hover {
    opacity: 0.9;

    transform:
        scale(1.02);
}


.profile-avatar-viewable:focus-visible {
    outline:
        2px solid
        var(
            --primary,
            #1f5f8b
        );

    outline-offset:
        3px;
}


/* =========================================================
   ENLARGED PROFILE IMAGE
========================================================= */

.profile-image-preview-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(
            0,
            0,
            0,
            0.78
        );
}


.profile-image-preview-box {
    width: auto;

    max-width: 100%;

    max-height:
        calc(
            100vh - 48px
        );

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;
}


.profile-image-preview-close {
    min-height: 36px;

    padding:
        8px 14px;

    border: none;

    border-radius: 7px;

    background: #ffffff;

    color: #222222;

    font-size: 14px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-image-preview-close:hover {
    background: #eeeeee;
}


.profile-image-preview-image {
    display: block;

    width: auto;
    height: auto;

    max-width:
        calc(
            100vw - 48px
        );

    max-height:
        calc(
            100vh - 110px
        );

    object-fit: contain;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 12px 40px
        rgba(
            0,
            0,
            0,
            0.35
        );
}

/* =========================================================
   SMALL INLINE EDIT BUTTONS
========================================================= */

.profile-inline-edit-button {
    width: auto;

    min-width: 0;

    min-height: 32px;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.18
        );

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.64
        );

    color:
        var(
            --text,
            #222
        );

    font-size: 13px;

    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-inline-edit-button:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.88
        );
}


.profile-edit-image-button {
    white-space: nowrap;
}


/* =========================================================
   ABOUT HEADER
========================================================= */

.profile-about-header {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 12px;

    margin-bottom: 8px;
}


.profile-about-header h3 {
    margin: 0;
}


/* =========================================================
   INLINE ABOUT EDITOR
========================================================= */

.profile-about-editor {
    width: 100%;
}


.profile-about-editor[hidden] {
    display: none;
}


.profile-about-input {
    width: 100%;

    min-height: 110px;

    padding: 12px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.18
        );

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    color:
        var(
            --text,
            #222
        );

    font: inherit;

    line-height: 1.5;

    resize: vertical;
}


.profile-about-input:focus {
    outline: none;

    border-color:
        var(
            --primary,
            #1f5f8b
        );
}


.profile-about-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 10px;
}


/* =========================================================
   PROFILE MOBILE
========================================================= */

@media (max-width: 700px) {

    .profile-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

/* =========================================================
   PROFILE USERNAME
========================================================= */

.profile-name-area {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
}


.profile-name-area h2 {
    margin: 0;

    max-width: 100%;

    overflow-wrap: anywhere;
}


/* =========================================================
   INLINE USERNAME EDITOR
========================================================= */

.profile-username-editor {
    width: min(
        320px,
        100%
    );
}


.profile-username-editor[hidden] {
    display: none;
}


.profile-username-input {
    width: 100%;

    min-height: 38px;

    padding:
        8px 10px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.18
        );

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    color:
        var(
            --text,
            #222
        );

    font: inherit;

    font-size: 16px;
}


.profile-username-input:focus {
    outline: none;

    border-color:
        var(
            --primary,
            #1f5f8b
        );
}


.profile-username-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;
}

/* =========================================================
   CLICKABLE PROFILE STATISTICS
========================================================= */

.profile-stat {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;

    font: inherit;

    color:
        var(
            --text,
            #222
        );

    text-align: left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.profile-stat:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.68
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.9
        );

    transform:
        translateY(
            -1px
        );
}


.profile-stat:focus-visible {
    outline:
        2px solid
        var(
            --primary,
            #1f5f8b
        );

    outline-offset:
        2px;
}


/* =========================================================
   PROFILE STAT LIST VIEW
========================================================= */

.profile-stat-list-view {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 16px;
}


.profile-stat-list-header {
    width: 100%;
    position: static !important;

    display: flex;
    align-items: center;

    gap: 16px;

    padding-bottom: 8px;
}

.profile-stat-back-button {
    position: sticky !important;
    top: 8px;
    z-index: 5;
    align-self: flex-start;
    background: var(--page-background, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}


.profile-stat-list-header h2 {
    position: static !important;
    margin: 0;

    min-width: 0;

    overflow-wrap: anywhere;
}


.profile-stat-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================================================
   FOLLOWER / FOLLOWING USER CARDS
========================================================= */

.profile-stat-user-card {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        );

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);

    backdrop-filter:
        blur(14px)
        saturate(125%);

    color:
        var(
            --text,
            #222
        );

    font: inherit;

    text-align: left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        );
}


.profile-stat-user-card:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.7
        );
}


.profile-stat-user-avatar {
    width: 52px;
    min-width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #ddd;

    font-size: 20px;
    font-weight: 600;
}


.profile-stat-user-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.profile-stat-empty {
    width: 100%;

    margin: 0;

    padding: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius: 18px;
}

/* =========================================================
   PROFILE SUBMITTED FULFILLMENTS
   CLICK THROUGH TO ORIGINAL REQUEST
========================================================= */

.profile-fulfillment-link-card {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.profile-fulfillment-link-card:hover {
    transform:
        translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            0.70
        ) !important;

    border-color:
        rgba(
            255,
            255,
            255,
            0.92
        ) !important;

    box-shadow:
        0 10px 28px
        rgba(
            0,
            70,
            75,
            0.20
        ) !important;
}


.profile-fulfillment-link-card:focus-visible {
    outline:
        2px solid
        var(
            --primary,
            #1f5f8b
        );

    outline-offset:
        3px;
}


/* =========================================================
   VIEW REQUEST PROMPT
========================================================= */

.profile-fulfillment-request-prompt {
    width: 100%;

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 13px;

    font-weight: 650;

    color:
        var(
            --primary,
            #1f5f8b
        );
}


.profile-fulfillment-link-card:hover
.profile-fulfillment-request-prompt {
    text-decoration: underline;
}


/* =========================================================
   REQUEST NO LONGER AVAILABLE
========================================================= */

.profile-fulfillment-unavailable-card {
    cursor: default;
}


.profile-fulfillment-unavailable-card
.profile-fulfillment-request-prompt {
    color:
        var(
            --muted-text,
            #66727e
        );

    font-weight: 500;
}

/* =========================================================
   SITE-WIDE POPUP NOTIFICATIONS
   MATCH CONFIRM POST
========================================================= */

.site-generated-popup {
    z-index: 2000000 !important;
}


.site-generated-popup
.confirmation-box {
    width:
        min(
            420px,
            100%
        );
}


/* =========================================================
   POPUP MESSAGE
========================================================= */

.site-popup-message {
    white-space:
        pre-line;

    overflow-wrap:
        anywhere;

    line-height:
        1.5;
}

.payment-upload-section { min-width: 0; margin: 16px 0; }
.payment-upload-title { margin: 0 0 8px; font-weight: 700; }
.payment-upload-section input[type="file"][hidden] { display: none !important; }
.payment-upload-list { padding-left: 20px; margin: 0 0 10px; max-height: 180px; overflow: auto; overflow-wrap: anywhere; }
.payment-upload-list[hidden] { display: none; }
.payment-upload-previews { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 12px; min-width: 0; }
.payment-upload-previews[hidden] { display: none; }
.payment-upload-preview { display: block; width: 140px; max-width: 100%; height: 140px; object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, .58); }
.payment-upload-preview-item { position: relative; width: 140px; max-width: 100%; }
.payment-upload-file-preview { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 140px; padding: 30px 12px 12px; border-radius: 12px; background: rgba(255, 255, 255, .58); overflow-wrap: anywhere; }
.payment-upload-list > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.payment-upload-list > li > span { min-width: 0; overflow-wrap: anywhere; }
.payment-upload-section .payment-upload-remove {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 26px; width: 26px; min-width: 26px; height: 26px; padding: 0;
    border: 1px solid #e58e8e; border-radius: 50%; background-color: #f4a6a6; color: #492020;
    font-size: 18px; line-height: 1;
}
.payment-upload-preview-item > .payment-upload-remove { position: absolute; top: 4px; right: 4px; }
.payment-submission-uploads { min-width: 0; max-width: 100%; }


/* =========================================================
   PRIMARY POPUP BUTTON
========================================================= */

.site-popup-primary-button {
    background:
        #222;

    color:
        #fff;
}


.site-popup-primary-button:hover {
    background:
        #444;
}


/* =========================================================
   SECONDARY POPUP BUTTON
========================================================= */

.site-popup-secondary-button {
    background:
        #e5e5e5;

    color:
        #222;
}


.site-popup-secondary-button:hover {
    background:
        #d7d7d7;
}

.message-thread-confirm-popup .site-popup-secondary-button,
.message-thread-confirm-popup .site-popup-secondary-button:hover {
    background: #f4a6a6;
    border-color: #e58e8e;
    color: #492020;
}

/* =========================================================
   UNSENT MESSAGE DRAFT POPUP
========================================================= */

.unsent-message-popup
.confirmation-box {
    width:
        min(
            580px,
            100%
        );

    max-height:
        min(
            720px,
            90vh
        );

    overflow-y: auto;
}


/* =========================================================
   UNSENT MESSAGE SELECTION LIST
========================================================= */

.unsent-message-selection-list {
    width: 100%;

    max-height: 340px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    margin:
        18px 0 22px;

    overflow-y: auto;

    text-align: left;
}


/* =========================================================
   INDIVIDUAL UNSENT MESSAGE
========================================================= */

.unsent-message-option {
    width: 100%;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 12px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            0.70
        );

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.unsent-message-option:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.92
        );
}


.unsent-message-option
input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;

    margin-top: 2px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


/* =========================================================
   RECIPIENT + MESSAGE PREVIEW
========================================================= */

.unsent-message-option-information {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.unsent-message-option-information
strong {
    font-size: 14px;
}


.unsent-message-preview {
    display: -webkit-box;

    max-width: 100%;

    overflow: hidden;

    color:
        var(
            --muted-text,
            #66727e
        );

    font-size: 13px;

    line-height: 1.4;

    overflow-wrap: anywhere;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* =========================================================
   UNSENT MESSAGE POPUP BUTTONS
========================================================= */

.unsent-message-popup-buttons {
    flex-wrap: wrap;
}


.unsent-message-popup-buttons
button {
    width: auto;

    min-width: 110px;
}


.unsent-message-popup-buttons
button:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}

.unsent-message-popup .unsent-message-cancel,
.unsent-message-popup .unsent-message-cancel:hover {
    background: #f4a6a6;
    border-color: #e58e8e;
    color: #492020;
}

/* =========================================================
   CLICKABLE LIST ITEMS
========================================================= */

.clickable-list-card {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}


.clickable-list-card:hover {
    transform:
        translateY(
            -2px
        );
}


.clickable-list-card:focus-visible {
    outline:
        2px solid
        var(
            --primary,
            #1f5f8b
        );

    outline-offset:
        3px;
}


/* =========================================================
   LIST DETAIL POPUP
========================================================= */

.list-detail-popup
.confirmation-box {
    width:
        min(
            720px,
            100%
        );

    max-height:
        90vh;

    overflow-y:
        auto;
}


.list-detail-content {
    width: 100%;

    margin:
        18px 0;

    text-align:
        left;
}


.list-detail-content p {
    margin:
        8px 0;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


.list-detail-content
.request-card {
    margin:
        0;
}


/* =========================================================
   RESTORED FULFILLMENT DRAFT
========================================================= */

.fulfillment-draft-restored {
    margin:
        16px 0 !important;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size:
        13px;

    line-height:
        1.45;
}

/* =========================================================
   FULFILLED REQUEST APPROVE BUTTON
========================================================= */

.fulfilled-request-approve-button {
    width: auto;

    max-width: 100%;

    min-height: 40px;

    margin:
        16px 0 0 0;

    padding:
        9px 16px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.16
        );

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    color:
        #222;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.3;

    text-align:
        center;

    white-space:
        normal;

    overflow-wrap:
        anywhere;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.fulfilled-request-approve-button:hover:not(:disabled) {
    background:
        rgba(
            255,
            255,
            255,
            0.96
        );
}


.fulfilled-request-approve-button:disabled {
    opacity:
        0.65;

    cursor:
        default;
}

/* =========================================================
   POSTED REQUEST FULFILLMENT DROPDOWN
========================================================= */

.posted-fulfillment-dropdown {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;
}


/* Dropdown button */

.posted-fulfillment-dropdown-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    padding: 9px 16px;

    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.82);

    color: #222;

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.posted-fulfillment-dropdown-button:hover {
    background: rgba(255, 255, 255, 0.95);
}


/* Open dropdown area */

.posted-fulfillment-dropdown-menu {
    width: 100%;
    min-width: 0;

    flex: 0 0 100%;

    margin-top: 0;
    padding: 14px;

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.45);

    overflow-wrap: anywhere;
    word-break: break-word;
}


.posted-fulfillment-dropdown-menu[hidden] {
    display: none !important;
}


/* Fulfillment groups */

.posted-fulfillment-section {
    width: 100%;
    min-width: 0;

    margin-bottom: 18px;
}


.posted-fulfillment-section:last-child {
    margin-bottom: 0;
}


.posted-fulfillment-section > h4 {
    margin: 0 0 10px 0;

    font-size: 15px;
    font-weight: 700;
}


/* Individual fulfillment */

.posted-fulfillment-dropdown-item {
    width: 100%;
    min-width: 0;

    margin-bottom: 10px;
    padding: 12px;

    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.58);

    overflow-wrap: anywhere;
    word-break: break-word;
}


.posted-fulfillment-dropdown-item:last-child {
    margin-bottom: 0;
}


.posted-fulfillment-dropdown-item h5 {
    margin: 0 0 8px 0;

    font-size: 14px;
}


.posted-fulfillment-dropdown-item p {
    margin: 6px 0;

    white-space: normal;

    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   POSTED REQUEST APPROVE FULFILLMENT BUTTON
========================================================= */

.posted-fulfillment-approve-button {
    width: auto;
    max-width: 100%;

    min-height: 38px;

    margin-top: 10px;
    padding: 8px 14px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;
    color: #222;

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.posted-fulfillment-approve-button:hover:not(:disabled) {
    background: #e8e8e8;
}


.posted-fulfillment-approve-button:disabled {
    opacity: 0.65;

    cursor: default;
}

/* =========================================================
   POSTED REQUESTS STICKY FULFILLMENT CONTROL
========================================================= */


/* Keep Posted Requests title above its own scrolling area */

#yourOffers.page.active {
    display: flex !important;

    flex-direction: column;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


#yourOffers > .page-header {
    flex: 0 0 auto;

    position: relative;

    z-index: 30;
}


/* Only the Posted Requests content scrolls */

#yourOffers > .scroll-area {
    flex: 1 1 auto;

    width: 100%;
    height: auto;

    min-width: 0;
    min-height: 0;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* =========================================================
   STICKY VIEW FULFILLMENTS BUTTON
   ONLY WHILE ITS DROPDOWN IS OPEN
========================================================= */

.posted-fulfillment-dropdown.open
> .posted-fulfillment-dropdown-button {
    position: sticky;

    top: 0;

    z-index: 25;

    background: rgba(
        255,
        255,
        255,
        0.96
    );

    box-shadow:
        0 3px 8px
        rgba(
            0,
            0,
            0,
            0.12
        );
}

/* =========================================================
   REQUEST DRAFT CONTINUE BUTTON
========================================================= */

.request-draft-continue-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    margin-top: 14px;
    padding: 9px 16px;

    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.82);

    color: #222;

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.request-draft-continue-button:hover {
    background: rgba(255, 255, 255, 0.96);
}

/* =========================================================
   REQUEST DRAFT CANCEL BUTTON
========================================================= */

.request-draft-cancel-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    margin-top: 14px;
    margin-left: 8px;

    padding: 9px 16px;

    border:
        1px solid
        rgba(
            180,
            60,
            60,
            0.40
        );

    border-radius: 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    color:
        var(
            --danger,
            #b43c3c
        );

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.request-draft-cancel-button:hover {
    background:
        rgba(
            180,
            60,
            60,
            0.10
        );
}

/* =========================================================
   SAVED REQUEST FULFILL BUTTON
========================================================= */

.saved-request-fulfill-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    margin-top: 14px;
    padding: 9px 16px;

    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.82);

    color: #222;

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.saved-request-fulfill-button:hover {
    background: rgba(255, 255, 255, 0.96);
}

/* =========================================================
   SAVED POST FULFILLED STATUS DROPDOWN
========================================================= */

.saved-request-fulfilled-dropdown {
    width: fit-content;
    max-width: 100%;

    display: inline-flex;
    flex-direction: column;
    align-items: stretch;

    margin-top: 14px;
}


/* =========================================================
   FULFILLED BUTTON
========================================================= */

.saved-request-fulfilled-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 9px 16px;

    border: 1px solid #28683e;
    border-radius: 7px;

    background: var(
        --success,
        #2f7d4a
    );

    color: #ffffff;

    font-size: 13px;
    font-weight: 650;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.saved-request-fulfilled-button:hover {
    background: #28683e;
}

/* =========================================================
   PURCHASED SAVED POST BUTTON
   ONLY AFTER REQUESTER APPROVAL
========================================================= */

.saved-request-fulfilled-button.saved-request-purchased-button {
    border-color: #8a691c;

    background: #a67c22;

    color: #ffffff;
}

/* =========================================================
   PURCHASED SAVED POST CARD
   ONLY AFTER REQUESTER APPROVAL
========================================================= */

.posted-request-card.saved-post-purchased-card {
    background: #fff8df;

    border-color: #d6b55b;

    box-shadow:
        0 2px 8px
        rgba(
            166,
            124,
            34,
            0.16
        );
}

.saved-request-fulfilled-button.saved-request-purchased-button:hover {
    background: #8a691c;
}

/* =========================================================
   FULFILLED DROPDOWN ARROW
========================================================= */

.saved-request-fulfilled-arrow {
    font-size: 10px;
    line-height: 1;
}


/* =========================================================
   CANCEL FULFILLMENT OPTION
========================================================= */

.saved-request-cancel-fulfillment-option {
    width: 100%;

    min-height: 38px;

    margin-top: 4px;
    padding: 8px 14px;

    border: 1px solid rgba(
        180,
        60,
        60,
        0.35
    );

    border-radius: 7px;

    background: rgba(
        255,
        255,
        255,
        0.96
    );

    color: var(
        --danger,
        #b43c3c
    );

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.saved-request-cancel-fulfillment-option:hover {
    background: rgba(
        180,
        60,
        60,
        0.08
    );
}

/* =========================================================
   SAVED POST TIMESTAMP
========================================================= */

.saved-post-timestamp {
    margin:
        0 0 14px 0 !important;

    color:
        var(
            --muted-text,
            #66727e
        ) !important;

    font-size:
        12px !important;

    line-height:
        1.4;
}


.saved-post-timestamp strong {
    color:
        var(
            --muted-text,
            #66727e
        ) !important;

    font-weight:
        600;
}

/* =========================================================
   SAVED POST CARD ACTIONS
========================================================= */

.saved-post-card-actions {
    width: 100%;

    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 14px;
}


/*
 * The action row provides the spacing,
 * so remove the old individual top margins.
 */

.saved-post-card-actions
.saved-request-fulfill-button,

.saved-post-card-actions
.saved-request-fulfilled-dropdown {
    margin-top: 0;
}


/* =========================================================
   SAVED POST DELETE BUTTON
========================================================= */

.saved-post-delete-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    padding: 9px 16px;

    border: 1px solid rgba(
        180,
        60,
        60,
        0.45
    );

    border-radius: 7px;

    background: rgba(
        255,
        255,
        255,
        0.96
    );

    color: var(
        --danger,
        #b43c3c
    );

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.saved-post-delete-button:hover {
    background: rgba(
        180,
        60,
        60,
        0.08
    );
}

/* =========================================================
   SAVED POST CONTINUE DRAFT BUTTON
========================================================= */

.saved-post-continue-draft-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    padding: 9px 16px;

    border: 1px solid
        var(
            --primary,
            #1f5f8b
        );

    border-radius: 7px;

    background:
        var(
            --primary,
            #1f5f8b
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.saved-post-continue-draft-button:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        );
}

/* =========================================================
   POSTED REQUEST STATUS CONTROL
========================================================= */

.posted-request-status-control {
    width: fit-content;
    max-width: 100%;

    display: inline-flex;
    flex-direction: column;
    align-items: stretch;

    margin-top: 0;
}


/* =========================================================
   CANCEL REQUEST BUTTON
========================================================= */

.posted-request-cancel-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    padding: 9px 16px;

    border: 1px solid rgba(
        180,
        60,
        60,
        0.45
    );

    border-radius: 7px;

    background: rgba(
        255,
        255,
        255,
        0.96
    );

    color: var(
        --danger,
        #b43c3c
    );

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.posted-request-cancel-button:hover {
    background: rgba(
        180,
        60,
        60,
        0.08
    );
}


/* =========================================================
   CANCELED STATUS BUTTON
========================================================= */

.posted-request-canceled-button {
    width: auto;
    max-width: 100%;

    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 9px 16px;

    border: 1px solid
        var(
            --danger,
            #b43c3c
        );

    border-radius: 7px;

    background:
        var(
            --danger,
            #b43c3c
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 650;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.posted-request-canceled-button:hover {
    opacity: 0.92;
}


/* =========================================================
   CANCELED ARROW
========================================================= */

.posted-request-status-arrow {
    font-size: 10px;
    line-height: 1;
}


/* =========================================================
   REPOST OPTION
========================================================= */

.posted-request-repost-option {
    width: 100%;

    min-height: 38px;

    margin-top: 4px;

    padding: 8px 14px;

    border: 1px solid rgba(
        0,
        0,
        0,
        0.16
    );

    border-radius: 7px;

    background: rgba(
        255,
        255,
        255,
        0.96
    );

    color: #222;

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.posted-request-repost-option:hover {
    background: rgba(
        0,
        0,
        0,
        0.06
    );
}

/* =========================================================
   DELETE CANCELED REQUEST OPTION
========================================================= */

.posted-request-delete-option {
    width: 100%;

    min-height: 38px;

    margin-top: 4px;

    padding: 8px 14px;

    border:
        1px solid
        rgba(
            180,
            60,
            60,
            0.45
        );

    border-radius: 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color:
        var(
            --danger,
            #b43c3c
        );

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.posted-request-delete-option:hover {
    background:
        rgba(
            180,
            60,
            60,
            0.10
        );
}

/* =========================================================
   SIDEBAR SPLIT LEGEND BUTTONS
   MAIN BUTTON + SEPARATE ARROW BUTTON
========================================================= */

.sidebar .nav-main-row {
    width: 100%;
    height: 38px;

    display: flex;
    flex-direction: row;

    align-items: stretch;

    gap: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border-radius: 6px;
}


/* =========================================================
   MAIN LEGEND BUTTON
========================================================= */

.sidebar
.nav-main-row
> .nav-main-button {
    flex: 1 1 auto;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;

    padding:
        9px
        10px !important;

    border: none !important;

    border-radius:
        6px
        0
        0
        6px !important;

    text-align: left !important;

    overflow: hidden;
}


/* Keep legend text on one normal horizontal line */

.sidebar
.nav-main-row
> .nav-main-button
> span {
    display: block;

    min-width: 0;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   SEPARATE ARROW BUTTON
========================================================= */

.sidebar
.nav-main-row
> .nav-dropdown-toggle {
    flex:
        0
        0
        38px !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    border-left:
        1px solid
        rgba(
            0,
            0,
            0,
            0.10
        ) !important;

    border-radius:
        0
        6px
        6px
        0 !important;

    text-align: center !important;
}


/* =========================================================
   ARROW
========================================================= */

.sidebar
.nav-main-row
> .nav-dropdown-toggle
> .dropdown-arrow {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;

    transform:
        rotate(0deg);

    transition:
        transform
        0.15s
        ease;
}


/* =========================================================
   ROTATE ONLY THE SEPARATE ARROW
========================================================= */

.sidebar
.nav-dropdown.open
> .nav-main-row
> .nav-dropdown-toggle
> .dropdown-arrow {
    transform:
        rotate(180deg);
}

/* =========================================================
   COMBINED NOTIFICATIONS
========================================================= */

.notification-item {
    position: relative !important;

    padding-right:
        44px !important;
}


/* =========================================================
   UNOPENED NOTIFICATION
========================================================= */

.notification-item.unopened {
    opacity: 1 !important;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;
}


/* =========================================================
   UNOPENED RED DOT
========================================================= */

.notification-item-dot {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 9px;
    height: 9px;

    display: block;

    border-radius: 50%;

    background:
        #d63b3b;

    box-shadow:
        0 0 0 2px
        rgba(
            255,
            255,
            255,
            0.82
        );

    pointer-events: none;
}


/* =========================================================
   OPENED NOTIFICATION
   NO DOT + DIFFERENT COLOR
========================================================= */

.notification-item.opened {
    opacity: 1 !important;

    background:
        rgba(
            207,
            220,
            223,
            0.68
        ) !important;
}


/* Opened notification text is slightly muted */

.notification-item.opened
.notification-message {
    color:
        #536269 !important;
}


.notification-item.opened
.notification-time {
    color:
        #748187 !important;
}


/* =========================================================
   HOVER STATES
========================================================= */

.notification-item.unopened:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.82
        ) !important;
}


.notification-item.opened:hover {
    background:
        rgba(
            197,
            213,
            216,
            0.78
        ) !important;
}

/* =========================================================
   PROFILE IMAGE POSITION + ZOOM EDITOR
========================================================= */

.large-anonymous-avatar,
.anonymous-avatar-button {
    overflow: hidden;
}


.profile-avatar-image,
.request-profile-image {
    object-fit: cover;

    will-change:
        transform;
}


/* =========================================================
   ENLARGED IMAGE EDITOR
========================================================= */

.profile-image-preview-box {
    width:
        fit-content !important;

    max-width: min(560px, 100%);
    padding: 16px;

    max-height:
        calc(
            100vh - 48px
        ) !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    gap:
        12px !important;

    overflow-y:
        auto;
}

.profile-image-preview-box {
    max-height: calc(100dvh - 48px) !important;
}
.profile-image-preview-box > .profile-image-adjust-viewport {
    max-width: 100%;
    flex-shrink: 0;
}
.profile-image-preview-box > .profile-image-preview-top-actions {
    flex-shrink: 0;
}
.profile-image-preview-box > .profile-image-adjust-buttons {
    flex-wrap: wrap;
}

.profile-image-preview-top-actions {
    display:
        flex;

    justify-content:
        flex-end;
}


.profile-image-adjust-viewport {
    width:
        min(
            520px,
            calc(100vw - 48px),
            calc(100vh - 250px)
        );

    aspect-ratio:
        1 / 1;

    align-self:
        center;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        #dddddd;

    touch-action:
        none;
}


.profile-image-adjust-viewport.is-editable {
    cursor:
        grab;
}

.profile-image-empty-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #dddddd;

    color:
        #66727e;

    font-size:
        clamp(
            56px,
            10vw,
            96px
        );

    font-weight:
        600;

    user-select:
        none;
}


.profile-image-adjust-viewport.is-dragging {
    cursor:
        grabbing;
}


.profile-image-preview-image {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    object-fit:
        cover !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;
}


/* =========================================================
   ADJUSTMENT CONTROLS
========================================================= */

.profile-image-adjust-help {
    margin:
        0;

    text-align:
        center;

    color:
        #ffffff;

    font-size:
        14px;
}


.profile-image-adjust-controls {
    width:
        100%;

    padding:
        12px;

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        );
}


.profile-image-adjust-row {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        #222222;

    font-size:
        14px;

    font-weight:
        600;
}


.profile-image-adjust-row input[type="range"] {
    flex:
        1 1 auto;

    min-width:
        0;
}


.profile-image-adjust-buttons {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;
}


.profile-image-adjust-buttons button {
    min-height:
        38px;

    padding:
        8px 14px;

    border:
        none;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #222222;

    font-size:
        14px;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-image-adjust-buttons button:hover {
    background:
        #eeeeee;
}

/* =========================================================
   RESET IMAGE BUTTON
========================================================= */

.profile-image-adjust-buttons
.profile-image-adjust-reset {

    background:
        #b56b20;

    color:
        #ffffff;
}


.profile-image-adjust-buttons
.profile-image-adjust-reset:hover {

    background:
        #945716;
}


/* =========================================================
   CENTER IMAGE BUTTON
========================================================= */

.profile-image-adjust-buttons
.profile-image-adjust-center {

    background:
        #2f7d4a;

    color:
        #ffffff;
}


.profile-image-adjust-buttons
.profile-image-adjust-center:hover {

    background:
        #25643b;
}

.profile-image-adjust-buttons
.profile-image-adjust-replace {
    background:
        #4f7085;

    color:
        #ffffff;
}


.profile-image-adjust-buttons
.profile-image-adjust-replace:hover {
    background:
        #3d5b6d;
}


.profile-image-adjust-buttons
.profile-image-adjust-save {
    background:
        var(
            --primary,
            #1f5f8b
        );

    color:
        #ffffff;
}


.profile-image-adjust-buttons
.profile-image-adjust-save:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        );
}

/* =========================================================
   LARGER MAIN PROFILE IMAGE
   ONLY ON THE PROFILE PAGE
========================================================= */

.profile-avatar-area
> .large-anonymous-avatar {

    width:
        120px !important;

    min-width:
        120px !important;

    max-width:
        120px !important;

    height:
        120px !important;

    min-height:
        120px !important;

    max-height:
        120px !important;

    flex:
        0 0 120px;

    border-radius:
        50%;

    overflow:
        hidden;

    font-size:
        40px;
}

/* =========================================================
   PROFILE IMAGE
   BLURRED EXTENSION + TRANSPARENT SHARP FOREGROUND
========================================================= */


/* =========================================================
   CIRCULAR IMAGE HOST
========================================================= */

.profile-image-backdrop-host {
    position:
        relative !important;

    overflow:
        hidden !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    isolation:
        isolate;
}


/* =========================================================
   REAL BLURRED BACKDROP IMAGE
========================================================= */

.profile-image-backdrop-layer {
    position:
        absolute !important;

    top:
        -20% !important;

    left:
        -20% !important;

    width:
        140% !important;

    height:
        140% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    display:
        block !important;

    object-fit:
        cover !important;

    border:
        none !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    filter:
        blur(20px);

    transform:
        scale(1.08);

    opacity:
        1;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

    z-index:
        0;
}


/* =========================================================
   SHARP FOREGROUND IMAGE

   IMPORTANT:
   Its empty rectangular area MUST be transparent
   so the blurred image underneath is visible.
========================================================= */

.profile-image-preview-image,
.profile-avatar-image,
.request-profile-image {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    object-fit:
        contain !important;

    border:
        none !important;

    border-radius:
        0 !important;

    outline:
        none !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    position:
        relative;

    z-index:
        1;

    will-change:
        transform;
}


/* =========================================================
   CIRCULAR MASKS
========================================================= */

.profile-image-adjust-viewport,
.large-anonymous-avatar,
.anonymous-avatar-button {
    overflow:
        hidden !important;

    border-radius:
        50% !important;
}

/* =========================================================
   PROFILE IMAGE SHAPE
   CIRCLE / SQUARE / PORTRAIT / HORIZONTAL
========================================================= */


/* =========================================================
   CIRCLE
========================================================= */

.profile-image-shape-circle {
    border-radius:
        50% !important;
}


/* =========================================================
   SQUARE
========================================================= */

.profile-image-shape-square {
    border-radius:
        0 !important;
}

/* =========================================================
   RHOMBUS
========================================================= */

.profile-image-shape-rhombus {
    border-radius:
        0 !important;

    -webkit-clip-path:
        polygon(
            50% 0%,
            100% 50%,
            50% 100%,
            0% 50%
        );

    clip-path:
        polygon(
            50% 0%,
            100% 50%,
            50% 100%,
            0% 50%
        );
}


/* =========================================================
   PORTRAIT RECTANGLE
   4:5 RATIO
========================================================= */

.profile-image-shape-portrait {
    border-radius:
        0 !important;
}


/* =========================================================
   HORIZONTAL RECTANGLE
   16:9 RATIO
========================================================= */

.profile-image-shape-horizontal {
    border-radius:
        0 !important;
}


/* =========================================================
   SHAPE SELECTOR
========================================================= */

.profile-image-adjust-row select {
    flex:
        1 1 auto;

    min-width:
        0;

    height:
        38px;

    padding:
        7px 10px;

    border:
        1px solid #cccccc;

    border-radius:
        6px;

    background:
        #ffffff;

    color:
        #222222;

    font-family:
        inherit;

    font-size:
        14px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

/* =========================================================
   IMAGE EDITOR SHAPE DIMENSIONS
========================================================= */


/* Circle and Square */

.profile-image-adjust-viewport.profile-image-shape-circle,
.profile-image-adjust-viewport.profile-image-shape-square,
.profile-image-adjust-viewport.profile-image-shape-rhombus {
    width:
        min(
            520px,
            calc(100vw - 48px),
            calc(100vh - 250px)
        );

    aspect-ratio:
        1 / 1;
}


/* Portrait Rectangle — 4:5 */

.profile-image-adjust-viewport.profile-image-shape-portrait {
    width:
        min(
            416px,
            calc(100vw - 48px),
            calc(
                (100vh - 250px) *
                0.8
            )
        );

    aspect-ratio:
        4 / 5;
}


/* Horizontal Rectangle — 16:9 */

.profile-image-adjust-viewport.profile-image-shape-horizontal {
    width:
        min(
            560px,
            calc(100vw - 48px)
        );

    aspect-ratio:
        16 / 9;
}

/* =========================================================
   MAIN PROFILE IMAGE SHAPE DIMENSIONS
========================================================= */


/* Circle */

.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-circle {

    width:
        120px !important;

    min-width:
        120px !important;

    max-width:
        120px !important;

    height:
        120px !important;

    min-height:
        120px !important;

    max-height:
        120px !important;

    flex:
        0 0 120px !important;
}


/* Square */

.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-square,

.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-rhombus {

    width:
        120px !important;

    min-width:
        120px !important;

    max-width:
        120px !important;

    height:
        120px !important;

    min-height:
        120px !important;

    max-height:
        120px !important;

    flex:
        0 0 120px !important;
}


/* Portrait Rectangle — 4:5 */

.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-portrait {

    width:
        96px !important;

    min-width:
        96px !important;

    max-width:
        96px !important;

    height:
        120px !important;

    min-height:
        120px !important;

    max-height:
        120px !important;

    flex:
        0 0 96px !important;
}


/* Horizontal Rectangle — 16:9 */

.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-horizontal {

    width:
        160px !important;

    min-width:
        160px !important;

    max-width:
        160px !important;

    height:
        90px !important;

    min-height:
        90px !important;

    max-height:
        90px !important;

    flex:
        0 0 160px !important;
}

/* =========================================================
   SMALL PROFILE IMAGE SHAPE DIMENSIONS
========================================================= */


/* Circle */

.anonymous-avatar-button.profile-image-shape-circle {
    width:
        38px !important;

    min-width:
        38px !important;

    height:
        38px !important;

    flex:
        0 0 38px !important;
}


/* Square */

.anonymous-avatar-button.profile-image-shape-square {
    width:
        38px !important;

    min-width:
        38px !important;

    height:
        38px !important;

    flex:
        0 0 38px !important;
}


/* Portrait */

.anonymous-avatar-button.profile-image-shape-portrait {
    width:
        30px !important;

    min-width:
        30px !important;

    height:
        38px !important;

    flex:
        0 0 30px !important;
}


/* Horizontal */

.anonymous-avatar-button.profile-image-shape-horizontal {
    width:
        52px !important;

    min-width:
        52px !important;

    height:
        38px !important;

    flex:
        0 0 52px !important;
}

/* =========================================================
   LARGER PROFILE IMAGES THROUGHOUT THE SITE
========================================================= */


/* =========================================================
   PUBLIC + FOLLOW FEED
========================================================= */

.request-user {
    align-items:
        center;

    gap:
        14px;
}


.anonymous-avatar-button {
    position:
        relative !important;

    width:
        64px !important;

    min-width:
        64px !important;

    max-width:
        64px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    flex:
        0 0 64px !important;

    overflow:
        hidden !important;

    font-size:
        22px !important;
}


/* Circle */

.anonymous-avatar-button.profile-image-shape-circle {
    width:
        64px !important;

    min-width:
        64px !important;

    max-width:
        64px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    flex:
        0 0 64px !important;
}


/* Square */

.anonymous-avatar-button.profile-image-shape-square {
    width:
        64px !important;

    min-width:
        64px !important;

    max-width:
        64px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    flex:
        0 0 64px !important;
}


/* Portrait — 4:5 */

.anonymous-avatar-button.profile-image-shape-portrait {
    width:
        51px !important;

    min-width:
        51px !important;

    max-width:
        51px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    flex:
        0 0 51px !important;
}


/* Horizontal — 16:9 */

.anonymous-avatar-button.profile-image-shape-horizontal {
    width:
        90px !important;

    min-width:
        90px !important;

    max-width:
        90px !important;

    height:
        51px !important;

    min-height:
        51px !important;

    max-height:
        51px !important;

    flex:
        0 0 90px !important;
}


/* =========================================================
   UNIVERSAL USER REFERENCE
========================================================= */

.user-reference-row {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        0 0 16px 0;
}

.fulfillment-identity-header { gap: 12px; }
.posted-fulfillment-dropdown-item { container: fulfillment-entry / inline-size; }
.fulfillment-identity-header .user-reference-copy { flex: 1 1 auto; min-width: 0; }
.fulfillment-identity-header .user-reference-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fulfillment-follow-control { width: fit-content !important; min-width: 0 !important; max-width: 100% !important; }
.fulfillment-identity-header:has(.fulfillment-follow-control) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
}
.fulfillment-identity-header:has(.fulfillment-follow-control) > .user-reference-avatar { grid-column: 1; grid-row: 1; }
.fulfillment-identity-header:has(.fulfillment-follow-control) .user-reference-copy {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 3px;
}
.fulfillment-identity-header:has(.fulfillment-follow-control) > .fulfillment-identity-actions { grid-column: 3; grid-row: 1; }
@container fulfillment-entry (max-width: 320px) {
    .fulfillment-identity-header { column-gap: 6px !important; --fulfillment-button-padding: 4px; }
}
@container fulfillment-entry (max-width: 240px) {
    :is(.posted-fulfillment-dropdown-item, .uploads-library-card) .fulfillment-identity-header > .user-reference-avatar {
        --fulfillment-avatar-width: 32px;
        --fulfillment-avatar-height: 32px;
        width: var(--fulfillment-avatar-width) !important;
        min-width: var(--fulfillment-avatar-width) !important;
        max-width: var(--fulfillment-avatar-width) !important;
        height: var(--fulfillment-avatar-height) !important;
        min-height: var(--fulfillment-avatar-height) !important;
        max-height: var(--fulfillment-avatar-height) !important;
        flex-basis: var(--fulfillment-avatar-width) !important;
    }
    :is(.posted-fulfillment-dropdown-item, .uploads-library-card) .fulfillment-identity-header > .user-reference-avatar.profile-image-shape-portrait { --fulfillment-avatar-width: 25.6px; }
    :is(.posted-fulfillment-dropdown-item, .uploads-library-card) .fulfillment-identity-header > .user-reference-avatar.profile-image-shape-horizontal { --fulfillment-avatar-width: 40px; --fulfillment-avatar-height: 22.5px; }
}
.fulfillment-identity-actions { display: flex; flex-direction: column; align-items: flex-end; align-self: start; gap: 4px; margin-left: auto; }
.fulfillment-identity-actions .fulfillment-options {
    position: relative !important;
    inset: auto !important;
    width: max-content !important;
    max-width: 100%;
}
.fulfillment-identity-actions .post-options-toggle { width: max-content !important; min-width: 0 !important; }
.fulfillment-follow-control :is(.follow-main-button, .unfollow-option) {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 12px;
    white-space: nowrap;
}
.fulfillment-follow-control .unfollow-option { margin-top: 4px; }
.fulfillment-follow-control .unfollow-option:not([hidden]) { display: inline-flex !important; align-items: center; justify-content: center; }
.fulfillment-follow-control .fulfillment-follow-button { gap: 0 !important; justify-content: flex-start !important; }
.fulfillment-follow-control .fulfillment-follow-button::before { margin-inline-end: 2px !important; flex: 0 0 auto; }
.fulfillment-follow-control .fulfillment-follow-button > span:first-child {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-overflow: ellipsis;
}
.fulfillment-follow-button > span { font-size: inherit !important; font-weight: inherit !important; }
.fulfillment-follow-button .dropdown-arrow { position: static; transform: none; margin-inline-start: 4px !important; }
.fulfillment-follow-button .dropdown-arrow:empty { display: none; }
.fulfillment-follow-control [hidden] { display: none !important; }
.fulfillment-identity-header .fulfillment-message-button {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;
    white-space: nowrap;
}


.user-reference-avatar {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        64px;

    min-width:
        64px;

    max-width:
        64px;

    height:
        64px;

    min-height:
        64px;

    max-height:
        64px;

    flex:
        0 0 64px;

    overflow:
        hidden !important;

    border-radius:
        50%;

    background:
        #dddddd;

    color:
        #222222;

    font-size:
        22px;

    font-weight:
        700;

    line-height:
        1;

    isolation:
        isolate;
}


.user-reference-avatar.is-clickable {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


/* Square */

.user-reference-avatar.profile-image-shape-square {
    width:
        64px !important;

    min-width:
        64px !important;

    max-width:
        64px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;
}


/* Portrait */

.user-reference-avatar.profile-image-shape-portrait {
    width:
        51px !important;

    min-width:
        51px !important;

    max-width:
        51px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    flex:
        0 0 51px !important;
}


/* Horizontal */

.user-reference-avatar.profile-image-shape-horizontal {
    width:
        90px !important;

    min-width:
        90px !important;

    max-width:
        90px !important;

    height:
        51px !important;

    min-height:
        51px !important;

    max-height:
        51px !important;

    flex:
        0 0 90px !important;
}


.user-reference-avatar-image {
    pointer-events:
        none;
}


.user-reference-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.user-reference-label {
    color:
        var(
            --muted-text,
            #66727e
        );

    font-size:
        12px;

    line-height:
        1.2;
}


.user-reference-name {
    width:
        fit-content;

    margin:
        0;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        var(
            --text,
            #222
        );

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        700;

    text-align:
        left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


/* =========================================================
   CONTACTS — FOLLOWING / FOLLOWERS
========================================================= */

#followListContent
.large-anonymous-avatar,

#followersListContent
.large-anonymous-avatar {
    width:
        88px !important;

    min-width:
        88px !important;

    max-width:
        88px !important;

    height:
        88px !important;

    min-height:
        88px !important;

    max-height:
        88px !important;
}


#followListContent
.large-anonymous-avatar.profile-image-shape-portrait,

#followersListContent
.large-anonymous-avatar.profile-image-shape-portrait {
    width:
        70px !important;

    min-width:
        70px !important;

    max-width:
        70px !important;

    height:
        88px !important;
}


#followListContent
.large-anonymous-avatar.profile-image-shape-horizontal,

#followersListContent
.large-anonymous-avatar.profile-image-shape-horizontal {
    width:
        124px !important;

    min-width:
        124px !important;

    max-width:
        124px !important;

    height:
        70px !important;

    min-height:
        70px !important;

    max-height:
        70px !important;
}


/* =========================================================
   PROFILE FOLLOWER / FOLLOWING STAT LIST
========================================================= */

.profile-stat-user-avatar.user-reference-avatar {
    width:
        72px !important;

    min-width:
        72px !important;

    max-width:
        72px !important;

    height:
        72px !important;

    min-height:
        72px !important;

    max-height:
        72px !important;

    flex:
        0 0 72px !important;
}


.profile-stat-user-avatar.profile-image-shape-portrait {
    width:
        58px !important;

    min-width:
        58px !important;

    max-width:
        58px !important;

    height:
        72px !important;
}


.profile-stat-user-avatar.profile-image-shape-horizontal {
    width:
        102px !important;

    min-width:
        102px !important;

    max-width:
        102px !important;

    height:
        57px !important;

    min-height:
        57px !important;

    max-height:
        57px !important;
}


/* =========================================================
   NOTIFICATIONS
========================================================= */

.notification-item {
    display:
        grid !important;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    grid-template-areas:
        "avatar message"
        "avatar time";

    align-items:
        start;

    column-gap:
        14px;

    row-gap:
        4px;
}


.notification-user-avatar {
    grid-area:
        avatar;
}


.notification-message {
    grid-area:
        message;

    min-width:
        0;

    margin:
        0 !important;
}


.notification-time {
    grid-area:
        time;

    margin-top:
        2px !important;
}


.notification-item.notification-without-avatar {
    grid-template-columns:
        minmax(
            0,
            1fr
        );

    grid-template-areas:
        "message"
        "time";
}


/* =========================================================
   MESSAGE THREAD
========================================================= */

.message-thread-summary {
    justify-content:
        flex-start !important;
}


.message-thread-summary-info {
    flex:
        1 1 auto;
}


.message-thread-summary-right {
    margin-left:
        auto;
}


/* =========================================================
   MESSAGE BUBBLE PROFILE IMAGE
========================================================= */

.message-bubble {
    display:
        grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    align-items:
        start;

    gap:
        10px;
}


.message-bubble-content {
    min-width:
        0;
}


.message-bubble-avatar {
    width:
        48px !important;

    min-width:
        48px !important;

    max-width:
        48px !important;

    height:
        48px !important;

    min-height:
        48px !important;

    max-height:
        48px !important;

    flex:
        0 0 48px !important;
}


.message-bubble-avatar.profile-image-shape-portrait {
    width:
        38px !important;

    min-width:
        38px !important;

    max-width:
        38px !important;

    height:
        48px !important;
}


.message-bubble-avatar.profile-image-shape-horizontal {
    width:
        68px !important;

    min-width:
        68px !important;

    max-width:
        68px !important;

    height:
        38px !important;

    min-height:
        38px !important;

    max-height:
        38px !important;
}

/* =========================================================
   FEED — OWN REQUEST CANCEL / CANCELED
   EXACT SAME SIZE AS ALL OTHER FEED ACTION BUTTONS
========================================================= */

.request-actions .posted-request-status-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}


/* =========================================================
   ACTIVE CANCEL
========================================================= */

.request-actions .posted-request-cancel-button {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    height: 38px;
    min-height: 38px;

    padding: 8px 7px;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #f5f5f5;
    color: #222;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;

    box-sizing: border-box;
}


.request-actions .posted-request-cancel-button:hover {
    background: #e8e8e8;
}


/* =========================================================
   CANCELED
   SAME SIZE — DIFFERENT COLOR
========================================================= */

.request-actions .posted-request-canceled-button {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    height: 38px;
    min-height: 38px;

    padding: 8px 7px;

    border: 1px solid #b43c3c;
    border-radius: 6px;

    background: #b43c3c;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    box-sizing: border-box;
}


.request-actions .posted-request-canceled-button:hover {
    background: #9e3434;
    border-color: #9e3434;

    opacity: 1;
}


/* =========================================================
   REPOST / DELETE
========================================================= */

.request-actions .posted-request-repost-option,
.request-actions .posted-request-delete-option {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
}

/* =========================================================
   OWN PROFILE SETTINGS MENU
   TOP-RIGHT OF PROFILE PROMPT
========================================================= */

.profile-card.own-profile-card {
    position: relative;
}

.profile-background-edit-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    padding: 6px 10px;
    border: 1px solid #6395EE;
    border-radius: 8px;
    background: #6395EE;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}
.own-profile-card:is(:hover, :focus-within) > .profile-background-edit-button {
    opacity: 1;
    pointer-events: auto;
}
#profile .own-profile-card .profile-name-area {
    box-sizing: border-box;
    padding-right: 130px;
}
@media (hover: none) {
    .own-profile-card > .profile-background-edit-button {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .profile-background-edit-button { transition: none; }
}


/* Leave room so profile content cannot sit underneath gear */

.profile-card.own-profile-card
.profile-header {
    padding-right: 58px;
}


/* =========================================================
   SETTINGS DROPDOWN
========================================================= */

.profile-settings-dropdown {

    position: relative;

    top: auto;
    right: auto;

    z-index: 100;

    margin: 0;
    padding: 0;
}


/* =========================================================
   SETTINGS GEAR
========================================================= */

.profile-settings-toggle {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.18
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    color:
        var(
            --text,
            #222
        );

    font-size: 22px;
    line-height: 1;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    list-style: none;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            0.10
        );
}


.profile-settings-toggle::-webkit-details-marker {
    display: none;
}


.profile-settings-toggle:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.96
        );
}


/* =========================================================
   SETTINGS DROPDOWN PANEL
========================================================= */

.profile-settings-menu {
    position: absolute;

    top: 50px;
    right: 0;

    width: 190px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 8px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.16
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.18
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   SETTINGS OPTIONS
========================================================= */

.profile-settings-menu
.profile-inline-edit-button {

    width: 100%;

    min-width: 0;

    min-height: 38px;

    display: flex;
    align-items: center;

    padding: 8px 12px;

    border: none;

    border-radius: 7px;

    background: transparent;

    color:
        var(
            --text,
            #222
        );

    font-size: 13px;
    font-weight: 600;

    text-align: left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-settings-menu
.profile-inline-edit-button:hover {

    background:
        rgba(
            0,
            0,
            0,
            0.07
        );
}


/* =========================================================
   LARGER OWN PROFILE IMAGE

   The old edit buttons have been removed from beneath
   the photo and username, so their former space is now
   used by the profile image.
========================================================= */

.profile-card.own-profile-card
.profile-avatar-area {

    gap: 0;
}


/* Circle */

.profile-card.own-profile-card
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-circle {

    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    flex:
        0 0 220px !important;
}


/* Square */

.profile-card.own-profile-card
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-square {

    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    flex:
        0 0 220px !important;
}


/* Portrait Rectangle — 4:5 */

.profile-card.own-profile-card
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-portrait {

    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;

    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    flex:
        0 0 176px !important;
}


/* Horizontal Rectangle — 16:9 */

.profile-card.own-profile-card
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-horizontal {

    width: 293px !important;
    min-width: 293px !important;
    max-width: 293px !important;

    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;

    flex:
        0 0 293px !important;
}


/* =========================================================
   SMALLER WINDOWS
========================================================= */

@media (max-width: 700px) {

    .profile-card.own-profile-card
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-circle,

    .profile-card.own-profile-card
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-square {

        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;

        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;

        flex:
            0 0 180px !important;
    }


    .profile-card.own-profile-card
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-portrait {

        width: 144px !important;
        min-width: 144px !important;
        max-width: 144px !important;

        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;

        flex:
            0 0 144px !important;
    }


    .profile-card.own-profile-card
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-horizontal {

        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;

        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;

        flex:
            0 0 240px !important;
    }

}

/* =========================================================
   OWN PROFILE HEADER
   USERNAME ABOVE PROFILE IMAGE
========================================================= */

.profile-card.own-profile-card
.profile-header {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    padding-right: 0;
}


/* Username goes across the top */

.profile-card.own-profile-card
.profile-name-area {

    order: 1;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    padding-right: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* Keep username horizontal instead of breaking vertically */

.profile-card.own-profile-card
.profile-name-area h2 {

    width: 100%;

    margin: 0;

    white-space: normal;

    overflow-wrap: break-word;

    word-break: normal;

    line-height: 1.2;
}


/* Profile image now goes underneath username */

.profile-card.own-profile-card
.profile-avatar-area {

    order: 2;

    align-self: center;
}

/* =========================================================
   PROFILE SETTINGS BUTTON
========================================================= */

.profile-settings-toggle {

    width: auto !important;
    min-width: 100px !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 8px 16px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.18
        ) !important;

    border-radius: 7px !important;

    background:
    var(
        --primary,
        #1f5f8b
    ) !important;

    color:
        #ffffff !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 1.2 !important;

        white-space: nowrap;

        cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    }


.profile-settings-toggle:hover {

    background:
        var(
            --primary-dark,
            #174a6d
        ) !important;
}

.profile-settings-menu {

    top: 46px;
    right: 0;
}

/* =========================================================
   PROFILE PAGE HEADER SETTINGS
========================================================= */

#profile
.profile-page-header {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


#profile
.profile-header-settings {

    margin-left: auto;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    position: relative;
}


/* Dropdown opens underneath Settings */

#profile
.profile-header-settings
.profile-settings-menu {

    top: 46px;
    right: 0;
}

/* =========================================================
   OTHER USERS — MATCH OWN PROFILE LAYOUT
========================================================= */

.profile-card:not(.own-profile-card)
.profile-header {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    align-items: flex-start;

    gap: 12px;

    padding-right: 0;
}


/* Username across the top */

.profile-card:not(.own-profile-card)
.profile-name-area {
    order: 1;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding-right: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


/* Keep username horizontal */

.profile-card:not(.own-profile-card)
.profile-name-area h2 {
    width: 100%;

    margin: 0;

    white-space: normal;

    overflow-wrap: break-word;
    word-break: normal;

    line-height: 1.2;
}


/* Center profile image underneath username */

.profile-card:not(.own-profile-card)
.profile-avatar-area {
    order: 2;

    align-self: center;

    gap: 0;
}


/* Other users' actions occupy the card's top-right corner; the photo spans both columns. */
.profile-card:not(.own-profile-card) .profile-avatar-row {
    display: contents;
}
.profile-card:not(.own-profile-card) .profile-header > .profile-name-area {
    grid-column: 1;
    grid-row: 1;
}
.profile-card:not(.own-profile-card) .profile-avatar-row > .profile-avatar-area {
    order: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    align-self: start;
}
#profile .profile-avatar-row > .profile-avatar-actions {
    order: 1;
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-end !important;
    justify-content: center !important;
}

@layer profile-action-layout {
    #profile .profile-avatar-actions {
        width: max-content;
    }
    #profile .profile-avatar-actions > :is(button, details, .profile-follow-container),
    #profile .profile-avatar-actions > details > summary,
    #profile .profile-avatar-actions .profile-follow-button {
        box-sizing: border-box !important;
        width: max-content !important;
        min-width: 0 !important;
        align-self: flex-end !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }
    #profile .profile-avatar-actions > :is(details, .profile-follow-container) {
        padding: 0 !important;
    }
    #profile .profile-avatar-actions .profile-follow-button {
        font-weight: 600 !important;
    }
    #profile .profile-avatar-actions .profile-message-button {
        gap: normal !important;
    }
    #profile .profile-avatar-actions > details > summary,
    #profile .profile-avatar-actions .profile-follow-button {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
}

/* Relationship lists use the compact post-button sizing beside the avatar. */
#profile .profile-card .profile-header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}
#profile .profile-card .profile-header > .profile-name-area {
    grid-column: 2;
    grid-row: 1;
}
#profile .profile-card .profile-name-area h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    word-break: normal;
}
#profile .own-profile-card .profile-name-area { padding-right: 0; }
#profile .profile-card .profile-header > .profile-relationship-buttons {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
}
#profile .profile-card .profile-header .profile-avatar-area {
    grid-column: 2;
    grid-row: 2;
}
#profile .profile-avatar-row > .profile-avatar-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    gap: 8px;
}
#profile .profile-card .profile-avatar-area {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
#profile .profile-relationship-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}
#profile#profile .profile-relationship-button {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    min-height: 0;
    padding: 4px 8px;
    border: 1px solid #82A3FF;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    white-space: nowrap;
}
#profile#profile .profile-relationship-button { min-height: 28px; }
#profile#profile .profile-relationship-button :is(span, strong) {
    font-size: inherit;
    font-weight: inherit !important;
    color: inherit;
}
#profile .profile-card:not(.own-profile-card) .profile-header { grid-template-columns: minmax(0, 1fr) auto; }
#profile .profile-card:not(.own-profile-card) .profile-header > .profile-name-area { grid-column: 1; }
#profile .profile-card:not(.own-profile-card) .profile-header .profile-avatar-area { grid-column: 1; }
#profile .profile-card:not(.own-profile-card) .profile-avatar-row > .profile-avatar-actions { grid-column: 2; }
#profile .own-profile-card .profile-header { grid-template-columns: minmax(0, 1fr) auto; padding-right: 0; }
#profile .own-profile-card .profile-header > .profile-name-area,
#profile .own-profile-card .profile-header .profile-avatar-area { grid-column: 1; }
#profile .own-profile-card .profile-header > .profile-relationship-buttons { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
#profile .profile-relationship-buttons > .profile-background-edit-button { position: static; opacity: 1; pointer-events: auto; padding: 4px 8px; border-radius: 12px; font-size: 13px; }
#profile .profile-avatar-actions > .profile-relationship-buttons { order: 4; align-items: flex-end; }
#profile .profile-relationship-buttons > button { align-self: flex-end; }
#profile .profile-relationship-lists { min-width: 0; width: 100%; }
#profile .profile-relationship-dropdown > summary[aria-disabled="true"] { opacity: .6; cursor: default; }
#profile .profile-relationship-dropdown > .profile-contact-list { width: 100%; min-width: 0; box-sizing: border-box; }
#profile .profile-relationship-dropdown .profile-stat-contact-row { width: 100%; }
#profile :is(.profile-relationship-button, .profile-dropdown-button)[aria-expanded="true"] > .profile-post-arrow { transform: rotate(180deg); }
#profile .profile-relationship-buttons > .post-purpose-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: var(--ufo-cursor, pointer); }
#profile .profile-relationship-button:hover:not(:disabled) { filter: brightness(.94); transform: none; }
html.user-large-buttons #profile .profile-relationship-button { min-height: 44px; }
html[data-text-size="large"] #profile#profile .profile-relationship-button { font-size: 17px !important; }
html[data-text-size="larger"] #profile#profile .profile-relationship-button { font-size: 19px !important; }
/* Let wider photo shapes fit beside the buttons in compact profile columns. */
#profile .profile-avatar-area > .large-anonymous-avatar {
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1;
    flex-shrink: 1 !important;
}
#profile .profile-avatar-area > .large-anonymous-avatar.profile-image-shape-portrait { aspect-ratio: 4 / 5; }
#profile .profile-avatar-area > .large-anonymous-avatar.profile-image-shape-horizontal { aspect-ratio: 16 / 9; }

/* Enlarge other users' portraits within the space reserved beside their actions. */
#profile .profile-card:not(.own-profile-card) .profile-avatar-area > .large-anonymous-avatar {
    width: 100% !important;
    max-width: min(100%, 440px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 1 440px !important;
}

/* Follow control stays with the other profile actions. */
.profile-card:not(.own-profile-card)
.profile-follow-container {
    order: 3;

    align-self: center;
}


/* =========================================================
   OTHER USER PROFILE IMAGE SIZE
   MATCH SIGNED-IN PROFILE
========================================================= */

/* Circle */

.profile-card:not(.own-profile-card)
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-circle {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    flex: 0 0 220px !important;
}


/* Square */

.profile-card:not(.own-profile-card)
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-square {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    flex: 0 0 220px !important;
}


/* Portrait Rectangle — 4:5 */

.profile-card:not(.own-profile-card)
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-portrait {
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;

    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;

    flex: 0 0 176px !important;
}


/* Horizontal Rectangle — 16:9 */

.profile-card:not(.own-profile-card)
.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-horizontal {
    width: 293px !important;
    min-width: 293px !important;
    max-width: 293px !important;

    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;

    flex: 0 0 293px !important;
}


/* =========================================================
   SMALLER WINDOWS
========================================================= */

@media (max-width: 700px) {

    .profile-card:not(.own-profile-card)
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-circle,

    .profile-card:not(.own-profile-card)
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-square {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;

        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;

        flex: 0 0 180px !important;
    }


    .profile-card:not(.own-profile-card)
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-portrait {
        width: 144px !important;
        min-width: 144px !important;
        max-width: 144px !important;

        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;

        flex: 0 0 144px !important;
    }


    .profile-card:not(.own-profile-card)
    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-horizontal {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;

        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;

        flex: 0 0 240px !important;
    }
}

/* =========================================================
   GROUP MESSAGE PARTICIPANTS
========================================================= */

#messageRecipientSelect[multiple] {
    min-height: 150px;
}

.message-recipient-help {
    display: block;

    margin: -2px 0 10px;

    color:
        var(
            --muted-text,
            #66727e
        );

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================
   PARTICIPANT MANAGER

   No empty strip when Add Users is closed.
   The dropdown supplies its own styling
   when it is actually visible.
========================================= */

.message-thread-participant-manager {
    width: 100%;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


.message-thread-participant-heading {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
}


.message-thread-participant-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 10px;
}


/* =========================================
   USERNAME CHIP
========================================= */

.message-participant-chip {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 34px;

    padding:
        5px
        8px
        5px
        10px;

    border:
        1px solid
        rgba(
            140,
            165,
            170,
            0.55
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 13px;
}


/* =========================================
   REMOVE USER
========================================= */

.message-participant-remove {
    width: 24px;
    min-width: 24px;

    height: 24px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            0.08
        );

    color: #7f1d1d;

    font-size: 17px;
    line-height: 1;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.message-participant-remove:hover {
    background:
        rgba(
            0,
            0,
            0,
            0.14
        );
}


/* =========================================
   ADD USERS
========================================= */

.message-thread-participant-add-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px;

    align-items: end;
}


.message-thread-participant-select {
    width: 100%;

    min-height: 94px;

    padding: 8px 10px;

    border:
        1px solid
        rgba(
            140,
            165,
            170,
            0.75
        );

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );
}


.message-thread-add-users-button {
    min-height: 42px;

    padding: 9px 14px;

    border: 0;
    border-radius: 9px;

    background:
        var(
            --primary,
            #1f5f8b
        );

    color: #ffffff;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.message-thread-add-users-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


.message-draft-recipient {
    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   SMALL SCREENS
========================================= */

@media (max-width: 600px) {

    .message-thread-participant-add-row {
        grid-template-columns: 1fr;
    }


    .message-thread-add-users-button {
        width: 100%;
    }

}

/* =========================================================
   ADD USERS DROPDOWN
========================================================= */


/* =========================================
   PARTICIPANTS + ADD USERS TOP ROW
========================================= */

.message-thread-participant-top-row {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}


.message-thread-participant-top-row
.message-thread-participant-heading {
    margin: 0;
}


/* =========================================
   ADD USERS BUTTON
========================================= */

.message-thread-add-users-button {
    width: auto;

    min-width: 110px;

    min-height: 36px;

    padding: 7px 12px;

    flex: 0 0 auto;

    border: 1px solid rgba(
        140,
        165,
        170,
        0.75
    );

    border-radius: 8px;

    background: rgba(
        255,
        255,
        255,
        0.78
    );

    color: var(
        --text,
        #222
    );

    font-size: 13px;

    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.message-thread-add-users-button:hover {
    background: rgba(
        255,
        255,
        255,
        0.95
    );
}


/* =========================================
   DROPDOWN
========================================= */

.message-thread-add-users-dropdown {
    width: 100%;

    margin-top: 10px;

    padding: 14px;

    position: relative;

    border: 1px solid rgba(
        140,
        165,
        170,
        0.55
    );

    border-radius: 10px;

    background: rgba(
        255,
        255,
        255,
        0.9
    );

    box-shadow:
        0 8px 22px
        rgba(
            0,
            0,
            0,
            0.1
        );
}


.message-thread-add-users-dropdown[hidden] {
    display: none !important;
}


/* =========================================
   DROPDOWN LABELS
========================================= */

.message-thread-add-users-label {
    display: block;

    width: 100%;

    margin:
        0
        0
        7px;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================
   FOLLOWING USER LIST

   ONLY FOLLOWED USERS ARE INSERTED
   INTO THIS LIST BY JAVASCRIPT.
========================================= */

.message-thread-add-users-dropdown
.message-thread-participant-select {
    width: 100%;

    min-height: 110px;

    margin-bottom: 14px;

    padding: 8px 10px;

    border: 1px solid rgba(
        140,
        165,
        170,
        0.75
    );

    border-radius: 8px;

    background: #ffffff;

    color: var(
        --text,
        #222
    );
}


/* =========================================
   EXACT USERNAME INPUT
========================================= */

.message-thread-username-input {
    width: 100%;

    min-height: 40px;

    margin-bottom: 6px;

    padding: 8px 10px;

    border: 1px solid rgba(
        140,
        165,
        170,
        0.75
    );

    border-radius: 8px;

    background: #ffffff;

    color: var(
        --text,
        #222
    );

    font: inherit;

    font-size: 14px;
}


.message-thread-username-input:focus {
    outline: none;

    border-color: var(
        --primary,
        #1f5f8b
    );

    box-shadow:
        0 0 0 2px
        rgba(
            31,
            95,
            139,
            0.12
        );
}


/* =========================================
   USERNAME VALIDATION
========================================= */

.message-thread-username-status {
    display: block;

    min-height: 18px;

    margin-bottom: 12px;

    color: var(
        --muted-text,
        #66727e
    );

    font-size: 12px;

    line-height: 1.4;
}


.message-thread-username-status.valid {
    color: #287242;
}


.message-thread-username-status.invalid {
    color: #9d2929;
}


/* =========================================
   CONFIRM ADD USERS
========================================= */

.message-thread-confirm-add-users-button {
    width: 100%;

    min-height: 40px;

    padding: 8px 14px;

    border: 0;

    border-radius: 8px;

    background: var(
        --primary,
        #1f5f8b
    );

    color: #ffffff;

    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.message-thread-confirm-add-users-button:hover {
    background: var(
        --primary-dark,
        #174a6d
    );
}


/* =========================================
   SMALL SCREENS
========================================= */

@media (max-width: 600px) {

    .message-thread-participant-top-row {
        align-items: center;
    }


    .message-thread-add-users-button {
        width: auto;

        min-width: 100px;
    }

}

/* =========================================================
   MESSAGE THREAD HEADER
   GROUP MESSAGE LAYOUT
========================================================= */


/* =========================================
   HEADER INFORMATION
========================================= */

.message-thread-summary-info {
    flex: 1 1 auto !important;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 7px;
}


/* =========================================
   REMOVE OLD MESSAGE PREVIEW
========================================= */

.message-thread-preview {
    display: none !important;
}


/* =========================================
   SMALL GROUP PROFILE IMAGES
========================================= */

.message-thread-group-avatars {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    min-height: 30px;
}


.message-thread-group-avatar {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    flex: 0 0 30px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    border-radius: 50% !important;

    background: #dddddd;

    font-size: 12px !important;
    font-weight: 600;

    line-height: 1;

    box-sizing: border-box;
}


.message-thread-group-avatar
.user-reference-avatar-image,

.message-thread-group-avatar
img {

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 50% !important;
}


/* =========================================
   RIGHT SIDE OF MESSAGE HEADER

   Arrow above Add Users.
========================================= */

.message-thread-summary-right {
    margin-left: auto !important;

    flex: 0 0 auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-end !important;

    justify-content: center !important;

    gap: 6px !important;
}


.message-thread-summary-right-top {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}


/* =========================================
   ADD USERS BUTTON IN HEADER
========================================= */

.message-thread-header-add-users {
    width: auto !important;

    min-width: 90px !important;

    height: 30px !important;
    min-height: 30px !important;

    padding: 4px 9px !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(
            140,
            165,
            170,
            0.75
        ) !important;

    border-radius: 7px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        ) !important;

    color:
        var(
            --text,
            #222
        ) !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    white-space: nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.message-thread-header-add-users:hover {
    background:
        rgba(
            255,
            255,
            255,
            1
        ) !important;
}


/* =========================================
   PARTICIPANTS INSIDE OPEN THREAD

   Add Users no longer lives here.
========================================= */

.message-thread-participant-heading {
    display: block;

    margin:
        0
        0
        9px
        0;
}


/* =========================================
   KEEP ADD-USERS DROPDOWN FULL WIDTH
========================================= */

.message-thread-add-users-dropdown {
    width: 100%;

    margin-top: 10px;
}


/* =========================================
   SMALL WINDOWS
========================================= */

@media (max-width: 600px) {

    .message-thread-summary {
        align-items: center !important;

        gap: 8px !important;
    }


    .message-thread-group-avatar {
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;

        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;

        flex:
            0 0 26px !important;
    }


    .message-thread-header-add-users {
        min-width: 76px !important;

        padding:
            4px
            7px !important;

        font-size: 11px !important;
    }

}

/* =========================================================
   MESSAGE PARTICIPANTS AS PROFILE IMAGES
========================================================= */


/* =========================================
   PARTICIPANT CHIPS
========================================= */

.message-participant-chip {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    min-height: 0 !important;

    padding: 3px !important;

    border-radius: 999px !important;
}


/* =========================================
   PARTICIPANT PROFILE IMAGE
========================================= */

.message-participant-avatar {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    flex: 0 0 38px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    border-radius: 50% !important;

    background: #dddddd;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
}


.message-participant-avatar img,
.message-participant-avatar
.user-reference-avatar-image {

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 50% !important;
}


/* =========================================
   GROUP IMAGES IN THREAD HEADER
========================================= */

.message-thread-group-avatars {
    display: flex !important;

    align-items: center !important;

    flex-wrap: nowrap !important;

    gap: 5px !important;

    min-height: 30px !important;

    margin: 0 !important;
}


/* Let profile images occupy the space where
   the participant usernames used to appear. */

.message-thread-summary-info {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;
}


/* =========================================
   ADD USERS ARROW
========================================= */

.message-thread-header-add-users {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;
}

/* =========================================================
   GROUP PARTICIPANT REMOVE CONTROL
========================================================= */

.message-thread-group-avatar-wrapper {
    width: 34px;
    height: 34px;

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 34px;
}


/* =========================================
   SMALL PROFILE IMAGE
========================================= */

.message-thread-group-avatar-wrapper
.message-thread-group-avatar {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    flex: 0 0 30px !important;
}


/* =========================================
   REMOVE X
========================================= */

.message-thread-group-avatar-remove {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;

    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;

    position: absolute;

    top: -3px;
    right: -3px;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 50% !important;

    background: #ffffff !important;

    color: #444444 !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    z-index: 2;
}


.message-thread-group-avatar-remove:hover {
    background: #eeeeee !important;

    color: #000000 !important;
}

/* =========================================================
   LARGER GROUP PARTICIPANT PROFILE IMAGES
========================================================= */

.message-thread-group-avatar-wrapper {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;

    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;

    flex: 0 0 56px !important;

    position: relative;
}


/* =========================================
   PARTICIPATING USER PROFILE IMAGE
========================================= */

.message-thread-group-avatar-wrapper
.message-thread-group-avatar {

    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    flex: 0 0 50px !important;

    border-radius: 50% !important;
}


/* Make the actual uploaded image fill
   the larger circular profile area. */

.message-thread-group-avatar-wrapper
.message-thread-group-avatar img,

.message-thread-group-avatar-wrapper
.message-thread-group-avatar
.user-reference-avatar-image {

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    object-fit: cover !important;

    border-radius: 50% !important;
}


/* =========================================
   KEEP REMOVE X POSITIONED CORRECTLY
========================================= */

.message-thread-group-avatar-remove {
    top: -1px !important;
    right: -1px !important;

    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    font-size: 13px !important;
}


/* =========================================
   GIVE MULTIPLE PARTICIPANTS SOME SPACE
========================================= */

.message-thread-group-avatars {
    gap: 8px !important;

    min-height: 56px !important;
}

/* =========================================================
   PROFILE HEADER
   SETTINGS + SIGN OUT
========================================================= */

#profile
.profile-header-settings {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;
}


/* =========================================
   SEPARATE SIGN OUT BUTTON
========================================= */

#profile
.profile-header-sign-out-button {
    width: auto !important;
    min-width: 100px !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 8px 16px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.18
        ) !important;

    border-radius: 7px !important;

    background:
        var(
            --primary,
            #1f5f8b
        ) !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


#profile
.profile-header-sign-out-button:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        ) !important;
}

/* =========================================================
   MESSAGE COMPOSER ACTION BUTTONS
   SEND LEFT — SAVE DRAFT RIGHT
========================================================= */

.message-form-actions {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;
}


/* =========================================
   BOTH BUTTONS SHARE THE ROW
========================================= */

.message-form-actions
.message-send-button,

.message-form-actions
.message-draft-button {
    width: auto !important;
    min-width: 0 !important;

    flex: 1 1 0 !important;

    margin: 0 !important;
}


/* =========================================
   SEND MESSAGE — LEFT
========================================= */

.message-form-actions
.message-send-button {
    order: 1 !important;
}


/* =========================================
   SAVE DRAFT — RIGHT
========================================= */

.message-form-actions
.message-draft-button {
    order: 2 !important;
}

/* =========================================================
   MATCH ADD USERS TO OPEN / CLOSED BUTTON
========================================================= */

.message-thread-header-add-users {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    padding: 4px 9px !important;

    font-size: 12px !important;
}

.message-thread-arrow {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
}

/* =========================================================
   ADD USERS WORKS WHILE MESSAGE THREAD IS CLOSED
========================================================= */

/*
 * A closed <details> normally hides everything
 * except its <summary>.
 *
 * Keep the Add Users manager available while
 * continuing to hide the actual conversation.
 */

.message-thread-dropdown:not([open])
> .message-thread-participant-manager {
    display: block !important;
}


/* The actual message conversation remains closed. */

.message-thread-dropdown:not([open])
> .message-thread-conversation {
    display: none !important;
}

.message-thread-dropdown:not([open])
> .message-thread-participant-manager {
    display: block !important;
}


/* The actual message conversation remains closed. */

.message-thread-dropdown:not([open])
> .message-thread-conversation {
    display: none !important;
}

/* =========================================================
   COMPLETE MESSAGE THREAD SHELL
========================================================= */

.message-thread-shell {
    width: 100%;
    min-width: 0;
}


/* =========================================
   ADD USERS PANEL OUTSIDE CONVERSATION
========================================= */

.message-thread-shell
> .message-thread-participant-manager {
    width: 100%;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;
}

/* =========================================================
   ADD USERS OVERLAYS AN OPEN MESSAGE THREAD

   Closed thread:
   Add Users opens normally below the thread header.

   Open thread:
   Add Users floats over the conversation instead
   of pushing the thread downward.
========================================================= */

.message-thread-shell {
    position: relative !important;
    overflow: visible !important;
}


/* =========================================
   OPEN THREAD + ADD USERS PANEL
========================================= */

.message-thread-dropdown[open]
+
.message-thread-participant-manager {
    position: absolute !important;

    top: 86px !important;
    left: 18px !important;
    right: 18px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1000 !important;
}


/* =========================================
   ADD USERS WINDOW WHILE OVER THREAD
========================================= */

.message-thread-dropdown[open]
+
.message-thread-participant-manager
.message-thread-add-users-dropdown {
    width: 100% !important;

    margin-top: 0 !important;

    position: relative !important;

    z-index: 1001 !important;

    box-shadow:
        0 12px 32px
        rgba(
            0,
            0,
            0,
            0.22
        ) !important;
}


/* =========================================
   KEEP ACTIVE ADD-USERS WINDOW ABOVE
   OTHER MESSAGE THREADS
========================================= */

.message-thread-shell:has(
    > .message-thread-participant-manager
      .message-thread-add-users-dropdown:not([hidden])
) {
    z-index: 100 !important;
}

/* =========================================================
   PROFILE SETTINGS DROPDOWN ARROW
========================================================= */

.profile-settings-toggle {
    gap: 8px !important;
}


.profile-settings-arrow {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    font-size: 11px;
    line-height: 1;

    pointer-events: none;
}

/* =========================================================
   DELETE ACCOUNT
========================================================= */

.profile-settings-menu
.profile-delete-account-button {
    color: #b43c3c !important;

    margin-top: 4px !important;

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.10
        ) !important;

    border-radius:
        0 0 7px 7px !important;
}


.profile-settings-menu
.profile-delete-account-button:hover {
    background:
        rgba(
            180,
            60,
            60,
            0.10
        ) !important;
}

/* =========================================================
   CONTACTS
   FOLLOWING + FOLLOWERS DUAL SCROLL PAGE
========================================================= */


/* =========================================
   KEEP CONTACT PAGE INSIDE VIEWPORT
========================================= */

#followList.page.active {
    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* =========================================
   DUAL LIST AREA
========================================= */

#followList
> .contacts-dual-scroll-area {
    width: 100% !important;

    flex: 1 1 auto !important;

    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding:
        20px 24px 24px !important;

    overflow: hidden !important;
}


/* =========================================
   TWO EQUAL COLUMNS
========================================= */

.contacts-dual-grid {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 20px;
}


/* =========================================
   INDIVIDUAL COLUMN
========================================= */

.contacts-dual-column {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.34
        );

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);

    backdrop-filter:
        blur(14px)
        saturate(125%);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius: 18px;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        );
}


/* =========================================
   COLUMN TITLE
========================================= */

.contacts-dual-column-header {
    width: 100%;

    flex: 0 0 auto;

    padding:
        14px 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.76
        );
}


.contacts-dual-column-header h3 {
    margin: 0;

    color:
        var(
            --text,
            #222
        );

    font-size: 17px;
    font-weight: 700;
}


/* =========================================
   INDEPENDENT SCROLL AREA
========================================= */

.contacts-dual-column-scroll {
    width: 100%;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    padding: 16px;

    overflow-y: scroll;
    overflow-x: hidden;

    scrollbar-gutter: stable;
}


/* =========================================
   CARD LIST
========================================= */

.contacts-dual-list-content {
    width: 100%;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 14px;

    padding-bottom: 12px;
}


.contacts-dual-list-content
.profile-card {
    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
}


/* =========================================================
   FOLLOWERS INSIDE DUAL PAGE
   MATCH EXISTING CONTACT AVATAR SIZES
========================================================= */

#followListFollowersContent
.large-anonymous-avatar {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;

    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
}


#followListFollowersContent
.large-anonymous-avatar.profile-image-shape-portrait {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;

    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
}


#followListFollowersContent
.large-anonymous-avatar.profile-image-shape-horizontal {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;

    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
}


/* =========================================================
   NARROW WEBSITE WINDOWS
   KEEP BOTH LISTS SIDE BY SIDE
========================================================= */

@media (max-width: 700px) {

    #followList
    > .contacts-dual-scroll-area {
        padding:
            12px !important;
    }


    .contacts-dual-grid {
        gap: 10px;
    }


    .contacts-dual-column-header {
        padding:
            11px 12px;
    }


    .contacts-dual-column-header h3 {
        font-size: 14px;
    }


    .contacts-dual-column-scroll {
        padding: 10px;
    }

}

/* =========================================================
   BLOCK BUTTONS
   WHITE BACKGROUND + RED TEXT + RED BORDER
========================================================= */

.request-actions
.request-block-button,
.profile-block-button,
.blocked-user-unblock-button {
    background:
        #ffffff !important;

    color:
        #b43c3c !important;

    border:
        1px solid
        #b43c3c !important;
}


/* =========================================
   BLOCK BUTTON HOVER
========================================= */

.request-actions
.request-block-button:hover,
.profile-block-button:hover,
.blocked-user-unblock-button:hover {
    background:
        #f7f7f7 !important;

    color:
        #b43c3c !important;

    border-color:
        #b43c3c !important;
}


/* =========================================
   PROFILE FOLLOW + BLOCK ROW

   FOLLOW = LEFT
   BLOCK  = RIGHT
========================================= */

.profile-follow-block-row {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: wrap;

    align-items: flex-start;

    gap: 8px;
}


/* Follow stays on the left */

.profile-follow-block-row
.profile-follow-container {
    order: 1;
}


/* Block stays on the right */

.profile-follow-block-row
.profile-block-button {
    order: 2;
}


/* =========================================
   PROFILE BLOCK BUTTON
   EXACT SAME SIZE AS FOLLOW
========================================= */

.profile-block-button {
    width:
        155px !important;

    min-width:
        155px !important;

    max-width:
        155px !important;


    height:
        38px !important;

    min-height:
        38px !important;

    max-height:
        38px !important;


    padding:
        6px 12px !important;


    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;


    border-radius:
        6px !important;


    font-size:
        14px !important;

    font-weight:
        500 !important;


    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-block-button:disabled {
    opacity:
        0.65;

    cursor:
        default;
}


/* =========================================
   MATCH FOLLOW SIZE
   NARROW WEBSITE
========================================= */

@media (max-width: 800px) {

    .profile-block-button {
        width:
            125px !important;

        min-width:
            125px !important;

        max-width:
            125px !important;
    }

}


/* =========================================
   MATCH FOLLOW SIZE
   SMALL WEBSITE
========================================= */

@media (max-width: 550px) {

    .profile-block-button {
        width:
            105px !important;

        min-width:
            105px !important;

        max-width:
            105px !important;
    }

}


/* =========================================
   BLOCKED USERS PAGE
========================================= */

#blockedListContent {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.blocked-user-card {
    display: flex !important;

    align-items: center;

    justify-content: space-between;

    gap: 16px;
}


.blocked-user-name-button {
    width: auto;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(
            --text,
            #222
        );

    font-size: 15px;
    font-weight: 700;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.blocked-user-unblock-button {
    width: 120px;

    min-height: 38px;

    padding: 7px 12px;

    border-radius: 6px;

    font-size: 13px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

/* =========================================
   BLOCKED USER IDENTITY
========================================= */

.blocked-user-identity {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.blocked-user-identity
.profile-avatar-button {
    flex-shrink: 0;
}


.blocked-user-identity
.blocked-user-name-button {
    min-width: 0;

    text-align: left;
}

/* =========================================================
   REPORT USER BUTTON
========================================================= */

.request-actions
.request-report-user-button {
    background:
        #ffffff !important;

    color:
        #b43c3c !important;

    border:
        1px solid
        #b43c3c !important;
}


.request-actions
.request-report-user-button:hover {
    background:
        #f7f7f7 !important;

    color:
        #b43c3c !important;

    border-color:
        #b43c3c !important;
}


/* =========================================================
   REPORT A PROBLEM PAGE
========================================================= */

#reportContent {
    width:
        100%;

    max-width:
        760px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        24px;
}


/* =========================================
   REPORT FORM
========================================= */

.report-problem-form {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;

    padding:
        20px;

    background:
        #ffffff;

    border:
        1px solid
        #d7d7d7;

    border-radius:
        9px;
}


.report-problem-form h3 {
    margin:
        0;
}


.report-problem-form label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    font-weight:
        600;
}


.report-problem-form select,
.report-problem-form textarea {
    width:
        100%;

    padding:
        10px 11px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        #ffffff;

    color:
        #222;

    font-size:
        14px;
}


.report-problem-form textarea {
    min-height:
        140px;

    resize:
        vertical;
}


/* =========================================
   REPORTED USER
========================================= */

.report-user-target {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        12px;

    background:
        #f5f5f5;

    border:
        1px solid
        #ddd;

    border-radius:
        6px;
}


/* =========================================
   REPORT SUBMIT
========================================= */

.report-submit-button {
    width:
        fit-content;

    min-width:
        150px;

    min-height:
        40px;

    padding:
        8px 16px;

    border:
        1px solid
        #b43c3c;

    border-radius:
        6px;

    background:
        #ffffff;

    color:
        #b43c3c;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.report-submit-button:hover {
    background:
        #f7f7f7;
}


/* =========================================
   SUBMITTED REPORTS
========================================= */

.submitted-reports-section {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


.submitted-reports-section h3 {
    margin:
        0;
}


.submitted-report-list {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.submitted-report-card {
    width:
        100%;

    padding:
        16px;

    background:
        #ffffff;

    border:
        1px solid
        #d7d7d7;

    border-radius:
        9px;
}


.submitted-report-card h4 {
    margin:
        0 0 10px 0;
}


.submitted-report-card p {
    margin:
        6px 0;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}


.submitted-report-card small {
    display:
        block;

    margin-top:
        12px;

    color:
        #666;
}


.report-empty-message {
    margin:
        0;

    padding:
        16px;

    background:
        #ffffff;

    border:
        1px solid
        #d7d7d7;

    border-radius:
        9px;
}

/* =========================================================
   REPORT USER PROFILE IMAGE
========================================================= */

.report-user-target {
    align-items:
        center;
}


.report-user-avatar {
    flex-shrink:
        0;
}


/* =========================================
   REPORT FORM USER NAME
========================================= */

.report-user-target-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.report-user-target-copy span {
    color:
        #666;

    font-size:
        13px;
}


.report-user-target-copy strong {
    color:
        #222;

    font-size:
        15px;

    overflow-wrap:
        anywhere;
}


/* =========================================
   SUBMITTED REPORT USER
========================================= */

.submitted-report-user-row {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0 0 14px 0;

    min-width:
        0;
}


.submitted-report-user-name {
    min-width:
        0;

    color:
        #222;

    font-size:
        15px;

    overflow-wrap:
        anywhere;
}

/* =========================================================
   REPORT FORM ACTION BUTTONS
========================================================= */

.report-form-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;
}


.report-form-cancel-button {
    width:
        fit-content;

    min-width:
        100px;

    min-height:
        40px;

    padding:
        8px 16px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        #f5f5f5;

    color:
        #222;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.report-form-cancel-button:hover {
    background:
        #e8e8e8;
}


/* =========================================================
   SUBMITTED REPORT ACTIONS
========================================================= */

.submitted-report-actions {
    display:
        flex;

    align-items:
        flex-start;

    margin-top:
        14px;
}


/* =========================================
   CANCEL SUBMITTED REPORT
========================================= */

.submitted-report-cancel-button {
    min-width:
        100px;

    min-height:
        38px;

    padding:
        7px 14px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        #f5f5f5;

    color:
        #222;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.submitted-report-cancel-button:hover {
    background:
        #e8e8e8;
}


/* =========================================================
   CANCELED REPORT DROPDOWN
========================================================= */

.report-canceled-dropdown {
    width:
        150px;

    display:
        flex;

    flex-direction:
        column;

    position:
        relative;
}


.report-canceled-main-button {
    width:
        150px;

    min-height:
        38px;

    padding:
        7px 12px;

    border:
        1px solid
        #aaa;

    border-radius:
        6px;

    background:
        #eeeeee;

    color:
        #444;

    font-weight:
        600;

    text-align:
        center;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.report-canceled-main-button:hover {
    background:
        #e5e5e5;
}


/* =========================================
   CANCELED OPTIONS
========================================= */

.report-canceled-options {
    width:
        150px;

    display:
        none;

    flex-direction:
        column;

    gap:
        2px;

    margin-top:
        3px;

    padding:
        4px;

    background:
        #ffffff;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            0.10
        );
}


.report-canceled-options button {
    width:
        100%;

    min-height:
        36px;

    padding:
        7px 10px;

    border:
        1px solid
        transparent;

    border-radius:
        5px;

    background:
        #ffffff;

    text-align:
        left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


/* =========================================
   REPOST
========================================= */

.report-repost-button {
    color:
        #222;
}


.report-repost-button:hover {
    background:
        #f0f0f0;
}


/* =========================================
   DELETE
========================================= */

.report-delete-button {
    color:
        #b43c3c;
}


.report-delete-button:hover {
    background:
        #fff3f3;

    border-color:
        #e3b5b5;
}

/* =========================================================
   PROFILE PHOTO GALLERY
========================================================= */

.profile-gallery-section {
    width:
        100%;

    min-width:
        0;

    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid
        #d7d7d7;
}


/* =========================================
   GALLERY HEADER
========================================= */

.profile-gallery-header {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        18px;
}


.profile-gallery-header h3 {
    margin:
        0;

    font-size:
        18px;
}


/* =========================================
   ADD PHOTOS
========================================= */

.profile-gallery-add-button {
    min-width:
        110px;

    min-height:
        38px;

    padding:
        8px 14px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        #f5f5f5;

    color:
        #222;

    font-size:
        14px;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-gallery-add-button:hover {
    background:
        #e8e8e8;
}


.profile-gallery-add-button:disabled {
    opacity:
        0.6;

    cursor:
        default;
}


/* =========================================
   EMPTY GALLERY
========================================= */

.profile-gallery-empty {
    margin:
        0;

    color:
        #666;

    font-size:
        14px;
}


/* =========================================================
   GALLERY GRID
========================================================= */

.profile-gallery-grid {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                230px,
                1fr
            )
        );

    gap:
        20px;

    align-items:
        start;
}


/* =========================================
   ONE GALLERY PHOTO
========================================= */

.profile-gallery-item {
    position: relative;
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;
}

/* Cast the shadow outside the clipped photo so it follows every saved shape. */
.profile-gallery-remove-button {
    position: absolute;
    top: 0;
    right: -34px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 1px solid #973D60;
    border-radius: 50%;
    background: #F8EEEC;
    color: #4E0707;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.profile-gallery-remove-button:hover { background: #eea2aa; }
.profile-gallery-remove-button:focus-visible { outline: 2px solid #973D60; outline-offset: 2px; }

.profile-upload-order-list { padding: 0; list-style: none; display: grid; gap: 12px; }
.profile-upload-order-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-upload-order-list img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; }
.profile-upload-order-list span { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.profile-upload-order-list button { padding: 6px 8px; }

.profile-gallery-photo-depth {
    position: relative;
    display: flex;
    justify-content: center;
    width: min(220px, 100%);
    min-width: 0;
    filter: drop-shadow(0 3px 2px rgba(24, 12, 20, .24))
        drop-shadow(0 7px 8px rgba(24, 12, 20, .2));
}
html.user-high-contrast .profile-gallery-photo-depth { filter: none; }
.profile-gallery-photo-depth:has(.profile-image-shape-portrait) { width: min(190px, 100%); }
.profile-gallery-photo-depth:has(.profile-image-shape-horizontal) { width: min(320px, 100%); }
.profile-gallery-photo-depth:has(.profile-gallery-remove-button) { max-width: calc(100% - 68px); }


/* =========================================================
   GALLERY IMAGE FRAME
========================================================= */

.profile-gallery-image-frame {
    position:
        relative;

    display:
        block;

    padding:
        0;

    overflow:
        hidden !important;

    border:
        none;

    background:
        transparent;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    isolation:
        isolate;
}


/* =========================================
   CIRCLE
   ALWAYS LOCKED TO A TRUE 1:1 CIRCLE
========================================= */

.profile-gallery-image-frame.profile-image-shape-circle {
    width:
        min(
            220px,
            100%
        ) !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    aspect-ratio:
        1 / 1 !important;

    flex:
        0 0 auto !important;

    align-self:
        center;

    border-radius:
        50% !important;
}


/* =========================================
   SQUARE
========================================= */

.profile-gallery-image-frame.profile-image-shape-square {
    width:
        min(
            220px,
            100%
        ) !important;

    height:
        auto !important;

    aspect-ratio:
        1 / 1 !important;

    border-radius:
        0 !important;
}


/* Keep the diamond independent of the image's intrinsic dimensions. */
.profile-gallery-image-frame.profile-image-shape-rhombus {
    width: min(220px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    align-self: center;
    border-radius: 0 !important;
}
.profile-gallery-image-frame.profile-image-shape-rhombus > .profile-gallery-image {
    position: absolute;
    inset: 0;
}

/* =========================================
   PORTRAIT — 4:5
========================================= */

.profile-gallery-image-frame.profile-image-shape-portrait {
    width:
        min(
            190px,
            100%
        ) !important;

    height:
        auto !important;

    aspect-ratio:
        4 / 5 !important;

    border-radius:
        0 !important;
}


/* =========================================
   HORIZONTAL — 16:9
========================================= */

.profile-gallery-image-frame.profile-image-shape-horizontal {
    width:
        min(
            320px,
            100%
        ) !important;

    height:
        auto !important;

    aspect-ratio:
        16 / 9 !important;

    border-radius:
        0 !important;
}


/* =========================================================
   SHARP GALLERY IMAGE
========================================================= */

.profile-gallery-image {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    object-fit:
        contain !important;

    border:
        none !important;

    border-radius:
        0 !important;

    outline:
        none !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    position:
        relative;

    z-index:
        1;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

    will-change:
        transform;
}


/* =========================================================
   EDIT BUTTON
========================================================= */

.profile-gallery-edit-button {
    min-width:
        80px;

    min-height:
        34px;

    padding:
        6px 12px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        #ffffff;

    color:
        #222;

    font-size:
        13px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-gallery-edit-button:hover {
    background:
        #eeeeee;
}


/* =========================================================
   DELETE IMAGE BUTTON INSIDE EDITOR
========================================================= */

.profile-image-adjust-buttons
.profile-gallery-delete-button {
    border:
        1px solid
        #b43c3c;

    background:
        #ffffff;

    color:
        #b43c3c;
}


.profile-image-adjust-buttons
.profile-gallery-delete-button:hover {
    background:
        #fff3f3;
}


/* =========================================================
   SMALLER SCREENS
========================================================= */

@media (
    max-width:
        700px
) {

    .profile-gallery-grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(
                    180px,
                    1fr
                )
            );
    }


    .profile-gallery-image-frame.profile-image-shape-circle,
    .profile-gallery-image-frame.profile-image-shape-square,
    .profile-gallery-image-frame.profile-image-shape-rhombus {
        width:
            min(
                190px,
                100%
            ) !important;
    }


    .profile-gallery-image-frame.profile-image-shape-portrait {
        width:
            min(
                165px,
                100%
            ) !important;
    }


    .profile-gallery-image-frame.profile-image-shape-horizontal {
        width:
            min(
                260px,
                100%
            ) !important;
    }

}


@media (
    max-width:
        480px
) {

    .profile-gallery-grid {
        grid-template-columns:
            1fr;
    }


    .profile-gallery-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}

/* =========================================================
   HIDE / OPEN SIDEBAR
========================================================= */


/* =========================================
   ALLOW BUTTON TO SIT OVER APP LAYOUT
========================================= */

.app-layout {
    position:
        relative;
}


/* =========================================
   SIDEBAR TOGGLE BUTTON
========================================= */

.sidebar-toggle-button {
    position:
        absolute;

    top:
        12px;

    left:
        12px;

    z-index:
        1000;

    width:
        120px;

    min-width:
        120px;

    height:
        38px;

    min-height:
        38px;

    padding:
        8px 12px;

    border:
        1px solid
        #4a5964;

    border-radius:
        6px;

    background:
        #1f5f8b;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
    600;

    text-align:
        center;

    white-space:
        nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.sidebar-toggle-button:hover {
    background:
        #174a6d;
}


/* =========================================
   MAKE ROOM FOR BUTTON ABOVE LEGEND
========================================= */

.sidebar {
    padding-top:
        62px !important;
}


/* =========================================================
   SIDEBAR HIDDEN
========================================================= */

.app-layout.sidebar-hidden
.sidebar {
    display:
        none !important;
}


/* =========================================
   OPEN SIDEBAR BUTTON REMAINS VISIBLE
========================================= */

.app-layout.sidebar-hidden
.sidebar-toggle-button {
    position: absolute;

    top: 12px;
    left: 12px;

    width: 135px;
    min-width: 135px;

    background: #1f5f8b;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.18);
}


/* =========================================
   MAIN CONTENT EXPANDS WHEN SIDEBAR HIDES
========================================= */

.app-layout.sidebar-hidden
.content-area {
    width:
        100% !important;

    max-width:
        none !important;

    flex:
        1 1 100% !important;

    /*
     * Gives the floating Open Sidebar
     * button room so it does not cover
     * the page content.
     */
    padding-top:
        64px !important;
}

/* =========================================================
   LOCK NOTIFICATIONS TO LEGEND ALIGNMENT
========================================================= */

.sidebar
.notifications-main-button {
    width:
        100% !important;

    min-width:
        0 !important;

    height:
        38px !important;

    min-height:
        38px !important;

    max-height:
        38px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    margin:
        0 !important;

    padding:
        9px
        10px !important;

    box-sizing:
        border-box !important;

    text-align:
        left !important;
}


/* Keep the notification text itself stationary */

.sidebar
.notifications-main-button
.notifications-label {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        7px;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;
}

/* =========================================================
   PERSONAL REQUESTS IN DIRECT MESSAGES
========================================================= */

.message-header-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    flex-wrap:
        wrap;
}


/* =========================================
   PERSONAL REQUEST COMPOSER
========================================= */

.personal-request-panel {
    margin-bottom:
        14px;

    padding:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.62
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    border-radius:
        14px;
}


#personalRequestForm {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


#personalRequestForm h3 {
    margin:
        0 0 2px 0;

    font-size:
        18px;

    font-weight:
        650;
}


#personalRequestForm label {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    font-size:
        13px;

    font-weight:
        600;
}


#personalRequestForm input,
#personalRequestForm select,
#personalRequestForm textarea {
    width:
        100%;

    min-width:
        0;

    padding:
        10px 11px;

    border:
        1px solid
        #bcc7cb;

    border-radius:
        9px;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    color:
        #222;

    font:
        inherit;
}


#personalRequestForm textarea {
    min-height:
        120px;

    resize:
        vertical;
}


/* =========================================
   NON-AI CHECKBOX
========================================= */

#personalRequestForm
.personal-request-checkbox {
    flex-direction:
        row;

    align-items:
        center;

    gap:
        8px;

    font-weight:
        500;
}


#personalRequestForm
.personal-request-checkbox
input {
    width:
        auto;

    margin:
        0;
}


/* =========================================
   PRICE
========================================= */

.personal-request-money {
    width:
        100%;

    display:
        flex;

    min-width:
        0;
}


.personal-request-money-prefix {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 11px;

    border:
        1px solid
        #bcc7cb;

    border-right:
        0;

    border-radius:
        9px 0 0 9px;

    background:
        rgba(
            238,
            241,
            244,
            0.95
        );

    flex:
        0 0 auto;
}


#personalRequestPrice {
    flex:
        1 1 auto;

    min-width:
        0;

    border-radius:
        0 9px 9px 0 !important;
}


/* =========================================
   VISIBILITY
========================================= */

#personalRequestVisibility {
    opacity:
        1;

    cursor:
        default;
}


/* =========================================
   SEND PERSONAL REQUEST
========================================= */

#sendPersonalRequestButton {
    width:
        100%;

    min-height:
        42px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(
            --primary,
            #1f5f8b
        );

    color:
        #ffffff;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


#sendPersonalRequestButton:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        );
}


/* =========================================================
   PERSONAL REQUEST INSIDE MESSAGE THREAD
========================================================= */

.personal-request-message-card {
    width:
        100%;

    min-width:
        0;

    padding:
        12px;

    margin-bottom:
        8px;

    border:
        1px solid
        rgba(
            31,
            95,
            139,
            0.24
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.46
        );
}


.personal-request-message-card h4 {
    margin:
        0 0 10px 0;

    font-size:
        15px;

    font-weight:
        700;
}


.personal-request-message-card p {
    margin:
        6px 0 !important;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* =========================================
   SMALLER SCREENS
========================================= */

@media (
    max-width:
        700px
) {

    .message-header-actions {
        width:
            100%;

        justify-content:
            stretch;
    }


    .message-header-actions
    .compose-button {
        flex:
            1 1 0 !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;
    }

}

/* =========================================================
   COMPOSE REQUEST — PERSONAL RECIPIENT
========================================================= */

.request-personal-recipient-field[hidden] {
    display:
        none !important;
}

/* =========================================================
   COMPOSE POST
========================================================= */

.feed-compose-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    flex-wrap:
        wrap;
}


#offerPostForm {
    width:
        100%;

    max-width:
        none;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}


#offerPostForm label {
    width:
        100%;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    font-weight:
        500;
}


#offerPostForm input,
#offerPostForm textarea,
#offerPostForm select {
    width:
        100%;

    min-width:
        0;

    padding:
        10px 11px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        #fff;

    color:
        #222;

    font-size:
        14px;
}


#offerPostForm textarea {
    min-height:
        130px;

    resize:
        vertical;
}


#offerPostForm
.checkbox-label {
    flex-direction:
        row;

    align-items:
        center;

    gap:
        8px;
}


#offerPostForm
.checkbox-label
input {
    width:
        auto;

    min-width:
        auto;
}


#offerPostForm select {
    height:
        44px;

    min-height:
        44px;
}


#offerPostRecipientField[hidden] {
    display:
        none !important;
}


#publishOfferPostButton {
    width:
        fit-content;

    min-width:
        150px;

    padding:
        10px 18px;

    border:
        none;

    border-radius:
        6px;

    background:
        var(
            --primary,
            #1f5f8b
        );

    color:
        #fff;

    font-size:
        14px;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


#publishOfferPostButton:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        );
}


/* =========================================================
   OFFER POST CARD
========================================================= */

.offer-post-badge {
    width:
        fit-content;

    margin:
        0 0 12px 0;

    padding:
        5px 10px;

    border-radius:
        999px;

    background:
        rgba(
            31,
            95,
            139,
            0.12
        );

    color:
        var(
            --primary,
            #1f5f8b
        );

    font-size:
        12px;

    font-weight:
        700;
}


/* =========================================================
   OFFER MEDIA PREVIEW
========================================================= */

.offer-post-media-preview {
    position:
        relative;

    width:
        min(
            420px,
            100%
        );

    min-height:
        120px;

    margin-top:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.45
        );
}


.offer-post-media-preview
img,
.offer-post-media-preview
video {
    display:
        block;

    width:
        100%;

    max-height:
        260px;

    object-fit:
        cover;

    filter:
        blur(
            11px
        );

    transform:
        scale(
            1.06
        );

    pointer-events:
        none;

    user-select:
        none;
}


.offer-post-file-preview {
    width:
        100%;

    padding:
        35px 15px;

    text-align:
        center;

    overflow-wrap:
        anywhere;

    filter:
        blur(
            2px
        );
}


.offer-post-preview-label {
    position:
        absolute;

    left:
        50%;

    bottom:
        10px;

    transform:
        translateX(
            -50%
        );

    z-index:
        2;

    padding:
        5px 9px;

    border-radius:
        6px;

    background:
        rgba(
            0,
            0,
            0,
            0.68
        );

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        600;

    white-space:
        nowrap;
}


.personal-offer-post-message-card
.offer-post-media-preview {
    width:
        100%;

    max-width:
        340px;
}


/* =========================================================
   SMALLER WINDOWS
========================================================= */

@media (
    max-width:
        700px
) {

    .feed-compose-actions {
        width:
            100%;
    }


    .feed-compose-actions
    .compose-button {
        flex:
            1 1 0 !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;
    }

}

/* =========================================================
   UNIFIED COMPOSE POST — REQUEST / OFFER
========================================================= */

.post-purpose-field {
    width:
        100%;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    margin-bottom:
        20px;

    font-weight:
        600;
}


.post-purpose-field[hidden] {
    display:
        none !important;
}


#postPurpose {
    width:
        100%;

    min-width:
        0;

    height:
        44px;

    min-height:
        44px;

    padding:
        10px 12px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        var(--entry-field-background, #F8EEEC);

    color:
        var(--entry-field-text, #263238);

    font-size:
        14px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


#postPurpose:focus {
    outline:
        none;

    border-color:
        #999;
}

.post-purpose-dropdown {
    position: relative;
    width: 100%;
    min-width: 0;
}

#postPurpose[hidden],
#postPurposeDropdown[hidden],
#postPurposeOptions[hidden] {
    display: none !important;
}

html #postPurposeToggle,
html #postPurposeOptions,
html #postPurposeOptions [role="option"] {
    background: var(--entry-field-background, #F8EEEC) !important;
    color: var(--entry-field-text, #263238) !important;
    font: 14px "Segoe UI", Arial, sans-serif;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box;
}

#postPurposeValue { min-width: 0; }
.post-purpose-arrow { flex-shrink: 0; }

html #postPurposeToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

#postPurposeToggle:focus-visible {
    outline: 2px solid var(--entry-field-text, #263238);
    outline-offset: 2px;
}

html #postPurposeOptions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px #0002;
}

html #postPurposeOptions [role="option"] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: auto;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 4px;
}

html #postPurposeOptions [role="option"]:is(:hover, [data-active]) {
    background: #DED2D0 !important;
    background: color-mix(in srgb, var(--entry-field-background, #F8EEEC) 88%, #000) !important;
    outline: 1px solid var(--entry-field-placeholder, #59636d);
    outline-offset: -2px;
}

html #postPurposeOptions [aria-selected="true"] { font-weight: 600; }

html.user-high-contrast :is(#postPurposeToggle, #postPurposeOptions, #postPurposeOptions [role="option"]) {
    background: #fff !important;
    color: #111 !important;
    border-color: #111;
}

html.user-high-contrast #postPurposeOptions [role="option"]:is(:hover, [data-active]) {
    background: #ddd !important;
}


/* =========================================
   IMPORTANT:
   Existing form display:flex rules would
   otherwise override the hidden state.
========================================= */

#requestForm[hidden],
#offerPostForm[hidden] {
    display:
        none !important;
}


#offerPostFormMount {
    width:
        100%;

    min-width:
        0;
}

/* =========================================================
   UNIFIED COMPOSE POST ACTION BUTTONS
========================================================= */

.internal-compose-action {
    display:
        none !important;
}


/* =========================================================
   UNIFIED COMPOSE POST ACTION BUTTONS
========================================================= */

.internal-compose-action {
    display:
        none !important;
}


/* =========================================================
   DEFAULT / NARROWER WINDOW

   Draft | Cancel
   Publish Post
========================================================= */

.unified-compose-actions {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        18px;
}


.unified-compose-secondary-actions {
    width:
        min(330px, 100%);

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        nowrap;
}


.unified-compose-action-button {
    height:
        44px !important;

    min-height:
        44px !important;

    max-height:
        44px !important;

    padding:
        0 18px !important;

    border:
        1px solid
        #ccc;

    border-radius:
        7px;

    background:
        #f5f5f5;

    color:
        #222;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.2;

    text-align:
        center;

    white-space:
        nowrap;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    box-sizing:
        border-box;
}


/* Draft + Cancel share the first row */

.unified-compose-secondary-actions
.unified-compose-action-button {
    width:
        160px !important;

    min-width:
        0 !important;

    max-width:
        160px !important;

    flex:
        1 1 0 !important;
}


/* Publish is a wide rectangle underneath */

#publishComposePostButton {
    width:
        min(330px, 100%) !important;

    min-width:
        0 !important;

    max-width:
        330px !important;

    flex:
        0 0 44px !important;
}


/* =========================================================
   BUTTON APPEARANCE
========================================================= */

.unified-compose-action-button:hover {
    background:
        #e8e8e8;
}


.unified-compose-action-button.cancel {
    background:
        #e5e5e5;

    color:
        #222;
}


.unified-compose-action-button.publish {
    border-color:
        var(
            --primary,
            #1f5f8b
        );

    background:
        var(
            --primary,
            #1f5f8b
        );

    color:
        #fff;
}


.unified-compose-action-button.publish:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        );
}


.unified-compose-action-button[hidden] {
    display:
        none !important;
}


/* =========================================================
   WIDE WINDOW

   Publish Post | Draft | Cancel
========================================================= */

@media (
    min-width:
        900px
) {

    .unified-compose-actions {
        flex-direction:
            row;

        align-items:
            center;

        gap:
            10px;
    }


    /*
     * Allow Draft and Cancel to participate
     * directly in the main row.
     */

    .unified-compose-secondary-actions {
        display:
            contents;
    }


    #publishComposePostButton {
        order:
            1;

        width:
            160px !important;

        min-width:
            160px !important;

        max-width:
            160px !important;

        flex:
            0 0 160px !important;
    }


    #draftComposePostButton {
        order:
            2;

        width:
            160px !important;

        min-width:
            160px !important;

        max-width:
            160px !important;

        flex:
            0 0 160px !important;
    }


    #cancelComposePostButton {
        order:
            3;

        width:
            160px !important;

        min-width:
            160px !important;

        max-width:
            160px !important;

        flex:
            0 0 160px !important;
    }

}

/* Editing keeps Save Changes and Cancel together at every browser width. */
.unified-compose-actions:has(#draftComposePostButton[hidden]):has(#publishComposePostButton:not([hidden])) {
    width: min(330px, 100%);
    margin-inline: auto;
    flex-direction: row;
    align-items: center;
}
.unified-compose-actions:has(#draftComposePostButton[hidden]):has(#publishComposePostButton:not([hidden])) .unified-compose-secondary-actions {
    display: contents;
}
.unified-compose-actions:has(#draftComposePostButton[hidden]):has(#publishComposePostButton:not([hidden])) :is(#publishComposePostButton, #cancelComposePostButton) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 160px !important;
    flex: 1 1 0 !important;
}
.unified-compose-actions:has(#draftComposePostButton[hidden]):has(#publishComposePostButton:not([hidden])) #publishComposePostButton { order: 1; }
.unified-compose-actions:has(#draftComposePostButton[hidden]):has(#publishComposePostButton:not([hidden])) #cancelComposePostButton { order: 2; }

.unified-compose-action-button {
    flex:
        1 1 120px !important;

    min-width:
        0;
}

/* =========================================================
   OFFER POST FULFILLMENT PAYMENT
========================================================= */

.offer-fulfillment-field[hidden] { display: none !important; }
.offer-fulfillment-field {
    width:
        100%;

    display:
        flex !important;

    flex-direction:
        column;

    gap:
        7px;

    margin:
        18px 0 !important;

    font-weight:
        600;
}


.offer-fulfillment-field input,
.offer-fulfillment-field textarea {
    width:
        100%;

    min-width:
        0;

    padding:
        10px 11px;

    border:
        1px solid #ccc;

    border-radius:
        6px;

    background:
        #fff;

    color:
        #222;

    font-size:
        14px;
}


.offer-fulfillment-field textarea {
    min-height:
        120px;

    resize:
        vertical;
}


.offer-fulfillment-field input:focus,
.offer-fulfillment-field textarea:focus {
    outline:
        none;

    border-color:
        #999;
}


.offer-fulfillment-review-list {
    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin-top:
        18px;
}


.offer-fulfillment-review-card {
    width:
        100%;

    padding:
        16px;

    border:
        1px solid #d7d7d7;

    border-radius:
        8px;

    background:
        #f8f8f8;
}


.offer-fulfillment-review-card p {
    margin:
        7px 0;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}


.offer-fulfillment-review-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        14px;

    flex-wrap:
        wrap;
}


.offer-fulfillment-review-actions button {
    min-width:
        130px;

    min-height:
        40px;

    padding:
        9px 16px;

    border:
        1px solid #ccc;

    border-radius:
        6px;

    background:
        #f5f5f5;

    color:
        #222;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.offer-fulfillment-review-actions button:hover {
    background:
        #e8e8e8;
}

/* =========================================================
   SUBMIT SIMULATED PAYMENT OFFER
========================================================= */

.fulfill-buttons
.offer-payment-submit-button {
    background:
        var(
            --primary,
            #1f5f8b
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid
        var(
            --primary,
            #1f5f8b
        ) !important;

    font-weight:
        600;
}


.fulfill-buttons
.offer-payment-submit-button:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        ) !important;

    color:
        #ffffff !important;
}

/* =========================================================
   BUYER — RECEIVED OFFER ITEM
========================================================= */

.offer-delivery-media {
    width:
        100%;

    margin-top:
        20px;

    padding:
        12px;

    border:
        1px solid #d7d7d7;

    border-radius:
        9px;

    background:
        #f7f7f7;

    text-align:
        center;

    overflow:
        hidden;
}


.offer-delivery-media img,
.offer-delivery-media video {
    display:
        block;

    width:
        100%;

    max-height:
        520px;

    margin:
        0 auto;

    object-fit:
        contain;

    border-radius:
        7px;

    /*
     * IMPORTANT:
     * Buyer receives the real item.
     * Do not blur it.
     */
    filter:
        none !important;

    transform:
        none !important;
}


.offer-delivery-file-link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        10px 18px;

    border:
        1px solid
        var(
            --primary,
            #1f5f8b
        );

    border-radius:
        7px;

    background:
        var(
            --primary,
            #1f5f8b
        );

    color:
        #ffffff;

    font-weight:
        600;

    text-decoration:
        none;
}


.offer-delivery-file-link:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        );
}

/* =========================================================
   MY POSTS FILTER
========================================================= */

.my-posts-page-header {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    overflow: visible;

    z-index: 100;
}


/* =========================================================
   FILTER CONTAINER
========================================================= */

.my-posts-filter {
    position: relative;

    flex: 0 0 auto;
}


/* =========================================================
   BLUE FILTER BUTTON
========================================================= */

.my-posts-filter-button {
    min-width: 125px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 0 14px;

    border: 1px solid #174a6d;
    border-radius: 7px;

    background: #1f5f8b;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.my-posts-filter-button:hover {
    background: #174a6d;
}


/* =========================================================
   FILTER ARROW
========================================================= */

.my-posts-filter-arrow {
    display: inline-block;

    font-size: 11px;

    transform: rotate(0deg);

    transition:
        transform 0.18s ease;
}


/*
 * Closed:
 * arrow points down.
 *
 * Open:
 * arrow rotates upward to indicate
 * that clicking Filters again will close it.
 */

.my-posts-filter.open
.my-posts-filter-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   FILTER DROPDOWN
========================================================= */

.my-posts-filter-menu {
    position: absolute;

    top: calc(100% + 6px);
    right: 0;

    width: 160px;

    display: none;
    flex-direction: column;

    padding: 6px;

    background: #ffffff;

    border: 1px solid #d5d9de;
    border-radius: 7px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.14);

    z-index: 1000;
}


.my-posts-filter.open
.my-posts-filter-menu {
    display: flex;
}


/* =========================================================
   FILTER OPTIONS
========================================================= */

.my-posts-filter-menu button {
    width: 100%;
    min-height: 38px;

    padding: 8px 12px;

    border: 0;
    border-radius: 5px;

    background: transparent;

    color: #222;

    font-size: 14px;

    text-align: left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.my-posts-filter-menu button:hover {
    background: #eef1f4;
}


.my-posts-filter-menu button.active {
    background: #dcecf7;

    color: #174a6d;

    font-weight: 600;
}


/*
 * All is hidden until the user
 * chooses one of the first filters.
 */

#myPostsAllFilterButton[hidden] {
    display: none !important;
}


/* =========================================================
   SMALLER SCREENS
========================================================= */

@media (max-width: 600px) {

    .my-posts-page-header {
        align-items: flex-start;

        flex-wrap: wrap;
    }


    .my-posts-filter {
        margin-left: auto;
    }

}

/* =========================================================
   POSTED OFFER STATUS CONTROLS
   STAY INSIDE THE OFFER CARD
   MATCH EDIT BUTTON WIDTH
========================================================= */

.offer-post-card
.offer-post-status-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
}


.offer-post-card
.offer-post-status-control
> button {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
}

/* =========================================================
   TOP BAR PROFILE PICTURE
========================================================= */

.top-bar-profile-button {
    width: 44px;
    min-width: 44px;
    max-width: 44px;

    height: 44px;
    min-height: 44px;
    max-height: 44px;

    margin-left: auto;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;

    border: 1px solid #d5d9de;
    border-radius: 50%;

    background: #dcecf7;
    color: #174a6d;

    font-size: 16px;
    font-weight: 700;

    overflow: hidden;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.top-bar-profile-button:hover {
    border-color: #d5d9de;
    box-shadow: none;
}


.top-bar-profile-button[hidden] {
    display: none !important;
}


.top-bar-profile-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;
}


.top-bar-profile-letter {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

/* =========================================================
   TOP BAR PROFILE PICTURE — SAVED PROFILE SHAPES
========================================================= */


/* CIRCLE — 1:1 */

.top-bar-profile-button.profile-image-shape-circle {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    flex: 0 0 44px !important;

    border-radius: 50% !important;
}


/* SQUARE — 1:1 */

.top-bar-profile-button.profile-image-shape-square {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    flex: 0 0 44px !important;

    border-radius: 0 !important;
}


/* PORTRAIT — 4:5 */

.top-bar-profile-button.profile-image-shape-portrait {
    width: 35.2px !important;
    min-width: 35.2px !important;
    max-width: 35.2px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    flex: 0 0 35.2px !important;

    border-radius: 0 !important;
}


/* HORIZONTAL — 16:9 */

.top-bar-profile-button.profile-image-shape-horizontal {
    width: 78.22px !important;
    min-width: 78.22px !important;
    max-width: 78.22px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    flex: 0 0 78.22px !important;

    border-radius: 0 !important;
}

/* =========================================================
   TOP BAR ACTIONS
   COMPOSE POST + PROFILE IMAGE
========================================================= */

.top-bar-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 10px;

    flex: 0 0 auto;
}


.top-bar-actions
.top-bar-profile-button {
    margin-left: 0;
}

/* The active Profile avatar opens into the magenta trim below the header. */
.top-bar-profile-opening {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}
.top-bar-profile-opening:has(> .top-bar-profile-button[hidden]) {
    display: none;
}
.top-bar-profile-opening-surface {
    --profile-opening-progress: 0;
    --header-opening-cap-radius: 28px;
    --header-shape-progress: max(.25, var(--profile-opening-progress));
    position: absolute;
    z-index: -1;
    left: -6px;
    right: -6px;
    bottom: -8px;
    height: calc(100% + 14px);
    transform: scaleY(var(--profile-opening-progress));
    transform-origin: center bottom;
    will-change: transform;
    container-type: size;
    background: transparent;
    pointer-events: none;
    clip-path: inset(0 -24px 0 -24px);
    transition: transform var(--legend-close-duration) var(--legend-motion-easing);
}
.top-bar-profile-opening:hover > .top-bar-profile-opening-surface,
body:has(.nav-main-row:hover > #legendProfileButton) .top-bar-profile-opening-surface {
    --profile-opening-progress: .25;
    transition-duration: var(--legend-open-duration);
}
body:has(#profile.page.active[data-own-profile="true"]) .top-bar-profile-opening-surface {
    --profile-opening-progress: 1;
    transition-duration: var(--legend-open-duration);
}
@media (prefers-reduced-motion: reduce) {
    .top-bar-profile-opening-surface { transition: none; }
}
@media (max-width: 750px) {
    .top-bar:has(#topBarProfileButton:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    .top-bar:has(#topBarProfileButton:not([hidden])) :is(.top-bar-actions, .site-language-control) {
        grid-column: 2;
    }
    .top-bar:has(#topBarProfileButton:not([hidden])) .top-bar-compose-button {
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        padding: 0 12px;
    }
}


.top-bar .top-bar-compose-button {
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    flex: 0 0 148px !important;
}


/* =========================================================
   FEED HEADER FILTER
========================================================= */

.feed-header-filter {
    position: relative;

    flex: 0 0 auto;
}


.feed-header-filter-button {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 0 14px;

    border: 1px solid #174a6d;
    border-radius: 7px;

    background: #1f5f8b;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);

    flex: 0 0 125px !important;
}


.feed-header-filter-button:hover {
    background: #174a6d;
}


.feed-header-filter-arrow {
    display: inline-block;

    font-size: 11px;

    transform: rotate(0deg);

    transition:
        transform 0.18s ease;
}


.feed-header-filter.open
.feed-header-filter-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   FEED HEADER FILTER DROPDOWN
========================================================= */

.feed-header-filter-menu {
    display: none;

    position: absolute;

    top: calc(100% + 6px);
    right: 0;

    z-index: 1000;

    width: 165px;

    padding: 6px;

    background: #ffffff;

    border: 1px solid #d7d7d7;
    border-radius: 8px;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.12);
}


.feed-header-filter-menu.open {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.feed-header-filter-menu button {
    width: 100%;

    min-height: 36px;

    padding: 8px 10px;

    border: none;
    border-radius: 5px;

    background: transparent;

    color: #222222;

    font-size: 14px;

    text-align: left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.feed-header-filter-menu button:hover {
    background: #eef1f4;
}

/* =========================================================
   RECEIVED OFFER — DOWNLOAD BUTTON
========================================================= */

.offer-buyer-delivery
.offer-download-button {
    background:
        var(
            --primary,
            #1f5f8b
        );

    color: #ffffff;

    font-weight: 600;
}


.offer-buyer-delivery
.offer-download-button:hover:not(:disabled) {
    background:
        var(
            --primary-dark,
            #174a6d
        );
}

/* =========================================================
   PUBLIC + FOLLOW FEED TWO-LINE TITLES
========================================================= */

.feed-title-group {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.feed-title-group h2 {
    margin: 0;
}


.feed-title-subtitle {
    margin: 0;

    color: #66727e;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.3;
}

/* =========================================================
   SAVED POST — FULFILLED STATUS
========================================================= */

.saved-request-fulfilled-status-button {
    cursor: default;
}


.saved-request-fulfilled-status-button:hover {
    background:
        var(
            --success,
            #2f7d4a
        );
}

/* =========================================================
   PAST FULFILLMENTS
========================================================= */

.past-fulfillments-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 14px;
}


.past-fulfillment-history-card {
    width: 100%;
}


.past-fulfillment-history-card h4 {
    margin: 0 0 10px 0;
}


.past-fulfillment-history-card
.saved-request-fulfill-button {
    margin-top: 12px;
}

/* =========================================================
   FULFILLMENT — SAVE DRAFT BUTTON
========================================================= */

.fulfill-buttons
.fulfillment-save-draft-button {
    background:
        var(
            --primary,
            #1f5f8b
        );

    color: #ffffff;

    border:
        1px solid
        var(
            --primary,
            #1f5f8b
        );

    font-weight: 600;
}


.fulfill-buttons
.fulfillment-save-draft-button:hover {
    background:
        var(
            --primary-dark,
            #174a6d
        );

    color: #ffffff;
}


/* =========================================================
   FULFILLMENT — SUBMIT BUTTON
========================================================= */

.fulfill-buttons
.fulfillment-submit-button {
    background:
        var(
            --success,
            #2f7d4a
        );

    color: #ffffff;

    border:
        1px solid
        var(
            --success,
            #2f7d4a
        );

    font-weight: 600;
}


.fulfill-buttons
.fulfillment-submit-button:hover:not(:disabled) {
    background: #28683e;

    color: #ffffff;
}


.fulfill-buttons
.fulfillment-submit-button:disabled {
    background:
        var(
            --success,
            #2f7d4a
        );

    color: #ffffff;

    opacity: 0.45;

    cursor: not-allowed;
}

/* =========================================================
   PAYMENT OFFER — CANCEL
========================================================= */

.fulfill-buttons
.offer-payment-cancel-button {
    background: #e5e5e5;

    color: #222222;

    border:
        1px solid
        #cccccc;

    font-weight: 600;
}


.fulfill-buttons
.offer-payment-cancel-button:hover {
    background: #d8d8d8;
}


/* =========================================================
   PAYMENT OFFER — SAVE DRAFT
========================================================= */

.fulfill-buttons
.offer-payment-draft-button {
    background:
        var(
            --primary-light,
            #dcecf7
        );

    color:
        var(
            --primary-dark,
            #174a6d
        );

    border:
        1px solid
        var(
            --primary,
            #1f5f8b
        );

    font-weight: 600;
}


.fulfill-buttons
.offer-payment-draft-button:hover {
    background: #c9e2f2;
}

/* =========================================================
   COMPOSE POST — DRAFT BUTTON
========================================================= */

#draftComposePostButton {
    background:
        var(
            --primary-light,
            #dcecf7
        ) !important;

    color:
        var(
            --primary-dark,
            #174a6d
        ) !important;

    border:
        1px solid
        var(
            --primary,
            #1f5f8b
        ) !important;
}


#draftComposePostButton:hover {
    background:
        #c9e2f2 !important;

    color:
        var(
            --primary-dark,
            #174a6d
        ) !important;
}

/* =========================================================
   LOCK PROFILE IMAGE SHAPES
   PREVENT STRETCHING / ELONGATION IN LISTS
========================================================= */


/* =========================================================
   NEVER ALLOW PROFILE IMAGE CONTAINERS TO STRETCH
========================================================= */

.large-anonymous-avatar[class*="profile-image-shape-"],
.anonymous-avatar-button[class*="profile-image-shape-"],
.user-reference-avatar[class*="profile-image-shape-"] {
    flex-grow:
        0 !important;

    flex-shrink:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    align-self:
        center;
}


/* =========================================================
   CIRCLE
   1:1
========================================================= */

.large-anonymous-avatar.profile-image-shape-circle,
.anonymous-avatar-button.profile-image-shape-circle,
.user-reference-avatar.profile-image-shape-circle {
    aspect-ratio:
        1 / 1 !important;
}


/* =========================================================
   SQUARE
   1:1
========================================================= */

.large-anonymous-avatar.profile-image-shape-square,
.anonymous-avatar-button.profile-image-shape-square,
.user-reference-avatar.profile-image-shape-square {
    aspect-ratio:
        1 / 1 !important;
}


/* =========================================================
   RHOMBUS
   1:1
========================================================= */

.large-anonymous-avatar.profile-image-shape-rhombus,
.anonymous-avatar-button.profile-image-shape-rhombus,
.user-reference-avatar.profile-image-shape-rhombus {
    aspect-ratio:
        1 / 1 !important;
}


/* =========================================================
   PORTRAIT
   4:5
========================================================= */

.large-anonymous-avatar.profile-image-shape-portrait,
.anonymous-avatar-button.profile-image-shape-portrait,
.user-reference-avatar.profile-image-shape-portrait {
    aspect-ratio:
        4 / 5 !important;
}


/* =========================================================
   HORIZONTAL
   16:9
========================================================= */

.large-anonymous-avatar.profile-image-shape-horizontal,
.anonymous-avatar-button.profile-image-shape-horizontal,
.user-reference-avatar.profile-image-shape-horizontal {
    aspect-ratio:
        16 / 9 !important;
}


/* =========================================================
   PROFILE FOLLOWER / FOLLOWING IMAGE LIST
   EXTRA PROTECTION AGAINST FLEX STRETCHING
========================================================= */

.profile-stat-user-avatar.user-reference-avatar {
    flex-grow:
        0 !important;

    flex-shrink:
        0 !important;

    align-self:
        center !important;
}


/* Circle, Square, Rhombus */

.profile-stat-user-avatar.profile-image-shape-circle,
.profile-stat-user-avatar.profile-image-shape-square,
.profile-stat-user-avatar.profile-image-shape-rhombus {
    width:
        72px !important;

    min-width:
        72px !important;

    max-width:
        72px !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    aspect-ratio:
        1 / 1 !important;

    flex-basis:
        72px !important;
}


/* Portrait */

.profile-stat-user-avatar.profile-image-shape-portrait {
    width:
        58px !important;

    min-width:
        58px !important;

    max-width:
        58px !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    aspect-ratio:
        4 / 5 !important;

    flex-basis:
        58px !important;
}


/* Horizontal */

.profile-stat-user-avatar.profile-image-shape-horizontal {
    width:
        102px !important;

    min-width:
        102px !important;

    max-width:
        102px !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    aspect-ratio:
        16 / 9 !important;

    flex-basis:
        102px !important;
}

/* =========================================================
   RHOMBUS — FORCE PERFECT 1:1 DIAMOND
========================================================= */

.profile-image-shape-rhombus {
    aspect-ratio:
        1 / 1 !important;
}


/* Profile page follower / following list */

.profile-stat-user-avatar.profile-image-shape-rhombus {
    width:
        72px !important;

    min-width:
        72px !important;

    max-width:
        72px !important;

    height:
        72px !important;

    min-height:
        72px !important;

    max-height:
        72px !important;

    flex:
        0 0 72px !important;

    aspect-ratio:
        1 / 1 !important;
}


/* General user-reference lists */

.user-reference-avatar.profile-image-shape-rhombus {
    width:
        64px !important;

    min-width:
        64px !important;

    max-width:
        64px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    flex:
        0 0 64px !important;

    aspect-ratio:
        1 / 1 !important;
}


/* Feed / post avatars */

.anonymous-avatar-button.profile-image-shape-rhombus {
    width:
        64px !important;

    min-width:
        64px !important;

    max-width:
        64px !important;

    height:
        64px !important;

    min-height:
        64px !important;

    max-height:
        64px !important;

    flex:
        0 0 64px !important;

    aspect-ratio:
        1 / 1 !important;
}


/* Main profile image */

.profile-avatar-area
> .large-anonymous-avatar.profile-image-shape-rhombus {
    width:
        220px !important;

    min-width:
        220px !important;

    max-width:
        220px !important;

    height:
        220px !important;

    min-height:
        220px !important;

    max-height:
        220px !important;

    flex:
        0 0 220px !important;

    aspect-ratio:
        1 / 1 !important;
}


/* Smaller profile screens */

@media (max-width: 700px) {

    .profile-avatar-area
    > .large-anonymous-avatar.profile-image-shape-rhombus {
        width:
            180px !important;

        min-width:
            180px !important;

        max-width:
            180px !important;

        height:
            180px !important;

        min-height:
            180px !important;

        max-height:
            180px !important;

        flex:
            0 0 180px !important;

        aspect-ratio:
            1 / 1 !important;
    }

}

/* =========================================================
   PROFILE PHOTOS
   ONLY ADD PHOTOS FOLLOWS THE SCROLL
========================================================= */

/*
 * Give the original Photos heading the same
 * row height as the Add Photos button.
 *
 * The heading itself is NOT sticky.
 */
#profile
.own-profile-gallery
.profile-gallery-header {

    min-height:
        38px;

    margin-bottom:
        0;
}


/* =========================================================
   STICKY ADD PHOTOS BUTTON
========================================================= */

#profile
.profile-gallery-sticky-actions {

    flex-direction: column;
    gap: 8px;

    width:
        100%;

    min-height:
        38px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        flex-end;

    position:
        sticky;

    top:
        0;

    z-index:
        50;

    /*
     * Pull this row upward so the button initially
     * sits beside the non-sticky Photos heading.
     */
    margin-top:
        -38px;

    margin-bottom:
        18px;

    /*
     * IMPORTANT:
     * No white strip behind the button.
     * The normal profile background remains visible.
     */
    background:
        transparent;

    /*
     * The invisible full-width sticky row does not
     * block clicks on content underneath it.
     */
    pointer-events:
        none;
}


/* =========================================================
   ADD PHOTOS BUTTON ITSELF
========================================================= */

#profile
.profile-gallery-sticky-actions
.profile-gallery-add-button {

    flex:
        0 0 auto;

    pointer-events:
        auto;

    position:
        relative;

    z-index:
        51;
}

/* =========================================================
   PROFILE PHOTO REARRANGING
========================================================= */

.profile-gallery-grid-sortable
.profile-gallery-item {

    transition:
        opacity 0.15s ease;
}


/* =========================================
   DRAGGING PHOTO
========================================= */

.profile-gallery-item-dragging {

    opacity:
        0.45;
}


/* =========================================================
   DRAG PHOTOS DIRECTLY TO REARRANGE
========================================================= */

.profile-gallery-item-sortable
.profile-gallery-image-frame {

    cursor:
        grab;

    user-select:
        none;

    -webkit-user-select:
        none;
}


.profile-gallery-item-sortable
.profile-gallery-image-frame:active {

    cursor:
        grabbing;
}


/*
 * Prevent the visible image itself from
 * starting Safari's native image drag.
 * The surrounding image frame controls
 * gallery rearranging instead.
 */

.profile-gallery-item-sortable
.profile-gallery-image {

    -webkit-user-drag:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;
}


/* =========================================
   EDIT + DRAG SAME SIZE
========================================= */

.profile-gallery-item-actions
.profile-gallery-edit-button {

    min-width:
        80px;

    margin:
        0;
}

/* =========================================================
   REQUEST VS OFFER FEED CARDS
   MAKES POST PURPOSE IMMEDIATELY VISIBLE
========================================================= */


/* =========================================================
   SHARED REQUEST / OFFER LABEL
========================================================= */

.post-purpose-badge {

    width:
        fit-content;

    max-width: 100%;
    min-width: 0;
    align-self: flex-start;

    margin:
        0 0 12px 0;

    padding:
        6px 12px;

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.7px;

    text-transform:
        none;
}


/* =========================================================
   REQUEST LABEL
========================================================= */

.request-post-badge {

    background:
        #d7eaff;

    color:
        #174f7a;

    border:
        1px solid #8eb8da;
}


/* =========================================================
   OFFER LABEL
========================================================= */

.offer-post-badge {

    background:
        #d9f1df;

    color:
        #23643a;

    border:
        1px solid #8fc49e;
}


/* =========================================================
   REQUEST — FULL CARD COLOR
   OPAQUE
========================================================= */

.request-card.request-post-card,
.personal-request-message-card:not(.personal-offer-post-message-card) {

    background:
        #DEEFFF !important;

    border-color:
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;

}


/* =========================================================
   OFFER — FULL CARD COLOR
   OPAQUE
========================================================= */

.request-card.offer-post-card,
.personal-offer-post-message-card {

    background:
        #E0F6E5 !important;

    border-color:
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;

}


/* =========================================================
   REQUEST HOVER
   OPAQUE
========================================================= */

.request-card.request-post-card:hover,
.personal-request-message-card:not(.personal-offer-post-message-card):hover {

    background:
        #D5EAFD !important;

}


/* =========================================================
   OFFER HOVER
   OPAQUE
========================================================= */

.request-card.offer-post-card:hover,
.personal-offer-post-message-card:hover {

    background:
        #D7F1DD !important;

}

/* =========================================================
   MULTIPLE OFFER MEDIA PREVIEWS
========================================================= */

.offer-post-media-preview {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    gap: 10px;

    min-height: 0;

    overflow: visible;

    border: 0;

    background: transparent;
}


.offer-post-media-item {
    position: relative;

    width: 100%;
    min-height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.45
        );
}


.offer-post-media-item
img,
.offer-post-media-item
video {
    width: 100%;

    max-height: 260px;

    object-fit: cover;
}

/* =========================================================
   EXISTING UPLOAD WHILE EDITING
========================================================= */

.offer-post-media-preview[data-blur-images="false"] img { filter: none; transform: none; }
.compose-image-blur-controls .checkbox-label { margin-bottom: 6px; }
.compose-image-blur-controls > small { display: block; }
.fulfill-form .fulfillment-blur-controls .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.fulfillment-blur-controls input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
.compose-upload-image-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); margin-top: 10px; }
.compose-upload-image-preview img { max-height: 140px; }
.compose-upload-image-preview[hidden] { display: none !important; }

.edit-existing-upload-panel {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 14px;

    border: 1px solid #cfd5db;
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.55);
}


.edit-existing-upload-panel[hidden] {
    display: none !important;
}


.edit-existing-upload-panel > strong {
    font-size: 14px;
    font-weight: 700;
}


.edit-existing-upload-preview {
    width: 100%;
}


.remove-existing-upload-button {
    width: fit-content;

    padding: 9px 14px;

    border: none;
    border-radius: 6px;

    background: #b43c3c;
    color: #ffffff;

    font-weight: 600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.remove-existing-upload-button:hover {
    background: #943030;
}


/* =========================================================
   TWO-COLUMN FILTER MENUS
========================================================= */


.feed-header-filter-menu,
.my-posts-filter-menu {
    width: 360px;
    max-width: calc(100vw - 40px);
}


.filter-menu-columns {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 8px;
}


.filter-menu-column {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.filter-menu-column + .filter-menu-column {
    padding-left: 8px;

    border-left:
        1px solid
        #d7d7d7;
}


.filter-menu-heading {
    display: block;

    padding: 7px 10px 5px;

    color: #66727e;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.feed-header-filter-menu button.active,
.my-posts-filter-menu button.active {
    background: #dcecf7;

    color: #174a6d;

    font-weight: 600;
}


.my-posts-type-filter-empty,
.saved-posts-type-filter-empty {
    width: 100%;

    margin: 12px 0;

    color: #66727e;
}


@media (max-width: 600px) {

    .feed-header-filter-menu,
    .my-posts-filter-menu {
        width: min(
            340px,
            calc(100vw - 32px)
        );
    }

}

/* =========================================================
   PUBLIC + FOLLOW FEED
   THREE-COLUMN FILTER MENU
========================================================= */

.feed-header-filter-menu {
    width: 520px;
    max-width: calc(100vw - 40px);
}


.feed-header-filter-menu
.filter-menu-columns {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

/* =========================================================
   FEED POST OPTIONS
   TOP-RIGHT CORNER
========================================================= */

.request-card {
    position: relative;
}


/*
 * Keep the user name/avatar from running underneath
 * the Options button.
 */

.request-card.has-post-options
.request-user {
    padding-right: 120px;
}


/* =========================================
   OPTIONS CONTAINER
========================================= */

.post-options-dropdown {
    position: absolute;

    top: 14px;
    right: 16px;

    z-index: 50;

    width: 108px;
}


/* =========================================
   OPTIONS BUTTON
========================================= */

.post-options-toggle {
    width: 108px;
    min-width: 108px;

    min-height: 34px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 6px;

    padding: 6px 10px;

    border:
        1px solid
        #ccc;

    border-radius:
        6px;

    background:
        #f5f5f5;

    color:
        #222;

    font-size:
        12px;

    font-weight:
        600;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.post-options-toggle:hover {
    background:
        #e8e8e8;
}


.post-options-arrow {
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 180ms ease;
    flex-shrink: 0;

    font-size: 11px;
}

.post-options-toggle[aria-expanded="true"] .post-options-arrow {
    transform: rotate(180deg);
}

html.user-reduce-motion .post-options-arrow {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .post-options-arrow { transition: none; }
}


/* =========================================
   OPTIONS DROPDOWN MENU
========================================= */

.post-options-menu {
    position: absolute;

    top: calc(100% + 4px);
    right: 0;

    width: 150px;

    padding: 5px;

    background:
        #ffffff;

    border:
        1px solid
        #d0d0d0;

    border-radius:
        7px;

    box-shadow:
        0 6px 18px
        rgba(
            0,
            0,
            0,
            0.18
        );

    z-index: 100;
}


.post-options-menu[hidden] {
    display: none !important;
}


/* =========================================
   OPTION ITEMS
========================================= */

.post-options-menu button {
    width: 100%;

    min-width: 0;
    min-height: 34px;

    display: block;

    padding: 7px 9px;

    border: 0;

    border-radius:
        5px;

    background:
        transparent;

    color:
        #222;

    font-size:
        12px;

    text-align:
        left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.post-options-menu button:hover {
    background:
        #eeeeee;
}

/* =========================================================
   PUBLIC + FOLLOW FEED FILTER
   STAY INSIDE FEED AREA WITH SIDEBAR OPEN
========================================================= */

#home .page-header,
#followFeed .page-header {
    position: relative;

    min-width: 0;
}


/*
 * The Filters button remains in its normal
 * position, but the dropdown uses the full
 * page header as its width boundary.
 */
#home .feed-header-filter,
#followFeed .feed-header-filter {
    position: static;

    flex: 0 0 auto;
}


/*
 * IMPORTANT:
 * Width is now based on the FEED AREA,
 * not the entire browser window.
 */
#home .feed-header-filter-menu,
#followFeed .feed-header-filter-menu {
    right: 0;
    left: auto;

    width: min(
        520px,
        100%
    ) !important;

    max-width: 100% !important;

    box-sizing: border-box;
}


/* =========================================================
   AUTOMATIC COLUMN RESIZING
========================================================= */

#home
.feed-header-filter-menu
.filter-menu-columns,

#followFeed
.feed-header-filter-menu
.filter-menu-columns {

    width:
        100%;

    display:
        grid;

    /*
    * Default to ONE column.
    * Never allow an automatic
    * two-column intermediate layout.
    */

    grid-template-columns:
        minmax(
            0,
            1fr
        );

    gap:
        8px;
}


/*
 * Remove the old fixed vertical borders.
 * They do not work properly once columns
 * automatically wrap onto another row.
 */
#home
.feed-header-filter-menu
.filter-menu-column,

#followFeed
.feed-header-filter-menu
.filter-menu-column {
    min-width: 0;

    padding-left: 0;

    border-left: none;
}


/* =========================================================
   VERY NARROW FEED AREA
========================================================= */

@media (max-width: 600px) {

    #home .feed-header-filter-menu,
    #followFeed .feed-header-filter-menu {
        width: 100% !important;

        max-width: 100% !important;
    }


    #home
    .feed-header-filter-menu
    .filter-menu-columns,

    #followFeed
    .feed-header-filter-menu
    .filter-menu-columns {
        grid-template-columns:
            minmax(
                0,
                1fr
            );
    }

}

/* =========================================================
   REPORT USER
   TRANSLUCENT GLASS CARDS
========================================================= */


/* =========================================================
   MAIN REPORT USER CARD
========================================================= */

.report-problem-form {
    width:
        100% !important;

    padding:
        20px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;

    background-clip:
        padding-box;
}


/* =========================================================
   REPORTED USER INSIDE CARD
========================================================= */

.report-user-target {
    padding:
        14px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.42
        ) !important;

    -webkit-backdrop-filter:
        blur(10px)
        saturate(120%) !important;

    backdrop-filter:
        blur(10px)
        saturate(120%) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.68
        ) !important;

    border-radius:
        12px !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.55
        ) !important;
}


/* =========================================================
   REPORT FORM FIELDS
========================================================= */

.report-problem-form select,
.report-problem-form textarea {
    background:
        rgba(
            255,
            255,
            255,
            0.68
        ) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.82
        ) !important;

    box-shadow:
        inset 0 1px 2px
        rgba(
            0,
            70,
            75,
            0.06
        );
}


/* =========================================================
   SUBMITTED REPORTS LIST
========================================================= */

.submitted-report-list {
    gap:
        16px !important;
}


/* =========================================================
   EACH SUBMITTED REPORT
========================================================= */

.submitted-report-card {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        16px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;

    background-clip:
        padding-box;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* =========================================================
   SUBMITTED REPORT HOVER
========================================================= */

.submitted-report-card:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.68
        ) !important;

    border-color:
        rgba(
            255,
            255,
            255,
            0.90
        ) !important;

    box-shadow:
        0 10px 28px
        rgba(
            0,
            70,
            75,
            0.20
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.80
        ) !important;
}


/* =========================================================
   EMPTY SUBMITTED REPORT MESSAGE
========================================================= */

.report-empty-message {
    background:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    backdrop-filter:
        blur(14px)
        saturate(125%) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;
}

/* =========================================================
   CONTACTS FILTER
========================================================= */

.contacts-filter-menu {
    width:
        180px !important;

    max-width:
        calc(
            100vw - 40px
        ) !important;
}


/* =========================================================
   CONTACTS SINGLE-FILTER VIEW
========================================================= */

.contacts-dual-grid.contacts-single-view {
    grid-template-columns:
        minmax(
            0,
            1fr
        );
}


.contacts-dual-column[hidden] {
    display:
        none !important;
}

/* =========================================================
   REQUEST FULFILLMENT MEDIA
========================================================= */

.stored-fulfillment-media {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );

    gap: 12px;

    margin: 16px 0;
}


.stored-fulfillment-media-item {
    position: relative;

    min-width: 0;
    min-height: 130px;

    overflow: hidden;

    border: 1px solid
        rgba(0, 0, 0, 0.14);

    border-radius: 10px;

    background: #f3f3f3;
}


.stored-fulfillment-media-visual {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 130px;
    max-height: 320px;

    object-fit: contain;

    background: #111;
}


/* =========================================
   BLURRED PRE-APPROVAL PREVIEW
========================================= */

.stored-fulfillment-media.is-blurred
.stored-fulfillment-media-visual {
    filter: blur(12px);

    transform: scale(1.08);

    pointer-events: none;

    user-select: none;
}


.stored-fulfillment-media.is-blurred
.stored-fulfillment-file-preview {
    filter: blur(2px);

    user-select: none;
}


/* =========================================
   FILE PREVIEW
========================================= */

.stored-fulfillment-file-preview {
    min-height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;

    overflow-wrap: anywhere;
}


/* =========================================
   PREVIEW LABEL
========================================= */

.stored-fulfillment-media-label {
    position: absolute;

    left: 50%;
    bottom: 10px;

    z-index: 3;

    transform:
        translateX(-50%);

    max-width:
        calc(100% - 20px);

    padding: 5px 9px;

    border-radius: 6px;

    background:
        rgba(0, 0, 0, 0.72);

    color: #fff;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================
   SAVED DRAFT MEDIA
========================================= */

.draft-saved-media
.stored-fulfillment-media-visual {
    filter: none !important;

    transform: none !important;
}


/* =========================================
   RECEIVED ITEM
========================================= */

.received-fulfillment-media
.stored-fulfillment-media-visual {
    max-height: 520px;

    filter: none !important;

    transform: none !important;
}


/* =========================================
   APPROVED FULFILLMENT — DOWNLOAD BUTTON
========================================= */

.stored-fulfillment-download-link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        fit-content;

    max-width:
        calc(
            100% - 20px
        );

    margin-left:
        auto;

    margin-right:
        auto;

    box-sizing:
        border-box;

    white-space:
        nowrap;

    min-height:
        40px;

    margin-top:
        12px;

    padding:
        10px 18px;

    background:
        #1f5f8b;

    border:
        1px solid
        #1f5f8b;

    border-radius:
        7px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.2;

    text-align:
        center;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.stored-fulfillment-download-link:hover {
    background:
        #174a6d;

    border-color:
        #174a6d;

    color:
        #ffffff;

    text-decoration:
        none;
}


.stored-fulfillment-download-link:active {
    transform:
        translateY(
            1px
        );
}


/* =========================================
   FULFILLMENT — SUBMISSION COMMENT
========================================= */

.fulfillment-submission-message {
    margin:
        12px 0 !important;

    padding:
        12px 14px;

    background:
        rgba(
            255,
            255,
            255,
            0.46
        );

    border:
        1px solid
        rgba(
            93,
            145,
            190,
            0.42
        );

    border-radius:
        8px;

    line-height:
        1.5;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.fulfillment-submission-message strong {
    font-weight:
        700;
}


.stored-fulfillment-media-missing {
    margin: 0;

    padding: 14px;

    border: 1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 8px;

    background: #f5f5f5;
}

/* =========================================================
   REVIEW OFFER PAYMENT
   MATCH OFFER POST COLORS
========================================================= */

.offer-fulfillment-review-form {
    background:
        rgba(
            224,
            246,
            229,
            0.88
        ) !important;

    border:
        1px solid
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;
}

.offer-fulfillment-review-form
.offer-fulfillment-review-card {
    background:
        rgba(
            224,
            246,
            229,
            0.88
        ) !important;

    border:
        1px solid
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;
}

/* =========================================================
   REVIEW OFFER PAYMENT — INSTRUCTION BOX
   MATCH OFFER POST COLORS
========================================================= */

.offer-fulfillment-review-form
.fulfillment-instruction {
    background:
        rgba(
            224,
            246,
            229,
            0.88
        ) !important;

    border:
        1px solid
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;

    color:
        #222 !important;
}

/* =========================================================
   REVIEW OFFER PAYMENT — ACCEPT BUTTON
========================================================= */

.offer-fulfillment-review-form
.offer-payment-accept-button {
    background:
        #2f7d4a !important;

    border:
        1px solid
        #2f7d4a !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.offer-fulfillment-review-form
.offer-payment-accept-button:hover {
    background:
        #28683e !important;

    border-color:
        #28683e !important;
}


/* =========================================================
   REVIEW OFFER PAYMENT — DECLINE BUTTON
========================================================= */

.offer-fulfillment-review-form
.offer-payment-decline-button {
    background:
        #b43c3c !important;

    border:
        1px solid
        #b43c3c !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.offer-fulfillment-review-form
.offer-payment-decline-button:hover {
    background:
        #963232 !important;

    border-color:
        #963232 !important;
}

/* =========================================================
   PUBLIC + FOLLOW FEED
   BALANCED ACTION BUTTON COLORS
========================================================= */


/* =========================================================
   FOLLOW USER — BLUE
========================================================= */

.request-actions
.follow-main-button,

.request-actions
.feed-follow-action-button {
    background:
        #3f6f9f !important;

    border-color:
        #3f6f9f !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.follow-main-button:hover,

.request-actions
.feed-follow-action-button:hover {
    background:
        #345e88 !important;

    border-color:
        #345e88 !important;
}


/* =========================================================
   SAVE POST
========================================================= */

.request-actions
.save-main-button,
#messages .inbox-message-actions .message-edit-save-button {
    background:
        #8E6F6C !important;

    border-color:
        #8E6F6C !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.save-main-button:hover,
#messages .inbox-message-actions .message-edit-save-button:hover {
    background:
        #705653 !important;

    border-color:
        #705653 !important;
}


/* =========================================================
   SEND MESSAGE — MUTED VIOLET
========================================================= */

.request-actions
.feed-message-action-button,
#messages .message-form-actions .message-send-button,
#siteAssistantPanel #siteAssistantSend {
    background:
        #6f5f91 !important;

    border-color:
        #6f5f91 !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.feed-message-action-button:hover,
#messages .message-form-actions .message-send-button:hover,
#siteAssistantPanel #siteAssistantSend:hover {
    background:
        #5e507c !important;

    border-color:
        #5e507c !important;
}


/* =========================================================
   FULFILL REQUEST — GREEN
========================================================= */

.request-actions
.fulfill-main-button,
#messages .personal-message-post-action.fulfill-main-button {
    background:
        #4f7f62 !important;

    border-color:
        #4f7f62 !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.fulfill-main-button:hover,
#messages .personal-message-post-action.fulfill-main-button:hover {
    background:
        #426b53 !important;

    border-color:
        #426b53 !important;
}


/* =========================================================
   PURCHASE OFFER — TEAL
========================================================= */

.request-actions
.feed-purchase-action-button,
#messages .personal-message-post-action.feed-purchase-action-button,
.offer-fulfillment-form .payment-submissions-button {
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 4px 8px;
    border: 1px solid #3f7f82;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

.request-actions .feed-purchase-action-button,
#messages .message-form-actions .message-draft-button,
#messages .personal-message-post-action.feed-purchase-action-button {
    background:
        #3f7f82 !important;

    border-color:
        #3f7f82 !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.feed-purchase-action-button:hover,
#messages .message-form-actions .message-draft-button:hover,
#messages .personal-message-post-action.feed-purchase-action-button:hover {
    background:
        #356b6e !important;

    border-color:
        #356b6e !important;
}


/* =========================================================
   EDIT — SLATE
========================================================= */

.request-actions
.feed-edit-action-button,
#messages .inbox-message-actions .message-edit-action-button {
    background:
        #5d6875 !important;

    border-color:
        #5d6875 !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.feed-edit-action-button:hover,
#messages .inbox-message-actions .message-edit-action-button:hover {
    background:
        #4e5864 !important;

    border-color:
        #4e5864 !important;
}


/* =========================================================
   REVIEW OFFER PAYMENT — INDIGO
========================================================= */

.request-actions
.feed-review-payment-button {
    background:
        #56689a !important;

    border-color:
        #56689a !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.feed-review-payment-button:hover {
    background:
        #485783 !important;

    border-color:
        #485783 !important;
}


/* =========================================================
   OPTIONS — CHARCOAL
========================================================= */

.request-card
.post-options-toggle {
    background:
        #4f5964 !important;

    border-color:
        #4f5964 !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-card
.post-options-toggle:hover {
    background:
        #414a54 !important;

    border-color:
        #414a54 !important;
}

/* =========================================================
   POSTED REQUEST — NO FULFILLMENTS MESSAGE
========================================================= */

.posted-fulfillment-empty-message {
    width:
        100%;

    margin:
        0;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.10
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );

    color:
        #333;

    font-weight:
        500;

    line-height:
        1.5;
}


/* =========================================================
   OFFER POST — BUYERS BUTTON
========================================================= */

.request-actions
.feed-buyers-action-button {
    background:
        #4a748d !important;

    border-color:
        #4a748d !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.feed-buyers-action-button:hover {
    background:
        #3d6176 !important;

    border-color:
        #3d6176 !important;
}

/* =========================================================
   OWNER REQUEST — FULFILLMENTS BUTTON
========================================================= */

.request-actions
.feed-owner-fulfillments-button {
    background:
        #4f7f62 !important;

    border-color:
        #4f7f62 !important;

    color:
        #ffffff !important;

    font-weight:
        600;
}


.request-actions
.feed-owner-fulfillments-button:hover {
    background:
        #426b53 !important;

    border-color:
        #426b53 !important;
}


/* =========================================================
   OWNER REQUEST — FULFILLMENTS POPUP
========================================================= */

.feed-request-fulfillments-form
.posted-fulfillment-dropdown {
    margin-top:
        0;
}


.feed-request-fulfillments-form
.posted-fulfillment-dropdown-menu {
    background:
        #f7f9fa;
}


/* =========================================================
   NO FULFILLMENTS MESSAGE
========================================================= */

.feed-request-no-fulfillments {
    line-height:
        1.55;

    font-weight:
        500;
}


/* =========================================================
   FULFILLMENTS POPUP — CLOSE BUTTON
========================================================= */

.fulfill-buttons
.feed-request-fulfillments-close-button {
    background:
        #5d6875;

    border:
        1px solid
        #5d6875;

    color:
        #ffffff;

    font-weight:
        600;
}


.fulfill-buttons
.feed-request-fulfillments-close-button:hover {
    background:
        #4e5864;

    border-color:
        #4e5864;
}

/* =========================================================
   OWNER REQUEST — FULFILLMENTS POPUP LIST
   SAME BLUE AS REQUEST POSTS
========================================================= */

.feed-request-fulfillments-list {
    display:
        block !important;

    width:
        100% !important;

    min-width:
        0;

    margin:
        0 !important;

    padding:
        14px;

    background:
        #ffffff !important;

    border:
        1px solid
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;

    border-radius:
        10px;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* =========================================================
   INDIVIDUAL FULFILLMENT CARDS
   SAME REQUEST BLUE
========================================================= */

.feed-request-fulfillments-list
.posted-fulfillment-dropdown-item {
    background:
        rgba(
            222,
            239,
            255,
            0.88
        ) !important;

    border:
        1px solid
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;

    border-radius:
        10px !important;

    box-shadow:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


/* =========================================================
   AMOUNT TO PAY
========================================================= */

.feed-request-fulfillments-list
.fulfillment-payment-amount {
    margin:
        10px 0 !important;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(
            93,
            145,
            190,
            0.42
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            255,
            255,
            0.42
        );

    font-size:
        14px;

    font-weight:
        600;
}


/* =========================================================
   APPROVED FULFILLMENT
========================================================= */

.feed-request-fulfillments-list
.posted-fulfillment-approve-button:disabled {
    background:
        #4f7f62 !important;

    border-color:
        #4f7f62 !important;

    color:
        #ffffff !important;

    opacity:
        1 !important;

    cursor:
        default;
}

/* =========================================================
   FULFILLMENT CARD — TOP HEADER
========================================================= */

.posted-fulfillment-item-header {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        8px;
}


.posted-fulfillment-item-header h5 {
    margin:
        0 !important;

    flex:
        1 1 auto;

    min-width:
        0;
}


/* =========================================================
   APPROVED BUTTON — TOP RIGHT
========================================================= */

.posted-fulfillment-item-header
.posted-fulfillment-approve-button {
    flex:
        0 0 auto;

    width:
        auto;

    min-width:
        92px;

    max-width:
        145px;

    min-height:
        34px;

    margin:
        0 !important;

    padding:
        7px 14px;

    white-space:
        nowrap;
}

/* =========================================================
   APPROVED MEDIA — KEEP DOWNLOAD BUTTON VISIBLE
========================================================= */

.feed-request-fulfillments-list
.stored-fulfillment-media {
    position:
        relative;

    z-index:
        2;

    overflow:
        visible !important;
}


.feed-request-fulfillments-list
.stored-fulfillment-media-item.approved-download-item {
    overflow:
        visible !important;

    position:
        relative;

    z-index:
        3;

    margin-bottom:
        12px;
}


.feed-request-fulfillments-list
.approved-download-item
.stored-fulfillment-download-link {
    position:
        relative;

    z-index:
        10;

    display:
        inline-flex !important;

    margin:
        12px auto 0 auto !important;

    max-width:
        calc(
            100% - 20px
        ) !important;

    box-shadow:
        0 3px 8px
        rgba(
            0,
            0,
            0,
            0.16
        );
}


/* =========================================================
   OWNER REQUEST — WIDER FULFILLMENTS WINDOW
========================================================= */

.feed-request-fulfillments-form {
    width:
        min(
            900px,
            calc(
                100vw - 40px
            )
        ) !important;

    max-width:
        900px !important;

    min-width:
        0 !important;
}


/* =========================================================
   APPROVED FULFILLMENT — CONTAIN DOWNLOAD BUTTON
========================================================= */

.feed-request-fulfillments-list
.stored-fulfillment-media-item.approved-download-item {
    display:
        flex !important;

    flex-direction:
        column;

    align-items:
        stretch;

    width:
        100%;

    max-width:
        100%;

    overflow:
        hidden !important;

    padding-bottom:
        14px;

    margin-bottom:
        12px;

    box-sizing:
        border-box;
}


.feed-request-fulfillments-list
.approved-download-item
.stored-fulfillment-media-visual {
    width:
        100%;

    height:
        auto !important;

    max-height:
        420px;

    flex:
        0 0 auto;
}


.feed-request-fulfillments-list
.approved-download-item
.stored-fulfillment-media-label {
    position:
        static !important;

    transform:
        none !important;

    align-self:
        center;

    width:
        fit-content;

    max-width:
        calc(
            100% - 24px
        );

    margin:
        10px auto 0 auto;
}


.feed-request-fulfillments-list
.approved-download-item
.stored-fulfillment-download-link {
    position:
        relative !important;

    z-index:
        10;

    align-self:
        center;

    width:
        auto !important;

    min-width:
        150px;

    max-width:
        calc(
            100% - 24px
        ) !important;

    margin:
        12px auto 0 auto !important;

    padding:
        10px 18px;

    box-sizing:
        border-box;

    white-space:
        nowrap;
}


/* =========================================================
   FULFILLMENT RECEIVED — WIDER WINDOW
========================================================= */

.received-fulfillment-form {
    width:
        min(
            900px,
            calc(
                100vw - 40px
            )
        ) !important;

    max-width:
        900px !important;

    min-width:
        0 !important;
}


/* =========================================================
   APPROVED MEDIA
   FIXED PREVIEW HEIGHT + ALIGNED DOWNLOAD BUTTONS
========================================================= */

.stored-fulfillment-media
.approved-download-item {
    display:
        grid !important;

    grid-template-rows:
        360px
        auto
        auto;

    align-items:
        stretch;

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    overflow:
        hidden !important;

    padding-bottom:
        14px;

    box-sizing:
        border-box;
}


/* =========================================================
   APPROVED IMAGE / VIDEO
   SAME HEIGHT REGARDLESS OF ORIGINAL ASPECT RATIO
========================================================= */

.stored-fulfillment-media
.approved-download-item
.stored-fulfillment-media-visual {
    display:
        block;

    width:
        100% !important;

    height:
        360px !important;

    min-height:
        360px !important;

    max-height:
        360px !important;

    object-fit:
        contain !important;

    background:
        #111;

    grid-row:
        1;
}


/* =========================================================
   APPROVED NORMAL FILE PREVIEW
========================================================= */

.stored-fulfillment-media
.approved-download-item
.stored-fulfillment-file-preview {
    width:
        100%;

    height:
        360px !important;

    min-height:
        360px !important;

    max-height:
        360px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    grid-row:
        1;

    box-sizing:
        border-box;
}


/* =========================================================
   RECEIVED ITEM LABEL
========================================================= */

.stored-fulfillment-media
.approved-download-item
.stored-fulfillment-media-label {
    position:
        static !important;

    left:
        auto !important;

    bottom:
        auto !important;

    transform:
        none !important;

    grid-row:
        2;

    justify-self:
        center;

    width:
        fit-content;

    max-width:
        calc(
            100% - 24px
        );

    margin:
        10px auto 0 auto;
}


/* =========================================================
   DOWNLOAD BUTTON
   ALWAYS DIRECTLY UNDER ITS OWN ITEM
========================================================= */

.stored-fulfillment-media
.approved-download-item
.stored-fulfillment-download-link {
    position:
        static !important;

    grid-row:
        3;

    justify-self:
        center;

    align-self:
        center;

    width:
        auto !important;

    min-width:
        150px;

    max-width:
        calc(
            100% - 24px
        ) !important;

    min-height:
        40px;

    margin:
        12px auto 0 auto !important;

    padding:
        10px 18px;

    box-sizing:
        border-box;

    white-space:
        nowrap;

    z-index:
        auto !important;
}


/* =========================================================
   APPROVED REQUEST FULFILLMENT
   MATCH REQUEST POST BLUE
========================================================= */

.received-fulfillment-media
.stored-fulfillment-media-item.approved-download-item,

.feed-request-fulfillments-list
.stored-fulfillment-media-item.approved-download-item {

    background:
        rgba(
            222,
            239,
            255,
            0.88
        ) !important;

    border-color:
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;
}


/* =========================================================
   RECEIVED ITEM LABEL — REQUEST BLUE
========================================================= */

.received-fulfillment-media
.approved-download-item
.stored-fulfillment-media-label,

.feed-request-fulfillments-list
.approved-download-item
.stored-fulfillment-media-label {

    background:
        rgba(
            222,
            239,
            255,
            0.88
        ) !important;

    color:
        #222222 !important;

    border:
        1px solid
        rgba(
            93,
            145,
            190,
            0.42
        );

    font-weight:
        700;
}


/* =========================================================
   FULFILLMENT LIST — STRONG SEPARATORS
========================================================= */


/* More breathing room between fulfillments */

.feed-request-fulfillments-list
.posted-fulfillment-dropdown-item
+
.posted-fulfillment-dropdown-item,

.fulfilled-request-items
>
.fulfilled-request-item
+
.fulfilled-request-item {

    position:
        relative;

    margin-top:
        40px !important;
}


/* Strong blue divider between fulfillments */

.feed-request-fulfillments-list
.posted-fulfillment-dropdown-item
+
.posted-fulfillment-dropdown-item::before,

.fulfilled-request-items
>
.fulfilled-request-item
+
.fulfilled-request-item::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        -18px;

    height:
        4px;

    border-radius:
        999px;

    background:
        rgba(
            61,
            112,
            157,
            0.90
        );

    box-shadow:
        0 1px 4px
        rgba(
            0,
            0,
            0,
            0.14
        );
}


/* Make each fulfillment heading easier to spot */

.feed-request-fulfillments-list
.posted-fulfillment-dropdown-item
.posted-fulfillment-item-header h5,

.fulfilled-request-items
>
.fulfilled-request-item
h4 {

    font-size:
        16px !important;

    font-weight:
        750 !important;

    margin-bottom:
        12px !important;
}


/* =========================================================
   FULFILLMENTS POPUP
   FIXED CLOSE BUTTON + SCROLLING LIST
========================================================= */

.feed-request-fulfillments-form {

    display:
        flex !important;

    flex-direction:
        column;

    max-height:
        90vh !important;

    overflow:
        hidden !important;
}


/* =========================================================
   FULFILLMENTS LIST
   ONLY THIS AREA SCROLLS
========================================================= */

.feed-request-fulfillments-form
.feed-request-fulfillments-list {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    padding-right:
        14px;
}


/* =========================================================
   CLOSE BUTTON AREA
   ALWAYS VISIBLE AT BOTTOM
========================================================= */

.feed-request-fulfillments-close-area {

    flex:
        0 0 auto;

    width:
        100%;

    margin:
        14px 0 0 0 !important;

    padding:
        14px 0 0 0;

    display:
        flex;

    justify-content:
        flex-start;

    background:
        #ffffff;

    border-top:
        1px solid
        rgba(
            93,
            145,
            190,
            0.45
        );

    position:
        relative;

    z-index:
        20;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.feed-request-fulfillments-close-area
.feed-request-fulfillments-close-button {

    flex:
        0 0 auto;
}


/* =========================================================
   FEED — OWNER POST CANCEL BUTTON
   LIGHT RED
========================================================= */

.profile-feed-post-list
.posted-request-cancel-button,

#publicFeed
.posted-request-cancel-button,

#followFeedContent
.posted-request-cancel-button {

    background:
        #f8d7da !important;

    border:
        1px solid
        #d98b92 !important;

    color:
        #842029 !important;

    font-weight:
        600 !important;
}


/* =========================================================
   FEED — OWNER POST CANCEL BUTTON HOVER
========================================================= */

.profile-feed-post-list
.posted-request-cancel-button:hover,

#publicFeed
.posted-request-cancel-button:hover,

#followFeedContent
.posted-request-cancel-button:hover {

    background:
        #f1c4c8 !important;

    border-color:
        #ca737c !important;

    color:
        #6f1b23 !important;
}


/* =========================================================
   FEED — OWNER FULFILLMENTS DROPDOWN
   INLINE BENEATH REQUEST POST
========================================================= */

.feed-owner-fulfillments-dropdown {

    width:
        100%;

    min-width:
        0;

    margin:
        12px 0 0 0 !important;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        10px;
}


/* =========================================================
   FULFILLMENTS DROPDOWN BUTTON
   KEEP EXISTING GREEN FORMAT
========================================================= */

.feed-owner-fulfillments-dropdown
>
.feed-owner-fulfillments-button {

    width:
        155px !important;

    min-width:
        155px !important;

    max-width:
        155px !important;

    height:
        38px;

    min-height:
        38px;

    margin-left:
        auto;

    padding:
        8px 7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #4f7f62 !important;

    border-radius:
        6px;

    background:
        #4f7f62 !important;

    color:
        #ffffff !important;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.2;

    text-align:
        center;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.feed-owner-fulfillments-dropdown
>
.feed-owner-fulfillments-button:hover {

    background:
        #426b53 !important;

    border-color:
        #426b53 !important;

    color:
        #ffffff !important;
}


/* =========================================================
   INLINE FULFILLMENTS LIST
========================================================= */

.feed-owner-fulfillments-dropdown
>
.feed-request-fulfillments-list {

    width:
        100% !important;

    min-width:
        0;

    margin:
        0 !important;

    flex:
        none;

    overflow:
        visible !important;
}


/* =========================================================
   FEED FILTER — SECTION TITLES
   POST / TYPE / HIDDEN
========================================================= */

#publicFeedHeaderFilterMenu
.filter-menu-heading,

#followFeedHeaderFilterMenu
.filter-menu-heading {

    display:
        block;

    width:
        100%;

    margin:
        0 0 6px 0;

    padding:
        8px 10px;

    background:
        #4f6f86;

    border:
        1px solid
        #3f5d72;

    border-radius:
        6px;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    text-align:
        center;
}


/* =========================================================
   FEED FILTER — VERTICAL COLUMN SEPARATORS
   ONLY WHEN ALL 3 COLUMNS FIT HORIZONTALLY
========================================================= */

#home
.feed-header-filter-menu,

#followFeed
.feed-header-filter-menu {

    container-type:
        inline-size;
}


/* =========================================================
   WIDE FILTER MENU
   POST | TYPE | HIDDEN
========================================================= */

@container (min-width: 440px) {

    /* =====================================
       SWITCH DIRECTLY TO THREE COLUMNS
       ===================================== */

    #home
    .feed-header-filter-menu
    .filter-menu-columns,

    #followFeed
    .feed-header-filter-menu
    .filter-menu-columns {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* =====================================
       VERTICAL SEPARATORS
       BETWEEN THE THREE COLUMNS
       ===================================== */

    #home
    .feed-header-filter-menu
    .filter-menu-column
    +
    .filter-menu-column,

    #followFeed
    .feed-header-filter-menu
    .filter-menu-column
    +
    .filter-menu-column {

        padding-left:
            12px;

        border-left:
            2px solid
            #8fa3b2;

    }

}


/* =========================================================
   FEED — USER'S OWN FULFILLMENT REFERENCE
========================================================= */

.user-fulfillment-reference-panel {
    width: 100%;
    min-width: 0;

    margin-top: 12px;
    padding: 14px;

    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.82);

    color: #222;

    overflow-wrap: anywhere;
    word-break: break-word;
}


.user-fulfillment-reference-panel[hidden] {
    display: none !important;
}


.user-fulfillment-reference-panel > h4 {
    margin: 0 0 12px 0;

    font-size: 15px;
    font-weight: 700;
}


.user-fulfillment-reference-item {
    width: 100%;
    min-width: 0;

    margin: 0 0 12px 0;
    padding: 14px;

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.78);
}


.user-fulfillment-reference-item:last-child {
    margin-bottom: 0;
}


.user-fulfillment-reference-item h5 {
    margin: 0 0 10px 0;

    font-size: 14px;
    font-weight: 700;
}


.user-fulfillment-reference-item p {
    margin: 6px 0;

    line-height: 1.4;
}


.user-fulfillment-reference-media {
    margin-top: 12px;
}


/* =========================================================
   STICKY FULFILLED CONTROL
   WHILE USER REVIEWS SENT FULFILLMENTS
========================================================= */

.user-fulfillment-reference-panel
.fulfillment-reference-sticky-control {
    position: sticky !important;

    top: 12px !important;

    z-index: 100 !important;

    width: 155px !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin:
        0
        0
        14px
        auto !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;

    border-radius: 7px;

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/* =========================================
   FULFILLED BUTTON WHILE STICKY
========================================= */

.user-fulfillment-reference-panel
.fulfillment-reference-sticky-control
.fulfill-main-button {
    width: 155px !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 38px !important;

    padding:
        8px
        7px !important;

    border:
        1px solid
        #4f7f62 !important;

    border-radius:
        6px !important;

    background:
        #4f7f62 !important;

    color:
        #ffffff !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.user-fulfillment-reference-panel
.fulfillment-reference-sticky-control
.fulfill-main-button:hover {
    background:
        #426b53 !important;

    border-color:
        #426b53 !important;
}


/* =========================================
   CANCEL OPTION UNDER STICKY FULFILLED
========================================= */

.user-fulfillment-reference-panel
.fulfillment-reference-sticky-control
.cancel-fulfillment-option {
    width: 155px !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 38px !important;

    padding:
        8px
        7px !important;

    border:
        1px solid
        #ccc !important;

    border-radius:
        6px !important;

    background:
        #f5f5f5 !important;

    color:
        #222 !important;

    font-size:
        13px !important;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


/* =========================================================
   GLOBAL SITE SEARCH
========================================================= */

.site-title-search {
    flex: 1 1 auto;

    min-width: 0;
    max-width: 600px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


.site-title-search h1 {
    margin: 0;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.global-search-container {
    position: relative;

    width: 100%;
    max-width: 520px;
}


.global-search-input {
    width: 100%;
    height: 38px;

    padding: 8px 13px;

    border: 1px solid #ccc;
    border-radius: 7px;

    background: #ffffff;
    color: #222222;

    font-size: 14px;

    outline: none;
}


.global-search-input:focus {
    border-color: #A50B5E;

    box-shadow:
        0 0 0 2px
        rgba(165, 11, 94, 0.12);
}


/* =========================================================
   SEARCH RESULTS DROPDOWN
========================================================= */

.global-search-results {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;

    z-index: 1000;

    width: 100%;
    max-height: 520px;

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;

    border: 1px solid #d6d6d6;
    border-radius: 8px;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.18);
}


.global-search-results[hidden] {
    display: none !important;
}


/* =========================================================
   SEARCH RESULT SECTIONS
========================================================= */

.global-search-section {
    width: 100%;

    padding: 6px 0;

    border-bottom: 1px solid #eeeeee;
}


.global-search-section:last-child {
    border-bottom: 0;
}


.global-search-section-title {
    padding: 7px 12px 5px;

    color: #777777;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* =========================================================
   INDIVIDUAL SEARCH RESULT
========================================================= */

.global-search-result-button {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 3px;

    padding: 9px 12px;

    border: 0;

    background: transparent;

    color: #222222;

    text-align: left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.global-search-result-button:hover,
.global-search-result-button:focus {
    background: #f4edf1;

    outline: none;
}


.global-search-result-title {
    width: 100%;

    font-size: 14px;
    font-weight: 650;

    overflow-wrap: anywhere;
}


.global-search-result-subtitle {
    width: 100%;

    color: #777777;

    font-size: 12px;

    overflow-wrap: anywhere;
}


.global-search-empty {
    padding: 14px;

    color: #777777;

    font-size: 13px;
}


/* =========================================================
   POST FOUND THROUGH SEARCH
========================================================= */

.global-search-highlight {
    outline:
        3px solid
        #E5CCD4 !important;

    outline-offset:
        3px;

    box-shadow:
        0 0 0 5px
        rgba(229, 204, 212, 0.32) !important;
}


/* =========================================================
   SEARCH — SMALL SCREENS
========================================================= */

@media (max-width: 600px) {

    .site-title-search,
    .global-search-container {
        width: 100%;
        max-width: none;
    }

    .global-search-results {
        max-height: 60vh;
    }

}


/* =========================================================
   TOP BAR — CLEAN TWO-ROW LAYOUT
========================================================= */

.top-bar {
    display: grid !important;

    grid-template-columns:
        minmax(260px, 440px)
        1fr
        auto !important;

    grid-template-rows:
        auto
        44px !important;

    column-gap:
        20px !important;

    row-gap:
        6px !important;

    align-items:
        center !important;

    padding:
        8px
        24px !important;
}


/* =========================================================
   ALLOW TITLE + SEARCH TO USE TOP-BAR GRID
========================================================= */

.site-title-search {
    display:
        contents !important;
}


/* =========================================================
   SITE TITLE
========================================================= */

.site-title-search h1 {
    grid-column:
        1;

    grid-row:
        1;

    margin:
        0 !important;

    align-self:
        end;
}


/* =========================================================
   SEARCH BAR
========================================================= */

.global-search-container {
    grid-column:
        1;

    grid-row:
        2;

    position:
        relative;

    width:
        100% !important;

    max-width:
        440px !important;

    align-self:
        center;
}


.global-search-input {
    width:
        100% !important;

    height:
        38px !important;
}


/* =========================================================
   COMPOSE + PROFILE
========================================================= */

.top-bar-actions {
    grid-column:
        3;

    grid-row:
        2;

    margin:
        0 !important;

    width:
        auto !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        8px !important;

    flex:
        none !important;
}


/* Remove old automatic spacing */

.top-bar-actions
.top-bar-profile-button {
    margin-left:
        0 !important;
}


.top-bar-profile-button {
    margin-left:
        0 !important;
}


/* =========================================================
   SMALLER WINDOWS
========================================================= */

@media (max-width: 750px) {

    .top-bar {
        grid-template-columns:
            minmax(200px, 360px)
            1fr
            auto !important;

        column-gap:
            12px !important;

        padding:
            8px
            14px !important;
    }

}


/* =========================================================
   KEEP SEARCH RESULTS ABOVE SIDEBAR TOGGLE
========================================================= */

.top-bar {
    z-index:
        5000 !important;

    overflow:
        visible !important;
}


.global-search-container {
    z-index:
        5001 !important;
}


.global-search-results {
    z-index:
        5002 !important;
}


/* =========================================================
   OTHER USER PROFILE ACTION ROW
   FOLLOW LEFT / MESSAGE RIGHT
========================================================= */

.profile-follow-message-row {
    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    align-self:
        center !important;

    gap:
        8px !important;

    width:
        auto;
}


/* Follow — left */

.profile-follow-message-row
.profile-follow-container {
    order:
        1;
}


/* Message — right */

.profile-follow-message-row
.profile-message-button {
    order:
        2;

    margin:
        0 !important;
}


/* =========================================================
   OTHER USER PROFILE OPTIONS
   TOP-RIGHT OF PROFILE PAGE
========================================================= */

.profile-user-options-dropdown {
    position:
        relative;

    margin:
        0;

    padding:
        0;

    z-index:
        200;
}


/* =========================================
   OPTIONS BUTTON
========================================= */

.profile-user-options-toggle {
    width:
        108px;

    min-width:
        108px;

    height:
        38px;

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        6px;

    padding:
        6px 10px;

    border:
        1px solid #ccc;

    border-radius:
        6px;

    background:
        #f5f5f5;

    color:
        #222;

    font-size:
        13px;

    font-weight:
        600;

    list-style:
        none;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-user-options-toggle::-webkit-details-marker {
    display:
        none;
}


.profile-user-options-toggle:hover {
    background:
        #e8e8e8;
}


.profile-user-options-arrow {
    font-size:
        10px;

    flex-shrink:
        0;
}


/* =========================================================
   OPTIONS MENU
========================================================= */

.profile-user-options-menu {
    position:
        absolute;

    top:
        calc(100% + 4px);

    right:
        0;

    z-index:
        300;

    width:
        150px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        5px;

    border:
        1px solid #d0d0d0;

    border-radius:
        7px;

    background:
        #ffffff;

    box-shadow:
        0 6px 18px
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/* =========================================================
   OPTIONS ITEMS
========================================================= */

.profile-user-options-menu button {
    width:
        100%;

    min-width:
        0;

    min-height:
        34px;

    display:
        block;

    padding:
        7px 9px;

    border:
        0;

    border-radius:
        5px;

    background:
        transparent;

    color:
        #222;

    font-size:
        12px;

    text-align:
        left;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.profile-user-options-menu button:hover {
    background:
        #eeeeee;
}


/* Block remains visibly destructive */

.profile-user-options-menu
button:first-child {
    color:
        #b43c3c;
}


.profile-user-options-menu
button:disabled {
    opacity:
        0.55;

    cursor:
        default;
}


/* =========================================================
   MY POSTS + SAVED POSTS
   MATCH FEED CARD FORMAT
========================================================= */


/* =========================================================
   MY POSTS — REQUESTS
   SAME BLUE AS FEED
========================================================= */

#postedRequestsList
> .my-posts-feed-request-card.request-card.request-post-card {

    margin:
        0 0 16px 0 !important;

    padding:
        16px !important;

    background:
        #DEEFFF !important;

    border:
        1px solid
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;

    border-radius:
        9px !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


#postedRequestsList
> .my-posts-feed-request-card.request-card.request-post-card:hover {

    background:
        #D5EAFD !important;
}


/* =========================================================
   SAVED POSTS — REQUESTS
   SAME BLUE AS FEED
========================================================= */

#savedOffersList
> .saved-feed-post-card.request-card.request-post-card {

    margin:
        0 0 16px 0 !important;

    padding:
        16px !important;

    background:
        #DEEFFF !important;

    border:
        1px solid
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;

    border-radius:
        9px !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


#savedOffersList
> .saved-feed-post-card.request-card.request-post-card:hover {

    background:
        #D5EAFD !important;
}


/* =========================================================
   SAVED POSTS — OFFERS
   SAME GREEN AS FEED
========================================================= */

#savedOffersList
> .saved-feed-post-card.request-card.offer-post-card {

    margin:
        0 0 16px 0 !important;

    padding:
        16px !important;

    background:
        #E0F6E5 !important;

    border:
        1px solid
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;

    border-radius:
        9px !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


#savedOffersList
> .saved-feed-post-card.request-card.offer-post-card:hover {

    background:
        #D7F1DD !important;
}


/* =========================================================
   SAVED POST ACTIONS
   USE FEED'S RIGHT-SIDE COLUMN
========================================================= */

.saved-feed-post-card
.saved-post-card-actions {

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    flex-wrap:
        nowrap !important;

    gap:
        8px !important;

    margin:
        0 !important;
}


/* =========================================================
   SAVED ACTION BUTTON SIZE
   MATCH FEED BUTTONS
========================================================= */

.saved-feed-post-card
.saved-post-card-actions button {

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    min-height:
        38px !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        8px 6px !important;

    border-radius:
        6px !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    white-space:
        normal !important;

    overflow-wrap:
        anywhere !important;
}


/* =========================================================
   SAVED STATUS DROPDOWN
========================================================= */

.saved-feed-post-card
.saved-request-fulfilled-dropdown {

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    margin:
        0 !important;
}


/* =========================================================
   MY POSTS — DRAFT COLORS
========================================================= */


/* =========================================================
   REQUEST DRAFT
   SAME BLUE AS REQUEST POSTS
========================================================= */

#postedRequestsList
> .posted-request-card.request-draft-card {

    background:
        #DEEFFF !important;

    border-color:
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


#postedRequestsList
> .posted-request-card.request-draft-card:hover {

    background:
        #D5EAFD !important;

    border-color:
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;
}


/* =========================================================
   OFFER DRAFT
   SAME GREEN AS OFFER POSTS
========================================================= */

#postedRequestsList
> .posted-request-card.offer-post-draft-card {

    background:
        #E0F6E5 !important;

    border-color:
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


#postedRequestsList
> .posted-request-card.offer-post-draft-card:hover {

    background:
        #D7F1DD !important;

    border-color:
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;
}


/* =========================================================
   UNIVERSAL POST PURPOSE COLORS
   REQUEST = BLUE
   OFFER = GREEN
========================================================= */


/* =========================================================
   REQUEST CARDS
========================================================= */

.posted-request-card.request-post-card {

    background:
        #DEEFFF !important;

    border-color:
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


.posted-request-card.request-post-card:hover {

    background:
        #D5EAFD !important;

    border-color:
        rgba(
            93,
            145,
            190,
            0.78
        ) !important;
}


/* =========================================================
   OFFER CARDS
========================================================= */

.posted-request-card.offer-post-card {

    background:
        #E0F6E5 !important;

    border-color:
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


.posted-request-card.offer-post-card:hover {

    background:
        #D7F1DD !important;

    border-color:
        rgba(
            92,
            158,
            108,
            0.78
        ) !important;
}


/* =========================================================
   EVERY BUTTON — MATCH SAVED OFFER BUTTON LETTERING
========================================================= */

:is(
    #forceUniformButtonText#forceUniformButtonText2,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* =========================================================
   BUTTON LABELS / SPANS — SAME LETTER THICKNESS
========================================================= */

:is(
    #forceUniformButtonText#forceUniformButtonText2,
    button
) * {
    font-weight: 700 !important;
}


/* =========================================================
   FORCE ALL MAIN UI BUTTON LABELS TO MATCH
   12PX + SAME THICK 700 WEIGHT
========================================================= */


/* LEFT LEGEND / SIDEBAR */

.sidebar button,
.sidebar button > span:not(.dropdown-arrow),
.sidebar .dropdown-menu button,
.sidebar .dropdown-menu button > span {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* HIDE / OPEN SIDEBAR */

#sidebarToggleButton,
.sidebar-toggle-button {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* COMPOSE POST
   NEW MESSAGE
   PERSONAL REQUEST */

.compose-button,
.top-bar-compose-button,
#newMessageButton,
#personalRequestButton {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* FILTER BUTTONS */

.feed-header-filter-button,
.feed-header-filter-button > span:not(.feed-header-filter-arrow),
.my-posts-filter-button,
.my-posts-filter-button > span {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* FILTER DROPDOWN OPTIONS */

.feed-header-filter-menu button,
.feed-header-filter-menu button > span,
.my-posts-filter-menu button,
.my-posts-filter-menu button > span {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* PROFILE SIGN OUT */

#profile .profile-header-sign-out-button,
#profile .profile-header-sign-out-button * {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* PERSONAL REQUEST SUBMIT BUTTON */

#sendPersonalRequestButton,
#sendPersonalRequestButton * {
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* =========================================================
   THICKER TEXT FOR MAIN NAVIGATION / HEADER CONTROLS
   KEEP 12PX SIZE
========================================================= */

:is(
    #forceThickerText1#forceThickerText2#forceThickerText3,

    .sidebar .nav-main-button,
    .sidebar .dropdown-menu button,

    .feed-header-filter-menu button,

    .my-posts-filter-menu button,

    .compose-button,
    .top-bar-compose-button,

    #newMessageButton,
    #personalRequestButton,
    #sendPersonalRequestButton,

    #profile .profile-header-sign-out-button,

    #sidebarToggleButton
) {
    font-size: 12px !important;
    font-weight: 800 !important;
}


/* =========================================================
   THICKER TEXT FOR LABELS INSIDE THOSE BUTTONS
========================================================= */

:is(
    #forceThickerText1#forceThickerText2#forceThickerText3,

    .sidebar .nav-main-button span,
    .sidebar .dropdown-menu button span,

    .feed-header-filter-menu button span,

    .my-posts-filter-menu button span,

    #newMessageButton span,
    #personalRequestButton span,
    #sendPersonalRequestButton span,

    #profile .profile-header-sign-out-button span,

    #sidebarToggleButton span
) {
    font-weight: 800 !important;
}


/* =========================================================
   PAGE TITLE BANNERS + COMPLETE CONNECTING TRIM
   #973D60
========================================================= */


/* ENTIRE AREA BEHIND LEGEND + PAGES */

.app-layout {
    background:
        #973D60 !important;
}


/* REMOVE ALL WHITE SHOWING THROUGH
   AROUND THE PAGE CONTAINER */

.content-area {
    background:
        #973D60 !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;
}


/* ANY EXPOSED SPACE AROUND AN ACTIVE PAGE
   IS ALSO #973D60 */

.page,
.page.active,
html[data-site-theme] .content-area > .page {
    background:
        #973D60 !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;
}


/* ALL PAGE TITLE BANNERS */

.page {
    border-radius: 10px;
}

.page > .page-header {
    border-radius: 10px;

    background:
        #973D60 !important;

    border-top:
        0 !important;

    border-left:
        0 !important;

    border-right:
        0 !important;

    border-bottom:
        4px solid
        #973D60 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    margin:
        0 !important;
}


/* PAGE TITLE TEXT */

.page > .page-header h2 {
    color:
        #ffffff !important;
}


/* PUBLIC / FOLLOW FEED SUBTITLE */

.page > .page-header
.feed-title-subtitle {
    color:
        #ffffff !important;
}


/* PAGE LIST / SCROLL AREA
   REMOVE WHITE EDGE AROUND IT */

.page > .scroll-area {
    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    margin:
        0 !important;
}


/* RIGHT EDGE OF LEGEND */

.sidebar {
    border-right:
        var(--legend-border-width) solid
        #973D60 !important;

    box-shadow:
        var(--legend-border-width) 0 0
        #973D60 !important;
}

/* Include the legend's magenta border in the visible left-side page gap. */
.content-area {
    padding-left: max(0px, calc(var(--page-side-gap) - var(--legend-border-width))) !important;
    padding-right: var(--page-side-gap) !important;
}


/* =========================================================
   TOP SITE BANNER — MATCH LEGEND
   #008B8B
========================================================= */

.top-bar {
    background:
        #008B8B !important;

    border-bottom:
        0 !important;

    box-shadow:
        none !important;
}


/* SITE TITLE */

.top-bar h1,
.site-title-search h1 {
    color:
        #ffffff !important;
}


/* KEEP TOP-BAR INNER AREAS TRANSPARENT
   SO THE TEAL SHOWS THROUGH */

.site-title-search,
.top-bar-actions,
.global-search-container {
    background:
        transparent !important;
}


/* Shared search field and results dropdown color. */

:root {
    --entry-field-background: #F8EEEC;
    --entry-field-text: #263238;
    --entry-field-placeholder: #59636d;
}

:root :is(input[type="search"], #searchInput, .global-search-input, .search-container input, .legend-page-search input, .global-search-results, #createAccountForm input,
    :where(dialog, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
        textarea,
        select
    )) {
    background: var(--entry-field-background) !important;
    color: var(--entry-field-text) !important;
}

:root :is(input[type="search"], #searchInput, .global-search-input, .search-container input, .legend-page-search input, #createAccountForm input,
    :where(dialog, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
        textarea,
        select
    ))::placeholder {
    color: var(--entry-field-placeholder) !important;
    opacity: 1;
}


.site-practice-notice { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 30000; box-sizing: border-box; max-width: calc(100vw - 24px); padding: 6px 10px; border: 1px solid #725900; border-radius: 8px; background: #fff3cd; color: #392b00; font: 600 12px/1.4 Arial, sans-serif; text-align: center; pointer-events: none; }

/* Account setup and operator requests use the existing site card/button palette. */
.account-security-dialog { --account-security-padding: 22px; box-sizing: border-box; width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--account-security-padding); border: 1px solid #607784; border-radius: 18px; background: var(--settings-surface, #fff); color: var(--settings-text, #111); }
.account-security-dialog::backdrop { background: #071b35a0; }
.account-security-dialog form, .operator-case details { display: flex; flex-direction: column; gap: 12px; }
.account-security-dialog label, .operator-case label, .operator-report-fields label { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.account-security-dialog :is(input:not([type=checkbox]), select), .operator-case :is(input, textarea, select), .operator-report-fields :is(input:not([type=checkbox]), select) { box-sizing: border-box; min-width: 0; width: 100%; padding: 10px; border: 1px solid #607784; border-radius: 8px; font: inherit; }
.account-security-dialog input[type=checkbox], .operator-report-fields input[type=checkbox], .operator-case input[type=checkbox], .signup-eligibility input { width: 20px !important; height: 20px; flex: 0 0 auto; }
.account-security-dialog .settings-card { padding: 12px; max-width: 100%; }
.account-security-legal > p { margin: 0 0 12px; }
.account-security-legal .settings-section-heading { cursor: inherit; }
/* Pin policy titles against the popup edge instead of below its scrolling inset. */
.account-security-dialog :is(.settings-section[open], .settings-section-static) > .settings-section-heading { top: calc(-1 * var(--account-security-padding)); }
.account-security-dialog p, .operator-case { overflow-wrap: anywhere; }
.account-security-dialog button, .operator-case button, .server-account-security button { width: auto; max-width: 100%; padding: 8px 12px; margin: 6px 4px; font: inherit; white-space: normal; }
.operator-case textarea { min-height: 90px; resize: vertical; }
.operator-case-urgent { font-weight: 700; border-left: 4px solid #b64040; padding-left: 10px; }
.operator-submission-recovery { min-width: 0; overflow-wrap: anywhere; }
.operator-submission-recovery label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.operator-submission-recovery input { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.page .operator-submission-recovery button { box-sizing: border-box; max-width: 100%; min-width: 0; height: auto; white-space: normal !important; overflow-wrap: anywhere; }
.signup-eligibility { display: flex; align-items: flex-start; gap: 10px; }
.private-sign-in-controls { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--settings-border, #607784); }
.private-sign-in-controls button { width: auto; max-width: 100%; padding: 8px 12px; white-space: normal; }
.private-sign-in-controls p, .sign-in-status { overflow-wrap: anywhere; line-height: 1.5; }
.sign-in-status:empty { display: none; }
.operator-report-fields [hidden] { display: none !important; }

/* Admin accounting uses the same finance cards and compact site buttons. */
#financeTaxInfoDetails { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#financeTaxInfoDetails .accounting-section { padding: 0; min-width: 0; }
#financeTaxInfoDetails :is(.accounting-section, .accounting-intro) { overflow-x: clip; }
.accounting-section-heading { display: flex; align-items: center; gap: .4em; padding: 22px; font-size: 18.72px; font-weight: 700; list-style: none; cursor: pointer; }
.accounting-section-heading::-webkit-details-marker { display: none; }
.accounting-section-heading::marker { content: ''; }
.accounting-section[open] > .accounting-section-heading > .settings-disclosure-arrow { transform: rotate(180deg); }
.accounting-section-heading:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: -4px; border-radius: 18px; }
.accounting-section-body { padding: 0 22px 22px; min-width: 0; }
#financeTaxInfoDetails :is(.accounting-intro, .accounting-section) { color: #111; }
#financeTaxInfoDetails p { margin: .65em 0; line-height: 1.5; overflow-wrap: anywhere; }
.accounting-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; margin: 16px 0; }
.accounting-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; margin: 8px 0; font-weight: 600; }
.accounting-field > span { line-height: 1.4; }
#financeTaxInfoDetails .accounting-field > :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid #526b75; border-radius: 10px; background: #fff; color: #111; font: inherit; font-weight: 400; }
#financeTaxInfoDetails .accounting-field > input[type="checkbox"] { width: 20px; height: 20px; align-self: flex-start; }
#financeTaxInfoDetails [hidden] { display: none !important; }
.accounting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
#financeTaxInfoDetails .finance-primary-button { width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; min-height: 34px; padding: 7px 13px; margin: 0; font-size: 14px; white-space: normal !important; overflow-wrap: anywhere !important; }
.accounting-section-heading > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.accounting-status:empty { display: none; }
.accounting-error { color: #8a1720; font-weight: 700; }
.accounting-table-wrap { max-width: 100%; overflow-x: auto; margin: 12px 0; border: 1px solid #78868b; border-radius: 10px; background: rgba(255,255,255,.6); }
.accounting-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.accounting-table :is(th, td) { padding: 10px; border-bottom: 1px solid #adb7ba; vertical-align: top; min-width: 110px; overflow-wrap: anywhere; }
.accounting-table th { background: rgba(130,163,255,.2); }
.accounting-table tr:last-child td { border-bottom: 0; }
.accounting-table td > .accounting-actions { min-width: 200px; }
.accounting-table .accounting-field { width: 100%; }
.accounting-statement { padding: 14px 0; border-top: 1px solid #78868b; }
.accounting-statement > summary { font-weight: 700; cursor: pointer; line-height: 1.5; }
.accounting-inline-editor { padding: 14px; margin: 14px 0; border: 1px solid #526b75; border-radius: 12px; background: rgba(255,255,255,.5); }
html[data-appearance="night"] :is(.accounting-table-wrap, .accounting-inline-editor) { background: #15202b; }
html[data-appearance="night"] .accounting-table th { background: #23384e; }
html[data-appearance="night"] .accounting-table :is(th, td) { color: #edf4fc; }
@media (max-width: 600px) {
    .accounting-section-heading { padding: 16px; font-size: 18px; }
    .accounting-section-body { padding: 0 16px 16px; }
    .accounting-table :is(th, td) { padding: 8px; }
}

/* =========================================================
   FINANCE PAGE
========================================================= */

.finance-page-content {
    width:
        100%;

    max-width:
        980px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


/* =========================================================
   FINANCE CARDS
========================================================= */

#financeMethodsDetails {
    display: flex;
    flex-direction: column;
    gap: inherit;
    min-width: 0;
}

.finance-card,
.finance-summary-card {
    width: 100%;
    padding: 22px;
}

.finance-card,
.finance-summary-card,
.uploads-library-card,
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page :is(.settings-card, .legal-document, .simulated-customer-support),
html:not([data-appearance="night"]):not(.user-high-contrast) :is(#profileContent, #profileSettingsContent) .profile-section-dropdown {
    background:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(125%);

    backdrop-filter:
        blur(14px)
        saturate(125%);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 24px
        rgba(
            0,
            70,
            75,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.65
        );
}


/* HIDDEN WITHDRAWAL PANEL */

.finance-transactions-dropdown {
    min-width: 0;
}

#balance#balance .finance-transactions-dropdown > .finance-transactions-toggle,
#balance#balance .finance-card > .finance-section-heading {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: min(18.72px, 5.5cqi) !important;
    font-weight: 700;
    white-space: nowrap;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: inherit;
    text-align: left;
}

.finance-transactions-toggle::before {
    content: "▼";
    flex: 0 0 auto;
    font-size: 11px;
    transform: rotate(0deg);
    transition: transform 0.18s ease;
}

.finance-transactions-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg);
}

html.user-reduce-motion .finance-transactions-toggle::before {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .finance-transactions-toggle::before { transition: none; }
}

.finance-transactions-list[hidden] {
    display: none !important;
}

.finance-transactions-toggle[aria-expanded="true"] {
    margin-bottom: 18px !important;
}

@media (max-width: 600px) {
    #balance > .scroll-area {
        padding: 12px 0 !important;
    }

    .finance-transactions-dropdown {
        padding: 12px 8px;
    }
}

.finance-card[hidden] {
    display:
        none !important;
}


/* =========================================================
   BALANCE
========================================================= */

.finance-summary-card {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;

    text-align:
        left;
}


.finance-summary-card .finance-card-label {
    font-size:
        18px;

    font-weight:
        700;

    color:
        #000;
}


.finance-summary-card
#accountBalanceAmount {
    font-size:
        34px;

    line-height:
        1;

    color:
        #15803d !important;
}


/* =========================================================
   FINANCE HEADINGS
========================================================= */

.finance-card h3 {
    margin:
        0 0 16px 0;

    font-size:
        18px;
}


/* =========================================================
   FINANCE BUTTONS
========================================================= */

.finance-primary-button,
.finance-secondary-button {
    min-height:
        38px;

    padding:
        9px 16px;

    border-radius:
        7px;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.finance-primary-button {
    border:
        1px solid
        #008B8B;

    background:
        #008B8B;

    color:
        #ffffff;
}


.finance-secondary-button {
    border:
        1px solid
        #b8b8b8;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    color:
        #222;
}


/* =========================================================
   FINANCE NOTES
========================================================= */

.finance-simulation-note,
.finance-security-note,
.finance-bank-status,
.finance-empty-message {
    margin:
        0;

    font-size:
        12px;

    line-height:
        1.45;

    color:
        #555;
}


/* =========================================================
   BANK INFORMATION
========================================================= */

.finance-bank-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;

    margin-bottom:
        16px;
}


.finance-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    font-size:
        13px;

    font-weight:
        700;
}


.finance-field input,
.finance-field select {
    width:
        100%;

    min-height:
        40px;

    padding:
        9px 11px;

    border:
        1px solid
        #b8b8b8;

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    color:
        #222;
}


/* =========================================================
   WITHDRAWAL MONEY INPUT
========================================================= */

.finance-money-input {
    display:
        flex;

    width:
        100%;
}


.finance-money-input > span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        42px;

    border:
        1px solid
        #b8b8b8;

    border-right:
        0;

    border-radius:
        7px 0 0 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );
}


.finance-money-input input {
    border-radius:
        0 7px 7px 0;
}


.finance-button-row {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        16px;
}


.finance-bank-status {
    margin-top:
        10px;
}


/* =========================================================
   PAST TRANSACTIONS
========================================================= */

.finance-transactions-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.finance-pending-empty {
    gap: 1lh;
}

.finance-pending-empty > p {
    margin: 0;
}

.finance-transaction-row {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.42
        );
}


.finance-transaction-details {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.finance-transaction-details span {
    overflow-wrap:
        anywhere;
}


.finance-transaction-details small {
    color:
        #666;
}


.finance-transaction-amount {
    flex:
        0 0 auto;

    white-space:
        nowrap;
}


/* MONEY RECEIVED */

.finance-transaction-positive {
    color:
        #2f7d4a;
}


/* MONEY PAID / WITHDRAWN */

.finance-transaction-negative {
    color:
        #973D60;
}


/* =========================================================
   MOBILE FINANCE
========================================================= */

@media (max-width: 700px) {

    .finance-bank-grid {
        grid-template-columns:
            1fr;
    }


    .finance-transaction-row {
        align-items:
            flex-start;
    }

}


/* =========================================================
   FINANCE — ACCOUNT TYPE SIZE
========================================================= */

#financeAccountType {
    width: 100% !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 9px 11px !important;

    box-sizing: border-box !important;

    font-size: 13px !important;
}


/* =========================================================
   FINANCE — TRANSACTION ACTIONS
========================================================= */

.finance-transaction-summary {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

/* Keep each expanded transaction's identity and Hide Info control in view. */
.finance-transaction-row:has(> .finance-transaction-more-info:not([hidden])) > .finance-transaction-summary {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #FCE9E1;
    box-sizing: border-box;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px 8px 0 0;
}
.finance-transaction-row:has(> .finance-transaction-more-info:not([hidden])) > .finance-transaction-more-info {
    margin-top: 0;
    border-top: 0;
}
html[data-appearance="night"] .finance-transaction-row:has(> .finance-transaction-more-info:not([hidden])) > .finance-transaction-summary,
html.user-high-contrast .finance-transaction-row:has(> .finance-transaction-more-info:not([hidden])) > .finance-transaction-summary {
    background: var(--settings-surface, #15202b);
}


.finance-transaction-actions {
    flex: 0 0 auto;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 8px;
}


.finance-more-info-button {
    min-width: 90px;

    min-height: 32px;

    padding: 7px 12px;

    border: 1px solid #008B8B;

    border-radius: 6px;

    background: #008B8B;

    color: #ffffff;

    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}


.finance-more-info-button:hover {
    background: #007777;

    border-color: #007777;
}


/* =========================================================
   FINANCE — EXPANDED TRANSACTION INFO
========================================================= */

.finance-transaction-more-info {
    width: 100%;

    margin-top: 12px;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );
}


.finance-transaction-more-info[hidden] {
    display: none !important;
}


.finance-more-info-line {
    width: 100%;

    display: grid;

    grid-template-columns:
        155px
        minmax(0, 1fr);

    gap: 10px;

    padding: 5px 0;

    font-size: 13px;

    line-height: 1.4;
}


.finance-more-info-line strong {
    color: #333;
}


.finance-more-info-line span {
    min-width: 0;

    overflow-wrap: anywhere;
}


/* THE TRANSACTION ROW NOW HOLDS
   BOTH THE SUMMARY AND EXPANDED INFO */

.finance-transaction-row {
    display: block !important;
}


/* =========================================================
   MOBILE TRANSACTION INFO
========================================================= */

@media (max-width: 700px) {

    .finance-transaction-summary {
        align-items: flex-start;
    }


    .finance-more-info-line {
        grid-template-columns: 1fr;

        gap: 2px;
    }

}


/* =========================================================
   FINANCE — OTHER USER
========================================================= */

.finance-transaction-other-user {
    font-size:
        13px;

    font-weight:
        600;

    color:
        #333;
}


/* =========================================================
   ACTIVE LEGEND / SIDEBAR PAGE
   KEEP CURRENT PAGE HIGHLIGHTED
========================================================= */

.sidebar button.legend-selected,
.sidebar .dropdown-menu button.legend-selected {

    background:
        #174a6d !important;

    color:
        #ffffff !important;

    box-shadow:
        inset 4px 0 0
        #E5CCD4 !important;
}


/* Keep the same appearance while hovering
   over the currently selected page */

.sidebar button.legend-selected:hover,
.sidebar .dropdown-menu button.legend-selected:hover {

    background:
        #174a6d !important;

    color:
        #ffffff !important;
}


/* =========================================================
   PROFILE — FULFILLMENTS SUBMITTED
   NORMAL REQUEST CARDS
========================================================= */

.profile-stat-list
.profile-submitted-fulfillment-request-card {

    margin-bottom:
        0;
}

/* Language button sits above Compose and the profile image. */
.site-language-control {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    position: relative;
    color: #1f2933;
    font-size: 13px;
}
.site-language-control > summary {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    box-sizing: border-box;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #d5d9de;
    border-radius: 12px;
    background: #fff;
}
.site-language-control > summary:focus-visible,
#siteLanguageSelect:focus-visible {
    outline: 2px solid #1f5f8b;
    outline-offset: 2px;
}
.site-language-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(320px, calc(100vw - 28px));
    padding: 14px;
    background: #fff;
    border: 1px solid #d5d9de;
    border-radius: 8px;
    box-shadow: 0 4px 16px #0002;
    z-index: 5010;
    direction: ltr;
    text-align: left;
}
#siteLanguageSelect { width: 100%; margin-top: 8px; padding: 8px; font: inherit; }
.site-language-panel p { margin: 10px 0 0; line-height: 1.4; }

/* Account settings and appearance */
.site-settings-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.5;
}
.settings-card {
    min-width: 0;
    margin: 24px 0;
    padding: 20px;
    border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 12px;
    background: var(--settings-surface, #fff);
}
.settings-card legend { font-size: 19px; font-weight: 700; padding: 0 8px; }
#siteBackupSettings > .settings-card,
#settingsSignInNotice > .settings-card {
    height: auto;
    padding-top: 28px;
}
#siteBackupTitle,
#settingsSignInTitle {
    margin: 0 0 20px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
#siteBackupSettings > .site-backup-panel {
    padding: 8px 20px;
}
#siteBackupSettings > .site-backup-panel > #siteBackupTitle {
    margin: 0;
}
#siteBackupSettings > .site-backup-panel[open] > #siteBackupTitle {
    margin-bottom: 12px;
}
.settings-card select, .settings-card button {
    max-width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 7px;
    font: inherit;
}
.settings-card select { display: block; margin: 8px 0; }
.settings-card button {
    background: var(--settings-accent, #008b8b);
    color: #fff;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}

/* Darken Settings controls, including checked and unchecked checkboxes. */
#settings :is(button, summary, input[type="checkbox"]):hover:not(:disabled),
.account-settings-dialog button:hover:not(:disabled) {
    filter: brightness(0.85);
}
.settings-card :is(select, button, input):focus-visible {
    outline: 3px solid var(--settings-accent, #008b8b);
    outline-offset: 3px;
}
.settings-inline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.settings-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); }
.settings-check input { width: 18px; height: 18px; accent-color: var(--settings-accent); }
#siteThemeSwatches { display: flex; gap: 8px; margin-top: 14px; }
#siteThemeSwatches span { width: 36px; height: 36px; border: 1px solid var(--settings-border); border-radius: 50%; }
html[data-site-theme] {
    --primary: var(--settings-accent);
    --primary-dark: var(--settings-accent-dark);
    --background: var(--settings-background);
    --surface: var(--settings-surface);
    --text: var(--settings-text);
    --muted-text: var(--settings-muted);
    --border: var(--settings-border);
}
html[data-site-theme] body,
html[data-site-theme] .page,
html[data-site-theme] .scroll-area {
    background-color: var(--settings-background) !important;
    color: var(--settings-text) !important;
}
html[data-site-theme] .top-bar,
html[data-site-theme] #mainSidebar {
    background-color: var(--settings-accent-dark) !important;
}
html[data-site-theme] .top-bar { background-color: var(--settings-accent) !important; }
html[data-site-theme] .page-header {
    background-color: var(--settings-surface) !important;
    color: var(--settings-text) !important;
    border-color: var(--settings-border) !important;
}
html[data-site-theme] .page-header h2 { color: var(--settings-text) !important; }
html[data-site-theme] .legend-selected {
    background-color: var(--settings-accent) !important;
    color: #fff !important;
    outline: 1px solid #ffffff80;
}
html[data-appearance="night"] :is(
    .posted-request-card, .request-card, .offer-post-card, .profile-card,
    .message-thread-shell, .message-thread-dropdown, .message-thread-summary,
    .message-conversation, .message-conversation-list, .message-form,
    .notification-card, .finance-card, .finance-summary-card, .balance-card,
    .settings-card, .site-language-panel, .dropdown-menu, .post-options-menu,
    .global-search-results, .modal-content, .popup-content, .profile-stat-list-view,
    .profile-section-dropdown, .profile-gallery-section
) {
    background-color: var(--settings-surface) !important;
    color: var(--settings-text) !important;
    border-color: var(--settings-border) !important;
}
html[data-appearance="night"] .page :is(h2, h3, h4, p, label, legend),
html[data-appearance="night"] .site-language-panel {
    color: var(--settings-text) !important;
}
html[data-appearance="night"] :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    background-color: #15202b !important;
    color: var(--settings-text) !important;
    border-color: var(--settings-border) !important;
}
html[data-appearance="night"] :is(input, textarea)::placeholder { color: #aebdcb !important; opacity: 1; }
html[data-appearance="night"] :is(.finance-card-label, .message-thread-time, .message-empty) {
    color: var(--settings-muted) !important;
}
html[data-appearance="night"] .page a { color: #9bceff; }
html[data-appearance="night"] :is(
    .notification-item, .message-conversation-panel, .message-conversation-header,
    .message-bubble.received, .message-draft-card
) {
    background-color: var(--settings-surface) !important;
    color: var(--settings-text) !important;
    border-color: var(--settings-border) !important;
}
html[data-appearance="night"] .message-bubble.sent {
    background-color: #24445b !important;
    color: #edf2f7 !important;
}
html[data-appearance="night"] .notification-item.unopened { border-left-color: #9bceff !important; }

/* Offer statistics align directly beneath their request counterparts. */
.profile-stats [data-profile-list="offersPosted"] { grid-column: 3; }
.profile-stats [data-profile-list="offersFulfilled"] { grid-column: 4; }
@media (max-width: 700px) {
    .profile-stats [data-profile-list="offersPosted"] { grid-column: 1; }
    .profile-stats [data-profile-list="offersFulfilled"] { grid-column: 2; }
}

.message-thread-summary-right {
    position: relative;
    padding-right: 42px;
}

.message-thread-delete-button {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: #b42332;
    font-size: 24px;
    line-height: 1;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.message-thread-delete-button:hover { background: #b4233215; }
.message-thread-delete-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.message-thread-delete-button:disabled { opacity: .5; cursor: wait; }
html[data-appearance="night"] .message-thread-delete-button { color: #ffadb5; }

.profile-privacy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 12px 0;
}
.profile-privacy-row select { flex: 0 1 240px; width: 100%; }
.profile-privacy-panel > summary { cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); font-weight: 700; }
.profile-stat:disabled { cursor: default; opacity: 1; }
.profile-stat:disabled:hover { transform: none; }

/* Matching closed/down and open/up disclosure arrows. */
.site-language-control > summary,
.profile-privacy-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
}
.site-language-control > summary::-webkit-details-marker,
.profile-privacy-panel > summary::-webkit-details-marker { display: none; }
.site-language-control > summary::marker,
.profile-privacy-panel > summary::marker { content: ""; }
.settings-disclosure-arrow {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 180ms ease;
    pointer-events: none;
}
.site-language-control[open] > summary > .settings-disclosure-arrow,
.profile-privacy-panel[open] > summary > .settings-disclosure-arrow {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .settings-disclosure-arrow { transition: none; }
}

/* Keep active feed filters readable against themed page headers. */
html[data-site-theme] .page > .page-header .feed-title-subtitle {
    color: var(--settings-muted, #52606d) !important;
}

/* Related notifications use the same request blue and offer green as feeds. */
html .notification-item.notification-request {
    background: #DEEFFF !important;
    border-color: rgba(93, 145, 190, .78) !important;
}
html .notification-item.notification-request:hover { background: #D5EAFD !important; }
html .notification-item.notification-offer {
    background: #E0F6E5 !important;
    border-color: rgba(92, 158, 108, .78) !important;
}
html .notification-item.notification-offer:hover { background: #D7F1DD !important; }
html[data-appearance="night"] .notification-item.notification-request {
    background: #203b52 !important;
    border-color: #5d91be !important;
}
html[data-appearance="night"] .notification-item.notification-request:hover { background: #294961 !important; }
html[data-appearance="night"] .notification-item.notification-offer {
    background: #243f30 !important;
    border-color: #5c9e6c !important;
}
html[data-appearance="night"] .notification-item.notification-offer:hover { background: #2d4d3a !important; }
html[data-appearance="night"] .notification-item:is(.notification-request, .notification-offer) .notification-message {
    color: #edf2f7 !important;
}
html[data-appearance="night"] .notification-item:is(.notification-request, .notification-offer) .notification-time {
    color: #b9c6d4 !important;
}

/* A user's selected background follows their profile and contact cards. */
html .profile-card.has-profile-background,
html .profile-stat-contact-row.has-profile-background,
html :is(#contactDirectory, .profile-contact-list) .contact-directory-card.has-profile-background {
    background-color: var(--profile-background-color) !important;
    background-image: var(--profile-background-image) !important;
    background-size: cover !important;
    background-position: var(--profile-background-position, 50% 50%) !important;
    background-repeat: no-repeat !important;
    color: var(--profile-background-text) !important;
}
html .profile-card.has-profile-background :is(h2, h3, p, .profile-username):not(.profile-feed-post-list *),
html .profile-stat-contact-row.has-profile-background .profile-stat-user-card,
html .profile-stat-contact-row.has-profile-background .profile-stat-user-card strong,
html :is(#contactDirectory, .profile-contact-list) .contact-directory-card.has-profile-background :is(h3, p) {
    color: var(--profile-background-text) !important;
    text-shadow: var(--profile-background-text-shadow, none);
}
.profile-background-controls > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 12px;
}
.profile-background-controls > legend + p { clear: both; }
.profile-background-controls > label { display: block; margin: 12px 0; }
.profile-background-controls input[type="file"] { display: block; max-width: 100%; margin-top: 8px; }
.profile-background-position-controls[hidden] { display: none !important; }
.profile-background-position-controls > label { display: block; margin: 12px 0; }
.profile-background-position-controls input[type="range"] {
    display: block;
    width: 100%;
    max-width: 420px;
    margin-top: 8px;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.profile-background-position-stage {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 420px;
    min-width: 0;
    height: clamp(180px, 30vw, 300px);
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 8px;
    background: var(--settings-bg, #eef2f6);
}
.profile-background-position-preview {
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #fff;
    outline: 1px solid #52606d;
    box-shadow: 0 3px 10px #0003;
    background-size: cover;
    background-repeat: no-repeat;
}
.profile-background-position-caption {
    margin: 8px 0 12px;
    font-size: 13px;
}
.profile-background-controls > :is(.profile-background-undo-button, .profile-background-center-button) {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 8px 0;
}
.profile-background-center-button[hidden] { display: none !important; }
.profile-background-controls input[type="color"] {
    width: 60px;
    height: 38px;
    padding: 2px;
    border: 3px solid #52606d !important;
    border-radius: 6px;
    vertical-align: middle;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
html[data-appearance="night"] .profile-background-controls input[type="color"] {
    border-color: #b9c6d4 !important;
}
html .profile-card.has-profile-background .settings-card,
html .profile-card.has-profile-background .settings-card :is(p, label, legend) {
    color: var(--settings-text, #1f2933) !important;
    text-shadow: none;
}
html .profile-card.has-profile-background .profile-stat { color: #1f2933 !important; background: #ffffffe6 !important; }

/* Separate lettering from image detail without affecting text in controls. */
html .profile-card.has-profile-background-image :is(h2, h3, .profile-about > p, .profile-credibility > p):not(.profile-feed-post-list *),
html :is(#contactDirectory, .profile-contact-list) .contact-directory-card.has-profile-background-image :is(h3, p, .contact-transactions-label) {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
/* Keep contact display names and usernames crisp over background images. */
html :is(#contactDirectory, .profile-contact-list) .contact-directory-card.has-profile-background-image .contact-identity-text :is(h3, p, .profile-contact-name) {
    text-shadow: none;
}
html .profile-card.has-profile-background-image .settings-card :is(h2, h3, p) {
    text-shadow: none;
}
html .profile-stat-contact-row.has-profile-background-image .contact-mutual-dropdown:not(.contact-following-dropdown) > :is(summary, button),
html :is(#contactDirectory, .profile-contact-list) .contact-directory-card.has-profile-background-image .contact-mutual-dropdown:not(.contact-following-dropdown) > :is(summary, button) {
    background: #fff !important;
}
html .profile-stat-contact-row.has-profile-background-image .contact-mutual-dropdown:not(.contact-following-dropdown) > :is(summary, button):hover,
html :is(#contactDirectory, .profile-contact-list) .contact-directory-card.has-profile-background-image .contact-mutual-dropdown:not(.contact-following-dropdown) > :is(summary, button):hover {
    background: #fbe9ed !important;
}

.notification-filter { position: relative; margin-left: auto; font-size: 14px; }
.notification-filter > summary {
    display: flex; align-items: center; gap: 8px; list-style: none;
    padding: 8px 12px; border: 1px solid #174a6d;
    border-radius: 7px; background: #1f5f8b;
    color: #ffffff; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.notification-filter > summary:hover { background: #174a6d; }
.notification-filter > summary::-webkit-details-marker { display: none; }
.notification-filter[open] .settings-disclosure-arrow { transform: rotate(180deg); }
.notification-filter-options {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 100;
    width: min(300px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto;
    padding: 6px; border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 8px; background: var(--settings-surface, #fff);
    box-shadow: 0 5px 18px #0003;
}
.notification-filter-options button {
    display: block; width: 100%; padding: 10px; border: 0; border-radius: 5px;
    background: transparent; color: var(--settings-text, #1f2933);
    text-align: start; font: inherit; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.notification-filter-options button:hover { background: var(--settings-background, #eef8f8); }
.notification-filter-options button[aria-pressed="true"] { background: var(--settings-accent, #008b8b); color: #fff; }
.notification-filter :is(summary, button):focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 2px; }

/* Identical dimensions and typography for every page filter toggle. */
.feed-header-filter-button,
.my-posts-filter-button,
.notification-filter > summary {
    box-sizing: border-box !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 88px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-width: 1px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.feed-header-filter-button > span:not(.feed-header-filter-arrow),
.my-posts-filter-button > span:not(.my-posts-filter-arrow) {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    letter-spacing: normal !important;
}
.feed-header-filter-button > .feed-header-filter-arrow,
.my-posts-filter-button > .my-posts-filter-arrow,
.notification-filter > summary > .settings-disclosure-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 11px !important;
    flex: 0 0 11px !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

.notification-filter > summary {
    font-weight: 700 !important;
}

/* Readable Legal, Privacy, and Terms documents. */
.legal-document {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(18px, 4vw, 36px);
    background: var(--settings-surface, #fff);
    color: var(--settings-text, #1f2933);
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.simulated-customer-support {
    margin: 20px;
    padding: 18px 20px;
    border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 10px;
    background: var(--settings-surface, #fff);
    color: var(--settings-text, #1f2933);
}
.simulated-customer-support h3 { margin: 0 0 10px; }
.simulated-customer-support p { margin: 6px 0; }
.legal-document h3 { margin: 26px 0 8px; font-size: 19px; }
#legal .legal-document > .settings-section { padding: 0; overflow: visible; margin: 12px 0; }
.legal-document p { margin: 0 0 16px; }
.legal-document li { margin-bottom: 8px; }
.legal-document .legal-document-status {
    padding: 12px 16px;
    border-left: 4px solid var(--settings-accent, #008b8b);
    background: var(--settings-background, #eef8f8);
    font-size: 14px;
}
.legal-page-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.legal-page-links button, .legal-action-button {
    padding: 10px 14px; border: 1px solid var(--settings-accent, #008b8b);
    border-radius: 7px; background: var(--settings-accent, #008b8b);
    color: #fff; font: inherit; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.legal-page-links button:hover, .legal-action-button:hover { background: var(--settings-accent-dark, #006969); }
.legal-page-links button:focus-visible, .legal-action-button:focus-visible { outline: 2px solid var(--settings-text, #1f2933); outline-offset: 3px; }

/* Assistant launcher stays at the bottom of the legend. */
#mainSidebar { display: flex; flex-direction: column; }
#mainSidebar > nav { flex: 1 0 auto; }
.legend-assistant-footer {
    position: sticky; bottom: 0; flex-shrink: 0; margin-top: 18px;
    padding: 12px 0 4px; background: var(--settings-accent-dark, #006969);
}
#mainSidebar #siteAssistantToggle {
    width: 100%; padding: 12px; border: 0; border-radius: 10px;
    background: #fff; color: #174a6d; font: 700 14px/1.4 Arial, sans-serif;
    display: flex; align-items: center; justify-content: center; gap: 8px; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#siteAssistantPanel {
    position: fixed; inset: auto auto 18px 18px; margin: 0; box-sizing: border-box;
    width: min(380px, calc(100vw - 36px)); max-height: calc(100dvh - 36px);
    padding: 18px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 16px;
    background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933);
    box-shadow: 0 12px 45px #0005; z-index: 10000; overflow-y: auto;
}
#siteAssistantPanel[open] { display: flex; flex-direction: column; gap: 10px; }
.site-assistant-conversation { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; border-radius: 12px; color: #222; }
#siteAssistantPanel > :not(.site-assistant-conversation),
#siteAssistantPanel .site-assistant-suggestions,
#siteAssistantForm { flex-shrink: 0; }
#siteAssistantPanel .site-assistant-suggestions { padding: 0 14px; }
#siteAssistantForm { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px; }
#siteAssistantForm > label[for="siteAssistantQuestion"] { margin-bottom: 0; }
.site-assistant-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.site-assistant-header h2 { font-size: 19px; margin: 0; }
#siteAssistantPanel button {
    padding: 8px 10px; border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 7px; font: inherit; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933);
}
#siteAssistantPanel button:disabled { opacity: .5; cursor: wait; }
#siteAssistantPanel #siteAssistantClear:hover:not(:disabled) {
    background: color-mix(in srgb, var(--settings-surface, #fff) 85%, #000);
}
#siteAssistantMode, .site-assistant-note { font-size: 12px; margin: 0; line-height: 1.5; }
#siteAssistantMode:empty { display: none; }
#siteAssistantAIOption { font-size: 13px; }
#siteAssistantAIOption[hidden] { display: none; }
#siteAssistantLog { box-sizing: border-box; overflow-y: auto; min-height: 0; max-height: none; flex: 1 1 auto; overscroll-behavior: contain; }
.site-assistant-message { margin: 0; flex-shrink: 0; grid-template-columns: minmax(0, 1fr); box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.site-assistant-message p { white-space: pre-wrap; }
.site-assistant-message-author { display: block; margin-bottom: 6px; font-size: 12px; }
.site-assistant-suggestions, .site-assistant-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.site-assistant-suggestions { font-size: 12px; }
.site-assistant-actions { justify-content: space-between; margin-top: 8px; }
#siteAssistantForm > label[for="siteAssistantQuestion"] {
    display: block;
    margin-bottom: 10px;
    line-height: 1.4;
}
#siteAssistantQuestion { display: block; box-sizing: border-box; min-width: 0; max-height: 100px; }
#siteAssistantPanel #siteAssistantSend { padding: 10px 18px; border: none; border-radius: 10px; background: var(--primary, #1f5f8b); color: white; }
#siteAssistantPanel :is(button, textarea, input):focus-visible,
#siteAssistantToggle:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }

/* Expanded settings and inline post messaging. */
.preference-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0; }
.preference-row[hidden] { display: none !important; }
.preference-row > span { flex: 1 1 230px; }
.preference-row > :is(select, input:not([type="checkbox"])) { flex: 0 1 280px; max-width: 100%; padding: 8px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 6px; font: inherit; }
.preference-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--settings-accent, #008b8b); }
.preference-row small { flex-basis: 100%; color: var(--settings-muted, #52606d); line-height: 1.5; }
.preference-row button:disabled { opacity: .65; cursor: not-allowed; }
#expandedSettings .settings-card .settings-card { margin: 20px 0 0; }
.account-settings-dialog { width: min(560px, calc(100vw - 32px)); max-height: 85vh; overflow: auto; padding: 24px; border-radius: 12px; border: 1px solid var(--settings-border); background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933); }
.account-settings-dialog::backdrop { background: #0008; }
.account-settings-dialog label { display: block; margin: 14px 0; }
.account-settings-dialog input { display: block; width: 100%; margin-top: 8px; padding: 10px; }
.account-settings-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; }
.account-settings-dialog button { padding: 10px 14px; margin: 6px; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); }
.post-message-composer {
    flex-basis: 100%;
    margin: 16px 0 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: #FB978B;
    box-shadow: 0 8px 24px rgba(0, 70, 75, .16);
    color: #1f2933;
}
html[data-appearance="night"] .post-message-composer {
    border-color: var(--settings-border);
    background: var(--settings-surface);
    color: var(--settings-text);
}
.post-message-composer[hidden] { display: none !important; }
.feed-post-buyers-panel {
    grid-column: 1 / -1;
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 70, 75, .16);
    overflow-wrap: anywhere;
}
.feed-post-buyers-panel[hidden] { display: none !important; }
.post-response-header > :is(h2, h3) { margin: 0; font-size: 1.17em; overflow-wrap: anywhere; }
.buyers-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.buyers-title-row > h2 { margin: 0; font-size: 1.17em; overflow-wrap: anywhere; }
.buyers-unaccepted-count { font-size: 1.17em; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.buyer-dropdown-item { box-sizing: border-box; min-width: 0; }
.feed-post-buyers-panel .feed-buyers-close-button,
.feed-owner-fulfillments-dropdown .feed-request-fulfillments-close-button { padding: 4px 8px; border-radius: 12px; }
.post-response-close-area { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.posted-fulfillment-dropdown-menu:has(> .post-response-header) { margin-top: 14px !important; padding-block: 0 14px; }
.feed-post-buyers-panel { margin-top: 14px !important; }
.posted-fulfillment-dropdown-menu > .post-response-header { padding-top: 14px; }
.feed-post-buyers-panel > .post-response-header { padding-top: 0; }
.posted-fulfillment-dropdown-item :is(.fulfillment-payment-amount, .fulfillment-submission-message) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.feed-owner-fulfillments-dropdown:has(> .posted-fulfillment-dropdown-menu > .post-response-header) { margin-top: 0 !important; }
.request-actions .feed-post-notifications-button {
    background: #4a748d !important;
    border-color: #4a748d !important;
    color: #fff !important;
}
.request-actions .feed-post-notifications-button:hover {
    background: #3d6176 !important;
    border-color: #3d6176 !important;
}
.feed-post-notifications-button::before {
    content: "🔔";
    color: #FFD166;
    display: inline-block;
    flex: 0 0 auto;
    margin-inline-end: 4px;
}
.feed-post-notifications-button.has-unread::before {
    background: radial-gradient(circle, #ff6b6b 65%, transparent 70%) top right / 6px 6px no-repeat;
}
.post-message-notifications {
    container-type: inline-size;
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 0;
    padding: 0 14px 14px;
    border: 1px solid #4a748d;
    border-radius: 8px;
}
.post-message-notifications[hidden] { display: none !important; }
.post-message-notifications h3 { margin: 0; overflow-wrap: anywhere; }
.post-notifications-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.post-message-notifications > .post-notifications-header,
.post-response-header {
    position: sticky;
    top: 0;
    z-index: 25;
    margin: 0;
    padding: 0 0 8px;
    background-color: inherit;
}
.post-notifications-header > .post-notifications-actions { margin: 0; }
:is(.post-message-notifications, .post-response-header) :is(.post-notifications-close, .post-notifications-mark-read, .feed-buyers-close-button, .feed-request-fulfillments-close-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #4a748d;
    border-radius: 12px;
    background: #4a748d;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
:is(.post-message-notifications, .post-response-header) :is(.post-notifications-close, .post-notifications-mark-read, .feed-buyers-close-button, .feed-request-fulfillments-close-button):hover {
    background: #3d6176;
    border-color: #3d6176;
}
:is(.post-message-notifications, .post-response-header) :is(.post-notifications-close, .post-notifications-mark-read, .feed-buyers-close-button, .feed-request-fulfillments-close-button):focus-visible {
    outline: 2px solid #973D60;
    outline-offset: 3px;
}
.post-message-notifications .notification-item { width: 100%; white-space: normal; }
@container (max-width: 340px) {
    .post-message-notifications .notification-item {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "avatar" "message" "time";
        padding: 12px !important;
        row-gap: 8px;
    }
    .post-message-notifications .notification-user-avatar {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .post-message-notifications :is(.notification-message, .notification-time) {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 480px) {
    :is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column .request-actions .feed-post-notifications-button {
        font-size: 10px !important;
        padding: 6px 4px !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
    .feed-post-notifications-button.has-unread::before { background-image: none; }
}
.post-message-composer label { display: block; font-weight: 600; }
.post-message-composer textarea { display: block; width: 100%; margin: 10px 0; padding: 10px; min-height: 90px; resize: vertical; font: inherit; }
.post-message-composer .settings-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.post-message-composer .settings-inline button,
.post-message-composer .post-message-continue {
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 4px 12px;
    border: 1px solid #ccc;
    border-radius: 999px;
    background: #f5f5f5;
    color: #222;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.post-message-composer .settings-inline button:hover,
.post-message-composer .post-message-continue:hover { background: #e8e8e8; }
.post-message-composer .settings-inline .post-message-close {
    border-color: #a6a6a6;
    background: #d1d1d1;
    color: #262626;
}
.post-message-composer .settings-inline .post-message-close:hover {
    border-color: #8c8c8c;
    background: #b8b8b8;
}
:is(.feed-message-action-button, .profile-message-button, #newMessageButton, .feed-post-notifications-button)[aria-expanded]::after,
.post-message-composer .post-message-close::after {
    content: "▼";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    margin-left: 6px;
    transition: transform 180ms ease;
}
:is(.feed-message-action-button, .profile-message-button, #newMessageButton, .feed-post-notifications-button)[aria-expanded]::after {
    transform: rotate(0deg);
}
:is(.feed-message-action-button, .profile-message-button, #newMessageButton, .feed-post-notifications-button)[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.post-message-composer .post-message-close::after {
    content: "▲";
}
html.user-reduced-motion .feed-message-action-button::after {
    transition: none;
}
html.user-reduced-motion .feed-post-notifications-button::after {
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .feed-post-notifications-button::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
    .feed-message-action-button::after { transition: none; }
}
.post-message-composer .settings-inline button[type="submit"] {
    border-color: #6f5f91;
    background: #6f5f91;
    color: #fff;
}
.post-message-composer .settings-inline button[type="submit"]:hover {
    border-color: #5e507c;
    background: #5e507c;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.settings-skip-link { position: fixed; top: -100px; left: 12px; z-index: 20000; padding: 12px; background: #fff; color: #111; }
.settings-skip-link:focus { top: 12px; }
html[data-text-size="large"] .page :is(p, label, input, textarea, select, button) { font-size: 17px !important; }
html[data-text-size="larger"] .page :is(p, label, input, textarea, select, button) { font-size: 19px !important; }
html.user-reduced-motion *, html.user-reduced-motion *::before, html.user-reduced-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.user-large-buttons :is(button, summary, select, .post-attachment-action) { min-height: 44px !important; min-width: 44px !important; }
html.user-large-buttons :is(.feed-header-filter-button, .my-posts-filter-button, .notification-filter > summary) { height: 44px !important; max-height: none !important; }
html.user-strong-focus :focus { outline: 3px solid #e39c00 !important; outline-offset: 3px !important; }
html.user-high-contrast { --settings-border: #808080; --settings-muted: #222; }
html.user-high-contrast .page :is(p,h2,h3,label,legend) { color: #111 !important; }
html.user-high-contrast .page :is(.settings-card,.profile-card,.profile-section-dropdown,.profile-gallery-section,.request-card,.posted-request-card,.notification-item,.page-header) { background: #fff !important; border: 2px solid #111 !important; color: #111 !important; }
html.user-high-contrast input, html.user-high-contrast textarea, html.user-high-contrast select { color: #111 !important; background: #fff !important; border: 2px solid #111 !important; }

/* Collapsible Settings sections with persistent close controls. */
#expandedSettings .settings-section {
    padding: 0;
    overflow: visible;
    margin: 12px 0;
}
.settings-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 14px 18px;
    margin: 0;
    border-radius: 12px;
    background: var(--settings-surface, #fff);
    color: var(--settings-text, #1f2933);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.settings-section-heading::-webkit-details-marker { display: none; }
.settings-section-heading::marker { content: ''; }
.settings-section[open] > .settings-section-heading,
.settings-section-static > .settings-section-heading {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--settings-surface, #fff);
    background: color-mix(in srgb, var(--settings-surface, #fff) 85%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--settings-border, #cbd5df);
    box-shadow: 0 3px 5px #0001;
}
.settings-section[open] > .settings-section-heading > .settings-disclosure-arrow { transform: rotate(180deg); }
.settings-section-body { padding: 4px 20px 20px; }
.settings-section .settings-section[open] > .settings-section-heading { top: var(--settings-parent-heading-height, 60px); z-index: 9; font-size: 16px; }
:is(#settings, #helpCenter, #legal):has(.settings-section[open], .settings-section-static, .site-backup-panel[open]) > .page-header {
    margin-bottom: 0 !important;
}
:is(#settings, #helpCenter, #legal) :is(.settings-section[open], .settings-section-static) > .settings-section-heading {
    top: calc(-1 * var(--page-content-gap, 16px));
}
:is(#settings, #helpCenter, #legal) .settings-section .settings-section[open] > .settings-section-heading {
    top: calc(var(--settings-parent-heading-height, 60px) - var(--page-content-gap, 16px));
}
#settings .site-backup-panel[open] > #siteBackupTitle {
    position: sticky;
    top: calc(-1 * var(--page-content-gap, 16px));
    z-index: 10;
    background: var(--settings-surface, #fff);
}
.settings-section-heading:focus-visible { outline: 3px solid var(--settings-accent, #008b8b); outline-offset: -3px; }

/* Help pages reuse the Settings disclosure and sticky-heading behavior. */
#helpCenter > .page-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#helpCenter > .page-header > .help-header-contact-button {
    margin-left: auto;
    padding: 10px 14px;
    border: 1px solid var(--settings-accent, #008b8b);
    border-radius: 7px;
    background: var(--settings-accent, #008b8b);
    color: #fff;
    font: inherit;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#helpCenter .help-header-contact-button:hover { background: var(--settings-accent-dark, #006969); }
#helpCenter .help-header-contact-button:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
.help-page-content { max-width: 880px; margin: 0 auto; padding: 20px; line-height: 1.6; }
.help-page-content .settings-section { padding: 0; overflow: visible; margin: 12px 0; }
.help-page-content [hidden] { display: none !important; }
.help-page-content .settings-section-heading { font-size: 18px; }
.help-page-content .settings-section-static > .settings-section-heading { cursor: default; }
#contactSupportFormTitle { position: static; }
#contactSupport > .scroll-area { padding-top: 0; }
#contactSupportSections { padding-top: 16px; }
#contactSupportSections > .settings-section-static { margin-top: 0; }
.help-faq { padding: 14px 0; border-bottom: 1px solid var(--settings-border, #cbd5df); }
.help-faq:last-child { border-bottom: 0; }
.help-faq h3 { margin: 0 0 8px; font-size: 17px; }
.help-faq p { margin: 0 0 10px; white-space: pre-wrap; }
.help-faq small { display: block; margin-bottom: 10px; }
.help-page-content input, .help-page-content textarea, .help-page-content select {
    width: 100%; padding: 10px; margin: 8px 0 16px; border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 7px; font: inherit; background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933);
}
.help-page-content label { display: block; font-weight: 600; }
.help-page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.help-page-content button { padding: 10px 14px; border: 1px solid var(--settings-accent, #008b8b); border-radius: 7px; background: var(--settings-accent, #008b8b); color: #fff; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); font: inherit; }
.help-page-content :is(input,select,textarea,button):focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
#contactSupportForm :is(input,select,textarea) { box-sizing: border-box; }
.report-purpose-note { margin: 20px; line-height: 1.6; }

/* Finance dashboard and receipt views. */
.activity-monitor-content { padding-top: 20px; max-width: 980px; display: grid; gap: 16px; min-width: 0; }
.activity-monitor-content .settings-card { margin: 0; padding: 20px; min-width: 0; }
.activity-monitor-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; min-width: 0; }
.activity-chart-card h3 { margin-top: 0; }
.activity-chart-card { --history-color: var(--settings-accent, #008b8b); }
.activity-chart-card svg:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
.activity-chart-card svg { display: block; width: 100%; height: auto; overflow: visible; }
.activity-chart-grid { stroke: currentColor; opacity: .15; }
.activity-chart-axis { stroke: currentColor; stroke-width: 1; opacity: .65; }
.activity-chart-axis-title { font-weight: 600; }
.activity-chart-label { fill: currentColor; font: 12px sans-serif; }
.activity-chart-line { fill: none; stroke: var(--settings-accent, #008b8b); stroke-width: 2.5; stroke-linejoin: round; }
.activity-chart-dot { fill: var(--settings-accent, #008b8b); }
.activity-chart-counts { max-height: 180px; overflow-y: auto; overscroll-behavior-y: contain; padding-left: 24px; }
.activity-monitor-content p { line-height: 1.5; overflow-wrap: anywhere; }
.activity-monitor-content summary { cursor: var(--ufo-cursor, default); padding-block: 8px; }
#activityMonitor .activity-timestamps-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: max-content;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #FE7D6A;
    border-radius: 12px;
    background: #FE7D6A;
    color: #fff;
    font: inherit;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    list-style: none;
}
#activityMonitor .activity-timestamps-toggle::-webkit-details-marker { display: none; }
#activityMonitor .activity-timestamps-toggle::marker { content: ''; }
#activityMonitor .activity-chart-details[open] > .activity-timestamps-toggle > .settings-disclosure-arrow { transform: rotate(180deg); }
.activity-monitor-content > .activity-monitor-history { padding: 0; overflow: visible; }
.activity-monitor-history > .settings-section-heading { padding: 14px 18px; }
:is(#activityMonitorHistory, #userActivityHistory) > .settings-section-heading { z-index: 20; }
.activity-history-group { min-width: 0; margin-block: 10px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; }
:is(#activityMonitor, #userActivity) .activity-history-group > .settings-section-heading { position: static; min-height: 44px; padding: 10px 12px; font-size: 16px; }
:is(#activityMonitor, #userActivity) .activity-history-group[open] > .settings-section-heading { position: sticky; top: var(--activity-history-sticky-top, 52px); }
:is(#activityMonitor, #userActivity) .activity-history-year[open] > .settings-section-heading { z-index: 19; }
:is(#activityMonitor, #userActivity) .activity-history-month[open] > .settings-section-heading { z-index: 18; }
:is(#activityMonitor, #userActivity) .activity-history-day[open] > .settings-section-heading { z-index: 17; }
.activity-history-group > .settings-section-body { padding: 4px 10px 12px; }
.activity-monitor-overview label { display: block; font-weight: 600; margin-bottom: 8px; }
.activity-monitor-overview select { width: 100%; max-width: 260px; padding: 8px; border-radius: 8px; font: inherit; background: var(--entry-field-background, #F8EEEC); color: var(--entry-field-text, #263238); }
.activity-monitor-search label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.activity-event { padding-block: 16px; border-bottom: 1px solid var(--settings-border, #cbd5df); overflow-wrap: anywhere; }
.activity-event h3 { margin: 0 0 8px; font-size: 16px; }
.activity-event time, .activity-event small { font-size: 13px; }
.activity-monitor-pagination { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 8px; margin-top: 16px; }
.activity-monitor-pagination span { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.activity-monitor-pagination button { grid-column: 2; padding: 8px 12px; border-radius: 8px; font: inherit; cursor: var(--ufo-cursor, default); }
.activity-monitor-pagination button:disabled { opacity: .5; }
.activity-monitor-content :is(button, select, summary):focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
#activityMonitorNav[hidden] { display: none !important; }
#balanceDetails {
    display: block;
    container-type: inline-size;
    container-name: finance-layout;
}
.finance-dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
}
.finance-dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.finance-dashboard-column > .finance-card {
    margin: 0;
    min-width: 0;
}
#balanceDetails .finance-dashboard-column > :is(.rental-management, .shipping-dashboard) {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
}
#balance#balance .finance-card > summary.finance-section-heading {
    min-height: calc(var(--finance-condensed-card-height, 68px) - 2px);
    padding: var(--finance-pending-card-padding, 22px) !important;
    list-style: none;
    border-radius: inherit;
}
.finance-section-heading::-webkit-details-marker { display: none; }
.finance-section-heading::marker { content: ''; }
#balanceDetails .finance-card > .finance-disclosure-body { padding: var(--finance-pending-card-padding, 22px); padding-top: 0; }
#balanceDetails .finance-card[open] > .finance-section-heading > .settings-disclosure-arrow { transform: rotate(180deg); }
.finance-section-heading:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: -3px; }
@container finance-layout (min-width: 816px) {
    .finance-dashboard-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        height: calc(100cqb - 16px);
    }
    .finance-dashboard-column {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        padding-bottom: 20px;
    }
    .finance-dashboard-column > * { flex-shrink: 0; }
}
#balance > .scroll-area > .finance-page-content {
    display: block;
    box-sizing: border-box;
    max-width: none;
    padding-inline: 16px;
}
/* Match Public Feed's gaps without adding margins inside the columns. */
#balanceDetails > .finance-card,
#balance > .scroll-area > .finance-page-content > .finance-card {
    margin: 16px 0;
}
#balanceDetails > .finance-card:first-child,
#balance > .scroll-area > .finance-page-content > .finance-card:first-child {
    margin-top: 0;
}
#balanceDetails > .finance-card:last-child,
#balance > .scroll-area > .finance-page-content > .finance-card:last-child {
    margin-bottom: 0;
}
#balanceDetails .finance-balance-breakdown { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 16px; }
#balanceDetails .finance-balance-breakdown > h3,
#balanceDetails .finance-balance-breakdown > p { grid-column: 1; }
#balanceDetails .finance-balance-breakdown > p {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    overflow-x: visible;
}
#balanceDetails .finance-balance-breakdown .finance-money { display: inline-block; white-space: nowrap; }
#balanceDetails .finance-balance-actions { grid-column: 2; grid-row: 2 / span 3; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: max-content; max-width: 100%; margin: 0; }
#balanceDetails .finance-balance-breakdown > .finance-balance-note { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
#balanceDetails .finance-balance-actions > button {
    width: max-content;
    min-height: 28px;
    margin: 0;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    box-sizing: border-box;
}
#balanceDetails .finance-balance-actions > button:hover {
    background: #006f6f;
    border-color: #006f6f;
}
@container finance-layout (max-width: 420px) {
    #balanceDetails .finance-balance-breakdown { grid-template-columns: minmax(0, 1fr); }
    #balanceDetails .finance-balance-actions { grid-column: 1; grid-row: auto; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
}
html.user-large-buttons #balanceDetails .finance-balance-actions > button { min-height: 44px; }
.finance-history-card { min-width: 0; --history-color: var(--settings-accent, #008b8b); }
/* Lift the card and column above later finance cards while its filter is visible. */
.finance-history-card:has(.finance-history-controls:is(.open, [data-dropdown-motion])),
.finance-dashboard-column:has(.finance-history-controls:is(.open, [data-dropdown-motion])) {
    position: relative;
    z-index: 30;
}
.finance-history-card > p, .finance-history-note { line-height: 1.5; }
.finance-history-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.finance-history-header h3 { margin: 0; }
.finance-history-filter .feed-header-filter-button { margin: 0; }
.finance-history-filter .finance-history-controls {
    width: 330px; max-width: calc(100vw - 64px); box-sizing: border-box; padding: 16px; margin: 0;
    background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933);
    border-color: var(--settings-border, #cbd5df);
}
.finance-history-filter .finance-history-controls.open { display: grid; gap: 10px; }
.finance-history-controls select { width: 100%; min-width: 0; box-sizing: border-box; }
.finance-history-controls select + label { margin-top: 6px; }
.finance-history-controls label, .finance-history-card label { font-weight: 600; }
.finance-history-controls select {
    border: 1px solid var(--settings-border, #cbd5df); border-radius: 8px;
    background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933); font: inherit;
}
.finance-history-legend { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: 20px 0; }
.finance-history-series { display: grid; gap: 8px; }
.finance-history-earnings-label { color: #000; }
.finance-history-series strong { font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.finance-history-gain { color: #16803a; }
.finance-history-loss { color: #bc3434; }
html[data-appearance="night"] .finance-history-gain { color: #65d393; }
html[data-appearance="night"] .finance-history-loss { color: #ff9797; }
.finance-history-chart { min-width: 0; max-width: 100%; margin: 20px 0 12px; }
.finance-history-chart svg { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; }
.finance-history-grid { stroke: var(--settings-text, #1f2933); stroke-opacity: .15; }
.finance-history-zero { stroke-opacity: .4; }
.finance-history-axis { fill: var(--settings-text, #1f2933); font: 13px sans-serif; }
.finance-history-line { stroke: var(--history-color); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.finance-history-area { fill: url(#financeHistoryFill); }
.finance-history-gradient-top { stop-color: var(--history-color); stop-opacity: .22; }
.finance-history-gradient-bottom { stop-color: var(--history-color); stop-opacity: .02; }
.finance-history-marker { stroke: var(--settings-text, #1f2933); stroke-opacity: .5; stroke-dasharray: 4 4; }
.finance-history-dot { fill: var(--history-color); stroke: var(--settings-surface, #fff); stroke-width: 2; }
.finance-history-tooltip { pointer-events: none; }
.finance-history-tooltip rect { fill: var(--settings-surface, #fff); stroke: var(--history-color); stroke-width: 1; }
.finance-history-tooltip text { fill: var(--settings-text, #1f2933); font: 16px sans-serif; }
.finance-history-tooltip .finance-history-tooltip-date { opacity: .75; }
.finance-history-tooltip .finance-history-tooltip-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.finance-history-note { font-size: 13px; opacity: .85; }
.finance-history-empty { padding: 24px 0; line-height: 1.6; }
.finance-history-card :is(select,svg):focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
#balance .finance-transactions-list {
    padding-top: 16px;
}
#balance .finance-transactions-list > :first-child {
    margin-top: 0;
}
.finance-table-wrap { overflow-x: auto; margin: 16px 0; }
.finance-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.finance-table-wrap th, .finance-table-wrap td { text-align: left; padding: 12px; border-bottom: 1px solid #cbd5df; overflow-wrap: anywhere; min-width: 95px; }
.finance-table-wrap :is(th, td),
.finance-table-wrap :is(th, td) * { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; }
.finance-policy-card { min-width: 0; max-width: 100%; }
.finance-policy-table-wrap { min-width: 0; max-width: 100%; }
.finance-policy-table-wrap:focus-visible { outline: 2px solid #3f6f9f; outline-offset: 2px; }
.finance-policy-table caption { margin-bottom: 10px; text-align: left; font-weight: 700; }
.finance-policy-table thead { background: rgba(127, 127, 127, .14); }
.finance-policy-table tbody tr:nth-child(odd) { background: rgba(127, 127, 127, .07); }
.finance-policy-table :is(th, td) { text-align: left; font-variant-numeric: tabular-nums; }
.finance-policy-card p { line-height: 1.5; }
#financeTransactions .finance-page-content { max-width: none; min-width: 0; }
#financeTransactionsDetails,
#financeMarketplaceTable { width: 100%; min-width: 0; }
#financeTransactionsDetails > .finance-card + .finance-card { margin-top: 24px; }
#financeMarketplaceTable :is(th, td) { min-width: 0; padding: 10px 8px; }
#financeMarketplaceTable .finance-table-wrap { max-width: 100%; overflow-x: auto; }
#financeMarketplaceTable table { width: max-content; min-width: 100%; }
#financeTransactions .finance-card { min-width: 0; max-width: 100%; overflow-x: auto; }
#financeTransactions .finance-card > h3 { white-space: nowrap; }
.finance-page-content .finance-open-transaction-button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--settings-accent, #008b8b);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    overflow-wrap: normal;
}
.finance-open-transaction-button:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
.finance-money { color: #16803a; }
.finance-page-content input[type="search"] { width: 100%; padding: 12px; margin: 12px 0; }
.finance-page-content select, .finance-page-content input[type="month"], .finance-page-content input[type="number"] { padding: 10px; max-width: 100%; }
.finance-statement-date { display: inline-flex; align-items: center; gap: 4px; }
.finance-statement-date[hidden] { display: none; }
.finance-statement-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.finance-transaction-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.finance-transaction-pagination[hidden] { display: none; }
.finance-transaction-pagination > span { flex: 1 1 220px; }
.finance-transaction-pagination > button { width: auto; margin: 0; padding: 6px 12px; border-radius: 12px; background: #FE7D6A; color: #1f2933; }
#adminSupportReports[hidden] { display: none !important; }
#adminSupportReportsButton[hidden],
.page button.support-contact-button[hidden] { display: none !important; }
.support-report-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.support-report-pagination > span { flex: 1 1 220px; }
.support-report-pagination > button { width: auto; margin: 0; padding: 6px 12px; border-radius: 12px; background: #FE7D6A; color: #1f2933; }
.admin-support-report { padding: 16px 0; border-bottom: 1px solid rgba(78, 7, 7, .2); overflow-wrap: anywhere; }
.admin-support-report h4 { margin: 0 0 8px; }
.admin-support-report .support-report-message { white-space: pre-wrap; }
.legend-page-search {
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: var(--page-section-gap) 0;
    padding: 0;
}
.legend-page-search label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.legend-page-search input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 8px; background: var(--settings-surface, #fff); color: inherit; font: inherit; }
.legend-page-search input:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 2px; }
.page-search-hidden { display: none !important; }
.finance-statement-date input { padding: 10px; width: calc(4ch + 24px); min-width: calc(4ch + 24px); box-sizing: border-box; font: inherit; text-align: center; }
.finance-statement-date input[maxlength="4"] { width: calc(6ch + 24px); min-width: calc(6ch + 24px); }
.finance-statement-date input:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 2px; }
.finance-page-content button, #financeReceipt button { cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); padding: 10px 14px; border-radius: 8px; margin: 4px; }
.finance-page-content .finance-open-receipt-button,
.finance-page-content .finance-download-statement-button,
#financeReceipt button {
    width: max-content;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #008b8b;
    border-radius: 12px;
    background: #008b8b;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow-wrap: normal;
}
.finance-page-content .finance-open-receipt-button:hover,
.finance-page-content .finance-download-statement-button:hover,
#financeReceipt button:hover { background: #006f6f; border-color: #006f6f; }
html.user-large-buttons .finance-page-content .finance-open-receipt-button,
html.user-large-buttons .finance-page-content .finance-download-statement-button,
html.user-large-buttons #financeReceipt button { min-height: 44px; }
.finance-page-content .finance-download-statement-button:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
#financeReceipt button + button { margin-left: 8px; }
#financeReceipt { max-width: min(700px, 90vw); border: 1px solid #cbd5df; border-radius: 16px; padding: 24px; }
#financeReceipt pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
#financeReceipt::backdrop { background: #0008; }

/* Profile IDs and referral URLs copy directly from their inline link. */
.profile-id-copy-wrap { position: relative; display: inline-block; max-width: 100%; }
html :is(#profile, #profileSettings) :is(button, a).profile-id-copy {
    display: inline; width: auto; min-width: 0; max-width: 100%; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; background-image: none !important; box-shadow: none !important;
    color: inherit !important; font: inherit !important; text-decoration: underline; text-underline-offset: 3px;
    white-space: normal; overflow-wrap: anywhere; cursor: var(--ufo-cursor, pointer);
}
.profile-id-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
html :is(#profile, #profileSettings) button.profile-id-copy-hint {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40;
    margin: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--settings-surface, #fff);
    color: var(--settings-text, #1f2933); box-shadow: 0 3px 12px #0002;
    font: 13px/1.3 Arial, sans-serif; text-shadow: none; white-space: nowrap; pointer-events: auto; cursor: var(--ufo-cursor, pointer);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.profile-id-copy-hint::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
html :is(#profile, #profileSettings) .profile-id-copy-wrap:is(:hover, :focus-within) > .profile-id-copy-hint { opacity: 1; visibility: visible; transform: translateY(0); }
html.user-reduced-motion :is(#profile, #profileSettings) .profile-id-copy-hint { transition: none; }
@media (prefers-reduced-motion: reduce) { html :is(#profile, #profileSettings) .profile-id-copy-hint { transition: none; } }

/* Optional profile details and reputation summaries. */
.profile-detail-card { margin: 18px 0; padding: 20px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 16px; background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933); overflow-wrap: anywhere; }
.profile-detail-card h3 { margin-top: 0; }
.profile-detail-card fieldset { border: 1px solid #cbd5df; border-radius: 8px; margin: 14px 0; }
.profile-detail-card label { display: block; padding: 6px; }
.profile-detail-card button { padding: 10px 14px; border-radius: 8px; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); }
.profile-detail-card article { margin: 12px 0; }

/* Profile sections start collapsed and open independently. */
#profile {
    /* Let sticky section titles follow the content area's scrolling. */
    overflow: visible;
}
#profile > .scroll-area {
    padding-top: 0;
}
#profileContent {
    padding-top: 20px;
}
/* Use Profile's 20px starting inset without stacking wrapper/card margins. */
:is(#settings, #helpCenter, #balance, #legal, #financeMethods, #activityMonitor, #userActivity, #uploads) > .scroll-area {
    padding-top: 0 !important;
}
#settings .site-settings-content,
#helpCenter .help-page-content,
#legal > .scroll-area > .legal-document,
#financeMethods > .scroll-area > .finance-page-content {
    padding-top: 20px;
}
#balance > .scroll-area > .finance-page-content {
    padding-top: 16px;
}
#expandedSettings > .settings-section:first-child,
#helpTopics > .settings-section:first-child,
#legal .legal-document > .settings-section:first-of-type {
    margin-top: 0;
}
.profile-section-dropdown {
    box-sizing: border-box;
    min-width: 0;
    flex-shrink: 0;
    overflow: visible;
    padding-block: 8px;
}
:where(#profileContent) .profile-gallery-section {
    box-sizing: border-box;
    padding: 12px 20px;
}
.profile-section-dropdown > summary {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    list-style: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: inherit;
    background: transparent;
    padding: 8px 0;
}
.profile-section-dropdown > summary::-webkit-details-marker { display: none; }
.profile-section-dropdown > summary::marker { content: ''; }
.profile-section-dropdown > summary:focus-visible {
    outline: 2px solid var(--settings-accent, #008b8b);
    outline-offset: 4px;
    border-radius: 4px;
}
.profile-section-dropdown[open] > summary {
    position: sticky;
    top: 0;
    z-index: 10;
    isolation: isolate;
    margin-bottom: 8px;
    border-bottom: 0;
    background: transparent !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Keep sticky section titles frosted as content scrolls behind them. */
.profile-section-dropdown[open] > summary::before {
    content: '';
    position: absolute;
    inset: 0 -20px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    border-radius: 18px;
    box-shadow: none;
}
html[data-appearance="night"] .profile-section-dropdown[open] > summary::before {
    background: var(--settings-surface, #1d2732);
    background: color-mix(in srgb, var(--settings-surface, #1d2732) 85%, transparent);
}
html.user-high-contrast .profile-section-dropdown[open] > summary::before {
    background: #fff;
}
.profile-section-dropdown[open] > summary > .settings-disclosure-arrow { transform: rotate(180deg); }

.profile-feed-post-list > p {
    margin-inline: 20px;
}

/* Personal referral QR cards and purchase savings. */
.shipping-compose-options, .shipping-checkout { margin: 16px 0; padding: 14px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933); }
.shipping-compose-options legend, .shipping-checkout legend { font-weight: 700; }
.shipping-compose-options .settings-check, .shipping-checkout .settings-check { display: flex; align-items: center; gap: 8px; }
.shipping-compose-options input[type="checkbox"], .shipping-checkout input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.shipping-compose-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.shipping-compose-fields[hidden] { display: none; }
.shipping-compose-fields :is(input, select) { box-sizing: border-box; width: 100%; }
.shipping-shipment-card, .shipping-address-card { min-width: 0; padding: 12px; margin: 12px 0; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; overflow-wrap: anywhere; }
.shipping-shipment-card h3, .shipping-address-card h3 { margin: 0 0 8px; }
.shipping-dashboard [role="status"]:empty { display: none; }
.shipping-dialog { box-sizing: border-box; width: min(740px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 16px; background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933); overflow-wrap: anywhere; }
.shipping-dialog::backdrop { background: #0008; }
.shipping-dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.shipping-dialog-header h2 { margin: 0; font-size: 20px; }
.shipping-dialog button, .shipping-dashboard button { width: max-content; max-width: 100%; padding: 4px 8px; margin: 4px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; font-size: 13px; cursor: var(--ufo-cursor, pointer); }
.shipping-dialog :is(button, input):focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
.shipping-addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.shipping-address-card p { white-space: pre-line; }
.shipping-address-form, .shipping-tracking-form { margin: 16px 0; padding: 14px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; }
.shipping-dialog label { display: block; margin-bottom: 10px; }
.shipping-dialog input { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 8px; background: var(--entry-field-background, #F8EEEC); color: var(--entry-field-text, #263238); font: inherit; }
.profile-account-controls {
    display: flex;
    flex-direction: column;
    gap: var(--profile-container-gap, 16px);
    min-width: 0;
}
.profile-account-controls > .profile-section-dropdown { margin: 0; }
#profileContent > .profile-card,
#profileContent > .profile-section-dropdown,
#profileContent > .profile-gallery-section { margin-block: 0; }
#profileContent > .profile-account-controls { margin-block: 0; }
#profileContent > .profile-card > .profile-section-dropdown,
#profileContent .profile-main-column > .profile-card > .profile-section-dropdown {
    margin-block: var(--profile-container-gap) 0;
}
.referral-rewards-body { padding-top: 4px; padding-bottom: 24px; line-height: 1.5; }
.referral-rewards-body > p:first-child { margin-top: 0; }
#profileContent > .referral-rewards-panel {
    margin-top: 0;
    padding-block: 4px;
}
#profile .referral-rewards-panel > summary {
    min-height: 44px;
    align-items: center;
    padding-block: 8px;
    font-size: 18px;
    line-height: 1.4;
}
#profile .referral-rewards-panel[open] > summary {
    top: calc(-1 * var(--page-content-gap, 16px));
}
.referral-balance { display: block; color: var(--settings-accent, #008b8b); font-size: 1.15rem; }
.referral-reward-totals { margin-block: 16px; }
.referral-qr-actions { display: flex; align-items: center; gap: 16px; min-width: 0; margin: 16px 0; }
.referral-qr { display: block; flex: 0 1 240px; min-width: 0; width: min(240px, 50%); max-width: 240px; height: auto; background: #fff; border-radius: 8px; }
.referral-share-actions { display: flex; flex: 0 1 auto; flex-direction: column; align-items: flex-start; min-width: 0; gap: 8px; }
#profile .referral-share-actions > button {
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    min-height: 28px;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid var(--page-header-button-background, #FB978B);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}
#profile .referral-share-actions > button:focus-visible { outline: 2px solid var(--settings-accent, #008b8b); outline-offset: 3px; }
.referral-signup-banner, .referral-checkout { padding: 14px; margin: 12px 0; border: 1px solid #8dbfba; border-radius: 10px; background: #e8f6f3; color: #173b38; }
.referral-signup-banner button { cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); padding: 6px 10px; border-radius: 8px; }
.referral-checkout > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 700; list-style: none; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); }
.referral-checkout > summary::-webkit-details-marker { display: none; }
.referral-checkout > summary::marker { content: ''; }
.referral-checkout > summary:focus-visible { outline: 3px solid var(--settings-accent, #008b8b); outline-offset: 4px; border-radius: 4px; }
.referral-checkout[open] > summary > .settings-disclosure-arrow { transform: rotate(180deg); }
.referral-checkout[open] > summary { padding-bottom: 12px; border-bottom: 1px solid #8dbfba; }
.referral-checkout label { display: block; }
.referral-checkout select { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; padding: 10px; font: inherit; border-radius: 8px; }
.referral-checkout-total { font-weight: 700; }

/* Payment submission groups referral details and uses the public post actions. */
.offer-fulfillment-form .referral-checkout {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 18px 0;
    padding: 16px;
    border: 2px solid #8dbfba;
    border-radius: 12px;
    background: #e8f6f3;
    color: #222;
}
.offer-fulfillment-form .referral-checkout label { margin: 12px 0; }
.offer-fulfillment-form .referral-checkout small { display: block; line-height: 1.5; }
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons button {
    width: fit-content;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons :is(.offer-payment-cancel-button, .fulfillment-cancel-button) {
    background: #f8d7da;
    border-color: #d98b92;
    color: #842029;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons :is(.offer-payment-cancel-button, .fulfillment-cancel-button):hover:not(:disabled) {
    background: #f1c4c8;
    border-color: #ca737c;
    color: #6f1b23;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons :is(.offer-payment-draft-button, .fulfillment-save-draft-button) {
    background: #8E6F6C;
    border-color: #8E6F6C;
    color: #fff;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons :is(.offer-payment-draft-button, .fulfillment-save-draft-button):hover:not(:disabled) {
    background: #705653;
    border-color: #705653;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons :is(.offer-payment-submit-button, .fulfillment-submit-button) {
    background: #3f7f82 !important;
    border: 1px solid #3f7f82 !important;
    color: #fff !important;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons :is(.offer-payment-submit-button, .fulfillment-submit-button):hover:not(:disabled) {
    background: #356b6e !important;
    border-color: #356b6e !important;
}
:is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons button:focus-visible {
    outline: 2px solid #1f5f8b;
    outline-offset: 3px;
}
html.user-large-buttons :is(.offer-fulfillment-form, .request-fulfillment-form) .fulfill-buttons button { min-height: 44px; }
.referral-existing-notice { margin: 0; padding: 8px 16px; background: #e8f6f3; color: #173b38; }

#contactsGrid[hidden] { display: none !important; }
#contactsFilter .filter-menu-column[hidden] { display: none !important; }
#contactDirectory { padding: 20px; width: 100%; box-sizing: border-box; }
.contact-directory-controls, .contact-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-directory-controls input, .contact-directory-controls select { padding: 10px; max-width: 100%; }
.contact-directory-card label { display: block; margin: 10px 0; }
.contact-directory-card textarea, .contact-directory-card input { display: block; width: 100%; box-sizing: border-box; padding: 10px; }

/* Keep directory tools above two independently scrolling contact columns. */
#contactDirectory { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
#contactDirectory > h3, #contactDirectory > .contact-directory-controls { flex: 0 0 auto; }
#contactDirectory > h3 { margin: 0 0 10px; }
#contactDirectory > .contact-directory-controls { margin-bottom: 12px; }
#contactDirectory > .contact-directory-grid { flex: 1 1 0; height: auto; min-height: 0; }
#contactDirectory .contacts-dual-column-scroll { box-sizing: border-box; overscroll-behavior-y: contain; }
:is(#contactDirectory, .profile-contact-list) .contact-directory-card { flex: 0 0 auto; margin: 0; min-width: 0; box-sizing: border-box; }

/* Inbox tools remain separate from Open / Add Users alignment. */
#inboxToolbar, .inbox-thread-tools, .inbox-message-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; align-items: center; }
#inboxToolbar input { flex: 1; min-width: 140px; }
#inboxToolbar input, #inboxToolbar select, .inbox-thread-tools button, .inbox-message-actions button, .inbox-conversation-info button { padding: 8px 12px; border-radius: 8px; }
.inbox-unread-badge { display: inline-block; padding: 3px 8px; border-radius: 16px; background: #007d87; color: white; font-size: 12px; }
.inbox-unread-badge[hidden] { display: none; }
.inbox-conversation-info, .inbox-request-panel { padding: 14px; border: 1px solid #cbd5df; border-radius: 10px; margin: 10px; }
.inbox-file { display: block; overflow-wrap: anywhere; margin: 8px 0; }
.inbox-media { max-width: 100%; max-height: 240px; object-fit: contain; }
.inbox-message-actions textarea { width: 100%; }
.message-bubble blockquote { margin: 8px 0; padding: 8px; border-left: 3px solid #008b8b; }
.inbox-typing { font-size: 13px; min-height: 1em; }

#publicFeedHeaderFilterMenu { max-width: min(1100px, 94vw); max-height: 75vh; overflow: auto; }
#publicDiscoveryControls { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 12px; min-width: 280px; }
#publicDiscoveryControls input, #publicDiscoveryControls select { padding: 8px; width: 100%; box-sizing: border-box; }
#publicDiscoveryControls input[type="checkbox"] { width: auto; }
#discoveryToolbar { padding: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
#discoveryToolbar input { flex: 1; min-width: 160px; padding: 10px; }
#discoveryToolbar p { flex-basis: 100%; margin: 0; font-size: 13px; }
.discovery-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; font-size: 13px; }
.discovery-card-badges span { padding: 4px 8px; border: 1px solid currentColor; border-radius: 12px; }
.discovery-options { margin: 10px 0; }
.discovery-options button { margin: 6px; padding: 8px; }

#followFeedHeaderFilterMenu { max-width: min(1100px,94vw); max-height: 75vh; overflow: auto; }
#followDiscoveryControls { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; min-width: 280px; }
#followDiscoveryControls input, #followDiscoveryControls select { padding: 8px; width: 100%; box-sizing: border-box; }
#followDiscoveryControls input[type="checkbox"] { width: auto; }
#followActivityIndicator { padding: 14px; }
#followActivityIndicator button, .follow-user-preferences select { padding: 8px; margin: 5px; }
.follow-user-preferences { padding: 10px; }
.follow-user-preferences label { display: block; margin: 8px 0; }
.follow-post-context { font-size: 13px; padding: 8px; }

.follow-status-badge { display: inline-block; padding: 3px 8px; border: 1px solid currentColor; border-radius: 12px; font-weight: 400; }

/* Reveal the existing column without rewrapping or compressing its controls. */
.post-manager-filters { flex-wrap: nowrap; gap: 12px; }
.post-manager-filters > * { flex-shrink: 0; }
.post-manager-filters label { display: flex; flex-direction: column; gap: 6px; }
.post-management { padding: 14px; border: 1px solid #cbd5df; border-radius: 12px; margin-bottom: 14px; }
.post-management button, .post-manager-actions button, .post-management select, .post-management input:not([type="checkbox"]) { padding: 8px; margin: 5px; max-width: 100%; }
.post-management small { display: block; }
.post-preview { max-width: min(700px,90vw); border-radius: 14px; }

.saved-organizer-filters { flex-wrap: wrap; gap: 12px; }
.saved-organizer-filters label { display: flex; flex-direction: column; gap: 6px; }
#savedPostsFilterMenu {
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    flex-wrap: nowrap;
}
#savedPostsFilterMenu > * { flex-shrink: 0; }
.saved-organizer-tools { padding: 14px; margin-bottom: 12px; border: 1px solid #cbd5df; border-radius: 12px; }
.saved-organizer-tools button, .saved-organizer-actions button { padding: 8px 12px; margin: 5px; }
.saved-private-details label { display: block; margin: 10px 0; }
.saved-private-details textarea, .saved-private-details input:not([type="checkbox"]) { display: block; width: 100%; box-sizing: border-box; padding: 8px; }
.saved-organizer-card { margin: 0 0 16px; }

#notificationFilterOptions label { display: flex; flex-direction: column; gap: 6px; margin: 10px; }
#notificationFilterOptions select { padding: 8px; }
.notification-center-item { margin: 12px 0; padding: 10px; border: 1px solid #cbd5df; border-radius: 12px; }
.notification-center-item.priority-0 { border-left: 5px solid #bd6316; }
.notification-center-item.priority-1 { border-left: 4px solid #008b8b; }
.notification-center-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notification-center-actions button { padding: 8px 12px; border-radius: 8px; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); }
.notification-center-actions button:disabled { cursor: not-allowed; opacity: .6; }
.notification-center-item > small { display: block; margin: 8px 0; }

/* Keep ownership borders visible over feed, hover, and theme border rules. */
.profile-feed-post-list .request-card.own-feed-post,
#publicFeed .request-card.own-feed-post,
#followFeedContent .request-card.own-feed-post {
    border: 5px solid #973D60 !important;
}
html[data-appearance="night"] .profile-feed-post-list .request-card.own-feed-post,
html[data-appearance="night"] #publicFeed .request-card.own-feed-post,
html[data-appearance="night"] #followFeedContent .request-card.own-feed-post {
    border-color: #973D60 !important;
}


/* Reuse the site's avatar shapes and saved image framing in Contacts. */
.contact-identity-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.contact-identity-header .contact-profile-avatar { flex-shrink: 0; }
.contact-identity-text { min-width: 0; overflow-wrap: anywhere; }
.contact-identity-text h3, .contact-identity-text p { margin: 4px 0; }

.profile-album-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0; }
.profile-gallery-header:has(.profile-album-selector) { flex-direction: column; align-items: flex-start; gap: 8px; }
.profile-album-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.profile-album-selector select { padding: 8px 12px; max-width: 100%; }
.profile-album-name { box-sizing: border-box; padding: 8px 12px; max-width: 100%; }
.profile-album-controls:empty { display: none; }
/* Reserve a top-right column for the actions instead of placing them below
   the album fields. The photo grid and remaining controls use the full card. */
#profile .own-profile-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 16px;
}
#profile .own-profile-gallery > * { grid-column: 1 / -1; }
#profile .own-profile-gallery > .profile-gallery-header {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin-bottom: 16px;
}
#profile .own-profile-gallery > .profile-gallery-sticky-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
}
.profile-album-controls input, .profile-album-controls select, .profile-album-controls button { padding: 8px 12px; max-width: 100%; }
#profile :is(.profile-gallery-add-button, .profile-gallery-edit-button, .profile-album-controls button) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 4px 8px;
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
html.user-large-buttons #profile :is(.profile-gallery-add-button, .profile-gallery-edit-button, .profile-album-controls button) {
    min-width: 44px !important;
    min-height: 44px !important;
}
.profile-gallery-item[hidden] { display: none !important; }
.profile-gallery-item h4 { margin: 10px 0 6px; overflow-wrap: anywhere; }
.profile-photo-description, .profile-photo-metadata { width: 100%; margin: 8px 0; }
.profile-photo-description summary, .profile-photo-metadata summary { cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); }
.profile-photo-description p { white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-photo-metadata label { display: block; margin: 8px 0; }
.profile-photo-metadata input, .profile-photo-metadata textarea, .profile-photo-metadata select { display: block; width: 100%; box-sizing: border-box; padding: 8px; }
.profile-photo-editor-metadata { min-width: 0; box-sizing: border-box; padding: 12px; border: 1px solid #dddddd; border-radius: 10px; background: #ffffff; color: #222222; }
.profile-photo-editor-metadata legend { padding: 4px 8px; border-radius: 5px; background: #ffffff; color: #222222; font-weight: 600; }
.profile-photo-editor-metadata textarea { resize: vertical; }
.profile-gallery-image-preview-box > .profile-image-adjust-viewport { flex-shrink: 0; }
.profile-gallery-image-preview-box > .profile-image-adjust-buttons { flex-wrap: wrap; }


/* Compact Options buttons in the Public and Follow feeds. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-options-dropdown {
    width: 84px;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-options-toggle {
    width: 84px;
    min-width: 0;
    padding-inline: 8px;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .request-card.has-post-options .request-user {
    padding-right: 96px;
}

/* Reserve a separate lane for Options as feed markers grow. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .request-card.has-post-options
:is(.discovery-card-badges, .follow-post-context) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding-right: 112px;
    white-space: normal;
    overflow-wrap: anywhere;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .discovery-card-badges > span {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .follow-status-badge {
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Keep the mutual relationship directly beneath the post author's name. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .request-user {
    gap: 4px;
}
.post-user-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.post-user-identity .anonymous-name-button {
    max-width: 100%;
    padding: 0 !important;
}

/* Let changing follow and save labels resize smoothly inside their existing buttons. */
:is(.follow-main-button, .profile-follow-button, .save-main-button) > span:first-child {
    display: inline-block;
    overflow: hidden;
    /* Override the important wrapping rules for text inside post cards. */
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Match the global button rule's two-ID specificity before overriding it. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .request-user .anonymous-name-button {
    font-size: 13px !important;
}

html[data-text-size="large"] :is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .request-user .anonymous-name-button {
    font-size: 17px !important;
}

html[data-text-size="larger"] :is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .request-user .anonymous-name-button {
    font-size: 19px !important;
}

.request-user .post-mutual-label {
    color: #D21F3C;
    font-size: 13px;
    font-weight: 600;
    border-color: #D21F3C;
}

.request-user .post-mutual-label,
.request-card .post-credibility-label {
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 12px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.request-card .post-credibility-label[hidden] {
    display: none !important;
}

.transaction-rating-button {
    align-self: flex-start;
    width: fit-content;
    margin: 8px 0;
    padding: 6px 12px;
    border: 1px solid #973D60;
    border-radius: 12px;
    background: #F8EEEC;
    color: #4E0707;
    font: inherit;
    cursor: pointer;
}
.transaction-rating-button:disabled { opacity: .7; cursor: default; }
.transaction-rating-button[hidden] { display: none !important; }
.transaction-rating-form label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.transaction-rating-form :is(select, textarea) { width: 100%; min-width: 0; box-sizing: border-box; }

.compose-post-statistics {
    min-width: 0;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid currentColor;
    border-radius: 12px;
}
.compose-post-statistics legend { font-weight: 600; }
.compose-post-statistics .settings-check { display: flex; align-items: center; gap: 8px; }
.compose-post-statistics input[type="checkbox"] { width: auto; flex: 0 0 auto; }
:is(#requestForm, #offerPostForm) .compose-post-statistics .settings-check { flex-direction: row; }
:is(#requestForm, #offerPostForm) .compose-post-statistics input[type="checkbox"] { width: 18px; }

:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .request-card .post-credibility-label {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    overflow-x: auto;
}

/* Stack header actions beside the title instead of extending the title column. */
html:not(.user-large-buttons) :is(#home, #followFeed) .feed-header-filter-button,
html:not(.user-large-buttons) .global-map-filters > summary {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 4px 10px !important;
}

:is(#home, #followFeed) .feed-header-filter {
    display: grid;
    justify-items: end;
    gap: 4px;
}
:is(#home, #followFeed) .feed-header-filter .feed-refresh-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 8px;
}
#discoveryUpdates:empty {
    display: none;
}

/* Repost is an Edit menu option, beside the existing edit action. */
.post-edit-dropdown { position: relative; width: max-content; max-width: 100%; }
.post-edit-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: max-content; padding: 4px 8px; border: 1px solid #5d6875;
    border-radius: 12px; background: #5d6875; color: #fff;
    font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.4;
    list-style: none; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.post-edit-toggle::-webkit-details-marker { display: none; }
.post-edit-toggle:hover { background-color: #4e5864; }
.post-edit-arrow { font-size: 10px; transition: transform 480ms ease; }
.post-edit-dropdown[open] > .post-edit-toggle .post-edit-arrow { transform: rotate(180deg); }
.post-edit-dropdown > .post-edit-menu {
    position: absolute; top: 100%; right: 0; left: auto;
    display: flex; flex-direction: column; gap: 6px; z-index: 100;
    box-sizing: border-box;
    width: max-content; min-width: 100%;
    max-width: var(--post-edit-menu-available-width, calc(100dvw - 24px));
    margin-top: 6px; padding: 8px;
    transform: translateX(var(--post-edit-menu-shift, 0px));
    overflow-y: auto; scrollbar-gutter: auto;
    border: 1px solid #973D60; border-radius: 12px; background: #F4A384;
}
.post-edit-dropdown:not([open]) > .post-edit-menu { display: none; }
.post-edit-menu > button { width: 100%; margin: 0; text-align: left; }
.post-repost-button { width: auto; margin-top: 0; }

.post-repost-dialog { width: min(540px, 90vw); max-height: 85vh; overflow-y: auto; border-radius: 16px; padding: 24px; }
.post-repost-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.post-repost-dialog label { display: block; margin: 12px 0; }
.post-repost-dialog input:not([type="checkbox"]), .post-repost-dialog textarea, .post-repost-dialog select { display: block; width: 100%; box-sizing: border-box; }
.post-repost-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.post-repost-actions button {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    line-height: 1.4;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.post-repost-actions .repost-publish { background: #3f7f82; border-color: #3f7f82; color: #fff; }
.post-repost-actions .repost-publish:hover { background: #356b6e; border-color: #356b6e; }
.post-repost-actions .repost-edit { background: #5d6875; border-color: #5d6875; color: #fff; }
.post-repost-actions .repost-edit:hover { background: #4e5864; border-color: #4e5864; }
.post-repost-actions .repost-cancel { background: #f8d7da; border-color: #d98b92; color: #842029; }
.post-repost-actions .repost-cancel:hover { background: #f1c4c8; border-color: #ca737c; }
.post-repost-actions button:focus-visible { outline: 2px solid #1f5f8b; outline-offset: 3px; }
.post-repost-actions button:disabled { opacity: .65; cursor: wait; }

.discovery-card-badges .post-updated-label-row {
    flex-basis: 100%;
    min-width: 0;
}
.post-updated-label-row > span {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.request-actions .post-repost-button {
    width: 100%;
    margin-top: 0;
}

/* Match header-to-first-card spacing to the gap between feed cards. */
:is(#home, #followFeed) > .scroll-area {
    padding-top: 16px !important;
    row-gap: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) {
    margin-top: 0;
    padding-top: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) > .request-card {
    margin-top: 0;
    margin-bottom: 16px;
}
#discoveryToolbar {
    padding: 0;
}
#discoveryToolbar:has(#discoveryUpdates:empty) {
    display: none;
}

/* Keep Options and post actions together in a dedicated right column. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    column-gap: 20px;
    align-items: start;
}
.aligned-feed-actions > * { grid-column: 1 / -1; }
.aligned-feed-actions > .feed-post-content { grid-column: 1; grid-row: 1; min-width: 0; }
.aligned-feed-actions > .request-card-body {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
    display: block !important;
    grid-template-columns: none !important;
}
.aligned-feed-actions > .feed-post-action-column {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .post-options-dropdown {
    position: relative;
    top: auto;
    right: auto;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .feed-post-content > :is(.request-user, .discovery-card-badges, .follow-post-context) {
    padding-right: 0;
}
@media (max-width: 800px) {
    :is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions {
        grid-template-columns: minmax(0, 1fr) clamp(95px, 24vw, 125px);
        column-gap: 10px;
    }
}
@media (max-width: 550px) {
    :is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions {
        grid-template-columns: minmax(0, 1fr) clamp(78px, 25vw, 100px);
        column-gap: 7px;
    }
}

/* Compact follow and mutual controls beneath feed usernames. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100%;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .follow-main-button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    border: 1px solid #3f6f9f !important;
    border-radius: 12px !important;
    background: #3f6f9f !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .follow-main-button:hover {
    background: #345e88 !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .post-mutual-label {
    color: #D21F3C !important;
    border-color: #D21F3C !important;
    background: transparent !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .post-mutual-label:hover {
    background: rgb(210 31 60 / 10%) !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .follow-main-button > span {
    font-size: inherit !important;
    font-weight: inherit !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .dropdown-arrow {
    display: none !important;
}

:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-mutual-dropdown .mutual-heart {
    display: inline-block;
    transition: transform 180ms ease;
    transform: rotate(0deg);
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-mutual-label[aria-expanded="true"] .mutual-heart {
    transform: rotate(180deg);
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-mutual-dropdown .unfollow-option {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    border: 1px solid #D21F3C !important;
    border-radius: 12px !important;
    color: #D21F3C !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-mutual-dropdown .unfollow-option:hover {
    background: rgb(210 31 60 / 10%) !important;
}
html.user-reduce-motion .mutual-heart { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .mutual-heart { transition: none !important; }
}

:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .follow-main-button {
    flex-wrap: nowrap !important;
    width: max-content !important;
    flex-shrink: 0 !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow :is(.follow-main-button > span, .unfollow-option) {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    flex-shrink: 0 !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow:not(.post-mutual-dropdown) .follow-main-button.following .dropdown-arrow {
    display: inline-block !important;
    position: static !important;
    transform: rotate(0deg);
    transition: transform 180ms ease;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow:not(.post-mutual-dropdown) [aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .post-profile-follow .dropdown-arrow { transition: none !important; }
}
html.user-reduce-motion .post-profile-follow .dropdown-arrow { transition: none !important; }

/* Label-sized post actions keep the profile-to-content spacing compact. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column button,
:is(#publicFeed#publicFeed, .posted-fulfillment-dropdown-item, .request-card, .uploads-library-card) :is(.fulfillment-message-button, .fulfillment-purchase-button, .fulfillment-follow-button, .fulfillment-follow-control .unfollow-option, .fulfillment-options .post-options-toggle),
:is(#publicFeed#publicFeed, .offer-fulfillment-form) .payment-submissions-button {
    border-radius: 12px !important;
    padding: 4px var(--fulfillment-button-padding, 8px) !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
:is(.fulfillment-message-button, .fulfillment-purchase-button) {
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    border: 1px solid;
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
}

/* Show the optional starfield directly, without a translucent veil. */
html[data-page-background="starfield"] {
    --starfield-image: url("assets/backgrounds/deep-space-starfield.png");
    --scroll-panel-light: var(--starfield-image);
}
html[data-page-background="starfield"] .content-area > .page {
    /* The page frame remains magenta between header and scrolling content. */
    background-image: none !important;
    background-color: #973D60 !important;
}
html[data-page-background="starfield"] .page > .scroll-area {
    background-image: var(--starfield-image) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Solid card surfaces keep text readable over the unfiltered starfield. */
html[data-page-background="starfield"] {
    --starfield-card-surface: var(--settings-surface, #fff);
    --starfield-card-text: var(--settings-text, #1f2933);
}
html[data-page-background="starfield"].user-high-contrast {
    --starfield-card-surface: #fff;
    --starfield-card-text: #111;
}
html[data-page-background="starfield"] :is(
    .request-card,
    .posted-request-card,
    .offer-post-card,
    .notification-item,
    .profile-card,
    .profile-detail-card,
    .profile-section-dropdown,
    .profile-gallery-section,
    .profile-stat-contact-row,
    .balance-card,
    .finance-card,
    .settings-card,
    .settings-section,
    .settings-section-static,
    .simulated-customer-support,
    .legal-document,
    .message-thread-shell,
    .message-draft-card,
    .message-conversation-panel,
    .personal-request-message-card,
    .fulfilled-request-dropdown,
    .fulfilled-request-item,
    .posted-fulfillment-dropdown-item,
    .compose-location-audience,
    .compose-glass-card,
    .price-tier-multiselect,
    .payment-submission-card,
    .site-popup-glass-card,
    .fulfillment-instruction,
    .sign-in-notice
):not(.has-profile-background) {
    background-color: var(--starfield-card-surface) !important;
    color: var(--starfield-card-text) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-page-background="starfield"] #legal > .scroll-area > .legal-document,
html[data-page-background="starfield"] :is(#messages, #messageDrafts, #report, #legal, #privacy, #terms) > .scroll-area > p {
    background-color: var(--starfield-card-surface) !important;
    color: var(--starfield-card-text) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column :is(.save-main-button, .fulfill-main-button) {
    padding-right: 26px !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column,
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column .request-actions {
    gap: 4px !important;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions > .request-card-body {
    margin-top: 0;
}
html.user-large-buttons :is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column button {
    min-height: 44px !important;
}

/* Use equal spacing around the price/purpose badge. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions > .feed-post-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .feed-post-content > .request-user {
    margin-top: 0;
    margin-bottom: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .feed-post-content > :is(.discovery-card-badges, .follow-post-context) {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions > .request-card-body {
    margin-top: 12px;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .post-purpose-badge {
    margin: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .post-reference-title {
    margin-top: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-options-menu .posted-request-status-control,
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-options-menu .posted-request-status-control button {
    width: 100%;
    min-width: 0;
}

/* Equal 12px insets above the status and below the final credibility badge. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions {
    padding-top: 12px;
    padding-bottom: 12px;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions > .feed-post-content {
    justify-content: flex-start;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions > .post-credibility-label {
    grid-column: 1 / -1;
    order: 10;
    margin: 12px 0 0;
}

.compose-location-audience {
    min-width: 0;
    margin: 12px 0;
    padding: 14px;
    border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 12px;
}
:is(#requestForm, #offerPostForm) :is(.compose-location-audience, .compose-glass-card) {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    margin: 12px 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: 0 8px 24px rgba(0, 70, 75, .16), inset 0 1px 0 rgba(255, 255, 255, .65);
    background-clip: padding-box;
}
:is(#requestForm, #offerPostForm) .compose-glass-card > .checkbox-label:last-child { margin-bottom: 0; }
html[data-appearance="night"] :is(#requestForm, #offerPostForm) :is(.compose-location-audience, .compose-glass-card) {
    background-color: color-mix(in srgb, var(--settings-surface, #1d2732) 85%, transparent);
    border-color: rgba(255, 255, 255, .22);
}
html.user-high-contrast :is(#requestForm, #offerPostForm) :is(.compose-location-audience, .compose-glass-card) {
    background: #fff;
    border: 2px solid #111;
    color: #111;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.compose-location-audience > legend {
    float: left;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.compose-location-audience > legend + * { clear: both; }
.compose-location-audience label { display: block; margin-bottom: 12px; }
.compose-location-audience :is(input, select, textarea) { width: 100%; box-sizing: border-box; }
.compose-people-audience textarea { resize: vertical; }
.compose-specific-usernames { margin: 12px 0; }
.compose-specific-usernames > summary {
    font-weight: 600;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.compose-specific-usernames > label { margin-top: 12px; }
.compose-location-audience [hidden] { display: none !important; }
.compose-location-audience small { display: block; line-height: 1.5; }

/* Fit post actions to their labels instead of stretching to the column width. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column .request-actions {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none;
    align-items: flex-end;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column .request-actions > * {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: flex-end;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column .request-actions button {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column .request-actions :is(.save-main-button, .fulfill-main-button):is(:has(.dropdown-arrow:empty), :not(:has(.dropdown-arrow))) {
    padding-right: 8px !important;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions {
    grid-template-columns: minmax(0, 1fr) max-content;
}

/* Match the owner's Fulfillments count control to compact post actions. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-owner-fulfillments-button {
    width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
html.user-large-buttons :is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-owner-fulfillments-button {
    min-height: 44px !important;
}

/* The fulfillment toggle lives in the action column; its list stays full-width. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .feed-owner-fulfillments-dropdown:has(> .posted-fulfillment-dropdown-menu[hidden]:not([data-dropdown-motion])) {
    display: none;
}

/* Let status and posting time labels grow to fit narrow feed columns. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) :is(.post-status-time-label, .follow-status-badge) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
}

/* Keep profile cards compact with labels and actions side by side. */
.profile-feed-post-list .aligned-feed-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 45%);
}
#profile .profile-open-posts { min-width: 0; margin-top: var(--page-content-gap, 16px); }
#profile .profile-open-posts + .profile-open-posts { margin-top: 8px; }
#profile .profile-open-posts > summary { margin: 0; list-style: none; cursor: var(--ufo-cursor, pointer); }
#profile .profile-open-posts > summary::-webkit-details-marker { display: none; }
#profile .profile-open-posts > summary::marker { content: ''; }
#profile .profile-open-posts[open] > summary {
    position: sticky;
    top: calc(-1 * var(--page-content-gap, 16px));
    z-index: 20;
    margin-bottom: 12px;
}
@container profile-layout (min-width: 816px) {
    #profile .profile-main-column .profile-open-posts[open] > summary { top: 0; }
}
#profile .profile-open-posts > .post-purpose-badge { display: inline-flex; align-items: center; gap: 6px; text-shadow: none; }
#profile .profile-open-posts > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.profile-post-arrow { display: inline-block; transform: rotate(0deg); transition: transform var(--legend-close-duration, 480ms) var(--legend-motion-easing, ease); }
.profile-open-posts[open] > summary > .profile-post-arrow { transform: rotate(180deg); transition-duration: var(--legend-open-duration, 480ms); }
html.user-reduced-motion .profile-post-arrow { transition: none; }
@media (prefers-reduced-motion: reduce) { .profile-post-arrow { transition: none; } }
html #profile :is(.profile-open-posts, .profile-relationship-buttons) > .request-post-badge { color: #174f7a !important; }
html #profile :is(.profile-open-posts, .profile-relationship-buttons) > .offer-post-badge { color: #23643a !important; }
html #profile :is(.profile-open-posts, .profile-relationship-buttons) > .profile-photos-badge { background: #eeeeee; color: #373737 !important; border: 1px solid #cccccc; }
#profile .profile-photos-dropdown > .profile-gallery-section { margin: 0; width: 100%; box-sizing: border-box; }
#profile .profile-photos-dropdown .profile-gallery-header > h3 { display: none; }
#profile .profile-photos-dropdown .profile-gallery-sticky-actions { position: static; margin-top: 0; margin-bottom: 12px; }
#profile .profile-open-posts > .profile-feed-post-list { width: 100%; max-width: 100%; }
#profile .profile-open-posts .request-card { box-sizing: border-box; width: 100%; max-width: 100%; color: var(--settings-text, #1f2933); text-shadow: none; }
#profile .profile-open-posts .profile-stat-empty { box-sizing: border-box; max-width: 100%; margin: 0 !important; padding: 0; border: 0; background: transparent; color: inherit; text-shadow: var(--profile-background-text-shadow, none); }

/* Edit notices share the bottom row with credibility, aligned to the right. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-label-footer {
    grid-column: 1 / -1;
    order: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-top: 12px;
    min-width: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-label-footer .post-credibility-label {
    margin: 0;
}
.post-edited-label {
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Match Unfollow to the compact rounded post controls in every follow state. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .unfollow-option {
    width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
html.user-large-buttons :is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .post-profile-follow .unfollow-option {
    min-height: 44px !important;
}

/* Avoid adding the last detail's margin to the 12px credibility-label gap. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .request-information > :nth-last-child(1 of :not([hidden])) {
    margin-bottom: 0;
}

/* Hidden media must not contribute display, height, or margins to card spacing. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions [hidden] {
    display: none !important;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions > .request-card-body,
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .request-information {
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions .request-information > :nth-last-child(1 of :not([hidden])) {
    margin-bottom: 0 !important;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .aligned-feed-actions > :is(.post-credibility-label, .post-label-footer) {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

.compose-calendar-input { cursor: text; }
.compose-calendar-input::-webkit-calendar-picker-indicator { display: none; }
.compose-calendar-dialog { width: min(420px, 90vw); max-height: 85vh; overflow: auto; padding: 20px; border: 1px solid #bbb; border-radius: 12px; }
.compose-calendar-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.compose-calendar-navigation { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.compose-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 12px 0; text-align: center; }
.compose-calendar-grid .compose-calendar-day { width: 100%; min-width: 0; min-height: 34px; padding: 4px; border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #222; }
.compose-calendar-grid .adjacent-month { background: #f1f3f5; color: #58616a; }
.compose-calendar-grid [aria-pressed="true"] { background: #1f5f8b; color: #fff; }
.compose-calendar-day:focus-visible { outline: 2px solid #1f5f8b; outline-offset: 1px; }
.compose-calendar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.compose-calendar-actions button, .compose-calendar-navigation button { width: auto; }

/* Calendar actions match the compact rounded post buttons. */
.compose-calendar-dialog .compose-calendar-actions button {
    width: max-content;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px !important;
    line-height: 1.4;
    white-space: nowrap;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    color: #fff;
}
.compose-calendar-actions .calendar-confirm { background: #3f6f9f; border-color: #3f6f9f; }
.compose-calendar-actions .calendar-confirm:hover { background: #345e88; }
.compose-calendar-actions .calendar-today { background: #6f5f91; border-color: #6f5f91; }
.compose-calendar-actions .calendar-today:hover { background: #574a73; }
.compose-calendar-actions .calendar-clear { background: #8E6F6C; border-color: #8E6F6C; }
.compose-calendar-actions .calendar-clear:hover { background: #705653; }
.compose-calendar-dialog .compose-calendar-actions .calendar-cancel { background: #f8d7da; border-color: #e6aeb3; color: #721c24; }
.compose-calendar-actions .calendar-cancel:hover { background: #edc0c5; }
html.user-large-buttons .compose-calendar-actions button { min-height: 44px; }

.compose-calendar-open-button {
    width: max-content;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid #3f6f9f;
    border-radius: 12px;
    background: #3f6f9f;
    color: #fff;
    line-height: 1.4;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.compose-calendar-open-button:hover { background: #345e88; }
:is(#requestForm, #offerPostForm) .compose-date-segments > .compose-calendar-open-button {
    flex: 0 0 auto;
    margin: 0 0 0 8px;
}

.compose-date-segments { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.compose-date-segments label { flex: 1 1 75px; min-width: 0; }
.compose-date-segments input { display: block; width: 100%; box-sizing: border-box; }
.compose-date-entry > input[hidden] { display: none !important; }
.compose-price-tiers { min-width: 0; }
.compose-price-tiers > small { display: block; margin-block: 12px; line-height: 1.5; }
.compose-price-tier-list { display: grid; gap: 12px; }
.compose-price-tier-row { min-width: 0; margin: 0; }
.rental-price-options { min-width: 0; margin: 12px 0; padding: 12px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; }
.rental-price-options > legend { font-size: 14px; font-weight: 700; }
.rental-price-options .rental-toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.rental-price-options .rental-toggle > input { width: auto !important; flex: 0 0 auto; }
.rental-period-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.rental-period-fields[hidden], .rental-price-options > small[hidden] { display: none !important; }
.rental-period-fields :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; }
.rental-management-list { display: grid; gap: 12px; }
.rental-management-card { min-width: 0; padding: 12px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; overflow-wrap: anywhere; }
:is(#requestForm, #offerPostForm) .compose-price-tier-row label { margin-bottom: 10px; }
.compose-price-tier-row button, .compose-price-tier-add { width: auto; padding: 8px 12px; border-radius: 8px; font: inherit; }
:is(#requestForm, #offerPostForm) .compose-price-tier-row button {
    background-color: #cc4653;
    border-color: #cc4653;
    color: #fff;
}
:is(#requestForm, #offerPostForm) .compose-price-tier-row button:hover {
    background-color: #b93744;
    border-color: #b93744;
}
html :is(#compose, #composePost) .compose-price-tier-add {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 44px; margin-top: 12px; padding: 10px 16px 10px 11px;
    border: 1px solid var(--settings-border, #cbd5df); border-radius: 8px;
    background: var(--entry-field-background, #F8EEEC) !important;
    color: var(--entry-field-text, #263238) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14), 0 1px 0 rgba(255, 255, 255, .5);
    font: inherit; text-align: left;
}
.compose-price-tier-add::after {
    content: ''; flex: 0 0 6px; width: 6px; height: 6px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.post-price-tiers { margin-block: 12px; }
.post-price-tiers-title { font-weight: 600; }
.post-price-tiers ul { padding-left: 20px; margin-block: 8px; }
.post-price-tiers li { overflow-wrap: anywhere; }
.compose-attachment-captions { display: grid; gap: 12px; margin-block: 12px; }
.compose-attachment-captions[hidden] { display: none; }
.compose-add-upload { display: inline-flex; align-items: center; width: auto; margin: 0 0 12px; padding: 8px 12px; border: 1px solid #48AAAD; border-radius: 8px; background-color: #48AAAD; color: #fff; font: inherit; }
.compose-add-upload[hidden], .compose-upload-picker[hidden] { display: none !important; }
.attachment-caption-editor { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; margin: 8px 0; font-size: 13px; }
.attachment-caption-editor > span { overflow-wrap: anywhere; }
.attachment-caption-editor textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 60px; padding: 8px; border: 1px solid #b7aaa8; border-radius: 8px; font: inherit; resize: vertical; background-color: var(--entry-field-background, #F8EEEC); color: var(--entry-field-text, #263238); }
.post-attachment-caption { align-self: stretch; min-width: 0; margin: 8px 12px; font-size: 13px; line-height: 1.5; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.price-tier-selection { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.price-tier-selection select { width: 100%; min-width: 0; padding: 10px; font: inherit; border-radius: 8px; }
.price-tier-selected-price { margin: 0; }
.price-tier-multiselect { margin: 12px 0; padding: 12px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 12px; }
.price-tier-purchase-title { margin: 0; font-weight: 700; }
.offer-fulfillment-form .price-tier-multiselect {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: 0 8px 24px rgba(0, 70, 75, .16), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.offer-fulfillment-form .price-tier-multiselect > .price-tier-purchase-title { margin: 0; }
html[data-appearance="night"] .offer-fulfillment-form .price-tier-multiselect {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}
html.user-high-contrast .offer-fulfillment-form .price-tier-multiselect {
    background: #fff;
    border-color: #111;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.price-tier-purchase-choices { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fulfill-form .price-tier-purchase-choice { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.fulfill-form .price-tier-purchase-choice input { width: auto; flex: 0 0 auto; margin: 0; }
.price-tier-purchase-choice span { min-width: 0; overflow-wrap: anywhere; }

:is(#requestForm, #offerPostForm) .compose-date-entry > span {
    color: var(--text, #1f2933);
    font-weight: 600;
}

/* Present the editable numeric segments as one familiar date/time entry field. */
:is(#requestForm, #offerPostForm) .compose-date-segments {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 11px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: var(--settings-surface, #fff);
    color: var(--settings-text, #222);
    overflow-x: auto;
}
:is(#requestForm, #offerPostForm) .compose-date-segments:focus-within { border-color: #999; }
:is(#requestForm, #offerPostForm) .compose-date-segments .compose-date-segment {
    display: block;
    flex: 0 0 auto;
    width: 2.8ch;
    margin: 0;
    padding: 0;
}
:is(#requestForm, #offerPostForm) .compose-date-segments .compose-date-segment-year { width: 4.8ch; }
:is(#requestForm, #offerPostForm) .compose-date-segments input {
    appearance: textfield;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    text-align: center;
    font: inherit;
}
.compose-date-segments input::-webkit-inner-spin-button,
.compose-date-segments input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.compose-date-separator { white-space: pre; flex: 0 0 auto; }
:is(#requestForm, #offerPostForm) .compose-date-segments .compose-time-period {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 6px;
    padding: 0;
    padding-inline-start: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.post-draft-chooser { width: min(480px, 90vw); max-height: 80vh; overflow: auto; border: 1px solid #bbb; border-radius: 12px; padding: 20px; }
.post-draft-chooser::backdrop { background: rgb(0 0 0 / 40%); }
.post-draft-chooser button { display: block; width: fit-content; max-width: 100%; margin: 8px 0; padding: 4px 8px; border-radius: 12px; overflow-wrap: anywhere; }

.post-draft-dialog { width: min(720px, 90vw); box-sizing: border-box; }
.post-draft-dialog .draft-choice-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 14px 0;
}
.post-draft-dialog .draft-choice-row button { margin: 0; }
.post-draft-dialog .draft-choice-details {
    margin: 0;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(93, 145, 190, 0.78);
    border-radius: 9px;
    background: #DEEFFF;
    color: #222;
}
.post-draft-dialog .draft-choice-details[data-post-purpose="offer"] {
    background: #E0F6E5;
    border-color: rgba(92, 158, 108, 0.78);
}
.draft-choice-details dt { margin-top: 8px; font-weight: 600; }
.draft-choice-details dt:first-child { margin-top: 0; }
.draft-choice-details dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .post-draft-dialog .draft-choice-row { gap: 10px; }
}

/* Draft chooser actions use the post-button palette and compact sizing. */
.post-draft-chooser button {
    width: fit-content;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    line-height: 1.4;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.post-draft-chooser .draft-choice-resume { background: #3f7f82; border-color: #3f7f82; color: #fff; }
.post-draft-chooser .draft-choice-resume:hover { background: #356b6e; border-color: #356b6e; }
.post-draft-chooser .draft-choice-new { background: #70193D; border-color: #70193D; color: #fff; }
.post-draft-chooser .draft-choice-new:hover { background: #55132e; border-color: #55132e; }
.post-draft-chooser .draft-choice-cancel { background: #f8d7da; border-color: #e6aeb3; color: #721c24; }
.post-draft-chooser .draft-choice-cancel:hover { background: #edc0c5; }
html.user-large-buttons .post-draft-chooser button { min-height: 44px; }

.post-draft-dropdown { position: relative; width: max-content; max-width: 100%; }
.post-draft-menu.post-draft-chooser {
    position: static;
    width: max-content;
    max-width: min(300px, 80vw);
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-top: 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.post-draft-menu.post-draft-chooser button { margin: 0; }
.post-draft-menu[hidden] { display: none !important; }
.post-draft-arrow { display: inline-block; margin-left: 6px; transition: transform 180ms ease; }
.post-draft-toggle[aria-expanded="true"] .post-draft-arrow { transform: rotate(180deg); }
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .request-actions .post-draft-menu button {
    max-width: 100% !important;
    white-space: normal !important;
}
html.user-reduced-motion .post-draft-arrow { transition: none; }
@media (prefers-reduced-motion: reduce) { .post-draft-arrow { transition: none; } }

.save-main-button .dropdown-arrow {
    transform: translateY(-50%) rotate(0deg);
    transition: transform 180ms ease;
}
.save-main-button[aria-expanded="true"] .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}
html.user-reduced-motion .save-main-button .dropdown-arrow { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .save-main-button .dropdown-arrow { transition: none; }
}

/* Keep Draft aligned when wider options expand beneath it. */
.post-draft-dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.post-draft-dropdown > .post-draft-toggle {
    align-self: flex-end;
    flex-shrink: 0;
}

.fulfill-main-button .dropdown-arrow {
    transform: translateY(-50%) rotate(0deg);
    transition: transform 180ms ease;
}
.fulfill-main-button[aria-expanded="true"] .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}
html.user-reduced-motion .fulfill-main-button .dropdown-arrow { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .fulfill-main-button .dropdown-arrow { transition: none; }
}

/* =========================================================
   FORCE LEFT LEGEND COLOR
========================================================= */

#mainSidebar.sidebar,
html[data-site-theme] #mainSidebar.sidebar {
    background: #4E0707 !important;
    background-color: #4E0707 !important;
    border-radius: 0 !important;
}

#mainSidebar .dropdown-menu,
html[data-site-theme] #mainSidebar .dropdown-menu {
    background: #4E0707 !important;
    background-color: #4E0707 !important;
}

#mainSidebar .legend-assistant-footer,
html[data-site-theme] #mainSidebar .legend-assistant-footer {
    background: #4E0707 !important;
    background-color: #4E0707 !important;
}

/* =========================================================
   FORCE PAGE HEADER COLOR
========================================================= */

.page > .page-header,
html[data-site-theme] .page > .page-header {
    background: #D6CFC7 !important;
    background-color: #D6CFC7 !important;
    border-radius: 10px !important;
    border-bottom: 0 !important;
    margin-bottom: var(--page-section-gap) !important;
}

/* Rounded content corners reveal the magenta page trim beneath them. */
.page > .scroll-area {
    border-radius: 10px;
}


/* =========================================================
   SELECTED LEGEND TAB COLOR
========================================================= */

#mainSidebar .legend-selected,
html[data-site-theme] #mainSidebar .legend-selected,
#mainSidebar .legend-selected:hover,
html[data-site-theme] #mainSidebar .legend-selected:hover {
    background: #973D60 !important;
    background-color: #973D60 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-color: transparent !important;
    outline: none !important;
}

/* =========================================================
   REMOVE OUTLINE FROM SELECTED NOTIFICATIONS TAB
========================================================= */

#mainSidebar .notifications-main-button.legend-selected,
html[data-site-theme] #mainSidebar .notifications-main-button.legend-selected {
    outline: none !important;
}

/* =========================================================
   SELECTED LEGEND TAB — ROUNDED OPENING AT THE TRIM
========================================================= */

/* Main legend rows */
#mainSidebar
.nav-main-row:has(> .nav-main-button.legend-selected) {

    width: calc(100% + 12px) !important;
    margin-right: -12px !important;

    position: relative !important;
    overflow: visible !important;

    background: #973D60 !important;

    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Match the compact legend's rounding on the selected label as well. */
#mainSidebar .nav-main-button.legend-selected {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* Keep the arrow section part of the magenta opening */
#mainSidebar
.nav-main-row:has(> .nav-main-button.legend-selected)
> .nav-dropdown-toggle {

    background: #973D60 !important;
    background-color: #973D60 !important;

    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* Rounded upper corner EXACTLY where the opening meets the trim */
#mainSidebar
.nav-main-row:has(> .nav-main-button.legend-selected)::before {

    content: "";

    position: absolute;

    right: 0;
    top: -12px;

    width: 12px;
    height: 12px;

    background: transparent;

    border-bottom-right-radius: 12px;

    box-shadow:
        6px 6px 0 6px #973D60;

    pointer-events: none;
}


/* Rounded lower corner EXACTLY where the opening meets the trim */
#mainSidebar
.nav-main-row:has(> .nav-main-button.legend-selected)::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -12px;

    width: 12px;
    height: 12px;

    background: transparent;

    border-top-right-radius: 12px;

    box-shadow:
        6px -6px 0 6px #973D60;

    pointer-events: none;
}


/* =========================================================
   STANDALONE LEGEND TABS — NOTIFICATIONS, ETC.
========================================================= */

#mainSidebar > nav > button.legend-selected,
#mainSidebar .dropdown-menu > button.legend-selected {

    width: calc(100% + 12px) !important;
    margin-right: -12px !important;

    position: relative !important;
    overflow: visible !important;

    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* Upper curve at trim */
#mainSidebar > nav > button.legend-selected::before,
#mainSidebar .dropdown-menu > button.legend-selected::before {

    content: "";

    position: absolute;

    right: 0;
    top: -12px;

    width: 12px;
    height: 12px;

    background: transparent;

    border-bottom-right-radius: 12px;

    box-shadow:
        6px 6px 0 6px #973D60;

    pointer-events: none;
}


/* Lower curve at trim */
#mainSidebar > nav > button.legend-selected::after,
#mainSidebar .dropdown-menu > button.legend-selected::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -12px;

    width: 12px;
    height: 12px;

    background: transparent;

    border-top-right-radius: 12px;

    box-shadow:
        6px -6px 0 6px #973D60;

    pointer-events: none;
}

/* =========================================================
   REMOVE WHITE OUTLINE FROM ALL SELECTED LEGEND TABS
========================================================= */

#mainSidebar .legend-selected,
html[data-site-theme] #mainSidebar .legend-selected,
#mainSidebar .legend-selected:hover,
html[data-site-theme] #mainSidebar .legend-selected:hover {
    outline: none !important;
}

/* =========================================================
   ENTIRE SITE HEADER COLOR
========================================================= */

.top-bar,
html[data-site-theme] .top-bar {
    background: #4E0707 !important;
    background-color: #4E0707 !important;
    border-radius: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Soften the inside join between the header and the legend's brown face.
   Keep this outside the scrolling legend so its edge cannot clip the curve. */
.app-layout {
    --header-legend-curve-radius: 24px;
    --header-legend-curve-left: calc(var(--expanded-legend-width) - var(--legend-border-width));
}
.app-layout.sidebar-hidden {
    --header-legend-curve-left: calc(72px - var(--legend-border-width));
}
.app-layout::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--header-legend-curve-left);
    width: var(--header-legend-curve-radius);
    height: var(--header-legend-curve-radius);
    z-index: 201;
    pointer-events: none;
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--header-legend-curve-radius) - .5px), #4E0707 var(--header-legend-curve-radius));
}

/* Compose keeps its own color; post cards use their purpose colors above. */
:root {
    --compose-request-background: #6693F5;
}

html .top-bar .compose-button,
html .top-bar .compose-button:hover {
    background: var(--compose-request-background) !important;
    box-shadow: none !important;
}

.top-bar .compose-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Compact legend retains navigation while the main content gains space. */
#mainSidebar .compact-legend-icon {
    display: inline-flex;
    color: var(--legend-symbol-color, #FFE082) !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    text-align: center;
}
#mainSidebar .nav-main-button { gap: 8px; }
#mainSidebar #siteAssistantToggle > span { color: #FFE082 !important; }
.app-layout.sidebar-hidden #mainSidebar {
    display: flex !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 62px 6px 12px !important;
    overflow-x: hidden;
    overflow-y: auto;
}
/* Keep the shared responsive page gaps when the legend is collapsed. */
.app-layout.sidebar-hidden .content-area {
    flex: 1 1 0 !important;
    width: auto !important;
    padding-top: var(--page-section-gap) !important;
}
.app-layout.sidebar-hidden .sidebar-toggle-button {
    width: 44px;
    min-width: 44px;
    left: 12px;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-row { width: 100%; }
.app-layout.sidebar-hidden #mainSidebar :is(.dropdown-menu, .nav-dropdown-toggle) { display: none !important; }
.app-layout.sidebar-hidden #mainSidebar .nav-main-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px;
    padding: 8px 0 !important;
    border-radius: 8px !important;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-button > :not(.compact-legend-icon) { display: none !important; }
.app-layout.sidebar-hidden #mainSidebar .compact-legend-icon { display: inline-block !important; }
.app-layout.sidebar-hidden #mainSidebar#mainSidebar :is(.compact-legend-icon, #siteAssistantToggle > span) {
    font-size: 22px !important;
    line-height: 1 !important;
}
.app-layout.sidebar-hidden #mainSidebar .legend-assistant-footer { padding: 12px 0 0; }
.app-layout.sidebar-hidden #mainSidebar#mainSidebar #siteAssistantToggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    border-left: 7px solid transparent !important;
    padding: 8px 0 !important;
    gap: 0;
}
.app-layout.sidebar-hidden #mainSidebar#mainSidebar #siteAssistantToggle[aria-expanded="true"] {
    border-left-color: #4E0707 !important;
}
.app-layout.sidebar-hidden #mainSidebar #siteAssistantToggle > span:not(.legend-opening-surface) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
}
/* Carry the expanded legend's curved opening across the compact 6px inset. */
.app-layout.sidebar-hidden #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected),
.app-layout.sidebar-hidden #mainSidebar > nav > button.legend-selected {
    width: calc(100% + 6px) !important;
    margin-right: -6px !important;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-button.legend-selected {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Legend labels stay on one line at every viewport width. */
#mainSidebar button,
#mainSidebar button span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
#mainSidebar :is(.nav-main-row, .nav-main-button, .notifications-label) {
    flex-wrap: nowrap !important;
}
#mainSidebar .nav-main-button > span:not(.compact-legend-icon),
#mainSidebar .dropdown-menu button {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mainSidebar .compact-legend-icon,
#mainSidebar .nav-dropdown-toggle {
    flex-shrink: 0 !important;
}

/* Reserve the complete count; only the notification title may truncate. */
#mainSidebar .notifications-main-button .notifications-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}
#mainSidebar .notifications-label .notifications-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#mainSidebar .notifications-label :is(.notification-count, .notification-dot) {
    flex-shrink: 0;
    overflow: visible;
}

/* Sidebar counters are text, not empty colored pills. */
#mainSidebar .nav-main-button > .inbox-unread-badge {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #22b8be;
    overflow: visible;
}
#mainSidebar .inbox-unread-badge[hidden],
#mainSidebar .notification-count[hidden],
#mainSidebar .notification-count:not(.visible) {
    display: none !important;
}

.notification-header-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.notification-header-controls .notification-filter { margin: 0; }
#notificationFilter { z-index: 102; }
#notificationOptions { z-index: 101; }
#notificationOptionsMenu {
    width: max-content;
    max-width: calc(100vw - 32px);
    right: 0;
}
#notificationOptionsMenu button {
    text-align: right;
}

/* Per-notification actions stay in a compact, right-aligned dropdown. */
.notification-card-options {
    width: max-content;
    margin: 0 0 8px auto;
}
.notification-card-options .notification-center-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    width: max-content;
    max-width: min(300px, calc(100vw - 64px));
}
.notification-card-options .notification-center-actions button {
    text-align: right;
    overflow-wrap: anywhere;
}

/* Only the notification itself has a card surface; its action header sits inside it. */
#notificationsList .notification-center-item {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#notificationsList > h3 { margin: 4px 0; }
#notificationsList > h3 + .notification-center-item { margin-top: 0; }
#notificationsList .notification-center-item > .notification-item {
    min-height: 132px;
    height: auto;
    margin: 0;
    padding: 12px 16px 16px !important;
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-rows: minmax(50px, auto) auto auto;
    grid-template-areas:
        "avatar ."
        "message message"
        "time time";
    row-gap: 8px;
}
#notificationsList .notification-user-avatar {
    justify-self: start;
    align-self: start;
}
#notificationsList .notification-card-options {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    z-index: 2;
}
#notificationsList .notification-card-options[open] { z-index: 3; }
#notificationsList .notification-item-dot {
    top: 25px;
    right: 112px;
}
#notificationsList .notification-center-item > .notification-item.notification-admin-copy {
    grid-template-rows: minmax(50px, auto) auto auto auto;
    grid-template-areas: "avatar ." "recipient recipient" "message message" "time time";
}
.notification-recipient { grid-area: recipient; margin: 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }

/* Owner management controls share the existing post Options dropdown. */
.post-options-menu.post-management-options {
    width: 280px;
    max-width: calc(100vw - 48px);
    max-height: 65vh;
    overflow-y: auto;
}
.post-management-option-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.post-management-option-controls label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0;
    font-size: 12px;
}
.post-management-option-controls :is(input, select) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 6px;
}

#postedRequestsList .post-management-submissions:empty { display: none; }
#postedRequestsList .post-management-submissions {
    border: 0;
    margin: 0;
    padding: 0;
}
#postedRequestsList .post-management-options .post-management-option-controls button {
    border-radius: 12px !important;
    padding: 4px 8px !important;
    background: #5d6875;
    color: #fff;
}
#postedRequestsList .post-management-options .post-management-option-controls button:hover {
    background: #4e5864;
}

#messages .messages-new-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px;
    height: auto !important;
    padding: 6px 10px;
    border: 1px solid #174a6d;
    border-radius: 7px;
    background: #1f5f8b;
    color: #fff;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#messages .messages-new-button:hover { background: #174a6d; }
#messagesFilterOptions, #uploadsFilterOptions { width: max-content; max-width: calc(100vw - 32px); }
.thread-personal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thread-personal-actions button { width: auto; padding: 6px 10px; border: 1px solid #5d6875; border-radius: 12px; background: #5d6875; color: #fff; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); }
.thread-personal-actions button:hover { background: #4e5864; }
.thread-personal-actions button[data-post-purpose="request"] {
    background: #DEEFFF;
    border-color: rgba(93, 145, 190, 0.78);
    color: #174f7a;
}
.thread-personal-actions button[data-post-purpose="request"]:hover {
    background: #D5EAFD;
}
.thread-personal-actions button[data-post-purpose="offer"] {
    background: #E0F6E5;
    border-color: rgba(92, 158, 108, 0.78);
    color: #23643a;
}
.thread-personal-actions button[data-post-purpose="offer"]:hover {
    background: #D7F1DD;
}
.thread-personal-actions select { max-width: 100%; }

.uploads-page-content { width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 20px 0; min-width: 0; }
.uploads-library-list { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: none; gap: 16px; min-width: 0; }
/* Flatten the groups into the original chronological list on smaller screens. */
.uploads-library-column, .uploads-column-scroll { display: contents; }
.uploads-column-heading, .uploads-column-empty { display: none; }
#uploads > .scroll-area { container: uploads-layout / size; }
@container uploads-layout (min-width: 816px) {
    .uploads-library-list[data-split="true"]:has(> .uploads-library-column) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        height: 100cqb;
    }
    .uploads-library-column {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
    }
    .uploads-column-heading { display: block; margin: 0 0 16px; }
    .uploads-column-scroll {
        display: flex;
        flex-direction: column;
        gap: var(--page-content-gap, 16px);
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
    }
    .uploads-column-scroll > * { flex-shrink: 0; }
    .uploads-column-empty { display: block; margin: 0; }
}
.uploads-library-card { width: 100%; box-sizing: border-box; margin: 0; padding: 16px; overflow-wrap: anywhere; }
.uploads-library-card { container: fulfillment-entry / inline-size; }
.uploads-library-card > h3 { margin: 12px 0; }
.uploads-transaction-identity { flex-wrap: wrap; }
.uploads-recipient-profiles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.uploads-recipient-profiles > span:first-child { font-weight: 600; }
.uploads-library-detail { margin: 8px 0; }
.uploads-price-tiers-detail > span { display: block; white-space: pre-line; margin-top: 4px; }
.uploads-library-card > .stored-fulfillment-media { margin-top: 16px; }
.uploads-library-card .inbox-file { display: block; margin: 12px 0; }
.uploads-library-card .inbox-media { max-width: 100%; max-height: 420px; object-fit: contain; }
/* Fit previews to their media instead of painting a fixed black video frame. */
#uploads .uploads-library-card :is(.stored-fulfillment-media-visual, .inbox-media) {
    display: block;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 420px !important;
    margin-inline: auto;
    background: transparent !important;
    object-fit: contain !important;
}
#uploads .uploads-library-card .stored-fulfillment-media-item {
    min-height: 0;
}
#uploads .uploads-library-card .approved-download-item {
    grid-template-rows: auto auto !important;
    align-content: start;
}
#uploads .uploads-library-card .stored-fulfillment-media {
    align-items: start;
}
#uploads .uploads-library-card .stored-fulfillment-download-link {
    grid-row: 2;
    margin: 8px auto 0 !important;
}

.fulfillment-submission-history { margin: 12px 0; }
:is(.fulfillment-submission-history, .fulfillment-drafts-dropdown) > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: fit-content;
    padding: 10px 18px;
    border: 1px solid var(--primary, #1f5f8b);
    border-radius: 8px;
    background: var(--primary, #1f5f8b);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
:is(.fulfillment-submission-history, .fulfillment-drafts-dropdown) > summary::-webkit-details-marker { display: none; }
:is(.fulfillment-submission-history, .fulfillment-drafts-dropdown) > summary::after { content: '▾'; }
:is(.fulfillment-submission-history, .fulfillment-drafts-dropdown)[open] > summary::after { transform: rotate(180deg); }
.fulfillment-history-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; min-width: 0; }
.fulfillment-history-card { min-width: 0; overflow-wrap: anywhere; }
.fulfillment-history-card p { margin: 8px 0; }
.fulfill-buttons:has(> .fulfillment-drafts-dropdown[open]) { flex-wrap: wrap; align-items: flex-start; }
.fulfillment-drafts-dropdown[open] { flex-basis: 100%; min-width: 0; }
.fulfillment-drafts-dropdown .fulfillment-history-panel > .fulfillment-save-draft-button { align-self: flex-start; }

#messages .personal-message-post-action {
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin-top: 10px;
    padding: 4px 8px;
    border: 1px solid #4f7f62;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
/* Personal request actions have no dropdown arrow to reserve space for. */
#messages .personal-message-post-action.fulfill-main-button {
    padding-right: 8px !important;
}
#messages .personal-message-draft-action { display: block; margin-top: 6px; }
#messages .personal-message-post-action:disabled { opacity: 0.55; cursor: default; }
html.user-large-buttons #messages .personal-message-post-action { min-height: 44px !important; }

.inbox-thread-tools > .inbox-thread-options { margin-left: auto; }
.inbox-thread-options[open] { z-index: 1100; }
.inbox-thread-options-menu {
    width: max-content;
    max-width: calc(100vw - 48px);
}
.inbox-thread-options-menu button { text-align: right; }

/* One continuous thread card includes its Options row. */
#messages .message-thread-shell {
    cursor: inherit;
}
#messages .message-thread-shell:has(> .message-thread-dropdown:not([open])):is(:hover, :focus-within) {
    background: #E98478 !important;
}
/* Keep a prompt row in place so hovering never shifts the threads. */
#messages .message-thread-shell:has(> .message-thread-dropdown:not([open])) > .inbox-thread-meta::after {
    content: "Click to open conversation";
    justify-self: end;
    font-size: 12px;
    font-weight: 600;
    color: #40211e;
    opacity: 0;
    pointer-events: none;
}
#messages .message-thread-shell:has(> .message-thread-dropdown:not([open])):is(:hover, :focus-within) > .inbox-thread-meta::after {
    opacity: 1;
}
:is(#messages .message-thread-shell, #siteAssistantPanel) {
    box-sizing: border-box;
    height: auto;
    background: #FB978B !important;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 70, 75, .16);
}
#messages .inbox-thread-header > .inbox-thread-tools {
    min-height: 0;
    box-sizing: border-box;
}
/* Keep the Messages title in place while its threads scroll beneath it. */
#messages.page.active {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#messages > .page-header {
    flex: 0 0 auto;
}
#messages > .scroll-area {
    --messages-scroll-top-padding: 20px;
    padding-top: var(--messages-scroll-top-padding);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* Keep the title, profile image, and Options visible while a thread scrolls. */
#messages .inbox-thread-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    background: inherit;
    border-radius: 17px 17px 0 0;
}
#messages .message-thread-shell:has(> .message-thread-dropdown[open]) > .inbox-thread-header {
    position: sticky;
    top: calc(-1 * var(--messages-scroll-top-padding));
    z-index: 30;
}
#messages .inbox-thread-close-prompt {
    grid-column: 1 / -1;
    justify-self: end;
    margin: 0 12px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #40211e;
    opacity: 0;
    cursor: inherit;
}
#messages .inbox-thread-close-prompt[hidden] { display: none; }
#messages .inbox-thread-header:is(:hover, :focus-within) .inbox-thread-close-prompt { opacity: 1; }
#messages .message-thread-shell:has(> .message-thread-dropdown[open]) > .inbox-thread-header:is(:hover, :focus-within) {
    background: #E98478;
}
#messages .inbox-thread-identity:focus-visible {
    outline: 2px solid var(--settings-accent, #008b8b);
    outline-offset: 2px;
    border-radius: 8px;
}
#messages .message-thread-shell > .message-thread-dropdown {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
#messages .message-thread-shell .message-thread-summary {
    background: transparent !important;
}

/* Thread identity shares the top row with Options. */
#messages .inbox-thread-tools {
    align-items: flex-start;
    padding: 8px 8px 4px;
    cursor: inherit;
}
#messages .inbox-thread-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 160px;
    min-width: 0;
}
#messages .inbox-thread-identity .message-thread-summary-info {
    flex: 1 1 auto;
    min-width: 0;
}
#messages .inbox-thread-identity .message-thread-avatar { flex-shrink: 0; }
#messages .message-thread-summary-right { padding-right: 0; }
#messages .inbox-thread-options-menu .inbox-delete-thread-option { color: #b42332; }

#messages .inbox-thread-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 12px;
}
#messages .inbox-thread-header-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin: 8px 8px 4px 0;
}
#messages#messages .inbox-thread-header-actions .inbox-thread-options > summary {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border: 1px solid #4f5964 !important;
    border-radius: 12px !important;
    background: #4f5964 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#messages#messages .inbox-thread-header-actions .inbox-thread-options > summary:hover {
    background: #414a54 !important;
    border-color: #414a54 !important;
}
#messages .inbox-thread-header-actions .inbox-thread-options > summary:focus-visible {
    outline: 2px solid var(--settings-accent, #008b8b);
    outline-offset: 2px;
}
html.user-large-buttons #messages#messages .inbox-thread-header-actions .inbox-thread-options > summary {
    min-height: 44px !important;
}
#messages .inbox-thread-meta {
    clear: both;
    display: grid;
    gap: 8px;
    padding: 8px 16px 16px;
}
#messages .inbox-thread-preview {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
#messages .message-thread-shell:has(> .message-thread-dropdown[open]) > .inbox-thread-meta > .inbox-thread-preview {
    display: none;
}
#messages .message-thread-summary[hidden] { display: none !important; }
#messages .message-thread-dropdown[open] + .message-thread-participant-manager {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Keep message actions and attachments from widening the avatar column. */
#messages .message-bubble > * {
    grid-column: 1 / -1;
    min-width: 0;
}
#messages .message-bubble > .message-bubble-avatar {
    grid-column: 1;
}
#messages .message-bubble > .message-bubble-content {
    grid-column: 2;
    overflow-wrap: break-word;
}
#messages .message-bubble {
    min-width: min(320px, 100%);
    box-sizing: border-box;
}
#messages .message-bubble .inbox-message-actions {
    max-width: 100%;
    flex-wrap: wrap;
}

/* Expand editing to the conversation width and reuse the normal composer field. */
#messages .message-conversation-list:has(.message-edit-input) {
    max-height: none;
}
#messages .message-bubble:has(.message-edit-input) {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
}
#messages .inbox-message-actions:has(.message-edit-input) {
    padding-inline: 0;
    scroll-margin-bottom: 16px;
}
#messages .inbox-message-actions .message-edit-input {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Personal request decisions use the compact post action shape and colors. */
#messages .inbox-message-actions :is(.personal-request-accept-button, .personal-request-decline-button, .message-edit-action-button, .message-edit-save-button, .message-edit-cancel-button, .message-delete-action-button) {
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#messages .inbox-message-actions .message-edit-cancel-button {
    background: #5d6875;
    border-color: #5d6875;
}
#messages .inbox-message-actions .message-edit-cancel-button:hover {
    background: #4e5864;
    border-color: #4e5864;
}
#messages .inbox-message-actions .personal-request-accept-button {
    background: #2f7d4a;
    border-color: #2f7d4a;
}
#messages .inbox-message-actions .personal-request-accept-button:hover {
    background: #28683e;
    border-color: #28683e;
}
#messages .inbox-message-actions .personal-request-decline-button {
    background: #b43c3c;
    border-color: #b43c3c;
}
#messages .inbox-message-actions .personal-request-decline-button:hover {
    background: #963232;
    border-color: #963232;
}


.message-pending-attachments:empty { display: none; }
.message-pending-attachment { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 8px; margin: 6px 0; width: 100%; }
.message-pending-attachment > span { min-width: 0; overflow-wrap: anywhere; }
#messages .message-remove-attachment {
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d98b92;
    border-radius: 12px;
    background: #f8d7da;
    color: #842029;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#messages .message-remove-attachment:hover { background: #f1c4c8; }
#messages .message-remove-attachment:disabled { opacity: .6; cursor: wait; }

/* Compact file picker; selected filenames appear in the removable list. */
#messages .message-form > .message-attachment-input[hidden],
#messages .message-form > p:empty { display: none !important; }
#messages .message-form {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
}
#messages .message-choose-files {
    justify-self: start;
    width: auto;
    min-height: 28px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #5d6875;
    border-radius: 12px;
    background: #5d6875;
    color: #fff;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#messages .message-choose-files:hover { background: #4e5864; }
#messages .message-form > p[role="status"] { margin: 0; }

/* Keep the Add Users cancel control clear of the form fields. */
#messages .message-thread-add-users-dropdown {
    padding-top: 42px;
}
#messages .message-add-users-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid #64748b;
    border-radius: 50%;
    background: #526575;
    color: #fff;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#messages .message-add-users-close:hover {
    background: #374957;
}

/* Apply the lighter conversation surface directly, including theme overrides. */
:is(#messages .message-thread-shell, #siteAssistantPanel) .message-thread-conversation {
    background: #FCB1A8 !important;
}
:is(#messages .message-thread-shell, #siteAssistantPanel) .message-thread-conversation > :is(.message-conversation-list, .message-form) {
    background: transparent !important;
}

/* Keep live unread counters beside both icons in the compact legend. */
.app-layout.sidebar-hidden #mainSidebar .nav-main-button {
    gap: 3px;
}
.app-layout.sidebar-hidden #mainSidebar .notifications-main-button > .notifications-label {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: auto;
    gap: 0;
    overflow: visible;
}
.app-layout.sidebar-hidden #mainSidebar .notifications-label :is(.notifications-text, .notification-dot) {
    display: none !important;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-button > .inbox-unread-badge:not([hidden]),
.app-layout.sidebar-hidden #mainSidebar .notification-count.visible:not([hidden]) {
    display: inline-block !important;
    flex: 0 0 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow: visible;
}

/* Related notifications match their post or conversation surface. */
#notificationsList .notification-item.notification-request { background: #DEEFFF !important; }
#notificationsList .notification-item.notification-request:hover { background: #D5EAFD !important; }
#notificationsList .notification-item.notification-offer { background: #E0F6E5 !important; }
#notificationsList .notification-item.notification-offer:hover { background: #D7F1DD !important; }
#notificationsList .notification-item.notification-message-card { background: #FB978B !important; border-color: #dc8278 !important; }
#notificationsList .notification-item.notification-message-card:hover { background: #F58C80 !important; }
#notificationsList .notification-item:is(.notification-request, .notification-offer, .notification-message-card, .notification-follow) { color: #222 !important; opacity: 1 !important; }
#notificationsList .notification-item:is(.notification-request, .notification-offer, .notification-message-card) :is(.notification-message, .notification-time) { color: #222 !important; }

/* Contact filters and sorting share the existing Filters menu. */
#contactsFilter .contacts-filter-menu {
    max-height: 75vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Contact relationships use the same compact red Mutual pill as posts. */
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown { position: relative; width: max-content; margin-top: 4px; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown > :is(summary, button) {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 8px !important;
    border: 1px solid #D21F3C !important;
    border-radius: 12px !important;
    color: #D21F3C !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    list-style: none;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown > summary::-webkit-details-marker { display: none; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown > button { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; background: #fff !important; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown:not([open]) > button,
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown > button[hidden] { display: none !important; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown > :is(summary, button):hover { background: #fbe9ed !important; }
#contactDirectory .mutual-heart { display: inline-block; transition: transform 180ms ease; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown[open] .mutual-heart { transform: rotate(180deg); }
:is(#contactDirectory, .profile-contact-list) .contact-transactions-label {
    display: block;
    color: #111111 !important;
    background: #ff9800 !important;
    text-shadow: none !important;
    width: max-content;
    max-width: 100%;
    margin: 12px 0 0 auto;
    padding: 4px 8px;
    border: 1px solid #ff9800;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.profile-private-contact-details > summary { cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); font-weight: 700; }
.profile-private-contact-details :is(textarea, input) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 6px;
}
.profile-private-contact-details textarea { min-height: 100px; resize: vertical; }

:is(#contactDirectory, .profile-contact-list) .contact-card-header { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
:is(#contactDirectory, .profile-contact-list) .contact-card-header .contact-identity-header { position: relative; min-width: 0; flex: 0 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 4px 0; }
:is(#contactDirectory, .profile-contact-list) .contact-identity-header .contact-profile-avatar { grid-column: 2; grid-row: 1; }
:is(#contactDirectory, .profile-contact-list) .contact-identity-header .contact-identity-text { grid-column: 1 / -1; grid-row: 2; }
:is(#contactDirectory, .profile-contact-list) .contact-card-header .contact-identity-text { flex: 0 1 auto; width: 100%; text-align: center; }
:is(#contactDirectory, .profile-contact-list) .contact-identity-text { min-width: 0; }
:is(#contactDirectory, .profile-contact-list) .contact-directory-card { position: relative; padding-top: 4px; }
:is(#contactDirectory, .profile-contact-list) .contact-identity-header .contact-profile-avatar { align-self: start; }
:is(#contactDirectory, .profile-contact-list) .contact-identity-text :is(h3, p) { margin: 0; }
:is(#contactDirectory, .profile-contact-list) .contact-card-header { padding-left: 0; }
:is(#contactDirectory, .profile-contact-list) .contact-favorite-star {
    position: absolute; top: 0; grid-column: 1; grid-row: 1; justify-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    margin: 0; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: #6f5f91; font-size: 60px;
    line-height: 1; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
:is(#contactDirectory, .profile-contact-list) .contact-favorite-star[aria-pressed="true"] { color: #a66b00; }
:is(#contactDirectory, .profile-contact-list) .contact-favorite-star:hover { background: #eef2f6; }
:is(#contactDirectory, .profile-contact-list) .contact-favorite-star:focus-visible { outline: 2px solid #D21F3C; outline-offset: 2px; }
html.user-large-buttons :is(#contactDirectory, .profile-contact-list) .contact-favorite-star { width: 64px; height: 64px; }
:is(#contactDirectory, .profile-contact-list) .contact-card-options { flex: 0 0 auto; margin: 0; }
:is(#contactDirectory, .profile-contact-list) .contact-card-options > summary {
    width: max-content !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 8px !important;
    border: 1px solid #4f5964 !important;
    border-radius: 12px !important;
    background: #4f5964 !important;
    color: #fff !important;
    line-height: 1.4 !important;
}
:is(#contactDirectory, .profile-contact-list) .contact-card-options > summary:hover { background: #414a54 !important; }
:is(#contactDirectory, .profile-contact-list) .contact-card-options[open] { z-index: 10; }
:is(#contactDirectory, .profile-contact-list) .contact-card-options .notification-filter-options { width: max-content; min-width: 130px; max-width: 220px; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-following-dropdown > :is(summary, button) { border-color: #3f6f9f !important; color: white !important; background: #3f6f9f !important; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-following-dropdown > :is(summary, button):hover { background: #345e88 !important; }

/* Contact options sit at the top right of each identity header. */
:is(#contactDirectory, .profile-contact-list) .contact-identity-text { min-width: 0; flex: 1 1 140px; overflow-wrap: anywhere; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-dropdown { position: relative; align-self: flex-start; margin-left: auto; flex-shrink: 0; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-dropdown > summary {
    list-style: none; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default); padding: 4px 8px; border-radius: 12px;
    border: 1px solid #4f5964; background: #4f5964; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-dropdown > summary::-webkit-details-marker { display: none; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 10;
    min-width: 140px; padding: 6px; border: 1px solid #ccd2d8;
    border-radius: 12px; background: #fff; box-shadow: 0 6px 18px #0002;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-dropdown:not([open]) > .contact-options-menu { display: none; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-menu > button {
    display: block; width: 100%; margin: 0; padding: 8px 10px;
    border: 0; border-radius: 6px; background: #fff; color: #222;
    text-align: left; font-size: 13px; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-menu > button:hover { background: #eef2f6; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-dropdown > summary:focus-visible,
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-menu > button:focus-visible { outline: 2px solid #D21F3C; outline-offset: 2px; }
html.user-large-buttons :is(#contactDirectory, .profile-stat-contact-row) .contact-options-dropdown :is(summary, button) { min-height: 44px; }

/* Stack compact contact actions beneath Options, matching public-feed buttons. */
:is(#contactDirectory, .profile-stat-contact-row) .contact-action-column {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    margin-left: auto; align-self: flex-start; flex: 0 0 auto;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-action-column .contact-quick-actions { margin: 0; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-quick-actions > button {
    display: inline-flex !important; align-items: center; justify-content: center;
    box-sizing: border-box; width: max-content !important; min-width: 0 !important;
    max-width: none !important; height: auto !important; min-height: 0 !important;
    margin: 0 !important; padding: 4px 8px !important;
    border: 1px solid #6f5f91 !important; border-radius: 12px !important;
    background: #6f5f91 !important; color: #fff !important;
    font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important;
    white-space: nowrap; box-shadow: none !important; cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-quick-actions > button:hover { background: #5e507c !important; border-color: #5e507c !important; }
:is(#contactDirectory, .profile-stat-contact-row) .contact-quick-actions > button:focus-visible { outline: 2px solid #D21F3C; outline-offset: 2px; }
html.user-large-buttons :is(#contactDirectory, .profile-stat-contact-row) .contact-quick-actions > button { min-height: 44px !important; }

/* Keep Options aligned with the card's top edge, even with long names. */
:is(#contactDirectory, .profile-contact-list) .contact-card-header { margin-bottom: 12px; }
:is(#contactDirectory, .profile-contact-list) .contact-card-header .contact-identity-header { margin-bottom: 0; }
:is(#contactDirectory, .profile-contact-list) .contact-card-header .contact-action-column { margin-left: 0; }

/* Expand Contacts filters across the header, keeping the menu inside the page. */
#contactsFilter { position: static; }
#contactsFilter .contacts-filter-menu {
    right: 0;
    left: auto;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    container-type: inline-size;
    border-color: #d7d7d7;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
#contactsFilter .filter-menu-columns { grid-template-columns: minmax(0, 1fr); }
#contactsFilter .filter-menu-column + .filter-menu-column {
    padding-left: 0;
    border-left: none;
}
#contactsFilter .filter-menu-column button {
    min-height: 36px;
    padding: 8px 10px;
    white-space: normal;
}
@container (min-width: 440px) {
    #contactsFilter .filter-menu-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #contactsFilter .filter-menu-column + .filter-menu-column {
        padding-left: 12px;
        border-left: 2px solid #8fa3b2;
    }
}
@media (max-width: 600px) {
    #contactsFilter .contacts-filter-menu {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Reveal more profile About text as each contact card gains space. */
:is(#contactDirectory, .profile-contact-list) .contact-directory-card { container-type: inline-size; container-name: contact-card; }
:is(#contactDirectory, .profile-contact-list) .contact-about { display: none; min-width: 0; margin-top: 12px; }
:is(#contactDirectory, .profile-contact-list) .contact-about h4 { margin: 0 0 4px; font-size: 13px; }
:is(#contactDirectory, .profile-contact-list) .contact-about-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
@container contact-card (min-width: 260px) {
    :is(#contactDirectory, .profile-contact-list) .contact-about { display: block; }
}

/* Fit both contact lists within the page and keep controls in one stack. */
#contactDirectory { container-type: inline-size; container-name: contacts-directory; }
#contactDirectory > .contact-directory-grid { min-width: 0; }
#contactDirectory .contacts-dual-column { container-type: inline-size; container-name: contact-column; }
/* Keep the narrow-layout column width when another column becomes available. */
#contactDirectory > .contact-directory-with-suggestions:not(.contact-directory-admin-suggestions) {
    grid-template-columns: repeat(2, minmax(0, 200px));
    gap: 8px;
    justify-content: center;
}
:is(#contactDirectory, .profile-contact-list) .contact-suggestions-column { display: none; }
:is(#contactDirectory, .profile-contact-list) .contact-favorites-column { display: none; }
#contactDirectory > .contact-directory-admin-suggestions { grid-template-columns: minmax(0, 1fr); }
:is(#contactDirectory, .profile-contact-list) .contact-suggestions-column .contacts-dual-column-header h3 {
    white-space: normal;
    overflow-wrap: anywhere;
}
.contact-suggestion-follow {
    width: max-content;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid #3f6f9f;
    border-radius: 12px;
    background: #3f6f9f;
    color: #fff;
    font: inherit;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
@container contacts-directory (min-width: 900px) {
    #contactDirectory > .contact-directory-admin-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #contactDirectory > .contact-directory-admin-suggestions .contact-suggestions-column { display: flex; }
}
/* Three compact 200px columns plus two 16px gaps, measured inside Contacts. */
@container contacts-directory (min-width: 632px) {
    #contactDirectory > .contact-directory-with-suggestions:not(.contact-directory-admin-suggestions) {
        grid-template-columns: repeat(3, minmax(0, 200px));
    }
    #contactDirectory > .contact-directory-with-suggestions:not(.contact-directory-admin-suggestions) .contact-suggestions-column { display: flex; }
}
/* Add Favorites on the left once four compact columns and three gaps fit. */
@container contacts-directory (min-width: 848px) {
    #contactDirectory > .contact-directory-with-suggestions.contact-directory-with-favorites:not(.contact-directory-admin-suggestions) {
        grid-template-columns: repeat(4, minmax(0, 200px));
    }
    #contactDirectory > .contact-directory-with-favorites .contact-favorites-column { display: flex; }
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-action-column {
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-action-column :is(.contact-mutual-dropdown, .contact-options-dropdown, .contact-transactions-label) { margin: 0; }
:is(#contactDirectory, .profile-contact-list) .contact-transactions-label {
    box-sizing: border-box;
    white-space: nowrap;
    overflow-wrap: normal;
}
@container contacts-directory (max-width: 700px) {
    :is(#contactDirectory, .profile-contact-list) .contact-directory-grid { gap: 8px; }
}
/* Card spacing follows each column's width, including compact columns on desktop. */
@container contact-column (max-width: 350px) {
    #contactDirectory .contacts-dual-column-header { padding: 10px 8px; }
    #contactDirectory .contacts-dual-column-header h3 { overflow-wrap: normal; word-break: normal; }
    #contactDirectory .contacts-dual-column-scroll { padding: 6px; scrollbar-gutter: auto; }
    :is(#contactDirectory, .profile-contact-list) .contact-directory-card { padding: 4px 8px 8px; }
    :is(#contactDirectory, .profile-contact-list) .contact-card-header { flex-direction: column; align-items: stretch; margin-bottom: 0; }
    :is(#contactDirectory, .profile-contact-list) .contact-card-header .contact-identity-header {
        flex: 0 1 auto;
        flex-direction: column;
        align-items: start;
        gap: 4px;
    }
    :is(#contactDirectory, .profile-contact-list) .contact-identity-text { flex: 0 1 auto; width: 100%; }
    :is(#contactDirectory, .profile-contact-list) .contact-identity-text :is(h3, p) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    :is(#contactDirectory, .profile-stat-contact-row) .contact-action-column { flex: 0 1 auto; }
    :is(#contactDirectory, .profile-stat-contact-row) .contact-options-menu { right: auto; left: 0; }
}

/* Let contact actions and expanded menus fit the card at every width. */
:is(#contactDirectory, .profile-stat-contact-row) .contact-action-column > *,
:is(#contactDirectory, .profile-stat-contact-row) .contact-quick-actions {
    min-width: 0;
    max-width: 100%;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-action-column :is(button, summary, .contact-transactions-label) {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-options-menu {
    position: static;
    min-width: 0;
    max-width: 100%;
    margin-top: 6px;
}
:is(#contactDirectory, .profile-stat-contact-row) .contact-mutual-dropdown > button {
    position: static;
    display: flex !important;
    margin-top: 4px;
}

/* Bound post controls to their grid track, including profile public posts. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column .request-actions button {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .aligned-feed-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 45%);
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list) .feed-post-action-column :is(.request-actions, .request-actions > *, button, .post-options-dropdown, .post-options-menu) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-label-footer {
    max-width: 100%;
}
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) .post-label-footer > * {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Reserve enough space for the profile post's Fulfillments count. */
.profile-feed-post-list.profile-feed-post-list.profile-feed-post-list .aligned-feed-actions {
    grid-template-columns: minmax(0, 1fr) max-content;
}
.profile-feed-post-list.profile-feed-post-list.profile-feed-post-list .feed-post-action-column .feed-owner-fulfillments-button {
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Profile activity lists reuse the complete Public Feed post cards. */
.profile-feed-post-list .aligned-feed-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 45%);
}
.profile-feed-post-list .feed-post-action-column,
.profile-feed-post-list .feed-post-action-column .request-actions,
.profile-feed-post-list .feed-post-action-column .request-actions > * {
    min-width: 0;
    max-width: 100%;
}
.profile-feed-post-list .feed-post-action-column button,
.profile-feed-post-list .feed-post-action-column summary {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.profile-feed-post-list .discovery-options {
    align-self: flex-start;
}
.profile-feed-post-list .feed-owner-fulfillments-button {
    width: max-content;
    max-width: 100%;
    white-space: normal;
}

/* Five-line descriptions expand in place without changing the saved text. */
p.profile-photo-description { white-space: pre-wrap; }
:is(.description-text, :is(#contactDirectory, .profile-contact-list) .contact-about-text.description-text) {
    display: block;
    line-height: 1.5;
    overflow-wrap: anywhere;
    overflow: visible;
    -webkit-line-clamp: unset;
}
:is(.description-text, :is(#contactDirectory, .profile-contact-list) .contact-about-text.description-text).description-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.description-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 4px 0 8px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    font: inherit;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
html body [data-description-motion] {
    display: block !important;
    box-sizing: border-box !important;
    max-height: none !important;
    overflow: hidden !important;
    -webkit-line-clamp: unset !important;
}
.description-more-toggle[hidden] { display: none !important; }
.description-more-toggle[aria-expanded="true"] .settings-disclosure-arrow { transform: rotate(180deg); }
.description-more-toggle:focus-visible {
    outline: 2px solid var(--settings-accent, #008b8b);
    outline-offset: 2px;
}

/* Profile Settings shares the profile canvas and keeps its back button visible. */
#profileSettings.page.active {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#profileSettings > .scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #F4A384 !important;
    padding-top: 0 !important;
}
.profile-settings-page-content {
    width: 100%;
    /* Scroll the starting inset away before Back sticks against the title. */
    padding-top: 20px;
    min-width: 0;
}
.profile-settings-page-content > .profile-stat-back-button {
    position: sticky !important;
    top: 0;
    left: 0;
    display: block;
    width: fit-content;
    z-index: 30;
    margin: 0 0 16px;
}
#profileSettingsContent {
    display: flex;
    flex-direction: column;
    gap: var(--profile-container-gap, 16px);
    min-width: 0;
    padding-bottom: 20px;
}
#profileSettingsContent .profile-section-dropdown {
    margin-block: 0;
    background: rgba(255, 255, 255, 0.58);
}
/* Back lives in the page header; every settings title can stick at the scroll edge. */
#profileSettingsContent .profile-section-dropdown[open] > summary {
    top: 0;
}
.profile-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}
.profile-settings-actions > .profile-username-editor {
    flex-basis: 100%;
}

/* Keep the UFO visible over clickable controls and their labels. */
button,
button *,
input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]),
label,
label *,
[role="button"],
[role="button"] *,
summary,
summary *,
a,
a *,
[onclick],
[onclick] * {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default) !important;
}

/* Contacts uses summary controls styled as buttons. */
#followList :is(summary, .user-reference-avatar.is-clickable) {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default) !important;
}

#messages .inbox-message-actions .message-delete-action-button {
    background: #b43c3c;
    border-color: #b43c3c;
}
#messages .inbox-message-actions .message-delete-action-button:hover {
    background: #963232;
    border-color: #963232;
}

/* Finance page title layout. */
#balance .finance-title-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: visible; }
#balance .finance-title-header h2 { margin: 0; }

/* Shared previous-page control stays beside the title, outside the scroller. */
.page > .page-header.has-site-page-back { gap: 12px; flex-wrap: wrap; }
.page > .page-header.has-site-page-back > :nth-child(2) { margin-right: auto; min-width: 0; }
#profile > .page-header > .profile-visit-back[hidden] { display: none !important; }
#profile:has(.profile-stat-list-view[data-header-post-list]) > .page-header > .profile-visit-back {
    display: none !important;
}
#profile > .page-header > .profile-stat-header-back { grid-row: 1; }
#profile > .page-header > .profile-stat-header-refresh { grid-row: 2; }
.page > .page-header > .site-page-back,
.profile-stat-list-view > .site-page-back {
    flex: 0 0 auto;
    width: max-content;
    min-height: 28px;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #3f6f9f;
    border-radius: 12px;
    background: #3f6f9f;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.page > .page-header > .site-page-back:hover:not(:disabled),
.profile-stat-list-view > .site-page-back:hover:not(:disabled) { background: #345e88; border-color: #345e88; }
.page > .page-header > .site-page-back:disabled,
.profile-stat-list-view > .site-page-back:disabled { opacity: .5; cursor: default; }
.page > .page-header > .site-page-back:focus-visible,
.profile-stat-list-view > .site-page-back:focus-visible { outline: 2px solid #D21F3C; outline-offset: 3px; }
html.user-large-buttons .page > .page-header > .site-page-back,
html.user-large-buttons .profile-stat-list-view > .site-page-back { min-height: 44px; }

/* Profile follower lists share the Contacts relationship and option controls. */
.profile-stat-contact-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 18px; background: var(--settings-surface, #fff); min-width: 0; }
.profile-stat-contact-row > .profile-stat-user-card { flex: 1 1 180px; width: auto; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.profile-stat-contact-row > .profile-stat-user-card:hover { background: transparent; }
.profile-stat-contact-row .profile-stat-user-card strong { overflow-wrap: anywhere; }
.profile-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 200px));
    justify-content: center;
    align-items: start;
    gap: 8px;
    min-width: 0;
}
.profile-contact-list .profile-stat-contact-row { display: block; padding: 4px 8px 8px; border-radius: 18px; }
.profile-contact-list .profile-contact-name {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.profile-contact-list .profile-contact-name:focus-visible { outline: 2px solid #973D60; outline-offset: 2px; }
.profile-contact-list .contact-card-header .contact-action-column { align-items: flex-start; }
.profile-contact-list .contact-identity-text :is(h3, p) { overflow-wrap: anywhere; }
@media (max-width: 260px) { .profile-contact-list { grid-template-columns: minmax(0, 1fr); } }

/* The search row supplies the shared gap on both sides without doubling it. */
.page > .page-header:has(+ .legend-page-search),
html[data-site-theme] .page > .page-header:has(+ .legend-page-search) {
    margin-bottom: 0 !important;
}

/* Settings, Help, and Legal share the site's peach canvas and glass cards. */
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page {
    color: #1f2933 !important;
}
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page > .scroll-area {
    background-image: none !important;
    background-color: #F4A384 !important;
}
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page :is(.settings-card, .legal-document, .simulated-customer-support) {
    background: rgba(255, 255, 255, 0.58);
    color: #1f2933;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: 0 8px 24px rgba(0, 70, 75, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page .settings-section-heading {
    /* Match the containers' translucent fill and blur scrolling content. */
    background: rgba(255, 255, 255, 0.58);
    color: #1f2933;
    border-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
}
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page .settings-card .settings-card {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page .legal-document-status {
    background: rgba(244, 163, 132, 0.35);
    border-left-color: #973D60;
}
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page :is(.legal-document h3, .simulated-customer-support h3, .settings-card legend, #siteBackupTitle) {
    color: #973D60;
}

/* Legal sections sit directly on the page canvas. */
#legal > .scroll-area > .legal-document,
html[data-page-background="starfield"] #legal > .scroll-area > .legal-document {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Page refresh controls match the compact Back buttons. */
.page > .page-header > .site-page-refresh,
:is(#home, #followFeed) .feed-header-filter .feed-refresh-button {
    flex: 0 0 auto;
    width: max-content;
    min-height: 28px;
    margin: 0 0 0 auto;
    padding: 4px 8px;
    border: 1px solid #3f6f9f;
    border-radius: 12px;
    background: #3f6f9f;
    color: #fff;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.page > .page-header > .site-page-refresh:hover:not(:disabled),
:is(#home, #followFeed) .feed-header-filter .feed-refresh-button:hover:not(:disabled) { background: #345e88; border-color: #345e88; }
.page > .page-header > .site-page-refresh:focus-visible,
:is(#home, #followFeed) .feed-header-filter .feed-refresh-button:focus-visible { outline: 2px solid #D21F3C; outline-offset: 3px; }
.page > .page-header > .site-page-refresh:disabled,
:is(#home, #followFeed) .feed-header-filter .feed-refresh-button:disabled { opacity: .5; cursor: default; }
html.user-large-buttons .page > .page-header > .site-page-refresh,
html.user-large-buttons :is(#home, #followFeed) .feed-header-filter .feed-refresh-button { min-height: 44px; }

/* Match Settings' 20px starting inset at the end of every page. */
.page > .scroll-area {
    padding-bottom: 20px !important;
}
.page > .scroll-area > :nth-last-child(1 of :not([hidden])) {
    margin-bottom: 0 !important;
}
.page > .scroll-area :is(.site-settings-content, .help-page-content, .legal-document, .finance-page-content, .profile-settings-page-content, #profileSettingsContent) {
    padding-bottom: 0;
}
.page > .scroll-area :is(.site-settings-content, .help-page-content, .legal-document, .finance-page-content, .profile-settings-page-content, #profileSettingsContent, #profileContent, #expandedSettings, #helpTopics, #safetyTopics, #publicFeed, #followFeedContent, #postedRequestsList, #fulfilledRequestsList, #requestDraftsList, #savedOffersList, #fulfilledPostsList, #fulfillmentDraftsList, #notificationsList, #messageDraftsList, #contactDirectory, #blockedListContent) > :nth-last-child(1 of :not([hidden])) {
    margin-bottom: 0 !important;
}

/* Ancestor backdrop filters prevent sticky titles from blurring their contents.
   Keep the card fill, and frost the title without stacking another white fill. */
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page .settings-section,
html:not([data-appearance="night"]):not(.user-high-contrast) .page details.launch-section,
html:not([data-appearance="night"]):not(.user-high-contrast) :is(#profileContent, #profileSettingsContent) .profile-section-dropdown {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html:not([data-appearance="night"]):not(.user-high-contrast) .legend-info-page .settings-section-heading,
html:not([data-appearance="night"]):not(.user-high-contrast) .page .launch-section-heading,
html:not([data-appearance="night"]):not(.user-high-contrast) .profile-section-dropdown[open] > summary::before {
    --section-heading-surface: rgba(255, 215, 198, 0.9);
    background: var(--section-heading-surface) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 70, 75, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Settings and Help headings have their own glass fill, including when sticky. */
html[data-page-background="starfield"] .legend-info-page :is(.settings-section, .settings-section-static) > .settings-section-heading,
html[data-page-background="starfield"] .page .launch-section > .launch-section-heading {
    --section-heading-surface: var(--starfield-card-surface);
    background-color: var(--starfield-card-surface) !important;
    color: var(--starfield-card-text) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Space-theme Settings, Help, Legal, and upload filters use solid reading surfaces. */
html[data-page-background="starfield"] #legal .legal-document > .settings-section,
html[data-page-background="starfield"] #legal .legal-document > .settings-section > .settings-section-heading,
html[data-page-background="starfield"] :is(#helpCenter, #settings) .settings-section,
html[data-page-background="starfield"] :is(#helpCenter, #settings) .settings-section > .settings-section-heading,
html[data-page-background="starfield"] #contactSupport .settings-section[aria-labelledby="contactSupportFormTitle"],
html[data-page-background="starfield"] #contactSupport .settings-section[aria-labelledby="contactSupportFormTitle"] > .settings-section-heading,
html[data-page-background="starfield"] #siteBackupSettings > .settings-card,
html[data-page-background="starfield"] #profileContent .profile-section-dropdown.referral-rewards-panel,
html[data-page-background="starfield"] #profileContent .profile-section-dropdown.referral-rewards-panel[open] > summary::before,
html[data-page-background="starfield"] #profileContent:has(.profile-card:not(.own-profile-card)) .profile-detail-card.profile-section-dropdown,
html[data-page-background="starfield"] #profileContent:has(.profile-card:not(.own-profile-card)) .profile-detail-card.profile-section-dropdown[open] > summary::before,
html[data-page-background="starfield"] #profileContent .profile-stat-list-view[data-header-post-list] .profile-stat-empty,
html[data-page-background="starfield"] #uploads .uploads-library-list > .settings-card {
    background: var(--settings-surface, #fff) !important;
    color: var(--settings-text, #1f2933) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Keep page titles on the left and compact header actions stacked on the right. */
.page > .page-header:has(button, summary) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
}
.page > .page-header > :is(h2, .feed-title-group) {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    min-width: 0;
    margin-right: 0 !important;
}
.page > .page-header > :not(h2):not(.feed-title-group) {
    grid-column: 2;
    justify-self: end;
    margin: 0 !important;
}
.page > .page-header :is(.feed-header-filter, .my-posts-filter, .notification-header-controls, .profile-header-settings) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px !important;
    width: max-content;
    margin: 0 !important;
}
/* Use one color for page-header actions, including their hover state. */
.page > .page-header {
    --page-header-button-background: #FE7D6A;
}
#notificationsList .notification-card-options > summary,
#profile#profile#profile#profile .profile-header-settings > button,
#profile#profile#profile#profile .profile-header-settings .profile-follow-container > .profile-follow-button,
.page > .page-header > button,
.page > .page-header :is(.feed-header-filter, .my-posts-filter, .profile-header-settings, .notification-header-controls) > button,
.page > .page-header .notification-filter > summary,
.page > .page-header .profile-header-settings > details > summary,
#profile .profile-avatar-actions > details > summary,
.finance-history-filter > .feed-header-filter-button,
.global-map-filters > summary {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 28px !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border: 1px solid var(--page-header-button-background, #3f6f9f) !important;
    border-radius: 12px !important;
    background: var(--page-header-button-background, #3f6f9f) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    text-align: center;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.page > .page-header :is(.feed-header-filter-button, .my-posts-filter-button) > span,
.finance-history-filter > .feed-header-filter-button > span,
.global-map-filters > summary > span {
    font-size: 12px !important;
    line-height: 1.4 !important;
}
#notificationsList .notification-card-options > summary:hover,
#profile#profile#profile#profile .profile-header-settings > button:hover:not(:disabled),
#profile#profile#profile#profile .profile-header-settings .profile-follow-container > .profile-follow-button:hover:not(:disabled),
.page > .page-header > button:hover:not(:disabled),
.page > .page-header :is(.feed-header-filter, .my-posts-filter, .profile-header-settings, .notification-header-controls) > button:hover:not(:disabled),
.page > .page-header .notification-filter > summary:hover,
.page > .page-header .profile-header-settings > details > summary:hover,
#profile .profile-avatar-actions > details > summary:hover,
.global-map-filters > summary:hover {
    background: var(--page-header-button-background, #345e88) !important;
    border-color: var(--page-header-button-background, #345e88) !important;
}
html.user-large-buttons #notificationsList .notification-card-options > summary,
html.user-large-buttons #profile#profile#profile#profile .profile-header-settings > button,
html.user-large-buttons #profile#profile#profile#profile .profile-header-settings .profile-follow-container > .profile-follow-button,
html.user-large-buttons .page > .page-header > button,
html.user-large-buttons .page > .page-header :is(.feed-header-filter, .my-posts-filter, .profile-header-settings, .notification-header-controls) > button,
html.user-large-buttons .page > .page-header .notification-filter > summary,
html.user-large-buttons .page > .page-header .profile-header-settings > details > summary,
html.user-large-buttons #profile .profile-avatar-actions > details > summary,
html.user-large-buttons .global-map-filters > summary {
    min-height: 44px !important;
}

#profile .profile-header-settings .profile-follow-button > span { font-size: inherit !important; font-weight: inherit !important; }
#profile .profile-header-settings .profile-unfollow-option { height: auto; min-height: 28px; padding: 4px 8px; font-size: 12px; border-radius: 12px; }

/* Keep the selected opening soft in both expanded and compact legends. */
.app-layout:not(.sidebar-hidden) #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected),
.app-layout:not(.sidebar-hidden) #mainSidebar > nav > button.legend-selected,
.app-layout:not(.sidebar-hidden) #mainSidebar .dropdown-menu > button.legend-selected {
    /* Match the 2px sidebar inset so the opening's curves remain visible. */
    width: calc(100% + 2px) !important;
    margin-right: -2px !important;
}
.app-layout #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected),
.app-layout #mainSidebar > nav > button.legend-selected,
.app-layout #mainSidebar .dropdown-menu > button.legend-selected {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}
.app-layout #mainSidebar .nav-main-row > .nav-main-button.legend-selected {
    /* Inset the inner curve by the selected row's 7px left border. */
    border-top-left-radius: 13px !important;
    border-bottom-left-radius: 13px !important;
}
.app-layout #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected)::before,
.app-layout #mainSidebar > nav > button.legend-selected::before,
.app-layout #mainSidebar .dropdown-menu > button.legend-selected::before {
    top: -24px;
    width: 24px;
    height: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 12px 12px 0 12px #973D60;
}
.app-layout #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected)::after,
.app-layout #mainSidebar > nav > button.legend-selected::after,
.app-layout #mainSidebar .dropdown-menu > button.legend-selected::after {
    bottom: -24px;
    width: 24px;
    height: 24px;
    border-top-right-radius: 24px;
    box-shadow: 12px -12px 0 12px #973D60;
}

/* A compact expanded legend keeps complete labels visible on narrow screens. */
.app-layout { --expanded-legend-width: 156px; }
.app-layout:not(.sidebar-hidden) #mainSidebar {
    flex: 0 0 var(--expanded-legend-width) !important;
    width: var(--expanded-legend-width) !important;
    min-width: var(--expanded-legend-width) !important;
    max-width: var(--expanded-legend-width) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.app-layout:not(.sidebar-hidden) #mainSidebar > nav {
    width: auto !important;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .nav-main-button {
    gap: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .compact-legend-icon {
    flex-basis: 16px;
    width: 16px;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .nav-dropdown-toggle {
    flex: 0 0 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .dropdown-menu {
    padding-left: 2px !important;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .dropdown-menu button {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.app-layout:not(.sidebar-hidden) #mainSidebar :is(.nav-main-button > span:not(.compact-legend-icon), .notifications-text, .dropdown-menu button) {
    overflow: visible;
    text-overflow: clip;
}
.app-layout:not(.sidebar-hidden) #mainSidebar #siteAssistantToggle {
    font-size: 12px;
    padding: 10px 2px;
    gap: 2px;
    justify-content: flex-start;
    text-align: left;
}
.app-layout:not(.sidebar-hidden) #mainSidebar #siteAssistantToggle > span:not(.legend-opening-surface) {
    display: inline-flex;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
}

/* Match the assistant launcher to the legend and open its trim while chatting. */
#mainSidebar .legend-assistant-footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
#mainSidebar #siteAssistantToggle,
html[data-site-theme] #mainSidebar #siteAssistantToggle {
    position: relative;
    isolation: isolate;
    border-radius: 20px 0 0 20px;
    margin-bottom: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #fff !important;
    overflow: visible;
}
#mainSidebar #siteAssistantToggle:focus-visible {
    outline: 2px solid #FFE082 !important;
    outline-offset: -3px;
}
.app-layout:not(.sidebar-hidden) #mainSidebar#mainSidebar#mainSidebar#mainSidebar :is(.nav-main-button, .nav-main-button span, .dropdown-menu button, .dropdown-menu button span) {
    font-size: 13px !important;
}
/* Keep the count beside the title instead of stretching it to the row's edge. */
.app-layout:not(.sidebar-hidden) #mainSidebar .notifications-main-button .notifications-label {
    flex: 0 0 auto;
    gap: 2px;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .notifications-label .notifications-text {
    flex: 0 0 auto;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .notification-count {
    margin: 0;
    padding: 0;
    min-width: 0;
}
@media (max-width: 800px) {
    .app-layout { --expanded-legend-width: 148px; }
    .app-layout:not(.sidebar-hidden) #mainSidebar#mainSidebar#mainSidebar#mainSidebar :is(.nav-main-button, .nav-main-button span, .dropdown-menu button, .dropdown-menu button span) {
        font-size: 12px !important;
    }
}

/* Mirror the legend opening at the left edge for the collapse/expand control. */
.app-layout { --sidebar-control-edge-gap: 20px; }
.app-layout #mainSidebar,
.app-layout.sidebar-hidden #mainSidebar {
    padding-top: 76px !important;
    /* Match the space above the sidebar toggle below the assistant launcher. */
    padding-bottom: var(--sidebar-control-edge-gap) !important;
}

/* Reserve the closed edge before selection so clicking never squeezes content. */
#mainSidebar .nav-main-row,
#mainSidebar > nav > .nav-main-button,
#mainSidebar .dropdown-menu > button,
#mainSidebar #siteAssistantToggle {
    border-left: 7px solid transparent !important;
}

/* A thicker legend-colored edge closes each selected opening. */
#mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected),
#mainSidebar > nav > button.legend-selected,
#mainSidebar .dropdown-menu > button.legend-selected,
#mainSidebar #siteAssistantToggle[aria-expanded="true"],
html[data-site-theme] #mainSidebar #siteAssistantToggle[aria-expanded="true"] {
    border-left: 7px solid #4E0707 !important;
    box-sizing: border-box;
}
.app-layout #sidebarToggleButton {
    position: absolute;
    top: var(--sidebar-control-edge-gap);
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mirror the selected legend's 2px inset inside the sidebar's 4px trim. */
    width: calc(var(--expanded-legend-width) - 6px);
    min-width: 0;
    height: 38px;
    min-height: 38px;
    padding: 0 8px;
    border: 0;
    /* Match the selected legend's closed-edge thickness. */
    border-right: 7px solid #4E0707 !important;
    border-radius: 0 20px 20px 0;
    box-sizing: border-box;
    background: #973D60;
    color: #fff;
    box-shadow: none;
    font-size: 12px !important;
    line-height: 1;
    overflow: visible;
    transition: width 180ms ease;
    /* Keep a crisp lower edge as scrolling tabs pass behind the full curve. */
    filter: drop-shadow(0 2px 0 #4E0707);
}
/* The compact legend has a 6px inset inside the same 4px trim. */
.app-layout.sidebar-hidden #sidebarToggleButton { width: 62px; }
.app-layout #sidebarToggleButton { gap: 6px; }
.app-layout #sidebarToggleButton > .sidebar-toggle-arrow {
    position: relative;
    z-index: 1;
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    line-height: 1.3;
}
.app-layout #sidebarToggleButton > .sidebar-toggle-label {
    position: relative;
    z-index: 1;
    min-width: 0;
    white-space: nowrap;
    line-height: 1.3;
}
.app-layout.sidebar-hidden #sidebarToggleButton > .sidebar-toggle-label { display: none; }
.app-layout #sidebarToggleButton::before,
.app-layout #sidebarToggleButton::after {
    content: "";
    position: absolute;
    /* Keep the decorative curves behind the arrow and label. */
    z-index: -1;
    left: 0;
    width: 20px;
    height: 20px;
    background: transparent;
    pointer-events: none;
}
.app-layout #sidebarToggleButton::before {
    top: -20px;
    border-bottom-left-radius: 20px;
    box-shadow: -10px 10px 0 10px #973D60;
}
.app-layout #sidebarToggleButton::after {
    bottom: -20px;
    border-top-left-radius: 20px;
    box-shadow: -10px -10px 0 10px #973D60;
}
.app-layout #sidebarToggleButton#sidebarToggleButton:hover { filter: drop-shadow(0 2px 0 #4E0707) brightness(0.9); }
.app-layout #sidebarToggleButton:focus-visible { outline: 3px solid #FFE082; outline-offset: -3px; }
html.user-reduced-motion .app-layout #sidebarToggleButton { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .app-layout #sidebarToggleButton { transition: none; }
}

/* Keep legend width independent of usernames and allow long labels to scroll. */
.app-layout:not(.sidebar-hidden) #mainSidebar,
.app-layout.sidebar-hidden #mainSidebar {
    flex: 0 0 auto !important;
    width: var(--expanded-legend-width) !important;
    min-width: 0 !important;
    max-width: none !important;
}
.app-layout.sidebar-hidden #mainSidebar {
    width: 72px !important;
}
.app-layout:not(.sidebar-hidden) #mainSidebar > nav,
.app-layout.sidebar-hidden #mainSidebar > nav {
    width: 100% !important;
    min-width: 0;
}
.app-layout #mainSidebar .nav-main-row {
    min-width: 0;
}
.app-layout #mainSidebar .nav-main-button,
.app-layout #mainSidebar .dropdown-menu > button {
    min-width: 0 !important;
}
.app-layout #mainSidebar .nav-main-button > span:not(.compact-legend-icon):not(.legend-opening-surface):not(.notifications-label):not(.inbox-unread-badge),
.app-layout #mainSidebar .notifications-label .notifications-text,
.app-layout #mainSidebar .dropdown-menu > button > span:not(.legend-opening-surface) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
/* Keep the existing row height while allowing trackpad, touch, and Shift+wheel scrolling. */
.app-layout #mainSidebar .nav-main-button > span:not(.compact-legend-icon):not(.legend-opening-surface):not(.notifications-label):not(.inbox-unread-badge)::-webkit-scrollbar,
.app-layout #mainSidebar .notifications-label .notifications-text::-webkit-scrollbar,
.app-layout #mainSidebar .dropdown-menu > button > span:not(.legend-opening-surface)::-webkit-scrollbar {
    display: none;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .notifications-main-button .notifications-label {
    flex: 0 1 auto;
    min-width: 0;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .notifications-label .notifications-text {
    flex: 0 1 auto;
}
.app-layout:not(.sidebar-hidden) #mainSidebar [data-legend-key="messages"] > span:not(.compact-legend-icon):not(.legend-opening-surface):not(.inbox-unread-badge) {
    flex: 0 1 auto;
}
.app-layout:not(.sidebar-hidden) #mainSidebar .nav-main-button {
    justify-content: flex-start !important;
}
.app-layout.sidebar-hidden #mainSidebar .notification-count {
    margin: 0;
    padding: 0;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-finance-balance]::after,
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-public-post-count]::after,
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-upload-count]::after,
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-contact-count]::after,
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-legend-count]::after {
    content: attr(data-contact-count);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: inherit;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-upload-count]::after { content: attr(data-upload-count); }
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-public-post-count]::after { content: attr(data-public-post-count); }
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-legend-count]::after { content: attr(data-legend-count); }
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-finance-balance]::after { content: attr(data-finance-balance); }
/* Reserve the Finance symbol's space and clip long balances inside the compact tab. */
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-finance-balance] {
    justify-content: flex-start !important;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-finance-balance] > .compact-legend-icon {
    flex: 0 0 24px;
}
.app-layout.sidebar-hidden #mainSidebar .nav-main-button[data-finance-balance]::after {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Paint opening curves behind the row's icons, labels, and counters. */
.app-layout #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected),
.app-layout #mainSidebar > nav > button.legend-selected,
.app-layout #mainSidebar .dropdown-menu > button.legend-selected {
    isolation: isolate;
}
.app-layout #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected)::before,
.app-layout #mainSidebar .nav-main-row:has(> .nav-main-button.legend-selected)::after,
.app-layout #mainSidebar > nav > button.legend-selected::before,
.app-layout #mainSidebar > nav > button.legend-selected::after,
.app-layout #mainSidebar .dropdown-menu > button.legend-selected::before,
.app-layout #mainSidebar .dropdown-menu > button.legend-selected::after {
    z-index: -1;
}
.app-layout #mainSidebar .nav-main-button > .compact-legend-icon {
    overflow: visible;
    text-overflow: clip;
}

/* Share motion timing between the header profile and legend openings. */
:root {
    --legend-open-duration: 480ms;
    --legend-close-duration: 480ms;
    --legend-motion-easing: cubic-bezier(.4, 0, .2, 1);
}
/* Keep the live scrollbar out of the page snapshot's path. */
body:has(.content-area[data-page-genie-pending]) > .pool-scrollbar {
    visibility: hidden !important;
}
/* Refresh briefly softens and refracts the content before bringing it into focus. */
.scroll-area[data-page-refreshing] {
    will-change: filter, opacity, transform;
    pointer-events: none;
}
/* Keep every opening mounted so the old and new tabs slide simultaneously. */
.app-layout {
    --legend-motion-duration: var(--legend-open-duration);
    --legend-opening-inset: 2px;
}
.app-layout.sidebar-hidden {
    --legend-opening-inset: 6px;
    --legend-motion-duration: var(--legend-close-duration);
}
.app-layout #mainSidebar > nav { isolation: isolate; }
/* Keep cached account content hidden until the new visit has been rendered. */
:is(#messages, #profile, #followList)[aria-busy="true"] > .scroll-area > * {
    visibility: hidden;
}
.app-layout #mainSidebar#mainSidebar .legend-opening-row {
    position: relative !important;
    /* All decorative layers sit behind neighboring rows' text as well. */
    isolation: auto;
    overflow: visible !important;
    width: 100% !important;
    margin-right: 0 !important;
    border-radius: 20px 0 0 20px !important;
    background: transparent !important;
}
.app-layout #mainSidebar#mainSidebar :is(.nav-main-button, .nav-dropdown-toggle) {
    background: transparent !important;
}
.app-layout #mainSidebar#mainSidebar :is(.nav-main-button, button.legend-opening-row):not(.legend-selected):hover,
.app-layout #mainSidebar#mainSidebar .nav-dropdown-toggle:hover {
    background: transparent !important;
}
.app-layout #mainSidebar#mainSidebar .legend-opening-row::before,
.app-layout #mainSidebar#mainSidebar .legend-opening-row::after {
    content: none !important;
}
.app-layout #mainSidebar#mainSidebar .legend-opening-surface {
    --legend-opening-progress: 0;
    --legend-opening-curve-size: min(24px, 50cqw);
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: auto;
    right: calc(-1 * var(--legend-opening-inset));
    display: block !important;
    min-width: 0 !important;
    width: calc((100% + 7px + var(--legend-opening-inset)) * var(--legend-opening-progress));
    box-sizing: border-box;
    container-type: inline-size;
    border-left: calc(7px * var(--legend-opening-progress)) solid #4E0707;
    /* Share narrow reveals between the cap and joins so their curves cannot
       cross and leave a straight spur during opening or retraction. */
    border-radius: min(20px, 50%) 0 0 min(20px, 50%) / 50% 0 0 50%;
    background: #973D60;
    pointer-events: none;
    /* Animate the width so the corners stay round throughout retraction.
       Bound the cutouts to the reveal so compact previews cannot cover icons. */
    clip-path: inset(-24px 0 -24px 0);
    transition: width var(--legend-close-duration) var(--legend-motion-easing),
        border-left-width var(--legend-close-duration) var(--legend-motion-easing);
}
.app-layout #mainSidebar#mainSidebar .legend-opening-row:hover > .legend-opening-surface,
:where(body:has(#topBarProfileButton:not([hidden]):hover)) .app-layout #mainSidebar#mainSidebar .legend-opening-row:where(:has(> #legendProfileButton)) > .legend-opening-surface,
.app-layout #mainSidebar#mainSidebar #siteAssistantToggle:hover > .legend-opening-surface {
    --legend-opening-progress: .25;
    transition-duration: var(--legend-open-duration);
}
.app-layout #mainSidebar#mainSidebar .legend-opening-row:has(> .nav-main-button.legend-selected) > .legend-opening-surface,
.app-layout #mainSidebar#mainSidebar .legend-opening-row.legend-selected > .legend-opening-surface,
.app-layout #mainSidebar#mainSidebar #siteAssistantToggle[aria-expanded="true"] > .legend-opening-surface {
    --legend-opening-progress: 1;
    transition-duration: var(--legend-open-duration);
}
.legend-opening-surface::before,
.legend-opening-surface::after {
    content: "";
    position: absolute;
    right: 0;
    width: var(--legend-opening-curve-size);
    height: var(--legend-opening-curve-size);
    /* Paint only inside each join. Fractional shadow spreads can briefly
       leave straight edges beyond the curve while the opening changes width. */
    pointer-events: none;
}
.legend-opening-surface::before {
    top: calc(-1 * var(--legend-opening-curve-size));
    background: radial-gradient(circle at top left,
        transparent calc(var(--legend-opening-curve-size) - .5px),
        #973D60 var(--legend-opening-curve-size));
}
.legend-opening-surface::after {
    bottom: calc(-1 * var(--legend-opening-curve-size));
    background: radial-gradient(circle at bottom left,
        transparent calc(var(--legend-opening-curve-size) - .5px),
        #973D60 var(--legend-opening-curve-size));
}
/* Typed lengths let one browser animation move the legend, toggle and join. */
@property --sidebar-motion-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 72px;
}
@property --sidebar-motion-toggle-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 62px;
}
.app-layout.sidebar-motion #mainSidebar#mainSidebar {
    width: var(--sidebar-motion-width) !important;
    min-width: 0 !important;
    transition: none;
}
.app-layout.sidebar-motion #mainSidebar#mainSidebar > nav {
    width: var(--sidebar-motion-nav-width) !important;
    min-width: 0;
}
.app-layout.sidebar-motion::before {
    left: calc(var(--sidebar-motion-width) - var(--legend-border-width));
}
.app-layout.sidebar-motion #sidebarToggleButton {
    width: var(--sidebar-motion-toggle-width) !important;
}
.app-layout #sidebarToggleButton {
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .app-layout #mainSidebar#mainSidebar .legend-opening-surface,
    .app-layout #sidebarToggleButton,
    .app-layout.sidebar-motion #mainSidebar#mainSidebar {
        transition: none;
    }
}

/* Reserve only the extra space needed beyond each list's existing right inset. */
:is(#publicFeed, #followFeedContent, #postedRequestsList, #savedOffersList, .profile-feed-post-list) {
    width: calc(100% - var(--pool-post-clearance, 52px));
    max-width: calc(100% - var(--pool-post-clearance, 52px));
}

/* Size the action column to its labels so narrower posts keep single-line controls. */
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list.profile-feed-post-list) .aligned-feed-actions {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 12px;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list.profile-feed-post-list) .feed-post-action-column :is(button, summary, .request-actions, .request-actions > *, .post-options-dropdown, .post-options-menu) {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
:is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list.profile-feed-post-list) .request-information > p:not(.post-description) {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    overflow-x: auto;
}

/* Preserve existing max-width limits; reserve only the measured extra clearance. */
.page > .scroll-area > .pool-scroll-content {
    box-sizing: border-box;
    width: calc(100% - var(--pool-content-clearance, 0px)) !important;
    min-width: 0;
    /* Put the clearance on the pocket side instead of splitting it across auto margins. */
    margin-left: 0 !important;
    margin-right: auto !important;
}
.page > .scroll-area > .pool-scroll-content button {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* The active page scrolls normally behind its draggable pool-ball thumb. */
.pool-scroll-target {
    scrollbar-width: none !important;
}
.pool-scroll-target::-webkit-scrollbar { display: none; width: 0; }
html[data-scrollbar-style="regular"] .pool-scroll-target { scrollbar-width: auto !important; scrollbar-color: #E5CCD4 transparent; }
html[data-scrollbar-style="regular"] .pool-scroll-target::-webkit-scrollbar { display: block; width: 14px; height: 14px; }
html[data-scrollbar-style="regular"] .pool-scrollbar { display: none !important; }
.pool-scrollbar {
    position: fixed;
    width: 24px;
    z-index: 200;
    touch-action: none;
    user-select: none;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
.pool-scrollbar[hidden] { display: none !important; }

/* Menus and their containing layers paint above both pockets and the ball. */
.page > .page-header {
    position: relative;
    z-index: 202 !important;
}
.page > .scroll-area > :is(
    details[open],
    .open,
    [aria-expanded="true"],
    [data-dropdown-closing],
    :has(details[open], .open, [aria-expanded="true"], .post-options-menu:not([hidden]), [data-dropdown-closing])
) {
    position: relative;
    z-index: 201 !important;
}

.pool-scrollbar-ball {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
    filter: drop-shadow(0 2px 2px rgba(34, 17, 21, .4));
    will-change: transform;
    z-index: 1;
}
.pool-scrollbar-ball canvas { display: block; width: 24px; height: 24px; pointer-events: none; }
.pool-scrollbar-ball:focus-visible { outline: 2px solid #008b8b; outline-offset: 3px; }
/* Stretch a beam from the unchanged UFO cursor to the captured ball. */
.pool-scrollbar-tractor-beam {
    display: none;
    position: fixed;
    height: 24px;
    transform-origin: left center;
    clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 57%);
    background: linear-gradient(90deg, rgba(185, 255, 246, .85), rgba(112, 229, 220, .3));
    pointer-events: none;
    z-index: 0;
}
.ufo-text-selection-beam {
    position: fixed;
    height: 20px;
    transform-origin: left center;
    clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 57%);
    background: linear-gradient(90deg, rgba(185, 255, 246, .85), rgba(112, 229, 220, .3));
    pointer-events: none;
    user-select: none;
    z-index: 2147483647;
}
.ufo-text-selection-beam[hidden] { display: none !important; }
html.ufo-text-selecting,
html.ufo-text-selecting * {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default) !important;
}
.pool-scrollbar:is(.is-dragging, .is-pulling) .pool-scrollbar-tractor-beam { display: block; }
.pool-scrollbar:is(.is-dragging, .is-pulling) .pool-scrollbar-ball:focus { outline: none; }
body:has(.pool-scrollbar.is-dragging),
body:has(.pool-scrollbar.is-dragging) * {
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default) !important;
}

/* Compact pockets fit within the space beside the posts. */
.pool-scrollbar-pocket {
    --pool-pocket-surround: #F4A384;
    position: absolute;
    left: -9px;
    width: 45px;
    height: 45px;
    border-radius: 0 10.5px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 0 30%);
    background: var(--pool-pocket-surround);
    pointer-events: none;
}
.pool-scrollbar-pocket::before {
    content: '';
    position: absolute;
    inset: 6px 6px 0 0;
    border-radius: 0 6px 0 0;
    background: var(--pool-pocket-surround);
}
.pool-scrollbar-pocket::after {
    content: '';
    position: absolute;
    top: 3.75px;
    left: 10.5px;
    width: 28.5px;
    height: 31.5px;
    box-sizing: border-box;
    border: 1.5px solid var(--pool-pocket-surround);
    border-radius: 50% 50% 15% 15%;
    transform: rotate(45deg);
    background: linear-gradient(#010202 45%, #17100d);
    box-shadow: 0 0 0 1px #9e604455, inset 0 3px 4px #000;
}
.pool-scrollbar-pocket-top { top: 0; }
.pool-scrollbar-pocket-bottom { bottom: 0; transform: scaleY(-1); }
.pool-scrollbar-pocket.is-active::after { box-shadow: 0 0 0 1px #9e604499, inset 0 3px 6px #000; }
/* Solar objects enter black holes; pool mode keeps its billiard pockets. */
.pool-scrollbar[data-objects="solar"] .pool-scrollbar-pocket {
    background: transparent;
    clip-path: none;
    border-radius: 50%;
}
.pool-scrollbar[data-objects="solar"] .pool-scrollbar-pocket::before {
    inset: auto;
    left: 2.75px;
    top: 11.5px;
    width: 44px;
    height: 16px;
    border-radius: 50%;
    transform: rotate(-20deg);
    background: radial-gradient(ellipse, transparent 32%, #6e2f12 36%, #ffb65c 48%, #fff0b4 54%, #e77a28 62%, transparent 74%);
    box-shadow: 0 0 5px #ff9b3d66;
}
.pool-scrollbar[data-objects="solar"] .pool-scrollbar-pocket::after {
    left: 14.75px;
    top: 9.5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ffe3a0;
    transform: none;
    background: #020309;
    box-shadow: 0 0 3px #fff0b4, 0 0 7px #ff9b3d99;
}
.pool-scrollbar[data-objects="solar"] .pool-scrollbar-pocket.is-active::after {
    box-shadow: 0 0 4px #fff0b4, 0 0 12px #ff9b3dcc;
}
.pool-scrollbar-ball { --pool-pocket-drop: -7.5px; }
.pool-scrollbar-ball.is-top-pocket { --pool-pocket-drop: 7.5px; }
.pool-scrollbar-ball.is-pocketed canvas {
    animation: pool-ball-sink 380ms ease-in forwards;
}
.pool-scrollbar-ball.is-emerging canvas {
    animation: pool-ball-pop 420ms cubic-bezier(.2, .75, .3, 1) both;
}
.pool-scrollbar-ball.is-emerging {
    transition: transform 420ms cubic-bezier(.2, .75, .3, 1);
}
.pool-scrollbar.is-dragging .pool-scrollbar-ball { transition: none; }
@keyframes pool-ball-sink {
    from { transform: translateY(0) scale(1); opacity: 1; }
    45% { transform: translate(3.75px, var(--pool-pocket-drop)) scale(.85); opacity: 1; }
    to { transform: translate(3.75px, var(--pool-pocket-drop)) scale(.05); opacity: 0; }
}
@keyframes pool-ball-pop {
    0% { transform: translate(3.75px, var(--pool-pocket-drop)) scale(.05); opacity: 0; }
    65% { transform: translateY(0) scale(1.12); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pool-scrollbar-ball:is(.is-pocketed, .is-emerging) canvas { animation-duration: 1ms; }
    .pool-scrollbar-ball.is-emerging { transition: none; }
}
html.user-reduced-motion .pool-scrollbar-ball:is(.is-pocketed, .is-emerging) canvas { animation-duration: 1ms; }
html.user-reduced-motion .pool-scrollbar-ball.is-emerging { transition: none; }

/* Match the search input's night appearance in its results dropdown. */
html[data-appearance="night"] .global-search-results {
    background-color: #15202b !important;
    color: var(--settings-text) !important;
}

/* Popup canvases share the page palette, trim, and raised outer edge. */
html :is(dialog, #siteAssistantPanel, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) {
    box-sizing: border-box;
    border: 4px solid #973D60;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 35px rgba(38, 18, 28, .3);
}
html:not([data-appearance="night"]):not(.user-high-contrast) :is(dialog, #siteAssistantPanel, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) {
    background-color: #F4A384;
    color: #1f2933;
}
html:not([data-appearance="night"]):not(.user-high-contrast) :is(dialog, .confirmation-box, .fulfill-form, .modal-content, .popup-content) .fulfillment-instruction {
    background-color: rgba(255, 255, 255, .58);
    color: #1f2933;
    border-color: rgba(255, 255, 255, .72);
}

html[data-appearance="night"] :is(dialog, #siteAssistantPanel, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) {
    background-color: var(--settings-surface, #15202b);
    color: var(--settings-text, #fff);
    border-color: var(--settings-border, #973D60);
}
html[data-appearance="night"] :is(dialog, .confirmation-box, .fulfill-form, .modal-content, .popup-content) :is(h2, h3, h4, p, label, legend) {
    color: var(--settings-text, #fff);
}
html.user-high-contrast :is(dialog, #siteAssistantPanel, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) {
    background-color: #fff !important;
    color: #111 !important;
    border-color: #111 !important;
    box-shadow: none;
}

/* Light glass behind shared popup notices, prompts, and their controls. */
html .site-generated-popup .confirmation-box { padding: 12px; }
.site-popup-glass-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: 0 8px 24px rgba(0, 70, 75, .12), inset 0 1px 0 rgba(255, 255, 255, .65);
}
html[data-appearance="night"] .site-popup-glass-card {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}
html.user-high-contrast .site-popup-glass-card {
    background: #fff;
    border-color: #111;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Keep each page fixed while its content can bounce at either scroll boundary. */
html:has(.content-area > .page.active) {
    overscroll-behavior: none;
}
.content-area:has(> .page.active) {
    overflow: hidden !important;
    overscroll-behavior: none;
}
.content-area > .page.active {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    max-height: 100%;
    min-height: 0;
    overflow: hidden !important;
}
/* Keep both feeds at the same compact width as more space becomes available. */
.content-area.feed-columns-ready > #home.active {
    max-width: 520px;
    margin-inline: auto;
}
.content-area.feed-columns-expanded:has(> #home.active) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 520px));
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    justify-content: center;
}
.content-area.feed-columns-expanded:has(> #home.active) > #home.active { margin-inline: 0; }
.content-area.feed-columns-expanded:has(> #home.active) > #followFeed.feed-companion-visible:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
}
#followFeed.following-feed-column { display: none !important; }
#followFeed.following-feed-column > .following-feed-scroll { scrollbar-width: thin; }
.content-area > .page > .scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: none contain;
}
/* The column height follows the available page body, including header changes. */
:is(#profile, #balance) > .scroll-area {
    container-type: size;
}
.page-column-scroll:focus-visible {
    outline: 2px solid var(--settings-accent, #008b8b);
    outline-offset: -2px;
    border-radius: 18px;
}
.page :is(.contacts-dual-column-scroll, .message-conversation-list) {
    overscroll-behavior-y: contain;
}

/* Compose keeps the same content inset as Profile. */
:is(#compose, #composePost) > .scroll-area {
    padding-top: 20px !important;
}

/* Request and Offer compose pages share the other pages' peach canvas. */
html:not([data-appearance="night"]):not(.user-high-contrast) :is(#compose, #composePost) > .scroll-area {
    background-image: none !important;
    background-color: #F4A384 !important;
    color: #1f2933 !important;
}

/* Compose entry fields use the shared search palette, including date/time groups. */
:is(#compose, #composePost) .location-disclaimer {
    color: inherit;
}

/* Bare compose text needs its own contrast against the space background. */
html[data-page-background="starfield"] :is(#compose, #composePost)
:is(label, legend, p, small, h3, h4, #postPurposeLabel):not(:where(
    .compose-glass-card, .compose-location-audience, .edit-existing-upload-panel,
    .compose-calendar-dialog, .settings-card
) *) {
    color: #F6F7FF !important;
    text-shadow: 0 1px 3px #050915, 0 0 8px rgb(0 0 0 / 80%);
}
html[data-page-background="starfield"] :is(#compose, #composePost)
:is(input, textarea, select, button, summary, .input-with-prefix, .compose-date-segments) {
    text-shadow: none;
}

html:not([data-appearance="night"]):not(.user-high-contrast) #postPurpose option {
    background: var(--entry-field-background);
    color: var(--entry-field-text);
}

html:not([data-appearance="night"]):not(.user-high-contrast) :is(#compose, #composePost) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),
    textarea,
    select,
    .compose-date-segments
) {
    background: var(--entry-field-background) !important;
    color: var(--entry-field-text) !important;
}

html:not([data-appearance="night"]):not(.user-high-contrast) :is(#compose, #composePost) :is(input, textarea)::placeholder {
    color: var(--entry-field-placeholder) !important;
    opacity: 1;
}

/* The selector inside the purple Language menu matches the search fields. */
:root :is(#siteLanguageSelect, #siteLanguageSelect option) {
    background-color: var(--entry-field-background) !important;
    color: var(--entry-field-text) !important;
}

/* The compose action is an envelope in the search fields' colors. */
html .top-bar .top-bar-compose-button,
html .top-bar .top-bar-compose-button:hover {
    --compose-envelope-background: var(--entry-field-background);
    --compose-envelope-ink: var(--entry-field-text);
    position: relative;
    isolation: isolate;
    background: var(--compose-envelope-background) !important;
    color: var(--compose-envelope-ink) !important;
    border: 1px solid var(--entry-field-placeholder);
    border-radius: 4px !important;
    padding: 16px 6px 0 !important;
}
.compose-envelope-folds {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--compose-envelope-ink);
    stroke-opacity: .45;
    stroke-width: 1;
    pointer-events: none;
    overflow: visible;
}
.compose-envelope-folds path { vector-effect: non-scaling-stroke; }
.compose-envelope-interior,
.compose-envelope-flap-detail {
    opacity: 0;
    visibility: hidden;
    transition: none;
}
.compose-envelope-lining { fill: var(--compose-envelope-ink); fill-opacity: .07; stroke: none; }
.compose-envelope-inner-seam { stroke-opacity: .35; }
.compose-envelope-flap-detail { fill: none; stroke-opacity: .3; }
.compose-envelope-flap {
    fill: var(--compose-envelope-background);
    transform-box: view-box;
    transform-origin: 80px 1px;
    transform: scaleY(1);
    transition: transform var(--legend-close-duration, 480ms) var(--legend-motion-easing, ease);
}
body:has(:is(#compose, #composePost).page.active) .compose-envelope-flap {
    /* Fold upward within the space above the envelope in the header. */
    transform: scaleY(-.34);
    transition-duration: var(--legend-open-duration, 480ms);
}
body:has(:is(#compose, #composePost).page.active) :is(.compose-envelope-interior, .compose-envelope-flap-detail) {
    opacity: 1;
    visibility: visible;
    /* Reveal the inside only after the flap has lifted out of the way. */
    transition: opacity calc(var(--legend-open-duration, 480ms) / 2) var(--legend-motion-easing, ease) calc(var(--legend-open-duration, 480ms) / 2),
        visibility 0s linear calc(var(--legend-open-duration, 480ms) / 2);
}
@media (prefers-reduced-motion: reduce) {
    :is(.compose-envelope-flap, .compose-envelope-interior, .compose-envelope-flap-detail) { transition: none !important; }
}
html.user-reduced-motion :is(.compose-envelope-flap, .compose-envelope-interior, .compose-envelope-flap-detail) { transition: none !important; }
.compose-envelope-label {
    position: relative;
    padding: 1px 6px;
    border-radius: 2px;
    background: transparent;
}
.top-bar-compose-button:hover .compose-envelope-folds { stroke-opacity: .8; }
.top-bar-compose-button:focus-visible {
    outline: 2px solid var(--entry-field-background);
    outline-offset: 3px;
}
html[data-appearance="night"] .top-bar .top-bar-compose-button,
html[data-appearance="night"] .top-bar .top-bar-compose-button:hover {
    --compose-envelope-background: #15202b;
    --compose-envelope-ink: var(--settings-text);
    border-color: var(--settings-border);
}

/* Compose joins the page trim with the legend's quarter pull and curved motion. */
.top-bar-compose-opening {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    isolation: isolate;
}
.top-bar-compose-opening-surface {
    --compose-opening-progress: 0;
    --header-opening-cap-radius: 20px;
    position: absolute;
    z-index: -1;
    left: -6px;
    right: -6px;
    bottom: -8px;
    height: calc((100% + 14px) * var(--compose-opening-progress));
    container-type: size;
    background: transparent;
    pointer-events: none;
    clip-path: inset(0 -24px 0 -24px);
    transition: height var(--legend-close-duration) var(--legend-motion-easing);
}
.top-bar-compose-opening:hover > .top-bar-compose-opening-surface,
.top-bar-compose-opening:has(> .top-bar-compose-button:focus-visible) > .top-bar-compose-opening-surface {
    --compose-opening-progress: .25;
    transition-duration: var(--legend-open-duration);
}
body:has(:is(#compose, #composePost).page.active) .top-bar-compose-opening-surface {
    --compose-opening-progress: 1;
    transition-duration: var(--legend-open-duration);
}
@media (prefers-reduced-motion: reduce) {
    .top-bar-compose-opening-surface { transition: none; }
}
html.user-reduced-motion .top-bar-compose-opening-surface { transition: none; }

/* Match the legend's rounded cap and concave joins into the magenta canvas.
   Share the available height between the cap and joins so a quarter pull
   remains one continuous shape, without detached corners or square edges. */
:is(.top-bar-compose-opening-surface, .top-bar-profile-opening-surface)::before,
:is(.top-bar-compose-opening-surface, .top-bar-profile-opening-surface)::after {
    --header-opening-join-radius: min(24px, 50cqh);
    content: "";
    position: absolute;
    pointer-events: none;
}
:is(.top-bar-compose-opening-surface, .top-bar-profile-opening-surface)::before {
    --header-opening-top-radius: min(var(--header-opening-cap-radius), calc(100cqh - var(--header-opening-join-radius)));
    inset: 0;
    border-radius: var(--header-opening-top-radius) var(--header-opening-top-radius) 0 0;
    background: #973D60;
}
:is(.top-bar-compose-opening-surface, .top-bar-profile-opening-surface)::after {
    left: calc(-1 * var(--header-opening-join-radius));
    right: calc(-1 * var(--header-opening-join-radius));
    bottom: 0;
    height: var(--header-opening-join-radius);
    background:
        radial-gradient(circle at top left,
            transparent calc(var(--header-opening-join-radius) - .5px),
            #973D60 var(--header-opening-join-radius))
            left bottom / var(--header-opening-join-radius) 100% no-repeat,
        radial-gradient(circle at top right,
            transparent calc(var(--header-opening-join-radius) - .5px),
            #973D60 var(--header-opening-join-radius))
            right bottom / var(--header-opening-join-radius) 100% no-repeat,
        linear-gradient(#973D60, #973D60)
            center bottom / calc(100% - 2 * var(--header-opening-join-radius)) 100% no-repeat;
}

/* Cache the profile pull at its natural size and animate its transform.
   Compensate its vertical radii so the quarter and full pulls stay circular. */
.top-bar-profile-opening-surface::before,
.top-bar-profile-opening-surface::after {
    --header-opening-join-radius: min(24px, calc(50cqh * var(--header-shape-progress)));
}
.top-bar-profile-opening-surface::before {
    --header-opening-top-radius: min(var(--header-opening-cap-radius), calc(100cqh * var(--header-shape-progress) - var(--header-opening-join-radius)));
    border-radius: var(--header-opening-top-radius) var(--header-opening-top-radius) 0 0 /
        calc(var(--header-opening-top-radius) / var(--header-shape-progress))
        calc(var(--header-opening-top-radius) / var(--header-shape-progress)) 0 0;
}
.top-bar-profile-opening-surface::after {
    height: calc(var(--header-opening-join-radius) / var(--header-shape-progress));
    background:
        radial-gradient(ellipse var(--header-opening-join-radius) calc(var(--header-opening-join-radius) / var(--header-shape-progress)) at top left,
            transparent calc(100% - .5px), #973D60 100%)
            left bottom / var(--header-opening-join-radius) 100% no-repeat,
        radial-gradient(ellipse var(--header-opening-join-radius) calc(var(--header-opening-join-radius) / var(--header-shape-progress)) at top right,
            transparent calc(100% - .5px), #973D60 100%)
            right bottom / var(--header-opening-join-radius) 100% no-repeat,
        linear-gradient(#973D60, #973D60)
            center bottom / calc(100% - 2 * var(--header-opening-join-radius)) 100% no-repeat;
}

/* Keep Settings search results above the page content and scrollbar controls. */
.legend-page-search:has(> #settingsSearchResults) {
    position: relative;
    z-index: 203;
    overflow: visible;
}
#settingsSearchResults {
    max-height: min(520px, 60vh);
}
#settingsSearchResults > p { margin: 12px; }

/* Post action menus use the same surfaces and control sizes as Public Feed filters. */
@layer post-menu-style {
    html:not(.user-high-contrast) :is(.post-options-menu, .post-edit-menu) {
        padding: 6px !important;
        gap: 3px !important;
        border: 1px solid var(--options-control-background, #CBC3E3) !important;
        border-radius: 8px !important;
        background-color: var(--options-control-background, #CBC3E3) !important;
        color: #263238 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .12) !important;
    }
    html:not(.user-high-contrast) :is(.post-options-menu, .post-edit-menu) button {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 5px !important;
        background-color: transparent !important;
        color: #222 !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-align: left !important;
    }
    html:not(.user-high-contrast) :is(.post-options-menu, .post-edit-menu) button:hover:not(:disabled) {
        background-color: #eef1f4 !important;
    }
    html:not(.user-high-contrast) :is(.post-options-menu, .post-edit-menu) button:is(.active, [aria-pressed="true"]) {
        background-color: #dcecf7 !important;
        color: #174a6d !important;
    }
    html:not(.user-high-contrast) .post-management-option-controls :is(input:not([type="checkbox"]), select) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
        border: 1px solid #8fa3b2 !important;
        border-radius: 5px !important;
        background-color: #f4f8fb !important;
        color: #174a6d !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

/* Page filters share Public Feed's panel, controls and responsive sections. */
.page > .page-header :is(.feed-header-filter, .my-posts-filter, #notificationFilter, #messagesFilter, #uploadsFilter) {
    position: static;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: min(520px, 100%) !important;
    max-width: 100% !important;
    max-height: 75vh;
    max-height: 75dvh;
    box-sizing: border-box;
    container-type: inline-size;
    padding: 6px;
    gap: 3px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background: #fff;
    color: #222;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    z-index: 1000;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) button {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #222;
    font-family: inherit;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) button:hover {
    background: #eef1f4;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) button:is(.active, [aria-pressed="true"]) {
    background: #dcecf7;
    color: #174a6d;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) .filter-menu-heading,
.global-map-filter-menu .filter-menu-heading {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px solid #3f5d72;
    border-radius: 6px;
    background: #4f6f86;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #messagesFilterOptions, #uploadsFilterOptions) .filter-menu-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    flex-shrink: 0;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #messagesFilterOptions, #uploadsFilterOptions) .filter-menu-column {
    min-width: 0;
    padding-left: 0;
    border-left: none;
}
@container (min-width: 440px) {
    .page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #messagesFilterOptions, #uploadsFilterOptions) .filter-menu-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #messagesFilterOptions, #uploadsFilterOptions) .filter-menu-column + .filter-menu-column {
        padding-left: 12px;
        border-left: 2px solid #8fa3b2;
    }
}
.my-posts-filter.open > :is(.post-manager-filters, .saved-organizer-filters),
.page > .page-header :is(#notificationFilterOptions, #uploadsFilterOptions) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px;
}
.page > .page-header :is(.post-manager-filters, .saved-organizer-filters, #notificationFilterOptions, #uploadsFilterOptions) > label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    gap: 3px;
}
.page > .page-header :is(.post-manager-filters, .saved-organizer-filters, #notificationFilterOptions, #uploadsFilterOptions) :is(select, input:not([type="checkbox"])) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #8fa3b2;
    border-radius: 5px;
    background: #f4f8fb;
    color: #174a6d;
}
.page > .page-header :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.4;
}
.page > .page-header :is(.post-manager-filters, .saved-organizer-filters) > button {
    grid-column: 1 / -1;
}

/* Uploads has one filter, so keep its panel to a compact single column. */
#uploads > .page-header #uploadsFilterOptions {
    width: min(240px, 100%) !important;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
}
#uploads > .page-header #uploadsFilterOptions > .filter-menu-actions {
    margin-top: 0;
}
#uploads > .page-header #uploadsShowFilter > button {
    min-height: 34px;
    padding: 7px 9px;
    background: transparent;
    color: #222;
}
#uploads > .page-header #uploadsShowFilter > button:hover {
    background: #eeeeee;
}
#uploads > .page-header #uploadsShowFilter > button[aria-pressed="true"] {
    background: #dcecf7;
    color: #174a6d;
}

/* The motion controller animates real height before allowing menus to hide. */
/* Registered values let the animation work with existing !important button sizes. */
@property --dropdown-height { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dropdown-padding-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dropdown-padding-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dropdown-margin-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dropdown-margin-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dropdown-border-top-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dropdown-border-bottom-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dropdown-opacity { syntax: "<number>"; inherits: false; initial-value: 0; }
html body :is(#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer, [data-dropdown-motion])[data-dropdown-motion] {
    display: block !important;
    box-sizing: border-box !important;
    height: var(--dropdown-height) !important;
    padding-top: var(--dropdown-padding-top) !important;
    padding-bottom: var(--dropdown-padding-bottom) !important;
    margin-top: var(--dropdown-margin-top) !important;
    margin-bottom: var(--dropdown-margin-bottom) !important;
    border-top-width: var(--dropdown-border-top-width) !important;
    border-bottom-width: var(--dropdown-border-bottom-width) !important;
    opacity: var(--dropdown-opacity) !important;
    min-height: 0 !important;
    min-block-size: 0 !important;
    overflow: hidden !important;
    animation: none !important;
    transition: none !important;
}
html body :is(#dropdown-motion-layer, [data-dropdown-closing])[data-dropdown-closing] {
    pointer-events: none !important;
}
html body :is(#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer, [data-dropdown-motion])[data-dropdown-display="flex"] { display: flex !important; }
html body :is(#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer, [data-dropdown-motion])[data-dropdown-display="grid"] { display: grid !important; }
html body :is(#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer, [data-dropdown-motion])[data-dropdown-display="inline-flex"] { display: inline-flex !important; }
html body :is(#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer, [data-dropdown-motion])[data-dropdown-display="inline-grid"] { display: inline-grid !important; }
html body :is(#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer, [data-dropdown-motion])[data-dropdown-display="inline-block"] { display: inline-block !important; }
html body :is(#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer#dropdown-motion-layer, [data-dropdown-motion])[data-dropdown-display="list-item"] { display: list-item !important; }
details:has(> [data-dropdown-motion])::details-content {
    content-visibility: visible !important;
}
html :is(
    .dropdown-arrow,
    .settings-disclosure-arrow,
    .feed-header-filter-arrow,
    .my-posts-filter-arrow,
    .post-options-arrow,
    .post-draft-arrow,
    .post-purpose-arrow,
    .message-thread-arrow,
    .mutual-heart
),
html .finance-transactions-toggle::before,
html :is(.feed-message-action-button, .profile-message-button, #newMessageButton)[aria-expanded]::after {
    transition-duration: var(--legend-open-duration) !important;
    transition-timing-function: var(--legend-motion-easing) !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Other users' profile actions share the compact post button treatment. */
#profile #profileContent .profile-follow-message-row :is(.profile-follow-button, .profile-message-button, .profile-unfollow-option) {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
#profile #profileContent .profile-follow-message-row .profile-follow-button {
    background: #3f6f9f !important;
    border-color: #3f6f9f !important;
    color: #fff !important;
    font-weight: 600 !important;
}
#profile #profileContent .profile-follow-message-row .profile-follow-button:hover:not(:disabled) {
    background-color: #345e88 !important;
    border-color: #345e88 !important;
}
#profile #profileContent .profile-follow-button > span {
    font-size: inherit !important;
    font-weight: inherit !important;
}
#profile #profileContent .profile-follow-message-row .profile-message-button {
    background: #6f5f91 !important;
    border-color: #6f5f91 !important;
    color: #fff !important;
}
#profile #profileContent .profile-follow-message-row .profile-message-button:hover:not(:disabled) {
    background-color: #5e507c !important;
    border-color: #5e507c !important;
}
#profile #profileContent .profile-follow-message-row button:focus-visible {
    outline: 2px solid #FFE082;
    outline-offset: 3px;
}
html.user-large-buttons #profile #profileContent .profile-follow-message-row button {
    min-height: 44px !important;
}

/* Feed pagination matches the compact charcoal action buttons on posts. */
#home #publicFeed > .public-feed-load-more {
    display: block;
    width: max-content;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #4f5964;
    border-radius: 12px;
    background: #4f5964;
    color: #fff;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.4;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default);
}
#home #publicFeed > .public-feed-load-more:hover {
    background-color: #414a54;
    border-color: #414a54;
}
#home #publicFeed > .public-feed-load-more:focus-visible {
    outline: 2px solid #FFE082;
    outline-offset: 3px;
}
html.user-large-buttons #home #publicFeed > .public-feed-load-more {
    min-height: 44px;
}

/* Relief for the legend panel and cards, preserving their colors and images. */
@layer legend-card-depth {
    :root {
        --message-bubble-light: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 45%, rgba(24, 12, 20, .04));
        --legend-symbol-shadow: 0 -.04em 0 rgba(255, 255, 255, .65), 0 .06em 0 rgba(24, 12, 20, .65), 0 .12em 0 rgba(24, 12, 20, .45), .04em .18em .12em rgba(24, 12, 20, .4);
        --legend-panel-light: linear-gradient(90deg, rgba(255, 255, 255, .1), transparent 18px, transparent calc(100% - 14px), rgba(24, 12, 20, .15));
        --legend-panel-shadow: var(--legend-border-width) 0 0 #973D60, inset 1px 0 0 rgba(255, 255, 255, .3), inset -3px 0 4px rgba(24, 12, 20, .22), inset 0 -2px 3px rgba(24, 12, 20, .18);
        --scroll-card-shadow: inset 0 2px 1px rgba(255, 255, 255, .75), inset 1px 0 1px rgba(255, 255, 255, .4), inset -1px 0 1px rgba(24, 12, 20, .08), inset 0 -3px 3px rgba(24, 12, 20, .14), 0 2px 1px rgba(24, 12, 20, .2), 0 6px 12px rgba(24, 12, 20, .18);
    }
    html[data-appearance="night"] {
        --message-bubble-light: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 45%, rgba(0, 0, 0, .1));
        --legend-panel-light: linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 18px, transparent calc(100% - 14px), rgba(0, 0, 0, .22));
        --legend-panel-shadow: var(--legend-border-width) 0 0 #973D60, inset 1px 0 0 rgba(255, 255, 255, .18), inset -3px 0 4px rgba(0, 0, 0, .3), inset 0 -2px 3px rgba(0, 0, 0, .25);
        --scroll-card-shadow: inset 0 2px 1px rgba(255, 255, 255, .28), inset 1px 0 1px rgba(255, 255, 255, .12), inset -1px 0 1px rgba(0, 0, 0, .18), inset 0 -3px 3px rgba(0, 0, 0, .28), 0 2px 1px rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .3);
    }
    #mainSidebar {
        position: relative;
        background-image: var(--legend-panel-light) !important;
        box-shadow: var(--legend-panel-shadow) !important;
    }
    /* Blend the legend's relief into the header at their shared top edge. */
    #mainSidebar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--sidebar-control-edge-gap, 20px);
        z-index: 0;
        background: linear-gradient(#4E0707 2px, rgba(78, 7, 7, 0));
        pointer-events: none;
    }
    /* Scale glyph relief with the expanded and compact legend's icon sizes. */
    #mainSidebar .compact-legend-icon,
    #mainSidebar #siteAssistantToggle > span[aria-hidden="true"]:not(.legend-opening-surface) {
        text-shadow: var(--legend-symbol-shadow) !important;
    }
    /* Let the panel's continuous lighting show through its brown sections. */
    #mainSidebar :is(.dropdown-menu, .legend-assistant-footer) {
        background-color: transparent !important;
        background-image: none !important;
    }
    /* Section headings are part of the card, rather than a second raised face. */
    .referral-checkout > summary,
    .page > .scroll-area :is(
        .settings-section-heading,
        .profile-section-dropdown > summary,
        .message-thread-summary,
        .finance-transactions-toggle,
        .finance-section-heading,
        .referral-checkout > summary
    ) {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        translate: none !important;
    }
    .page > .scroll-area .profile-section-dropdown > summary::before {
        box-shadow: none !important;
    }
    .page > .scroll-area :is(
        .request-card,
        .posted-request-card,
        .offer-post-card,
        .notification-item,
        .profile-card,
        .profile-detail-card,
        .profile-section-dropdown,
        .profile-gallery-section,
        .profile-stat-contact-row,
        .balance-card,
        .finance-card,
        .settings-card,
        .simulated-customer-support,
        .message-thread-shell,
        .message-bubble,
        .message-draft-card,
        .personal-request-message-card,
        .message-conversation-panel,
        .fulfilled-request-dropdown,
        .fulfilled-request-item
    ) {
        box-shadow: var(--scroll-card-shadow) !important;
    }
    #messages .message-bubble {
        background-image: var(--message-bubble-light) !important;
    }
    /* Raise the solid magenta frame without shading opposite border halves. */
    html:not(.user-high-contrast) .page > .scroll-area .request-card.own-feed-post {
        box-shadow: 0 2px 0 #973D60, 0 4px 3px rgba(24, 12, 20, .22),
            0 8px 14px rgba(24, 12, 20, .18) !important;
    }
    html.user-high-contrast {
        --message-bubble-light: none;
        --legend-symbol-shadow: none;
        --legend-panel-light: none;
        --legend-panel-shadow: var(--legend-border-width) 0 0 #973D60;
        --scroll-card-shadow: none;
    }
}

/* Surface lighting adds depth without changing layout or menu stacking. */
@layer page-surface-depth {
    :root {
        --page-header-light: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 48%, rgba(24, 12, 20, .07));
        --page-header-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 1px 0 0 rgba(255, 255, 255, .2), inset 0 -2px 2px rgba(24, 12, 20, .18), 0 3px 6px rgba(24, 12, 20, .2);
        --scroll-panel-light: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 120px);
        --scroll-panel-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 1px 0 1px rgba(255, 255, 255, .25), inset -1px 0 2px rgba(24, 12, 20, .1), inset 0 -3px 4px rgba(24, 12, 20, .16), 0 4px 8px rgba(24, 12, 20, .18);
        --site-header-light: linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 45%);
        /* Fade to the shared legend color without a shadow at their join. */
        --site-header-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
    }
    html[data-appearance="night"] {
        --page-header-light: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 48%, rgba(0, 0, 0, .14));
        --page-header-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 1px 0 0 rgba(255, 255, 255, .1), inset 0 -2px 2px rgba(0, 0, 0, .3), 0 3px 6px rgba(0, 0, 0, .3);
        --scroll-panel-light: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 120px);
        --scroll-panel-shadow: inset 0 2px 2px rgba(255, 255, 255, .2), inset 1px 0 1px rgba(255, 255, 255, .1), inset -1px 0 2px rgba(0, 0, 0, .2), inset 0 -3px 4px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .3);
    }
    .page > .page-header {
        background-image: var(--page-header-light) !important;
        box-shadow: var(--page-header-shadow) !important;
    }
    .page > .scroll-area {
        background-image: var(--scroll-panel-light) !important;
        box-shadow: var(--scroll-panel-shadow) !important;
    }
    .top-bar {
        background-image: var(--site-header-light) !important;
        box-shadow: var(--site-header-shadow) !important;
    }
    html.user-high-contrast {
        --page-header-light: none;
        --page-header-shadow: none;
        --scroll-panel-light: none;
        --scroll-panel-shadow: none;
        --site-header-light: none;
        --site-header-shadow: none;
    }
}

/* Search, registration, and popup fields share recessed lighting. */
@layer search-depth {
    :root {
        --search-face-light: linear-gradient(180deg, rgba(24, 12, 20, .04), transparent 42%, rgba(255, 255, 255, .18));
        --search-field-shadow: inset 0 2px 4px rgba(24, 12, 20, .18), inset 0 -1px 0 rgba(255, 255, 255, .75), 0 1px 0 rgba(255, 255, 255, .35), 0 3px 6px rgba(24, 12, 20, .14);
        --search-focus-ring: 0 0 0 2px rgba(151, 61, 96, .5);
        --search-focused-shadow: var(--search-field-shadow), var(--search-focus-ring);
    }
    html[data-appearance="night"] {
        --search-face-light: linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 42%, rgba(255, 255, 255, .06));
        --search-field-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .18), 0 1px 0 rgba(255, 255, 255, .1), 0 3px 6px rgba(0, 0, 0, .25);
    }
    :is(input[type="search"], #searchInput, .global-search-input, .search-container input, .legend-page-search input),
    #createAccountForm input,
    :where(dialog, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
        textarea,
        select
    ) {
        background-image: var(--search-face-light) !important;
        box-shadow: var(--search-field-shadow) !important;
    }
    :is(input[type="search"], #searchInput, .global-search-input, .search-container input, .legend-page-search input):focus,
    #createAccountForm input:focus,
    :where(dialog, .confirmation-box, .fulfill-form, .modal-content, .popup-content, .profile-image-preview-box) :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
        textarea,
        select
    ):focus {
        box-shadow: var(--search-focused-shadow) !important;
    }
    html.user-high-contrast {
        --search-face-light: none;
        --search-field-shadow: none;
        --search-focus-ring: 0 0 0 2px currentColor;
        --search-focused-shadow: var(--search-focus-ring);
    }
}

/* One relief treatment for static and dynamically rendered button styles.
   Layered importance lets the lighting sit over the existing button palettes. */
@layer button-depth {
    :root {
        --button-face-light: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 45%, rgba(24, 12, 20, .18));
        --button-pressed-face: linear-gradient(180deg, rgba(24, 12, 20, .12), rgba(255, 255, 255, .06));
        --button-raised-shadow: inset 0 1px 2px rgba(255, 255, 255, .8), inset 0 -2px 3px rgba(24, 12, 20, .24), 0 3px 4px rgba(38, 18, 28, .22), 0 5px 7px rgba(38, 18, 28, .18);
        --button-hover-shadow: inset 0 1px 2px rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(24, 12, 20, .26), 0 3px 5px rgba(38, 18, 28, .26), 0 6px 10px rgba(38, 18, 28, .24);
        --button-pressed-shadow: inset 0 2px 4px rgba(24, 12, 20, .28), inset 0 -1px 0 rgba(255, 255, 255, .25), 0 1px 1px rgba(38, 18, 28, .14);
    }
    html[data-appearance="night"] {
        --button-face-light: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 45%, rgba(0, 0, 0, .18));
        --button-raised-shadow: inset 0 1px 2px rgba(255, 255, 255, .28), inset 0 -2px 3px rgba(0, 0, 0, .4), 0 3px 4px rgba(0, 0, 0, .4), 0 4px 7px rgba(0, 0, 0, .3);
        --button-hover-shadow: inset 0 1px 2px rgba(255, 255, 255, .4), inset 0 -2px 3px rgba(0, 0, 0, .42), 0 3px 5px rgba(0, 0, 0, .45), 0 5px 10px rgba(0, 0, 0, .38);
    }
    :is(button, .post-attachment-action, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], details > summary),
    input[type="file"]::file-selector-button {
        background-image: var(--button-face-light) !important;
        box-shadow: var(--button-raised-shadow) !important;
        text-shadow: 0 1px 1px rgba(24, 12, 20, .12) !important;
        transition: box-shadow 120ms ease, filter 160ms ease;
    }
    :root :is(.follow-main-button, .profile-follow-button, .save-main-button) {
        transition: background-color var(--legend-open-duration, 480ms) var(--legend-motion-easing, ease),
            border-color var(--legend-open-duration, 480ms) var(--legend-motion-easing, ease),
            color var(--legend-open-duration, 480ms) var(--legend-motion-easing, ease),
            box-shadow 120ms ease, filter 160ms ease !important;
    }
    html.user-reduced-motion :is(.follow-main-button, .profile-follow-button, .save-main-button) { transition: none !important; }
    @media (prefers-reduced-motion: reduce) {
        :root :is(.follow-main-button, .profile-follow-button, .save-main-button) { transition: none !important; }
    }
    :is(button, .post-attachment-action, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], details > summary):hover:not(:disabled):not([aria-disabled="true"]),
    input[type="file"]:not(:disabled)::file-selector-button:hover {
        box-shadow: var(--button-hover-shadow) !important;
    }
    :is(button, .post-attachment-action, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], details > summary):active:not(:disabled):not([aria-disabled="true"]),
    input[type="file"]:not(:disabled)::file-selector-button:active {
        background-image: var(--button-pressed-face) !important;
        box-shadow: var(--button-pressed-shadow) !important;
        translate: var(--button-pressed-offset, 0 1px);
    }
    :is(button, [role="button"])[aria-pressed="true"],
    details[open] > summary {
        box-shadow: var(--button-pressed-shadow) !important;
    }
    :is(button, .post-attachment-action, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], details > summary):is(:disabled, [aria-disabled="true"]),
    input[type="file"]:disabled::file-selector-button {
        background-image: none !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
        text-shadow: none !important;
        translate: none;
    }

    /* Put the avatar lighting above the photo, including cropped/zoomed images. */
    #topBarProfileButton,
    .profile-avatar-area > .large-anonymous-avatar {
        --avatar-raised-shadow: 0 2px 2px rgba(24, 12, 20, .28), 0 4px 8px rgba(24, 12, 20, .24);
        --avatar-hover-shadow: 0 3px 3px rgba(24, 12, 20, .3), 0 6px 12px rgba(24, 12, 20, .28);
        position: relative;
        isolation: isolate;
        box-shadow: var(--avatar-raised-shadow) !important;
    }
    .profile-avatar-area > .large-anonymous-avatar {
        --avatar-raised-shadow: 0 3px 3px rgba(24, 12, 20, .22), 0 8px 18px rgba(24, 12, 20, .24);
        --avatar-hover-shadow: 0 4px 4px rgba(24, 12, 20, .24), 0 10px 22px rgba(24, 12, 20, .28);
    }
    #profile .profile-gallery-image-frame {
        background-image: none !important;
        box-shadow: none !important;
    }
    #topBarProfileButton::after,
    .profile-gallery-image-frame::after,
    .profile-avatar-area > .large-anonymous-avatar::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(145deg, rgba(255, 255, 255, .22), transparent 38%, transparent 65%, rgba(24, 12, 20, .16));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -3px 4px rgba(24, 12, 20, .35);
    }
    #topBarProfileButton:hover,
    .profile-avatar-area > .large-anonymous-avatar:hover {
        box-shadow: var(--avatar-hover-shadow) !important;
    }
    #topBarProfileButton:active,
    .profile-avatar-area > .large-anonymous-avatar:active {
        box-shadow: var(--button-pressed-shadow) !important;
    }

    /* The favorite star has no square raised face behind the contact avatar. */
    :is(#profile, #profileSettings) :is(button, a).profile-id-copy {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: var(--profile-background-text-shadow, none) !important;
        translate: none !important;
    }
    :is(#profile, #profileSettings) button.profile-id-copy-hint {
        background-image: none !important;
        box-shadow: 0 3px 12px #0002 !important;
        text-shadow: none !important;
        translate: none !important;
    }

    :is(#contactDirectory, .profile-contact-list) .contact-favorite-star {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        translate: none;
    }

    /* Message usernames stay flat, including inherited heading text shadows. */
    #messages :is(.inbox-thread-identity, .message-thread-summary-info, .user-reference-name, .anonymous-name-button) {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        translate: none;
    }

    /* Post authors stay plain clickable text, including hover and press. */
    .page > .scroll-area .request-user button.anonymous-name-button,
    .page > .scroll-area :is(.request-card, .posted-request-card, .fulfilled-request-item, .personal-request-message-card) button.user-reference-name {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        translate: none;
    }

    /* Contact usernames remain plain text links, without a glass button face. */
    :is(#contactDirectory, .profile-contact-list) :is(.contact-identity-text[role="button"], .profile-contact-name) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        translate: none;
    }

    /* Keep legend tabs flat while other buttons retain their relief. */
    #mainSidebar button {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        translate: none;
    }
    #mainSidebar .legend-opening-surface {
        box-shadow: none !important;
    }
    #sidebarToggleButton {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        translate: none;
    }

    html.user-high-contrast {
        --button-face-light: none;
        --button-pressed-face: none;
        --button-raised-shadow: none;
        --button-hover-shadow: none;
        --button-pressed-shadow: none;
        --button-pressed-offset: none;
    }
    html.user-high-contrast :is(button, .post-attachment-action, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], details > summary, .legend-opening-surface),
    html.user-high-contrast #mainSidebar :is(button, .legend-opening-surface),
    html.user-high-contrast #sidebarToggleButton,
    html.user-high-contrast input[type="file"]::file-selector-button {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        translate: none;
    }
    html.user-high-contrast #topBarProfileButton,
    html.user-high-contrast .profile-avatar-area > .large-anonymous-avatar {
        box-shadow: none !important;
    }
    html.user-high-contrast #topBarProfileButton::after,
    html.user-high-contrast .profile-gallery-image-frame::after,
    html.user-high-contrast .profile-avatar-area > .large-anonymous-avatar::after {
        background: none;
        box-shadow: none;
    }
}

/* Match existing guest notices to the Settings card. */
.sign-in-notice-container {
    box-sizing: border-box;
    width: 100%;
}
html:not([data-appearance="night"]):not(.user-high-contrast) .page .sign-in-notice {
    background: rgba(255, 255, 255, 0.58);
    color: #1f2933;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
}
.page .sign-in-notice {
    text-align: left;
}

/* Signed-out account controls occupy the avatar position beside Compose. */
#profile .profile-detail-action-button,
#profileSettings .profile-detail-action-button {
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid #497bc8;
    border-radius: 8px;
    background-color: #6395EE;
    color: #fff;
    line-height: 1.4;
}
#profile .profile-detail-action-button:hover:not(:disabled),
#profileSettings .profile-detail-action-button:hover:not(:disabled) {
    background-color: #527fd0;
}
.profile-detail-action-button:focus-visible {
    outline: 2px solid #FFE082;
    outline-offset: 3px;
}

.top-bar-guest-actions:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}
.top-bar-guest-actions[hidden] { display: none; }
#topBarGuestActions > button {
    box-sizing: border-box;
    min-width: 74px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    line-height: 20px;
    white-space: nowrap;
}
#topBarGuestActions > .top-bar-sign-in { background-color: #6395EE; }
#topBarGuestActions > .top-bar-sign-up { background-color: #4f7f62; }
#topBarGuestActions > button:hover { filter: brightness(0.85); }
@media (max-width: 750px) {
    .top-bar:has(#topBarGuestActions:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    .top-bar:has(#topBarGuestActions:not([hidden])) :is(.top-bar-actions, .site-language-control) {
        grid-column: 2;
    }
    .top-bar:has(#topBarGuestActions:not([hidden])) .top-bar-compose-button {
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        padding: 0 12px;
    }
}

/* Card face colors are independent of the displayed purpose labels. */
@layer request-card-colors {
    html:not([data-appearance="night"]):not(.user-high-contrast) #profile .profile-stat[data-profile-list="requests"] {
        background: #DEEFFF !important;
        color: #1f2933 !important;
    }
    html:not([data-appearance="night"]):not(.user-high-contrast) #profile .profile-stat[data-profile-list="offersPosted"] {
        background: #E0F6E5 !important;
        color: #1f2933 !important;
    }
    html:not([data-appearance="night"]):not(.user-high-contrast) .post-purpose-badge.request-post-badge {
        background-color: #91C4E6 !important;
        border-color: #8eb8da !important;
        color: #174f7a !important;
    }
    html:not([data-appearance="night"]):not(.user-high-contrast) .post-purpose-badge.offer-post-badge {
        background-color: #C2E5CC !important;
        border-color: #8fc49e !important;
        color: #23643a !important;
    }
    html:not([data-appearance="night"]):not(.user-high-contrast) :is(.request-card, .posted-request-card, .fulfilled-request-item, .personal-request-message-card, .uploads-library-card[data-upload-source-kind="request"]):not(.offer-post-card):not(.personal-offer-post-message-card) {
        background-color: #DEEFFF !important;
        color: #1f2933 !important;
    }
    html:not([data-appearance="night"]):not(.user-high-contrast) :is(.offer-post-card, .personal-offer-post-message-card, .uploads-library-card[data-upload-source-kind="offer"]) {
        --scroll-card-shadow: 0 2px 1px rgba(24, 12, 20, .2), 0 6px 12px rgba(24, 12, 20, .18);
        background-color: #E0F6E5 !important;
        background-image: none !important;
        color: #1f2933 !important;
    }
}

/* Post Message actions match conversation containers. */
/* Other-user profile headers use the matching post action palettes. */
#profile .profile-header-settings .profile-follow-button { --page-header-button-background: #3f6f9f; }
#profile .profile-header-settings .profile-follow-button:hover:not(:disabled) { --page-header-button-background: #345e88; }

@layer request-card-colors {
    #profile .profile-follow-button.profile-mutual-label {
        color: #D21F3C !important;
        border-color: #D21F3C !important;
        background: #FFFFFF !important;
    }
    #profile .profile-follow-button.profile-mutual-label:hover:not(:disabled) {
        background: #FBE9ED !important;
    }
}
#profile .profile-header-settings .profile-message-button { --page-header-button-background: #FB978B; }
#profile .profile-header-settings .profile-message-button:hover:not(:disabled) { --page-header-button-background: #E98478; }
#profile .profile-header-settings .profile-user-options-toggle { --page-header-button-background: #290916; }
.save-main-button::before {
    content: "★";
    color: #FFE082;
    display: inline-block;
    margin-inline-end: 4px;
}
:is(.request-card, .posted-request-card, .personal-request-message-card) :is(.follow-main-button:not(.post-mutual-label), .feed-follow-action-button)::before,
.fulfillment-follow-button:not(.post-mutual-label)::before {
    content: "👥";
    display: inline-block;
    flex: 0 0 auto;
    margin-inline-end: 4px;
    filter: brightness(.5);
}
.feed-message-action-button::before,
#profile .profile-avatar-actions .profile-message-button::before {
    content: "✉";
    color: #7DE2E6;
    display: inline-block;
    margin-inline-end: 4px;
}
:is(.feed-purchase-action-button, .fulfillment-purchase-button:not(:disabled), .fulfill-main-button, .feed-buyers-action-button,
    .feed-owner-fulfillments-button, .posted-fulfillment-dropdown-button):not(.post-draft-toggle):not(.saved-post-continue-draft-button)::before {
    content: "$";
    color: #98FB98;
    display: inline-block;
    flex: 0 0 auto;
    margin-inline-end: 4px;
}
@layer post-action-palette {
    .feed-post-buyers-panel,
    .feed-request-fulfillments-list,
    .post-message-notifications,
    .payment-submissions-panel,
    .payment-drafts-panel {
        background: #48AAAD !important;
        border-color: #48AAAD !important;
        color: #000000 !important;
    }
    .blurred-purchase-confirm-popup .site-popup-primary-button,
    .blurred-purchase-confirm-popup .site-popup-primary-button:hover:not(:disabled),
    :is(.feed-purchase-action-button, .fulfillment-purchase-button, .fulfill-main-button, .post-attachment-action, .feed-owner-fulfillments-button, .feed-buyers-action-button, .feed-post-notifications-button, .finance-balance-actions .finance-primary-button),
    :is(.feed-purchase-action-button, .fulfillment-purchase-button, .fulfill-main-button, .post-attachment-action, .feed-owner-fulfillments-button, .feed-buyers-action-button, .feed-post-notifications-button, .finance-balance-actions .finance-primary-button):hover:not(:disabled) {
        background-color: #48AAAD !important;
        border-color: #48AAAD !important;
        color: #ffffff !important;
    }
    .site-share-button,
    .feed-message-action-button,
    #messages #newMessageButton,
    #profile .profile-message-button {
        background-color: var(--page-header-button-background, #FB978B) !important;
        border-color: var(--page-header-button-background, #FB978B) !important;
        color: #40211e !important;
    }
    .site-share-button:hover:not(:disabled),
    .feed-message-action-button:hover:not(:disabled),
    #messages #newMessageButton:hover:not(:disabled),
    #profile .profile-message-button:hover:not(:disabled) {
        background-color: var(--page-header-button-background, #E98478) !important;
        border-color: var(--page-header-button-background, #E98478) !important;
    }
    /* Save and Follow share the same blue face in all interaction states. */
    .notification-item.notification-follow,
    .global-view-button,
    :is(.save-main-button, .site-save-button,
        .follow-main-button:not(.post-mutual-label), .profile-follow-button,
        .feed-follow-action-button, .contact-suggestion-follow, .contact-following-dropdown > summary,
        .message-edit-save-button, .profile-image-adjust-save,
        #saveRequestDraftButton),
    #profile .profile-stat:is([data-profile-list="followers"], [data-profile-list="following"]) {
        background-color: #82A3FF !important;
        border-color: #82A3FF !important;
        color: #1f2933 !important;
    }
    .notification-item.notification-follow :is(.notification-message, .notification-time) {
        color: #1f2933 !important;
    }
    :is(.site-refresh-button, .site-page-refresh, .feed-refresh-button,
        .site-page-back, .profile-stat-back-button, .profile-visit-back,
        .feed-request-fulfillments-close-button) {
        background-color: #FFF1E6 !important;
        border-color: #FFF1E6 !important;
        color: #1f2933 !important;
    }
}

/* Options paint in the top layer, outside card and scroll-panel clipping. */
html body .post-options-menu[popover] {
    position: fixed;
    inset: auto;
    left: 0;
    top: 0;
    transform: translate3d(var(--post-options-left, 12px), var(--post-options-top, 12px), 0) translateY(var(--post-options-translate-y, 0%));
    will-change: transform;
    width: min(280px, calc(100vw - 24px));
    width: min(280px, calc(100dvw - 24px));
    max-width: calc(100vw - 24px) !important;
    max-height: var(--post-options-max-height, calc(100dvh - 24px));
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.post-options-menu[popover]::backdrop { background: transparent; pointer-events: none; }
html body .post-options-menu[popover][data-post-options-anchor] {
    left: clamp(12px, calc(anchor(right) - 280px), max(12px, calc(100dvw - 292px)));
    top: calc(anchor(bottom) + 6px);
    bottom: auto;
    transform: translateZ(0);
}
html body .post-options-menu[popover][data-post-options-anchor][data-post-options-side="above"] {
    top: auto;
    bottom: calc(anchor(top) + 6px);
}
/* Post menus share their post's native scrolling and overscroll movement. */
/* Keep the card edge clean when dropdowns raise it above neighboring posts.
   Retain border widths so opening a menu cannot shift the card's contents. */
html:not(.user-high-contrast) :is(.request-card, .posted-request-card, .personal-request-message-card, .fulfilled-request-item) {
    --scroll-card-shadow: inset -1px 0 1px rgba(24, 12, 20, .08),
        inset 0 -3px 3px rgba(24, 12, 20, .14),
        0 2px 1px rgba(24, 12, 20, .2), 0 6px 12px rgba(24, 12, 20, .18);
}
html:not(.user-high-contrast) :is(.request-card, .posted-request-card, .personal-request-message-card, .fulfilled-request-item):not(.own-feed-post) {
    border-color: transparent !important;
}
@layer attached-post-options {
    .post-options-menu[data-post-options-attached] {
        position: absolute !important;
        inset: auto !important;
        left: 0 !important;
        top: 0 !important;
        transform: translate3d(var(--post-options-left, 0px), var(--post-options-top, 0px), 0) translateY(var(--post-options-translate-y, 0%)) !important;
        box-sizing: border-box;
        width: max-content !important;
        max-width: var(--post-options-available-width, calc(100dvw - 24px)) !important;
        max-height: var(--post-options-max-height, calc(100dvh - 24px));
        margin: 0 !important;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
        z-index: 203;
    }
    :is(.request-card, .posted-request-card, .personal-request-message-card):has(.post-options-menu[data-post-options-attached]:is(:not([hidden]), [data-dropdown-motion])) {
        overflow: visible !important;
        z-index: 203 !important;
    }
}
/* Long management labels wrap within the floating panel instead of clipping. */
html body .feed-post-action-column .post-options-menu:is([popover], [data-post-options-attached]) button,
html body .feed-post-action-column .post-options-menu:is([popover], [data-post-options-attached]) label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Profile navigation appears on the image without toggling the conversation. */
#messages .message-thread-profile-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#messages .message-thread-profile-link > .message-thread-profile-view {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: max-content;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 2px 6px;
    border: 1px solid #6395EE;
    border-radius: 10px;
    background-color: #6395EE;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}
#messages .message-thread-profile-link:is(:hover, :focus-within) > .message-thread-profile-view {
    opacity: 1;
    pointer-events: auto;
}
@media (hover: none) {
    #messages .message-thread-profile-link > .message-thread-profile-view { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    #messages .message-thread-profile-link > .message-thread-profile-view { transition: none; }
}
html.user-reduced-motion #messages .message-thread-profile-view { transition: none; }

#profile .profile-message-composer {
    width: 100%;
    margin: 16px 0;
}
#profile .profile-message-composer textarea {
    background-color: var(--entry-field-background, #F8EEEC);
    color: var(--entry-field-text, #263238);
    border: 1px solid #c9bdbb;
    border-radius: 8px;
    background-image: var(--search-face-light);
    box-shadow: var(--search-field-shadow);
}
#profile .profile-message-composer textarea::placeholder { color: var(--entry-field-placeholder, #59636d); }
#profile .profile-message-composer textarea:focus-visible {
    outline: 2px solid #973D60;
    outline-offset: 2px;
}

/* Scroll the whole filter, including its actions, within the available space. */
html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) {
    max-height: min(75vh, var(--filter-menu-available-height, 75vh)) !important;
    max-height: min(75dvh, var(--filter-menu-available-height, 75dvh)) !important;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scroll-padding-block: 8px;
}
html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) > * {
    flex-shrink: 0;
}

/* Confirmation action spans the bottom of every filter layout. */
html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) .set-filter-button {
    grid-column: 1 / -1;
    flex: 0 0 100%;
    width: 100%;
    min-height: 36px;
    margin-top: 8px;
    text-align: center;
    font-weight: 800;
    background-color: #6395EE !important;
    border: 1px solid #4e7ac5;
    border-radius: 6px;
    color: #fff !important;
}
html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) .set-filter-button:hover {
    background-color: #527fd0 !important;
    color: #fff !important;
}

/* Distinguish clearing filters from confirming selections. */
html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions, .global-map-filter-menu) .clear-filter-button {
    background-color: #BC544B !important;
    border: 1px solid #9f423a;
    border-radius: 6px;
    color: #fff !important;
    text-align: center;
}
html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions, .global-map-filter-menu) .clear-filter-button:hover {
    background-color: #a7473f !important;
    color: #fff !important;
}

html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) > .filter-menu-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 8px;
}
html body :is(.feed-header-filter-menu, .my-posts-filter-menu, #notificationFilterOptions, #messagesFilterOptions, #uploadsFilterOptions) > .filter-menu-actions > button {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 8px 12px;
}

.category-privacy-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.post-purpose-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0;
}
.post-purpose-choices .post-purpose-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin: 0;
    border: 2px solid #c9bdbb;
    border-radius: 8px;
    background: #F8EEEC;
    color: #263238;
    box-shadow: var(--button-raised-shadow);
}
.post-purpose-choices .post-purpose-choice:has(:checked) {
    border-color: #973D60;
}
.post-purpose-choices .post-purpose-choice:has(input[value="buy"]) {
    background-color: #DEEFFF;
}
.post-purpose-choices .post-purpose-choice:has(input[value="sell"]) {
    background-color: #E0F6E5;
}
@media (hover: hover) {
    .post-purpose-choices .post-purpose-choice:has(input[value="buy"]):hover {
        background-color: #BEDBF5;
    }
    .post-purpose-choices .post-purpose-choice:has(input[value="sell"]):hover {
        background-color: #C4E5CC;
    }
}
.post-purpose-choices .post-purpose-choice:focus-within {
    outline: 2px solid #973D60;
    outline-offset: 2px;
}
html[data-page-background="starfield"] :is(#compose, #composePost) #postPurposeChoices :is(.post-purpose-choice, .post-purpose-choice > span) {
    color: #000000 !important;
    text-shadow: none !important;
}
.post-purpose-choices input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    flex: 0 0 18px;
    margin: 0;
    accent-color: #973D60;
}
@media (max-width: 480px) {
    .post-purpose-choices { grid-template-columns: 1fr; }
}

#messageRecipientSearch {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid #c9bdbb;
    border-radius: 8px;
}
#messageRecipientList {
    max-height: 300px;
    max-height: min(300px, 40dvh);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #c9bdbb;
    border-radius: 8px;
    background: #F8EEEC;
    color: #263238;
}
#newMessagePanel .message-recipient-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 8px;
    margin: 0;
    border-radius: 8px;
}
#newMessagePanel .message-recipient-option[hidden] { display: none; }
#newMessagePanel .message-recipient-option:hover { background: #eee0dc; }
#newMessagePanel .message-recipient-option:has(:checked) { background: #dcecf7; }
#newMessagePanel .message-recipient-option:focus-within { outline: 2px solid #973D60; outline-offset: -2px; }
#newMessagePanel .message-recipient-option > input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: #973D60;
}
#newMessagePanel .message-recipient-avatar {
    flex-shrink: 0;
}
#newMessagePanel .message-recipient-name {
    min-width: 0;
    overflow-wrap: anywhere;
}
#messageRecipientSelect[hidden] { display: none !important; }
#newMessagePanel .message-recipient-avatar[class*="profile-image-shape-"] {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 48px !important;
}

/* Extra group participants retain the shape chosen on their profile. */
#messages .message-thread-group-avatar[class*="profile-image-shape-"] {
    --group-avatar-width: 50px;
    --group-avatar-height: 50px;
    width: var(--group-avatar-width) !important;
    min-width: var(--group-avatar-width) !important;
    max-width: var(--group-avatar-width) !important;
    height: var(--group-avatar-height) !important;
    min-height: var(--group-avatar-height) !important;
    max-height: var(--group-avatar-height) !important;
    flex: 0 0 var(--group-avatar-width) !important;
    border-radius: 0 !important;
}
#messages .message-thread-group-avatar.profile-image-shape-circle { border-radius: 50% !important; }
#messages .message-thread-group-avatar.profile-image-shape-portrait { --group-avatar-width: 40px; }
#messages .message-thread-group-avatar.profile-image-shape-horizontal { --group-avatar-height: 28.125px; }
#messages .message-thread-group-avatar img { border-radius: 0 !important; }

/* The header button's gap already separates its label and arrow. */
#newMessageButton[aria-expanded]::after {
    margin-left: 0;
}

/* A passing UFO casts a soft shade over actionable buttons. */
@media (hover: hover) {
    html body :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], details > summary):hover:not(:disabled):not([aria-disabled="true"]):not(:is(
        #mainSidebar *,
        .compose-button,
        .top-bar-compose-opening *,
        #topBarProfileButton,
        .top-bar-profile-opening *,
        .anonymous-avatar-button,
        .user-reference-avatar,
        .large-anonymous-avatar,
        [class*="profile-image-shape-"],
        .global-search-container *,
        .search-container *,
        .legend-page-search *,
        :has(.user-reference-avatar, .large-anonymous-avatar, .request-profile-image, .user-reference-avatar-image)
    )) {
        filter: brightness(0.85);
    }
    input[type="file"]:not(:disabled)::file-selector-button:hover { filter: brightness(0.85); }
    .profile-background-undo-button:hover { filter: brightness(0.85); }
}

/* Compact thread summaries; keep group participants on one scrollable row. */
#messages .inbox-thread-tools { padding: 6px 10px 4px; gap: 4px; }
#messages .inbox-thread-meta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 8px;
    padding: 4px 12px 8px;
}
#messages .inbox-thread-preview {
    grid-column: 1 / -1;
    margin: 0;
    -webkit-line-clamp: 2;
}
#messages .inbox-thread-meta > .message-thread-time { grid-column: 1; }
#messages .message-thread-shell:has(> .message-thread-dropdown:not([open])) > .inbox-thread-meta::after {
    grid-column: 2;
    grid-row: 2;
    font-size: 10px;
    text-align: right;
}
#messages .inbox-thread-identity .message-thread-summary-info { gap: 4px; }
#messages .message-thread-group-avatars {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0 !important;
    box-sizing: border-box;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 3px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #973D60 transparent;
}
#messages .message-thread-group-avatars:focus-visible {
    outline: 2px solid #973D60;
    outline-offset: 2px;
    border-radius: 6px;
}
#messages .inbox-thread-tools { padding-left: 8px; padding-right: 8px; }
#messages .inbox-thread-header-actions { margin-right: 4px; }
#messages .message-thread-group-avatars { padding-left: 0; padding-right: 0; }
@media (max-width: 600px) {
    #messages .inbox-thread-tools { padding-left: 6px; padding-right: 6px; }
    #messages#messages .inbox-thread-header-actions .inbox-thread-options > summary {
        padding: 4px !important;
        font-size: 12px !important;
    }
}

/* Shared Options, Edit and Filters palette, including hover and expanded states. */
@layer options-button-palette {
    :root { --options-control-background: #CBC3E3; }
    :is(.post-options-toggle, .profile-user-options-toggle,
        #notificationOptions > summary, .notification-card-options > summary,
        .inbox-thread-options > summary, .contact-card-options > summary,
        .contact-options-dropdown > summary, .discovery-options > summary,
        .saved-post-options > summary) {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: max-content !important;
    }
    :is(.post-options-toggle, .profile-user-options-toggle,
        #notificationOptions > summary, .notification-card-options > summary,
        .inbox-thread-options > summary, .contact-card-options > summary,
        .contact-options-dropdown > summary, .discovery-options > summary,
        .saved-post-options > summary),
    :is(.post-options-toggle, .profile-user-options-toggle,
        #notificationOptions > summary, .notification-card-options > summary,
        .inbox-thread-options > summary, .contact-card-options > summary,
        .contact-options-dropdown > summary, .discovery-options > summary,
        .saved-post-options > summary) > span {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        flex-shrink: 0 !important;
    }
    :is(
        .post-options-toggle,
        .post-edit-toggle,
        .unified-compose-actions:has(#draftComposePostButton[hidden]) #publishComposePostButton,
        .unfollow-option,
        .profile-unfollow-option,
        .unsave-option,
        .description-more-toggle,
        .feed-header-filter-button,
        .my-posts-filter-button,
        .notification-filter > summary,
        .site-language-control > summary,
        #profile .profile-settings-toggle,
        #profile .profile-header-sign-out-button,
        #profile .profile-background-edit-button,
        .profile-user-options-toggle,
        #notificationOptions > summary,
        .notification-card-options > summary,
        .inbox-thread-options > summary,
        .contact-card-options > summary,
        .contact-options-dropdown > summary,
        .discovery-options > summary,
        .saved-post-options > summary
    ) {
        background-color: var(--options-control-background) !important;
        border-color: var(--options-control-background) !important;
        color: #263238 !important;
    }

    :is(
        .post-options-menu,
        .post-edit-menu,
        .profile-user-options-menu,
        .contact-options-menu,
        .notification-filter > .notification-filter-options,
        .discovery-options[open],
        .saved-post-options[open],
        .feed-header-filter-menu,
        .my-posts-filter-menu,
        .contacts-filter-menu,
        .global-map-filter-menu,
        .site-language-panel
    ) {
        background-color: var(--options-control-background) !important;
        background-image: none !important;
        border-color: var(--options-control-background) !important;
        color: #263238 !important;
    }

    /* Let ordinary menu rows show their panel's color while keeping action states. */
    :is(
        .profile-user-options-menu,
        .contact-options-menu,
        .notification-filter > .notification-filter-options,
        .discovery-options[open],
        .saved-post-options[open]
    ) > button:not(:hover):not([aria-pressed="true"]):not(.active):not(.clear-filter-button):not(.set-filter-button) {
        background-color: transparent !important;
    }
}

/* Open conversations no longer need the preview row below their profile images. */
#messages .message-thread-shell:has(> .message-thread-dropdown[open]) > .inbox-thread-meta {
    display: none;
}
#messages .message-thread-shell:has(> .message-thread-dropdown[open]) > .inbox-thread-header {
    align-items: center;
}
#messages .message-thread-shell:has(> .message-thread-dropdown[open]) > .inbox-thread-header > .inbox-thread-tools {
    padding-top: 6px;
    padding-bottom: 6px;
}
#messages .message-thread-shell:has(> .message-thread-dropdown[open]) .inbox-thread-header-actions {
    width: 90px;
    min-width: 0;
    gap: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
}
#messages .inbox-thread-header-actions > .inbox-thread-close-prompt {
    width: 100%;
    margin: 0;
    font-size: 10px;
    line-height: 12px;
    text-align: right;
}

.conditional-form .settings-check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}
.conditional-form input[type="checkbox"] { width: 18px; flex: 0 0 18px; margin-top: 3px; }
.conditional-post-terms { margin: 12px; padding: 12px; border: 1px solid rgba(78, 7, 7, .25); border-radius: 12px; }
.conditional-post-terms p { margin: 6px 0; font-size: 13px; }
.conditional-post-terms button { margin: 6px 6px 0 0; }
.conditional-overlay { z-index: 100000; box-sizing: border-box; padding: 12px; }
.conditional-form > h2 { display: block !important; }
.conditional-form { box-sizing: border-box; width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; background-color: #F4A383; }
.conditional-form button { background-color: #48AAAD; color: #14272a; border-radius: 8px; padding: 8px 12px; margin: 8px 8px 0 0; }
.conditional-form > .conditional-close { background-color: #6395EE; color: white; margin-top: 0; }
.conditional-form :is(input:not([type="checkbox"]), textarea, select) {
    box-sizing: border-box; width: 100%; background-color: #F8EEEC; color: #222;
    border: 1px solid rgba(78, 7, 7, .28); border-radius: 8px; padding: 10px;
    box-shadow: inset 0 2px 3px rgba(30, 10, 20, .18), 0 1px 0 rgba(255, 255, 255, .55);
}
.conditional-form textarea { min-height: 84px; resize: vertical; }
.conditional-form label { margin-top: 12px; }
.conditional-media { margin: 12px 0; }
.conditional-media img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 8px; }
.conditional-media a { display: inline-block; margin-top: 8px; }
.custom-work-options { margin: 16px 0; padding: 12px; border: 1px solid #973D60; border-radius: 12px; min-width: 0; }
.custom-work-options legend { font-weight: 700; }
.custom-work-options p { font-size: 13px; line-height: 1.5; }
.custom-work-options .settings-check { display: flex; align-items: center; gap: 8px; }
.custom-work-options .settings-check input { width: auto; margin: 0; }
@media (max-width: 600px) {
    #messages .message-thread-shell:has(> .message-thread-dropdown[open]) .inbox-thread-header-actions {
        width: 72px;
    }
}

/* Keep pointer tracking and the continuous rotation on separate elements. */
html.ufo-cursor-active { --ufo-cursor: none; }
html.ufo-cursor-active, html.ufo-cursor-active * { cursor: none !important; }
.ufo-cursor {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    visibility: hidden;
    pointer-events: none !important;
    user-select: none;
    z-index: 2147483647;
    will-change: transform;
}
.ufo-cursor.is-visible { visibility: visible; }
#ufoCursor::backdrop { background: transparent; pointer-events: none !important; }
#ufoCursor > :is(img, canvas) {
    display: block;
    width: 36px;
    height: 36px;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none !important;
}
#ufoCursor.has-solid-model > img { display: none; }

/* Match the title and legend lettering to the search field's warm ivory. */
.top-bar .site-title-search > h1,
.app-layout #sidebarToggleButton,
.app-layout #sidebarToggleButton > span,
.app-layout #mainSidebar button,
html .app-layout #mainSidebar :is(button.legend-selected, #siteAssistantToggle),
.app-layout #mainSidebar .nav-main-button > span:not(.compact-legend-icon),
.app-layout #mainSidebar .dropdown-menu > button > span,
.app-layout #mainSidebar .notifications-label :is(.notifications-text, .notification-count) {
    color: #F8EEEC !important;
}

/* The title and search share the left column; actions stay on the right. */
.page > .page-header.has-page-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
}
.page > .page-header.has-page-search > .page-header-content {
    grid-column: 1;
    grid-row: 1 / span 3;
    justify-self: stretch;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--page-section-gap, 20px);
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}
.page > .page-header.has-page-search > .page-header-content > :is(h2, .feed-title-group, .legend-page-search) {
    margin: 0 !important;
    min-width: 0;
}
.page-header-content .legend-page-search input { min-width: 0; }

/* Draw Compose dropdown arrows in CSS so native control chrome cannot replace the UFO on hover. */
html :is(#compose, #composePost) select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default) !important;
    padding-inline-end: 36px !important;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
    background-size: 5px 5px !important;
    background-repeat: no-repeat !important;
}

/* Compose dropdowns share the search fields' color and recessed surface. */
html :is(#compose, #composePost) :is(select, details > summary) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--settings-border, #cbd5df);
    border-radius: 8px;
    background-color: var(--entry-field-background) !important;
    color: var(--entry-field-text) !important;
    cursor: var(--ufo-cursor, url("images/ufo-cursor.svg?v=smooth-chrome-239") 18 20, default) !important;
}
html :is(#compose, #composePost) details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 16px 10px 11px;
    font: inherit;
    list-style: none;
}
html :is(#compose, #composePost) details > summary::-webkit-details-marker { display: none; }
html :is(#compose, #composePost) .compose-specific-usernames > summary { font-size: 14px; }
html[data-text-size="large"] :is(#compose, #composePost) .compose-specific-usernames > summary { font-size: 17px !important; }
html[data-text-size="larger"] :is(#compose, #composePost) .compose-specific-usernames > summary { font-size: 19px !important; }
html :is(#compose, #composePost) details > summary::marker { content: ""; }
html :is(#compose, #composePost) details > summary::after {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
    pointer-events: none;
}
html :is(#compose, #composePost) details[open] > summary::after {
    transform: translateY(2px) rotate(225deg);
}

@layer search-depth {
    html :is(#compose, #composePost) :is(select, details > summary, .compose-specific-usernames textarea) {
        background-color: var(--entry-field-background) !important;
        color: var(--entry-field-text) !important;
        background-image: var(--search-face-light) !important;
        box-shadow: var(--search-field-shadow) !important;
    }
    html :is(#compose, #composePost) select:not([multiple]):not([size]) {
        background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
            linear-gradient(135deg, currentColor 50%, transparent 50%), var(--search-face-light) !important;
        background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%, 0 0 !important;
        background-size: 5px 5px, 5px 5px, 100% 100% !important;
        background-repeat: no-repeat !important;
    }
    html :is(#compose, #composePost) :is(select, details > summary, .compose-specific-usernames textarea):focus-visible {
        box-shadow: var(--search-focused-shadow) !important;
        outline: 2px solid var(--entry-field-placeholder);
        outline-offset: 2px;
    }
    html.user-high-contrast :is(#compose, #composePost) :is(select, details > summary, .compose-specific-usernames textarea) {
        background-color: #fff !important;
        color: #111 !important;
        border: 2px solid #111 !important;
    }
}
html.user-reduced-motion :is(#compose, #composePost) details > summary::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
    html :is(#compose, #composePost) details > summary::after { transition: none; }
}

/* Published attachments stay within their card and browse horizontally. */
.offer-post-media-preview.post-attachment-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    padding: 2px 2px 8px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.post-attachment-strip[hidden] { display: none !important; }
.post-attachment-strip:focus-visible { outline: 2px solid #973D60; outline-offset: 2px; }
.post-attachment-strip > .offer-post-media-item {
    flex: 0 0 min(100%, 320px);
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: start;
}
.post-attachment-strip > .offer-post-media-item:first-child { margin-inline-start: auto; }
.post-attachment-strip > .offer-post-media-item:last-child { margin-inline-end: auto; }
.post-attachment-strip .offer-post-preview-label {
    position: static;
    transform: none;
    align-self: center;
    margin: 6px;
    max-width: calc(100% - 12px);
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}
.post-attachment-strip img,
.post-attachment-strip video {
    height: 220px;
    object-fit: contain;
}
.post-attachment-strip video {
    filter: none;
    transform: none;
    pointer-events: auto;
    background: #111;
}
.post-attachment-strip audio { width: 100%; max-width: 100%; margin-block: auto; }
.post-attachment-strip .offer-post-file-preview { filter: none; box-sizing: border-box; }

/* Protected videos use still thumbnails and never expose a playable source. */
.post-attachment-strip[data-media-locked="true"] .protected-attachment-placeholder {
    min-height: 220px;
    width: 100%;
    display: grid;
    place-items: center;
    background: #dce3e8;
    color: #34424d;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
}
.post-attachment-strip[data-media-locked="true"] .protected-attachment-placeholder img {
    filter: none;
    transform: none;
    pointer-events: none;
}
.post-attachment-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 8px; }
.post-attachment-links .post-attachment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid #48AAAD;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: var(--ufo-cursor, default);
}
.post-attachment-action:focus-visible { outline: 2px solid #973D60; outline-offset: 3px; }

/* Full clipped names float above scroll containers without widening their rows. */
.overflow-name-tooltip {
    position: fixed;
    inset: auto;
    z-index: 2147483646;
    width: max-content;
    max-width: min(360px, calc(100vw - 16px));
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--settings-border, #c9bdbb);
    border-radius: 10px;
    background: var(--entry-field-background, #F8EEEC);
    color: var(--entry-field-text, #263238);
    box-shadow: 0 4px 16px rgba(38, 18, 28, .18);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: auto;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease;
}
.overflow-name-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.overflow-name-tooltip::backdrop { background: transparent; pointer-events: none; }
.overflow-name-tooltip[hidden] { display: none !important; }
html.user-reduced-motion .overflow-name-tooltip { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .overflow-name-tooltip { transition: none; transform: none; }
}

.edit-existing-upload-preview .offer-post-media-item { flex-direction: column; }
.edit-existing-upload-preview .offer-post-preview-label { position: static; transform: none; margin: 8px; white-space: normal; text-align: center; }
.remove-post-attachment-button {
    width: auto;
    margin: 8px;
    background: #eea2aa;
    color: #4f1720;
    border: 1px solid #ce7582;
    border-radius: 8px;
    padding: 8px 12px;
}
.remove-post-attachment-button:hover { background: #f4b4bb; }

@layer button-letter-color {
    #profile .profile-card.has-profile-background button.profile-id-copy {
        --readable-button-text: var(--profile-background-text) !important;
        color: var(--profile-background-text) !important;
    }
    #publishComposePostButton {
        --readable-button-text: #FFFFFF !important;
        color: #FFFFFF !important;
    }
    .unified-compose-actions:has(#draftComposePostButton[hidden]) #publishComposePostButton {
        --readable-button-text: #000000 !important;
        color: #000000 !important;
    }
    .post-attachment-action,
    .blurred-purchase-confirm-popup .site-popup-primary-button,
    .fulfillment-purchase-button {
        --readable-button-text: #FFFFFF !important;
    }
    .fulfillment-purchase-button { color: #FFFFFF !important; }
    :is(.feed-purchase-action-button, .fulfill-main-button,
        .feed-buyers-action-button, .feed-owner-fulfillments-button, .feed-post-notifications-button) {
        --readable-button-text: #000000 !important;
    }
    .finance-balance-actions .finance-primary-button {
        --readable-button-text: #000000 !important;
    }
    .contact-following-dropdown > summary {
        --readable-button-text: #000000 !important;
    }
    .post-mutual-label,
    .profile-mutual-label,
    .contact-mutual-dropdown:not(.contact-following-dropdown) > summary {
        --readable-button-text: #D21F3C !important;
    }
    #profile .profile-follow-button.profile-mutual-label,
    #profile .profile-follow-button.profile-mutual-label > span {
        color: #D21F3C !important;
        text-shadow: none !important;
    }
    [data-readable-button],
    [data-readable-button] :where(*):not(.compact-legend-icon):not(.legend-opening-surface):not(svg):not(svg *) {
        color: var(--readable-button-text) !important;
    }
    [data-readable-file-button]::file-selector-button {
        color: var(--readable-file-button-text) !important;
    }
}

/* Pending buyer payments use the same glass cards and cancel palette as other workflows. */
.payment-submissions-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.payment-submission-card { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; background: rgba(255,255,255,.58); overflow-wrap: anywhere; }
.payment-submission-card p { margin: 8px 0; }
.payment-submission-card button { width: auto; max-width: 100%; padding: 6px 10px; border-radius: 12px; }

.purchase-payment-submissions { margin: 14px 0; min-width: 0; }
.purchase-payment-drafts { margin: 14px 0; min-width: 0; }
.payment-drafts-panel { display: grid; gap: 12px; margin-top: 10px; padding: 12px; border: 1px solid; border-radius: 12px; }
.payment-drafts-panel[hidden] { display: none !important; }
.payment-submissions-panel { margin-top: 10px; padding: 12px; border: 1px solid; border-radius: 12px; }
.payment-submissions-panel .payment-submission-card { background: rgba(255, 255, 255, .58); }
.payment-submissions-panel[hidden] { display: none !important; }

.offer-fulfillment-form .payment-submissions-button {
    max-width: 100%;
    font-family: inherit;
    font-weight: 600 !important;
    white-space: nowrap;
}

/* Local Global View maps share a single accessible dialog across all three entry points. */
.global-view-button { padding: 6px 10px; border: 1px solid #487b8c; border-radius: 12px; background: #dceff1; color: #173b42; font: inherit; cursor: var(--ufo-cursor, pointer); }
.compose-location-audience > .global-view-button { width: max-content; margin: 0 0 12px; }
.global-location-dialog { --page-header-button-background: #FE7D6A; box-sizing: border-box; width: min(1120px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 20px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 16px; background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933); overflow-y: auto; }
.global-location-dialog::backdrop { background: #081c31aa; backdrop-filter: blur(3px); }
.global-location-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.global-location-header h2 { margin: 0; font-size: 23px; }
.global-location-dialog button { width: auto; min-width: 0; min-height: 34px; padding: 6px 10px; border: 1px solid #688793; border-radius: 8px; background: #e5f2f2; color: #173b42; cursor: var(--ufo-cursor, pointer); }
.global-location-dialog :is(button,input,svg):focus-visible { outline: 3px solid #973D60; outline-offset: 3px; }
.global-location-intro { margin: 12px 0; }
.global-map-toolbar { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.global-map-filters { position: relative; flex: 0 0 auto; }
.global-map-filters > summary { list-style: none; }
.global-map-filters > summary::-webkit-details-marker { display: none; }
.global-map-filters > summary::marker { content: ''; }
.global-map-filter-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 100; box-sizing: border-box; width: min(350px, calc(100vw - 64px)); max-height: min(450px, 60dvh); overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-gutter: stable; display: grid; gap: 3px; margin: 0; padding: 6px; border: 1px solid #d7d7d7; border-radius: 8px; background: #fff; color: #222; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.global-map-filters:not([open]) > .global-map-filter-menu { display: none; }
.global-map-filter-help { margin: 0; padding: 7px 10px 5px; font-size: 12px; line-height: 1.4; }
.global-map-filter-menu label { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; font-size: 12px; }
.global-map-filter-menu :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid #9ab0bc; border-radius: 6px; background: var(--entry-field-background, #F8EEEC); color: var(--entry-field-text, #263238); font: inherit; }
#globalMapFiltersMenu { --search-face-light: none; --search-field-shadow: none; --search-focused-shadow: none; }
:root #globalMapFiltersMenu :is(input, select) { background: #fff !important; color: #263238 !important; }
.global-map-filter-menu .clear-filter-button { box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.global-map-filters > summary.active { outline: 2px solid #973D60; outline-offset: 2px; }
.global-map-search { display: flex; flex: 1 1 300px; gap: 8px; min-width: 0; }
.global-map-search input { box-sizing: border-box; flex: 1 1 0; min-width: 0; width: 100%; padding: 8px 10px; border: 1px solid #9ab0bc; border-radius: 8px; background: var(--settings-surface, #fff); color: var(--settings-text, #1f2933); }
.global-map-status { margin: 12px 0; font-weight: 600; }
.global-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; }
.global-map-stage { position: relative; min-width: 0; align-self: start; overflow: hidden; border: 1px solid #92b4c6; border-radius: 12px; background: #d9eaf3; }
.global-map-country-tooltip { position: absolute; z-index: 5; box-sizing: border-box; width: max-content; max-width: min(280px, calc(100% - 16px)); padding: 6px 10px; border: 1px solid #52606d33; border-radius: 8px; background: #fffffff5; color: #1f2933; box-shadow: 0 4px 14px #081c3126; font: 13px/1.35 Arial, sans-serif; text-shadow: none; overflow-wrap: anywhere; pointer-events: none; animation: global-country-tooltip-in 120ms ease-out; }
.global-map-country-tooltip[hidden] { display: none !important; }
@keyframes global-country-tooltip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
html[data-appearance="night"] .global-map-country-tooltip { background: #1d2732f5; color: #f8eeec; border-color: #cbd5df66; }
html.user-reduced-motion .global-map-country-tooltip { animation: none; }
@media (prefers-reduced-motion: reduce) { .global-map-country-tooltip { animation: none; } }
.global-map-stage svg { display: block; width: 100%; height: auto; aspect-ratio: 2; touch-action: none; cursor: grab; user-select: none; }
.global-map-stage.is-dragging svg { cursor: grabbing; }
.global-map-ocean { fill: #d9eaf3; }
.global-map-land path { fill: #d9dfc9; stroke: #7d9986; stroke-width: .6; vector-effect: non-scaling-stroke; }
.global-map-marker { cursor: var(--ufo-cursor, pointer); }
.global-map-halo { fill: #c12d6850; pointer-events: none; }
.global-map-dot { fill: #973D60; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.global-map-marker text { fill: #fff; font-family: Arial, sans-serif; font-weight: bold; pointer-events: none; }
.global-map-marker:focus { outline: none; }
.global-map-marker:is(:hover,:focus) .global-map-dot { fill: #176273; stroke: #ffe082; stroke-width: 3; }
.global-map-sidebar { box-sizing: border-box; min-width: 0; max-height: 390px; overflow-y: auto; padding: 12px; border: 1px solid var(--settings-border, #cbd5df); border-radius: 12px; }
.global-map-sidebar h3 { margin: 0 0 10px; font-size: 17px; }
.global-map-sidebar ol { padding: 0; margin: 0; list-style: none; }
.global-map-sidebar li + li { margin-top: 8px; }
.global-map-sidebar button { width: 100%; text-align: left; overflow-wrap: anywhere; font-size: 13px; }
.global-map-selected { margin: 12px 0; padding: 10px 12px; border-left: 3px solid #973D60; background: #973d600c; overflow-wrap: anywhere; }
.global-map-note { margin: 8px 0; font-size: 13px; line-height: 1.5; }
.global-map-attribution { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; font-size: 12px; }
.global-map-attribution a { color: inherit; }
html[data-appearance="night"] .global-map-stage { background: #152f46; }
html[data-appearance="night"] .global-map-ocean { fill: #152f46; }
html[data-appearance="night"] .global-map-land path { fill: #506c65; stroke: #9bb4a3; }
@media (max-width: 720px) {
    .global-location-dialog { padding: 14px; }
    .global-location-header h2 { font-size: 19px; }
    .global-map-layout { grid-template-columns: minmax(0, 1fr); }
    .global-map-sidebar { max-height: 175px; }
    .global-map-toolbar { align-items: stretch; }
    .global-map-search { flex-basis: 100%; }
    .global-map-filters { position: static; }
    .global-map-filter-menu { left: 0; right: 0; width: auto; }
}
/* Server-backed Stripe payments in Finance. */
.payment-center { padding: 16px; margin-bottom: 16px; }
.finance-server-tools { clear: both; margin-top: 24px; padding-top: 16px; border-top: 1px solid #c9c3d8; }
.finance-server-tools > button { margin: 6px 8px 6px 0; }
/* Launch tools reuse the original section surface, headings and flush sticky edge. */
:is(.page, .payment-dialog) details.launch-section.settings-section { padding: 0; margin: 16px 0; min-width: 0; overflow: visible; border-radius: 18px !important; }
:is(.page, .payment-dialog) details.launch-section > .launch-section-heading { border-radius: 18px; background: inherit; box-sizing: border-box; min-height: 52px; padding: 14px 18px; margin: 0; font-size: 18px; line-height: 1.4; white-space: normal; }
#balance#balance .launch-section > summary.launch-section-heading { display: flex; justify-content: space-between; width: 100%; min-height: 52px; padding: 14px 18px !important; border: 0 !important; border-radius: 18px; background: var(--section-heading-surface, var(--settings-surface, #fff)) !important; font-size: 18px !important; white-space: normal; }
:is(.page, .payment-dialog) .launch-section-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
:is(.page, .payment-dialog) .launch-section-heading > .settings-disclosure-arrow { flex: 0 0 auto; }
:is(.page, .payment-dialog) details.launch-section > .launch-section-body { box-sizing: border-box; min-width: 0; padding: 4px 20px 20px; }
:is(.page, .payment-dialog) details.launch-section[open] > .launch-section-heading { position: sticky; top: calc(var(--launch-heading-offset, 0px) - var(--page-content-gap, 16px)); z-index: var(--launch-heading-level, 30); border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--settings-border, #cbd5df); }
.page:has(details.launch-section[open]) > .page-header { margin-bottom: 0 !important; }
#financeTaxInfoDetails details.launch-section { overflow: visible; }
.page .launch-section .launch-section { margin-bottom: 0; }
.payment-dialog details.launch-section[open] > .launch-section-heading { top: var(--launch-heading-offset, 0px); }
.payment-center summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.payment-center details { margin: 12px 0; }
.payment-center button, .payment-dialog button { margin: 6px 8px 6px 0; white-space: normal; }
.payment-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.payment-field input:not([type="checkbox"]), .payment-field textarea, .payment-field select { box-sizing: border-box; width: 100%; max-width: 100%; padding: 9px; font: inherit; }
.payment-field input[type="checkbox"] { align-self: flex-start; }
.payment-field textarea { min-height: 85px; resize: vertical; }
.payment-mode-notice { border: 1px solid currentColor; padding: 12px; border-radius: 8px; }
.payment-listing { border-top: 1px solid currentColor; padding: 12px 0; overflow-wrap: anywhere; }
.payment-dialog { max-width: min(620px, calc(100vw - 32px)); box-sizing: border-box; overflow-wrap: anywhere; }
.payment-dialog p, .payment-center p { white-space: pre-wrap; }
.server-content-status { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 31000; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: min(620px, calc(100vw - 24px)); box-sizing: border-box; padding: 12px; border: 1px solid #777; border-radius: 12px; color: #111; background: #fff4cf; box-shadow: 0 4px 18px #0004; }
.server-content-status[hidden] { display: none; }
.account-controls-dialog { width: min(620px, calc(100vw - 24px)); box-sizing: border-box; overflow-wrap: anywhere; }
.account-controls-dialog form { display: grid; gap: 14px; }
.account-controls-dialog label { display: flex; flex-direction: column; gap: 6px; }
.account-controls-dialog label[hidden] { display: none; }
.account-controls-dialog input:not([type="checkbox"]) { box-sizing: border-box; width: 100%; padding: 9px; font: inherit; }
.account-controls-dialog input[type="checkbox"] { align-self: flex-start; }
.account-controls-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.account-controls-dialog button { white-space: normal; }
.recovery-key-panel pre { padding: 12px; border: 1px solid currentColor; user-select: all; }
.operator-targeted-removal { overflow-wrap: anywhere; }
.operator-targeted-removal label { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.operator-targeted-removal input:not([type="checkbox"]), .operator-targeted-removal textarea, .operator-targeted-removal select { box-sizing: border-box; width: 100%; max-width: 100%; font: inherit; }
.operator-targeted-removal input[type="checkbox"] { align-self: flex-start; }
.page .operator-case .operator-targeted-removal button { box-sizing: border-box; max-width: 100%; min-width: 0; height: auto; white-space: normal !important; overflow-wrap: anywhere; }
.operator-removal-preview ul { padding-left: 22px; }
.saved-private-details { margin: 16px 0 0; padding: 12px; border: 1px solid currentColor; border-radius: 8px; min-width: 0; }
.saved-private-details summary { cursor: pointer; font-weight: 700; }
.saved-private-details form { display: grid; gap: 12px; margin-top: 12px; min-width: 0; }
.saved-private-details label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.saved-private-details label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; justify-content: space-between; }
.saved-private-details textarea, .saved-private-details input:not([type="checkbox"]) { box-sizing: border-box; width: 100%; max-width: 100%; padding: 8px; font: inherit; }
.saved-private-details textarea { resize: vertical; }
.saved-private-details button { white-space: normal; justify-self: start; }
@media (max-width: 700px) {
    :is(#publicFeed#publicFeed, #followFeedContent#followFeedContent, #postedRequestsList#postedRequestsList, #savedOffersList#savedOffersList, .profile-feed-post-list.profile-feed-post-list.profile-feed-post-list) .aligned-feed-actions {
        grid-template-columns: minmax(0, 1fr);
    }
    .aligned-feed-actions > :is(.feed-post-content, .request-card-body, .feed-post-action-column) {
        grid-column: 1;
        grid-row: auto;
        min-width: 0;
        max-width: 100%;
    }
    .aligned-feed-actions > .feed-post-action-column { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
    .aligned-feed-actions .post-purpose-badge { width: auto; max-width: 100%; white-space: normal; }
}