/* Float UI Framework v1
   Small local component layer loaded last.
   Purpose: stop legacy app.css from breaking saved post typography/layout.
   Scope: saved post pages only via .fx-post-page.
*/

.fx-post-page,
.fx-post-page * {
  box-sizing: border-box;
}

.fx-post-page {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: 1120px !important;
  margin: 24px auto 80px !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
}

/* Main header card */
.fx-post-page .fx-post-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1120px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto 44px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid rgba(142, 183, 255, 0.22) !important;
  background: #050914 !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38) !important;
  isolation: isolate !important;
  transform: none !important;
}

/* Media zone */
.fx-post-page .fx-post-media {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 26px 26px 0 0 !important;
  background: #050914 !important;
  z-index: 1 !important;
  contain: layout paint !important;
}

/* Lock every depth/image layer into media only */
.fx-post-page .fx-post-media > img.stream-hero-img,
.fx-post-page .fx-post-media .stream-hero-img,
.fx-post-page .fx-post-media .article-hero-image,
.fx-post-page .fx-post-media .v31-depth-fx-wrap,
.fx-post-page .fx-post-media .v31-depth-fx-active,
.fx-post-page .fx-post-media .v31-depth-fx-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transform-origin: center center !important;
}

/* Orbit button: top-left of image */
.fx-post-page .fx-post-media [data-post-depth-orbit-toggle],
.fx-post-page [data-post-depth-orbit-toggle] {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147482000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 86px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(180, 210, 255, 0.32) !important;
  background: rgba(4, 8, 15, 0.78) !important;
  color: rgba(238, 244, 255, 0.96) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  white-space: nowrap !important;
  font: 900 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

/* Copy zone: normal flow, no overlays */
.fx-post-page .fx-post-copy {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 6vw, 72px) clamp(52px, 6vw, 84px) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(104, 145, 255, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(5, 8, 15, 0.98), rgba(5, 8, 15, 0.995)) !important;
  border-top: 1px solid rgba(142, 183, 255, 0.14) !important;
  transform: none !important;
  translate: none !important;
  clear: both !important;
  z-index: 4 !important;
  contain: none !important;
}

/* Text primitives */
.fx-post-page .fx-eyebrow,
.fx-post-page .fx-title,
.fx-post-page .fx-lead {
  position: static !important;
  inset: auto !important;
  display: block !important;
  float: none !important;
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  translate: none !important;
  text-shadow: none !important;
  contain: none !important;
}

