/*
 * anccer-theme — components.css
 * All component styles. Depends on tokens.css.
 *
 * Responsive overrides at the bottom of each section should be
 * migrated inline per component during the React migration.
 */

/* ── GiveWP form ── */

#main-content .give-wrap,
#main-content #give-form-wrap,
#main-content .give-form-wrap { padding: 0; margin: 0; }

/* Remove GiveWP's own container padding so form fills the card */
#main-content #container.give-wrap { padding: 0; margin: 0; }
#main-content #content[role="main"] { padding: 0; margin: 0; }

/* Make the v3 form fill the full card width */
#main-content .givewp-donation-form,
#main-content [data-testid="donation-form"],
#main-content .give-form-page-wrapper,
#main-content .give-campaign-form-block { width: 100%; max-width: 100%; }

/* GiveWP v3 two-column inner layout */
#main-content .givewp-donation-form__sidebar {
    min-width: 240px;
}

/* Amount buttons match theme */
#main-content .give-btn,
#main-content [data-testid="amount-button"] {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}

#main-content .give-btn.give-btn-level-active,
#main-content [data-testid="amount-button"][aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Donation submit button */
#main-content [data-testid="submit-button"],
#main-content .give-submit {
    background: var(--color-primary);
    border-radius: 30px;
    font-family: inherit;
    font-weight: 600;
    border: none;
    transition: opacity 0.15s;
}

#main-content [data-testid="submit-button"]:hover,
#main-content .give-submit:hover { opacity: 0.9; }

/* ── WordPress page / post content prose ── */

.page-content {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    line-height: 1.3;
    overflow-wrap: break-word;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    color: var(--color-text);
}

.page-content h1 { font-size: clamp(22px, 4vw, 32px); }
.page-content h2 { font-size: clamp(18px, 3vw, 26px); }
.page-content h3 { font-size: clamp(16px, 2.5vw, 20px); }

.page-content p,
.page-content li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0.875rem;
}

.page-content ul,
.page-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.page-content a {
    color: var(--color-primary-light);
    text-decoration: underline;
}

.page-content a:hover { color: var(--color-primary); }

.page-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    margin: 1rem 0;
}

/* Responsive tables inside page content */
.page-content table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
    font-size: 14px;
}

.page-content table th,
.page-content table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.page-content table th {
    background: var(--color-bg);
    font-weight: 600;
}

/* Responsive iframes/embeds (YouTube, Vimeo, etc.) */
.page-content iframe,
.page-content embed,
.page-content object,
.page-content video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Aspect-ratio wrapper for embeds without native responsive support */
.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.page-content blockquote {
    border-left: 4px solid var(--color-primary-light);
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    background: var(--color-bg);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--color-text-muted);
}

.page-content pre,
.page-content code {
    font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Consolas, monospace;
    font-size: 13px;
    background: var(--color-bg);
    border-radius: var(--radius);
}

.page-content code {
    padding: 0.1em 0.4em;
}

.page-content pre {
    padding: 1rem;
    overflow-x: auto;
    white-space: pre;
    margin: 1rem 0;
    max-width: 100%;
}

/* ── Sidebars ── */

.side-nav {
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    padding: 0.5rem;
}

.side-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.side-nav-item:hover { background: var(--color-bg); }

.side-nav-item.active {
    background: #eef2ff;
    color: var(--color-primary);
    font-weight: 600;
}

.side-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    height: 56%;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}

.side-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color 0.15s;
}

.side-nav-item.active .side-nav-icon { color: var(--color-primary); }

.side-nav-cta {
    padding: 0.75rem;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.side-widget {
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    padding: 1rem;
}

.side-widget-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.side-widget-text {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.crisis-link {
    display: block;
    font-size: 13px;
    color: var(--color-primary-light);
    text-decoration: none;
    margin-top: 0.5rem;
    font-weight: 500;
}

.crisis-link:hover { text-decoration: underline; }

/* ── Member profile (custom template) ── */

.profile-main { padding: 0; }

.profile-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 1rem;
}

.profile-cover {
    height: 180px;
    background: linear-gradient(135deg, #1a3a5c 0%, #2d6a9f 50%, #e8703a 100%);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius) var(--radius) 0 0;
}

.profile-identity {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 1.5rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.profile-avatar {
    margin-top: -48px;
    flex-shrink: 0;
}

.profile-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
    display: block;
}

.profile-avatar-edit {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    text-decoration: none;
}

.profile-avatar-edit img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
    display: block;
    transition: filter 0.2s;
}

.profile-avatar-edit:hover img { filter: brightness(0.72); }

.profile-avatar-edit-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.profile-avatar-edit:hover .profile-avatar-edit-overlay { opacity: 1; }

.profile-meta { flex: 1; padding-bottom: 0.25rem; min-width: 0; }

/* ── Change Avatar page ── */

.anccer-change-avatar {
    max-width: 520px;
}

.change-avatar-current {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.change-avatar-current img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    display: block;
    flex-shrink: 0;
}

.change-avatar-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.change-avatar-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.change-avatar-file-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: fit-content;
}

.change-avatar-file-label:hover {
    background: #eef2ff;
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

.change-avatar-file-label input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.btn-upload-submit,
.btn-upload-primary {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    width: fit-content;
}

.btn-upload-submit:hover,
.btn-upload-primary:hover { opacity: 0.9; }

.btn-delete-avatar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.35rem 0;
    transition: color 0.15s;
    width: fit-content;
}

.btn-delete-avatar:hover { color: #c0392b; }

.change-avatar-crop-wrap {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin: 1rem 0 1.5rem;
    flex-wrap: wrap;
}

#avatar-to-crop {
    max-width: 300px;
    height: auto;
    display: block;
}

#avatar-crop-pane {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-border);
    flex-shrink: 0;
}

#avatar-crop-preview {
    width: 100%;
    height: auto;
    display: block;
}

.profile-name {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.25rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.profile-member-type {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: #e8f4fd;
    color: var(--color-primary);
    text-transform: capitalize;
    margin-bottom: 0.25rem;
}

.profile-joined {
    font-size: 13px;
    color: var(--color-text-muted);
}

.btn-edit-profile {
    padding: 0.4rem 1rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-edit-profile:hover { background: var(--color-bg); }

.profile-tabs {
    display: flex;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.profile-tab {
    padding: 0.875rem 1rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover { color: var(--color-text); }

.profile-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.profile-content { padding: 1.25rem 0; }

/* Profile field view */
.profile-content .bp-widget { margin-bottom: 1.5rem; }
.profile-content .bp-widget h2 {
    font-size: 15px; font-weight: 600; margin-bottom: 0.75rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border);
}
.profile-content table.profile-fields { width: 100%; border-collapse: collapse; }
.profile-content table.profile-fields td {
    padding: 0.6rem 0; font-size: 14px; vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.profile-content table.profile-fields td.label {
    width: 40%; font-weight: 600; color: var(--color-text-muted); padding-right: 1rem;
}

/* Profile edit form */
.anccer-profile-edit-form { max-width: 640px; }
.anccer-profile-edit-form h2.profile-edit-heading {
    font-size: 16px; font-weight: 600; margin-bottom: 1.25rem;
}
.anccer-profile-edit-form .editfield {
    margin-bottom: 1.25rem;
}
.anccer-profile-edit-form label,
.anccer-profile-edit-form legend.label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--color-text-muted); margin-bottom: 0.35rem;
    border: none; padding: 0; float: none; width: auto;
}
.anccer-profile-edit-form fieldset { border: none; padding: 0; margin: 0; }
.anccer-profile-edit-form .bp-required-field-label {
    font-weight: 400; color: var(--color-accent); font-size: 12px;
}
.anccer-profile-edit-form input[type="text"],
.anccer-profile-edit-form input[type="email"],
.anccer-profile-edit-form input[type="date"],
.anccer-profile-edit-form textarea,
.anccer-profile-edit-form select {
    width: 100%; padding: 0.5rem 0.75rem; font-size: 14px; font-family: inherit;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-bg); box-sizing: border-box;
}
.anccer-profile-edit-form input[type="text"]:focus,
.anccer-profile-edit-form input[type="email"]:focus,
.anccer-profile-edit-form input[type="date"]:focus,
.anccer-profile-edit-form textarea:focus,
.anccer-profile-edit-form select:focus {
    outline: none; border-color: var(--color-primary-light); background: #fff;
}
.profile-edit-submit { margin-top: 1.5rem; }
.profile-edit-submit input[type="submit"] {
    background: var(--color-primary); color: #fff; border: none;
    border-radius: 20px; padding: 0.5rem 1.5rem; font-size: 14px;
    font-weight: 600; font-family: inherit; cursor: pointer;
}
.profile-edit-submit input[type="submit"]:hover { opacity: 0.9; }

/* Hide BP's own subnav inside profile content */
.profile-content #subnav { display: none; }

/* ── Notifications ── */

#pag-top,
#pag-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0 0.75rem;
    font-size: 13px;
    color: var(--color-text-muted);
}

table.notifications {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.notifications thead tr {
    border-bottom: 2px solid var(--color-border);
}

table.notifications thead th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

table.notifications thead th.icon,
table.notifications thead th.bulk-select-all { width: 2rem; }

table.notifications thead th.date { width: 11rem; white-space: nowrap; }
table.notifications thead th.actions { width: 8rem; text-align: right; }

table.notifications tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s;
}

