/* ===========================================================================
 * Live feed v2.
 *
 * Loaded on every page (all-css.php) but every selector is scoped under
 * .lfFeedV2, which only live-feed.php puts on the page. Nothing here can reach
 * live-profile, view-profile, profile-individual or eng-feed.
 * =========================================================================== */

/* SuperHumanRace fallback accent, for employers with no brand theme.
   Declared on :root so the per-client block that live-feed.php emits later in
   the document overrides it. Do NOT redeclare these on .lfFeedV2: a custom
   property set on a descendant shadows the inherited one. */
:root {
    --lf-accent:        #0c7a55;
    --lf-accent-ink:    #ffffff;
    --lf-accent-strong: #0c7a55;
    --lf-accent-bg:     #e6f1ee;
    --lf-accent-line:   #bad9cf;

    /* Neutrals live here, not on .lfFeedV2, because the right rail and the
       modals are SIBLINGS of the feed rather than descendants. Scoped to the
       feed they were undefined in the rail, which made every
       `border: 1px solid var(--lf-line)` invalid at computed-value time and
       silently dropped the borders off the pills and the Highlights cards. */
    --lf-bg:        #f4f6f6;
    --lf-surface:   #ffffff;
    --lf-raise:     #f1f4f3;
    /* Structural hairlines. One neutral for the whole page, biased a few percent
       toward the client's accent so it reads as chosen rather than inherited and
       cannot sit cold against a warm brand (or the reverse). The flat values are
       the fallback wherever color-mix is unavailable, and are what every theme
       used before. An accent-coloured border is reserved for elements whose fill
       is also the accent — the selected chip, the selected rail tag — so a border
       never introduces a colour the element does not already have. */
    --lf-line:      #dfe5e2;
    --lf-line:      color-mix(in srgb, var(--lf-accent) 10%, #dfe5e2);
    --lf-line-soft: #ebefed;
    --lf-line-soft: color-mix(in srgb, var(--lf-accent) 6%, #ebefed);

    /* One ground for every category chip. Deliberately NOT tinted toward the
       accent: the category label sits on it, so tinting would make its contrast
       a function of the client's brand and a dark accent could quietly push a
       label under 4.5:1. Flat and neutral keeps all six legible everywhere —
       measured against this value they run 4.58 to 6.50. */
    --lf-kind-bg:   #f1f3f5;
    --lf-ink:       #131a18;
    --lf-ink-2:     #4e5b57;
    --lf-ink-3:     #5e6b66;
    --lf-like:      #d6336c;

    /* height of the fixed site header, so sticky things stop below it */
    --lf-header-h:  64px;
}

.lfFeedV2 {
    /* #all_rows carries Bootstrap 3 col-* classes, which float. Floated children
       do not extend their parent, so this box collapsed to ~358px and the sticky
       filter row ran out of containing block after one screen of scroll.
       flow-root contains the floats without creating a scroll container, which
       overflow:hidden would do and which breaks position:sticky outright. */
    display: flow-root;

    /* post-type chip colours, only ever used inside the feed */
    --lf-learn:      #3a48c4;  --lf-learn-bg:     #e9ebfb;
    --lf-volunteer:  #9a6208;  --lf-volunteer-bg: #fbf0dd;
    --lf-green:      #11774e;  --lf-green-bg:     #e1f2ea;
    --lf-give:       #b93378;  --lf-give-bg:      #fbe8f2;
    --lf-challenge:  #6f3fb8;  --lf-challenge-bg: #f1eafc;
    --lf-story:      #12696d;  --lf-story-bg:     #e0f1f1;
}

/* --------------------------------------------------------------------------
 * Impact strip. Replaces the four stacked tiles, keeps all four destinations.
 * ------------------------------------------------------------------------ */
.lfFeedV2 .lfImpact {
    display: flex;
    align-items: stretch;
    background: var(--lf-surface);
    border: 1px solid var(--lf-line);
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 14px;
}
.lfFeedV2 .lfImpact-cell {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 14px;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid var(--lf-line-soft);
    display: block;
}
.lfFeedV2 .lfImpact-cell:last-of-type { border-right: 0; }
.lfFeedV2 .lfImpact-cell:hover,
.lfFeedV2 .lfImpact-cell:focus { background: var(--lf-raise); color: inherit; text-decoration: none; }
.lfFeedV2 .lfImpact-v {
    display: block;
    font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
    color: var(--lf-ink);
}
.lfFeedV2 .lfImpact-v small { font-size: 11px; font-weight: 600; color: var(--lf-ink-3); margin-left: 2px; }
.lfFeedV2 .lfImpact-k {
    display: block;
    font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--lf-ink-3); line-height: 1.3; margin-top: 1px;
}

/* --------------------------------------------------------------------------
 * Filter chips. Present at every width, unlike the hidden-xs rail they replace.
 * ------------------------------------------------------------------------ */
.lfFeedV2 .lfFilters {
    /* The site header (SECTION.esg-navigation) is position:fixed, 64px tall and
       z-index 2. Sticking at top:0 with a higher z-index put the chips over the
       logo on scroll. Stop below the header, and sit under it in the stack. */
    position: sticky;
    top: var(--lf-header-h);
    z-index: 1;
    /* Was a grey strip with its own bottom rule, which read as a separate band
       sitting behind the pills. Match the page and fade out instead, so the row
       is seamless until it sticks. The negative margin plus matching padding
       gives the first chip a real left gutter while still letting the row bleed
       edge to edge when it scrolls. */
    /* matches the page, so it is invisible until it pins under the header and
       then correctly hides the cards scrolling beneath it */
    background: var(--lf-surface);
    padding: 10px 2px 12px;
    margin: 0 0 2px;
    border-bottom: 0;
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.lfFeedV2 .lfFilters::-webkit-scrollbar { display: none; }
.lfFeedV2 .lfChip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; line-height: 1.2;
    padding: 7px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap;
    background: var(--lf-surface); border: 1px solid var(--lf-line); color: var(--lf-ink-2);
    text-decoration: none;
}
.lfFeedV2 .lfChip:hover { border-color: var(--lf-ink-3); color: var(--lf-ink); text-decoration: none; }
.lfFeedV2 .lfChip.is-active { background: var(--lf-accent); border-color: var(--lf-accent); color: var(--lf-accent-ink); }
.lfFeedV2 .lfChip:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
 * New posts pill.
 * ------------------------------------------------------------------------ */
.lfFeedV2 .lfNewPill {
    display: none;
    position: sticky;
    top: calc(var(--lf-header-h) + 54px);
    z-index: 2;
    margin: 0 auto 12px;
    align-items: center; gap: 8px;
    background: var(--lf-accent); color: var(--lf-accent-ink);
    border: 0; border-radius: 99px; padding: 9px 18px; cursor: pointer;
    font-size: 13px; font-weight: 700; line-height: 1.2;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
}
.lfFeedV2 .lfNewPill.is-on { display: inline-flex; }

/* --------------------------------------------------------------------------
 * The card.
 * ------------------------------------------------------------------------ */
.lfFeedV2 .lfCard {
    background: var(--lf-surface);
    border: 1px solid var(--lf-line);
    border-radius: 12px;
    padding: 15px 17px 9px;
    margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 11px;
    color: var(--lf-ink);
}
.lfFeedV2 .lfCard-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.lfFeedV2 .lfKind {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 6px;
}
.lfFeedV2 .lfKind i { font-size: 12px; }

/* The category chips sat on a category-tinted fill inside a category-tinted
   border, which put up to six competing outline colours on one screen and, on a
   warm brand like EXL, set an amber chip and a brown hairline directly beside
   the orange call to action.

   EXL's own approved admin screens answer this: every chip there is one flat
   neutral with no outline at all, and colour is spent on the heading and the
   selected state instead. Same here. The chips share one ground, tinted a few
   percent toward the client's accent so they belong to the brand, and the
   category is carried by the icon and the label — which is where the meaning
   was anyway. No chip contributes a border colour to the page. */
.lfFeedV2 .lfKind { background: var(--lf-kind-bg); border: 0; }
.lfFeedV2 .lfKind--learn     { color: var(--lf-learn); }
.lfFeedV2 .lfKind--volunteer { color: var(--lf-volunteer); }
.lfFeedV2 .lfKind--green     { color: var(--lf-green); }
.lfFeedV2 .lfKind--give      { color: var(--lf-give); }
.lfFeedV2 .lfKind--challenge { color: var(--lf-challenge); }
.lfFeedV2 .lfKind--story     { color: var(--lf-story); }

.lfFeedV2 .lfMeta {
    display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--lf-ink-3); min-width: 0;
}
.lfFeedV2 .lfMeta-link { color: var(--lf-ink-3); text-decoration: none; }
.lfFeedV2 .lfMeta-link:hover { color: var(--lf-accent-strong); text-decoration: underline; }
.lfFeedV2 .lfMeta-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; display: inline-block; }

