/* =============================================================================
   PHASE 2A — SIGNAL SOURCES MOBILE CSS (CANON REBUILD)
   File: assets/css/signal-mobile.css
   Authority: approved canon mobile target image
   ============================================================================= */

@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #04080a !important;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  img, video, canvas, svg {
    max-width: 100%;
    height: auto;
  }

  /* Collapse desktop rail behavior on mobile. */
  .sidebar,
  .side-nav,
  .desktop-sidebar,
  .desktop-nav,
  .left-rail,
  .signal-sidebar,
  .sources-sidebar {
    max-width: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Ensure page shell cannot overflow horizontally. */
  .signal-page,
  .source-page,
  .sources-page,
  .signal-shell,
  .sources-shell,
  .page-shell,
  .app-shell,
  .main-shell,
  .page-content,
  .content-area,
  .main-content,
  main {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Hide broken desktop hero side text / edge elements. */
  .hero-side,
  .hero-left,
  .hero-right,
  .vertical-label,
  .side-label,
  .source-hero-aside,
  .sources-hero-aside,
  .signal-hero-aside,
  .return-to-signal,
  .admin-source-trust,
  .hero-kicker,
  .source-kicker,
  .sources-kicker,
  .source-metric,
  .source-stat,
  .trust-kicker {
    display: none !important;
  }

  /* Canon hero rebuild */
  .signal-canon-hero {
    position: relative;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    min-height: 520px;
    margin: 10px auto 14px;
    border: 1px solid rgba(150, 190, 70, .35);
    border-radius: 16px;
    overflow: hidden;
    background:
      linear-gradient(to bottom, rgba(3,7,9,.14) 0%, rgba(3,7,9,.22) 30%, rgba(3,7,9,.54) 100%),
      url('/assets/images/signal-hero-splash.png') center center / cover no-repeat;
    box-shadow: 0 0 0 1px rgba(55, 90, 40, .18), inset 0 0 30px rgba(0, 0, 0, .22);
  }

  .signal-canon-hero__overlay {
    width: 100%;
    min-height: 520px;
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    background:
      linear-gradient(180deg, rgba(4,8,10,.08) 0%, rgba(4,8,10,.18) 26%, rgba(4,8,10,.34) 50%, rgba(4,8,10,.60) 100%);
  }

  .signal-canon-hero__title {
    max-width: 88%;
    margin: 0;
    color: #f0f1ef;
    font-family: inherit;
    font-size: clamp(36px, 10vw, 58px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: normal;
    word-break: keep-all;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .38);
  }

  .signal-canon-hero__body {
    max-width: 82%;
    margin: 0;
    color: #e6ebe8;
    font-size: clamp(15px, 3.8vw, 19px);
    line-height: 1.55;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .30);
  }

  /* Hide legacy title blocks once canon hero exists. */
  .source-hero,
  .sources-hero,
  .signal-hero,
  .hero,
  .page-hero,
  .source-transparency-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .source-hero > *:not(.signal-canon-hero),
  .sources-hero > *:not(.signal-canon-hero),
  .signal-hero > *:not(.signal-canon-hero),
  .hero > *:not(.signal-canon-hero),
  .page-hero > *:not(.signal-canon-hero),
  .source-transparency-hero > *:not(.signal-canon-hero) {
    display: none !important;
  }

  /* Cards & panels aligned to canon spacing. */
  .label-method,
  .source-label-method,
  .sources-label-method,
  .panel,
  .source-panel,
  .sources-panel,
  .source-card,
  .sources-card,
  .signal-card,
  .source-filter-panel,
  .filters-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 22px 18px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .label-method h2,
  .source-label-method h2,
  .sources-label-method h2,
  .panel h2 {
    font-size: clamp(26px, 7.8vw, 38px) !important;
    line-height: 1.08 !important;
    margin-bottom: 16px !important;
  }

  .label-method p,
  .source-label-method p,
  .sources-label-method p,
  .panel p,
  .source-card p,
  .sources-card p,
  .signal-card p {
    max-width: 100% !important;
    font-size: clamp(14px, 3.9vw, 18px) !important;
    line-height: 1.58 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .label-row,
  .labels-row,
  .source-labels,
  .source-badges,
  .badge-row,
  .filter-row,
  .source-filter-row,
  .source-tabs,
  .source-quicklinks,
  .quicklink-row,
  .source-actions,
  .sources-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .label,
  .badge,
  .pill,
  .source-pill,
  .source-label,
  .source-badge,
  .filter-pill,
  .quicklink,
  .source-tab,
  .source-action,
  .sources-action {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .source-search,
  .sources-search,
  .source-filter,
  .sources-filter,
  .filter-input,
  input[type="search"],
  input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .source-grid,
  .sources-grid,
  .cards-grid,
  .results-grid,
  .source-list,
  .sources-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-bottom-nav,
  .bottom-nav,
  .mobile-nav {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 430px) {
  .signal-canon-hero {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    min-height: 470px;
    margin-top: 8px;
  }

  .signal-canon-hero__overlay {
    min-height: 470px;
    padding: 22px 20px 24px;
  }

  .signal-canon-hero__title {
    max-width: 88%;
    font-size: clamp(34px, 9.2vw, 52px);
    letter-spacing: .09em;
  }

  .signal-canon-hero__body {
    max-width: 84%;
    font-size: clamp(14px, 3.6vw, 17px);
  }

  .label-method,
  .source-label-method,
  .sources-label-method,
  .panel,
  .source-panel,
  .sources-panel,
  .source-card,
  .sources-card,
  .signal-card,
  .source-filter-panel,
  .filters-panel {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 20px 16px !important;
  }
}


/* =============================================================================
   PHASE 2A FOLLOW-UP — CANON HERO CLEANUP / OVERLAP FIX
   Reason:
   - Remove mobile edge text remnants.
   - Prevent duplicate legacy hero from appearing below canon hero.
   - Tighten canon hero and panel spacing.
   - Keep the reviewer-approved asset-backed mobile hero as the only mobile hero.
   ============================================================================= */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  body {
    position: relative !important;
  }

  /* Hard kill the desktop-only fragments that created right-edge vertical text. */
  .hero-side,
  .hero-left,
  .hero-right,
  .hero-aside,
  .hero-copy-side,
  .source-hero-aside,
  .sources-hero-aside,
  .signal-hero-aside,
  .source-hero-copy,
  .sources-hero-copy,
  .source-hero-meta,
  .sources-hero-meta,
  .source-hero-labels,
  .sources-hero-labels,
  .source-hero-sidecopy,
  .sources-hero-sidecopy,
  .return-to-signal,
  .return-to-feed,
  .admin-source-trust,
  .trust-kicker,
  .hero-kicker,
  .source-kicker,
  .sources-kicker,
  .source-metric,
  .source-stat,
  .vertical-label,
  .side-label,
  [class*="vertical"],
  [class*="side-label"],
  [class*="hero-aside"],
  [class*="source-aside"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* If legacy hero text still exists, keep its container from taking extra height. */
  .source-hero,
  .sources-hero,
  .signal-hero,
  .source-transparency-hero,
  .page-hero,
  .hero {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: none !important;
    border: 0 !important;
  }

  .source-hero > :not(.signal-canon-hero),
  .sources-hero > :not(.signal-canon-hero),
  .signal-hero > :not(.signal-canon-hero),
  .source-transparency-hero > :not(.signal-canon-hero),
  .page-hero > :not(.signal-canon-hero),
  .hero > :not(.signal-canon-hero) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Canon hero gets one clean card, not the old hero plus another duplicate title. */
  .signal-canon-hero {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-height: min(74vh, 590px) !important;
    height: auto !important;
    margin: 12px auto 14px !important;
    border-radius: 18px !important;
    background-position: 58% center !important;
    overflow: hidden !important;
  }

  .signal-canon-hero__overlay {
    min-height: min(74vh, 590px) !important;
    padding: 28px 24px 26px !important;
    background:
      linear-gradient(90deg, rgba(3,7,9,.62) 0%, rgba(3,7,9,.40) 44%, rgba(3,7,9,.16) 78%, rgba(3,7,9,.22) 100%),
      linear-gradient(180deg, rgba(3,7,9,.08) 0%, rgba(3,7,9,.18) 48%, rgba(3,7,9,.42) 100%) !important;
  }

  .signal-canon-hero__title {
    max-width: 100% !important;
    font-size: clamp(34px, 8.8vw, 52px) !important;
    line-height: 1.03 !important;
    letter-spacing: .095em !important;
    margin: 0 0 14px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .signal-canon-hero__body {
    max-width: 82% !important;
    font-size: clamp(15px, 3.65vw, 18px) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  /* Pull content up under hero and keep it out from under fixed bottom nav. */
  .label-method,
  .source-label-method,
  .sources-label-method,
  .panel,
  .source-panel,
  .sources-panel,
  .source-card,
  .sources-card,
  .signal-card,
  .source-filter-panel,
  .filters-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 20px !important;
  }

  .source-filter-panel,
  .filters-panel {
    margin-bottom: 14px !important;
  }

  .source-quicklinks,
  .quicklink-row,
  .source-tabs,
  .source-filter-row,
  .filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .source-quicklinks > *,
  .quicklink-row > *,
  .source-tabs > *,
  .source-filter-row > *,
  .filter-row > * {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  main,
  .main-content,
  .page-content,
  .content-area,
  .signal-page,
  .source-page,
  .sources-page {
    padding-bottom: 110px !important;
  }

  .mobile-bottom-nav,
  .bottom-nav,
  .mobile-nav {
    z-index: 500 !important;
  }
}

@media (max-width: 430px) {
  .signal-canon-hero {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-height: min(67vh, 520px) !important;
    background-position: 60% center !important;
  }

  .signal-canon-hero__overlay {
    min-height: min(67vh, 520px) !important;
    padding: 24px 20px 22px !important;
  }

  .signal-canon-hero__title {
    font-size: clamp(32px, 8.2vw, 46px) !important;
    letter-spacing: .08em !important;
  }

  .signal-canon-hero__body {
    max-width: 86% !important;
    font-size: clamp(14px, 3.55vw, 16px) !important;
  }

  .label-method,
  .source-label-method,
  .sources-label-method,
  .panel,
  .source-panel,
  .sources-panel,
  .source-card,
  .sources-card,
  .signal-card,
  .source-filter-panel,
  .filters-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 22px 18px !important;
  }
}

@media (max-width: 380px) {
  .source-quicklinks,
  .quicklink-row,
  .source-tabs,
  .source-filter-row,
  .filter-row {
    grid-template-columns: 1fr !important;
  }
}


/* =============================================================================
   PHASE 2A MOBILE — HERO SPLASH AS MOBILE BACKGROUND
   Direction:
   - Keep the mobile stylesheet architecture intact.
   - Use signal-hero-splash.png as the mobile background instead of a separate hero block.
   - Suppress duplicate mobile hero card/title surfaces that caused height/overlap drift.
   - Mobile-only; no desktop behavior.
   ============================================================================= */

@media (max-width: 900px) {
  html,
  body {
    min-height: 100%;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background-color: #030708 !important;
  }

  body.signal-feed-page,
  body.source-transparency-page,
  body.signal-feed-page.source-transparency-page,
  .signal-page,
  .source-page,
  .sources-page,
  .source-transparency-content,
  .signal-main,
  .source-main {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.42) 0%, rgba(3, 7, 8, 0.66) 36%, rgba(3, 7, 8, 0.90) 100%),
      url('/assets/images/signal-hero-splash.png') center top / cover no-repeat fixed !important;
  }

  /* Remove separate hero surfaces on mobile so the image acts as the page background. */
  .signal-canon-hero,
  .signal-hero-splash,
  .source-hero,
  .sources-hero,
  .signal-hero,
  .source-transparency-hero,
  .page-hero,
  .hero {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Keep the desktop/title header from becoming a second mobile hero. */
  .source-directory-header,
  .signal-header.source-directory-header,
  .signal-hero-stage .source-directory-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Give the first content card canon-like breathing room over the background. */
  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin-top: clamp(220px, 42vh, 420px) !important;
  }

  /* Let glass panels reveal the background without sacrificing readability. */
  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method,
  .source-filter-panel,
  .filters-panel,
  .source-card,
  .sources-card,
  .signal-card,
  .source-panel,
  .sources-panel {
    background:
      linear-gradient(145deg, rgba(7, 15, 15, 0.84) 0%, rgba(2, 8, 9, 0.72) 55%, rgba(5, 16, 12, 0.82) 100%) !important;
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
  }

  main,
  .main-content,
  .page-content,
  .content-area,
  .signal-page,
  .source-page,
  .sources-page,
  .source-transparency-content,
  .signal-main,
  .source-main {
    padding-bottom: 112px !important;
  }
}

@media (max-width: 430px) {
  body.signal-feed-page,
  body.source-transparency-page,
  body.signal-feed-page.source-transparency-page,
  .signal-page,
  .source-page,
  .sources-page,
  .source-transparency-content,
  .signal-main,
  .source-main {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.35) 0%, rgba(3, 7, 8, 0.66) 35%, rgba(3, 7, 8, 0.92) 100%),
      url('/assets/images/signal-hero-splash.png') 58% top / auto 72vh no-repeat fixed !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin-top: clamp(190px, 37vh, 340px) !important;
  }
}