table.notifications tbody tr:last-child { border-bottom: none; }
table.notifications tbody tr:hover { background: var(--color-bg); }

table.notifications td {
    padding: 0.75rem 0.75rem;
    vertical-align: middle;
}

table.notifications td:first-child,
table.notifications td.bulk-select-check { width: 2rem; padding-right: 0; }

table.notifications td.notification-description a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

table.notifications td.notification-description a:hover { text-decoration: underline; }

table.notifications td.notification-since {
    color: var(--color-text-muted);
    font-size: 13px;
    white-space: nowrap;
}

table.notifications td.notification-actions {
    text-align: right;
    white-space: nowrap;
}

table.notifications td.notification-actions a {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}

table.notifications td.notification-actions a:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.notifications-options-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
}

.notifications-options-nav select {
    padding: 0.35rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
}

.notifications-options-nav input[type="submit"],
.notifications-options-nav button[type="submit"] {
    padding: 0.35rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.notifications-options-nav input[type="submit"]:hover,
.notifications-options-nav button[type="submit"]:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

#message.info {
    padding: 1.25rem;
    background: var(--color-bg);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ── Invitations ── */

.members-invitation-form p.description {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.members-invitation-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.members-invitation-form input[type="email"],
.members-invitation-form textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-sizing: border-box;
    margin-bottom: 1.25rem;
}

.members-invitation-form input[type="email"]:focus,
.members-invitation-form textarea:focus {
    outline: none;
    border-color: var(--color-primary-light);
    background: #fff;
}

.members-invitation-form textarea { min-height: 130px; resize: vertical; }

.members-invitation-form p:last-child { margin: 0; }

.members-invitation-form input[type="submit"].submit {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}

.members-invitation-form input[type="submit"].submit:hover { opacity: 0.9; }

/* ── BuddyPress friend button ── */

#friend-button a {
    padding: 0.4rem 1rem;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: inline-block;
    transition: opacity 0.15s;
}

#friend-button a:hover { opacity: 0.9; }

/* ── BuddyPress profile header ── */

#buddypress div.item-header,
#buddypress #item-header {
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0;
}

#buddypress #item-header-cover-image {
    height: 180px;
    background: linear-gradient(135deg, #1a3a5c 0%, #2d6a9f 60%, #e8703a 100%);
}

#buddypress #item-header-avatar {
    margin-top: -48px;
    padding-left: 1.5rem;
}

#buddypress #item-header-avatar img {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
}

#buddypress #item-header-content {
    padding: 0.75rem 1.5rem 1.25rem;
}

#buddypress #item-header-content h2 a {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

#buddypress #item-header-content .activity {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* ── BuddyPress nav tabs ── */

#buddypress div#object-nav,
#buddypress div.item-list-tabs {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

#buddypress div#object-nav ul,
#buddypress div.item-list-tabs ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 1rem;
    margin: 0;
}

#buddypress div#object-nav ul li a,
#buddypress div.item-list-tabs ul li a {
    display: block;
    padding: 0.875rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

#buddypress div#object-nav ul li a:hover,
#buddypress div.item-list-tabs ul li a:hover {
    color: var(--color-text);
}

#buddypress div#object-nav ul li.current a,
#buddypress div#object-nav ul li.selected a,
#buddypress div.item-list-tabs ul li.current a,
#buddypress div.item-list-tabs ul li.selected a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

#buddypress div#object-nav ul li span.count,
#buddypress div.item-list-tabs ul li span.count {
    background: var(--color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

/* ── BuddyPress activity composer ── */

#whats-new-form {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

#whats-new-avatar { flex-shrink: 0; }

#whats-new-avatar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    display: block;
}

p.activity-greeting { display: none; }

#whats-new-content {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0;
}

#whats-new-textarea { margin: 0; }

#whats-new-form textarea#whats-new {
    display: block;
    width: 100%;
    background: var(--color-bg);
    border: 1.5px solid transparent;
    border-radius: 20px;
    padding: 0.3rem 0.875rem;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    resize: none;
    outline: none;
    line-height: 1;
    height: 32px;
    min-height: unset;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, height 0.2s;
}

#whats-new-form textarea#whats-new:focus {
    background: #fff;
    border-color: var(--color-border);
    height: 80px;
    overflow: auto;
}

#whats-new-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.5rem 0 0.25rem;
    flex-wrap: wrap;
}

#whats-new-submit { order: 2; }

#whats-new-post-in-box {
    order: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

#whats-new-post-in-box select {
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.25rem 0.5rem;
    color: var(--color-text);
    background: var(--color-bg);
    outline: none;
    cursor: pointer;
}

#aw-whats-new-submit {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.375rem 1.125rem;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

#aw-whats-new-submit:hover { opacity: 0.9; }

/* ── Activity type tabs ── */

#buddypress div.activity-type-tabs {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
    overflow-x: auto;
}

#buddypress div.activity-type-tabs ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 0.5rem;
}

#buddypress div.activity-type-tabs ul li a {
    display: block;
    padding: 0.875rem 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

#buddypress div.activity-type-tabs ul li a:hover { color: var(--color-text); }

#buddypress div.activity-type-tabs ul li.selected a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

#buddypress div.activity-type-tabs ul li span {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

/* ── Subnav / filter bar ── */

#buddypress div#subnav.item-list-tabs {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
    padding: 0 1rem;
}

#buddypress div#subnav.item-list-tabs ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 44px;
}

#buddypress div#subnav li.feed { display: none; }

#buddypress div#subnav #activity-filter-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: none;
    background: transparent;
}

#buddypress div#subnav #activity-filter-select label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

#buddypress #activity-filter-by {
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    outline: none;
}

/* ── Activity list ── */

#buddypress ul.activity-list {
    list-style: none;
    margin: 0;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-bg);
    border: none;
}

#buddypress ul.activity-list li.activity-item {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin: 0;
}

#buddypress ul.activity-list .activity-avatar {
    flex-shrink: 0;
    float: none;
}

#buddypress ul.activity-list .activity-avatar a { display: block; }

#buddypress ul.activity-list .activity-avatar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    display: block;
}

#buddypress ul.activity-list .activity-content {
    flex: 1;
    min-width: 0;
    margin: 0;
}

#buddypress ul.activity-list .activity-header {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
    width: 100%;
}

#buddypress ul.activity-list .activity-header p { margin: 0; }

#buddypress ul.activity-list .activity-header a:not(.activity-time-since) {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

#buddypress ul.activity-list .activity-header a:not(.activity-time-since):hover {
    color: var(--color-primary);
}

#buddypress ul.activity-list .activity-header .activity-time-since {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-top: 2px;
}

#buddypress ul.activity-list .activity-header .activity-time-since:hover {
    text-decoration: underline;
}

#buddypress ul.activity-list .activity-inner {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0.5rem 0;
}

#buddypress ul.activity-list .activity-inner p { margin: 0 0 0.5rem; }
#buddypress ul.activity-list .activity-inner p:last-child { margin-bottom: 0; }

#buddypress ul.activity-list .activity-inner img {
    max-width: 100%;
    border-radius: var(--radius);
    display: block;
    margin-top: 0.5rem;
}

/* ── Activity meta (Like / Comment / Favorite) ── */

#buddypress ul.activity-list .activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

#buddypress ul.activity-list .activity-meta a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.875rem;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

#buddypress ul.activity-list .activity-meta a:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

#buddypress ul.activity-list .activity-meta .delete-activity { margin-left: auto; }
#buddypress ul.activity-list .activity-meta .delete-activity a { color: #dc2626; }
#buddypress ul.activity-list .activity-meta .delete-activity a:hover { background: #fef2f2; }
#buddypress ul.activity-list .activity-meta .activity-like.liked { color: var(--color-primary); }
#buddypress ul.activity-list .activity-meta .activity-like-count {
    background: var(--color-bg);
    border-radius: 10px;
    padding: 0 0.35rem;
    font-size: 11px;
    margin-left: 0.25rem;
}

/* ── Activity comments ── */

/* hidden until Comment is clicked */
#buddypress ul.activity-list .activity-comments {
    display: none;
    flex: 0 0 100%;
    margin: 0 !important;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

#buddypress ul.activity-list .activity-comments > ul {
    padding: 0 !important;
}

#buddypress ul.activity-list .activity-comments ul li {
    border-top: none !important;
    padding: 0 !important;
}

#buddypress .activity-comments ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#buddypress .activity-comments li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

#buddypress .activity-comments .acomment-avatar { flex-shrink: 0; }

#buddypress .activity-comments .acomment-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    display: block;
}

#buddypress .activity-comments .acomment-body {
    flex: 1;
    min-width: 0;
}

#buddypress .activity-comments .acomment-bubble {
    display: inline-block;
    background: var(--color-bg);
    border-radius: 0 12px 12px 12px;
    padding: 0.45rem 0.75rem;
    max-width: 100%;
}

#buddypress .activity-comments .acomment-author {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 2px;
}

#buddypress .activity-comments .acomment-author:hover { color: var(--color-primary); }

#buddypress .activity-comments .acomment-text {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.5;
}

#buddypress .activity-comments .acomment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 3px;
    padding-left: 0.25rem;
}

#buddypress .activity-comments .acomment-actions a {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

#buddypress .activity-comments .acomment-actions a:hover { color: var(--color-primary); }