.lfFeedV2 .lfTitle { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.33; }
.lfFeedV2 .lfTitle a { color: var(--lf-ink); text-decoration: none; }
.lfFeedV2 .lfTitle a:hover { color: var(--lf-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.lfFeedV2 .lfTitle-missing { color: var(--lf-ink-3); font-style: italic; font-weight: 600; }

.lfFeedV2 .lfBy { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--lf-ink-2); }
.lfFeedV2 .lfBy-avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; border: 1px solid var(--lf-line); object-fit: cover; }
.lfFeedV2 .lfBy-name { font-weight: 650; color: var(--lf-ink); text-decoration: none; }
.lfFeedV2 .lfBy-name:hover { color: var(--lf-accent-strong); text-decoration: underline; }
.lfFeedV2 .lfBy-verb { color: var(--lf-ink-2); }

.lfFeedV2 .lfBody { margin: 0; font-size: 15px; line-height: 1.55; color: var(--lf-ink-2); }
.lfFeedV2 .lfBody b, .lfFeedV2 .lfBody strong { color: var(--lf-ink); font-weight: 650; }
.lfFeedV2 .lfHiddenMeta { display: none; }

/* Evidence photos are user-uploaded and vary wildly: some are 262x192, some are
   1148x2040. Never upscale (a 262px-wide photo stretched to the card width was
   the visible quality loss), and cap the height so a portrait shot does not take
   over the feed. Small images sit centred at native size on a neutral ground. */
.lfFeedV2 .lfShot {
    display: block;
    text-align: center;
    border-radius: 9px; overflow: hidden;
    border: 1px solid var(--lf-line-soft);
    background: var(--lf-raise);
}
.lfFeedV2 .lfShot img {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    height: auto;
    /* story-detail-top-banner-section.php hard-codes style="max-height:100%".
       Inline styles beat any selector, and that percentage resolves against an
       indefinite parent height, which collapsed the image to nothing. This is
       the one place !important is warranted: the partial is shared with pages
       outside this work and is not being edited. */
    max-height: 520px !important;
    object-fit: contain;
}
.lfFeedV2 .lfShot video,
.lfFeedV2 .lfShot iframe { width: 100%; max-height: 520px; display: block; }
.lfFeedV2 .lfShot .defaultImageDiv { width: 100%; padding: 28px 16px; text-align: center; }

/* Primary action */
.lfFeedV2 .lfCta-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
/* The primary button takes the client's ACTION colour, not the selected-state
   colour, because for several brands they are different: EXL's buttons are navy
   under an orange banner, Reliance's are green under a gold one. Both fall back
   to the accent for brands that use one colour for everything. See
   liveFeedAccentForEmployer() in shr_modules/theme.php. */
.lfFeedV2 .lfCta {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--lf-action, var(--lf-accent));
    color: var(--lf-action-ink, var(--lf-accent-ink));
    border: 1px solid var(--lf-action, var(--lf-accent)); border-radius: 9px;
    padding: 9px 16px; cursor: pointer;
    font-size: 14px; font-weight: 650; line-height: 1.2; text-decoration: none;
}
.lfFeedV2 .lfCta:hover, .lfFeedV2 .lfCta:focus {
    color: var(--lf-action-ink, var(--lf-accent-ink));
    text-decoration: none; filter: brightness(1.08);
}
.lfFeedV2 .lfCta--done {
    background: var(--lf-raise); color: var(--lf-ink-2); border-color: var(--lf-line); cursor: default;
}
.lfFeedV2 .lfCta--done:hover { filter: none; color: var(--lf-ink-2); }
.lfFeedV2 .lfCta--ghost { background: transparent; color: var(--lf-accent-strong); border-color: var(--lf-accent-line); }
.lfFeedV2 .lfCta--ghost:hover { color: var(--lf-accent-strong); background: var(--lf-accent-bg); }

/* One action bar, replacing the split like / share / comment zones */
.lfFeedV2 .lfActions {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    border-top: 1px solid var(--lf-line-soft); padding-top: 5px; margin-top: 1px;
}
.lfFeedV2 .lfAction {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 10px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; line-height: 1.2;
    color: var(--lf-ink-2); text-decoration: none; cursor: pointer; position: relative;
}
.lfFeedV2 .lfAction:hover { background: var(--lf-raise); color: var(--lf-ink); text-decoration: none; }
.lfFeedV2 .lfAction i { font-size: 16px; }
.lfFeedV2 .lfAction--like i.fa { color: var(--lf-like); }
.lfFeedV2 .lfCount { font-weight: 700; padding-left: 4px; padding-right: 8px; }
.lfFeedV2 .lfActions-spacer { flex: 1 1 auto; }

/* Composer */
.lfFeedV2 .lfComposer { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0 8px; }
.lfFeedV2 .lfComposer-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; border: 1px solid var(--lf-line); object-fit: cover; }
/* The emoji plugin injects .emoji-icons absolutely; give it a positioned parent
   here or it anchors to the page and floats over the card corner. */
