/*
|--------------------------------------------------------------------------
| FortuneSpace Theme V3 — Pearl Feed & Moments
|--------------------------------------------------------------------------
|
| Phase 1C
|
| Light-theme refinements for:
| - Guest/member feed
| - Pro post cards
| - Moments/news presentation
| - Feed statistics
| - Search UI
| - Floating refresh utility
|
| Midnight is intentionally untouched.
|
*/


/* ================================================================
   LEGACY TOKEN BRIDGE — PEARL FEED ONLY
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark {

  --bg:
    var(--fs-canvas);

  --panel:
    var(--fs-surface);

  --panel-border:
    var(--fs-border);

  --text:
    var(--fs-text);

  --muted:
    var(--fs-text-muted);

  --feed-bg:
    var(--fs-canvas);

  --primary:
    var(--fs-brand);

  --primary-hover:
    var(--fs-brand-hover);

  --link:
    var(--fs-link);


  /*
   * fs-procard legacy tokens.
   */

  --fs-bg:
    var(--fs-surface);

  --fs-bar:
    var(--fs-surface-soft);

  --fs-muted:
    var(--fs-text-muted);

  --fs-line:
    var(--fs-border);

  --fs-pro-border:
    var(--fs-border-strong);
}


/* ================================================================
   REMOVE DARK FEED GUTTERS
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
:is(
  .main-content,
  .feed-container,
  .feed-container .grid
) {
  background:
    transparent !important;
}


/* ================================================================
   PRO POST CARD — PEARL
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
.feed-container
.card.post-card.fs-procardWrap {

  background:
    var(--fs-surface) !important;

  border:
    1px solid var(--fs-border) !important;

  box-shadow:
    0 5px 18px rgba(23,33,26,.055) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.feed-container
.card.post-card.fs-procardWrap:hover {

  border-color:
    var(--fs-border-strong) !important;

  box-shadow:
    0 10px 28px rgba(23,33,26,.075) !important;
}


/* Card content */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__body {

  color:
    var(--fs-text);

  background:
    var(--fs-surface) !important;
}