/* =============================================================================
   PHASE 2A EDIT 2B — MOBILE RIGHT-BOUND HERO BACKGROUND REPAIR
   Validation correction:
   - Edit 2 failed because the mobile hero/background was not behaving as right-to-left crop.
   - Edit 3 failed and should be rolled back by restoring desktop CSS to the successful glass/hero state.
   Scope:
   - Mobile right-bound background repair.
   - No PHP/header changes.
   - No desktop background conversion.
   ============================================================================= */

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background-color: #030708 !important;
  }

  body.signal-feed-page,
  body.source-transparency-page,
  body.signal-feed-page.source-transparency-page {
    position: relative !important;
    background: #030708 !important;
  }

  /*
    Use a fixed pseudo-background instead of only background-position on body.
    This avoids mobile browser fixed-background quirks and keeps the image's
    RIGHT EDGE pinned to the viewport. Any crop happens from the LEFT.
  */
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.28) 0%, rgba(3, 7, 8, 0.62) 38%, rgba(3, 7, 8, 0.94) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(76vh, 680px) no-repeat !important;
    transform: translateZ(0);
  }

  /*
    Lift the existing page surfaces above the pseudo-background without
    creating a horizontal layout surface.
  */
  body.signal-feed-page > *,
  body.source-transparency-page > *,
  body.signal-feed-page.source-transparency-page > * {
    position: relative;
    z-index: 1;
  }

  .signal-page,
  .source-page,
  .sources-page,
  .source-transparency-content,
  .signal-main,
  .source-main,
  main,
  .main-content,
  .page-content,
  .content-area {
    max-width: 100vw !important;
    overflow-x: clip !important;
    background: transparent !important;
  }

  /*
    The hero image is now background-only on mobile.
    Hide old hero surfaces and remove their reserved flow height.
  */
  .signal-hero-stage,
  .signal-hero-splash,
  .signal-canon-hero,
  .source-hero,
  .sources-hero,
  .signal-hero,
  .source-transparency-hero,
  .page-hero,
  .hero {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .source-directory-header,
  .signal-header.source-directory-header,
  .signal-hero-stage .source-directory-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /*
    Reduce the old hero gap but keep enough reveal for the background image.
    This directly addresses the flow break reported after background conversion.
  */
  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin-top: clamp(88px, 18vh, 168px) !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method,
  .source-filter-panel,
  .filters-panel,
  .source-card,
  .sources-card,
  .signal-card,
  .source-panel,
  .sources-panel {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main,
  .main-content,
  .page-content,
  .content-area,
  .signal-page,
  .source-page,
  .sources-page,
  .source-transparency-content,
  .signal-main,
  .source-main {
    padding-bottom: 112px !important;
  }
}

@media (max-width: 430px) {
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.24) 0%, rgba(3, 7, 8, 0.64) 36%, rgba(3, 7, 8, 0.95) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(70vh, 560px) no-repeat !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin-top: clamp(72px, 15vh, 132px) !important;
  }
}