#buddypress .activity-comments .acomment-time {
    font-weight: 400 !important;
    font-size: 11px !important;
}

#buddypress .activity-comments .acomment-like.liked { color: var(--color-primary); }

#buddypress .activity-comments .acomment-like-count {
    display: inline-block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 2px;
}

#buddypress .activity-comments .delete { color: #dc2626 !important; }
#buddypress .activity-comments .delete:hover { color: #b91c1c !important; }

/* Inline edit form */
#buddypress .activity-comments .acomment-edit-form { margin-top: 0.4rem; }

#buddypress .activity-comments .acomment-edit-input {
    display: block;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--color-primary-light);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    min-height: 60px;
}

#buddypress .activity-comments .acomment-edit-btns {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

#buddypress .activity-comments .acomment-edit-save {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.3rem 1rem;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}

#buddypress .activity-comments .acomment-edit-save:hover { opacity: 0.9; }

#buddypress .activity-comments .acomment-edit-cancel {
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
}

#buddypress .activity-comments .acomment-edit-cancel:hover { color: var(--color-text); }

/* Reply form */
#buddypress .activity-comments .ac-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: flex-start;
}

#buddypress .activity-comments .ac-reply-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

#buddypress .activity-comments .ac-reply-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

#buddypress .activity-comments .ac-textarea {
    flex: 0 0 100%;
    background: transparent !important;
    border: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

#buddypress .activity-comments .ac-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 20px !important;
    padding: 0.45rem 0.875rem !important;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    height: 38px !important;
    line-height: 1.5;
    overflow-y: hidden;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s, height 0.15s;
}

#buddypress .activity-comments .ac-input:focus {
    background: #fff !important;
    border-color: var(--color-primary-light) !important;
    height: 72px !important;
    overflow-y: auto;
}

#buddypress .activity-comments [type="submit"] {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.3rem 1rem;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    align-self: center;
}

#buddypress .activity-comments [type="submit"]:hover { opacity: 0.9; }

#buddypress .activity-comments .ac-reply-cancel {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    align-self: center;
}

#buddypress .activity-comments .ac-reply-cancel:hover { color: var(--color-text); }

/* ── Load more / loading ── */

/* BP Nouveau adds padding-top: 1em at >=512px; reset it */
#buddypress #activity-stream { padding-top: 0; }

#buddypress #activity-stream .load-more { padding: 0 0.75rem 0.75rem; }

#buddypress #activity-stream .load-more a {
    display: block;
    text-align: center;
    padding: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s;
}

#buddypress #activity-stream .load-more a:hover { background: var(--color-bg); }

#buddypress .loading {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

#buddypress .activity-update-nonce { display: none; }

/* ── BuddyPress general ── */

#buddypress h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

/* ── Groups & Members directory ── */

.dir-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1rem 0.75rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.dir-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.dir-search-wrap {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    max-width: 320px;
}

.dir-search-wrap form {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.dir-search-wrap input[type="search"],
.dir-search-wrap input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 14px;
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
}

.dir-search-wrap input[type="search"]:focus,
.dir-search-wrap input[type="text"]:focus {
    border-color: var(--color-primary-light);
}

.dir-search-wrap input[type="submit"] {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.dir-search-wrap input[type="submit"]:hover { opacity: 0.9; }

.dir-search-wrap input.dir-search-input {
    width: 100%;
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 14px;
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
}
.dir-search-wrap input.dir-search-input:focus {
    border-color: var(--color-primary-light);
}

.dir-tabs-wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding-right: 1rem;
}

/* BP nouveau renders the nav as <nav class="bp-navs dir-navs"> inside .dir-tabs-wrap */
.dir-tabs-wrap nav.bp-navs {
    flex: 1;
    border: none;
    background: none;
    margin: 0;
}

.dir-tabs-wrap nav.bp-navs ul.component-navigation {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    list-style: none;
    padding: 0 0.5rem;
    margin: 0;
    gap: 0;
}

.dir-tabs-wrap nav.bp-navs ul.component-navigation li {
    display: flex !important;
    align-items: stretch !important;
    flex-shrink: 0;
}

.dir-tabs-wrap nav.bp-navs ul.component-navigation li a {
    display: flex !important;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.875rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted) !important;
    background: none !important;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.dir-tabs-wrap nav.bp-navs ul.component-navigation li a:hover {
    color: var(--color-text) !important;
    background: none !important;
}

.dir-tabs-wrap nav.bp-navs ul.component-navigation li.selected a,
.dir-tabs-wrap nav.bp-navs ul.component-navigation li.current a {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
    background: none !important;
}

.dir-tabs-wrap nav.bp-navs ul.component-navigation li .count {
    background: var(--color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
}

.dir-sort-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
    white-space: nowrap;
}

.dir-sort-label {
    font-size: 13px;
    color: var(--color-text-muted);
}

.dir-sort-select {
    font-size: 13px;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.3rem 0.5rem;
    background: var(--color-bg);
    cursor: pointer;
}

.dir-count-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 13px;
    color: var(--color-text-muted);
    background: var(--color-bg);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dir-count-bar--bottom {
    border-top: 1px solid var(--color-border);
}

.pagination-links a,
.pagination-links span {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    margin: 0 1px;
    transition: background 0.15s;
}

.pagination-links a:hover { background: var(--color-surface); color: var(--color-primary); }
.pagination-links .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.dir-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 15px;
}

/* ── BP Nouveau member/groups list overrides ── */
/* BP Nouveau centers .item-avatar, .list-title, .item-meta at mobile; override to left-align */
#buddypress .bp-list li .item-avatar { text-align: left; }
#buddypress .bp-list li .item .item-avatar,
#buddypress .bp-list li .item .list-title,
#buddypress .bp-list li .item .item-meta,
#buddypress .bp-list li .item .group-details { text-align: left; }
#buddypress .bp-list li .item .list-title { margin: 0; font-size: 16px; }

/* Group card grid */

.group-card-grid {
    list-style: none;
    margin: 0;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    background: var(--color-bg);
}

.group-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.group-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.group-card-avatar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 60%, #e8703a44 100%);
    border-bottom: none;
    height: 90px;
    overflow: hidden;
}

.group-card-avatar-link img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,0.85);
    object-fit: cover;
    display: block;
}

.group-card-body {
    padding: 0.875rem;
    flex: 1;
}

.group-card-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 0.25rem;
    padding: 0;
    border: none;
}

.group-card-name a {
    color: var(--color-text);
    text-decoration: none;
}

.group-card-name a:hover { color: var(--color-primary); }

.group-card-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
    text-transform: capitalize;
}

.group-card-dot {
    margin: 0 0.3rem;
}

.group-card-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.group-card-action {
    padding: 0.75rem 0.875rem;
    border-top: 1px solid var(--color-border);
}

.group-card-action .generic-button a,
.group-card-action .join-group-button a,
.group-card-action .leave-group-button a,
.group-card-action .request-membership-button a {
    display: block;
    text-align: center;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    transition: background 0.15s, color 0.15s;
}

.group-card-action .generic-button a:hover,
.group-card-action .join-group-button a:hover,
.group-card-action .request-membership-button a:hover {
    background: var(--color-primary);
    color: #fff;
}

.group-card-action .leave-group-button a {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.group-card-action .leave-group-button a:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ── Home landing page (logged-out) ── */

.home-page {
    width: 100%;
    padding: 0;
    background: var(--color-bg);
}

/* Hero */
.home-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d5a8e 60%, #1a3a5c 100%);
    color: #fff;
    padding: 5rem 1.5rem 4.5rem;
    text-align: center;
}

.home-hero-inner {
    max-width: 760px;
    margin: 0 auto;
}

.home-hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.25rem;
}

.home-hero-headline {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    color: #fff;
}

.home-hero-sub {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255,255,255,0.82);
    margin-bottom: 2.25rem;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.home-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 30px;
    text-decoration: none;
    transition: opacity 0.15s;
}

