/* ===== Articles / blog pages ===== */

.articles-hero {
    min-height: 0;
    padding: 6rem 0 2rem;
    text-align: center;
}

.articles-section {
    padding: 1.5rem 0 5rem;
}

.articles-search-bar {
    max-width: 480px;
    margin: 0 auto 2rem;
}

.articles-search-input {
    width: 100%;
    padding: 0.75rem 1.1rem;
    border-radius: 12px;
    border: 1.5px solid var(--border, #e2e8f0);
    font-size: 0.95rem;
}

.articles-search-input:focus {
    outline: none;
    border-color: #2563eb;
}

/* Single-column feed, Facebook-style - one post per row, not a card grid */
.article-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 590px;
    margin: 0 auto;
    margin-top: 20px;
}

.article-card {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    color: inherit;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.article-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.article-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.article-card-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.article-card-head-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.article-card-author {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text, #1e293b);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-card-author:hover { text-decoration: underline; }

.article-card-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.article-card-mention-tag {
    font-size: 0.85rem;
    color: #2563eb;
}

.article-card-mention-tag a { color: #2563eb; font-weight: 700; text-decoration: none; }
.article-card-mention-tag a:hover { text-decoration: underline; }

.article-card-mention-more-wrap { position: relative; display: inline-block; }

.article-card-mention-more-btn {
    border: none;
    background: none;
    color: #2563eb;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}

.article-card-mention-more-btn:hover { text-decoration: underline; }

.article-card-mention-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 15;
    min-width: 160px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    padding: 0.4rem;
}

.article-card-mention-dropdown.open { display: flex; flex-direction: column; }

.article-card-mention-dropdown a {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: var(--text, #1e293b);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.article-card-mention-dropdown a:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }

.article-card-date { font-size: 0.75rem; color: var(--text-muted, #64748b); }

.article-card-visibility {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-inline-start: 0.35rem;
}

.article-card-visibility-label { font-size: 0.75rem; }

.article-card-mood {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
}

/* Same size/design as .app-feed-card-kind--post (app-shell.css) - the
   collapsed/expanded states swap actual text content via JS (main.js's
   initArticleCategoryChips), not a CSS width animation - a flex item's
   implicit min-width:auto kept defeating max-width+ellipsis truncation in
   practice, so this sidesteps that failure mode entirely instead of
   fighting it further. */
.article-card-category {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    width: fit-content;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.article-card-category:hover,
.article-card-category:focus-visible {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
    outline: none;
}

.article-card-category.expanded {
    background: #7c3aed;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}

.article-card-location {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin: 0 0 0.5rem;
}

.article-card-excerpt {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--text, #1e293b);
    margin: 0;
    white-space: pre-line;
}

.article-card-more {
    color: var(--text-muted, #64748b);
    font-weight: 700;
    text-decoration: none;
    margin-inline-start: 0.25rem;
}

.article-card-more:hover { text-decoration: underline; }

.article-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.article-card-actions-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Comments button sits in the middle, between the rating widget and share -
   no thread UI wired up yet, this is just the reserved spot/icon for it. */
.article-card-actions-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.article-card-comment-btn,
.article-card-share-btn,
.article-card-view-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.article-card-comment-btn:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }

.article-card-share-btn:hover,
.article-card-view-link:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }

.article-card-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    margin-top: 0.9rem;
    display: block;
}

.articles-category-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    margin-top: 25px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.03));
    border: 1px solid rgba(124, 58, 237, 0.18);
    color: var(--text, #1e293b);
    font-size: 0.9rem;
}

.articles-category-banner-text strong {
    color: #7c3aed;
}

.articles-category-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}

.articles-category-clear:hover {
    background: #6d28d9;
    color: #fff;
    transform: translateY(-1px);
}

.articles-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #64748b);
}

/* Infinite-scroll sentinel */
.articles-sentinel {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.articles-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--border, #e2e8f0);
    border-top-color: #2563eb;
    animation: articles-spin 0.8s linear infinite;
}

@keyframes articles-spin {
    to { transform: rotate(360deg); }
}

/* ---- Article detail page: same feed width as the list, Facebook-post style ---- */
.article-detail-section { padding-top: 2rem; }

.article-detail-container { max-width: 590px; }

.article-breadcrumb {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.article-breadcrumb a { color: #2563eb; text-decoration: none; font-weight: 600; }

.article-detail-card {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-top: 30px;
}

.article-detail-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text, #1e293b);
    white-space: pre-line;
    margin: 0 0 0.5rem;
}

/* ---- Write-a-post page: modern composer ---- */
.composer-page { padding: 2.5rem 0 5rem; }

.composer-container { max-width: 640px; }

.composer-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    margin-top: 40px;
}

.composer-header h1 { font-size: 1.3rem; margin: 0; }

.composer-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.composer-back:hover { color: #2563eb; }

.composer-card {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}

.composer-top-row { margin-bottom: 0.9rem; }

/* ---- Visibility custom dropdown ---- */
.composer-visibility { position: relative; display: inline-block; }

.composer-visibility-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: none;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.composer-visibility-btn:hover { background: rgba(37, 99, 235, 0.14); }
.composer-visibility-caret { margin-inline-start: 0.15rem; }

.composer-visibility-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    width: 280px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    padding: 0.4rem;
}

.composer-visibility-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text, #1e293b);
}

.composer-visibility-option:hover { background: rgba(37, 99, 235, 0.08); }
.composer-visibility-option svg { flex-shrink: 0; margin-top: 0.15rem; color: #2563eb; }
.composer-visibility-option span { display: block; font-size: 0.88rem; font-weight: 700; }
.composer-visibility-option small { display: block; font-size: 0.75rem; color: var(--text-muted, #64748b); }

.composer-body-input {
    display: block;
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    padding: 0;
    margin-bottom: 0.9rem;
    color: var(--text, #1e293b);
    font-size: 1.05rem;
    line-height: 1.8;
    resize: vertical;
    min-height: 120px;
}

.composer-body-input:focus { outline: none; }
.composer-body-input::placeholder { color: var(--text-muted, #94a3b8); }

.composer-mood-selected {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.composer-mood-selected button {
    border: none;
    background: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.composer-location-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.06);
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.composer-location-preview span { flex: 1; }

.composer-location-preview button {
    border: none;
    background: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

.composer-toolbar-label {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    font-weight: 600;
}

.composer-toolbar-actions { display: flex; gap: 0.35rem; }

.composer-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.composer-tool-btn:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }
.composer-tool-btn.active { background: #2563eb; color: #fff; }

.composer-panel {
    margin-top: 0.9rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid var(--border, #e2e8f0);
}

.composer-panel input[type="text"],
.composer-panel select {
    display: block;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    border: 1.5px solid var(--border, #e2e8f0);
    background: var(--card, #fff);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text, #1e293b);
    margin-bottom: 0.6rem;
}

.composer-panel input[type="text"]:focus,
.composer-panel select:focus { outline: none; border-color: #2563eb; }

.composer-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.composer-panel-close {
    border: none;
    background: none;
    color: var(--text-muted, #64748b);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.composer-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.article-submit-btn {
    padding: 0.75rem 2rem;
    border-radius: 999px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.article-submit-btn:hover { opacity: 0.9; }
.article-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.articles-write-cta {
    display: inline-block;
    text-decoration: none;
    margin-top: 1.25rem;
}


/* ---- Mentions ---- */
.article-mention-results {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.article-mention-result {
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 10px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
}

.article-mention-result:hover { background: rgba(37, 99, 235, 0.08); }

.article-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.article-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.article-chip button {
    border: none;
    background: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* ---- Location map ---- */
.article-map {
    height: 260px;
    border-radius: 12px;
    margin-top: 0.4rem;
    border: 1.5px solid var(--border, #e2e8f0);
}

/* ---- Attachments ---- */
.article-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

/* Square image thumbnail - no filename shown, just the picture + a remove x */
.article-attachment-thumb {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--border, #e2e8f0);
}

.article-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-attachment-thumb button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Non-image files (pdf/doc) - a compact chip, filename still needed here */
.article-attachment-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    border: 1.5px solid var(--border, #e2e8f0);
    font-size: 0.78rem;
    max-width: 160px;
}

.article-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-attachment-item button {
    border: none;
    background: none;
    color: var(--text-muted, #64748b);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Poll builder (inside panel-poll) ---- */
.article-poll-options { display: flex; flex-direction: column; gap: 0.5rem; }

.article-poll-add-option {
    margin-top: 0.5rem;
    border: none;
    background: none;
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* ---- Poll display (detail page) ---- */
.article-poll {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: 14px;
    border: 1.5px solid var(--border, #e2e8f0);
}

.article-poll-question { font-weight: 700; margin: 0 0 0.9rem; }

.article-poll-option-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1.5px solid var(--border, #e2e8f0);
    margin-bottom: 0.5rem;
    cursor: pointer;
    overflow: hidden;
}

.article-poll-option-bar {
    position: absolute;
    inset: 0;
    background: rgba(37, 99, 235, 0.12);
    z-index: 0;
}

.article-poll-option-row span { position: relative; z-index: 1; }
.article-poll-option-row.voted { border-color: #2563eb; }

/* ---- Detail-page extras: badges, mentions, attachments, location ---- */
.article-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.article-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 700;
}

.article-detail-location {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 1rem;
}

.article-detail-mentions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-detail-attachments {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.article-detail-attachments img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.article-attachment-file-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1.5px solid var(--border, #e2e8f0);
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
}

.articles-section-top { padding-top: 2rem; }

/* ---- Feed tabs (list page): عام / المتابَعين / اهتماماتي ---- */
.articles-feed-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    max-width: 590px;
    margin: 0 auto 1.25rem;
    margin-top: 30px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    padding: 0.35rem;
}

.articles-feed-tab {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.articles-feed-tab:hover { background: rgba(37, 99, 235, 0.06); }

.articles-feed-tab.active {
    color: #2563eb;
}

.articles-feed-tab.active::after {
    content: "";
    position: absolute;
    bottom: -0.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    border-radius: 999px;
    background: #2563eb;
}

/* ---- Floating "write a post" button ---- */
.articles-fab {
    position: fixed;
    bottom: 28px;
    /* Sits just before (inline-start of) the right app sidebar, in the gap
       between it and the posts column - not a random viewport corner. The
       sidebar itself only exists at >=992px and is hidden below that
       (see static/website/css/app-shell.css), so fall back to a plain
       corner placement on mobile. */
    inset-inline-end: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
    z-index: 60;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 992px) {
    .articles-fab {
        inset-inline-end: calc(var(--app-sidebar-right-w, 280px) + 24px);
    }
}

.articles-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45);
    color: #fff;
}

/* ---- Multi-image preview grid (Facebook-style: 1/2/3/4+ layouts) ----
   Every layout gets a fixed pixel height (not aspect-ratio) so the post's
   height never depends on each image's own original dimensions - object-fit
   cover crops instead of stretching the card. */
.article-card-images {
    display: grid;
    gap: 4px;
    margin-top: 0.75rem;
    border-radius: 12px;
    overflow: hidden;
}

.images-count-1 { grid-template-columns: 1fr; height: 320px; }
.images-count-2 { grid-template-columns: 1fr 1fr; height: 260px; }

.images-count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 320px; }
.images-count-3 .article-card-image-tile:first-child { grid-row: 1 / 3; }

.images-count-4plus { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 320px; }

.article-card-image-tile {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.article-card-image-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-card-image-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}

/* ---- "..." options menu (edit/delete/hide/report) ---- */
.article-card-menu-wrap { position: relative; margin-inline-start: auto; }

.article-card-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
}

.article-card-menu-btn:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }

.article-card-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.3rem);
    /* Logical, not `left: 0` - the button itself sits at the row's
       inline-end (margin-inline-start: auto above), so anchoring the
       dropdown's own inline-end to match and growing toward inline-start
       keeps it inside the viewport regardless of LTR/RTL. A hardcoded
       `left: 0` here grew it further past the screen edge in LTR instead
       (the trigger is near the right edge, dropdown needs to grow left). */
    inset-inline-end: 0;
    z-index: 15;
    min-width: 140px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    padding: 0.4rem;
    flex-direction: column;
}

.article-card-menu-dropdown.open { display: flex; }

.article-card-menu-item {
    display: block;
    width: 100%;
    text-align: right;
    padding: 0.5rem 0.6rem;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #1e293b);
    cursor: pointer;
}

.article-card-menu-item:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }
.article-card-menu-danger { color: #dc2626; }
.article-card-menu-danger:hover { background: rgba(220, 38, 38, 0.08); color: #dc2626; }

/* ---- Inline edit mode (swaps in for .article-card-excerpt) ---- */
.article-card-edit-textarea {
    width: 100%;
    min-height: 90px;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1.5px solid var(--border, #e2e8f0);
    font-size: 0.94rem;
    line-height: 1.6;
    font-family: inherit;
    resize: vertical;
}

.article-card-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.article-card-edit-save,
.article-card-edit-cancel {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.article-card-edit-save { background: #2563eb; color: #fff; }
.article-card-edit-cancel { background: none; color: var(--text-muted, #64748b); }

/* ---- Image lightbox ---- */
.article-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    flex-direction: column;
}

.article-lightbox.open { display: flex; }

.article-lightbox-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.article-lightbox-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.article-lightbox-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
    font-weight: 700;
}

.article-lightbox-meta { display: flex; flex-direction: column; flex: 1; }
.article-lightbox-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: inherit;
    text-decoration: none;
}

.article-lightbox-name:hover { text-decoration: underline; }
.article-lightbox-date { font-size: 0.75rem; opacity: 0.75; }

.article-lightbox-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }

.article-lightbox-body {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.article-lightbox-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.article-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.article-lightbox-prev { right: 1rem; }
.article-lightbox-next { left: 1rem; }

.article-lightbox-counter {
    text-align: center;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    flex-shrink: 0;
}

@media (max-width: 860px) {
    .article-detail-card,
    .composer-card { padding: 1.25rem; }
}

/* ===== Rating: colored split border ring =====
   `.article-card`/`.article-detail-card` gets a soft colored ring drawn as
   a ::before layer (not the real `border`, so it can be two colors split
   at an arbitrary angle - a plain CSS border can't do that). JS sets
   --rating-color-a/--rating-color-b/--rating-split-angle inline once a
   post has at least one rating; until then the ring stays fully
   transparent and the card looks exactly as before.

   --rating-fill (registered below as a typed <number>, which is what makes
   it actually interpolate smoothly instead of the color swap just snapping)
   drives how far each color has grown in from its own end of the gradient
   toward the middle - 0 = both colors collapsed to nothing at the edges,
   1 = each fills its full half, meeting exactly at the split. JS replays
   0 -> 1 on every rating change (not just the first one), so changing an
   existing rating is clearly visible instead of silently swapping colors
   with no animation. */
@property --rating-fill {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.article-card {
    position: relative;
}

.article-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    --rating-fill: 0;
    background: linear-gradient(
        var(--rating-split-angle, 0deg),
        var(--rating-color-a, transparent) 0%,
        var(--rating-color-a, transparent) calc(50% * var(--rating-fill)),
        transparent calc(50% * var(--rating-fill)),
        transparent calc(100% - (50% * var(--rating-fill))),
        var(--rating-color-b, var(--rating-color-a, transparent)) calc(100% - (50% * var(--rating-fill))),
        var(--rating-color-b, var(--rating-color-a, transparent)) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, --rating-fill 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.article-card.has-rating-ring::before { opacity: 1; }

.article-card.has-rating-ring.rating-ring-fill::before { --rating-fill: 1; }

/* Used momentarily by JS to snap --rating-fill back to 0 with no
   transition before replaying the grow-in animation on a rating change -
   without this, removing .rating-ring-fill would itself animate back down
   to 0 first instead of resetting instantly. */
.article-card.rating-ring-instant::before { transition: none !important; }

/* ===== Rating + comment summary line (above .article-card-actions) ===== */
.article-card-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    min-height: 1.1rem;
}

.article-card-rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.article-card-rating-summary-star { color: #eab308; }

.article-card-rating-summary-count { font-weight: 400; color: var(--text-muted, #64748b); }

.article-card-comment-summary {
    color: inherit;
    text-decoration: none;
}

.article-card-comment-summary:hover { text-decoration: underline; }

/* ===== Rating widget (drag-to-rate stars) ===== */
.article-rating-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.article-rating-track {
    display: flex;
    align-items: center;
}

.article-rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0;
    padding: 0.4rem 0;
    overflow: hidden;
    border: none;
    background: none;
    color: var(--border-2, #cbd5e1);
    cursor: pointer;
    transition: width 0.25s ease, color 0.15s ease, transform 0.1s ease;
}

.article-rating-star svg { flex-shrink: 0; }

/* At rest: only the last star (closest to the widget's start edge) shows,
   compact - the rest expand into view on press, per the "single star that
   turns into 5 while you drag" interaction. */
.article-rating-star[data-value="1"] { width: 28px; }

.article-rating-widget.is-expanded .article-rating-star,
.article-rating-widget.has-rating .article-rating-star {
    width: 22px;
}

.article-rating-star.is-filled { color: var(--rating-star-color, #eab308); }

.article-rating-widget.is-dragging .article-rating-star.is-filled {
    transform: scale(1.12);
}

.article-rating-widget:not(.has-rating):not(.is-expanded) .article-rating-star[data-value="1"] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
}

.article-rating-star svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ===== Comments ===== */
.article-comments-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

/* Feed-card inline variant - toggled open by the comment icon button
   instead of navigating to the detail page, lazy-loads its list on first
   open (article-comments.js). */
.article-comments-inline {
    margin-top: 0.6rem;
    padding-top: 0.8rem;
}

.article-comments-view-all {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-decoration: none;
}

.article-comments-view-all:hover { color: #2563eb; text-decoration: underline; }

.article-comment-composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.article-comment-input {
    flex: 1;
    resize: none;
    max-height: 120px;
    padding: 0.3rem 0.8rem;
    border-radius: 18px;
    border: 1.5px solid var(--border, #e2e8f0);
    background: var(--bg-2, #f4f6fb);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text, #1e293b);
    overflow-y: auto;
    scrollbar-width: none;
}

.article-comment-input::-webkit-scrollbar { display: none; }

.article-comment-input:focus { outline: none; border-color: #2563eb; }

.article-comment-submit-btn {
    flex-shrink: 0;
    border: none;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
}

.article-comment-submit-btn:disabled { opacity: 0.6; cursor: default; }

.article-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.article-comment {
    display: flex;
    gap: 0.55rem;
}

.article-comment-avatar-link { flex-shrink: 0; }

.article-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.article-comment-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
}

.article-comment-body { flex: 1; min-width: 0; }

.article-comment-bubble {
    display: inline-block;
    max-width: 100%;
    background: var(--bg-2, #f4f6fb);
    border-radius: 14px;
    padding: 0.5rem 0.8rem;
}

.article-comment-author {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text, #1e293b);
    text-decoration: none;
}

.article-comment-author:hover { text-decoration: underline; }

.article-comment-text {
    margin: 0.1rem 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text, #1e293b);
    white-space: pre-line;
    word-break: break-word;
}

.article-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.3rem 0.8rem;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.article-comment-rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 600;
}

.article-comment.is-pending { opacity: 0.6; }

.article-comment-pending-label {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-muted, #64748b);
}

/* Smaller star widget for comments - same mechanic/colors as the post's,
   just scaled down to fit an inline meta row. */
.article-rating-widget-sm .article-rating-star {
    padding: 0.15rem 0;
}

.article-rating-widget-sm .article-rating-star[data-value="1"] { width: 16px; }

.article-rating-widget-sm.is-expanded .article-rating-star,
.article-rating-widget-sm.has-rating .article-rating-star {
    width: 14px;
}

.article-rating-widget-sm .article-rating-star svg { width: 13px; height: 13px; }

.article-comment-menu-wrap { position: relative; }

.article-comment-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
}

.article-comment-menu-btn:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }

.article-comment-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.3rem);
    inset-inline-end: 0;
    z-index: 15;
    min-width: 110px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    padding: 0.3rem;
    flex-direction: column;
}

.article-comment-menu-dropdown.open { display: flex; }

.article-comment-menu-item {
    display: block;
    width: 100%;
    text-align: right;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #1e293b);
    cursor: pointer;
}

.article-comment-menu-item:hover { background: rgba(37, 99, 235, 0.08); color: #2563eb; }
.article-comment-menu-danger { color: #ef4444 !important; }
.article-comment-menu-danger:hover { background: rgba(239, 68, 68, 0.08) !important; }