/* =============================================================================
   PHASE 2A EDIT 3D — PRESERVE PASSED MOBILE RIGHT-BOUND BACKGROUND
   ============================================================================= */

@media (max-width: 900px) {
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.28) 0%, rgba(3, 7, 8, 0.62) 38%, rgba(3, 7, 8, 0.94) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(76vh, 680px) no-repeat !important;
  }
}


/* =============================================================================
   PHASE 2A EDIT 3E — MOBILE CSS WIRE + HERO STAGE SUPPRESSION
   Validation correction:
   - Desktop Edit 3D passed.
   - Mobile screenshot shows desktop hero stage/title card still rendering.
   - This patch ensures signal-mobile.css is loaded for signal-sources.php and
     applies final mobile-only suppression after all previous mobile rules.
   ============================================================================= */

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background-color: #030708 !important;
  }

  body.signal-feed-page,
  body.source-transparency-page,
  body.signal-feed-page.source-transparency-page {
    position: relative !important;
    background: #030708 !important;
  }

  /*
    Mobile image owner: page-level pseudo-background.
    Right edge pinned; left edge crops first.
  */
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.22) 0%, rgba(3, 7, 8, 0.58) 36%, rgba(3, 7, 8, 0.95) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(72vh, 620px) no-repeat !important;
    transform: translateZ(0);
  }

  body.signal-feed-page > *,
  body.source-transparency-page > *,
  body.signal-feed-page.source-transparency-page > * {
    position: relative;
    z-index: 1;
  }

  /*
    Hard stop: desktop hero stage/title/card must not render on mobile.
    This is intentionally broad because the screenshot shows the desktop
    .signal-hero-stage and .source-directory-header winning on mobile.
  */
  .signal-hero-stage,
  .signal-hero-stage *,
  .signal-hero-splash,
  .signal-hero-splash *,
  .source-directory-header,
  .source-directory-header *,
  .signal-header.source-directory-header,
  .signal-canon-hero,
  .signal-canon-hero *,
  .source-hero,
  .sources-hero,
  .signal-hero,
  .source-transparency-hero,
  .page-hero,
  .hero {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    inset: auto !important;
  }

  .signal-main,
  .source-main,
  .source-transparency-content,
  main,
  .main-content,
  .page-content,
  .content-area {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    background: transparent !important;
    padding-top: 0 !important;
  }

  /*
    The first glass tile should sit over the mobile background without the
    old desktop hero gap/card above it.
  */
  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    margin: clamp(96px, 20vh, 180px) auto 14px !important;
    padding: 22px 18px !important;
  }

  .source-filter-panel,
  .filters-panel,
  .source-card,
  .sources-card,
  .signal-card,
  .source-panel,
  .sources-panel {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 430px) {
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.18) 0%, rgba(3, 7, 8, 0.58) 34%, rgba(3, 7, 8, 0.96) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(66vh, 540px) no-repeat !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin-top: clamp(74px, 16vh, 138px) !important;
  }
}