.lfFeedV2 .lfComposer-field { flex: 1 1 auto; min-width: 0; position: relative; }
.lfFeedV2 .lfComposer-field .emoji-icons { top: 7px; right: 12px; }
.lfFeedV2 .lfCard { position: relative; }
.lfFeedV2 .lfComposer-field input {
    width: 100%; border: 1px solid var(--lf-line); background: var(--lf-raise);
    color: var(--lf-ink); border-radius: 20px; padding: 8px 14px; font-size: 14px; height: auto;
    box-shadow: none;
}
.lfFeedV2 .lfComposer-field input:focus { border-color: var(--lf-accent-strong); background: var(--lf-surface); box-shadow: none; }
.lfFeedV2 .lfComposer-err { color: var(--lf-like); margin: 3px 0 0; font-size: 12px; }

/* --------------------------------------------------------------------------
 * Loading skeletons, shown while a page of the feed is in flight.
 * ------------------------------------------------------------------------ */
.lfFeedV2 .lfSkeleton { display: none; }
.lfFeedV2 .lfSkeleton.is-on { display: block; }
.lfFeedV2 .lfSkelCard {
    background: var(--lf-surface); border: 1px solid var(--lf-line); border-radius: 12px;
    padding: 15px 17px; margin-bottom: 14px;
}
.lfFeedV2 .lfBone {
    display: block; background: var(--lf-raise); border-radius: 5px;
    position: relative; overflow: hidden; margin-bottom: 10px;
}
.lfFeedV2 .lfBone::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
    animation: lfShimmer 1.25s infinite;
}
@keyframes lfShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
 * Empty state and end cap.
 * ------------------------------------------------------------------------ */
.lfFeedV2 .lfEmpty {
    background: var(--lf-surface); border: 1px solid var(--lf-line); border-radius: 12px;
    padding: 44px 24px; text-align: center;
}
.lfFeedV2 .lfEmpty-icon {
    width: 46px; height: 46px; border-radius: 12px; background: var(--lf-raise);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lf-ink-3); font-size: 20px; margin-bottom: 11px;
}
.lfFeedV2 .lfEmpty h4 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--lf-ink); }
.lfFeedV2 .lfEmpty p { margin: 0 auto 14px; font-size: 14px; color: var(--lf-ink-3); max-width: 46ch; }
.lfFeedV2 .lfEndcap { text-align: center; padding: 18px 0 4px; font-size: 13px; color: var(--lf-ink-3); }
.lfFeedV2 .lfLoadError { text-align: center; padding: 16px; font-size: 14px; color: var(--lf-ink-2); }

/* --------------------------------------------------------------------------
 * Small screens. The chips and every action survive; nothing is display:none.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    .lfFeedV2 .lfImpact { flex-wrap: wrap; }
    .lfFeedV2 .lfImpact-cell { flex: 1 1 50%; border-bottom: 1px solid var(--lf-line-soft); }
    .lfFeedV2 .lfImpact-k { white-space: normal; }
    .lfFeedV2 .lfCard { padding: 13px 14px 8px; }
    .lfFeedV2 .lfTitle { font-size: 16px; }
    .lfFeedV2 .lfAction { padding: 7px 8px; }
    .lfFeedV2 .lfAction .lfAction-label { display: none; }
    .lfFeedV2 .lfCount { padding-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .lfFeedV2 .lfBone::after { animation: none; }
}


/* ===========================================================================
 * Right rail.
 *
 * Deliberately uses the SAME neutral tokens, radii, padding and vertical rhythm
 * as the feed column. It previously carried its own blue-grey palette, a 10px
 * radius against the feed's 12px, and four different vertical gaps, which is
 * what made it read as a different page.
 *
 * Accent comes from the per-client vars on :root, same as the feed.
 * =========================================================================== */

.lfRailV2 {
    /* The JS height assignment is gone from live-feed.php; the real sizing now
       lives in the body.lfPageV2 .lfRailV2 block at the end of this file, which
       gives the fixed sidebar a viewport-height scroll region. Nothing to force
       here, and an !important height would block it. */

    /* one rhythm for the whole rail: card gap matches the feed's 14px */
    --lf-rail-gap: 14px;
    --lf-rail-section: 22px;

    padding: 0 0 0 16px;
}

/* --- section headings, identical for Featured Posts and Highlights --- */
.lfRailV2 h4 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lf-ink-3);
    margin: 0 0 12px;
    padding: 0;
    background: none;
}

/* --- Featured Posts tags ------------------------------------------------
 * The stock .livefeedTag is a "price tag": a beige block with a white dot
 * (::before) and a triangular point (::after). Flatten it into a plain pill.
 * -------------------------------------------------------------------- */
.lfRailV2 .featuredPostUl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lfRailV2 .featuredPostUl li { margin: 0; }

.lfRailV2 .livefeedTag {
    background: var(--lf-surface);
    border: 1px solid var(--lf-line);
    border-radius: 99px;
    color: var(--lf-ink-2);
    height: auto;
    line-height: 1.2;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 13px;
    margin: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.lfRailV2 .livefeedTag::before,
.lfRailV2 .livefeedTag::after { content: none; display: none; }

.lfRailV2 .livefeedTag:hover {
    background: var(--lf-accent-bg);
    border-color: var(--lf-accent-line);
    color: var(--lf-accent-strong);
}
.lfRailV2 .livefeedTag.active,
.lfRailV2 .livefeedTag.active:hover {
    background: var(--lf-accent);
    border-color: var(--lf-accent);
    color: var(--lf-accent-ink);
}

/* --- poster: same card treatment as everything else in the column --- */
.lfRailV2 #popupPosterCarousel2 {
    border: 1px solid var(--lf-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--lf-surface);
    margin: var(--lf-rail-section) 0 0;
}
.lfRailV2 #popupPosterCarousel2 img {
    width: 100%;
    height: auto;
    max-height: none !important;
    display: block;
}

/* --- Highlights ----------------------------------------------------------
 * Was a raw bootstrap table: three columns, a cramped wrapping title, a
 * justified description and a blue btn-info per row. The whole row is the link
 * now, and the row matches a feed card exactly.
 * -------------------------------------------------------------------- */
.lfRailV2 #showFeaturedList { margin-top: var(--lf-rail-section); }
.lfRailV2 #showFeaturedList table {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
}
.lfRailV2 #showFeaturedList thead,
.lfRailV2 #showFeaturedList thead tr {
    /* bootstrap tints table heads, which painted a stray band behind the heading */
    background: transparent !important;
    border: 0 !important;
}
.lfRailV2 #showFeaturedList thead th,
.lfRailV2 #showFeaturedList thead td {
    border: 0 !important;
    padding: 0 0 12px !important;
    background: transparent !important;
}
.lfRailV2 #showFeaturedList thead h4 { margin: 0; }

