.social-screen .page-content {
    position: relative;
    isolation: isolate;
}

.social-screen header,
.social-screen main,
.social-screen footer {
    position: relative;
    z-index: 1;
}

.social-screen header { z-index: 40; }
.social-screen .account-menu,
.social-screen .account-panel { z-index: 41; }

.social-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 170px);
}

.social-activity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.notification-center {
    position: relative;
    z-index: 40;
    margin-top: 7px;
}

.notifications-trigger {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--muted-text);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.notifications-trigger:hover,
.notifications-trigger[aria-expanded="true"] {
    background-color: var(--soft-bg);
    color: var(--accent);
}

.notifications-trigger svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding: 0 4px;
    background-color: #e84855;
    color: #fff;
    border: 2px solid var(--page-bg);
    border-radius: 999px;
    font-size: 9px;
    font-weight: bold;
}

.notification-badge[hidden],
.notifications-panel[hidden] {
    display: none;
}

.notifications-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 36px));
    max-height: min(72vh, 620px);
    overflow: hidden;
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgb(0 0 0 / 38%);
}

.notifications-panel.is-mobile-popover {
    position: fixed;
    z-index: 1000;
    top: var(--notification-panel-top);
    right: 12px;
    left: var(--notification-panel-left);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--notification-panel-top) - 16px);
}

.notifications-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.notifications-panel-heading h3 {
    color: var(--text);
    font-size: 16px;
}

.notifications-close {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
}

.notifications-panel-actions { display: flex; align-items: center; gap: 8px; }
.notifications-clear { padding: 6px 8px; color: var(--muted-text); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 11px; }
.notifications-clear:hover:not(:disabled) { color: var(--accent); background: var(--soft-bg); }
.notifications-clear:disabled { opacity: .55; cursor: default; }
.notifications-action-status { padding: 8px 16px 0; color: var(--muted-text); font-size: 10px; line-height: 1.4; }
.notifications-action-status[hidden] { display: none; }
/* Clearing: each notification slides out, one after another (social.js sets the delay). */
.notification-item.is-clearing { animation: notification-clear 320ms cubic-bezier(0.4, 0, 1, 1) var(--clear-delay, 0ms) forwards; pointer-events: none; }
@keyframes notification-clear { to { opacity: 0; transform: translateX(28px); } }
/* The empty list: a check mark with a title and one line under it. */
.notifications-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 16px 30px; text-align: center; animation: notifications-empty-in 360ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.notifications-empty-icon { display: grid; width: 42px; height: 42px; margin-bottom: 4px; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; }
.notifications-empty-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; animation: notifications-check 420ms ease-out 160ms forwards; }
.notifications-empty strong { color: var(--text); font-size: 14px; }
.notifications-empty > span:last-child { color: var(--muted-text); font-size: 12px; line-height: 1.4; }
@keyframes notifications-empty-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes notifications-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .notifications-empty,
    .notifications-empty-icon svg { animation: none; stroke-dashoffset: 0; }
}

.notifications-list {
    display: grid;
    max-height: calc(min(72vh, 620px) - 60px);
    overflow-y: auto;
}

.notification-item {
    display: grid;
    gap: 7px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}

.notification-item.is-unread {
    background-color: color-mix(in srgb, var(--accent) 7%, var(--panel-bg));
}

.notification-item > p {
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
}

.notification-item time {
    color: var(--muted-text);
    font-size: 11px;
}

.notification-actions { margin-top: 4px; }

@media (max-width: 700px) {
    .notifications-panel.is-mobile-popover .notifications-list {
        max-height: calc(100dvh - var(--notification-panel-top) - 78px);
    }
}

.friend-request-actions {
    display: flex;
    gap: 8px;
}

.friend-request-actions button {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.friend-request-accept {
    background-color: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent) !important;
}

.friend-request-decline {
    background-color: transparent;
    color: #e84855;
    border-color: #e84855 !important;
}

.social-activity-section {
    margin-bottom: 18px;
}

.social-activity-section h2 {
    margin-top: 7px;
    color: var(--text);
    font-size: 22px;
}

.social-activity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.social-activity-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.notification-center {
    position: relative;
    z-index: 30;
    margin-top: 0;
}

.notifications-trigger {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--muted-text);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.notifications-trigger:hover,
.notifications-trigger[aria-expanded="true"] {
    background-color: var(--soft-bg);
    color: var(--accent);
}

.notifications-trigger svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding: 0 4px;
    background: #e84855;
    color: #fff;
    border: 2px solid var(--page-bg);
    border-radius: 999px;
    font-size: 9px;
    font-weight: bold;
}

.notification-badge[hidden] { display: none; }

.notifications-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 36px));
    max-height: min(72vh, 620px);
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgb(0 0 0 / 38%);
}

.notifications-panel[hidden] { display: none; }

.notifications-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.notifications-panel-heading h3 {
    color: var(--text);
    font-size: 16px;
}