.btn-hero-primary:hover { opacity: 0.9; color: #fff; }

.btn-hero-secondary {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 30px;
    border: 1.5px solid rgba(255,255,255,0.35);
    text-decoration: none;
    transition: background 0.15s;
}

.btn-hero-secondary:hover { background: rgba(255,255,255,0.22); color: #fff; }

.btn-hero-ghost {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: transparent;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 15px;
    border-radius: 30px;
    border: 1.5px solid var(--color-primary);
    text-decoration: none;
    transition: background 0.15s;
}

.btn-hero-ghost:hover { background: var(--color-bg); }

/* Pillars */
.home-pillars {
    padding: 4rem 1.5rem;
    background: var(--color-surface);
}

.home-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.home-pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.home-pillar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-pillar-icon {
    width: 52px;
    height: 52px;
    background: #eef2ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.home-pillar h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.home-pillar p {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* Stats */
.home-stats {
    padding: 3.5rem 1.5rem;
    background: var(--color-bg);
}

.home-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.home-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.home-stat-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.home-stat-label {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* CTA band */
.home-cta-band {
    background: var(--color-primary);
    color: #fff;
    padding: 4rem 1.5rem;
    text-align: center;
}

.home-cta-band h2 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: #fff;
}

.home-cta-band p {
    font-size: 16px;
    color: rgba(255,255,255,0.78);
    margin-bottom: 2rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.home-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Auth pages (login & register) ── */

.auth-body {
    background: var(--color-bg);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.auth-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    min-height: 100vh;
    min-height: 100svh;
}

.auth-logo {
    display: block;
    margin-bottom: 1.5rem;
}

.auth-logo img {
    height: 36px;
    width: auto;
    display: block;
}

.auth-card {
    background: var(--color-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    padding: 2rem 2.25rem 2.25rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.auth-card--register {
    max-width: 680px;
}

#buddypress,
#register-page {
    width: 100%;
}

/* Override BP legacy two-column float layout for register page */
#buddypress .standard-form #basic-details-section,
#buddypress .standard-form #profile-details-section {
    float: none !important;
    width: 100% !important;
}

/* Step 1: 60% centered columns — container carries label + input + toggle together */
#register-step-1 .editfield,
#register-step-1 #profile-details-section-step1 .editfield {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#register-step-1 input[type="text"],
#register-step-1 input[type="email"],
#register-step-1 input[type="password"],
#register-step-1 input[type="date"],
#register-step-1 select {
    width: 100% !important;
    box-sizing: border-box;
    display: block;
}

#register-page #register-step-2 .cancer-card-grid {
    grid-template-columns: repeat( 3, 1fr );
}

#register-page #register-step-2 .treatment-card-grid {
    grid-template-columns: repeat( 2, 1fr );
}

.auth-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.auth-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.auth-alt-link {
    font-size: 14px;
    color: var(--color-text-muted);
    text-decoration: none;
}

.auth-alt-link:hover { color: var(--color-primary); }

/* ── Auth form fields ── */

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="date"],
.auth-card select,
#register-page input[type="text"],
#register-page input[type="email"],
#register-page input[type="password"],
#register-page input[type="date"],
#register-page select {
    display: block;
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s;
    margin-bottom: 0.75rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.auth-card input:focus,
.auth-card select:focus,
#register-page input:focus,
#register-page select:focus {
    border-color: var(--color-primary-light);
}

/* Hide BP labels in step 1 — placeholders do the work */
.auth-card label,
#register-page #register-step-1 .editfield > label,
#register-page #register-step-1 .editfield > fieldset > legend {
    display: none;
}

/* Show labels for date fields in step 1 (no placeholder on date picker) */
#register-page .field_birthdate > div > label,
#register-page .editfield .datebox label,
.auth-card .login-remember label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
}

/* Show labels for all fields in step 2 */
#register-page #register-step-2 .editfield > label,
#register-page #register-step-2 .editfield > fieldset > legend {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.4rem;
    border: none;
    padding: 0;
    float: none;
    width: auto;
}

#register-page #register-step-2 .field_date-of-diagnosis > div > label,
#register-page #register-step-2 .field_person-affected-birthdate > div > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

/* ── Step indicator ── */

.register-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.75rem;
}

.register-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.register-step-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: background 0.25s, color 0.25s;
}

.register-step-bubble.active {
    background: var(--color-primary);
    color: #fff;
}

.register-step-bubble.done {
    background: var(--color-primary);
    color: #fff;
}

.register-step-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: color 0.25s;
}

.register-step-label.active { color: var(--color-primary); }

.register-step-connector {
    width: 60px;
    height: 2px;
    background: var(--color-border);
    margin: 14px 6px 0;
    transition: background 0.25s;
    flex-shrink: 0;
}

.register-step-connector.done { background: var(--color-primary); }

/* Input error state */
#register-page input.input-error,
#register-page select.input-error {
    border-color: #e74c3c !important;
}

/* Step 2 field labels */
#register-page .editfield-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

#register-page .editfield-label .bp-required-field-label {
    font-weight: 400;
    color: var(--color-accent);
    font-size: 12px;
}

/* Card grids inside the register form */
#register-page .cancer-card-grid,
#register-page .treatment-card-grid {
    margin-bottom: 1rem;
}

/* ── Password toggle ── */

.password-wrap {
    position: relative;
}


.auth-card input[type="password"],
#register-page input[type="password"] {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.password-wrap input { padding-right: 2.75rem; }

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-60%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    line-height: 1;
    z-index: 2;
}

.password-toggle:hover { color: var(--color-primary); }

/* Reveal password — WebKit/Safari keeps type="password" so use -webkit-text-security */
input[type="password"].pw-visible {
    -webkit-text-security: none;
    font-family: inherit;
    letter-spacing: normal;
}

/* ── Password strength ── */

#pass-strength-result {
    font-size: 13px;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    display: none;
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    box-sizing: border-box;
}

#pass-strength-result.short   { display: block; background: #fee; color: #c00; }
#pass-strength-result.bad     { display: block; background: #fee; color: #c00; }
#pass-strength-result.good    { display: block; background: #fffbe6; color: #856404; }
#pass-strength-result.strong  { display: block; background: #f0fff4; color: #155724; }

/* ── Auth primary button ── */

.btn-auth-primary {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s;
    margin-top: 0.75rem;
}

.btn-auth-primary:hover { opacity: 0.9; color: #fff; }

input.btn-auth-primary { -webkit-appearance: none; appearance: none; }

/* Next button: auto-width, left-aligned */
#register-next.btn-auth-primary {
    display: block;
    width: auto;
    min-width: 120px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Auth back button ── */

.btn-auth-back {
    padding: 0.65rem 2rem;
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-auth-back:hover {
    background: var(--color-bg);
}

/* ── Register actions row ── */

.register-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.register-actions .btn-auth-primary {
    flex: 1;
    width: auto;
    margin-top: 0;
}

/* ── Privacy text ── */

.register-privacy-info {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 1.25rem;
    line-height: 1.5;
}

.register-privacy-info a {
    color: var(--color-primary-light);
    text-decoration: none;
    font-weight: 500;
}

.register-privacy-info a:hover { text-decoration: underline; }

/* ── Login form inputs ── */

.login-input {
    display: block;
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s;
    margin-bottom: 0.75rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.login-input:focus { border-color: var(--color-primary-light); }

/* ── Remember Me + Forgot Password row ── */

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.25rem 0 1.25rem;
}

.login-remember-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.login-remember-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.login-forgot {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
}

.login-forgot:hover { color: var(--color-primary); }

/* ── Privacy Policy link below login button ── */

.login-privacy {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 13px;
    color: var(--color-text-muted);
}

.login-privacy a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.login-privacy a:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Auth error message ── */

.auth-error {
    background: #fee;
    color: #c00;
    border: 1px solid #fcc;
    border-radius: var(--radius);
    padding: 0.6rem 0.875rem;
    font-size: 13px;
    margin-bottom: 1rem;
}

/* ── Treatment checkbox button grid ── */

.checkbox-options {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: 0.625rem;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
}

/* Profile edit — treatment multi-select cards */
.treatment-card-grid {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: 0.625rem;
    margin-top: 0.35rem;
}
.cancer-card-grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 0.625rem;
    margin-top: 0.35rem;
}
.treatment-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 55px;
    padding: 0.625rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.treatment-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.treatment-card:hover {
    border-color: var(--color-primary-light);
    background: #f0f5fb;
}
.treatment-card.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 500;
}

.bp-checkbox-wrap { position: relative; }

.bs-styled-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-label {
    display: flex !important;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1.3;
    min-height: 48px;
}

.option-label:hover {
    border-color: var(--color-primary-light);
}

.bs-styled-checkbox:checked + .option-label {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── Field error messages ── */

.anccer-field-error {
    display: block;
    font-size: 12px;
    color: #c00;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

/* ── BP template notices in auth context ── */

#register-page #template-notices .bp-feedback {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 14px;
}

#register-page #template-notices .bp-feedback.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

#register-page #template-notices .bp-feedback.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

/* ── Auth confirmed state ── */

.auth-confirmed {
    text-align: center;
    padding: 1rem 0;
}

.auth-confirmed h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0.75rem;
    border: none;
    padding: 0;
}

.auth-confirmed p { font-size: 15px; color: var(--color-text-muted); }

.auth-confirmed a { color: var(--color-primary-light); font-weight: 500; }

/* ── BP datebox selects ── */

#register-page .input-options.datebox-selects {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* ── Messages full-width layout ── */

body.page-messages #page-wrapper {
    max-width: 100%;
    padding: 0 1.5rem;
}

#main-content.profile-main--messages {
    grid-column: 1 / -1;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}


.profile-content--messages {
    padding: 0;
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
    min-height: calc(100vh - var(--nav-height) - 3.5rem);
    min-height: calc(100dvh - var(--nav-height) - 3.5rem);
}

/* ── Messaging — two-column island ────────────────────── */

/* Thread skeleton layout rows — shimmer visual provided by ui-skeleton (Skeleton component) */
.msg-skel-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0 1.25rem;
    margin-top: 0.75rem;
}
.msg-skel-row--own     { justify-content: flex-end; }
.msg-skel-row--grouped { margin-top: 3px; }

