/* =================================================================
   News Feed — composer + post cards.
   Built on shared design tokens (see themes/*/default/style.css).
   ================================================================= */

.feed-section-head { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin: 1.4rem 0 .75rem; }

/* ---------- Composer ---------------------------------------------- */
.feed-composer {
    background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
    box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: .45rem;
    transition: box-shadow .18s ease;
}
.feed-composer:focus-within { box-shadow: 0 4px 18px rgba(28, 34, 48, .09); border-color: color-mix(in srgb, var(--indigo) 30%, var(--border)); }
.feed-composer-row { display: flex; gap: .75rem; align-items: flex-start; }
.feed-composer-avatar {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
    background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--indigo) 25%, transparent);
}
.feed-composer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-composer textarea {
    flex: 1; border: 1px solid transparent; border-radius: 5px; padding: .7rem 1rem;
    background: var(--paper); font-family: inherit; font-size: .94rem; line-height: 1.4;
    resize: vertical; min-height: 44px; transition: background .15s ease, border-color .15s ease;
}
.feed-composer textarea:focus {
    outline: none; background: var(--surface); border-color: color-mix(in srgb, var(--indigo) 40%, var(--border));
}
.feed-composer-footer {
    display: flex; align-items: center; justify-content: space-between; margin-top: .75rem; gap: .6rem;
    padding-top: .65rem; border-top: 1px solid var(--border);
}
.feed-composer-attach { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-soft); }
.feed-composer-attach label {
    cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600;
}
.feed-composer-attach label:hover { color: var(--indigo); }
.feed-composer-attach input[type=file] { display: none; }

.feed-guest-card {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    padding: 1.1rem 1.25rem; border-radius: 12px;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--indigo) 8%, transparent), transparent 55%),
        var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 22px -14px rgba(0,0,0,.2);
}
.feed-guest-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo);
}
.feed-guest-text { flex: 1; min-width: 180px; }
.feed-guest-text h3 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.feed-guest-text p { margin: .2rem 0 0; font-size: .84rem; color: var(--ink-soft); }
.feed-guest-btn { flex-shrink: 0; box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--indigo) 55%, transparent); }

@media (max-width: 480px) {
    .feed-guest-card { flex-direction: column; text-align: center; padding: 1.1rem; }
    .feed-guest-btn { width: 100%; }
}

/* ---------- Post card ----------------------------------------------- */
.feed-post-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .75rem .85rem; margin-bottom: .35rem;
}
.feed-post-header { display: flex; align-items: center; gap: .6rem; }
.feed-post-avatar {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .92rem; text-decoration: none;
}
.feed-post-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-post-byline { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.feed-post-author { font-weight: 700; font-size: .92rem; color: var(--ink); text-decoration: none; }
.feed-post-author:hover { color: var(--indigo); }
.feed-post-time { font-size: .76rem; }
.feed-post-time a { color: inherit; text-decoration: none; }
.feed-post-time a:hover { text-decoration: underline; }
.feed-post-menu { position: relative; flex-shrink: 0; }
.feed-post-menu-btn {
    width: 30px; height: 30px; border-radius: 50%; border: none; background: none;
    color: var(--ink-soft); font-size: 1.1rem; font-weight: 800; line-height: 1;
    cursor: pointer; transition: background .12s ease, color .12s ease;
}
.feed-post-menu-btn:hover, .feed-post-menu.is-open .feed-post-menu-btn { background: var(--paper); color: var(--ink); }
.feed-post-menu-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    min-width: 140px; padding: .35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
    box-shadow: 0 10px 28px -12px rgba(0,0,0,.25);
}
.feed-post-menu-dropdown a, .feed-post-menu-dropdown button, .feed-post-menu-dropdown form {
    display: block; width: 100%;
}
.feed-post-menu-dropdown a, .feed-post-menu-dropdown button {
    padding: .5rem .6rem; border-radius: 5px; border: none; background: none;
    font-family: inherit; font-size: .86rem; font-weight: 600; text-align: left;
    color: var(--ink); text-decoration: none; cursor: pointer;
}
.feed-post-menu-dropdown a:hover, .feed-post-menu-dropdown button:hover { background: var(--paper); }
.feed-post-menu-danger { color: var(--danger) !important; }
.feed-post-menu-danger:hover { background: rgba(214,69,90,.1) !important; }