.lfRailV2 #showFeaturedList tbody tr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* same surface, border, radius and padding scale as a feed card */
    padding: 13px 14px;
    border: 1px solid var(--lf-line);
    border-radius: 12px;
    background: var(--lf-surface);
    margin-bottom: var(--lf-rail-gap);
    transition: border-color .15s, background .15s;
}
.lfRailV2 #showFeaturedList tbody tr:last-child { margin-bottom: 0; }
.lfRailV2 #showFeaturedList tbody tr:hover {
    border-color: var(--lf-accent-line);
    background: var(--lf-accent-bg);
}
.lfRailV2 #showFeaturedList tbody td {
    border: 0 !important;
    padding: 0 !important;
    vertical-align: top;
    background: transparent;
}
/* thumbnail */
.lfRailV2 #showFeaturedList tbody td.w-20-percent {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--lf-raise);
}
.lfRailV2 #showFeaturedList tbody td.w-20-percent img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    max-height: none !important;
    margin: 0 !important;
}
.lfRailV2 #showFeaturedList tbody td.w-20-percent .defaultImageDiv { display: none; }
/* text */
.lfRailV2 #showFeaturedList tbody td:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.lfRailV2 #showFeaturedList tbody td:nth-child(2) p { margin: 0 0 3px; line-height: 1.35; }
.lfRailV2 #showFeaturedList tbody td:nth-child(2) p a {
    font-size: 14px;
    font-weight: 650;
    color: var(--lf-ink);
    text-decoration: none;
}
.lfRailV2 #showFeaturedList tbody tr:hover td:nth-child(2) p a { color: var(--lf-accent-strong); }
.lfRailV2 #showFeaturedList tbody td:nth-child(2) .textEditorContent,
.lfRailV2 #showFeaturedList tbody td:nth-child(2) .textEditorContent a {
    font-size: 12.5px;
    color: var(--lf-ink-3);
    text-align: left;       /* the stock style justifies it, which shreds short text */
    word-break: normal;
    text-decoration: none;
    line-height: 1.45;
}
/* the per-row View button is redundant once the whole row is the link */
.lfRailV2 #showFeaturedList tbody td:last-child { display: none; }
.lfRailV2 #showFeaturedList thead td.text-right { display: table-cell; }
.lfRailV2 #showFeaturedList thead .btn {
    background: transparent;
    border: 1px solid var(--lf-accent-line);
    color: var(--lf-accent-strong);
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 11px;
}
.lfRailV2 #showFeaturedList thead .btn:hover {
    background: var(--lf-accent);
    border-color: var(--lf-accent);
    color: var(--lf-accent-ink);
}


/* ===========================================================================
 * Chatter and Supporters modals, matched to the refreshed card.
 * =========================================================================== */
#viewComments .modal-content,
#viewLikes .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px -18px rgba(15, 26, 36, .45);
}
#viewComments .modal-header,
#viewLikes .modal-header {
    background: #fff;
    border-bottom: 1px solid #e2e8ed;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2a33;
}
#viewComments .modal-header .close,
#viewLikes .modal-header .close {
    font-size: 24px;
    font-weight: 400;
    opacity: .5;
    text-shadow: none;
    margin-top: -2px;
}
#viewComments .modal-header .close:hover,
#viewLikes .modal-header .close:hover { opacity: 1; }
#viewComments .modal-body,
#viewLikes .modal-body { padding: 8px 18px 18px; max-height: 65vh; overflow-y: auto; }

/* one comment block */
#viewComments .view-comments > div {
    padding: 13px 0;
    border-bottom: 1px solid #eef2f5;
}
#viewComments .view-comments > div:last-child { border-bottom: 0; }
#viewComments .view-comments img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8ed;
}
#viewComments .view-comments b { font-size: 13.5px; color: #1f2a33; }
#viewComments .view-comments a { color: inherit; text-decoration: none; }
#viewComments .view-comments a:hover b { color: var(--lf-accent-strong, #0c7a55); text-decoration: underline; }
#viewComments .view-comments small { font-size: 11.5px; color: #78858f; }
/* the comment itself is a readonly textarea; make it read as text, not a field */
#viewComments .view-comments textarea[readonly] {
    border: 0;
    background: transparent;
    padding: 4px 0 0;
    resize: none;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.5;
    color: #33414d;
    height: auto;
    min-height: 0;
    overflow: hidden;
}
#viewComments .view-comments textarea:not([readonly]) {
    border: 1px solid var(--lf-accent-strong, #0c7a55);
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
}
#viewComments .view-comments .row.text-right a { font-size: 11.5px; color: #5a6873; }
#viewComments .view-comments .row.text-right a:hover { color: var(--lf-accent-strong, #0c7a55); }

#viewLikes .view-likes img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8ed;
}


/* ===========================================================================
 * Share popup.
 *
 * The stock markup (include/popup-sharing.php) is Bootstrap 3 column soup: a
 * heading row, a bare <ul> of icons, a hidden copy-link input, and a QR block.
 * The QR column is meant to be suppressed by $isQrAccessPopup, but that is set
 * on the page request and the card is rendered by a separate AJAX request, so
 * an empty bordered square was rendering under the icons.
 *
 * Rebuilt here as a proper popover, scoped to the feed. The markup is untouched,
 * so drilldownShareClick(), copyLink() and engagedDataNew() all still work.
 * =========================================================================== */

.lfFeedV2 .drilldownShareDiv { position: relative; }

.lfFeedV2 .Sharing-a-caring {
    /* css/responsive.css carries several .Sharing-a-caring rules with their own
       width and a negative left offset, inside media queries. With both left and
       right set the box was sized from the offsets (81 + 96 = 177px) and the
       width here was ignored. Pin the geometry rather than edit that shared
       stylesheet, which other pages rely on. */
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    bottom: calc(100% + 10px);
    top: auto !important;
    z-index: 40;
    width: 286px !important;
    max-width: calc(100vw - 32px) !important;
    /* the shared rules also impose a height, which clipped the copy-link row and
       put a scrollbar inside the popover */
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 14px 16px 16px !important;
    margin: 0 !important;
    float: none;
    background: var(--lf-surface);
    border: 1px solid var(--lf-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px -14px rgba(19, 26, 24, .35);
    text-align: left;
    cursor: default;
}
/* little pointer down to the Share button */
.lfFeedV2 .Sharing-a-caring::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: var(--lf-surface);
    border-right: 1px solid var(--lf-line);
    border-bottom: 1px solid var(--lf-line);
    transform: rotate(45deg);
}

/* header row: title, count, close */
.lfFeedV2 .Sharing-a-caring .social-info-div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    margin: 0 0 12px !important;
    float: none;
    width: 100%;
}
.lfFeedV2 .Sharing-a-caring .social-info-div > div {
    width: auto;
    float: none;
    padding: 0 !important;
    margin: 0;
}
.lfFeedV2 .Sharing-a-caring .social-info-div > div:first-child { flex: 1 1 auto; min-width: 0; }
.lfFeedV2 .Sharing-a-caring .social-info-div p {
    margin: 0;
    float: none !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lf-ink) !important;
}
.lfFeedV2 .Sharing-a-caring .social-info-div p.text-info {
    font-size: 12px !important;
    font-weight: 600;
    color: var(--lf-ink-3) !important;
    white-space: nowrap;
}
.lfFeedV2 .Sharing-a-caring .close {
    font-size: 20px;
    line-height: 1;
    opacity: .45;
    text-shadow: none;
    margin: 0;
    float: none;
}
.lfFeedV2 .Sharing-a-caring .close:hover { opacity: 1; }