/* ── Outer layout ─────────────────────────────────────── */
.msg-layout {
    display: flex;
    height: calc(100vh - var(--nav-height) - 2rem);
    height: calc(100dvh - var(--nav-height) - 2rem);
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

/* ── Left sidebar — thread list ───────────────────────── */
.msg-sidebar {
    width: 320px;
    min-width: 260px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
}

.msg-sidebar-header {
    padding: 1rem 1rem 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.msg-sidebar-title {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--color-text);
}

.msg-compose-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.msg-compose-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

/* ── Search ───────────────────────────────────────────── */
.msg-search-wrap {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.msg-search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.msg-search-icon {
    position: absolute;
    left: 0.625rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.msg-search-input {
    width: 100%;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    background: var(--color-bg);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
}
.msg-search-input:focus {
    border-color: var(--color-primary-light);
    background: var(--color-surface);
}

/* ── Thread list ──────────────────────────────────────── */
.msg-thread-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.msg-thread-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
    position: relative;
    min-height: 68px;
}
.msg-thread-item:hover { background: var(--color-bg); }
.msg-thread-item.active {
    background: var(--color-active-bg);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1rem - 3px);
}

.msg-thread-avatar {
    position: relative;
    flex-shrink: 0;
}

/* Unread indicator dot */
.msg-unread-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}

.msg-thread-body {
    flex: 1;
    min-width: 0;
}

.msg-thread-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}
.msg-thread-item.unread .msg-thread-name { font-weight: 700; }

.msg-thread-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.msg-thread-preview {
    font-size: 0.775rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    line-height: 1.4;
}
.msg-thread-item.unread .msg-thread-preview {
    color: var(--color-text);
    font-weight: 500;
}

.msg-thread-sep {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.msg-thread-date {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.msg-no-threads {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Skeleton list rows reuse msg-thread-item layout; pointer-events off */
.msg-thread-item.msg-skel-row { pointer-events: none; }

/* ── Right panel — conversation view ──────────────────── */
.msg-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
    min-width: 0;
}

.msg-convo-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 52px;
}

.msg-convo-subject {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Conversation body ────────────────────────────────── */
.msg-convo-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}

/* ── Date divider ─────────────────────────────────────── */
.msg-date-divider {
    text-align: center;
    margin: 1.25rem 1.25rem 0.875rem;
    position: relative;
}
.msg-date-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
}
.msg-date-divider span {
    position: relative;
    background: var(--color-surface);
    padding: 0 0.625rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Message rows ─────────────────────────────────────── */
.msg-message {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0 1.25rem;
    margin-top: 0.875rem;
}
.msg-message--grouped {
    margin-top: 3px;
}
.msg-message--own {
    flex-direction: row-reverse;
}

/* Avatar column */
.msg-msg-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    align-self: flex-end;
}
.msg-msg-avatar--spacer {
    /* transparent placeholder preserves column width */
    background: none;
}

/* Body column */
.msg-msg-body {
    display: flex;
    flex-direction: column;
    max-width: 72%;
    min-width: 0;
}
.msg-message--own .msg-msg-body {
    align-items: flex-end;
}

/* Sender name — only on group-start for others */
.msg-msg-name {
    display: block;
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 3px;
    padding-left: 0.25rem;
}
a.msg-msg-name:hover { color: var(--color-primary); }

/* ── Bubbles ──────────────────────────────────────────── */
.msg-msg-bubble {
    padding: 0.5rem 0.875rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 18px 18px 18px 4px;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text);
    word-break: break-word;
    overflow-wrap: break-word;
}
.msg-msg-bubble p   { margin: 0 0 0.375em; }
.msg-msg-bubble p:last-child { margin-bottom: 0; }
.msg-msg-bubble a   { color: var(--color-primary); }

/* Grouped follow-on (not first in group) */
.msg-message--grouped .msg-msg-bubble {
    border-radius: 4px 18px 18px 4px;
}

/* Own messages */
.msg-message--own .msg-msg-bubble {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    border-radius: 18px 18px 4px 18px;
}
.msg-message--own .msg-msg-bubble a {
    color: rgba(255,255,255,0.85);
}
.msg-message--own.msg-message--grouped .msg-msg-bubble {
    border-radius: 18px 4px 4px 18px;
}

/* Optimistic (sending) */
.msg-message--optimistic .msg-msg-bubble {
    opacity: 0.6;
}

/* Timestamp */
.msg-msg-time {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    padding: 0 0.25rem;
    line-height: 1;
}
.msg-message--own .msg-msg-time {
    text-align: right;
}

/* ── Reply composer ───────────────────────────────────── */
.msg-reply-bar {
    border-top: 1px solid var(--color-border);
    padding: 0.75rem 1.25rem max(0.875rem, env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    background: var(--color-surface);
}

.msg-reply-bar__form {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
}

.msg-reply-avatar {
    flex-shrink: 0;
    align-self: flex-end;
    padding-bottom: 2px;
}

.msg-reply-field {
    flex: 1;
    min-width: 0;
}

.msg-reply-field textarea {
    width: 100%;
    padding: 0.5625rem 0.875rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 0.9375rem;
    font-family: inherit;
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 140px;
    overflow-y: auto;
    transition: border-color 0.15s, background 0.15s;
    line-height: 1.45;
    color: var(--color-text);
}
.msg-reply-field textarea::placeholder { color: var(--color-text-muted); }
.msg-reply-field textarea:focus {
    border-color: var(--color-primary-light);
    background: var(--color-surface);
}

.msg-reply-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
    align-self: flex-end;
}
.msg-reply-send:hover:not(:disabled) { background: var(--color-primary-dark, #1a56db); }
.msg-reply-send:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: default;
}

/* ── Compose panel (PHP form) ─────────────────────────── */
.msg-compose-panel {
    padding: 1.5rem 2rem;
    flex: 1;
    overflow-y: auto;
}

.msg-compose-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.msg-compose-form { max-width: 560px; }

.msg-compose-field {
    margin-bottom: 1.25rem;
}
.msg-compose-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}
.msg-compose-field input[type="text"],
.msg-compose-field textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.msg-compose-field input[type="text"]:focus,
.msg-compose-field textarea:focus {
    border-color: var(--color-primary-light);
}
.msg-compose-field textarea { resize: vertical; }

.msg-to-wrap { position: relative; }
.msg-to-wrap input[type="text"] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.msg-to-wrap input[type="text"]:focus { border-color: var(--color-primary-light); }

.msg-to-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.msg-to-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background 0.1s;
}
.msg-to-item:hover { background: var(--color-bg); }
.msg-to-item img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.msg-to-item-name  { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.msg-to-item-login { font-size: 0.8rem; color: var(--color-text-muted); margin-left: auto; }
.msg-to-error      { margin-top: 0.375rem; font-size: 0.8125rem; color: #dc2626; }

.msg-compose-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }

/* ── Empty / error states ─────────────────────────────── */
.msg-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--color-text-muted);
    padding: 2.5rem 2rem;
    text-align: center;
}
.msg-empty-state svg { opacity: 0.35; margin-bottom: 0.25rem; }
.msg-empty-state p {
    font-size: 0.9375rem;
    max-width: 260px;
    line-height: 1.5;
}

.btn--sm { padding: 0.4rem 1rem; font-size: 0.875rem; }

/* Msg reduced-motion: disable all transitions on interactive elements.
 * Token-based transitions are already zeroed via tokens.css; these cover
 * any hardcoded values that can't be addressed through the token system. */
@media (prefers-reduced-motion: reduce) {
    .msg-thread-item,
    .msg-compose-btn,
    .msg-search-input,
    .msg-unread-dot,
    .msg-top-bar__back,
    .msg-top-bar__compose,
    .msg-reply-send,
    .msg-reply-field textarea,
    .msg-message--optimistic .msg-msg-bubble {
        transition: none;
    }
    .msg-message--optimistic .msg-msg-bubble {
        opacity: 0.75;
    }
}

/* ── Activity Overflow Menu (⋯) ── */

.activity-overflow-menu {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.activity-overflow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.activity-overflow-btn:hover,
.activity-overflow-btn[aria-expanded="true"] {
    background: var(--color-bg);
    color: var(--color-text);
}

.activity-overflow-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.aom-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: var(--color-text);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    text-decoration: none;
}
.aom-item:hover { background: var(--color-bg); }
.aom-item svg { flex-shrink: 0; color: var(--color-text-muted); }

.aom-delete-wrap { padding: 0; }
.aom-delete-wrap .delete-activity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #c0392b !important;
    text-decoration: none;
    transition: background 0.12s;
}
.aom-delete-wrap:hover { background: var(--color-bg); }

/* ── Activity Inline Edit Form ── */

.activity-edit-form {
    padding: 0.5rem 0 0.75rem;
}

.activity-edit-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.15s;
}
.activity-edit-input:focus {
    outline: none;
    border-color: var(--color-primary-light);
}

.activity-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Compose Link Preview Card ── */

.compose-og-preview {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
    margin: 0.75rem 0 0.5rem;
}

.og-preview-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}
.og-preview-remove:hover { background: rgba(0,0,0,0.7); }

.og-preview-media {
    position: relative;
    background: var(--color-bg);
}

.og-preview-img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.og-carousel-controls {
    position: absolute;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,0,0,0.5);
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
    color: #fff;
    font-size: 0.8125rem;
}

.og-carousel-prev,
.og-carousel-next {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    transition: opacity 0.15s;
}
.og-carousel-prev:hover,
.og-carousel-next:hover { opacity: 0.75; }

.og-carousel-counter { font-variant-numeric: tabular-nums; }

.og-preview-body {
    padding: 0.625rem 0.875rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.og-preview-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

@keyframes og-spin { to { transform: rotate(360deg); } }
.og-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary-light);
    border-radius: 50%;
    animation: og-spin 0.7s linear infinite;
}