/* =============================================================================
   PHASE 2A EDIT 3F — MOBILE LINK SYNTAX FIX CONFIRMATION
   The primary fix is in signal-sources.php: the mobile CSS link is now valid HTML.
   These final rules remain as the stylesheet-side fallback.
   ============================================================================= */

@media (max-width: 900px) {
  .signal-hero-stage,
  .signal-hero-stage *,
  .signal-hero-splash,
  .signal-hero-splash *,
  .source-directory-header,
  .source-directory-header *,
  .signal-canon-hero,
  .signal-canon-hero * {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.20) 0%, rgba(3, 7, 8, 0.58) 36%, rgba(3, 7, 8, 0.96) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(66vh, 540px) no-repeat !important;
  }
}


/* =============================================================================
   PHASE 2A EDIT 3G — MOBILE BACKGROUND POSITION + FLOW TUNE
   Validation correction after Edit 3F:
   - Desktop hero title/card is suppressed on mobile now.
   - Remaining issue: background image is too high/dim and leaves a dead gap.
   - This moves the image into the visible content band, reduces overlay opacity,
     and tightens the first glass card spacing.
   ============================================================================= */

@media (max-width: 900px) {
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.08) 0%, rgba(3, 7, 8, 0.28) 34%, rgba(3, 7, 8, 0.82) 100%),
      url('/assets/images/signal-hero-splash.png') right 112px / auto min(88vh, 760px) no-repeat !important;
    opacity: 1 !important;
  }

  .signal-main,
  .source-main,
  .source-transparency-content,
  main,
  .main-content,
  .page-content,
  .content-area {
    background: transparent !important;
    padding-top: 0 !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin-top: clamp(42px, 8vh, 92px) !important;
  }

  .source-filter-panel,
  .filters-panel {
    margin-top: 14px !important;
  }
}