/* icon grid */
.lfFeedV2 .Sharing-a-caring .social-icon,
.lfFeedV2 .Sharing-a-caring .social-icon > div {
    width: 100% !important;
    float: none;
    padding: 0 !important;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li { margin: 0; padding: 0; float: none; width: auto; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 9px;
    border: 1px solid var(--lf-line);
    background: var(--lf-raise);
    color: var(--lf-ink-2);
    text-decoration: none;
    transition: background .14s, border-color .14s, color .14s;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a:hover {
    background: var(--lf-accent-bg);
    border-color: var(--lf-accent-line);
    color: var(--lf-accent-strong);
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a span {
    display: inline-flex;
    background: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a i { font-size: 17px; }
/* keep each channel recognisable on hover */
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.whatsapp:hover { background: #e7f7ec; border-color: #bfe6cc; color: #128c40; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.facebook:hover { background: #e9f0fb; border-color: #c3d6f2; color: #1257b8; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.twitter:hover  { background: #e9f1f8; border-color: #c2d9ec; color: #14618f; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.linkedin:hover { background: #e8f0f7; border-color: #bed6ea; color: #0b5787; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.google:hover    { background: #fbeceb; border-color: #f2c7c4; color: #b3342c; }

/* copy-link row */
.lfFeedV2 .Sharing-a-caring .copyLinkDiv { margin-top: 12px; }
.lfFeedV2 .Sharing-a-caring .copyLinkDiv > p { display: none; }
.lfFeedV2 .Sharing-a-caring .copyLinkDiv .input-group { display: flex; width: 100%; }
.lfFeedV2 .Sharing-a-caring .copyLinkDiv .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    border: 1px solid var(--lf-line);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: var(--lf-raise);
    font-size: 12px;
    color: var(--lf-ink-3);
    box-shadow: none;
}
.lfFeedV2 .Sharing-a-caring .copyLinkDiv .input-group-addon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border: 1px solid var(--lf-accent);
    border-radius: 0 8px 8px 0;
    background: var(--lf-accent);
    color: var(--lf-accent-ink);
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
}

/* The QR column only renders here because $isQrAccessPopup is not set on the
   AJAX request. It draws an empty bordered square, so suppress it in the feed. */
.lfFeedV2 .Sharing-a-caring .social-icon > div:last-child:not(:first-child) { display: none; }
.lfFeedV2 .Sharing-a-caring #qrContainer { display: none; }

@media (max-width: 767px) {
    .lfFeedV2 .Sharing-a-caring { right: auto; left: 0; width: 264px; }
    .lfFeedV2 .Sharing-a-caring::after { right: auto; left: 22px; }
}


/* ===========================================================================
 * Loading skeletons: give them the same gap as a card, so the first one is not
 * glued to the post above it.
 * =========================================================================== */
.lfFeedV2 .lfSkeleton.is-on { margin-top: 14px; }
.lfFeedV2 .lfSkelCard:last-child { margin-bottom: 0; }


/* ===========================================================================
 * Round 3 fixes
 * =========================================================================== */

/* --- rail needs padding on BOTH sides, not just the left --- */
.lfRailV2 { padding: 0 16px 0 16px; }

/* --- the persistent Highlights heading, so the section never disappears --- */
.lfRailV2 .lfRailHeading {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lf-ink-3);
    margin: var(--lf-rail-section) 0 12px;
    padding: 0;
}
/* the server emits its own heading when a type has results; drop the duplicate */
.lfRailV2 #showFeaturedList thead h4 { display: none; }
.lfRailV2 #showFeaturedList { margin-top: 0; }

/* --- empty Highlights ----------------------------------------------------
 * For a type with no results the route emits a single <td colspan="3"> holding
 * a "No data found!" card, outside any <tbody>. The generic td:last-child rule
 * hid it (it is also the first child), leaving an empty bordered box. Scope
 * that rule to real 3-column rows and style the empty state instead.
 * -------------------------------------------------------------------- */
.lfRailV2 #showFeaturedList tbody td:last-child:not(:first-child) { display: none; }
.lfRailV2 #showFeaturedList tbody td:only-child { display: block; }

.lfRailV2 #showFeaturedList tbody tr:has(td:only-child) {
    border: 1px dashed var(--lf-line);
    background: transparent;
    padding: 18px 14px;
    justify-content: center;
}
.lfRailV2 #showFeaturedList tbody tr:has(td:only-child):hover {
    border-color: var(--lf-line);
    background: transparent;
}
.lfRailV2 #showFeaturedList .card-inverse-info,
.lfRailV2 #showFeaturedList .card-inverse-info .card-body {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.lfRailV2 #showFeaturedList .card-inverse-info p {
    margin: 0;
    font-size: 12.5px;
    color: var(--lf-ink-3);
    text-align: center;
}

/* --- left navigation, in the client's colour ----------------------------
 * The duotone icons are hard-set to the SuperHumanRace purple rgb(43,10,61),
 * which read as a different brand next to a Tata Power page. Scoped to
 * body.lfPageV2, which only live-feed.php sets, so the same partial on other
 * pages is untouched.
 * -------------------------------------------------------------------- */
body.lfPageV2 .iconSpan em {
    color: var(--lf-accent-strong);
    --fa-primary-color: var(--lf-accent-strong);
    --fa-secondary-color: var(--lf-accent-strong);
    --fa-secondary-opacity: .38;
}
body.lfPageV2 .leftLiA:hover .iconSpan em,
body.lfPageV2 .leftLiA:focus .iconSpan em { --fa-secondary-opacity: .55; }


/* ===========================================================================
 * Share sheet, rebuilt.
 *
 * Icon-only tiles gave no indication of what each one did. Now a labelled row
 * per channel in its own brand colour, then the copy-link field. The markup is
 * untouched; labels come from CSS because the anchors carry no text.
 * =========================================================================== */

.lfFeedV2 .Sharing-a-caring {
    width: 312px !important;
    padding: 0 !important;
}

/* header */
.lfFeedV2 .Sharing-a-caring .social-info-div {
    padding: 14px 16px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--lf-line-soft);
}

/* channel list */
.lfFeedV2 .Sharing-a-caring .social-icon > div { padding: 10px 10px 0 !important; }
.lfFeedV2 .Sharing-a-caring .social-icon ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: auto;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--lf-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a:hover {
    background: var(--lf-raise);
    border: 0;
    color: var(--lf-ink);
}
/* the icon sits in a coloured chip so each channel is recognisable at a glance */
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--chip, var(--lf-raise));
    color: #fff;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a i { font-size: 14px; }