.feed-post-body { margin: .6rem 0 0; font-size: .94rem; white-space: pre-wrap; }
/* ---------- Weather share card (auto-generated visual) --------------- */
.weather-share-card {
    display: flex; align-items: center; gap: 1.2rem; margin-top: .55rem; min-height: 150px;
    padding: 1.6rem; border-radius: 12px; color: #fff; overflow: hidden; position: relative;
}
.weather-share-card .wc-icon { font-size: 3rem; flex-shrink: 0; opacity: .95; filter: drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
.weather-share-card .wc-temp { font-size: 3.1rem; font-weight: 800; font-family: var(--font-display); flex-shrink: 0; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.weather-share-card .wc-info { min-width: 0; }
.weather-share-card .wc-condition { font-size: 1.1rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.weather-share-card .wc-city { font-size: .86rem; opacity: .9; margin-top: .2rem; display: flex; align-items: center; gap: .3rem; text-shadow: 0 1px 3px rgba(0,0,0,.3); }

.weather-share-card.wc-clear-day { background: linear-gradient(135deg, #4facfe 0%, #4a90d9 100%); }
.weather-share-card.wc-clear-night { background: linear-gradient(135deg, #232946 0%, #121629 100%); }
.weather-share-card.wc-cloudy { background: linear-gradient(135deg, #757f9a 0%, #5b6377 100%); }
.weather-share-card.wc-rain { background: linear-gradient(135deg, #4b6cb7 0%, #33436b 100%); }
.weather-share-card.wc-snow { background: linear-gradient(135deg, #83a4d4 0%, #5f7fab 100%); }
.weather-share-card.wc-storm { background: linear-gradient(135deg, #3a3d5c 0%, #1c1e2e 100%); }
.weather-share-card.wc-fog { background: linear-gradient(135deg, #96a2ac 0%, #6f7a83 100%); }

/* Small static label for the condition and, when relevant, heat/cold extremes —
   plain tags, no motion, so they stay easy to read at a glance. */
.weather-share-card .wc-tag {
    margin-top: .5rem; display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(0,0,0,.28); padding: .28rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em; width: fit-content;
}
.weather-share-card .wc-tag + .wc-tag { margin-left: .4rem; }

.fwc-share-card {
    margin-top: .55rem; padding: 1.4rem 1rem; border-radius: 12px; text-align: center;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--indigo) 10%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, #1a7a3a 6%, var(--surface)), var(--surface));
    border: 1px solid var(--border);
}
.fwc-round {
    display: inline-block; margin: 0 0 .9rem; font-size: .68rem; font-weight: 700;
    color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em;
    background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: .22rem .65rem;
}
.fwc-teams { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.fwc-team-block { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 96px; }
.fwc-badge {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 3px 10px -5px rgba(0,0,0,.2); font-size: 1.15rem; color: var(--ink-soft); overflow: hidden;
}
.fwc-badge img { width: 100%; height: 100%; object-fit: cover; }
.fwc-team { font-size: .8rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.fwc-score-block { min-width: 54px; flex-shrink: 0; }
.fwc-score { font-size: 1.3rem; font-weight: 900; color: var(--indigo); font-family: var(--font-display, inherit); }
.fwc-vs {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo);
    font-size: .7rem; font-weight: 900; letter-spacing: .02em;
}
.fwc-status-line {
    margin: .9rem 0 0; font-size: .78rem; font-weight: 600; color: var(--ink-soft);
    display: flex; align-items: center; justify-content: center; gap: .35rem;
}
.fwc-live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d;
    animation: wc-pulse 1.4s ease-in-out infinite;
}
@keyframes wc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.feed-post-body-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.feed-post-body-link:hover .feed-post-body { color: var(--ink); }
.feed-post-more { color: var(--indigo); font-weight: 700; white-space: nowrap; }
.feed-post-body-link:hover .feed-post-more { color: var(--indigo-deep); text-decoration: underline; }

/* ---------- Colored-background "status" posts (short plain-text only) --- */
.feed-post-bg-card {
    position: relative; margin: .6rem 0 0; padding: 3.5rem 1.5rem;
    min-height: 300px; border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.feed-post-bg-card.is-compact { min-height: 190px; padding: 2.25rem 1.25rem; }
.feed-post-bg-emoji {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 6rem; opacity: .16; line-height: 1; pointer-events: none; user-select: none;
}
.feed-post-bg-card.is-compact .feed-post-bg-emoji { font-size: 4rem; }
.feed-post-bg-text {
    position: relative; z-index: 1; margin: 0; color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1.35;
    text-shadow: 0 2px 14px rgba(0,0,0,.28); white-space: pre-wrap; word-break: break-word;
}
.feed-post-bg-card.is-compact .feed-post-bg-text { font-size: 1.15rem; }
@media (max-width: 640px) {
    .feed-post-bg-card { min-height: 220px; padding: 2.5rem 1.1rem; }
    .feed-post-bg-text { font-size: 1.25rem; }
    .feed-post-bg-emoji { font-size: 4.5rem; }
}

/* ---------- Q&A — question bubble on an answered feed post ---------- */
.qa-post-question {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: .5rem; padding: .6rem .75rem;
    background: var(--paper); border-left: 3px solid var(--marigold, var(--indigo)); border-radius: 6px;
}
.qa-post-question i { color: var(--marigold, var(--indigo)); margin-top: .18rem; flex-shrink: 0; font-size: .85rem; }
.qa-post-question p { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink); font-style: italic; }

.feed-post-image {
    display: block; width: 100%; margin-top: .65rem; border-radius: 8px; overflow: hidden;
    line-height: 0;
}
.feed-post-image img {
    display: block; width: 100%; max-height: 100vh;
    object-fit: contain; border-radius: 8px; background: var(--surface);
}

.feed-post-file {
    display: flex; align-items: center; gap: .65rem; margin-top: .65rem;
    padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 5px;
    text-decoration: none; color: inherit; background: var(--paper);
}
.feed-post-file-icon { font-size: 1.6rem; flex-shrink: 0; }
.feed-post-file-meta { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; min-width: 0; }
.feed-post-file-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Multi-file gallery / file list (community posts) --------- */
.feed-post-gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
    margin-top: .65rem;
}
.feed-post-gallery[data-count="1"] { display: block; }
.feed-post-gallery[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.feed-post-gallery-item { position: relative; display: block; width: 100%; border-radius: 5px; overflow: hidden; aspect-ratio: 1/1; background: var(--paper); }
.feed-post-gallery-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.feed-post-gallery[data-count="1"] .feed-post-gallery-item {
    aspect-ratio: auto; display: flex; align-items: center; justify-content: center; max-height: 45vh;
}
.feed-post-gallery[data-count="1"] .feed-post-gallery-item img {
    width: auto; height: auto; max-width: 100%; max-height: 45vh; margin: 0 auto;
}
.feed-post-gallery-more-count {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); color: #fff; font-size: 1.2rem; font-weight: 800;
}

/* Web theme has more room to work with, so the single-photo case gets a taller
   cap than the touch theme — but multi-photo galleries use more, smaller tiles
   so a big batch of photos doesn't dominate the whole feed card. */
body.web-theme .feed-post-gallery[data-count="2"] {
    grid-template-columns: repeat(2, 1fr); gap: .4rem;
}
body.web-theme .feed-post-gallery:not([data-count="1"]):not([data-count="2"]) {
    grid-template-columns: repeat(4, 1fr); gap: .35rem;
}
body.web-theme .feed-post-gallery[data-count="1"] .feed-post-gallery-item,
body.web-theme .feed-post-gallery[data-count="1"] .feed-post-gallery-item img {
    max-height: 60vh;
}
.feed-post-files { display: flex; flex-direction: column; gap: .5rem; margin-top: .65rem; }
.feed-post-files .feed-post-file { margin-top: 0; }

.feed-post-stats {
    display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft);
    margin-top: .65rem; padding-top: .5rem; border-top: 1px solid var(--border);
}
.feed-post-stats a { color: inherit; text-decoration: none; }
.feed-post-stats a:hover { text-decoration: underline; }

/* ---------- Feed type badge (reused for music/community/weather/shared/Q&A) - matches the forum & blog category badge design --- */
.feed-type-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 5px;
    background: var(--indigo-soft, var(--paper)); color: var(--indigo);
    text-decoration: none;
}
a.feed-type-badge:hover { text-decoration: underline; }
.feed-type-badge-shared { background: color-mix(in srgb, #6b7280 14%, transparent); color: #6b7280; }
.feed-type-badge-qa { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); }
.feed-type-badge-weather { background: color-mix(in srgb, #0ea5e9 14%, transparent); color: #0284c7; }
.feed-type-badge-worldcup { background: color-mix(in srgb, #3ba55d 14%, transparent); color: #2f8a4c; }
.feed-type-badge-music { background: color-mix(in srgb, #d6336c 12%, transparent); color: #d6336c; }
.feed-type-badge-book { background: color-mix(in srgb, #b5651d 14%, transparent); color: #b5651d; }
.feed-type-badge-community { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.feed-type-badge-page { background: color-mix(in srgb, #1971c2 12%, transparent); color: #1971c2; }
.feed-type-badge-feed { background: color-mix(in srgb, #6b7280 10%, transparent); color: #6b7280; }
.feed-shared-embed {
    display: block; margin-top: .65rem; padding: .75rem .85rem;
    border: 1px solid var(--border); border-radius: 8px;
    text-decoration: none; color: inherit; background: var(--paper);
    transition: background .12s ease;
}
.feed-shared-embed:hover { background: var(--border); }
.feed-shared-embed-header { display: flex; align-items: center; gap: .5rem; }
.feed-shared-embed-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem;
}
.feed-shared-embed-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-shared-embed-byline { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.feed-shared-embed-byline strong { font-size: .85rem; }
.feed-shared-embed-byline .muted { font-size: .72rem; }
.feed-shared-embed-body { margin: .5rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--ink); }
.feed-shared-embed-image {
    display: block; width: 100%; max-height: 320px; object-fit: contain; background: var(--paper);
    border-radius: 6px; margin-top: .6rem;
}
.feed-shared-embed-file {
    display: flex; align-items: center; gap: .4rem; margin-top: .6rem;
    font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}

/* ---------- Share button + caption dropdown ------------------------- */
.feed-share-menu { position: relative; flex: 1; min-width: 0; display: flex; }
.feed-share-btn { width: 100%; }
.feed-share-dropdown {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 40;
    width: 280px; max-width: 85vw;
    padding: .65rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow, 0 8px 24px -10px rgba(0,0,0,.25));
}
.feed-share-dropdown textarea {
    width: 100%; resize: vertical; min-height: 44px; margin-bottom: .5rem;
    padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 5px;
    background: var(--paper); font-family: inherit; font-size: .85rem; color: var(--ink);
}
.feed-share-dropdown .btn { width: 100%; }

.feed-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding-top: .45rem; }
.feed-react-btn {
    flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    padding: .4rem .5rem; border-radius: 5px; border: none; background: none;
    font-size: .85rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-react-btn:hover { background: var(--paper); }
.feed-react-btn.is-active-like { color: var(--success); }
.feed-react-btn.is-active-dislike { color: var(--danger); }
.feed-comment-btn { text-decoration: none; }

/* ---------- Bookmark (save) button — shared component, placement only - */
.feed-post-actions .bookmark-toggle-btn { margin-left: auto; }

/* ---------- Composer footer: icon actions grouped near Post --------- */
.feed-composer-actions-right { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.feed-composer-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 5px; border: none; background: none;
    color: var(--ink-soft); font-size: 1rem; cursor: pointer; flex-shrink: 0;
    transition: background .12s ease, color .12s ease, transform .08s ease;
}
.feed-composer-icon-btn:hover { transform: translateY(-1px); background: var(--paper); color: var(--indigo); }
.feed-composer-poll-toggle:hover, .feed-composer-poll-toggle.is-active {
    background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo);
}
.feed-composer-weather-btn:hover { background: color-mix(in srgb, var(--marigold) 16%, transparent); color: var(--marigold); }

.feed-composer-anon-toggle { position: relative; cursor: pointer; }
.feed-composer-anon-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.feed-composer-anon-toggle:has(input:checked) { background: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--indigo); }

.feed-post-name-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.feed-post-feeling { font-size: .85rem; color: var(--ink-soft); }
.feed-post-anon-badge {
    display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
    font-size: .76rem; font-weight: 700; color: var(--indigo);
    background: color-mix(in srgb, var(--indigo) 10%, transparent);
    padding: .1rem .45rem; border-radius: 999px;
}

.feed-feeling-picker { position: relative; }
.feed-feeling-dropdown {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 20;
    width: 280px; max-height: min(360px, 60vh); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.25); padding: .75rem;
}
.feed-feeling-dropdown-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font-weight: 700; font-size: .85rem; }
.feed-feeling-clear { border: none; background: none; color: var(--indigo); font-size: .78rem; font-weight: 600; cursor: pointer; padding: .1rem .3rem; }
.feed-feeling-clear:hover { text-decoration: underline; }
.feed-feeling-group-label { margin: .5rem 0 .3rem; font-size: .74rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.feed-feeling-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.feed-feeling-option {
    display: flex; align-items: center; gap: .35rem; text-align: left;
    border: 1px solid transparent; background: var(--paper); border-radius: 5px;
    padding: .35rem .5rem; font-size: .78rem; color: var(--ink); cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.feed-feeling-option:hover { background: color-mix(in srgb, var(--indigo) 8%, var(--paper)); border-color: color-mix(in srgb, var(--indigo) 25%, transparent); }
.feed-feeling-option-emoji { font-size: 1rem; }
.feed-feeling-selected {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
    font-size: .82rem; font-weight: 600; color: var(--indigo);
    background: color-mix(in srgb, var(--indigo) 8%, transparent);
    padding: .25rem .6rem; border-radius: 5px;
}
.feed-feeling-selected[hidden] { display: none; }
@media (max-width: 640px) {
    .feed-feeling-dropdown {
        position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
        transform: translate(-50%, -50%);
        width: calc(100vw - 2rem); max-width: 340px; max-height: 70vh;
        z-index: 1000;
    }
}

.feed-poll-builder {
    margin-top: .7rem; padding: .8rem; background: var(--paper); border: 1px dashed var(--border); border-radius: var(--radius);
}
.feed-poll-builder-options { display: flex; flex-direction: column; gap: .5rem; }
.feed-poll-builder-option { display: flex; align-items: center; gap: .4rem; }
.feed-poll-builder-option input {
    flex: 1; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 5px;
    background: var(--surface); font-family: inherit; font-size: .85rem; color: var(--ink);
}
.feed-poll-builder-option-remove {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; background: none;
    color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.feed-poll-builder-option-remove:hover { background: var(--surface); color: var(--danger); }
.feed-poll-builder-add {
    margin-top: .55rem; padding: 0; border: none; background: none;
    font-size: .82rem; font-weight: 700; color: var(--indigo); cursor: pointer;
}
.feed-poll-builder-add:hover { color: var(--indigo-deep); text-decoration: underline; }
.feed-poll-builder-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
    margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--border);
}
.feed-poll-multi-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-soft); cursor: pointer; }
.feed-poll-builder-footer select {
    padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 5px;
    background: var(--surface); font-family: inherit; font-size: .8rem; color: var(--ink);
}
.feed-poll-builder-remove { padding: 0; border: none; background: none; font-size: .8rem; font-weight: 600; color: var(--danger); cursor: pointer; }
.feed-poll-builder-remove:hover { text-decoration: underline; }

/* ---------- Poll — rendered widget on a post (compact, colour-coded) - */
.feed-poll { margin-top: .55rem; }
.feed-poll-options { display: flex; flex-direction: column; gap: .32rem; }

/* Each option gets its own accent from the site's existing palette, so a
   multi-option poll is easy to scan at a glance — set once here, then
   reused below for the fill, border, checkmark, and percentage colour. */
.feed-poll-option:nth-child(6n+1) { --poll-color: var(--indigo); }
.feed-poll-option:nth-child(6n+2) { --poll-color: var(--teal); }
.feed-poll-option:nth-child(6n+3) { --poll-color: var(--marigold); }
.feed-poll-option:nth-child(6n+4) { --poll-color: var(--success); }
.feed-poll-option:nth-child(6n+5) { --poll-color: var(--danger); }
.feed-poll-option:nth-child(6n+6) { --poll-color: color-mix(in srgb, var(--indigo) 55%, var(--danger) 45%); }

.feed-poll-option {
    position: relative; display: block; width: 100%; text-align: left; overflow: hidden;
    padding: 0; border: 1px solid var(--border); border-radius: 8px;
    background: var(--paper); cursor: pointer; transition: border-color .15s ease;
}
.feed-poll-option:hover:not(:disabled) { border-color: var(--poll-color, var(--indigo)); }
.feed-poll-option:disabled { cursor: default; }
.feed-poll-option.is-voted { border-color: var(--poll-color, var(--indigo)); }
.feed-poll-option-fill {
    position: absolute; inset: 0 auto 0 0; width: 0%; z-index: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--poll-color, var(--indigo)) 28%, transparent),
        color-mix(in srgb, var(--poll-color, var(--indigo)) 12%, transparent));
    transition: width .55s cubic-bezier(.22,.9,.3,1);
}
.feed-poll-option.is-voted .feed-poll-option-fill {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--poll-color, var(--indigo)) 36%, transparent),
        color-mix(in srgb, var(--poll-color, var(--indigo)) 16%, transparent));
}
.feed-poll-option-row {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .6rem;
}
.feed-poll-option-label { display: flex; align-items: center; gap: .32rem; font-size: .84rem; font-weight: 600; color: var(--ink); }
.feed-poll-check { color: var(--poll-color, var(--indigo)); font-size: .78rem; flex-shrink: 0; }
.feed-poll-option-pct { flex-shrink: 0; font-size: .8rem; font-weight: 800; color: var(--ink-soft); min-width: 2em; text-align: right; }
.feed-poll--results .feed-poll-option-pct, .feed-poll-option.is-voted .feed-poll-option-pct { color: var(--poll-color, var(--indigo)); }
.feed-poll-meta { margin-top: .35rem; font-size: .74rem; color: var(--ink-soft); }

.feed-poll--closed .feed-poll-option { opacity: .82; }



/* Full single-post view (feed/post.php): show the whole photo uncropped
   instead of a cover-cropped box, scaled to fit small phone screens
   (letterboxed, not cut off top/bottom). Applies to both themes. */
.feed-post-image.feed-post-image--full img { max-height: 65vh; }

/* ---------- Compact touch-theme sizing ----------------------------- */
body.touch-theme .feed-post-card { padding: .55rem .65rem; margin-bottom: .35rem; }
body.touch-theme .feed-post-avatar,
body.touch-theme .feed-composer-avatar { width: 34px; height: 34px; }
body.touch-theme .feed-post-body { font-size: .88rem; }
body.touch-theme .feed-react-btn { font-size: .78rem; padding: .32rem .4rem; }
body.touch-theme .feed-poll-option-row { padding: .4rem .55rem; }
body.touch-theme .feed-poll-option-label { font-size: .8rem; }
body.touch-theme .feed-poll-option-pct { font-size: .76rem; }
body.touch-theme .feed-poll-meta { font-size: .7rem; }
body.touch-theme .weather-share-card { min-height: 150px; padding: 1.5rem 1.2rem; gap: .9rem; }
body.touch-theme .weather-share-card .wc-icon { font-size: 2.6rem; }
body.touch-theme .weather-share-card .wc-temp { font-size: 2.8rem; }
body.touch-theme .weather-share-card .wc-condition { font-size: 1rem; }
body.touch-theme .weather-share-card .wc-tag { font-size: .64rem; padding: .22rem .5rem; margin-top: .4rem; }

/* ---------- Pagination ---------------------------------------------
   Modern pill-style page numbers with prev/next arrows and a smart
   "…" collapse for long page runs. Shared markup lives in
   public/_pagination.php; this styling is duplicated into blog.css
   too, matching how each module owns its own stylesheet here.
   -------------------------------------------------------------------- */


@media (max-width: 480px) {
    .pagination a, .pagination span { min-width: 34px; height: 34px; font-size: .82rem; }
}

/* ---------- Feed post photo lightbox (feed/post.php only) -----------
   The overlay/box/spinner (.gallery-lb-*) is intentionally reused as-is
   from the gallery module's stylesheet, already loaded on this page —
   this just adds the two things that lightbox doesn't have: a read-only
   stats line, and room for the kebab menu among the actions.
   --------------------------------------------------------------------- */
.feed-lb-menu { margin-left: .25rem; }
.feed-lb-menu .feed-post-menu-dropdown { top: auto; bottom: calc(100% + 4px); }

/* ---------- Saved page — download / photo mini cards ---------------- */
.saved-item-card { padding: 0; overflow: hidden; }
.saved-item-card .dl-file-row { border: none; border-radius: 0; margin: 0; }
.saved-item-actions { display: flex; justify-content: flex-end; padding: .4rem .7rem .6rem; }
.saved-photo-link { display: flex; gap: .7rem; align-items: center; padding: .8rem .8rem 0; text-decoration: none; color: inherit; }
.saved-photo-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--paper); }
.saved-photo-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.saved-photo-meta strong { font-size: .9rem; }



/* ---------- Shared book card (feed/_post_card.php) ------------------ */
.bk-share-card {
    display: flex; align-items: center; gap: .65rem; margin: .5rem 0; padding: .55rem .65rem;
    background: var(--paper); border-radius: 8px; text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.bk-share-card:hover { background: var(--border); }
.bk-share-card-cover {
    flex-shrink: 0; width: 44px; height: 58px; border-radius: 5px; overflow: hidden;
    background: var(--indigo-soft, var(--surface)); display: flex; align-items: center; justify-content: center;
    color: var(--indigo); font-size: 1.1rem;
}
.bk-share-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-share-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.bk-share-card-info strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-share-card-info .muted { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-share-card-arrow { color: var(--ink-soft); font-size: .78rem; flex-shrink: 0; }

.cert-share-card {
    display: flex; align-items: center; gap: .65rem; margin: .5rem 0; padding: .55rem .65rem;
    background: var(--paper); border-radius: 8px; text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.cert-share-card:hover { background: var(--border); }
.cert-share-card-seal {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 1.1rem; color: #fffaf0;
    background: radial-gradient(circle at 34% 30%, #f6e2ab, #c9a35f 58%, #96742f 100%);
    border: 1px solid #7d5f28;
}
.cert-share-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cert-share-card-info strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-share-card-verified { font-size: .76rem; color: #16a34a; display: flex; align-items: center; gap: .3rem; }
.cert-share-card-arrow { color: var(--ink-soft); font-size: .78rem; flex-shrink: 0; }

.ev-share-card {
    display: flex; align-items: center; gap: .65rem; margin: .5rem 0; padding: .55rem .65rem;
    background: var(--paper); border-radius: 8px; text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.ev-share-card:hover { background: var(--border); }
.ev-share-card-cover {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 7px; overflow: hidden;
    background: var(--indigo-soft, var(--surface)); display: flex; align-items: center; justify-content: center;
    color: var(--indigo); font-size: 1.1rem;
}
.ev-share-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-share-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ev-share-card-info strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-share-card-info .muted { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-share-card-arrow { color: var(--ink-soft); font-size: .78rem; flex-shrink: 0; }