/* ── Activity OG Link Preview Card ── */

.activity-og-card {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none !important;
    color: var(--color-text);
    margin-top: 0.875rem;
    background: var(--color-surface);
    transition: box-shadow 0.15s;
}

.activity-og-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.09);
    color: var(--color-text);
}

.og-card-image img {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    display: block;
}

.og-card-body {
    padding: 0.75rem 1rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.og-card-domain {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.og-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
}

.og-card-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-top: 0.1rem;
}

/* ── Profile edit group tabs ── */

ul.profile-group-tabs {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

ul.profile-group-tabs li a {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--color-primary);
    background: var(--color-bg);
    border: 1.5px solid var(--color-primary-light);
    transition: background 0.15s, color 0.15s;
}

ul.profile-group-tabs li a:hover {
    background: var(--color-primary-light);
    color: #fff;
}

ul.profile-group-tabs li.current a {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Blocked Members ── */

.blocked-members-wrap {
    padding: 1.5rem 0;
}

.blocked-members-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.blocked-members-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.blocked-members-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.blocked-member-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border);
}

.blocked-member-item img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.blocked-member-name {
    flex: 1;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}
.blocked-member-name:hover { text-decoration: underline; }

.blocked-members-empty {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.btn--ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.4rem 1rem;
    transition: background 0.15s, color 0.15s;
}
.btn--ghost:hover { background: var(--color-bg); }

.anccer-block-profile-btn[data-blocked="1"] {
    color: var(--color-text-muted);
}


/* ── Group creation invite UI ── */

.anccer-invite-wrap {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

.anccer-invite-search-col {
    flex: 1;
    min-width: 0;
}

.anccer-invited-col {
    flex: 1;
    min-width: 0;
}

.anccer-invite-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.anccer-invite-search-box input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-sizing: border-box;
    outline: none;
}

.anccer-invite-search-box input:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(45, 106, 159, 0.12);
}

.anccer-invite-results,
.anccer-invited-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anccer-invite-results {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.anccer-invite-results:empty { display: none; }

.anccer-invite-result-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
}

.anccer-invite-result-item:hover { background: var(--color-surface); }

.anccer-invite-no-results {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    color: var(--color-text-muted);
}

.anccer-invite-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.anccer-invite-name {
    flex: 1;
    font-size: 14px;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anccer-invite-add {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1;
}

.anccer-invited-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    min-height: 80px;
    padding: 0.25rem 0;
}

.anccer-invited-empty {
    padding: 0.75rem;
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
}

.anccer-invited-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.anccer-invited-item:last-child { border-bottom: none; }

.anccer-invite-remove {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-muted);
    padding: 0 4px;
    transition: color 0.15s;
}

.anccer-invite-remove:hover { color: #dc2626; }

/* ── Group admin sub-nav ── */

#buddypress div#subnav.item-list-tabs { margin-bottom: 1.5rem; padding: 0; }
#buddypress div#subnav.item-list-tabs ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    gap: 0;
    min-height: unset;
    border-bottom: 2px solid var(--color-border);
}
#buddypress div#subnav.item-list-tabs ul li { margin: 0; }
#buddypress div#subnav.item-list-tabs ul li a {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
#buddypress div#subnav.item-list-tabs ul li a:hover,
#buddypress div#subnav.item-list-tabs ul li a:focus {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: transparent;
}
#buddypress div#subnav.item-list-tabs ul li.current a,
#buddypress div#subnav.item-list-tabs ul li.selected a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
#buddypress div#subnav.item-list-tabs #activity-filter-select { margin-left: auto; }

/* ── Group members search bar ── */

#buddypress div#subnav.item-list-tabs ul li.groups-members-search {
    flex: 1;
    padding: 0.625rem 0;
}

#buddypress div#subnav.item-list-tabs ul li.groups-members-search form {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 340px;
}

#buddypress div#subnav.item-list-tabs ul li.groups-members-search input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 20px 0 0 20px;
    font-size: 13px;
    background: var(--color-bg);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
}

#buddypress div#subnav.item-list-tabs ul li.groups-members-search input[type="text"]:focus {
    border-color: var(--color-primary-light);
}

#buddypress div#subnav.item-list-tabs ul li.groups-members-search input[type="submit"] {
    padding: 0.45rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 0 20px 20px 0;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

#buddypress div#subnav.item-list-tabs ul li.groups-members-search input[type="submit"]:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

#buddypress div#subnav.item-list-tabs ul li#group_members-order-select {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.625rem 0;
    white-space: nowrap;
}

#buddypress div#subnav.item-list-tabs ul li#group_members-order-select label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
}

#buddypress div#subnav.item-list-tabs ul li#group_members-order-select select {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    cursor: pointer;
    outline: none;
}

/* ── Manage Members cards ── */

.anccer-manage-members { display: flex; flex-direction: column; gap: 2rem; }