@media (max-width: 430px) {
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.06) 0%, rgba(3, 7, 8, 0.28) 32%, rgba(3, 7, 8, 0.86) 100%),
      url('/assets/images/signal-hero-splash.png') right 96px / auto min(82vh, 680px) no-repeat !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin-top: clamp(34px, 7vh, 74px) !important;
  }
}


/* =============================================================================
   PHASE 2A EDIT 3H — MOBILE SURFACE BACKGROUND + INLINE GAP FIX
   Validation correction:
   - Edit 3G still showed a dead dark gap because the older inline fallback
     in signal-sources.php was winning over external CSS.
   - This external block mirrors the corrected inline fallback.
   ============================================================================= */

@media (max-width: 900px) {
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.08) 0%, rgba(3, 7, 8, 0.30) 35%, rgba(3, 7, 8, 0.88) 100%),
      url('/assets/images/signal-hero-splash.png') right 84px / auto min(88vh, 760px) no-repeat !important;
  }

  .signal-main,
  .source-main,
  .source-transparency-content,
  main,
  .main-content,
  .page-content,
  .content-area {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.10) 0%, rgba(3, 7, 8, 0.34) 34%, rgba(3, 7, 8, 0.86) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(86vh, 720px) no-repeat !important;
    padding-top: 0 !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin: clamp(20px, 4.5vh, 48px) auto 14px !important;
  }
}