.fx-post-page .fx-eyebrow {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  color: #8eb7ff !important;
  font: 900 0.78rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.fx-post-page .fx-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #f6f8ff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 950 !important;
  font-size: clamp(2.15rem, 4.6vw, 4.75rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

.fx-post-page .fx-lead {
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  color: rgba(206, 226, 255, 0.92) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem) !important;
  line-height: 1.58 !important;
}

/* Downstream content */
.fx-post-page > .feed-detail-card,
.fx-post-page > .prose {
  position: relative !important;
  z-index: 2 !important;
  width: min(900px, calc(100% - 48px)) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  clear: both !important;
}

.fx-post-page > .feed-detail-card {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .fx-post-page {
    width: calc(100vw - 24px) !important;
    margin-top: 16px !important;
  }

  .fx-post-page .fx-post-hero {
    border-radius: 20px !important;
    margin-bottom: 32px !important;
  }

  .fx-post-page .fx-post-media {
    aspect-ratio: 4 / 3 !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .fx-post-page .fx-post-copy {
    padding: 24px 18px 48px !important;
  }

  .fx-post-page .fx-eyebrow,
  .fx-post-page .fx-title,
  .fx-post-page .fx-lead {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fx-post-page .fx-title {
    font-size: clamp(2rem, 9.6vw, 3.55rem) !important;
    line-height: 1.06 !important;
  }

  .fx-post-page .fx-lead {
    margin-top: 18px !important;
    font-size: 1.04rem !important;
    line-height: 1.55 !important;
  }

  .fx-post-page > .feed-detail-card,
  .fx-post-page > .prose {
    width: calc(100% - 28px) !important;
  }

  .fx-post-page [data-post-depth-orbit-toggle] {
    top: 10px !important;
    left: 10px !important;
  }
}


/* Normal uploaded/admin post image support.
   These posts must not be touched by the Depth FX renderer. */
.fx-post-page .fx-post-standard {
  overflow: hidden !important;
}

.fx-post-page .fx-post-standard .fx-post-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #050914 !important;
}

.fx-post-page .fx-post-standard .post-standard-img,
.fx-post-page .fx-post-standard .article-hero-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

/* If a post is normal, no orbit/depth controls should appear even if stale CSS exists. */
.fx-post-page .fx-post-standard [data-post-depth-orbit-toggle],
.fx-post-page .fx-post-standard .post-depth-hero-caption,
.fx-post-page .fx-post-standard .v31-depth-fx-wrap,
.fx-post-page .fx-post-standard .v31-depth-fx-canvas {
  display: none !important;
}


/* Depth FX card integrity fallback.
   A failed depth canvas must not collapse a snap card or saved-post hero. */
.stream-candidate-card.depth-fx-fallback,
.post-depth-hero.depth-fx-fallback,
.post-standard-header-card.depth-fx-fallback {
  min-height: var(--depth-card-min-h, 320px) !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

.stream-candidate-card.depth-fx-fallback .post-stream-media-frame,
.stream-candidate-card.depth-fx-fallback .fx-post-media,
.post-depth-hero.depth-fx-fallback .post-stream-media-frame,
.post-depth-hero.depth-fx-fallback .fx-post-media {
  min-height: var(--depth-media-min-h, 220px) !important;
}

.depth-fx-fallback .v31-depth-fx-wrap,
.depth-fx-fallback .v31-depth-fx-active,
.depth-fx-fallback .v31-depth-fx-canvas {
  display: none !important;
}

.depth-fx-fallback img.stream-hero-img,
.depth-fx-fallback img.article-hero-image,
.depth-fx-fallback img.post-standard-img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* Depth FX non-destructive base v1
   The original image/card must survive even when the FX canvas fails. */
.depth-fx-non-destructive-card {
  min-height: var(--depth-non-destructive-card-min-h, auto) !important;
}

.depth-fx-non-destructive-media {
  min-height: var(--depth-non-destructive-media-min-h, auto) !important;
  overflow: hidden !important;
}

.depth-fx-preserved-original,
.depth-fx-non-destructive-card img.stream-hero-img,
.depth-fx-non-destructive-card img.article-hero-image,
.depth-fx-non-destructive-card img.post-standard-img {
  display: block !important;
  visibility: visible !important;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card.depth-fx-non-destructive-card,
  .post-depth-hero.depth-fx-non-destructive-card {
    min-height: var(--depth-non-destructive-card-min-h, 420px) !important;
  }

  .depth-fx-non-destructive-media {
    min-height: var(--depth-non-destructive-media-min-h, 220px) !important;
  }
}


/* Depth FX mobile single canvas gate v1 */
@media (pointer: coarse), (max-width: 920px) {
  .depth-fx-mobile-held-card img.stream-hero-img,
  .depth-fx-mobile-held-card img.article-hero-image {
    display: block !important;
    visibility: visible !important;
  }

  .depth-fx-mobile-held-card .v31-depth-fx-wrap,
  .depth-fx-mobile-held-card .v31-depth-fx-active,
  .depth-fx-mobile-held-card .v31-depth-fx-canvas {
    display: none !important;
  }
}


/* Depth stable reset v1
   Keep the original image/card alive. Depth canvas is an enhancement only. */
.stream-candidate-card img.stream-hero-img,
.post-depth-hero img.stream-hero-img,
.post-depth-hero img.article-hero-image,
.post-standard-header-card img.article-hero-image,
.post-standard-header-card img.post-standard-img {
  visibility: visible;
}

.stream-candidate-card,
.post-depth-hero,
.post-standard-header-card {
  min-height: var(--depth-card-safe-min-h, auto);
}

.post-stream-media-frame,
.fx-post-media {
  overflow: hidden;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card,
  .post-depth-hero {
    min-height: var(--depth-card-safe-min-h, 420px);
  }

  .post-stream-media-frame,
  .fx-post-media {
    min-height: var(--depth-media-safe-min-h, 220px);
  }
}


/* Depth worker/admin stability v1 */
.stream-candidate-card img.stream-hero-img,
.post-depth-hero img.stream-hero-img,
.post-depth-hero img.article-hero-image,
.post-standard-header-card img.article-hero-image,
.post-standard-header-card img.post-standard-img {
  visibility: visible;
}

.post-stream-media-frame,
.fx-post-media {
  overflow: hidden;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card,
  .post-depth-hero {
    min-height: var(--depth-card-safe-min-h, 420px);
  }

  .post-stream-media-frame,
  .fx-post-media {
    min-height: var(--depth-media-safe-min-h, 220px);
  }
}


/* Depth FX image presence gate v1 */
.depth-image-gate-media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 220px;
  background: #050914;
}

.depth-image-gate-created,
.depth-image-gate-preserved,
.stream-candidate-card img.stream-hero-img,
.post-depth-hero img.stream-hero-img,
.post-depth-hero img.article-hero-image {
  display: block;
  visibility: visible;
}

.stream-candidate-card[data-v31-depth-fx-status="image-only"] .v31-depth-fx-wrap,
.stream-candidate-card[data-v31-depth-fx-status="image-only"] .v31-depth-fx-active,
.stream-candidate-card[data-v31-depth-fx-status="image-only"] .v31-depth-fx-canvas,
.post-depth-hero[data-v31-depth-fx-status="image-only"] .v31-depth-fx-wrap,
.post-depth-hero[data-v31-depth-fx-status="image-only"] .v31-depth-fx-active,
.post-depth-hero[data-v31-depth-fx-status="image-only"] .v31-depth-fx-canvas {
  display: none !important;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card,
  .post-depth-hero {
    min-height: var(--depth-card-safe-min-h, 420px);
  }

  .post-stream-media-frame,
  .fx-post-media,
  .stream-hero-media,
  .depth-image-gate-media {
    min-height: var(--depth-media-safe-min-h, 220px);
    overflow: hidden;
  }
}




/* Article Feed Real Image Filter v2
   Do not display:none rejected cards immediately; that causes scroll-snap jumps.
   JS removes rejected cards only when offscreen. */
.stream-candidate-card.stream-candidate-card-no-real-image-v2 {
  opacity: 0.45;
  filter: grayscale(0.35);
}

.stream-candidate-card.stream-candidate-card-no-real-image-v2::after {
  content: "Loading next article image…";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: rgba(255,255,255,0.86);
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(10px);
}