@layer components{.webmentions{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-border)}.webmentions-title{font-size:var(--text-2xl);font-weight:600;margin:0 0 var(--space-6);color:var(--color-text)}.webmentions-facepile{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6)}.webmention-facepile-group{display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg,.5rem);padding:var(--space-4);flex:auto;min-width:200px}.webmention-facepile-group--likes{border-left:3px solid var(--color-error)}.webmention-facepile-group--reposts{border-left:3px solid var(--color-success)}.webmention-facepile-group--bookmarks{border-left:3px solid var(--color-warning)}.webmention-type-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin:0}.webmention-facepile-group--likes .webmention-type-label{color:var(--color-error)}.webmention-facepile-group--reposts .webmention-type-label{color:var(--color-success)}.webmention-facepile-group--bookmarks .webmention-type-label{color:var(--color-warning)}.webmention-icon{font-size:var(--text-base);line-height:1}.webmention-count{font-variant-numeric:tabular-nums;color:var(--color-text)}.webmention-avatars{display:flex;flex-wrap:wrap;gap:0;margin-left:-4px}.webmention-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid var(--color-surface);background:var(--color-surface);transition:transform .2s ease,border-color .2s ease,z-index 0s;display:flex;align-items:center;justify-content:center;margin-left:-8px;position:relative}.webmention-avatar:first-child{margin-left:0}.webmention-avatar:hover{transform:scale(1.15);border-color:var(--color-primary);z-index:10}.webmention-avatar img{width:100%;height:100%;object-fit:cover;display:block}.webmention-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),#8b5cf6);color:#fff;font-weight:600;font-size:var(--text-sm);text-transform:uppercase}.webmentions-replies,.webmentions-mentions{margin-top:var(--space-6)}.webmentions-section-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin:0 0 var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.webmentions-list{display:flex;flex-direction:column;gap:var(--space-4)}.webmention{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg,.5rem);padding:var(--space-4);transition:border-color .2s ease,box-shadow .2s ease}.webmention:hover{border-color:var(--color-primary);box-shadow:0 2px 8px rgba(0,0,0,6%)}.webmention-reply{border-left:3px solid var(--color-primary)}.webmention-mention{border-left:3px solid var(--color-text-muted)}.webmention-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.webmention-author-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--color-border)}.webmention-author-photo-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),#8b5cf6);color:#fff;font-weight:600;font-size:var(--text-base);text-transform:uppercase;border:none}.webmention-author-info{display:flex;flex-direction:column;gap:2px;min-width:0}.webmention-author-name{font-weight:600;font-size:var(--text-base);color:var(--color-text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.webmention-author-name:hover{color:var(--color-primary);text-decoration:underline}.webmention-date{font-size:var(--text-xs);color:var(--color-text-muted)}.webmention-content{margin-bottom:var(--space-3);color:var(--color-text);line-height:var(--leading-relaxed,1.625);font-size:var(--text-sm)}.webmention-content p{margin:0 0 var(--space-2)}.webmention-content p:last-child{margin-bottom:0}.webmention-content a{color:var(--color-primary);text-decoration:none}.webmention-content a:hover{text-decoration:underline}.webmention-footer{display:flex;align-items:center;justify-content:flex-end;padding-top:var(--space-2);border-top:1px solid var(--color-border)}.webmention-source-link{font-size:var(--text-xs);color:var(--color-text-muted);text-decoration:none;transition:color .2s ease}.webmention-source-link:hover{color:var(--color-primary)}@media(max-width:640px){.webmentions-facepile{flex-direction:column}.webmention-facepile-group{min-width:0}.webmention-avatar{width:36px;height:36px;margin-left:-6px}.webmention-author-photo{width:40px;height:40px}}@media(prefers-color-scheme:dark){.webmention-avatar{border-color:var(--color-background)}.webmention:hover{box-shadow:0 2px 8px rgba(0,0,0,.2)}}.webmention-counts{display:inline-flex;align-items:center;gap:var(--space-3,.75rem);font-size:var(--text-xs,.75rem);color:var(--color-text-muted)}.wm-count{display:inline-flex;align-items:center;gap:.25em;white-space:nowrap;color:var(--color-text-secondary)}.wm-likes{color:var(--color-text-secondary)}.wm-reposts{color:var(--color-text-secondary)}.wm-replies{color:var(--color-text-secondary)}.webmention-leaderboard{margin:var(--space-8)0}.leaderboard-section{margin-bottom:var(--space-8)}.leaderboard-section h3{font-size:var(--text-lg);font-weight:600;margin:0 0 var(--space-4);color:var(--color-text)}.leaderboard-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.leaderboard-table th,.leaderboard-table td{padding:var(--space-2)var(--space-3);text-align:left;border-bottom:1px solid var(--color-border)}.leaderboard-table th{font-weight:600;color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}.leaderboard-table .col-count{width:60px;text-align:right;font-variant-numeric:tabular-nums}.leaderboard-table .col-post a{color:var(--color-text);text-decoration:none}.leaderboard-table .col-post a:hover{color:var(--color-primary);text-decoration:underline}.leaderboard-table tbody tr:hover{background:var(--color-surface)}}