@media (max-width: 430px) {
  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.06) 0%, rgba(3, 7, 8, 0.28) 35%, rgba(3, 7, 8, 0.88) 100%),
      url('/assets/images/signal-hero-splash.png') right 70px / auto min(82vh, 660px) no-repeat !important;
  }

  .signal-main,
  .source-main,
  .source-transparency-content,
  main,
  .main-content,
  .page-content,
  .content-area {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.08) 0%, rgba(3, 7, 8, 0.32) 34%, rgba(3, 7, 8, 0.88) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(80vh, 640px) no-repeat !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin: clamp(18px, 4vh, 42px) auto 14px !important;
  }
}


/* =============================================================================
   PHASE 2A EDIT 3I — MOBILE SHELL-SURFACE HERO BACKGROUND
   Mirrors the desktop-passed Edit 3D approach on mobile:
   - apply signal-hero-splash.png to real shell/content surfaces
   - keep hero stage/card/title hidden
   - keep glass cards bleeding over the shared image layer
   ============================================================================= */

@media (max-width: 900px) {
  body.signal-feed-page .site-shell,
  body.source-transparency-page .site-shell,
  body.signal-feed-page .layout-shell,
  body.source-transparency-page .layout-shell,
  body.signal-feed-page .page-shell,
  body.source-transparency-page .page-shell,
  body.signal-feed-page .content-shell,
  body.source-transparency-page .content-shell,
  body.signal-feed-page .main-shell,
  body.source-transparency-page .main-shell,
  body.signal-feed-page .site-main,
  body.source-transparency-page .site-main,
  body.signal-feed-page main,
  body.source-transparency-page main,
  body.signal-feed-page .main-content,
  body.source-transparency-page .main-content,
  body.signal-feed-page .page-content,
  body.source-transparency-page .page-content,
  body.signal-feed-page .content-area,
  body.source-transparency-page .content-area,
  body.signal-feed-page .signal-main,
  body.source-transparency-page .signal-main,
  body.signal-feed-page .source-main,
  body.source-transparency-page .source-main,
  body.signal-feed-page .source-transparency-content,
  body.source-transparency-page .source-transparency-content {
    background:
      linear-gradient(90deg, rgba(3, 7, 8, 0.58) 0%, rgba(3, 7, 8, 0.24) 42%, rgba(3, 7, 8, 0.18) 100%),
      linear-gradient(180deg, rgba(3, 7, 8, 0.05) 0%, rgba(3, 7, 8, 0.26) 34%, rgba(3, 7, 8, 0.86) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(86vh, 720px) no-repeat !important;
    background-color: transparent !important;
    background-attachment: scroll !important;
  }

  body.signal-feed-page::before,
  body.source-transparency-page::before,
  body.signal-feed-page.source-transparency-page::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 8, 0.08) 0%, rgba(3, 7, 8, 0.30) 35%, rgba(3, 7, 8, 0.88) 100%),
      url('/assets/images/signal-hero-splash.png') right 70px / auto min(84vh, 700px) no-repeat !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin: clamp(12px, 3vh, 34px) auto 14px !important;
  }
}