.anccer-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.anccer-member-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.anccer-member-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.anccer-member-card:last-child { border-bottom: none; }
.anccer-member-card:hover { background: #f8fafc; }

.anccer-member-avatar-link { flex-shrink: 0; line-height: 0; }
.anccer-member-avatar-link img { border-radius: 50%; display: block; }

.anccer-member-info {
    flex: 1;
    min-width: 0;
}

.anccer-member-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.anccer-member-name a { color: inherit; text-decoration: none; }
.anccer-member-name a:hover { color: var(--color-accent); }

.anccer-member-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.anccer-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}
.anccer-badge--admin  { background: #dbeafe; color: #1e40af; }
.anccer-badge--mod    { background: #d1fae5; color: #065f46; }
.anccer-badge--banned { background: #fee2e2; color: #991b1b; }

.anccer-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex-shrink: 0;
}

.anccer-btn {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.anccer-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.anccer-btn--primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; }
.anccer-btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.anccer-btn--ghost:hover { background: var(--color-primary); color: #fff; }
.anccer-btn--danger {
    background: transparent;
    color: #dc2626;
    border-color: #dc2626;
}
.anccer-btn--danger:hover { background: #dc2626; color: #fff; }

.anccer-empty-notice {
    padding: 0.875rem;
    font-size: 13px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.anccer-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}




/* ══════════════════════════════════════════════════════
   BP ACTIVITY PREVIEW CARDS (new member, new avatar,
   joined/created group)
   ══════════════════════════════════════════════════════ */

/* Shared card shell */
.bp-member-activity-preview,
.bp-group-activity-preview {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    max-width: 360px;
    width: 100%;
    overflow: hidden;
}

/* Cover image strip */
.bp-member-preview-cover,
.bp-group-preview-cover {
    width: 100%;
    min-height: 0 !important;
    background: none !important;
}

.bp-member-preview-cover img,
.bp-group-preview-cover img {
    width: 100% !important;
    height: 80px !important;
    object-fit: cover;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Body section (avatar + name + button) */
.bp-member-short-description,
.bp-group-short-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0 1rem 1rem;
}

/* Avatar container — override BP's mobile 100%-width rule */
.bp-member-avatar-content,
.bp-group-avatar-content {
    width: auto !important;
    margin-bottom: 0.25rem;
    overflow: visible !important;
}

/* Avatar image — hard-cap at 72×72 circular */
.bp-member-avatar-content img,
.bp-group-avatar-content img,
.bp-member-activity-preview img.profile-photo,
.bp-member-activity-preview img.avatar,
.bp-group-activity-preview img.profile-photo,
.bp-group-activity-preview img.avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    border-radius: 50% !important;
    border: 3px solid var(--color-surface) !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Titles */
.bp-member-short-description-title,
.bp-group-short-description-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.bp-member-short-description-title a,
.bp-group-short-description-title a {
    color: var(--color-text);
    text-decoration: none;
}

.bp-member-short-description-title a:hover,
.bp-group-short-description-title a:hover { color: var(--color-primary); }

.bp-member-nickname {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
}

.bp-member-nickname a {
    color: var(--color-text-muted);
    text-decoration: none;
}

/* View Profile / View Group button */
.bp-profile-button { margin-top: 0.25rem; }

.bp-profile-button a.button {
    display: inline-block;
    padding: 0.35rem 0.875rem;
    border-radius: var(--radius);
    background: var(--color-primary) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s;
    border: none;
}

.bp-profile-button a.button:hover { opacity: 0.9; }

/* Long URLs in activity posts — prevent horizontal overflow */
#buddypress ul.activity-list .activity-inner,
#buddypress ul.activity-list .activity-inner p {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ══════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════ */

/* Screen-reader-only: ensure BP/WP helper class is always hidden visually */
.bp-screen-reader-text,
.screen-reader-text,
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Skip navigation — visually hidden, appears on keyboard focus */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
    transition: top 0.15s;
}

.skip-link:focus { top: 0; }

/* Keyboard focus indicator — visible ring for non-mouse users */
:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Inputs use border-color as their focus indicator; suppress outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; }

/* Ensure interactive elements always meet 44×44px minimum touch target */


/* ── Dark mode — component overrides ── */
@media (prefers-color-scheme: dark) {
    .auth-card { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
}


/* ═══════════════════════════════════════════════════════
   COMPONENT RESPONSIVE OVERRIDES
   Desktop-first max-width queries — pending per-component
   mobile-first migration during React component work.
   ═══════════════════════════════════════════════════════ */

/* ── Global: word-break, sidebar CTAs, BP tab nav ── */

#main-content,
#buddypress ul.activity-list .activity-inner,
.page-content,
.msg-msg-bubble,
.og-card-title,
.og-card-desc,
.group-card-name,
.group-card-desc {
    overflow-wrap: break-word;
    word-break: break-word;
}

.side-nav-cta .btn-register,
.side-nav-cta .btn-signin {
    display: block;
    text-align: center;
}

.side-nav-cta .btn-register { margin-top: var(--space-3); }
.side-nav-cta .btn-signin   { margin-top: var(--space-2); }

.side-widget .btn-register { display: block; text-align: center; margin-top: var(--space-4); }
.side-widget + .side-widget { margin-top: var(--space-4); }

#buddypress div#object-nav,
#buddypress div.item-list-tabs { overflow: hidden; }

#buddypress div#object-nav ul,
#buddypress div.item-list-tabs ul {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#buddypress div#object-nav ul::-webkit-scrollbar,
#buddypress div.item-list-tabs ul::-webkit-scrollbar { display: none; }

#buddypress div#object-nav ul li,
#buddypress div.item-list-tabs ul li { flex-shrink: 0; }

.activity-overflow-dropdown {
    left: auto;
    right: 0;
    max-width: calc(100vw - 2rem);
}


/* ── ≤ 1024px — tablet landscape ── */
@media (max-width: 1024px) {

    #buddypress,
    #buddypress > * { width: 100%; max-width: none; }

    body.page-messages #page-wrapper { padding: 0 var(--space-4); }
}


/* ── ≤ 767px — tablet portrait ── */
@media (max-width: 767px) {

    .btn-signin,
    .btn-register {
        font-size: var(--text-xs);
        padding: 0.4rem var(--space-3);
    }

    .header-user-dropdown {
        right: 0;
        left: auto;
        max-width: calc(100vw - var(--space-4));
    }

    /* ── Profile ── */
    .profile-cover { height: 100px; }

    .profile-identity {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 var(--space-4) var(--space-4);
        gap: var(--space-3);
    }

    .profile-avatar     { width: 72px; height: 72px; }
    .profile-avatar img { width: 72px !important; height: 72px !important; }

    .profile-meta   { align-items: center; }
    .profile-stats  { justify-content: center; flex-wrap: wrap; }

    .profile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .profile-tabs::-webkit-scrollbar { display: none; }

    .profile-tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: var(--text-xs);
    }

    .profile-meta { width: 100%; min-width: 0; }

    .profile-content table.profile-fields {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    ul.profile-group-tabs { flex-wrap: wrap; }

    /* ── Activity composer ── */
    #whats-new-form    { flex-wrap: wrap; }
    #whats-new-avatar  { display: none; }
    #whats-new-content { width: 100%; min-width: 0; }

    #whats-new-form textarea#whats-new {
        width: 100%;
        box-sizing: border-box;
    }

    #whats-new-options { flex-wrap: wrap; gap: var(--space-2); }

    /* ── Activity comment form ── */
    #buddypress .activity-comments .ac-form { gap: 0.375rem; }

    /* ── Activity edit form ── */
    .activity-edit-input   { width: 100%; box-sizing: border-box; }
    .activity-edit-actions { flex-wrap: wrap; }

    /* ── Messages ── */
    .msg-layout {
        flex-direction: column;
        height: auto;
        min-height: 80vh;
        overflow: visible;
    }

    .msg-sidebar {
        width: 100%;
        min-width: 0;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .msg-main { flex: 1; min-height: 40vh; }

    .msg-search-input { width: 100%; box-sizing: border-box; }

    .msg-compose-form  { max-width: 100%; }
    .msg-compose-field input[type="text"],
    .msg-compose-field textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .msg-to-dropdown { left: 0; right: 0; max-width: 100%; }
    .msg-reply-field { width: 100%; }

    /* ── Directory ── */
    .dir-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .dir-search-wrap { max-width: 100%; }

    .dir-tabs-wrap {
        flex-direction: column;
        gap: var(--space-2);
    }

    .dir-tabs-wrap nav.bp-navs,
    .dir-tabs-wrap nav.bp-navs ul.component-navigation {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .dir-sort-wrap   { align-self: stretch; }
    .dir-sort-select { width: 100%; }

    /* ── Pagination ── */
    #pag-top, #pag-bottom { flex-wrap: wrap; }

    /* ── Notifications toolbar ── */
    .notifications-options-nav { flex-wrap: wrap; gap: var(--space-2); }

    /* ── Activity meta ── */
    #buddypress ul.activity-list .activity-meta { flex-wrap: wrap; }

    /* ── Groups ── */
    .group-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        padding: var(--space-3);
    }

    .left-menu, .main-column {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* ── Group invite ── */
    .anccer-invite-wrap { flex-direction: column; gap: var(--space-4); }

    .anccer-invite-search-col,
    .anccer-invite-results { width: 100%; min-width: 0; }

    /* ── Registration ── */
    .auth-card           { padding: var(--space-6) var(--space-5); }
    .auth-card--register { max-width: 100%; }

    #register-step-1 .editfield,
    #register-step-1 #profile-details-section-step1 .editfield { width: 100%; }

    #register-step-1 input[type="text"],
    #register-step-1 input[type="email"],
    #register-step-1 input[type="password"],
    #register-step-1 input[type="date"],
    #register-step-1 select { width: 100% !important; }

    #pass-strength-result {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ── Profile edit ── */
    .anccer-profile-edit-form { max-width: 100%; }

    .anccer-profile-edit-form input[type="text"],
    .anccer-profile-edit-form input[type="email"],
    .anccer-profile-edit-form input[type="date"],
    .anccer-profile-edit-form input[type="url"],
    .anccer-profile-edit-form textarea,
    .anccer-profile-edit-form select {
        width: 100%;
        box-sizing: border-box;
    }

    /* ── Checkbox card grids ── */
    .cancer-card-grid,
    .treatment-card-grid,
    .checkbox-options { grid-template-columns: repeat(2, 1fr) !important; }

    #register-page .input-options.datebox-selects {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Member cards ── */
    .anccer-member-card    { flex-wrap: wrap; gap: var(--space-2); }
    .anccer-member-actions { flex-wrap: wrap; gap: 0.375rem; }

    /* ── Notifications table ── */
    table.notifications {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    table.notifications thead th.date,
    table.notifications thead th.actions,
    table.notifications td.date,
    table.notifications td.actions { display: none; }

    /* ── Home page ── */
    .home-hero          { padding: 3rem var(--space-4) 2.5rem; }
    .home-hero-sub      { font-size: var(--text-sm); }
    .home-hero-actions  { flex-direction: column; align-items: center; }
    .home-stat-grid     { grid-template-columns: repeat(2, 1fr); }
    .home-pillars       { padding: 2.5rem var(--space-4); }
    .home-pillar-grid   { grid-template-columns: repeat(2, 1fr); }

    .home-cta-band { padding: 2.5rem var(--space-4); }
    .home-cta-actions {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    /* ── BP activity preview cards: full-width ── */
    .bp-member-activity-preview,
    .bp-group-activity-preview { max-width: none; }

    /* ── Activity items ── */
    #buddypress ul.activity-list { padding: 0; gap: var(--space-2); }

    #buddypress ul.activity-list li.activity-item {
        border-radius: var(--radius);
        border-bottom: 1px solid var(--color-border);
    }

    /* ── Non-BP page content padding ── */
    #main-content .page-content { padding: var(--space-4); }

    /* ── Messages: no outer padding ── */
    body.page-messages #page-wrapper { padding: 0 !important; }
}


/* ── ≤ 599px — mobile ── */
@media (max-width: 599px) {

    .header-nav-right .nav-icon-item:first-child { display: none; }

    #main-content { border-radius: 0; }

    #main-content .page-content { padding: 0.875rem; }

    #buddypress ul.activity-list { gap: 0; }

    #buddypress ul.activity-list li.activity-item {
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--color-border);
    }

    body.page-messages #page-wrapper { padding: 0 !important; }
}


/* ── ≤ 480px — phone ── */
@media (max-width: 480px) {

    :root { --nav-height: 56px; }

    .header-inner {
        padding-inline: max(0.625rem, env(safe-area-inset-left));
    }

    .site-logo img { height: 28px; }

    .btn-signin,
    .btn-register  { font-size: 11px; padding: 0.3rem var(--space-2); }

    .header-nav-right .nav-icon-item:nth-child(-n+2) { display: none; }

    #buddypress div#object-nav ul li a {
        padding: var(--space-2);
        font-size: var(--text-xs);
    }

    #buddypress div.item-list-tabs ul li a {
        padding: var(--space-2) 0.625rem;
        font-size: var(--text-xs);
    }

    .profile-tab { font-size: var(--text-xs); padding: 0.6rem 0.625rem; }

    .og-card-image img { max-height: 150px; }
    .og-preview-img    { max-height: 150px; }

    .profile-cover      { height: 70px; }
    .profile-avatar     { width: 60px; height: 60px; }
    .profile-avatar img { width: 60px !important; height: 60px !important; }
    .profile-name       { font-size: var(--text-xl); }

    .profile-content table.profile-fields td {
        display: block;
        width: 100% !important;
    }
    .profile-content table.profile-fields td.label {
        padding-right: 0;
        padding-bottom: 0.1rem;
        border-bottom: none;
        font-size: var(--text-xs);
    }

    #buddypress .activity-comments .ac-reply-avatar { display: none; }

    .activity-edit-actions { flex-direction: column; }
    .activity-edit-actions .btn { width: 100%; justify-content: center; }

    #whats-new-form { padding: 0.375rem var(--space-3); }

    #buddypress ul.activity-list li.activity-item {
        padding: var(--space-3);
        gap: 0.375rem;
    }

    #buddypress ul.activity-list .activity-avatar img {
        width: 36px !important;
        height: 36px !important;
    }

    #buddypress ul.activity-list .activity-header { font-size: var(--text-xs); }

    #buddypress ul.activity-list .activity-inner {
        font-size: var(--text-sm);
        line-height: var(--leading-normal);
    }

    #buddypress ul.activity-list .activity-meta a {
        padding: 0.3rem var(--space-2);
        font-size: var(--text-xs);
    }

    #buddypress .activity-comments .acomment-avatar img {
        width: 28px !important;
        height: 28px !important;
    }

    .msg-sidebar      { max-height: 30vh; }
    .msg-reply-avatar { display: none; }
    .msg-reply-field  { width: 100%; }

    .msg-reply-bar__form { flex-wrap: wrap; gap: var(--space-2); }
    .msg-reply-send     { width: 100%; justify-content: center; }

    .msg-convo-body    { padding: 0.875rem; }
    .msg-compose-panel { padding: var(--space-4); }

    .og-card-body { padding: var(--space-2) var(--space-3) 0.625rem; }

    #pag-top, #pag-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .dir-header    { padding: var(--space-3); }
    .dir-count-bar { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

    #buddypress div#subnav.item-list-tabs ul li.groups-members-search form {
        max-width: 100%;
    }

    .home-hero          { padding: 2.5rem 0.875rem 2rem; }
    .home-hero-headline { font-size: clamp(20px, 7vw, 28px); }
    .home-hero-eyebrow  { font-size: 11px; }

    .btn-hero-primary,
    .btn-hero-secondary,
    .btn-hero-ghost { width: 100%; justify-content: center; }

    .home-pillar-grid { grid-template-columns: 1fr; }
    .home-stat-grid   { grid-template-columns: 1fr; }
    .home-stat-number { font-size: 28px; }

    .home-cta-band { padding: 2rem 0.875rem; }
    .home-cta-actions .btn-hero-primary,
    .home-cta-actions .btn-hero-ghost { width: 100%; }

    .auth-card        { padding: var(--space-5) 0.875rem; border-radius: var(--radius); }
    .auth-card-header { margin-bottom: var(--space-4); }

    .register-step-bubble { width: 26px; height: 26px; font-size: 11px; }
    .register-step-label  { font-size: 10px; }

    .btn-auth-primary               { width: 100%; }
    #register-next.btn-auth-primary { width: auto; }

    .group-card-grid { grid-template-columns: 1fr !important; padding: var(--space-2); }

    .cancer-card-grid,
    .treatment-card-grid,
    .checkbox-options,
    .anccer-profile-edit-form .cancer-card-grid,
    .anccer-profile-edit-form .treatment-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #register-page .input-options.datebox-selects {
        grid-template-columns: 1fr;
    }

    .blocked-member-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .footer-copy { font-size: 11px; }
}