.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.whatsapp  { --chip: #25d366; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.facebook  { --chip: #1877f2; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.twitter   { --chip: #1d9bf0; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.linkedin  { --chip: #0a66c2; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.google    { --chip: #d64535; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.copyLink  { --chip: #5a6873; }

/* labels: the anchors ship no text, so name each channel here */
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a::after {
    content: attr(data-share-label);
    white-space: nowrap;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.whatsapp::after { content: "WhatsApp"; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.facebook::after { content: "Facebook"; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.twitter::after  { content: "X"; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.linkedin::after { content: "LinkedIn"; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.google::after   { content: "Email"; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li.copyLinkLi { grid-column: 1 / -1; }
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a.copyLink::after { content: "Copy link"; }

/* copy-link field */
.lfFeedV2 .Sharing-a-caring .copyLinkDiv {
    margin: 4px 0 0;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--lf-line-soft);
}


/* ===========================================================================
 * Counts summary row.
 *
 * Counts belong with the post, not inside the buttons. "Like 0" and
 * "0 Comments" read as labels rather than tallies, and the zero states opened
 * empty modals. This follows the pattern LinkedIn, Facebook and Instagram all
 * settled on: a quiet tally above the divider, verb-only actions below.
 * =========================================================================== */
.lfFeedV2 .lfStats {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 2px 0;
    margin-bottom: -2px;
    font-size: 13px;
    color: var(--lf-ink-3);
}
.lfFeedV2 .lfStats.lfIsEmpty { display: none; }

.lfFeedV2 .lfStat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lf-ink-3);
    text-decoration: none;
    cursor: pointer;
}
.lfFeedV2 .lfStat:hover { color: var(--lf-ink); text-decoration: underline; text-underline-offset: 2px; }
.lfFeedV2 .lfStat.lfIsEmpty { display: none; }
.lfFeedV2 .lfStat--likes i { font-size: 12px; color: var(--lf-like); }

/* the separator only earns its place when both halves are showing */
.lfFeedV2 .lfStat-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: .5; flex: none;
}
.lfFeedV2 .lfStat--likes.lfIsEmpty ~ .lfStat-dot,
.lfFeedV2 .lfStat-dot:last-child { display: none; }
.lfFeedV2 .lfStats:has(.lfStat--comments.lfIsEmpty) .lfStat-dot { display: none; }

/* --- actions are verbs now, no numbers --- */
.lfFeedV2 .lfActions { padding-top: 6px; }
.lfFeedV2 .lfAction--like.is-on { color: var(--lf-like); }
.lfFeedV2 .lfAction--like.is-on i { color: var(--lf-like); }
.lfFeedV2 .lfAction--like i { transition: transform .14s ease; }
.lfFeedV2 .lfAction--like:active i { transform: scale(.82); }

@media (prefers-reduced-motion: reduce) {
    .lfFeedV2 .lfAction--like i { transition: none; }
}


/* ===========================================================================
 * Round 4 fixes
 * =========================================================================== */

/* --- Highlights was sitting flush against the poster above it --- */
.lfRailV2 .lfRailHeading { margin-top: 26px; }
.lfRailV2 #popupPosterCarousel2 + .lfRailHeading { margin-top: 26px; }

/* --- quick replies under the composer --- */
.lfFeedV2 .lfQuickReplies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.lfFeedV2 .lfQuickReplies[hidden] { display: none; }
.lfFeedV2 .lfQuickReply {
    border: 1px solid var(--lf-line);
    background: var(--lf-surface);
    color: var(--lf-ink-2);
    border-radius: 99px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.lfFeedV2 .lfQuickReply:hover {
    background: var(--lf-accent-bg);
    border-color: var(--lf-accent-line);
    color: var(--lf-accent-strong);
}

/* --- share sheet: drop the heavy coloured chip behind each icon ----------
 * A saturated square behind every glyph made the sheet loud and uneven. The
 * icon now carries the channel colour itself, on a neutral tile that only
 * tints on hover.
 * -------------------------------------------------------------------- */
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a span {
    background: var(--lf-raise);
    color: var(--chip, var(--lf-ink-2));
    border: 1px solid var(--lf-line-soft);
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a:hover span {
    background: color-mix(in srgb, var(--chip, var(--lf-ink-3)) 12%, #fff);
    border-color: color-mix(in srgb, var(--chip, var(--lf-ink-3)) 35%, #fff);
}


/* ===========================================================================
 * Rail layout: flex column instead of stacked Bootstrap floats.
 *
 * Every direct child of the rail carries col-* classes, so they all float left.
 * A following block's box starts at the float's TOP, not below it, so the
 * Highlights heading's margin-top was being applied above the poster and the
 * text landed flush under it. (It also made the h4 measure 440px tall, spanning
 * the whole poster.) Flex items ignore float, so this removes the whole class
 * of problem and gives the column one rhythm.
 * =========================================================================== */
.lfRailV2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.lfRailV2 > * { float: none !important; width: 100% !important; }

/* section breaks get the extra 10px on top of the 12px base gap */
.lfRailV2 #popupPosterCarousel2 { margin: 10px 0 0 !important; }
.lfRailV2 .lfRailHeading { margin: 10px 0 0 !important; }
.lfRailV2 #showFeaturedList { margin: 0 !important; }


/* ===========================================================================
 * Share sheet: one column, one alignment.
 *
 * The 2-up grid left the copy-link row spanning both columns, so nothing lined
 * up down the sheet. A single column puts every icon on one vertical axis and
 * every label on another, which is what "aligned" actually means here.
 * =========================================================================== */
.lfFeedV2 .Sharing-a-caring { width: 268px !important; }
.lfFeedV2 .Sharing-a-caring .social-icon ul {
    display: block;
    margin: 0;
    padding: 0;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li,
.lfFeedV2 .Sharing-a-caring .social-icon ul li.copyLinkLi {
    display: block;
    width: 100%;
    margin: 0;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a {
    display: grid;
    grid-template-columns: 28px 1fr;   /* icon column, label column */
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 8px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lf-ink);
    text-align: left;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a span {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a i {
    font-size: 14px;
    line-height: 1;
}
.lfFeedV2 .Sharing-a-caring .social-icon ul li > a::after {
    justify-self: start;
    align-self: center;
}

/* ===========================================================================
 * Motion and depth.
 *
 * The page read as a static document. These are the smallest moves that make it
 * feel like a live product: content arrives rather than appearing, cards respond
 * to the pointer, the like lands with weight, and the impact numbers count in.
 * Everything here is suppressed under prefers-reduced-motion.
 * =========================================================================== */

/* --- cards arrive, staggered --------------------------------------------- */
@keyframes lfRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.lfFeedV2 .lfCard {
    animation: lfRise .42s cubic-bezier(.22, .8, .3, 1) backwards;
    transition: transform .18s cubic-bezier(.22,.8,.3,1), box-shadow .18s, border-color .18s;
}
/* stagger the first screenful; later cards animate as they are appended */
.lfFeedV2 .lfCard:nth-child(1) { animation-delay: .02s; }
.lfFeedV2 .lfCard:nth-child(2) { animation-delay: .07s; }
.lfFeedV2 .lfCard:nth-child(3) { animation-delay: .12s; }
.lfFeedV2 .lfCard:nth-child(4) { animation-delay: .17s; }
.lfFeedV2 .lfCard:nth-child(n+5) { animation-delay: .2s; }

/* --- cards respond to the pointer ---------------------------------------- */
.lfFeedV2 .lfCard:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lf-accent) 30%, var(--lf-line));
    box-shadow: 0 10px 26px -18px rgba(19, 26, 24, .45),
                0 2px 6px -4px rgba(19, 26, 24, .22);
    z-index: 1;
}

/* the type chip picks up a touch of life on card hover */
.lfFeedV2 .lfCard:hover .lfKind { transform: translateY(-1px); }
.lfFeedV2 .lfKind { transition: transform .18s; }

/* --- the primary action gains weight ------------------------------------- */
.lfFeedV2 .lfCta {
    transition: transform .16s cubic-bezier(.22,.8,.3,1), box-shadow .16s, filter .16s;
    box-shadow: 0 1px 2px rgba(19,26,24,.10);
}
.lfFeedV2 .lfCta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--lf-action, var(--lf-accent)) 70%, transparent);
}
.lfFeedV2 .lfCta:active { transform: translateY(0); }

/* --- the like lands ------------------------------------------------------ */
@keyframes lfPop {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.32); }
    62%  { transform: scale(.94); }
    100% { transform: scale(1); }
}
.lfFeedV2 .lfAction--like.is-on i { animation: lfPop .34s cubic-bezier(.3,1.3,.5,1); }
.lfFeedV2 .lfAction { transition: background .15s, color .15s; }

/* --- chips ---------------------------------------------------------------- */
.lfFeedV2 .lfChip {
    transition: background .16s, border-color .16s, color .16s, transform .12s;
}
.lfFeedV2 .lfChip:active { transform: scale(.97); }
.lfFeedV2 .lfChip.is-active {
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--lf-accent) 75%, transparent);
}