.notifications-close {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
}

.notifications-list {
    display: grid;
    max-height: calc(min(72vh, 620px) - 64px);
    overflow-y: auto;
}

.notification-item {
    display: grid;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.notification-item.is-unread {
    background: color-mix(in srgb, var(--accent) 7%, var(--panel-bg));
}

.notification-item > p {
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
}

.notification-item time {
    color: var(--muted-text);
    font-size: 11px;
}

.notification-actions { margin-top: 4px; }

.social-post {
    min-width: 0;
    max-width: 100%;
    margin-top: 14px;
    padding: 20px;
    background: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%), color-mix(in srgb, var(--panel-bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%);
}

.social-post-skeleton {
    display: grid;
    gap: 16px;
}

.social-post-skeleton .skeleton-line:first-child { width: 42%; }
.social-post-skeleton .skeleton-line:nth-child(2) { width: 68%; height: 16px; }
.social-post-skeleton .skeleton-line:nth-child(3) { width: 88%; }
.social-post-skeleton .skeleton-line:nth-child(4) { width: 32%; }

.friend-request-skeleton {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.friend-request-skeleton .skeleton-line:first-child { width: 38%; }
.friend-request-skeleton .skeleton-line:last-child { width: 30%; }

.social-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.social-post-author {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.social-post-avatar {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    overflow: hidden;
    color: var(--accent);
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.social-post-avatar img,
.social-comment-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-post-header a {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

.social-post-header a:hover {
    color: var(--accent);
}

.social-post-date {
    flex: 0 0 auto;
    color: var(--muted-text);
    font-size: 10px;
    white-space: nowrap;
}

.social-post-copy {
    margin-top: 8px;
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.recent-prs-section { margin-top: 14px; }
/* Milestones share the PR highlight card in the accent colour; their badge is outlined instead of filled. */
.social-milestone-post .social-pr-badge:not(#milestone) { color: var(--accent); background-color: transparent; box-shadow: inset 0 0 0 1px var(--accent); }

/* Training now: friends checked in with the session timer, each with a pulsing green ring. */
.training-now-section { margin-top: 14px; }
.training-now-section[hidden] { display: none; }
.training-now-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; background: #3ddc84; border-radius: 50%; box-shadow: 0 0 0 0 rgb(61 220 132 / 60%); animation: training-now-pulse 1.8s ease-out infinite; }
.training-now-list { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.training-now-friend { display: grid; flex: 0 0 auto; justify-items: center; gap: 4px; width: 76px; color: var(--text); text-align: center; text-decoration: none; }
.training-now-friend:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.training-now-ring { display: grid; padding: 3px; border: 2px solid #3ddc84; border-radius: 50%; box-shadow: 0 0 0 0 rgb(61 220 132 / 50%); animation: training-now-pulse 1.8s ease-out infinite; }
.training-now-avatar { display: grid; width: 50px; height: 50px; overflow: hidden; place-items: center; color: var(--accent); background: var(--soft-bg); border-radius: 50%; font-size: 18px; font-weight: 700; }
.training-now-avatar img { width: 100%; height: 100%; object-fit: cover; }
.training-now-avatar .fav-heart-badge { display: none; }
.training-now-name { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.training-now-time { color: #3ddc84; font-size: 10px; font-weight: 600; }
@keyframes training-now-pulse {
    0% { box-shadow: 0 0 0 0 rgb(61 220 132 / 50%); }
    70% { box-shadow: 0 0 0 8px rgb(61 220 132 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(61 220 132 / 0%); }
}
@media (prefers-reduced-motion: reduce) {
    .training-now-dot,
    .training-now-ring { animation: none; }
}

.recent-prs-heading {
    color: var(--accent);
    font-size: 13px;
}

.recent-prs-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

.recent-prs-list .social-post {
    flex: 0 0 min(300px, 85%);
    margin-top: 8px;
    scroll-snap-align: start;
}

.social-pr-post {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}

.social-pr-badge {
    display: inline-block;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 5px 8px;
    background-color: var(--accent);
    color: var(--accent-ink);
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.social-pr-details {
    margin-top: 12px;
    color: var(--accent);
    font-size: 18px;
    font-weight: bold;
}

.social-post-details {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

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

.social-exercise {
    display: grid;
    gap: 6px;
}

.social-exercise-name {
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

.social-exercise-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.social-set-chip {
    padding: 4px 9px;
    color: var(--muted-text);
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.social-post-copy {
    font-size: 15px;
    font-weight: 600;
}

.social-companion-link {
    color: var(--accent);
    text-decoration: none;
}
.social-companion-link:hover { text-decoration: underline; }

.social-post-interactions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 10px;
    margin-top: 16px;
}
.social-reaction-group { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.social-pr-interactions { flex-wrap: nowrap; justify-content: space-between; }
.social-pr-interactions .social-post-date { margin-left: auto; }

.social-like-button,
.social-congrats-button,
.social-reaction-count,
.social-comment-form button {
    padding: 7px 10px;
    background-color: transparent;
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.social-like-button,
.social-congrats-button {
    min-width: 62px;
    padding: 11px 13px;
    font-size: 15px;
}

.social-like-button {
    display: grid;
    width: 28px;
    height: 32px;
    min-width: 28px;
    flex: 0 0 28px;
    place-items: center;
    padding: 0;
    color: #f04a5d;
    background: transparent;
    border: 0;
    border-radius: 50%;
    transition: color 160ms ease, filter 160ms ease, transform 120ms ease;
}
.social-like-icon { width: 30px; height: 30px; fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: fill 160ms ease; }
.social-like-button.is-liked { color: #ff334f; }
.social-like-button.is-liked .social-like-icon { fill: currentColor; }
.social-like-button.is-liked .social-like-icon { filter: drop-shadow(0 0 5px rgb(255 51 79 / 90%)) drop-shadow(0 0 11px rgb(255 51 79 / 48%)); }
.social-like-button:active:not(:disabled) { transform: scale(.94); }
.social-like-button:focus-visible { outline: 2px solid #ff334f; outline-offset: 2px; }
.social-reaction-count { padding: 0; color: var(--muted-text); background: transparent; border: 0; border-radius: 0; }
.social-like-count { padding: 0; }

/* Congrats follows the accent colour, like the PR and milestone highlights it sits on. */
.social-congrats-button {
    color: var(--accent);
    border-color: var(--accent);
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.social-congrats-button.is-congratulated {
    color: var(--accent-ink);
    background-color: var(--accent);
    box-shadow: none;
}
.social-congrats-button.is-congratulated:hover:not(:disabled) { color: var(--accent-ink); }
/* :not(#congrats) outranks the light-mode button rule in settings.css. */
body[data-mode="light"] .social-congrats-button:not(.is-congratulated):not(#congrats) { color: var(--accent); }

.social-like-button:disabled,
.social-congrats-button:disabled {
    cursor: default;
    opacity: 0.7;
}

.social-reaction-count {
    padding: 9px 10px;
}

.social-like-button:hover,
.social-congrats-button:hover,
.social-reaction-count:hover,
.social-comment-form button:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.social-like-button:hover {
    color: #ff334f;
    filter: drop-shadow(0 0 4px rgb(255 51 79 / 38%));
}

.social-congrats-button:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.social-reaction-names {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.social-reaction-names[hidden] {
    display: none;
}

.social-reaction-name {
    padding: 5px 8px;
    background-color: var(--soft-bg);
    color: var(--muted-text);
    border-radius: 6px;
    font-size: 12px;
}

.social-post-comments {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.social-post-comments p {
    color: var(--muted-text);
    font-size: 13px;
    line-height: 1.4;
}

.social-comment-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.social-comment-avatar {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    overflow: hidden;
    color: var(--accent);
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}

.social-comment-content {
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--soft-bg) 72%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.social-comment-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.social-comment-meta strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.social-comment-time { color: var(--muted-text); font-size: 10px; white-space: nowrap; }
.social-comment-text { margin: 0; color: var(--muted-text); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.social-comment-meta .social-reply-button { margin-left: auto; flex: 0 0 auto; }

.social-reply-button {
    min-height: 24px;
    padding: 3px 8px;
    background: var(--soft-bg);
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
}

.social-reply-button:hover,
.social-reply-button:focus-visible {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
}

.social-post-comments strong {
    color: var(--text);
}

.social-comment-form {
    display: flex;
    min-width: 0;
    flex: 1;
    gap: 8px;
}

.social-comment-form button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.social-comment-form input {
    min-width: 0;
    flex: 1;
    padding: 8px 10px;
    background-color: var(--soft-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.add-people-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    background-color: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
}

.add-people-button:hover {
    background-color: transparent;
    color: var(--accent);
}

.monthly-leaderboard-button {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    color: var(--muted-text);
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.monthly-leaderboard-button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.monthly-leaderboard-button:disabled { opacity: .55; cursor: default; }
.monthly-leaderboard-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.social-activity-actions .monthly-leaderboard-button,
.social-activity-actions .add-people-button,
.social-activity-actions .notifications-trigger {
    display: grid;
    width: 38px;
    height: 38px;
    min-height: 0;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    color: var(--muted-text);
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}
.social-activity-actions .notifications-trigger:hover,
.social-activity-actions .notifications-trigger[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--soft-bg); }
.social-activity-actions .notifications-trigger svg,
.social-activity-actions .add-people-button svg { width: 20px; height: 20px; stroke-width: 1.8; }
.social-activity-actions .add-people-button {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.social-activity-actions .add-people-button:hover,
.social-activity-actions .add-people-button[aria-expanded="true"] { color: var(--accent); background: var(--soft-bg); }
.monthly-leaderboard-popover {
    position: fixed;
    inset: auto;
    width: min(480px, calc(100vw - 28px));
    max-width: none;
    max-height: min(620px, calc(100vh - 32px));
    padding: 0;
    overflow: auto;
    color: var(--text);
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 22px 70px rgb(0 0 0 / 35%);
    transform-origin: var(--leaderboard-origin-x, 50%) top;
}
.monthly-leaderboard-popover:popover-open { animation: monthly-leaderboard-appear 170ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
@keyframes monthly-leaderboard-appear {
    from { opacity: 0; transform: translateY(-6px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .monthly-leaderboard-popover:popover-open { animation: none; }
}
.monthly-leaderboard-content { display: grid; gap: 14px; padding: 20px; }
.monthly-leaderboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.monthly-leaderboard-heading h2 { color: var(--text); font-size: 18px; }
.monthly-leaderboard-close,
.monthly-leaderboard-month-button {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    padding: 0;
    color: var(--muted-text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.monthly-leaderboard-close:hover,
.monthly-leaderboard-month-button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.monthly-leaderboard-month-button:disabled { opacity: .4; cursor: default; }
.monthly-leaderboard-month-nav { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.monthly-leaderboard-month-nav p { color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }
.monthly-leaderboard-rows { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.monthly-leaderboard-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 6px; }
.monthly-leaderboard-row.is-current-user { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.monthly-leaderboard-rank { color: var(--muted-text); font-size: 12px; font-weight: 700; text-align: center; }
.monthly-leaderboard-row:first-child .monthly-leaderboard-rank { color: var(--accent); }
.monthly-leaderboard-name { min-width: 0; color: var(--text); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }

/* All / Favourites switch beside the Activity heading */
/* The 7px gap under the kicker sits on the row, so "Activity" and the switch share one centre line. */
.social-activity-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 7px; }
.social-activity-section .social-activity-title h2 { margin-top: 0; line-height: 1.2; }
/* Two equal halves with a highlight that slides between them, like the People / Clubs tabs. */
.social-feed-filter { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 999px; }
.social-feed-filter-indicator { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--accent); border-radius: 999px; transition: transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.social-feed-filter[data-active="favourites"] .social-feed-filter-indicator,
.leaderboard-mode[data-active="running"] .social-feed-filter-indicator { transform: translateX(100%); }
.leaderboard-mode { display: grid; width: 100%; margin: 4px 0 2px; }
.social-feed-filter button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 14px; color: var(--muted-text); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; transition: color 220ms ease; }
.social-feed-filter button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.social-feed-filter button:hover { color: var(--text); }
.social-feed-filter button[aria-pressed="true"] { color: var(--accent-ink); }
.social-feed-filter button[aria-pressed="true"] svg { fill: currentColor; }
.social-feed-filter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .social-feed-filter-indicator, .social-feed-filter button { transition: none; }
}
/* Phones: a heart instead of the word, so the switch fits beside "Activity". */
@media (max-width: 600px) {
    .social-activity-title { flex-wrap: nowrap; gap: 8px; }
    .social-feed-filter button { padding: 5px 10px; font-size: 11px; }
    .social-feed-filter-label { display: none; }
}
.monthly-leaderboard-score { color: var(--muted-text); font-size: 10px; text-align: right; white-space: nowrap; }
.monthly-leaderboard-status { min-height: 18px; color: var(--muted-text); font-size: 11px; line-height: 1.4; }
.monthly-leaderboard-status:empty { display: none; }
.monthly-leaderboard-rows:empty { display: none; }
.monthly-leaderboard-empty { color: var(--muted-text); font-size: 12px; text-align: center; }

.social-search-popover {
    position: fixed;
    inset: 0;
    width: min(480px, calc(100vw - 28px));
    max-width: none;
    height: fit-content;
    max-height: min(620px, calc(100vh - 32px));
    margin: 8vh auto auto;
    padding: 18px;
    overflow: auto;
    color: var(--text);
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 22px 70px rgb(0 0 0 / 35%);
}
.social-search-popover:popover-open {
    display: grid;
    gap: 14px;
    animation: monthly-leaderboard-appear 170ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.social-search-popover::backdrop { background: rgb(0 0 0 / 35%); }
.social-search-popover .social-search-form { min-width: 0; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.social-search-popover .social-search-form input { padding: 12px 14px; font-size: 15px; }
.social-search-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    background: var(--soft-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.social-search-tab-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: var(--accent);
    border-radius: 6px;
    transition: transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.social-search-tabs[data-active="clubs"] .social-search-tab-indicator { transform: translateX(100%); }
.social-search-tab {
    position: relative;
    padding: 8px;
    color: var(--muted-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: color 220ms ease;
}
.social-search-tab.is-active { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
    .social-search-tab-indicator, .social-search-tab { transition: none; }
}

.social-search-panel,
.social-section {
    padding: 24px;
    background: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%), color-mix(in srgb, var(--panel-bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%);
}

.social-search-panel[hidden],
.social-section[hidden] {
    display: none;
}

.social-search-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.social-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.social-search-form {
    display: flex;
    min-width: min(100%, 360px);
    gap: 8px;
}

.social-search-form input {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;
    background-color: var(--soft-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.social-search-button {
    padding: 10px 16px;
    background-color: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.social-search-button:hover {
    background-color: transparent;
    color: var(--accent);
}

.social-results {
    display: grid;
    gap: 10px;
}

.social-person,
.social-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--border);
}

.social-activity-item {
    justify-content: space-between;
    color: inherit;
    text-decoration: none;
}

.social-activity-item:hover {
    background-color: var(--soft-bg);
}

.social-activity-item span {
    color: var(--muted-text);
    font-size: 13px;
}

.social-person {
    color: inherit;
    text-decoration: none;
}

.social-person:hover {
    background-color: var(--soft-bg);
}

.social-person strong,
.social-activity-item strong {
    color: var(--text);
    font-size: 14px;
}

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

/* Under the feed: older posts load when this comes into view. */
.social-feed-more {
    margin: 18px 0 6px;
    color: var(--muted-text);
    font-size: 12px;
    text-align: center;
}

.social-empty-state {
    flex: 1;
    display: grid;
    min-height: 0;
    place-items: center;
    color: var(--muted-text);
    text-align: center;
}

.social-empty-state[hidden] {
    display: none;
}

.social-person-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    overflow: hidden;
    background-color: var(--soft-bg);
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-weight: bold;
}

.social-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 600px) {
    .social-search-form { min-width: 0; }
}

@media (max-width: 700px) {
    .social-screen .page-content {
        padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 24px;
    }

    .social-page { margin-top: 14px; }

    .social-activity-heading { align-items: center; flex-direction: row; gap: 10px; }
    .social-activity-heading > div:first-child { min-width: 0; flex: 1 1 auto; }
    .social-activity-actions { width: auto; flex: 0 0 auto; justify-content: flex-end; gap: 6px; }
    .add-people-button { padding-inline: 9px; font-size: 11px; }

    .social-post {
        padding: 14px;
    }

    .social-post-interactions {
        gap: 7px;
        flex-wrap: nowrap;
    }

    .social-reaction-group { flex-direction: column; gap: 0; }
    .social-pr-interactions .social-reaction-group { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }

    .social-congrats-button {
        min-width: 0;
        padding: 9px 10px;
        font-size: 13px;
    }

    .social-like-button { width: 28px; height: 32px; min-width: 28px; flex-basis: 28px; padding: 0; }

    .social-reaction-count {
        padding: 8px;
    }

    .social-like-count { min-height: 14px; padding: 0; font-size: 9px; line-height: 1; }

    .social-comment-form {
        flex-basis: 0;
        width: auto;
    }

    .social-comment-form input {
        width: 0;
    }
}

/* Premium members' posts: just a soft outer glow (plus the crown on the avatar); the inside stays as usual. */
.social-post.is-premium-post { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); }
.social-pr-post.is-premium-post { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }

/* The crown on a Premium member's post avatar, like on their profile. */
.social-post-avatar.premium-avatar { position: relative; overflow: visible; border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); box-shadow: none; }
.social-post-avatar.premium-avatar img { border-radius: 50%; }
.social-post-avatar.premium-avatar .premium-crown { position: absolute; top: -12px; left: 50%; z-index: 2; width: 19px; height: 19px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 30%, var(--panel-bg)), var(--panel-bg)); transform: translateX(-50%) rotate(-8deg); }
.social-post-author:has(.premium-avatar) { padding-top: 4px; }

/* Like and Congrats burst: the heart pops, a ring flashes and particles fly outwards. */
.social-like-button,
.social-congrats-button { position: relative; overflow: visible; }
.social-like-button { --burst-colour: #ff334f; }
.social-congrats-button { --burst-colour: var(--accent); }
.reaction-burst { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
.reaction-burst-ring {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 32px;
    height: 32px;
    border: 2px solid var(--burst-colour);
    border-radius: 50%;
    opacity: 0;
    animation: reaction-ring 520ms ease-out forwards;
}
.reaction-burst-particle {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    background: var(--burst-colour);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--burst-colour);
    opacity: 0;
    animation: reaction-particle 650ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.reaction-burst-particle:nth-child(odd) { width: 4px; height: 4px; top: -2px; left: -2px; animation-delay: 60ms; }
.social-like-button.is-bursting .social-like-icon { animation: like-pop 480ms cubic-bezier(0.2, 0.75, 0.25, 1.4); }
.social-congrats-button.is-bursting { animation: save-confirmed-pop 460ms cubic-bezier(0.2, 0.75, 0.25, 1.3); }
@keyframes like-pop {
    0% { transform: scale(0.6); }
    45% { transform: scale(1.3) rotate(-8deg); }
    75% { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1); }
}
@keyframes reaction-ring {
    0% { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.9); border-width: 0; }
}
@keyframes reaction-particle {
    0% { opacity: 1; transform: rotate(var(--burst-angle)) translateY(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--burst-angle)) translateY(calc(var(--burst-distance) * -1)) scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
    .reaction-burst { display: none; }
    .social-like-button.is-bursting .social-like-icon,
    .social-congrats-button.is-bursting { animation: none; }
}

/* Congrats is the party popper: grey and faded until you tap it, then it pops, wiggles and lights up in colour.
   :not(#congrats) outranks the older outlined-button rules above and the light-mode ones in settings.css. */
.social-congrats-button:not(#congrats),
body[data-mode="light"] .social-congrats-button:not(#congrats),
body[data-mode="light"] .social-congrats-button:not(#congrats):hover {
    display: grid;
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex: 0 0 50px;
    place-items: center;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    transition: transform 120ms ease;
}
.social-congrats-button:not(#congrats):disabled { opacity: 1; }
.social-congrats-icon {
    width: 42px;
    height: 42px;
    filter: grayscale(1) brightness(1.15);
    opacity: .42;
    transition: filter 220ms ease, opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1.4);
    pointer-events: none;
}
.social-congrats-button:hover:not(:disabled) .social-congrats-icon { opacity: .7; transform: rotate(-8deg) scale(1.06); }
.social-congrats-button:active:not(:disabled) { transform: scale(.92); }
.social-congrats-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.social-congrats-button.is-congratulated .social-congrats-icon,
.social-congrats-button.is-congratulated:hover:not(:disabled) .social-congrats-icon {
    filter: drop-shadow(0 0 6px rgb(255 207 63 / 65%)) drop-shadow(0 0 12px rgb(46 196 255 / 30%));
    opacity: 1;
    transform: none;
}
/* Your own post: the popper stays grey, a bit fainter. */
.social-congrats-button:disabled:not(.is-congratulated) .social-congrats-icon { opacity: .28; }
.social-congrats-button.is-bursting:not(#congrats) { animation: none; }
.social-congrats-button.is-bursting .social-congrats-icon { animation: congrats-pop 620ms cubic-bezier(0.2, 0.75, 0.25, 1.3); }
@keyframes congrats-pop {
    0% { transform: scale(0.55) rotate(0deg); }
    30% { transform: scale(1.4) rotate(-22deg); }
    52% { transform: scale(0.92) rotate(14deg); }
    72% { transform: scale(1.08) rotate(-6deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.reaction-burst.is-confetti .reaction-burst-ring { top: -22px; left: -22px; width: 44px; height: 44px; border-color: #ffcf3f; animation-duration: 600ms; }
.reaction-burst.is-confetti .reaction-burst-particle,
.reaction-burst.is-confetti .reaction-burst-particle:nth-child(odd) {
    top: -4px;
    left: -2px;
    width: 4px;
    height: 8px;
    border-radius: 1px;
    box-shadow: none;
    animation: congrats-confetti 760ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.reaction-burst.is-confetti .reaction-burst-particle:nth-child(3n) { width: 6px; height: 6px; top: -3px; left: -3px; border-radius: 50%; }
.reaction-burst.is-confetti .reaction-burst-particle:nth-child(odd) { animation-delay: 50ms; }
@keyframes congrats-confetti {
    0% { opacity: 1; transform: rotate(var(--burst-angle)) translateY(0) rotate(0deg) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--burst-angle)) translateY(calc(var(--burst-distance) * -1)) rotate(var(--burst-spin)) scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
    .social-congrats-button.is-bursting .social-congrats-icon { animation: none; }
}

/* New posts while you're on the page */
.new-posts-pill {
    position: sticky;
    top: calc(12px + env(safe-area-inset-top, 0px));
    z-index: 20;
    display: block;
    margin: 4px auto 0;
    padding: 9px 18px;
    color: var(--accent-ink);
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgb(0 0 0 / 35%);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    animation: new-posts-in 320ms cubic-bezier(0.2, 0.75, 0.25, 1.3);
}
.new-posts-pill[hidden] { display: none; }
@keyframes new-posts-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.92); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .new-posts-pill { animation: none; } }

/* Suggested friends in search */
.social-suggested-heading { margin: 2px 2px 6px; color: var(--muted-text); font-size: 12px; font-weight: 600; }
.social-person-mutual { margin-left: auto; color: var(--muted-text); font-size: 11px; white-space: nowrap; }

/* A split a friend shared */
.shared-split-dialog { width: min(820px, calc(100vw - 24px)); max-height: min(90vh, 880px); max-height: min(90dvh, 880px); margin: auto; padding: 0; overflow: hidden; color: var(--text); background: var(--panel-bg); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / 50%); }
.shared-split-dialog::backdrop { background: rgb(7 9 13 / 72%); backdrop-filter: blur(5px); }
.shared-split-dialog[open] { display: flex; }
.shared-split-frame { display: flex; width: 100%; min-height: 0; flex-direction: column; }
.shared-split-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.shared-split-kicker { color: var(--accent); font-size: 12px; font-weight: 600; }
.shared-split-header h2 { margin-top: 4px; font-size: 22px; }
.shared-split-from { margin-top: 3px; color: var(--muted-text); font-size: 12px; }
.shared-split-close { width: 32px; height: 32px; color: var(--muted-text); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 20px; }
.shared-split-content { min-height: 0; padding: 4px 22px 18px; overflow-y: auto; overscroll-behavior: contain; }
.shared-split-status { margin: 0 22px 10px; color: var(--accent); font-size: 12px; }
.shared-split-status.is-error { color: #ff8a92; }
.shared-split-status[hidden] { display: none; }
.shared-split-status a { color: var(--accent); font-weight: 700; }
.shared-split-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); }
.shared-split-discard,
.shared-split-save { padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; }
.shared-split-discard { color: var(--text); background: transparent; border: 1px solid var(--border); }
.shared-split-save { color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); }
.shared-split-discard[hidden],
.shared-split-save[hidden] { display: none; }
.shared-split-discard:disabled,
.shared-split-save:disabled { cursor: wait; opacity: .7; }
@media (max-width: 600px) {
    .shared-split-header { padding: 16px; }
    .shared-split-content { padding: 4px 16px 14px; }
    .shared-split-actions { padding: 12px 16px; }
}

/* Workout posts: the highlights first; the whole post opens the full workout. */
.social-post.is-openable { cursor: pointer; transition: border-color 160ms ease, transform 160ms ease; }
.social-post.is-openable:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.social-post.is-openable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.social-post.is-openable :is(.social-post-comments, .social-comment-form, .social-reaction-names) { cursor: auto; }
.social-post-summary { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.social-post-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.social-post-stats div { display: grid; min-width: 0; gap: 2px; padding: 11px 12px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); border-radius: 10px; }
.social-post-stats strong { overflow: hidden; color: var(--text); font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.social-post-stats span { color: var(--muted-text); font-size: 11px; }
.social-post-highlight { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.social-post-highlight span { color: var(--muted-text); font-size: 12px; font-weight: 600; }
.social-post-highlight strong { color: var(--text); font-size: 14px; }
@media (max-width: 600px) {
    .social-post-stats { gap: 6px; }
    .social-post-stats div { padding: 9px 10px; }
    .social-post-stats strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .social-post.is-openable { transition: none; } }

/* Emotes in comments */
.emote { display: inline-block; width: 22px; height: 22px; margin: 0 1px; object-fit: contain; vertical-align: -6px; }
.social-emote-wrapper { position: relative; display: flex; flex: 0 0 auto; }
.social-comment-form .social-emote-button { display: grid; width: 38px; min-width: 38px; padding: 0; place-items: center; color: var(--muted-text); background: transparent; }
.social-comment-form .social-emote-button:hover,
.social-comment-form .social-emote-button[aria-expanded="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.social-emote-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.social-emote-picker {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: max-content;
    max-width: min(300px, calc(100vw - 48px));
    padding: 8px;
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 12px;
    box-shadow: 0 14px 34px rgb(0 0 0 / 45%);
    animation: emote-picker-in 160ms ease-out;
}
.social-emote-picker[hidden] { display: none; }
.social-comment-form .social-emote-option { position: relative; display: grid; width: 46px; height: 46px; min-width: 46px; padding: 0; place-items: center; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: transform 120ms ease, border-color 120ms ease; }
.social-comment-form .social-emote-option:hover:not(:disabled) { border-color: var(--accent); transform: scale(1.08); }
.social-emote-option-image { width: 34px; height: 34px; object-fit: contain; }
.social-comment-form .social-emote-option.is-locked { cursor: not-allowed; opacity: 1; }
.social-emote-option.is-locked .social-emote-option-image { filter: grayscale(1) brightness(.55); }
.social-emote-lock { position: absolute; right: 2px; bottom: 2px; padding: 1px 4px; color: var(--accent-ink); background: var(--accent); border-radius: 4px; font-size: 8px; font-weight: 800; }
.social-emote-hint { width: 100%; color: var(--muted-text); font-size: 11px; }
@keyframes emote-picker-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .social-emote-picker { animation: none; }
    .social-comment-form .social-emote-option { transition: none; }
}

/* Deleting your own comment: asks once more on the same button. */
.social-comment-delete { flex: 0 0 auto; min-height: 24px; padding: 3px 8px; color: var(--muted-text); background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 600; }
.social-comment-delete:hover,
.social-comment-delete:focus-visible,
.social-comment-delete.is-confirming { color: #ff6b6b; border-color: #ff6b6b; }
.social-comment-delete:disabled { cursor: wait; opacity: .6; }
.social-comment-report { display: inline-grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; padding: 0; margin-left: -3px; color: var(--muted-text); background: transparent; border: 0; border-radius: 6px; cursor: pointer; opacity: .55; }
.social-comment-report[hidden] { display: none; }
.social-comment-report:hover,
.social-comment-report:focus-visible { color: #ffb04d; opacity: 1; }
.report-dialog { width: min(420px, calc(100vw - 24px)); margin: auto; padding: 0; color: var(--text); background: var(--panel-bg); border: 1px solid var(--border); border-radius: 14px; }
.report-dialog::backdrop { background: rgb(7 9 13 / 78%); }
.report-dialog-form { display: grid; gap: 12px; padding: 20px; }
.report-dialog-form h2 { margin: 0; font-size: 18px; }
.report-dialog-text { margin: 0; color: var(--muted-text); font-size: 13px; }
.report-dialog-reasons { display: grid; gap: 6px; }
.report-dialog-reasons[hidden] { display: none; }
.report-dialog-reasons label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; }
.report-dialog-reasons label:has(input:checked) { border-color: var(--accent); }
.report-dialog-reasons input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.report-dialog-note { display: grid; gap: 6px; color: var(--muted-text); font-size: 12px; }
.report-dialog-note span { display: inline; }
.report-dialog-note textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }
.report-dialog-page[hidden] { display: none; }
.report-dialog-page select { width: 100%; box-sizing: border-box; padding: 9px 10px; color: var(--text); background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.report-dialog-status { margin: 0; color: #ff7a85; font-size: 12px; }
.report-dialog-status[hidden] { display: none; }
.report-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.report-dialog-cancel,
.report-dialog-send { padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; }
.report-dialog-cancel { color: var(--text); background: transparent; border: 1px solid var(--border); }
.report-dialog-send { color: var(--page-bg); background: var(--accent); border: 1px solid var(--accent); }
.report-dialog-send:disabled { cursor: wait; opacity: .6; }
.social-comment-row { transition: opacity 180ms ease, transform 180ms ease; }
.social-comment-row.is-removing { opacity: 0; transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) { .social-comment-row { transition: none; } }

/* A single action under a notification (Nudge, Log a workout, View club): a small pill. */
.notification-pill { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 6px 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; }
.notification-pill:hover { border-color: var(--accent); }
.notification-pill svg { width: 13px; height: 13px; fill: currentColor; }
.notification-pill.is-primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.notification-pill.is-primary:hover { filter: brightness(1.06); }
/* After nudging: a quiet "done" look instead of the bright button. */
.notification-pill:disabled { color: var(--muted-text); background: transparent; border-color: var(--border); cursor: default; filter: none; }
body[data-mode="light"] .notification-pill.is-primary:not(:disabled) { color: var(--accent-ink) !important; }
.notification-done { color: #61c98a; font-size: 12px; font-weight: 700; }
/* Sending a nudge: bright and pulsing while it goes out (not greyed out yet). */
.notification-pill { position: relative; }
.notification-pill.is-primary.is-busy:disabled { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); cursor: wait; animation: nudge-busy 700ms ease-in-out infinite; }
/* Sent: the button pops, the bolt zaps, then the bright fill fades into the quiet "Nudged" look. */
.notification-pill.is-sent { animation: nudge-pop 520ms cubic-bezier(0.3, 1.6, 0.5, 1), nudge-settle 700ms ease 380ms both; }
.notification-pill.is-sent svg { animation: nudge-zap 520ms ease; }
.nudge-burst { position: absolute; top: 50%; left: 22px; width: 0; height: 0; pointer-events: none; }
.nudge-burst i { position: absolute; top: -2px; left: -2px; width: 4px; height: 10px; background: var(--accent); border-radius: 4px; opacity: 0; transform: rotate(var(--angle)) translateY(0); animation: nudge-spark 650ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes nudge-busy {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.96); }
}
@keyframes nudge-pop {
    0% { transform: scale(0.92); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}
@keyframes nudge-settle {
    from { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); }
    to { color: var(--muted-text); background: transparent; border-color: var(--border); box-shadow: none; }
}
@keyframes nudge-zap {
    0% { transform: rotate(0) scale(1); }
    25% { transform: rotate(-18deg) scale(1.5); }
    50% { transform: rotate(14deg) scale(1.3); }
    100% { transform: rotate(0) scale(1); }
}
@keyframes nudge-spark {
    0% { opacity: 1; transform: rotate(var(--angle)) translateY(-6px) scaleY(1); }
    100% { opacity: 0; transform: rotate(var(--angle)) translateY(-30px) scaleY(0.4); }
}
@media (prefers-reduced-motion: reduce) {
    .notification-pill.is-busy, .notification-pill.is-sent, .notification-pill.is-sent svg, .nudge-burst i { animation: none; }
    .nudge-burst { display: none; }
}