@media (max-width: 430px) {
  body.signal-feed-page .site-shell,
  body.source-transparency-page .site-shell,
  body.signal-feed-page .layout-shell,
  body.source-transparency-page .layout-shell,
  body.signal-feed-page .page-shell,
  body.source-transparency-page .page-shell,
  body.signal-feed-page .content-shell,
  body.source-transparency-page .content-shell,
  body.signal-feed-page .main-shell,
  body.source-transparency-page .main-shell,
  body.signal-feed-page .site-main,
  body.source-transparency-page .site-main,
  body.signal-feed-page main,
  body.source-transparency-page main,
  body.signal-feed-page .main-content,
  body.source-transparency-page .main-content,
  body.signal-feed-page .page-content,
  body.source-transparency-page .page-content,
  body.signal-feed-page .content-area,
  body.source-transparency-page .content-area,
  body.signal-feed-page .signal-main,
  body.source-transparency-page .signal-main,
  body.signal-feed-page .source-main,
  body.source-transparency-page .source-main,
  body.signal-feed-page .source-transparency-content,
  body.source-transparency-page .source-transparency-content {
    background:
      linear-gradient(90deg, rgba(3, 7, 8, 0.56) 0%, rgba(3, 7, 8, 0.24) 42%, rgba(3, 7, 8, 0.18) 100%),
      linear-gradient(180deg, rgba(3, 7, 8, 0.05) 0%, rgba(3, 7, 8, 0.26) 34%, rgba(3, 7, 8, 0.88) 100%),
      url('/assets/images/signal-hero-splash.png') right top / auto min(80vh, 640px) no-repeat !important;
  }

  .source-method-panel,
  .label-method,
  .source-label-method,
  .sources-label-method {
    margin: clamp(10px, 2.6vh, 28px) auto 14px !important;
  }
}