/* --- impact strip: a quiet accent edge, and room for the count-up --------- */
.lfFeedV2 .lfImpact { position: relative; overflow: hidden; }
.lfFeedV2 .lfImpact::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        var(--lf-accent),
        color-mix(in srgb, var(--lf-accent) 35%, transparent));
}
.lfFeedV2 .lfImpact-cell { transition: background .15s; }
.lfFeedV2 .lfImpact-v { font-variant-numeric: tabular-nums; }

/* --- the feed cross-fades when a filter changes -------------------------- */
.lfFeedV2 #all_rows { transition: opacity .18s ease; }
.lfFeedV2 #all_rows.lfSwapping { opacity: .35; }

/* --- rail rows respond too ----------------------------------------------- */
.lfRailV2 #showFeaturedList tbody tr { transition: transform .16s, border-color .16s, background .16s; }
.lfRailV2 #showFeaturedList tbody tr:hover { transform: translateX(2px); }
.lfRailV2 .livefeedTag { transition: background .15s, border-color .15s, color .15s, transform .12s; }
.lfRailV2 .livefeedTag:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
    .lfFeedV2 .lfCard,
    .lfFeedV2 .lfAction--like.is-on i { animation: none; }
    .lfFeedV2 .lfCard,
    .lfFeedV2 .lfCta,
    .lfFeedV2 .lfChip,
    .lfFeedV2 .lfKind,
    .lfFeedV2 #all_rows,
    .lfRailV2 #showFeaturedList tbody tr,
    .lfRailV2 .livefeedTag { transition: none; }
    .lfFeedV2 .lfCard:hover,
    .lfFeedV2 .lfCta:hover,
    .lfRailV2 #showFeaturedList tbody tr:hover { transform: none; }
}


/* ===========================================================================
 * "Also Try" is a section divider, not a card.
 *
 * routes/featuredPost.php emits it as a <tr> holding a single <td> with an
 * <h4>, which the generic row styling turned into an empty bordered box that
 * looked clickable but did nothing. Rows whose only cell contains a heading are
 * headings; rows whose only cell is the "no data" card stay as the empty state.
 * =========================================================================== */
.lfRailV2 #showFeaturedList tbody tr:has(td:only-child h4) {
    display: block;
    border: 0;
    background: transparent;
    padding: 14px 0 0;
    margin: 0;
}
.lfRailV2 #showFeaturedList tbody tr:has(td:only-child h4):hover {
    border: 0;
    background: transparent;
    transform: none;
}
.lfRailV2 #showFeaturedList tbody td:only-child h4 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lf-ink-3);
    margin: 0 0 10px;
    text-align: left;
}

/* ===========================================================================
 * Create card.
 *
 * Shown only where the client's theme flags allow user-generated content, i.e.
 * exactly where the left rail's Create menu appears. The item matching the
 * active feed filter is promoted, so the suggestion follows what you are
 * looking at.
 * =========================================================================== */
.lfCreate {
    background: var(--lf-surface);
    border: 1px solid var(--lf-line);
    border-radius: 12px;
    padding: 13px 14px 8px;
}
.lfCreate .lfRailHeading--tight { margin: 0 0 8px !important; }
.lfCreate-list { display: flex; flex-direction: column; }

.lfCreate-item {
    display: grid;
    grid-template-columns: 28px 1fr 14px;
    align-items: center;
    gap: 11px;
    padding: 8px 6px;
    margin: 0 -6px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--lf-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: background .15s, color .15s;
}
.lfCreate-item:hover,
.lfCreate-item:focus {
    background: var(--lf-accent-bg);
    color: var(--lf-accent-strong);
    text-decoration: none;
}
.lfCreate-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--lf-raise);
    border: 1px solid var(--lf-line-soft);
    color: var(--lf-ink-2);
    font-size: 13px;
    transition: background .15s, border-color .15s, color .15s;
}
.lfCreate-item:hover .lfCreate-icon {
    background: var(--lf-accent);
    border-color: var(--lf-accent);
    color: var(--lf-accent-ink);
}
.lfCreate-go { font-size: 11px; color: var(--lf-ink-3); opacity: 0; transition: opacity .15s, transform .15s; }
.lfCreate-item:hover .lfCreate-go { opacity: 1; transform: translateX(2px); }

/* the action matching the active filter leads */
.lfCreate-item.is-suggested { order: -1; }
.lfCreate-item.is-suggested .lfCreate-icon {
    background: var(--lf-accent-bg);
    border-color: var(--lf-accent-line);
    color: var(--lf-accent-strong);
}

@media (prefers-reduced-motion: reduce) {
    .lfCreate-item, .lfCreate-icon, .lfCreate-go { transition: none; }
    .lfCreate-item:hover .lfCreate-go { transform: none; }
}


/* ===========================================================================
 * Rail: its own scroll region again.
 *
 * The original rail was overflow-auto with a JS-assigned height. Removing that
 * (it was collapsing to 0) also removed the rail's ability to scroll, so the
 * Highlights list sat far below the fold with no way to reach it except
 * scrolling the whole page. Give it back a real scroll region, pinned beside
 * the feed so it stays in view.
 * =========================================================================== */