/* Agency / account bar */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__agencybar {

  background:
    var(--fs-surface-soft) !important;

  border-bottom-color:
    var(--fs-border) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__agencyName {

  color:
    var(--fs-text-secondary) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__agencyStatus {

  color:
    var(--fs-brand-text) !important;

  background:
    var(--fs-brand-soft) !important;

  border-color:
    rgba(22,143,73,.18) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__time {

  color:
    var(--fs-text-muted) !important;
}


/* Author identity */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__name {

  color:
    var(--fs-text) !important;
}


/* Statistics */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__stats {

  color:
    var(--fs-text-muted) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procardWrap .fs-stat {

  color:
    var(--fs-text-muted);
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procardWrap .fs-stat i {

  color:
    var(--fs-text-subtle);
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procardWrap
.fs-stat--followers i {

  color:
    var(--fs-brand) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procardWrap .followers-badge {

  color:
    var(--fs-text-muted) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procardWrap .fs-statDot {

  background:
    rgba(23,33,26,.24) !important;
}


/* Post text */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__text {

  color:
    var(--fs-text-secondary) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__text .more-link {

  color:
    var(--fs-link) !important;
}


/* ================================================================
   PROFILE FAN / AVATAR PRESENTATION
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-fan__main {

  background:
    var(--fs-surface-raised) !important;

  border:
    2px solid var(--fs-surface) !important;

  box-shadow:
    0 8px 20px rgba(23,33,26,.12) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-fan__extra {

  background:
    var(--fs-surface-raised) !important;

  border-color:
    var(--fs-border-strong) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-fan__count {

  color:
    #ffffff !important;

  background:
    var(--fs-brand) !important;

  border-color:
    var(--fs-surface) !important;
}


/* ================================================================
   MEDIA FRAME
   ================================================================ */

/*
 * We intentionally do NOT force the actual photo/video canvas white.
 *
 * Black/neutral letterboxing is useful for media with unusual aspect
 * ratios and should remain cinematic.
 */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__media {

  border-color:
    var(--fs-border) !important;
}


/* Thumbnail tray becomes Pearl rather than Midnight. */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procardWrap .thumbnail-scroll {

  background:
    var(--fs-surface-soft) !important;

  border-top-color:
    var(--fs-border) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procardWrap
.thumbnail-scroll .thumb {

  outline-color:
    var(--fs-border-strong) !important;
}


/*
 * Media view badge stays dark because it overlays unpredictable
 * photographs/video and must remain readable.
 */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-procard__viewsBadge {

  background:
    rgba(15,23,42,.72);

  border-color:
    rgba(255,255,255,.22);

  color:
    #f8fafc;
}


/* ================================================================
   MOMENTS / NEWS HERO
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-section.fs-news {

  color:
    var(--fs-text);
}


/*
 * Pearl atmospheric wash:
 * Fortune green + extremely subtle Fortune gold.
 */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-section.fs-news::before {

  background:
    radial-gradient(
      1000px 460px at 8% 0%,
      rgba(22,143,73,.085),
      transparent 62%
    ),
    radial-gradient(
      760px 380px at 94% 4%,
      rgba(245,197,66,.055),
      transparent 58%
    ) !important;
}


/* Heading system */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-news-kicker-text {

  color:
    var(--fs-brand-text) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-news-line {

  background:
    var(--fs-brand) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-news-title {

  color:
    var(--fs-text) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-news-sub {

  color:
    var(--fs-text-secondary) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-news-side-title {

  color:
    var(--fs-text-secondary) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-news-side-tip {

  color:
    var(--fs-text-muted) !important;
}


/* News navigation */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-control {

  color:
    var(--fs-brand-text) !important;

  background:
    rgba(255,255,255,.88) !important;

  border-color:
    var(--fs-border-strong) !important;

  box-shadow:
    var(--fs-shadow-sm);
}

html[data-fs-theme="light"]
body.feed-surface-dark
.news-control:hover,
html[data-fs-theme="light"]
body.feed-surface-dark
.news-control:focus-visible {

  color:
    #ffffff !important;

  background:
    var(--fs-brand) !important;

  border-color:
    var(--fs-brand) !important;
}


/* ================================================================
   MOMENTS / NEWS CARDS
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
:is(
  .news-card,
  .news-card--featured,
  .news-card--rail
) {

  color:
    var(--fs-text);

  background:
    var(--fs-surface) !important;

  border:
    1px solid var(--fs-border) !important;

  box-shadow:
    0 5px 18px rgba(23,33,26,.055) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
:is(
  .news-card,
  .news-card--featured,
  .news-card--rail
):hover {

  border-color:
    var(--fs-border-strong) !important;

  box-shadow:
    0 10px 28px rgba(23,33,26,.075) !important;
}


/* Card media can use a soft neutral field */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-card__media {

  background:
    var(--fs-surface-raised) !important;
}


/* Remove leftover gray body blocks */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-card__body {

  color:
    var(--fs-text);

  background:
    var(--fs-surface) !important;
}


html[data-fs-theme="light"]
body.feed-surface-dark
.news-card__title {

  color:
    var(--fs-text) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.news-card__summary {

  color:
    var(--fs-text-secondary) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
:is(
  .news-card__time,
  .news-card__views,
  .news-card__updated,
  .news-card__updated-outside,
  .news-card__meta,
  .news-card__actions
) {

  color:
    var(--fs-text-muted) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
:is(
  .news-card__readmore,
  .news-card__link
) {

  color:
    var(--fs-link) !important;
}


/* NEW label — premium neutral overlay */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-card__pill {

  color:
    #ffffff !important;

  background:
    rgba(23,33,26,.78) !important;

  border:
    1px solid rgba(255,255,255,.24);

  box-shadow:
    0 5px 14px rgba(23,33,26,.16);
}


/* ================================================================
   FEED DATABASE / STATISTICS RIBBON
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-stats-ribbon {

  color:
    var(--fs-text-secondary) !important;

  background:
    rgba(255,255,255,.82) !important;

  border:
    1px solid var(--fs-border) !important;

  box-shadow:
    var(--fs-shadow-sm);
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-stats-left {

  color:
    var(--fs-text-muted) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-stats-mid strong {

  color:
    var(--fs-text) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-stats-mid .label,
html[data-fs-theme="light"]
body.feed-surface-dark
.fs-stats-right {

  color:
    var(--fs-text-muted) !important;
}

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-dot {

  background:
    var(--fs-brand) !important;
}


/* ================================================================
   SEARCH — PEARL
   ================================================================ */

html[data-fs-theme="light"] .fs-nudge {

  color:
    var(--fs-text) !important;

  background:
    rgba(255,255,255,.96) !important;

  border:
    1px solid var(--fs-border-strong) !important;

  box-shadow:
    0 8px 26px rgba(23,33,26,.10) !important;
}


html[data-fs-theme="light"] .fs-overlay {

  background:
    rgba(23,33,26,.18) !important;

  -webkit-backdrop-filter:
    blur(5px);

  backdrop-filter:
    blur(5px);
}


html[data-fs-theme="light"] .fs-search-backdrop {

  background:
    rgba(23,33,26,.12) !important;

  -webkit-backdrop-filter:
    blur(4px);

  backdrop-filter:
    blur(4px);
}


html[data-fs-theme="light"] .fs-search-card {

  color:
    var(--fs-text) !important;

  background:
    var(--fs-surface) !important;

  border:
    1px solid var(--fs-border) !important;

  box-shadow:
    0 22px 70px rgba(23,33,26,.16) !important;
}


html[data-fs-theme="light"] #fs-search-input {

  color:
    var(--fs-text) !important;

  background:
    var(--fs-surface-soft) !important;

  border-color:
    var(--fs-border-strong) !important;
}


html[data-fs-theme="light"]
#fs-search-input::placeholder {

  color:
    var(--fs-text-muted) !important;
}


html[data-fs-theme="light"]
.fs-search-tabs button {

  color:
    var(--fs-text-secondary) !important;

  background:
    var(--fs-surface-soft) !important;

  border-color:
    var(--fs-border) !important;
}


html[data-fs-theme="light"]
.fs-search-tabs button.active {

  color:
    var(--fs-brand-text) !important;

  background:
    var(--fs-brand-soft) !important;

  border-color:
    rgba(22,143,73,.28) !important;
}


html[data-fs-theme="light"] .fs-results {

  border-top-color:
    var(--fs-border) !important;
}


html[data-fs-theme="light"] .fs-result {

  color:
    var(--fs-text-secondary);

  border-bottom-color:
    var(--fs-border) !important;
}


html[data-fs-theme="light"] .fs-result:hover {

  background:
    var(--fs-surface-soft) !important;
}


/* Search FAB stays Fortune green */

html[data-fs-theme="light"] #fs-search-fab {

  color:
    #ffffff !important;

  background:
    var(--fs-brand) !important;

  box-shadow:
    0 8px 22px rgba(22,143,73,.20) !important;
}


/* ================================================================
   FLOATING REFRESH — PEARL
   ================================================================ */

html[data-fs-theme="light"]
.floating-refresh-btn {

  background:
    rgba(255,255,255,.96) !important;

  border:
    1px solid var(--fs-border-strong) !important;

  box-shadow:
    0 8px 24px rgba(23,33,26,.11) !important;
}


html[data-fs-theme="light"]
.floating-refresh-btn .refresh-icon {

  fill:
    var(--fs-brand) !important;
}


html[data-fs-theme="light"]
.floating-refresh-btn:hover,
html[data-fs-theme="light"]
.floating-refresh-btn:focus-visible,
html[data-fs-theme="light"]
.floating-refresh-btn.refreshing {

  background:
    var(--fs-brand) !important;

  border-color:
    var(--fs-brand) !important;
}


html[data-fs-theme="light"]
.floating-refresh-btn:hover .refresh-icon,
html[data-fs-theme="light"]
.floating-refresh-btn:focus-visible .refresh-icon,
html[data-fs-theme="light"]
.floating-refresh-btn.refreshing .refresh-icon {

  fill:
    #ffffff !important;
}


/* ================================================================
   FOCUS QUALITY
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
:is(
  .news-control,
  .fs-procard__name,
  .news-card__readmore,
  .news-card__link
):focus-visible {

  outline:
    3px solid rgba(22,143,73,.20);

  outline-offset:
    3px;
}


/* ================================================================
   PHASE 1C.2 — PEARL FEATURED MOMENTS REFINEMENT
   ================================================================ */


/*
 * The legacy desktop news layout deliberately forces the featured
 * column to equal the height of three rail cards.
 *
 * In Midnight this was visually acceptable.
 *
 * In Pearl it exposes a large gray/empty block beneath the featured
 * story. Pearl should let the featured story end naturally.
 */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-section.fs-news--featured-rail
.fs-news-featured {

  background:
    transparent !important;
}


/* Desktop only: release forced featured height. */

@media (min-width: 992px) {

  html[data-fs-theme="light"]
  body.feed-surface-dark
  .news-section.fs-news--featured-rail
  .fs-news-grid {

    align-items:
      start !important;
  }


  html[data-fs-theme="light"]
  body.feed-surface-dark
  .news-section.fs-news--featured-rail
  .fs-news-featured {

    height:
      auto !important;

    min-height:
      0 !important;

    align-self:
      start !important;
  }


  html[data-fs-theme="light"]
  body.feed-surface-dark
  .news-section.fs-news--featured-rail
  .fs-news-featured > .news-card {

    height:
      auto !important;

    min-height:
      0 !important;
  }


  html[data-fs-theme="light"]
  body.feed-surface-dark
  .news-section.fs-news--featured-rail
  .news-card--featured {

    height:
      auto !important;

    min-height:
      0 !important;

    overflow:
      hidden !important;

    background:
      var(--fs-surface) !important;

    border:
      1px solid var(--fs-border) !important;

    border-radius:
      18px !important;

    box-shadow:
      0 6px 20px rgba(23,33,26,.06) !important;
  }


  html[data-fs-theme="light"]
  body.feed-surface-dark
  .news-section.fs-news--featured-rail
  .news-card--featured
  .news-card__body {

    flex:
      0 0 auto !important;

    min-height:
      0 !important;

    background:
      var(--fs-surface) !important;
  }


  /*
   * Keep the three-card rail intact while allowing the featured
   * story to have its own natural content height.
   */

  html[data-fs-theme="light"]
  body.feed-surface-dark
  .news-section.fs-news--featured-rail
  .fs-news-side {

    align-self:
      start !important;
  }
}


/* ================================================================
   PEARL FEATURED CARD DETAILS
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
.news-card--featured
.news-card__footer {

  background:
    transparent !important;
}


html[data-fs-theme="light"]
body.feed-surface-dark
.news-card--featured
.news-card__meta-row {

  color:
    var(--fs-text-muted) !important;
}


html[data-fs-theme="light"]
body.feed-surface-dark
.news-card--featured
.news-card__readmore {

  color:
    var(--fs-link) !important;

  font-weight:
    800;
}


html[data-fs-theme="light"]
body.feed-surface-dark
.news-card--featured
.news-card__readmore:hover {

  color:
    var(--fs-link-hover) !important;
}


/* ================================================================
   PEARL FEED SPACING
   ================================================================ */

html[data-fs-theme="light"]
body.feed-surface-dark
.fs-news-rail {

  padding-bottom:
    8px;
}


html[data-fs-theme="light"]
body.feed-surface-dark
.fs-stats-ribbon {

  margin-top:
    18px;

  border-radius:
    12px;

  overflow:
    hidden;
}


/*
 * Keep Pearl shadows understated.
 * Social content should dominate, not the card chrome.
 */

html[data-fs-theme="light"]
body.feed-surface-dark
.feed-container
.card.post-card.fs-procardWrap {

  box-shadow:
    0 4px 16px rgba(23,33,26,.05) !important;
}


html[data-fs-theme="light"]
body.feed-surface-dark
.feed-container
.card.post-card.fs-procardWrap:hover {

  box-shadow:
    0 8px 24px rgba(23,33,26,.07) !important;
}