/* ── ≤ 360px — small phone ── */
@media (max-width: 360px) {

    .site-logo img { height: 24px; }

    .header-nav-right .nav-icon-item { display: none; }

    .header-inner {
        padding-inline: max(var(--space-2), env(safe-area-inset-left));
    }

    .profile-name  { font-size: var(--text-sm); }
    .profile-tab   { font-size: 11px; padding: var(--space-2); }

    .auth-card { padding: var(--space-4) var(--space-3); }
    .home-hero { padding: 2rem var(--space-3) 1.5rem; }

    #register-page .input-options.datebox-selects {
        grid-template-columns: 1fr;
    }

    #buddypress ul.activity-list li.activity-item { padding: 0.625rem; }

    .footer-bar  { gap: 0.625rem; }
    .footer-copy { font-size: 11px; }
}


/* ── ≤ 320px — minimum supported ── */
@media (max-width: 320px) {

    #page-wrapper,
    #main-content,
    .layout-sidebar-left,
    .layout-sidebar-right { max-width: 100vw; }

    .auth-card { padding: 0.875rem 0.625rem; }

    .cancer-card-grid,
    .treatment-card-grid,
    .checkbox-options,
    .anccer-profile-edit-form .cancer-card-grid,
    .anccer-profile-edit-form .treatment-card-grid {
        grid-template-columns: 1fr !important;
    }

    .home-hero { padding: 1.75rem var(--space-2) 1.25rem; }
    .home-hero-headline { font-size: 18px; }

    .profile-avatar img { width: 52px !important; height: 52px !important; }
    .profile-name { font-size: var(--text-sm); }

    .btn-hero-primary,
    .btn-hero-secondary,
    .btn-hero-ghost,
    .btn-auth-primary { width: 100%; }

    .register-step-bubble    { width: 22px; height: 22px; font-size: 10px; }
    .register-step-connector { width: 36px; }
}

/* ═══════════════════════════════════════════════════════
   HEADER NAVIGATION (P1)
   Visual styles restored here from the legacy main.css (which is no longer
   enqueued; only layout/positioning survived in layout.css). Top-nav icons are
   normalized to one size + stroke weight + hover/active treatment, and the
   logged-out About/Donate items + Sign in/Join buttons are made cohesive.
   ═══════════════════════════════════════════════════════ */

/* Icon nav items (logged-in: Activity/Groups/Members/Events/Search/Messages) */
.nav-icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    text-decoration: none;
    position: relative;
    transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
}
/* Normalize ALL top-nav icon glyphs to one size + stroke weight regardless of
   the inline width/height/stroke-width on each SVG. */
.nav-icon-item svg,
.hdr-search__btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}
.nav-icon-item:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}
.nav-icon-item.active,
.nav-icon-item.is-active {
    color: var(--color-primary);
    background: var(--color-active-bg, #eef2ff);
}
.nav-icon-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Unread badge on message/notification icons */
.nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--color-accent, #e8703a);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-full, 8px);
    padding: 0 4px;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Logged-out text nav items (About / Donate) — proper nav items */
.nav-text-item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
}
.nav-text-item:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}
.nav-text-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Auth buttons — Sign in (outline) + Join (accent fill). About/Donate align
   with these for a cohesive logged-out header. */
.btn-signin,
.btn-register {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.btn-signin {
    color: var(--color-primary);
    font-weight: var(--font-medium);
    border: 1.5px solid var(--color-primary);
}
.btn-signin:hover { background: var(--color-primary); color: #fff; }
.btn-register {
    background: var(--color-accent);
    color: #fff;
    font-weight: var(--font-semibold);
    border: 1.5px solid var(--color-accent);
}
.btn-register:hover { opacity: 0.9; }
.btn-signin:focus-visible,
.btn-register:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   HEADER USER MENU (P2C)
   Restored from the legacy main.css (no longer enqueued). The avatar button +
   its dropdown lost their styling in the CSS split, so the menu rendered as
   raw links in the wrong place. The dropdown anchors to .header-user-menu
   (position: relative) and overlays content via z-index — it never affects
   document layout. Uses design tokens (the old rules referenced a non-existent
   --color-muted).
   ═══════════════════════════════════════════════════════ */

.header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.header-avatar img {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full, 50%);
    display: block;
    border: 2px solid var(--color-border);
    transition: border-color 0.15s;
}
.header-avatar:hover img,
.header-avatar[aria-expanded="true"] img { border-color: var(--color-primary); }
.header-avatar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-full, 50%); }

/* Anchor: the dropdown positions against this, directly beneath the avatar. */
.header-user-menu {
    position: relative;
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    width: 240px;
    max-width: calc(100vw - var(--space-4));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    z-index: 1000;
    overflow: hidden;
    padding: var(--space-1) 0;
}
/* Native [hidden] must stay hidden even though we set display:block above. */
.header-user-dropdown[hidden] { display: none; }

.hud-identity {
    padding: var(--space-3) var(--space-4) var(--space-2);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}
.hud-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    line-height: var(--leading-snug);
}
.hud-username {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.hud-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.12s;
}
.hud-item:hover  { background: var(--color-bg); }
.hud-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.hud-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}

.hud-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
    border: 0;
}

.hud-item--danger     { color: var(--color-danger, #c0392b); }
.hud-item--danger svg { color: var(--color-danger, #c0392b); }

/* ═══════════════════════════════════════════════════════
   TOOLTIP SYSTEM (P2E)
   One body-level element positioned by assets/js/tooltip.js. Fixed + high
   z-index so it overlays cards/panels/drawers/overlays and is never clipped.
   Uses design tokens; matches the app's dark-surface overlay language.
   ═══════════════════════════════════════════════════════ */
.anccer-tooltip {
    position: fixed;
    left: -9999px;
    top: -9999px;
    z-index: var(--z-tooltip, 600);
    max-width: 260px;
    padding: var(--space-1) var(--space-2);
    background: var(--color-text, #1c1e21);
    color: var(--color-text-inverse, #fff);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    pointer-events: none;        /* never intercept hover/click on the target */
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.anccer-tooltip.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .anccer-tooltip { transition: opacity 0.12s ease; transform: none; }
}