.lfRailV2 {
    position: sticky;
    top: calc(var(--lf-header-h) + 12px);
    align-self: flex-start;
    max-height: calc(100vh - var(--lf-header-h) - 24px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lf-line) transparent;
    padding-right: 10px;
}
.lfRailV2::-webkit-scrollbar { width: 8px; }
.lfRailV2::-webkit-scrollbar-track { background: transparent; }
.lfRailV2::-webkit-scrollbar-thumb {
    background: var(--lf-line);
    border-radius: 99px;
    border: 2px solid var(--lf-surface);
}
.lfRailV2:hover::-webkit-scrollbar-thumb { background: var(--lf-ink-3); }

/* --- Featured Posts pills were carrying too much air --- */
.lfRailV2 .featuredPostUl { gap: 6px; }
.lfRailV2 .livefeedTag {
    font-size: 12px;
    padding: 5px 11px;
}
.lfRailV2 .lfRailHeading { margin-top: 4px !important; }
.lfRailV2 #popupPosterCarousel2 { margin-top: 4px !important; }
.lfRailV2 { gap: 10px; }

/* ===========================================================================
 * Create card: one action, matched to the filter.
 *
 * Showing four options at all times was noise in a column that also has to fit
 * Featured Posts, a poster and Highlights. When a filter with a matching
 * creation route is active the card collapses to that single action as a full
 * button; otherwise it offers the full set.
 * =========================================================================== */
.lfCreate-item.lfIsHidden { display: none; }

/* single-action state: a real button, not a list row */
.lfCreate.is-focused .lfCreate-list { display: block; }
.lfCreate.is-focused .lfCreate-item {
    grid-template-columns: 22px 1fr;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 9px;
    background: var(--lf-accent);
    color: var(--lf-accent-ink);
    font-size: 14px;
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(19, 26, 24, .10);
}
.lfCreate.is-focused .lfCreate-item:hover {
    background: var(--lf-accent);
    color: var(--lf-accent-ink);
    filter: brightness(1.08);
}
.lfCreate.is-focused .lfCreate-icon {
    width: 22px; height: 22px;
    background: transparent;
    border: 0;
    color: var(--lf-accent-ink);
    font-size: 14px;
}
.lfCreate.is-focused .lfCreate-item:hover .lfCreate-icon {
    background: transparent;
    border: 0;
    color: var(--lf-accent-ink);
}
.lfCreate.is-focused .lfCreate-go { display: none; }


/* ===========================================================================
 * Rail scrolling, done against the layout that is actually there.
 *
 * companyPage.css:1751 sets `.liveProfile .liveFeedRightDiv { position: fixed;
 * right: 0; width: 22% }`. The rail is a fixed sidebar, which is why the old
 * code assigned it a height in JS, and why my position:sticky never applied:
 * that selector is more specific than .lfRailV2.
 *
 * A fixed element with content taller than the viewport and no scroll region
 * simply clips, which is exactly what hid the Highlights list. Keep it fixed,
 * because the feed column's layout assumes the rail is out of flow, and give it
 * a viewport-height scroll region instead.
 *
 * Selector is body.lfPageV2 .lfRailV2 (0,2,1) so it beats the legacy rule.
 * =========================================================================== */
body.lfPageV2 .lfRailV2 {
    position: fixed;
    top: calc(var(--lf-header-h) + 10px);
    height: calc(100vh - var(--lf-header-h) - 20px);
    max-height: none;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 8px;
}

/* Now that the rail is a height-constrained flex column, its children must not
   shrink to fit: flex-shrink defaults to 1, which squashed the poster into a
   strip and let it overlap the pills. Let them keep their size; the rail
   scrolls instead. */
body.lfPageV2 .lfRailV2 > * { flex: 0 0 auto; }


/* ===========================================================================
 * Top navigation alignment.
 *
 * The nav is nested Bootstrap float columns with ad-hoc padding-top values, so
 * its groups sat at four different vertical centres (23.6 / 15 / 30 / 34)
 * against a nav centre of 32. Nothing was actually centred.
 *
 * Flex the three nesting levels that hold the groups and centre them, and drop
 * the padding-top that was doing the skewing. Scoped to body.lfPageV2 so the
 * same shared nav is untouched on every other page; promote it globally once
 * it has been eyeballed elsewhere.
 * =========================================================================== */
/* the left logo cell and the right-hand group keep their widths, everything
   between them shares the remaining space */
/* the account block sits flush right */

/* The nav's right edge now lines up with the rail's content edge, which is the
   rail's box minus the 10px reserved for its scrollbar. */

/* ===========================================================================
 * Rail and feed share a top line.
 *
 * The rail was pinned 10px under the header while the feed column starts 35px
 * under it, so Featured Posts began 25px above the impact strip.
 * =========================================================================== */
body.lfPageV2 .lfRailV2 {
    top: calc(var(--lf-header-h) + 35px);
    height: calc(100vh - var(--lf-header-h) - 45px);
}

/* Centring came from flex, but zeroing the padding-top also collapsed the bar
   from 64px to 50px. Give it its height back explicitly so align-items has
   something to centre within, rather than restoring the padding that was
   skewing the groups in the first place. */

/* The account block is a <table>, whose row box does not participate in the
   flex centring, leaving it 2.5px below the axis. Centre the table itself
   rather than relying on cell vertical-align alone. */


/* ===========================================================================
 * Client themes and the "selected" colour.
 *
 * A client's theme stylesheet is emitted at include/all-css.php line 61, after
 * this file at line 58. Several of them style the rail's tags directly:
 *
 *     theme/Exl/css/style-theme.css:101   .theme-1 .livefeedTag.active  -> #005071
 *     theme/hcl/css/style-theme.css:1768  .theme-1 .livefeedTag.active  -> #0065f5
 *
 * Those selectors are (0,3,0), exactly what .lfRailV2 .livefeedTag.active
 * scores, so they were not overriding on merit — they simply came later in the
 * cascade and won the tie.
 *
 * For HCL that is invisible, because #0065f5 is the accent this file would have
 * used anyway. For EXL it is not: #005071 is their secondary navy, so the rail
 * tag rendered navy while the filter chips and the primary button beside it
 * rendered brand orange. Two different colours, on the same screen, both meaning
 * "selected" — which is what made the page look broken rather than merely
 * off-brand.
 *
 * One selected colour per client, and it is the accent. Scoping these to
 * body.lfPageV2 takes them to (0,4,1), so they win on specificity rather than on
 * position, and a theme loading later cannot silently take them back.
 * =========================================================================== */
body.lfPageV2 .lfRailV2 .livefeedTag:hover {
    background: var(--lf-accent-bg);
    border-color: var(--lf-accent-line);
    color: var(--lf-accent-strong);
}
body.lfPageV2 .lfRailV2 .livefeedTag.active,
body.lfPageV2 .lfRailV2 .livefeedTag.active:hover {
    background: var(--lf-accent);
    border-color: var(--lf-accent);
    color: var(--lf-accent-ink);
}